@expokit/cli 0.0.0-stage → 0.3.0

package/registry/_docs/slider.json

@@ -0,0 +1,177 @@
+{
+  "name": "slider",
+  "category": "Inputs",
+  "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",
+      "number | [number, number]",
+      "min / [min, max]",
+      "Controlled or uncontrolled. A number, or [from, to] when range is set (typed by the range prop)."
+    ],
+    [
+      "onValueChange",
+      "(value) => void",
+      "—",
+      "Fires when the stepped value changes (drag, tap, icon or accessibility action)."
+    ],
+    [
+      "onSlidingStart / onSlidingComplete",
+      "(value) => void",
+      "—",
+      "Drag lifecycle."
+    ],
+    [
+      "min / max / step",
+      "number",
+      "0 / 100 / 1",
+      "Bounds and snap interval (0 = continuous). Coarse steps spring between positions; fine ones follow the finger and snap on release."
+    ],
+    [
+      "range",
+      "boolean",
+      "false",
+      "Two thumbs selecting a span; value becomes [from, to]."
+    ],
+    [
+      "variant",
+      "\"default\" | \"bar\" | \"stepped\"",
+      "\"default\"",
+      "Thin track + round thumb, a tall Control-Center bar with no thumb, or a track with a tick at every step."
+    ],
+    [
+      "size",
+      "\"sm\" | \"md\" | \"lg\"",
+      "\"md\"",
+      "Scales track, thumb, bar height and text. Hit area is always ≥ 44pt."
+    ],
+    [
+      "marks",
+      "boolean | (number | { value, label })[]",
+      "stepped: true",
+      "Ticks at every step, or custom values with labels under the track."
+    ],
+    [
+      "showValue",
+      "\"drag\" | \"always\" | \"never\"",
+      "\"drag\" (bar: \"never\")",
+      "Value tooltip above the thumb. On a bar, \"always\" shows the value inside the bar instead."
+    ],
+    [
+      "formatValue",
+      "(value) => string",
+      "—",
+      "Text for the tooltip, labels and accessibility value."
+    ],
+    [
+      "showMinMax / minLabel / maxLabel",
+      "boolean / string / string",
+      "—",
+      "Labels under both ends of the track (formatted min / max by default)."
+    ],
+    [
+      "icon",
+      "SliderIconName | ReactNode | (color) => ReactNode",
+      "—",
+      "Bar only: icon inside the bar that changes colour as the fill passes over it."
+    ],
+    [
+      "leftIcon / rightIcon",
+      "SliderIconName | ReactNode | (color) => ReactNode",
+      "—",
+      "Icon beside the track. Built-ins ('volume-low', 'volume-high', 'volume-off', 'sun-low', 'sun-high', 'minus', 'plus') step the value when tapped."
+    ],
+    [
+      "thickFill",
+      "boolean",
+      "false",
+      "Default variant: draws the fill thicker than the track."
+    ],
+    [
+      "histogram / histogramHeight",
+      "number[] / number",
+      "— / 44",
+      "Bars above the track; bars inside the selection use the accent."
+    ],
+    [
+      "disabled",
+      "boolean",
+      "false",
+      "Dims and ignores touches."
+    ],
+    [
+      "accent",
+      "string",
+      "theme accent",
+      "Fill colour."
+    ],
+    [
+      "accessibilityLabel",
+      "string",
+      "—",
+      "Announced with the adjustable role; range thumbs get “minimum” / “maximum”."
+    ],
+    [
+      "style / trackStyle / fillStyle / thumbStyle / labelStyle",
+      "StyleProp",
+      "—",
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    }
+  ]
+}

package/registry/_docs/spin-wheel.json

@@ -0,0 +1,138 @@
+{
+  "name": "spin-wheel",
+  "category": "Coupons",
+  "aliases": [],
+  "exportName": "SpinWheel",
+  "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",
+      "{ label, sublabel?, color?, textColor?, weight? }[]",
+      "—",
+      "2–16 prizes, clockwise from the pointer. Long labels shrink or wrap to fit; weight sets the odds of a random pick (0 never wins at random)."
+    ],
+    [
+      "palette",
+      "string[]",
+      "vivid 8-colour set",
+      "Fills for segments without a color; the text picks black or white to read on each."
+    ],
+    [
+      "size",
+      "number",
+      "width, up to 340",
+      "Diameter in points."
+    ],
+    [
+      "turns",
+      "number",
+      "6",
+      "Full turns before it lands (a harder flick adds a few)."
+    ],
+    [
+      "duration",
+      "number",
+      "4200",
+      "Length of a spin in ms: a fast launch, a long slow crawl and a tiny settle."
+    ],
+    [
+      "getResult",
+      "() => number | Promise<number>",
+      "—",
+      "Decide the prize (e.g. on your server). The wheel keeps spinning while the promise is pending, then lands on it. Without it, weight picks at random."
+    ],
+    [
+      "onSpinStart",
+      "() => void",
+      "—",
+      "A spin began (tap, flick or ref)."
+    ],
+    [
+      "onSpinEnd",
+      "(index, segment) => void",
+      "—",
+      "The wheel landed; the winning wedge glows until the next spin."
+    ],
+    [
+      "onSpinError",
+      "(error) => void",
+      "—",
+      "getResult threw, rejected or gave an invalid index; the wheel coasts to a stop with no winner."
+    ],
+    [
+      "rimColor",
+      "string",
+      "\"#d9a62e\" (gold)",
+      "Metal of the rim, pins and dividers."
+    ],
+    [
+      "accent",
+      "string",
+      "theme accent",
+      "Hub button and pointer colour."
+    ],
+    [
+      "spinLabel",
+      "string",
+      "\"SPIN\"",
+      "Hub button label."
+    ],
+    [
+      "disabled",
+      "boolean",
+      "false",
+      "Ignore taps, flicks and ref.spin(); dims the hub and the lights."
+    ],
+    [
+      "haptics",
+      "boolean",
+      "true",
+      "A tick per divider, a tap on the hub and a success buzz on landing."
+    ],
+    [
+      "accessibilityLabel",
+      "string",
+      "\"Prize wheel\"",
+      "Screen-reader name; the prizes and the result are read after it, and the result is announced."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the root view (margins)."
+    ],
+    [
+      "ref",
+      "{ spin(index?): void; reset(): void }",
+      "—",
+      "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

@@ -0,0 +1,121 @@
+{
+  "name": "spinner",
+  "category": "Feedback",
+  "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\" | \"bars\" | \"pulse\" | \"orbit\" | \"bounce\" | \"wave\" | \"grid\" | \"typing\" | \"arc\" | \"square\" | \"line\"",
+      "\"ring\"",
+      "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. Every variant scales from it."
+    ],
+    [
+      "color",
+      "string",
+      "theme accent",
+      "Indicator colour."
+    ],
+    [
+      "speed",
+      "number",
+      "1",
+      "Speed multiplier."
+    ],
+    [
+      "label",
+      "string",
+      "\"Loading\"",
+      "Accessibility label; shown on screen when labelPosition is set."
+    ],
+    [
+      "labelPosition",
+      "\"none\" | \"right\" | \"bottom\"",
+      "\"none\"",
+      "Show the label beside or under the spinner, with an animated ellipsis."
+    ],
+    [
+      "track",
+      "boolean",
+      "false",
+      "Faint guide behind the motion: full circle (ring, orbit, arc), rail (line) or ghost bars (bars)."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "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, 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, 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, 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, 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, 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, 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"
+    }
+  ]
+}