{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "timeframe-tabs",
  "title": "Timeframe Tabs",
  "description": "A scrollable, controlled pill-tab row with an animated active-state highlight and a slot for trailing content.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/new-york/components/timeframe-tabs/timeframe-tabs.tsx",
      "type": "registry:component",
      "content": "\"use client\";\nimport * as React from \"react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\n\nconst springTransition = { type: \"spring\", stiffness: 500, damping: 40, mass: 0.6 } as const;\n\nexport interface TimeframeTabsProps {\n    /** The pills to render, in order. */\n    items: string[];\n    /** Currently active pill. */\n    value: string;\n    /** Called with the pill value when the user clicks one. */\n    onValueChange: (value: string) => void;\n    /** Optional accessible label for the tablist (defaults to \"Tabs\"). */\n    label?: string;\n    className?: string;\n    /**\n     * Anything rendered after the pill row — a divider, a dropdown menu,\n     * a shadcn Tabs trigger, an icon button, whatever the consumer needs.\n     * This is what makes the component reusable beyond just timeframes.\n     */\n    children?: React.ReactNode;\n}\n\n/**\n * A scrollable row of pill buttons with an animated active-state highlight.\n * Deliberately has no domain knowledge — pass any `items` list and control\n * it like any other controlled input. Trailing content (dividers, menus,\n * extra actions) goes in `children`.\n */\nexport function TimeframeTabs({\n    items,\n    value,\n    onValueChange,\n    label = \"Tabs\",\n    className,\n    children,\n}: TimeframeTabsProps) {\n    // Unique per-instance id so multiple TimeframeTabs on one page don't\n    // share a layout animation namespace.\n    const layoutId = React.useId();\n\n    return (\n        <div\n            role=\"tablist\"\n            aria-label={label}\n            className={cn(\n                \"inline-flex max-w-full items-center gap-1 rounded-lg border bg-transparent p-1\",\n                className\n            )}\n        >\n            <div className=\"flex min-w-0 items-center gap-1 overflow-x-auto scroll-px-1 [-ms-overflow-style:none] scrollbar-none [&::-webkit-scrollbar]:hidden\">\n                <AnimatePresence initial={false}>\n                    {items.map((item) => {\n                        const isActive = value === item;\n\n                        return (\n                            <motion.button\n                                key={item}\n                                layout=\"position\"\n                                initial={{ opacity: 0, scale: 0.85 }}\n                                animate={{ opacity: 1, scale: 1 }}\n                                exit={{ opacity: 0, scale: 0.85 }}\n                                transition={springTransition}\n                                whileTap={{ scale: 0.94 }}\n                                role=\"tab\"\n                                aria-selected={isActive}\n                                onClick={() => onValueChange(item)}\n                                className=\"relative shrink-0 whitespace-nowrap rounded-md px-2.5 py-1.5 text-[13px] font-medium outline-none cursor-pointer sm:px-3 sm:text-sm focus-visible:ring-2 focus-visible:ring-ring/50\"\n                            >\n                                {isActive && (\n                                    <motion.div\n                                        layoutId={`timeframe-tabs-active-${layoutId}`}\n                                        className=\"absolute inset-0 rounded-[7px] bg-muted\"\n                                        transition={springTransition}\n                                    />\n                                )}\n                                <span\n                                    className={cn(\n                                        \"relative z-10 transition-colors duration-150\",\n                                        isActive\n                                            ? \"text-secondary-foreground\"\n                                            : \"text-secondary-foreground/60 hover:text-secondary-foreground/90\"\n                                    )}\n                                >\n                                    {item}\n                                </span>\n                            </motion.button>\n                        );\n                    })}\n                </AnimatePresence>\n            </div>\n\n            {children}\n        </div>\n    );\n}\n\n/** Ready-made vertical divider for use inside a TimeframeTabs' children slot. */\nexport function TimeframeTabsDivider({ className }: { className?: string }) {\n    return <div className={cn(\"mx-1.5 h-6 w-px shrink-0 bg-border\", className)} />;\n}\n\nexport default TimeframeTabs;"
    }
  ],
  "type": "registry:component"
}