20 lines
3.2 KiB
JSON
20 lines
3.2 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "radix-radio-group",
|
|
"type": "registry:ui",
|
|
"title": "Radio Group",
|
|
"description": "A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.",
|
|
"dependencies": [
|
|
"motion",
|
|
"lucide-react",
|
|
"radix-ui"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/radix/radio-group/index.tsx",
|
|
"content": "'use client';\n\nimport * as React from 'react';\nimport { RadioGroup as RadioGroupPrimitive } from 'radix-ui';\nimport { Circle } from 'lucide-react';\nimport {\n AnimatePresence,\n motion,\n type HTMLMotionProps,\n type Transition,\n} from 'motion/react';\n\nimport { cn } from '@/lib/utils';\n\ntype RadioGroupProps = React.ComponentProps<typeof RadioGroupPrimitive.Root> & {\n transition?: Transition;\n};\n\nfunction RadioGroup({ className, ...props }: RadioGroupProps) {\n return (\n <RadioGroupPrimitive.Root\n data-slot=\"radio-group\"\n className={cn('grid gap-2.5', className)}\n {...props}\n />\n );\n}\n\ntype RadioGroupIndicatorProps = React.ComponentProps<\n typeof RadioGroupPrimitive.Indicator\n> & {\n transition: Transition;\n};\n\nfunction RadioGroupIndicator({\n className,\n transition,\n ...props\n}: RadioGroupIndicatorProps) {\n return (\n <RadioGroupPrimitive.Indicator\n data-slot=\"radio-group-indicator\"\n className={cn('flex items-center justify-center', className)}\n {...props}\n >\n <AnimatePresence>\n <motion.div\n key=\"radio-group-indicator-circle\"\n data-slot=\"radio-group-indicator-circle\"\n initial={{ opacity: 0, scale: 0 }}\n animate={{ opacity: 1, scale: 1 }}\n exit={{ opacity: 0, scale: 0 }}\n transition={transition}\n >\n <Circle className=\"size-3 fill-current text-current\" />\n </motion.div>\n </AnimatePresence>\n </RadioGroupPrimitive.Indicator>\n );\n}\n\ntype RadioGroupItemProps = React.ComponentProps<\n typeof RadioGroupPrimitive.Item\n> &\n HTMLMotionProps<'button'> & {\n transition?: Transition;\n };\n\nfunction RadioGroupItem({\n className,\n transition = { type: 'spring', stiffness: 200, damping: 16 },\n ...props\n}: RadioGroupItemProps) {\n return (\n <RadioGroupPrimitive.Item asChild {...props}>\n <motion.button\n data-slot=\"radio-group-item\"\n className={cn(\n 'aspect-square size-5 rounded-full flex items-center justify-center border border-input text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',\n className,\n )}\n whileHover={{ scale: 1.05 }}\n whileTap={{ scale: 0.95 }}\n {...props}\n >\n <RadioGroupIndicator\n data-slot=\"radio-group-item-indicator\"\n transition={transition}\n />\n </motion.button>\n </RadioGroupPrimitive.Item>\n );\n}\n\nexport {\n RadioGroup,\n RadioGroupItem,\n type RadioGroupProps,\n type RadioGroupItemProps,\n};\n",
|
|
"type": "registry:ui",
|
|
"target": "components/animate-ui/radix/radio-group.tsx"
|
|
}
|
|
]
|
|
} |