{ "$schema": "https://ui.shadcn.com/schema/registry.json", "name": "watermelon", "homepage": "https://ui.watermelon.sh", "items": [ { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "inline-disclosure-menu", "type": "registry:component", "title": "Inline Disclosure Menu", "description": "An animated inline action menu with contextul Options and a two-step delete confirmation flow.", "dependencies": [ "@hugeicons/core-free-icons", "@hugeicons/react", "lucide-react", "motion" ], "files": [ { "path": "components/watermelon/inline-disclosure-menu.tsx", "type": "registry:component", "content": "'use client';\n\nimport * as React from 'react';\nimport { MoreVertical } from 'lucide-react';\nimport { HugeiconsIcon } from '@hugeicons/react';\nimport {\n Copy01Icon,\n Delete02Icon,\n FavouriteIcon,\n PencilEdit02Icon,\n Share01Icon,\n} from '@hugeicons/core-free-icons';\nimport {\n AnimatePresence,\n LayoutGroup,\n motion,\n type Transition,\n type Variants,\n} from 'motion/react';\n\nexport interface MenuItemProps {\n icon: React.ReactNode;\n label: string;\n onClick?: () => void;\n className?: string;\n}\n\nexport interface InlineDisclosureMenuProps {\n menuItems?: MenuItemProps[];\n showDelete?: boolean;\n onDelete?: () => void;\n}\n\nconst spring: Transition = {\n type: 'spring',\n bounce: 0,\n duration: 0.4,\n};\n\nconst menuVariants: Variants = {\n hidden: { opacity: 0, scale: 0.94 },\n visible: { opacity: 1, scale: 1, transition: spring },\n};\n\nconst deleteVariants: Variants = {\n initial: (confirm: boolean) => ({\n y: confirm ? 60 : -60,\n }),\n animate: {\n y: 0,\n transition: spring,\n },\n exit: (confirm: boolean) => ({\n y: confirm ? -60 : 60,\n transition: spring,\n }),\n};\n\nconst confirmVariants: Variants = {\n initial: (confirm: boolean) => ({\n y: confirm ? 60 : -60,\n }),\n animate: {\n y: 0,\n transition: spring,\n },\n exit: (confirm: boolean) => ({\n y: confirm ? -60 : 60,\n transition: spring,\n }),\n};\n\nconst MenuItem: React.FC = ({\n icon,\n label,\n onClick,\n className = '',\n}) => (\n \n {icon}\n \n {label}\n \n \n);\n\nexport function InlineDisclosureMenu({\n menuItems = [\n {\n icon: ,\n label: 'Edit',\n },\n { icon: , label: 'Duplicate' },\n {\n icon: ,\n label: 'Favourite',\n },\n { icon: , label: 'Share' },\n ],\n showDelete = true,\n onDelete,\n}: InlineDisclosureMenuProps) {\n const [open, setOpen] = React.useState(false);\n const [confirm, setConfirm] = React.useState(false);\n const ref = React.useRef(null);\n\n React.useEffect(() => {\n const handler = (e: MouseEvent) => {\n if (ref.current && !ref.current.contains(e.target as Node)) {\n setOpen(false);\n setConfirm(false);\n }\n };\n document.addEventListener('mousedown', handler);\n return () => document.removeEventListener('mousedown', handler);\n }, []);\n\n return (\n
\n
\n setOpen((v) => !v)}\n className=\"flex h-12 w-12 items-center justify-center rounded-2xl border-2 border-[#EEEEF2] bg-white text-gray-500 sm:h-14 sm:w-14 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-400\"\n >\n \n \n\n \n {open && (\n \n
\n \n More Options\n \n
\n\n \n
\n {menuItems.map((item, i) => (\n \n ))}\n
\n\n {showDelete && (\n
\n \n {!confirm ? (\n \n \n }\n label=\"Delete\"\n className=\"cursor-pointer text-[#e94447]\"\n onClick={() => setConfirm(true)}\n />\n \n ) : (\n \n \n Yes, Delete\n \n\n setConfirm(false)}\n className=\"h-10 flex-1 cursor-pointer rounded-xl border border-gray-200 text-gray-600 dark:border-zinc-700 dark:text-zinc-300\"\n >\n Cancel\n \n \n )}\n \n
\n )}\n \n \n )}\n \n
\n
\n );\n}\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "inline-disclosure-menu-base", "type": "registry:component", "title": "Inline Disclosure Menu (base)", "description": "Theme-ready base variant of An animated inline action menu with contextul Options and a two-step delete confirmation flow..", "dependencies": [ "@hugeicons/core-free-icons", "@hugeicons/react", "lucide-react", "motion" ], "files": [ { "path": "components/watermelon/inline-disclosure-menu.tsx", "type": "registry:component", "content": "'use client';\n\nimport * as React from 'react';\nimport { MoreVertical } from 'lucide-react';\nimport { HugeiconsIcon } from '@hugeicons/react';\nimport {\n Copy01Icon,\n Delete02Icon,\n FavouriteIcon,\n PencilEdit02Icon,\n Share01Icon,\n} from '@hugeicons/core-free-icons';\nimport {\n AnimatePresence,\n LayoutGroup,\n motion,\n type Transition,\n type Variants,\n} from 'motion/react';\n\nexport interface MenuItemProps {\n icon: React.ReactNode;\n label: string;\n onClick?: () => void;\n className?: string;\n}\n\nexport interface InlineDisclosureMenuProps {\n menuItems?: MenuItemProps[];\n showDelete?: boolean;\n onDelete?: () => void;\n}\n\nconst spring: Transition = {\n type: 'spring',\n bounce: 0,\n duration: 0.4,\n};\n\nconst menuVariants: Variants = {\n hidden: { opacity: 0, scale: 0.94 },\n visible: { opacity: 1, scale: 1, transition: spring },\n};\n\nconst deleteVariants: Variants = {\n initial: (confirm: boolean) => ({\n y: confirm ? 60 : -60,\n }),\n animate: {\n y: 0,\n transition: spring,\n },\n exit: (confirm: boolean) => ({\n y: confirm ? -60 : 60,\n transition: spring,\n }),\n};\n\nconst confirmVariants: Variants = {\n initial: (confirm: boolean) => ({\n y: confirm ? 60 : -60,\n }),\n animate: {\n y: 0,\n transition: spring,\n },\n exit: (confirm: boolean) => ({\n y: confirm ? -60 : 60,\n transition: spring,\n }),\n};\n\nconst MenuItem: React.FC = ({\n icon,\n label,\n onClick,\n className = '',\n}) => (\n \n {icon}\n \n {label}\n \n \n);\n\nexport function InlineDisclosureMenu({\n menuItems = [\n {\n icon: ,\n label: 'Edit',\n },\n { icon: , label: 'Duplicate' },\n {\n icon: ,\n label: 'Favourite',\n },\n { icon: , label: 'Share' },\n ],\n showDelete = true,\n onDelete,\n}: InlineDisclosureMenuProps) {\n const [open, setOpen] = React.useState(false);\n const [confirm, setConfirm] = React.useState(false);\n const ref = React.useRef(null);\n\n React.useEffect(() => {\n const handler = (e: MouseEvent) => {\n if (ref.current && !ref.current.contains(e.target as Node)) {\n setOpen(false);\n setConfirm(false);\n }\n };\n document.addEventListener('mousedown', handler);\n return () => document.removeEventListener('mousedown', handler);\n }, []);\n\n return (\n
\n
\n setOpen((v) => !v)}\n className=\"border-border bg-background text-muted-foreground flex h-12 w-12 items-center justify-center rounded-lg border-2 sm:h-14 sm:w-14\"\n >\n \n \n\n \n {open && (\n \n
\n \n More Options\n \n
\n\n \n
\n {menuItems.map((item, i) => (\n \n ))}\n
\n\n {showDelete && (\n
\n \n {!confirm ? (\n \n \n }\n label=\"Delete\"\n className=\"text-destructive cursor-pointer\"\n onClick={() => setConfirm(true)}\n />\n \n ) : (\n \n \n Yes, Delete\n \n\n setConfirm(false)}\n className=\"border-border text-popover-foreground h-10 flex-1 cursor-pointer rounded-lg border\"\n >\n Cancel\n \n \n )}\n \n
\n )}\n \n \n )}\n \n
\n
\n );\n}\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "aave-swap-component", "type": "registry:component", "title": "Aave Swap Component", "description": "Interactive cryptocurrency exchange interface with animated number inputs and value calculations.", "dependencies": [ "@number-flow/react", "lucide-react", "motion" ], "files": [ { "path": "components/watermelon/aave-swap-component.tsx", "type": "registry:component", "content": "'use client';\n\nimport React, { useState, useMemo, useCallback } from 'react';\nimport { motion, AnimatePresence, MotionConfig } from 'motion/react';\nimport { ChevronDown, ArrowUpDown } from 'lucide-react';\nimport NumberFlow from '@number-flow/react';\n\nexport interface TokenConfig {\n name: string;\n symbol: string;\n priceUSD: number;\n max?: number;\n logo: string;\n}\n\ninterface AaveSwapComponentProps {\n from: TokenConfig;\n to: TokenConfig;\n}\n\nconst MAX_LENGTH = 5;\n\nexport function AaveSwapComponent({ from, to }: AaveSwapComponentProps) {\n const [inputVal, setInputVal] = useState('0');\n const [isMax, setIsMax] = useState(false);\n\n const numericInput = useMemo(() => {\n const parsed = parseFloat(inputVal);\n return isNaN(parsed) ? 0 : parsed;\n }, [inputVal]);\n\n const usdValue = useMemo(\n () => numericInput * from.priceUSD,\n [numericInput, from.priceUSD],\n );\n\n const outputValue = useMemo(() => {\n if (numericInput === 0) return 0;\n return numericInput * (from.priceUSD / to.priceUSD);\n }, [numericInput, from.priceUSD, to.priceUSD]);\n\n const isError = useMemo(\n () => (from.max ? numericInput > from.max : false),\n [from.max, numericInput],\n );\n\n const handleUseMax = useCallback(() => {\n if (!from.max) return;\n setIsMax(true);\n setInputVal(from.max.toString());\n }, [from.max]);\n\n const handleClear = useCallback(() => {\n setIsMax(false);\n setInputVal('0');\n }, []);\n\n const handleInputChange = useCallback(\n (e: React.ChangeEvent) => {\n const val = e.target.value.replace(/[^0-9.]/g, '');\n if (val.split('.').length > 2) return;\n\n if (val.length > MAX_LENGTH) {\n return;\n }\n\n if (val !== from.max?.toString()) setIsMax(false);\n\n if (val === '') {\n setInputVal('0');\n } else if (\n val.length > 1 &&\n val.startsWith('0') &&\n !val.startsWith('0.')\n ) {\n setInputVal(val.replace(/^0+/, ''));\n } else {\n setInputVal(val);\n }\n },\n [from.max],\n );\n\n const characters = useMemo(() => inputVal.split(''), [inputVal]);\n\n return (\n
\n \n \n \n
\n
\n
\n \n
\n
\n
\n {from.name}\n
\n {from.max && (\n
\n \n
\n )}\n
\n
\n \n {from.max && (\n \n {isError || isMax ? 'Using Max' : 'Use Max'}\n \n )}\n \n
\n\n
\n\n
\n
\n \n\n
\n \n {inputVal === '0' ? (\n \n 0\n \n ) : (\n characters.map((char, i) => (\n \n {char}\n \n ))\n )}\n \n
\n
\n\n
\n \n {isError ? (\n \n Not Enough {from.symbol}\n \n ) : (\n \n ≈\n \n \n \n )}\n \n
\n
\n \n\n
\n
\n \n
\n
\n\n
\n
\n
\n \n
\n
\n
\n {to.name}\n
\n
\n Receive {to.symbol}\n
\n
\n
\n\n
\n \n
\n
\n\n
\n \n Clear\n \n
\n \n \n
\n );\n}\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "aave-swap-component-base", "type": "registry:component", "title": "Aave Swap Component (base)", "description": "Theme-ready base variant of Interactive cryptocurrency exchange interface with animated number inputs and value calculations..", "dependencies": [ "@number-flow/react", "lucide-react", "motion" ], "files": [ { "path": "components/watermelon/aave-swap-component.tsx", "type": "registry:component", "content": "'use client';\n\nimport React, { useState, useMemo, useCallback } from 'react';\nimport { motion, AnimatePresence, MotionConfig } from 'motion/react';\nimport { ChevronDown, ArrowUpDown } from 'lucide-react';\nimport NumberFlow from '@number-flow/react';\n\nexport interface TokenConfig {\n name: string;\n symbol: string;\n priceUSD: number;\n max?: number;\n logo: string;\n}\n\ninterface AaveSwapComponentProps {\n from: TokenConfig;\n to: TokenConfig;\n}\n\nconst MAX_LENGTH = 5;\n\nexport function AaveSwapComponent({ from, to }: AaveSwapComponentProps) {\n const [inputVal, setInputVal] = useState('0');\n const [isMax, setIsMax] = useState(false);\n\n const numericInput = useMemo(() => {\n const parsed = parseFloat(inputVal);\n return isNaN(parsed) ? 0 : parsed;\n }, [inputVal]);\n\n const usdValue = useMemo(\n () => numericInput * from.priceUSD,\n [numericInput, from.priceUSD],\n );\n\n const outputValue = useMemo(() => {\n if (numericInput === 0) return 0;\n return numericInput * (from.priceUSD / to.priceUSD);\n }, [numericInput, from.priceUSD, to.priceUSD]);\n\n const isError = useMemo(\n () => (from.max ? numericInput > from.max : false),\n [from.max, numericInput],\n );\n\n const handleUseMax = useCallback(() => {\n if (!from.max) return;\n setIsMax(true);\n setInputVal(from.max.toString());\n }, [from.max]);\n\n const handleClear = useCallback(() => {\n setIsMax(false);\n setInputVal('0');\n }, []);\n\n const handleInputChange = useCallback(\n (e: React.ChangeEvent) => {\n const val = e.target.value.replace(/[^0-9.]/g, '');\n if (val.split('.').length > 2) return;\n\n if (val.length > MAX_LENGTH) {\n return;\n }\n\n if (val !== from.max?.toString()) setIsMax(false);\n\n if (val === '') {\n setInputVal('0');\n } else if (\n val.length > 1 &&\n val.startsWith('0') &&\n !val.startsWith('0.')\n ) {\n setInputVal(val.replace(/^0+/, ''));\n } else {\n setInputVal(val);\n }\n },\n [from.max],\n );\n\n const characters = useMemo(() => inputVal.split(''), [inputVal]);\n\n return (\n
\n \n \n \n
\n
\n
\n \n
\n
\n
\n {from.name}\n
\n {from.max && (\n
\n \n
\n )}\n
\n
\n \n {from.max && (\n \n {isError || isMax ? 'Using Max' : 'Use Max'}\n \n )}\n \n
\n\n
\n\n
\n
\n \n\n
\n \n {inputVal === '0' ? (\n \n 0\n \n ) : (\n characters.map((char, i) => (\n \n {char}\n \n ))\n )}\n \n
\n
\n\n
\n \n {isError ? (\n \n Not Enough {from.symbol}\n \n ) : (\n \n ≈\n \n \n \n )}\n \n
\n
\n \n\n
\n
\n \n
\n
\n\n
\n
\n
\n \n
\n
\n
\n {to.name}\n
\n
\n Receive {to.symbol}\n
\n
\n
\n\n
\n \n
\n
\n\n
\n \n Clear\n \n
\n \n \n
\n );\n}\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "activities-card", "type": "registry:component", "title": "Activities Card", "description": "An expandable activities card with smooth spring animations and a premium 3D header aesthetic.", "dependencies": [ "lucide-react", "motion" ], "files": [ { "path": "components/watermelon/activities-card.tsx", "type": "registry:component", "content": "'use client';\n\nimport { useState, useEffect, type FC, type ReactNode } from 'react';\nimport { motion, AnimatePresence, MotionConfig } from 'motion/react';\nimport { ChevronUpIcon } from 'lucide-react';\n\nexport interface ActivityItemType {\n icon: ReactNode;\n title: string;\n desc: string;\n time: string;\n}\n\nexport interface ActivitiesCardProps {\n headerIcon: ReactNode;\n title: string;\n subtitle: string;\n activities: ActivityItemType[];\n}\n\nconst ActivityItem: FC = ({ icon, title, desc, time }) => {\n return (\n \n
\n {icon}\n
\n\n
\n

\n {title}\n

\n

\n {desc}\n

\n
\n\n \n {time}\n \n \n );\n};\n\nexport const ActivitiesCard: FC = ({\n headerIcon,\n title,\n subtitle,\n activities,\n}) => {\n const [open, setOpen] = useState(false);\n const [isMobile, setIsMobile] = useState(false);\n\n useEffect(() => {\n const checkMobile = () => setIsMobile(window.innerWidth < 640);\n checkMobile();\n window.addEventListener('resize', checkMobile);\n return () => window.removeEventListener('resize', checkMobile);\n }, []);\n\n return (\n \n \n setOpen(!open)}\n className=\"flex w-full items-center justify-between gap-2 px-3 py-2 transition-colors sm:gap-3 sm:px-4 sm:py-3.5\"\n >\n
\n \n \n \n {headerIcon}\n \n \n\n
\n \n {title}\n \n \n {!open && (\n \n {subtitle}\n \n )}\n \n
\n
\n\n \n \n \n \n\n \n {open && (\n \n
\n {activities.map((item, i) => (\n \n ))}\n
\n \n )}\n \n \n \n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "activities-card-base", "type": "registry:component", "title": "Activities Card (base)", "description": "Theme-ready base variant of An expandable activities card with smooth spring animations and a premium 3D header aesthetic..", "dependencies": [ "lucide-react", "motion" ], "files": [ { "path": "components/watermelon/activities-card.tsx", "type": "registry:component", "content": "'use client';\n\nimport { useState, useEffect, type FC, type ReactNode } from 'react';\nimport { motion, AnimatePresence, MotionConfig } from 'motion/react';\nimport { ChevronUpIcon } from 'lucide-react';\n\nexport interface ActivityItemType {\n icon: ReactNode;\n title: string;\n desc: string;\n time: string;\n}\n\nexport interface ActivitiesCardProps {\n headerIcon: ReactNode;\n title: string;\n subtitle: string;\n activities: ActivityItemType[];\n}\n\nconst ActivityItem: FC = ({ icon, title, desc, time }) => {\n return (\n \n
\n {icon}\n
\n\n
\n

\n {title}\n

\n

\n {desc}\n

\n
\n\n \n {time}\n \n \n );\n};\n\nexport const ActivitiesCard: FC = ({\n headerIcon,\n title,\n subtitle,\n activities,\n}) => {\n const [open, setOpen] = useState(false);\n const [isMobile, setIsMobile] = useState(false);\n\n useEffect(() => {\n const checkMobile = () => setIsMobile(window.innerWidth < 640);\n checkMobile();\n window.addEventListener('resize', checkMobile);\n return () => window.removeEventListener('resize', checkMobile);\n }, []);\n\n return (\n \n \n setOpen(!open)}\n className=\"flex w-full items-center justify-between gap-2 px-3 py-2 transition-colors sm:gap-3 sm:px-4 sm:py-3.5\"\n >\n
\n \n \n \n {headerIcon}\n \n \n\n
\n \n {title}\n \n \n {!open && (\n \n {subtitle}\n \n )}\n \n
\n
\n\n \n \n \n \n\n \n {open && (\n \n
\n {activities.map((item, i) => (\n \n ))}\n
\n \n )}\n \n \n \n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "adaptive-slider", "type": "registry:component", "title": "Adaptive Slider", "description": "A smooth, color-shifting slider with caloric value tracking.", "dependencies": [ "motion" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/watermelon/adaptive-slider.tsx", "type": "registry:component", "content": "'use client';\n\nimport { useState, useMemo, type FC, type ChangeEvent } from 'react';\nimport { AnimatePresence, motion } from 'motion/react';\nimport { cn } from '@/lib/utils';\n\ninterface AdaptiveSliderProps {\n value?: number;\n min?: number;\n max?: number;\n step?: number;\n defaultValue?: number;\n onChange?: (value: number) => void;\n}\n\ninterface ColorSettings {\n text: string;\n gradient: string;\n thumbBorder: string;\n}\n\nconst DEFAULT_MIN = 50;\nconst DEFAULT_MAX = 350;\nconst DEFAULT_STEP = 25;\nconst DEFAULT_VALUE = 200;\n\nconst getColorSettings = (\n value: number,\n min: number,\n max: number,\n): ColorSettings => {\n const percentage = (value - min) / (max - min);\n\n if (percentage < 0.5) {\n return {\n text: '#10B981',\n gradient: 'linear-gradient(to right, #FEB101, #FE7C09)',\n thumbBorder: '#10B981',\n };\n } else if (percentage < 0.7) {\n return {\n text: '#FE55B7',\n gradient: 'linear-gradient(to right, #FE55B74D, #FE55B7)',\n thumbBorder: '#F97316',\n };\n } else {\n return {\n text: '#D946EF',\n gradient: 'linear-gradient(to right, #DAB0FE, #4946FF)',\n thumbBorder: '#D946EF',\n };\n }\n};\n\nexport const AdaptiveSlider: FC = ({\n value,\n min = DEFAULT_MIN,\n max = DEFAULT_MAX,\n step = DEFAULT_STEP,\n defaultValue = DEFAULT_VALUE,\n onChange,\n}) => {\n const [internalValue, setInternalValue] = useState(defaultValue);\n\n const calories = value ?? internalValue;\n\n const colorSettings = useMemo(\n () => getColorSettings(calories, min, max),\n [calories, min, max],\n );\n\n const percentage = ((calories - min) / (max - min)) * 100;\n\n const dots = useMemo(\n () =>\n Array.from({ length: 6 }).map((_, i) => (\n \n )),\n [],\n );\n\n const handleSliderChange = (e: ChangeEvent) => {\n const val = Number(e.target.value);\n setInternalValue(val);\n onChange?.(val);\n };\n\n return (\n \n \n Calories\n \n\n
\n \n \n kCal\n \n
\n\n
\n
\n {dots}\n
\n\n \n\n \n\n \n
\n \n
\n \n );\n};\n\nconst AnimatedText = ({\n value,\n className,\n}: {\n value: string;\n className?: string;\n}) => {\n return (\n \n \n {value.split('').map((char, index) => {\n const displayChar = char === ' ' ? '\\u00A0' : char;\n\n return (\n \n {displayChar}\n \n );\n })}\n \n
\n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "adaptive-slider-base", "type": "registry:component", "title": "Adaptive Slider (base)", "description": "Theme-ready base variant of A smooth, color-shifting slider with caloric value tracking..", "dependencies": [ "motion" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/watermelon/adaptive-slider.tsx", "type": "registry:component", "content": "'use client';\n\nimport { useState, useMemo, type FC, type ChangeEvent } from 'react';\nimport { AnimatePresence, motion } from 'motion/react';\nimport { cn } from '@/lib/utils';\n\ninterface AdaptiveSliderProps {\n value?: number;\n min?: number;\n max?: number;\n step?: number;\n defaultValue?: number;\n onChange?: (value: number) => void;\n}\n\ninterface ColorSettings {\n text: string;\n gradient: string;\n thumbBorder: string;\n}\n\nconst DEFAULT_MIN = 50;\nconst DEFAULT_MAX = 350;\nconst DEFAULT_STEP = 25;\nconst DEFAULT_VALUE = 200;\n\nconst getColorSettings = (\n value: number,\n min: number,\n max: number,\n): ColorSettings => {\n const percentage = (value - min) / (max - min);\n\n if (percentage < 0.5) {\n return {\n text: '#10B981',\n gradient: 'linear-gradient(to right, #FEB101, #FE7C09)',\n thumbBorder: '#10B981',\n };\n } else if (percentage < 0.7) {\n return {\n text: '#FE55B7',\n gradient: 'linear-gradient(to right, #FE55B74D, #FE55B7)',\n thumbBorder: '#F97316',\n };\n } else {\n return {\n text: '#D946EF',\n gradient: 'linear-gradient(to right, #DAB0FE, #4946FF)',\n thumbBorder: '#D946EF',\n };\n }\n};\n\nexport const AdaptiveSlider: FC = ({\n value,\n min = DEFAULT_MIN,\n max = DEFAULT_MAX,\n step = DEFAULT_STEP,\n defaultValue = DEFAULT_VALUE,\n onChange,\n}) => {\n const [internalValue, setInternalValue] = useState(defaultValue);\n\n const calories = value ?? internalValue;\n\n const colorSettings = useMemo(\n () => getColorSettings(calories, min, max),\n [calories, min, max],\n );\n\n const percentage = ((calories - min) / (max - min)) * 100;\n\n const dots = useMemo(\n () =>\n Array.from({ length: 6 }).map((_, i) => (\n \n )),\n [],\n );\n\n const handleSliderChange = (e: ChangeEvent) => {\n const val = Number(e.target.value);\n setInternalValue(val);\n onChange?.(val);\n };\n\n return (\n \n \n Calories\n \n\n
\n \n \n kCal\n \n
\n\n
\n
\n {dots}\n
\n\n \n\n \n\n \n
\n \n
\n \n );\n};\n\nconst AnimatedText = ({\n value,\n className,\n}: {\n value: string;\n className?: string;\n}) => {\n return (\n \n \n {value.split('').map((char, index) => {\n const displayChar = char === ' ' ? '\\u00A0' : char;\n\n return (\n \n {displayChar}\n \n );\n })}\n \n
\n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "add-cash-disclosure", "type": "registry:component", "title": "Add Cash Disclosure", "description": "Disclosure panel explaining add-cash details, limits, fees, and confirmation.", "dependencies": [ "lucide-react", "motion", "react-icons" ], "files": [ { "path": "components/watermelon/add-cash-disclosure.tsx", "type": "registry:component", "content": "import React, { useState, useEffect } from 'react';\nimport { motion, AnimatePresence, MotionConfig } from 'motion/react';\nimport { Plus, X, Wallet, Check } from 'lucide-react';\nimport { MdOutlineAddCard } from 'react-icons/md';\n\nexport interface PaymentCard {\n id: string;\n last4: string;\n brand: 'VISA' | 'MASTERCARD';\n isDefault?: boolean;\n hasToggle?: boolean;\n}\n\nexport interface CashDisclosureProps {\n initialBalance: number;\n cards: PaymentCard[];\n presets: number[];\n onConfirm: (amount: number) => Promise;\n}\n\nexport const AddCashDisclosure: React.FC = ({\n initialBalance,\n cards,\n presets,\n onConfirm,\n}) => {\n const [isOpen, setIsOpen] = useState(false);\n const [selectedCard, setSelectedCard] = useState(cards[0]?.id || '');\n const [selectedAmount, setSelectedAmount] = useState(presets[1]);\n const [isProcessing, setIsProcessing] = useState(false);\n const [isDone, setIsDone] = useState(false);\n const [displayBalance, setDisplayBalance] = useState(initialBalance);\n\n useEffect(() => {\n if (!isProcessing && !isDone) {\n setTimeout(() => setDisplayBalance(initialBalance), 0);\n }\n }, [initialBalance, isProcessing, isDone]);\n\n const handleOpen = () => setIsOpen(true);\n const handleClose = () => {\n setIsOpen(false);\n setIsProcessing(false);\n setIsDone(false);\n };\n\n const handleConfirm = async () => {\n setIsProcessing(true);\n await onConfirm(selectedAmount);\n setIsDone(true);\n setTimeout(() => handleClose(), 1500);\n };\n\n const formatCurrency = (val: number) => {\n return new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD',\n }).format(val);\n };\n\n return (\n
\n \n \n {!isOpen ? (\n \n
\n \n \n \n
\n \n Wallet\n \n \n {formatCurrency(displayBalance)}\n \n
\n
\n \n \n Add Cash\n \n \n ) : (\n \n \n
\n
\n \n \n \n
\n \n Wallet\n \n \n {formatCurrency(displayBalance)}\n \n
\n
\n \n \n \n
\n\n
\n\n
\n
\n \n Payment Mode\n \n \n
\n\n
\n {cards.map((card) => {\n const isSelected = selectedCard === card.id;\n return (\n setSelectedCard(card.id)}\n className={`flex cursor-pointer items-center justify-between rounded-xl border-[1.5px] p-3 transition-all sm:p-4 ${isSelected\n ? 'border-[#010103] ring-1 ring-[#010103] dark:border-white dark:bg-white/5 dark:ring-white'\n : 'border-[#ECECEC] bg-[#F6F5FA] hover:border-gray-300 dark:border-white/5 dark:bg-white/2 dark:hover:border-white/20'\n }`}\n >\n
\n \n {isSelected && (\n
\n )}\n
\n \n \n ••••\n \n {card.last4}\n \n
\n \n {card.brand}\n \n
\n );\n })}\n
\n
\n
\n \n Amount\n \n
\n {presets.map((amount) => {\n const isSelected = selectedAmount === amount;\n return (\n setSelectedAmount(amount)}\n className={`flex-1 rounded-lg border-[1.5px] py-2 text-[11px] font-semibold transition-all sm:text-sm ${isSelected\n ? 'border-[#000000] bg-[#fefefe] text-[#000000] ring-1 ring-[#000000] dark:border-white dark:bg-white dark:text-black'\n : 'border-[#ECECEC] bg-[#F6F5FA] text-[#000000] hover:border-[#dedbdb] dark:border-white/10 dark:bg-white/5 dark:text-gray-400 dark:hover:border-white/20'\n }`}\n >\n ${amount}\n \n );\n })}\n
\n
\n
\n \n \n {isDone ? (\n \n
\n \n
\n Done\n \n ) : isProcessing ? (\n \n \n \n ) : (\n \n \n Add Cash\n \n )}\n \n \n
\n \n \n )}\n \n \n
\n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "add-cash-disclosure-base", "type": "registry:component", "title": "Add Cash Disclosure (base)", "description": "Theme-ready base variant of Disclosure panel explaining add-cash details, limits, fees, and confirmation..", "dependencies": [ "lucide-react", "motion", "react-icons" ], "files": [ { "path": "components/watermelon/add-cash-disclosure.tsx", "type": "registry:component", "content": "import React, { useState, useEffect } from 'react';\nimport { motion, AnimatePresence, MotionConfig } from 'motion/react';\nimport { Plus, X, Wallet, Check } from 'lucide-react';\nimport { MdOutlineAddCard } from 'react-icons/md';\n\nexport interface PaymentCard {\n id: string;\n last4: string;\n brand: 'VISA' | 'MASTERCARD';\n isDefault?: boolean;\n hasToggle?: boolean;\n}\n\nexport interface CashDisclosureProps {\n initialBalance: number;\n cards: PaymentCard[];\n presets: number[];\n onConfirm: (amount: number) => Promise;\n}\n\nexport const AddCashDisclosure: React.FC = ({\n initialBalance,\n cards,\n presets,\n onConfirm,\n}) => {\n const [isOpen, setIsOpen] = useState(false);\n const [selectedCard, setSelectedCard] = useState(cards[0]?.id || '');\n const [selectedAmount, setSelectedAmount] = useState(presets[1]);\n const [isProcessing, setIsProcessing] = useState(false);\n const [isDone, setIsDone] = useState(false);\n const [displayBalance, setDisplayBalance] = useState(initialBalance);\n\n useEffect(() => {\n if (!isProcessing && !isDone) {\n setTimeout(() => setDisplayBalance(initialBalance), 0);\n }\n }, [initialBalance, isProcessing, isDone]);\n\n const handleOpen = () => setIsOpen(true);\n const handleClose = () => {\n setIsOpen(false);\n setIsProcessing(false);\n setIsDone(false);\n };\n\n const handleConfirm = async () => {\n setIsProcessing(true);\n await onConfirm(selectedAmount);\n setIsDone(true);\n setTimeout(() => handleClose(), 1500);\n };\n\n const formatCurrency = (val: number) => {\n return new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD',\n }).format(val);\n };\n\n return (\n \n \n \n {!isOpen ? (\n \n
\n \n \n \n
\n \n Wallet\n \n \n {formatCurrency(displayBalance)}\n \n
\n
\n \n \n Add Cash\n \n \n ) : (\n \n \n
\n
\n \n \n \n
\n \n Wallet\n \n \n {formatCurrency(displayBalance)}\n \n
\n
\n \n \n \n
\n\n
\n\n
\n
\n \n Payment Mode\n \n \n
\n\n
\n {cards.map((card) => {\n const isSelected = selectedCard === card.id;\n return (\n setSelectedCard(card.id)}\n className={`flex cursor-pointer items-center justify-between rounded-xl border p-3 transition-all sm:p-4 ${isSelected\n ? 'border-foreground ring-1 ring-foreground bg-accent/30'\n : 'border-border bg-muted/50 hover:border-ring/40'\n }`}\n >\n
\n \n {isSelected && (\n
\n )}\n
\n \n \n ••••\n \n {card.last4}\n \n
\n \n {card.brand}\n \n
\n );\n })}\n
\n
\n
\n \n Amount\n \n
\n {presets.map((amount) => {\n const isSelected = selectedAmount === amount;\n return (\n setSelectedAmount(amount)}\n className={`flex-1 rounded-lg border py-2 text-xs font-semibold transition-all sm:text-sm ${isSelected\n ? 'border-foreground bg-card text-foreground ring-1 ring-foreground'\n : 'border-border bg-muted/50 text-foreground hover:border-ring/40'\n }`}\n >\n ${amount}\n \n );\n })}\n
\n
\n
\n \n \n {isDone ? (\n \n
\n \n
\n Done\n \n ) : isProcessing ? (\n \n \n \n ) : (\n \n \n Add Cash\n \n )}\n \n \n
\n \n \n )}\n \n \n
\n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "budget-card", "type": "registry:component", "title": "Budget Card", "description": "Budget overview card tracking spending, limits, and remaining balance.", "dependencies": [ "lucide-react", "motion" ], "files": [ { "path": "components/watermelon/budget-card.tsx", "type": "registry:component", "content": "'use client';\n\nimport React, { useState, useRef, useEffect } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport { ChevronDown, Check, X } from 'lucide-react';\n\ninterface BreakdownItem {\n label: string;\n amount: number;\n color: string;\n}\n\ninterface BudgetCardProps {\n month: string;\n totalBudget: number;\n spentAmount: number;\n breakdown: BreakdownItem[];\n onViewDetails?: () => void;\n onMonthChange?: (month: string) => void;\n}\n\nconst months = [\n 'January',\n 'February',\n 'March',\n 'April',\n 'May',\n 'June',\n 'July',\n 'August',\n 'September',\n 'October',\n 'November',\n 'December',\n];\n\nexport const BudgetCard: React.FC = ({\n month: initialMonth,\n totalBudget,\n spentAmount,\n breakdown,\n onViewDetails,\n onMonthChange,\n}) => {\n const [selectedMonth, setSelectedMonth] = useState(initialMonth);\n const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n const [isDetailsOpen, setIsDetailsOpen] = useState(false);\n const dropdownRef = useRef(null);\n\n const spentPercentage = Math.round((spentAmount / totalBudget) * 100);\n const remainingAmount = totalBudget - spentAmount;\n\n const smoothTransition = { duration: 1.5, ease: [0.19, 1, 0.22, 1] } as const;\n const cornerClass = 'absolute w-5 h-5 border-black/20 dark:border-white/20';\n\n // Mock Transactions\n const transactions = [\n {\n id: 1,\n date: 'Jul 12',\n name: 'Whole Foods',\n category: 'Groceries',\n amount: 84.5,\n },\n {\n id: 2,\n date: 'Jul 10',\n name: 'Rent Payment',\n category: 'Rent',\n amount: 1600.0,\n },\n {\n id: 3,\n date: 'Jul 08',\n name: 'Chevron Gas',\n category: 'Other',\n amount: 52.3,\n },\n {\n id: 4,\n date: 'Jul 05',\n name: 'Starbucks',\n category: 'Other',\n amount: 12.45,\n },\n {\n id: 5,\n date: 'Jul 02',\n name: 'Apple Subscription',\n category: 'Other',\n amount: 9.99,\n },\n ];\n\n // Click outside logic\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (\n dropdownRef.current &&\n !dropdownRef.current.contains(event.target as Node)\n ) {\n setIsDropdownOpen(false);\n }\n };\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, []);\n\n const handleMonthSelect = (m: string) => {\n setSelectedMonth(m);\n setIsDropdownOpen(false);\n if (onMonthChange) onMonthChange(m);\n };\n\n return (\n
\n \n {/* Corner Borders */}\n \n \n \n \n\n
\n {/* Top Section */}\n
\n
\n

\n Monthly Budget\n

\n\n {/* --- Month Dropdown --- */}\n
\n setIsDropdownOpen(!isDropdownOpen)}\n className=\"flex min-w-30 items-center justify-between gap-2 border-[1.6px] border-zinc-200 bg-transparent px-3 py-1 text-sm font-normal text-zinc-500 transition-colors hover:bg-zinc-50 sm:gap-4 sm:text-[18px] dark:border-[#1e1d1d] dark:text-[#686868] dark:hover:bg-[#1A1A1A]\"\n >\n {selectedMonth}\n \n \n \n \n\n \n {isDropdownOpen && (\n \n
\n {months.map((m) => (\n handleMonthSelect(m)}\n className={`flex w-full items-center justify-between px-4 py-2.5 text-left text-sm transition-colors ${\n selectedMonth === m\n ? 'bg-zinc-100 font-medium text-zinc-900 dark:bg-white/5 dark:text-white'\n : 'text-zinc-500 hover:bg-zinc-50 dark:text-zinc-400 dark:hover:bg-white/2'\n }`}\n >\n {m}\n {selectedMonth === m && (\n \n )}\n \n ))}\n
\n \n )}\n \n
\n
\n\n

\n ${totalBudget.toLocaleString()}\n

\n\n
\n

\n Monthly spending limit\n

\n
\n \n
\n
\n
\n \n Spent\n \n
\n \n ${spentAmount.toLocaleString()}\n \n \n {spentPercentage}%\n \n
\n
\n
\n \n Remaining\n \n \n ${remainingAmount.toLocaleString()}\n \n
\n
\n
\n
\n\n
\n\n {/* Bottom Section */}\n
\n
\n

\n Spending breakdown\n

\n
\n {breakdown.map((item, idx) => (\n \n ))}\n
\n
\n {breakdown.map((item, idx) => (\n
\n

\n {item.label}\n

\n

\n ${item.amount.toLocaleString()}\n

\n
\n ))}\n
\n
\n {\n setIsDetailsOpen(true);\n if (onViewDetails) onViewDetails();\n }}\n className=\"w-full border-[1.6px] border-zinc-200 bg-transparent py-3 text-[14px] font-normal text-zinc-800 transition-colors hover:bg-zinc-50 dark:border-[#1e1d1d]/90 dark:text-[#f1f1f1] dark:hover:bg-white/5\"\n >\n View Details\n \n
\n
\n \n\n {/* --- Details Modal --- */}\n \n {isDetailsOpen && (\n
\n setIsDetailsOpen(false)}\n className=\"absolute inset-0 bg-white/60 backdrop-blur-md dark:bg-black/80\"\n />\n \n {/* Modal Header */}\n
\n
\n

\n Budget Details\n

\n

\n Deep dive into your {selectedMonth} spending\n

\n
\n setIsDetailsOpen(false)}\n className=\"rounded-full p-2 transition-colors hover:bg-zinc-100 dark:hover:bg-white/5\"\n >\n \n \n
\n\n {/* Modal Content */}\n
\n {/* Stats Grid */}\n
\n
\n

\n Total Budget\n

\n

\n ${totalBudget.toLocaleString()}\n

\n
\n
\n

\n Amount Spent\n

\n

\n ${spentAmount.toLocaleString()}\n

\n
\n
\n\n {/* Category Breakdown (Detailed) */}\n
\n

\n Category Breakdown\n

\n
\n {breakdown.map((item, idx) => {\n const percentage = Math.round(\n (item.amount / spentAmount) * 100,\n );\n return (\n
\n
\n \n {item.label}\n \n {percentage}%\n
\n
\n \n
\n
\n );\n })}\n
\n
\n\n {/* Transactions History */}\n
\n

\n Recent Transactions\n

\n
\n {transactions.map((t) => (\n \n
\n
\n {t.name[0]}\n
\n
\n

\n {t.name}\n

\n

\n {t.category} • {t.date}\n

\n
\n
\n \n -${t.amount.toFixed(2)}\n \n
\n ))}\n
\n
\n
\n\n {/* Modal Footer */}\n
\n setIsDetailsOpen(false)}\n className=\"w-full bg-zinc-900 py-3 font-medium text-white transition-transform active:scale-[0.98] dark:bg-white dark:text-black\"\n >\n Close Insights\n \n
\n \n
\n )}\n \n
\n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "budget-card-base", "type": "registry:component", "title": "Budget Card (base)", "description": "Theme-ready base variant of Budget overview card tracking spending, limits, and remaining balance..", "dependencies": [ "lucide-react", "motion" ], "files": [ { "path": "components/watermelon/budget-card.tsx", "type": "registry:component", "content": "'use client';\n\nimport React, { useState, useRef, useEffect } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport { ChevronDown, Check, X } from 'lucide-react';\n\ninterface BreakdownItem {\n label: string;\n amount: number;\n color: string;\n}\n\ninterface BudgetCardProps {\n month: string;\n totalBudget: number;\n spentAmount: number;\n breakdown: BreakdownItem[];\n onViewDetails?: () => void;\n onMonthChange?: (month: string) => void;\n}\n\nconst months = [\n 'January',\n 'February',\n 'March',\n 'April',\n 'May',\n 'June',\n 'July',\n 'August',\n 'September',\n 'October',\n 'November',\n 'December',\n];\n\nexport const BudgetCard: React.FC = ({\n month: initialMonth,\n totalBudget,\n spentAmount,\n breakdown,\n onViewDetails,\n onMonthChange,\n}) => {\n const [selectedMonth, setSelectedMonth] = useState(initialMonth);\n const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n const [isDetailsOpen, setIsDetailsOpen] = useState(false);\n const dropdownRef = useRef(null);\n\n const spentPercentage = Math.round((spentAmount / totalBudget) * 100);\n const remainingAmount = totalBudget - spentAmount;\n\n const smoothTransition = { duration: 1.5, ease: [0.19, 1, 0.22, 1] } as const;\n const cornerClass = 'absolute w-5 h-5 border-black/20 dark:border-white/20';\n\n // Mock Transactions for base view (themed)\n const transactions = [\n {\n id: 1,\n date: 'Jul 12',\n name: 'Whole Foods',\n category: 'Groceries',\n amount: 84.5,\n },\n {\n id: 2,\n date: 'Jul 10',\n name: 'Rent Payment',\n category: 'Rent',\n amount: 1600.0,\n },\n {\n id: 3,\n date: 'Jul 08',\n name: 'Chevron Gas',\n category: 'Other',\n amount: 52.3,\n },\n ];\n\n // Click outside logic\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (\n dropdownRef.current &&\n !dropdownRef.current.contains(event.target as Node)\n ) {\n setIsDropdownOpen(false);\n }\n };\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, []);\n\n const handleMonthSelect = (m: string) => {\n setSelectedMonth(m);\n setIsDropdownOpen(false);\n if (onMonthChange) onMonthChange(m);\n };\n\n return (\n
\n \n {/* Corner Borders */}\n \n \n \n \n\n
\n {/* Top Section */}\n
\n
\n

\n Monthly Budget\n

\n\n {/* --- Month Dropdown --- */}\n
\n setIsDropdownOpen(!isDropdownOpen)}\n className=\"border-border text-muted-foreground hover:bg-accent flex min-w-32 items-center justify-between gap-2 border bg-transparent px-3 py-1 text-sm font-normal transition-colors sm:gap-4 sm:text-lg\"\n >\n {selectedMonth}\n \n \n \n \n\n \n {isDropdownOpen && (\n \n
\n {months.map((m) => (\n handleMonthSelect(m)}\n className={`flex w-full items-center justify-between px-4 py-2.5 text-left text-sm transition-colors ${\n selectedMonth === m\n ? 'bg-accent text-accent-foreground font-medium'\n : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'\n }`}\n >\n {m}\n {selectedMonth === m && (\n \n )}\n \n ))}\n
\n \n )}\n \n
\n
\n\n

\n ${totalBudget.toLocaleString()}\n

\n\n
\n

\n Monthly spending limit\n

\n
\n \n
\n
\n
\n \n Spent\n \n
\n \n ${spentAmount.toLocaleString()}\n \n \n {spentPercentage}%\n \n
\n
\n
\n \n Remaining\n \n \n ${remainingAmount.toLocaleString()}\n \n
\n
\n
\n
\n\n
\n\n {/* Bottom Section */}\n
\n
\n

\n Spending breakdown\n

\n
\n {breakdown.map((item, idx) => (\n \n ))}\n
\n
\n {breakdown.map((item, idx) => (\n
\n

\n {item.label}\n

\n

\n ${item.amount.toLocaleString()}\n

\n
\n ))}\n
\n
\n {\n setIsDetailsOpen(true);\n if (onViewDetails) onViewDetails();\n }}\n className=\"border-border text-foreground hover:bg-accent hover:text-accent-foreground w-full border bg-transparent py-3 text-sm font-normal transition-colors\"\n >\n View Details\n \n
\n
\n \n\n {/* --- Details Modal (Themed) --- */}\n \n {isDetailsOpen && (\n
\n setIsDetailsOpen(false)}\n className=\"bg-background/60 absolute inset-0 backdrop-blur-md\"\n />\n \n {/* Modal Header */}\n
\n
\n

Budget Details

\n

\n Deep dive into your {selectedMonth} spending\n

\n
\n setIsDetailsOpen(false)}\n className=\"hover:bg-accent rounded-full p-2 transition-colors\"\n >\n \n \n
\n\n {/* Modal Content */}\n
\n {/* Stats Grid */}\n
\n
\n

\n Total Budget\n

\n

\n ${totalBudget.toLocaleString()}\n

\n
\n
\n

\n Amount Spent\n

\n

\n ${spentAmount.toLocaleString()}\n

\n
\n
\n\n {/* Category Breakdown */}\n
\n

\n Category Breakdown\n

\n
\n {breakdown.map((item, idx) => {\n const percentage =\n spentAmount > 0\n ? Math.round((item.amount / spentAmount) * 100)\n : 0;\n return (\n
\n
\n {item.label}\n \n {percentage}%\n \n
\n
\n \n
\n
\n );\n })}\n
\n
\n\n {/* Transactions History */}\n
\n

\n Recent Transactions\n

\n
\n {transactions.map((t) => (\n \n
\n
\n {t.name[0]}\n
\n
\n

\n {t.name}\n

\n

\n {t.category} • {t.date}\n

\n
\n
\n \n -${t.amount.toFixed(2)}\n \n
\n ))}\n
\n
\n
\n\n {/* Modal Footer */}\n
\n setIsDetailsOpen(false)}\n className=\"bg-primary text-primary-foreground w-full py-3 font-medium transition-transform hover:opacity-90 active:scale-[0.98]\"\n >\n Close Insights\n \n
\n \n
\n )}\n \n
\n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "calendar-widget", "type": "registry:component", "title": "Calendar Widget", "description": "An animated calendar widget featuring progressive blur effects that enhance depth and focus during interaction.", "dependencies": [ "lucide-react", "motion" ], "files": [ { "path": "components/watermelon/calendar-widget.tsx", "type": "registry:component", "content": "'use client';\n\nimport { useState, useRef, useEffect, type FC } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport { CalendarDays } from 'lucide-react';\n\nexport interface CalendarEvent {\n title: string;\n time: string;\n}\n\nexport interface EventsData {\n [key: string]: CalendarEvent[];\n}\n\ninterface DateItem {\n day: number;\n fullDate: string;\n month: number;\n year: number;\n dateObj: Date;\n dayOfWeek: number;\n dayName: string;\n}\n\nexport interface CalendarWidgetProps {\n events: EventsData;\n initialSelectedDate: string;\n currentMonthYear: string;\n}\n\nconst daysOfWeek: string[] = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];\n\nexport const CalendarWidget: FC = ({\n events,\n initialSelectedDate,\n currentMonthYear,\n}) => {\n const [selectedDate, setSelectedDate] = useState(initialSelectedDate);\n\n const scrollRef = useRef(null);\n const isDragging = useRef(false);\n const startX = useRef(0);\n const scrollLeftStart = useRef(0);\n\n useEffect(() => {\n const el = scrollRef.current;\n if (!el) return;\n\n const onMouseDown = (e: MouseEvent) => {\n isDragging.current = true;\n startX.current = e.pageX - el.offsetLeft;\n scrollLeftStart.current = el.scrollLeft;\n el.style.cursor = 'grabbing';\n };\n\n const onMouseLeave = () => {\n isDragging.current = false;\n el.style.cursor = 'grab';\n };\n\n const onMouseUp = () => {\n isDragging.current = false;\n el.style.cursor = 'grab';\n };\n\n const onMouseMove = (e: MouseEvent) => {\n if (!isDragging.current) return;\n e.preventDefault();\n const x = e.pageX - el.offsetLeft;\n const walk = (x - startX.current) * 1;\n el.scrollLeft = scrollLeftStart.current - walk;\n };\n\n el.style.cursor = 'grab';\n el.addEventListener('mousedown', onMouseDown);\n el.addEventListener('mouseleave', onMouseLeave);\n el.addEventListener('mouseup', onMouseUp);\n el.addEventListener('mousemove', onMouseMove);\n\n return () => {\n el.removeEventListener('mousedown', onMouseDown);\n el.removeEventListener('mouseleave', onMouseLeave);\n el.removeEventListener('mouseup', onMouseUp);\n el.removeEventListener('mousemove', onMouseMove);\n };\n }, []);\n\n const dates: DateItem[] = Array.from({ length: 92 }, (_, i) => {\n const date = new Date(2024, 8, 1 + i);\n return {\n day: date.getDate(),\n fullDate: date.toISOString().split('T')[0],\n month: date.getMonth(),\n year: date.getFullYear(),\n dateObj: date,\n dayOfWeek: date.getDay(),\n dayName: daysOfWeek[date.getDay()],\n };\n });\n\n return (\n
\n
\n \n {currentMonthYear}\n \n\n
\n \n {dates.map((date) => {\n const isSelected = selectedDate === date.fullDate;\n const hasEvent = events[date.fullDate]?.length > 0;\n\n return (\n \n \n {date.dayName}\n
\n\n setSelectedDate(date.fullDate)}\n >\n
\n {isSelected && (\n \n )}\n \n {date.day}\n \n
\n \n {hasEvent && !isSelected && (\n \n )}\n \n \n
\n );\n })}\n
\n
\n \n\n
\n \n \n {events[selectedDate]?.length ? (\n \n {events[selectedDate].map((event) => (\n \n \n {event.title}\n \n \n {event.time}\n \n \n ))}\n \n ) : (\n \n
\n \n
\n

\n No Events\n

\n \n )}\n \n \n\n
\n
\n
\n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "calendar-widget-base", "type": "registry:component", "title": "Calendar Widget (base)", "description": "Theme-ready base variant of An animated calendar widget featuring progressive blur effects that enhance depth and focus during interaction..", "dependencies": [ "lucide-react", "motion" ], "files": [ { "path": "components/watermelon/calendar-widget.tsx", "type": "registry:component", "content": "'use client';\n\nimport { useState, useRef, useEffect, type FC } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport { CalendarDays } from 'lucide-react';\n\nexport interface CalendarEvent {\n title: string;\n time: string;\n}\n\nexport interface EventsData {\n [key: string]: CalendarEvent[];\n}\n\ninterface DateItem {\n day: number;\n fullDate: string;\n month: number;\n year: number;\n dateObj: Date;\n dayOfWeek: number;\n dayName: string;\n}\n\nexport interface CalendarWidgetProps {\n events: EventsData;\n initialSelectedDate: string;\n currentMonthYear: string;\n}\n\nconst daysOfWeek: string[] = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];\n\nexport const CalendarWidget: FC = ({\n events,\n initialSelectedDate,\n currentMonthYear,\n}) => {\n const [selectedDate, setSelectedDate] = useState(initialSelectedDate);\n\n const scrollRef = useRef(null);\n const isDragging = useRef(false);\n const startX = useRef(0);\n const scrollLeftStart = useRef(0);\n\n useEffect(() => {\n const el = scrollRef.current;\n if (!el) return;\n\n const onMouseDown = (e: MouseEvent) => {\n isDragging.current = true;\n startX.current = e.pageX - el.offsetLeft;\n scrollLeftStart.current = el.scrollLeft;\n el.style.cursor = 'grabbing';\n };\n\n const onMouseLeave = () => {\n isDragging.current = false;\n el.style.cursor = 'grab';\n };\n\n const onMouseUp = () => {\n isDragging.current = false;\n el.style.cursor = 'grab';\n };\n\n const onMouseMove = (e: MouseEvent) => {\n if (!isDragging.current) return;\n e.preventDefault();\n const x = e.pageX - el.offsetLeft;\n const walk = (x - startX.current) * 1;\n el.scrollLeft = scrollLeftStart.current - walk;\n };\n\n el.style.cursor = 'grab';\n el.addEventListener('mousedown', onMouseDown);\n el.addEventListener('mouseleave', onMouseLeave);\n el.addEventListener('mouseup', onMouseUp);\n el.addEventListener('mousemove', onMouseMove);\n\n return () => {\n el.removeEventListener('mousedown', onMouseDown);\n el.removeEventListener('mouseleave', onMouseLeave);\n el.removeEventListener('mouseup', onMouseUp);\n el.removeEventListener('mousemove', onMouseMove);\n };\n }, []);\n\n const dates: DateItem[] = Array.from({ length: 92 }, (_, i) => {\n const date = new Date(2024, 8, 1 + i);\n return {\n day: date.getDate(),\n fullDate: date.toISOString().split('T')[0],\n month: date.getMonth(),\n year: date.getFullYear(),\n dateObj: date,\n dayOfWeek: date.getDay(),\n dayName: daysOfWeek[date.getDay()],\n };\n });\n\n return (\n
\n
\n \n {currentMonthYear}\n \n\n
\n \n {dates.map((date) => {\n const isSelected = selectedDate === date.fullDate;\n const hasEvent = events[date.fullDate]?.length > 0;\n\n return (\n \n \n {date.dayName}\n
\n\n setSelectedDate(date.fullDate)}\n >\n
\n {isSelected && (\n \n )}\n \n {date.day}\n \n
\n \n {hasEvent && !isSelected && (\n \n )}\n \n \n
\n );\n })}\n
\n \n \n\n
\n \n \n {events[selectedDate]?.length ? (\n \n {events[selectedDate].map((event) => (\n \n \n {event.title}\n \n \n {event.time}\n \n \n ))}\n \n ) : (\n \n
\n \n
\n

No Events

\n \n )}\n \n \n {events[selectedDate]?.length && (\n
\n )}\n
\n
\n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "card-cue", "type": "registry:component", "title": "Card Cue", "description": "Interactive micro-interaction component.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "components/watermelon/card-cue.tsx", "type": "registry:component", "content": "'use client';\n\nimport { useRef, useState } from 'react';\nimport { motion } from 'framer-motion';\nimport { ChevronLeft, X } from 'lucide-react';\n\nexport default function CardCue() {\n const [cardNumber, setCardNumber] = useState('');\n const [expiration, setExpiration] = useState('');\n const [cvv, setCvv] = useState('');\n const [isErrorAnimation, setIsErrorAnimation] = useState(false);\n const [cardNumberFocused, setCardNumberFocused] = useState(false);\n\n const cardNumberRef = useRef(null);\n\n const handleAddCard = () => {\n if (!cardNumber.trim()) {\n setIsErrorAnimation(true);\n setCardNumberFocused(true);\n cardNumberRef.current?.focus();\n setTimeout(() => setIsErrorAnimation(false), 200);\n } else {\n console.log('Card added', { cardNumber, expiration, cvv });\n }\n };\n\n return (\n
\n
\n
\n \n

\n Add Card\n

\n \n
\n\n
\n \n setCardNumber(e.target.value)}\n onFocus={() => setCardNumberFocused(true)}\n onBlur={() => setCardNumberFocused(false)}\n className={`h-14 w-full rounded-2xl bg-zinc-100 px-4 text-base text-zinc-900 ring-3 transition-all outline-none placeholder:text-zinc-400 focus:bg-white dark:bg-zinc-900 dark:text-zinc-100 dark:placeholder:text-zinc-500 dark:focus:bg-zinc-950 ${\n cardNumberFocused\n ? 'ring-zinc-900 dark:ring-zinc-100'\n : 'ring-transparent'\n }`}\n />\n \n\n
\n setExpiration(e.target.value)}\n className=\"h-14 w-full rounded-2xl bg-zinc-100 px-4 text-base text-zinc-900 ring-3 ring-transparent transition-all outline-none placeholder:text-zinc-400 focus:bg-white focus:ring-zinc-900 dark:bg-zinc-900 dark:text-zinc-100 dark:placeholder:text-zinc-500 dark:focus:bg-zinc-950 dark:focus:ring-zinc-100\"\n />\n setCvv(e.target.value)}\n className=\"h-14 w-full rounded-2xl bg-zinc-100 px-4 text-base text-zinc-900 ring-3 ring-transparent transition-all outline-none placeholder:text-zinc-400 focus:bg-white focus:ring-zinc-900 dark:bg-zinc-900 dark:text-zinc-100 dark:placeholder:text-zinc-500 dark:focus:bg-zinc-950 dark:focus:ring-zinc-100\"\n />\n
\n
\n\n \n Add Card\n \n
\n
\n );\n}\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "card-cue-base", "type": "registry:component", "title": "Card Cue (base)", "description": "Theme-ready base variant of Interactive micro-interaction component..", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "components/watermelon/card-cue.tsx", "type": "registry:component", "content": "'use client';\n\nimport { useRef, useState } from 'react';\nimport { motion } from 'framer-motion';\nimport { ChevronLeft, X } from 'lucide-react';\n\nexport default function CardCue() {\n const [cardNumber, setCardNumber] = useState('');\n const [expiration, setExpiration] = useState('');\n const [cvv, setCvv] = useState('');\n const [isErrorAnimation, setIsErrorAnimation] = useState(false);\n const [cardNumberFocused, setCardNumberFocused] = useState(false);\n\n const cardNumberRef = useRef(null);\n\n const handleAddCard = () => {\n if (!cardNumber.trim()) {\n setIsErrorAnimation(true);\n setCardNumberFocused(true);\n cardNumberRef.current?.focus();\n setTimeout(() => setIsErrorAnimation(false), 200);\n } else {\n console.log('Card added', { cardNumber, expiration, cvv });\n }\n };\n\n return (\n
\n
\n
\n \n\n

Add Card

\n\n \n
\n\n
\n \n setCardNumber(e.target.value)}\n onFocus={() => setCardNumberFocused(true)}\n onBlur={() => setCardNumberFocused(false)}\n className={`bg-muted text-foreground placeholder:text-muted-foreground focus:bg-background h-14 w-full rounded-2xl px-4 text-base ring-3 transition-all outline-none ${\n cardNumberFocused ? 'ring-ring' : 'ring-transparent'\n }`}\n />\n \n\n
\n setExpiration(e.target.value)}\n className=\"bg-muted text-foreground placeholder:text-muted-foreground focus:bg-background focus:ring-ring h-14 w-full rounded-2xl px-4 text-base ring-3 ring-transparent transition-all outline-none\"\n />\n\n setCvv(e.target.value)}\n className=\"bg-muted text-foreground placeholder:text-muted-foreground focus:bg-background focus:ring-ring h-14 w-full rounded-2xl px-4 text-base ring-3 ring-transparent transition-all outline-none\"\n />\n
\n
\n\n \n Add Card\n \n
\n
\n );\n}\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "card-split-accordian", "type": "registry:component", "title": "Card Split Accordian", "description": "An animated card split accordion that smoothly expands to reveal detailed information.", "dependencies": [ "lucide-react", "motion", "react-icons", "react-use-measure" ], "files": [ { "path": "components/watermelon/card-split-accordian.tsx", "type": "registry:component", "content": "'use client';\n\nimport React, { useState, type FC } from 'react';\nimport { motion, MotionConfig, type Transition } from 'motion/react';\nimport { ChevronDown, Send } from 'lucide-react';\nimport { HiCursorArrowRipple } from 'react-icons/hi2';\nimport { Layers } from 'lucide-react';\nimport { IoIosTimer } from 'react-icons/io';\nimport { PiHandTap } from 'react-icons/pi';\nimport useMeasure from 'react-use-measure';\n\nexport interface AccordionItemData {\n id: number;\n title: string;\n icon: React.ReactNode;\n content: string;\n}\n\ninterface AccordionItemProps {\n item: AccordionItemData;\n\n setOpenId: (id: number | null) => void;\n index: number;\n total: number;\n openIndex: number;\n}\ninterface AccordionProps {\n items?: AccordionItemData[];\n}\n\nconst springTransition: Transition = {\n type: 'spring',\n stiffness: 600,\n damping: 50,\n mass: 1,\n};\n\nconst DEFAULT_ITEMS: AccordionItemData[] = [\n {\n id: 1,\n title: 'What is Interaction Design?',\n icon: ,\n content:\n 'Interaction design focuses on creating engaging interfaces with well-thought-out behaviors and actions.',\n },\n {\n id: 2,\n title: 'Principles & Patterns',\n icon: ,\n content:\n 'Fundamental guidelines and repeated solutions that ensure consistency and usability in design.',\n },\n {\n id: 3,\n title: 'Usability & Accessibility',\n icon: ,\n content:\n 'Designing experiences that are easy to use and accessible to people of all abilities.',\n },\n {\n id: 4,\n title: 'Prototyping & Testing',\n icon: ,\n content:\n 'Rapid experimentation and validation of ideas through prototypes and real user testing.',\n },\n {\n id: 5,\n title: 'UX Optimisation',\n icon: ,\n content:\n 'Improving user experience by analyzing behavior and refining interactions over time.',\n },\n];\n\nconst AccordionItem: FC = ({\n item,\n setOpenId,\n index,\n total,\n openIndex,\n}) => {\n const [ref, bounds] = useMeasure();\n const isOpen = index === openIndex;\n\n const isFirst = index === 0;\n const isLast = index === total - 1;\n\n const isBeforeOpen = index === openIndex - 1;\n const isAfterOpen = index === openIndex + 1;\n\n const isAlone = (isAfterOpen && isLast) || (isBeforeOpen && isFirst);\n\n const BORDER_WIDTH = '1px';\n const BORDER_STYLE = 'solid';\n const borderTopWidth =\n isFirst || isAfterOpen || isOpen ? BORDER_WIDTH : '0px';\n const borderBottomWidth =\n isLast || isBeforeOpen || isOpen ? BORDER_WIDTH : '0px';\n const borderLeftWidth = BORDER_WIDTH;\n const borderRightWidth = BORDER_WIDTH;\n\n let borderTopLeftRadius = 0;\n let borderTopRightRadius = 0;\n let borderBottomLeftRadius = 0;\n let borderBottomRightRadius = 0;\n\n if (isOpen || isAlone) {\n borderTopLeftRadius = 20;\n borderTopRightRadius = 20;\n borderBottomLeftRadius = 20;\n borderBottomRightRadius = 20;\n } else if (isBeforeOpen) {\n borderBottomLeftRadius = 20;\n borderBottomRightRadius = 20;\n } else if (isAfterOpen) {\n borderTopLeftRadius = 20;\n borderTopRightRadius = 20;\n } else if (isFirst) {\n borderTopLeftRadius = 20;\n borderTopRightRadius = 20;\n } else if (isLast) {\n borderBottomLeftRadius = 20;\n borderBottomRightRadius = 20;\n }\n\n return (\n \n \n \n setOpenId(isOpen ? null : item.id)}\n className=\"flex w-full cursor-pointer items-center justify-between px-[12px] py-[10px]\"\n >\n
\n {item.icon}\n\n \n {item.title}\n \n
\n\n \n \n \n \n\n \n
\n
\n {item.content}\n
\n
\n \n \n \n \n );\n};\n\nexport const AccordionApp: FC = ({ items }) => {\n const defaultItems = items ?? DEFAULT_ITEMS;\n\n const [openId, setOpenId] = useState(null);\n\n const openIndex = defaultItems.findIndex((item) => item.id === openId);\n\n return (\n
\n
    \n {defaultItems.map((item, index) => (\n \n ))}\n
\n
\n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "card-split-accordian-base", "type": "registry:component", "title": "Card Split Accordian (base)", "description": "Theme-ready base variant of An animated card split accordion that smoothly expands to reveal detailed information..", "dependencies": [ "lucide-react", "motion", "react-icons", "react-use-measure" ], "files": [ { "path": "components/watermelon/card-split-accordian.tsx", "type": "registry:component", "content": "'use client';\n\nimport React, { useState, type FC } from 'react';\nimport { motion, MotionConfig, type Transition } from 'motion/react';\nimport { ChevronDown, Send } from 'lucide-react';\nimport { HiCursorArrowRipple } from 'react-icons/hi2';\nimport { Layers } from 'lucide-react';\nimport { IoIosTimer } from 'react-icons/io';\nimport { PiHandTap } from 'react-icons/pi';\nimport useMeasure from 'react-use-measure';\n\nexport interface AccordionItemData {\n id: number;\n title: string;\n icon: React.ReactNode;\n content: string;\n}\n\ninterface AccordionItemProps {\n item: AccordionItemData;\n setOpenId: (id: number | null) => void;\n index: number;\n total: number;\n openIndex: number;\n}\ninterface AccordionProps {\n items?: AccordionItemData[];\n}\n\nconst springTransition: Transition = {\n type: 'spring',\n stiffness: 600,\n damping: 50,\n mass: 1,\n};\n\nconst DEFAULT_ITEMS: AccordionItemData[] = [\n {\n id: 1,\n title: 'What is Interaction Design?',\n icon: ,\n content:\n 'Interaction design focuses on creating engaging interfaces with well-thought-out behaviors and actions.',\n },\n {\n id: 2,\n title: 'Principles & Patterns',\n icon: ,\n content:\n 'Fundamental guidelines and repeated solutions that ensure consistency and usability in design.',\n },\n {\n id: 3,\n title: 'Usability & Accessibility',\n icon: ,\n content:\n 'Designing experiences that are easy to use and accessible to people of all abilities.',\n },\n {\n id: 4,\n title: 'Prototyping & Testing',\n icon: ,\n content:\n 'Rapid experimentation and validation of ideas through prototypes and real user testing.',\n },\n {\n id: 5,\n title: 'UX Optimisation',\n icon: ,\n content:\n 'Improving user experience by analyzing behavior and refining interactions over time.',\n },\n];\n\nconst AccordionItem: FC = ({\n item,\n setOpenId,\n index,\n total,\n openIndex,\n}) => {\n const [ref, bounds] = useMeasure();\n const isOpen = index === openIndex;\n\n const isFirst = index === 0;\n const isLast = index === total - 1;\n\n const isBeforeOpen = index === openIndex - 1;\n const isAfterOpen = index === openIndex + 1;\n\n const isAlone = (isAfterOpen && isLast) || (isBeforeOpen && isFirst);\n\n const BORDER_WIDTH = '1px';\n const BORDER_STYLE = 'solid';\n const borderTopWidth =\n isFirst || isAfterOpen || isOpen ? BORDER_WIDTH : '0px';\n const borderBottomWidth =\n isLast || isBeforeOpen || isOpen ? BORDER_WIDTH : '0px';\n const borderLeftWidth = BORDER_WIDTH;\n const borderRightWidth = BORDER_WIDTH;\n\n let borderTopLeftRadius: number | string = 0;\n let borderTopRightRadius: number | string = 0;\n let borderBottomLeftRadius: number | string = 0;\n let borderBottomRightRadius: number | string = 0;\n\n const RADIUS = 'var(--radius)';\n\n if (isOpen || isAlone) {\n borderTopLeftRadius = RADIUS;\n borderTopRightRadius = RADIUS;\n borderBottomLeftRadius = RADIUS;\n borderBottomRightRadius = RADIUS;\n } else if (isBeforeOpen) {\n borderBottomLeftRadius = RADIUS;\n borderBottomRightRadius = RADIUS;\n } else if (isAfterOpen) {\n borderTopLeftRadius = RADIUS;\n borderTopRightRadius = RADIUS;\n } else if (isFirst) {\n borderTopLeftRadius = RADIUS;\n borderTopRightRadius = RADIUS;\n } else if (isLast) {\n borderBottomLeftRadius = RADIUS;\n borderBottomRightRadius = RADIUS;\n }\n\n return (\n \n \n \n setOpenId(isOpen ? null : item.id)}\n className=\"flex w-full cursor-pointer items-center justify-between px-[12px] py-[10px]\"\n >\n
\n {item.icon}\n\n \n {item.title}\n \n
\n\n \n \n \n \n\n \n
\n
\n {item.content}\n
\n
\n \n \n \n \n );\n};\n\nexport const AccordionApp: FC = ({ items }) => {\n const defaultItems = items ?? DEFAULT_ITEMS;\n\n const [openId, setOpenId] = useState(null);\n\n const openIndex = defaultItems.findIndex((item) => item.id === openId);\n\n return (\n
\n
    \n {defaultItems.map((item, index) => (\n \n ))}\n
\n
\n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "card-swipe", "type": "registry:component", "title": "Card Swipe", "description": "A tactile, gesture-driven card stack that supports velocity-based swiping and smooth pagination.", "dependencies": [ "@hugeicons/core-free-icons", "@hugeicons/react", "motion", "next-themes" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/watermelon/card-swipe.tsx", "type": "registry:component", "content": "'use client';\n\nimport React, { useState, useEffect, type ReactNode } from 'react';\nimport {\n motion,\n useMotionValue,\n useTransform,\n type PanInfo,\n type Transition,\n} from 'motion/react';\nimport { HugeiconsIcon } from '@hugeicons/react';\nimport { useTheme } from 'next-themes';\nimport {\n Book02Icon,\n Brain02Icon,\n DropletFreeIcons,\n RunningShoesIcon,\n SwimmingIcon,\n} from '@hugeicons/core-free-icons';\nimport { cn } from '@/lib/utils';\n\nexport interface CardItem {\n id: number;\n title: string;\n description: string;\n icon: (theme: 'light' | 'dark') => ReactNode;\n}\n\ninterface CardCarouselProps {\n items?: CardItem[];\n}\n\nconst DEFAULT_CARDS: CardItem[] = [\n {\n id: 1,\n title: 'Reading',\n description: 'Sharpen your mind & escape to new adventures.',\n icon: (theme) => (\n \n ),\n },\n {\n id: 2,\n title: 'Drink Water',\n description: 'Stay hydrated & energized. Your body will thank you!',\n icon: (theme) => (\n \n ),\n },\n {\n id: 3,\n title: 'Running',\n description: 'Feel the endorphins! Get a quick energy boost.',\n icon: (theme) => (\n \n ),\n },\n {\n id: 4,\n title: 'Swimming',\n description: 'Low-impact workout. Refreshing & invigorating.',\n icon: (theme) => (\n \n ),\n },\n {\n id: 5,\n title: 'Meditation',\n description: 'Find inner peace. Just 5 minutes can de-stress.',\n icon: (theme) => (\n \n ),\n },\n];\n\nconst ITEM_WIDTH = 320;\nconst GAP = 16;\nconst CONTAINER_WIDTH = ITEM_WIDTH + GAP;\nconst DRAG_BUFFER = 50;\nconst VELOCITY_THRESHOLD = 500;\n\nconst SPRING_OPTIONS: Transition = {\n type: 'spring',\n stiffness: 330,\n damping: 30,\n};\n\n\ninterface CarouselCardProps {\n item: CardItem;\n index: number;\n x: ReturnType>;\n itemCount: number;\n currentTheme: 'light' | 'dark';\n}\n\nconst CarouselCard: React.FC = ({\n item,\n index,\n x,\n itemCount,\n currentTheme,\n}) => {\n const nextIndex = Math.min(index + 1, itemCount - 1);\n const prevIndex = Math.max(index - 1, 0);\n\n const range = [\n (-100 * (index + 1) * CONTAINER_WIDTH) / 100,\n (-100 * index * CONTAINER_WIDTH) / 100,\n (-100 * (index - 1) * CONTAINER_WIDTH) / 100,\n ];\n const outputRange = [nextIndex ? 90 : 90, 0, prevIndex ? -90 : -90];\n\n const rotateY = useTransform(x, range, outputRange, { clamp: false });\n\n return (\n \n
\n {item.icon(currentTheme)}\n
\n\n

\n {item.title}\n

\n\n

\n {item.description}\n

\n\n \n Get Started\n \n \n );\n};\n\nexport const CardSwipe: React.FC = ({\n items = DEFAULT_CARDS,\n}) => {\n const [currentIndex, setCurrentIndex] = useState(0);\n const [mounted, setMounted] = useState(false);\n const { resolvedTheme } = useTheme();\n\n const x = useMotionValue(0);\n\n useEffect(() => {\n requestAnimationFrame(() => setMounted(true));\n }, []);\n\n if (!mounted) return null;\n\n const currentTheme = resolvedTheme === 'dark' ? 'dark' : 'light';\n\n const handleDragEnd = (_: unknown, info: PanInfo) => {\n const offset = info.offset.x;\n const velocity = info.velocity.x;\n\n if (offset < -DRAG_BUFFER || velocity < -VELOCITY_THRESHOLD) {\n setCurrentIndex((prev) => Math.min(prev + 1, items.length - 1));\n } else if (offset > DRAG_BUFFER || velocity > VELOCITY_THRESHOLD) {\n setCurrentIndex((prev) => Math.max(prev - 1, 0));\n }\n };\n\n const leftConstraint = -((ITEM_WIDTH + GAP) * (items.length - 1));\n\n return (\n
\n \n \n {items.map((item, index) => (\n \n ))}\n \n
\n\n
\n {items.map((_, i) => (\n setCurrentIndex(i)}\n />\n ))}\n
\n \n );\n};\n\nexport default CardSwipe;\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "card-swipe-base", "type": "registry:component", "title": "Card Swipe (base)", "description": "Theme-ready base variant of A tactile, gesture-driven card stack that supports velocity-based swiping and smooth pagination..", "dependencies": [ "@hugeicons/core-free-icons", "@hugeicons/react", "motion", "next-themes" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/watermelon/card-swipe.tsx", "type": "registry:component", "content": "'use client';\n\nimport React, { useState, type ReactNode } from 'react';\nimport {\n motion,\n useMotionValue,\n useTransform,\n type PanInfo,\n type Transition,\n} from 'motion/react';\nimport { HugeiconsIcon } from '@hugeicons/react';\nimport {\n Book02Icon,\n Brain02Icon,\n DropletFreeIcons,\n RunningShoesIcon,\n SwimmingIcon,\n} from '@hugeicons/core-free-icons';\nimport { cn } from '@/lib/utils';\n\nexport interface CardItem {\n id: number;\n title: string;\n description: string;\n icon: () => ReactNode;\n}\n\ninterface CardCarouselProps {\n items?: CardItem[];\n}\n\nconst DEFAULT_CARDS: CardItem[] = [\n {\n id: 1,\n title: 'Reading',\n description: 'Sharpen your mind & escape to new adventures.',\n icon: () => (\n \n ),\n },\n {\n id: 2,\n title: 'Drink Water',\n description: 'Stay hydrated & energized. Your body will thank you!',\n icon: () => (\n \n ),\n },\n {\n id: 3,\n title: 'Running',\n description: 'Feel the endorphins! Get a quick energy boost.',\n icon: () => (\n \n ),\n },\n {\n id: 4,\n title: 'Swimming',\n description: 'Low-impact workout. Refreshing & invigorating.',\n icon: () => (\n \n ),\n },\n {\n id: 5,\n title: 'Meditation',\n description: 'Find inner peace. Just 5 minutes can de-stress.',\n icon: () => (\n \n ),\n },\n];\n\nconst ITEM_WIDTH = 320;\nconst GAP = 16;\nconst CONTAINER_WIDTH = ITEM_WIDTH + GAP;\nconst DRAG_BUFFER = 50;\nconst VELOCITY_THRESHOLD = 500;\n\nconst SPRING_OPTIONS: Transition = {\n type: 'spring',\n stiffness: 330,\n damping: 30,\n};\n\ninterface CarouselCardProps {\n item: CardItem;\n index: number;\n x: ReturnType>;\n itemCount: number;\n}\n\nconst CarouselCard: React.FC = ({\n item,\n index,\n x,\n itemCount,\n}) => {\n const nextIndex = Math.min(index + 1, itemCount - 1);\n const prevIndex = Math.max(index - 1, 0);\n\n const range = [\n (-100 * (index + 1) * CONTAINER_WIDTH) / 100,\n (-100 * index * CONTAINER_WIDTH) / 100,\n (-100 * (index - 1) * CONTAINER_WIDTH) / 100,\n ];\n const outputRange = [nextIndex ? 90 : 90, 0, prevIndex ? -90 : -90];\n\n const rotateY = useTransform(x, range, outputRange, { clamp: false });\n\n return (\n \n
\n {item.icon()}\n
\n\n

\n {item.title}\n

\n\n

\n {item.description}\n

\n\n \n Get Started\n \n \n );\n};\n\nexport const CardSwipe: React.FC = ({\n items = DEFAULT_CARDS,\n}) => {\n const [currentIndex, setCurrentIndex] = useState(0);\n\n const x = useMotionValue(0);\n\n const handleDragEnd = (_: unknown, info: PanInfo) => {\n const offset = info.offset.x;\n const velocity = info.velocity.x;\n\n if (offset < -DRAG_BUFFER || velocity < -VELOCITY_THRESHOLD) {\n setCurrentIndex((prev) => Math.min(prev + 1, items.length - 1));\n } else if (offset > DRAG_BUFFER || velocity > VELOCITY_THRESHOLD) {\n setCurrentIndex((prev) => Math.max(prev - 1, 0));\n }\n };\n\n const leftConstraint = -((ITEM_WIDTH + GAP) * (items.length - 1));\n\n return (\n
\n \n \n {items.map((item, index) => (\n \n ))}\n \n
\n\n
\n {items.map((_, i) => (\n setCurrentIndex(i)}\n />\n ))}\n
\n \n );\n};\n\nexport default CardSwipe;\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "carousel-navigator", "type": "registry:component", "title": "Carousel Navigator", "description": "A dynamic carousel navigator with theme-adaptive background transitions and progress-syncing indicators.", "dependencies": [ "lucide-react", "motion" ], "files": [ { "path": "components/watermelon/carousel-navigator.tsx", "type": "registry:component", "content": "'use client';\n\nimport { motion } from 'motion/react';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport { type FC } from 'react';\n\ntype ThemeConfig = {\n bg: string;\n button: string;\n dot: string;\n progress: string;\n};\n\ninterface CarouselNavigatorProps {\n totalSlides?: number;\n autoDelay?: number;\n themes?: ThemeConfig[];\n currentIndex: number;\n onIndexChange: (index: number) => void;\n}\n\nconst DEFAULT_TOTAL_SLIDES = 4;\nconst DEFAULT_AUTO_DELAY = 5000;\n\nconst DEFAULT_THEMES: ThemeConfig[] = [\n {\n bg: 'bg-zinc-100',\n button: 'bg-zinc-900',\n dot: 'bg-zinc-300',\n progress: 'bg-zinc-300',\n },\n {\n bg: 'bg-blue-100',\n button: 'bg-blue-600',\n dot: 'bg-blue-300',\n progress: 'bg-blue-300',\n },\n {\n bg: 'bg-green-100',\n button: 'bg-green-600',\n dot: 'bg-green-400',\n progress: 'bg-green-400',\n },\n {\n bg: 'bg-yellow-100',\n button: 'bg-yellow-400',\n dot: 'bg-yellow-300',\n progress: 'bg-yellow-300',\n },\n];\n\nexport const CarouselNavigator: FC = ({\n totalSlides = DEFAULT_TOTAL_SLIDES,\n autoDelay = DEFAULT_AUTO_DELAY,\n themes = DEFAULT_THEMES,\n currentIndex,\n onIndexChange,\n}) => {\n const theme = themes[currentIndex];\n\n const goPrev = () =>\n onIndexChange((currentIndex - 1 + totalSlides) % totalSlides);\n\n const goNext = () => onIndexChange((currentIndex + 1) % totalSlides);\n\n return (\n \n \n \n \n\n
\n {Array.from({ length: totalSlides }).map((_, i) => (\n onIndexChange(i)}\n />\n ))}\n
\n\n \n \n \n \n );\n};\n\nconst ArrowButton = ({ children, onClick, themeColor, disabled }: any) => {\n return (\n \n {children}\n \n );\n};\n\nconst Indicator = ({\n isActive,\n theme,\n autoDelay,\n onClick,\n}: {\n isActive: boolean;\n theme: ThemeConfig;\n autoDelay: number;\n onClick: () => void;\n}) => {\n return (\n \n {isActive && (\n \n )}\n \n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "carousel-navigator-base", "type": "registry:component", "title": "Carousel Navigator (base)", "description": "Theme-ready base variant of A dynamic carousel navigator with theme-adaptive background transitions and progress-syncing indicators..", "dependencies": [ "lucide-react", "motion" ], "files": [ { "path": "components/watermelon/carousel-navigator.tsx", "type": "registry:component", "content": "'use client';\n\nimport { motion } from 'motion/react';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport { type FC } from 'react';\n\ntype ThemeConfig = {\n button: string;\n dot: string;\n progress: string;\n};\n\ninterface CarouselNavigatorProps {\n totalSlides?: number;\n autoDelay?: number;\n themes?: ThemeConfig[];\n currentIndex: number;\n onIndexChange: (index: number) => void;\n}\n\nconst DEFAULT_TOTAL_SLIDES = 4;\nconst DEFAULT_AUTO_DELAY = 5000;\n\nconst DEFAULT_THEMES: ThemeConfig[] = [\n {\n button: 'bg-primary text-primary-foreground',\n dot: 'bg-secondary',\n progress: 'bg-secondary',\n },\n {\n button: 'bg-primary text-primary-foreground',\n dot: 'bg-secondary',\n progress: 'bg-secondary',\n },\n {\n button: 'bg-primary text-primary-foreground',\n dot: 'bg-secondary',\n progress: 'bg-secondary',\n },\n {\n button: 'bg-primary text-primary-foreground',\n dot: 'bg-secondary',\n progress: 'bg-secondary',\n },\n];\n\nexport const CarouselNavigator: FC = ({\n totalSlides = DEFAULT_TOTAL_SLIDES,\n autoDelay = DEFAULT_AUTO_DELAY,\n themes = DEFAULT_THEMES,\n currentIndex,\n onIndexChange,\n}) => {\n const theme = themes[currentIndex];\n\n const goPrev = () =>\n onIndexChange((currentIndex - 1 + totalSlides) % totalSlides);\n\n const goNext = () => onIndexChange((currentIndex + 1) % totalSlides);\n\n return (\n \n \n \n \n\n
\n {Array.from({ length: totalSlides }).map((_, i) => (\n onIndexChange(i)}\n />\n ))}\n
\n\n \n \n \n \n );\n};\n\nconst ArrowButton = ({ children, onClick, themeColor, disabled }: any) => {\n return (\n \n {children}\n \n );\n};\n\nconst Indicator = ({\n isActive,\n theme,\n autoDelay,\n onClick,\n}: {\n isActive: boolean;\n theme: ThemeConfig;\n autoDelay: number;\n onClick: () => void;\n}) => {\n return (\n \n {isActive && (\n \n )}\n \n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "carousel-slider", "type": "registry:component", "title": "Carousel Slider", "description": "A playful, gesture-driven card carousel with spring-based rotation and smooth scaling.", "dependencies": [ "@hugeicons/core-free-icons", "@hugeicons/react", "motion" ], "files": [ { "path": "components/watermelon/carousel-slider.tsx", "type": "registry:component", "content": "\"use client\";\n\nimport React, { useState } from \"react\";\nimport {\n motion,\n AnimatePresence,\n useMotionValue,\n useTransform,\n type PanInfo,\n type Variants,\n} from \"motion/react\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { FavouriteIcon } from \"@hugeicons/core-free-icons\";\n\n/* ---------------- Types ---------------- */\n\nexport interface Slide {\n id: number;\n img: string;\n}\n\ntype IconRenderer = (props?: any) => React.ReactNode;\n\ninterface CarouselSliderProps {\n slides?: Slide[];\n favouriteIcon?: IconRenderer;\n}\n\n/* ---------------- Defaults ---------------- */\n\nconst DEFAULT_SLIDES: Slide[] = [\n { id: 1, img: \"https://prourls.link/ORXBVr\" },\n {\n id: 2,\n img: \"https://images.unsplash.com/photo-1518780664697-55e3ad937233?q=80&w=500&auto=format&fit=crop\",\n },\n {\n id: 3,\n img: \"https://images.unsplash.com/photo-1470770841072-f978cf4d019e?q=80&w=500&auto=format&fit=crop\",\n },\n {\n id: 4,\n img: \"https://images.unsplash.com/photo-1500382017468-9049fed747ef?q=80&w=500&auto=format&fit=crop\",\n },\n {\n id: 5,\n img: \"https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?q=80&w=500&auto=format&fit=crop\",\n },\n {\n id: 6,\n img: \"https://images.unsplash.com/photo-1501785888041-af3ef285b470?q=80&w=500&auto=format&fit=crop\",\n },\n];\n\n/* ---------------- Animation Variants ---------------- */\n\nconst variants: Variants = {\n enter: (direction: number) => ({\n x: direction > 0 ? 200 : -200,\n filter: 'brightness(2)',\n scale: 0.75,\n opacity: 0,\n rotate: direction > 0 ? 30 : -30,\n }),\n center: {\n x: 0,\n filter: 'brightness(1)',\n scale: 1,\n opacity: 1,\n rotate: -3,\n zIndex: 1,\n },\n exit: (direction: number) => ({\n x: direction > 0 ? -200 : 200,\n filter: 'brightness(2)',\n scale: 0.75,\n opacity: 0,\n rotate: direction > 0 ? -30 : 30,\n zIndex: 0,\n }),\n};\n\n/* ---------------- Component ---------------- */\n\nexport const CarouselSlider: React.FC = ({\n slides = DEFAULT_SLIDES,\n favouriteIcon = (props) => (\n \n ),\n}) => {\n const [index, setIndex] = useState(0);\n const [direction, setDirection] = useState(1);\n\n const dragX = useMotionValue(0);\n const rotate = useTransform(dragX, [-200, 200], [-18, 18]);\n\n const paginate = (newDirection: number) => {\n setDirection(newDirection);\n setIndex((prev) => (prev + newDirection + slides.length) % slides.length);\n };\n\n const handleDragEnd = (_: any, info: PanInfo) => {\n if (info.offset.x < -120) paginate(1);\n else if (info.offset.x > 120) paginate(-1);\n };\n\n return (\n
\n {/* Slider */}\n
\n \n \n
\n \n\n {/* Favourite Button */}\n \n {favouriteIcon({\n className: \"text-[#2b2b2b] dark:text-white/90\",\n })}\n \n
\n \n \n\n {/* Background Card */}\n
\n
\n\n {/* Pagination */}\n
\n {slides.map((_, i) => (\n {\n setDirection(i > index ? 1 : -1);\n setIndex(i);\n }}\n />\n ))}\n
\n
\n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "carousel-slider-base", "type": "registry:component", "title": "Carousel Slider (base)", "description": "Theme-ready base variant of A playful, gesture-driven card carousel with spring-based rotation and smooth scaling..", "dependencies": [ "@hugeicons/core-free-icons", "@hugeicons/react", "motion" ], "files": [ { "path": "components/watermelon/carousel-slider.tsx", "type": "registry:component", "content": "\"use client\";\n\nimport React, { useState } from \"react\";\nimport {\n motion,\n AnimatePresence,\n useMotionValue,\n useTransform,\n type PanInfo,\n type Variants,\n} from \"motion/react\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { FavouriteIcon } from \"@hugeicons/core-free-icons\";\n\n/* ---------------- Types ---------------- */\n\nexport interface Slide {\n id: number;\n img: string;\n}\n\ntype IconRenderer = (props?: any) => React.ReactNode;\n\ninterface CarouselSliderProps {\n slides?: Slide[];\n favouriteIcon?: IconRenderer;\n}\n\n/* ---------------- Defaults ---------------- */\n\nconst DEFAULT_SLIDES: Slide[] = [\n { id: 1, img: \"https://prourls.link/ORXBVr\" },\n {\n id: 2,\n img: \"https://images.unsplash.com/photo-1518780664697-55e3ad937233?q=80&w=500&auto=format&fit=crop\",\n },\n {\n id: 3,\n img: \"https://images.unsplash.com/photo-1470770841072-f978cf4d019e?q=80&w=500&auto=format&fit=crop\",\n },\n {\n id: 4,\n img: \"https://images.unsplash.com/photo-1500382017468-9049fed747ef?q=80&w=500&auto=format&fit=crop\",\n },\n {\n id: 5,\n img: \"https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?q=80&w=500&auto=format&fit=crop\",\n },\n {\n id: 6,\n img: \"https://images.unsplash.com/photo-1501785888041-af3ef285b470?q=80&w=500&auto=format&fit=crop\",\n },\n];\n\n/* ---------------- Animation Variants ---------------- */\n\nconst variants: Variants = {\n enter: (direction: number) => ({\n x: direction > 0 ? 200 : -200,\n filter: 'brightness(2)',\n scale: 0.75,\n opacity: 0,\n rotate: direction > 0 ? 30 : -30,\n }),\n center: {\n x: 0,\n filter: 'brightness(1)',\n scale: 1,\n opacity: 1,\n rotate: -3,\n zIndex: 1,\n },\n exit: (direction: number) => ({\n x: direction > 0 ? -200 : 200,\n filter: 'brightness(2)',\n scale: 0.75,\n opacity: 0,\n rotate: direction > 0 ? -30 : 30,\n zIndex: 0,\n }),\n};\n\n/* ---------------- Component ---------------- */\n\nexport const CarouselSlider: React.FC = ({\n slides = DEFAULT_SLIDES,\n favouriteIcon = (props) => (\n \n ),\n}) => {\n const [index, setIndex] = useState(0);\n const [direction, setDirection] = useState(1);\n\n const dragX = useMotionValue(0);\n const rotate = useTransform(dragX, [-200, 200], [-18, 18]);\n\n const paginate = (newDirection: number) => {\n setDirection(newDirection);\n setIndex((prev) => (prev + newDirection + slides.length) % slides.length);\n };\n\n const handleDragEnd = (_: any, info: PanInfo) => {\n if (info.offset.x < -120) paginate(1);\n else if (info.offset.x > 120) paginate(-1);\n };\n\n return (\n
\n {/* Slider */}\n
\n \n \n
\n \n\n {/* Favourite Button */}\n \n {favouriteIcon({\n className: \"text-foreground dark:text-foreground\",\n })}\n \n
\n \n \n\n {/* Background Card */}\n
\n
\n\n {/* Pagination */}\n
\n {slides.map((_, i) => (\n {\n setDirection(i > index ? 1 : -1);\n setIndex(i);\n }}\n />\n ))}\n
\n
\n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "changeable-pricing-section", "type": "registry:component", "title": "Changeable Pricing Section", "description": "A premium interactive pricing selector with animated billing toggle, expandable plan details, and smooth spring-driven transitions for modern SaaS checkout flows.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "components/watermelon/changeable-pricing-section.tsx", "type": "registry:component", "content": "import { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { Check, Info } from \"lucide-react\";\n\nexport type PlanId = string;\n\nexport interface Feature {\n text: string;\n hasInfo?: boolean;\n}\n\nexport interface Plan {\n id: PlanId;\n name: string;\n description: string;\n priceMonthly: string;\n priceYearly: string;\n badge?: string;\n featuresLabel?: string;\n features: Feature[];\n}\n\nexport interface ChangeablePricingSectionProps {\n /** The main title of the section */\n title?: string;\n /** Array of pricing plans to display */\n plans: Plan[];\n /** Optional ID of the default selected plan */\n defaultPlanId?: PlanId;\n /** Default billing cycle */\n defaultBillingCycle?: \"monthly\" | \"yearly\";\n /** Custom label for monthly toggle */\n monthlyLabel?: string;\n /** Custom label for yearly toggle */\n yearlyLabel?: string;\n /** Footer text below plans */\n footerText?: string;\n /** CTA button text */\n buttonText?: string;\n /** Callback fired when continue button is clicked */\n onContinue?: (planId: PlanId, billingCycle: \"monthly\" | \"yearly\") => void;\n}\n\nexport default function ChangeablePricingSection({\n title = \"Select a plan\",\n plans,\n defaultPlanId,\n defaultBillingCycle = \"monthly\",\n monthlyLabel = \"Monthly\",\n yearlyLabel = \"Yearly\",\n footerText = \"Cancel anytime. No long-term contract.\",\n buttonText = \"Continue\",\n onContinue,\n}: ChangeablePricingSectionProps) {\n const [selectedPlan, setSelectedPlan] = useState(\n defaultPlanId || (plans.length > 0 ? plans[0].id : \"\"),\n );\n const [billingCycle, setBillingCycle] = useState<\"monthly\" | \"yearly\">(\n defaultBillingCycle,\n );\n\n return (\n
\n {/* Header */}\n
\n

\n {title}\n

\n
\n \n setBillingCycle(\"monthly\")}\n className={`jet w-[72px] py-1.5 rounded-full text-[10px] font-bold tracking-widest uppercase transition-colors z-10 ${billingCycle === \"monthly\" ? \"text-neutral-800 dark:text-orange-500\" : \"text-neutral-400 dark:text-neutral-500\"}`}\n >\n {monthlyLabel}\n \n setBillingCycle(\"yearly\")}\n className={`jet w-[72px] py-1.5 rounded-full text-[10px] font-bold tracking-widest uppercase transition-colors z-10 ${billingCycle === \"yearly\" ? \"text-neutral-800 dark:text-orange-500\" : \"text-neutral-400 dark:text-neutral-500\"}`}\n >\n {yearlyLabel}\n \n
\n
\n\n {/* Plans */}\n
\n {plans.map((plan) => {\n const isSelected = selectedPlan === plan.id;\n\n return (\n setSelectedPlan(plan.id)}\n transition={{ type: \"spring\", bounce: 0.45, duration: 0.7 }}\n className={`relative overflow-hidden cursor-pointer rounded-[18px] transition-colors duration-300 bg-white dark:bg-neutral-800/50 ${\n isSelected\n ? \"ring-[1px] ring-orange-500 dark:ring-orange-500 shadow-[0_4px_16px_rgba(249,115,22,0.06)] dark:shadow-none\"\n : \"ring-1 ring-neutral-200/80 dark:ring-neutral-800 shadow-sm dark:shadow-none hover:ring-neutral-300 dark:hover:ring-neutral-700\"\n }`}\n >\n
\n {/* Top row */}\n
\n
\n {/* Radio button */}\n
\n \n {isSelected && (\n \n )}\n
\n
\n\n {/* Plan Info */}\n
\n
\n \n {plan.name}\n \n {plan.badge && (\n \n {plan.badge}\n \n )}\n
\n \n {plan.description}\n \n
\n
\n\n {/* Price Info */}\n
\n
\n \n \n {billingCycle === \"monthly\"\n ? plan.priceMonthly\n : plan.priceYearly}\n \n \n
\n \n per user/month\n \n
\n
\n\n {/* Expandable Features */}\n \n {isSelected && (\n \n
\n {plan.featuresLabel && (\n

\n {plan.featuresLabel}\n

\n )}\n
\n {plan.features.map((feature, idx) => (\n \n \n \n {feature.text}\n \n {feature.hasInfo && (\n \n )}\n
\n ))}\n
\n
\n \n )}\n \n
\n \n );\n })}\n
\n\n {/* Footer info & CTA */}\n
\n \n {footerText}\n \n onContinue?.(selectedPlan, billingCycle)}\n className=\"w-full sm:w-auto bg-orange-500 text-white px-8 py-2.5 rounded-full text-[13px] font-medium hover:bg-orange-600 active:scale-95 transition-all outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-orange-500\"\n >\n {buttonText}\n \n
\n
\n );\n}\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "changeable-pricing-section-base", "type": "registry:component", "title": "Changeable Pricing Section (base)", "description": "Theme-ready base variant of A premium interactive pricing selector with animated billing toggle, expandable plan details, and smooth spring-driven transitions for modern SaaS checkout flows..", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "components/watermelon/changeable-pricing-section.tsx", "type": "registry:component", "content": "'use client';\n\nimport { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { Check, Info } from \"lucide-react\";\n\nexport type PlanId = string;\n\nexport interface Feature {\n text: string;\n hasInfo?: boolean;\n}\n\nexport interface Plan {\n id: PlanId;\n name: string;\n description: string;\n priceMonthly: string;\n priceYearly: string;\n badge?: string;\n featuresLabel?: string;\n features: Feature[];\n}\n\nexport interface ChangeablePricingSectionProps {\n title?: string;\n plans: Plan[];\n defaultPlanId?: PlanId;\n defaultBillingCycle?: \"monthly\" | \"yearly\";\n monthlyLabel?: string;\n yearlyLabel?: string;\n footerText?: string;\n buttonText?: string;\n onContinue?: (planId: PlanId, billingCycle: \"monthly\" | \"yearly\") => void;\n}\n\nexport default function ChangeablePricingSection({\n title = \"Select a plan\",\n plans,\n defaultPlanId,\n defaultBillingCycle = \"monthly\",\n monthlyLabel = \"Monthly\",\n yearlyLabel = \"Yearly\",\n footerText = \"Cancel anytime. No long-term contract.\",\n buttonText = \"Continue\",\n onContinue,\n}: ChangeablePricingSectionProps) {\n const [selectedPlan, setSelectedPlan] = useState(\n defaultPlanId || (plans.length > 0 ? plans[0].id : \"\"),\n );\n const [billingCycle, setBillingCycle] = useState<\"monthly\" | \"yearly\">(\n defaultBillingCycle,\n );\n\n return (\n
\n
\n {/* Header */}\n
\n

\n {title}\n

\n
\n \n setBillingCycle(\"monthly\")}\n className={`jet w-[72px] py-1.5 rounded-lg text-[10px] font-bold tracking-widest uppercase transition-colors z-10 ${\n billingCycle === \"monthly\"\n ? \"text-foreground\"\n : \"text-muted-foreground\"\n }`}\n >\n {monthlyLabel}\n \n setBillingCycle(\"yearly\")}\n className={`jet w-[72px] py-1.5 rounded-lg text-[10px] font-bold tracking-widest uppercase transition-colors z-10 ${\n billingCycle === \"yearly\"\n ? \"text-foreground\"\n : \"text-muted-foreground\"\n }`}\n >\n {yearlyLabel}\n \n
\n
\n\n {/* Plans */}\n
\n {plans.map((plan) => {\n const isSelected = selectedPlan === plan.id;\n\n return (\n setSelectedPlan(plan.id)}\n transition={{ type: \"spring\", bounce: 0.45, duration: 0.7 }}\n className={`relative overflow-hidden cursor-pointer rounded-lg transition-colors duration-300 bg-background ${\n isSelected\n ? \"ring-1 ring-primary shadow-[0_4px_16px_hsl(var(--foreground)/0.08)]\"\n : \"ring-1 ring-border shadow-sm hover:ring-border\"\n }`}\n >\n
\n
\n
\n
\n \n {isSelected && (\n \n )}\n
\n
\n\n
\n
\n \n {plan.name}\n \n {plan.badge && (\n \n {plan.badge}\n \n )}\n
\n \n {plan.description}\n \n
\n
\n\n
\n
\n \n \n {billingCycle === \"monthly\"\n ? plan.priceMonthly\n : plan.priceYearly}\n \n \n
\n \n per user/month\n \n
\n
\n\n \n {isSelected && (\n \n
\n {plan.featuresLabel && (\n

\n {plan.featuresLabel}\n

\n )}\n
\n {plan.features.map((feature, idx) => (\n \n \n \n {feature.text}\n \n {feature.hasInfo && (\n \n )}\n
\n ))}\n
\n
\n \n )}\n \n
\n \n );\n })}\n
\n\n {/* Footer */}\n
\n \n {footerText}\n \n onContinue?.(selectedPlan, billingCycle)}\n className=\"w-full sm:w-auto bg-primary text-primary-foreground px-8 py-2.5 rounded-lg text-[13px] font-medium active:scale-95 transition-all outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n >\n {buttonText}\n \n
\n \n \n );\n}" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "collection-grid-disclosure", "type": "registry:component", "title": "Collection Grid Disclosure", "description": "An animated collection grid that smoothly expands to reveal additional content on interaction.", "dependencies": [ "lucide-react", "motion", "react-icons", "react-use-measure" ], "files": [ { "path": "components/watermelon/collection-grid-disclosure.tsx", "type": "registry:component", "content": "'use client';\n\nimport { useState, type FC } from 'react';\nimport {\n motion,\n AnimatePresence,\n MotionConfig,\n type Transition,\n} from 'motion/react';\nimport { ChevronRight, X, Coffee } from 'lucide-react';\nimport { FaCarrot, FaGraduationCap, FaPills, FaPlug } from 'react-icons/fa';\nimport { TbHomeFilled, TbPlayerPlayFilled } from 'react-icons/tb';\nimport { FaBottleWater } from 'react-icons/fa6';\nimport { MdWifi } from 'react-icons/md';\nimport { BsFillMouse2Fill } from 'react-icons/bs';\nimport { IoGameController } from 'react-icons/io5';\nimport useMeasure from 'react-use-measure';\nimport type { IconType } from 'react-icons';\n\nexport interface CollectionItem {\n id: string;\n name: string;\n price: number;\n icon: IconType;\n}\n\nexport interface Collection {\n id: string;\n name: string;\n items: CollectionItem[];\n}\n\ninterface DisclosureCardProps {\n collections?: Collection[];\n}\n\nconst DEFAULT_COLLECTIONS: Collection[] = [\n {\n id: 'utilities',\n name: 'Utilities',\n items: [\n {\n id: 'u-1',\n name: 'Electricity',\n price: 150,\n icon: FaPlug,\n },\n {\n id: 'u-2',\n name: 'Water',\n price: 50,\n icon: FaBottleWater,\n },\n {\n id: 'u-3',\n name: 'Internet',\n price: 100,\n icon: MdWifi,\n },\n ],\n },\n {\n id: 'subscriptions',\n name: 'Subscriptions',\n items: [\n {\n id: 's-1',\n name: 'Streaming',\n price: 80,\n icon: TbPlayerPlayFilled,\n },\n {\n id: 's-2',\n name: 'Courses',\n price: 100,\n icon: FaGraduationCap,\n },\n {\n id: 's-3',\n name: 'Software & Apps',\n price: 120,\n icon: BsFillMouse2Fill,\n },\n {\n id: 's-4',\n name: 'Games',\n price: 50,\n icon: IoGameController,\n },\n ],\n },\n {\n id: 'daily-needs',\n name: 'Daily Needs',\n items: [\n {\n id: 'dn-1',\n name: 'Groceries',\n price: 500.56,\n icon: FaCarrot,\n },\n {\n id: 'dn-2',\n name: 'Snacks',\n price: 45.2,\n icon: Coffee,\n },\n {\n id: 'dn-3',\n name: 'Essentials',\n price: 120.34,\n icon: TbHomeFilled,\n },\n {\n id: 'dn-4',\n name: 'Health',\n price: 75.8,\n icon: FaPills,\n },\n ],\n },\n];\n\nconst springConfig: Transition = {\n type: 'spring',\n stiffness: 200,\n damping: 20,\n mass: 1.1,\n};\n\nexport const DisclosureCard: FC = ({\n collections = DEFAULT_COLLECTIONS,\n}) => {\n return (\n
\n \n {collections.map((collection) => (\n \n ))}\n \n
\n );\n};\n\nconst GridContainer = ({\n items,\n title,\n}: {\n items: CollectionItem[];\n title: string;\n}) => {\n const [isExpanded, setIsExpanded] = useState(false);\n const [ref, bounds] = useMeasure({ offsetSize: true });\n\n return (\n \n 0 ? bounds.height : \"auto\"\n }}\n >\n
\n \n {!isExpanded ? (\n setIsExpanded(true)}\n exit={{ opacity: 0 }}\n transition={{ duration: 0.1, ease: 'easeOut' }}\n >\n
\n {items.map((item, index) => (\n \n \n \n ))}\n
\n\n
\n \n {title}\n \n \n {items.length} Items\n \n
\n\n
\n \n
\n \n ) : (\n \n \n \n {title}\n \n setIsExpanded(false)}\n >\n \n
\n \n\n
\n \n {items.map((item) => (\n \n \n \n \n \n \n {item.name}\n \n
\n
\n

${item.price}

\n
\n
\n \n
\n \n
\n
\n ))}\n \n \n \n )}\n \n \n \n \n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "collection-grid-disclosure-base", "type": "registry:component", "title": "Collection Grid Disclosure (base)", "description": "Theme-ready base variant of An animated collection grid that smoothly expands to reveal additional content on interaction..", "dependencies": [ "lucide-react", "motion", "react-icons", "react-use-measure" ], "files": [ { "path": "components/watermelon/collection-grid-disclosure.tsx", "type": "registry:component", "content": "'use client';\n\nimport { useState, type FC } from 'react';\nimport {\n motion,\n AnimatePresence,\n MotionConfig,\n type Transition,\n} from 'motion/react';\nimport { ChevronRight, X, Coffee } from 'lucide-react';\nimport { FaCarrot, FaGraduationCap, FaPills, FaPlug } from 'react-icons/fa';\nimport { TbHomeFilled, TbPlayerPlayFilled } from 'react-icons/tb';\nimport { FaBottleWater } from 'react-icons/fa6';\nimport { MdWifi } from 'react-icons/md';\nimport { BsFillMouse2Fill } from 'react-icons/bs';\nimport { IoGameController } from 'react-icons/io5';\nimport useMeasure from 'react-use-measure';\nimport type { IconType } from 'react-icons';\n\nexport interface CollectionItem {\n id: string;\n name: string;\n price: number;\n icon: IconType;\n}\n\nexport interface Collection {\n id: string;\n name: string;\n items: CollectionItem[];\n}\n\ninterface DisclosureCardProps {\n collections?: Collection[];\n}\n\nconst DEFAULT_COLLECTIONS: Collection[] = [\n {\n id: 'utilities',\n name: 'Utilities',\n items: [\n {\n id: 'u-1',\n name: 'Electricity',\n price: 150,\n icon: FaPlug,\n },\n {\n id: 'u-2',\n name: 'Water',\n price: 50,\n icon: FaBottleWater,\n },\n {\n id: 'u-3',\n name: 'Internet',\n price: 100,\n icon: MdWifi,\n },\n ],\n },\n {\n id: 'subscriptions',\n name: 'Subscriptions',\n items: [\n {\n id: 's-1',\n name: 'Streaming',\n price: 80,\n icon: TbPlayerPlayFilled,\n },\n {\n id: 's-2',\n name: 'Courses',\n price: 100,\n icon: FaGraduationCap,\n },\n {\n id: 's-3',\n name: 'Software & Apps',\n price: 120,\n icon: BsFillMouse2Fill,\n },\n {\n id: 's-4',\n name: 'Games',\n price: 50,\n icon: IoGameController,\n },\n ],\n },\n {\n id: 'daily-needs',\n name: 'Daily Needs',\n items: [\n {\n id: 'dn-1',\n name: 'Groceries',\n price: 500.56,\n icon: FaCarrot,\n },\n {\n id: 'dn-2',\n name: 'Snacks',\n price: 45.2,\n icon: Coffee,\n },\n {\n id: 'dn-3',\n name: 'Essentials',\n price: 120.34,\n icon: TbHomeFilled,\n },\n {\n id: 'dn-4',\n name: 'Health',\n price: 75.8,\n icon: FaPills,\n },\n ],\n },\n];\n\nconst springConfig: Transition = {\n type: 'spring',\n stiffness: 200,\n damping: 20,\n mass: 1.1,\n};\n\nexport const DisclosureCard: FC = ({\n collections = DEFAULT_COLLECTIONS,\n}) => {\n return (\n
\n \n {collections.map((collection) => (\n \n ))}\n \n
\n );\n};\n\nconst GridContainer = ({\n items,\n title,\n}: {\n items: CollectionItem[];\n title: string;\n}) => {\n const [isExpanded, setIsExpanded] = useState(false);\n const [ref, bounds] = useMeasure({ offsetSize: true });\n\n return (\n \n 0 ? bounds.height : 'auto',\n }}\n >\n
\n \n {!isExpanded ? (\n setIsExpanded(true)}\n exit={{ opacity: 0 }}\n transition={{ duration: 0.1, ease: 'easeOut' }}\n >\n
\n {items.map((item, index) => (\n \n \n \n ))}\n
\n\n
\n \n {title}\n \n \n {items.length} Items\n \n
\n\n
\n \n
\n \n ) : (\n \n \n \n {title}\n \n setIsExpanded(false)}\n >\n \n
\n \n\n
\n \n {items.map((item) => (\n \n \n \n \n \n \n {item.name}\n \n
\n
\n

${item.price}

\n
\n
\n \n
\n \n
\n
\n ))}\n \n \n \n )}\n \n \n \n \n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "command-search", "type": "registry:component", "title": "Command Search", "description": "A premium command palette with sectioned results, keyboard navigation, and smooth animations.", "dependencies": [ "lucide-react", "motion" ], "files": [ { "path": "components/watermelon/command-search.tsx", "type": "registry:component", "content": "'use client';\n\nimport {\n useState,\n useMemo,\n useEffect,\n useRef,\n type KeyboardEvent,\n type FC,\n} from 'react';\nimport type { ReactNode } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport {\n Search,\n User,\n Bell,\n HelpCircle,\n MessageSquare,\n ArrowRight,\n} from 'lucide-react';\n\nexport interface CommandItem {\n id: string;\n title: string;\n section: 'Suggestions' | 'Settings' | 'Help';\n icon: ReactNode;\n shortcut?: string;\n action: () => void;\n}\n\n/* DEFAULT DATA */\nconst DEFAULT_ITEMS: CommandItem[] = [\n {\n id: '1',\n title: 'Calendar',\n section: 'Suggestions',\n icon: ,\n action: () => console.log('Calendar'),\n },\n {\n id: '2',\n title: 'Search Emoji',\n section: 'Suggestions',\n icon: ,\n action: () => console.log('Emoji'),\n },\n {\n id: '3',\n title: 'Calculator',\n section: 'Suggestions',\n icon: ,\n action: () => console.log('Calculator'),\n },\n\n {\n id: '4',\n title: 'Profile',\n section: 'Settings',\n icon: ,\n shortcut: '⌘ P',\n action: () => console.log('Profile'),\n },\n {\n id: '5',\n title: 'Notifications',\n section: 'Settings',\n icon: ,\n shortcut: '⌘ N',\n action: () => console.log('Notifications'),\n },\n\n {\n id: '6',\n title: 'FAQ',\n section: 'Help',\n icon: ,\n action: () => console.log('FAQ'),\n },\n {\n id: '7',\n title: 'Messages',\n section: 'Help',\n icon: ,\n action: () => console.log('Messages'),\n },\n];\n\ninterface Props {\n items?: CommandItem[];\n}\n\nexport const CommandSearch: FC = ({ items = DEFAULT_ITEMS }) => {\n const [isOpen, setIsOpen] = useState(false);\n const [query, setQuery] = useState('');\n const [activeIndex, setActiveIndex] = useState(0);\n const inputRef = useRef(null);\n\n useEffect(() => {\n if (isOpen) {\n const timeout = setTimeout(() => {\n inputRef.current?.focus();\n }, 100);\n return () => clearTimeout(timeout);\n }\n }, [isOpen]);\n\n useEffect(() => {\n const handleKeyDown = (e: any) => {\n if (\n e.key.toLowerCase() === 'f' &&\n !isOpen &&\n document.activeElement?.tagName !== 'INPUT' &&\n document.activeElement?.tagName !== 'TEXTAREA'\n ) {\n e.preventDefault();\n setIsOpen(true);\n }\n if (e.key === 'Escape' && isOpen) {\n e.preventDefault();\n e.stopPropagation();\n setIsOpen(false);\n }\n };\n // Use capture to catch the event before other listeners\n window.addEventListener('keydown', handleKeyDown, true);\n return () => window.removeEventListener('keydown', handleKeyDown, true);\n }, [isOpen]);\n\n const filteredItems = useMemo(() => {\n return items.filter((item) =>\n item.title.toLowerCase().includes(query.toLowerCase()),\n );\n }, [query, items]);\n\n useEffect(() => {\n requestAnimationFrame(() => setActiveIndex(0));\n }, [query]);\n\n const sections = useMemo(() => {\n const groups: { [key: string]: CommandItem[] } = {};\n filteredItems.forEach((item) => {\n if (!groups[item.section]) groups[item.section] = [];\n groups[item.section].push(item);\n });\n\n return Object.entries(groups).map(([name, items]) => ({\n name,\n items,\n }));\n }, [filteredItems]);\n\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'ArrowDown') {\n e.preventDefault();\n setActiveIndex((prev) => (prev + 1) % filteredItems.length);\n } else if (e.key === 'ArrowUp') {\n e.preventDefault();\n setActiveIndex(\n (prev) => (prev - 1 + filteredItems.length) % filteredItems.length,\n );\n } else if (e.key === 'Enter') {\n const selectedItem = filteredItems[activeIndex];\n if (selectedItem) {\n selectedItem.action();\n setIsOpen(false);\n }\n }\n };\n\n const sharedTransition = {\n type: 'tween' as const,\n ease: 'easeOut' as const,\n duration: 0.15,\n };\n\n return (\n <>\n \n {isOpen && (\n setIsOpen(false)}\n />\n )}\n \n\n
\n \n {!isOpen ? (\n setIsOpen(true)}\n className=\"group absolute top-0 left-0 flex h-10 w-full items-center gap-3 overflow-hidden rounded-lg border border-zinc-200 bg-white px-4 py-2 text-zinc-500 shadow-sm hover:text-zinc-900 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-400 dark:shadow-none dark:hover:text-white\"\n transition={sharedTransition}\n >\n \n \n \n \n Find...\n \n \n F\n \n \n ) : (\n e.stopPropagation()}\n >\n {/* Search Header */}\n
\n \n \n \n
\n setQuery(e.target.value)}\n onKeyDown={handleKeyDown}\n />\n {!query && (\n \n Find...\n \n )}\n
\n
\n \n Esc\n \n
\n
\n\n {/* Results Body */}\n
\n {filteredItems.length === 0 ? (\n
\n No results found for \"{query}\"\n
\n ) : (\n
\n {sections.map((section) => (\n
\n

\n {section.name}\n

\n
\n {section.items.map((item) => {\n const globalIndex = filteredItems.findIndex(\n (fi) => fi.id === item.id,\n );\n const isActive = globalIndex === activeIndex;\n\n return (\n setActiveIndex(globalIndex)}\n onClick={() => {\n item.action();\n setIsOpen(false);\n }}\n >\n
\n \n {item.icon}\n \n \n {item.title}\n \n
\n\n {item.shortcut && (\n \n {item.shortcut}\n \n )}\n \n );\n })}\n
\n
\n ))}\n
\n )}\n
\n \n )}\n \n
\n \n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "command-search-base", "type": "registry:component", "title": "Command Search (base)", "description": "Theme-ready base variant of A premium command palette with sectioned results, keyboard navigation, and smooth animations..", "dependencies": [ "lucide-react", "motion" ], "files": [ { "path": "components/watermelon/command-search.tsx", "type": "registry:component", "content": "'use client';\n\nimport {\n useState,\n useMemo,\n useEffect,\n useRef,\n type KeyboardEvent,\n type FC,\n} from 'react';\nimport type { ReactNode } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport {\n Search,\n User,\n Bell,\n HelpCircle,\n MessageSquare,\n ArrowRight,\n} from 'lucide-react';\n\nexport interface CommandItem {\n id: string;\n title: string;\n section: 'Suggestions' | 'Settings' | 'Help';\n icon: ReactNode;\n shortcut?: string;\n action: () => void;\n}\n\n/* DEFAULT DATA */\nconst DEFAULT_ITEMS: CommandItem[] = [\n {\n id: '1',\n title: 'Calendar',\n section: 'Suggestions',\n icon: ,\n action: () => console.log('Calendar'),\n },\n {\n id: '2',\n title: 'Search Emoji',\n section: 'Suggestions',\n icon: ,\n action: () => console.log('Emoji'),\n },\n {\n id: '3',\n title: 'Calculator',\n section: 'Suggestions',\n icon: ,\n action: () => console.log('Calculator'),\n },\n\n {\n id: '4',\n title: 'Profile',\n section: 'Settings',\n icon: ,\n shortcut: '⌘ P',\n action: () => console.log('Profile'),\n },\n {\n id: '5',\n title: 'Notifications',\n section: 'Settings',\n icon: ,\n shortcut: '⌘ N',\n action: () => console.log('Notifications'),\n },\n\n {\n id: '6',\n title: 'FAQ',\n section: 'Help',\n icon: ,\n action: () => console.log('FAQ'),\n },\n {\n id: '7',\n title: 'Messages',\n section: 'Help',\n icon: ,\n action: () => console.log('Messages'),\n },\n];\n\ninterface Props {\n items?: CommandItem[];\n}\n\nexport const CommandSearch: FC = ({ items = DEFAULT_ITEMS }) => {\n const [isOpen, setIsOpen] = useState(false);\n const [query, setQuery] = useState('');\n const [activeIndex, setActiveIndex] = useState(0);\n const inputRef = useRef(null);\n\n useEffect(() => {\n if (isOpen) {\n const timeout = setTimeout(() => {\n inputRef.current?.focus();\n }, 100);\n return () => clearTimeout(timeout);\n }\n }, [isOpen]);\n\n useEffect(() => {\n const handleKeyDown = (e: any) => {\n if (\n e.key.toLowerCase() === 'f' &&\n !isOpen &&\n document.activeElement?.tagName !== 'INPUT' &&\n document.activeElement?.tagName !== 'TEXTAREA'\n ) {\n e.preventDefault();\n setIsOpen(true);\n }\n if (e.key === 'Escape' && isOpen) {\n e.preventDefault();\n e.stopPropagation();\n setIsOpen(false);\n }\n };\n window.addEventListener('keydown', handleKeyDown, true);\n return () => window.removeEventListener('keydown', handleKeyDown, true);\n }, [isOpen]);\n\n const filteredItems = useMemo(() => {\n return items.filter((item) =>\n item.title.toLowerCase().includes(query.toLowerCase()),\n );\n }, [query, items]);\n\n useEffect(() => {\n requestAnimationFrame(() => setActiveIndex(0));\n }, [query]);\n\n const sections = useMemo(() => {\n const groups: { [key: string]: CommandItem[] } = {};\n filteredItems.forEach((item) => {\n if (!groups[item.section]) groups[item.section] = [];\n groups[item.section].push(item);\n });\n\n return Object.entries(groups).map(([name, items]) => ({\n name,\n items,\n }));\n }, [filteredItems]);\n\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'ArrowDown') {\n e.preventDefault();\n setActiveIndex((prev) => (prev + 1) % filteredItems.length);\n } else if (e.key === 'ArrowUp') {\n e.preventDefault();\n setActiveIndex(\n (prev) => (prev - 1 + filteredItems.length) % filteredItems.length,\n );\n } else if (e.key === 'Enter') {\n const selectedItem = filteredItems[activeIndex];\n if (selectedItem) {\n selectedItem.action();\n setIsOpen(false);\n }\n }\n };\n\n const sharedTransition = {\n type: 'tween' as const,\n ease: 'easeOut' as const,\n duration: 0.15,\n };\n\n return (\n <>\n \n {isOpen && (\n setIsOpen(false)}\n />\n )}\n \n\n
\n \n {!isOpen ? (\n setIsOpen(true)}\n className=\"group border-border bg-background text-muted-foreground hover:text-foreground absolute top-0 left-0 flex h-10 w-full items-center gap-3 overflow-hidden rounded-lg border px-4 py-2 shadow-sm\"\n transition={sharedTransition}\n >\n \n \n \n \n Find...\n \n \n F\n \n \n ) : (\n e.stopPropagation()}\n >\n
\n \n \n \n
\n setQuery(e.target.value)}\n onKeyDown={handleKeyDown}\n />\n {!query && (\n \n Find...\n \n )}\n
\n
\n \n Esc\n \n
\n
\n\n
\n {filteredItems.length === 0 ? (\n
\n No results found for \"{query}\"\n
\n ) : (\n
\n {sections.map((section) => (\n
\n

\n {section.name}\n

\n
\n {section.items.map((item) => {\n const globalIndex = filteredItems.findIndex(\n (fi) => fi.id === item.id,\n );\n const isActive = globalIndex === activeIndex;\n\n return (\n setActiveIndex(globalIndex)}\n onClick={() => {\n item.action();\n setIsOpen(false);\n }}\n >\n
\n \n {item.icon}\n \n \n {item.title}\n \n
\n\n {item.shortcut && (\n \n {item.shortcut}\n \n )}\n \n );\n })}\n
\n
\n ))}\n
\n )}\n
\n \n )}\n \n
\n \n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "compose-email-card", "type": "registry:component", "title": "Compose Email Card", "description": "Compact card interface for composing emails with recipient, subject, actions.", "dependencies": [ "lucide-react", "motion", "react-icons" ], "files": [ { "path": "components/watermelon/compose-email-card.tsx", "type": "registry:component", "content": "'use client';\n\nimport { useState, useRef, useEffect, useLayoutEffect, type FC } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport {\n X,\n Minus,\n Maximize2,\n Mail,\n ChevronDown,\n Smile,\n Paperclip,\n Link2,\n Sparkles,\n MoreHorizontal,\n Bold,\n Italic,\n Calendar,\n Upload,\n Check,\n} from 'lucide-react';\nimport { LuSend } from 'react-icons/lu';\n\n// --- Types ---\nexport interface Attachment {\n id: string;\n name: string;\n type: string;\n size: string;\n icon: 'PDF' | 'IMAGE' | 'DOC';\n}\n\nexport interface Recipient {\n id: string;\n name: string;\n avatar: string;\n email: string;\n}\n\nexport interface EmailData {\n from: Recipient;\n to: Recipient[];\n subject: string;\n body: string;\n attachments: Attachment[];\n}\n\ninterface ComposeEmailCardProps {\n data: EmailData;\n onSend?: (data: EmailData) => void;\n onClose?: () => void;\n}\n\ntype ActivePopover =\n | 'more'\n | 'emoji'\n | 'attach'\n | 'link'\n | 'ai'\n | 'schedule'\n | null;\n\nconst EMOJIS = [\n '😊',\n '👍',\n '🙌',\n '🔥',\n '💡',\n '✅',\n '🚀',\n '💼',\n '📊',\n '🎯',\n '💬',\n '🤝',\n '⭐',\n '📌',\n '🎉',\n '💪',\n '🌟',\n '📈',\n '🔑',\n '⚡',\n];\n\nconst AI_SUGGESTIONS = [\n \"I'd love to schedule a quick call this week to discuss further.\",\n 'Please let me know if you have any questions — happy to help!',\n 'Looking forward to your feedback on this.',\n];\n\nconst SCHEDULE_OPTIONS = [\n { label: 'Tomorrow 9:00 AM', value: 'tom-9am' },\n { label: 'Tomorrow 2:00 PM', value: 'tom-2pm' },\n { label: 'Monday 10:00 AM', value: 'mon-10am' },\n { label: 'Monday 3:00 PM', value: 'mon-3pm' },\n];\n\nexport const ComposeEmailCard: FC = ({\n data,\n onSend,\n onClose,\n}) => {\n const [showToolbar, setShowToolbar] = useState(false);\n const [toolbarPos, setToolbarPos] = useState({ x: 0, y: 0 });\n const [activePopover, setActivePopover] = useState(null);\n const [linkUrl, setLinkUrl] = useState('');\n const [linkText, setLinkText] = useState('');\n const [linkInserted, setLinkInserted] = useState(false);\n const [scheduledTime, setScheduledTime] = useState(null);\n const [attachedFiles, setAttachedFiles] = useState([]);\n const [isDraggingOver, setIsDraggingOver] = useState(false);\n const [fromOpen, setFromOpen] = useState(false);\n const [selectedFrom, setSelectedFrom] = useState(data.from);\n const [safeX, setSafeX] = useState(0);\n\n const bodyRef = useRef(null);\n const toolbarRef = useRef(null);\n const popoverRef = useRef(null);\n const fromRef = useRef(null);\n\n const springConfig = {\n type: 'spring',\n stiffness: 450,\n damping: 32,\n mass: 1,\n } as const;\n const popoverAnim = {\n initial: { opacity: 0, y: 8, scale: 0.96 },\n animate: { opacity: 1, y: 0, scale: 1 },\n exit: { opacity: 0, y: 8, scale: 0.96 },\n transition: { type: 'spring' as const, damping: 22, stiffness: 300 },\n } as const;\n\n const handleSelection = () => {\n const selection = window.getSelection();\n if (selection && selection.toString().length > 0 && bodyRef.current) {\n const range = selection.getRangeAt(0);\n const rect = range.getBoundingClientRect();\n const parentRect = bodyRef.current.getBoundingClientRect();\n setToolbarPos({\n x: rect.left + rect.width / 2 - parentRect.left,\n y: rect.top - parentRect.top - 60,\n });\n setShowToolbar(true);\n } else {\n setShowToolbar(false);\n }\n };\n\n const getSafeToolbarX = (rawX: number) => {\n if (!toolbarRef.current || !bodyRef.current) return rawX;\n const toolbarWidth = toolbarRef.current.offsetWidth;\n const containerWidth = bodyRef.current.offsetWidth;\n const padding = 12;\n const minX = padding;\n const maxX = containerWidth - toolbarWidth - padding;\n return Math.min(Math.max(rawX - toolbarWidth / 2, minX), maxX);\n };\n\n useLayoutEffect(() => {\n if (showToolbar) {\n // eslint-disable-next-line react-hooks/set-state-in-effect\n setSafeX(getSafeToolbarX(toolbarPos.x));\n }\n }, [toolbarPos, showToolbar]);\n\n const togglePopover = (name: ActivePopover) => {\n setActivePopover((prev) => (prev === name ? null : name));\n };\n\n // Close popover on outside click\n useEffect(() => {\n const handler = (e: MouseEvent) => {\n if (\n popoverRef.current &&\n !popoverRef.current.contains(e.target as Node)\n ) {\n setActivePopover(null);\n }\n };\n document.addEventListener('mousedown', handler);\n return () => document.removeEventListener('mousedown', handler);\n }, []);\n\n const insertEmoji = (emoji: string) => {\n if (bodyRef.current) {\n const sel = window.getSelection();\n if (sel && sel.rangeCount > 0) {\n const range = sel.getRangeAt(0);\n if (bodyRef.current.contains(range.commonAncestorContainer)) {\n range.deleteContents();\n range.insertNode(document.createTextNode(emoji));\n range.collapse(false);\n sel.removeAllRanges();\n sel.addRange(range);\n return;\n }\n }\n // fallback: append at end\n bodyRef.current.innerText += emoji;\n }\n setActivePopover(null);\n };\n\n const insertLink = () => {\n if (!linkUrl) return;\n const display = linkText || linkUrl;\n if (bodyRef.current) {\n const a = document.createElement('a');\n a.href = linkUrl.startsWith('http') ? linkUrl : `https://${linkUrl}`;\n a.textContent = display;\n a.style.color = '#6366F1';\n a.style.textDecoration = 'underline';\n bodyRef.current.appendChild(document.createTextNode(' '));\n bodyRef.current.appendChild(a);\n bodyRef.current.appendChild(document.createTextNode(' '));\n }\n setLinkInserted(true);\n setTimeout(() => {\n setLinkInserted(false);\n setLinkUrl('');\n setLinkText('');\n setActivePopover(null);\n }, 1000);\n };\n\n const insertAISuggestion = (text: string) => {\n if (bodyRef.current) {\n bodyRef.current.innerText =\n (bodyRef.current.innerText || '').trimEnd() + '\\n\\n' + text;\n }\n setActivePopover(null);\n };\n\n const handleSchedule = (label: string) => {\n setScheduledTime(label);\n setActivePopover(null);\n };\n\n const handleFakeAttach = () => {\n const names = [\n 'proposal.pdf',\n 'design-v2.png',\n 'notes.docx',\n 'report.xlsx',\n ];\n const random = names[Math.floor(Math.random() * names.length)];\n if (!attachedFiles.includes(random))\n setAttachedFiles((p) => [...p, random]);\n setActivePopover(null);\n };\n\n useEffect(() => {\n const handler = (e: MouseEvent) => {\n if (fromRef.current && !fromRef.current.contains(e.target as Node))\n setFromOpen(false);\n if (popoverRef.current && !popoverRef.current.contains(e.target as Node))\n setActivePopover(null);\n };\n document.addEventListener('mousedown', handler);\n return () => document.removeEventListener('mousedown', handler);\n }, []);\n\n return (\n \n {/* Header */}\n
\n
\n
\n \n
\n \n Compose email\n \n
\n
\n \n \n \n \n \n \n \n \n \n
\n
\n\n {/* Scrollable Body */}\n
\n
\n {/* From Section */}\n
\n From\n
\n setFromOpen((v) => !v)}\n className=\"flex max-w-50 cursor-pointer items-center gap-2 rounded-full border border-gray-200 bg-white px-2 py-0.5 shadow-sm transition-all hover:border-gray-300 sm:max-w-none sm:px-2.5 sm:py-1 dark:border-zinc-800 dark:bg-zinc-900\"\n >\n \n \n {selectedFrom.name}\n \n \n \n \n {fromOpen && (\n \n

\n Switch account\n

\n {[\n {\n id: data.from.id,\n name: data.from.name,\n email: data.from.email ?? 'me@example.com',\n avatar: data.from.avatar,\n },\n {\n id: 'work',\n name: 'Work',\n email: 'work@company.com',\n avatar: data.from.avatar,\n },\n {\n id: 'personal',\n name: 'Personal',\n email: 'personal@gmail.com',\n avatar: data.from.avatar,\n },\n ].map((acc) => (\n {\n setSelectedFrom(acc);\n setFromOpen(false);\n }}\n className={`flex w-full items-center gap-2.5 px-4 py-2.5 text-left transition-colors hover:bg-gray-50 dark:hover:bg-zinc-800 ${selectedFrom.name === acc.name ? 'text-[#6366F1]' : 'text-gray-700 dark:text-zinc-300'}`}\n >\n \n
\n

\n {acc.name}\n

\n

\n {acc.email}\n

\n
\n {selectedFrom.name === acc.name && (\n \n )}\n \n ))}\n \n )}\n \n
\n
\n\n {/* To Section */}\n
\n To\n
\n {data.to.map((recipient) => (\n \n \n \n {recipient.name}\n \n
\n ))}\n
\n
\n \n \n
\n
\n\n {/* Subject Section */}\n
\n \n Subject\n \n \n
\n
\n\n {/* Editor Area */}\n
\n \n {showToolbar && (\n \n \n
\n \n \n \n \n \n \n \n )}\n \n\n \n\n {/* Attachments Section */}\n
\n

\n Attachments\n

\n
\n {data.attachments.map((file) => (\n \n
\n {file.icon}\n
\n
\n

\n {file.name}\n

\n

\n {file.type} · {file.size}\n

\n
\n \n ))}\n {/* Dynamically added attachments */}\n {attachedFiles.map((fname) => (\n \n
\n {fname.split('.').pop()?.toUpperCase()}\n
\n
\n

\n {fname}\n

\n

\n Just added\n

\n
\n \n setAttachedFiles((p) => p.filter((f) => f !== fname))\n }\n className=\"rounded-full p-1 text-gray-400 transition-colors hover:bg-gray-100 dark:hover:bg-zinc-800\"\n >\n \n \n \n ))}\n
\n
\n
\n
\n\n {/* Footer */}\n
\n {/* Icon Toolbar with popovers */}\n \n {/* More */}\n
\n togglePopover('more')}\n className=\"rounded-lg p-2 transition-all hover:text-gray-600 dark:hover:text-zinc-200\"\n >\n \n \n \n {activePopover === 'more' && (\n \n {[\n { label: 'Discard draft', danger: true },\n { label: 'Print', danger: false },\n { label: 'Save as template', danger: false },\n { label: 'Spell check', danger: false },\n ].map((opt) => (\n setActivePopover(null)}\n className={`w-full px-4 py-2 text-left text-[13px] transition-colors ${\n opt.danger\n ? 'text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10'\n : 'text-gray-700 hover:bg-gray-50 dark:text-zinc-300 dark:hover:bg-zinc-800'\n }`}\n >\n {opt.label}\n \n ))}\n \n )}\n \n
\n\n {/* Emoji */}\n
\n togglePopover('emoji')}\n className=\"rounded-lg p-2 transition-all hover:text-gray-600 dark:hover:text-zinc-200\"\n >\n \n \n \n {activePopover === 'emoji' && (\n \n

\n Emoji\n

\n
\n {EMOJIS.map((e) => (\n insertEmoji(e)}\n className=\"rounded-lg p-1 text-xl transition-colors hover:bg-gray-100 dark:hover:bg-zinc-800\"\n >\n {e}\n \n ))}\n
\n \n )}\n \n
\n\n {/* Attach */}\n
\n togglePopover('attach')}\n className=\"rounded-lg p-2 transition-all hover:text-gray-600 dark:hover:text-zinc-200\"\n >\n \n \n \n {activePopover === 'attach' && (\n \n

\n Attach File\n

\n {\n e.preventDefault();\n setIsDraggingOver(true);\n }}\n onDragLeave={() => setIsDraggingOver(false)}\n onDrop={(e) => {\n e.preventDefault();\n setIsDraggingOver(false);\n handleFakeAttach();\n }}\n onClick={handleFakeAttach}\n className={`flex cursor-pointer flex-col items-center gap-2 rounded-xl border-2 border-dashed p-4 transition-all ${isDraggingOver ? 'border-[#6366F1] bg-[#F5F3FF] dark:bg-[#6366F1]/10' : 'border-gray-200 hover:border-[#6366F1]/50 hover:bg-gray-50 dark:border-zinc-700 dark:hover:bg-zinc-800'}`}\n >\n \n

\n Click or drag files here\n

\n
\n \n )}\n \n
\n\n {/* Link */}\n
\n togglePopover('link')}\n className=\"rounded-lg p-2 transition-all hover:text-gray-600 dark:hover:text-zinc-200\"\n >\n \n \n \n {activePopover === 'link' && (\n \n

\n Insert Link\n

\n
\n setLinkUrl(e.target.value)}\n className=\"w-full rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-[13px] text-gray-800 transition-colors outline-none focus:border-[#6366F1] dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-200\"\n />\n setLinkText(e.target.value)}\n className=\"w-full rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-[13px] text-gray-800 transition-colors outline-none focus:border-[#6366F1] dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-200\"\n />\n \n {linkInserted ? (\n <>\n Inserted!\n \n ) : (\n 'Insert Link'\n )}\n \n
\n \n )}\n \n
\n\n {/* AI Suggestions */}\n
\n togglePopover('ai')}\n className=\"rounded-lg p-2 transition-all hover:text-[#6366F1]\"\n >\n \n \n \n {activePopover === 'ai' && (\n \n
\n \n

\n AI Suggestions\n

\n
\n
\n {AI_SUGGESTIONS.map((s, i) => (\n insertAISuggestion(s)}\n className=\"w-full rounded-xl bg-gray-50 px-3 py-2.5 text-left text-[13px] leading-relaxed text-gray-700 transition-colors hover:bg-[#F5F3FF] hover:text-[#6366F1] dark:bg-zinc-800 dark:text-zinc-300 dark:hover:bg-[#6366F1]/10\"\n >\n {s}\n \n ))}\n
\n \n )}\n \n
\n\n \n\n {/* Action Buttons */}\n
\n \n {scheduledTime ? `📅 ${scheduledTime}` : 'Draft saved'}\n \n
\n {/* Schedule */}\n
\n togglePopover('schedule')}\n className={`flex items-center justify-center gap-1.5 rounded-full border px-2.5 py-1.5 text-[13px] font-normal transition-all ${scheduledTime ? 'border-[#6366F1]/40 bg-[#F5F3FF] text-[#6366F1] dark:bg-[#6366F1]/10' : 'border-gray-200 text-[#535355] hover:bg-gray-50 dark:border-zinc-700 dark:text-zinc-400 dark:hover:bg-zinc-800'}`}\n >\n \n {!scheduledTime && (\n Schedule\n )}\n \n \n {activePopover === 'schedule' && (\n \n

\n Schedule Send\n

\n
\n {SCHEDULE_OPTIONS.map((opt) => (\n handleSchedule(opt.label)}\n className={`flex w-full items-center justify-between rounded-xl px-3 py-2.5 text-left text-[13px] transition-colors ${scheduledTime === opt.label ? 'bg-[#F5F3FF] text-[#6366F1] dark:bg-[#6366F1]/10' : 'text-gray-700 hover:bg-gray-50 dark:text-zinc-300 dark:hover:bg-zinc-800'}`}\n >\n {opt.label}\n {scheduledTime === opt.label && }\n \n ))}\n
\n \n )}\n \n
\n\n onSend?.(data)}\n className=\"flex items-center gap-1.5 rounded-full bg-[#0F0F0F] px-4 py-1.5 text-[13px] font-medium whitespace-nowrap text-white shadow-md transition-all hover:opacity-90 sm:px-5 sm:py-2 sm:text-[14px] dark:bg-white dark:text-black\"\n >\n {scheduledTime ? 'Confirm' : 'Send'}\n \n
\n
\n \n \n );\n};\n\nexport default ComposeEmailCard;\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "compose-email-card-base", "type": "registry:component", "title": "Compose Email Card (base)", "description": "Theme-ready base variant of Compact card interface for composing emails with recipient, subject, actions..", "dependencies": [ "lucide-react", "motion", "react-icons" ], "files": [ { "path": "components/watermelon/compose-email-card.tsx", "type": "registry:component", "content": "'use client';\n\nimport { useState, useRef, useEffect, useLayoutEffect, type FC } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport {\n X,\n Minus,\n Maximize2,\n Mail,\n ChevronDown,\n Smile,\n Paperclip,\n Link2,\n Sparkles,\n MoreHorizontal,\n Bold,\n Italic,\n Calendar,\n Upload,\n Check,\n} from 'lucide-react';\nimport { LuSend } from 'react-icons/lu';\n\n// --- Types ---\nexport interface Attachment {\n id: string;\n name: string;\n type: string;\n size: string;\n icon: 'PDF' | 'IMAGE' | 'DOC';\n}\n\nexport interface Recipient {\n id: string;\n name: string;\n avatar: string;\n email: string;\n}\n\nexport interface EmailData {\n from: Recipient;\n to: Recipient[];\n subject: string;\n body: string;\n attachments: Attachment[];\n}\n\ninterface ComposeEmailCardProps {\n data: EmailData;\n onSend?: (data: EmailData) => void;\n onClose?: () => void;\n}\n\ntype ActivePopover =\n | 'more'\n | 'emoji'\n | 'attach'\n | 'link'\n | 'ai'\n | 'schedule'\n | null;\n\nconst EMOJIS = [\n '😊',\n '👍',\n '🙌',\n '🔥',\n '💡',\n '✅',\n '🚀',\n '💼',\n '📊',\n '🎯',\n '💬',\n '🤝',\n '⭐',\n '📌',\n '🎉',\n '💪',\n '🌟',\n '📈',\n '🔑',\n '⚡',\n];\n\nconst AI_SUGGESTIONS = [\n \"I'd love to schedule a quick call this week to discuss further.\",\n 'Please let me know if you have any questions — happy to help!',\n 'Looking forward to your feedback on this.',\n];\n\nconst SCHEDULE_OPTIONS = [\n { label: 'Tomorrow 9:00 AM', value: 'tom-9am' },\n { label: 'Tomorrow 2:00 PM', value: 'tom-2pm' },\n { label: 'Monday 10:00 AM', value: 'mon-10am' },\n { label: 'Monday 3:00 PM', value: 'mon-3pm' },\n];\n\nexport const ComposeEmailCard: FC = ({\n data,\n onSend,\n onClose,\n}) => {\n const [showToolbar, setShowToolbar] = useState(false);\n const [toolbarPos, setToolbarPos] = useState({ x: 0, y: 0 });\n const [activePopover, setActivePopover] = useState(null);\n const [linkUrl, setLinkUrl] = useState('');\n const [linkText, setLinkText] = useState('');\n const [linkInserted, setLinkInserted] = useState(false);\n const [scheduledTime, setScheduledTime] = useState(null);\n const [attachedFiles, setAttachedFiles] = useState([]);\n const [isDraggingOver, setIsDraggingOver] = useState(false);\n const [fromOpen, setFromOpen] = useState(false);\n const [selectedFrom, setSelectedFrom] = useState(data.from);\n const [safeX, setSafeX] = useState(0);\n\n const bodyRef = useRef(null);\n const toolbarRef = useRef(null);\n const popoverRef = useRef(null);\n const fromRef = useRef(null);\n\n const springConfig = {\n type: 'spring',\n stiffness: 450,\n damping: 32,\n mass: 1,\n } as const;\n const popoverAnim = {\n initial: { opacity: 0, y: 8, scale: 0.96 },\n animate: { opacity: 1, y: 0, scale: 1 },\n exit: { opacity: 0, y: 8, scale: 0.96 },\n transition: { type: 'spring' as const, damping: 22, stiffness: 300 },\n } as const;\n\n const handleSelection = () => {\n const selection = window.getSelection();\n if (selection && selection.toString().length > 0 && bodyRef.current) {\n const range = selection.getRangeAt(0);\n const rect = range.getBoundingClientRect();\n const parentRect = bodyRef.current.getBoundingClientRect();\n setToolbarPos({\n x: rect.left + rect.width / 2 - parentRect.left,\n y: rect.top - parentRect.top - 60,\n });\n setShowToolbar(true);\n } else {\n setShowToolbar(false);\n }\n };\n\n const getSafeToolbarX = (rawX: number) => {\n if (!toolbarRef.current || !bodyRef.current) return rawX;\n const toolbarWidth = toolbarRef.current.offsetWidth;\n const containerWidth = bodyRef.current.offsetWidth;\n const padding = 12;\n const minX = padding;\n const maxX = containerWidth - toolbarWidth - padding;\n return Math.min(Math.max(rawX - toolbarWidth / 2, minX), maxX);\n };\n\n useLayoutEffect(() => {\n if (showToolbar) {\n // eslint-disable-next-line react-hooks/set-state-in-effect\n setSafeX(getSafeToolbarX(toolbarPos.x));\n }\n }, [toolbarPos, showToolbar]);\n\n const togglePopover = (name: ActivePopover) => {\n setActivePopover((prev) => (prev === name ? null : name));\n };\n\n useEffect(() => {\n const handler = (e: MouseEvent) => {\n if (\n popoverRef.current &&\n !popoverRef.current.contains(e.target as Node)\n ) {\n setActivePopover(null);\n }\n };\n document.addEventListener('mousedown', handler);\n return () => document.removeEventListener('mousedown', handler);\n }, []);\n\n const insertEmoji = (emoji: string) => {\n if (bodyRef.current) {\n const sel = window.getSelection();\n if (sel && sel.rangeCount > 0) {\n const range = sel.getRangeAt(0);\n if (bodyRef.current.contains(range.commonAncestorContainer)) {\n range.deleteContents();\n range.insertNode(document.createTextNode(emoji));\n range.collapse(false);\n sel.removeAllRanges();\n sel.addRange(range);\n return;\n }\n }\n bodyRef.current.innerText += emoji;\n }\n setActivePopover(null);\n };\n\n const insertLink = () => {\n if (!linkUrl) return;\n const display = linkText || linkUrl;\n if (bodyRef.current) {\n const a = document.createElement('a');\n a.href = linkUrl.startsWith('http') ? linkUrl : `https://${linkUrl}`;\n a.textContent = display;\n a.className = 'text-primary underline underline-offset-2';\n bodyRef.current.appendChild(document.createTextNode(' '));\n bodyRef.current.appendChild(a);\n bodyRef.current.appendChild(document.createTextNode(' '));\n }\n setLinkInserted(true);\n setTimeout(() => {\n setLinkInserted(false);\n setLinkUrl('');\n setLinkText('');\n setActivePopover(null);\n }, 1000);\n };\n\n const insertAISuggestion = (text: string) => {\n if (bodyRef.current) {\n bodyRef.current.innerText =\n (bodyRef.current.innerText || '').trimEnd() + '\\n\\n' + text;\n }\n setActivePopover(null);\n };\n\n const handleSchedule = (label: string) => {\n setScheduledTime(label);\n setActivePopover(null);\n };\n\n const handleFakeAttach = () => {\n const names = [\n 'proposal.pdf',\n 'design-v2.png',\n 'notes.docx',\n 'report.xlsx',\n ];\n const random = names[Math.floor(Math.random() * names.length)];\n if (!attachedFiles.includes(random))\n setAttachedFiles((p) => [...p, random]);\n setActivePopover(null);\n };\n\n useEffect(() => {\n const handler = (e: MouseEvent) => {\n if (fromRef.current && !fromRef.current.contains(e.target as Node))\n setFromOpen(false);\n if (popoverRef.current && !popoverRef.current.contains(e.target as Node))\n setActivePopover(null);\n };\n document.addEventListener('mousedown', handler);\n return () => document.removeEventListener('mousedown', handler);\n }, []);\n\n return (\n \n {/* Header */}\n
\n
\n
\n \n
\n \n Compose email\n \n
\n
\n \n \n \n
\n
\n\n {/* Scrollable Body */}\n
\n
\n {/* From */}\n
\n From\n
\n setFromOpen((v) => !v)}\n className=\"bg-card border-border hover:border-ring flex max-w-52 cursor-pointer items-center gap-2 rounded-full border px-2 py-0.5 shadow-sm transition-all sm:max-w-none sm:px-2.5 sm:py-1\"\n >\n \n \n {selectedFrom.name}\n \n \n \n \n {fromOpen && (\n \n

\n Switch account\n

\n {[\n {\n id: data.from.id,\n name: data.from.name,\n email: data.from.email ?? 'me@example.com',\n avatar: data.from.avatar,\n },\n {\n id: 'work',\n name: 'Work',\n email: 'work@company.com',\n avatar: data.from.avatar,\n },\n {\n id: 'personal',\n name: 'Personal',\n email: 'personal@gmail.com',\n avatar: data.from.avatar,\n },\n ].map((acc) => (\n {\n setSelectedFrom(acc);\n setFromOpen(false);\n }}\n className={`hover:bg-accent flex w-full items-center gap-2.5 px-4 py-2.5 text-left transition-colors ${selectedFrom.name === acc.name ? 'text-primary' : 'text-foreground'}`}\n >\n \n
\n

\n {acc.name}\n

\n

\n {acc.email}\n

\n
\n {selectedFrom.name === acc.name && (\n \n )}\n \n ))}\n \n )}\n \n
\n
\n\n {/* To */}\n
\n To\n
\n {data.to.map((recipient) => (\n \n \n \n {recipient.name}\n \n
\n ))}\n
\n
\n \n \n
\n
\n\n {/* Subject */}\n
\n \n Subject\n \n \n
\n
\n\n {/* Editor Area */}\n
\n \n {showToolbar && (\n \n \n
\n \n \n \n \n \n \n \n )}\n \n\n \n\n {/* Attachments */}\n
\n

\n Attachments\n

\n
\n {data.attachments.map((file) => (\n \n
\n {file.icon}\n
\n
\n

\n {file.name}\n

\n

\n {file.type} · {file.size}\n

\n
\n \n ))}\n {attachedFiles.map((fname) => (\n \n
\n {fname.split('.').pop()?.toUpperCase()}\n
\n
\n

\n {fname}\n

\n

\n Just added\n

\n
\n \n setAttachedFiles((p) => p.filter((f) => f !== fname))\n }\n className=\"hover:bg-accent text-muted-foreground rounded-full p-1 transition-colors\"\n >\n \n \n \n ))}\n
\n
\n
\n
\n\n {/* Footer */}\n
\n \n {/* More */}\n
\n togglePopover('more')}\n className=\"hover:text-foreground rounded-lg p-2 transition-all\"\n >\n \n \n \n {activePopover === 'more' && (\n \n {[\n { label: 'Discard draft', danger: true },\n { label: 'Print', danger: false },\n { label: 'Save as template', danger: false },\n { label: 'Spell check', danger: false },\n ].map((opt) => (\n setActivePopover(null)}\n className={`w-full px-4 py-2 text-left text-sm transition-colors ${\n opt.danger\n ? 'text-red-500 hover:bg-red-500/10'\n : 'text-foreground hover:bg-accent'\n }`}\n >\n {opt.label}\n \n ))}\n \n )}\n \n
\n\n {/* Emoji */}\n
\n togglePopover('emoji')}\n className=\"hover:text-foreground rounded-lg p-2 transition-all\"\n >\n \n \n \n {activePopover === 'emoji' && (\n \n

\n Emoji\n

\n
\n {EMOJIS.map((e) => (\n insertEmoji(e)}\n className=\"hover:bg-accent rounded-lg p-1 text-xl transition-colors\"\n >\n {e}\n \n ))}\n
\n \n )}\n \n
\n\n {/* Attach */}\n
\n togglePopover('attach')}\n className=\"hover:text-foreground rounded-lg p-2 transition-all\"\n >\n \n \n \n {activePopover === 'attach' && (\n \n

\n Attach File\n

\n {\n e.preventDefault();\n setIsDraggingOver(true);\n }}\n onDragLeave={() => setIsDraggingOver(false)}\n onDrop={(e) => {\n e.preventDefault();\n setIsDraggingOver(false);\n handleFakeAttach();\n }}\n onClick={handleFakeAttach}\n className={`flex cursor-pointer flex-col items-center gap-2 rounded-xl border-2 border-dashed p-4 transition-all ${isDraggingOver ? 'border-primary bg-accent' : 'border-border hover:border-primary/50 hover:bg-accent/50'}`}\n >\n \n

\n Click or drag files here\n

\n
\n \n )}\n \n
\n\n {/* Link */}\n
\n togglePopover('link')}\n className=\"hover:text-foreground rounded-lg p-2 transition-all\"\n >\n \n \n \n {activePopover === 'link' && (\n \n

\n Insert Link\n

\n
\n setLinkUrl(e.target.value)}\n className=\"bg-background border-border focus:border-primary text-foreground placeholder:text-muted-foreground w-full rounded-lg border px-3 py-2 text-sm transition-colors outline-none\"\n />\n setLinkText(e.target.value)}\n className=\"bg-background border-border focus:border-primary text-foreground placeholder:text-muted-foreground w-full rounded-lg border px-3 py-2 text-sm transition-colors outline-none\"\n />\n \n {linkInserted ? (\n <>\n Inserted!\n \n ) : (\n 'Insert Link'\n )}\n \n
\n \n )}\n \n
\n\n {/* AI */}\n
\n togglePopover('ai')}\n className=\"hover:text-primary rounded-lg p-2 transition-all\"\n >\n \n \n \n {activePopover === 'ai' && (\n \n
\n \n

\n AI Suggestions\n

\n
\n
\n {AI_SUGGESTIONS.map((s, i) => (\n insertAISuggestion(s)}\n className=\"text-foreground bg-muted/40 hover:bg-accent hover:text-primary w-full rounded-xl px-3 py-2.5 text-left text-sm leading-relaxed transition-colors\"\n >\n {s}\n \n ))}\n
\n \n )}\n \n
\n\n \n\n {/* Action Buttons */}\n
\n \n {scheduledTime ? `📅 ${scheduledTime}` : 'Draft saved'}\n \n
\n {/* Schedule */}\n
\n togglePopover('schedule')}\n className={`flex items-center justify-center gap-1.5 rounded-full border px-2.5 py-1.5 text-sm font-normal transition-all ${scheduledTime ? 'border-primary/40 text-primary bg-accent' : 'border-border text-muted-foreground hover:bg-accent'}`}\n >\n \n {!scheduledTime && (\n Schedule\n )}\n \n \n {activePopover === 'schedule' && (\n \n

\n Schedule Send\n

\n
\n {SCHEDULE_OPTIONS.map((opt) => (\n handleSchedule(opt.label)}\n className={`flex w-full items-center justify-between rounded-xl px-3 py-2.5 text-left text-sm transition-colors ${scheduledTime === opt.label ? 'bg-accent text-primary' : 'text-foreground hover:bg-accent/50'}`}\n >\n {opt.label}\n {scheduledTime === opt.label && }\n \n ))}\n
\n \n )}\n \n
\n\n onSend?.(data)}\n className=\"bg-primary text-primary-foreground flex items-center gap-1.5 rounded-full px-4 py-1.5 text-sm font-medium whitespace-nowrap shadow-md transition-all hover:opacity-90 sm:px-5 sm:py-2\"\n >\n {scheduledTime ? 'Confirm' : 'Send'}\n \n
\n
\n \n \n );\n};\n\nexport default ComposeEmailCard;\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "contextual-ai-bar", "type": "registry:component", "title": "Contextual AI Bar", "description": "A sleek, adaptive action bar that toggles between tool icons and an AI-powered input field with smooth morphing transitions.", "dependencies": [ "lucide-react", "motion" ], "files": [ { "path": "components/watermelon/contextual-ai-bar.tsx", "type": "registry:component", "content": "'use client';\n\nimport React, { useState } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport { ArrowRight } from 'lucide-react';\n\nexport interface ContextualAIBarProps {\n defaultExpanded?: boolean;\n placeholder?: string;\n tools?: React.ReactNode[];\n musicIcon: React.ReactNode;\n sparkleIcon: React.ReactNode;\n}\n\nexport const ContextualAIBar: React.FC = ({\n defaultExpanded = false,\n placeholder = 'Refine with AI',\n tools = [],\n musicIcon,\n sparkleIcon,\n}) => {\n const [isExpanded, setIsExpanded] = useState(defaultExpanded);\n\n const spring = {\n type: 'spring',\n stiffness: 220,\n damping: 16,\n mass: 1.2,\n } as const;\n\n return (\n \n \n setIsExpanded(false)}\n whileTap={{ scale: 0.9 }}\n className=\"relative rounded-full p-2.5 outline-none\"\n >\n {!isExpanded && (\n \n )}\n\n
{musicIcon}
\n \n\n setIsExpanded(true)}\n whileTap={{ scale: 0.9 }}\n className=\"relative rounded-full p-2.5 outline-none\"\n >\n {isExpanded && (\n \n )}\n\n
{sparkleIcon}
\n \n \n\n \n {!isExpanded ? (\n \n {tools.map((tool, index) => (\n {tool}\n ))}\n \n ) : (\n \n \n\n \n \n \n \n )}\n \n \n );\n};\n\nconst ToolIcon = ({ children }: { children: React.ReactNode }) => (\n \n {children}\n \n);\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "contextual-ai-bar-base", "type": "registry:component", "title": "Contextual AI Bar (base)", "description": "Theme-ready base variant of A sleek, adaptive action bar that toggles between tool icons and an AI-powered input field with smooth morphing transitions..", "dependencies": [ "lucide-react", "motion" ], "files": [ { "path": "components/watermelon/contextual-ai-bar.tsx", "type": "registry:component", "content": "'use client';\n\nimport React, { useState } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport { ArrowRight } from 'lucide-react';\n\nexport interface ContextualAIBarProps {\n defaultExpanded?: boolean;\n placeholder?: string;\n tools?: React.ReactNode[];\n musicIcon: React.ReactNode;\n sparkleIcon: React.ReactNode;\n}\n\nexport const ContextualAIBar: React.FC = ({\n defaultExpanded = false,\n placeholder = 'Refine with AI',\n tools = [],\n musicIcon,\n sparkleIcon,\n}) => {\n const [isExpanded, setIsExpanded] = useState(defaultExpanded);\n\n const spring = {\n type: 'spring',\n stiffness: 220,\n damping: 16,\n mass: 1.2,\n } as const;\n\n return (\n \n \n setIsExpanded(false)}\n whileTap={{ scale: 0.9 }}\n className=\"relative rounded-4xl p-2.5 outline-none\"\n >\n {!isExpanded && (\n \n )}\n\n
{musicIcon}
\n \n\n setIsExpanded(true)}\n whileTap={{ scale: 0.9 }}\n className=\"relative rounded-4xl p-2.5 outline-none\"\n >\n {isExpanded && (\n \n )}\n\n
{sparkleIcon}
\n \n \n\n \n {!isExpanded ? (\n \n {tools.map((tool, index) => (\n {tool}\n ))}\n \n ) : (\n \n \n\n \n \n \n \n )}\n \n \n );\n};\n\nconst ToolIcon = ({ children }: { children: React.ReactNode }) => (\n \n {children}\n \n);\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "continuous-pagination", "type": "registry:component", "title": "Continuous Pagination", "description": "A premium, fully responsive pagination component featuring spring animations and a 3D-styled active state with a dynamic shimmer effect.", "dependencies": [ "lucide-react", "motion", "next-themes" ], "files": [ { "path": "components/watermelon/continuous-pagination.tsx", "type": "registry:component", "content": "import { useState, type FC, type ReactNode } from \"react\";\nimport { motion, AnimatePresence } from \"motion/react\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { useTheme } from \"next-themes\";\n\n/* --- Types --- */\n\nexport interface ContinuousPaginationProps {\n totalPages?: number;\n defaultPage?: number;\n}\n\n/* --- Sub-Components --- */\n\ninterface PageButtonProps {\n children: ReactNode;\n onClick: () => void;\n}\n\nconst PageButton: FC = ({ children, onClick }) => {\n return (\n \n {children}\n \n );\n};\n\n/* --- Main Component --- */\n\nexport const ContinuousPagination: FC = ({\n totalPages = 5,\n defaultPage = 1,\n}) => {\n const [active, setActive] = useState(defaultPage);\n const { resolvedTheme } = useTheme();\n\n const isDark = resolvedTheme === \"dark\";\n\n const paginate = (page: number) => {\n if (page < 1 || page > totalPages) return;\n setActive(page);\n };\n\n return (\n
\n {/* Prev */}\n paginate(active - 1)}>\n \n \n\n {/* Pages */}\n
\n {Array.from({ length: totalPages }).map((_, i) => {\n const page = i + 1;\n const isActive = page === active;\n\n return (\n paginate(page)}\n className={`relative z-10 h-10 w-10 sm:h-16 sm:w-16 rounded-lg sm:rounded-xl flex items-center justify-center text-sm font-medium transition-colors duration-300 border border-slate-500/20 dark:border-zinc-800 shadow-[0_4px_10px_rgba(0,0,0,0.12)]\n ${isActive\n ? \"text-white\"\n : \"text-gray-500 dark:text-zinc-500 hover:text-gray-800 dark:hover:text-zinc-300 bg-white dark:bg-zinc-900\"\n }`}\n whileHover={\n !isActive\n ? {\n y: -6,\n boxShadow: isDark\n ? \"0 10px 20px rgba(0,0,0,0.4)\"\n : \"0 6px 10px rgba(0,0,0,0.12)\",\n }\n : {}\n }\n whileTap={{ scale: 0.92 }}\n transition={{ type: \"spring\", stiffness: 260, damping: 18 }}\n >\n {/* Active background */}\n \n {isActive && (\n \n \n \n \n \n )}\n \n\n {page}\n \n );\n })}\n
\n\n {/* Next */}\n paginate(active + 1)}>\n \n \n
\n );\n};" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "continuous-pagination-base", "type": "registry:component", "title": "Continuous Pagination (base)", "description": "Theme-ready base variant of A premium, fully responsive pagination component featuring spring animations and a 3D-styled active state with a dynamic shimmer effect..", "dependencies": [ "lucide-react", "motion", "next-themes" ], "files": [ { "path": "components/watermelon/continuous-pagination.tsx", "type": "registry:component", "content": "'use client';\n\nimport { useState, type FC, type ReactNode } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport { useTheme } from 'next-themes';\n\n/* --- Types --- */\n\nexport interface ContinuousPaginationProps {\n totalPages?: number;\n defaultPage?: number;\n}\n\n/* --- Sub-Components --- */\n\ninterface PageButtonProps {\n children: ReactNode;\n onClick: () => void;\n}\n\nconst PageButton: FC = ({ children, onClick }) => {\n return (\n \n {children}\n \n );\n};\n\n/* --- Main Component --- */\n\nexport const ContinuousPagination: FC = ({\n totalPages = 5,\n defaultPage = 1,\n}) => {\n const [active, setActive] = useState(defaultPage);\n const { resolvedTheme } = useTheme();\n\n const isDark = resolvedTheme === 'dark';\n\n const paginate = (page: number) => {\n if (page < 1 || page > totalPages) return;\n setActive(page);\n };\n\n return (\n
\n {/* Prev */}\n paginate(active - 1)}>\n \n \n\n {/* Pages */}\n
\n {Array.from({ length: totalPages }).map((_, i) => {\n const page = i + 1;\n const isActive = page === active;\n\n return (\n paginate(page)}\n className={`border-border relative z-10 flex h-10 w-10 items-center justify-center rounded-lg border text-sm font-medium shadow-[0_4px_10px_hsl(var(--foreground)/0.1)] transition-colors duration-300 sm:h-16 sm:w-16 ${\n isActive\n ? 'text-primary-foreground'\n : 'text-muted-foreground hover:text-foreground bg-background'\n }`}\n whileHover={\n !isActive\n ? {\n y: -6,\n boxShadow: isDark\n ? '0 10px 20px hsl(var(--foreground)/0.4)'\n : '0 6px 10px hsl(var(--foreground)/0.12)',\n }\n : {}\n }\n whileTap={{ scale: 0.92 }}\n transition={{ type: 'spring', stiffness: 260, damping: 18 }}\n >\n {/* Active background */}\n \n {isActive && (\n \n
\n \n \n \n )}\n \n\n \n {page}\n \n \n );\n })}\n
\n\n {/* Next */}\n paginate(active + 1)}>\n \n \n
\n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "continuous-tabs", "type": "registry:component", "title": "Continuous Tabs", "description": "Button-like tabs with a smooth sliding background pill.", "dependencies": [ "motion" ], "files": [ { "path": "components/watermelon/continuous-tabs.tsx", "type": "registry:component", "content": "\"use client\";\n\nimport { useState, useEffect, type FC } from \"react\";\nimport { motion, LayoutGroup } from \"motion/react\";\n\n/* ---------- Types ---------- */\ninterface TabItem {\n id: string;\n label: string;\n}\n\ninterface ContinuousTabsProps {\n tabs?: TabItem[];\n defaultActiveId?: string;\n onChange?: (id: string) => void;\n}\n\n/* ---------- Defaults ---------- */\nconst DEFAULT_TABS: TabItem[] = [\n { id: \"home\", label: \"Home\" },\n { id: \"interactions\", label: \"Interactions\" },\n { id: \"resources\", label: \"Resources\" },\n { id: \"docs\", label: \"Docs\" },\n];\n\nexport const ContinuousTabs: FC = ({\n tabs = DEFAULT_TABS,\n defaultActiveId = \"home\",\n onChange,\n}) => {\n const [active, setActive] = useState(defaultActiveId);\n const [isMounted, setIsMounted] = useState(false);\n\n useEffect(() => {\n requestAnimationFrame(() => setIsMounted(true));\n }, []);\n\n const handleChange = (id: string) => {\n setActive(id);\n onChange?.(id);\n };\n\n if (!isMounted) return null;\n\n return (\n \n \n {tabs.map((tab) => {\n const isActive = active === tab.id;\n\n return (\n handleChange(tab.id)}\n className=\"relative px-4 py-2 sm:px-6 sm:py-3 rounded-full outline-none\"\n >\n {/* Active pill */}\n {isActive && (\n \n )}\n\n {/* Text */}\n \n {tab.label}\n \n \n );\n })}\n \n \n );\n};" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "continuous-tabs-base", "type": "registry:component", "title": "Continuous Tabs (base)", "description": "Theme-ready base variant of Button-like tabs with a smooth sliding background pill..", "dependencies": [ "motion" ], "files": [ { "path": "components/watermelon/continuous-tabs.tsx", "type": "registry:component", "content": "'use client';\n\nimport { useState, useEffect, type FC } from 'react';\nimport { motion, LayoutGroup } from 'motion/react';\n\ninterface TabItem {\n id: string;\n label: string;\n}\n\ninterface ContinuousTabsProps {\n tabs?: TabItem[];\n defaultActiveId?: string;\n onChange?: (id: string) => void;\n}\n\nconst DEFAULT_TABS: TabItem[] = [\n { id: 'home', label: 'Home' },\n { id: 'interactions', label: 'Interactions' },\n { id: 'resources', label: 'Resources' },\n { id: 'docs', label: 'Docs' },\n];\n\nexport const ContinuousTabs: FC = ({\n tabs = DEFAULT_TABS,\n defaultActiveId = 'home',\n onChange,\n}) => {\n const [active, setActive] = useState(defaultActiveId);\n const [isMounted, setIsMounted] = useState(false);\n\n useEffect(() => {\n requestAnimationFrame(() => setIsMounted(true));\n }, []);\n\n const handleChange = (id: string) => {\n setActive(id);\n onChange?.(id);\n };\n\n if (!isMounted) return null;\n\n return (\n \n \n \n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "copy-confirm", "type": "registry:component", "title": "Copy Confirm", "description": "Interactive micro-interaction component for copy confirm.", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "components/watermelon/copy-confirm.tsx", "type": "registry:component", "content": "import {\n Boxes,\n CheckIcon,\n CopyIcon,\n Settings2,\n} from 'lucide-react';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { type ReactNode, useState } from 'react';\n\ninterface SkillCardProps {\n title?: string;\n icon?: ReactNode;\n valueToCopy?: string;\n\n copiedText?: string;\n copyText?: string;\n\n showSettings?: boolean;\n loading?: boolean;\n\n onSettingsClick?: () => void;\n}\n\nexport default function CopyConfirm({\n title = 'Clay Skill',\n icon = ,\n valueToCopy = 'Clay Skill',\n\n copiedText = 'Copied',\n copyText = 'Copy',\n\n showSettings = true,\n loading = false,\n\n onSettingsClick = () => {},\n}: SkillCardProps) {\n const [copied, setCopied] = useState(false);\n\n async function handleCopy() {\n await navigator.clipboard.writeText(valueToCopy);\n\n setCopied(true);\n\n setTimeout(() => {\n setCopied(false);\n }, 1800);\n }\n\n return (\n
\n
\n
\n
\n
{icon}
\n\n \n {title}\n \n
\n\n {showSettings && (\n \n \n \n )}\n
\n\n \n \n \n {copied ? (\n \n ) : (\n \n )}\n \n \n \n \n
\n
\n );\n}\n\nconst AnimatedText = ({\n from,\n to,\n isCopied,\n}: {\n from: string;\n to: string;\n isCopied: boolean;\n}) => {\n const activeText = isCopied ? to : from;\n\n return (\n
\n \n {activeText.split('').map((char, index) => {\n const displayChar = char === ' ' ? '\\u00A0' : char;\n\n return (\n \n {displayChar}\n \n );\n })}\n \n
\n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "copy-confirm-base", "type": "registry:component", "title": "Copy Confirm (base)", "description": "Theme-ready base variant of Interactive micro-interaction component for copy confirm..", "dependencies": [ "framer-motion", "lucide-react" ], "files": [ { "path": "components/watermelon/copy-confirm.tsx", "type": "registry:component", "content": "import { Boxes, CheckIcon, CopyIcon, Settings2 } from 'lucide-react';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { type ReactNode, useState } from 'react';\n\ninterface SkillCardProps {\n title?: string;\n icon?: ReactNode;\n valueToCopy?: string;\n\n copiedText?: string;\n copyText?: string;\n\n showSettings?: boolean;\n loading?: boolean;\n\n onSettingsClick?: () => void;\n}\n\nexport default function CopyConfirm({\n title = 'Clay Skill',\n icon = ,\n valueToCopy = 'Clay Skill',\n\n copiedText = 'Copied',\n copyText = 'Copy',\n\n showSettings = true,\n loading = false,\n\n onSettingsClick = () => {},\n}: SkillCardProps) {\n const [copied, setCopied] = useState(false);\n\n async function handleCopy() {\n await navigator.clipboard.writeText(valueToCopy);\n\n setCopied(true);\n\n setTimeout(() => {\n setCopied(false);\n }, 1800);\n }\n\n return (\n
\n
\n
\n
\n
{icon}
\n\n \n {title}\n \n
\n\n {showSettings && (\n \n \n \n )}\n
\n\n \n \n \n {copied ? (\n \n ) : (\n \n )}\n \n \n\n \n \n
\n
\n );\n}\n\nconst AnimatedText = ({\n from,\n to,\n isCopied,\n}: {\n from: string;\n to: string;\n isCopied: boolean;\n}) => {\n const activeText = isCopied ? to : from;\n\n return (\n
\n \n {activeText.split('').map((char, index) => {\n const displayChar = char === ' ' ? '\\u00A0' : char;\n\n return (\n \n {displayChar}\n \n );\n })}\n \n
\n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "create-community", "type": "registry:component", "title": "Create Community", "description": "Dialog for creating communities with name, description, and settings.", "dependencies": [ "lucide-react", "motion" ], "files": [ { "path": "components/watermelon/create-community.tsx", "type": "registry:component", "content": "\"use client\";\n\nimport React, { useState, useEffect } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport { X, Info } from 'lucide-react';\n\ninterface CommunityData {\n communityName: string;\n pricing: string;\n isApplicationRequired: boolean;\n}\n\ninterface CreateCommunityProps {\n isOpen: boolean;\n onClose: () => void;\n onCreate: (data: CommunityData) => void;\n initialData?: Partial;\n}\n\nexport const CreateCommunity: React.FC = ({\n isOpen,\n onClose,\n onCreate,\n initialData\n}) => {\n const [communityName, setCommunityName] = useState(initialData?.communityName || 'Clipping Course');\n const [pricing, setPricing] = useState(initialData?.pricing || 'FREE');\n const [isApplicationRequired, setIsApplicationRequired] = useState(initialData?.isApplicationRequired || false);\n\n useEffect(() => {\n if (initialData) {\n requestAnimationFrame(() => {\n if (initialData.communityName) setCommunityName(initialData.communityName);\n if (initialData.pricing) setPricing(initialData.pricing);\n if (initialData.isApplicationRequired !== undefined) setIsApplicationRequired(initialData.isApplicationRequired);\n });\n }\n }, [initialData]);\n\n const pricingOptions = ['FREE', 'ONE-TIME', 'MONTHLY'];\n\n return (\n \n {isOpen && (\n
\n\n {/* BG Overlay Animation */}\n \n {/* Glow Effects */}\n
\n ),\n);\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "family-receive-button", "type": "registry:component", "title": "Family Receive Button", "description": "Features a toggle button that transforms into a full confirmation modal with backdrop blur and elegant motion design.", "dependencies": [ "lucide-react", "motion" ], "files": [ { "path": "components/watermelon/family-receive-button.tsx", "type": "registry:component", "content": "'use client';\n\nimport React, { useState } from 'react';\nimport {\n motion,\n AnimatePresence,\n LayoutGroup,\n type Transition,\n} from 'motion/react';\nimport { X, Fingerprint } from 'lucide-react';\n\nexport interface FamilyReceiveComponentProps {\n triggerLabel?: string;\n title?: string;\n description?: string;\n confirmLabel?: string;\n cancelLabel?: string;\n onConfirm?: () => void;\n icon?: React.ReactNode;\n}\n\nconst springTransition: Transition = {\n type: 'spring',\n bounce: 0,\n duration: 0.4,\n};\n\nexport const FamilyReceiveComponent: React.FC = ({\n triggerLabel = 'Receive',\n title = 'Confirm',\n description = 'Are you sure you want to receive hell load of money?',\n confirmLabel = 'Receive',\n cancelLabel = 'Cancel',\n onConfirm,\n icon,\n}) => {\n const [isOpen, setIsOpen] = useState(false);\n\n return (\n
\n \n \n {!isOpen && (\n setIsOpen(true)}\n className=\"relative h-12 w-64 cursor-pointer rounded-full bg-[#00A6F4] text-lg font-medium text-white shadow-lg md:h-14 md:w-96 md:text-xl\"\n whileTap={{ scale: 0.95 }}\n transition={springTransition}\n >\n {triggerLabel}\n \n )}\n \n\n \n {isOpen && (\n \n \n setIsOpen(false)}\n className=\"absolute top-5 right-5 text-zinc-400 transition-colors hover:text-zinc-950 dark:text-zinc-500 dark:hover:text-white\"\n >\n \n \n\n
\n
\n {icon ?? (\n \n )}\n
\n

\n {title}\n

\n
\n\n

\n {description}\n

\n\n
\n setIsOpen(false)}\n className=\"h-11 flex-1 rounded-full bg-zinc-100 text-sm font-medium text-zinc-900 transition-colors hover:bg-zinc-200 md:h-13 md:text-lg dark:bg-[#121212] dark:text-gray-300 dark:hover:bg-[#1a1a1a]\"\n >\n {cancelLabel}\n \n\n {\n onConfirm?.();\n setIsOpen(false);\n }}\n className=\"h-11 flex-1 cursor-pointer rounded-full bg-[#00A6F4] text-sm font-medium text-white hover:bg-[#0095db] md:h-13 md:text-lg\"\n transition={springTransition}\n >\n {confirmLabel}\n \n
\n \n \n )}\n \n \n
\n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "family-receive-button-base", "type": "registry:component", "title": "Family Receive Button (base)", "description": "Theme-ready base variant of Features a toggle button that transforms into a full confirmation modal with backdrop blur and elegant motion design..", "dependencies": [ "lucide-react", "motion" ], "files": [ { "path": "components/watermelon/family-receive-button.tsx", "type": "registry:component", "content": "'use client';\n\nimport React, { useState } from 'react';\nimport {\n motion,\n AnimatePresence,\n LayoutGroup,\n type Transition,\n} from 'motion/react';\nimport { X, Fingerprint } from 'lucide-react';\n\nexport interface FamilyReceiveComponentProps {\n triggerLabel?: string;\n title?: string;\n description?: string;\n confirmLabel?: string;\n cancelLabel?: string;\n onConfirm?: () => void;\n icon?: React.ReactNode;\n}\n\nconst springTransition: Transition = {\n type: 'spring',\n bounce: 0,\n duration: 0.4,\n};\n\nexport const FamilyReceiveComponent: React.FC = ({\n triggerLabel = 'Receive',\n title = 'Confirm',\n description = 'Are you sure you want to receive hell load of money?',\n confirmLabel = 'Receive',\n cancelLabel = 'Cancel',\n onConfirm,\n icon,\n}) => {\n const [isOpen, setIsOpen] = useState(false);\n\n return (\n
\n \n \n {!isOpen && (\n setIsOpen(true)}\n className=\"bg-primary text-primary-foreground relative h-12 w-64 cursor-pointer rounded-lg text-lg font-medium shadow-lg md:h-14 md:w-96 md:text-xl\"\n whileTap={{ scale: 0.95 }}\n transition={springTransition}\n >\n {triggerLabel}\n \n )}\n \n\n \n {isOpen && (\n \n \n setIsOpen(false)}\n className=\"text-muted-foreground hover:text-foreground absolute top-5 right-5\"\n >\n \n \n\n
\n
\n {icon ?? }\n
\n

\n {title}\n

\n
\n\n

\n {description}\n

\n\n
\n setIsOpen(false)}\n className=\"bg-muted text-muted-foreground hover:bg-muted/90 h-11 flex-1 rounded-lg text-base font-medium md:h-13 md:text-lg\"\n >\n {cancelLabel}\n \n\n {\n onConfirm?.();\n setIsOpen(false);\n }}\n className=\"bg-primary text-primary-foreground hover:bg-primary/90 h-11 flex-1 cursor-pointer rounded-lg text-base font-medium md:h-13 md:text-lg\"\n transition={springTransition}\n >\n {confirmLabel}\n \n
\n \n \n )}\n \n \n
\n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "family-wallet", "type": "registry:component", "title": "Family Wallet", "description": "An animated wallet interface inspired by family account interactions with smooth card transitions.", "dependencies": [ "lucide-react", "motion", "react-icons", "react-use-measure" ], "files": [ { "path": "components/watermelon/family-wallet.tsx", "type": "registry:component", "content": "'use client';\n\nimport { useState, useEffect, type SVGProps } from 'react';\nimport useMeasure from 'react-use-measure';\nimport { motion, AnimatePresence } from 'motion/react';\n\nimport {\n Drawer,\n DrawerContent,\n DrawerOverlay,\n DrawerPortal,\n DrawerClose,\n} from '@/components/ui/drawer';\n\nimport {\n ChevronLeft,\n X,\n ArrowRight,\n Fingerprint,\n Github,\n Chrome,\n Twitter,\n} from 'lucide-react';\n\nimport { BsWallet2 } from 'react-icons/bs';\nimport { FaApple, FaDiscord } from 'react-icons/fa6';\n\n/* ---------------- ENUMS ---------------- */\n\nconst View = {\n SIGN_IN: 'SIGN_IN',\n PASSKEY: 'PASSKEY',\n CONNECT_WALLET: 'CONNECT_WALLET',\n} as const;\n\ntype View = (typeof View)[keyof typeof View];\n\nconst TABS = [\n { id: 'email', label: 'Email' },\n { id: 'phone', label: 'Phone' },\n { id: 'passkey', label: 'Passkey' },\n];\n\nconst MetaMask = (props: SVGProps) => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n);\n\nconst Coinbase = (props: SVGProps) => (\n \n \n \n \n \n \n \n \n \n \n \n);\n\nconst Polygon = (props: SVGProps) => (\n \n \n \n \n \n \n);\n\nconst TrustWallet = (props: SVGProps) => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n);\n\nexport default function FamilyWallet() {\n const [open, setOpen] = useState(false);\n const [view, setView] = useState(View.SIGN_IN);\n const [authType, setAuthType] = useState('email');\n const [email, setEmail] = useState('');\n const [phone, setPhone] = useState('');\n\n const [ref, bounds] = useMeasure();\n\n useEffect(() => {\n if (!open) {\n requestAnimationFrame(() => setView(View.SIGN_IN));\n }\n }, [open]);\n\n const SignInView = () => (\n
\n
\n

\n Sign In\n

\n\n \n \n \n
\n\n {/* socials */}\n
\n
\n {[Chrome, FaDiscord, Github, FaApple, Twitter].map((Icon, i) => (\n \n \n \n ))}\n
\n\n
\n {TABS.map((tab) => (\n {\n setAuthType(tab.id);\n }}\n className=\"relative flex-1 cursor-pointer rounded-lg py-2 text-sm font-medium\"\n >\n {tab.id === authType && (\n \n )}\n\n \n {tab.label}\n \n \n ))}\n
\n
\n \n {authType === 'email' && (\n \n setEmail(e.target.value)}\n placeholder=\"email@address.com\"\n className=\"text-md focus-visible:ring-none ml-2 flex-1 text-zinc-900 focus:border-0 focus:ring-0 focus:outline-none focus-visible:ring-0 focus-visible:outline-none dark:text-white\"\n />\n \n \n \n \n )}\n {authType === 'phone' && (\n \n setPhone(e.target.value)}\n placeholder=\"+1 234 567 8900\"\n className=\"text-md focus-visible:ring-none ml-2 flex-1 text-zinc-900 focus:border-0 focus:ring-0 focus:outline-none focus-visible:ring-0 focus-visible:outline-none dark:text-white\"\n />\n \n \n \n \n )}\n {authType === 'passkey' && (\n \n \n \n setView(View.PASSKEY)}\n >\n \n \n \n )}\n \n
\n
\n
\n

OR

\n
\n\n setView(View.CONNECT_WALLET)}\n className=\"flex w-full items-center justify-center gap-2 rounded-full bg-blue-500 py-3 text-white\"\n >\n \n Connect Wallet\n \n
\n );\n\n const PasskeyView = () => (\n
\n
\n setView(View.SIGN_IN)}\n className=\"rounded-full bg-white p-2 dark:bg-zinc-800\"\n >\n \n \n\n

Passkey

\n\n \n \n \n
\n
\n
\n \n \n =\n \n \n \n \n \n \n \n \n \n
\n\n
\n \n
\n
\n\n
\n

\n Waiting for passkey\n

\n

\n Please follow prompts to verify your passkey\n

\n
\n\n setView(View.SIGN_IN)}\n className=\"w-full rounded-xl bg-blue-500 py-3 text-white cursor-pointer\"\n >\n Continue\n \n
\n );\n\n const WalletView = () => (\n
\n
\n setView(View.SIGN_IN)}\n className=\"rounded-full bg-white dark:bg-zinc-800 p-2\"\n >\n \n \n\n

Connect Wallet

\n\n \n \n \n
\n
\n {[\n { name: 'Metamask', logo: MetaMask },\n { name: 'Coinbase', logo: Coinbase },\n { name: 'Polygon', logo: Polygon },\n { name: 'Trust', logo: TrustWallet },\n ].map((wallet, i) => (\n setView(View.SIGN_IN)}\n >\n {wallet.name}\n
\n \n
\n \n ))}\n \n
\n\n
setView(View.SIGN_IN)}\n >\n \n

I don't have wallet

\n
\n
\n );\n\n const renderView = () => {\n switch (view) {\n case View.SIGN_IN:\n return ;\n\n case View.PASSKEY:\n return ;\n\n case View.CONNECT_WALLET:\n return ;\n }\n };\n\n return (\n
\n setOpen(true)}\n className=\"rounded-full bg-zinc-100 px-8 py-4 font-bold dark:text-white dark:bg-zinc-800\"\n >\n Open Wallet\n \n\n \n \n \n\n \n \n
\n \n \n {renderView()}\n \n \n
\n \n \n \n \n
\n );\n}\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "family-wallet-base", "type": "registry:component", "title": "Family Wallet (base)", "description": "Theme-ready base variant of An animated wallet interface inspired by family account interactions with smooth card transitions..", "dependencies": [ "lucide-react", "motion", "react-icons", "react-use-measure" ], "files": [ { "path": "components/watermelon/family-wallet.tsx", "type": "registry:component", "content": "'use client';\n\nimport { useState, useEffect, type SVGProps } from 'react';\nimport useMeasure from 'react-use-measure';\nimport { motion, AnimatePresence } from 'motion/react';\n\nimport {\n Drawer,\n DrawerContent,\n DrawerOverlay,\n DrawerPortal,\n DrawerClose,\n} from '@/components/ui/drawer';\n\nimport {\n ChevronLeft,\n X,\n ArrowRight,\n Fingerprint,\n Github,\n Chrome,\n Twitter,\n} from 'lucide-react';\n\nimport { BsWallet2 } from 'react-icons/bs';\nimport { FaApple, FaDiscord } from 'react-icons/fa6';\n\n/* ---------------- ENUMS ---------------- */\n\nconst View = {\n SIGN_IN: 'SIGN_IN',\n PASSKEY: 'PASSKEY',\n CONNECT_WALLET: 'CONNECT_WALLET',\n} as const;\n\ntype View = (typeof View)[keyof typeof View];\n\nconst TABS = [\n { id: 'email', label: 'Email' },\n { id: 'phone', label: 'Phone' },\n { id: 'passkey', label: 'Passkey' },\n];\n\nconst MetaMask = (props: SVGProps) => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n);\n\nconst Coinbase = (props: SVGProps) => (\n \n \n \n \n \n \n \n \n \n \n \n);\n\nconst Polygon = (props: SVGProps) => (\n \n \n \n \n \n \n);\n\nconst TrustWallet = (props: SVGProps) => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n);\n\nexport default function FamilyWallet() {\n const [open, setOpen] = useState(false);\n const [view, setView] = useState(View.SIGN_IN);\n const [authType, setAuthType] = useState('email');\n const [email, setEmail] = useState('');\n const [phone, setPhone] = useState('');\n\n const [ref, bounds] = useMeasure();\n\n useEffect(() => {\n if (!open) {\n requestAnimationFrame(() => setView(View.SIGN_IN));\n }\n }, [open]);\n\n const SignInView = () => (\n
\n
\n

\n Sign In\n

\n\n \n \n \n
\n\n {/* socials */}\n
\n
\n {[Chrome, FaDiscord, Github, FaApple, Twitter].map((Icon, i) => (\n \n \n \n ))}\n
\n\n
\n {TABS.map((tab) => (\n {\n setAuthType(tab.id);\n }}\n className=\"relative flex-1 cursor-pointer rounded-lg py-2 text-sm font-medium\"\n >\n {tab.id === authType && (\n \n )}\n\n \n {tab.label}\n \n \n ))}\n
\n
\n \n {authType === 'email' && (\n \n setEmail(e.target.value)}\n placeholder=\"email@address.com\"\n className=\"text-md focus-visible:ring-none ml-2 flex-1 text-foreground focus:border-0 focus:ring-0 focus:outline-none focus-visible:ring-0 focus-visible:outline-none\"\n />\n \n \n \n \n )}\n {authType === 'phone' && (\n \n setPhone(e.target.value)}\n placeholder=\"+1 234 567 8900\"\n className=\"text-md focus-visible:ring-none ml-2 flex-1 text-foreground focus:border-0 focus:ring-0 focus:outline-none focus-visible:ring-0 focus-visible:outline-none\"\n />\n \n \n \n \n )}\n {authType === 'passkey' && (\n \n \n \n setView(View.PASSKEY)}\n >\n \n \n \n )}\n \n
\n
\n
\n

OR

\n
\n\n setView(View.CONNECT_WALLET)}\n className=\"flex w-full items-center justify-center gap-2 rounded-4xl bg-primary py-3 font-sans text-primary-foreground\"\n >\n \n Connect Wallet\n \n
\n );\n\n const PasskeyView = () => (\n
\n
\n setView(View.SIGN_IN)}\n className=\"rounded-4xl bg-background p-2\"\n >\n \n \n\n

Passkey

\n\n \n \n \n
\n
\n
\n \n \n =\n \n \n \n \n \n \n \n \n \n
\n\n
\n \n
\n
\n\n
\n

\n Waiting for passkey\n

\n

\n Please follow prompts to verify your passkey\n

\n
\n\n setView(View.SIGN_IN)}\n className=\"w-full cursor-pointer rounded-xl bg-primary py-3 font-sans text-primary-foreground\"\n >\n Continue\n \n
\n );\n\n const WalletView = () => (\n
\n
\n setView(View.SIGN_IN)}\n className=\"rounded-4xl bg-background p-2\"\n >\n \n \n\n

Connect Wallet

\n\n \n \n \n
\n
\n {[\n { name: 'Metamask', logo: MetaMask },\n { name: 'Coinbase', logo: Coinbase },\n { name: 'Polygon', logo: Polygon },\n { name: 'Trust', logo: TrustWallet },\n ].map((wallet, i) => (\n setView(View.SIGN_IN)}\n >\n {wallet.name}\n
\n \n
\n \n ))}\n \n
\n\n
setView(View.SIGN_IN)}\n >\n \n

I don't have wallet

\n
\n
\n );\n\n const renderView = () => {\n switch (view) {\n case View.SIGN_IN:\n return ;\n\n case View.PASSKEY:\n return ;\n\n case View.CONNECT_WALLET:\n return ;\n }\n };\n\n return (\n
\n setOpen(true)}\n className=\"rounded-4xl bg-muted px-8 py-4 font-sans font-bold text-foreground\"\n >\n Open Wallet\n \n\n \n \n \n\n \n \n
\n \n \n {renderView()}\n \n \n
\n \n \n \n \n
\n );\n}\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "feature-tour", "type": "registry:component", "title": "Feature Tour", "description": "A premium guided tour component with blur animations, shining titles, and intuitive navigation.", "dependencies": [ "lucide-react", "motion" ], "files": [ { "path": "components/watermelon/feature-tour.tsx", "type": "registry:component", "content": "\"use client\";\n\nimport React, { useState, useEffect, useRef, useCallback } from \"react\";\nimport {\n motion,\n AnimatePresence,\n useReducedMotion,\n type Transition,\n} from \"motion/react\";\nimport { X } from \"lucide-react\";\n\nexport interface TourStep {\n id: string;\n title: string;\n description: string;\n icon: React.ReactNode;\n}\n\ninterface FeatureTourProps {\n steps: TourStep[];\n onClose: () => void;\n onLearnMore?: (step: TourStep) => void;\n className?: string;\n loop?: boolean;\n closeOnBackdrop?: boolean;\n}\n\n/* ─────────────────────────\n Typed Motion Curves\n───────────────────────── */\n\nconst EASE_OUT = [0.16, 1, 0.3, 1] as const;\nconst FAST_OUT = [0.22, 1, 0.36, 1] as const;\n\nconst SPRING_ICON: Transition = {\n type: \"spring\",\n stiffness: 420,\n damping: 34,\n mass: 0.7,\n};\n\nconst SPRING_BG: Transition = {\n type: \"spring\",\n stiffness: 340,\n damping: 30,\n mass: 0.8,\n};\n\nexport const FeatureTour: React.FC = ({\n steps,\n onClose,\n onLearnMore,\n className = \"\",\n loop = false,\n closeOnBackdrop = true,\n}) => {\n const shouldReduceMotion = useReducedMotion();\n const containerRef = useRef(null);\n const [currentIndex, setCurrentIndex] = useState(0);\n\n\n const goToStep = useCallback((index: number) => {\n setCurrentIndex((prev) => (index === prev ? prev : index));\n }, []);\n\n const goNext = useCallback(() => {\n setCurrentIndex((prev) =>\n prev === steps.length - 1 ? (loop ? 0 : prev) : prev + 1\n );\n }, [loop, steps.length]);\n\n const goPrev = useCallback(() => {\n setCurrentIndex((prev) =>\n prev === 0 ? (loop ? steps.length - 1 : prev) : prev - 1\n );\n }, [loop, steps.length]);\n\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === \"ArrowRight\") goNext();\n if (e.key === \"ArrowLeft\") goPrev();\n if (e.key === \"Escape\") onClose();\n };\n window.addEventListener(\"keydown\", handleKeyDown);\n return () => window.removeEventListener(\"keydown\", handleKeyDown);\n }, [goNext, goPrev, onClose]);\n\n useEffect(() => {\n const btn = containerRef.current?.querySelector(\"button\");\n btn?.focus();\n }, []);\n\n const currentStep = steps[currentIndex];\n\n if (!steps || steps.length === 0) return null;\n\n return (\n \n e.stopPropagation()}\n initial={{\n opacity: 0,\n scale: 0.96,\n y: 16,\n filter: \"blur(4px)\",\n }}\n animate={{\n opacity: 1,\n scale: 1,\n y: 0,\n filter: \"blur(0px)\",\n }}\n exit={{\n opacity: 0,\n scale: 0.98,\n y: 12,\n }}\n transition={{\n duration: 0.18,\n ease: EASE_OUT,\n }}\n className={`relative w-full max-w-[400px] sm:aspect-[1/1.3] min-h-[520px] sm:min-h-0 rounded-[34px] border shadow-sm p-6 sm:p-8 flex flex-col items-center overflow-hidden transition-colors duration-300 bg-white border-neutral-200 dark:bg-neutral-900 dark:border-neutral-800 ${className}`}\n >\n \n \n \n\n
\n\n {/* Icon Morph */}\n \n \n \n\n \n {currentStep.icon}\n \n \n \n\n {/* Content Slide */}\n \n \n

\n {currentStep.title}\n

\n\n

\n {currentStep.description}\n

\n\n {onLearnMore && (\n onLearnMore(currentStep)}\n className=\"mt-6 sm:mt-10 px-10 py-3 rounded-full font-semibold text-lg transition-colors bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700\"\n >\n Learn More\n \n )}\n \n \n
\n\n {/* Dots */}\n
\n {steps.map((step, index) => (\n goToStep(index)}\n className=\"relative h-2 focus:outline-none\"\n >\n \n \n ))}\n
\n\n
\n \n
\n );\n};" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "feature-tour-base", "type": "registry:component", "title": "Feature Tour (base)", "description": "Theme-ready base variant of A premium guided tour component with blur animations, shining titles, and intuitive navigation..", "dependencies": [ "lucide-react", "motion" ], "files": [ { "path": "components/watermelon/feature-tour.tsx", "type": "registry:component", "content": "\"use client\";\n\nimport React, { useState, useEffect, useRef, useCallback } from \"react\";\nimport {\n motion,\n AnimatePresence,\n useReducedMotion,\n type Transition,\n} from \"motion/react\";\nimport { X } from \"lucide-react\";\n\nexport interface TourStep {\n id: string;\n title: string;\n description: string;\n icon: React.ReactNode;\n}\n\ninterface FeatureTourProps {\n steps: TourStep[];\n onClose: () => void;\n onLearnMore?: (step: TourStep) => void;\n className?: string;\n loop?: boolean;\n closeOnBackdrop?: boolean;\n}\n\nconst EASE_OUT = [0.16, 1, 0.3, 1] as const;\nconst FAST_OUT = [0.22, 1, 0.36, 1] as const;\n\nconst SPRING_ICON: Transition = {\n type: \"spring\",\n stiffness: 420,\n damping: 34,\n mass: 0.7,\n};\n\nconst SPRING_BG: Transition = {\n type: \"spring\",\n stiffness: 340,\n damping: 30,\n mass: 0.8,\n};\n\nexport const FeatureTour: React.FC = ({\n steps,\n onClose,\n onLearnMore,\n className = \"\",\n loop = false,\n closeOnBackdrop = true,\n}) => {\n const shouldReduceMotion = useReducedMotion();\n const containerRef = useRef(null);\n const [currentIndex, setCurrentIndex] = useState(0);\n\n const goToStep = useCallback((index: number) => {\n setCurrentIndex((prev) => (index === prev ? prev : index));\n }, []);\n\n const goNext = useCallback(() => {\n setCurrentIndex((prev) =>\n prev === steps.length - 1 ? (loop ? 0 : prev) : prev + 1\n );\n }, [loop, steps.length]);\n\n const goPrev = useCallback(() => {\n setCurrentIndex((prev) =>\n prev === 0 ? (loop ? steps.length - 1 : prev) : prev - 1\n );\n }, [loop, steps.length]);\n\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === \"ArrowRight\") goNext();\n if (e.key === \"ArrowLeft\") goPrev();\n if (e.key === \"Escape\") onClose();\n };\n\n window.addEventListener(\"keydown\", handleKeyDown);\n return () => window.removeEventListener(\"keydown\", handleKeyDown);\n }, [goNext, goPrev, onClose]);\n\n useEffect(() => {\n const btn = containerRef.current?.querySelector(\"button\");\n btn?.focus();\n }, []);\n\n const currentStep = steps[currentIndex];\n\n if (!steps || steps.length === 0) return null;\n\n return (\n \n e.stopPropagation()}\n initial={{\n opacity: 0,\n scale: 0.96,\n y: 16,\n filter: \"blur(4px)\",\n }}\n animate={{\n opacity: 1,\n scale: 1,\n y: 0,\n filter: \"blur(0px)\",\n }}\n exit={{\n opacity: 0,\n scale: 0.98,\n y: 12,\n }}\n transition={{\n duration: 0.18,\n ease: EASE_OUT,\n }}\n className={`relative flex w-full max-w-100 min-h-130 flex-col items-center overflow-hidden rounded-3xl border border-border bg-card p-6 font-sans shadow-sm transition-colors duration-300 sm:min-h-0 sm:aspect-[1/1.3] sm:p-8 ${className}`}\n >\n \n \n \n\n
\n \n \n \n\n \n {currentStep.icon}\n \n \n \n\n \n \n

\n {currentStep.title}\n

\n\n

\n {currentStep.description}\n

\n\n {onLearnMore && (\n onLearnMore(currentStep)}\n className=\"mt-6 rounded-3xl bg-primary px-10 py-3 font-sans text-lg font-semibold text-primary-foreground transition-colors hover:opacity-95 sm:mt-10\"\n >\n Learn More\n \n )}\n \n \n
\n\n
\n {steps.map((step, index) => (\n goToStep(index)}\n className=\"relative h-2 focus:outline-none\"\n >\n \n \n ))}\n
\n\n
\n \n
\n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "feedback-action", "type": "registry:component", "title": "Feedback Action", "description": "Trigger quick user feedback actions through subtle animated interaction buttons.", "dependencies": [ "motion", "react-icons" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/watermelon/feedback-action.tsx", "type": "registry:component", "content": "import React, { useState, useEffect } from 'react';\nimport { motion, AnimatePresence, MotionConfig } from 'motion/react';\nimport { LuCircleDotDashed } from 'react-icons/lu';\nimport { FaArrowRotateRight } from 'react-icons/fa6';\nimport { TbAlertOctagonFilled } from 'react-icons/tb';\nimport { cn } from '@/lib/utils';\n\ninterface InlineFeedbackProps {\n errorMessage?: string;\n loadingMessage?: string;\n onRetry?: () => void;\n}\n\nexport const FeedbackAction: React.FC = ({\n errorMessage = 'Sync Failed',\n loadingMessage = 'Syncing',\n onRetry,\n}) => {\n const [status, setStatus] = useState<'error' | 'loading'>('error');\n\n const handleRetry = () => {\n setStatus('loading');\n onRetry?.();\n };\n\n useEffect(() => {\n if (status === 'loading') {\n const timer = setTimeout(() => {\n setStatus('error');\n }, 3500);\n return () => clearTimeout(timer);\n }\n }, [status]);\n\n return (\n
\n \n \n \n \n \n {status === 'error' ? (\n \n ) : (\n \n )}\n \n \n\n \n \n \n\n \n {status === 'error' && (\n \n \n \n )}\n \n \n
\n );\n};\n\nfunction AnimatedText({\n text,\n className,\n delayStep = 0.014,\n}: {\n text: string;\n className?: string;\n delayStep?: number;\n}) {\n const chars = text.split('');\n\n return (\n \n \n \n {chars.map((char, i) => (\n \n {char}\n \n ))}\n \n \n \n );\n}\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "feedback-action-base", "type": "registry:component", "title": "Feedback Action (base)", "description": "Theme-ready base variant of Trigger quick user feedback actions through subtle animated interaction buttons..", "dependencies": [ "motion", "react-icons" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/watermelon/feedback-action.tsx", "type": "registry:component", "content": "'use client';\n\nimport React, { useState, useEffect } from 'react';\nimport { motion, AnimatePresence, MotionConfig } from 'motion/react';\nimport { LuCircleDotDashed } from 'react-icons/lu';\nimport { FaArrowRotateRight } from 'react-icons/fa6';\nimport { TbAlertOctagonFilled } from 'react-icons/tb';\nimport { cn } from '@/lib/utils';\n\ninterface InlineFeedbackProps {\n errorMessage?: string;\n loadingMessage?: string;\n onRetry?: () => void;\n}\n\nexport const FeedbackAction: React.FC = ({\n errorMessage = 'Sync Failed',\n loadingMessage = 'Syncing',\n onRetry,\n}) => {\n const [status, setStatus] = useState<'error' | 'loading'>('error');\n\n const handleRetry = () => {\n setStatus('loading');\n onRetry?.();\n };\n\n useEffect(() => {\n if (status === 'loading') {\n const timer = setTimeout(() => {\n setStatus('error');\n }, 3500);\n return () => clearTimeout(timer);\n }\n }, [status]);\n\n return (\n
\n \n \n \n \n \n {status === 'error' ? (\n \n ) : (\n \n )}\n \n \n\n \n \n \n\n \n {status === 'error' && (\n \n \n \n )}\n \n \n
\n );\n};\n\nfunction AnimatedText({\n text,\n className,\n delayStep = 0.014,\n}: {\n text: string;\n className?: string;\n delayStep?: number;\n}) {\n const chars = text.split('');\n\n return (\n \n \n \n {chars.map((char, i) => (\n \n {char}\n \n ))}\n \n \n \n );\n}\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "feedback", "type": "registry:component", "title": "Feedback", "description": "A premium feedback component with morphing icons, smooth transitions, and a refined dark mode experience.", "dependencies": [ "@hugeicons/core-free-icons", "@hugeicons/react", "lucide-react", "motion", "react-icons" ], "files": [ { "path": "components/watermelon/feedback.tsx", "type": "registry:component", "content": "import React, { useState } from 'react';\nimport { motion, AnimatePresence, LayoutGroup } from 'motion/react';\nimport { X, Sparkle } from 'lucide-react';\nimport { Navigation03Icon } from '@hugeicons/core-free-icons';\nimport { HugeiconsIcon } from '@hugeicons/react';\nimport {\n FaRegThumbsUp,\n FaThumbsUp,\n FaRegThumbsDown,\n FaThumbsDown,\n} from 'react-icons/fa6';\n\ninterface FeedbackComponentProps {\n onSubmit?: (data: { rating: 'up' | 'down'; feedback: string }) => void;\n}\n\nconst SPRING_CONFIG = {\n ease: 'easeInOut' as const,\n duration: 0.3,\n};\n\nexport const FeedbackComponent: React.FC = ({\n onSubmit,\n}) => {\n const [isOpen, setIsOpen] = useState(false);\n const [activeRating, setActiveRating] = useState<'up' | 'down' | null>(null);\n const [animatingIcon, setAnimatingIcon] = useState<'up' | 'down' | null>(\n null,\n );\n const [feedback, setFeedback] = useState('');\n const [isSubmitting, setIsSubmitting] = useState(false);\n\n const handleOpen = (type: 'up' | 'down') => {\n if (animatingIcon) return; // Prevent double clicks during animation\n setActiveRating(type);\n setAnimatingIcon(type);\n\n // Wait for the thumb pop animation to finish before expanding the card\n setTimeout(() => {\n setIsOpen(true);\n setAnimatingIcon(null);\n }, 500);\n };\n\n const handleClose = () => {\n setIsOpen(false);\n setTimeout(() => {\n setActiveRating(null);\n setFeedback('');\n }, 400);\n };\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n if (!activeRating) return;\n setIsSubmitting(true);\n setTimeout(() => {\n onSubmit?.({ rating: activeRating, feedback });\n setIsSubmitting(false);\n handleClose();\n }, 800);\n };\n\n return (\n
\n \n \n {!isOpen ? (\n \n {(['up', 'down'] as const).map((type) => (\n handleOpen(type)}\n whileHover={{ scale: 1.05 }}\n whileTap={{ scale: 0.95 }}\n transition={SPRING_CONFIG}\n className=\"relative flex h-16 w-16 items-center justify-center overflow-visible rounded-[22px] bg-neutral-800 shadow-xl\"\n >\n \n {animatingIcon === type && (\n
\n {[...Array(6)].map((_, i) => {\n const angle = (i * 60 * Math.PI) / 180;\n const distance = 45;\n return (\n \n \n \n );\n })}\n
\n )}\n \n\n \n {type === 'up' ? (\n activeRating === 'up' ? (\n \n ) : (\n \n )\n ) : activeRating === 'down' ? (\n \n ) : (\n \n )}\n \n \n ))}\n \n ) : (\n \n {\n e.stopPropagation();\n handleClose();\n }}\n className=\"absolute top-4 right-4 rounded-full bg-neutral-100 p-1.5 text-neutral-500 transition-all hover:scale-110 hover:text-neutral-700 active:scale-90 sm:top-5 sm:right-5 sm:p-2 dark:bg-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200\"\n >\n \n \n\n \n

\n Share Feedback\n

\n\n

\n {activeRating === 'up'\n ? 'Let us know what you liked most?'\n : 'What can we improve?'}\n

\n\n
\n
\n setFeedback(e.target.value)}\n placeholder=\"Type in your feedback (optional)\"\n className=\"h-32 w-full resize-none rounded-2xl border border-neutral-200 bg-neutral-100 p-4 text-neutral-800 transition-all outline-none focus:ring-2 focus:ring-black dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200 dark:focus:ring-white\"\n />\n
\n\n \n \n {isSubmitting ? 'Sending...' : 'Send Now'}\n \n \n \n \n )}\n
\n \n
\n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "feedback-base", "type": "registry:component", "title": "Feedback (base)", "description": "Theme-ready base variant of A premium feedback component with morphing icons, smooth transitions, and a refined dark mode experience..", "dependencies": [ "@hugeicons/core-free-icons", "@hugeicons/react", "lucide-react", "motion", "react-icons" ], "files": [ { "path": "components/watermelon/feedback.tsx", "type": "registry:component", "content": "import React, { useState } from 'react';\nimport { motion, AnimatePresence, LayoutGroup } from 'motion/react';\nimport { X, Sparkle } from 'lucide-react';\nimport { Navigation03Icon } from '@hugeicons/core-free-icons';\nimport { HugeiconsIcon } from '@hugeicons/react';\nimport {\n FaRegThumbsUp,\n FaThumbsUp,\n FaRegThumbsDown,\n FaThumbsDown,\n} from 'react-icons/fa6';\n\ninterface FeedbackComponentProps {\n onSubmit?: (data: { rating: 'up' | 'down'; feedback: string }) => void;\n}\n\nconst SPRING_CONFIG = {\n ease: 'easeInOut' as const,\n duration: 0.3,\n};\n\nexport const FeedbackComponent: React.FC = ({\n onSubmit,\n}) => {\n const [isOpen, setIsOpen] = useState(false);\n const [activeRating, setActiveRating] = useState<'up' | 'down' | null>(null);\n const [animatingIcon, setAnimatingIcon] = useState<'up' | 'down' | null>(\n null,\n );\n const [feedback, setFeedback] = useState('');\n const [isSubmitting, setIsSubmitting] = useState(false);\n\n const handleOpen = (type: 'up' | 'down') => {\n if (animatingIcon) return; // Prevent double clicks during animation\n setActiveRating(type);\n setAnimatingIcon(type);\n\n // Wait for the thumb pop animation to finish before expanding the card\n setTimeout(() => {\n setIsOpen(true);\n setAnimatingIcon(null);\n }, 500);\n };\n\n const handleClose = () => {\n setIsOpen(false);\n setTimeout(() => {\n setActiveRating(null);\n setFeedback('');\n }, 400);\n };\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n if (!activeRating) return;\n setIsSubmitting(true);\n setTimeout(() => {\n onSubmit?.({ rating: activeRating, feedback });\n setIsSubmitting(false);\n handleClose();\n }, 800);\n };\n\n return (\n
\n \n \n {!isOpen ? (\n \n {(['up', 'down'] as const).map((type) => (\n handleOpen(type)}\n whileHover={{ scale: 1.05 }}\n whileTap={{ scale: 0.95 }}\n transition={SPRING_CONFIG}\n className=\"relative flex h-16 w-16 items-center justify-center overflow-visible rounded-2xl bg-primary text-primary-foreground shadow-xl\"\n >\n \n {animatingIcon === type && (\n
\n {[...Array(6)].map((_, i) => {\n const angle = (i * 60 * Math.PI) / 180;\n const distance = 45;\n return (\n \n \n \n );\n })}\n
\n )}\n \n\n \n {type === 'up' ? (\n activeRating === 'up' ? (\n \n ) : (\n \n )\n ) : activeRating === 'down' ? (\n \n ) : (\n \n )}\n \n \n ))}\n \n ) : (\n \n {\n e.stopPropagation();\n handleClose();\n }}\n className=\"absolute top-4 right-4 rounded-2xl bg-muted p-1.5 text-muted-foreground transition-all hover:scale-110 hover:text-foreground active:scale-90 sm:top-5 sm:right-5 sm:p-2\"\n >\n \n \n\n \n

\n Share Feedback\n

\n\n

\n {activeRating === 'up'\n ? 'Let us know what you liked most?'\n : 'What can we improve?'}\n

\n\n
\n
\n setFeedback(e.target.value)}\n placeholder=\"Type in your feedback (optional)\"\n className=\"h-32 w-full resize-none rounded-xl border border-border bg-muted p-4 font-sans text-foreground transition-all outline-none focus:ring-2 focus:ring-ring\"\n />\n
\n\n \n \n {isSubmitting ? 'Sending...' : 'Send Now'}\n \n \n \n \n )}\n
\n \n
\n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "filter-disclosure", "type": "registry:component", "title": "Filter Disclosure", "description": "A smooth expanding filter component with active state indicators.", "dependencies": [ "motion", "react-icons" ], "files": [ { "path": "components/watermelon/filter-disclosure.tsx", "type": "registry:component", "content": "'use client';\n\nimport { useState, type FC } from 'react';\nimport {\n motion,\n AnimatePresence,\n MotionConfig,\n} from 'motion/react';\nimport { FaBell, FaTasks } from 'react-icons/fa';\nimport { IoCalendar } from 'react-icons/io5';\nimport { BsCheckLg, BsFillPeopleFill, BsPinFill } from 'react-icons/bs';\nimport { RiBubbleChartFill } from 'react-icons/ri';\nimport { PiFunnelSimpleBold } from 'react-icons/pi';\nimport type { IconType } from 'react-icons';\n\nexport interface FilterItem {\n id: string;\n label: string;\n icon: IconType;\n}\n\ninterface FilterDisclosureProps {\n items?: FilterItem[];\n defaultActiveId?: string;\n onChange?: (id: string) => void;\n}\n\nconst SPRING = {\n type: 'spring',\n stiffness: 240,\n damping: 20,\n mass: 1,\n} as const;\n\nconst DEFAULT_ITEMS: FilterItem[] = [\n { id: 'tasks', label: 'Tasks', icon: FaTasks },\n { id: 'events', label: 'Events', icon: IoCalendar },\n { id: 'reminders', label: 'Reminders', icon: FaBell },\n { id: 'appointments', label: 'Appointment', icon: BsPinFill },\n { id: 'meetings', label: 'Mettings', icon: BsFillPeopleFill },\n { id: 'celebrations', label: 'Celebrations', icon: RiBubbleChartFill },\n];\n\nexport const FilterDisclosure: FC = ({\n items = DEFAULT_ITEMS,\n defaultActiveId = 'reminders',\n onChange,\n}) => {\n const [open, setOpen] = useState(false);\n const [active, setActive] = useState(defaultActiveId);\n\n const activeItem = items.find((i) => i.id === active);\n const ActiveIcon = activeItem ? activeItem.icon : FaTasks;\n\n const handleSelect = (id: string) => {\n setActive(id);\n onChange?.(id);\n setTimeout(() => setOpen(false), 220);\n };\n\n return (\n
\n \n \n {open ? (\n \n {items.map((item, index) => {\n const Icon = item.icon;\n const selected = active === item.id;\n\n return (\n handleSelect(item.id)}\n whileTap={{ scale: 0.98 }}\n transition={{ ...SPRING, delay: (3 + index) * 0.05 }}\n className=\"flex w-full cursor-pointer items-center justify-between rounded-[16px] px-[12px] py-[10px] transition-colors hover:bg-[#F6F5FA] dark:hover:bg-neutral-800/60\"\n >\n
\n \n \n {item.label}\n \n
\n\n \n \n \n \n \n \n );\n })}\n \n ) : (\n
\n setOpen(true)}\n whileHover={{ scale: 1.05 }}\n whileTap={{ scale: 0.95 }}\n style={{\n borderRadius: 32,\n }}\n className=\"z-30 flex h-[60px] w-[60px] cursor-pointer items-center justify-center rounded-full border-[1.6px] border-[#E5E5E9] bg-[#FEFEFE] shadow-xs will-change-transform dark:border-neutral-800 dark:bg-neutral-900\"\n >\n \n \n\n \n \n \n \n \n \n \n
\n )}\n \n \n
\n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "filter-disclosure-base", "type": "registry:component", "title": "Filter Disclosure (base)", "description": "Theme-ready base variant of A smooth expanding filter component with active state indicators..", "dependencies": [ "motion", "react-icons" ], "files": [ { "path": "components/watermelon/filter-disclosure.tsx", "type": "registry:component", "content": "'use client';\n\nimport { useState, type FC } from 'react';\nimport { motion, AnimatePresence, MotionConfig } from 'motion/react';\nimport { FaBell, FaTasks } from 'react-icons/fa';\nimport { IoCalendar } from 'react-icons/io5';\nimport { BsCheckLg, BsFillPeopleFill, BsPinFill } from 'react-icons/bs';\nimport { RiBubbleChartFill } from 'react-icons/ri';\nimport { PiFunnelSimpleBold } from 'react-icons/pi';\nimport type { IconType } from 'react-icons';\n\nexport interface FilterItem {\n id: string;\n label: string;\n icon: IconType;\n}\n\ninterface FilterDisclosureProps {\n items?: FilterItem[];\n defaultActiveId?: string;\n onChange?: (id: string) => void;\n}\n\nconst SPRING = {\n type: 'spring',\n stiffness: 240,\n damping: 20,\n mass: 1,\n} as const;\n\nconst DEFAULT_ITEMS: FilterItem[] = [\n { id: 'tasks', label: 'Tasks', icon: FaTasks },\n { id: 'events', label: 'Events', icon: IoCalendar },\n { id: 'reminders', label: 'Reminders', icon: FaBell },\n { id: 'appointments', label: 'Appointment', icon: BsPinFill },\n { id: 'meetings', label: 'Mettings', icon: BsFillPeopleFill },\n { id: 'celebrations', label: 'Celebrations', icon: RiBubbleChartFill },\n];\n\nexport const FilterDisclosure: FC = ({\n items = DEFAULT_ITEMS,\n defaultActiveId = 'reminders',\n onChange,\n}) => {\n const [open, setOpen] = useState(false);\n const [active, setActive] = useState(defaultActiveId);\n\n const activeItem = items.find((i) => i.id === active);\n const ActiveIcon = activeItem ? activeItem.icon : FaTasks;\n\n const handleSelect = (id: string) => {\n setActive(id);\n onChange?.(id);\n setTimeout(() => setOpen(false), 220);\n };\n\n return (\n
\n \n \n {open ? (\n \n {items.map((item, index) => {\n const Icon = item.icon;\n const selected = active === item.id;\n\n return (\n handleSelect(item.id)}\n whileTap={{ scale: 0.98 }}\n transition={{ ...SPRING, delay: (3 + index) * 0.05 }}\n className=\"hover:bg-accent flex w-full cursor-pointer items-center justify-between rounded-lg px-[12px] py-[10px] transition-colors\"\n >\n
\n \n \n {item.label}\n \n
\n\n \n \n \n \n \n \n );\n })}\n \n ) : (\n
\n setOpen(true)}\n whileHover={{ scale: 1.05 }}\n whileTap={{ scale: 0.95 }}\n \n className=\"border-border bg-background z-30 flex h-[60px] w-[60px] cursor-pointer items-center justify-center rounded-lg border-[1.6px] shadow-sm will-change-transform\"\n >\n \n \n\n \n \n \n \n \n \n \n
\n )}\n \n \n
\n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "floating-disclosure", "type": "registry:component", "title": "Floating Disclosure", "description": "A compact expandable action menu with animated resizing, floating close button, and spring-based item reveal.", "dependencies": [ "lucide-react", "motion", "react-icons", "react-use-measure" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/watermelon/floating-disclosure.tsx", "type": "registry:component", "content": "'use client';\n\nimport { useEffect, useState } from 'react';\nimport { motion, AnimatePresence, MotionConfig } from 'motion/react';\nimport { PlusIcon } from 'lucide-react';\nimport { BsFileTextFill } from 'react-icons/bs';\nimport { FaBell } from 'react-icons/fa6';\nimport { TbFileFilled } from 'react-icons/tb';\nimport { IoIosFolder } from 'react-icons/io';\nimport useMeasure from 'react-use-measure';\nimport { cn } from '@/lib/utils';\nimport type { IconType } from 'react-icons';\n\ninterface TooltipItem {\n title: string;\n description: string;\n icon: IconType;\n}\ninterface FloatingDisclosureProps {\n items: TooltipItem[];\n}\n\nexport const items = [\n {\n title: 'Task',\n description: 'Create a new task',\n icon: BsFileTextFill,\n },\n {\n title: 'Reminder',\n description: 'Create reminders',\n icon: FaBell,\n },\n {\n title: 'Note',\n description: 'Capture ideas',\n icon: TbFileFilled,\n },\n {\n title: 'Project',\n description: 'Organise projects',\n icon: IoIosFolder,\n },\n];\n\nexport const FloatingDisclosure = ({ items }: FloatingDisclosureProps) => {\n const [isOpen, setIsOpen] = useState(false);\n const [ref, bounds] = useMeasure({ offsetSize: true });\n\n useEffect(() => {\n console.log(bounds);\n }, [isOpen, bounds]);\n\n return (\n \n 0 ? bounds.width : 'auto',\n height: bounds.height > 0 ? bounds.height : 'auto',\n }}\n >\n \n {isOpen && (\n setIsOpen(false)}\n >\n \n \n )}\n \n
\n \n {!isOpen ? (\n setIsOpen(!isOpen)}\n >\n \n \n ) : (\n \n {items.map((item) => (\n \n
\n \n
\n\n
\n

\n {item.title}\n

\n \n {item.description}\n \n
\n \n ))}\n \n )}\n \n
\n \n \n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "floating-disclosure-base", "type": "registry:component", "title": "Floating Disclosure (base)", "description": "Theme-ready base variant of A compact expandable action menu with animated resizing, floating close button, and spring-based item reveal..", "dependencies": [ "lucide-react", "motion", "react-icons", "react-use-measure" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/watermelon/floating-disclosure.tsx", "type": "registry:component", "content": "'use client';\n\nimport { useEffect, useState } from 'react';\nimport { motion, AnimatePresence, MotionConfig } from 'motion/react';\nimport { PlusIcon } from 'lucide-react';\nimport { BsFileTextFill } from 'react-icons/bs';\nimport { FaBell } from 'react-icons/fa6';\nimport { TbFileFilled } from 'react-icons/tb';\nimport { IoIosFolder } from 'react-icons/io';\nimport useMeasure from 'react-use-measure';\nimport { cn } from '@/lib/utils';\nimport type { IconType } from 'react-icons';\n\ninterface TooltipItem {\n title: string;\n description: string;\n icon: IconType;\n}\ninterface FloatingDisclosureProps {\n items: TooltipItem[];\n}\n\nexport const items = [\n {\n title: 'Task',\n description: 'Create a new task',\n icon: BsFileTextFill,\n },\n {\n title: 'Reminder',\n description: 'Create reminders',\n icon: FaBell,\n },\n {\n title: 'Note',\n description: 'Capture ideas',\n icon: TbFileFilled,\n },\n {\n title: 'Project',\n description: 'Organise projects',\n icon: IoIosFolder,\n },\n];\n\nexport const FloatingDisclosure = ({ items }: FloatingDisclosureProps) => {\n const [isOpen, setIsOpen] = useState(false);\n const [ref, bounds] = useMeasure({ offsetSize: true });\n\n useEffect(() => {\n console.log(bounds);\n }, [isOpen, bounds]);\n\n return (\n \n
\n 0 ? bounds.width : 'auto',\n height: bounds.height > 0 ? bounds.height : 'auto',\n }}\n >\n \n {isOpen && (\n setIsOpen(false)}\n >\n \n \n )}\n \n
\n \n {!isOpen ? (\n setIsOpen(!isOpen)}\n >\n \n \n ) : (\n \n {items.map((item) => (\n \n
\n \n
\n\n
\n

\n {item.title}\n

\n \n {item.description}\n \n
\n \n ))}\n \n )}\n \n
\n \n
\n \n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "floating-input", "type": "registry:component", "title": "Floating Input", "description": "An input field with floating label animation.", "dependencies": [], "registryDependencies": [ "utils" ], "files": [ { "path": "components/watermelon/floating-input.tsx", "type": "registry:component", "content": "import { cn } from \"@/lib/utils\";\nimport { useState } from \"react\";\n\ninterface FloatingInputProps extends React.InputHTMLAttributes {\n label: string;\n}\n\nexport function FloatingInput({ label, className, ...props }: FloatingInputProps) {\n const [focused, setFocused] = useState(false);\n const [hasValue, setHasValue] = useState(false);\n\n return (\n
\n setFocused(true)}\n onBlur={(e) => {\n setFocused(false);\n setHasValue(e.target.value !== \"\");\n }}\n onChange={(e) => setHasValue(e.target.value !== \"\")}\n {...props}\n />\n \n {label}\n \n
\n );\n}\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "floating-input-base", "type": "registry:component", "title": "Floating Input (base)", "description": "Theme-ready base variant of An input field with floating label animation..", "dependencies": [], "registryDependencies": [ "utils" ], "files": [ { "path": "components/watermelon/floating-input.tsx", "type": "registry:component", "content": "import { cn } from \"@/lib/utils\";\nimport { useState } from \"react\";\n\ninterface FloatingInputProps extends React.InputHTMLAttributes {\n label: string;\n}\n\nexport function FloatingInput({ label, className, ...props }: FloatingInputProps) {\n const [focused, setFocused] = useState(false);\n const [hasValue, setHasValue] = useState(false);\n\n return (\n
\n setFocused(true)}\n onBlur={(e) => {\n setFocused(false);\n setHasValue(e.target.value !== \"\");\n }}\n onChange={(e) => setHasValue(e.target.value !== \"\")}\n {...props}\n />\n \n {label}\n \n
\n );\n}\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "fluid-tabs", "type": "registry:component", "title": "Fluid Tabs", "description": "A fluid, spring-animated tab component with floating active indicator and icon scaling.", "dependencies": [ "motion", "react-icons" ], "files": [ { "path": "components/watermelon/fluid-tabs.tsx", "type": "registry:component", "content": "'use client';\n\nimport { useState, type ReactNode, type FC } from 'react';\nimport { motion } from 'motion/react';\nimport { BiSolidPieChartAlt2 } from 'react-icons/bi';\nimport { FaInbox, FaLandmark } from 'react-icons/fa';\n\nexport interface TabItem {\n id: string;\n label: string;\n icon: ReactNode;\n}\n\ninterface FluidTabsProps {\n tabs?: TabItem[];\n defaultActive?: string;\n onChange?: (id: string) => void;\n}\n\nconst DEFAULT_TABS: TabItem[] = [\n { id: 'accounts', label: 'Accounts', icon: },\n { id: 'deposits', label: 'Deposits', icon: },\n { id: 'funds', label: 'Funds', icon: },\n];\n\nexport const FluidTabs: FC = ({\n tabs = DEFAULT_TABS,\n defaultActive = tabs[0]?.id,\n onChange,\n}) => {\n const [active, setActive] = useState(defaultActive);\n\n const handleChange = (id: string) => {\n setActive(id);\n onChange?.(id);\n };\n\n return (\n
\n {tabs.map((tab) => {\n const isActive = active === tab.id;\n\n return (\n handleChange(tab.id)}\n className=\"group relative rounded-full px-3 py-2.5 outline-none sm:px-4 sm:py-3.5\"\n >\n {isActive && (\n \n )}\n\n \n \n {tab.icon}\n \n\n \n {tab.label}\n \n \n \n );\n })}\n
\n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "fluid-tabs-base", "type": "registry:component", "title": "Fluid Tabs (base)", "description": "Theme-ready base variant of A fluid, spring-animated tab component with floating active indicator and icon scaling..", "dependencies": [ "motion", "react-icons" ], "files": [ { "path": "components/watermelon/fluid-tabs.tsx", "type": "registry:component", "content": "'use client';\n\nimport { useState, type ReactNode, type FC } from 'react';\nimport { motion } from 'motion/react';\nimport { BiSolidPieChartAlt2 } from 'react-icons/bi';\nimport { FaInbox, FaLandmark } from 'react-icons/fa';\n\nexport interface TabItem {\n id: string;\n label: string;\n icon: ReactNode;\n}\n\ninterface FluidTabsProps {\n tabs?: TabItem[];\n defaultActive?: string;\n onChange?: (id: string) => void;\n}\n\nconst DEFAULT_TABS: TabItem[] = [\n { id: 'accounts', label: 'Accounts', icon: },\n { id: 'deposits', label: 'Deposits', icon: },\n { id: 'funds', label: 'Funds', icon: },\n];\n\nexport const FluidTabs: FC = ({\n tabs = DEFAULT_TABS,\n defaultActive = tabs[0]?.id,\n onChange,\n}) => {\n const [active, setActive] = useState(defaultActive);\n\n const handleChange = (id: string) => {\n setActive(id);\n onChange?.(id);\n };\n\n return (\n
\n {tabs.map((tab) => {\n const isActive = active === tab.id;\n\n return (\n handleChange(tab.id)}\n className=\"group relative rounded-lg px-3 py-2.5 outline-none sm:px-4 sm:py-3.5\"\n >\n {isActive && (\n \n )}\n\n \n \n {tab.icon}\n \n\n \n {tab.label}\n \n \n \n );\n })}\n
\n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "fractional-picker", "type": "registry:component", "title": "Fractional Picker", "description": "A smooth draggable ruler-style picker for selecting numeric values with spring snapping.", "dependencies": [ "framer-motion" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/watermelon/fractional-picker.tsx", "type": "registry:component", "content": "'use client';\n\nimport { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport {\n motion,\n useMotionValue,\n useTransform,\n animate,\n MotionValue,\n} from 'framer-motion';\nimport { cn } from '@/lib/utils';\n\ninterface RulerItemProps {\n value: number;\n x: MotionValue;\n itemWidth: number;\n max: number;\n}\n\nfunction RulerItem({ value, x, itemWidth, max }: RulerItemProps) {\n const distance = useTransform(x, (latest) => {\n const itemPos = value * itemWidth;\n return Math.abs(itemPos + latest);\n });\n\n const opacity = useTransform(distance, [0, itemWidth], [1, 0.3]);\n const scale = useTransform(distance, [0, itemWidth * 0.8], [1.1, 0.9]);\n\n return (\n
\n
\n \n {value}\n \n\n
\n
\n
\n {value !== max &&\n Array.from({ length: 4 }).map((_, i) => (\n \n ))}\n
\n
\n
\n
\n );\n}\n\nexport function FractionalPicker({\n min = 0,\n max = 20,\n defaultValue = 0,\n itemWidth = 80,\n onChange,\n className,\n}: any) {\n const containerRef = useRef(null);\n const [containerWidth, setContainerWidth] = useState(0);\n\n const x = useMotionValue(-defaultValue * itemWidth);\n const [activeValue, setActiveValue] = useState(defaultValue);\n\n const snap = () => {\n const currentX = x.get();\n console.log(currentX)\n const closestValue = Math.round(currentX / itemWidth) * itemWidth;\n animate(x, closestValue, {\n type: 'spring',\n stiffness: 400,\n damping: 40,\n });\n };\n\n useEffect(() => {\n return x.on('change', (latest) => {\n const val = Math.abs(Math.round(latest / itemWidth));\n if (val !== activeValue && val >= min && val <= max) {\n setActiveValue(val);\n onChange?.(val);\n }\n });\n }, [x, itemWidth, activeValue, onChange, min, max]);\n\n useLayoutEffect(() => {\n if (!containerRef.current) return;\n\n const updateWidth = () => {\n if (containerRef.current) {\n setContainerWidth(containerRef.current.offsetWidth);\n }\n };\n\n updateWidth();\n window.addEventListener('resize', updateWidth);\n return () => window.removeEventListener('resize', updateWidth);\n }, []);\n\n return (\n \n
\n \n
\n
\n\n \n {Array.from({ length: max - min + 1 }, (_, i) => (\n \n ))}\n \n\n
\n
\n
\n );\n}\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "fractional-picker-base", "type": "registry:component", "title": "Fractional Picker (base)", "description": "Theme-ready base variant of A smooth draggable ruler-style picker for selecting numeric values with spring snapping..", "dependencies": [ "framer-motion" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/watermelon/fractional-picker.tsx", "type": "registry:component", "content": "'use client';\n\nimport { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport {\n motion,\n useMotionValue,\n useTransform,\n animate,\n MotionValue,\n} from 'framer-motion';\nimport { cn } from '@/lib/utils';\n\ninterface RulerItemProps {\n value: number;\n x: MotionValue;\n itemWidth: number;\n max: number;\n}\n\nfunction RulerItem({ value, x, itemWidth, max }: RulerItemProps) {\n const distance = useTransform(x, (latest) => {\n const itemPos = value * itemWidth;\n return Math.abs(itemPos + latest);\n });\n\n const opacity = useTransform(distance, [0, itemWidth], [1, 0.3]);\n const scale = useTransform(distance, [0, itemWidth * 0.8], [1.1, 0.9]);\n\n return (\n
\n
\n \n {value}\n \n\n
\n
\n
\n {value !== max &&\n Array.from({ length: 4 }).map((_, i) => (\n \n ))}\n
\n
\n
\n
\n );\n}\n\nexport function FractionalPicker({\n min = 0,\n max = 20,\n defaultValue = 0,\n itemWidth = 80,\n onChange,\n className,\n}: any) {\n const containerRef = useRef(null);\n const [containerWidth, setContainerWidth] = useState(0);\n\n const x = useMotionValue(-defaultValue * itemWidth);\n const [activeValue, setActiveValue] = useState(defaultValue);\n\n const snap = () => {\n const currentX = x.get();\n const closestValue = Math.round(currentX / itemWidth) * itemWidth;\n animate(x, closestValue, {\n type: 'spring',\n stiffness: 400,\n damping: 40,\n });\n };\n\n useEffect(() => {\n return x.on('change', (latest) => {\n const val = Math.abs(Math.round(latest / itemWidth));\n if (val !== activeValue && val >= min && val <= max) {\n setActiveValue(val);\n onChange?.(val);\n }\n });\n }, [x, itemWidth, activeValue, onChange, min, max]);\n\n useLayoutEffect(() => {\n if (!containerRef.current) return;\n\n const updateWidth = () => {\n if (containerRef.current) {\n setContainerWidth(containerRef.current.offsetWidth);\n }\n };\n\n updateWidth();\n window.addEventListener('resize', updateWidth);\n return () => window.removeEventListener('resize', updateWidth);\n }, []);\n\n return (\n \n
\n \n
\n
\n\n \n {Array.from({ length: max - min + 1 }, (_, i) => (\n \n ))}\n \n\n
\n
\n
\n );\n}\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "frequency-selector", "type": "registry:component", "title": "Frequency Selector", "description": "Select recurring time intervals using animated tabs and contextual sub options.", "dependencies": [ "lucide-react", "motion" ], "files": [ { "path": "components/watermelon/frequency-selector.tsx", "type": "registry:component", "content": "'use client';\n\nimport React, { useState } from 'react';\nimport { motion, AnimatePresence, LayoutGroup } from 'motion/react';\nimport { Check, ChevronRight } from 'lucide-react';\n\n/* ---------- Types ---------- */\nexport type FrequencyType = 'Daily' | 'Weekly' | 'Monthly' | 'Yearly';\n\nexport interface FrequencyData {\n type: FrequencyType;\n subValue?: string;\n}\n\ninterface FrequencySelectorProps {\n value: FrequencyData;\n onChange: (data: FrequencyData) => void;\n className?: string;\n}\n\n/* ---------- Motion Config ---------- */\nconst smoothSpring = {\n type: 'spring',\n bounce: 0.3,\n duration: 0.7,\n} as const;\n\n/* ---------- Data ---------- */\nconst FREQUENCIES: FrequencyType[] = ['Daily', 'Weekly', 'Monthly', 'Yearly'];\n\nconst SUB_OPTIONS: Record = {\n Daily: [],\n Weekly: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],\n Monthly: Array.from({ length: 31 }, (_, i) => (i + 1).toString()),\n Yearly: [\n 'Jan',\n 'Feb',\n 'Mar',\n 'Apr',\n 'May',\n 'Jun',\n 'Jul',\n 'Aug',\n 'Sep',\n 'Oct',\n 'Nov',\n 'Dec',\n ],\n};\n\nexport const FrequencySelector: React.FC = ({\n value,\n onChange,\n className = '',\n}) => {\n const [isOpen, setIsOpen] = useState(false);\n const [tempType, setTempType] = useState(value.type);\n const [tempSubValue, setTempSubValue] = useState(\n value.subValue,\n );\n\n const handleOpen = () => {\n setTempType(value.type);\n setTempSubValue(value.subValue || SUB_OPTIONS[value.type][0]);\n setIsOpen(true);\n };\n\n const handleConfirm = () => {\n onChange({\n type: tempType,\n subValue: tempType === 'Daily' ? undefined : tempSubValue,\n });\n setIsOpen(false);\n };\n\n return (\n \n \n \n {!isOpen ? (\n /* ---------- CLOSED STATE ---------- */\n \n \n Frequency\n \n\n \n \n {value.type}\n {value.subValue ? `, ${value.subValue}` : ''}\n \n\n \n \n \n ) : (\n /* ---------- OPEN STATE ---------- */\n \n {/* Top Row */}\n
\n \n {FREQUENCIES.map((type) => (\n {\n setTempType(type);\n setTempSubValue(SUB_OPTIONS[type][0]);\n }}\n className=\"relative flex h-full flex-none items-center justify-center px-4 text-xs font-bold sm:flex-1 sm:min-w-fit sm:px-6 sm:text-[15px]\"\n >\n {tempType === type && (\n \n )}\n\n {type}\n \n ))}\n \n\n \n \n \n
\n\n {/* Sub Options */}\n \n {SUB_OPTIONS[tempType].length > 0 && (\n \n {SUB_OPTIONS[tempType].length > 0 && (\n \n {SUB_OPTIONS[tempType].map((option) => (\n setTempSubValue(option)}\n className=\"relative flex h-8 items-center justify-center rounded-full text-[10px] font-bold sm:h-9 sm:text-sm\"\n >\n {tempSubValue === option && (\n \n )}\n\n {option}\n \n ))}\n \n )}\n \n )}\n \n \n )}\n \n
\n \n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "frequency-selector-base", "type": "registry:component", "title": "Frequency Selector (base)", "description": "Theme-ready base variant of Select recurring time intervals using animated tabs and contextual sub options..", "dependencies": [ "lucide-react", "motion" ], "files": [ { "path": "components/watermelon/frequency-selector.tsx", "type": "registry:component", "content": "'use client';\n\nimport React, { useState } from 'react';\nimport { motion, AnimatePresence, LayoutGroup } from 'motion/react';\nimport { Check, ChevronRight } from 'lucide-react';\n\nexport type FrequencyType = 'Daily' | 'Weekly' | 'Monthly' | 'Yearly';\n\nexport interface FrequencyData {\n type: FrequencyType;\n subValue?: string;\n}\n\ninterface FrequencySelectorProps {\n value: FrequencyData;\n onChange: (data: FrequencyData) => void;\n className?: string;\n}\n\nconst smoothSpring = {\n type: 'spring',\n bounce: 0.3,\n duration: 0.7,\n} as const;\n\nconst FREQUENCIES: FrequencyType[] = ['Daily', 'Weekly', 'Monthly', 'Yearly'];\n\nconst SUB_OPTIONS: Record = {\n Daily: [],\n Weekly: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],\n Monthly: Array.from({ length: 31 }, (_, i) => (i + 1).toString()),\n Yearly: [\n 'Jan',\n 'Feb',\n 'Mar',\n 'Apr',\n 'May',\n 'Jun',\n 'Jul',\n 'Aug',\n 'Sep',\n 'Oct',\n 'Nov',\n 'Dec',\n ],\n};\n\nexport const FrequencySelector: React.FC = ({\n value,\n onChange,\n className = '',\n}) => {\n const [isOpen, setIsOpen] = useState(false);\n const [tempType, setTempType] = useState(value.type);\n const [tempSubValue, setTempSubValue] = useState(\n value.subValue,\n );\n\n const handleOpen = () => {\n setTempType(value.type);\n setTempSubValue(value.subValue || SUB_OPTIONS[value.type][0]);\n setIsOpen(true);\n };\n\n const handleConfirm = () => {\n onChange({\n type: tempType,\n subValue: tempType === 'Daily' ? undefined : tempSubValue,\n });\n setIsOpen(false);\n };\n\n return (\n \n \n \n {!isOpen ? (\n \n \n Frequency\n \n\n \n \n {value.type}\n {value.subValue ? `, ${value.subValue}` : ''}\n \n\n \n \n \n ) : (\n \n
\n \n {FREQUENCIES.map((type) => (\n {\n setTempType(type);\n setTempSubValue(SUB_OPTIONS[type][0]);\n }}\n className=\"text-foreground relative flex h-full flex-none items-center justify-center px-4 text-xs font-bold sm:flex-1 sm:min-w-fit sm:px-6 sm:text-[15px]\"\n >\n {tempType === type && (\n \n )}\n\n {type}\n \n ))}\n \n\n \n \n \n
\n\n \n {SUB_OPTIONS[tempType].length > 0 && (\n \n \n {SUB_OPTIONS[tempType].map((option) => (\n setTempSubValue(option)}\n className=\"text-foreground relative flex h-8 items-center justify-center rounded-lg text-[10px] font-bold sm:h-9 sm:text-sm\"\n >\n {tempSubValue === option && (\n \n )}\n\n {option}\n \n ))}\n \n \n )}\n \n \n )}\n \n
\n \n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "fund-widget", "type": "registry:component", "title": "Fund Widget", "description": "An animated fund widget featuring smooth 3D transforms and progressive blur effects.", "dependencies": [ "motion", "react-icons" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/watermelon/fund-widget.tsx", "type": "registry:component", "content": "import React, { useState } from 'react';\nimport {\n motion,\n MotionConfig,\n useMotionValue,\n useTransform,\n useMotionTemplate,\n type Transition,\n} from 'motion/react';\nimport { FaArrowUp } from 'react-icons/fa6';\n\nexport interface FundItem {\n id: string;\n label: string;\n value: string;\n change: string;\n}\n\ninterface FundWidgetProps {\n data?: FundItem[];\n initialIndex?: number;\n}\n\nconst DEFAULT_DATA: FundItem[] = [\n {\n id: 'stocks',\n label: 'Stocks',\n value: '2.7Cr',\n change: '12%',\n },\n {\n id: 'funds',\n label: 'Funds',\n value: '3.5Cr',\n change: '8%',\n },\n {\n id: 'deposits',\n label: 'Deposits',\n value: '1.2Cr',\n change: '6%',\n },\n];\n\nconst CARD_HEIGHT = 320;\nconst DRAG_BUFFER = 40;\nconst VELOCITY_THRESHOLD = 0;\n\nconst SPRING_OPTIONS: Transition = {\n type: 'spring',\n stiffness: 300,\n damping: 40,\n};\n\nconst FundCard = ({ item, i, y }: any) => {\n const cardOffset = i * CARD_HEIGHT;\n\n const rotateX = useTransform(\n y,\n [\n -(cardOffset + CARD_HEIGHT),\n -cardOffset,\n -(cardOffset - CARD_HEIGHT),\n ],\n [-25, 0, 25],\n { clamp: true },\n );\n\n const DEAD_ZONE = CARD_HEIGHT * 0.25;\n\n const blur = useTransform(\n y,\n [\n -(cardOffset + CARD_HEIGHT),\n -(cardOffset + DEAD_ZONE),\n -cardOffset,\n -(cardOffset - DEAD_ZONE),\n -(cardOffset - CARD_HEIGHT),\n ],\n [8, 0, 0, 0, 8],\n { clamp: true },\n );\n\n const filter = useMotionTemplate`blur(${blur}px)`;\n\n return (\n \n

\n {item.value}\n

\n\n

\n {item.change}\n \n

\n\n

\n {item.label}\n

\n \n );\n};\n\nexport const FundWidget: React.FC = ({\n data = DEFAULT_DATA,\n initialIndex = 0,\n}) => {\n const [index, setIndex] = useState(initialIndex);\n\n const y = useMotionValue(-(initialIndex * CARD_HEIGHT));\n\n const handleDragEnd = (_: any, info: any) => {\n const offset = info.offset.y;\n const velocity = info.velocity.y;\n\n if (offset < -DRAG_BUFFER || velocity < -VELOCITY_THRESHOLD) {\n setIndex((prev) => Math.min(prev + 1, data.length - 1));\n } else if (offset > DRAG_BUFFER || velocity > VELOCITY_THRESHOLD) {\n setIndex((prev) => Math.max(prev - 1, 0));\n }\n };\n\n return (\n
\n
\n \n
\n
\n
\n
\n\n
\n \n {data.map((item, i) => (\n \n ))}\n \n\n
\n {data.map((_, i) => (\n setIndex(i)}\n className=\"py-1 focus:outline-none\"\n >\n \n \n ))}\n
\n
\n
\n \n
\n
\n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "fund-widget-base", "type": "registry:component", "title": "Fund Widget (base)", "description": "Theme-ready base variant of An animated fund widget featuring smooth 3D transforms and progressive blur effects..", "dependencies": [ "motion", "react-icons" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/watermelon/fund-widget.tsx", "type": "registry:component", "content": "import React, { useState } from 'react';\nimport {\n motion,\n MotionConfig,\n useMotionValue,\n useTransform,\n useMotionTemplate,\n type Transition,\n} from 'motion/react';\nimport { FaArrowUp } from 'react-icons/fa6';\nimport { cn } from '@/lib/utils';\n\nexport interface FundItem {\n id: string;\n label: string;\n value: string;\n change: string;\n}\n\ninterface FundWidgetProps {\n data?: FundItem[];\n initialIndex?: number;\n}\n\nconst DEFAULT_DATA: FundItem[] = [\n {\n id: 'stocks',\n label: 'Stocks',\n value: '2.7Cr',\n change: '12%',\n },\n {\n id: 'funds',\n label: 'Funds',\n value: '3.5Cr',\n change: '8%',\n },\n {\n id: 'deposits',\n label: 'Deposits',\n value: '1.2Cr',\n change: '6%',\n },\n];\n\nconst CARD_HEIGHT = 320;\nconst DRAG_BUFFER = 40;\nconst VELOCITY_THRESHOLD = 0;\n\nconst SPRING_OPTIONS: Transition = {\n type: 'spring',\n stiffness: 300,\n damping: 40,\n};\n\nconst FundCard = ({ item, i, y }: any) => {\n const cardOffset = i * CARD_HEIGHT;\n\n const rotateX = useTransform(\n y,\n [-(cardOffset + CARD_HEIGHT), -cardOffset, -(cardOffset - CARD_HEIGHT)],\n [-25, 0, 25],\n { clamp: true },\n );\n\n const DEAD_ZONE = CARD_HEIGHT * 0.25;\n\n const blur = useTransform(\n y,\n [\n -(cardOffset + CARD_HEIGHT),\n -(cardOffset + DEAD_ZONE),\n -cardOffset,\n -(cardOffset - DEAD_ZONE),\n -(cardOffset - CARD_HEIGHT),\n ],\n [8, 0, 0, 0, 8],\n { clamp: true },\n );\n\n const filter = useMotionTemplate`blur(${blur}px)`;\n\n return (\n \n

\n {item.value}\n

\n\n

\n {item.change}\n \n

\n\n

\n {item.label}\n

\n \n );\n};\n\nexport const FundWidget: React.FC = ({\n data = DEFAULT_DATA,\n initialIndex = 0,\n}) => {\n const [index, setIndex] = useState(initialIndex);\n\n const y = useMotionValue(-(initialIndex * CARD_HEIGHT));\n\n const handleDragEnd = (_: any, info: any) => {\n const offset = info.offset.y;\n const velocity = info.velocity.y;\n\n if (offset < -DRAG_BUFFER || velocity < -VELOCITY_THRESHOLD) {\n setIndex((prev) => Math.min(prev + 1, data.length - 1));\n } else if (offset > DRAG_BUFFER || velocity > VELOCITY_THRESHOLD) {\n setIndex((prev) => Math.max(prev - 1, 0));\n }\n };\n\n return (\n
\n
\n \n
\n
\n
\n
\n\n
\n \n {data.map((item, i) => (\n \n ))}\n \n\n
\n {data.map((_, i) => (\n setIndex(i)}\n className=\"py-1 focus:outline-none\"\n >\n \n \n ))}\n
\n
\n
\n \n
\n
\n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "gooey-menu", "type": "registry:component", "title": "Gooey Menu", "description": "An interactive Next.js logo with expandable tooltip that shows framework information.", "dependencies": [ "motion" ], "files": [ { "path": "components/watermelon/gooey-menu.tsx", "type": "registry:component", "content": "'use client';\n\nimport { useState } from 'react';\nimport { motion, AnimatePresence, type Variants } from 'motion/react';\n\ninterface GooeyMenuProps {\n data: GooeyMenuData[];\n}\n\ninterface GooeyMenuData {\n key: string;\n label: string;\n value: string;\n labelClass: string;\n valueClass: string;\n}\n\nconst DIMENSIONS = {\n min: 40,\n max: 200,\n};\n\nconst DEFAULT_DATA: GooeyMenuData[] = [\n {\n key: 'title',\n label: 'Next.js',\n value: 'v13.4.8',\n labelClass: 'text-sm font-medium text-neutral-500',\n valueClass: 'text-sm text-neutral-500',\n },\n {\n key: 'errors',\n label: 'Errors',\n value: '20',\n labelClass: 'text-sm font-medium',\n valueClass:\n 'text-sm flex items-center justify-center rounded-full border border-[#EB5757]/10 bg-[#EB5757]/15 p-1 px-2 font-mono text-red-500 bg-red-500/20',\n },\n {\n key: 'route',\n label: 'Route',\n value: 'Static',\n labelClass: 'text-sm font-medium',\n valueClass: 'text-sm text-[#a09f9f]',\n },\n];\n\nconst menuVariants: Variants = {\n closed: {\n y: 0,\n borderRadius: 20,\n width: DIMENSIONS.min,\n height: DIMENSIONS.min,\n z: -10,\n transition: {\n // duration: 0.4,\n // ease: [0.22, 1, 0.36, 1],\n type: 'spring',\n stiffness: 300,\n damping: 30,\n y: { delay: 0.15 },\n width: { delay: 0 },\n height: { delay: 0 },\n },\n },\n open: {\n y: -50,\n borderRadius: 10,\n width: DIMENSIONS.max,\n height: 'auto',\n transition: {\n // duration: 0.4,\n // ease: [0.22, 1, 0.36, 1],\n type: 'spring',\n stiffness: 300,\n damping: 30,\n width: { delay: 0.15 },\n height: { delay: 0.15 },\n borderRadius: { delay: 0.15 },\n },\n },\n};\n\nexport function GooeyMenu({ data = DEFAULT_DATA }: GooeyMenuProps) {\n const [isOpen, setIsOpen] = useState(false);\n\n return (\n
\n \n \n \n \n \n \n \n \n \n\n
\n setIsOpen(true)}\n onMouseLeave={() => setIsOpen(false)}\n onClick={() => setIsOpen(!isOpen)}\n className=\"relative z-20 flex size-10 cursor-pointer items-center justify-center rounded-full border-none bg-black dark:bg-neutral-800\"\n >\n \n \n \n \n \n\n \n {isOpen && (\n \n \n {data.map((item, index) => (\n \n {item.label}\n {item.value}\n \n ))}\n \n \n )}\n \n
\n
\n );\n}\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "gooey-menu-base", "type": "registry:component", "title": "Gooey Menu (base)", "description": "Theme-ready base variant of An interactive Next.js logo with expandable tooltip that shows framework information..", "dependencies": [ "motion" ], "files": [ { "path": "components/watermelon/gooey-menu.tsx", "type": "registry:component", "content": "'use client';\n\nimport { useState } from 'react';\nimport { motion, AnimatePresence, type Variants } from 'motion/react';\n\ninterface GooeyMenuProps {\n data: GooeyMenuData[];\n}\n\ninterface GooeyMenuData {\n key: string;\n label: string;\n value: string;\n labelClass: string;\n valueClass: string;\n}\n\nconst DIMENSIONS = {\n min: 40,\n max: 200,\n};\n\nconst DEFAULT_DATA: GooeyMenuData[] = [\n {\n key: 'title',\n label: 'Next.js',\n value: 'v13.4.8',\n labelClass: 'text-sm font-medium text-muted-foreground',\n valueClass: 'text-sm text-muted-foreground',\n },\n {\n key: 'errors',\n label: 'Errors',\n value: '20',\n labelClass: 'text-sm font-medium',\n valueClass:\n 'text-sm flex items-center justify-center rounded-lg border border-destructive/20 bg-destructive/10 p-1 px-2 font-mono text-destructive bg-destructive/20',\n },\n {\n key: 'route',\n label: 'Route',\n value: 'Static',\n labelClass: 'text-sm font-medium',\n valueClass: 'text-sm text-muted-foreground',\n },\n];\n\nconst menuVariants: Variants = {\n closed: {\n y: 0,\n borderRadius: 20,\n width: DIMENSIONS.min,\n height: DIMENSIONS.min,\n z: -10,\n transition: {\n type: 'spring',\n stiffness: 300,\n damping: 30,\n y: { delay: 0.15 },\n width: { delay: 0 },\n height: { delay: 0 },\n },\n },\n open: {\n y: -50,\n borderRadius: 10,\n width: DIMENSIONS.max,\n height: 'auto',\n transition: {\n type: 'spring',\n stiffness: 300,\n damping: 30,\n width: { delay: 0.15 },\n height: { delay: 0.15 },\n borderRadius: { delay: 0.15 },\n },\n },\n};\n\nexport function GooeyMenu({ data = DEFAULT_DATA }: GooeyMenuProps) {\n const [isOpen, setIsOpen] = useState(false);\n\n return (\n
\n \n \n \n \n \n \n \n \n \n\n
\n setIsOpen(true)}\n onMouseLeave={() => setIsOpen(false)}\n onClick={() => setIsOpen(!isOpen)}\n className=\"bg-muted text-muted-foreground border-border relative z-20 flex size-10 cursor-pointer items-center justify-center rounded-lg border border-none\"\n >\n \n \n \n \n \n\n \n {isOpen && (\n \n \n {data.map((item, index) => (\n \n {item.label}\n {item.value}\n \n ))}\n \n \n )}\n \n
\n
\n );\n}\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "inline-action", "type": "registry:component", "title": "Inline Action", "description": "Inline actions enabling quick edits without leaving current context view.", "dependencies": [ "lucide-react", "motion" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/watermelon/inline-action.tsx", "type": "registry:component", "content": "import React, { useState, useEffect } from 'react';\nimport {\n motion,\n AnimatePresence,\n MotionConfig,\n type Transition,\n} from 'motion/react';\nimport { cn } from '@/lib/utils';\nimport { Check } from 'lucide-react';\n\ninterface InlineActionProps {\n label: string;\n icon: React.ReactNode;\n actionText: string;\n onAction: () => Promise;\n theme?: 'light' | 'dark' | 'system';\n className?: string;\n}\n\nexport const InlineAction: React.FC = ({\n label,\n icon,\n actionText,\n onAction,\n theme = 'system',\n className,\n}) => {\n const [status, setStatus] = useState<'idle' | 'loading' | 'success'>('idle');\n\n const handleTrigger = async () => {\n if (status !== 'idle') return;\n setStatus('loading');\n try {\n await onAction();\n setStatus('success');\n } catch (error) {\n setStatus('idle');\n }\n };\n\n useEffect(() => {\n if (status === 'success') {\n const timer = setTimeout(() => setStatus('idle'), 2000);\n return () => clearTimeout(timer);\n }\n }, [status]);\n\n const springTransition: Transition = {\n type: 'spring',\n stiffness: 400,\n damping: 35,\n mass: 1,\n };\n\n const forcedTheme =\n theme === 'dark' ? 'dark' : theme === 'light' ? 'light' : '';\n\n return (\n \n
\n
\n
\n
{icon}
\n
\n \n {label}\n \n
\n \n \n \n {status === 'idle' && (\n \n {actionText}\n \n )}\n\n {status === 'loading' && (\n \n
\n \n
\n \n )}\n\n {status === 'success' && (\n \n \n\n \n \n )}\n \n \n \n
\n
\n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "inline-action-base", "type": "registry:component", "title": "Inline Action (base)", "description": "Theme-ready base variant of Inline actions enabling quick edits without leaving current context view..", "dependencies": [ "lucide-react", "motion" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/watermelon/inline-action.tsx", "type": "registry:component", "content": "import React, { useState, useEffect } from 'react';\nimport {\n motion,\n AnimatePresence,\n MotionConfig,\n type Transition,\n} from 'motion/react';\nimport { cn } from '@/lib/utils';\nimport { Check } from 'lucide-react';\n\ninterface InlineActionProps {\n label: string;\n icon: React.ReactNode;\n actionText: string;\n onAction: () => Promise;\n theme?: 'light' | 'dark' | 'system';\n className?: string;\n}\n\nexport const InlineAction: React.FC = ({\n label,\n icon,\n actionText,\n onAction,\n theme = 'system',\n className,\n}) => {\n const [status, setStatus] = useState<'idle' | 'loading' | 'success'>('idle');\n\n const handleTrigger = async () => {\n if (status !== 'idle') return;\n setStatus('loading');\n try {\n await onAction();\n setStatus('success');\n } catch (error) {\n setStatus('idle');\n }\n };\n\n useEffect(() => {\n if (status === 'success') {\n const timer = setTimeout(() => setStatus('idle'), 2000);\n return () => clearTimeout(timer);\n }\n }, [status]);\n\n const springTransition: Transition = {\n type: 'spring',\n stiffness: 400,\n damping: 35,\n mass: 1,\n };\n\n const forcedTheme =\n theme === 'dark' ? 'dark' : theme === 'light' ? 'light' : '';\n\n return (\n \n
\n
\n
\n
{icon}
\n
\n \n {label}\n \n
\n \n \n \n {status === 'idle' && (\n \n {actionText}\n \n )}\n\n {status === 'loading' && (\n \n
\n \n
\n \n )}\n\n {status === 'success' && (\n \n \n\n \n \n )}\n \n \n \n
\n
\n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "inline-edit", "type": "registry:component", "title": "Inline Edit", "description": "A sleek, interactive editor that transitions seamlessly between display and edit modes using smooth layout animations.", "dependencies": [ "@hugeicons/core-free-icons", "@hugeicons/react", "motion" ], "files": [ { "path": "components/watermelon/inline-edit.tsx", "type": "registry:component", "content": "'use client';\n\nimport { useState, useId, type FC } from 'react';\nimport { motion, AnimatePresence, type Transition } from 'motion/react';\nimport { HugeiconsIcon } from '@hugeicons/react';\nimport {\n AlarmClockFreeIcons,\n Calendar03Icon,\n Cancel01Icon,\n Edit03Icon,\n Link01Icon,\n Menu02Icon,\n Tick02Icon,\n Ticket02Icon,\n} from '@hugeicons/core-free-icons/index';\n\ninterface EditableRowProps {\n icon: any;\n label: string;\n value: string;\n secondaryValue?: string;\n onSave?: (value: string) => void;\n onSaveRange?: (v1: string, v2: string) => void;\n type?: 'text' | 'time' | 'url';\n multiline?: boolean;\n}\n\nexport interface EventData {\n event: string;\n date: string;\n start: string;\n end: string;\n location: string;\n url: string;\n desc: string;\n}\n\ninterface InlineEditCardProps {\n data: EventData;\n onDataChange: (data: EventData) => void;\n title?: string;\n}\n\nconst spring: Transition = {\n type: 'spring',\n stiffness: 420,\n damping: 28,\n mass: 0.6,\n};\n\nconst EditableRow: FC = ({\n icon,\n label,\n value,\n secondaryValue,\n onSave,\n onSaveRange,\n type = 'text',\n multiline = false,\n}) => {\n const [editing, setEditing] = useState(false);\n const [v1, setV1] = useState(value);\n const [v2, setV2] = useState(secondaryValue || '');\n const inputId = useId();\n const secondaryInputId = useId();\n const isTime = type === 'time';\n\n const handleSave = () => {\n if (isTime && onSaveRange) onSaveRange(v1, v2);\n else if (onSave) onSave(v1);\n setEditing(false);\n };\n\n return (\n \n \n \n \n {label}\n \n
\n\n \n \n \n {isTime ? (\n
\n setV1(e.target.value)}\n className=\"h-10 w-full rounded-xl border border-transparent bg-transparent text-[16px] leading-relaxed font-medium text-gray-900 outline-none focus:border-gray-200 dark:text-gray-100 dark:focus:border-zinc-800\"\n />\n setV2(e.target.value)}\n className=\"h-10 w-full rounded-xl border border-transparent bg-transparent text-[16px] leading-relaxed font-medium text-gray-900 outline-none focus:border-gray-200 dark:text-gray-100 dark:focus:border-zinc-800\"\n />\n
\n ) : multiline ? (\n setV1(e.target.value)}\n className=\"w-full resize-none rounded-xl bg-transparent px-0 py-0 text-[16px] leading-relaxed font-medium text-gray-900 outline-none dark:text-gray-100\"\n />\n ) : (\n setV1(e.target.value)}\n onKeyDown={(e) => e.key === 'Enter' && handleSave()}\n className=\"h-10 w-full rounded-xl bg-transparent text-[15px] font-medium text-gray-900 outline-none sm:text-base dark:text-gray-100\"\n />\n )}\n\n
\n \n {editing ? (\n \n \n \n \n\n setEditing(false)}\n className=\"flex size-7 items-center justify-center rounded-lg bg-gray-900 text-white dark:bg-zinc-800\"\n >\n \n \n \n ) : (\n setEditing(true)}\n >\n \n \n )}\n \n
\n \n \n
\n \n );\n};\n\nexport const InlineEditCard: FC = ({\n data,\n onDataChange,\n title = 'Update Details',\n}) => {\n return (\n
\n
\n
\n

\n {title}\n

\n
\n\n
\n onDataChange({ ...data, event: v })}\n />\n onDataChange({ ...data, date: v })}\n />\n onDataChange({ ...data, start: a, end: b })}\n />\n onDataChange({ ...data, url: v })}\n />\n
\n onDataChange({ ...data, desc: v })}\n />\n
\n
\n
\n
\n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "inline-edit-base", "type": "registry:component", "title": "Inline Edit (base)", "description": "Theme-ready base variant of A sleek, interactive editor that transitions seamlessly between display and edit modes using smooth layout animations..", "dependencies": [ "@hugeicons/core-free-icons", "@hugeicons/react", "motion" ], "files": [ { "path": "components/watermelon/inline-edit.tsx", "type": "registry:component", "content": "'use client';\n\nimport { useState, useId, type FC } from 'react';\nimport { motion, AnimatePresence, type Transition } from 'motion/react';\nimport { HugeiconsIcon } from '@hugeicons/react';\nimport {\n AlarmClockFreeIcons,\n Calendar03Icon,\n Cancel01Icon,\n Edit03Icon,\n Link01Icon,\n Menu02Icon,\n Tick02Icon,\n Ticket02Icon,\n} from '@hugeicons/core-free-icons/index';\n\ninterface EditableRowProps {\n icon: any;\n label: string;\n value: string;\n secondaryValue?: string;\n onSave?: (value: string) => void;\n onSaveRange?: (v1: string, v2: string) => void;\n type?: 'text' | 'time' | 'url';\n multiline?: boolean;\n}\n\nexport interface EventData {\n event: string;\n date: string;\n start: string;\n end: string;\n location: string;\n url: string;\n desc: string;\n}\n\ninterface InlineEditCardProps {\n data: EventData;\n onDataChange: (data: EventData) => void;\n title?: string;\n}\n\nconst spring: Transition = {\n type: 'spring',\n stiffness: 420,\n damping: 28,\n mass: 0.6,\n};\n\nconst EditableRow: FC = ({\n icon,\n label,\n value,\n secondaryValue,\n onSave,\n onSaveRange,\n type = 'text',\n multiline = false,\n}) => {\n const [editing, setEditing] = useState(false);\n const [v1, setV1] = useState(value);\n const [v2, setV2] = useState(secondaryValue || '');\n const inputId = useId();\n const secondaryInputId = useId();\n const isTime = type === 'time';\n\n const handleSave = () => {\n if (isTime && onSaveRange) onSaveRange(v1, v2);\n else if (onSave) onSave(v1);\n setEditing(false);\n };\n\n return (\n \n \n \n \n {label}\n \n
\n\n
\n \n \n {isTime ? (\n
\n setV1(e.target.value)}\n className=\"text-foreground focus:border-border h-10 w-full rounded-lg border border-transparent bg-transparent text-[16px] leading-relaxed font-medium outline-none\"\n />\n setV2(e.target.value)}\n className=\"text-foreground focus:border-border h-10 w-full rounded-lg border border-transparent bg-transparent text-[16px] leading-relaxed font-medium outline-none\"\n />\n
\n ) : multiline ? (\n setV1(e.target.value)}\n className=\"text-foreground w-full resize-none rounded-lg bg-transparent px-0 py-0 text-[16px] leading-relaxed font-medium outline-none\"\n />\n ) : (\n setV1(e.target.value)}\n onKeyDown={(e) => e.key === 'Enter' && handleSave()}\n className=\"text-foreground h-10 w-full rounded-lg bg-transparent text-[15px] font-medium outline-none sm:text-base\"\n />\n )}\n\n
\n \n {editing ? (\n \n \n \n \n\n setEditing(false)}\n className=\"bg-muted text-foreground flex size-7 items-center justify-center rounded-lg\"\n >\n \n \n \n ) : (\n setEditing(true)}\n >\n \n \n )}\n \n
\n \n \n
\n \n );\n};\n\nexport const InlineEditCard: FC = ({\n data,\n onDataChange,\n title = 'Update Details',\n}) => {\n return (\n
\n
\n
\n

\n {title}\n

\n
\n\n
\n onDataChange({ ...data, event: v })}\n />\n onDataChange({ ...data, date: v })}\n />\n onDataChange({ ...data, start: a, end: b })}\n />\n onDataChange({ ...data, url: v })}\n />\n
\n onDataChange({ ...data, desc: v })}\n />\n
\n
\n
\n
\n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "inline-overflow", "type": "registry:component", "title": "Inline Overflow", "description": "An interactive inline overflow menu that reveals additional actions with spring animations.", "dependencies": [ "motion", "react-icons" ], "files": [ { "path": "components/watermelon/inline-overflow.tsx", "type": "registry:component", "content": "'use client';\n\nimport { useState, type FC } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport { HiOutlineDotsHorizontal } from 'react-icons/hi';\nimport { IoClose } from 'react-icons/io5';\n\nexport interface InlineOverflowAction {\n label: string;\n}\n\nexport interface InlineOverflowProps {\n visibleActions: InlineOverflowAction[];\n hiddenActions: InlineOverflowAction[];\n showThemeToggle?: boolean;\n}\n\nconst Action: FC<{ label: string }> = ({ label }) => {\n return (\n \n {label}\n \n );\n};\n\nexport const InlineOverflow: FC = ({\n visibleActions,\n hiddenActions,\n}) => {\n const [open, setOpen] = useState(false);\n\n return (\n \n {visibleActions.map((action, i) => (\n \n ))}\n\n \n {open &&\n hiddenActions.map((action) => (\n \n \n \n ))}\n \n setOpen(!open)}\n whileTap={{ scale: 0.9 }}\n className=\"flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center rounded-full border border-black/5 bg-white text-neutral-600 hover:opacity-70 sm:h-12 sm:w-12 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-400\"\n transition={{ type: 'spring', bounce: 0.35, duration: 0.7 }}\n >\n \n {open ? (\n \n \n \n ) : (\n \n \n \n )}\n \n \n \n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "inline-overflow-base", "type": "registry:component", "title": "Inline Overflow (base)", "description": "Theme-ready base variant of An interactive inline overflow menu that reveals additional actions with spring animations..", "dependencies": [ "motion", "react-icons" ], "files": [ { "path": "components/watermelon/inline-overflow.tsx", "type": "registry:component", "content": "'use client';\n\nimport { useState, type FC } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport { HiOutlineDotsHorizontal } from 'react-icons/hi';\nimport { IoClose } from 'react-icons/io5';\n\nexport interface InlineOverflowAction {\n label: string;\n}\n\nexport interface InlineOverflowProps {\n visibleActions: InlineOverflowAction[];\n hiddenActions: InlineOverflowAction[];\n showThemeToggle?: boolean;\n}\n\nconst Action: FC<{ label: string }> = ({ label }) => {\n return (\n \n {label}\n \n );\n};\n\nexport const InlineOverflow: FC = ({\n visibleActions,\n hiddenActions,\n}) => {\n const [open, setOpen] = useState(false);\n\n return (\n \n {visibleActions.map((action, i) => (\n \n ))}\n\n \n {open &&\n hiddenActions.map((action) => (\n \n \n \n ))}\n \n setOpen(!open)}\n whileTap={{ scale: 0.9 }}\n className=\"flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center rounded-4xl border border-border bg-card text-muted-foreground hover:bg-accent/40 sm:h-12 sm:w-12\"\n transition={{ type: 'spring', bounce: 0.35, duration: 0.7 }}\n >\n \n {open ? (\n \n \n \n ) : (\n \n \n \n )}\n \n \n \n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "inline-table-control", "type": "registry:component", "title": "Inline Table Control", "description": "Inline controls for editing table rows without breaking user focus.", "dependencies": [ "lucide-react", "motion", "react-icons" ], "files": [ { "path": "components/watermelon/inline-table-control.tsx", "type": "registry:component", "content": "'use client';\n\nimport React, { useState } from 'react';\nimport { motion, AnimatePresence, LayoutGroup } from 'motion/react';\nimport { Pencil, X, Check } from 'lucide-react';\nimport { GoStack } from 'react-icons/go';\nimport { BsArrowUpRightSquare } from 'react-icons/bs';\nimport { FaRegCreditCard } from 'react-icons/fa6';\n\nexport interface TableItem {\n id: string;\n expense: string;\n method: string;\n amount: string;\n}\n\ninterface InlineTableControlProps {\n data: TableItem[];\n onUpdate?: (item: TableItem) => void;\n className?: string;\n}\n\nconst getIcon = (field: string) => {\n const iconClass = 'text-neutral-400 dark:text-neutral-500';\n if (field === 'expense')\n return ;\n if (field === 'method') return ;\n if (field === 'amount')\n return ;\n return null;\n};\n\nexport const InlineTableControl: React.FC = ({\n data,\n onUpdate,\n className = '',\n}) => {\n const [items, setItems] = useState(data);\n const [previousData, setPreviousData] = useState(data);\n const [editingId, setEditingId] = useState(null);\n const [editValues, setEditValues] = useState(null);\n\n if (previousData !== data) {\n setPreviousData(data);\n setItems(data);\n }\n\n const handleDone = () => {\n if (editValues) {\n const updatedItems = items.map((item) =>\n item.id === editValues.id ? editValues : item,\n );\n setItems(updatedItems);\n onUpdate?.(editValues);\n setEditingId(null);\n setEditValues(null);\n }\n };\n\n const layoutTransition = {\n type: 'spring' as const,\n bounce: 0,\n duration: 0.7,\n };\n\n return (\n \n
\n \n \n Expense\n \n \n Method\n \n \n Amount\n \n \n\n \n
\n {items.map((item) => (\n
\n {!editingId && (\n
\n ),\n )}\n \n\n
\n {\n setEditingId(null);\n setEditValues(null);\n }}\n className=\"flex flex-1 items-center justify-center gap-2 rounded-xl bg-neutral-100 px-5 py-3 text-sm font-bold text-neutral-600 sm:flex-none sm:py-2 dark:bg-neutral-800 dark:text-neutral-400\"\n >\n Cancel\n \n \n Done\n \n
\n \n ) : (\n \n \n \n \n {item.expense}\n \n \n \n \n {item.method}\n \n \n \n\n \n \n {item.method}\n \n \n\n \n \n \n $\n \n {item.amount}\n \n \n\n {\n setEditValues({ ...item });\n setEditingId(item.id);\n }}\n className=\"flex justify-end text-neutral-400 transition-transform hover:text-black active:scale-125 dark:hover:text-white\"\n >\n \n \n \n )}\n \n
\n ))}\n
\n \n
\n
\n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "inline-table-control-base", "type": "registry:component", "title": "Inline Table Control (base)", "description": "Theme-ready base variant of Inline controls for editing table rows without breaking user focus..", "dependencies": [ "lucide-react", "motion", "react-icons" ], "files": [ { "path": "components/watermelon/inline-table-control.tsx", "type": "registry:component", "content": "'use client';\n\nimport React, { useState } from 'react';\nimport { motion, AnimatePresence, LayoutGroup } from 'motion/react';\nimport { Pencil, X, Check } from 'lucide-react';\nimport { GoStack } from 'react-icons/go';\nimport { BsArrowUpRightSquare } from 'react-icons/bs';\nimport { FaRegCreditCard } from 'react-icons/fa6';\n\nexport interface TableItem {\n id: string;\n expense: string;\n method: string;\n amount: string;\n}\n\ninterface InlineTableControlProps {\n data: TableItem[];\n onUpdate?: (item: TableItem) => void;\n className?: string;\n}\n\nconst getIcon = (field: string) => {\n const iconClass = 'text-muted-foreground';\n if (field === 'expense')\n return ;\n if (field === 'method') return ;\n if (field === 'amount')\n return ;\n return null;\n};\n\nexport const InlineTableControl: React.FC = ({\n data,\n onUpdate,\n className = '',\n}) => {\n const [items, setItems] = useState(data);\n const [previousData, setPreviousData] = useState(data);\n const [editingId, setEditingId] = useState(null);\n const [editValues, setEditValues] = useState(null);\n\n if (previousData !== data) {\n setPreviousData(data);\n setItems(data);\n }\n\n const handleDone = () => {\n if (editValues) {\n const updatedItems = items.map((item) =>\n item.id === editValues.id ? editValues : item,\n );\n setItems(updatedItems);\n onUpdate?.(editValues);\n setEditingId(null);\n setEditValues(null);\n }\n };\n\n const layoutTransition = {\n type: 'spring' as const,\n bounce: 0,\n duration: 0.7,\n };\n\n return (\n \n
\n \n \n Expense\n \n \n Method\n \n \n Amount\n \n \n\n \n
\n {items.map((item) => (\n
\n {!editingId && (\n
\n ),\n )}\n \n\n
\n {\n setEditingId(null);\n setEditValues(null);\n }}\n className=\"bg-muted text-muted-foreground flex flex-1 items-center justify-center gap-2 rounded-lg px-5 py-3 text-sm font-bold sm:flex-none sm:py-2\"\n >\n Cancel\n \n \n Done\n \n
\n \n ) : (\n \n \n \n \n {item.expense}\n \n \n \n \n {item.method}\n \n \n \n\n
\n ))}\n
\n \n \n \n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "inline-toast", "type": "registry:component", "title": "Inline Toast", "description": "An animated inline toast that provides instant feedback with a built-in copy action.", "dependencies": [ "motion", "react-icons" ], "files": [ { "path": "components/watermelon/inline-toast.tsx", "type": "registry:component", "content": "'use client';\n\nimport { useState, type FC } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport { IoCheckmarkCircle } from 'react-icons/io5';\n\nexport interface InlineCopyToastProps {\n code: string;\n copyDuration?: number;\n}\n\nexport const InlineToast: FC = ({\n code,\n copyDuration = 2000,\n}) => {\n const [copied, setCopied] = useState(false);\n\n const handleCopy = async (): Promise => {\n await navigator.clipboard.writeText(code);\n setCopied(true);\n\n setTimeout(() => {\n setCopied(false);\n }, copyDuration);\n };\n\n return (\n \n \n {copied && (\n \n )}\n \n\n
\n \n {!copied ? (\n \n \n {code}\n \n\n \n \n\n Copy\n \n \n ) : (\n \n \n Code Copied!\n \n )}\n \n
\n \n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "inline-toast-base", "type": "registry:component", "title": "Inline Toast (base)", "description": "Theme-ready base variant of An animated inline toast that provides instant feedback with a built-in copy action..", "dependencies": [ "motion", "react-icons" ], "files": [ { "path": "components/watermelon/inline-toast.tsx", "type": "registry:component", "content": "'use client';\n\nimport { useState, type FC } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport { IoCheckmarkCircle } from 'react-icons/io5';\n\nexport interface InlineCopyToastProps {\n code: string;\n copyDuration?: number;\n}\n\nexport const InlineToast: FC = ({\n code,\n copyDuration = 2000,\n}) => {\n const [copied, setCopied] = useState(false);\n\n const handleCopy = async (): Promise => {\n await navigator.clipboard.writeText(code);\n setCopied(true);\n\n setTimeout(() => {\n setCopied(false);\n }, copyDuration);\n };\n\n return (\n \n \n {copied && (\n \n )}\n \n\n
\n \n {!copied ? (\n \n \n {code}\n \n\n \n \n\n Copy\n \n \n ) : (\n \n \n Code Copied!\n \n )}\n \n
\n \n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "integration-card", "type": "registry:component", "title": "Integration Card", "description": "Show connected services with status, actions, and simple integration management.", "dependencies": [ "framer-motion", "lucide-react", "react-icons" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/watermelon/integration-card.tsx", "type": "registry:component", "content": "import React, { useState, useRef, useEffect } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport {\n Search,\n ChevronDown,\n ChevronLeft,\n ChevronRight,\n Check,\n} from 'lucide-react';\nimport { IoClose } from 'react-icons/io5';\nimport { cn } from '@/lib/utils';\n\n/* ---------- Types ---------- */\nexport interface IntegrationItem {\n id: string;\n name: string;\n entities: string;\n description: string;\n tags: string[];\n triggers: number;\n actions: number;\n available: boolean;\n icon: React.ReactNode;\n}\n\ninterface IntegrationsCardProps {\n items: IntegrationItem[];\n title: string;\n}\n\n/* ---------- Sub-components ---------- */\nconst FilterButton: React.FC<{\n label: string;\n active?: boolean;\n onClick: () => void;\n selected?: string;\n}> = ({ label, active, onClick, selected }) => (\n \n {selected || label}\n \n \n);\n\nconst IntegrationCard: React.FC<{ item: IntegrationItem }> = ({ item }) => {\n return (\n \n {/* Icon */}\n
\n {item.icon}\n
\n\n {/* Content */}\n
\n
\n
\n

\n {item.name}\n

\n

\n {item.entities}\n

\n
\n\n {item.available && (\n \n AVAILABLE\n \n )}\n
\n\n

\n {item.description}\n

\n\n
\n
\n {item.tags.map((tag) => (\n \n {tag}\n \n ))}\n
\n\n \n {item.triggers} TRIGGERS / {item.actions} ACTIONS\n \n
\n
\n \n );\n};\n\n/* ---------- Main ---------- */\nexport const IntegrationsCard: React.FC = ({\n items,\n title,\n}) => {\n const [activePopover, setActivePopover] = useState<\n 'type' | 'useCase' | 'more' | null\n >(null);\n const [selectedType, setSelectedType] = useState('All types');\n const [selectedUseCase, setSelectedUseCase] = useState('All use cases');\n const [searchQuery, setSearchQuery] = useState('');\n const [currentPage, setCurrentPage] = useState(1);\n const itemsPerPage = 6;\n\n const popoverRef = useRef(null);\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (\n popoverRef.current &&\n !popoverRef.current.contains(event.target as Node)\n ) {\n setActivePopover(null);\n }\n };\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, []);\n\n // Filter Logic\n const filteredItems = items.filter((item) => {\n const matchesSearch =\n item.name.toLowerCase().includes(searchQuery.toLowerCase()) ||\n item.description.toLowerCase().includes(searchQuery.toLowerCase());\n const matchesType =\n selectedType === 'All types' || item.tags.includes(selectedType);\n const matchesUseCase =\n selectedUseCase === 'All use cases' ||\n item.entities.includes(selectedUseCase.toUpperCase());\n return matchesSearch && matchesType && matchesUseCase;\n });\n\n // Pagination Logic\n const totalPages = Math.ceil(filteredItems.length / itemsPerPage);\n const paginatedItems = filteredItems.slice(\n (currentPage - 1) * itemsPerPage,\n currentPage * itemsPerPage,\n );\n\n const typeOptions = ['All types', 'Marketplace', 'Internal', 'Third-party'];\n const useCaseOptions = [\n 'All use cases',\n 'Productivity',\n 'Marketing',\n 'Development',\n 'Sales',\n ];\n\n return (\n
\n
\n {/* Header */}\n
\n

\n {title}\n

\n \n \n \n
\n\n {/* Filters & Search */}\n
\n
\n \n setActivePopover(activePopover === 'type' ? null : 'type')\n }\n />\n \n setActivePopover(activePopover === 'useCase' ? null : 'useCase')\n }\n />\n \n setActivePopover(activePopover === 'more' ? null : 'more')\n }\n />\n
\n\n
\n\n
\n \n {\n setSearchQuery(e.target.value);\n setCurrentPage(1);\n }}\n placeholder=\"Search for an app...\"\n className=\"w-full rounded-lg border border-zinc-200 bg-white py-1.5 pr-4 pl-9 text-[12px] text-zinc-900 placeholder-zinc-400 transition-all focus:border-zinc-400 focus:outline-none dark:border-[#2a2a2a] dark:bg-[#121212] dark:text-white dark:placeholder-[#6b6b6b] dark:focus:border-[#3a3a3a]\"\n />\n
\n\n {/* Global Popover */}\n \n {activePopover && (\n \n {activePopover === 'type' &&\n typeOptions.map((opt) => (\n {\n setSelectedType(opt);\n setActivePopover(null);\n setCurrentPage(1);\n }}\n className=\"flex w-full items-center justify-between gap-3 rounded-lg px-3 py-2 text-left text-[12px] font-medium text-zinc-700 transition-colors hover:bg-zinc-50 dark:text-[#EEEEEE] dark:hover:bg-white/5\"\n >\n {opt}\n {selectedType === opt && (\n \n )}\n \n ))}\n {activePopover === 'useCase' &&\n useCaseOptions.map((opt) => (\n {\n setSelectedUseCase(opt);\n setActivePopover(null);\n setCurrentPage(1);\n }}\n className=\"flex w-full items-center justify-between gap-3 rounded-lg px-3 py-2 text-left text-[12px] font-medium text-zinc-700 transition-colors hover:bg-zinc-50 dark:text-[#EEEEEE] dark:hover:bg-white/5\"\n >\n {opt}\n {selectedUseCase === opt && (\n \n )}\n \n ))}\n {activePopover === 'more' && (\n
\n

\n Advanced\n

\n \n \n \n
\n )}\n \n )}\n \n
\n\n {/* List */}\n
\n \n {paginatedItems.map((item) => (\n \n ))}\n {paginatedItems.length === 0 && (\n \n
\n \n
\n

\n No integrations found\n

\n

\n Try adjusting your search or filters\n

\n {\n setSearchQuery('');\n setSelectedType('All types');\n setSelectedUseCase('All use cases');\n }}\n className=\"text-[12px] font-bold text-zinc-900 hover:underline dark:text-white\"\n >\n Clear all filters\n \n \n )}\n \n
\n\n {/* Footer */}\n
\n \n {filteredItems.length > 0\n ? (currentPage - 1) * itemsPerPage + 1\n : 0}{' '}\n – {Math.min(currentPage * itemsPerPage, filteredItems.length)} of{' '}\n {filteredItems.length} apps\n \n\n
\n setCurrentPage((prev) => prev - 1)}\n className=\"rounded-lg p-1.5 transition-all hover:bg-zinc-100 disabled:opacity-30 dark:hover:bg-white/5\"\n >\n \n \n
\n {[...Array(totalPages)].map((_, i) => {\n const pageNum = i + 1;\n if (\n totalPages > 5 &&\n pageNum > 2 &&\n pageNum < totalPages - 1 &&\n Math.abs(pageNum - currentPage) > 1\n ) {\n if (pageNum === 3 || pageNum === totalPages - 2)\n return (\n \n …\n \n );\n return null;\n }\n return (\n setCurrentPage(pageNum)}\n className={cn(\n 'flex h-7 w-7 items-center justify-center rounded-lg text-[11px] font-bold transition-all',\n currentPage === pageNum\n ? 'border border-orange-200 bg-orange-50 text-orange-600 shadow-sm dark:border-[#3a1f14] dark:bg-[#2a160e] dark:text-[#f97316]'\n : 'text-zinc-500 hover:bg-zinc-100 dark:text-[#6b6b6b] dark:hover:bg-white/5',\n )}\n >\n {pageNum}\n \n );\n })}\n
\n setCurrentPage((prev) => prev + 1)}\n className=\"rounded-lg p-1.5 transition-all hover:bg-zinc-100 disabled:opacity-30 dark:hover:bg-white/5\"\n >\n \n \n
\n
\n
\n
\n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "integration-card-base", "type": "registry:component", "title": "Integration Card (base)", "description": "Theme-ready base variant of Show connected services with status, actions, and simple integration management..", "dependencies": [ "framer-motion", "lucide-react", "react-icons" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/watermelon/integration-card.tsx", "type": "registry:component", "content": "import React, { useState, useRef, useEffect } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport {\n Search,\n ChevronDown,\n ChevronLeft,\n ChevronRight,\n Check,\n} from 'lucide-react';\nimport { IoClose } from 'react-icons/io5';\nimport { cn } from '@/lib/utils';\n\n/* ---------- Types ---------- */\nexport interface IntegrationItem {\n id: string;\n name: string;\n entities: string;\n description: string;\n tags: string[];\n triggers: number;\n actions: number;\n available: boolean;\n icon: React.ReactNode;\n}\n\ninterface IntegrationsCardProps {\n items: IntegrationItem[];\n title: string;\n}\n\n/* ---------- Sub-components ---------- */\nconst FilterButton: React.FC<{\n label: string;\n active?: boolean;\n onClick: () => void;\n selected?: string;\n}> = ({ label, active, onClick, selected }) => (\n \n {selected || label}\n \n \n);\n\nconst IntegrationCard: React.FC<{ item: IntegrationItem }> = ({ item }) => {\n return (\n \n {/* Icon */}\n
\n {item.icon}\n
\n\n {/* Content */}\n
\n
\n
\n

\n {item.name}\n

\n

\n {item.entities}\n

\n
\n\n {item.available && (\n \n AVAILABLE\n \n )}\n
\n\n

\n {item.description}\n

\n\n
\n
\n {item.tags.map((tag) => (\n \n {tag}\n \n ))}\n
\n\n \n {item.triggers} TRIGGERS / {item.actions} ACTIONS\n \n
\n
\n \n );\n};\n\n/* ---------- Main ---------- */\nexport const IntegrationsCard: React.FC = ({\n items,\n title,\n}) => {\n const [activePopover, setActivePopover] = useState<\n 'type' | 'useCase' | 'more' | null\n >(null);\n const [selectedType, setSelectedType] = useState('All types');\n const [selectedUseCase, setSelectedUseCase] = useState('All use cases');\n const [searchQuery, setSearchQuery] = useState('');\n const [currentPage, setCurrentPage] = useState(1);\n const itemsPerPage = 6;\n\n const popoverRef = useRef(null);\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (\n popoverRef.current &&\n !popoverRef.current.contains(event.target as Node)\n ) {\n setActivePopover(null);\n }\n };\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, []);\n\n // Filter Logic\n const filteredItems = items.filter((item) => {\n const matchesSearch =\n item.name.toLowerCase().includes(searchQuery.toLowerCase()) ||\n item.description.toLowerCase().includes(searchQuery.toLowerCase());\n const matchesType =\n selectedType === 'All types' || item.tags.includes(selectedType);\n const matchesUseCase =\n selectedUseCase === 'All use cases' ||\n item.entities.includes(selectedUseCase.toUpperCase());\n return matchesSearch && matchesType && matchesUseCase;\n });\n\n // Pagination Logic\n const totalPages = Math.ceil(filteredItems.length / itemsPerPage);\n const paginatedItems = filteredItems.slice(\n (currentPage - 1) * itemsPerPage,\n currentPage * itemsPerPage,\n );\n\n const typeOptions = ['All types', 'Marketplace', 'Internal', 'Third-party'];\n const useCaseOptions = [\n 'All use cases',\n 'Productivity',\n 'Marketing',\n 'Development',\n 'Sales',\n ];\n\n return (\n
\n
\n {/* Header */}\n
\n

\n {title}\n

\n \n \n \n
\n\n {/* Filters & Search */}\n
\n
\n \n setActivePopover(activePopover === 'type' ? null : 'type')\n }\n />\n \n setActivePopover(activePopover === 'useCase' ? null : 'useCase')\n }\n />\n \n setActivePopover(activePopover === 'more' ? null : 'more')\n }\n />\n
\n\n
\n\n
\n \n {\n setSearchQuery(e.target.value);\n setCurrentPage(1);\n }}\n placeholder=\"Search for an app...\"\n className=\"bg-background border-border text-foreground placeholder:text-muted-foreground focus:ring-primary/20 focus:border-primary w-full rounded-full border py-1.5 pr-4 pl-9 text-[12px] transition-all focus:ring-2 focus:outline-none\"\n />\n
\n\n {/* Global Popover (Anchored to filter area but absolute to container) */}\n \n {activePopover && (\n \n {activePopover === 'type' &&\n typeOptions.map((opt) => (\n {\n setSelectedType(opt);\n setActivePopover(null);\n setCurrentPage(1);\n }}\n className=\"hover:bg-muted flex w-full items-center justify-between gap-3 rounded-lg px-3 py-2 text-left text-[12px] font-medium transition-colors\"\n >\n {opt}\n {selectedType === opt && (\n \n )}\n \n ))}\n {activePopover === 'useCase' &&\n useCaseOptions.map((opt) => (\n {\n setSelectedUseCase(opt);\n setActivePopover(null);\n setCurrentPage(1);\n }}\n className=\"hover:bg-muted flex w-full items-center justify-between gap-3 rounded-lg px-3 py-2 text-left text-[12px] font-medium transition-colors\"\n >\n {opt}\n {selectedUseCase === opt && (\n \n )}\n \n ))}\n {activePopover === 'more' && (\n
\n

\n Advanced\n

\n \n \n \n
\n )}\n \n )}\n \n
\n\n {/* List */}\n
\n \n {paginatedItems.map((item) => (\n \n ))}\n {paginatedItems.length === 0 && (\n \n
\n \n
\n

\n No integrations found\n

\n

\n Try adjusting your search or filters\n

\n {\n setSearchQuery('');\n setSelectedType('All types');\n setSelectedUseCase('All use cases');\n }}\n className=\"text-primary text-xs font-semibold hover:underline\"\n >\n Clear all filters\n \n \n )}\n \n
\n\n {/* Footer */}\n
\n \n {filteredItems.length > 0\n ? (currentPage - 1) * itemsPerPage + 1\n : 0}{' '}\n – {Math.min(currentPage * itemsPerPage, filteredItems.length)} of{' '}\n {filteredItems.length} apps\n \n\n
\n setCurrentPage((prev) => prev - 1)}\n className=\"hover:bg-muted rounded-lg p-1.5 transition-colors disabled:opacity-30 disabled:hover:bg-transparent\"\n >\n \n \n
\n {[...Array(totalPages)].map((_, i) => {\n const pageNum = i + 1;\n // Simple pagination logic for brevity\n if (\n totalPages > 5 &&\n pageNum > 2 &&\n pageNum < totalPages - 1 &&\n Math.abs(pageNum - currentPage) > 1\n ) {\n if (pageNum === 3 || pageNum === totalPages - 2)\n return (\n \n …\n \n );\n return null;\n }\n return (\n setCurrentPage(pageNum)}\n className={cn(\n 'flex h-7 w-7 items-center justify-center rounded-lg text-[11px] font-bold transition-all',\n currentPage === pageNum\n ? 'bg-primary text-primary-foreground shadow-sm'\n : 'hover:bg-muted text-muted-foreground',\n )}\n >\n {pageNum}\n \n );\n })}\n
\n setCurrentPage((prev) => prev + 1)}\n className=\"hover:bg-muted rounded-lg p-1.5 transition-colors disabled:opacity-30 disabled:hover:bg-transparent\"\n >\n \n \n
\n
\n
\n
\n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "invite-disclosure", "type": "registry:component", "title": "Invite Disclosure", "description": "A sleek, morphing disclosure component for managing invitations with interactive badge counts and spring animations.", "dependencies": [ "motion", "react-icons" ], "files": [ { "path": "components/watermelon/invite-disclosure.tsx", "type": "registry:component", "content": "import React, { useState, type ReactNode } from 'react';\nimport {\n AnimatePresence,\n motion,\n MotionConfig,\n type Transition,\n} from 'motion/react';\nimport { MdOutlineClose } from 'react-icons/md';\nimport { FaFolderClosed } from 'react-icons/fa6';\nimport { LuDraftingCompass } from 'react-icons/lu';\nimport { BiSolidZap } from 'react-icons/bi';\nimport { PiScrewdriverBold } from 'react-icons/pi';\n\nexport interface InviteItem {\n id: string;\n title: string;\n description: string;\n icon: ReactNode;\n hasUpdate?: boolean;\n}\n\ninterface InviteDisclosureProps {\n title?: string;\n badgeCount?: number;\n invites?: InviteItem[];\n}\n\nconst DEFAULT_INVITES: InviteItem[] = [\n {\n id: '1',\n title: 'Sonora Repository',\n description: 'Contribute to the code repository',\n icon: ,\n hasUpdate: true,\n },\n {\n id: '2',\n title: 'Design Tokens',\n description: 'Collaborate on design tokens',\n icon: ,\n hasUpdate: true,\n },\n {\n id: '3',\n title: 'Motion Kit',\n description: 'Contribute to motion components',\n icon: ,\n },\n {\n id: '4',\n title: 'Build Tools',\n description: 'Explore build tools & pipeline',\n icon: ,\n },\n];\n\nconst springTransition: Transition = {\n type: 'spring',\n stiffness: 800,\n damping: 80,\n mass: 5,\n};\n\nconst collapsedTransition: Transition = {\n type: 'spring',\n stiffness: 800,\n damping: 80,\n mass: 4,\n};\n\nexport const InviteDisclosure: React.FC = ({\n title = 'Invites',\n badgeCount = 2,\n invites = DEFAULT_INVITES,\n}) => {\n const [isOpen, setIsOpen] = useState(false);\n\n return (\n
\n \n \n {!isOpen ? (\n setIsOpen(true)}\n style={{\n borderRadius: 32,\n }}\n className=\"flex cursor-pointer items-center gap-3 bg-[#F4F4F4] px-6 py-4 transition-colors duration-200 hover:bg-[#eae8e8] dark:bg-neutral-900 dark:hover:bg-neutral-800\"\n >\n \n {title}\n \n \n {badgeCount}\n \n \n ) : (\n \n
\n \n {title}\n \n setIsOpen(false)}\n className=\"flex h-8 w-8 items-center justify-center rounded-full bg-[#fefefe] transition-colors duration-200 hover:bg-neutral-200 dark:bg-neutral-800 dark:hover:bg-neutral-700\"\n >\n \n \n
\n\n
\n {invites.map((invite, index) => (\n \n
\n
\n {invite.icon && React.isValidElement(invite.icon)\n ? React.cloneElement(\n invite.icon as React.ReactElement,\n {\n className: `${(invite.icon as React.ReactElement).props.className} dark:text-neutral-300`,\n },\n )\n : invite.icon}\n
\n {invite.hasUpdate && (\n
\n )}\n
\n\n
\n

\n {invite.title}\n

\n

\n {invite.description}\n

\n
\n \n ))}\n
\n \n )}\n \n \n
\n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "invite-disclosure-base", "type": "registry:component", "title": "Invite Disclosure (base)", "description": "Theme-ready base variant of A sleek, morphing disclosure component for managing invitations with interactive badge counts and spring animations..", "dependencies": [ "motion", "react-icons" ], "files": [ { "path": "components/watermelon/invite-disclosure.tsx", "type": "registry:component", "content": "import React, { useState, type ReactNode } from 'react';\nimport {\nAnimatePresence,\nmotion,\nMotionConfig,\ntype Transition,\n} from 'motion/react';\nimport { MdOutlineClose } from 'react-icons/md';\nimport { FaFolderClosed } from 'react-icons/fa6';\nimport { LuDraftingCompass } from 'react-icons/lu';\nimport { BiSolidZap } from 'react-icons/bi';\nimport { PiScrewdriverBold } from 'react-icons/pi';\n\nexport interface InviteItem {\nid: string;\ntitle: string;\ndescription: string;\nicon: ReactNode;\nhasUpdate?: boolean;\n}\n\ninterface InviteDisclosureProps {\ntitle?: string;\nbadgeCount?: number;\ninvites?: InviteItem[];\n}\n\nconst DEFAULT_INVITES: InviteItem[] = [\n{\n id: '1',\n title: 'Sonora Repository',\n description: 'Contribute to the code repository',\n icon: ,\n hasUpdate: true,\n},\n{\n id: '2',\n title: 'Design Tokens',\n description: 'Collaborate on design tokens',\n icon: ,\n hasUpdate: true,\n},\n{\n id: '3',\n title: 'Motion Kit',\n description: 'Contribute to motion components',\n icon: ,\n},\n{\n id: '4',\n title: 'Build Tools',\n description: 'Explore build tools & pipeline',\n icon: ,\n},\n];\n\nconst springTransition: Transition = {\ntype: 'spring',\nstiffness: 800,\ndamping: 80,\nmass: 5,\n};\n\nconst collapsedTransition: Transition = {\ntype: 'spring',\nstiffness: 800,\ndamping: 80,\nmass: 4,\n};\n\nexport const InviteDisclosure: React.FC = ({\ntitle = 'Invites',\nbadgeCount = 2,\ninvites = DEFAULT_INVITES,\n}) => {\nconst [isOpen, setIsOpen] = useState(false);\n\nreturn (\n \n \n \n {!isOpen ? (\n setIsOpen(true)}\n style={{\n borderRadius: 32,\n }}\n className=\"flex cursor-pointer items-center gap-3 rounded-3xl border border-border bg-card px-6 py-4 text-foreground transition-colors duration-200 hover:bg-accent/40\"\n >\n \n {title}\n \n \n {badgeCount}\n \n \n ) : (\n \n
\n \n {title}\n \n setIsOpen(false)}\n className=\"flex h-8 w-8 items-center justify-center rounded-full bg-background text-muted-foreground transition-colors duration-200 hover:bg-accent\"\n >\n \n \n
\n\n
\n {invites.map((invite, index) => (\n \n
\n
\n {invite.icon && React.isValidElement(invite.icon)\n ? React.cloneElement(\n invite.icon as React.ReactElement,\n {\n className: `${(invite.icon as React.ReactElement).props.className} text-muted-foreground`,\n },\n )\n : invite.icon}\n
\n {invite.hasUpdate && (\n
\n )}\n
\n\n
\n

\n {invite.title}\n

\n

\n {invite.description}\n

\n
\n \n ))}\n
\n \n )}\n \n \n
\n);\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "journal-navigation", "type": "registry:component", "title": "Journal Navigation", "description": "Organized journal navigation enabling quick section switching with smooth animated transitions.", "dependencies": [ "lucide-react", "motion" ], "files": [ { "path": "components/watermelon/journal-navigation.tsx", "type": "registry:component", "content": "import React, { useState, useEffect, useRef } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\n\nexport interface JournalEntry {\n id: string | number;\n day: number;\n month: string;\n year?: number;\n content: React.ReactNode;\n}\n\ninterface JournalNavigationProps {\n entries: JournalEntry[];\n initialIndex?: number;\n onEntryChange?: (entry: JournalEntry) => void;\n}\n\nexport const JournalNavigation: React.FC = ({\n entries,\n initialIndex = 0,\n onEntryChange,\n}) => {\n const [currentIndex, setCurrentIndex] = useState(initialIndex);\n const [direction, setDirection] = useState(0);\n\n const directionRef = useRef(direction);\n useEffect(() => {\n directionRef.current = direction;\n }, [direction]);\n\n const handleNext = () => {\n if (currentIndex < entries.length - 1) {\n setDirection(1);\n setCurrentIndex((prev) => prev + 1);\n }\n };\n\n const handlePrev = () => {\n if (currentIndex > 0) {\n setDirection(-1);\n setCurrentIndex((prev) => prev - 1);\n }\n };\n\n useEffect(() => {\n if (onEntryChange) {\n onEntryChange(entries[currentIndex]);\n }\n }, [currentIndex, entries, onEntryChange]);\n\n const currentEntry = entries[currentIndex];\n\n const contentVariants = {\n enter: (direction: number) => ({\n y: direction > 0 ? 3 : -3,\n opacity: 0,\n }),\n center: { y: 0, opacity: 1 },\n exit: (direction: number) => ({\n y: direction > 0 ? 3 : -3,\n opacity: 0,\n }),\n };\n\n const charVariants = {\n enter: () => ({\n // Wait to spawn until old leaves? The user wants exactly:\n // \"old div content vanshies and as soon as one char vanish new content appear\"\n // They just want a beautiful overlapping displacement\n y: directionRef.current > 0 ? 3 : -3,\n opacity: 0,\n filter: 'blur(2px)',\n }),\n center: (globalIndex: number) => ({\n y: 0,\n opacity: 1,\n filter: 'blur(0px)',\n transition: {\n type: 'spring' as const,\n bounce: 0.1,\n duration: 0.3,\n delay: globalIndex * 0.01,\n },\n }),\n exit: (globalIndex: number) => ({\n y: directionRef.current > 0 ? 3 : -3,\n opacity: 0,\n filter: 'blur(2px)',\n transition: {\n type: 'spring' as const,\n bounce: 0.1,\n duration: 0.3,\n delay: globalIndex * 0.01, // perfectly match the enter speed to spin at same time\n },\n }),\n };\n\n const ITEM_HEIGHT = 45; // 37px button height (h-9.25) + 8px gap (gap-2)\n\n return (\n
\n
\n
\n
\n\n \n {\n const yOffset = info.offset.y;\n const velocity = info.velocity.y;\n const absOffset = Math.abs(yOffset);\n\n // Need to move at least 15px or flick fast to change index\n let itemsToMove = Math.floor((absOffset + 15) / ITEM_HEIGHT);\n\n if (Math.abs(velocity) > 200 && itemsToMove === 0) {\n itemsToMove = 1;\n }\n\n const directionMultiplier = yOffset < 0 ? 1 : -1;\n let newIndex = currentIndex + directionMultiplier * itemsToMove;\n\n if (newIndex < 0) newIndex = 0;\n if (newIndex >= entries.length) newIndex = entries.length - 1;\n\n if (newIndex > currentIndex) setDirection(1);\n else if (newIndex < currentIndex) setDirection(-1);\n\n if (newIndex !== currentIndex) {\n setCurrentIndex(newIndex);\n }\n }}\n animate={{ y: -(currentIndex * ITEM_HEIGHT) }}\n transition={{\n type: 'spring',\n stiffness: 260,\n damping: 32,\n mass: 0.6,\n }}\n className=\"flex cursor-grab flex-col items-center gap-2 active:cursor-grabbing\"\n >\n {entries.map((entry, index) => {\n const isActive = index === currentIndex;\n return (\n {\n if (index > currentIndex) setDirection(1);\n else if (index < currentIndex) setDirection(-1);\n if (index !== currentIndex) {\n setCurrentIndex(index);\n }\n }}\n animate={{ scale: isActive ? 1.2 : 1 }}\n className={`flex h-9.25 w-9.25 shrink-0 items-center justify-center rounded-full text-[16px] font-bold transition-colors ${\n isActive\n ? 'bg-[#F0ECE6] text-[#1C1C1E] dark:bg-neutral-700 dark:text-white'\n : 'text-[#B0AFB8] hover:bg-[#F0ECE6] dark:text-neutral-600 dark:hover:text-neutral-400'\n }`}\n >\n {entry.day.toString().padStart(2, '0')}\n \n );\n })}\n \n
\n\n
\n
\n\n
\n
\n
\n \n \n {currentEntry.month}\n \n \n
\n {currentEntry.day\n .toString()\n .split('')\n .map((digit, i) => (\n \n \n {digit}\n \n \n ))}\n
\n
\n\n
\n {[\n {\n title: 'left',\n action: handlePrev,\n disabled: currentIndex === 0,\n icon: ,\n },\n {\n title: 'right',\n action: handleNext,\n disabled: currentIndex === entries.length - 1,\n icon: ,\n },\n ].map((btn) => (\n \n {btn.icon}\n \n ))}\n
\n
\n\n
\n
\n \n \n {typeof currentEntry.content === 'string' ||\n Array.isArray(currentEntry.content) ? (\n \n {(Array.isArray(currentEntry.content)\n ? currentEntry.content\n : [currentEntry.content as string]\n ).map((paragraph, pIndex, arr) => {\n const priorLength = arr\n .slice(0, pIndex)\n .join('').length;\n const segments = paragraph.split(/(\\s+)/);\n\n return (\n \n {segments.map((segment: string, index: number) => {\n if (/\\s+/.test(segment)) {\n return (\n \n {segment}\n \n );\n }\n\n const previousLengths = segments\n .slice(0, index)\n .join('').length;\n\n return (\n \n {Array.from(segment).map(\n (char: string, charIndex: number) => {\n const globalIndex =\n priorLength +\n previousLengths +\n charIndex;\n\n return (\n \n {char}\n \n );\n },\n )}\n \n );\n })}\n \n );\n })}\n \n ) : (\n currentEntry.content\n )}\n \n \n
\n
\n
\n
\n
\n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "journal-navigation-base", "type": "registry:component", "title": "Journal Navigation (base)", "description": "Theme-ready base variant of Organized journal navigation enabling quick section switching with smooth animated transitions..", "dependencies": [ "lucide-react", "motion" ], "files": [ { "path": "components/watermelon/journal-navigation.tsx", "type": "registry:component", "content": "'use client';\n\nimport React, { useState, useEffect, useRef } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\n\nexport interface JournalEntry {\n id: string | number;\n day: number;\n month: string;\n year?: number;\n content: React.ReactNode;\n}\n\ninterface JournalNavigationProps {\n entries: JournalEntry[];\n initialIndex?: number;\n onEntryChange?: (entry: JournalEntry) => void;\n}\n\nexport const JournalNavigation: React.FC = ({\n entries,\n initialIndex = 0,\n onEntryChange,\n}) => {\n const [currentIndex, setCurrentIndex] = useState(initialIndex);\n const [direction, setDirection] = useState(0);\n\n const directionRef = useRef(direction);\n useEffect(() => {\n directionRef.current = direction;\n }, [direction]);\n\n const handleNext = () => {\n if (currentIndex < entries.length - 1) {\n setDirection(1);\n setCurrentIndex((prev) => prev + 1);\n }\n };\n\n const handlePrev = () => {\n if (currentIndex > 0) {\n setDirection(-1);\n setCurrentIndex((prev) => prev - 1);\n }\n };\n\n useEffect(() => {\n if (onEntryChange) {\n onEntryChange(entries[currentIndex]);\n }\n }, [currentIndex, entries, onEntryChange]);\n\n const currentEntry = entries[currentIndex];\n\n const contentVariants = {\n enter: (direction: number) => ({\n y: direction > 0 ? 3 : -3,\n opacity: 0,\n }),\n center: { y: 0, opacity: 1 },\n exit: (direction: number) => ({\n y: direction > 0 ? 3 : -3,\n opacity: 0,\n }),\n };\n\n const charVariants = {\n enter: () => ({\n y: directionRef.current > 0 ? 3 : -3,\n opacity: 0,\n filter: 'blur(2px)',\n }),\n center: (globalIndex: number) => ({\n y: 0,\n opacity: 1,\n filter: 'blur(0px)',\n transition: {\n type: 'spring' as const,\n bounce: 0.1,\n duration: 0.3,\n delay: globalIndex * 0.01,\n },\n }),\n exit: (globalIndex: number) => ({\n y: directionRef.current > 0 ? 3 : -3,\n opacity: 0,\n filter: 'blur(2px)',\n transition: {\n type: 'spring' as const,\n bounce: 0.1,\n duration: 0.3,\n delay: globalIndex * 0.01,\n },\n }),\n };\n\n const ITEM_HEIGHT = 45;\n\n return (\n
\n
\n
\n
\n\n \n {\n const yOffset = info.offset.y;\n const velocity = info.velocity.y;\n const absOffset = Math.abs(yOffset);\n\n let itemsToMove = Math.floor((absOffset + 15) / ITEM_HEIGHT);\n\n if (Math.abs(velocity) > 200 && itemsToMove === 0) {\n itemsToMove = 1;\n }\n\n const directionMultiplier = yOffset < 0 ? 1 : -1;\n let newIndex = currentIndex + directionMultiplier * itemsToMove;\n\n if (newIndex < 0) newIndex = 0;\n if (newIndex >= entries.length) newIndex = entries.length - 1;\n\n if (newIndex > currentIndex) setDirection(1);\n else if (newIndex < currentIndex) setDirection(-1);\n\n if (newIndex !== currentIndex) {\n setCurrentIndex(newIndex);\n }\n }}\n animate={{ y: -(currentIndex * ITEM_HEIGHT) }}\n transition={{\n type: 'spring',\n stiffness: 260,\n damping: 32,\n mass: 0.6,\n }}\n className=\"flex cursor-grab flex-col items-center gap-2 active:cursor-grabbing\"\n >\n {entries.map((entry, index) => {\n const isActive = index === currentIndex;\n return (\n {\n if (index > currentIndex) setDirection(1);\n else if (index < currentIndex) setDirection(-1);\n if (index !== currentIndex) {\n setCurrentIndex(index);\n }\n }}\n animate={{ scale: isActive ? 1.2 : 1 }}\n className={`flex h-9.25 w-9.25 shrink-0 items-center justify-center rounded-lg text-[16px] font-bold transition-colors ${\n isActive\n ? 'bg-accent text-accent-foreground'\n : 'text-muted-foreground hover:bg-accent'\n }`}\n >\n {entry.day.toString().padStart(2, '0')}\n \n );\n })}\n \n
\n\n
\n
\n\n
\n
\n
\n \n \n {currentEntry.month}\n \n \n
\n {currentEntry.day\n .toString()\n .split('')\n .map((digit, i) => (\n \n \n {digit}\n \n \n ))}\n
\n
\n\n
\n {[\n {\n title: 'left',\n action: handlePrev,\n disabled: currentIndex === 0,\n icon: ,\n },\n {\n title: 'right',\n action: handleNext,\n disabled: currentIndex === entries.length - 1,\n icon: ,\n },\n ].map((btn) => (\n \n {btn.icon}\n \n ))}\n
\n
\n\n
\n
\n \n \n {typeof currentEntry.content === 'string' ||\n Array.isArray(currentEntry.content) ? (\n \n {(Array.isArray(currentEntry.content)\n ? currentEntry.content\n : [currentEntry.content as string]\n ).map((paragraph, pIndex, arr) => {\n const priorLength = arr\n .slice(0, pIndex)\n .join('').length;\n const segments = paragraph.split(/(\\s+)/);\n\n return (\n \n {segments.map((segment: string, index: number) => {\n if (/\\s+/.test(segment)) {\n return (\n \n {segment}\n \n );\n }\n\n const previousLengths = segments\n .slice(0, index)\n .join('').length;\n\n return (\n \n {Array.from(segment).map(\n (char: string, charIndex: number) => {\n const globalIndex =\n priorLength +\n previousLengths +\n charIndex;\n\n return (\n \n {char}\n \n );\n },\n )}\n \n );\n })}\n \n );\n })}\n \n ) : (\n currentEntry.content\n )}\n \n \n
\n
\n
\n
\n
\n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "knob-slider", "type": "registry:component", "title": "Knob Slider", "description": "A premium radial dial component with tactile feedback, blur animations, and full theme integration.", "dependencies": [ "motion", "react-use-measure" ], "files": [ { "path": "components/watermelon/knob-slider.tsx", "type": "registry:component", "content": "\"use client\";\n\nimport React, {\n useState,\n useRef,\n useEffect,\n useCallback,\n useMemo,\n useId,\n} from \"react\";\nimport {\n motion,\n MotionValue,\n useSpring,\n useTransform,\n motionValue,\n} from \"motion/react\";\nimport useMeasure from \"react-use-measure\";\n\n/* ───────── Sliding Number ───────── */\n\nconst DIGIT_SPRING = {\n type: \"spring\" as const,\n stiffness: 280,\n damping: 24,\n mass: 0.3,\n};\n\nfunction Digit({ value, place }: { value: number; place: number }) {\n const digit = Math.floor(value / place) % 10;\n const mv = useMemo(() => motionValue(digit), [digit]);\n const spring = useSpring(mv, DIGIT_SPRING);\n\n useEffect(() => {\n spring.set(digit);\n }, [digit, spring]);\n\n return (\n \n
0
\n {Array.from({ length: 10 }, (_, i) => (\n \n ))}\n
\n );\n}\n\nfunction SlotDigit({\n mv,\n number,\n}: {\n mv: MotionValue;\n number: number;\n}) {\n const id = useId();\n const [ref, bounds] = useMeasure();\n\n const y = useTransform(mv, (latest) => {\n if (!bounds.height) return 0;\n const offset = (10 + number - (latest % 10)) % 10;\n let pos = offset * bounds.height;\n if (offset > 5) pos -= 10 * bounds.height;\n return pos;\n });\n\n if (!bounds.height)\n return (\n \n {number}\n \n );\n\n return (\n \n {number}\n \n );\n}\n\nfunction SlidingNumber({\n value,\n blur,\n}: {\n value: number;\n blur: number;\n}) {\n const str = Math.abs(value).toString();\n const int = parseInt(str, 10);\n const places = str\n .split(\"\")\n .map((_, i) => Math.pow(10, str.length - i - 1));\n\n return (\n \n {places.map((place, i) => (\n \n ))}\n \n );\n}\n\n/* ───────── Knob ───────── */\n\ninterface KnobSliderProps {\n value: number;\n onChange: (value: number) => void;\n min?: number;\n max?: number;\n size?: number;\n}\n\nexport const KnobSlider: React.FC = ({\n value,\n onChange,\n min = 0,\n max = 100,\n size = 320,\n}) => {\n const knobRef = useRef(null);\n const [dragging, setDragging] = useState(false);\n\n const tickCount = 72;\n const innerSize = size * 0.68;\n\n /* Blur intensity */\n const [prev, setPrev] = useState(value);\n const [blur, setBlur] = useState(0);\n if (prev !== value) {\n setBlur(Math.min(10, Math.abs(value - prev)));\n setPrev(value);\n }\n\n /* Convert pointer → snapped value */\n const updateFromPointer = useCallback(\n (x: number, y: number) => {\n if (!knobRef.current) return;\n\n const rect = knobRef.current.getBoundingClientRect();\n const cx = rect.left + rect.width / 2;\n const cy = rect.top + rect.height / 2;\n\n let angle = (Math.atan2(y - cy, x - cx) * 180) / Math.PI + 90;\n if (angle < 0) angle += 360;\n\n /* Snap to nearest tick */\n const tickAngle = 360 / tickCount;\n const snappedAngle = Math.round(angle / tickAngle) * tickAngle;\n\n const percent = snappedAngle / 360;\n const newValue = Math.round(percent * (max - min) + min);\n\n onChange(newValue);\n },\n [min, max, onChange]\n );\n\n useEffect(() => {\n const move = (e: MouseEvent) =>\n dragging && updateFromPointer(e.clientX, e.clientY);\n const up = () => setDragging(false);\n\n if (dragging) {\n window.addEventListener(\"mousemove\", move);\n window.addEventListener(\"mouseup\", up);\n }\n\n return () => {\n window.removeEventListener(\"mousemove\", move);\n window.removeEventListener(\"mouseup\", up);\n };\n }, [dragging, updateFromPointer]);\n\n const currentAngle = ((value - min) / (max - min)) * 360;\n\n return (\n {\n setDragging(true);\n updateFromPointer(e.clientX, e.clientY);\n }}\n className=\"relative flex items-center justify-center rounded-full\n bg-neutral-100 dark:bg-neutral-900\n cursor-pointer select-none\n transition-colors duration-300\"\n style={{ width: size, height: size }}\n >\n {/* Tick Ring */}\n \n {Array.from({ length: tickCount }).map((_, i) => {\n const angle = (i * 360) / tickCount;\n return (\n \n );\n })}\n \n\n {/* Arrow */}\n \n \n
\n\n {/* Inner Knob */}\n \n
\n\n \n \n
\n
\n
\n );\n};" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "knob-slider-base", "type": "registry:component", "title": "Knob Slider (base)", "description": "Theme-ready base variant of A premium radial dial component with tactile feedback, blur animations, and full theme integration..", "dependencies": [ "motion", "react-use-measure" ], "files": [ { "path": "components/watermelon/knob-slider.tsx", "type": "registry:component", "content": "'use client';\n\nimport React, {\n useState,\n useRef,\n useEffect,\n useCallback,\n useMemo,\n useId,\n} from 'react';\nimport {\n motion,\n MotionValue,\n useSpring,\n useTransform,\n motionValue,\n} from 'motion/react';\nimport useMeasure from 'react-use-measure';\n\nconst DIGIT_SPRING = {\n type: 'spring' as const,\n stiffness: 280,\n damping: 24,\n mass: 0.3,\n};\n\nfunction Digit({ value, place }: { value: number; place: number }) {\n const digit = Math.floor(value / place) % 10;\n const mv = useMemo(() => motionValue(digit), [digit]);\n const spring = useSpring(mv, DIGIT_SPRING);\n\n useEffect(() => {\n spring.set(digit);\n }, [digit, spring]);\n\n return (\n \n
0
\n {Array.from({ length: 10 }, (_, i) => (\n \n ))}\n
\n );\n}\n\nfunction SlotDigit({\n mv,\n number,\n}: {\n mv: MotionValue;\n number: number;\n}) {\n const id = useId();\n const [ref, bounds] = useMeasure();\n\n const y = useTransform(mv, (latest) => {\n if (!bounds.height) return 0;\n const offset = (10 + number - (latest % 10)) % 10;\n let pos = offset * bounds.height;\n if (offset > 5) pos -= 10 * bounds.height;\n return pos;\n });\n\n if (!bounds.height)\n return (\n \n {number}\n \n );\n\n return (\n \n {number}\n \n );\n}\n\nfunction SlidingNumber({ value, blur }: { value: number; blur: number }) {\n const str = Math.abs(value).toString();\n const int = parseInt(str, 10);\n const places = str.split('').map((_, i) => Math.pow(10, str.length - i - 1));\n\n return (\n \n {places.map((place, i) => (\n \n ))}\n \n );\n}\n\ninterface KnobSliderProps {\n value: number;\n onChange: (value: number) => void;\n min?: number;\n max?: number;\n size?: number;\n}\n\nexport const KnobSlider: React.FC = ({\n value,\n onChange,\n min = 0,\n max = 100,\n size = 320,\n}) => {\n const knobRef = useRef(null);\n const [dragging, setDragging] = useState(false);\n\n const tickCount = 72;\n const innerSize = size * 0.68;\n\n const [prev, setPrev] = useState(value);\n const [blur, setBlur] = useState(0);\n if (prev !== value) {\n setBlur(Math.min(10, Math.abs(value - prev)));\n setPrev(value);\n }\n\n const updateFromPointer = useCallback(\n (x: number, y: number) => {\n if (!knobRef.current) return;\n\n const rect = knobRef.current.getBoundingClientRect();\n const cx = rect.left + rect.width / 2;\n const cy = rect.top + rect.height / 2;\n\n let angle = (Math.atan2(y - cy, x - cx) * 180) / Math.PI + 90;\n if (angle < 0) angle += 360;\n\n const tickAngle = 360 / tickCount;\n const snappedAngle = Math.round(angle / tickAngle) * tickAngle;\n\n const percent = snappedAngle / 360;\n const newValue = Math.round(percent * (max - min) + min);\n\n onChange(newValue);\n },\n [min, max, onChange],\n );\n\n useEffect(() => {\n const move = (e: MouseEvent) =>\n dragging && updateFromPointer(e.clientX, e.clientY);\n const up = () => setDragging(false);\n\n if (dragging) {\n window.addEventListener('mousemove', move);\n window.addEventListener('mouseup', up);\n }\n\n return () => {\n window.removeEventListener('mousemove', move);\n window.removeEventListener('mouseup', up);\n };\n }, [dragging, updateFromPointer]);\n\n const currentAngle = ((value - min) / (max - min)) * 360;\n\n return (\n {\n setDragging(true);\n updateFromPointer(e.clientX, e.clientY);\n }}\n className=\"theme-injected bg-background relative flex cursor-pointer items-center justify-center rounded-lg transition-colors duration-300 select-none\"\n style={{ width: size, height: size }}\n >\n \n {Array.from({ length: tickCount }).map((_, i) => {\n const angle = (i * 360) / tickCount;\n return (\n \n );\n })}\n \n\n \n \n \n\n \n
\n\n \n \n
\n \n \n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "labeled-progress-indicator", "type": "registry:component", "title": "Labeled Progress Indicator", "description": "An animated progress indicator with dynamic labels that update smoothly.", "dependencies": [ "motion" ], "files": [ { "path": "components/watermelon/labeled-progress-indicator.tsx", "type": "registry:component", "content": "'use client';\n\nimport { motion, AnimatePresence } from 'motion/react';\n\nimport { useState, useEffect, type FC } from 'react';\n\nexport interface LabeledProgressIndicatorProps {\n labels: string[];\n progress?: string;\n intervalMs?: number;\n showThemeToggle?: boolean;\n}\n\nexport const LabeledProgressIndicator: FC = ({\n labels,\n progress = '55%',\n intervalMs = 2000,\n}) => {\n const [labelIndex, setLabelIndex] = useState(0);\n\n useEffect(() => {\n const interval = setInterval(() => {\n setLabelIndex((prev) => (prev + 1) % labels.length);\n }, intervalMs);\n\n return () => clearInterval(interval);\n }, [labels.length, intervalMs]);\n\n return (\n
\n
\n \n \n {labels[labelIndex]}\n \n \n
\n\n
\n \n \n \n
\n
\n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "labeled-progress-indicator-base", "type": "registry:component", "title": "Labeled Progress Indicator (base)", "description": "Theme-ready base variant of An animated progress indicator with dynamic labels that update smoothly..", "dependencies": [ "motion" ], "files": [ { "path": "components/watermelon/labeled-progress-indicator.tsx", "type": "registry:component", "content": "'use client';\n\nimport { motion, AnimatePresence } from 'motion/react';\n\nimport { useState, useEffect, type FC } from 'react';\n\nexport interface LabeledProgressIndicatorProps {\n labels: string[];\n progress?: string;\n intervalMs?: number;\n showThemeToggle?: boolean;\n}\n\nexport const LabeledProgressIndicator: FC = ({\n labels,\n progress = '55%',\n intervalMs = 2000,\n}) => {\n const [labelIndex, setLabelIndex] = useState(0);\n\n useEffect(() => {\n const interval = setInterval(() => {\n setLabelIndex((prev) => (prev + 1) % labels.length);\n }, intervalMs);\n\n return () => clearInterval(interval);\n }, [labels.length, intervalMs]);\n\n return (\n
\n
\n \n \n {labels[labelIndex]}\n \n \n
\n\n
\n \n \n \n
\n
\n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "layered-progressive-disclosure", "type": "registry:component", "title": "Layered Progressive Disclosure", "description": "A premium layered progressive disclosure panel with animated feature toggles, asymmetric controls, and tabbed micro-interactions for advanced configuration workflows.", "dependencies": [ "@hugeicons/core-free-icons", "@hugeicons/react", "motion" ], "files": [ { "path": "components/watermelon/layered-progressive-disclosure.tsx", "type": "registry:component", "content": "import { ArrowRight04Icon, PlusSignIcon } from '@hugeicons/core-free-icons';\nimport { HugeiconsIcon } from '@hugeicons/react';\nimport { useState } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\n\nexport interface LayeredProgressiveDisclosureProps {\n title?: string;\n configOptions?: { label: string; value: string | number }[];\n primaryFeatureName?: string;\n secondaryFeatureName?: string;\n asymmetricOptionsName?: string;\n tabs?: [string, string];\n onAddProperty?: () => void;\n onFeatureToggle?: (isActive: boolean) => void;\n onAsymmetricToggle?: (isActive: boolean) => void;\n onTabChange?: (tab: string) => void;\n}\n\nexport default function LayeredProgressiveDisclosure({\n title = 'Configuration',\n configOptions = [\n { label: 'Width', value: '300' },\n { label: 'Height', value: '300' },\n ],\n primaryFeatureName = 'Visual Change',\n secondaryFeatureName = 'Transition',\n asymmetricOptionsName = 'Asymmetric',\n tabs = ['Insertion', 'Removal'],\n onAddProperty,\n onFeatureToggle,\n onAsymmetricToggle,\n onTabChange,\n}: LayeredProgressiveDisclosureProps) {\n const [isAsymmetric, setIsAsymmetric] = useState(false);\n const [isTransition, setIsTransition] = useState(false);\n const [activeTab, setActiveTab] = useState(tabs[0]);\n\n const handleFeatureToggle = () => {\n const newState = !isTransition;\n setIsTransition(newState);\n onFeatureToggle?.(newState);\n };\n\n const handleAsymmetricToggle = () => {\n const newState = !isAsymmetric;\n setIsAsymmetric(newState);\n onAsymmetricToggle?.(newState);\n };\n\n const handleTabChange = (tab: string) => {\n setActiveTab(tab);\n onTabChange?.(tab);\n };\n\n return (\n
\n

\n {title}\n

\n
\n
\n {configOptions.slice(0, 2).map((option, idx) => (\n \n

\n {option.label}\n

\n

\n {option.value}\n

\n
\n ))}\n
\n
\n\n
\n
\n \n
\n \n \n {(isTransition ? secondaryFeatureName : primaryFeatureName)\n .split('')\n .map((char, index) => (\n \n {char}\n \n ))}\n \n \n
\n \n
\n\n \n {isTransition && (\n \n
\n

\n {asymmetricOptionsName}\n

\n \n \n \n
\n \n )}\n \n
\n\n
\n \n {isAsymmetric && (\n \n
\n handleTabChange(tabs[0])}\n className=\"relative z-10 w-full py-2 text-center font-semibold tracking-tight text-neutral-700 dark:text-neutral-200\"\n >\n {tabs[0]}\n {activeTab === tabs[0] && (\n \n )}\n \n handleTabChange(tabs[1])}\n className=\"relative z-10 w-full py-2 text-center font-semibold tracking-tight text-neutral-700 dark:text-neutral-200\"\n >\n {tabs[1]}\n {activeTab === tabs[1] && (\n \n )}\n \n
\n \n )}\n \n\n
\n

\n Opacity\n

\n
\n
\n \n \n {activeTab === tabs[0] ? '0' : '1'}\n \n \n
\n\n \n\n
\n \n \n {activeTab === tabs[0] ? '1' : '0'}\n \n \n
\n
\n
\n\n
\n

\n {' '}\n Blur\n

\n
\n
\n \n \n {activeTab === tabs[0] ? '16' : '0'}\n \n \n
\n\n \n\n
\n \n \n {activeTab === tabs[0] ? '0' : '16'}\n \n \n
\n
\n
\n\n \n {' '}\n Add Property\n \n
\n \n \n );\n}\n\nconst UnfoldMore = ({ onClick }: { onClick?: () => void }) => {\n return (\n \n \n \n \n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "layered-progressive-disclosure-base", "type": "registry:component", "title": "Layered Progressive Disclosure (base)", "description": "Theme-ready base variant of A premium layered progressive disclosure panel with animated feature toggles, asymmetric controls, and tabbed micro-interactions for advanced configuration workflows..", "dependencies": [ "@hugeicons/core-free-icons", "@hugeicons/react", "motion" ], "files": [ { "path": "components/watermelon/layered-progressive-disclosure.tsx", "type": "registry:component", "content": "import { ArrowRight04Icon, PlusSignIcon } from '@hugeicons/core-free-icons';\nimport { HugeiconsIcon } from '@hugeicons/react';\nimport { useState } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\n\nexport interface LayeredProgressiveDisclosureProps {\n title?: string;\n configOptions?: { label: string; value: string | number }[];\n primaryFeatureName?: string;\n secondaryFeatureName?: string;\n asymmetricOptionsName?: string;\n tabs?: [string, string];\n onAddProperty?: () => void;\n onFeatureToggle?: (isActive: boolean) => void;\n onAsymmetricToggle?: (isActive: boolean) => void;\n onTabChange?: (tab: string) => void;\n}\n\nexport default function LayeredProgressiveDisclosure({\n title = 'Configuration',\n configOptions = [\n { label: 'Width', value: '300' },\n { label: 'Height', value: '300' },\n ],\n primaryFeatureName = 'Visual Change',\n secondaryFeatureName = 'Transition',\n asymmetricOptionsName = 'Asymmetric',\n tabs = ['Insertion', 'Removal'],\n onAddProperty,\n onFeatureToggle,\n onAsymmetricToggle,\n onTabChange,\n}: LayeredProgressiveDisclosureProps) {\n const [isAsymmetric, setIsAsymmetric] = useState(false);\n const [isTransition, setIsTransition] = useState(false);\n const [activeTab, setActiveTab] = useState(tabs[0]);\n\n const handleFeatureToggle = () => {\n const newState = !isTransition;\n setIsTransition(newState);\n onFeatureToggle?.(newState);\n };\n\n const handleAsymmetricToggle = () => {\n const newState = !isAsymmetric;\n setIsAsymmetric(newState);\n onAsymmetricToggle?.(newState);\n };\n\n const handleTabChange = (tab: string) => {\n setActiveTab(tab);\n onTabChange?.(tab);\n };\n\n return (\n
\n

\n {title}\n

\n
\n
\n {configOptions.slice(0, 2).map((option, idx) => (\n \n

\n {option.label}\n

\n

\n {option.value}\n

\n
\n ))}\n
\n
\n\n
\n
\n \n
\n \n \n {(isTransition ? secondaryFeatureName : primaryFeatureName)\n .split('')\n .map((char, index) => (\n \n {char}\n \n ))}\n \n \n
\n \n
\n\n \n {isTransition && (\n \n
\n

\n {asymmetricOptionsName}\n

\n \n \n \n
\n \n )}\n \n
\n\n
\n \n {isAsymmetric && (\n \n
\n handleTabChange(tabs[0])}\n className=\"relative z-10 w-full py-2 text-center font-sans font-semibold tracking-tight text-foreground\"\n >\n {tabs[0]}\n {activeTab === tabs[0] && (\n \n )}\n \n handleTabChange(tabs[1])}\n className=\"relative z-10 w-full py-2 text-center font-sans font-semibold tracking-tight text-foreground\"\n >\n {tabs[1]}\n {activeTab === tabs[1] && (\n \n )}\n \n
\n \n )}\n \n\n
\n

\n Opacity\n

\n
\n
\n \n \n {activeTab === tabs[0] ? '0' : '1'}\n \n \n
\n\n \n\n
\n \n \n {activeTab === tabs[0] ? '1' : '0'}\n \n \n
\n
\n
\n\n
\n

\n {' '}\n Blur\n

\n
\n
\n \n \n {activeTab === tabs[0] ? '16' : '0'}\n \n \n
\n\n \n\n
\n \n \n {activeTab === tabs[0] ? '0' : '16'}\n \n \n
\n
\n
\n\n \n {' '}\n Add Property\n \n
\n \n \n );\n}\n\nconst UnfoldMore = ({ onClick }: { onClick?: () => void }) => {\n return (\n \n \n \n \n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "licence-key", "type": "registry:component", "title": "Licence Key", "description": "Interactive micro-interaction component for licence keys.", "dependencies": [ "motion" ], "files": [ { "path": "components/watermelon/licence-key.tsx", "type": "registry:component", "content": "import { AnimatePresence, motion, MotionConfig } from 'motion/react';\nimport { useState } from 'react';\n\nconst springConfig = {\n type: 'spring',\n visualDuration: 0.35,\n bounce: 0.3,\n} as const;\n\nexport default function LicenceKey() {\n const [isOpen, setIsOpen] = useState(false);\n const [value, setValue] = useState('');\n\n const PLACEHOLDER_TEXT = 'License Key';\n\n return (\n \n
\n {\n if (!isOpen) {\n setIsOpen(true);\n }\n }}\n >\n
\n \n {!isOpen && (\n \n I have a{' '}\n \n )}\n \n\n {!isOpen && (\n \n {PLACEHOLDER_TEXT}\n \n )}\n\n \n {isOpen && (\n \n \n {PLACEHOLDER_TEXT}\n \n\n setValue(e.target.value)}\n className=\"flex-1 bg-transparent focus-visible:ring-0 focus-visible:outline-none\"\n />\n\n setIsOpen(false)}\n >\n Activate\n \n
\n )}\n \n
\n \n \n \n );\n}\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "licence-key-base", "type": "registry:component", "title": "Licence Key (base)", "description": "Theme-ready base variant of Interactive micro-interaction component for licence keys..", "dependencies": [ "motion" ], "files": [ { "path": "components/watermelon/licence-key.tsx", "type": "registry:component", "content": "import { AnimatePresence, motion, MotionConfig } from 'motion/react';\nimport { useState } from 'react';\n\nconst springConfig = {\n type: 'spring',\n visualDuration: 0.35,\n bounce: 0.3,\n} as const;\n\nexport default function LicenceKey() {\n const [isOpen, setIsOpen] = useState(false);\n const [value, setValue] = useState('');\n\n const PLACEHOLDER_TEXT = 'License Key';\n\n return (\n \n
\n {\n if (!isOpen) {\n setIsOpen(true);\n }\n }}\n >\n
\n \n {!isOpen && (\n \n I have a{' '}\n \n )}\n \n\n {!isOpen && (\n \n {PLACEHOLDER_TEXT}\n \n )}\n\n \n {isOpen && (\n \n \n {PLACEHOLDER_TEXT}\n \n\n setValue(e.target.value)}\n className=\"text-foreground flex-1 bg-transparent focus-visible:ring-0 focus-visible:outline-none\"\n />\n\n setIsOpen(false)}\n >\n Activate\n \n
\n )}\n \n
\n \n \n \n );\n}\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "list-stack", "type": "registry:component", "title": "List Stack", "description": "An animated stacked list that smoothly expands and collapses to reveal or hide items.", "dependencies": [ "motion", "react-icons" ], "files": [ { "path": "components/watermelon/list-stack.tsx", "type": "registry:component", "content": "'use client';\n\nimport { useState, type FC } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\n\nimport { FaFireFlameCurved, FaSailboat } from 'react-icons/fa6';\nimport { LuTent } from 'react-icons/lu';\nimport { type IconType } from 'react-icons';\n\ninterface ListItem {\n id: string;\n title: string;\n location: string;\n date: string;\n icon: IconType;\n}\n\ninterface ListStackProps {\n items?: ListItem[];\n}\n\nconst ITEMS: ListItem[] = [\n {\n id: '1',\n title: 'Camping',\n location: 'Yosemite Park',\n date: '5 August',\n icon: LuTent,\n },\n {\n id: '2',\n title: 'Boating',\n location: 'Lake Tahoe Park',\n date: '2 August',\n icon: FaSailboat,\n },\n {\n id: '3',\n title: 'Barbecue',\n location: 'Greenfield Shores',\n date: '28 July',\n icon: FaFireFlameCurved,\n },\n];\nconst CARD_HEIGHT = 60;\nconst GAP = 8;\nconst COLLAPSED_OFFSET = -7;\n\nexport const ListStack: FC = ({ items = ITEMS }) => {\n const [isExpanded, setIsExpanded] = useState(false);\n\n return (\n
\n
\n
\n {items.map((item, i) => {\n return (\n \n
\n \n
\n \n
\n
\n

\n {item.title}\n

\n

\n {item.location}\n

\n
\n\n \n {item.date}\n \n
\n
\n \n );\n })}\n {\n setIsExpanded((prev) => !prev);\n }}\n >\n \n \n {' '}\n {isExpanded ? 'Hide ' : 'Show '}\n \n \n \n
\n
\n \n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "list-stack-base", "type": "registry:component", "title": "List Stack (base)", "description": "Theme-ready base variant of An animated stacked list that smoothly expands and collapses to reveal or hide items..", "dependencies": [ "motion", "react-icons" ], "files": [ { "path": "components/watermelon/list-stack.tsx", "type": "registry:component", "content": "'use client';\n\nimport { useState, type FC } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\n\nimport { FaFireFlameCurved, FaSailboat } from 'react-icons/fa6';\nimport { LuTent } from 'react-icons/lu';\nimport { type IconType } from 'react-icons';\n\ninterface ListItem {\n id: string;\n title: string;\n location: string;\n date: string;\n icon: IconType;\n}\n\ninterface ListStackProps {\n items?: ListItem[];\n}\n\nconst ITEMS: ListItem[] = [\n {\n id: '1',\n title: 'Camping',\n location: 'Yosemite Park',\n date: '5 August',\n icon: LuTent,\n },\n {\n id: '2',\n title: 'Boating',\n location: 'Lake Tahoe Park',\n date: '2 August',\n icon: FaSailboat,\n },\n {\n id: '3',\n title: 'Barbecue',\n location: 'Greenfield Shores',\n date: '28 July',\n icon: FaFireFlameCurved,\n },\n];\nconst CARD_HEIGHT = 60;\nconst GAP = 8;\nconst COLLAPSED_OFFSET = -7;\n\nexport const ListStack: FC = ({ items = ITEMS }) => {\n const [isExpanded, setIsExpanded] = useState(false);\n\n return (\n
\n
\n
\n {items.map((item, i) => {\n return (\n \n
\n \n
\n \n
\n
\n

{item.title}

\n

\n {item.location}\n

\n
\n\n \n {item.date}\n \n
\n
\n \n );\n })}\n {\n setIsExpanded((prev) => !prev);\n }}\n >\n \n \n {' '}\n {isExpanded ? 'Hide ' : 'Show '}\n \n \n \n
\n
\n \n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "macos-sidebar", "type": "registry:component", "title": "macOS Sidebar", "description": "A premium macOS-style collapsible sidebar with smooth spring-driven width transitions, hover morphing, and tactile selection feedback.", "dependencies": [ "@hugeicons/core-free-icons", "@hugeicons/react", "motion" ], "files": [ { "path": "components/watermelon/macos-sidebar.tsx", "type": "registry:component", "content": "\"use client\";\n\nimport { PlusSignIcon, SidebarLeftIcon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { motion, AnimatePresence } from \"motion/react\";\nimport { useState, type ReactNode } from \"react\";\n\nexport interface MacOSSidebarProps {\n items: string[];\n defaultOpen?: boolean;\n initialSelectedIndex?: number;\n children?: ReactNode;\n className?: string;\n}\n\nexport function MacOSSidebar({\n items,\n defaultOpen = true,\n initialSelectedIndex = 0,\n children,\n className = \"\",\n}: MacOSSidebarProps) {\n const [hoveredIndex, setHoveredIndex] = useState(null);\n const [selectedIndex, setSelectedIndex] =\n useState(initialSelectedIndex);\n const [isOpen, setIsOpen] = useState(defaultOpen);\n\n return (\n \n \n \n \n {isOpen && (\n \n \n \n )}\n \n \n setIsOpen(!isOpen)}\n />\n \n \n\n \n {isOpen && (\n setHoveredIndex(null)}\n >\n {items.map((item, index) => (\n setHoveredIndex(index)}\n onClick={() => setSelectedIndex(index)}\n >\n \n {selectedIndex === index && (\n \n )}\n \n \n {item}\n

\n \n {hoveredIndex === index && selectedIndex !== index && (\n \n )}\n \n \n ))}\n \n )}\n \n \n\n
\n {children}\n
\n \n );\n}\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "macos-sidebar-base", "type": "registry:component", "title": "macOS Sidebar (base)", "description": "Theme-ready base variant of A premium macOS-style collapsible sidebar with smooth spring-driven width transitions, hover morphing, and tactile selection feedback..", "dependencies": [ "@hugeicons/core-free-icons", "@hugeicons/react", "motion" ], "files": [ { "path": "components/watermelon/macos-sidebar.tsx", "type": "registry:component", "content": "'use client';\n\nimport { PlusSignIcon, SidebarLeftIcon } from '@hugeicons/core-free-icons';\nimport { HugeiconsIcon } from '@hugeicons/react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport { useState, type ReactNode } from 'react';\n\nexport interface MacOSSidebarProps {\n items: string[];\n defaultOpen?: boolean;\n initialSelectedIndex?: number;\n children?: ReactNode;\n className?: string;\n}\n\nexport function MacOSSidebar({\n items,\n defaultOpen = true,\n initialSelectedIndex = 0,\n children,\n className = '',\n}: MacOSSidebarProps) {\n const [hoveredIndex, setHoveredIndex] = useState(null);\n const [selectedIndex, setSelectedIndex] =\n useState(initialSelectedIndex);\n const [isOpen, setIsOpen] = useState(defaultOpen);\n\n return (\n \n \n \n \n {isOpen && (\n \n \n \n )}\n \n \n setIsOpen(!isOpen)}\n />\n \n \n\n \n {isOpen && (\n setHoveredIndex(null)}\n >\n {items.map((item, index) => (\n setHoveredIndex(index)}\n onClick={() => setSelectedIndex(index)}\n >\n \n {selectedIndex === index && (\n \n )}\n \n \n {item}\n

\n \n {hoveredIndex === index && selectedIndex !== index && (\n \n )}\n \n \n ))}\n \n )}\n \n \n\n
\n {children}\n
\n \n );\n}\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "meeting-card", "type": "registry:component", "title": "Meeting Card", "description": "Summarize meeting details with time, participants, and quick action controls.", "dependencies": [ "lucide-react", "motion" ], "files": [ { "path": "components/watermelon/meeting-card.tsx", "type": "registry:component", "content": "\"use client\";\n\nimport React, { useState } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport {\n ChevronUp, Calendar, Clock, Bell, Video, Users,\n Link as LinkIcon, MoreHorizontal\n} from 'lucide-react';\n\ninterface Participant {\n name: string;\n avatar: string;\n}\n\ninterface MeetingCardProps {\n title: string;\n date: string;\n time: string;\n duration: string;\n meetingLink: string;\n notification: string;\n recording?: boolean;\n aiNotes?: boolean;\n participants: Participant[];\n description: string;\n}\n\nexport const MeetingCard: React.FC = ({\n title, date, time, duration, meetingLink, notification,\n participants, description\n}) => {\n const [expanded, setExpanded] = useState(true);\n const [theme] = useState<'light' | 'dark'>('light');\n const [isRecording, setIsRecording] = useState(true);\n const [isAiEnabled, setIsAiEnabled] = useState(true);\n\n const spring = { type: 'spring', stiffness: 300, damping: 30 } as const;\n\n return (\n
\n
\n
\n \n setExpanded(!expanded)}\n >\n
\n
\n \n
\n
\n

{title}

\n

Today, {time}

\n
\n
\n\n
\n
\n {participants.slice(0, 3).map((p, i) => (\n {p.name}\n ))}\n
\n \n \n \n
\n
\n\n \n {expanded && (\n \n
\n } label=\"Date\">\n {date}\n \n\n } label=\"Time\">\n
\n {time}\n to\n {duration}\n
\n \n\n } label=\"Link\">\n \n \n {meetingLink}\n \n \n\n } label=\"Notification\">\n {notification}\n \n\n } label=\"Recording\">\n \n \n\n } label=\"AI notetaking\">\n \n \n\n {/* Participants */}\n
\n

Participants

\n
\n {participants.map((p, i) => (\n
\n \"\"\n {p.name}\n
\n ))}\n
\n
\n\n {/* Description */}\n
\n

Description

\n

{description}

\n
\n
\n\n {/* Footer */}\n
\n

Going?

\n
\n {['Yes', 'No', 'Maybe'].map((opt) => (\n \n {opt}\n \n ))}\n
\n
\n \n )}\n \n \n
\n
\n \n );\n};\n\nconst Row = ({ icon, label, children }: { icon: React.ReactNode; label: string; children: React.ReactNode; }) => (\n
\n
\n {icon}\n {label}\n
\n
{children}
\n
\n);\n\nconst Tag = ({ children, className = \"\" }: { children: React.ReactNode; className?: string }) => (\n
\n {children}\n
\n);\n\nconst Toggle = ({ active, onChange }: { active: boolean; onChange: (v: boolean) => void; }) => {\n return (\n onChange(!active)}\n className={`w-9 h-5 rounded-full px-1 flex items-center cursor-pointer transition-colors duration-200 ${active ? \"bg-[#EAF7EA] dark:bg-green-500/20\" : \"bg-[#F3F4F6] dark:bg-white/10\"\n }`}\n >\n \n \n );\n};" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "meeting-card-base", "type": "registry:component", "title": "Meeting Card (base)", "description": "Theme-ready base variant of Summarize meeting details with time, participants, and quick action controls..", "dependencies": [ "lucide-react", "motion" ], "files": [ { "path": "components/watermelon/meeting-card.tsx", "type": "registry:component", "content": "'use client';\n\nimport React, { useState } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport {\n ChevronUp,\n Calendar,\n Clock,\n Bell,\n Video,\n Users,\n Link as LinkIcon,\n MoreHorizontal,\n} from 'lucide-react';\n\ninterface Participant {\n name: string;\n avatar: string;\n}\n\ninterface MeetingCardProps {\n title: string;\n date: string;\n time: string;\n duration: string;\n meetingLink: string;\n notification: string;\n recording?: boolean;\n aiNotes?: boolean;\n participants: Participant[];\n description: string;\n}\n\nexport const MeetingCard: React.FC = ({\n title,\n date,\n time,\n duration,\n meetingLink,\n notification,\n participants,\n description,\n}) => {\n const [expanded, setExpanded] = useState(true);\n const [theme] = useState<'light' | 'dark'>('light');\n const [isRecording, setIsRecording] = useState(true);\n const [isAiEnabled, setIsAiEnabled] = useState(true);\n\n const spring = { type: 'spring', stiffness: 300, damping: 30 } as const;\n\n return (\n
\n
\n
\n \n setExpanded(!expanded)}\n >\n
\n
\n \n
\n
\n

\n {title}\n

\n

Today, {time}

\n
\n
\n\n
\n
\n {participants.slice(0, 3).map((p, i) => (\n \n ))}\n
\n \n \n \n
\n
\n\n \n {expanded && (\n \n
\n } label=\"Date\">\n {date}\n \n\n } label=\"Time\">\n
\n {time}\n \n to\n \n {duration}\n
\n \n\n } label=\"Link\">\n \n \n {meetingLink}\n \n \n\n } label=\"Notification\">\n {notification}\n \n\n } label=\"Recording\">\n \n \n\n } label=\"AI notetaking\">\n \n \n\n {/* Participants */}\n
\n

\n Participants\n

\n
\n {participants.map((p, i) => (\n \n \n \n {p.name}\n \n
\n ))}\n
\n
\n\n {/* Description */}\n
\n

\n Description\n

\n

\n {description}\n

\n
\n
\n\n {/* Footer */}\n
\n

\n Going?\n

\n
\n {['Yes', 'No', 'Maybe'].map((opt) => (\n \n {opt}\n \n ))}\n
\n
\n \n )}\n \n \n
\n \n \n );\n};\n\nconst Row = ({\n icon,\n label,\n children,\n}: {\n icon: React.ReactNode;\n label: string;\n children: React.ReactNode;\n}) => (\n
\n
\n {icon}\n {label}\n
\n
{children}
\n
\n);\n\nconst Tag = ({\n children,\n className = '',\n}: {\n children: React.ReactNode;\n className?: string;\n}) => (\n \n {children}\n \n);\n\nconst Toggle = ({\n active,\n onChange,\n}: {\n active: boolean;\n onChange: (v: boolean) => void;\n}) => {\n return (\n onChange(!active)}\n className={`flex h-6 w-10 cursor-pointer items-center rounded-full px-1 transition-colors duration-200 ${\n active ? 'bg-primary/20' : 'bg-muted'\n }`}\n >\n \n \n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "minimal-carousel", "type": "registry:component", "title": "Minimal Carousel", "description": "Interactive wallet interface with expandable cards featuring smooth layout animations and micro-interactions.", "dependencies": [ "lucide-react", "motion" ], "files": [ { "path": "components/watermelon/minimal-carousel.tsx", "type": "registry:component", "content": "\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion, AnimatePresence } from \"motion/react\";\nimport { MoreHorizontal, Copy } from \"lucide-react\";\n\n/* --- Types --- */\nexport interface CarouselCard {\n id: string;\n title: string;\n value: string;\n color: string;\n icon: React.ElementType;\n}\n\ninterface MinimalCarouselProps {\n cards: CarouselCard[];\n onCopyClick?: (card: CarouselCard) => void;\n onCustomizeClick?: (card: CarouselCard) => void;\n}\n\nexport const MinimalCarousel: React.FC = ({\n cards,\n onCopyClick,\n onCustomizeClick,\n}) => {\n const [activeId, setActiveId] = useState(null);\n\n const activeCard = cards.find((c) => c.id === activeId);\n const secondaryCards = cards.filter((c) => c.id !== activeId);\n\n const handleBackgroundClick = (e: React.MouseEvent) => {\n if (e.target === e.currentTarget) setActiveId(null);\n };\n\n return (\n
\n \n {/* Container */}\n
\n \n\n {/* Expanded Card */}\n \n {activeCard && (\n \n
\n
\n \n
\n\n {\n e.stopPropagation();\n onCopyClick?.(activeCard);\n }}\n className=\"flex items-center gap-1.5 rounded-full bg-white/10\n px-3 py-1.5 sm:px-4 sm:py-2 font-bold backdrop-blur-md \n text-xs sm:text-base whitespace-nowrap\n hover:bg-white/20 transition-colors\"\n >\n Copy Address \n \n
\n\n
\n
\n

\n {activeCard.title}\n

\n

\n {activeCard.value}\n

\n
\n\n {\n e.stopPropagation();\n onCustomizeClick?.(activeCard);\n }}\n className=\"rounded-full bg-white/30 px-3 py-1 sm:px-4 sm:py-1.5\n text-sm sm:text-base font-bold backdrop-blur-md \n hover:bg-white/40 transition-colors shrink-0\"\n >\n Edit\n \n
\n \n )}\n \n\n {/* Grid Layout */}\n \n {(activeId ? secondaryCards : cards).map((card) => (\n {\n e.stopPropagation();\n setActiveId(card.id);\n }}\n transition={{ type: \"spring\", bounce: 0.2, duration: 0.6 }}\n className={`relative flex flex-col justify-between cursor-pointer\n rounded-[22px] sm:rounded-[28px] p-3 sm:p-4 text-white shadow-lg\n ${card.color}\n ${activeId ? \"h-24 sm:h-28\" : \"h-28 sm:h-32\"}`}\n >\n
\n \n
\n \n
\n
\n\n
\n

\n {card.title}\n

\n

\n {card.value}\n

\n
\n \n ))}\n \n \n
\n
\n \n );\n};" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "minimal-carousel-base", "type": "registry:component", "title": "Minimal Carousel (base)", "description": "Theme-ready base variant of Interactive wallet interface with expandable cards featuring smooth layout animations and micro-interactions..", "dependencies": [ "lucide-react", "motion" ], "files": [ { "path": "components/watermelon/minimal-carousel.tsx", "type": "registry:component", "content": "\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion, AnimatePresence } from \"motion/react\";\nimport { MoreHorizontal, Copy } from \"lucide-react\";\n\n/* --- Types --- */\nexport interface CarouselCard {\n id: string;\n title: string;\n value: string;\n color: string;\n icon: React.ElementType;\n}\n\ninterface MinimalCarouselProps {\n cards: CarouselCard[];\n onCopyClick?: (card: CarouselCard) => void;\n onCustomizeClick?: (card: CarouselCard) => void;\n}\n\nexport const MinimalCarousel: React.FC = ({\n cards,\n onCopyClick,\n onCustomizeClick,\n}) => {\n const [activeId, setActiveId] = useState(null);\n\n const activeCard = cards.find((c) => c.id === activeId);\n const secondaryCards = cards.filter((c) => c.id !== activeId);\n\n const handleBackgroundClick = (e: React.MouseEvent) => {\n if (e.target === e.currentTarget) setActiveId(null);\n };\n\n return (\n
\n \n {/* Container */}\n
\n \n\n {/* Expanded Card */}\n \n {activeCard && (\n \n
\n
\n \n
\n\n {\n e.stopPropagation();\n onCopyClick?.(activeCard);\n }}\n className=\"flex items-center gap-1.5 rounded-full border border-white/30 bg-white/15\n px-3 py-1.5 sm:px-4 sm:py-2 font-bold backdrop-blur-md \n text-xs sm:text-base whitespace-nowrap\n hover:bg-white/20 transition-colors\"\n >\n Copy Address \n \n
\n\n
\n
\n

\n {activeCard.title}\n

\n

\n {activeCard.value}\n

\n
\n\n {\n e.stopPropagation();\n onCustomizeClick?.(activeCard);\n }}\n className=\"rounded-full border border-white/30 bg-white/25 px-3 py-1.5 sm:px-4 sm:py-2\n text-sm sm:text-base font-bold backdrop-blur-md \n hover:bg-white/40 transition-colors shrink-0\"\n >\n Edit\n \n
\n \n )}\n \n\n {/* Grid Layout */}\n \n {(activeId ? secondaryCards : cards).map((card) => (\n {\n e.stopPropagation();\n setActiveId(card.id);\n }}\n transition={{ type: \"spring\", bounce: 0.2, duration: 0.6 }}\n className={`relative flex flex-col justify-between cursor-pointer\n rounded-xl sm:rounded-2xl border border-white/15 p-3 sm:p-4 text-white shadow-md\n ${card.color}\n ${activeId ? \"h-24 sm:h-28\" : \"h-28 sm:h-32\"}`}\n >\n
\n \n
\n \n
\n
\n\n
\n

\n {card.title}\n

\n

\n {card.value}\n

\n
\n \n ))}\n \n \n
\n
\n \n );\n};" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "morphing-button", "type": "registry:component", "title": "Morphing Button", "description": "An animated button that smoothly morphs into an expanded interactive state.", "dependencies": [ "motion", "react-icons" ], "files": [ { "path": "components/watermelon/morphing-button.tsx", "type": "registry:component", "content": "import React, { useState, useRef, useEffect } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport { FaBell } from 'react-icons/fa6';\n\ninterface MorphingButtonProps {\n buttonText?: string;\n placeholder?: string;\n onSubmit?: (email: string) => void;\n className?: string;\n}\n\nexport const MorphingButton: React.FC = ({\n buttonText = 'Notify Me',\n placeholder = 'Email',\n onSubmit,\n className = '',\n}) => {\n const [isExpanded, setIsExpanded] = useState(false);\n const [email, setEmail] = useState('');\n const containerRef = useRef(null);\n const inputRef = useRef(null);\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (\n containerRef.current &&\n !containerRef.current.contains(event.target as Node)\n ) {\n setIsExpanded(false);\n }\n };\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, []);\n\n useEffect(() => {\n if (isExpanded && inputRef.current) {\n inputRef.current.focus();\n }\n }, [isExpanded]);\n\n const handleToggle = (e: React.MouseEvent) => {\n if (!isExpanded) {\n e.stopPropagation();\n setIsExpanded(true);\n } else if (email) {\n onSubmit?.(email);\n setIsExpanded(false);\n setEmail('');\n }\n };\n\n const springConfig = {\n type: 'spring',\n stiffness: 240,\n damping: 18,\n mass: 1.1,\n } as const;\n\n return (\n
\n \n \n \n {isExpanded && (\n \n setEmail(e.target.value)}\n placeholder={placeholder}\n className=\"w-full bg-transparent text-xl font-semibold text-[#18181B] placeholder-[#A1A1AA] transition-colors outline-none dark:text-[#fefefe] dark:placeholder-[#B2B2B2]\"\n onKeyDown={(e) => {\n if (e.key === 'Enter' && email) {\n onSubmit?.(email);\n setIsExpanded(false);\n setEmail('');\n }\n }}\n />\n \n )}\n \n\n \n \n {!isExpanded && (\n \n \n \n )}\n \n\n \n {buttonText}\n \n \n \n
\n \n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "morphing-button-base", "type": "registry:component", "title": "Morphing Button (base)", "description": "Theme-ready base variant of An animated button that smoothly morphs into an expanded interactive state..", "dependencies": [ "motion", "react-icons" ], "files": [ { "path": "components/watermelon/morphing-button.tsx", "type": "registry:component", "content": "import React, { useState, useRef, useEffect } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport { FaBell } from 'react-icons/fa6';\n\ninterface MorphingButtonProps {\n buttonText?: string;\n placeholder?: string;\n onSubmit?: (email: string) => void;\n className?: string;\n}\n\nexport const MorphingButton: React.FC = ({\n buttonText = 'Notify Me',\n placeholder = 'Email',\n onSubmit,\n className = '',\n}) => {\n const [isExpanded, setIsExpanded] = useState(false);\n const [email, setEmail] = useState('');\n const containerRef = useRef(null);\n const inputRef = useRef(null);\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (\n containerRef.current &&\n !containerRef.current.contains(event.target as Node)\n ) {\n setIsExpanded(false);\n }\n };\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, []);\n\n useEffect(() => {\n if (isExpanded && inputRef.current) {\n inputRef.current.focus();\n }\n }, [isExpanded]);\n\n const handleToggle = (e: React.MouseEvent) => {\n if (!isExpanded) {\n e.stopPropagation();\n setIsExpanded(true);\n } else if (email) {\n onSubmit?.(email);\n setIsExpanded(false);\n setEmail('');\n }\n };\n\n const springConfig = {\n type: 'spring',\n stiffness: 240,\n damping: 18,\n mass: 1.1,\n } as const;\n\n return (\n
\n \n \n \n {isExpanded && (\n \n setEmail(e.target.value)}\n placeholder={placeholder}\n className=\"text-card-foreground placeholder:text-muted-foreground w-full bg-transparent text-xl font-semibold transition-colors outline-none\"\n onKeyDown={(e) => {\n if (e.key === 'Enter' && email) {\n onSubmit?.(email);\n setIsExpanded(false);\n setEmail('');\n }\n }}\n />\n \n )}\n \n\n \n \n {!isExpanded && (\n \n \n \n )}\n \n\n \n {buttonText}\n \n \n \n
\n \n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "morphing-discovery-bar", "type": "registry:component", "title": "Morphing Discovery Bar", "description": "A responsive extended toolbar component that enhances usability with smooth micro-interactions, contextual actions, and instant visual feedback for quick and confident user interactions.", "dependencies": [ "lucide-react", "motion" ], "files": [ { "path": "components/watermelon/morphing-discovery-bar.tsx", "type": "registry:component", "content": "'use client';\n\nimport React, { useState, useRef, useEffect } from 'react';\nimport { motion, AnimatePresence, LayoutGroup } from 'motion/react';\nimport { Search, X } from 'lucide-react';\n\n/* ---------- Types ---------- */\nexport interface Category {\n id: string;\n label: string;\n icon: React.ReactNode;\n activeColor: string;\n activeTextColor: string;\n}\n\nexport interface MorphingDiscoveryBarProps {\n categories: Category[];\n className?: string;\n}\n\n/* ---------- Motion Settings ---------- */\nconst transition = {\n type: 'spring',\n bounce: 0.3,\n duration: 0.7,\n} as const;\n\nexport const MorphingDiscoveryBar: React.FC = ({\n categories,\n className = '',\n}) => {\n const [isSearching, setIsSearching] = useState(false);\n const [activeTab, setActiveTab] = useState(categories[0]?.id);\n const [searchValue, setSearchValue] = useState('');\n const inputRef = useRef(null);\n\n useEffect(() => {\n if (isSearching) {\n const timer = setTimeout(() => inputRef.current?.focus(), 100);\n return () => clearTimeout(timer);\n }\n }, [isSearching]);\n\n return (\n \n {/* Container height adjusted for mobile flow */}\n
\n \n \n {/* SEARCH COMPONENT */}\n \n
\n \n \n \n\n \n {isSearching && (\n setSearchValue(e.target.value)}\n />\n )}\n \n\n {!isSearching && (\n setIsSearching(true)}\n />\n )}\n
\n \n\n {/* CATEGORIES */}\n \n {!isSearching ? (\n \n {categories.map((cat) => {\n const isActive = activeTab === cat.id;\n\n return (\n setActiveTab(cat.id)}\n className={`relative z-0 flex items-center gap-1.5 rounded-full px-3 py-2 text-xs font-bold tracking-tight whitespace-nowrap transition-colors sm:gap-2 sm:px-6 sm:py-3 sm:text-lg`}\n style={{\n color: isActive ? cat.activeTextColor : undefined,\n }}\n >\n {!isActive && (\n \n )}\n\n {isActive && (\n \n )}\n \n {cat.icon}\n \n \n {cat.label}\n \n \n );\n })}\n \n ) : (\n {\n setIsSearching(false);\n setSearchValue('');\n }}\n className=\"flex h-12 w-12 shrink-0 items-center justify-center rounded-full border border-neutral-100 bg-white text-neutral-900 shadow-sm transition-colors sm:h-14 sm:w-14 dark:border-neutral-800 dark:bg-neutral-900 dark:text-white\"\n >\n \n \n )}\n \n \n \n
\n \n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "morphing-discovery-bar-base", "type": "registry:component", "title": "Morphing Discovery Bar (base)", "description": "Theme-ready base variant of A responsive extended toolbar component that enhances usability with smooth micro-interactions, contextual actions, and instant visual feedback for quick and confident user interactions..", "dependencies": [ "lucide-react", "motion" ], "files": [ { "path": "components/watermelon/morphing-discovery-bar.tsx", "type": "registry:component", "content": "'use client';\n\nimport React, { useState, useRef, useEffect } from 'react';\nimport { motion, AnimatePresence, LayoutGroup } from 'motion/react';\nimport { Search, X } from 'lucide-react';\n\nexport interface Category {\n id: string;\n label: string;\n icon: React.ReactNode;\n activeColor: string;\n activeTextColor: string;\n}\n\nexport interface MorphingDiscoveryBarProps {\n categories: Category[];\n className?: string;\n}\n\nconst transition = {\n type: 'spring',\n bounce: 0.3,\n duration: 0.7,\n} as const;\n\nexport const MorphingDiscoveryBar: React.FC = ({\n categories,\n className = '',\n}) => {\n const [isSearching, setIsSearching] = useState(false);\n const [activeTab, setActiveTab] = useState(categories[0]?.id);\n const [searchValue, setSearchValue] = useState('');\n const inputRef = useRef(null);\n\n useEffect(() => {\n if (isSearching) {\n const timer = setTimeout(() => inputRef.current?.focus(), 100);\n return () => clearTimeout(timer);\n }\n }, [isSearching]);\n\n return (\n \n
\n \n \n \n
\n \n \n \n\n \n {isSearching && (\n setSearchValue(e.target.value)}\n />\n )}\n \n\n {!isSearching && (\n setIsSearching(true)}\n />\n )}\n
\n \n\n \n {!isSearching ? (\n \n {categories.map((cat) => {\n const isActive = activeTab === cat.id;\n\n return (\n setActiveTab(cat.id)}\n className=\"relative z-0 flex items-center gap-1.5 rounded-lg px-3 py-2 text-xs font-bold tracking-tight whitespace-nowrap transition-colors sm:gap-2 sm:px-6 sm:py-3 sm:text-lg\"\n style={{\n color: isActive ? cat.activeTextColor : undefined,\n }}\n >\n {!isActive && (\n \n )}\n\n {isActive && (\n \n )}\n \n {cat.icon}\n \n \n {cat.label}\n \n \n );\n })}\n \n ) : (\n {\n setIsSearching(false);\n setSearchValue('');\n }}\n className=\"border-border bg-background text-foreground flex h-12 w-12 shrink-0 items-center justify-center rounded-lg border shadow-sm transition-colors sm:h-14 sm:w-14\"\n >\n \n \n )}\n \n \n \n
\n \n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "morphing-sidebar-controls", "type": "registry:component", "title": "Morphing Sidebar Controls", "description": "A premium morphing sidebar control panel with progressive configuration, motion presets, and animated layout transitions for advanced animation workflows.", "dependencies": [ "@hugeicons/core-free-icons", "@hugeicons/react", "motion" ], "files": [ { "path": "components/watermelon/morphing-sidebar-controls.tsx", "type": "registry:component", "content": "import {\n ArrowLeft02Icon,\n ArrowRight04Icon,\n PlayIcon,\n PlusSignIcon,\n ZapIcon,\n} from '@hugeicons/core-free-icons';\nimport { HugeiconsIcon } from '@hugeicons/react';\nimport { useState } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\n\nexport interface MorphingSidebarControlsProps {\n title?: string;\n configOptions?: { label: string; value: string | number }[];\n primaryFeatureName?: string;\n secondaryFeatureName?: string;\n asymmetricOptionsName?: string;\n tabs?: [string, string];\n types?: string[];\n easeOptions?: { icons: React.ReactNode; title: string }[];\n sliderConfigs?: {\n name: string;\n insertion: [string | number, string | number];\n removal: [string | number, string | number];\n }[];\n onAddProperty?: () => void;\n onFeatureToggle?: (isActive: boolean) => void;\n onAsymmetricToggle?: (isActive: boolean) => void;\n onTabChange?: (tab: string) => void;\n onTypeChange?: (type: string) => void;\n onEaseChange?: (easeTitle: string) => void;\n}\n\nexport default function MorphingSidebarControls({\n title = 'Configuration',\n configOptions = [\n { label: 'Width', value: '300' },\n { label: 'Height', value: '300' },\n ],\n primaryFeatureName = 'Visual Change',\n secondaryFeatureName = 'Transition',\n asymmetricOptionsName = 'Asymmetric',\n tabs = ['Insertion', 'Removal'],\n types = ['Spring', 'Cubic'],\n easeOptions,\n sliderConfigs = [\n {\n name: 'Opacity',\n insertion: ['0', '1'],\n removal: ['1', '0'],\n },\n {\n name: 'Blur',\n insertion: ['16', '0'],\n removal: ['0', '16'],\n },\n ],\n onAddProperty,\n onFeatureToggle,\n onAsymmetricToggle,\n onTabChange,\n onTypeChange,\n onEaseChange,\n}: MorphingSidebarControlsProps) {\n const [isAsymmetric, setIsAsymmetric] = useState(false);\n const [isTransition, setIsTransition] = useState(false);\n const [activeTab, setActiveTab] = useState(tabs[0]);\n const [activeType, setActiveType] = useState(types[0]);\n const [activeEase, setActiveEase] = useState('Smooth');\n const [isMotion, setIsMotion] = useState(false);\n\n const handleFeatureToggle = () => {\n const newState = !isTransition;\n setIsTransition(newState);\n onFeatureToggle?.(newState);\n };\n\n const handleAsymmetricToggle = () => {\n const newState = !isAsymmetric;\n setIsAsymmetric(newState);\n onAsymmetricToggle?.(newState);\n };\n\n const handleTabChange = (tab: string) => {\n setActiveTab(tab);\n onTabChange?.(tab);\n };\n\n const handleTypeChange = (type: string) => {\n setActiveType(type);\n onTypeChange?.(type);\n };\n\n const handleEaseChange = (easeTitle: string) => {\n setActiveEase(easeTitle);\n onEaseChange?.(easeTitle);\n };\n\n const resolvedEaseOptions = easeOptions || [\n { icons: , title: 'Smooth' },\n { icons: , title: 'Bouncy' },\n { icons: , title: 'Snappy' },\n { icons: , title: 'Custom' },\n ];\n\n return (\n
\n
\n
\n \n {isMotion && (\n setIsMotion(!isMotion)}\n className=\"cursor-pointer rounded-full bg-neutral-900 p-2\"\n >\n \n \n )}\n\n {!isMotion && (\n \n {title}\n \n )}\n\n {isMotion && (\n \n Motion\n \n )}\n\n {!isMotion && (\n setIsMotion(!isMotion)}\n className=\"cursor-pointer rounded-full bg-neutral-900 p-2\"\n >\n \n \n )}\n \n
\n
\n \n
\n
\n\n \n {!isMotion && (\n \n
\n
\n {configOptions.slice(0, 2).map((option, idx) => (\n \n

\n {option.label}\n

\n

\n {option.value}\n

\n
\n ))}\n
\n
\n\n
\n
\n \n
\n \n \n {(isTransition\n ? secondaryFeatureName\n : primaryFeatureName\n )\n .split('')\n .map((char, index) => (\n \n {char}\n \n ))}\n \n \n
\n \n
\n\n \n {isTransition && (\n \n
\n

\n {asymmetricOptionsName}\n

\n \n \n \n
\n \n )}\n \n
\n\n
\n \n {isAsymmetric && (\n \n
\n handleTabChange(tabs[0])}\n className=\"relative z-10 w-full py-2 text-center font-semibold tracking-tight text-neutral-700 dark:text-neutral-200\"\n >\n {tabs[0]}\n {activeTab === tabs[0] && (\n \n )}\n \n handleTabChange(tabs[1])}\n className=\"relative z-10 w-full py-2 text-center font-semibold tracking-tight text-neutral-700 dark:text-neutral-200\"\n >\n {tabs[1]}\n {activeTab === tabs[1] && (\n \n )}\n \n
\n \n )}\n \n\n {sliderConfigs.map((config, idx) => {\n const val1 =\n activeTab === tabs[0]\n ? config.insertion[0]\n : config.removal[0];\n const val2 =\n activeTab === tabs[0]\n ? config.insertion[1]\n : config.removal[1];\n\n return (\n \n

\n {config.name}\n

\n
\n
\n \n \n {val1}\n \n \n
\n\n \n\n
\n \n \n {val2}\n \n \n
\n
\n
\n );\n })}\n\n \n {' '}\n Add Property\n \n \n \n \n )}\n\n {isMotion && (\n \n \n \n
\n handleTypeChange(types[0])}\n className=\"relative z-10 w-full py-2 text-center font-semibold tracking-tight text-neutral-700 dark:text-neutral-200\"\n >\n {types[0]}\n {activeType === types[0] && (\n \n )}\n \n handleTypeChange(types[1])}\n className=\"relative z-10 w-full py-2 text-center font-semibold tracking-tight text-neutral-700 dark:text-neutral-200\"\n >\n {types[1]}\n {activeType === types[1] && (\n \n )}\n \n
\n \n \n
\n {resolvedEaseOptions.map((item) => {\n const isActive = activeEase === item.title;\n return (\n handleEaseChange(item.title)}\n className={`group flex aspect-square w-full cursor-pointer flex-col items-center justify-between rounded-[36px] p-4 transition-all duration-300 active:scale-[0.98] ${\n isActive\n ? 'border-[6px] bg-neutral-300 text-neutral-900 shadow-sm dark:bg-neutral-700/80 dark:text-neutral-100'\n : 'text-neutral-1000 bg-neutral-200 hover:bg-neutral-300/50 hover:text-neutral-700 dark:bg-neutral-800 dark:text-neutral-400 dark:hover:bg-neutral-700/50 dark:hover:text-neutral-300'\n }`}\n >\n
\n {item.icons}\n
\n \n {item.title}\n

\n
\n );\n })}\n \n \n )}\n \n \n );\n}\n\nconst UnfoldMore = ({ onClick }: { onClick?: () => void }) => {\n return (\n \n \n \n \n );\n};\n\nconst SmoothCurve = () => {\n return (\n \n \n \n \n \n );\n};\n\nconst Bouncy = () => {\n return (\n \n \n \n \n \n \n );\n};\n\nconst Snappy = () => {\n return (\n \n \n \n \n \n \n \n );\n};\n\nconst Custom = () => {\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "morphing-sidebar-controls-base", "type": "registry:component", "title": "Morphing Sidebar Controls (base)", "description": "Theme-ready base variant of A premium morphing sidebar control panel with progressive configuration, motion presets, and animated layout transitions for advanced animation workflows..", "dependencies": [ "@hugeicons/core-free-icons", "@hugeicons/react", "motion" ], "files": [ { "path": "components/watermelon/morphing-sidebar-controls.tsx", "type": "registry:component", "content": "import {\n ArrowLeft02Icon,\n ArrowRight04Icon,\n PlayIcon,\n PlusSignIcon,\n ZapIcon,\n} from '@hugeicons/core-free-icons';\nimport { HugeiconsIcon } from '@hugeicons/react';\nimport { useState } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\n\nexport interface MorphingSidebarControlsProps {\n title?: string;\n configOptions?: { label: string; value: string | number }[];\n primaryFeatureName?: string;\n secondaryFeatureName?: string;\n asymmetricOptionsName?: string;\n tabs?: [string, string];\n types?: string[];\n easeOptions?: { icons: React.ReactNode; title: string }[];\n sliderConfigs?: {\n name: string;\n insertion: [string | number, string | number];\n removal: [string | number, string | number];\n }[];\n onAddProperty?: () => void;\n onFeatureToggle?: (isActive: boolean) => void;\n onAsymmetricToggle?: (isActive: boolean) => void;\n onTabChange?: (tab: string) => void;\n onTypeChange?: (type: string) => void;\n onEaseChange?: (easeTitle: string) => void;\n}\n\nexport default function MorphingSidebarControls({\n title = 'Configuration',\n configOptions = [\n { label: 'Width', value: '300' },\n { label: 'Height', value: '300' },\n ],\n primaryFeatureName = 'Visual Change',\n secondaryFeatureName = 'Transition',\n asymmetricOptionsName = 'Asymmetric',\n tabs = ['Insertion', 'Removal'],\n types = ['Spring', 'Cubic'],\n easeOptions,\n sliderConfigs = [\n {\n name: 'Opacity',\n insertion: ['0', '1'],\n removal: ['1', '0'],\n },\n {\n name: 'Blur',\n insertion: ['16', '0'],\n removal: ['0', '16'],\n },\n ],\n onAddProperty,\n onFeatureToggle,\n onAsymmetricToggle,\n onTabChange,\n onTypeChange,\n onEaseChange,\n}: MorphingSidebarControlsProps) {\n const [isAsymmetric, setIsAsymmetric] = useState(false);\n const [isTransition, setIsTransition] = useState(false);\n const [activeTab, setActiveTab] = useState(tabs[0]);\n const [activeType, setActiveType] = useState(types[0]);\n const [activeEase, setActiveEase] = useState('Smooth');\n const [isMotion, setIsMotion] = useState(false);\n\n const handleFeatureToggle = () => {\n const newState = !isTransition;\n setIsTransition(newState);\n onFeatureToggle?.(newState);\n };\n\n const handleAsymmetricToggle = () => {\n const newState = !isAsymmetric;\n setIsAsymmetric(newState);\n onAsymmetricToggle?.(newState);\n };\n\n const handleTabChange = (tab: string) => {\n setActiveTab(tab);\n onTabChange?.(tab);\n };\n\n const handleTypeChange = (type: string) => {\n setActiveType(type);\n onTypeChange?.(type);\n };\n\n const handleEaseChange = (easeTitle: string) => {\n setActiveEase(easeTitle);\n onEaseChange?.(easeTitle);\n };\n\n const resolvedEaseOptions = easeOptions || [\n { icons: , title: 'Smooth' },\n { icons: , title: 'Bouncy' },\n { icons: , title: 'Snappy' },\n { icons: , title: 'Custom' },\n ];\n\n return (\n
\n
\n
\n \n {isMotion && (\n setIsMotion(!isMotion)}\n className=\"cursor-pointer rounded-full bg-primary p-2\"\n >\n \n \n )}\n\n {!isMotion && (\n \n {title}\n \n )}\n\n {isMotion && (\n \n Motion\n \n )}\n\n {!isMotion && (\n setIsMotion(!isMotion)}\n className=\"cursor-pointer rounded-full bg-primary p-2\"\n >\n \n \n )}\n \n
\n
\n \n
\n
\n\n \n {!isMotion && (\n \n
\n
\n {configOptions.slice(0, 2).map((option, idx) => (\n \n

\n {option.label}\n

\n

\n {option.value}\n

\n
\n ))}\n
\n
\n\n
\n
\n \n
\n \n \n {(isTransition\n ? secondaryFeatureName\n : primaryFeatureName\n )\n .split('')\n .map((char, index) => (\n \n {char}\n \n ))}\n \n \n
\n \n
\n\n \n {isTransition && (\n \n
\n

\n {asymmetricOptionsName}\n

\n \n \n \n
\n \n )}\n \n
\n\n
\n \n {isAsymmetric && (\n \n
\n handleTabChange(tabs[0])}\n className=\"relative z-10 w-full py-2 text-center font-sans font-semibold tracking-tight text-foreground\"\n >\n {tabs[0]}\n {activeTab === tabs[0] && (\n \n )}\n \n handleTabChange(tabs[1])}\n className=\"relative z-10 w-full py-2 text-center font-sans font-semibold tracking-tight text-foreground\"\n >\n {tabs[1]}\n {activeTab === tabs[1] && (\n \n )}\n \n
\n \n )}\n \n\n {sliderConfigs.map((config, idx) => {\n const val1 =\n activeTab === tabs[0]\n ? config.insertion[0]\n : config.removal[0];\n const val2 =\n activeTab === tabs[0]\n ? config.insertion[1]\n : config.removal[1];\n\n return (\n \n

\n {config.name}\n

\n
\n
\n \n \n {val1}\n \n \n
\n\n \n\n
\n \n \n {val2}\n \n \n
\n
\n
\n );\n })}\n\n \n {' '}\n Add Property\n \n \n \n \n )}\n\n {isMotion && (\n \n \n \n
\n handleTypeChange(types[0])}\n className=\"relative z-10 w-full py-2 text-center font-sans font-semibold tracking-tight text-foreground\"\n >\n {types[0]}\n {activeType === types[0] && (\n \n )}\n \n handleTypeChange(types[1])}\n className=\"relative z-10 w-full py-2 text-center font-sans font-semibold tracking-tight text-foreground\"\n >\n {types[1]}\n {activeType === types[1] && (\n \n )}\n \n
\n \n \n
\n {resolvedEaseOptions.map((item) => {\n const isActive = activeEase === item.title;\n return (\n handleEaseChange(item.title)}\n className={`group flex aspect-square w-full cursor-pointer flex-col items-center justify-between rounded-3xl p-4 transition-all duration-300 active:scale-[0.98] ${\n isActive\n ? 'border-[6px] border-border bg-background text-foreground shadow-sm'\n : 'bg-muted text-muted-foreground hover:bg-secondary hover:text-foreground'\n }`}\n >\n
\n {item.icons}\n
\n \n {item.title}\n

\n
\n );\n })}\n \n \n )}\n \n \n );\n}\n\nconst UnfoldMore = ({ onClick }: { onClick?: () => void }) => {\n return (\n \n \n \n \n );\n};\n\nconst SmoothCurve = () => {\n return (\n \n \n \n \n \n );\n};\n\nconst Bouncy = () => {\n return (\n \n \n \n \n \n \n );\n};\n\nconst Snappy = () => {\n return (\n \n \n \n \n \n \n \n );\n};\n\nconst Custom = () => {\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "onboarding-checklist", "type": "registry:component", "title": "Onboarding Checklist", "description": "Step-by-step onboarding checklist with progress tracking and completion feedback.", "dependencies": [ "lucide-react", "motion" ], "files": [ { "path": "components/watermelon/onboarding-checklist.tsx", "type": "registry:component", "content": "\"use client\";\n\nimport React, { useState } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport { ChevronUp, ChevronRight, Check } from 'lucide-react';\n\ninterface Step {\n id: number;\n title: string;\n isCompleted: boolean;\n}\n\ninterface ChecklistProps {\n steps: Step[];\n title?: string;\n}\n\nexport const OnboardingChecklist: React.FC = ({\n steps,\n title = \"Getting started\"\n}) => {\n const [isExpanded, setIsExpanded] = useState(false);\n const [theme] = useState<'light' | 'dark'>('light');\n\n const completedCount = steps.filter(s => s.isCompleted).length;\n const totalSteps = steps.length;\n const springConfig = { type: \"spring\", stiffness: 300, damping: 30 } as const;\n\n return (\n
\n
\n \n {/* Header Section */}\n setIsExpanded(!isExpanded)}\n className=\"p-3 sm:p-3.5 flex items-center justify-between cursor-pointer select-none\"\n >\n
\n \n \n \n \n \n {title}\n \n
\n\n
\n
\n {Array.from({ length: 14 }).map((_, i) => (\n \n ))}\n
\n\n \n {completedCount}/{totalSteps}\n \n
\n
\n\n {/* Expanded Checklist Items */}\n \n {isExpanded && (\n \n
\n {steps.map((step) => (\n \n
\n {step.isCompleted ? (\n
\n \n
\n ) : (\n
\n {step.id}\n
\n )}\n \n {step.title}\n \n
\n\n {!step.isCompleted && (\n \n )}\n
\n ))}\n
\n \n )}\n \n \n \n \n );\n};" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "onboarding-checklist-base", "type": "registry:component", "title": "Onboarding Checklist (base)", "description": "Theme-ready base variant of Step-by-step onboarding checklist with progress tracking and completion feedback..", "dependencies": [ "lucide-react", "motion" ], "files": [ { "path": "components/watermelon/onboarding-checklist.tsx", "type": "registry:component", "content": "\"use client\";\n\nimport React, { useState } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport { ChevronUp, ChevronRight, Check } from 'lucide-react';\n\ninterface Step {\n id: number;\n title: string;\n isCompleted: boolean;\n}\n\ninterface ChecklistProps {\n steps: Step[];\n title?: string;\n}\n\nexport const OnboardingChecklist: React.FC = ({\n steps,\n title = \"Getting started\"\n}) => {\n const [isExpanded, setIsExpanded] = useState(false);\n const [theme] = useState<'light' | 'dark'>('light');\n\n const completedCount = steps.filter(s => s.isCompleted).length;\n const totalSteps = steps.length;\n const springConfig = { type: \"spring\", stiffness: 300, damping: 30 } as const;\n\n return (\n \n
\n \n {/* Header Section */}\n setIsExpanded(!isExpanded)}\n className=\"p-3 sm:p-4 flex items-center justify-between cursor-pointer select-none\"\n >\n
\n \n \n \n \n \n {title}\n \n
\n\n
\n
\n {Array.from({ length: 14 }).map((_, i) => (\n \n ))}\n
\n\n \n {completedCount}/{totalSteps}\n \n
\n
\n\n {/* Expanded Checklist Items */}\n \n {isExpanded && (\n \n
\n {steps.map((step) => (\n \n
\n {step.isCompleted ? (\n
\n \n
\n ) : (\n
\n {step.id}\n
\n )}\n \n {step.title}\n \n
\n\n {!step.isCompleted && (\n \n )}\n
\n ))}\n \n \n )}\n \n \n \n \n );\n};" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "onboarding-screen", "type": "registry:component", "title": "Onboarding Screen", "description": "Clean onboarding screen guiding users through setup with visual steps.", "dependencies": [ "lucide-react", "motion", "react-icons" ], "files": [ { "path": "components/watermelon/onboarding-screen.tsx", "type": "registry:component", "content": "'use client';\n\nimport React, { useState } from 'react';\nimport { motion } from 'motion/react';\nimport { ChevronLeft, Info, ImagePlus } from 'lucide-react';\nimport { HiBadgeCheck } from 'react-icons/hi';\n\ninterface OnboardingProps {\n title?: string;\n subtitle?: string;\n businessNameLabel?: string;\n businessNamePlaceholder?: string;\n legalNameLabel?: string;\n legalNamePlaceholder?: string;\n nextButtonText?: string;\n finishButtonText?: string;\n tooltipMainText?: string;\n tooltipSubText?: string;\n rightSectionDescription?: string;\n onComplete?: (data: any) => void;\n}\n\nexport const OnboardingScreen: React.FC = ({\n title = 'Business Details',\n subtitle = 'Tell us about your brand to start creating campaigns.',\n businessNameLabel = 'Business name',\n businessNamePlaceholder = 'Enter your name',\n legalNameLabel = 'Business Legal name',\n legalNamePlaceholder = 'Enter your business legal name',\n nextButtonText = 'Create business account',\n finishButtonText = 'Finish Setup',\n tooltipMainText = 'Click here to add your profile image.',\n tooltipSubText = 'You can always do this later.',\n rightSectionDescription = \"With your creator profile ready, it's time to set up your business account.\",\n onComplete,\n}) => {\n const [businessName, setBusinessName] = useState('Acme Inc');\n const [legalName, setLegalName] = useState('');\n const [currentStep, setCurrentStep] = useState(1);\n\n const totalSteps = 3;\n const spring = { type: 'spring', stiffness: 300, damping: 30 } as const;\n const progressSpring = {\n type: 'spring',\n stiffness: 100,\n damping: 20,\n } as const;\n\n const handleNext = () => {\n if (currentStep < totalSteps) setCurrentStep((prev) => prev + 1);\n else onComplete?.({ businessName, legalName });\n };\n\n const handleBack = () => {\n if (currentStep > 1) setCurrentStep((prev) => prev - 1);\n };\n\n return (\n
\n \n {/* Left Section */}\n
\n
\n
\n
\n \n \n \n
\n
\n\n

\n {title}\n

\n

\n {subtitle}\n

\n\n {/* Stepper */}\n
\n {[1, 2, 3].map((i) => (\n \n \n
\n ))}\n
\n\n
\n
\n \n setBusinessName(e.target.value)}\n className=\"w-full rounded-2xl border-[1.5px] border-black/20 bg-white px-5 py-3.5 text-sm text-black transition-all outline-none focus:ring-2 focus:ring-emerald-500/20 dark:border-[#1D1D1D] dark:bg-[#121212] dark:text-white\"\n />\n
\n\n
\n \n setLegalName(e.target.value)}\n className=\"w-full rounded-2xl border-[1.5px] border-black/20 bg-white px-5 py-3.5 text-sm text-black transition-all outline-none focus:ring-2 focus:ring-emerald-500/20 dark:border-[#1D1D1D] dark:bg-[#121212] dark:text-white\"\n />\n
\n
\n\n
\n \n \n \n \n {currentStep === totalSteps ? finishButtonText : nextButtonText}\n \n
\n
\n
\n\n {/* Right Section */}\n \n\n {/* Right Section */}\n \n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "pricing-widget", "type": "registry:component", "title": "Pricing Widget", "description": "An animated pricing widget with smooth transitions and dynamic value updates.", "dependencies": [ "@number-flow/react", "lucide-react", "motion" ], "files": [ { "path": "components/watermelon/pricing-widget.tsx", "type": "registry:component", "content": "'use client';\n\nimport { useState, type FC } from 'react';\nimport { motion, AnimatePresence, type Transition } from 'motion/react';\nimport { Check } from 'lucide-react';\nimport NumberFlow from '@number-flow/react';\n\nexport type BillingCycle = 'monthly' | 'yearly';\n\nexport interface PricingPlan {\n id: string;\n title: string;\n price: number;\n popular: boolean;\n}\n\ninterface PricingWidgetProps {\n initialBilling?: BillingCycle;\n initialActivePlanId?: string;\n plansData?: Record;\n}\n\nconst SPRING: Transition = {\n stiffness: 260,\n damping: 22,\n};\n\nconst DEFAULT_DATA: Record = {\n monthly: [\n { id: 'free', title: 'Free', price: 0.0, popular: false },\n { id: 'starter', title: 'Starter', price: 9.99, popular: true },\n { id: 'pro', title: 'Pro', price: 19.99, popular: false },\n ],\n yearly: [\n { id: 'free', title: 'Free', price: 0.0, popular: false },\n { id: 'starter', title: 'Starter', price: 7.49, popular: true },\n { id: 'pro', title: 'Pro', price: 17.49, popular: false },\n ],\n};\n\nexport const PricingWidget: FC = ({\n initialBilling = 'monthly',\n initialActivePlanId = 'starter',\n plansData = DEFAULT_DATA,\n}) => {\n const [billing, setBilling] = useState(initialBilling);\n const [active, setActive] = useState(initialActivePlanId);\n\n return (\n
\n
\n \n {(['monthly', 'yearly'] as const).map((t) => (\n setBilling(t)}\n className=\"relative z-10 w-1/2 py-1 text-base font-bold text-black transition-colors focus:outline-none dark:text-zinc-200\"\n >\n {t === 'monthly' ? 'Monthly' : 'Yearly'}\n \n ))}\n
\n\n
\n {plansData[billing].map((item) => {\n const isActive = active === item.id;\n return (\n setActive(item.id)}\n className=\"relative flex h-[82px] w-full items-center justify-between rounded-[24px] border-[1.6px] border-[#E5E5E9] bg-white px-4 text-left transition-all focus:outline-none dark:border-zinc-800 dark:bg-zinc-900\"\n >\n {isActive && (\n \n )}\n\n
\n
\n \n {item.title}\n \n {item.popular && (\n \n Popular\n \n )}\n
\n \n \n \n {' '}\n / month\n \n \n
\n\n
\n \n {isActive && (\n \n \n \n )}\n \n
\n \n );\n })}\n
\n\n \n
\n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "pricing-widget-base", "type": "registry:component", "title": "Pricing Widget (base)", "description": "Theme-ready base variant of An animated pricing widget with smooth transitions and dynamic value updates..", "dependencies": [ "@number-flow/react", "lucide-react", "motion" ], "files": [ { "path": "components/watermelon/pricing-widget.tsx", "type": "registry:component", "content": "'use client';\n\nimport { useState, type FC } from 'react';\nimport { motion, AnimatePresence, type Transition } from 'motion/react';\nimport { Check } from 'lucide-react';\nimport NumberFlow from '@number-flow/react';\n\nexport type BillingCycle = 'monthly' | 'yearly';\n\nexport interface PricingPlan {\n id: string;\n title: string;\n price: number;\n popular: boolean;\n}\n\ninterface PricingWidgetProps {\n initialBilling?: BillingCycle;\n initialActivePlanId?: string;\n plansData?: Record;\n}\n\nconst SPRING: Transition = {\n stiffness: 260,\n damping: 22,\n};\n\nconst DEFAULT_DATA: Record = {\n monthly: [\n { id: 'free', title: 'Free', price: 0.0, popular: false },\n { id: 'starter', title: 'Starter', price: 9.99, popular: true },\n { id: 'pro', title: 'Pro', price: 19.99, popular: false },\n ],\n yearly: [\n { id: 'free', title: 'Free', price: 0.0, popular: false },\n { id: 'starter', title: 'Starter', price: 7.49, popular: true },\n { id: 'pro', title: 'Pro', price: 17.49, popular: false },\n ],\n};\n\nexport const PricingWidget: FC = ({\n initialBilling = 'monthly',\n initialActivePlanId = 'starter',\n plansData = DEFAULT_DATA,\n}) => {\n const [billing, setBilling] = useState(initialBilling);\n const [active, setActive] = useState(initialActivePlanId);\n\n return (\n
\n
\n \n {(['monthly', 'yearly'] as const).map((t) => (\n setBilling(t)}\n className=\"text-foreground relative z-10 w-1/2 py-1 text-base font-bold transition-colors focus:outline-none\"\n >\n {t === 'monthly' ? 'Monthly' : 'Yearly'}\n \n ))}\n
\n\n
\n {plansData[billing].map((item) => {\n const isActive = active === item.id;\n return (\n setActive(item.id)}\n className=\"border-border bg-card relative flex h-[82px] w-full items-center justify-between rounded-lg border-[1.6px] px-4 text-left transition-all focus:outline-none\"\n >\n {isActive && (\n \n )}\n\n
\n
\n \n {item.title}\n \n {item.popular && (\n \n Popular\n \n )}\n
\n \n \n \n {' '}\n / month\n \n \n
\n\n
\n \n {isActive && (\n \n \n \n )}\n \n
\n \n );\n })}\n
\n\n \n
\n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "profile-card", "type": "registry:component", "title": "Profile Card", "description": "Compact profile card displaying user details with quick actions.", "dependencies": [ "lucide-react", "motion", "react-icons" ], "files": [ { "path": "components/watermelon/profile-card.tsx", "type": "registry:component", "content": "'use client';\n\nimport React, { useState } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport {\n ChevronUp,\n Globe,\n MousePointer2,\n Flame,\n MapPin,\n Tag,\n Users,\n DollarSign,\n Flag,\n Link as LinkIcon,\n} from 'lucide-react';\nimport { RiClaudeFill } from 'react-icons/ri';\nimport { RxArrowTopRight } from 'react-icons/rx';\n\ninterface ProfileCardProps {\n logo?: string;\n name: string;\n website: string;\n visits: string;\n heatScore: number;\n location: string;\n categories: string[];\n employees: string;\n arr: string;\n founders: { name: string; avatar: string }[];\n extraFounders?: number;\n}\n\nexport const ProfileCard: React.FC = ({\n name,\n website,\n visits,\n heatScore,\n location,\n categories,\n employees,\n arr,\n founders,\n extraFounders = 5,\n}) => {\n const [isExpanded, setIsExpanded] = useState(false);\n const springConfig = { type: 'spring', stiffness: 300, damping: 30 } as const;\n\n return (\n
\n \n {/* Header Section */}\n setIsExpanded(!isExpanded)}\n >\n
\n
\n \n
\n \n {name}\n \n
\n\n
\n {/* Responsive SVG Graph Fixed */}\n
\n \n \n \n
\n\n \n \n \n
\n
\n\n {/* Expanded Content */}\n \n {isExpanded && (\n \n
\n } label=\"Website\">\n
\n {' '}\n {website}\n
\n \n\n }\n label=\"Monthly visits\"\n >\n \n {visits}\n \n \n\n } label=\"Heat Score\">\n
\n {heatScore} \n
\n \n\n } label=\"Location\">\n \n {location}\n \n \n\n } label=\"Categories\">\n
\n {categories.map((cat) => (\n \n {cat}\n \n ))}\n
\n \n\n } label=\"Employees\">\n \n {employees}\n \n \n\n } label=\"Estimated ARR\">\n \n {arr}\n \n \n\n } label=\"Founders\">\n
\n {founders.map((f, i) => (\n \n \n \n {f.name}\n \n
\n ))}\n
\n +{extraFounders}\n
\n
\n \n \n \n )}\n \n \n \n );\n};\n\nconst DataRow = ({\n icon,\n label,\n children,\n}: {\n icon: any;\n label: string;\n children: React.ReactNode;\n}) => (\n
\n
\n {icon}\n \n {label}\n \n
\n
{children}
\n
\n);\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "profile-card-base", "type": "registry:component", "title": "Profile Card (base)", "description": "Theme-ready base variant of Compact profile card displaying user details with quick actions..", "dependencies": [ "lucide-react", "motion", "react-icons" ], "files": [ { "path": "components/watermelon/profile-card.tsx", "type": "registry:component", "content": "'use client';\n\nimport React, { useState } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport {\n ChevronUp,\n Globe,\n MousePointer2,\n Flame,\n MapPin,\n Tag,\n Users,\n DollarSign,\n Flag,\n Link as LinkIcon,\n} from 'lucide-react';\nimport { RiClaudeFill } from 'react-icons/ri';\nimport { RxArrowTopRight } from 'react-icons/rx';\n\ninterface ProfileCardProps {\n logo?: string;\n name: string;\n website: string;\n visits: string;\n heatScore: number;\n location: string;\n categories: string[];\n employees: string;\n arr: string;\n founders: { name: string; avatar: string }[];\n extraFounders?: number;\n}\n\nexport const ProfileCard: React.FC = ({\n name,\n website,\n visits,\n heatScore,\n location,\n categories,\n employees,\n arr,\n founders,\n extraFounders = 5,\n}) => {\n const [isExpanded, setIsExpanded] = useState(false);\n const springConfig = { type: 'spring', stiffness: 300, damping: 30 } as const;\n\n return (\n
\n \n {/* Header Section */}\n setIsExpanded(!isExpanded)}\n >\n
\n
\n \n
\n \n {name}\n \n
\n\n
\n {/* Responsive SVG Graph Fixed */}\n
\n \n \n \n
\n\n \n \n \n
\n
\n\n {/* Expanded Content */}\n \n {isExpanded && (\n \n
\n } label=\"Website\">\n
\n {' '}\n {website}\n
\n \n\n }\n label=\"Monthly visits\"\n >\n \n {visits}\n \n \n\n } label=\"Heat Score\">\n
\n {heatScore} \n
\n \n\n } label=\"Location\">\n \n {location}\n \n \n\n } label=\"Categories\">\n
\n {categories.map((cat) => (\n \n {cat}\n \n ))}\n
\n \n\n } label=\"Employees\">\n \n {employees}\n \n \n\n } label=\"Estimated ARR\">\n \n {arr}\n \n \n\n } label=\"Founders\">\n
\n {founders.map((f, i) => (\n \n \n \n {f.name}\n \n
\n ))}\n
\n +{extraFounders}\n
\n
\n \n \n \n )}\n \n \n \n );\n};\n\nconst DataRow = ({\n icon,\n label,\n children,\n}: {\n icon: any;\n label: string;\n children: React.ReactNode;\n}) => (\n
\n
\n {icon}\n \n {label}\n \n
\n
{children}
\n
\n);\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "progressive-input-stack", "type": "registry:component", "title": "Progressive Input Stack", "description": "An animated input stack that progressively layers form fields as users complete each step.", "dependencies": [ "lucide-react", "motion", "react-icons" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/watermelon/progressive-input-stack.tsx", "type": "registry:component", "content": "import React, { useState } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport { ArrowRight, ArrowLeft } from 'lucide-react';\nimport { FaCheck } from 'react-icons/fa6';\nimport { cn } from '@/lib/utils';\n\nexport interface StepData {\n id: string;\n label: string;\n type: 'text' | 'toggle';\n placeholder?: string;\n}\n\ninterface ProgressiveInputStackProps {\n steps: StepData[];\n initialData?: Record;\n onSubmit?: (data: Record) => void;\n}\n\nexport const ProgressiveInputStack: React.FC = ({\n steps,\n initialData,\n onSubmit,\n}) => {\n const [currentStep, setCurrentStep] = useState(0);\n\n const [formData, setFormData] = useState>(\n initialData ||\n steps.reduce(\n (acc, step) => ({\n ...acc,\n [step.id]: step.type === 'toggle' ? false : '',\n }),\n {},\n ),\n );\n\n const springTransition = {\n type: 'spring' as const,\n stiffness: 800,\n damping: 45,\n mass: 2,\n };\n\n const handleNext = () => {\n if (currentStep < steps.length - 1) {\n setCurrentStep((prev) => prev + 1);\n } else {\n onSubmit?.(formData);\n }\n };\n\n const handleBack = () => {\n if (currentStep > 0) {\n setCurrentStep((prev) => prev - 1);\n }\n };\n\n const updateField = (id: string, value: string | boolean) => {\n setFormData((prev) => ({ ...prev, [id]: value }));\n };\n\n return (\n
\n
\n \n {steps.map((step, index) => {\n if (index > currentStep) return null;\n\n const position = currentStep - index;\n const isTop = index === currentStep;\n\n return (\n \n {step.type === 'text' && (\n updateField(step.id, e.target.value)}\n placeholder={step.placeholder}\n className=\"w-full bg-transparent text-lg font-semibold text-[#242426] outline-none placeholder:text-[#85858B]/70 dark:text-zinc-200 dark:placeholder:text-zinc-500\"\n />\n )}\n\n {step.type === 'toggle' && (\n
\n \n {step.label}\n \n\n updateField(step.id, !formData[step.id])}\n className={cn(\n 'relative flex h-7 w-12 shrink-0 items-center rounded-full p-1 transition-colors',\n formData[step.id]\n ? 'bg-black dark:bg-zinc-200'\n : 'bg-zinc-200 dark:bg-zinc-800',\n )}\n >\n \n \n
\n )}\n \n );\n })}\n \n
\n\n
\n \n {currentStep > 0 && (\n \n \n \n )}\n \n\n \n \n {currentStep === steps.length - 1 ? (\n \n \n Done\n \n ) : (\n \n Next\n \n \n )}\n \n \n
\n
\n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "progressive-input-stack-base", "type": "registry:component", "title": "Progressive Input Stack (base)", "description": "Theme-ready base variant of An animated input stack that progressively layers form fields as users complete each step..", "dependencies": [ "lucide-react", "motion", "react-icons" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/watermelon/progressive-input-stack.tsx", "type": "registry:component", "content": "import React, { useState } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport { ArrowRight, ArrowLeft } from 'lucide-react';\nimport { FaCheck } from 'react-icons/fa6';\nimport { cn } from '@/lib/utils';\n\nexport interface StepData {\n id: string;\n label: string;\n type: 'text' | 'toggle';\n placeholder?: string;\n}\n\ninterface ProgressiveInputStackProps {\n steps: StepData[];\n initialData?: Record;\n onSubmit?: (data: Record) => void;\n}\n\nexport const ProgressiveInputStack: React.FC = ({\n steps,\n initialData,\n onSubmit,\n}) => {\n const [currentStep, setCurrentStep] = useState(0);\n\n const [formData, setFormData] = useState>(\n initialData ||\n steps.reduce(\n (acc, step) => ({\n ...acc,\n [step.id]: step.type === 'toggle' ? false : '',\n }),\n {},\n ),\n );\n\n const springTransition = {\n type: 'spring' as const,\n stiffness: 800,\n damping: 45,\n mass: 2,\n };\n\n const handleNext = () => {\n if (currentStep < steps.length - 1) {\n setCurrentStep((prev) => prev + 1);\n } else {\n onSubmit?.(formData);\n }\n };\n\n const handleBack = () => {\n if (currentStep > 0) {\n setCurrentStep((prev) => prev - 1);\n }\n };\n\n const updateField = (id: string, value: string | boolean) => {\n setFormData((prev) => ({ ...prev, [id]: value }));\n };\n\n return (\n
\n
\n \n {steps.map((step, index) => {\n if (index > currentStep) return null;\n\n const position = currentStep - index;\n const isTop = index === currentStep;\n\n return (\n \n {step.type === 'text' && (\n updateField(step.id, e.target.value)}\n placeholder={step.placeholder}\n className=\"text-foreground placeholder:text-muted-foreground/70 w-full bg-transparent text-lg font-semibold outline-none\"\n />\n )}\n\n {step.type === 'toggle' && (\n
\n \n {step.label}\n \n\n updateField(step.id, !formData[step.id])}\n className={cn(\n 'relative flex h-7 w-12 shrink-0 items-center rounded-lg p-1 transition-colors',\n formData[step.id]\n ? 'bg-foreground'\n : 'bg-foreground/50',\n )}\n >\n \n \n
\n )}\n \n );\n })}\n \n
\n\n
\n \n {currentStep > 0 && (\n \n \n \n )}\n \n\n \n \n {currentStep === steps.length - 1 ? (\n \n \n Done\n \n ) : (\n \n Next\n \n \n )}\n \n \n
\n
\n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "quick-feedback", "type": "registry:component", "title": "Quick Feedback", "description": "A responsive feedback component built for instant user responses, using subtle micro-interactions and snappy visual cues to confirm actions in real time.", "dependencies": [ "lucide-react", "motion", "react-icons", "react-use-measure" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/watermelon/quick-feedback.tsx", "type": "registry:component", "content": "'use client';\n\nimport { type FC, useState } from 'react';\nimport {\n motion,\n AnimatePresence,\n type Transition,\n MotionConfig,\n LayoutGroup,\n} from 'motion/react';\nimport { Undo2 } from 'lucide-react';\nimport { FaThumbsDown, FaThumbsUp } from 'react-icons/fa6';\nimport useMeasure from 'react-use-measure';\nimport { cn } from '@/lib/utils';\nimport type { IconType } from 'react-icons';\n\nexport type FeedbackStatus = 'idle' | 'up' | 'down';\n\nexport interface QuickFeedbackProps {\n defaultStatus?: FeedbackStatus;\n showThemeToggle?: boolean;\n feedbackText?: string;\n onFeedback?: (status: 'up' | 'down') => void;\n onUndo?: () => void;\n}\n\nconst containerTransition: Transition = {\n type: 'spring',\n stiffness: 150,\n damping: 15,\n mass: 1,\n};\n\nexport const QuickFeedback: FC = ({\n defaultStatus = 'idle',\n feedbackText = 'Feedback Received!',\n onFeedback,\n onUndo,\n}) => {\n const [status, setStatus] = useState(defaultStatus);\n\n const handleFeedback = (value: 'up' | 'down') => {\n setStatus(value);\n onFeedback?.(value);\n };\n\n const handleUndo = () => {\n setStatus('idle');\n onUndo?.();\n };\n\n return (\n
\n \n \n
\n \n {(status === 'idle' || status === 'up') && (\n handleFeedback('up')}\n handleUndo={handleUndo}\n status={status}\n feedbackText={feedbackText}\n Icon={FaThumbsUp}\n />\n )}\n {(status === 'idle' || status === 'down') && (\n handleFeedback('down')}\n handleUndo={handleUndo}\n status={status}\n feedbackText=\"Sorry about that\"\n Icon={FaThumbsDown}\n />\n )}\n \n
\n \n \n
\n );\n};\n\ninterface QuickFeedbackButtonProps {\n name: 'up' | 'down';\n handleFeedback: () => void;\n handleUndo: () => void;\n status: FeedbackStatus;\n feedbackText: string;\n Icon: IconType;\n}\n\nexport const QuickFeedbackButton: FC = ({\n name,\n handleFeedback,\n handleUndo,\n status,\n feedbackText,\n Icon,\n}) => {\n const [ref, bounds] = useMeasure({ offsetSize: true });\n const isActive = name === status;\n\n return (\n 0 ? bounds.width : 'auto',\n height: bounds.height > 0 ? bounds.height : 'auto',\n }}\n className=\"relative overflow-hidden rounded-full bg-[#F3EFE9] will-change-transform dark:border-neutral-800 dark:bg-neutral-900\"\n >\n \n \n \n \n\n \n {isActive && (\n \n \n {feedbackText}\n \n\n {\n e.stopPropagation();\n handleUndo();\n }}\n className=\"flex shrink-0 items-center gap-1 rounded-full bg-[#E0DCD4] px-3 py-2 text-xs font-bold text-[#020200] transition hover:bg-[#d6d2ca] active:scale-95 sm:text-base dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700\"\n >\n \n Undo\n \n \n )}\n \n \n \n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "quick-feedback-base", "type": "registry:component", "title": "Quick Feedback (base)", "description": "Theme-ready base variant of A responsive feedback component built for instant user responses, using subtle micro-interactions and snappy visual cues to confirm actions in real time..", "dependencies": [ "lucide-react", "motion", "react-icons", "react-use-measure" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/watermelon/quick-feedback.tsx", "type": "registry:component", "content": "'use client';\n\nimport { type FC, useState } from 'react';\nimport {\n motion,\n AnimatePresence,\n type Transition,\n MotionConfig,\n LayoutGroup,\n} from 'motion/react';\nimport { Undo2 } from 'lucide-react';\nimport { FaThumbsDown, FaThumbsUp } from 'react-icons/fa6';\nimport useMeasure from 'react-use-measure';\nimport { cn } from '@/lib/utils';\nimport type { IconType } from 'react-icons';\n\nexport type FeedbackStatus = 'idle' | 'up' | 'down';\n\nexport interface QuickFeedbackProps {\n defaultStatus?: FeedbackStatus;\n showThemeToggle?: boolean;\n feedbackText?: string;\n onFeedback?: (status: 'up' | 'down') => void;\n onUndo?: () => void;\n}\n\nconst containerTransition: Transition = {\n type: 'spring',\n stiffness: 150,\n damping: 15,\n mass: 1,\n};\n\nexport const QuickFeedback: FC = ({\n defaultStatus = 'idle',\n feedbackText = 'Feedback Received!',\n onFeedback,\n onUndo,\n}) => {\n const [status, setStatus] = useState(defaultStatus);\n\n const handleFeedback = (value: 'up' | 'down') => {\n setStatus(value);\n onFeedback?.(value);\n };\n\n const handleUndo = () => {\n setStatus('idle');\n onUndo?.();\n };\n\n return (\n
\n \n \n
\n \n {(status === 'idle' || status === 'up') && (\n handleFeedback('up')}\n handleUndo={handleUndo}\n status={status}\n feedbackText={feedbackText}\n Icon={FaThumbsUp}\n />\n )}\n {(status === 'idle' || status === 'down') && (\n handleFeedback('down')}\n handleUndo={handleUndo}\n status={status}\n feedbackText=\"Sorry about that\"\n Icon={FaThumbsDown}\n />\n )}\n \n
\n \n \n
\n );\n};\n\ninterface QuickFeedbackButtonProps {\n name: 'up' | 'down';\n handleFeedback: () => void;\n handleUndo: () => void;\n status: FeedbackStatus;\n feedbackText: string;\n Icon: IconType;\n}\n\nexport const QuickFeedbackButton: FC = ({\n name,\n handleFeedback,\n handleUndo,\n status,\n feedbackText,\n Icon,\n}) => {\n const [ref, bounds] = useMeasure({ offsetSize: true });\n const isActive = name === status;\n\n return (\n 0 ? bounds.width : 'auto',\n height: bounds.height > 0 ? bounds.height : 'auto',\n }}\n className=\"bg-card border-border relative overflow-hidden rounded-lg border will-change-transform\"\n >\n \n \n \n \n\n \n {isActive && (\n \n \n {feedbackText}\n \n\n {\n e.stopPropagation();\n handleUndo();\n }}\n className=\"bg-muted text-foreground hover:bg-muted/80 flex shrink-0 items-center gap-1 rounded-lg px-3 py-2 text-xs font-bold transition active:scale-95 sm:text-base\"\n >\n \n Undo\n \n \n )}\n \n \n \n );\n};\n" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "quick-option-picker", "type": "registry:component", "title": "Quick Option Picker", "description": "A sleek, interactive option picker with smooth roll animations and a premium feel.", "dependencies": [ "lucide-react", "motion", "react-icons" ], "registryDependencies": [ "utils" ], "files": [ { "path": "components/watermelon/quick-option-picker.tsx", "type": "registry:component", "content": "'use client';\n\nimport { useState, useRef, useEffect, type FC } from 'react';\nimport {\n motion,\n AnimatePresence,\n MotionConfig,\n} from 'motion/react';\nimport { ChevronDown, Globe } from 'lucide-react';\nimport { TbLockFilled } from 'react-icons/tb';\nimport type { IconType } from 'react-icons';\nimport { cn } from '@/lib/utils';\n\n\nexport interface Option {\n id: string;\n label: string;\n icon: IconType;\n}\n\ninterface OptionPickerProps {\n options?: Option[];\n}\n\n\nconst DEFAULT_OPTIONS: Option[] = [\n { id: 'private', label: 'Private', icon: TbLockFilled },\n { id: 'public', label: 'Public', icon: Globe },\n];\n\nexport const OptionPicker: FC = ({ options }) => {\n const [isOpen, setIsOpen] = useState(false);\n const [selected, setSelected] = useState