@expokit/cli 0.0.0-stage → 0.2.0

package/registry/_docs/payment-card.json

@@ -0,0 +1,153 @@
+{
+  "name": "payment-card",
+  "category": "3D",
+  "aliases": [],
+  "exportName": "PaymentCard",
+  "files": [
+    "src/components/ui/payment-card.tsx"
+  ],
+  "props": [
+    [
+      "number",
+      "string",
+      "—",
+      "Card number (spaces ok). Masked to the last 4 unless masked={false}."
+    ],
+    [
+      "name",
+      "string",
+      "—",
+      "Cardholder name."
+    ],
+    [
+      "expiry",
+      "string",
+      "—",
+      "Expiry, e.g. \"09/29\"."
+    ],
+    [
+      "cvv",
+      "string",
+      "—",
+      "Shown on the back."
+    ],
+    [
+      "brand",
+      "\"visa\" | \"mastercard\" | \"amex\" | \"rupay\" | \"none\"",
+      "\"visa\"",
+      "Brand mark; Amex numbers group 4-6-5."
+    ],
+    [
+      "bank",
+      "string",
+      "—",
+      "Issuer name, top-left."
+    ],
+    [
+      "label",
+      "string",
+      "—",
+      "Small label top-right (\"Debit\", \"Platinum\")."
+    ],
+    [
+      "image",
+      "ImageSourcePropType",
+      "brushed graphite",
+      "Card art — a photo or texture (require() or { uri }). Soft, blurred photos look premium."
+    ],
+    [
+      "tone",
+      "\"light\" | \"dark\"",
+      "\"light\"",
+      "Light text for dark art, dark text for pale art."
+    ],
+    [
+      "chip",
+      "\"gold\" | \"silver\"",
+      "\"gold\"",
+      "EMV chip finish."
+    ],
+    [
+      "masked",
+      "boolean",
+      "true",
+      "Hide every digit but the last four (any card length)."
+    ],
+    [
+      "flipped",
+      "boolean",
+      "—",
+      "Controlled side (true = back)."
+    ],
+    [
+      "defaultFlipped",
+      "boolean",
+      "false",
+      "Uncontrolled initial side."
+    ],
+    [
+      "onFlip",
+      "(flipped: boolean) => void",
+      "—",
+      "Fires when tapped."
+    ],
+    [
+      "tilt",
+      "boolean",
+      "true",
+      "Tilt toward the finger."
+    ],
+    [
+      "flippable",
+      "boolean",
+      "true",
+      "Tap flips the card. false makes a still card (no tilt, no taps) for use inside something tappable, e.g. a CardStack; a controlled flipped still turns it."
+    ],
+    [
+      "frozen",
+      "boolean",
+      "false",
+      "Dim the card with a Frozen label and ignore taps."
+    ],
+    [
+      "radius",
+      "number",
+      "16",
+      "Corner radius — a real card's corner at phone size."
+    ],
+    [
+      "labels",
+      "{ cardholder?, validThru?, frozen?, legal?, back?, accessibility? }",
+      "English",
+      "Every built-in string, for translation ({bank} and {last4} are filled in)."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the root (width, margins)."
+    ]
+  ],
+  "examples": [
+    {
+      "name": "WalletScreen",
+      "title": "Wallet Screen",
+      "code": "import { Image, Pressable, Text, View } from 'react-native';\nimport { PaymentCard } from '@/components/ui/payment-card';\nimport { alpha, useKit } from '@/lib/kit';\n\n/** Soft, blurred photos make premium card art — any image works (`require()` or a URL). */\nconst art = (id: number) => ({ uri: `https://picsum.photos/id/${id}/240/151?blur=10` });\n\nexport default function WalletScreen() {\n  const { colors } = useKit();\n  const actions = [\n    ['↑', 'Send'],\n    ['↓', 'Request'],\n    ['+', 'Top up'],\n    ['⋯', 'More'],\n  ];\n  const activity = [\n    ['B', 'Blue Tokai Coffee', 'Today · 09:12', '−₹240'],\n    ['U', 'Uber', 'Yesterday · 21:40', '−₹386'],\n    ['S', 'Salary · Northwind Labs', 'Mon · 10:00', '+₹82,000'],\n  ];\n  return (\n    <View style={{ gap: 20 }}>\n      <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>\n        <View>\n          <Text style={{ color: colors.mutedForeground, fontSize: 13 }}>Total balance</Text>\n          <Text style={{ color: colors.foreground, fontSize: 30, fontWeight: '700', letterSpacing: -0.8, fontVariant: ['tabular-nums'] }}>₹1,24,580.20</Text>\n          <Text style={{ color: colors.success, fontSize: 12, fontWeight: '500' }}>+₹2,140 this week</Text>\n        </View>\n        <View style={{ width: 40, height: 40, borderRadius: 20, backgroundColor: colors.muted, alignItems: 'center', justifyContent: 'center' }}>\n          <Text style={{ color: colors.foreground, fontSize: 14, fontWeight: '700' }}>MP</Text>\n        </View>\n      </View>\n\n      <PaymentCard\n        image={art(189)}\n        bank=\"Northwind\"\n        label=\"World Elite\"\n        number=\"5412 7590 1234 0317\"\n        name=\"Maya Patel\"\n        expiry=\"09/29\"\n        cvv=\"482\"\n        brand=\"mastercard\"\n      />\n\n      <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>\n        {actions.map(([glyph, label]) => (\n          <View key={label} style={{ alignItems: 'center', gap: 6, width: 64 }}>\n            <View style={{ width: 52, height: 52, borderRadius: 26, backgroundColor: colors.muted, alignItems: 'center', justifyContent: 'center' }}>\n              <Text style={{ color: colors.foreground, fontSize: 20, fontWeight: '500' }}>{glyph}</Text>\n            </View>\n            <Text style={{ color: colors.mutedForeground, fontSize: 12 }}>{label}</Text>\n          </View>\n        ))}\n      </View>\n\n      <View>\n        <Text style={{ color: colors.foreground, fontSize: 16, fontWeight: '600', marginBottom: 4 }}>Recent activity</Text>\n        {activity.map(([initial, what, when, amount]) => (\n          <View key={what} style={{ flexDirection: 'row', alignItems: 'center', gap: 12, paddingVertical: 10 }}>\n            <View style={{ width: 38, height: 38, borderRadius: 12, backgroundColor: colors.muted, alignItems: 'center', justifyContent: 'center' }}>\n              <Text style={{ color: colors.foreground, fontSize: 14, fontWeight: '700' }}>{initial}</Text>\n            </View>\n            <View style={{ flex: 1 }}>\n              <Text style={{ color: colors.foreground, fontSize: 14, fontWeight: '500' }}>{what}</Text>\n              <Text style={{ color: colors.mutedForeground, fontSize: 12 }}>{when}</Text>\n            </View>\n            <Text style={{ color: amount.startsWith('+') ? colors.success : colors.foreground, fontSize: 14, fontWeight: '600', fontVariant: ['tabular-nums'] }}>{amount}</Text>\n          </View>\n        ))}\n      </View>\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "CardControls",
+      "title": "Card Controls",
+      "code": "import React, { useState } from 'react';\nimport { Image, Pressable, Text, View } from 'react-native';\nimport { PaymentCard } from '@/components/ui/payment-card';\nimport { alpha, useKit } from '@/lib/kit';\n\n/** Soft, blurred photos make premium card art — any image works (`require()` or a URL). */\nconst art = (id: number) => ({ uri: `https://picsum.photos/id/${id}/240/151?blur=10` });\n\n/** A screen title, as it sits above the card in your app. */\nfunction Header({ title, sub, right }: { title: string; sub?: string; right?: React.ReactNode }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>\n      <View style={{ flex: 1 }}>\n        <Text style={{ color: colors.foreground, fontSize: 22, fontWeight: '700', letterSpacing: -0.4 }}>{title}</Text>\n        {sub ? <Text style={{ color: colors.mutedForeground, fontSize: 13, marginTop: 2 }}>{sub}</Text> : null}\n      </View>\n      {right}\n    </View>\n  );\n}\n\nexport default function CardControls() {\n  const { colors } = useKit();\n  const [shown, setShown] = useState(false);\n  const [frozen, setFrozen] = useState(false);\n  const [flipped, setFlipped] = useState(false);\n  const row = (label: string, detail: string, value: boolean, onPress: () => void) => (\n    <Pressable\n      onPress={onPress}\n      accessibilityRole=\"switch\"\n      accessibilityState={{ checked: value }}\n      style={{ flexDirection: 'row', alignItems: 'center', gap: 12, paddingVertical: 12 }}\n    >\n      <View style={{ flex: 1 }}>\n        <Text style={{ color: colors.foreground, fontSize: 15, fontWeight: '500' }}>{label}</Text>\n        <Text style={{ color: colors.mutedForeground, fontSize: 12 }}>{detail}</Text>\n      </View>\n      <View style={{ width: 46, height: 28, borderRadius: 14, padding: 3, backgroundColor: value ? colors.success : alpha(colors.mutedForeground, 0.3) }}>\n        <View style={{ width: 22, height: 22, borderRadius: 11, backgroundColor: '#ffffff', alignSelf: value ? 'flex-end' : 'flex-start' }} />\n      </View>\n    </Pressable>\n  );\n  return (\n    <View style={{ gap: 14 }}>\n      <Header title=\"Manage card\" sub=\"Changes apply instantly\" />\n      <PaymentCard\n        image={art(888)}\n        bank=\"Northwind\"\n        label=\"Platinum\"\n        number=\"4821 7590 3321 7752\"\n        name=\"Maya Patel\"\n        expiry=\"11/28\"\n        cvv=\"219\"\n        brand=\"visa\"\n        chip=\"silver\"\n        masked={!shown}\n        frozen={frozen}\n        flipped={flipped}\n        onFlip={setFlipped}\n      />\n      <View>\n        {row('Show card number', 'Hidden again when you leave', shown, () => setShown((v) => !v))}\n        {row('Show CVV', 'Turns the card over', flipped, () => setFlipped((v) => !v))}\n        {row('Freeze card', 'Blocks new payments instantly', frozen, () => setFrozen((v) => !v))}\n      </View>\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "ChooseDesign",
+      "title": "Choose Design",
+      "code": "import React, { useState } from 'react';\nimport { Image, Pressable, Text, View } from 'react-native';\nimport { PaymentCard } from '@/components/ui/payment-card';\nimport { alpha, useKit } from '@/lib/kit';\n\n/** Soft, blurred photos make premium card art — any image works (`require()` or a URL). */\nconst art = (id: number) => ({ uri: `https://picsum.photos/id/${id}/240/151?blur=10` });\n\n/** A screen title, as it sits above the card in your app. */\nfunction Header({ title, sub, right }: { title: string; sub?: string; right?: React.ReactNode }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>\n      <View style={{ flex: 1 }}>\n        <Text style={{ color: colors.foreground, fontSize: 22, fontWeight: '700', letterSpacing: -0.4 }}>{title}</Text>\n        {sub ? <Text style={{ color: colors.mutedForeground, fontSize: 13, marginTop: 2 }}>{sub}</Text> : null}\n      </View>\n      {right}\n    </View>\n  );\n}\n\nconst DESIGNS = [\n  { key: 'meadow', image: art(189) },\n  { key: 'lagoon', image: art(846) },\n  { key: 'violet', image: art(888) },\n  { key: 'dusk', image: art(721) },\n  { key: 'night', image: art(765) },\n];\n\nexport default function ChooseDesign() {\n  const { colors } = useKit();\n  const [pick, setPick] = useState(0);\n  return (\n    <View style={{ gap: 16 }}>\n      <Header title=\"Pick your card\" sub=\"Your design ships in 3–5 days\" />\n      <PaymentCard\n        image={DESIGNS[pick].image}\n        bank=\"Northwind\"\n        label=\"Debit\"\n        number=\"6521 4400 9911 4410\"\n        name=\"Maya Patel\"\n        expiry=\"01/30\"\n        brand=\"rupay\"\n      />\n      <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>\n        {DESIGNS.map((d, i) => {\n          const on = i === pick;\n          return (\n            <Pressable\n              key={d.key}\n              onPress={() => setPick(i)}\n              accessibilityRole=\"radio\"\n              accessibilityLabel={d.key}\n              accessibilityState={{ selected: on }}\n              style={{ padding: 2, borderRadius: 10, borderWidth: 2, borderColor: on ? colors.foreground : 'transparent' }}\n            >\n              <Image alt=\"\" source={d.image} style={{ width: 52, height: 33, borderRadius: 6, backgroundColor: colors.muted }} />\n            </Pressable>\n          );\n        })}\n      </View>\n      <Pressable accessibilityRole=\"button\" style={{ alignItems: 'center', paddingVertical: 14, borderRadius: 14, backgroundColor: colors.primary, marginTop: 8 }}>\n        <Text style={{ color: colors.primaryForeground, fontSize: 15, fontWeight: '600' }}>Order this card</Text>\n      </Pressable>\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "AddCard",
+      "title": "Add Card",
+      "code": "import React, { useState } from 'react';\nimport { Image, Pressable, Text, View } from 'react-native';\nimport { PaymentCard } from '@/components/ui/payment-card';\nimport { alpha, useKit } from '@/lib/kit';\n\n/** A screen title, as it sits above the card in your app. */\nfunction Header({ title, sub, right }: { title: string; sub?: string; right?: React.ReactNode }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>\n      <View style={{ flex: 1 }}>\n        <Text style={{ color: colors.foreground, fontSize: 22, fontWeight: '700', letterSpacing: -0.4 }}>{title}</Text>\n        {sub ? <Text style={{ color: colors.mutedForeground, fontSize: 13, marginTop: 2 }}>{sub}</Text> : null}\n      </View>\n      {right}\n    </View>\n  );\n}\n\nexport default function AddCard() {\n  const { colors } = useKit();\n  const [digits, setDigits] = useState('4821');\n  const keys = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];\n  return (\n    <View style={{ gap: 16 }}>\n      <Header title=\"Add a card\" sub=\"Type the number on the front\" />\n      <PaymentCard bank=\"New card\" number={digits.padEnd(16, '•')} name=\"Your name\" expiry=\"MM/YY\" brand=\"visa\" chip=\"silver\" masked={false} />\n      <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8, justifyContent: 'center' }}>\n        {keys.map((k) => (\n          <Pressable\n            key={k}\n            onPress={() => setDigits((d) => (d.length >= 16 ? '4821' : d + k))}\n            accessibilityRole=\"button\"\n            style={{ width: 58, height: 46, borderRadius: 12, alignItems: 'center', justifyContent: 'center', backgroundColor: colors.muted }}\n          >\n            <Text style={{ color: colors.foreground, fontSize: 19, fontWeight: '500' }}>{k}</Text>\n          </Pressable>\n        ))}\n      </View>\n    </View>\n  );\n}\n"
+    }
+  ]
+}

package/registry/_docs/pixel-bar.json

@@ -0,0 +1,66 @@
+{
+  "name": "pixel-bar",
+  "category": "Charts",
+  "aliases": [],
+  "exportName": "PixelBarChart",
+  "files": [
+    "src/components/charts/pixel-bar.tsx"
+  ],
+  "props": [
+    [
+      "data",
+      "{ label, value, color? }[]",
+      "—",
+      "One block per category."
+    ],
+    [
+      "height",
+      "number",
+      "240",
+      "Chart height."
+    ],
+    [
+      "animate",
+      "boolean",
+      "true",
+      "Entrance animation."
+    ],
+    [
+      "isLoading",
+      "boolean",
+      "false",
+      "Skeleton state."
+    ],
+    [
+      "formatValue",
+      "(v) => string",
+      "compact",
+      "Value formatting."
+    ],
+    [
+      "onSelect",
+      "(item, index) => void",
+      "—",
+      "Tap callback."
+    ],
+    [
+      "levels",
+      "number",
+      "10",
+      "Squares per column."
+    ],
+    [
+      "gap",
+      "number",
+      "2",
+      "Gap between squares."
+    ],
+    [
+      "gradient",
+      "boolean",
+      "true",
+      "Fade colour upwards."
+    ]
+  ],
+  "examples": []
+}

package/registry/_docs/polar-area.json

@@ -0,0 +1,78 @@
+{
+  "name": "polar-area",
+  "category": "Charts",
+  "aliases": [],
+  "exportName": "PolarAreaChart",
+  "files": [
+    "src/components/charts/polar-area.tsx"
+  ],
+  "props": [
+    [
+      "data",
+      "Datum[]",
+      "—",
+      "Rows like [{ browser: \"chrome\", visitors: 275 }]."
+    ],
+    [
+      "nameKey / valueKey",
+      "string",
+      "\"name\" / \"value\"",
+      "Which keys hold the label and the number."
+    ],
+    [
+      "config",
+      "ChartConfig",
+      "—",
+      "Labels / colours keyed by name."
+    ],
+    [
+      "size",
+      "number",
+      "260",
+      "Diameter."
+    ],
+    [
+      "showLegend",
+      "boolean",
+      "false",
+      "Legend under the chart."
+    ],
+    [
+      "legendVariant",
+      "LegendVariant",
+      "\"rounded-square\"",
+      "Legend marker style."
+    ],
+    [
+      "glow",
+      "boolean | string[]",
+      "false",
+      "Glow every segment or only named ones."
+    ],
+    [
+      "isLoading",
+      "boolean",
+      "false",
+      "Skeleton state."
+    ],
+    [
+      "onSelect",
+      "(index, datum) => void",
+      "—",
+      "Selection callback."
+    ],
+    [
+      "padAngle",
+      "number (deg)",
+      "2",
+      "Gap between petals."
+    ],
+    [
+      "levels",
+      "number",
+      "4",
+      "Grid circles."
+    ]
+  ],
+  "examples": []
+}

package/registry/_docs/profile.json

@@ -0,0 +1,84 @@
+{
+  "name": "profile",
+  "category": "Blocks",
+  "aliases": [],
+  "exportName": "Profile",
+  "files": [
+    "src/components/blocks/profile.tsx"
+  ],
+  "props": [
+    [
+      "user",
+      "{ name, email?, phone?, avatar?, subtitle?, badge? }",
+      "Aarav Mehta",
+      "Who the account belongs to. subtitle is a muted line (e.g. 'Member since 2023'); badge shows a chip next to the name (e.g. 'Pro')."
+    ],
+    [
+      "stats",
+      "{ label, value, onPress? }[]",
+      "Orders / Wishlist / Reviews",
+      "Highlights strip under the header. Pass [] to hide."
+    ],
+    [
+      "details",
+      "{ key, label, value?, icon? }[]",
+      "Date of birth, Address",
+      "“Personal details” rows (name, email and phone already show in the header). Empty value shows a muted “Add”. Pass [] to hide."
+    ],
+    [
+      "sections",
+      "{ title?, items: { key, label, value?, icon?, badge?, destructive?, onPress? }[] }[]",
+      "Account, Preferences, Support",
+      "Grouped rows below the details. destructive rows are red with no chevron."
+    ],
+    [
+      "title",
+      "string",
+      "'Profile'",
+      "Header title."
+    ],
+    [
+      "onEditProfile",
+      "() => void",
+      "—",
+      "Shows a small 'Edit profile' pill under the contact details."
+    ],
+    [
+      "onAvatarPress",
+      "() => void",
+      "—",
+      "Makes the avatar pressable and adds a camera badge."
+    ],
+    [
+      "onRowPress",
+      "(key: string) => void",
+      "—",
+      "Any detail or section row was pressed (after the item's own onPress)."
+    ],
+    [
+      "onSignOut",
+      "() => void",
+      "—",
+      "The destructive 'Sign out' row at the end was pressed."
+    ],
+    [
+      "onBack",
+      "() => void",
+      "—",
+      "Shows a back button in the header."
+    ],
+    [
+      "accent",
+      "string",
+      "theme accent",
+      "Badge chip and pressed-state tint. Everything else stays monochrome."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Root style."
+    ]
+  ],
+  "examples": []
+}

package/registry/_docs/progress-steps.json

@@ -0,0 +1,92 @@
+{
+  "name": "progress-steps",
+  "category": "Navigation",
+  "aliases": [],
+  "exportName": "ProgressSteps",
+  "files": [
+    "src/components/ui/progress-steps.tsx"
+  ],
+  "props": [
+    [
+      "steps",
+      "(string | { label, description? })[]",
+      "—",
+      "Step labels with optional descriptions (vertical, and two short lines in horizontal)."
+    ],
+    [
+      "current",
+      "number",
+      "—",
+      "Active step index. Earlier steps are complete; steps.length marks all done."
+    ],
+    [
+      "errorStep",
+      "number",
+      "—",
+      "A failed step, drawn red with \"!\"."
+    ],
+    [
+      "variant",
+      "\"horizontal\" | \"vertical\" | \"bar\"",
+      "\"horizontal\"",
+      "Nodes with labels · vertical list with descriptions · compact header and segmented bar."
+    ],
+    [
+      "onStepPress",
+      "(index: number) => void",
+      "—",
+      "Makes steps tappable, e.g. to jump back."
+    ],
+    [
+      "pressableSteps",
+      "\"all\" | \"completed\"",
+      "\"all\"",
+      "Which steps onStepPress applies to; \"completed\" only lets people go back."
+    ],
+    [
+      "haptics",
+      "boolean",
+      "true",
+      "Selection tick whenever current changes."
+    ],
+    [
+      "accent",
+      "string",
+      "theme accent",
+      "Solid colour of completed steps, connectors and the current ring; halos and tracks are tints of it."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the step row / column (the bar container in the bar variant)."
+    ]
+  ],
+  "examples": [
+    {
+      "name": "Checkout",
+      "title": "Checkout",
+      "code": "import React, { useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { ProgressSteps } from '@/components/ui/progress-steps';\nimport { alpha, useKit } from '@/lib/kit';\n\nfunction Buttons({ step, max, set, last = 'Place order' }: { step: number; max: number; set: (n: number) => void; last?: string }) {\n  const { colors, radius } = useKit();\n  const done = step >= max;\n  return (\n    <View style={{ flexDirection: 'row', gap: 10 }}>\n      <Pressable\n        onPress={() => set(Math.max(0, step - 1))}\n        disabled={step === 0}\n        accessibilityRole=\"button\"\n        style={({ pressed }) => ({\n          flex: 1,\n          height: 48,\n          borderRadius: radius.capsule(48),\n          backgroundColor: alpha(colors.foreground, pressed ? 0.1 : 0.05),\n          alignItems: 'center',\n          justifyContent: 'center',\n          opacity: step === 0 ? 0.4 : 1,\n        })}\n      >\n        <Text style={{ fontSize: 15, color: colors.foreground }}>Back</Text>\n      </Pressable>\n      <Pressable\n        onPress={() => set(done ? 0 : step + 1)}\n        accessibilityRole=\"button\"\n        style={({ pressed }) => ({\n          flex: 1.5,\n          height: 48,\n          borderRadius: radius.capsule(48),\n          backgroundColor: colors.accent,\n          alignItems: 'center',\n          justifyContent: 'center',\n          transform: [{ scale: pressed ? 0.98 : 1 }],\n        })}\n      >\n        <Text style={{ fontSize: 15, color: colors.accentForeground }}>\n          {done ? 'Start over' : step === max - 1 ? last : 'Continue'}\n        </Text>\n      </Pressable>\n    </View>\n  );\n}\n\nexport default function Checkout() {\n  const { colors } = useKit();\n  const [step, setStep] = useState(1);\n  const copy = [\n    '2 items · ₹2,798',\n    'Delivering to 14 Rua das Flores, Lisbon',\n    'Visa ending 4242',\n    'Arrives Thursday, 16 October',\n  ];\n  return (\n    <View style={{ gap: 22 }}>\n      <ProgressSteps\n        steps={['Cart', 'Shipping', 'Payment', 'Review']}\n        current={step}\n        pressableSteps=\"completed\"\n        onStepPress={setStep}\n      />\n      <Text style={{ fontSize: 14, textAlign: 'center', color: colors.mutedForeground }}>\n        {step >= 4 ? 'Order #4821 placed — receipt sent to amelia@hart.studio' : copy[step]}\n      </Text>\n      <Buttons step={step} max={4} set={setStep} />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Onboarding",
+      "title": "Onboarding",
+      "code": "import React, { useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { ProgressSteps } from '@/components/ui/progress-steps';\nimport { alpha, useKit } from '@/lib/kit';\n\nfunction Buttons({ step, max, set, last = 'Place order' }: { step: number; max: number; set: (n: number) => void; last?: string }) {\n  const { colors, radius } = useKit();\n  const done = step >= max;\n  return (\n    <View style={{ flexDirection: 'row', gap: 10 }}>\n      <Pressable\n        onPress={() => set(Math.max(0, step - 1))}\n        disabled={step === 0}\n        accessibilityRole=\"button\"\n        style={({ pressed }) => ({\n          flex: 1,\n          height: 48,\n          borderRadius: radius.capsule(48),\n          backgroundColor: alpha(colors.foreground, pressed ? 0.1 : 0.05),\n          alignItems: 'center',\n          justifyContent: 'center',\n          opacity: step === 0 ? 0.4 : 1,\n        })}\n      >\n        <Text style={{ fontSize: 15, color: colors.foreground }}>Back</Text>\n      </Pressable>\n      <Pressable\n        onPress={() => set(done ? 0 : step + 1)}\n        accessibilityRole=\"button\"\n        style={({ pressed }) => ({\n          flex: 1.5,\n          height: 48,\n          borderRadius: radius.capsule(48),\n          backgroundColor: colors.accent,\n          alignItems: 'center',\n          justifyContent: 'center',\n          transform: [{ scale: pressed ? 0.98 : 1 }],\n        })}\n      >\n        <Text style={{ fontSize: 15, color: colors.accentForeground }}>\n          {done ? 'Start over' : step === max - 1 ? last : 'Continue'}\n        </Text>\n      </Pressable>\n    </View>\n  );\n}\n\nexport default function Onboarding() {\n  const [step, setStep] = useState(2);\n  return (\n    <View style={{ gap: 20 }}>\n      <ProgressSteps\n        variant=\"vertical\"\n        current={step}\n        pressableSteps=\"completed\"\n        onStepPress={setStep}\n        steps={[\n          { label: 'Create your account', description: 'Signed up with amelia@hart.studio' },\n          { label: 'Verify your email', description: 'Confirmed with a 6-digit code.' },\n          { label: 'Connect your bank', description: 'Read-only access. You can disconnect any time.' },\n          { label: 'Set your first budget', description: 'Pick categories and a monthly limit.' },\n        ]}\n      />\n      <Buttons step={step} max={4} set={setStep} last=\"Finish setup\" />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Compact",
+      "title": "Compact",
+      "code": "import React, { useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { ProgressSteps } from '@/components/ui/progress-steps';\nimport { alpha, useKit } from '@/lib/kit';\n\nfunction Buttons({ step, max, set, last = 'Place order' }: { step: number; max: number; set: (n: number) => void; last?: string }) {\n  const { colors, radius } = useKit();\n  const done = step >= max;\n  return (\n    <View style={{ flexDirection: 'row', gap: 10 }}>\n      <Pressable\n        onPress={() => set(Math.max(0, step - 1))}\n        disabled={step === 0}\n        accessibilityRole=\"button\"\n        style={({ pressed }) => ({\n          flex: 1,\n          height: 48,\n          borderRadius: radius.capsule(48),\n          backgroundColor: alpha(colors.foreground, pressed ? 0.1 : 0.05),\n          alignItems: 'center',\n          justifyContent: 'center',\n          opacity: step === 0 ? 0.4 : 1,\n        })}\n      >\n        <Text style={{ fontSize: 15, color: colors.foreground }}>Back</Text>\n      </Pressable>\n      <Pressable\n        onPress={() => set(done ? 0 : step + 1)}\n        accessibilityRole=\"button\"\n        style={({ pressed }) => ({\n          flex: 1.5,\n          height: 48,\n          borderRadius: radius.capsule(48),\n          backgroundColor: colors.accent,\n          alignItems: 'center',\n          justifyContent: 'center',\n          transform: [{ scale: pressed ? 0.98 : 1 }],\n        })}\n      >\n        <Text style={{ fontSize: 15, color: colors.accentForeground }}>\n          {done ? 'Start over' : step === max - 1 ? last : 'Continue'}\n        </Text>\n      </Pressable>\n    </View>\n  );\n}\n\nexport default function Compact() {\n  const [step, setStep] = useState(1);\n  return (\n    <View style={{ gap: 20 }}>\n      <ProgressSteps variant=\"bar\" steps={['Shipping address', 'Delivery options', 'Payment', 'Review order']} current={step} />\n      <Buttons step={step} max={4} set={setStep} />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "WithDescriptions",
+      "title": "With Descriptions",
+      "code": "import React, { useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { ProgressSteps } from '@/components/ui/progress-steps';\nimport { alpha, useKit } from '@/lib/kit';\n\nfunction Buttons({ step, max, set, last = 'Place order' }: { step: number; max: number; set: (n: number) => void; last?: string }) {\n  const { colors, radius } = useKit();\n  const done = step >= max;\n  return (\n    <View style={{ flexDirection: 'row', gap: 10 }}>\n      <Pressable\n        onPress={() => set(Math.max(0, step - 1))}\n        disabled={step === 0}\n        accessibilityRole=\"button\"\n        style={({ pressed }) => ({\n          flex: 1,\n          height: 48,\n          borderRadius: radius.capsule(48),\n          backgroundColor: alpha(colors.foreground, pressed ? 0.1 : 0.05),\n          alignItems: 'center',\n          justifyContent: 'center',\n          opacity: step === 0 ? 0.4 : 1,\n        })}\n      >\n        <Text style={{ fontSize: 15, color: colors.foreground }}>Back</Text>\n      </Pressable>\n      <Pressable\n        onPress={() => set(done ? 0 : step + 1)}\n        accessibilityRole=\"button\"\n        style={({ pressed }) => ({\n          flex: 1.5,\n          height: 48,\n          borderRadius: radius.capsule(48),\n          backgroundColor: colors.accent,\n          alignItems: 'center',\n          justifyContent: 'center',\n          transform: [{ scale: pressed ? 0.98 : 1 }],\n        })}\n      >\n        <Text style={{ fontSize: 15, color: colors.accentForeground }}>\n          {done ? 'Start over' : step === max - 1 ? last : 'Continue'}\n        </Text>\n      </Pressable>\n    </View>\n  );\n}\n\nexport default function WithDescriptions() {\n  const [step, setStep] = useState(1);\n  return (\n    <View style={{ gap: 22 }}>\n      <ProgressSteps\n        current={step}\n        steps={[\n          { label: 'Profile', description: 'Name, photo' },\n          { label: 'Workspace', description: 'Invite team' },\n          { label: 'Plan', description: 'Free or Pro' },\n        ]}\n      />\n      <Buttons step={step} max={3} set={setStep} last=\"Create workspace\" />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "WithError",
+      "title": "With Error",
+      "code": "import { Pressable, Text, View } from 'react-native';\nimport { ProgressSteps } from '@/components/ui/progress-steps';\nimport { alpha, useKit } from '@/lib/kit';\n\nexport default function WithError() {\n  const { colors } = useKit();\n  return (\n    <View style={{ gap: 14 }}>\n      <ProgressSteps steps={['Upload', 'Verify', 'Approve', 'Publish']} current={1} errorStep={1} />\n      <Text style={{ fontSize: 13, lineHeight: 18, color: colors.mutedForeground, textAlign: 'center' }}>\n        ID photo was blurry — retake it to continue.\n      </Text>\n    </View>\n  );\n}\n"
+    }
+  ]
+}

package/registry/_docs/progress.json

@@ -0,0 +1,132 @@
+{
+  "name": "progress",
+  "category": "Feedback",
+  "aliases": [],
+  "exportName": "Progress",
+  "files": [
+    "src/components/ui/progress.tsx"
+  ],
+  "props": [
+    [
+      "variant",
+      "\"linear\" | \"circular\" | \"steps\"",
+      "\"linear\"",
+      "Horizontal bar, circular ring, or a row of segments."
+    ],
+    [
+      "value",
+      "number",
+      "—",
+      "0 → max (completed steps for steps). Omit for indeterminate."
+    ],
+    [
+      "max",
+      "number",
+      "100 (steps: steps)",
+      "Upper bound."
+    ],
+    [
+      "indeterminate",
+      "boolean",
+      "false",
+      "Comet sweep on the bar, spinning arc on the ring."
+    ],
+    [
+      "steps",
+      "number",
+      "4",
+      "Segment count for the steps variant."
+    ],
+    [
+      "size",
+      "\"sm\" | \"md\" | \"lg\"",
+      "\"md\"",
+      "Bar 4 / 8 / 12pt, ring 44 / 72 / 112pt."
+    ],
+    [
+      "color",
+      "string",
+      "theme accent",
+      "Fill colour (solid); the track, glow and pulse are tints of it."
+    ],
+    [
+      "trackColor",
+      "string",
+      "subtle foreground",
+      "Track colour."
+    ],
+    [
+      "label",
+      "string",
+      "—",
+      "Caption above the bar or under the ring."
+    ],
+    [
+      "showValue",
+      "boolean",
+      "ring: true",
+      "Show the percentage (a drawn check once complete)."
+    ],
+    [
+      "formatValue",
+      "(value, max) => string",
+      "—",
+      "Custom value text (e.g. \"3 of 5\")."
+    ],
+    [
+      "celebrate",
+      "boolean",
+      "true",
+      "At max, flash the fill and turn the value into a drawn check."
+    ],
+    [
+      "striped",
+      "boolean",
+      "false",
+      "Animated diagonal stripes on the linear fill for processing states."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the root view of the bar, ring or step row."
+    ]
+  ],
+  "examples": [
+    {
+      "name": "Linear",
+      "title": "Linear",
+      "code": "import React, { useEffect, useState } from 'react';\nimport { Text, View } from 'react-native';\nimport { Button } from '@/components/ui/button';\nimport { Progress } from '@/components/ui/progress';\n\nexport default function Linear() {\n  const [value, setValue] = useState(32);\n  return (\n    <View style={{ gap: 18 }}>\n      <Progress value={value} label=\"Uploading trip-to-lisbon.mov\" showValue />\n      <Progress value={value} size=\"sm\" />\n      <Progress value={value} size=\"lg\" />\n      <View style={{ flexDirection: 'row', gap: 10 }}>\n        <Button size=\"sm\" variant=\"outline\" onPress={() => setValue((v) => Math.max(0, v - 20))}>\n          − 20\n        </Button>\n        <Button size=\"sm\" variant=\"outline\" onPress={() => setValue((v) => Math.min(100, v + 20))}>\n          + 20\n        </Button>\n      </View>\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Download",
+      "title": "Download",
+      "code": "import React, { useEffect, useState } from 'react';\nimport { Text, View } from 'react-native';\nimport { Progress } from '@/components/ui/progress';\nimport { useKit } from '@/lib/kit';\n\nexport default function Download() {\n  const { colors } = useKit();\n  const [mb, setMb] = useState(6);\n  useEffect(() => {\n    const id = setInterval(() => setMb((v) => (v >= 48 ? 0 : Math.min(48, v + 3.4))), 700);\n    return () => clearInterval(id);\n  }, []);\n  return (\n    <View style={{ gap: 6 }}>\n      <Progress\n        value={mb}\n        max={48}\n        label=\"Offline maps · Portugal\"\n        showValue\n        formatValue={(v, max) => `${v.toFixed(1)} of ${max} MB`}\n      />\n      <Text style={{ fontSize: 12, color: colors.mutedForeground }}>\n        {mb >= 48 ? 'Ready to use offline' : `4.8 MB/s · about ${Math.ceil((48 - mb) / 4.8)} s left`}\n      </Text>\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Completion",
+      "title": "Completion",
+      "code": "import React, { useEffect, useState } from 'react';\nimport { Text, View } from 'react-native';\nimport { Button } from '@/components/ui/button';\nimport { Progress } from '@/components/ui/progress';\n\nexport default function Completion() {\n  const [value, setValue] = useState(0);\n  useEffect(() => {\n    if (value >= 100) return;\n    const id = setTimeout(() => setValue((v) => Math.min(100, v + 12 + Math.round(Math.random() * 10))), 450);\n    return () => clearTimeout(id);\n  }, [value]);\n  return (\n    <View style={{ gap: 18 }}>\n      <Progress value={value} label={value >= 100 ? 'Backup complete' : 'Backing up photos'} showValue />\n      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 16 }}>\n        <Progress variant=\"circular\" size=\"md\" value={value} />\n        <Button size=\"sm\" variant=\"outline\" onPress={() => setValue(0)}>\n          Run again\n        </Button>\n      </View>\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Indeterminate",
+      "title": "Indeterminate",
+      "code": "import { Text, View } from 'react-native';\nimport { Progress } from '@/components/ui/progress';\n\nexport default function Indeterminate() {\n  return (\n    <View style={{ gap: 18 }}>\n      <Progress indeterminate label=\"Connecting to Wi‑Fi printer\" />\n      <Progress value={64} striped label=\"Compressing video\" showValue />\n      <Progress indeterminate size=\"sm\" />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Spinning",
+      "title": "Spinning",
+      "code": "import { Text, View } from 'react-native';\nimport { Progress } from '@/components/ui/progress';\n\nexport default function Spinning() {\n  return (\n    <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>\n      <Progress variant=\"circular\" size=\"sm\" indeterminate />\n      <Progress variant=\"circular\" size=\"md\" indeterminate label=\"Restoring backup\" />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Circular",
+      "title": "Circular",
+      "code": "import React, { useEffect, useState } from 'react';\nimport { Text, View } from 'react-native';\nimport { Progress } from '@/components/ui/progress';\n\nexport default function Circular() {\n  const [value, setValue] = useState(0);\n  useEffect(() => {\n    const id = setInterval(() => setValue((v) => (v >= 100 ? 0 : v + 25)), 1600);\n    return () => clearInterval(id);\n  }, []);\n  return (\n    <View style={{ flexDirection: 'row', alignItems: 'flex-end', justifyContent: 'space-around' }}>\n      <Progress variant=\"circular\" size=\"sm\" value={value} />\n      <Progress variant=\"circular\" size=\"md\" value={72} label=\"iCloud storage\" />\n      <Progress variant=\"circular\" size=\"lg\" value={value} label=\"Move goal\" />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Steps",
+      "title": "Steps",
+      "code": "import React, { useEffect, useState } from 'react';\nimport { Text, View } from 'react-native';\nimport { Button } from '@/components/ui/button';\nimport { Progress } from '@/components/ui/progress';\n\nexport default function Steps() {\n  const [step, setStep] = useState(2);\n  return (\n    <View style={{ gap: 16 }}>\n      <Progress\n        variant=\"steps\"\n        steps={5}\n        value={step}\n        label={step >= 5 ? 'Profile ready' : 'Set up your profile'}\n        showValue\n        formatValue={(v, max) => `Step ${Math.min(max, v + 1)} of ${max}`}\n      />\n      <View style={{ flexDirection: 'row', gap: 10 }}>\n        <Button size=\"sm\" variant=\"outline\" onPress={() => setStep((s) => Math.max(0, s - 1))}>\n          Back\n        </Button>\n        <Button size=\"sm\" variant=\"accent\" onPress={() => setStep((s) => Math.min(5, s + 1))}>\n          Continue\n        </Button>\n      </View>\n    </View>\n  );\n}\n"
+    }
+  ]
+}