{
  "title": "Calendar",
  "description": "A date picker component that allows users to select dates and ranges with interactive spring selection animations.",
  "name": "motion-calendar",
  "dependencies": [
    "motion",
    "react-day-picker",
    "lucide-react",
    "date-fns",
    "@base-ui/react"
  ],
  "registryDependencies": [
    "button",
    "motion-select"
  ],
  "type": "registry:ui",
  "files": [
    {
      "path": "components/paceui/motion/calendar.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\n\nimport { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { type DayButton, DayPicker, type Locale, getDefaultClassNames } from \"react-day-picker\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Button, buttonVariants } from \"@/components/ui/button\";\nimport {\n    Select,\n    SelectContent,\n    SelectItem,\n    SelectTrigger,\n} from \"@/components/paceui/motion/select\";\n\nconst CalendarContext = React.createContext<{\n    layoutId?: string;\n    mode?: string;\n    captionLayout?: React.ComponentProps<typeof DayPicker>[\"captionLayout\"];\n}>({});\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker> & {\n    buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"];\n};\n\nconst monthSlideVariants = {\n    enter: (dir: number) => ({\n        x: dir >= 0 ? \"100%\" : \"-100%\",\n        opacity: 1,\n    }),\n    center: {\n        x: \"0%\",\n        opacity: 1,\n    },\n    exit: (dir: number) => ({\n        x: dir >= 0 ? \"-100%\" : \"100%\",\n        opacity: 1,\n    }),\n};\n\nconst headerSlideVariants = {\n    enter: (dir: number) => ({\n        y: dir >= 0 ? \"100%\" : \"-100%\",\n        opacity: 0,\n    }),\n    center: {\n        y: \"0%\",\n        opacity: 1,\n    },\n    exit: (dir: number) => ({\n        y: dir >= 0 ? \"-100%\" : \"100%\",\n        opacity: 0,\n    }),\n};\n\nfunction Calendar({\n    className,\n    classNames,\n    showOutsideDays,\n    captionLayout = \"label\",\n    buttonVariant = \"ghost\",\n    locale,\n    formatters,\n    components,\n    ...props\n}: CalendarProps) {\n    const defaultClassNames = getDefaultClassNames();\n    const layoutId = React.useId();\n    const mode = (props as any).mode;\n    const resolvedShowOutsideDays =\n        showOutsideDays !== undefined ? showOutsideDays : (props.numberOfMonths ?? 1) > 1 ? false : true;\n\n    return (\n        <CalendarContext.Provider value={{ layoutId, mode, captionLayout }}>\n            <DayPicker\n                showOutsideDays={resolvedShowOutsideDays}\n                className={cn(\n                    \"group/calendar bg-background overflow-hidden p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(8)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent\",\n                    String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n                    String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n                    className,\n                )}\n                captionLayout={captionLayout}\n                locale={locale}\n                formatters={{\n                    formatMonthDropdown: (date) => date.toLocaleString(locale?.code, { month: \"short\" }),\n                    ...formatters,\n                }}\n                classNames={{\n                    root: cn(\"w-fit overflow-hidden\", defaultClassNames.root),\n                    months: cn(\"relative flex flex-col gap-4 md:flex-row overflow-hidden\", defaultClassNames.months),\n                    month: cn(\"flex w-full flex-col gap-4\", defaultClassNames.month),\n                    nav: cn(\n                        \"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1 z-20 pointer-events-none\",\n                        defaultClassNames.nav,\n                    ),\n                    button_previous: cn(\n                        buttonVariants({ variant: buttonVariant }),\n                        \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50 pointer-events-auto\",\n                        defaultClassNames.button_previous,\n                    ),\n                    button_next: cn(\n                        buttonVariants({ variant: buttonVariant }),\n                        \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50 pointer-events-auto\",\n                        defaultClassNames.button_next,\n                    ),\n                    month_caption: cn(\n                        \"flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)\",\n                        defaultClassNames.month_caption,\n                    ),\n                    dropdowns: cn(\n                        \"flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium\",\n                        defaultClassNames.dropdowns,\n                    ),\n                    dropdown_root: cn(\"relative rounded-(--cell-radius)\", defaultClassNames.dropdown_root),\n                    dropdown: cn(\"absolute inset-0 z-10 w-full h-full cursor-pointer opacity-0\", defaultClassNames.dropdown),\n                    caption_label: cn(\n                        \"font-medium select-none\",\n                        captionLayout === \"label\"\n                            ? \"text-sm\"\n                            : \"flex items-center gap-1 rounded-(--cell-radius) text-sm pointer-events-none [&>svg]:size-3.5 [&>svg]:text-muted-foreground\",\n                        defaultClassNames.caption_label,\n                    ),\n                    month_grid: \"w-full border-collapse\",\n                    weekdays: cn(\"flex\", defaultClassNames.weekdays),\n                    weekday: cn(\n                        \"flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none\",\n                        defaultClassNames.weekday,\n                    ),\n                    week: cn(\"mt-2 flex w-full\", defaultClassNames.week),\n                    week_number_header: cn(\"w-(--cell-size) select-none\", defaultClassNames.week_number_header),\n                    week_number: cn(\"text-[0.8rem] text-muted-foreground select-none\", defaultClassNames.week_number),\n                    day: cn(\n                        \"group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)\",\n                        (props as any).showWeekNumber\n                            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n                            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n                        defaultClassNames.day,\n                    ),\n                    range_start: cn(\n                        \"relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted\",\n                        defaultClassNames.range_start,\n                    ),\n                    range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n                    range_end: cn(\n                        \"relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted\",\n                        defaultClassNames.range_end,\n                    ),\n                    today: cn(\n                        \"rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none\",\n                        defaultClassNames.today,\n                    ),\n                    outside: cn(\"text-muted-foreground aria-selected:text-muted-foreground\", defaultClassNames.outside),\n                    disabled: cn(\"text-muted-foreground opacity-50\", defaultClassNames.disabled),\n                    hidden: cn(\"invisible\", defaultClassNames.hidden),\n                    ...classNames,\n                }}\n                components={{\n                    Root: ({ className, rootRef, ...props }) => {\n                        return (\n                            <div\n                                data-slot=\"calendar\"\n                                ref={rootRef}\n                                className={cn(\"overflow-hidden\", className)}\n                                {...props}\n                            />\n                        );\n                    },\n                    Chevron: ({ className, orientation, ...props }) => {\n                        if (orientation === \"left\") {\n                            return <ChevronLeftIcon className={cn(\"size-4\", className)} {...props} />;\n                        }\n\n                        if (orientation === \"right\") {\n                            return <ChevronRightIcon className={cn(\"size-4\", className)} {...props} />;\n                        }\n\n                        return <ChevronDownIcon className={cn(\"size-4\", className)} {...props} />;\n                    },\n                    Months: (monthsProps) => <CalendarMonths {...monthsProps} />,\n                    Month: (monthProps) => <CalendarMonth {...monthProps} />,\n                    DayButton: ({ ...props }) => <CalendarDayButton locale={locale} {...props} />,\n                    WeekNumber: ({ children, ...props }) => {\n                        return (\n                            <td {...props}>\n                                <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                                    {children}\n                                </div>\n                            </td>\n                        );\n                    },\n                    Dropdown: (dropdownProps) => <CalendarDropdown {...dropdownProps} />,\n                    ...components,\n                }}\n                {...props}\n            />\n        </CalendarContext.Provider>\n    );\n}\n\nfunction CalendarMonth({ className, children, calendarMonth, displayIndex, ...props }: any) {\n    const context = React.useContext(CalendarContext);\n    const isDropdown = context.captionLayout?.startsWith(\"dropdown\");\n    const childArray = React.Children.toArray(children);\n    const gridChild = childArray.find((child: any) => child?.props?.role === \"grid\");\n    const headerChildren = childArray.filter((child: any) => child?.props?.role !== \"grid\");\n\n    const monthTime = calendarMonth?.date?.getTime() ?? 0;\n    const prevMonthTimeRef = React.useRef<number | null>(null);\n    const directionRef = React.useRef<number>(1);\n\n    let direction = directionRef.current;\n    if (\n        prevMonthTimeRef.current !== null &&\n        monthTime !== 0 &&\n        monthTime !== prevMonthTimeRef.current\n    ) {\n        direction = monthTime > prevMonthTimeRef.current ? 1 : -1;\n        directionRef.current = direction;\n    }\n    if (monthTime !== 0) {\n        prevMonthTimeRef.current = monthTime;\n    }\n\n    return (\n        <div className={cn(\"flex w-full flex-col gap-4\", className)} {...props}>\n            <div className=\"relative h-(--cell-size) w-full overflow-hidden\">\n                {isDropdown ? (\n                    <div className=\"flex h-full w-full items-center justify-center\">\n                        {headerChildren}\n                    </div>\n                ) : (\n                    <AnimatePresence mode=\"popLayout\" initial={false} custom={direction}>\n                        <motion.div\n                            key={monthTime || \"header\"}\n                            custom={direction}\n                            variants={headerSlideVariants}\n                            initial=\"enter\"\n                            animate=\"center\"\n                            exit=\"exit\"\n                            transition={{\n                                y: { type: \"spring\", stiffness: 300, damping: 30, mass: 0.8 },\n                                opacity: { duration: 0.2 },\n                            }}\n                            className=\"flex h-full w-full items-center justify-center\">\n                            {headerChildren}\n                        </motion.div>\n                    </AnimatePresence>\n                )}\n            </div>\n            <div className=\"relative w-full overflow-hidden\">\n                <AnimatePresence mode=\"popLayout\" initial={false} custom={direction}>\n                    <motion.div\n                        key={monthTime || \"grid\"}\n                        custom={direction}\n                        variants={monthSlideVariants}\n                        initial=\"enter\"\n                        animate=\"center\"\n                        exit=\"exit\"\n                        transition={{\n                            x: { type: \"spring\", stiffness: 300, damping: 30, mass: 0.8 },\n                        }}\n                        className=\"w-full\">\n                        {gridChild}\n                    </motion.div>\n                </AnimatePresence>\n            </div>\n        </div>\n    );\n}\n\nfunction CalendarMonths({ className, children, ...props }: any) {\n    return (\n        <div className={cn(\"relative flex flex-col gap-4 md:flex-row\", className)} {...props}>\n            {children}\n        </div>\n    );\n}\n\nexport interface CalendarDayButtonProps extends React.ComponentProps<typeof DayButton> {\n    locale?: Partial<Locale>;\n}\n\nfunction CalendarDayButton({ className, day, modifiers, locale, ...props }: CalendarDayButtonProps) {\n    const context = React.useContext(CalendarContext);\n    const layoutId = context.layoutId;\n    const mode = context.mode;\n    const defaultClassNames = getDefaultClassNames();\n\n    const ref = React.useRef<HTMLButtonElement>(null);\n    React.useEffect(() => {\n        if (modifiers.focused) ref.current?.focus();\n    }, [modifiers.focused]);\n\n    const isOutside = Boolean(modifiers.outside);\n    const isRangeStart = Boolean(modifiers.range_start && !isOutside);\n    const isRangeEnd = Boolean(modifiers.range_end && !isOutside);\n    const isRangeMiddle = Boolean(modifiers.range_middle && !isOutside);\n    const isSingleSelected = Boolean(\n        modifiers.selected && !isOutside && !isRangeStart && !isRangeEnd && !isRangeMiddle,\n    );\n\n    return (\n        <Button\n            ref={ref}\n            variant=\"ghost\"\n            size=\"icon\"\n            data-day={day.date.toLocaleDateString(locale?.code)}\n            data-selected-single={isSingleSelected}\n            data-range-start={isRangeStart}\n            data-range-end={isRangeEnd}\n            data-range-middle={isRangeMiddle}\n            className={cn(\n                \"group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n                \"data-[range-end=true]:bg-transparent data-[range-start=true]:bg-transparent data-[selected-single=true]:bg-transparent\",\n                defaultClassNames.day,\n                className,\n            )}\n            {...props}>\n            {props.children}\n            {isSingleSelected &&\n                (mode === \"multiple\" ? (\n                    <motion.div\n                        key={`multi-${day.date.getTime()}`}\n                        layoutId={`${layoutId}-multi-${day.date.getTime()}`}\n                        className=\"bg-primary absolute inset-0 -z-1 rounded-(--cell-radius)\"\n                        transition={{ type: \"spring\", stiffness: 450, damping: 30 }}\n                    />\n                ) : (\n                    <motion.div\n                        layoutId={`${layoutId}-${day.date.getFullYear()}-${day.date.getMonth()}-selected`}\n                        className=\"bg-primary absolute inset-0 -z-1 rounded-(--cell-radius)\"\n                        transition={{ type: \"spring\", stiffness: 450, damping: 30 }}\n                    />\n                ))}\n            {isRangeStart && (\n                <motion.div\n                    layoutId={`${layoutId}-range-start`}\n                    className={cn(\n                        \"bg-primary absolute inset-0 -z-1\",\n                        isRangeEnd ? \"rounded-(--cell-radius)\" : \"rounded-l-(--cell-radius)\",\n                    )}\n                    transition={{ type: \"spring\", stiffness: 450, damping: 30 }}\n                />\n            )}\n            {isRangeEnd && !isRangeStart && (\n                <motion.div\n                    layoutId={`${layoutId}-range-end`}\n                    className=\"bg-primary absolute inset-0 -z-1 rounded-r-(--cell-radius)\"\n                    transition={{ type: \"spring\", stiffness: 450, damping: 30 }}\n                />\n            )}\n        </Button>\n    );\n}\n\nexport interface CalendarDropdownProps {\n    options?: Array<{ value: number; label: string; disabled?: boolean }>;\n    value?: number | string | readonly string[];\n    onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;\n    disabled?: boolean;\n    className?: string;\n    \"aria-label\"?: string;\n}\n\nfunction CalendarDropdown({\n    options,\n    value,\n    onChange,\n    disabled,\n    \"aria-label\": ariaLabel,\n}: CalendarDropdownProps) {\n    const numValue = typeof value === \"string\" ? Number(value) : typeof value === \"number\" ? value : undefined;\n    const selectedOption = options?.find((option) => option.value === numValue);\n\n    const prevValueRef = React.useRef<number | null>(null);\n    const directionRef = React.useRef<number>(1);\n\n    let direction = directionRef.current;\n    if (prevValueRef.current !== null && numValue !== undefined && numValue !== prevValueRef.current) {\n        if (options && options.length === 12 && prevValueRef.current === 11 && numValue === 0) {\n            direction = 1;\n        } else if (options && options.length === 12 && prevValueRef.current === 0 && numValue === 11) {\n            direction = -1;\n        } else {\n            direction = numValue > prevValueRef.current ? 1 : -1;\n        }\n        directionRef.current = direction;\n    }\n    if (numValue !== undefined && !Number.isNaN(numValue)) {\n        prevValueRef.current = numValue;\n    }\n\n    const handleValueChange = (val: string | string[] | null) => {\n        if (val !== null && onChange) {\n            onChange({\n                target: { value: String(val) },\n            } as unknown as React.ChangeEvent<HTMLSelectElement>);\n        }\n    };\n\n    return (\n        <Select\n            value={numValue !== undefined ? String(numValue) : undefined}\n            onValueChange={handleValueChange}\n            disabled={disabled}>\n            <SelectTrigger\n                aria-label={ariaLabel}\n                size=\"sm\"\n                className=\"h-7 w-fit gap-1 border-none bg-transparent px-1.5 py-0 text-sm font-medium shadow-none hover:bg-muted hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring [&_svg]:size-3.5\">\n                <span className=\"relative inline-flex h-full items-center overflow-hidden\">\n                    <AnimatePresence mode=\"popLayout\" initial={false} custom={direction}>\n                        <motion.span\n                            key={value}\n                            custom={direction}\n                            variants={headerSlideVariants}\n                            initial=\"enter\"\n                            animate=\"center\"\n                            exit=\"exit\"\n                            transition={{\n                                y: { type: \"spring\", stiffness: 300, damping: 30, mass: 0.8 },\n                                opacity: { duration: 0.2 },\n                            }}\n                            className=\"inline-block\">\n                            {selectedOption?.label}\n                        </motion.span>\n                    </AnimatePresence>\n                </span>\n            </SelectTrigger>\n            <SelectContent className=\"max-h-56 min-w-28\">\n                {options?.map((option) => (\n                    <SelectItem\n                        key={option.value}\n                        value={String(option.value)}\n                        disabled={option.disabled}>\n                        {option.label}\n                    </SelectItem>\n                ))}\n            </SelectContent>\n        </Select>\n    );\n}\n\nexport { Calendar, CalendarDayButton, CalendarMonth, CalendarMonths, CalendarDropdown, CalendarContext, CalendarContext as CalendarAnimateContext };\n"
    },
    {
      "path": "components/paceui/motion/select.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\n\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\";\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon } from \"lucide-react\";\nimport { AnimatePresence, type HTMLMotionProps, LayoutGroup, type Transition, motion } from \"motion/react\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface SelectRootContextType {\n    stagger?: boolean | number;\n}\n\nconst SelectRootContext = React.createContext<SelectRootContextType>({});\n\ninterface SelectHighlightContextType {\n    highlightLayoutId: string;\n    activeItemId: string | null;\n    setActiveItem: (id: string) => void;\n    clearActiveItemWithDelay: () => void;\n    stagger?: boolean | number;\n    getItemIndex: (id: string) => number;\n}\n\nconst SelectHighlightContext = React.createContext<SelectHighlightContextType | null>(null);\n\nexport type SelectProps<ItemValue = any, Multiple extends boolean = boolean> = SelectPrimitive.Root.Props<\n    ItemValue,\n    Multiple\n> & {\n    stagger?: boolean | number;\n};\n\nfunction Select<ItemValue = any, Multiple extends boolean = boolean>({\n    stagger,\n    ...props\n}: SelectProps<ItemValue, Multiple>) {\n    const rootContextValue = React.useMemo(() => ({ stagger }), [stagger]);\n\n    return (\n        <SelectRootContext.Provider value={rootContextValue}>\n            <SelectPrimitive.Root data-slot=\"select\" {...props} />\n        </SelectRootContext.Provider>\n    );\n}\n\nfunction SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {\n    return <SelectPrimitive.Group data-slot=\"select-group\" className={cn(\"scroll-my-1 p-1\", className)} {...props} />;\n}\n\nfunction SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {\n    return (\n        <SelectPrimitive.Value data-slot=\"select-value\" className={cn(\"flex flex-1 text-left\", className)} {...props} />\n    );\n}\n\nexport interface SelectTriggerProps extends SelectPrimitive.Trigger.Props {\n    size?: \"default\" | \"sm\" | \"xs\" | \"lg\";\n}\n\nfunction SelectTrigger({ className, size = \"default\", children, ...props }: SelectTriggerProps) {\n    return (\n        <SelectPrimitive.Trigger\n            data-slot=\"select-trigger\"\n            data-size={size}\n            className={cn(\n                \"border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex w-fit items-center justify-between gap-1.5 rounded-md border bg-transparent py-2 pr-2 pl-2.5 text-sm font-medium whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-[3px] data-[size=default]:h-9 data-[size=sm]:h-8 data-[size=xs]:h-6 data-[size=xs]:gap-1 data-[size=xs]:rounded-[min(var(--radius-md),8px)] data-[size=xs]:py-1 data-[size=xs]:pr-1.5 data-[size=xs]:pl-2 data-[size=xs]:text-xs data-[size=lg]:h-10 data-[size=lg]:py-2.5 data-[size=lg]:pr-2.5 data-[size=lg]:pl-3 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 in-data-[size=xs]:[&_svg:not([class*='size-'])]:size-3\",\n                className,\n            )}\n            {...props}>\n            {children}\n            <SelectPrimitive.Icon\n                render={\n                    <ChevronDownIcon className=\"text-muted-foreground pointer-events-none size-4 transition-transform duration-200 in-data-[popup-open]:rotate-180 in-data-[size=xs]:size-3\" />\n                }\n            />\n        </SelectPrimitive.Trigger>\n    );\n}\n\ninterface SelectContentListProps {\n    children: React.ReactNode;\n    highlightLayoutId: string;\n    stagger?: boolean | number;\n}\n\nfunction SelectContentList({ children, highlightLayoutId, stagger }: SelectContentListProps) {\n    const [activeItemId, setActiveItemId] = React.useState<string | null>(null);\n    const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n    const itemIdsRef = React.useRef<string[]>([]);\n\n    const setActiveItem = React.useCallback((id: string) => {\n        if (timeoutRef.current) clearTimeout(timeoutRef.current);\n        setActiveItemId(id);\n    }, []);\n\n    const clearActiveItemWithDelay = React.useCallback(() => {\n        if (timeoutRef.current) clearTimeout(timeoutRef.current);\n        timeoutRef.current = setTimeout(() => {\n            setActiveItemId(null);\n        }, 180);\n    }, []);\n\n    const getItemIndex = React.useCallback((id: string) => {\n        let index = itemIdsRef.current.indexOf(id);\n        if (index === -1) {\n            index = itemIdsRef.current.length;\n            itemIdsRef.current.push(id);\n        }\n        return index;\n    }, []);\n\n    const contextValue = React.useMemo<SelectHighlightContextType>(\n        () => ({\n            highlightLayoutId,\n            activeItemId,\n            setActiveItem,\n            clearActiveItemWithDelay,\n            stagger,\n            getItemIndex,\n        }),\n        [highlightLayoutId, activeItemId, setActiveItem, clearActiveItemWithDelay, stagger, getItemIndex],\n    );\n\n    return (\n        <SelectHighlightContext.Provider value={contextValue}>\n            <LayoutGroup id={highlightLayoutId}>\n                <div onPointerLeave={clearActiveItemWithDelay} className=\"contents\">\n                    <SelectScrollUpButton />\n                    <SelectPrimitive.List className=\"overflow-hidden\">{children}</SelectPrimitive.List>\n                    <SelectScrollDownButton />\n                </div>\n            </LayoutGroup>\n        </SelectHighlightContext.Provider>\n    );\n}\n\nexport interface SelectContentProps\n    extends\n    SelectPrimitive.Popup.Props,\n    Pick<\n        SelectPrimitive.Positioner.Props,\n        \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\" | \"alignItemWithTrigger\"\n    > {\n    stagger?: boolean | number;\n    transition?: Transition;\n}\n\nfunction SelectContent({\n    className,\n    children,\n    side = \"bottom\",\n    sideOffset = 4,\n    align = \"start\",\n    alignOffset = 0,\n    alignItemWithTrigger = false,\n    stagger: staggerProp,\n    transition = { type: \"spring\", stiffness: 420, damping: 28, mass: 0.8 },\n    ...props\n}: SelectContentProps) {\n    const rootContext = React.useContext(SelectRootContext);\n    const resolvedStagger = staggerProp ?? rootContext.stagger ?? true;\n    const highlightLayoutId = React.useId();\n\n    return (\n        <SelectPrimitive.Portal>\n            <SelectPrimitive.Positioner\n                side={side}\n                sideOffset={sideOffset}\n                align={align}\n                alignOffset={alignOffset}\n                alignItemWithTrigger={alignItemWithTrigger}\n                className=\"isolate z-500 outline-none\">\n                <SelectPrimitive.Popup\n                    data-slot=\"select-content\"\n                    {...props}\n                    render={(popupProps, state) => (\n                        <AnimatePresence>\n                            {state.open && (\n                                <motion.div\n                                    {...(popupProps as unknown as HTMLMotionProps<\"div\">)}\n                                    key=\"select-popup\"\n                                    initial={{\n                                        opacity: 0,\n                                        scale: 0.95,\n                                        y: side === \"bottom\" ? -8 : side === \"top\" ? 8 : 0,\n                                        x: side === \"right\" ? -10 : side === \"left\" ? 10 : 0,\n                                    }}\n                                    animate={{ opacity: 1, scale: 1, y: 0, x: 0 }}\n                                    exit={{\n                                        opacity: 0,\n                                        scale: 0.95,\n                                        y: side === \"bottom\" ? -6 : side === \"top\" ? 6 : 0,\n                                        x: side === \"right\" ? -8 : side === \"left\" ? 8 : 0,\n                                    }}\n                                    transition={transition}\n                                    className={cn(\n                                        \"bg-popover text-popover-foreground ring-foreground/10 no-scrollbar relative isolate z-500 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md shadow-md ring-1\",\n                                        className,\n                                    )}>\n                                    <SelectContentList\n                                        stagger={resolvedStagger}\n                                        highlightLayoutId={highlightLayoutId}>\n                                        {children}\n                                    </SelectContentList>\n                                </motion.div>\n                            )}\n                        </AnimatePresence>\n                    )}\n                />\n            </SelectPrimitive.Positioner>\n        </SelectPrimitive.Portal>\n    );\n}\n\nfunction SelectLabel({ className, ...props }: SelectPrimitive.GroupLabel.Props) {\n    return (\n        <SelectPrimitive.GroupLabel\n            data-slot=\"select-label\"\n            className={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n            {...props}\n        />\n    );\n}\n\nexport interface SelectItemProps extends SelectPrimitive.Item.Props {\n    stagger?: boolean | number;\n}\n\nfunction SelectItem({ className, children, stagger: itemStagger, ...props }: SelectItemProps) {\n    const highlightContext = React.useContext(SelectHighlightContext);\n    const itemId = React.useId();\n\n    return (\n        <SelectPrimitive.Item\n            data-slot=\"select-item\"\n            className={className}\n            {...props}\n            render={(itemProps, state) => {\n                const isCurrentActive = highlightContext?.activeItemId === itemId;\n                const effectiveStagger = itemStagger ?? highlightContext?.stagger ?? true;\n                const isStaggerEnabled = effectiveStagger !== false;\n                const staggerDelay = typeof effectiveStagger === \"number\" ? effectiveStagger : 0.025;\n                const itemIndex = isStaggerEnabled && highlightContext ? highlightContext.getItemIndex(itemId) : 0;\n                const delay = Math.min(itemIndex * staggerDelay, 0.25);\n\n                return (\n                    <motion.div\n                        {...(itemProps as unknown as HTMLMotionProps<\"div\">)}\n                        initial={isStaggerEnabled ? { opacity: 0, x: -10 } : false}\n                        animate={isStaggerEnabled ? { opacity: 1, x: 0 } : false}\n                        transition={{\n                            x: { type: \"spring\", stiffness: 420, damping: 28, mass: 0.8, delay },\n                            opacity: { duration: 0.2, delay },\n                            scale: { type: \"spring\", stiffness: 400, damping: 25 },\n                            default: { type: \"spring\", stiffness: 400, damping: 25 },\n                        }}\n                        onPointerEnter={(e: React.PointerEvent<HTMLDivElement>) => {\n                            itemProps.onPointerEnter?.(e);\n                            highlightContext?.setActiveItem(itemId);\n                        }}\n                        onFocus={(e: React.FocusEvent<HTMLDivElement>) => {\n                            itemProps.onFocus?.(e);\n                            highlightContext?.setActiveItem(itemId);\n                        }}\n                        whileTap={{ scale: 0.98 }}\n                        className={cn(\n                            \"group/select-item relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\",\n                            (state.highlighted || isCurrentActive) && \"text-accent-foreground\",\n                            className,\n                        )}>\n                        {isCurrentActive && highlightContext?.highlightLayoutId && (\n                            <motion.div\n                                layoutId={highlightContext.highlightLayoutId}\n                                layout=\"position\"\n                                className=\"bg-accent pointer-events-none absolute inset-0 z-0 rounded-sm\"\n                                transition={{ type: \"spring\", stiffness: 450, damping: 32 }}\n                            />\n                        )}\n                        <SelectPrimitive.ItemText className=\"relative z-10 flex flex-1 shrink-0 gap-2 whitespace-nowrap\">\n                            {children}\n                        </SelectPrimitive.ItemText>\n                        <span\n                            className=\"pointer-events-none absolute right-2 z-10 flex size-4 items-center justify-center\"\n                            data-slot=\"select-item-indicator\">\n                            <SelectPrimitive.ItemIndicator>\n                                <motion.span\n                                    initial={{ scale: 0, opacity: 0 }}\n                                    animate={{ scale: 1, opacity: 1 }}\n                                    exit={{ scale: 0, opacity: 0 }}\n                                    transition={{ type: \"spring\", stiffness: 450, damping: 22 }}\n                                    className=\"flex items-center justify-center\">\n                                    <CheckIcon className=\"pointer-events-none size-4\" />\n                                </motion.span>\n                            </SelectPrimitive.ItemIndicator>\n                        </span>\n                    </motion.div>\n                );\n            }}\n        />\n    );\n}\n\nfunction SelectSeparator({ className, ...props }: SelectPrimitive.Separator.Props) {\n    return (\n        <SelectPrimitive.Separator\n            data-slot=\"select-separator\"\n            className={cn(\"bg-border pointer-events-none -mx-1 my-1 h-px\", className)}\n            {...props}\n        />\n    );\n}\n\nfunction SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {\n    return (\n        <SelectPrimitive.ScrollUpArrow\n            data-slot=\"select-scroll-up-button\"\n            className={cn(\n                \"bg-popover top-0 z-10 flex w-full cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4\",\n                className,\n            )}\n            {...props}>\n            <ChevronUpIcon />\n        </SelectPrimitive.ScrollUpArrow>\n    );\n}\n\nfunction SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {\n    return (\n        <SelectPrimitive.ScrollDownArrow\n            data-slot=\"select-scroll-down-button\"\n            className={cn(\n                \"bg-popover bottom-0 z-10 flex w-full cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4\",\n                className,\n            )}\n            {...props}>\n            <ChevronDownIcon />\n        </SelectPrimitive.ScrollDownArrow>\n    );\n}\n\nexport {\n    Select,\n    SelectContent,\n    SelectGroup,\n    SelectItem,\n    SelectLabel,\n    SelectScrollDownButton,\n    SelectScrollUpButton,\n    SelectSeparator,\n    SelectTrigger,\n    SelectValue,\n};\n"
    }
  ],
  "mcp": {
    "description": "A date picker component built on react-day-picker. Provides tactile day button presses and smooth spring selection pop physics.",
    "tags": [
      "component",
      "calendar",
      "date-picker",
      "paceui",
      "animation"
    ]
  }
}