@expokit/cli 0.0.0-stage → 0.3.0

package/registry/_docs/parallax-scroll.json

@@ -0,0 +1,210 @@
+{
+  "name": "parallax-scroll",
+  "category": "3D",
+  "aliases": [],
+  "exportName": "ParallaxScrollView",
+  "files": [
+    "src/components/ui/parallax-scroll.tsx"
+  ],
+  "summary": "A photo header glides slower than the content, then a title bar fades in.",
+  "props": [
+    [
+      "children",
+      "ReactNode",
+      "—",
+      "The screen's content, under the header."
+    ],
+    [
+      "header",
+      "ReactNode",
+      "—",
+      "Fills the header area: a photo, a map, a gallery (wins over headerImage)."
+    ],
+    [
+      "headerImage",
+      "ImageSourcePropType",
+      "—",
+      "Shortcut for a full-bleed header photo."
+    ],
+    [
+      "headerAccessibilityLabel",
+      "string",
+      "—",
+      "Describes headerImage for screen readers (skipped when omitted)."
+    ],
+    [
+      "headerHeight",
+      "number",
+      "300",
+      "Header height, including the part under the status bar."
+    ],
+    [
+      "headerSpeed",
+      "number",
+      "0.5",
+      "How the header moves while scrolling up: 0 scrolls with the content, 1 stays pinned while the content slides over it."
+    ],
+    [
+      "stretch",
+      "boolean",
+      "true",
+      "iOS: pulling down stretches the header to fill the gap, anchored at the top. Turn off with a refreshControl."
+    ],
+    [
+      "headerOverlay",
+      "ReactNode",
+      "—",
+      "Pinned to the bottom of the header (a title over the photo); lifts and fades as it scrolls away, over a bottom scrim."
+    ],
+    [
+      "title",
+      "string",
+      "—",
+      "Ready-made top bar (theme background, hairline, centred title) that fades in once the header has scrolled under it."
+    ],
+    [
+      "bar",
+      "ReactNode",
+      "—",
+      "Your own bar instead: fills the bar area (topInset included) and fades in the same way. Decorative — buttons go in barLeft / barRight."
+    ],
+    [
+      "barLeft / barRight",
+      "ReactNode",
+      "—",
+      "Buttons pinned to the bar, visible over the photo too: each child sits on a round theme-coloured bubble that melts into the bar. Pass an array for several."
+    ],
+    [
+      "barHeight",
+      "number",
+      "52",
+      "Height of the bar row, below topInset."
+    ],
+    [
+      "topInset",
+      "number",
+      "0",
+      "Space above the bar for the status bar / notch — pass your safe-area top inset."
+    ],
+    [
+      "contentContainerStyle",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the content under the header (padding, gap, background — theme background by default)."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the outer frame (size, margins, radius). Fills its parent by default."
+    ],
+    [
+      "onScroll",
+      "(e) => void",
+      "—",
+      "JS handler called alongside the native parallax event. For UI-thread effects use useParallaxScroll().scroll instead of your own Animated.event."
+    ],
+    [
+      "ref",
+      "Ref<ScrollView>",
+      "—",
+      "Forwarded to the scroll view, so you can call scrollTo."
+    ],
+    [
+      "…ScrollView props",
+      "ScrollViewProps",
+      "—",
+      "Everything else is passed to the scroll view (vertical only): refreshControl, onScrollEndDrag, nestedScrollEnabled…"
+    ],
+    [
+      "ParallaxImage.source",
+      "ImageSourcePropType",
+      "—",
+      "The photo."
+    ],
+    [
+      "ParallaxImage.height",
+      "number",
+      "200",
+      "Frame height."
+    ],
+    [
+      "ParallaxImage.speed",
+      "number",
+      "0.3",
+      "How much slower than its frame the photo moves: 0 still, 1 fixed on screen, negative the other way."
+    ],
+    [
+      "ParallaxImage.radius",
+      "number",
+      "radius.lg",
+      "Corner radius of the frame."
+    ],
+    [
+      "ParallaxImage.scrim",
+      "boolean",
+      "on with children",
+      "Bottom gradient so white text reads on the photo."
+    ],
+    [
+      "ParallaxImage.children",
+      "ReactNode",
+      "—",
+      "Content over the photo, aligned to the bottom (a caption, a tag)."
+    ],
+    [
+      "ParallaxImage.accessibilityLabel",
+      "string",
+      "—",
+      "Describes the photo for screen readers."
+    ],
+    [
+      "ParallaxImage.style / imageStyle",
+      "StyleProp<ViewStyle> / StyleProp<ImageStyle>",
+      "—",
+      "Style for the frame / for the photo itself."
+    ],
+    [
+      "ParallaxView.speed",
+      "number",
+      "0.2",
+      "Offset relative to the scroll: positive lags behind the content, negative leads it."
+    ],
+    [
+      "ParallaxView.children / style",
+      "ReactNode / StyleProp<ViewStyle>",
+      "—",
+      "What drifts, and its style (the transform is taken by the parallax)."
+    ],
+    [
+      "useParallaxScroll()",
+      "() => { scroll, viewport, contentHeight, contentRef } | null",
+      "—",
+      "The live scroll offset (native-driver friendly), viewport size and content size for your own effects; null outside a ParallaxScrollView."
+    ]
+  ],
+  "behavior": [
+    [
+      "Motion",
+      "The header lags behind the scroll and darkens as it leaves. The bar, title and button bubbles fade in once it has scrolled under the bar."
+    ],
+    [
+      "Touch",
+      "On iOS, pulling down past the top stretches the header to fill the gap. Set stretch to false when you use a refreshControl."
+    ],
+    [
+      "Reduced motion",
+      "With Reduce Motion on, the header, ParallaxImage and ParallaxView parallax offsets switch off; the stretch and the fades stay."
+    ],
+    [
+      "Screen readers",
+      "The bar comes first in reading order and its title is a header. Header and ParallaxImage photos are labelled images only when you give them a label."
+    ],
+    [
+      "Platforms",
+      "The scroll offset drives everything through a native Animated.event, so there is no JS work while scrolling."
+    ]
+  ],
+  "usage": null,
+  "examples": []
+}

package/registry/_docs/password-input.json

@@ -0,0 +1,112 @@
+{
+  "name": "password-input",
+  "category": "Inputs",
+  "aliases": [],
+  "exportName": "PasswordInput",
+  "files": [
+    "src/components/ui/password-input.tsx"
+  ],
+  "summary": "An eye toggle that twists between states, and a strength meter that springs full.",
+  "props": [
+    [
+      "strength",
+      "boolean",
+      "true",
+      "Show the animated strength meter."
+    ],
+    [
+      "score",
+      "(pw) => 0–4",
+      "built-in",
+      "Custom strength scorer."
+    ],
+    [
+      "requirements",
+      "{ label, test }[] | boolean",
+      "—",
+      "Checklist under the field; true uses DEFAULT_PASSWORD_REQUIREMENTS (8+ chars, upper & lower, number, symbol)."
+    ],
+    [
+      "confirmOf",
+      "string",
+      "—",
+      "Confirm-password mode: shows match / mismatch once the user types."
+    ],
+    [
+      "matchMessage / mismatchMessage",
+      "string",
+      "\"Passwords match\" / \"Passwords don't match\"",
+      "Copy for confirm mode."
+    ],
+    [
+      "floatingLabel",
+      "boolean",
+      "true",
+      "Passed to FloatingInput: set to false to put the label above the field (no notch) and show placeholder inside."
+    ],
+    [
+      "iconColor",
+      "string",
+      "theme mutedForeground",
+      "Eye / eye-off toggle and clear button colour."
+    ],
+    [
+      "fieldStyle / inputStyle / labelStyle / messageStyle / counterStyle",
+      "StyleProp",
+      "—",
+      "Style slots passed straight to FloatingInput — see Floating Input."
+    ],
+    [
+      "…FloatingInputProps",
+      "",
+      "",
+      "Every Floating Input prop (error, success, size, variant, …)."
+    ]
+  ],
+  "behavior": [
+    [
+      "Touch",
+      "The eye button has a 44pt hit area and toggles secureTextEntry. With confirmOf, a match or mismatch message appears as soon as the typing diverges."
+    ],
+    [
+      "Motion",
+      "Eye and eye-off cross-fade with a spring twist. The four meter segments fill left to right in a stagger, and checklist ticks pop in as rules are met."
+    ],
+    [
+      "Keyboard",
+      "Auto-capitalisation and autocorrect are turned off for the field."
+    ],
+    [
+      "Screen readers",
+      "The toggle is a button labelled 'Show password' or 'Hide password'. The meter reads 'Password strength: Strong' and each requirement reads as done or not yet."
+    ]
+  ],
+  "usage": "import { useState } from 'react';\nimport { PasswordInput } from '@/components/ui/password-input';\n\nconst [password, setPassword] = useState('');\n<PasswordInput label=\"New password\" value={password} onChangeText={setPassword} requirements />",
+  "examples": [
+    {
+      "name": "CreatePassword",
+      "title": "Create Password",
+      "code": "import React, { useState } from 'react';\nimport { StyleSheet, Text, View } from 'react-native';\nimport { PasswordInput } from '@/components/ui/password-input';\nimport { useKit } from '@/lib/kit';\n\nfunction Card({ title, subtitle, children }: { title: string; subtitle?: string; children: React.ReactNode }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={{\n        padding: 16,\n        gap: 12,\n        borderRadius: radius.xl,\n        borderWidth: StyleSheet.hairlineWidth,\n        borderColor: colors.border,\n        backgroundColor: colors.card,\n      }}\n    >\n      <View style={{ gap: 2, marginBottom: 2 }}>\n        <Text style={{ fontSize: 16, fontWeight: '400', color: colors.foreground }}>{title}</Text>\n        {subtitle ? <Text style={{ fontSize: 13, color: colors.mutedForeground }}>{subtitle}</Text> : null}\n      </View>\n      {children}\n    </View>\n  );\n}\n\nexport default function CreatePassword() {\n  const [password, setPassword] = useState('Sunset');\n  const [confirm, setConfirm] = useState('');\n  return (\n    <Card title=\"Choose a password\" subtitle=\"You'll use it to sign in on new devices.\">\n      <PasswordInput label=\"New password\" value={password} onChangeText={setPassword} requirements />\n      <PasswordInput label=\"Confirm password\" value={confirm} onChangeText={setConfirm} confirmOf={password} />\n    </Card>\n  );\n}\n"
+    },
+    {
+      "name": "SignIn",
+      "title": "Sign In",
+      "code": "import React, { useState } from 'react';\nimport { StyleSheet, Text, View } from 'react-native';\nimport { FloatingInput } from '@/components/ui/floating-input';\nimport { PasswordInput } from '@/components/ui/password-input';\nimport { useKit } from '@/lib/kit';\n\nfunction Card({ title, subtitle, children }: { title: string; subtitle?: string; children: React.ReactNode }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={{\n        padding: 16,\n        gap: 12,\n        borderRadius: radius.xl,\n        borderWidth: StyleSheet.hairlineWidth,\n        borderColor: colors.border,\n        backgroundColor: colors.card,\n      }}\n    >\n      <View style={{ gap: 2, marginBottom: 2 }}>\n        <Text style={{ fontSize: 16, fontWeight: '400', color: colors.foreground }}>{title}</Text>\n        {subtitle ? <Text style={{ fontSize: 13, color: colors.mutedForeground }}>{subtitle}</Text> : null}\n      </View>\n      {children}\n    </View>\n  );\n}\n\nexport default function SignIn() {\n  const { colors } = useKit();\n  return (\n    <Card title=\"Welcome back\">\n      <FloatingInput label=\"Email\" defaultValue=\"maya@studio.io\" keyboardType=\"email-address\" autoCapitalize=\"none\" />\n      <PasswordInput label=\"Password\" strength={false} defaultValue=\"correct horse\" />\n      <Text style={{ alignSelf: 'flex-end', fontSize: 13, fontWeight: '400', color: colors.accent }}>Forgot password?</Text>\n    </Card>\n  );\n}\n"
+    },
+    {
+      "name": "StrengthMeter",
+      "title": "Strength Meter",
+      "code": "import { StyleSheet, Text, View } from 'react-native';\nimport { PasswordInput } from '@/components/ui/password-input';\n\nexport default function StrengthMeter() {\n  return (\n    <View style={{ gap: 18 }}>\n      <PasswordInput label=\"Password\" defaultValue=\"hunter2\" />\n      <PasswordInput label=\"Password\" defaultValue=\"Hunter2-Lighthouse!\" />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "CustomRules",
+      "title": "Custom Rules",
+      "code": "import React, { useState } from 'react';\nimport { StyleSheet, Text, View } from 'react-native';\nimport { PasswordInput } from '@/components/ui/password-input';\nimport { useKit } from '@/lib/kit';\n\nfunction Card({ title, subtitle, children }: { title: string; subtitle?: string; children: React.ReactNode }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={{\n        padding: 16,\n        gap: 12,\n        borderRadius: radius.xl,\n        borderWidth: StyleSheet.hairlineWidth,\n        borderColor: colors.border,\n        backgroundColor: colors.card,\n      }}\n    >\n      <View style={{ gap: 2, marginBottom: 2 }}>\n        <Text style={{ fontSize: 16, fontWeight: '400', color: colors.foreground }}>{title}</Text>\n        {subtitle ? <Text style={{ fontSize: 13, color: colors.mutedForeground }}>{subtitle}</Text> : null}\n      </View>\n      {children}\n    </View>\n  );\n}\n\nexport default function CustomRules() {\n  return (\n    <Card title=\"Wi-Fi password\" subtitle=\"Your router needs 12+ characters and no spaces.\">\n      <PasswordInput\n        variant=\"filled\"\n        label=\"Network password\"\n        strength={false}\n        defaultValue=\"cafe latte\"\n        requirements={[\n          { label: '12+ characters', test: (v) => v.length >= 12 },\n          { label: 'No spaces', test: (v) => v.length > 0 && !/\\s/.test(v) },\n        ]}\n      />\n    </Card>\n  );\n}\n"
+    },
+    {
+      "name": "WrongPassword",
+      "title": "Wrong Password",
+      "code": "import { PasswordInput } from '@/components/ui/password-input';\n\nexport default function WrongPassword() {\n  return (\n    <PasswordInput\n      label=\"Current password\"\n      strength={false}\n      defaultValue=\"password123\"\n      error=\"That's not your current password\"\n      helper=\"Required to change your email\"\n    />\n  );\n}\n"
+    }
+  ]
+}

package/registry/_docs/payment-card.json

@@ -0,0 +1,169 @@
+{
+  "name": "payment-card",
+  "category": "3D",
+  "aliases": [],
+  "exportName": "PaymentCard",
+  "files": [
+    "src/components/ui/payment-card.tsx"
+  ],
+  "summary": "A bank card that tilts toward your finger and flips on tap to its back.",
+  "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)."
+    ]
+  ],
+  "behavior": [
+    [
+      "Touch",
+      "A tap flips the card to its back (stripe, signature panel, CVV, hologram); frozen cards ignore taps. flippable={false} makes a still card for use inside something tappable."
+    ],
+    [
+      "Motion",
+      "With tilt on, the card leans toward the finger with a soft glare, and its shadow narrows as it turns edge-on mid-flip."
+    ],
+    [
+      "Screen readers",
+      "Read as '{bank} card ending {last4}', plus 'Frozen' when frozen. The number is masked to the last four digits by default."
+    ]
+  ],
+  "usage": "import { PaymentCard } from '@/components/ui/payment-card';\n\n<PaymentCard\n  bank=\"Northwind\"\n  number=\"5412 7590 1234 0317\"\n  name=\"Maya Patel\"\n  expiry=\"09/29\"\n  brand=\"mastercard\"\n/>",
+  "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,69 @@
+{
+  "name": "pixel-bar",
+  "category": "Charts",
+  "aliases": [],
+  "exportName": "PixelBarChart",
+  "files": [
+    "src/components/charts/pixel-bar.tsx"
+  ],
+  "summary": null,
+  "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."
+    ]
+  ],
+  "behavior": [],
+  "usage": null,
+  "examples": []
+}

package/registry/_docs/polar-area.json

@@ -0,0 +1,81 @@
+{
+  "name": "polar-area",
+  "category": "Charts",
+  "aliases": [],
+  "exportName": "PolarAreaChart",
+  "files": [
+    "src/components/charts/polar-area.tsx"
+  ],
+  "summary": null,
+  "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."
+    ]
+  ],
+  "behavior": [],
+  "usage": null,
+  "examples": []
+}