@expokit/cli 0.0.0-stage → 0.3.0

package/registry/_docs/profile.json

@@ -0,0 +1,87 @@
+{
+  "name": "profile",
+  "category": "Blocks",
+  "aliases": [],
+  "exportName": "Profile",
+  "files": [
+    "src/components/blocks/profile.tsx"
+  ],
+  "summary": null,
+  "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."
+    ]
+  ],
+  "behavior": [],
+  "usage": null,
+  "examples": []
+}

package/registry/_docs/progress-steps.json

@@ -0,0 +1,116 @@
+{
+  "name": "progress-steps",
+  "category": "Navigation",
+  "aliases": [],
+  "exportName": "ProgressSteps",
+  "files": [
+    "src/components/ui/progress-steps.tsx"
+  ],
+  "summary": "Finished steps pop and draw a check while the line pours into the next one.",
+  "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)."
+    ]
+  ],
+  "behavior": [
+    [
+      "Motion",
+      "When current changes, the finished node pops and draws its check, the connector fills toward the next step and the new step lights up. The current step's ring pulses."
+    ],
+    [
+      "Touch",
+      "With onStepPress, steps become buttons that squish on press; pressableSteps='completed' limits taps to finished steps."
+    ],
+    [
+      "Haptics",
+      "A selection tick plays whenever current changes (haptics, on by default)."
+    ],
+    [
+      "Reduced motion",
+      "Steps move with a short timing instead of springs, the ring stops pulsing and the done node appears without the overshoot pop."
+    ],
+    [
+      "Screen readers",
+      "Each step reads like 'Step 2 of 4, Shipping, current'. The bar variant is a progressbar labelled 'Step N of M' with the step name."
+    ]
+  ],
+  "usage": "import { useState } from 'react';\nimport { ProgressSteps } from '@/components/ui/progress-steps';\n\nconst [step, setStep] = useState(1);\n<ProgressSteps steps={['Cart', 'Shipping', 'Payment', 'Review']} current={step} onStepPress={setStep} pressableSteps=\"completed\" />",
+  "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,152 @@
+{
+  "name": "progress",
+  "category": "Feedback",
+  "aliases": [],
+  "exportName": "Progress",
+  "files": [
+    "src/components/ui/progress.tsx"
+  ],
+  "summary": "A bar, ring or segments with a glowing head; finishing flashes and draws a check.",
+  "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."
+    ]
+  ],
+  "behavior": [
+    [
+      "Motion",
+      "The fill springs to each value with a glow riding its head, and the ring's percentage counts up. Reaching max flashes the fill and morphs the value into a drawn check."
+    ],
+    [
+      "Reduced motion",
+      "The completion flash, moving stripes and segment pop and pulse are skipped. The fill still springs and indeterminate loops still run."
+    ],
+    [
+      "Screen readers",
+      "A progressbar with your label and its min, max and current value. Indeterminate progress is marked busy."
+    ],
+    [
+      "Platforms",
+      "Transforms and opacity use the native driver; only the ring's SVG stroke and the check drawing use the JS driver."
+    ]
+  ],
+  "usage": "import { Progress } from '@/components/ui/progress';\n\n<Progress value={64} label=\"Uploading trip-to-lisbon.mov\" showValue />\n<Progress variant=\"circular\" value={64} />",
+  "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"
+    }
+  ]
+}

package/registry/_docs/radio-group.json

@@ -0,0 +1,112 @@
+{
+  "name": "radio-group",
+  "category": "Selection",
+  "aliases": [],
+  "exportName": "RadioGroup",
+  "files": [
+    "src/components/ui/radio-group.tsx"
+  ],
+  "summary": "The dot springs in with a ripple; cards light up and draw a check badge.",
+  "props": [
+    [
+      "options",
+      "{ value, label, description?, icon?, hint?, disabled? }[]",
+      "—",
+      "The choices. `hint` is trailing text such as a price."
+    ],
+    [
+      "value / onValueChange",
+      "string",
+      "—",
+      "Controlled selection (or use defaultValue)."
+    ],
+    [
+      "defaultValue",
+      "string",
+      "—",
+      "Initial selection when uncontrolled."
+    ],
+    [
+      "variant",
+      "\"default\" | \"card\" | \"segmented-list\"",
+      "\"default\"",
+      "Radio dots, selectable cards or a grouped list with ticks."
+    ],
+    [
+      "direction",
+      "\"vertical\" | \"horizontal\"",
+      "\"vertical\"",
+      "Stack or lay out side by side (cards share the width)."
+    ],
+    [
+      "accent",
+      "string",
+      "theme accent",
+      "Selected colour."
+    ],
+    [
+      "haptics",
+      "boolean",
+      "true",
+      "Selection tick on change."
+    ],
+    [
+      "disabled",
+      "boolean",
+      "false",
+      "Disable the whole group (or per option)."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the group container (the bordered card in the segmented-list variant)."
+    ]
+  ],
+  "behavior": [
+    [
+      "Touch",
+      "Rows squish on press in the default and card variants, and the default dot has extra hitSlop. Disabled options are dimmed and ignore taps."
+    ],
+    [
+      "Motion",
+      "The selected dot pops on a bouncy spring with a ripple ring. Cards tint their border and pop a self-drawing check; the list variant draws a tick."
+    ],
+    [
+      "Haptics",
+      "A selection tick plays on each change (haptics, on by default)."
+    ],
+    [
+      "Screen readers",
+      "The group is a radiogroup and each option a radio with checked and disabled state. Descriptions are read as hints."
+    ]
+  ],
+  "usage": "import { RadioGroup } from '@/components/ui/radio-group';\n\n<RadioGroup\n  defaultValue=\"standard\"\n  options={[\n    { value: 'standard', label: 'Standard shipping', description: '4–6 business days · Free' },\n    { value: 'express', label: 'Express', description: '1–2 business days · $9' },\n  ]}\n/>",
+  "examples": [
+    {
+      "name": "Default",
+      "title": "Default",
+      "code": "import { RadioGroup } from '@/components/ui/radio-group';\n\nexport default function Default() {\n  return (\n    <RadioGroup\n      defaultValue=\"standard\"\n      options={[\n        { value: 'standard', label: 'Standard shipping', description: '4–6 business days · Free' },\n        { value: 'express', label: 'Express', description: '1–2 business days · ₹99' },\n        { value: 'pickup', label: 'Pick up in store', description: 'Ready in 2 hours' },\n      ]}\n    />\n  );\n}\n"
+    },
+    {
+      "name": "Horizontal",
+      "title": "Horizontal",
+      "code": "import React, { useState } from 'react';\nimport { RadioGroup } from '@/components/ui/radio-group';\n\nexport default function Horizontal() {\n  const [size, setSize] = useState('m');\n  return (\n    <RadioGroup\n      direction=\"horizontal\"\n      value={size}\n      onValueChange={setSize}\n      accessibilityLabel=\"Cup size\"\n      options={[\n        { value: 's', label: 'Small' },\n        { value: 'm', label: 'Medium' },\n        { value: 'l', label: 'Large' },\n      ]}\n    />\n  );\n}\n"
+    },
+    {
+      "name": "Cards",
+      "title": "Cards",
+      "code": "import { RadioGroup } from '@/components/ui/radio-group';\n\nexport default function Cards() {\n  return (\n    <RadioGroup\n      variant=\"card\"\n      defaultValue=\"pro\"\n      options={[\n        { value: 'starter', label: 'Starter', description: 'For side projects', hint: '₹0' },\n        { value: 'pro', label: 'Pro', description: 'Unlimited projects, priority support', hint: '₹499/mo' },\n        { value: 'team', label: 'Team', description: 'Shared workspaces and SSO', hint: '₹1,499/mo' },\n      ]}\n    />\n  );\n}\n"
+    },
+    {
+      "name": "CardsHorizontal",
+      "title": "Cards Horizontal",
+      "code": "import { Text } from 'react-native';\nimport { RadioGroup } from '@/components/ui/radio-group';\n\nexport default function CardsHorizontal() {\n  return (\n    <RadioGroup\n      variant=\"card\"\n      direction=\"horizontal\"\n      defaultValue=\"card\"\n      options={[\n        { value: 'card', label: 'Card', description: 'Visa ·· 4242', icon: <Text style={{ fontSize: 20 }}>💳</Text> },\n        { value: 'wallet', label: 'Wallet', description: 'Apple Pay', icon: <Text style={{ fontSize: 20 }}>📱</Text> },\n      ]}\n    />\n  );\n}\n"
+    },
+    {
+      "name": "GroupedList",
+      "title": "Grouped List",
+      "code": "import { RadioGroup } from '@/components/ui/radio-group';\n\nexport default function GroupedList() {\n  return (\n    <RadioGroup\n      variant=\"segmented-list\"\n      defaultValue=\"system\"\n      accessibilityLabel=\"Appearance\"\n      options={[\n        { value: 'light', label: 'Light' },\n        { value: 'dark', label: 'Dark' },\n        { value: 'system', label: 'Automatic', description: 'Follows your device settings' },\n      ]}\n    />\n  );\n}\n"
+    }
+  ]
+}

package/registry/_docs/rating.json

@@ -0,0 +1,114 @@
+{
+  "name": "rating",
+  "category": "Selection",
+  "aliases": [],
+  "exportName": "Rating",
+  "files": [
+    "src/components/ui/rating.tsx"
+  ],
+  "summary": "Drag across the stars to rate; the top one throws a little spark burst.",
+  "props": [
+    [
+      "value / onValueChange",
+      "number",
+      "—",
+      "Controlled value (or use defaultValue)."
+    ],
+    [
+      "defaultValue",
+      "number",
+      "0",
+      "Initial value when uncontrolled."
+    ],
+    [
+      "max",
+      "number",
+      "5",
+      "Number of icons."
+    ],
+    [
+      "allowHalf",
+      "boolean",
+      "false",
+      "Half-icon precision when tapping or dragging."
+    ],
+    [
+      "readOnly",
+      "boolean",
+      "false",
+      "Display only; fractional values (4.3) fill partially."
+    ],
+    [
+      "clearable",
+      "boolean",
+      "false",
+      "Tap the current value again to reset to 0."
+    ],
+    [
+      "icon",
+      "\"star\" | \"heart\"",
+      "\"star\"",
+      "Star or heart icons; heart switches the default fill to danger."
+    ],
+    [
+      "size",
+      "\"sm\" | \"md\" | \"lg\" | number",
+      "\"md\"",
+      "18 / 28 / 40pt, or any number."
+    ],
+    [
+      "accent",
+      "string",
+      "warning / danger",
+      "Fill colour."
+    ],
+    [
+      "gap",
+      "number",
+      "20% of size",
+      "Space between icons."
+    ],
+    [
+      "haptics",
+      "boolean",
+      "true",
+      "Selection tick for every step while tapping or dragging."
+    ],
+    [
+      "disabled",
+      "boolean",
+      "false",
+      "Dims and blocks input."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the row of icons."
+    ]
+  ],
+  "behavior": [
+    [
+      "Touch",
+      "Tap or drag across the row to set the value, to half-icon precision with allowHalf. With clearable, tapping the current value clears it."
+    ],
+    [
+      "Motion",
+      "Icons fill smoothly and pop in a quick stagger with a wobble. When you raise the rating, the top icon throws a spark burst."
+    ],
+    [
+      "Haptics",
+      "A selection tick plays for every step while tapping or dragging."
+    ],
+    [
+      "Screen readers",
+      "One adjustable element read as 'N of 5'. Swipe up or down to change it by one step."
+    ],
+    [
+      "Web",
+      "Works with the mouse too, and shows a pointer cursor while interactive."
+    ]
+  ],
+  "usage": null,
+  "examples": []
+}