{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "range-selector",
  "title": "Range selector",
  "description": "trackless chart range (1D·1W·1M·1Y·ALL), active is a filled disc",
  "dependencies": [],
  "registryDependencies": [
    "@kit-native/lib-haptics",
    "@kit-native/lib-utils",
    "@kit-native/text"
  ],
  "files": [
    {
      "path": "components/kit/range-selector.tsx",
      "content": "import { Text } from '@/components/ui/text';\nimport { haptic } from '@/lib/haptics';\nimport { cn } from '@/lib/utils';\nimport { Pressable, View } from 'react-native';\n\ntype Props<T extends string> = {\n  options: readonly { value: T; label: string }[];\n  value: T;\n  onChange: (value: T) => void;\n  className?: string;\n};\n\n/**\n * Trackless range picker for a chart — 1D · 1W · 1M · 1Y · ALL.\n *\n * Equal-width pills so every option reads as tappable; 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<T>) {\n  return (\n    <View className={cn('flex-row items-center gap-2', className)} accessibilityRole=\"tablist\">\n      {options.map((option) => {\n        const selected = option.value === value;\n        return (\n          <Pressable\n            key={option.value}\n            onPress={() => {\n              haptic('selection');\n              onChange(option.value);\n            }}\n            accessibilityRole=\"tab\"\n            aria-selected={selected}\n            accessibilityLabel={option.label}\n            className={cn(\n              'h-11 flex-1 items-center justify-center rounded-full px-2 active:opacity-70',\n              selected ? 'bg-foreground' : 'bg-muted'\n            )}>\n            <Text className={cn('text-sm font-semibold', selected ? 'text-background' : 'text-muted-foreground')}>\n              {option.label}\n            </Text>\n          </Pressable>\n        );\n      })}\n    </View>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/range-selector.tsx"
    }
  ],
  "meta": {
    "exports": [
      "RangeSelector"
    ],
    "api": "<RangeSelector options value onChange />"
  },
  "docs": "Run `npx expo install --fix` afterwards so Expo SDK packages match your SDK. Needs the kit theme (`@kit-native/theme`) and `KitThemeProvider` from `@kit-native/lib-theme-context` at the root.",
  "categories": [
    "inputs"
  ],
  "type": "registry:component"
}