@expokit/cli 0.0.0-stage → 0.2.0

package/registry/_docs/spin-wheel.json

@@ -0,0 +1,114 @@
+{
+  "name": "spin-wheel",
+  "category": "Coupons",
+  "aliases": [],
+  "exportName": "SpinWheel",
+  "files": [
+    "src/components/ui/spin-wheel.tsx"
+  ],
+  "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."
+    ]
+  ],
+  "examples": []
+}

package/registry/_docs/spinner.json

@@ -0,0 +1,91 @@
+{
+  "name": "spinner",
+  "category": "Feedback",
+  "aliases": [],
+  "exportName": "Spinner",
+  "files": [
+    "src/components/ui/spinner.tsx"
+  ],
+  "props": [
+    [
+      "variant",
+      "\"ring\" | \"dots\"",
+      "\"ring\"",
+      "Indicator style."
+    ],
+    [
+      "size",
+      "\"sm\" | \"md\" | \"lg\" | \"xl\" | number",
+      "\"md\"",
+      "16 / 24 / 36 / 52pt, or any number."
+    ],
+    [
+      "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 full circle behind the ring."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the root view (the square, or the spinner + label row/column)."
+    ]
+  ],
+  "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    }
+  ]
+}

package/registry/_docs/stepper.json

@@ -0,0 +1,168 @@
+{
+  "name": "stepper",
+  "category": "Inputs",
+  "aliases": [],
+  "exportName": "Stepper",
+  "files": [
+    "src/components/ui/stepper.tsx"
+  ],
+  "props": [
+    [
+      "value / defaultValue",
+      "number",
+      "min or 0",
+      "Controlled or uncontrolled value."
+    ],
+    [
+      "onValueChange",
+      "(value) => void",
+      "—",
+      "Called on every step."
+    ],
+    [
+      "min / max",
+      "number",
+      "0 / ∞",
+      "Limits; the matching button dims and a press past it bumps the number."
+    ],
+    [
+      "step",
+      "number",
+      "1",
+      "Increment (decimals are respected, e.g. 0.5)."
+    ],
+    [
+      "variant",
+      "\"outline\" | \"filled\" | \"cart\" | \"compact\"",
+      "\"outline\"",
+      "Round outlined buttons, one tinted capsule, an accent cart button that collapses to + at 0, or small tinted buttons. Old names still work: default → outline, pill / segmented → filled, vertical → filled + vertical."
+    ],
+    [
+      "size",
+      "\"sm\" | \"md\" | \"lg\"",
+      "\"md\"",
+      "32 / 36 / 44pt buttons (touch area always ≥ 44pt); the number and icons scale too. compact is always 28pt."
+    ],
+    [
+      "orientation",
+      "\"horizontal\" | \"vertical\"",
+      "\"horizontal\"",
+      "Stack + / number / − (outline, filled, compact)."
+    ],
+    [
+      "format",
+      "(value) => string",
+      "—",
+      "Display format, e.g. currency; every changed character rolls."
+    ],
+    [
+      "suffix",
+      "string | (value) => string",
+      "—",
+      "Muted unit after the number: \"kg\", or (n) => n === 1 ? \"night\" : \"nights\"."
+    ],
+    [
+      "addLabel",
+      "string",
+      "—",
+      "cart: text beside the + while collapsed, e.g. \"Add\"."
+    ],
+    [
+      "repeat",
+      "boolean",
+      "true",
+      "Hold to keep stepping, speeding up."
+    ],
+    [
+      "label",
+      "string",
+      "—",
+      "Title on the left; the control moves to the right edge."
+    ],
+    [
+      "description",
+      "string",
+      "—",
+      "Muted line under the label."
+    ],
+    [
+      "disabled",
+      "boolean",
+      "false",
+      "Dims and blocks the control."
+    ],
+    [
+      "accent",
+      "string",
+      "theme accent",
+      "Icons (filled, compact), press tint (outline), fill (cart)."
+    ],
+    [
+      "iconColor",
+      "string",
+      "—",
+      "Overrides the − / + icon colour."
+    ],
+    [
+      "accessibilityLabel",
+      "string",
+      "label",
+      "Read by screen readers; the control is adjustable (swipe up / down)."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "The control, or the whole row when label / description is set."
+    ],
+    [
+      "buttonStyle",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Applied to each − / + button."
+    ],
+    [
+      "valueStyle",
+      "StyleProp<TextStyle>",
+      "—",
+      "Applied to the number (fontSize, colour, weight)."
+    ]
+  ],
+  "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    }
+  ]
+}

package/registry/_docs/swipe-deck.json

@@ -0,0 +1,102 @@
+{
+  "name": "swipe-deck",
+  "category": "3D",
+  "aliases": [],
+  "exportName": "SwipeDeck",
+  "files": [
+    "src/components/ui/swipe-deck.tsx"
+  ],
+  "props": [
+    [
+      "data",
+      "T[]",
+      "—",
+      "Items, one card each (top first)."
+    ],
+    [
+      "renderItem",
+      "(item: T, index: number) => ReactNode",
+      "—",
+      "Render a card."
+    ],
+    [
+      "keyExtractor",
+      "(item: T, index: number) => string",
+      "index",
+      "React key for each card."
+    ],
+    [
+      "height",
+      "number",
+      "380",
+      "Card height."
+    ],
+    [
+      "onSwipe",
+      "(direction, item, index) => void",
+      "—",
+      "Fires when a card leaves, with \"left\" or \"right\"."
+    ],
+    [
+      "index / onIndexChange",
+      "number / (index) => void",
+      "— / —",
+      "Controlled top card; a fresh batch (first key changed) starts from the top on its own."
+    ],
+    [
+      "disabled",
+      "boolean",
+      "false",
+      "Swiping off (e.g. out of likes)."
+    ],
+    [
+      "onEmpty",
+      "() => void",
+      "—",
+      "Fires once every card is gone."
+    ],
+    [
+      "renderEmpty",
+      "() => ReactNode",
+      "—",
+      "Shown when the deck is empty."
+    ],
+    [
+      "rightLabel / leftLabel",
+      "string | null",
+      "\"LIKE\" / \"NOPE\"",
+      "Stamp shown while dragging; null hides it."
+    ],
+    [
+      "rightColor / leftColor",
+      "string",
+      "theme success / danger",
+      "Stamp colours."
+    ],
+    [
+      "stack",
+      "number",
+      "2",
+      "Cards visible behind the top one."
+    ],
+    [
+      "radius",
+      "number",
+      "24",
+      "Corner radius of each card."
+    ],
+    [
+      "ref",
+      "{ swipe(direction), undo() }",
+      "—",
+      "Throw the top card from a button, or bring the last one back; reset() starts again from the first card."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the root view."
+    ]
+  ],
+  "examples": []
+}

package/registry/_docs/swipeable-row.json

@@ -0,0 +1,72 @@
+{
+  "name": "swipeable-row",
+  "category": "Display",
+  "aliases": [],
+  "exportName": "SwipeableRow",
+  "files": [
+    "src/components/ui/swipeable-row.tsx"
+  ],
+  "props": [
+    [
+      "leftActions",
+      "SwipeAction[]",
+      "[]",
+      "Revealed by swiping right; the first is the edge (full-swipe) action."
+    ],
+    [
+      "rightActions",
+      "SwipeAction[]",
+      "[]",
+      "Revealed by swiping left; the last is the edge (full-swipe) action."
+    ],
+    [
+      "SwipeAction",
+      "{ label, color, icon?, onPress?, destructive? }",
+      "—",
+      "destructive collapses the row before calling onPress."
+    ],
+    [
+      "actionWidth",
+      "number",
+      "76",
+      "Width of each action when resting open."
+    ],
+    [
+      "fullSwipe",
+      "boolean",
+      "true",
+      "Swiping past half the row fires the edge action."
+    ],
+    [
+      "closeOnActionPress",
+      "boolean",
+      "true",
+      "Spring closed after an action is tapped."
+    ],
+    [
+      "onOpen / onClose",
+      "(side) => void / () => void",
+      "—",
+      "Open state callbacks."
+    ],
+    [
+      "disabled",
+      "boolean",
+      "false",
+      "Turns swiping off."
+    ],
+    [
+      "contentStyle",
+      "StyleProp<ViewStyle>",
+      "theme background",
+      "Style of the sliding foreground — keep its background opaque."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the outer row that holds the actions behind the sliding content."
+    ]
+  ],
+  "examples": []
+}

package/registry/_docs/switch.json

@@ -0,0 +1,104 @@
+{
+  "name": "switch",
+  "category": "Selection",
+  "aliases": [],
+  "exportName": "Switch",
+  "files": [
+    "src/components/ui/switch.tsx"
+  ],
+  "props": [
+    [
+      "value / onValueChange",
+      "boolean",
+      "—",
+      "Controlled state (or use defaultValue)."
+    ],
+    [
+      "defaultValue",
+      "boolean",
+      "false",
+      "Initial state when uncontrolled."
+    ],
+    [
+      "variant",
+      "\"ios\" | \"material\" | \"icon\"",
+      "\"ios\"",
+      "Look of the track and thumb."
+    ],
+    [
+      "size",
+      "\"sm\" | \"md\" | \"lg\"",
+      "\"md\"",
+      "24 / 31 / 38pt tall."
+    ],
+    [
+      "icon",
+      "\"theme\" | \"check\"",
+      "\"theme\"",
+      "Sun / moon or ✕ / check inside the thumb (variant=\"icon\")."
+    ],
+    [
+      "label",
+      "string",
+      "—",
+      "Turns it into a settings row with the switch on the right."
+    ],
+    [
+      "description",
+      "string",
+      "—",
+      "Secondary line under the label."
+    ],
+    [
+      "accent",
+      "string",
+      "theme accent",
+      "Track colour when on."
+    ],
+    [
+      "haptics",
+      "boolean",
+      "true",
+      "Light tap when it flips."
+    ],
+    [
+      "disabled",
+      "boolean",
+      "false",
+      "Dims and blocks presses."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the pressable — the switch itself, or the whole settings row when label is set."
+    ]
+  ],
+  "examples": [
+    {
+      "name": "IOS",
+      "title": "IOS",
+      "code": "import { View } from 'react-native';\nimport { Switch } from '@/components/ui/switch';\n\nexport default function IOS() {\n  return (\n    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 20 }}>\n      <Switch defaultValue />\n      <Switch />\n      <Switch defaultValue accent=\"#22c55e\" />\n      <Switch defaultValue disabled />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Material",
+      "title": "Material",
+      "code": "import { View } from 'react-native';\nimport { Switch } from '@/components/ui/switch';\n\nexport default function Material() {\n  return (\n    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 20 }}>\n      <Switch variant=\"material\" defaultValue />\n      <Switch variant=\"material\" />\n      <Switch variant=\"material\" defaultValue />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Icons",
+      "title": "Icons",
+      "code": "import React, { useState } from 'react';\nimport { View } from 'react-native';\nimport { Switch } from '@/components/ui/switch';\n\nexport default function Icons() {\n  const [dark, setDark] = useState(false);\n  return (\n    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 16 }}>\n      <Switch variant=\"icon\" size=\"lg\" value={dark} onValueChange={setDark} accessibilityLabel=\"Dark mode\" />\n      <Switch variant=\"icon\" icon=\"check\" defaultValue accessibilityLabel=\"Auto-save\" />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "SettingsRows",
+      "title": "Settings Rows",
+      "code": "import { View } from 'react-native';\nimport { Switch } from '@/components/ui/switch';\nimport { useKit } from '@/lib/kit';\n\nexport default function SettingsRows() {\n  const { colors, radius } = useKit();\n  const rows = [\n    { label: 'Push notifications', description: 'Replies, mentions and direct messages.', on: true },\n    { label: 'Weekly digest', description: \"A summary of your team's activity every Monday.\" },\n    { label: 'Share usage data', description: 'Managed by your organisation.', disabled: true },\n  ];\n  return (\n    <View style={{ borderRadius: radius.lg, borderWidth: 1, borderColor: colors.border, backgroundColor: colors.card, overflow: 'hidden' }}>\n      {rows.map((r, i) => (\n        <Switch\n          key={r.label}\n          label={r.label}\n          description={r.description}\n          defaultValue={r.on}\n          disabled={r.disabled}\n          style={{ paddingHorizontal: 16, paddingVertical: 12, borderTopWidth: i ? 1 : 0, borderColor: colors.border }}\n        />\n      ))}\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Sizes",
+      "title": "Sizes",
+      "code": "import { View } from 'react-native';\nimport { Switch } from '@/components/ui/switch';\n\nexport default function Sizes() {\n  return (\n    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 20 }}>\n      <Switch size=\"sm\" defaultValue />\n      <Switch size=\"md\" defaultValue />\n      <Switch size=\"lg\" defaultValue />\n    </View>\n  );\n}\n"
+    }
+  ]
+}