22 lines
2.8 KiB
JSON
22 lines
2.8 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "counter",
|
|
"type": "registry:ui",
|
|
"title": "Counter",
|
|
"description": "A numeric input control featuring increment and decrement buttons, smoothly animating number transitions using the SlidingNumber component.",
|
|
"dependencies": [
|
|
"motion"
|
|
],
|
|
"registryDependencies": [
|
|
"button",
|
|
"https://animate-ui.com/r/sliding-number"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/components/counter/index.tsx",
|
|
"content": "'use client';\n\nimport * as React from 'react';\nimport { motion, type HTMLMotionProps, type Transition } from 'motion/react';\n\nimport {\n SlidingNumber,\n type SlidingNumberProps,\n} from '@/components/animate-ui/text/sliding-number';\nimport { Button } from '@/components/ui/button';\nimport { cn } from '@/lib/utils';\n\ntype CounterProps = HTMLMotionProps<'div'> & {\n number: number;\n setNumber: (number: number) => void;\n slidingNumberProps?: Omit<SlidingNumberProps, 'number'>;\n buttonProps?: Omit<React.ComponentProps<typeof Button>, 'onClick'>;\n transition?: Transition;\n};\n\nfunction Counter({\n number,\n setNumber,\n className,\n slidingNumberProps,\n buttonProps,\n transition = { type: 'spring', bounce: 0, stiffness: 300, damping: 30 },\n ...props\n}: CounterProps) {\n return (\n <motion.div\n data-slot=\"counter\"\n layout\n transition={transition}\n className={cn(\n 'flex items-center gap-x-2 p-1 rounded-xl bg-neutral-100 dark:bg-neutral-800',\n className,\n )}\n {...props}\n >\n <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>\n <Button\n size=\"icon\"\n {...buttonProps}\n onClick={() => setNumber(number - 1)}\n className={cn(\n 'bg-white dark:bg-neutral-950 hover:bg-white/70 dark:hover:bg-neutral-950/70 text-neutral-950 dark:text-white text-2xl font-light pb-[3px]',\n buttonProps?.className,\n )}\n >\n -\n </Button>\n </motion.div>\n\n <SlidingNumber\n number={number}\n {...slidingNumberProps}\n className={cn('text-lg', slidingNumberProps?.className)}\n />\n\n <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>\n <Button\n size=\"icon\"\n {...buttonProps}\n onClick={() => setNumber(number + 1)}\n className={cn(\n 'bg-white dark:bg-neutral-950 hover:bg-white/70 dark:hover:bg-neutral-950/70 text-neutral-950 dark:text-white text-2xl font-light pb-[3px]',\n buttonProps?.className,\n )}\n >\n +\n </Button>\n </motion.div>\n </motion.div>\n );\n}\n\nexport { Counter, type CounterProps };\n",
|
|
"type": "registry:ui",
|
|
"target": "components/animate-ui/components/counter.tsx"
|
|
}
|
|
]
|
|
} |