@expokit/cli 0.2.0 → 0.4.0

package/registry/_docs/spinner.json

@@ -1,23 +1,29 @@
 {
   "name": "spinner",
   "category": "Feedback",
-  "aliases": [],
+  "aliases": [
+    "loader",
+    "loading",
+    "activity-indicator",
+    "progress-indicator"
+  ],
   "exportName": "Spinner",
   "files": [
     "src/components/ui/spinner.tsx"
   ],
+  "summary": "Twelve loaders — ring, dots, bars, pulse, orbit, typing, line and more — from one API.",
   "props": [
     [
       "variant",
-      "\"ring\" | \"dots\"",
+      "\"ring\" | \"dots\" | \"bars\" | \"pulse\" | \"orbit\" | \"bounce\" | \"wave\" | \"grid\" | \"typing\" | \"arc\" | \"square\" | \"line\"",
       "\"ring\"",
-      "Indicator style."
+      "Indicator style — 12 loaders. \"line\" is an indeterminate bar size × 4 wide (override with style.width)."
     ],
     [
       "size",
       "\"sm\" | \"md\" | \"lg\" | \"xl\" | number",
       "\"md\"",
-      "16 / 24 / 36 / 52pt, or any number."
+      "16 / 24 / 36 / 52pt, or any number. Every variant scales from it."
     ],
     [
       "color",
@@ -47,7 +53,7 @@
       "track",
       "boolean",
       "false",
-      "Faint full circle behind the ring."
+      "Faint guide behind the motion: full circle (ring, orbit, arc), rail (line) or ghost bars (bars)."
     ],
     [
       "style",
@@ -56,36 +62,60 @@
       "Style for the root view (the square, or the spinner + label row/column)."
     ]
   ],
+  "behavior": [
+    [
+      "Motion",
+      "Every variant loops on the native driver (rotation, scale, translate, opacity); the ring's arc-length breathing is the only SVG prop animation and runs on its own JS-driven node."
+    ],
+    [
+      "Reduced motion",
+      "Loops stop and each loader holds a still, clearly-busy frame (staggered dots, a lit diagonal, a mid-line segment); the ring keeps a plain steady spin."
+    ],
+    [
+      "Screen readers",
+      "Announced as a progress bar with state busy and your label (default \"Loading\"); the visual is one accessible element."
+    ],
+    [
+      "Platforms",
+      "Pure React Native Animated plus react-native-svg — iOS, Android, Expo Go and web, no native setup."
+    ]
+  ],
+  "usage": "import { Spinner } from '@/components/ui/spinner';\n\nexport function Saving() {\n  return <Spinner variant=\"bars\" size=\"lg\" label=\"Saving changes\" labelPosition=\"right\" />;\n}",
   "examples": [
     {
       "name": "Variants",
       "title": "Variants",
-      "code": "import { Pressable, Text, View } from 'react-native';\nimport { Spinner } from '@/components/ui/spinner';\n\nexport default function Variants() {\n  return (\n    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 40 }}>\n      <Spinner variant=\"ring\" size=\"lg\" track />\n      <Spinner variant=\"ring\" size=\"lg\" />\n      <Spinner variant=\"dots\" size=\"lg\" />\n    </View>\n  );\n}\n"
+      "code": "import { Pressable, Text, View } from 'react-native';\nimport { Spinner, type SpinnerVariant } from '@/components/ui/spinner';\n\nexport default function Variants() {\n  return (\n    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 40 }}>\n      <Spinner variant=\"ring\" size=\"lg\" track />\n      <Spinner variant=\"ring\" size=\"lg\" />\n      <Spinner variant=\"dots\" size=\"lg\" />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "LoaderGallery",
+      "title": "Loader Gallery",
+      "code": "import { Pressable, Text, View } from 'react-native';\nimport { Spinner, type SpinnerVariant } from '@/components/ui/spinner';\nimport { readableOn, useKit } from '@/lib/kit';\n\nconst LOADERS: SpinnerVariant[] = ['ring', 'dots', 'bars', 'pulse', 'orbit', 'bounce', 'wave', 'grid', 'typing', 'arc', 'square', 'line'];\n\nexport default function LoaderGallery() {\n  const { colors, radius } = useKit();\n  return (\n    <View style={{ flexDirection: 'row', flexWrap: 'wrap', rowGap: 12 }}>\n      {LOADERS.map((variant) => (\n        <View key={variant} style={{ width: '33.33%', alignItems: 'center', gap: 8, paddingHorizontal: 4 }}>\n          <View\n            style={{\n              alignSelf: 'stretch',\n              height: 64,\n              alignItems: 'center',\n              justifyContent: 'center',\n              borderRadius: radius.md,\n              backgroundColor: colors.muted,\n            }}\n          >\n            <Spinner\n              variant={variant}\n              size={variant === 'line' ? 'sm' : 'lg'}\n              track={variant === 'line'}\n              label={`${variant} loader`}\n              style={variant === 'line' ? { width: '72%' } : undefined}\n            />\n          </View>\n          <Text style={{ fontSize: 12, color: colors.mutedForeground }}>{variant}</Text>\n        </View>\n      ))}\n    </View>\n  );\n}\n"
     },
     {
       "name": "InButton",
       "title": "In Button",
-      "code": "import React, { useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { Spinner } from '@/components/ui/spinner';\nimport { readableOn, useKit } from '@/lib/kit';\n\nexport default function InButton() {\n  const { colors, radius } = useKit();\n  const [busy, setBusy] = useState(false);\n  const fg = readableOn(colors.accent);\n  return (\n    <Pressable\n      accessibilityRole=\"button\"\n      accessibilityState={{ busy }}\n      onPress={() => {\n        setBusy(true);\n        setTimeout(() => setBusy(false), 2200);\n      }}\n      style={{\n        height: 48,\n        borderRadius: radius.capsule(48),\n        backgroundColor: colors.accent,\n        alignItems: 'center',\n        justifyContent: 'center',\n        alignSelf: 'stretch',\n      }}\n    >\n      {busy ? (\n        <Spinner size=\"sm\" color={fg} label=\"Placing order\" labelPosition=\"right\" />\n      ) : (\n        <Text style={{ color: fg, fontSize: 16, fontWeight: '400' }}>Place order · ₹749</Text>\n      )}\n    </Pressable>\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { Spinner, type SpinnerVariant } from '@/components/ui/spinner';\nimport { readableOn, useKit } from '@/lib/kit';\n\nexport default function InButton() {\n  const { colors, radius } = useKit();\n  const [busy, setBusy] = useState(false);\n  const fg = readableOn(colors.accent);\n  return (\n    <Pressable\n      accessibilityRole=\"button\"\n      accessibilityState={{ busy }}\n      onPress={() => {\n        setBusy(true);\n        setTimeout(() => setBusy(false), 2200);\n      }}\n      style={{\n        height: 48,\n        borderRadius: radius.capsule(48),\n        backgroundColor: colors.accent,\n        alignItems: 'center',\n        justifyContent: 'center',\n        alignSelf: 'stretch',\n      }}\n    >\n      {busy ? (\n        <Spinner size=\"sm\" color={fg} label=\"Placing order\" labelPosition=\"right\" />\n      ) : (\n        <Text style={{ color: fg, fontSize: 16, fontWeight: '400' }}>Place order · ₹749</Text>\n      )}\n    </Pressable>\n  );\n}\n"
     },
     {
       "name": "LoadingCard",
       "title": "Loading Card",
-      "code": "import { Pressable, Text, View } from 'react-native';\nimport { Spinner } from '@/components/ui/spinner';\nimport { readableOn, useKit } from '@/lib/kit';\n\nexport default function LoadingCard() {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={{\n        alignSelf: 'stretch',\n        alignItems: 'center',\n        gap: 6,\n        paddingVertical: 32,\n        paddingHorizontal: 20,\n        borderRadius: radius.lg,\n        backgroundColor: colors.card,\n        borderWidth: 1,\n        borderColor: colors.border,\n      }}\n    >\n      <Spinner size=\"xl\" track label=\"Preparing your itinerary\" labelPosition=\"bottom\" />\n      <Text style={{ fontSize: 13, color: colors.mutedForeground, textAlign: 'center' }}>\n        Checking 3 flights and 2 hotels\n      </Text>\n    </View>\n  );\n}\n"
+      "code": "import { Pressable, Text, View } from 'react-native';\nimport { Spinner, type SpinnerVariant } from '@/components/ui/spinner';\nimport { 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\nexport default function LoadingCard({ screen }: DemoProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        { alignSelf: 'stretch', alignItems: 'center', gap: 6, paddingVertical: 32, paddingHorizontal: 20 },\n        screen\n          ? { flex: 1, justifyContent: 'center', backgroundColor: colors.background }\n          : { borderRadius: radius.lg, backgroundColor: colors.card, borderWidth: 1, borderColor: colors.border },\n      ]}\n    >\n      <Spinner size=\"xl\" track label=\"Preparing your itinerary\" labelPosition=\"bottom\" />\n      <Text style={{ fontSize: 13, color: colors.mutedForeground, textAlign: 'center' }}>\n        Checking 3 flights and 2 hotels\n      </Text>\n    </View>\n  );\n}\n"
     },
     {
       "name": "InlineStatus",
       "title": "Inline Status",
-      "code": "import { Pressable, Text, View } from 'react-native';\nimport { Spinner } from '@/components/ui/spinner';\n\nexport default function InlineStatus() {\n  return (\n    <View style={{ gap: 16 }}>\n      <Spinner size=\"sm\" label=\"Syncing 128 photos\" labelPosition=\"right\" />\n      <Spinner variant=\"dots\" size=\"md\" label=\"Maya is typing\" labelPosition=\"right\" />\n    </View>\n  );\n}\n"
+      "code": "import { Pressable, Text, View } from 'react-native';\nimport { Spinner, type SpinnerVariant } from '@/components/ui/spinner';\n\nexport default function InlineStatus() {\n  return (\n    <View style={{ gap: 16 }}>\n      <Spinner size=\"sm\" label=\"Syncing 128 photos\" labelPosition=\"right\" />\n      <Spinner variant=\"dots\" size=\"md\" label=\"Maya is typing\" labelPosition=\"right\" />\n    </View>\n  );\n}\n"
     },
     {
       "name": "Colors",
       "title": "Colors",
-      "code": "import { Pressable, Text, View } from 'react-native';\nimport { Spinner } from '@/components/ui/spinner';\nimport { readableOn, useKit } from '@/lib/kit';\n\nexport default function Colors() {\n  const { colors } = useKit();\n  return (\n    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around', gap: 20 }}>\n      <Spinner size=\"lg\" color={colors.success} track />\n      <Spinner variant=\"dots\" size=\"lg\" color={colors.warning} />\n      <Spinner size=\"lg\" color={colors.danger} />\n    </View>\n  );\n}\n"
+      "code": "import { Pressable, Text, View } from 'react-native';\nimport { Spinner, type SpinnerVariant } from '@/components/ui/spinner';\nimport { readableOn, useKit } from '@/lib/kit';\n\nexport default function Colors() {\n  const { colors } = useKit();\n  return (\n    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around', gap: 20 }}>\n      <Spinner size=\"lg\" color={colors.success} track />\n      <Spinner variant=\"dots\" size=\"lg\" color={colors.warning} />\n      <Spinner size=\"lg\" color={colors.danger} />\n    </View>\n  );\n}\n"
     },
     {
       "name": "Sizes",
       "title": "Sizes",
-      "code": "import { Pressable, Text, View } from 'react-native';\nimport { Spinner } from '@/components/ui/spinner';\n\nexport default function Sizes() {\n  return (\n    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 24 }}>\n      <Spinner size=\"sm\" />\n      <Spinner size=\"md\" />\n      <Spinner size=\"lg\" />\n      <Spinner size=\"xl\" />\n    </View>\n  );\n}\n"
+      "code": "import { Pressable, Text, View } from 'react-native';\nimport { Spinner, type SpinnerVariant } from '@/components/ui/spinner';\n\nexport default function Sizes() {\n  return (\n    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 24 }}>\n      <Spinner size=\"sm\" />\n      <Spinner size=\"md\" />\n      <Spinner size=\"lg\" />\n      <Spinner size=\"xl\" />\n    </View>\n  );\n}\n"
     }
   ]
 }

package/registry/_docs/stateful-button.json

@@ -0,0 +1,184 @@
+{
+  "name": "stateful-button",
+  "category": "Buttons",
+  "aliases": [
+    "loading-button",
+    "async-button",
+    "status-button"
+  ],
+  "exportName": "StatefulButton",
+  "files": [
+    "src/components/ui/stateful-button.tsx"
+  ],
+  "summary": "Button whose label rolls and width springs through loading, success and error.",
+  "props": [
+    [
+      "children",
+      "string",
+      "—",
+      "Label while idle."
+    ],
+    [
+      "state",
+      "\"idle\" | \"loading\" | \"success\" | \"error\"",
+      "—",
+      "Controlled state. Omit it to let a Promise from onPress drive the button."
+    ],
+    [
+      "onPress",
+      "() => void | Promise<unknown>",
+      "—",
+      "Resolve → success, reject → error, then back to idle (when state is not set)."
+    ],
+    [
+      "loadingText",
+      "string",
+      "children",
+      "Label while loading."
+    ],
+    [
+      "successText",
+      "string",
+      "\"Done\"",
+      "Label after success."
+    ],
+    [
+      "errorText",
+      "string",
+      "\"Failed\"",
+      "Label after an error."
+    ],
+    [
+      "variant",
+      "\"primary\" | \"secondary\" | \"outline\" | \"ghost\"",
+      "\"primary\"",
+      "Idle look; success and error tint it green / red."
+    ],
+    [
+      "size",
+      "\"sm\" | \"md\" | \"lg\"",
+      "\"md\"",
+      "36 / 46 / 54pt tall."
+    ],
+    [
+      "color",
+      "string",
+      "theme primary",
+      "Tint for the idle look."
+    ],
+    [
+      "resetAfter",
+      "number",
+      "1600",
+      "ms the result shows before returning to idle (self-driving only)."
+    ],
+    [
+      "minLoading",
+      "number",
+      "500",
+      "Minimum ms of spinner (self-driving only)."
+    ],
+    [
+      "onStateChange",
+      "(state) => void",
+      "—",
+      "Called on every state change."
+    ],
+    [
+      "pill",
+      "boolean",
+      "false",
+      "Fully rounded ends."
+    ],
+    [
+      "block",
+      "boolean",
+      "false",
+      "Stretch to the parent's width (no width animation)."
+    ],
+    [
+      "disabled",
+      "boolean",
+      "false",
+      "Blocks presses and dims the button."
+    ],
+    [
+      "haptics",
+      "boolean",
+      "true",
+      "Taps on press, success and error."
+    ],
+    [
+      "accessibilityLabel",
+      "string",
+      "current label",
+      "Override what screen readers hear."
+    ],
+    [
+      "textStyle",
+      "StyleProp<TextStyle>",
+      "—",
+      "Style for the label letters."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the outer wrapper (margins, alignment)."
+    ]
+  ],
+  "behavior": [
+    [
+      "Touch",
+      "Springs to 96% on press; at least 44pt tall to touch (hitSlop on the small size). Presses are ignored while loading and, when self-driving, until it returns to idle."
+    ],
+    [
+      "Motion",
+      "Label letters roll on the native driver; width, colour and the check / cross stroke spring or ease on the JS driver on separate views."
+    ],
+    [
+      "Reduced motion",
+      "Labels crossfade instead of rolling and the width changes instantly."
+    ],
+    [
+      "Haptics",
+      "Light tap on press, success / error notification on the result (expo-haptics; turn off with haptics={false})."
+    ],
+    [
+      "Screen readers",
+      "Button role with busy and disabled state; every new label (Saving…, Saved, Failed) is announced."
+    ],
+    [
+      "Platforms",
+      "iOS, Android and web."
+    ]
+  ],
+  "usage": "import { StatefulButton } from '@/components/ui/stateful-button';\n\n<StatefulButton loadingText=\"Saving…\" successText=\"Saved\" onPress={() => save()}>\n  Save changes\n</StatefulButton>\n\n<StatefulButton state={state} errorText=\"Retry\">Upload</StatefulButton>",
+  "examples": [
+    {
+      "name": "SaveChanges",
+      "title": "Save Changes",
+      "code": "import { StatefulButton, type StatefulButtonState } from '@/components/ui/stateful-button';\n\nconst sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));\n\nexport default function SaveChanges() {\n  return (\n    <StatefulButton loadingText=\"Saving…\" successText=\"Saved\" onPress={() => sleep(1200)}>\n      Save changes\n    </StatefulButton>\n  );\n}\n"
+    },
+    {
+      "name": "PaymentRetry",
+      "title": "Payment Retry",
+      "code": "import React, { useRef, useState } from 'react';\nimport { Text, View } from 'react-native';\nimport { StatefulButton, type StatefulButtonState } from '@/components/ui/stateful-button';\nimport { useKit } from '@/lib/kit';\n\nconst sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));\n\nexport default function PaymentRetry() {\n  const { colors } = useKit();\n  const attempts = useRef(0);\n  const [note, setNote] = useState('First attempt is declined, the retry goes through.');\n  return (\n    <View style={{ gap: 10 }}>\n      <StatefulButton\n        block\n        size=\"lg\"\n        loadingText=\"Processing…\"\n        successText=\"Paid ₹1,299\"\n        errorText=\"Card declined\"\n        onPress={async () => {\n          attempts.current += 1;\n          await sleep(1300);\n          if (attempts.current % 2 === 1) {\n            setNote('Declined by the bank. Tap again to retry.');\n            throw new Error('declined');\n          }\n          setNote('Payment received.');\n        }}\n      >\n        Pay ₹1,299\n      </StatefulButton>\n      <Text style={{ fontSize: 13, color: colors.mutedForeground }}>{note}</Text>\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Controlled",
+      "title": "Controlled",
+      "code": "import React, { useRef, useState } from 'react';\nimport { Text, View } from 'react-native';\nimport { StatefulButton, type StatefulButtonState } from '@/components/ui/stateful-button';\nimport { useKit } from '@/lib/kit';\n\nconst ORDER: StatefulButtonState[] = ['idle', 'loading', 'success', 'error'];\n\nexport default function Controlled() {\n  const { colors, radius } = useKit();\n  const [state, setState] = useState<StatefulButtonState>('idle');\n  return (\n    <View style={{ gap: 14 }}>\n      <StatefulButton state={state} loadingText=\"Uploading\" successText=\"Uploaded\" errorText=\"Retry upload\">\n        Upload\n      </StatefulButton>\n      <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>\n        {ORDER.map((s) => (\n          <Text\n            key={s}\n            accessibilityRole=\"button\"\n            accessibilityState={{ selected: s === state }}\n            onPress={() => setState(s)}\n            style={{\n              paddingHorizontal: 12,\n              paddingVertical: 8,\n              borderRadius: radius.capsule(34),\n              overflow: 'hidden',\n              fontSize: 13,\n              color: s === state ? colors.accentForeground : colors.foreground,\n              backgroundColor: s === state ? colors.accent : colors.muted,\n            }}\n          >\n            {s}\n          </Text>\n        ))}\n      </View>\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "VariantsAndSizes",
+      "title": "Variants And Sizes",
+      "code": "import { Text, View } from 'react-native';\nimport { StatefulButton, type StatefulButtonState } from '@/components/ui/stateful-button';\n\nconst sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));\n\nexport default function VariantsAndSizes() {\n  return (\n    <View style={{ gap: 12 }}>\n      <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 10 }}>\n        <StatefulButton onPress={() => sleep(1000)}>Publish</StatefulButton>\n        <StatefulButton variant=\"secondary\" onPress={() => sleep(1000)}>Sync</StatefulButton>\n        <StatefulButton variant=\"outline\" onPress={() => sleep(1000)}>Export</StatefulButton>\n        <StatefulButton variant=\"ghost\" onPress={() => sleep(1000)}>Archive</StatefulButton>\n      </View>\n      <View style={{ flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', gap: 10 }}>\n        <StatefulButton size=\"sm\" pill onPress={() => sleep(1000)}>Small</StatefulButton>\n        <StatefulButton size=\"md\" pill onPress={() => sleep(1000)}>Medium</StatefulButton>\n        <StatefulButton size=\"lg\" pill onPress={() => sleep(1000)}>Large</StatefulButton>\n      </View>\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "FollowToggle",
+      "title": "Follow Toggle",
+      "code": "import React, { useRef, useState } from 'react';\nimport { Text, View } from 'react-native';\nimport { StatefulButton, type StatefulButtonState } from '@/components/ui/stateful-button';\nimport { useKit } from '@/lib/kit';\n\nconst sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));\n\nexport default function FollowToggle() {\n  const { colors } = useKit();\n  const [following, setFollowing] = useState(false);\n  return (\n    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>\n      <View style={{ flexShrink: 1 }}>\n        <Text style={{ fontSize: 16, fontWeight: '600', color: colors.foreground }}>Expo</Text>\n        <Text style={{ fontSize: 13, color: colors.mutedForeground }}>@expo · 214K followers</Text>\n      </View>\n      <StatefulButton\n        pill\n        size=\"sm\"\n        variant=\"secondary\"\n        successText={following ? 'Following' : 'Unfollowed'}\n        resetAfter={900}\n        onPress={async () => {\n          await sleep(700);\n          setFollowing((f) => !f);\n        }}\n      >\n        {following ? 'Following' : 'Follow'}\n      </StatefulButton>\n    </View>\n  );\n}\n"
+    }
+  ]
+}

package/registry/_docs/stepper.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/stepper.tsx"
   ],
+  "summary": "A quantity stepper whose digits roll up or down as the number changes.",
   "props": [
     [
       "value / defaultValue",
@@ -128,41 +129,56 @@
       "Applied to the number (fontSize, colour, weight)."
     ]
   ],
+  "behavior": [
+    [
+      "Touch",
+      "Hold a button to keep stepping, speeding up as you hold. The cart variant opens from a single + into − 1 +, with a trash can at 1."
+    ],
+    [
+      "Motion",
+      "Each changed character slides out as the new one slides in; buttons spring on press and a press past min or max gives a small bump."
+    ],
+    [
+      "Screen readers",
+      "One adjustable element with min, max and the formatted value (suffix included), plus 'Increase' and 'Decrease' actions."
+    ]
+  ],
+  "usage": "import { useState } from 'react';\nimport { Stepper } from '@/components/ui/stepper';\n\nconst [guests, setGuests] = useState(2);\n<Stepper value={guests} onValueChange={setGuests} min={1} max={16} label=\"Guests\" />",
   "examples": [
     {
       "name": "Cart",
       "title": "Cart",
-      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { Stepper } from '@/components/ui/stepper';\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={[\n        { backgroundColor: colors.card, borderColor: colors.border, borderWidth: StyleSheet.hairlineWidth, borderRadius: radius.xl, padding: 16, gap: 12 },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nconst eyebrow = { fontSize: 12, fontWeight: '400', letterSpacing: 0.6, textTransform: 'uppercase' } as const;\n\nconst money = (n: number) => {\n  const [int, frac] = n.toFixed(2).split('.');\n  return `₹${int.replace(/(\\d)(?=(\\d\\d)+\\d$)/g, '$1,')}${frac === '00' ? '' : `.${frac}`}`;\n};\n\nconst MENU = [\n  { key: 'bowl', emoji: '🥗', name: 'Harvest bowl', note: 'Kale, squash, tahini', price: 349 },\n  { key: 'ramen', emoji: '🍜', name: 'Miso ramen', note: 'Spicy · extra egg', price: 420 },\n  { key: 'mochi', emoji: '🍡', name: 'Mochi trio', note: 'Matcha, yuzu, sesame', price: 180 },\n];\n\nexport default function Cart() {\n  const { colors, radius } = useKit();\n  const [qty, setQty] = useState<Record<string, number>>({ bowl: 1, ramen: 2, mochi: 0 });\n  const total = MENU.reduce((sum, it) => sum + it.price * (qty[it.key] ?? 0), 0);\n  return (\n    <Card>\n      <Text style={[eyebrow, { color: colors.mutedForeground }]}>Your order</Text>\n      {MENU.map((it) => (\n        <View key={it.key} style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>\n          <View style={{ width: 44, height: 44, borderRadius: radius.scale(12), backgroundColor: colors.muted, alignItems: 'center', justifyContent: 'center' }}>\n            <Text style={{ fontSize: 22 }}>{it.emoji}</Text>\n          </View>\n          <View style={{ flex: 1 }}>\n            <Text style={{ fontSize: 15, fontWeight: '400', color: colors.foreground }}>{it.name}</Text>\n            <Text style={{ fontSize: 13, color: colors.mutedForeground }}>{money(it.price)} · {it.note}</Text>\n          </View>\n          <Stepper\n            variant=\"cart\"\n            size=\"sm\"\n            value={qty[it.key]}\n            onValueChange={(n) => setQty((q) => ({ ...q, [it.key]: n }))}\n            max={9}\n            accessibilityLabel={`${it.name} quantity`}\n          />\n        </View>\n      ))}\n      <View style={{ height: StyleSheet.hairlineWidth, backgroundColor: colors.border }} />\n      <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'baseline' }}>\n        <Text style={{ fontSize: 15, fontWeight: '400', color: colors.foreground }}>Subtotal</Text>\n        <Text style={{ fontSize: 18, fontWeight: '400', color: colors.foreground, fontVariant: ['tabular-nums'] }}>{money(total)}</Text>\n      </View>\n    </Card>\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { Stepper } from '@/components/ui/stepper';\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({ style, screen, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        screen\n          ? { flex: 1, backgroundColor: colors.background, padding: 16, gap: 12 }\n          : { backgroundColor: colors.card, borderColor: colors.border, borderWidth: StyleSheet.hairlineWidth, borderRadius: radius.xl, padding: 16, gap: 12 },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nconst eyebrow = { fontSize: 12, fontWeight: '400', letterSpacing: 0.6, textTransform: 'uppercase' } as const;\n\nconst money = (n: number) => {\n  const [int, frac] = n.toFixed(2).split('.');\n  return `₹${int.replace(/(\\d)(?=(\\d\\d)+\\d$)/g, '$1,')}${frac === '00' ? '' : `.${frac}`}`;\n};\n\nconst MENU = [\n  { key: 'bowl', emoji: '🥗', name: 'Harvest bowl', note: 'Kale, squash, tahini', price: 349 },\n  { key: 'ramen', emoji: '🍜', name: 'Miso ramen', note: 'Spicy · extra egg', price: 420 },\n  { key: 'mochi', emoji: '🍡', name: 'Mochi trio', note: 'Matcha, yuzu, sesame', price: 180 },\n];\n\nexport default function Cart({ screen }: DemoProps) {\n  const { colors, radius } = useKit();\n  const [qty, setQty] = useState<Record<string, number>>({ bowl: 1, ramen: 2, mochi: 0 });\n  const total = MENU.reduce((sum, it) => sum + it.price * (qty[it.key] ?? 0), 0);\n  return (\n    <Card screen={screen}>\n      <Text style={[eyebrow, { color: colors.mutedForeground }]}>Your order</Text>\n      {MENU.map((it) => (\n        <View key={it.key} style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>\n          <View style={{ width: 44, height: 44, borderRadius: radius.scale(12), backgroundColor: colors.muted, alignItems: 'center', justifyContent: 'center' }}>\n            <Text style={{ fontSize: 22 }}>{it.emoji}</Text>\n          </View>\n          <View style={{ flex: 1 }}>\n            <Text style={{ fontSize: 15, fontWeight: '400', color: colors.foreground }}>{it.name}</Text>\n            <Text style={{ fontSize: 13, color: colors.mutedForeground }}>{money(it.price)} · {it.note}</Text>\n          </View>\n          <Stepper\n            variant=\"cart\"\n            size=\"sm\"\n            value={qty[it.key]}\n            onValueChange={(n) => setQty((q) => ({ ...q, [it.key]: n }))}\n            max={9}\n            accessibilityLabel={`${it.name} quantity`}\n          />\n        </View>\n      ))}\n      <View style={{ height: StyleSheet.hairlineWidth, backgroundColor: colors.border }} />\n      <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'baseline' }}>\n        <Text style={{ fontSize: 15, fontWeight: '400', color: colors.foreground }}>Subtotal</Text>\n        <Text style={{ fontSize: 18, fontWeight: '400', color: colors.foreground, fontVariant: ['tabular-nums'] }}>{money(total)}</Text>\n      </View>\n    </Card>\n  );\n}\n"
     },
     {
       "name": "Guests",
       "title": "Guests",
-      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { Stepper } from '@/components/ui/stepper';\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={[\n        { backgroundColor: colors.card, borderColor: colors.border, borderWidth: StyleSheet.hairlineWidth, borderRadius: radius.xl, padding: 16, gap: 12 },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nexport default function Guests() {\n  const { colors } = useKit();\n  const [adults, setAdults] = useState(2);\n  const [children, setChildren] = useState(0);\n  const [infants, setInfants] = useState(0);\n  const cap = 6;\n  const rule = <View style={{ height: StyleSheet.hairlineWidth, backgroundColor: colors.border }} />;\n  return (\n    <Card style={{ gap: 14 }}>\n      <Stepper label=\"Adults\" description=\"Ages 13 or above\" value={adults} onValueChange={setAdults} min={1} max={cap - children} />\n      {rule}\n      <Stepper label=\"Children\" description=\"Ages 2–12\" value={children} onValueChange={setChildren} max={cap - adults} />\n      {rule}\n      <Stepper label=\"Infants\" description=\"Under 2\" value={infants} onValueChange={setInfants} max={5} />\n      <Text style={{ fontSize: 13, color: colors.mutedForeground }}>\n        This place has a maximum of {cap} guests, not including infants.\n      </Text>\n    </Card>\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { Stepper } from '@/components/ui/stepper';\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({ style, screen, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        screen\n          ? { flex: 1, backgroundColor: colors.background, padding: 16, gap: 12 }\n          : { backgroundColor: colors.card, borderColor: colors.border, borderWidth: StyleSheet.hairlineWidth, borderRadius: radius.xl, padding: 16, gap: 12 },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nexport default function Guests({ screen }: DemoProps) {\n  const { colors } = useKit();\n  const [adults, setAdults] = useState(2);\n  const [children, setChildren] = useState(0);\n  const [infants, setInfants] = useState(0);\n  const cap = 6;\n  const rule = <View style={{ height: StyleSheet.hairlineWidth, backgroundColor: colors.border }} />;\n  return (\n    <Card screen={screen} style={{ gap: 14 }}>\n      <Stepper label=\"Adults\" description=\"Ages 13 or above\" value={adults} onValueChange={setAdults} min={1} max={cap - children} />\n      {rule}\n      <Stepper label=\"Children\" description=\"Ages 2–12\" value={children} onValueChange={setChildren} max={cap - adults} />\n      {rule}\n      <Stepper label=\"Infants\" description=\"Under 2\" value={infants} onValueChange={setInfants} max={5} />\n      <Text style={{ fontSize: 13, color: colors.mutedForeground }}>\n        This place has a maximum of {cap} guests, not including infants.\n      </Text>\n    </Card>\n  );\n}\n"
     },
     {
       "name": "AddToBag",
       "title": "Add To Bag",
-      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { Stepper } from '@/components/ui/stepper';\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={[\n        { backgroundColor: colors.card, borderColor: colors.border, borderWidth: StyleSheet.hairlineWidth, borderRadius: radius.xl, padding: 16, gap: 12 },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nconst money = (n: number) => {\n  const [int, frac] = n.toFixed(2).split('.');\n  return `₹${int.replace(/(\\d)(?=(\\d\\d)+\\d$)/g, '$1,')}${frac === '00' ? '' : `.${frac}`}`;\n};\n\nexport default function AddToBag() {\n  const { colors, radius } = useKit();\n  const [qty, setQty] = useState(1);\n  const price = 1899;\n  return (\n    <Card>\n      <View style={{ gap: 2 }}>\n        <Text style={{ fontSize: 17, fontWeight: '400', color: colors.foreground }}>Linen overshirt</Text>\n        <Text style={{ fontSize: 13, color: colors.mutedForeground }}>Sand · Size M · Free returns</Text>\n      </View>\n      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>\n        <Stepper variant=\"filled\" size=\"lg\" value={qty} onValueChange={setQty} min={1} max={10} accessibilityLabel=\"Quantity\" />\n        <Pressable\n          accessibilityRole=\"button\"\n          style={({ pressed }) => ({\n            flex: 1,\n            height: 44,\n            borderRadius: radius.capsule(44),\n            backgroundColor: colors.primary,\n            alignItems: 'center',\n            justifyContent: 'center',\n            opacity: pressed ? 0.85 : 1,\n          })}\n        >\n          <Text style={{ fontSize: 15, fontWeight: '400', color: colors.primaryForeground, fontVariant: ['tabular-nums'] }}>\n            Add to bag · {money(price * qty)}\n          </Text>\n        </Pressable>\n      </View>\n      <Text style={{ fontSize: 12, color: colors.mutedForeground }}>Only 10 left — hold + to add faster.</Text>\n    </Card>\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { Stepper } from '@/components/ui/stepper';\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({ style, screen, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        screen\n          ? { flex: 1, backgroundColor: colors.background, padding: 16, gap: 12 }\n          : { backgroundColor: colors.card, borderColor: colors.border, borderWidth: StyleSheet.hairlineWidth, borderRadius: radius.xl, padding: 16, gap: 12 },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nconst money = (n: number) => {\n  const [int, frac] = n.toFixed(2).split('.');\n  return `₹${int.replace(/(\\d)(?=(\\d\\d)+\\d$)/g, '$1,')}${frac === '00' ? '' : `.${frac}`}`;\n};\n\nexport default function AddToBag({ screen }: DemoProps) {\n  const { colors, radius } = useKit();\n  const [qty, setQty] = useState(1);\n  const price = 1899;\n  return (\n    <Card screen={screen}>\n      <View style={{ gap: 2 }}>\n        <Text style={{ fontSize: 17, fontWeight: '400', color: colors.foreground }}>Linen overshirt</Text>\n        <Text style={{ fontSize: 13, color: colors.mutedForeground }}>Sand · Size M · Free returns</Text>\n      </View>\n      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>\n        <Stepper variant=\"filled\" size=\"lg\" value={qty} onValueChange={setQty} min={1} max={10} accessibilityLabel=\"Quantity\" />\n        <Pressable\n          accessibilityRole=\"button\"\n          style={({ pressed }) => ({\n            flex: 1,\n            height: 44,\n            borderRadius: radius.capsule(44),\n            backgroundColor: colors.primary,\n            alignItems: 'center',\n            justifyContent: 'center',\n            opacity: pressed ? 0.85 : 1,\n          })}\n        >\n          <Text style={{ fontSize: 15, fontWeight: '400', color: colors.primaryForeground, fontVariant: ['tabular-nums'] }}>\n            Add to bag · {money(price * qty)}\n          </Text>\n        </Pressable>\n      </View>\n      <Text style={{ fontSize: 12, color: colors.mutedForeground }}>Only 10 left — hold + to add faster.</Text>\n    </Card>\n  );\n}\n"
     },
     {
       "name": "Menu",
       "title": "Menu",
-      "code": "import { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { Stepper } from '@/components/ui/stepper';\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={[\n        { backgroundColor: colors.card, borderColor: colors.border, borderWidth: StyleSheet.hairlineWidth, borderRadius: radius.xl, padding: 16, gap: 12 },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nconst eyebrow = { fontSize: 12, fontWeight: '400', letterSpacing: 0.6, textTransform: 'uppercase' } as const;\n\nexport default function Menu() {\n  const { colors } = useKit();\n  return (\n    <Card>\n      <Text style={[eyebrow, { color: colors.mutedForeground }]}>Popular</Text>\n      <Stepper variant=\"cart\" addLabel=\"Add\" label=\"Pistachio croissant\" description=\"₹220 · Baked this morning\" accessibilityLabel=\"Pistachio croissant\" />\n      <Stepper variant=\"cart\" addLabel=\"Add\" label=\"Iced oat latte\" description=\"₹280 · 16 oz\" defaultValue={1} accessibilityLabel=\"Iced oat latte\" />\n    </Card>\n  );\n}\n"
+      "code": "import { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { Stepper } from '@/components/ui/stepper';\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({ style, screen, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        screen\n          ? { flex: 1, backgroundColor: colors.background, padding: 16, gap: 12 }\n          : { backgroundColor: colors.card, borderColor: colors.border, borderWidth: StyleSheet.hairlineWidth, borderRadius: radius.xl, padding: 16, gap: 12 },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nconst eyebrow = { fontSize: 12, fontWeight: '400', letterSpacing: 0.6, textTransform: 'uppercase' } as const;\n\nexport default function Menu({ screen }: DemoProps) {\n  const { colors } = useKit();\n  return (\n    <Card screen={screen}>\n      <Text style={[eyebrow, { color: colors.mutedForeground }]}>Popular</Text>\n      <Stepper variant=\"cart\" addLabel=\"Add\" label=\"Pistachio croissant\" description=\"₹220 · Baked this morning\" accessibilityLabel=\"Pistachio croissant\" />\n      <Stepper variant=\"cart\" addLabel=\"Add\" label=\"Iced oat latte\" description=\"₹280 · 16 oz\" defaultValue={1} accessibilityLabel=\"Iced oat latte\" />\n    </Card>\n  );\n}\n"
     },
     {
       "name": "Formatted",
       "title": "Formatted",
-      "code": "import { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { Stepper } from '@/components/ui/stepper';\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={[\n        { backgroundColor: colors.card, borderColor: colors.border, borderWidth: StyleSheet.hairlineWidth, borderRadius: radius.xl, padding: 16, gap: 12 },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nconst money = (n: number) => {\n  const [int, frac] = n.toFixed(2).split('.');\n  return `₹${int.replace(/(\\d)(?=(\\d\\d)+\\d$)/g, '$1,')}${frac === '00' ? '' : `.${frac}`}`;\n};\n\nexport default function Formatted() {\n  return (\n    <Card style={{ gap: 16 }}>\n      <Stepper variant=\"filled\" size=\"sm\" label=\"Nights\" description=\"Check-in Fri, Oct 24\" defaultValue={3} min={1} max={28} suffix={(n) => (n === 1 ? 'night' : 'nights')} />\n      <Stepper variant=\"filled\" size=\"sm\" label=\"Driver tip\" description=\"100% goes to your driver\" defaultValue={50} step={10} min={0} max={500} format={money} />\n      <Stepper variant=\"filled\" size=\"sm\" label=\"Search radius\" defaultValue={2.5} step={0.5} min={0.5} max={10} suffix=\"km\" />\n      <Stepper variant=\"compact\" label=\"Seats\" description=\"₹499 per seat / month\" defaultValue={5} min={1} max={50} />\n    </Card>\n  );\n}\n"
+      "code": "import { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { Stepper } from '@/components/ui/stepper';\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({ style, screen, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        screen\n          ? { flex: 1, backgroundColor: colors.background, padding: 16, gap: 12 }\n          : { backgroundColor: colors.card, borderColor: colors.border, borderWidth: StyleSheet.hairlineWidth, borderRadius: radius.xl, padding: 16, gap: 12 },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nconst money = (n: number) => {\n  const [int, frac] = n.toFixed(2).split('.');\n  return `₹${int.replace(/(\\d)(?=(\\d\\d)+\\d$)/g, '$1,')}${frac === '00' ? '' : `.${frac}`}`;\n};\n\nexport default function Formatted({ screen }: DemoProps) {\n  return (\n    <Card screen={screen} style={{ gap: 16 }}>\n      <Stepper variant=\"filled\" size=\"sm\" label=\"Nights\" description=\"Check-in Fri, Oct 24\" defaultValue={3} min={1} max={28} suffix={(n) => (n === 1 ? 'night' : 'nights')} />\n      <Stepper variant=\"filled\" size=\"sm\" label=\"Driver tip\" description=\"100% goes to your driver\" defaultValue={50} step={10} min={0} max={500} format={money} />\n      <Stepper variant=\"filled\" size=\"sm\" label=\"Search radius\" defaultValue={2.5} step={0.5} min={0.5} max={10} suffix=\"km\" />\n      <Stepper variant=\"compact\" label=\"Seats\" description=\"₹499 per seat / month\" defaultValue={5} min={1} max={50} />\n    </Card>\n  );\n}\n"
     },
     {
       "name": "Sizes",
       "title": "Sizes",
-      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { Stepper } from '@/components/ui/stepper';\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={[\n        { backgroundColor: colors.card, borderColor: colors.border, borderWidth: StyleSheet.hairlineWidth, borderRadius: radius.xl, padding: 16, gap: 12 },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nexport default function Sizes() {\n  const { colors } = useKit();\n  const row = (name: string, el: React.ReactNode) => (\n    <View key={name} style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', minHeight: 48 }}>\n      <Text style={{ fontSize: 13, fontWeight: '400', color: colors.mutedForeground }}>{name}</Text>\n      {el}\n    </View>\n  );\n  return (\n    <Card style={{ gap: 4 }}>\n      {row('Small', <Stepper size=\"sm\" defaultValue={2} max={20} accessibilityLabel=\"Small stepper\" />)}\n      {row('Medium', <Stepper size=\"md\" defaultValue={2} max={20} accessibilityLabel=\"Medium stepper\" />)}\n      {row('Large', <Stepper size=\"lg\" defaultValue={2} max={20} accessibilityLabel=\"Large stepper\" />)}\n      {row('Compact', <Stepper variant=\"compact\" defaultValue={2} max={20} accessibilityLabel=\"Compact stepper\" />)}\n    </Card>\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { Stepper } from '@/components/ui/stepper';\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({ style, screen, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        screen\n          ? { flex: 1, backgroundColor: colors.background, padding: 16, gap: 12 }\n          : { backgroundColor: colors.card, borderColor: colors.border, borderWidth: StyleSheet.hairlineWidth, borderRadius: radius.xl, padding: 16, gap: 12 },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nexport default function Sizes({ screen }: DemoProps) {\n  const { colors } = useKit();\n  const row = (name: string, el: React.ReactNode) => (\n    <View key={name} style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', minHeight: 48 }}>\n      <Text style={{ fontSize: 13, fontWeight: '400', color: colors.mutedForeground }}>{name}</Text>\n      {el}\n    </View>\n  );\n  return (\n    <Card screen={screen} style={{ gap: 4 }}>\n      {row('Small', <Stepper size=\"sm\" defaultValue={2} max={20} accessibilityLabel=\"Small stepper\" />)}\n      {row('Medium', <Stepper size=\"md\" defaultValue={2} max={20} accessibilityLabel=\"Medium stepper\" />)}\n      {row('Large', <Stepper size=\"lg\" defaultValue={2} max={20} accessibilityLabel=\"Large stepper\" />)}\n      {row('Compact', <Stepper variant=\"compact\" defaultValue={2} max={20} accessibilityLabel=\"Compact stepper\" />)}\n    </Card>\n  );\n}\n"
     },
     {
       "name": "Colors",
       "title": "Colors",
-      "code": "import { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { Stepper } from '@/components/ui/stepper';\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={[\n        { backgroundColor: colors.card, borderColor: colors.border, borderWidth: StyleSheet.hairlineWidth, borderRadius: radius.xl, padding: 16, gap: 12 },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nexport default function Colors() {\n  const { colors } = useKit();\n  return (\n    <Card style={{ gap: 16 }}>\n      <Stepper variant=\"filled\" accent={colors.success} label=\"Water\" description=\"Glasses today\" defaultValue={6} max={12} />\n      <Stepper variant=\"compact\" accent={colors.warning} label=\"Espresso shots\" defaultValue={2} max={4} />\n      <Stepper variant=\"cart\" accent={colors.danger} addLabel=\"Add\" label=\"Hot sauce\" description=\"₹30 each\" />\n    </Card>\n  );\n}\n"
+      "code": "import { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { Stepper } from '@/components/ui/stepper';\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({ style, screen, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        screen\n          ? { flex: 1, backgroundColor: colors.background, padding: 16, gap: 12 }\n          : { backgroundColor: colors.card, borderColor: colors.border, borderWidth: StyleSheet.hairlineWidth, borderRadius: radius.xl, padding: 16, gap: 12 },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nexport default function Colors({ screen }: DemoProps) {\n  const { colors } = useKit();\n  return (\n    <Card screen={screen} style={{ gap: 16 }}>\n      <Stepper variant=\"filled\" accent={colors.success} label=\"Water\" description=\"Glasses today\" defaultValue={6} max={12} />\n      <Stepper variant=\"compact\" accent={colors.warning} label=\"Espresso shots\" defaultValue={2} max={4} />\n      <Stepper variant=\"cart\" accent={colors.danger} addLabel=\"Add\" label=\"Hot sauce\" description=\"₹30 each\" />\n    </Card>\n  );\n}\n"
     }
   ]
 }

package/registry/_docs/swipe-deck.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/swipe-deck.tsx"
   ],
+  "summary": "A card stack you swipe left or right; the top card leans in 3D and stamps a label.",
   "props": [
     [
       "data",
@@ -98,5 +99,20 @@
       "Style for the root view."
     ]
   ],
+  "behavior": [
+    [
+      "Touch",
+      "Drag the top card past the threshold or flick it to throw it off; a short drag springs back. A ref exposes swipe, undo and reset for buttons."
+    ],
+    [
+      "Motion",
+      "The card follows your finger, rotates and tilts in 3D, washes in the right or left colour and shows the stamp, while the next card rises."
+    ],
+    [
+      "Screen readers",
+      "Only the top card is exposed. It offers the right and left labels as accessibility actions, which throw the card that way."
+    ]
+  ],
+  "usage": null,
   "examples": []
 }

package/registry/_docs/swipeable-row.json

@@ -1,11 +1,15 @@
 {
   "name": "swipeable-row",
   "category": "Display",
-  "aliases": [],
+  "aliases": [
+    "swipeable-list",
+    "swipe-actions"
+  ],
   "exportName": "SwipeableRow",
   "files": [
     "src/components/ui/swipeable-row.tsx"
   ],
+  "summary": "A mail-style row whose actions fan out and grow as you drag it sideways.",
   "props": [
     [
       "leftActions",
@@ -68,5 +72,24 @@
       "Style for the outer row that holds the actions behind the sliding content."
     ]
   ],
+  "behavior": [
+    [
+      "Touch",
+      "Drag sideways to reveal the actions; a full swipe past half the row fires the edge action. Tap the open row to close it."
+    ],
+    [
+      "Motion",
+      "Actions fan out and grow with your finger, the edge action stretches across on a full swipe, and destructive actions slide away and collapse the row."
+    ],
+    [
+      "Screen readers",
+      "Every action is offered as a named accessibility action on the row, and each revealed action is a labelled button."
+    ],
+    [
+      "Web",
+      "Built on PanResponder, so a mouse drag works too; the row shows a grab cursor and text selection is turned off."
+    ]
+  ],
+  "usage": null,
   "examples": []
 }

package/registry/_docs/switch.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/switch.tsx"
   ],
+  "summary": "A toggle whose thumb squashes and stretches toward the other side while held.",
   "props": [
     [
       "value / onValueChange",
@@ -74,6 +75,25 @@
       "Style for the pressable — the switch itself, or the whole settings row when label is set."
     ]
   ],
+  "behavior": [
+    [
+      "Touch",
+      "Tap to flip, or drag the thumb across. Passing label (and description) turns it into a settings row."
+    ],
+    [
+      "Motion",
+      "The thumb stretches toward its destination while pressed, springs over with a soft halo, and the track cross-fades."
+    ],
+    [
+      "Haptics",
+      "A light impact on every flip; turn it off with haptics={false}."
+    ],
+    [
+      "Screen readers",
+      "A switch role with checked and disabled state, labelled by accessibilityLabel or label."
+    ]
+  ],
+  "usage": "import { useState } from 'react';\nimport { Switch } from '@/components/ui/switch';\n\nconst [wifi, setWifi] = useState(true);\n<Switch label=\"Wi-Fi\" value={wifi} onValueChange={setWifi} />",
   "examples": [
     {
       "name": "IOS",

package/registry/_docs/tabs.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/tabs.tsx"
   ],
+  "summary": "Underline tabs whose indicator moves like liquid, leading edge first.",
   "props": [
     [
       "items",
@@ -80,6 +81,29 @@
       "Style for the root view wrapping the tab bar and content."
     ]
   ],
+  "behavior": [
+    [
+      "Touch",
+      "Tap a tab or drag the content panes sideways; the underline follows your finger, with rubber-band resistance at the ends."
+    ],
+    [
+      "Motion",
+      "The underline is measured to each label and springs with the leading edge first. Badges pop, and an overflowing bar scrolls to centre the active tab."
+    ],
+    [
+      "Reduced motion",
+      "Springs become short timings, the bar scrolls without animating and badges change without the pop."
+    ],
+    [
+      "Haptics",
+      "A selection tick on every change; turn it off with haptics={false}."
+    ],
+    [
+      "Screen readers",
+      "The bar is a tablist of tabs with selected and disabled state; badges are read with the label, and inactive panes are hidden."
+    ]
+  ],
+  "usage": "import { Tabs } from '@/components/ui/tabs';\n\n<Tabs\n  items={[\n    { value: 'overview', label: 'Overview', content: <Overview /> },\n    { value: 'reviews', label: 'Reviews', badge: 128, content: <Reviews /> },\n  ]}\n/>",
   "examples": [
     {
       "name": "Underline",