@expokit/cli 0.2.0 → 0.4.0

package/registry/_docs/select.json

@@ -1,11 +1,17 @@
 {
   "name": "select",
   "category": "Inputs",
-  "aliases": [],
+  "aliases": [
+    "multi-select",
+    "multiselect",
+    "combobox",
+    "dropdown"
+  ],
   "exportName": "Select",
   "files": [
     "src/components/ui/select.tsx"
   ],
+  "summary": "A dropdown or sheet picker with a floating label; multi-select shows removable chips.",
   "props": [
     [
       "options",
@@ -212,41 +218,60 @@
       "Each option's label text."
     ]
   ],
+  "behavior": [
+    [
+      "Touch",
+      "Tapping the field opens a dropdown anchored under it, flipping above when there's no room. presentation='sheet' slides up a bottom sheet you drag down to dismiss (a centred dialog on wide screens)."
+    ],
+    [
+      "Motion",
+      "The label floats onto the border, a focus halo glows and the chevron turns. In multiple mode chips pop in and collapse out, overflowing into a '+N' chip."
+    ],
+    [
+      "Keyboard",
+      "On web, arrow keys move the highlight, Home and End jump, Enter picks, and Escape or Tab close the menu."
+    ],
+    [
+      "Screen readers",
+      "The field is a combobox whose value lists the selection, with an expanded state. Options are menu items, or checkboxes in multiple mode."
+    ]
+  ],
+  "usage": "import { useState } from 'react';\nimport { Select } from '@/components/ui/select';\n\nconst [team, setTeam] = useState<string[]>([]);\n<Select multiple label=\"Assignees\" options={['Amelia', 'Ravi', 'Sofia', 'Kenji']} values={team} onValuesChange={setTeam} />",
   "examples": [
     {
       "name": "Validation",
       "title": "Validation",
-      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { Select } from '@/components/ui/select';\nimport { alpha, readableOn, useKit } from '@/lib/kit';\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        {\n          backgroundColor: colors.card,\n          borderColor: colors.border,\n          borderWidth: StyleSheet.hairlineWidth,\n          borderRadius: radius.xl,\n          padding: 18,\n          gap: 14,\n        },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\n/** Text in the kit's ink: `tone=\"muted\"` for secondary copy. */\nfunction Ink({ tone, style, ...rest }: TextProps & { tone?: 'muted' }) {\n  const { colors } = useKit();\n  return <Text style={[{ color: tone === 'muted' ? colors.mutedForeground : colors.foreground }, style]} {...rest} />;\n}\n\nfunction Heading({ title, sub }: { title: string; sub?: string }) {\n  return (\n    <View style={s.heading}>\n      <Ink style={s.title}>{title}</Ink>\n      {sub ? (\n        <Ink tone=\"muted\" style={s.sub}>\n          {sub}\n        </Ink>\n      ) : null}\n    </View>\n  );\n}\n\nconst flag = (f: string) => <Text style={s.flag}>{f}</Text>;\n\nconst avatar = (initials: string, color: string) => (\n  <View style={[s.avatar, { backgroundColor: color }]}>\n    <Text style={[s.initials, { color: readableOn(color) }]}>{initials}</Text>\n  </View>\n);\n\nconst s = StyleSheet.create({\n  heading: { gap: 3, marginBottom: 2 },\n  title: { fontSize: 16, fontWeight: '400', letterSpacing: -0.2 },\n  sub: { fontSize: 13, lineHeight: 18 },\n  glyph: { width: 28, height: 28, alignItems: 'center', justifyContent: 'center' },\n  flag: { fontSize: 18 },\n  avatar: { width: 26, height: 26, borderRadius: 13, alignItems: 'center', justifyContent: 'center' },\n  initials: { fontSize: 10.5, fontWeight: '400' },\n  button: { height: 44, alignItems: 'center', justifyContent: 'center', marginTop: 2 },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function Validation() {\n  const { colors, radius } = useKit();\n  const [size, setSize] = useState<string | null>(null);\n  const [touched, setTouched] = useState(false);\n  const missing = touched && !size;\n  return (\n    <Card>\n      <Heading title=\"Merino crew sweater\" sub=\"₹3,499 · Oatmeal\" />\n      <Select\n        label=\"Size\"\n        floatingLabel={false}\n        placeholder=\"Choose a size\"\n        size=\"sm\"\n        value={size}\n        surface={colors.card}\n        onValueChange={(v) => {\n          setSize(v);\n          setTouched(true);\n        }}\n        options={[\n          { label: 'XS', value: 'XS', disabled: true, description: 'Sold out' },\n          { label: 'S', value: 'S', description: 'Chest 34–36\"' },\n          { label: 'M', value: 'M', description: 'Chest 38–40\"' },\n          { label: 'L', value: 'L', description: 'Chest 42–44\"' },\n          { label: 'XL', value: 'XL', description: 'Chest 46–48\"' },\n        ]}\n        error={missing ? 'Pick a size to add this to your bag' : undefined}\n        helper={missing ? undefined : 'Runs true to size · free exchanges'}\n      />\n      <Pressable\n        onPress={() => setTouched(true)}\n        accessibilityRole=\"button\"\n        style={({ pressed }) => [s.button, { backgroundColor: colors.primary, borderRadius: radius.md, opacity: pressed ? 0.88 : 1 }]}\n      >\n        <Text style={[s.buttonText, { color: colors.primaryForeground }]}>Add to bag</Text>\n      </Pressable>\n    </Card>\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { Select } from '@/components/ui/select';\nimport { alpha, readableOn, useKit } from '@/lib/kit';\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        screen\n          ? { flex: 1, backgroundColor: colors.background, padding: 18, gap: 14 }\n          : {\n              backgroundColor: colors.card,\n              borderColor: colors.border,\n              borderWidth: StyleSheet.hairlineWidth,\n              borderRadius: radius.xl,\n              padding: 18,\n              gap: 14,\n            },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\n/** Text in the kit's ink: `tone=\"muted\"` for secondary copy. */\nfunction Ink({ tone, style, ...rest }: TextProps & { tone?: 'muted' }) {\n  const { colors } = useKit();\n  return <Text style={[{ color: tone === 'muted' ? colors.mutedForeground : colors.foreground }, style]} {...rest} />;\n}\n\nfunction Heading({ title, sub }: { title: string; sub?: string }) {\n  return (\n    <View style={s.heading}>\n      <Ink style={s.title}>{title}</Ink>\n      {sub ? (\n        <Ink tone=\"muted\" style={s.sub}>\n          {sub}\n        </Ink>\n      ) : null}\n    </View>\n  );\n}\n\nconst flag = (f: string) => <Text style={s.flag}>{f}</Text>;\n\nconst avatar = (initials: string, color: string) => (\n  <View style={[s.avatar, { backgroundColor: color }]}>\n    <Text style={[s.initials, { color: readableOn(color) }]}>{initials}</Text>\n  </View>\n);\n\nconst s = StyleSheet.create({\n  heading: { gap: 3, marginBottom: 2 },\n  title: { fontSize: 16, fontWeight: '400', letterSpacing: -0.2 },\n  sub: { fontSize: 13, lineHeight: 18 },\n  glyph: { width: 28, height: 28, alignItems: 'center', justifyContent: 'center' },\n  flag: { fontSize: 18 },\n  avatar: { width: 26, height: 26, borderRadius: 13, alignItems: 'center', justifyContent: 'center' },\n  initials: { fontSize: 10.5, fontWeight: '400' },\n  button: { height: 44, alignItems: 'center', justifyContent: 'center', marginTop: 2 },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function Validation({ screen }: DemoProps) {\n  const { colors, radius } = useKit();\n  const [size, setSize] = useState<string | null>(null);\n  const [touched, setTouched] = useState(false);\n  const missing = touched && !size;\n  return (\n    <Card screen={screen}>\n      <Heading title=\"Merino crew sweater\" sub=\"₹3,499 · Oatmeal\" />\n      <Select\n        label=\"Size\"\n        floatingLabel={false}\n        placeholder=\"Choose a size\"\n        size=\"sm\"\n        value={size}\n        surface={colors.card}\n        onValueChange={(v) => {\n          setSize(v);\n          setTouched(true);\n        }}\n        options={[\n          { label: 'XS', value: 'XS', disabled: true, description: 'Sold out' },\n          { label: 'S', value: 'S', description: 'Chest 34–36\"' },\n          { label: 'M', value: 'M', description: 'Chest 38–40\"' },\n          { label: 'L', value: 'L', description: 'Chest 42–44\"' },\n          { label: 'XL', value: 'XL', description: 'Chest 46–48\"' },\n        ]}\n        error={missing ? 'Pick a size to add this to your bag' : undefined}\n        helper={missing ? undefined : 'Runs true to size · free exchanges'}\n      />\n      <Pressable\n        onPress={() => setTouched(true)}\n        accessibilityRole=\"button\"\n        style={({ pressed }) => [s.button, { backgroundColor: colors.primary, borderRadius: radius.md, opacity: pressed ? 0.88 : 1 }]}\n      >\n        <Text style={[s.buttonText, { color: colors.primaryForeground }]}>Add to bag</Text>\n      </Pressable>\n    </Card>\n  );\n}\n"
     },
     {
       "name": "Plan",
       "title": "Plan",
-      "code": "import { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport Svg, { Circle, Path } from 'react-native-svg';\nimport { Select } from '@/components/ui/select';\nimport { alpha, readableOn, useKit } from '@/lib/kit';\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        {\n          backgroundColor: colors.card,\n          borderColor: colors.border,\n          borderWidth: StyleSheet.hairlineWidth,\n          borderRadius: radius.xl,\n          padding: 18,\n          gap: 14,\n        },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\n/** Text in the kit's ink: `tone=\"muted\"` for secondary copy. */\nfunction Ink({ tone, style, ...rest }: TextProps & { tone?: 'muted' }) {\n  const { colors } = useKit();\n  return <Text style={[{ color: tone === 'muted' ? colors.mutedForeground : colors.foreground }, style]} {...rest} />;\n}\n\nfunction Heading({ title, sub }: { title: string; sub?: string }) {\n  return (\n    <View style={s.heading}>\n      <Ink style={s.title}>{title}</Ink>\n      {sub ? (\n        <Ink tone=\"muted\" style={s.sub}>\n          {sub}\n        </Ink>\n      ) : null}\n    </View>\n  );\n}\n\n/** Small icon tile for option rows. */\nfunction Glyph({ d, tone }: { d: string; tone?: 'accent' | 'success' | 'warning' }) {\n  const { colors, radius } = useKit();\n  const c = tone ? colors[tone] : colors.mutedForeground;\n  return (\n    <View style={[s.glyph, { borderRadius: radius.scale(8), backgroundColor: tone ? alpha(c, 0.14) : colors.muted }]}>\n      <Svg width={15} height={15} viewBox=\"0 0 24 24\">\n        <Path d={d} stroke={c} strokeWidth={2} strokeLinecap=\"round\" strokeLinejoin=\"round\" fill=\"none\" />\n      </Svg>\n    </View>\n  );\n}\n\nconst ICON = {\n  leaf: 'M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.5 19 2c1 2 2 4.2 2 8 0 5.5-4.8 10-10 10ZM2 21c0-3 1.9-5.4 5.2-6',\n  bolt: 'M13 2 3 14h9l-1 8 10-12h-9l1-8Z',\n  users: 'M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8',\n  building: 'M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18ZM6 12H4a2 2 0 0 0-2 2v8h4M18 9h2a2 2 0 0 1 2 2v11h-4M10 6h4M10 10h4M10 14h4M10 18h4',\n};\n\nconst flag = (f: string) => <Text style={s.flag}>{f}</Text>;\n\nconst avatar = (initials: string, color: string) => (\n  <View style={[s.avatar, { backgroundColor: color }]}>\n    <Text style={[s.initials, { color: readableOn(color) }]}>{initials}</Text>\n  </View>\n);\n\nconst s = StyleSheet.create({\n  heading: { gap: 3, marginBottom: 2 },\n  title: { fontSize: 16, fontWeight: '400', letterSpacing: -0.2 },\n  sub: { fontSize: 13, lineHeight: 18 },\n  glyph: { width: 28, height: 28, alignItems: 'center', justifyContent: 'center' },\n  flag: { fontSize: 18 },\n  avatar: { width: 26, height: 26, borderRadius: 13, alignItems: 'center', justifyContent: 'center' },\n  initials: { fontSize: 10.5, fontWeight: '400' },\n  button: { height: 44, alignItems: 'center', justifyContent: 'center', marginTop: 2 },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function Plan() {\n  const { colors } = useKit();\n  return (\n    <Card>\n      <Heading title=\"Workspace plan\" sub=\"Billed monthly · change anytime\" />\n      <Select\n        label=\"Plan\"\n        floatingLabel={false}\n        placeholder=\"Select a plan\"\n        size=\"sm\"\n        defaultValue=\"pro\"\n        surface={colors.card}\n        helper=\"You can switch plans later from billing.\"\n        options={[\n          { label: 'Hobby', value: 'hobby', description: 'Free · 1 project', icon: <Glyph d={ICON.leaf} tone=\"success\" /> },\n          { label: 'Pro', value: 'pro', description: '₹499 / seat · unlimited projects', icon: <Glyph d={ICON.bolt} tone=\"accent\" /> },\n          { label: 'Team', value: 'team', description: '₹1,499 / seat · SSO and audit log', icon: <Glyph d={ICON.users} tone=\"warning\" /> },\n          { label: 'Enterprise', value: 'enterprise', description: 'Talk to sales', icon: <Glyph d={ICON.building} />, disabled: true },\n        ]}\n      />\n    </Card>\n  );\n}\n"
+      "code": "import { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport Svg, { Circle, Path } from 'react-native-svg';\nimport { Select } from '@/components/ui/select';\nimport { alpha, readableOn, useKit } from '@/lib/kit';\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        screen\n          ? { flex: 1, backgroundColor: colors.background, padding: 18, gap: 14 }\n          : {\n              backgroundColor: colors.card,\n              borderColor: colors.border,\n              borderWidth: StyleSheet.hairlineWidth,\n              borderRadius: radius.xl,\n              padding: 18,\n              gap: 14,\n            },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\n/** Text in the kit's ink: `tone=\"muted\"` for secondary copy. */\nfunction Ink({ tone, style, ...rest }: TextProps & { tone?: 'muted' }) {\n  const { colors } = useKit();\n  return <Text style={[{ color: tone === 'muted' ? colors.mutedForeground : colors.foreground }, style]} {...rest} />;\n}\n\nfunction Heading({ title, sub }: { title: string; sub?: string }) {\n  return (\n    <View style={s.heading}>\n      <Ink style={s.title}>{title}</Ink>\n      {sub ? (\n        <Ink tone=\"muted\" style={s.sub}>\n          {sub}\n        </Ink>\n      ) : null}\n    </View>\n  );\n}\n\n/** Small icon tile for option rows. */\nfunction Glyph({ d, tone }: { d: string; tone?: 'accent' | 'success' | 'warning' }) {\n  const { colors, radius } = useKit();\n  const c = tone ? colors[tone] : colors.mutedForeground;\n  return (\n    <View style={[s.glyph, { borderRadius: radius.scale(8), backgroundColor: tone ? alpha(c, 0.14) : colors.muted }]}>\n      <Svg width={15} height={15} viewBox=\"0 0 24 24\">\n        <Path d={d} stroke={c} strokeWidth={2} strokeLinecap=\"round\" strokeLinejoin=\"round\" fill=\"none\" />\n      </Svg>\n    </View>\n  );\n}\n\nconst ICON = {\n  leaf: 'M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.5 19 2c1 2 2 4.2 2 8 0 5.5-4.8 10-10 10ZM2 21c0-3 1.9-5.4 5.2-6',\n  bolt: 'M13 2 3 14h9l-1 8 10-12h-9l1-8Z',\n  users: 'M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8',\n  building: 'M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18ZM6 12H4a2 2 0 0 0-2 2v8h4M18 9h2a2 2 0 0 1 2 2v11h-4M10 6h4M10 10h4M10 14h4M10 18h4',\n};\n\nconst flag = (f: string) => <Text style={s.flag}>{f}</Text>;\n\nconst avatar = (initials: string, color: string) => (\n  <View style={[s.avatar, { backgroundColor: color }]}>\n    <Text style={[s.initials, { color: readableOn(color) }]}>{initials}</Text>\n  </View>\n);\n\nconst s = StyleSheet.create({\n  heading: { gap: 3, marginBottom: 2 },\n  title: { fontSize: 16, fontWeight: '400', letterSpacing: -0.2 },\n  sub: { fontSize: 13, lineHeight: 18 },\n  glyph: { width: 28, height: 28, alignItems: 'center', justifyContent: 'center' },\n  flag: { fontSize: 18 },\n  avatar: { width: 26, height: 26, borderRadius: 13, alignItems: 'center', justifyContent: 'center' },\n  initials: { fontSize: 10.5, fontWeight: '400' },\n  button: { height: 44, alignItems: 'center', justifyContent: 'center', marginTop: 2 },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function Plan({ screen }: DemoProps) {\n  const { colors } = useKit();\n  return (\n    <Card screen={screen}>\n      <Heading title=\"Workspace plan\" sub=\"Billed monthly · change anytime\" />\n      <Select\n        label=\"Plan\"\n        floatingLabel={false}\n        placeholder=\"Select a plan\"\n        size=\"sm\"\n        defaultValue=\"pro\"\n        surface={colors.card}\n        helper=\"You can switch plans later from billing.\"\n        options={[\n          { label: 'Hobby', value: 'hobby', description: 'Free · 1 project', icon: <Glyph d={ICON.leaf} tone=\"success\" /> },\n          { label: 'Pro', value: 'pro', description: '₹499 / seat · unlimited projects', icon: <Glyph d={ICON.bolt} tone=\"accent\" /> },\n          { label: 'Team', value: 'team', description: '₹1,499 / seat · SSO and audit log', icon: <Glyph d={ICON.users} tone=\"warning\" /> },\n          { label: 'Enterprise', value: 'enterprise', description: 'Talk to sales', icon: <Glyph d={ICON.building} />, disabled: true },\n        ]}\n      />\n    </Card>\n  );\n}\n"
     },
     {
       "name": "Country",
       "title": "Country",
-      "code": "import { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { Select } from '@/components/ui/select';\nimport { alpha, readableOn, useKit } from '@/lib/kit';\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        {\n          backgroundColor: colors.card,\n          borderColor: colors.border,\n          borderWidth: StyleSheet.hairlineWidth,\n          borderRadius: radius.xl,\n          padding: 18,\n          gap: 14,\n        },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\n/** Text in the kit's ink: `tone=\"muted\"` for secondary copy. */\nfunction Ink({ tone, style, ...rest }: TextProps & { tone?: 'muted' }) {\n  const { colors } = useKit();\n  return <Text style={[{ color: tone === 'muted' ? colors.mutedForeground : colors.foreground }, style]} {...rest} />;\n}\n\nfunction Heading({ title, sub }: { title: string; sub?: string }) {\n  return (\n    <View style={s.heading}>\n      <Ink style={s.title}>{title}</Ink>\n      {sub ? (\n        <Ink tone=\"muted\" style={s.sub}>\n          {sub}\n        </Ink>\n      ) : null}\n    </View>\n  );\n}\n\nconst flag = (f: string) => <Text style={s.flag}>{f}</Text>;\n\nconst avatar = (initials: string, color: string) => (\n  <View style={[s.avatar, { backgroundColor: color }]}>\n    <Text style={[s.initials, { color: readableOn(color) }]}>{initials}</Text>\n  </View>\n);\n\nconst s = StyleSheet.create({\n  heading: { gap: 3, marginBottom: 2 },\n  title: { fontSize: 16, fontWeight: '400', letterSpacing: -0.2 },\n  sub: { fontSize: 13, lineHeight: 18 },\n  glyph: { width: 28, height: 28, alignItems: 'center', justifyContent: 'center' },\n  flag: { fontSize: 18 },\n  avatar: { width: 26, height: 26, borderRadius: 13, alignItems: 'center', justifyContent: 'center' },\n  initials: { fontSize: 10.5, fontWeight: '400' },\n  button: { height: 44, alignItems: 'center', justifyContent: 'center', marginTop: 2 },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function Country() {\n  const { colors } = useKit();\n  return (\n    <Card>\n      <Heading title=\"Shipping address\" sub=\"Where should we send this order?\" />\n      <Select\n        searchable\n        label=\"Country\"\n        floatingLabel={false}\n        placeholder=\"Select country\"\n        searchPlaceholder=\"Search countries\"\n        size=\"sm\"\n        defaultValue=\"DE\"\n        surface={colors.card}\n        options={[\n          { label: 'United States', value: 'US', icon: flag('🇺🇸'), group: 'Americas' },\n          { label: 'Canada', value: 'CA', icon: flag('🇨🇦'), group: 'Americas' },\n          { label: 'Brazil', value: 'BR', icon: flag('🇧🇷'), group: 'Americas' },\n          { label: 'United Kingdom', value: 'GB', icon: flag('🇬🇧'), group: 'Europe' },\n          { label: 'Germany', value: 'DE', icon: flag('🇩🇪'), group: 'Europe' },\n          { label: 'France', value: 'FR', icon: flag('🇫🇷'), group: 'Europe' },\n          { label: 'India', value: 'IN', icon: flag('🇮🇳'), group: 'Asia Pacific' },\n          { label: 'Japan', value: 'JP', icon: flag('🇯🇵'), group: 'Asia Pacific' },\n          { label: 'Australia', value: 'AU', icon: flag('🇦🇺'), group: 'Asia Pacific' },\n        ]}\n      />\n    </Card>\n  );\n}\n"
+      "code": "import { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { Select } from '@/components/ui/select';\nimport { alpha, readableOn, useKit } from '@/lib/kit';\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        screen\n          ? { flex: 1, backgroundColor: colors.background, padding: 18, gap: 14 }\n          : {\n              backgroundColor: colors.card,\n              borderColor: colors.border,\n              borderWidth: StyleSheet.hairlineWidth,\n              borderRadius: radius.xl,\n              padding: 18,\n              gap: 14,\n            },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\n/** Text in the kit's ink: `tone=\"muted\"` for secondary copy. */\nfunction Ink({ tone, style, ...rest }: TextProps & { tone?: 'muted' }) {\n  const { colors } = useKit();\n  return <Text style={[{ color: tone === 'muted' ? colors.mutedForeground : colors.foreground }, style]} {...rest} />;\n}\n\nfunction Heading({ title, sub }: { title: string; sub?: string }) {\n  return (\n    <View style={s.heading}>\n      <Ink style={s.title}>{title}</Ink>\n      {sub ? (\n        <Ink tone=\"muted\" style={s.sub}>\n          {sub}\n        </Ink>\n      ) : null}\n    </View>\n  );\n}\n\nconst flag = (f: string) => <Text style={s.flag}>{f}</Text>;\n\nconst avatar = (initials: string, color: string) => (\n  <View style={[s.avatar, { backgroundColor: color }]}>\n    <Text style={[s.initials, { color: readableOn(color) }]}>{initials}</Text>\n  </View>\n);\n\nconst s = StyleSheet.create({\n  heading: { gap: 3, marginBottom: 2 },\n  title: { fontSize: 16, fontWeight: '400', letterSpacing: -0.2 },\n  sub: { fontSize: 13, lineHeight: 18 },\n  glyph: { width: 28, height: 28, alignItems: 'center', justifyContent: 'center' },\n  flag: { fontSize: 18 },\n  avatar: { width: 26, height: 26, borderRadius: 13, alignItems: 'center', justifyContent: 'center' },\n  initials: { fontSize: 10.5, fontWeight: '400' },\n  button: { height: 44, alignItems: 'center', justifyContent: 'center', marginTop: 2 },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function Country({ screen }: DemoProps) {\n  const { colors } = useKit();\n  return (\n    <Card screen={screen}>\n      <Heading title=\"Shipping address\" sub=\"Where should we send this order?\" />\n      <Select\n        searchable\n        label=\"Country\"\n        floatingLabel={false}\n        placeholder=\"Select country\"\n        searchPlaceholder=\"Search countries\"\n        size=\"sm\"\n        defaultValue=\"DE\"\n        surface={colors.card}\n        options={[\n          { label: 'United States', value: 'US', icon: flag('🇺🇸'), group: 'Americas' },\n          { label: 'Canada', value: 'CA', icon: flag('🇨🇦'), group: 'Americas' },\n          { label: 'Brazil', value: 'BR', icon: flag('🇧🇷'), group: 'Americas' },\n          { label: 'United Kingdom', value: 'GB', icon: flag('🇬🇧'), group: 'Europe' },\n          { label: 'Germany', value: 'DE', icon: flag('🇩🇪'), group: 'Europe' },\n          { label: 'France', value: 'FR', icon: flag('🇫🇷'), group: 'Europe' },\n          { label: 'India', value: 'IN', icon: flag('🇮🇳'), group: 'Asia Pacific' },\n          { label: 'Japan', value: 'JP', icon: flag('🇯🇵'), group: 'Asia Pacific' },\n          { label: 'Australia', value: 'AU', icon: flag('🇦🇺'), group: 'Asia Pacific' },\n        ]}\n      />\n    </Card>\n  );\n}\n"
     },
     {
       "name": "Assignees",
       "title": "Assignees",
-      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { Select } from '@/components/ui/select';\nimport { alpha, readableOn, useKit } from '@/lib/kit';\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        {\n          backgroundColor: colors.card,\n          borderColor: colors.border,\n          borderWidth: StyleSheet.hairlineWidth,\n          borderRadius: radius.xl,\n          padding: 18,\n          gap: 14,\n        },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\n/** Text in the kit's ink: `tone=\"muted\"` for secondary copy. */\nfunction Ink({ tone, style, ...rest }: TextProps & { tone?: 'muted' }) {\n  const { colors } = useKit();\n  return <Text style={[{ color: tone === 'muted' ? colors.mutedForeground : colors.foreground }, style]} {...rest} />;\n}\n\nfunction Heading({ title, sub }: { title: string; sub?: string }) {\n  return (\n    <View style={s.heading}>\n      <Ink style={s.title}>{title}</Ink>\n      {sub ? (\n        <Ink tone=\"muted\" style={s.sub}>\n          {sub}\n        </Ink>\n      ) : null}\n    </View>\n  );\n}\n\nconst flag = (f: string) => <Text style={s.flag}>{f}</Text>;\n\nconst avatar = (initials: string, color: string) => (\n  <View style={[s.avatar, { backgroundColor: color }]}>\n    <Text style={[s.initials, { color: readableOn(color) }]}>{initials}</Text>\n  </View>\n);\n\nconst s = StyleSheet.create({\n  heading: { gap: 3, marginBottom: 2 },\n  title: { fontSize: 16, fontWeight: '400', letterSpacing: -0.2 },\n  sub: { fontSize: 13, lineHeight: 18 },\n  glyph: { width: 28, height: 28, alignItems: 'center', justifyContent: 'center' },\n  flag: { fontSize: 18 },\n  avatar: { width: 26, height: 26, borderRadius: 13, alignItems: 'center', justifyContent: 'center' },\n  initials: { fontSize: 10.5, fontWeight: '400' },\n  button: { height: 44, alignItems: 'center', justifyContent: 'center', marginTop: 2 },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function Assignees() {\n  const { colors } = useKit();\n  const [people, setPeople] = useState(['maya', 'leo']);\n  return (\n    <Card>\n      <Heading title=\"Fix checkout crash on Android 14\" sub=\"ENG-2142 · In progress\" />\n      <Select\n        multiple\n        searchable\n        label=\"Assignees\"\n        floatingLabel={false}\n        placeholder=\"Add teammates\"\n        searchPlaceholder=\"Search teammates\"\n        size=\"sm\"\n        values={people}\n        onValuesChange={setPeople}\n        surface={colors.card}\n        options={[\n          { label: 'Maya Chen', value: 'maya', description: 'Design', icon: avatar('MC', '#f472b6') },\n          { label: 'Leo Martins', value: 'leo', description: 'iOS', icon: avatar('LM', '#60a5fa') },\n          { label: 'Ana Ruiz', value: 'ana', description: 'Android', icon: avatar('AR', '#34d399') },\n          { label: 'Sam Okafor', value: 'sam', description: 'Backend', icon: avatar('SO', '#fbbf24') },\n          { label: 'Priya Nair', value: 'priya', description: 'QA', icon: avatar('PN', '#a78bfa') },\n        ]}\n      />\n    </Card>\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { Select } from '@/components/ui/select';\nimport { alpha, readableOn, useKit } from '@/lib/kit';\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        screen\n          ? { flex: 1, backgroundColor: colors.background, padding: 18, gap: 14 }\n          : {\n              backgroundColor: colors.card,\n              borderColor: colors.border,\n              borderWidth: StyleSheet.hairlineWidth,\n              borderRadius: radius.xl,\n              padding: 18,\n              gap: 14,\n            },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\n/** Text in the kit's ink: `tone=\"muted\"` for secondary copy. */\nfunction Ink({ tone, style, ...rest }: TextProps & { tone?: 'muted' }) {\n  const { colors } = useKit();\n  return <Text style={[{ color: tone === 'muted' ? colors.mutedForeground : colors.foreground }, style]} {...rest} />;\n}\n\nfunction Heading({ title, sub }: { title: string; sub?: string }) {\n  return (\n    <View style={s.heading}>\n      <Ink style={s.title}>{title}</Ink>\n      {sub ? (\n        <Ink tone=\"muted\" style={s.sub}>\n          {sub}\n        </Ink>\n      ) : null}\n    </View>\n  );\n}\n\nconst flag = (f: string) => <Text style={s.flag}>{f}</Text>;\n\nconst avatar = (initials: string, color: string) => (\n  <View style={[s.avatar, { backgroundColor: color }]}>\n    <Text style={[s.initials, { color: readableOn(color) }]}>{initials}</Text>\n  </View>\n);\n\nconst s = StyleSheet.create({\n  heading: { gap: 3, marginBottom: 2 },\n  title: { fontSize: 16, fontWeight: '400', letterSpacing: -0.2 },\n  sub: { fontSize: 13, lineHeight: 18 },\n  glyph: { width: 28, height: 28, alignItems: 'center', justifyContent: 'center' },\n  flag: { fontSize: 18 },\n  avatar: { width: 26, height: 26, borderRadius: 13, alignItems: 'center', justifyContent: 'center' },\n  initials: { fontSize: 10.5, fontWeight: '400' },\n  button: { height: 44, alignItems: 'center', justifyContent: 'center', marginTop: 2 },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function Assignees({ screen }: DemoProps) {\n  const { colors } = useKit();\n  const [people, setPeople] = useState(['maya', 'leo']);\n  return (\n    <Card screen={screen}>\n      <Heading title=\"Fix checkout crash on Android 14\" sub=\"ENG-2142 · In progress\" />\n      <Select\n        multiple\n        searchable\n        label=\"Assignees\"\n        floatingLabel={false}\n        placeholder=\"Add teammates\"\n        searchPlaceholder=\"Search teammates\"\n        size=\"sm\"\n        values={people}\n        onValuesChange={setPeople}\n        surface={colors.card}\n        options={[\n          { label: 'Maya Chen', value: 'maya', description: 'Design', icon: avatar('MC', '#f472b6') },\n          { label: 'Leo Martins', value: 'leo', description: 'iOS', icon: avatar('LM', '#60a5fa') },\n          { label: 'Ana Ruiz', value: 'ana', description: 'Android', icon: avatar('AR', '#34d399') },\n          { label: 'Sam Okafor', value: 'sam', description: 'Backend', icon: avatar('SO', '#fbbf24') },\n          { label: 'Priya Nair', value: 'priya', description: 'QA', icon: avatar('PN', '#a78bfa') },\n        ]}\n      />\n    </Card>\n  );\n}\n"
     },
     {
       "name": "Sheet",
       "title": "Sheet",
-      "code": "import { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { Select } from '@/components/ui/select';\nimport { alpha, readableOn, useKit } from '@/lib/kit';\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        {\n          backgroundColor: colors.card,\n          borderColor: colors.border,\n          borderWidth: StyleSheet.hairlineWidth,\n          borderRadius: radius.xl,\n          padding: 18,\n          gap: 14,\n        },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\n/** Text in the kit's ink: `tone=\"muted\"` for secondary copy. */\nfunction Ink({ tone, style, ...rest }: TextProps & { tone?: 'muted' }) {\n  const { colors } = useKit();\n  return <Text style={[{ color: tone === 'muted' ? colors.mutedForeground : colors.foreground }, style]} {...rest} />;\n}\n\nfunction Heading({ title, sub }: { title: string; sub?: string }) {\n  return (\n    <View style={s.heading}>\n      <Ink style={s.title}>{title}</Ink>\n      {sub ? (\n        <Ink tone=\"muted\" style={s.sub}>\n          {sub}\n        </Ink>\n      ) : null}\n    </View>\n  );\n}\n\nconst flag = (f: string) => <Text style={s.flag}>{f}</Text>;\n\nconst avatar = (initials: string, color: string) => (\n  <View style={[s.avatar, { backgroundColor: color }]}>\n    <Text style={[s.initials, { color: readableOn(color) }]}>{initials}</Text>\n  </View>\n);\n\nconst s = StyleSheet.create({\n  heading: { gap: 3, marginBottom: 2 },\n  title: { fontSize: 16, fontWeight: '400', letterSpacing: -0.2 },\n  sub: { fontSize: 13, lineHeight: 18 },\n  glyph: { width: 28, height: 28, alignItems: 'center', justifyContent: 'center' },\n  flag: { fontSize: 18 },\n  avatar: { width: 26, height: 26, borderRadius: 13, alignItems: 'center', justifyContent: 'center' },\n  initials: { fontSize: 10.5, fontWeight: '400' },\n  button: { height: 44, alignItems: 'center', justifyContent: 'center', marginTop: 2 },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function Sheet() {\n  const { colors } = useKit();\n  return (\n    <Card>\n      <Heading title=\"Notifications\" sub=\"Opens as a sheet instead of a dropdown\" />\n      <Select\n        presentation=\"sheet\"\n        label=\"Email digest\"\n        floatingLabel={false}\n        placeholder=\"How often?\"\n        title=\"How often?\"\n        size=\"sm\"\n        defaultValue=\"weekly\"\n        surface={colors.card}\n        options={[\n          { label: 'Daily', value: 'daily', description: 'Every morning at 8:00' },\n          { label: 'Weekly', value: 'weekly', description: 'Mondays at 8:00' },\n          { label: 'Monthly', value: 'monthly', description: 'First of the month' },\n          { label: 'Never', value: 'never', description: 'Only security alerts' },\n        ]}\n      />\n    </Card>\n  );\n}\n"
+      "code": "import { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { Select } from '@/components/ui/select';\nimport { alpha, readableOn, useKit } from '@/lib/kit';\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        screen\n          ? { flex: 1, backgroundColor: colors.background, padding: 18, gap: 14 }\n          : {\n              backgroundColor: colors.card,\n              borderColor: colors.border,\n              borderWidth: StyleSheet.hairlineWidth,\n              borderRadius: radius.xl,\n              padding: 18,\n              gap: 14,\n            },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\n/** Text in the kit's ink: `tone=\"muted\"` for secondary copy. */\nfunction Ink({ tone, style, ...rest }: TextProps & { tone?: 'muted' }) {\n  const { colors } = useKit();\n  return <Text style={[{ color: tone === 'muted' ? colors.mutedForeground : colors.foreground }, style]} {...rest} />;\n}\n\nfunction Heading({ title, sub }: { title: string; sub?: string }) {\n  return (\n    <View style={s.heading}>\n      <Ink style={s.title}>{title}</Ink>\n      {sub ? (\n        <Ink tone=\"muted\" style={s.sub}>\n          {sub}\n        </Ink>\n      ) : null}\n    </View>\n  );\n}\n\nconst flag = (f: string) => <Text style={s.flag}>{f}</Text>;\n\nconst avatar = (initials: string, color: string) => (\n  <View style={[s.avatar, { backgroundColor: color }]}>\n    <Text style={[s.initials, { color: readableOn(color) }]}>{initials}</Text>\n  </View>\n);\n\nconst s = StyleSheet.create({\n  heading: { gap: 3, marginBottom: 2 },\n  title: { fontSize: 16, fontWeight: '400', letterSpacing: -0.2 },\n  sub: { fontSize: 13, lineHeight: 18 },\n  glyph: { width: 28, height: 28, alignItems: 'center', justifyContent: 'center' },\n  flag: { fontSize: 18 },\n  avatar: { width: 26, height: 26, borderRadius: 13, alignItems: 'center', justifyContent: 'center' },\n  initials: { fontSize: 10.5, fontWeight: '400' },\n  button: { height: 44, alignItems: 'center', justifyContent: 'center', marginTop: 2 },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function Sheet({ screen }: DemoProps) {\n  const { colors } = useKit();\n  return (\n    <Card screen={screen}>\n      <Heading title=\"Notifications\" sub=\"Opens as a sheet instead of a dropdown\" />\n      <Select\n        presentation=\"sheet\"\n        label=\"Email digest\"\n        floatingLabel={false}\n        placeholder=\"How often?\"\n        title=\"How often?\"\n        size=\"sm\"\n        defaultValue=\"weekly\"\n        surface={colors.card}\n        options={[\n          { label: 'Daily', value: 'daily', description: 'Every morning at 8:00' },\n          { label: 'Weekly', value: 'weekly', description: 'Mondays at 8:00' },\n          { label: 'Monthly', value: 'monthly', description: 'First of the month' },\n          { label: 'Never', value: 'never', description: 'Only security alerts' },\n        ]}\n      />\n    </Card>\n  );\n}\n"
     },
     {
       "name": "Sizes",
       "title": "Sizes",
-      "code": "import { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { Select } from '@/components/ui/select';\nimport { alpha, readableOn, useKit } from '@/lib/kit';\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        {\n          backgroundColor: colors.card,\n          borderColor: colors.border,\n          borderWidth: StyleSheet.hairlineWidth,\n          borderRadius: radius.xl,\n          padding: 18,\n          gap: 14,\n        },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nexport default function Sizes() {\n  const { colors } = useKit();\n  const opts = ['Daily', 'Weekly', 'Monthly'];\n  return (\n    <Card style={{ gap: 16 }}>\n      <Select size=\"sm\" label=\"Small\" floatingLabel={false} placeholder=\"Pick one\" defaultValue=\"Weekly\" options={opts} surface={colors.card} />\n      <Select size=\"md\" label=\"Medium\" floatingLabel={false} placeholder=\"Pick one\" defaultValue=\"Weekly\" options={opts} surface={colors.card} />\n      <Select size=\"lg\" label=\"Large\" floatingLabel={false} placeholder=\"Pick one\" defaultValue=\"Weekly\" options={opts} surface={colors.card} />\n      <Select disabled label=\"Disabled\" floatingLabel={false} placeholder=\"Unavailable\" defaultValue=\"Daily\" options={opts} surface={colors.card} />\n    </Card>\n  );\n}\n"
+      "code": "import { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { Select } from '@/components/ui/select';\nimport { alpha, readableOn, useKit } from '@/lib/kit';\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        screen\n          ? { flex: 1, backgroundColor: colors.background, padding: 18, gap: 14 }\n          : {\n              backgroundColor: colors.card,\n              borderColor: colors.border,\n              borderWidth: StyleSheet.hairlineWidth,\n              borderRadius: radius.xl,\n              padding: 18,\n              gap: 14,\n            },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nexport default function Sizes({ screen }: DemoProps) {\n  const { colors } = useKit();\n  const opts = ['Daily', 'Weekly', 'Monthly'];\n  return (\n    <Card screen={screen} style={{ gap: 16 }}>\n      <Select size=\"sm\" label=\"Small\" floatingLabel={false} placeholder=\"Pick one\" defaultValue=\"Weekly\" options={opts} surface={colors.card} />\n      <Select size=\"md\" label=\"Medium\" floatingLabel={false} placeholder=\"Pick one\" defaultValue=\"Weekly\" options={opts} surface={colors.card} />\n      <Select size=\"lg\" label=\"Large\" floatingLabel={false} placeholder=\"Pick one\" defaultValue=\"Weekly\" options={opts} surface={colors.card} />\n      <Select disabled label=\"Disabled\" floatingLabel={false} placeholder=\"Unavailable\" defaultValue=\"Daily\" options={opts} surface={colors.card} />\n    </Card>\n  );\n}\n"
     },
     {
       "name": "Colors",
       "title": "Colors",
-      "code": "import { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport Svg, { Circle, Path } from 'react-native-svg';\nimport { Select } from '@/components/ui/select';\nimport { alpha, readableOn, useKit } from '@/lib/kit';\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        {\n          backgroundColor: colors.card,\n          borderColor: colors.border,\n          borderWidth: StyleSheet.hairlineWidth,\n          borderRadius: radius.xl,\n          padding: 18,\n          gap: 14,\n        },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\n/** Text in the kit's ink: `tone=\"muted\"` for secondary copy. */\nfunction Ink({ tone, style, ...rest }: TextProps & { tone?: 'muted' }) {\n  const { colors } = useKit();\n  return <Text style={[{ color: tone === 'muted' ? colors.mutedForeground : colors.foreground }, style]} {...rest} />;\n}\n\nfunction Heading({ title, sub }: { title: string; sub?: string }) {\n  return (\n    <View style={s.heading}>\n      <Ink style={s.title}>{title}</Ink>\n      {sub ? (\n        <Ink tone=\"muted\" style={s.sub}>\n          {sub}\n        </Ink>\n      ) : null}\n    </View>\n  );\n}\n\nconst flag = (f: string) => <Text style={s.flag}>{f}</Text>;\n\nconst avatar = (initials: string, color: string) => (\n  <View style={[s.avatar, { backgroundColor: color }]}>\n    <Text style={[s.initials, { color: readableOn(color) }]}>{initials}</Text>\n  </View>\n);\n\nfunction Dot({ color }: { color: string }) {\n  return (\n    <Svg width={14} height={14} viewBox=\"0 0 14 14\">\n      <Circle cx={7} cy={7} r={5} fill={color} />\n    </Svg>\n  );\n}\n\nconst s = StyleSheet.create({\n  heading: { gap: 3, marginBottom: 2 },\n  title: { fontSize: 16, fontWeight: '400', letterSpacing: -0.2 },\n  sub: { fontSize: 13, lineHeight: 18 },\n  glyph: { width: 28, height: 28, alignItems: 'center', justifyContent: 'center' },\n  flag: { fontSize: 18 },\n  avatar: { width: 26, height: 26, borderRadius: 13, alignItems: 'center', justifyContent: 'center' },\n  initials: { fontSize: 10.5, fontWeight: '400' },\n  button: { height: 44, alignItems: 'center', justifyContent: 'center', marginTop: 2 },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function Colors() {\n  const { colors } = useKit();\n  return (\n    <Card>\n      <Heading title=\"Project labels\" sub=\"Accent colour drives focus, checks and chips\" />\n      <Select\n        multiple\n        label=\"Labels\"\n        floatingLabel={false}\n        placeholder=\"Add labels\"\n        size=\"sm\"\n        accent={colors.success}\n        defaultValues={['frontend', 'perf']}\n        surface={colors.card}\n        options={[\n          { label: 'Frontend', value: 'frontend' },\n          { label: 'Performance', value: 'perf' },\n          { label: 'Accessibility', value: 'a11y' },\n          { label: 'Docs', value: 'docs' },\n        ]}\n      />\n      <Select\n        label=\"Priority\"\n        floatingLabel={false}\n        placeholder=\"Set priority\"\n        size=\"sm\"\n        accent={colors.warning}\n        defaultValue=\"p1\"\n        surface={colors.card}\n        options={[\n          { label: 'Urgent', value: 'p0', icon: <Dot color={colors.danger} /> },\n          { label: 'High', value: 'p1', icon: <Dot color={colors.warning} /> },\n          { label: 'Medium', value: 'p2', icon: <Dot color={colors.accent} /> },\n          { label: 'Low', value: 'p3', icon: <Dot color={colors.mutedForeground} /> },\n        ]}\n      />\n    </Card>\n  );\n}\n"
+      "code": "import { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport Svg, { Circle, Path } from 'react-native-svg';\nimport { Select } from '@/components/ui/select';\nimport { alpha, readableOn, useKit } from '@/lib/kit';\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        screen\n          ? { flex: 1, backgroundColor: colors.background, padding: 18, gap: 14 }\n          : {\n              backgroundColor: colors.card,\n              borderColor: colors.border,\n              borderWidth: StyleSheet.hairlineWidth,\n              borderRadius: radius.xl,\n              padding: 18,\n              gap: 14,\n            },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\n/** Text in the kit's ink: `tone=\"muted\"` for secondary copy. */\nfunction Ink({ tone, style, ...rest }: TextProps & { tone?: 'muted' }) {\n  const { colors } = useKit();\n  return <Text style={[{ color: tone === 'muted' ? colors.mutedForeground : colors.foreground }, style]} {...rest} />;\n}\n\nfunction Heading({ title, sub }: { title: string; sub?: string }) {\n  return (\n    <View style={s.heading}>\n      <Ink style={s.title}>{title}</Ink>\n      {sub ? (\n        <Ink tone=\"muted\" style={s.sub}>\n          {sub}\n        </Ink>\n      ) : null}\n    </View>\n  );\n}\n\nconst flag = (f: string) => <Text style={s.flag}>{f}</Text>;\n\nconst avatar = (initials: string, color: string) => (\n  <View style={[s.avatar, { backgroundColor: color }]}>\n    <Text style={[s.initials, { color: readableOn(color) }]}>{initials}</Text>\n  </View>\n);\n\nfunction Dot({ color }: { color: string }) {\n  return (\n    <Svg width={14} height={14} viewBox=\"0 0 14 14\">\n      <Circle cx={7} cy={7} r={5} fill={color} />\n    </Svg>\n  );\n}\n\nconst s = StyleSheet.create({\n  heading: { gap: 3, marginBottom: 2 },\n  title: { fontSize: 16, fontWeight: '400', letterSpacing: -0.2 },\n  sub: { fontSize: 13, lineHeight: 18 },\n  glyph: { width: 28, height: 28, alignItems: 'center', justifyContent: 'center' },\n  flag: { fontSize: 18 },\n  avatar: { width: 26, height: 26, borderRadius: 13, alignItems: 'center', justifyContent: 'center' },\n  initials: { fontSize: 10.5, fontWeight: '400' },\n  button: { height: 44, alignItems: 'center', justifyContent: 'center', marginTop: 2 },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function Colors({ screen }: DemoProps) {\n  const { colors } = useKit();\n  return (\n    <Card screen={screen}>\n      <Heading title=\"Project labels\" sub=\"Accent colour drives focus, checks and chips\" />\n      <Select\n        multiple\n        label=\"Labels\"\n        floatingLabel={false}\n        placeholder=\"Add labels\"\n        size=\"sm\"\n        accent={colors.success}\n        defaultValues={['frontend', 'perf']}\n        surface={colors.card}\n        options={[\n          { label: 'Frontend', value: 'frontend' },\n          { label: 'Performance', value: 'perf' },\n          { label: 'Accessibility', value: 'a11y' },\n          { label: 'Docs', value: 'docs' },\n        ]}\n      />\n      <Select\n        label=\"Priority\"\n        floatingLabel={false}\n        placeholder=\"Set priority\"\n        size=\"sm\"\n        accent={colors.warning}\n        defaultValue=\"p1\"\n        surface={colors.card}\n        options={[\n          { label: 'Urgent', value: 'p0', icon: <Dot color={colors.danger} /> },\n          { label: 'High', value: 'p1', icon: <Dot color={colors.warning} /> },\n          { label: 'Medium', value: 'p2', icon: <Dot color={colors.accent} /> },\n          { label: 'Low', value: 'p3', icon: <Dot color={colors.mutedForeground} /> },\n        ]}\n      />\n    </Card>\n  );\n}\n"
     }
   ]
 }

package/registry/_docs/settings.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/blocks/settings.tsx"
   ],
+  "summary": null,
   "props": [
     [
       "user",
@@ -43,6 +44,12 @@
       "—",
       "Pressed Sign out."
     ],
+    [
+      "onBack",
+      "() => void",
+      "—",
+      "Shows a back button above the title, e.g. when Settings is pushed from a profile tab."
+    ],
     [
       "storageUsed",
       "string",
@@ -68,5 +75,7 @@
       "Root style."
     ]
   ],
+  "behavior": [],
+  "usage": null,
   "examples": []
 }

package/registry/_docs/sign-in.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/blocks/sign-in.tsx"
   ],
+  "summary": null,
   "props": [
     [
       "methods",
@@ -194,5 +195,7 @@
       "Aliases of onEmailPassword / onOAuth; providers (apple / google) sets the OAuth part of methods when methods isn't given."
     ]
   ],
+  "behavior": [],
+  "usage": null,
   "examples": []
 }

package/registry/_docs/skeleton.json

@@ -2,10 +2,11 @@
   "name": "skeleton",
   "category": "Feedback",
   "aliases": [],
-  "exportName": "SkeletonGroup",
+  "exportName": "Skeleton",
   "files": [
     "src/components/ui/skeleton.tsx"
   ],
+  "summary": "Loading placeholders swept by one angled light band across the whole screen.",
   "props": [
     [
       "width / height",
@@ -92,6 +93,25 @@
       "Style for the block (composites apply it to their wrapper)."
     ]
   ],
+  "behavior": [
+    [
+      "Motion",
+      "Every block reads one shared native-driver clock, so the shimmer band, wave or pulse moves across a Skeleton.Group (or the window) as a single sweep."
+    ],
+    [
+      "Reduced motion",
+      "Every variant renders static, and Skeleton.Reveal swaps the skeleton for content instantly."
+    ],
+    [
+      "Screen readers",
+      "Placeholder blocks are hidden from screen readers. Skeleton.Reveal is marked busy and exposes a progressbar named by loadingLabel; the content arrives in a polite live region."
+    ],
+    [
+      "Platforms",
+      "Plain Animated views plus a react-native-svg gradient, so it runs the same on iOS, Android and web."
+    ]
+  ],
+  "usage": "import { Skeleton } from '@/components/ui/skeleton';\n\n<Skeleton.Group style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>\n  <Skeleton.Avatar size={44} />\n  <Skeleton.Text lines={2} style={{ flex: 1 }} />\n</Skeleton.Group>",
   "examples": [
     {
       "name": "Shimmer",
@@ -136,7 +156,7 @@
     {
       "name": "Nav",
       "title": "Nav",
-      "code": "import { Skeleton } from '@/components/ui/skeleton';\n\nexport default function Nav() {\n  return <Skeleton.Nav rows={6} tabCount={5} style={{ minHeight: 600 }} />;\n}\n"
+      "code": "import { Skeleton } from '@/components/ui/skeleton';\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\nexport default function Nav({ screen }: DemoProps) {\n  return <Skeleton.Nav rows={6} tabCount={5} style={screen ? undefined : { minHeight: 600 }} />;\n}\n"
     }
   ]
 }

package/registry/_docs/slide-to-confirm.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/slide-to-confirm.tsx"
   ],
+  "summary": "A slide-to-pay track whose thumb drags a glowing trail and ticks with haptics.",
   "props": [
     [
       "label",
@@ -80,5 +81,28 @@
       "Style for the track (merged over its height, radius and colour)."
     ]
   ],
+  "behavior": [
+    [
+      "Touch",
+      "Drag past the threshold, or flick fast past the halfway point, to confirm; anything less springs back. If onConfirm returns a promise the thumb spins until it settles."
+    ],
+    [
+      "Motion",
+      "The thumb swells while held and a check draws on success; a rejected promise shakes the track and slides it back."
+    ],
+    [
+      "Reduced motion",
+      "The idle nudge and the chevron shimmer on the thumb are turned off."
+    ],
+    [
+      "Haptics",
+      "Selection ticks at 25, 50 and 75 percent of the drag, a medium impact on release, then a success or error notification."
+    ],
+    [
+      "Screen readers",
+      "A button whose label switches to confirmedLabel when done, with busy and disabled state. The 'activate' action (double tap) confirms without dragging."
+    ]
+  ],
+  "usage": null,
   "examples": []
 }

package/registry/_docs/slider.json

@@ -1,11 +1,16 @@
 {
   "name": "slider",
   "category": "Inputs",
-  "aliases": [],
+  "aliases": [
+    "range-slider",
+    "range",
+    "dual-slider"
+  ],
   "exportName": "Slider",
   "files": [
     "src/components/ui/slider.tsx"
   ],
+  "summary": "A native-driver slider with a swelling thumb, tap-to-seek and a two-thumb range mode.",
   "props": [
     [
       "value / defaultValue",
@@ -122,36 +127,51 @@
       "Root, inactive track, active fill, thumb and value text."
     ]
   ],
+  "behavior": [
+    [
+      "Touch",
+      "Tap anywhere on the track to seek, or grab a thumb and drag. Built-in leftIcon and rightIcon names step the value down or up when tapped."
+    ],
+    [
+      "Motion",
+      "Thumb and fill move on the native driver; the thumb swells under your finger and values spring-snap to the step."
+    ],
+    [
+      "Screen readers",
+      "Single mode is one adjustable element with min, max, current value and increment / decrement actions. In range mode each thumb is its own adjustable, labelled 'minimum' and 'maximum'."
+    ]
+  ],
+  "usage": "import { useState } from 'react';\nimport { Slider } from '@/components/ui/slider';\n\nconst [price, setPrice] = useState<[number, number]>([20, 80]);\n<Slider range value={price} onValueChange={setPrice} accessibilityLabel=\"Price\" />",
   "examples": [
     {
       "name": "ControlCenter",
       "title": "Control Center",
-      "code": "import React, { useState } from 'react';\nimport { StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { Slider } from '@/components/ui/slider';\nimport { useKit } from '@/lib/kit';\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[s.card, { backgroundColor: colors.card, borderColor: colors.border, borderRadius: radius.xl }, style]}\n      {...rest}\n    />\n  );\n}\n\nfunction Header({ title, value }: { title: string; value?: string }) {\n  const { colors } = useKit();\n  return (\n    <View style={s.head}>\n      <Text style={[s.title, { color: colors.foreground }]}>{title}</Text>\n      {value ? <Text style={[s.value, { color: colors.mutedForeground }]}>{value}</Text> : null}\n    </View>\n  );\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  head: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'baseline' },\n  title: { fontSize: 15, fontWeight: '400' },\n  value: { fontSize: 15, fontWeight: '400', fontVariant: ['tabular-nums'] },\n  label: { fontSize: 12, fontWeight: '400', letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: -8 },\n  note: { fontSize: 13 },\n});\n\nexport default function ControlCenter() {\n  const [brightness, setBrightness] = useState(72);\n  return (\n    <Card>\n      <Header title=\"Display & sound\" />\n      <Slider\n        variant=\"bar\"\n        size=\"lg\"\n        step={0}\n        value={brightness}\n        onValueChange={setBrightness}\n        icon=\"sun-high\"\n        showValue=\"always\"\n        formatValue={(v) => `${Math.round(v)}%`}\n        accessibilityLabel=\"Brightness\"\n      />\n      <Slider variant=\"bar\" size=\"lg\" defaultValue={40} icon=\"volume-high\" accessibilityLabel=\"Volume\" />\n    </Card>\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { Slider } from '@/components/ui/slider';\nimport { useKit } from '@/lib/kit';\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        s.card,\n        screen\n          ? { flex: 1, backgroundColor: colors.background, borderWidth: 0 }\n          : { backgroundColor: colors.card, borderColor: colors.border, borderRadius: radius.xl },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nfunction Header({ title, value }: { title: string; value?: string }) {\n  const { colors } = useKit();\n  return (\n    <View style={s.head}>\n      <Text style={[s.title, { color: colors.foreground }]}>{title}</Text>\n      {value ? <Text style={[s.value, { color: colors.mutedForeground }]}>{value}</Text> : null}\n    </View>\n  );\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  head: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'baseline' },\n  title: { fontSize: 15, fontWeight: '400' },\n  value: { fontSize: 15, fontWeight: '400', fontVariant: ['tabular-nums'] },\n  label: { fontSize: 12, fontWeight: '400', letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: -8 },\n  note: { fontSize: 13 },\n});\n\nexport default function ControlCenter({ screen }: DemoProps) {\n  const [brightness, setBrightness] = useState(72);\n  return (\n    <Card screen={screen}>\n      <Header title=\"Display & sound\" />\n      <Slider\n        variant=\"bar\"\n        size=\"lg\"\n        step={0}\n        value={brightness}\n        onValueChange={setBrightness}\n        icon=\"sun-high\"\n        showValue=\"always\"\n        formatValue={(v) => `${Math.round(v)}%`}\n        accessibilityLabel=\"Brightness\"\n      />\n      <Slider variant=\"bar\" size=\"lg\" defaultValue={40} icon=\"volume-high\" accessibilityLabel=\"Volume\" />\n    </Card>\n  );\n}\n"
     },
     {
       "name": "Default",
       "title": "Default",
-      "code": "import React, { useState } from 'react';\nimport { StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { Slider } from '@/components/ui/slider';\nimport { useKit } from '@/lib/kit';\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[s.card, { backgroundColor: colors.card, borderColor: colors.border, borderRadius: radius.xl }, style]}\n      {...rest}\n    />\n  );\n}\n\nfunction Header({ title, value }: { title: string; value?: string }) {\n  const { colors } = useKit();\n  return (\n    <View style={s.head}>\n      <Text style={[s.title, { color: colors.foreground }]}>{title}</Text>\n      {value ? <Text style={[s.value, { color: colors.mutedForeground }]}>{value}</Text> : null}\n    </View>\n  );\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  head: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'baseline' },\n  title: { fontSize: 15, fontWeight: '400' },\n  value: { fontSize: 15, fontWeight: '400', fontVariant: ['tabular-nums'] },\n  label: { fontSize: 12, fontWeight: '400', letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: -8 },\n  note: { fontSize: 13 },\n});\n\nexport default function Default() {\n  const [volume, setVolume] = useState(64);\n  return (\n    <Card>\n      <Header title=\"Media volume\" value={`${volume}%`} />\n      <Slider\n        value={volume}\n        onValueChange={setVolume}\n        leftIcon=\"volume-low\"\n        rightIcon=\"volume-high\"\n        formatValue={(v) => `${v}%`}\n        accessibilityLabel=\"Media volume\"\n      />\n    </Card>\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { Slider } from '@/components/ui/slider';\nimport { useKit } from '@/lib/kit';\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        s.card,\n        screen\n          ? { flex: 1, backgroundColor: colors.background, borderWidth: 0 }\n          : { backgroundColor: colors.card, borderColor: colors.border, borderRadius: radius.xl },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nfunction Header({ title, value }: { title: string; value?: string }) {\n  const { colors } = useKit();\n  return (\n    <View style={s.head}>\n      <Text style={[s.title, { color: colors.foreground }]}>{title}</Text>\n      {value ? <Text style={[s.value, { color: colors.mutedForeground }]}>{value}</Text> : null}\n    </View>\n  );\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  head: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'baseline' },\n  title: { fontSize: 15, fontWeight: '400' },\n  value: { fontSize: 15, fontWeight: '400', fontVariant: ['tabular-nums'] },\n  label: { fontSize: 12, fontWeight: '400', letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: -8 },\n  note: { fontSize: 13 },\n});\n\nexport default function Default({ screen }: DemoProps) {\n  const [volume, setVolume] = useState(64);\n  return (\n    <Card screen={screen}>\n      <Header title=\"Media volume\" value={`${volume}%`} />\n      <Slider\n        value={volume}\n        onValueChange={setVolume}\n        leftIcon=\"volume-low\"\n        rightIcon=\"volume-high\"\n        formatValue={(v) => `${v}%`}\n        accessibilityLabel=\"Media volume\"\n      />\n    </Card>\n  );\n}\n"
     },
     {
       "name": "PriceRange",
       "title": "Price Range",
-      "code": "import React, { useState } from 'react';\nimport { StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { Slider } from '@/components/ui/slider';\nimport { useKit } from '@/lib/kit';\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[s.card, { backgroundColor: colors.card, borderColor: colors.border, borderRadius: radius.xl }, style]}\n      {...rest}\n    />\n  );\n}\n\nfunction Header({ title, value }: { title: string; value?: string }) {\n  const { colors } = useKit();\n  return (\n    <View style={s.head}>\n      <Text style={[s.title, { color: colors.foreground }]}>{title}</Text>\n      {value ? <Text style={[s.value, { color: colors.mutedForeground }]}>{value}</Text> : null}\n    </View>\n  );\n}\n\nconst PRICE_MAX = 2000;\n\nconst rupees = (v: number) => `₹${String(v).replace(/(\\d)(?=(\\d\\d)+\\d$)/g, '$1,')}`;\n\nconst PRICES = [2, 4, 7, 11, 16, 22, 30, 34, 38, 33, 29, 26, 21, 18, 14, 12, 9, 7, 5, 4, 3, 2, 2, 1];\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  head: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'baseline' },\n  title: { fontSize: 15, fontWeight: '400' },\n  value: { fontSize: 15, fontWeight: '400', fontVariant: ['tabular-nums'] },\n  label: { fontSize: 12, fontWeight: '400', letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: -8 },\n  note: { fontSize: 13 },\n});\n\nexport default function PriceRange() {\n  const { colors } = useKit();\n  const [price, setPrice] = useState<[number, number]>([400, 1400]);\n  const per = PRICE_MAX / PRICES.length;\n  const results = PRICES.reduce((n, c, i) => (i * per + per / 2 >= price[0] && i * per + per / 2 <= price[1] ? n + c : n), 0);\n  return (\n    <Card>\n      <Header title=\"Price\" value={`${rupees(price[0])} – ${rupees(price[1])}${price[1] === PRICE_MAX ? '+' : ''}`} />\n      <Slider\n        range\n        min={0}\n        max={PRICE_MAX}\n        step={50}\n        value={price}\n        onValueChange={setPrice}\n        histogram={PRICES}\n        histogramHeight={40}\n        showMinMax\n        maxLabel={`${rupees(PRICE_MAX)}+`}\n        formatValue={rupees}\n        accessibilityLabel=\"Price\"\n      />\n      <Text style={[s.note, { color: colors.mutedForeground }]}>{results * 3} stays match</Text>\n    </Card>\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { Slider } from '@/components/ui/slider';\nimport { useKit } from '@/lib/kit';\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        s.card,\n        screen\n          ? { flex: 1, backgroundColor: colors.background, borderWidth: 0 }\n          : { backgroundColor: colors.card, borderColor: colors.border, borderRadius: radius.xl },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nfunction Header({ title, value }: { title: string; value?: string }) {\n  const { colors } = useKit();\n  return (\n    <View style={s.head}>\n      <Text style={[s.title, { color: colors.foreground }]}>{title}</Text>\n      {value ? <Text style={[s.value, { color: colors.mutedForeground }]}>{value}</Text> : null}\n    </View>\n  );\n}\n\nconst PRICE_MAX = 2000;\n\nconst rupees = (v: number) => `₹${String(v).replace(/(\\d)(?=(\\d\\d)+\\d$)/g, '$1,')}`;\n\nconst PRICES = [2, 4, 7, 11, 16, 22, 30, 34, 38, 33, 29, 26, 21, 18, 14, 12, 9, 7, 5, 4, 3, 2, 2, 1];\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  head: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'baseline' },\n  title: { fontSize: 15, fontWeight: '400' },\n  value: { fontSize: 15, fontWeight: '400', fontVariant: ['tabular-nums'] },\n  label: { fontSize: 12, fontWeight: '400', letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: -8 },\n  note: { fontSize: 13 },\n});\n\nexport default function PriceRange({ screen }: DemoProps) {\n  const { colors } = useKit();\n  const [price, setPrice] = useState<[number, number]>([400, 1400]);\n  const per = PRICE_MAX / PRICES.length;\n  const results = PRICES.reduce((n, c, i) => (i * per + per / 2 >= price[0] && i * per + per / 2 <= price[1] ? n + c : n), 0);\n  return (\n    <Card screen={screen}>\n      <Header title=\"Price\" value={`${rupees(price[0])} – ${rupees(price[1])}${price[1] === PRICE_MAX ? '+' : ''}`} />\n      <Slider\n        range\n        min={0}\n        max={PRICE_MAX}\n        step={50}\n        value={price}\n        onValueChange={setPrice}\n        histogram={PRICES}\n        histogramHeight={40}\n        showMinMax\n        maxLabel={`${rupees(PRICE_MAX)}+`}\n        formatValue={rupees}\n        accessibilityLabel=\"Price\"\n      />\n      <Text style={[s.note, { color: colors.mutedForeground }]}>{results * 3} stays match</Text>\n    </Card>\n  );\n}\n"
     },
     {
       "name": "FontSize",
       "title": "Font Size",
-      "code": "import React, { useState } from 'react';\nimport { StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { Slider } from '@/components/ui/slider';\nimport { useKit } from '@/lib/kit';\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[s.card, { backgroundColor: colors.card, borderColor: colors.border, borderRadius: radius.xl }, style]}\n      {...rest}\n    />\n  );\n}\n\nfunction Header({ title, value }: { title: string; value?: string }) {\n  const { colors } = useKit();\n  return (\n    <View style={s.head}>\n      <Text style={[s.title, { color: colors.foreground }]}>{title}</Text>\n      {value ? <Text style={[s.value, { color: colors.mutedForeground }]}>{value}</Text> : null}\n    </View>\n  );\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  head: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'baseline' },\n  title: { fontSize: 15, fontWeight: '400' },\n  value: { fontSize: 15, fontWeight: '400', fontVariant: ['tabular-nums'] },\n  label: { fontSize: 12, fontWeight: '400', letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: -8 },\n  note: { fontSize: 13 },\n});\n\nexport default function FontSize() {\n  const { colors } = useKit();\n  const [size, setSize] = useState(17);\n  const glyph = (px: number) => <Text style={{ color: colors.mutedForeground, fontSize: px, fontWeight: '400' }}>A</Text>;\n  return (\n    <Card>\n      <Header title=\"Text size\" value={`${size} pt`} />\n      <Text style={{ color: colors.foreground, fontSize: size, lineHeight: size * 1.35 }}>\n        Your reading view will look like this.\n      </Text>\n      <Slider\n        variant=\"stepped\"\n        min={13}\n        max={23}\n        step={2}\n        value={size}\n        onValueChange={setSize}\n        leftIcon={glyph(13)}\n        rightIcon={glyph(21)}\n        showValue=\"never\"\n        accessibilityLabel=\"Text size\"\n      />\n    </Card>\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { Slider } from '@/components/ui/slider';\nimport { useKit } from '@/lib/kit';\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        s.card,\n        screen\n          ? { flex: 1, backgroundColor: colors.background, borderWidth: 0 }\n          : { backgroundColor: colors.card, borderColor: colors.border, borderRadius: radius.xl },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nfunction Header({ title, value }: { title: string; value?: string }) {\n  const { colors } = useKit();\n  return (\n    <View style={s.head}>\n      <Text style={[s.title, { color: colors.foreground }]}>{title}</Text>\n      {value ? <Text style={[s.value, { color: colors.mutedForeground }]}>{value}</Text> : null}\n    </View>\n  );\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  head: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'baseline' },\n  title: { fontSize: 15, fontWeight: '400' },\n  value: { fontSize: 15, fontWeight: '400', fontVariant: ['tabular-nums'] },\n  label: { fontSize: 12, fontWeight: '400', letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: -8 },\n  note: { fontSize: 13 },\n});\n\nexport default function FontSize({ screen }: DemoProps) {\n  const { colors } = useKit();\n  const [size, setSize] = useState(17);\n  const glyph = (px: number) => <Text style={{ color: colors.mutedForeground, fontSize: px, fontWeight: '400' }}>A</Text>;\n  return (\n    <Card screen={screen}>\n      <Header title=\"Text size\" value={`${size} pt`} />\n      <Text style={{ color: colors.foreground, fontSize: size, lineHeight: size * 1.35 }}>\n        Your reading view will look like this.\n      </Text>\n      <Slider\n        variant=\"stepped\"\n        min={13}\n        max={23}\n        step={2}\n        value={size}\n        onValueChange={setSize}\n        leftIcon={glyph(13)}\n        rightIcon={glyph(21)}\n        showValue=\"never\"\n        accessibilityLabel=\"Text size\"\n      />\n    </Card>\n  );\n}\n"
     },
     {
       "name": "Sizes",
       "title": "Sizes",
-      "code": "import { StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { Slider } from '@/components/ui/slider';\nimport { useKit } from '@/lib/kit';\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[s.card, { backgroundColor: colors.card, borderColor: colors.border, borderRadius: radius.xl }, style]}\n      {...rest}\n    />\n  );\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  head: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'baseline' },\n  title: { fontSize: 15, fontWeight: '400' },\n  value: { fontSize: 15, fontWeight: '400', fontVariant: ['tabular-nums'] },\n  label: { fontSize: 12, fontWeight: '400', letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: -8 },\n  note: { fontSize: 13 },\n});\n\nexport default function Sizes() {\n  const { colors } = useKit();\n  const label = (t: string) => <Text style={[s.label, { color: colors.mutedForeground }]}>{t}</Text>;\n  return (\n    <Card>\n      {label('Small')}\n      <Slider size=\"sm\" defaultValue={25} accessibilityLabel=\"Small\" />\n      {label('Medium')}\n      <Slider size=\"md\" defaultValue={50} accessibilityLabel=\"Medium\" />\n      {label('Large')}\n      <Slider size=\"lg\" defaultValue={75} accessibilityLabel=\"Large\" />\n      {label('Disabled')}\n      <Slider defaultValue={40} disabled accessibilityLabel=\"Disabled\" />\n    </Card>\n  );\n}\n"
+      "code": "import { StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { Slider } from '@/components/ui/slider';\nimport { useKit } from '@/lib/kit';\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        s.card,\n        screen\n          ? { flex: 1, backgroundColor: colors.background, borderWidth: 0 }\n          : { backgroundColor: colors.card, borderColor: colors.border, borderRadius: radius.xl },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  head: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'baseline' },\n  title: { fontSize: 15, fontWeight: '400' },\n  value: { fontSize: 15, fontWeight: '400', fontVariant: ['tabular-nums'] },\n  label: { fontSize: 12, fontWeight: '400', letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: -8 },\n  note: { fontSize: 13 },\n});\n\nexport default function Sizes({ screen }: DemoProps) {\n  const { colors } = useKit();\n  const label = (t: string) => <Text style={[s.label, { color: colors.mutedForeground }]}>{t}</Text>;\n  return (\n    <Card screen={screen}>\n      {label('Small')}\n      <Slider size=\"sm\" defaultValue={25} accessibilityLabel=\"Small\" />\n      {label('Medium')}\n      <Slider size=\"md\" defaultValue={50} accessibilityLabel=\"Medium\" />\n      {label('Large')}\n      <Slider size=\"lg\" defaultValue={75} accessibilityLabel=\"Large\" />\n      {label('Disabled')}\n      <Slider defaultValue={40} disabled accessibilityLabel=\"Disabled\" />\n    </Card>\n  );\n}\n"
     },
     {
       "name": "Colors",
       "title": "Colors",
-      "code": "import { StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { Slider } from '@/components/ui/slider';\nimport { useKit } from '@/lib/kit';\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[s.card, { backgroundColor: colors.card, borderColor: colors.border, borderRadius: radius.xl }, style]}\n      {...rest}\n    />\n  );\n}\n\nfunction Header({ title, value }: { title: string; value?: string }) {\n  const { colors } = useKit();\n  return (\n    <View style={s.head}>\n      <Text style={[s.title, { color: colors.foreground }]}>{title}</Text>\n      {value ? <Text style={[s.value, { color: colors.mutedForeground }]}>{value}</Text> : null}\n    </View>\n  );\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  head: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'baseline' },\n  title: { fontSize: 15, fontWeight: '400' },\n  value: { fontSize: 15, fontWeight: '400', fontVariant: ['tabular-nums'] },\n  label: { fontSize: 12, fontWeight: '400', letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: -8 },\n  note: { fontSize: 13 },\n});\n\nexport default function Colors() {\n  const { colors } = useKit();\n  return (\n    <Card>\n      <Header title=\"Daily goals\" />\n      <Slider defaultValue={80} accent={colors.success} showValue=\"always\" formatValue={(v) => `${v}% steps`} accessibilityLabel=\"Steps\" />\n      <Slider variant=\"bar\" size=\"sm\" defaultValue={55} accent={colors.warning} accessibilityLabel=\"Calories\" />\n      <Slider variant=\"stepped\" min={0} max={10} step={1} defaultValue={3} accent={colors.danger} accessibilityLabel=\"Screen time hours\" />\n    </Card>\n  );\n}\n"
+      "code": "import { StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { Slider } from '@/components/ui/slider';\nimport { useKit } from '@/lib/kit';\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        s.card,\n        screen\n          ? { flex: 1, backgroundColor: colors.background, borderWidth: 0 }\n          : { backgroundColor: colors.card, borderColor: colors.border, borderRadius: radius.xl },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nfunction Header({ title, value }: { title: string; value?: string }) {\n  const { colors } = useKit();\n  return (\n    <View style={s.head}>\n      <Text style={[s.title, { color: colors.foreground }]}>{title}</Text>\n      {value ? <Text style={[s.value, { color: colors.mutedForeground }]}>{value}</Text> : null}\n    </View>\n  );\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  head: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'baseline' },\n  title: { fontSize: 15, fontWeight: '400' },\n  value: { fontSize: 15, fontWeight: '400', fontVariant: ['tabular-nums'] },\n  label: { fontSize: 12, fontWeight: '400', letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: -8 },\n  note: { fontSize: 13 },\n});\n\nexport default function Colors({ screen }: DemoProps) {\n  const { colors } = useKit();\n  return (\n    <Card screen={screen}>\n      <Header title=\"Daily goals\" />\n      <Slider defaultValue={80} accent={colors.success} showValue=\"always\" formatValue={(v) => `${v}% steps`} accessibilityLabel=\"Steps\" />\n      <Slider variant=\"bar\" size=\"sm\" defaultValue={55} accent={colors.warning} accessibilityLabel=\"Calories\" />\n      <Slider variant=\"stepped\" min={0} max={10} step={1} defaultValue={3} accent={colors.danger} accessibilityLabel=\"Screen time hours\" />\n    </Card>\n  );\n}\n"
     }
   ]
 }

package/registry/_docs/spin-wheel.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/spin-wheel.tsx"
   ],
+  "summary": "A prize wheel whose flapper ticks over every divider as it eases onto the win.",
   "props": [
     [
       "segments",
@@ -110,5 +111,28 @@
       "Spin from your own button (optionally onto a fixed index), or cancel and turn back to the start."
     ]
   ],
+  "behavior": [
+    [
+      "Touch",
+      "Tap the SPIN hub or flick the wheel; a harder flick throws it further. A slow drag just springs back to rest."
+    ],
+    [
+      "Motion",
+      "It keeps turning while getResult resolves, then eases onto the chosen wedge; the other wedges dim and the winner glows while the rim lights flash."
+    ],
+    [
+      "Reduced motion",
+      "The idle chasing lights, the win celebration and the winner pulse are skipped; the spin itself still plays."
+    ],
+    [
+      "Haptics",
+      "A selection tick each time the flapper crosses a divider, a light impact on the hub, and a success notification on the win (skipped on web)."
+    ],
+    [
+      "Screen readers",
+      "The wheel is an image whose label lists every prize; the hub is a button with busy state while spinning, and the result is announced."
+    ]
+  ],
+  "usage": null,
   "examples": []
 }