19 lines
3.2 KiB
JSON
19 lines
3.2 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "radix-checkbox",
|
|
"type": "registry:ui",
|
|
"title": "Checkbox",
|
|
"description": "A control that allows the user to toggle between checked and not checked.",
|
|
"dependencies": [
|
|
"motion",
|
|
"radix-ui"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/radix/checkbox/index.tsx",
|
|
"content": "'use client';\n\nimport * as React from 'react';\nimport { Checkbox as CheckboxPrimitive } from 'radix-ui';\nimport { motion, type HTMLMotionProps } from 'motion/react';\n\nimport { cn } from '@/lib/utils';\n\ntype CheckboxProps = React.ComponentProps<typeof CheckboxPrimitive.Root> &\n HTMLMotionProps<'button'>;\n\nfunction Checkbox({ className, onCheckedChange, ...props }: CheckboxProps) {\n const [isChecked, setIsChecked] = React.useState(\n props?.checked ?? props?.defaultChecked ?? false,\n );\n\n React.useEffect(() => {\n if (props?.checked !== undefined) setIsChecked(props.checked);\n }, [props?.checked]);\n\n const handleCheckedChange = React.useCallback(\n (checked: boolean) => {\n setIsChecked(checked);\n onCheckedChange?.(checked);\n },\n [onCheckedChange],\n );\n\n return (\n <CheckboxPrimitive.Root\n {...props}\n onCheckedChange={handleCheckedChange}\n asChild\n >\n <motion.button\n data-slot=\"checkbox\"\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-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n className,\n )}\n whileTap={{ scale: 0.95 }}\n whileHover={{ scale: 1.05 }}\n {...props}\n >\n <CheckboxPrimitive.Indicator forceMount asChild>\n <motion.svg\n data-slot=\"checkbox-indicator\"\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={isChecked ? '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 </CheckboxPrimitive.Indicator>\n </motion.button>\n </CheckboxPrimitive.Root>\n );\n}\n\nexport { Checkbox, type CheckboxProps };\n",
|
|
"type": "registry:ui",
|
|
"target": "components/animate-ui/radix/checkbox.tsx"
|
|
}
|
|
]
|
|
} |