19 lines
4.3 KiB
JSON
19 lines
4.3 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "radix-switch",
|
|
"type": "registry:ui",
|
|
"title": "Radix Switch",
|
|
"description": "A control that allows the user to toggle between checked and not checked.",
|
|
"dependencies": [
|
|
"motion",
|
|
"radix-ui"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/radix/switch/index.tsx",
|
|
"content": "'use client';\n\nimport * as React from 'react';\nimport { Switch as SwitchPrimitives } from 'radix-ui';\nimport { motion, type HTMLMotionProps } from 'motion/react';\n\nimport { cn } from '@/lib/utils';\n\ntype SwitchProps = React.ComponentProps<typeof SwitchPrimitives.Root> &\n HTMLMotionProps<'button'> & {\n leftIcon?: React.ReactNode;\n rightIcon?: React.ReactNode;\n thumbIcon?: React.ReactNode;\n };\n\nfunction Switch({\n className,\n leftIcon,\n rightIcon,\n thumbIcon,\n onCheckedChange,\n ...props\n}: SwitchProps) {\n const [isChecked, setIsChecked] = React.useState(\n props?.checked ?? props?.defaultChecked ?? false,\n );\n const [isTapped, setIsTapped] = React.useState(false);\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 <SwitchPrimitives.Root\n {...props}\n onCheckedChange={handleCheckedChange}\n asChild\n >\n <motion.button\n data-slot=\"switch\"\n className={cn(\n 'relative flex p-[3px] h-6 w-10 shrink-0 cursor-pointer items-center rounded-full transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input data-[state=checked]:justify-end data-[state=unchecked]:justify-start',\n className,\n )}\n whileTap=\"tap\"\n initial={false}\n onTapStart={() => setIsTapped(true)}\n onTapCancel={() => setIsTapped(false)}\n onTap={() => setIsTapped(false)}\n {...props}\n >\n {leftIcon && (\n <motion.div\n data-slot=\"switch-left-icon\"\n animate={\n isChecked ? { scale: 1, opacity: 1 } : { scale: 0, opacity: 0 }\n }\n transition={{ type: 'spring', bounce: 0 }}\n className=\"absolute [&_svg]:size-3 left-1 top-1/2 -translate-y-1/2 dark:text-neutral-500 text-neutral-400\"\n >\n {typeof leftIcon !== 'string' ? leftIcon : null}\n </motion.div>\n )}\n\n {rightIcon && (\n <motion.div\n data-slot=\"switch-right-icon\"\n animate={\n isChecked ? { scale: 0, opacity: 0 } : { scale: 1, opacity: 1 }\n }\n transition={{ type: 'spring', bounce: 0 }}\n className=\"absolute [&_svg]:size-3 right-1 top-1/2 -translate-y-1/2 dark:text-neutral-400 text-neutral-500\"\n >\n {typeof rightIcon !== 'string' ? rightIcon : null}\n </motion.div>\n )}\n\n <SwitchPrimitives.Thumb asChild>\n <motion.div\n data-slot=\"switch-thumb\"\n whileTap=\"tab\"\n className={cn(\n 'relative z-[1] [&_svg]:size-3 flex items-center justify-center rounded-full bg-background shadow-lg ring-0 dark:text-neutral-400 text-neutral-500',\n )}\n layout\n transition={{ type: 'spring', stiffness: 300, damping: 25 }}\n style={{\n width: 18,\n height: 18,\n }}\n animate={\n isTapped\n ? { width: 21, transition: { duration: 0.1 } }\n : { width: 18, transition: { duration: 0.1 } }\n }\n >\n {thumbIcon && typeof thumbIcon !== 'string' ? thumbIcon : null}\n </motion.div>\n </SwitchPrimitives.Thumb>\n </motion.button>\n </SwitchPrimitives.Root>\n );\n}\n\nexport { Switch, type SwitchProps };\n",
|
|
"type": "registry:ui",
|
|
"target": "components/animate-ui/radix/switch.tsx"
|
|
}
|
|
]
|
|
} |