19 lines
2.9 KiB
JSON
19 lines
2.9 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "headless-checkbox",
|
|
"type": "registry:ui",
|
|
"title": "Headless Checkbox",
|
|
"description": "Checkboxes provide the same functionality as native HTML checkboxes, without any of the styling, giving you a clean slate to design them however you'd like.",
|
|
"dependencies": [
|
|
"@headlessui/react",
|
|
"motion"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/headless/checkbox/index.tsx",
|
|
"content": "'use client';\n\nimport * as React from 'react';\nimport {\n Checkbox as CheckboxPrimitive,\n type CheckboxProps as CheckboxPrimitiveProps,\n} from '@headlessui/react';\nimport { motion, type HTMLMotionProps } from 'motion/react';\n\nimport { cn } from '@/lib/utils';\n\ntype CheckboxProps<TTag extends React.ElementType = typeof motion.button> =\n CheckboxPrimitiveProps<TTag> &\n Omit<\n HTMLMotionProps<'button'>,\n 'checked' | 'onChange' | 'defaultChecked' | 'children'\n > & {\n as?: TTag;\n };\n\nfunction Checkbox<TTag extends React.ElementType = typeof motion.button>(\n props: CheckboxProps<TTag>,\n) {\n const { className, as = motion.button, ...rest } = props;\n\n return (\n <CheckboxPrimitive\n data-slot=\"checkbox\"\n whileTap={{ scale: 0.95 }}\n whileHover={{ scale: 1.05 }}\n {...rest}\n className={cn(\n 'peer size-5 flex items-center justify-center shrink-0 rounded-sm bg-input transition-colors duration-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[checked]:bg-primary data-[checked]:text-primary-foreground',\n className,\n )}\n as={as as React.ElementType}\n >\n {({ checked }) => (\n <motion.svg\n data-slot=\"checkbox-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n strokeWidth=\"3.5\"\n stroke=\"currentColor\"\n className=\"size-3.5\"\n initial=\"unchecked\"\n animate={checked ? 'checked' : 'unchecked'}\n >\n <motion.path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n d=\"M4.5 12.75l6 6 9-13.5\"\n variants={{\n checked: {\n pathLength: 1,\n opacity: 1,\n transition: {\n duration: 0.2,\n delay: 0.2,\n },\n },\n unchecked: {\n pathLength: 0,\n opacity: 0,\n transition: {\n duration: 0.2,\n },\n },\n }}\n />\n </motion.svg>\n )}\n </CheckboxPrimitive>\n );\n}\n\nexport { Checkbox, type CheckboxProps };\n",
|
|
"type": "registry:ui",
|
|
"target": "components/animate-ui/headless/checkbox.tsx"
|
|
}
|
|
]
|
|
} |