19 lines
3.4 KiB
JSON
19 lines
3.4 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "base-checkbox",
|
|
"type": "registry:ui",
|
|
"title": "Base Checkbox",
|
|
"description": "An easily stylable checkbox component.",
|
|
"dependencies": [
|
|
"motion",
|
|
"@base-ui-components/react"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/base/checkbox/index.tsx",
|
|
"content": "'use client';\n\nimport * as React from 'react';\nimport { Checkbox as CheckboxPrimitive } from '@base-ui-components/react/checkbox';\nimport { type HTMLMotionProps, motion } from 'motion/react';\n\nimport { cn } from '@/lib/utils';\n\ntype CheckboxProps = Omit<\n React.ComponentProps<typeof CheckboxPrimitive.Root>,\n 'render'\n> & {\n motionProps?: HTMLMotionProps<'button'>;\n};\n\nfunction Checkbox({\n className,\n onCheckedChange,\n motionProps,\n ...props\n}: 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, event: Event) => {\n setIsChecked(checked);\n onCheckedChange?.(checked, event);\n },\n [onCheckedChange],\n );\n\n return (\n <CheckboxPrimitive.Root\n data-slot=\"checkbox\"\n className={cn(\n 'peer shrink-0 flex items-center justify-center outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 disabled:cursor-not-allowed disabled:opacity-50 transition-colors duration-500',\n 'size-5 rounded-sm bg-input focus-visible:ring-offset-2 data-[checked]:bg-primary data-[checked]:text-primary-foreground',\n className,\n )}\n {...props}\n onCheckedChange={handleCheckedChange}\n render={\n <motion.button\n whileTap={{ scale: 0.95 }}\n whileHover={{ scale: 1.05 }}\n {...motionProps}\n />\n }\n >\n <CheckboxPrimitive.Indicator\n keepMounted\n data-slot=\"checkbox-indicator\"\n className=\"flex items-center justify-center text-current transition-none\"\n >\n <motion.svg\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 </CheckboxPrimitive.Root>\n );\n}\n\nCheckbox.displayName = CheckboxPrimitive.Root.displayName;\n\nexport { Checkbox, type CheckboxProps };\n",
|
|
"type": "registry:ui",
|
|
"target": "components/animate-ui/base/checkbox.tsx"
|
|
}
|
|
]
|
|
} |