{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "range-selector",
  "title": "Range selector",
  "description": "chart range (1D·1W·1M·1Y·ALL), the active one inverts",
  "dependencies": [
    "cn@^0.4.0"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/kit/range-selector.tsx",
      "content": "'use client';\nimport { cn } from 'cn';\n\ntype Props<T extends string> = {\n  options: readonly { value: T; label: string }[];\n  value: T;\n  onChange: (value: T) => void;\n  /** Names the group (\"Chart range\"). */\n  'aria-label'?: string;\n  className?: string;\n};\n\n/**\n * Trackless range picker for a chart: 1D · 1W · 1M · 1Y · ALL. Equal-width buttons; the selected one inverts. Use\n * SegmentedControl instead when the options switch content rather than a time window.\n */\nexport function RangeSelector<T extends string>({ options, value, onChange, className, ...props }: Props<T>) {\n  return (\n    <div role=\"radiogroup\" aria-label={props['aria-label'] ?? 'Range'} className={cn('flex items-center gap-2', className)}>\n      {options.map((o) => {\n        const selected = o.value === value;\n        return (\n          <button\n            key={o.value}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={selected}\n            onClick={() => onChange(o.value)}\n            className={cn(\n              'focus-visible:ring-ring/50 h-9 flex-1 rounded-md px-2 text-sm font-semibold transition-colors outline-none focus-visible:ring-[3px]',\n              selected ? 'bg-foreground text-background' : 'bg-muted text-muted-foreground hover:text-foreground'\n            )}>\n            {o.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/range-selector.tsx"
    }
  ],
  "meta": {
    "exports": [
      "RangeSelector"
    ],
    "api": "<RangeSelector options value onChange aria-label />"
  },
  "docs": "Needs the kit theme (`@kit/theme`) and a next-themes ThemeProvider (attribute=\"class\") at the root.",
  "categories": [
    "inputs"
  ],
  "type": "registry:component"
}