@expokit/cli 0.0.0-stage → 0.3.0

package/registry/_docs/stepper.json

@@ -0,0 +1,184 @@
+{
+  "name": "stepper",
+  "category": "Inputs",
+  "aliases": [],
+  "exportName": "Stepper",
+  "files": [
+    "src/components/ui/stepper.tsx"
+  ],
+  "summary": "A quantity stepper whose digits roll up or down as the number changes.",
+  "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)."
+    ]
+  ],
+  "behavior": [
+    [
+      "Touch",
+      "Hold a button to keep stepping, speeding up as you hold. The cart variant opens from a single + into − 1 +, with a trash can at 1."
+    ],
+    [
+      "Motion",
+      "Each changed character slides out as the new one slides in; buttons spring on press and a press past min or max gives a small bump."
+    ],
+    [
+      "Screen readers",
+      "One adjustable element with min, max and the formatted value (suffix included), plus 'Increase' and 'Decrease' actions."
+    ]
+  ],
+  "usage": "import { useState } from 'react';\nimport { Stepper } from '@/components/ui/stepper';\n\nconst [guests, setGuests] = useState(2);\n<Stepper value={guests} onValueChange={setGuests} min={1} max={16} label=\"Guests\" />",
+  "examples": [
+    {
+      "name": "Cart",
+      "title": "Cart",
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { Stepper } from '@/components/ui/stepper';\nimport { useKit } from '@/lib/kit';\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        { backgroundColor: colors.card, borderColor: colors.border, borderWidth: StyleSheet.hairlineWidth, borderRadius: radius.xl, padding: 16, gap: 12 },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nconst eyebrow = { fontSize: 12, fontWeight: '400', letterSpacing: 0.6, textTransform: 'uppercase' } as const;\n\nconst money = (n: number) => {\n  const [int, frac] = n.toFixed(2).split('.');\n  return `₹${int.replace(/(\\d)(?=(\\d\\d)+\\d$)/g, '$1,')}${frac === '00' ? '' : `.${frac}`}`;\n};\n\nconst MENU = [\n  { key: 'bowl', emoji: '🥗', name: 'Harvest bowl', note: 'Kale, squash, tahini', price: 349 },\n  { key: 'ramen', emoji: '🍜', name: 'Miso ramen', note: 'Spicy · extra egg', price: 420 },\n  { key: 'mochi', emoji: '🍡', name: 'Mochi trio', note: 'Matcha, yuzu, sesame', price: 180 },\n];\n\nexport default function Cart() {\n  const { colors, radius } = useKit();\n  const [qty, setQty] = useState<Record<string, number>>({ bowl: 1, ramen: 2, mochi: 0 });\n  const total = MENU.reduce((sum, it) => sum + it.price * (qty[it.key] ?? 0), 0);\n  return (\n    <Card>\n      <Text style={[eyebrow, { color: colors.mutedForeground }]}>Your order</Text>\n      {MENU.map((it) => (\n        <View key={it.key} style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>\n          <View style={{ width: 44, height: 44, borderRadius: radius.scale(12), backgroundColor: colors.muted, alignItems: 'center', justifyContent: 'center' }}>\n            <Text style={{ fontSize: 22 }}>{it.emoji}</Text>\n          </View>\n          <View style={{ flex: 1 }}>\n            <Text style={{ fontSize: 15, fontWeight: '400', color: colors.foreground }}>{it.name}</Text>\n            <Text style={{ fontSize: 13, color: colors.mutedForeground }}>{money(it.price)} · {it.note}</Text>\n          </View>\n          <Stepper\n            variant=\"cart\"\n            size=\"sm\"\n            value={qty[it.key]}\n            onValueChange={(n) => setQty((q) => ({ ...q, [it.key]: n }))}\n            max={9}\n            accessibilityLabel={`${it.name} quantity`}\n          />\n        </View>\n      ))}\n      <View style={{ height: StyleSheet.hairlineWidth, backgroundColor: colors.border }} />\n      <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'baseline' }}>\n        <Text style={{ fontSize: 15, fontWeight: '400', color: colors.foreground }}>Subtotal</Text>\n        <Text style={{ fontSize: 18, fontWeight: '400', color: colors.foreground, fontVariant: ['tabular-nums'] }}>{money(total)}</Text>\n      </View>\n    </Card>\n  );\n}\n"
+    },
+    {
+      "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,118 @@
+{
+  "name": "swipe-deck",
+  "category": "3D",
+  "aliases": [],
+  "exportName": "SwipeDeck",
+  "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",
+      "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."
+    ]
+  ],
+  "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

@@ -0,0 +1,95 @@
+{
+  "name": "swipeable-row",
+  "category": "Display",
+  "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",
+      "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."
+    ]
+  ],
+  "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

@@ -0,0 +1,124 @@
+{
+  "name": "switch",
+  "category": "Selection",
+  "aliases": [],
+  "exportName": "Switch",
+  "files": [
+    "src/components/ui/switch.tsx"
+  ],
+  "summary": "A toggle whose thumb squashes and stretches toward the other side while held.",
+  "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."
+    ]
+  ],
+  "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",
+      "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"
+    }
+  ]
+}