{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "quantity-stepper",
  "title": "Quantity stepper",
  "description": "`min max step`",
  "dependencies": [
    "lucide-react-native@^1.21.0"
  ],
  "registryDependencies": [
    "@kit-native/icon",
    "@kit-native/lib-haptics",
    "@kit-native/lib-utils",
    "@kit-native/text"
  ],
  "files": [
    {
      "path": "components/kit/quantity-stepper.tsx",
      "content": "import { Icon } from '@/components/ui/icon';\nimport { Text } from '@/components/ui/text';\nimport { haptic } from '@/lib/haptics';\nimport { cn } from '@/lib/utils';\nimport { MinusIcon, PlusIcon } from 'lucide-react-native';\nimport { Pressable, View } from 'react-native';\n\ntype Props = {\n  value: number;\n  onChange: (next: number) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  disabled?: boolean;\n  className?: string;\n};\n\n/** − value + control for quantities, guests, tickets. */\nexport function QuantityStepper({ value, onChange, min = 0, max = Number.POSITIVE_INFINITY, step = 1, disabled, className }: Props) {\n  const canDec = !disabled && value - step >= min;\n  const canInc = !disabled && value + step <= max;\n  const bump = (dir: 1 | -1) => {\n    haptic('selection');\n    onChange(value + dir * step);\n  };\n  return (\n    <View className={cn('bg-muted h-control-sm flex-row items-center rounded-lg', disabled && 'opacity-50', className)}>\n      <Pressable accessibilityRole=\"button\" accessibilityLabel=\"Decrease\" disabled={!canDec} onPress={() => bump(-1)} className={cn('h-control-sm w-control-sm items-center justify-center', !canDec && 'opacity-40')}>\n        <Icon as={MinusIcon} size={16} />\n      </Pressable>\n      <Text className=\"min-w-8 text-center font-semibold\">{value}</Text>\n      <Pressable accessibilityRole=\"button\" accessibilityLabel=\"Increase\" disabled={!canInc} onPress={() => bump(1)} className={cn('h-control-sm w-control-sm items-center justify-center', !canInc && 'opacity-40')}>\n        <Icon as={PlusIcon} size={16} />\n      </Pressable>\n    </View>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/quantity-stepper.tsx"
    }
  ],
  "meta": {
    "exports": [
      "QuantityStepper"
    ],
    "api": "<QuantityStepper value onChange min max step />"
  },
  "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"
}