@expokit/cli 0.2.0 → 0.3.0

package/registry/_docs/shimmer-button.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/shimmer-button.tsx"
   ],
+  "summary": "A call-to-action with a looping light sweep, breathing glow or orbiting beam.",
   "props": [
     [
       "variant",
@@ -74,5 +75,24 @@
       "onPress, disabled, …"
     ]
   ],
+  "behavior": [
+    [
+      "Motion",
+      "'shimmer' sweeps a light band across on a loop, 'glow' breathes a soft halo and 'border-beam' sends a bright comet around the border. speed sets the loop length."
+    ],
+    [
+      "Touch",
+      "Pressing scales the button down on a bouncy spring."
+    ],
+    [
+      "Reduced motion",
+      "With Reduce Motion on, or while disabled, the loop stops and the button rests in a still state."
+    ],
+    [
+      "Screen readers",
+      "A button with its disabled state. Other Pressable props, such as accessibilityLabel, pass through."
+    ]
+  ],
+  "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

@@ -6,6 +6,7 @@
   "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",

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,6 +127,21 @@
       "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",

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": []
 }

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\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"
     },
     {
       "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,6 +129,21 @@
       "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",

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",