@expokit/cli 0.3.0 → 0.4.1

package/registry/_docs/food-app.json

@@ -0,0 +1,47 @@
+{
+  "name": "food-app",
+  "category": "Templates",
+  "aliases": [],
+  "exportName": null,
+  "files": [
+    "src/app/(tabs)/_layout.tsx",
+    "src/app/(tabs)/bag.tsx",
+    "src/app/(tabs)/index.tsx",
+    "src/app/(tabs)/offers.tsx",
+    "src/app/(tabs)/profile.tsx",
+    "src/app/_layout.tsx",
+    "src/app/onboarding.tsx",
+    "src/app/settings.tsx",
+    "src/app/sign-in.tsx",
+    "src/components/food-app/tabs.tsx",
+    "src/lib/food-app/cart.tsx",
+    "src/lib/food-app/data.tsx",
+    "src/lib/food-app/session.tsx"
+  ],
+  "summary": null,
+  "props": [],
+  "behavior": [
+    [
+      "Flow",
+      "Onboarding shows once, then sign in, then the tabs. Signing out returns to sign in. The session is saved on the device (AsyncStorage) and guarded with Expo Router’s Stack.Protected."
+    ],
+    [
+      "Tabs",
+      "Menu (rolling donut shelf), Offers (coupons that unlock with the bag total), Bag (checkout) and Profile. The kit’s BottomNav is the tab bar, with the bag count as a badge."
+    ],
+    [
+      "Bag",
+      "Donuts added on the Menu land in the bag; a coupon picked on Offers is applied at checkout. Pay is a stand-in — wire it to your payment sheet."
+    ],
+    [
+      "Settings",
+      "Pushed from Profile. Appearance (System / Light / Dark) re-themes every kit component instantly."
+    ],
+    [
+      "Your backend",
+      "Auth handlers in app/sign-in.tsx and payment in app/(tabs)/bag.tsx are stand-ins that wait and succeed. Menu, coupons and the user live in lib/food-app/data.tsx."
+    ]
+  ],
+  "usage": null,
+  "examples": []
+}

package/registry/_docs/glass.json

@@ -2,7 +2,7 @@
   "name": "glass",
   "category": "Glass",
   "aliases": [],
-  "exportName": "GlassProvider",
+  "exportName": "Glass",
   "files": [
     "src/components/ui/glass.tsx"
   ],

package/registry/_docs/grain.json

@@ -0,0 +1,80 @@
+{
+  "name": "grain",
+  "category": "Display",
+  "aliases": [],
+  "exportName": "GrainGradient",
+  "files": [
+    "src/components/ui/grain.tsx"
+  ],
+  "summary": "A soft blob gradient with real film grain, plus a grain overlay for anything.",
+  "props": [
+    [
+      "palette",
+      "sunset | ocean | aurora | dusk | peach | graphite | ember | mint | lavender | candy | forest | noir",
+      "\"sunset\"",
+      "Built-in colour set."
+    ],
+    [
+      "colors",
+      "string[]",
+      "—",
+      "Base colour first, then up to four blob colours. Overrides palette."
+    ],
+    [
+      "grain",
+      "number",
+      "0.55",
+      "Grain strength, 0–1."
+    ],
+    [
+      "seed",
+      "number",
+      "0",
+      "Shuffles where the blobs sit."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Root style; give it a size or flex: 1."
+    ],
+    [
+      "GrainOverlay grain",
+      "number",
+      "0.55",
+      "Grain only, laid over its parent."
+    ]
+  ],
+  "behavior": [
+    [
+      "Gradient",
+      "A base colour with up to four radial blobs, drawn with react-native-svg so it scales to any size."
+    ],
+    [
+      "Grain",
+      "A tiny tiling noise image drawn at 2×, so the speckle stays fine on every screen; grain sets its strength."
+    ],
+    [
+      "Touch",
+      "The gradient and grain never take touches; children render on top."
+    ]
+  ],
+  "usage": "import { GrainGradient, GrainOverlay } from '@/components/ui/grain';\n\n<GrainGradient palette=\"aurora\" style={{ flex: 1 }}>\n  {/* your screen */}\n</GrainGradient>",
+  "examples": [
+    {
+      "name": "Hero",
+      "title": "Hero",
+      "code": "import { Text, View } from 'react-native';\nimport { GRAIN_PALETTES, GrainGradient } from '@/components/ui/grain';\nimport { useKit } from '@/lib/kit';\n\n/** Controls stop at iOS's largest standard text size; content text stays uncapped. */\nconst FONT_CAP = 1.35;\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\nexport default function Hero({ screen }: DemoProps) {\n  const { radius } = useKit();\n  return (\n    <GrainGradient palette=\"ember\" seed={1} style={screen ? { flex: 1 } : { height: 460, borderRadius: radius.xl }}>\n      <View style={{ flex: 1, justifyContent: 'flex-end', padding: 24, gap: 6 }}>\n        <Text maxFontSizeMultiplier={FONT_CAP} style={{ color: '#ffffff', fontSize: 34, fontWeight: '700', letterSpacing: -0.8 }}>Golden hour</Text>\n        <Text maxFontSizeMultiplier={FONT_CAP} style={{ color: 'rgba(255,255,255,0.8)', fontSize: 15 }}>Warm light, soft grain, no photo needed.</Text>\n      </View>\n    </GrainGradient>\n  );\n}\n"
+    },
+    {
+      "name": "Palettes",
+      "title": "Palettes",
+      "code": "import { Text, View } from 'react-native';\nimport { GRAIN_PALETTES, GrainGradient } from '@/components/ui/grain';\nimport { useKit } from '@/lib/kit';\n\n/** Controls stop at iOS's largest standard text size; content text stays uncapped. */\nconst FONT_CAP = 1.35;\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\nexport default function Palettes({ screen }: DemoProps) {\n  const { radius } = useKit();\n  return (\n    <View style={[{ flexDirection: 'row', flexWrap: 'wrap', gap: 12 }, screen && { padding: 16 }]}>\n      {GRAIN_PALETTES.map((p, i) => (\n        <GrainGradient key={p} palette={p} seed={i} style={{ width: '47%', flexGrow: 1, height: 120, borderRadius: radius.lg }}>\n          <Text maxFontSizeMultiplier={FONT_CAP} style={{ margin: 12, color: ['peach', 'mint', 'lavender'].includes(p) ? '#1d1a26' : '#ffffff', fontWeight: '600', textTransform: 'capitalize' }}>{p}</Text>\n        </GrainGradient>\n      ))}\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Custom",
+      "title": "Custom",
+      "code": "import { GRAIN_PALETTES, GrainGradient } from '@/components/ui/grain';\nimport { useKit } from '@/lib/kit';\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\nexport default function Custom({ screen }: DemoProps) {\n  const { radius } = useKit();\n  return (\n    <GrainGradient colors={['#0c0a1f', '#ff4d6d', '#ffd166', '#06d6a0']} grain={0.9} seed={2} style={screen ? { flex: 1 } : { height: 400, borderRadius: radius.xl }} />\n  );\n}\n"
+    }
+  ]
+}

package/registry/_docs/isometric-bar.json

@@ -67,6 +67,12 @@
       "string",
       "palette[0]",
       "Bar colour."
+    ],
+    [
+      "accessibilityLabel",
+      "string",
+      "auto summary",
+      "What screen readers announce; defaults to a summary of the data."
     ]
   ],
   "behavior": [],

package/registry/_docs/liquidglass-tab.json

@@ -24,7 +24,7 @@
     {
       "name": "Preview",
       "title": "Preview",
-      "code": "import React, { useEffect, useRef, useState } from 'react';\nimport { Animated, Image, Platform, Pressable, ScrollView, StyleSheet, Text, View, type LayoutChangeEvent, type NativeScrollEvent, type NativeSyntheticEvent } from 'react-native';\nimport { BlurView } from 'expo-blur';\nimport Svg, { Circle, Path } from 'react-native-svg';\nimport { useKit } from '@/lib/kit';\n\ntype TabKey = 'index' | 'explore' | 'alerts' | 'profile';\n\nconst TABS: { key: TabKey; title: string; badge?: string; icon: (c: string) => React.ReactNode }[] = [\n  { key: 'index', title: 'Home', icon: (c) => <Path d=\"M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z\" stroke={c} strokeWidth={2} strokeLinejoin=\"round\" fill=\"none\" /> },\n  {\n    key: 'explore',\n    title: 'Explore',\n    icon: (c) => (\n      <>\n        <Circle cx={12} cy={12} r={9} stroke={c} strokeWidth={2} fill=\"none\" />\n        <Path d=\"m15.5 8.5-2 5-5 2 2-5z\" stroke={c} strokeWidth={2} strokeLinejoin=\"round\" fill=\"none\" />\n      </>\n    ),\n  },\n  { key: 'alerts', title: 'Alerts', badge: '3', icon: (c) => <Path d=\"M6 8a6 6 0 1 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10 21h4\" stroke={c} strokeWidth={2} strokeLinecap=\"round\" strokeLinejoin=\"round\" fill=\"none\" /> },\n  {\n    key: 'profile',\n    title: 'Profile',\n    icon: (c) => (\n      <>\n        <Circle cx={12} cy={8} r={4} stroke={c} strokeWidth={2} fill=\"none\" />\n        <Path d=\"M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6\" stroke={c} strokeWidth={2} strokeLinecap=\"round\" fill=\"none\" />\n      </>\n    ),\n  },\n];\n\nconst PHOTOS = [\n  'photo-1501785888041-af3ef285b470',\n  'photo-1469474968028-56623f02e42e',\n  'photo-1500530855697-b586d89ba3ee',\n  'photo-1470071459604-3b5ec3a7fe05',\n  'photo-1441974231531-c6227db76b6e',\n].map((id) => `https://images.unsplash.com/${id}?w=700&auto=format&fit=crop`);\n\nconst COPY: Record<TabKey, { title: string; sub: string }> = {\n  index: { title: 'For you', sub: 'Places picked for this weekend' },\n  explore: { title: 'Explore', sub: 'Trending trails near you' },\n  alerts: { title: 'Alerts', sub: '3 new since yesterday' },\n  profile: { title: 'Profile', sub: 'Trips, saves and settings' },\n};\n\nconst BAR_H = 64;\n\nfunction GlassBar({\n  value,\n  onChange,\n  dark,\n  collapsed,\n  onExpand,\n}: {\n  value: TabKey;\n  onChange: (k: TabKey) => void;\n  dark: boolean;\n  collapsed: boolean;\n  onExpand: () => void;\n}) {\n  const [w, setW] = useState(0);\n  // 0 = full bar, 1 = folded into a circle (JS driver: it animates the bar's width).\n  const fold = useRef(new Animated.Value(0)).current;\n  useEffect(() => {\n    Animated.spring(fold, { toValue: collapsed ? 1 : 0, useNativeDriver: false, damping: 20, stiffness: 220, mass: 0.9 }).start();\n  }, [collapsed, fold]);\n  const width = fold.interpolate({ inputRange: [0, 1], outputRange: [w || 1, BAR_H] });\n  const rowOpacity = fold.interpolate({ inputRange: [0, 0.45], outputRange: [1, 0], extrapolate: 'clamp' });\n  const dotOpacity = fold.interpolate({ inputRange: [0.55, 1], outputRange: [0, 1], extrapolate: 'clamp' });\n  const dotScale = fold.interpolate({ inputRange: [0.55, 1], outputRange: [0.6, 1], extrapolate: 'clamp' });\n  const active = TABS.find((t) => t.key === value) ?? TABS[0];\n  const x = useRef(new Animated.Value(0)).current;\n  const stretch = useRef(new Animated.Value(1)).current;\n  const index = TABS.findIndex((t) => t.key === value);\n  const itemW = w ? (w - 8) / TABS.length : 0;\n  const tint = dark ? '#0a84ff' : '#007aff';\n  const inactive = dark ? 'rgba(235,235,245,0.6)' : 'rgba(60,60,67,0.6)';\n\n  useEffect(() => {\n    if (!itemW) return;\n    Animated.parallel([\n      Animated.spring(x, { toValue: index * itemW, useNativeDriver: true, damping: 18, stiffness: 220, mass: 0.9 }),\n      Animated.sequence([\n        Animated.timing(stretch, { toValue: 1.22, duration: 110, useNativeDriver: true }),\n        Animated.spring(stretch, { toValue: 1, useNativeDriver: true, damping: 10, stiffness: 260 }),\n      ]),\n    ]).start();\n  }, [index, itemW, x, stretch]);\n\n  return (\n    <View pointerEvents=\"box-none\" style={styles.host} onLayout={(e: LayoutChangeEvent) => setW(Math.round(e.nativeEvent.layout.width))}>\n      <Animated.View style={[styles.shadow, dark ? styles.shadowDark : styles.shadowLight, w ? { width } : null]}>\n        <View style={[styles.glass, { borderColor: dark ? 'rgba(255,255,255,0.14)' : 'rgba(255,255,255,0.8)' }]}>\n          <BlurView intensity={Platform.OS === 'ios' ? 70 : 40} tint={dark ? 'dark' : 'light'} style={[StyleSheet.absoluteFill, styles.round]} />\n          <View style={[StyleSheet.absoluteFill, { backgroundColor: dark ? 'rgba(28,28,34,0.5)' : 'rgba(255,255,255,0.55)' }]} />\n          <View style={[styles.rim, { backgroundColor: dark ? 'rgba(255,255,255,0.18)' : 'rgba(255,255,255,0.95)' }]} />\n          {itemW ? (\n            <Animated.View\n              style={[\n                styles.bubble,\n                {\n                  width: itemW,\n                  backgroundColor: dark ? 'rgba(255,255,255,0.14)' : 'rgba(0,0,0,0.06)',\n                  transform: [{ translateX: x }, { scaleX: stretch }, { scaleY: stretch.interpolate({ inputRange: [1, 1.22], outputRange: [1, 0.88] }) }],\n                },\n              ]}\n            />\n          ) : null}\n          <Animated.View pointerEvents={collapsed ? 'none' : 'auto'} style={[styles.row, w ? { width: w } : null, { opacity: rowOpacity }]}>\n            {TABS.map((t) => {\n              const on = t.key === value;\n              const c = on ? tint : inactive;\n              return (\n                <Pressable\n                  key={t.key}\n                  onPress={() => onChange(t.key)}\n                  accessibilityRole=\"tab\"\n                  accessibilityState={{ selected: on }}\n                  accessibilityLabel={t.title}\n                  style={styles.item}\n                >\n                  <View>\n                    <Svg width={24} height={24} viewBox=\"0 0 24 24\">\n                      {t.icon(c)}\n                    </Svg>\n                    {t.badge ? (\n                      <View style={styles.badge}>\n                        <Text style={styles.badgeText}>{t.badge}</Text>\n                      </View>\n                    ) : null}\n                  </View>\n                  <Text style={[styles.label, { color: c }]}>{t.title}</Text>\n                </Pressable>\n              );\n            })}\n          </Animated.View>\n          <Animated.View pointerEvents={collapsed ? 'auto' : 'none'} style={[styles.dot, { opacity: dotOpacity, transform: [{ scale: dotScale }] }]}>\n            <Pressable onPress={onExpand} accessibilityRole=\"button\" accessibilityLabel={`${active.title}. Show tab bar`} style={styles.dotPress}>\n              <Svg width={26} height={26} viewBox=\"0 0 24 24\">\n                {active.icon(tint)}\n              </Svg>\n            </Pressable>\n          </Animated.View>\n        </View>\n      </Animated.View>\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  root: { flex: 1 },\n  feed: { paddingHorizontal: 16, paddingTop: 12, paddingBottom: 120, gap: 12 },\n  large: { fontSize: 32, lineHeight: 38, letterSpacing: -0.8, fontWeight: '400' },\n  sub: { fontSize: 15, marginTop: -6, marginBottom: 6 },\n  card: { height: 190, borderRadius: 22, overflow: 'hidden', justifyContent: 'flex-end', padding: 16 },\n  cardShade: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,0.18)' },\n  cardTitle: { color: '#ffffff', fontSize: 20, fontWeight: '400', letterSpacing: -0.3 },\n  host: { position: 'absolute', left: 20, right: 20, bottom: 24 },\n  shadow: { height: BAR_H, borderRadius: BAR_H / 2 },\n  shadowLight: { boxShadow: '0 10px 28px -8px rgba(0,0,0,0.22)' },\n  shadowDark: { boxShadow: '0 10px 28px -8px rgba(0,0,0,0.7)' },\n  glass: { flex: 1, borderRadius: 32, overflow: 'hidden', borderWidth: StyleSheet.hairlineWidth * 2 },\n  round: { borderRadius: 32 },\n  rim: { position: 'absolute', top: 0, left: 24, right: 24, height: 1 },\n  bubble: { position: 'absolute', top: 4, bottom: 4, left: 4, borderRadius: 28 },\n  row: { flex: 1, flexDirection: 'row', paddingHorizontal: 4 },\n  dot: { position: 'absolute', top: 0, left: 0, width: BAR_H, height: BAR_H },\n  dotPress: { flex: 1, alignItems: 'center', justifyContent: 'center' },\n  item: { flex: 1, alignItems: 'center', justifyContent: 'center', gap: 2 },\n  label: { fontSize: 10.5, fontWeight: '400' },\n  badge: { position: 'absolute', top: -4, right: -10, minWidth: 17, height: 17, borderRadius: 9, paddingHorizontal: 4, backgroundColor: '#ff3b30', alignItems: 'center', justifyContent: 'center' },\n  badgeText: { color: '#ffffff', fontSize: 10.5, fontWeight: '400' },\n});\n\nexport default function Preview() {\n  const { dark } = useKit();\n  const [tab, setTab] = useState<TabKey>('index');\n  const [collapsed, setCollapsed] = useState(false);\n  const lastY = useRef(0);\n  const onScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {\n    const y = e.nativeEvent.contentOffset.y;\n    const dy = y - lastY.current;\n    lastY.current = y;\n    if (y < 24) setCollapsed(false);\n    else if (dy > 6) setCollapsed(true);\n    else if (dy < -6) setCollapsed(false);\n  };\n  const fg = dark ? '#ffffff' : '#1c1c1e';\n  const sub = dark ? 'rgba(235,235,245,0.6)' : 'rgba(60,60,67,0.6)';\n  const offset = TABS.findIndex((t) => t.key === tab);\n  const copy = COPY[tab];\n\n  return (\n    <View style={[styles.root, { backgroundColor: dark ? '#000000' : '#f2f2f7' }]}>\n      <ScrollView contentContainerStyle={styles.feed} showsVerticalScrollIndicator={false} onScroll={onScroll} scrollEventThrottle={16}>\n        <Text style={[styles.large, { color: fg }]}>{copy.title}</Text>\n        <Text style={[styles.sub, { color: sub }]}>{copy.sub}</Text>\n        {[0, 1, 2, 3, 4].map((i) => {\n          const p = PHOTOS[(i + offset) % PHOTOS.length];\n          return (\n            <View key={`${tab}-${i}`} style={styles.card}>\n              <Image source={{ uri: p }} alt=\"\" style={StyleSheet.absoluteFill} resizeMode=\"cover\" />\n              <View style={styles.cardShade} />\n              <Text style={styles.cardTitle}>{['Lake Braies', 'Dolomites', 'Valley trail', 'Blue ridge', 'Old forest'][(i + offset) % 5]}</Text>\n            </View>\n          );\n        })}\n      </ScrollView>\n      <GlassBar value={tab} onChange={setTab} dark={dark} collapsed={collapsed} onExpand={() => setCollapsed(false)} />\n    </View>\n  );\n}\n"
+      "code": "import React, { useEffect, useRef, useState } from 'react';\nimport { Animated, Image, Platform, Pressable, ScrollView, StyleSheet, Text, View, type LayoutChangeEvent, type NativeScrollEvent, type NativeSyntheticEvent } from 'react-native';\nimport { BlurView } from 'expo-blur';\nimport Svg, { Circle, Path } from 'react-native-svg';\nimport { useKit } from '@/lib/kit';\n\n/** Control text stops at iOS's largest standard size. */\nconst FONT_CAP = 1.35;\n\ntype TabKey = 'index' | 'explore' | 'alerts' | 'profile';\n\nconst TABS: { key: TabKey; title: string; badge?: string; icon: (c: string) => React.ReactNode }[] = [\n  { key: 'index', title: 'Home', icon: (c) => <Path d=\"M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z\" stroke={c} strokeWidth={2} strokeLinejoin=\"round\" fill=\"none\" /> },\n  {\n    key: 'explore',\n    title: 'Explore',\n    icon: (c) => (\n      <>\n        <Circle cx={12} cy={12} r={9} stroke={c} strokeWidth={2} fill=\"none\" />\n        <Path d=\"m15.5 8.5-2 5-5 2 2-5z\" stroke={c} strokeWidth={2} strokeLinejoin=\"round\" fill=\"none\" />\n      </>\n    ),\n  },\n  { key: 'alerts', title: 'Alerts', badge: '3', icon: (c) => <Path d=\"M6 8a6 6 0 1 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10 21h4\" stroke={c} strokeWidth={2} strokeLinecap=\"round\" strokeLinejoin=\"round\" fill=\"none\" /> },\n  {\n    key: 'profile',\n    title: 'Profile',\n    icon: (c) => (\n      <>\n        <Circle cx={12} cy={8} r={4} stroke={c} strokeWidth={2} fill=\"none\" />\n        <Path d=\"M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6\" stroke={c} strokeWidth={2} strokeLinecap=\"round\" fill=\"none\" />\n      </>\n    ),\n  },\n];\n\nconst PHOTOS = [\n  'photo-1501785888041-af3ef285b470',\n  'photo-1469474968028-56623f02e42e',\n  'photo-1500530855697-b586d89ba3ee',\n  'photo-1470071459604-3b5ec3a7fe05',\n  'photo-1441974231531-c6227db76b6e',\n].map((id) => `https://images.unsplash.com/${id}?w=700&auto=format&fit=crop`);\n\nconst COPY: Record<TabKey, { title: string; sub: string }> = {\n  index: { title: 'For you', sub: 'Places picked for this weekend' },\n  explore: { title: 'Explore', sub: 'Trending trails near you' },\n  alerts: { title: 'Alerts', sub: '3 new since yesterday' },\n  profile: { title: 'Profile', sub: 'Trips, saves and settings' },\n};\n\nconst BAR_H = 64;\n\nfunction GlassBar({\n  value,\n  onChange,\n  dark,\n  collapsed,\n  onExpand,\n}: {\n  value: TabKey;\n  onChange: (k: TabKey) => void;\n  dark: boolean;\n  collapsed: boolean;\n  onExpand: () => void;\n}) {\n  const [w, setW] = useState(0);\n  // 0 = full bar, 1 = folded into a circle (JS driver: it animates the bar's width).\n  const fold = useRef(new Animated.Value(0)).current;\n  useEffect(() => {\n    Animated.spring(fold, { toValue: collapsed ? 1 : 0, useNativeDriver: false, damping: 29, stiffness: 220, mass: 0.9 }).start();\n  }, [collapsed, fold]);\n  const width = fold.interpolate({ inputRange: [0, 1], outputRange: [w || 1, BAR_H] });\n  const rowOpacity = fold.interpolate({ inputRange: [0, 0.45], outputRange: [1, 0], extrapolate: 'clamp' });\n  const dotOpacity = fold.interpolate({ inputRange: [0.55, 1], outputRange: [0, 1], extrapolate: 'clamp' });\n  const dotScale = fold.interpolate({ inputRange: [0.55, 1], outputRange: [0.6, 1], extrapolate: 'clamp' });\n  const active = TABS.find((t) => t.key === value) ?? TABS[0];\n  const x = useRef(new Animated.Value(0)).current;\n  const stretch = useRef(new Animated.Value(1)).current;\n  const index = TABS.findIndex((t) => t.key === value);\n  const itemW = w ? (w - 8) / TABS.length : 0;\n  const tint = dark ? '#0a84ff' : '#007aff';\n  const inactive = dark ? 'rgba(235,235,245,0.6)' : 'rgba(60,60,67,0.6)';\n\n  useEffect(() => {\n    if (!itemW) return;\n    Animated.parallel([\n      Animated.spring(x, { toValue: index * itemW, useNativeDriver: true, damping: 29, stiffness: 220, mass: 0.9 }),\n      Animated.sequence([\n        Animated.timing(stretch, { toValue: 1.22, duration: 110, useNativeDriver: true }),\n        Animated.spring(stretch, { toValue: 1, useNativeDriver: true, damping: 33, stiffness: 260 }),\n      ]),\n    ]).start();\n  }, [index, itemW, x, stretch]);\n\n  return (\n    <View pointerEvents=\"box-none\" style={styles.host} onLayout={(e: LayoutChangeEvent) => setW(Math.round(e.nativeEvent.layout.width))}>\n      <Animated.View style={[styles.shadow, dark ? styles.shadowDark : styles.shadowLight, w ? { width } : null]}>\n        <View style={[styles.glass, { borderColor: dark ? 'rgba(255,255,255,0.14)' : 'rgba(255,255,255,0.8)' }]}>\n          <BlurView intensity={Platform.OS === 'ios' ? 70 : 40} tint={dark ? 'dark' : 'light'} style={[StyleSheet.absoluteFill, styles.round]} />\n          <View style={[StyleSheet.absoluteFill, { backgroundColor: dark ? 'rgba(28,28,34,0.5)' : 'rgba(255,255,255,0.55)' }]} />\n          <View style={[styles.rim, { backgroundColor: dark ? 'rgba(255,255,255,0.18)' : 'rgba(255,255,255,0.95)' }]} />\n          {itemW ? (\n            <Animated.View\n              style={[\n                styles.bubble,\n                {\n                  width: itemW,\n                  backgroundColor: dark ? 'rgba(255,255,255,0.14)' : 'rgba(0,0,0,0.06)',\n                  transform: [{ translateX: x }, { scaleX: stretch }, { scaleY: stretch.interpolate({ inputRange: [1, 1.22], outputRange: [1, 0.88] }) }],\n                },\n              ]}\n            />\n          ) : null}\n          <Animated.View pointerEvents={collapsed ? 'none' : 'auto'} style={[styles.row, w ? { width: w } : null, { opacity: rowOpacity }]}>\n            {TABS.map((t) => {\n              const on = t.key === value;\n              const c = on ? tint : inactive;\n              return (\n                <Pressable\n                  key={t.key}\n                  onPress={() => onChange(t.key)}\n                  accessibilityRole=\"tab\"\n                  accessibilityState={{ selected: on }}\n                  accessibilityLabel={t.title}\n                  style={styles.item}\n                >\n                  <View>\n                    <Svg width={24} height={24} viewBox=\"0 0 24 24\">\n                      {t.icon(c)}\n                    </Svg>\n                    {t.badge ? (\n                      <View style={styles.badge}>\n                        <Text maxFontSizeMultiplier={FONT_CAP} style={styles.badgeText}>{t.badge}</Text>\n                      </View>\n                    ) : null}\n                  </View>\n                  <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.label, { color: c }]}>{t.title}</Text>\n                </Pressable>\n              );\n            })}\n          </Animated.View>\n          <Animated.View pointerEvents={collapsed ? 'auto' : 'none'} style={[styles.dot, { opacity: dotOpacity, transform: [{ scale: dotScale }] }]}>\n            <Pressable onPress={onExpand} accessibilityRole=\"button\" accessibilityLabel={`${active.title}. Show tab bar`} style={styles.dotPress}>\n              <Svg width={26} height={26} viewBox=\"0 0 24 24\">\n                {active.icon(tint)}\n              </Svg>\n            </Pressable>\n          </Animated.View>\n        </View>\n      </Animated.View>\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  root: { flex: 1 },\n  feed: { paddingHorizontal: 16, paddingTop: 12, paddingBottom: 120, gap: 12 },\n  large: { fontSize: 32, lineHeight: 38, letterSpacing: -0.8, fontWeight: '400' },\n  sub: { fontSize: 15, marginTop: -6, marginBottom: 6 },\n  card: { height: 190, borderRadius: 22, overflow: 'hidden', justifyContent: 'flex-end', padding: 16 },\n  cardShade: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,0.18)' },\n  cardTitle: { color: '#ffffff', fontSize: 20, fontWeight: '400', letterSpacing: -0.3 },\n  host: { position: 'absolute', left: 20, right: 20, bottom: 24 },\n  shadow: { height: BAR_H, borderRadius: BAR_H / 2 },\n  shadowLight: { boxShadow: '0 10px 28px -8px rgba(0,0,0,0.22)' },\n  shadowDark: { boxShadow: '0 10px 28px -8px rgba(0,0,0,0.7)' },\n  glass: { flex: 1, borderRadius: 32, overflow: 'hidden', borderWidth: StyleSheet.hairlineWidth * 2 },\n  round: { borderRadius: 32 },\n  rim: { position: 'absolute', top: 0, left: 24, right: 24, height: 1 },\n  bubble: { position: 'absolute', top: 4, bottom: 4, left: 4, borderRadius: 28 },\n  row: { flex: 1, flexDirection: 'row', paddingHorizontal: 4 },\n  dot: { position: 'absolute', top: 0, left: 0, width: BAR_H, height: BAR_H },\n  dotPress: { flex: 1, alignItems: 'center', justifyContent: 'center' },\n  item: { flex: 1, alignItems: 'center', justifyContent: 'center', gap: 2 },\n  label: { fontSize: 10.5, fontWeight: '400' },\n  badge: { position: 'absolute', top: -4, right: -10, minWidth: 17, minHeight: 17, borderRadius: 9, paddingHorizontal: 4, backgroundColor: '#ff3b30', alignItems: 'center', justifyContent: 'center' },\n  badgeText: { color: '#ffffff', fontSize: 10.5, fontWeight: '400' },\n});\n\nexport default function Preview() {\n  const { dark } = useKit();\n  const [tab, setTab] = useState<TabKey>('index');\n  const [collapsed, setCollapsed] = useState(false);\n  const lastY = useRef(0);\n  const onScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {\n    const y = e.nativeEvent.contentOffset.y;\n    const dy = y - lastY.current;\n    lastY.current = y;\n    if (y < 24) setCollapsed(false);\n    else if (dy > 6) setCollapsed(true);\n    else if (dy < -6) setCollapsed(false);\n  };\n  const fg = dark ? '#ffffff' : '#1c1c1e';\n  const sub = dark ? 'rgba(235,235,245,0.6)' : 'rgba(60,60,67,0.6)';\n  const offset = TABS.findIndex((t) => t.key === tab);\n  const copy = COPY[tab];\n\n  return (\n    <View style={[styles.root, { backgroundColor: dark ? '#000000' : '#f2f2f7' }]}>\n      <ScrollView contentContainerStyle={styles.feed} showsVerticalScrollIndicator={false} onScroll={onScroll} scrollEventThrottle={16}>\n        <Text style={[styles.large, { color: fg }]}>{copy.title}</Text>\n        <Text style={[styles.sub, { color: sub }]}>{copy.sub}</Text>\n        {[0, 1, 2, 3, 4].map((i) => {\n          const p = PHOTOS[(i + offset) % PHOTOS.length];\n          return (\n            <View key={`${tab}-${i}`} style={styles.card}>\n              <Image source={{ uri: p }} alt=\"\" style={StyleSheet.absoluteFill} resizeMode=\"cover\" />\n              <View style={styles.cardShade} />\n              <Text maxFontSizeMultiplier={FONT_CAP} style={styles.cardTitle}>{['Lake Braies', 'Dolomites', 'Valley trail', 'Blue ridge', 'Old forest'][(i + offset) % 5]}</Text>\n            </View>\n          );\n        })}\n      </ScrollView>\n      <GlassBar value={tab} onChange={setTab} dark={dark} collapsed={collapsed} onExpand={() => setCollapsed(false)} />\n    </View>\n  );\n}\n"
     }
   ]
 }

package/registry/_docs/morphing-button-group.json

@@ -0,0 +1,96 @@
+{
+  "name": "morphing-button-group",
+  "category": "Buttons",
+  "aliases": [],
+  "exportName": "MorphingButtonGroup",
+  "files": [
+    "src/components/ui/morphing-button-group.tsx"
+  ],
+  "summary": "Buttons that split, join and stretch between sets — with a signature sheet built on it.",
+  "props": [
+    [
+      "buttons",
+      "{ key, label, icon?, variant?, onPress? }[]",
+      "—",
+      "MorphingButtonGroup: the buttons to show now; changing it morphs the row."
+    ],
+    [
+      "height",
+      "number",
+      "44",
+      "Button height."
+    ],
+    [
+      "gap",
+      "number",
+      "10",
+      "Space between buttons."
+    ],
+    [
+      "duration",
+      "number",
+      "380",
+      "Morph length in ms."
+    ],
+    [
+      "SignatureSheet label",
+      "string",
+      "'Sign'",
+      "The pill's text."
+    ],
+    [
+      "SignatureSheet title",
+      "string",
+      "'Add Signature'",
+      "Card title."
+    ],
+    [
+      "SignatureSheet onConfirm",
+      "({ paths, width, height }) => void",
+      "—",
+      "The finished signature."
+    ],
+    [
+      "SignatureSheet onCancel",
+      "() => void",
+      "—",
+      "Closed without signing."
+    ],
+    [
+      "SignatureSheet cardHeight",
+      "number",
+      "340",
+      "Height of the open card."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Root style."
+    ]
+  ],
+  "behavior": [
+    [
+      "Morph",
+      "Buttons with the same key keep their place and resize; new ones grow in from nothing and leaving ones shrink away, on one smooth ease (no bounce)."
+    ],
+    [
+      "Labels",
+      "A label change cross-fades while the button resizes."
+    ],
+    [
+      "Signature",
+      "The pad draws smoothed strokes; undo removes the last one, Reset clears, Confirm asks once more. onConfirm gets SVG path data and the pad size."
+    ],
+    [
+      "Haptics",
+      "A tick on each button, a light tap opening the sheet, success on confirm."
+    ],
+    [
+      "Reduced motion",
+      "Morphs are instant."
+    ]
+  ],
+  "usage": null,
+  "examples": []
+}

package/registry/_docs/orb-reveal.json

@@ -0,0 +1,132 @@
+{
+  "name": "orb-reveal",
+  "category": "Motion",
+  "aliases": [],
+  "exportName": "OrbReveal",
+  "files": [
+    "src/components/ui/orb-reveal.tsx"
+  ],
+  "summary": "Drag a liquid-glass orb up: it shows your title through the lens, then fountains glass marbles into a heart.",
+  "props": [
+    [
+      "headline",
+      "string",
+      "'A new era of…'",
+      "Copy shown before the reveal."
+    ],
+    [
+      "title",
+      "string",
+      "'Meet Wabi.'",
+      "The line the lens uncovers."
+    ],
+    [
+      "subtitle",
+      "string",
+      "'The first personal…'",
+      "Lines under the title."
+    ],
+    [
+      "hint",
+      "string",
+      "'Swipe up to enter'",
+      "Faint hint under the resting orb."
+    ],
+    [
+      "images",
+      "string[]",
+      "—",
+      "Image URIs for the marbles (app icons, avatars)."
+    ],
+    [
+      "emoji",
+      "string[]",
+      "24 emoji",
+      "Marble pictures when there are no images, each on a bright gradient."
+    ],
+    [
+      "count",
+      "number",
+      "52",
+      "Marbles in the heart (max 60), plus a trail of specks."
+    ],
+    [
+      "glowColors",
+      "[string, string]",
+      "blue, violet",
+      "The glow while you hold the orb."
+    ],
+    [
+      "background",
+      "string",
+      "theme background",
+      "Page colour."
+    ],
+    [
+      "footer",
+      "ReactNode",
+      "—",
+      "Fades in after the reveal: sign-in buttons, a CTA."
+    ],
+    [
+      "revealed",
+      "boolean",
+      "—",
+      "Controlled state."
+    ],
+    [
+      "defaultRevealed",
+      "boolean",
+      "false",
+      "Uncontrolled initial state."
+    ],
+    [
+      "onRevealChange",
+      "(revealed: boolean) => void",
+      "—",
+      "The orb settled in a new state."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "flex: 1",
+      "Root style; give it a screen or a tall card."
+    ]
+  ],
+  "behavior": [
+    [
+      "Hold",
+      "The orb swells and lifts, a blue-violet smile of light glows through it and the headline fades."
+    ],
+    [
+      "Drag",
+      "Drag up past halfway (or flick) to reveal; drag the small orb down to go back. A quick tap toggles; a hold or a drag back to the start stays put."
+    ],
+    [
+      "Lens",
+      "Two Skia shaders refract the page under the orb and the title the lens uncovers: magnified middle, mirrored bevel, red/blue split at the edge."
+    ],
+    [
+      "Marbles",
+      "Fountain out of the button on arcs, pop to size and settle into a heart, then drift. Going back down, they float off the top."
+    ],
+    [
+      "Copy",
+      "The title rides with the orb. It and the footer appear as the orb settles and stay until it is most of the way back down."
+    ],
+    [
+      "Haptics",
+      "A tick when you pick the orb up and a medium impact on reveal."
+    ],
+    [
+      "Reduced motion",
+      "The orb snaps between states and the marbles appear in place."
+    ],
+    [
+      "Web",
+      "Needs CanvasKit loaded (LoadSkiaWeb); without it the revealed copy and footer are shown."
+    ]
+  ],
+  "usage": null,
+  "examples": []
+}

package/registry/_docs/otp-input.json

@@ -132,22 +132,22 @@
     {
       "name": "VerifyPhone",
       "title": "Verify Phone",
-      "code": "import React, { useEffect, useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { OtpInput } from '@/components/ui/otp-input';\nimport { useKit } from '@/lib/kit';\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        { padding: 16, gap: 12, borderRadius: radius.xl, borderWidth: StyleSheet.hairlineWidth, borderColor: colors.border, backgroundColor: colors.card },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nfunction Header({ title, body }: { title: string; body: string }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ gap: 4, alignItems: 'center' }}>\n      <Text style={{ fontSize: 16, fontWeight: '400', color: colors.foreground, textAlign: 'center' }}>{title}</Text>\n      <Text style={{ fontSize: 13, color: colors.mutedForeground, textAlign: 'center' }}>{body}</Text>\n    </View>\n  );\n}\n\nexport default function VerifyPhone() {\n  const { colors } = useKit();\n  const [code, setCode] = useState('');\n  const [left, setLeft] = useState(24);\n  useEffect(() => {\n    if (left <= 0) return;\n    const id = setTimeout(() => setLeft((s) => s - 1), 1000);\n    return () => clearTimeout(id);\n  }, [left]);\n  const done = code.length === 6;\n  return (\n    <Card>\n      <Header title=\"Verify your number\" body=\"Enter the code sent to +91 98•••• 4210\" />\n      <OtpInput\n        value={code}\n        onChangeText={setCode}\n        success={code === '123456'}\n        error={done && code !== '123456'}\n        successText=\"Number verified\"\n        errorText=\"That code didn't match. Try 123456.\"\n        helperText=\"Tip: the demo code is 123456\"\n      />\n      <View style={{ flexDirection: 'row', justifyContent: 'center', gap: 16 }}>\n        <Pressable disabled={left > 0} onPress={() => { setLeft(24); setCode(''); }} hitSlop={10}>\n          <Text style={{ fontSize: 13, fontWeight: '400', color: left > 0 ? colors.mutedForeground : colors.accent }}>\n            {left > 0 ? `Resend in 0:${String(left).padStart(2, '0')}` : 'Resend code'}\n          </Text>\n        </Pressable>\n        <Pressable hitSlop={10} accessibilityRole=\"button\">\n          <Text style={{ fontSize: 13, fontWeight: '400', color: colors.accent }}>Change number</Text>\n        </Pressable>\n      </View>\n    </Card>\n  );\n}\n"
+      "code": "import React, { useEffect, useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { OtpInput } from '@/components/ui/otp-input';\nimport { useKit } from '@/lib/kit';\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, screen, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        { padding: 16, gap: 12 },\n        screen\n          ? { flex: 1, backgroundColor: colors.background }\n          : { borderRadius: radius.xl, borderWidth: StyleSheet.hairlineWidth, borderColor: colors.border, backgroundColor: colors.card },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nfunction Header({ title, body }: { title: string; body: string }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ gap: 4, alignItems: 'center' }}>\n      <Text style={{ fontSize: 16, fontWeight: '400', color: colors.foreground, textAlign: 'center' }}>{title}</Text>\n      <Text style={{ fontSize: 13, color: colors.mutedForeground, textAlign: 'center' }}>{body}</Text>\n    </View>\n  );\n}\n\nexport default function VerifyPhone({ screen }: DemoProps) {\n  const { colors } = useKit();\n  const [code, setCode] = useState('');\n  const [left, setLeft] = useState(24);\n  useEffect(() => {\n    if (left <= 0) return;\n    const id = setTimeout(() => setLeft((s) => s - 1), 1000);\n    return () => clearTimeout(id);\n  }, [left]);\n  const done = code.length === 6;\n  return (\n    <Card screen={screen}>\n      <Header title=\"Verify your number\" body=\"Enter the code sent to +91 98•••• 4210\" />\n      <OtpInput\n        value={code}\n        onChangeText={setCode}\n        success={code === '123456'}\n        error={done && code !== '123456'}\n        successText=\"Number verified\"\n        errorText=\"That code didn't match. Try 123456.\"\n        helperText=\"Tip: the demo code is 123456\"\n      />\n      <View style={{ flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'center', columnGap: 16, rowGap: 8 }}>\n        <Pressable disabled={left > 0} onPress={() => { setLeft(24); setCode(''); }} hitSlop={10} style={{ flexShrink: 1 }}>\n          <Text style={{ fontSize: 13, fontWeight: '400', textAlign: 'center', color: left > 0 ? colors.mutedForeground : colors.accent }}>\n            {left > 0 ? `Resend in 0:${String(left).padStart(2, '0')}` : 'Resend code'}\n          </Text>\n        </Pressable>\n        <Pressable hitSlop={10} accessibilityRole=\"button\" style={{ flexShrink: 1 }}>\n          <Text style={{ fontSize: 13, fontWeight: '400', textAlign: 'center', color: colors.accent }}>Change number</Text>\n        </Pressable>\n      </View>\n    </Card>\n  );\n}\n"
     },
     {
       "name": "Pin",
       "title": "Pin",
-      "code": "import React, { useEffect, useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { OtpInput } from '@/components/ui/otp-input';\nimport { useKit } from '@/lib/kit';\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        { padding: 16, gap: 12, borderRadius: radius.xl, borderWidth: StyleSheet.hairlineWidth, borderColor: colors.border, backgroundColor: colors.card },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nfunction Header({ title, body }: { title: string; body: string }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ gap: 4, alignItems: 'center' }}>\n      <Text style={{ fontSize: 16, fontWeight: '400', color: colors.foreground, textAlign: 'center' }}>{title}</Text>\n      <Text style={{ fontSize: 13, color: colors.mutedForeground, textAlign: 'center' }}>{body}</Text>\n    </View>\n  );\n}\n\nexport default function Pin() {\n  const [pin, setPin] = useState('');\n  return (\n    <Card>\n      <Header title=\"Enter your PIN\" body=\"Confirm the transfer of ₹2,400 to Ananya\" />\n      <OtpInput variant=\"pill\" length={4} secure value={pin} onChangeText={setPin} maxCellSize={56} />\n    </Card>\n  );\n}\n"
+      "code": "import React, { useEffect, useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { OtpInput } from '@/components/ui/otp-input';\nimport { useKit } from '@/lib/kit';\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, screen, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        { padding: 16, gap: 12 },\n        screen\n          ? { flex: 1, backgroundColor: colors.background }\n          : { borderRadius: radius.xl, borderWidth: StyleSheet.hairlineWidth, borderColor: colors.border, backgroundColor: colors.card },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nfunction Header({ title, body }: { title: string; body: string }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ gap: 4, alignItems: 'center' }}>\n      <Text style={{ fontSize: 16, fontWeight: '400', color: colors.foreground, textAlign: 'center' }}>{title}</Text>\n      <Text style={{ fontSize: 13, color: colors.mutedForeground, textAlign: 'center' }}>{body}</Text>\n    </View>\n  );\n}\n\nexport default function Pin({ screen }: DemoProps) {\n  const [pin, setPin] = useState('');\n  return (\n    <Card screen={screen}>\n      <Header title=\"Enter your PIN\" body=\"Confirm the transfer of ₹2,400 to Ananya\" />\n      <OtpInput variant=\"pill\" length={4} secure value={pin} onChangeText={setPin} maxCellSize={56} />\n    </Card>\n  );\n}\n"
     },
     {
       "name": "Underline",
       "title": "Underline",
-      "code": "import { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { OtpInput } from '@/components/ui/otp-input';\nimport { useKit } from '@/lib/kit';\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        { padding: 16, gap: 12, borderRadius: radius.xl, borderWidth: StyleSheet.hairlineWidth, borderColor: colors.border, backgroundColor: colors.card },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nfunction Header({ title, body }: { title: string; body: string }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ gap: 4, alignItems: 'center' }}>\n      <Text style={{ fontSize: 16, fontWeight: '400', color: colors.foreground, textAlign: 'center' }}>{title}</Text>\n      <Text style={{ fontSize: 13, color: colors.mutedForeground, textAlign: 'center' }}>{body}</Text>\n    </View>\n  );\n}\n\nexport default function Underline() {\n  return (\n    <Card>\n      <Header title=\"Check your inbox\" body=\"We emailed a 6-digit code to karan@…\" />\n      <OtpInput variant=\"underline\" helperText=\"Code expires in 10 minutes\" />\n    </Card>\n  );\n}\n"
+      "code": "import { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { OtpInput } from '@/components/ui/otp-input';\nimport { useKit } from '@/lib/kit';\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, screen, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        { padding: 16, gap: 12 },\n        screen\n          ? { flex: 1, backgroundColor: colors.background }\n          : { borderRadius: radius.xl, borderWidth: StyleSheet.hairlineWidth, borderColor: colors.border, backgroundColor: colors.card },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nfunction Header({ title, body }: { title: string; body: string }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ gap: 4, alignItems: 'center' }}>\n      <Text style={{ fontSize: 16, fontWeight: '400', color: colors.foreground, textAlign: 'center' }}>{title}</Text>\n      <Text style={{ fontSize: 13, color: colors.mutedForeground, textAlign: 'center' }}>{body}</Text>\n    </View>\n  );\n}\n\nexport default function Underline({ screen }: DemoProps) {\n  return (\n    <Card screen={screen}>\n      <Header title=\"Check your inbox\" body=\"We emailed a 6-digit code to karan@…\" />\n      <OtpInput variant=\"underline\" helperText=\"Code expires in 10 minutes\" />\n    </Card>\n  );\n}\n"
     },
     {
       "name": "WithSeparator",
       "title": "With Separator",
-      "code": "import { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { OtpInput } from '@/components/ui/otp-input';\nimport { useKit } from '@/lib/kit';\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        { padding: 16, gap: 12, borderRadius: radius.xl, borderWidth: StyleSheet.hairlineWidth, borderColor: colors.border, backgroundColor: colors.card },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nfunction Header({ title, body }: { title: string; body: string }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ gap: 4, alignItems: 'center' }}>\n      <Text style={{ fontSize: 16, fontWeight: '400', color: colors.foreground, textAlign: 'center' }}>{title}</Text>\n      <Text style={{ fontSize: 13, color: colors.mutedForeground, textAlign: 'center' }}>{body}</Text>\n    </View>\n  );\n}\n\nexport default function WithSeparator() {\n  return (\n    <Card>\n      <Header title=\"Two-factor authentication\" body=\"Open your authenticator app\" />\n      <OtpInput separatorAfter={3} maxCellSize={46} />\n    </Card>\n  );\n}\n"
+      "code": "import { Pressable, StyleSheet, Text, View, type ViewProps } from 'react-native';\nimport { OtpInput } from '@/components/ui/otp-input';\nimport { useKit } from '@/lib/kit';\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, screen, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        { padding: 16, gap: 12 },\n        screen\n          ? { flex: 1, backgroundColor: colors.background }\n          : { borderRadius: radius.xl, borderWidth: StyleSheet.hairlineWidth, borderColor: colors.border, backgroundColor: colors.card },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nfunction Header({ title, body }: { title: string; body: string }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ gap: 4, alignItems: 'center' }}>\n      <Text style={{ fontSize: 16, fontWeight: '400', color: colors.foreground, textAlign: 'center' }}>{title}</Text>\n      <Text style={{ fontSize: 13, color: colors.mutedForeground, textAlign: 'center' }}>{body}</Text>\n    </View>\n  );\n}\n\nexport default function WithSeparator({ screen }: DemoProps) {\n  return (\n    <Card screen={screen}>\n      <Header title=\"Two-factor authentication\" body=\"Open your authenticator app\" />\n      <OtpInput separatorAfter={3} maxCellSize={46} />\n    </Card>\n  );\n}\n"
     },
     {
       "name": "States",

package/registry/_docs/password-input.json

@@ -86,12 +86,12 @@
     {
       "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"
+      "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\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\nfunction Card({ title, subtitle, screen, children }: { title: string; subtitle?: string; screen?: boolean; children: React.ReactNode }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        { padding: 16, gap: 12 },\n        screen\n          ? { flex: 1, backgroundColor: colors.background }\n          : {\n              borderRadius: radius.xl,\n              borderWidth: StyleSheet.hairlineWidth,\n              borderColor: colors.border,\n              backgroundColor: colors.card,\n            },\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({ screen }: DemoProps) {\n  const [password, setPassword] = useState('Sunset');\n  const [confirm, setConfirm] = useState('');\n  return (\n    <Card screen={screen} 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"
+      "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\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\nfunction Card({ title, subtitle, screen, children }: { title: string; subtitle?: string; screen?: boolean; children: React.ReactNode }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        { padding: 16, gap: 12 },\n        screen\n          ? { flex: 1, backgroundColor: colors.background }\n          : {\n              borderRadius: radius.xl,\n              borderWidth: StyleSheet.hairlineWidth,\n              borderColor: colors.border,\n              backgroundColor: colors.card,\n            },\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({ screen }: DemoProps) {\n  const { colors } = useKit();\n  return (\n    <Card screen={screen} 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",
@@ -101,7 +101,7 @@
     {
       "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"
+      "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\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\nfunction Card({ title, subtitle, screen, children }: { title: string; subtitle?: string; screen?: boolean; children: React.ReactNode }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        { padding: 16, gap: 12 },\n        screen\n          ? { flex: 1, backgroundColor: colors.background }\n          : {\n              borderRadius: radius.xl,\n              borderWidth: StyleSheet.hairlineWidth,\n              borderColor: colors.border,\n              backgroundColor: colors.card,\n            },\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({ screen }: DemoProps) {\n  return (\n    <Card screen={screen} 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",

package/registry/_docs/payment-card.json

@@ -148,7 +148,7 @@
     {
       "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"
+      "code": "import { Image, Pressable, Text, View } from 'react-native';\nimport { PaymentCard } from '@/components/ui/payment-card';\nimport { alpha, useKit } from '@/lib/kit';\n\n/** Demo control text (buttons, chips, labels on fixed shapes) stops at iOS's largest standard text size. */\nconst FONT_CAP = 1.35;\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 style={{ flexShrink: 1 }}>\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 maxFontSizeMultiplier={FONT_CAP} 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 maxFontSizeMultiplier={FONT_CAP} style={{ color: colors.foreground, fontSize: 20, fontWeight: '500' }}>{glyph}</Text>\n            </View>\n            <Text maxFontSizeMultiplier={FONT_CAP} 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 maxFontSizeMultiplier={FONT_CAP} 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",
@@ -158,12 +158,12 @@
     {
       "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"
+      "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/** Demo control text (buttons, chips, labels on fixed shapes) stops at iOS's largest standard text size. */\nconst FONT_CAP = 1.35;\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 maxFontSizeMultiplier={FONT_CAP} 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"
+      "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/** Demo control text (buttons, chips, labels on fixed shapes) stops at iOS's largest standard text size. */\nconst FONT_CAP = 1.35;\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, minHeight: 46, borderRadius: 12, alignItems: 'center', justifyContent: 'center', backgroundColor: colors.muted }}\n          >\n            <Text maxFontSizeMultiplier={FONT_CAP} 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

@@ -61,6 +61,12 @@
       "boolean",
       "true",
       "Fade colour upwards."
+    ],
+    [
+      "accessibilityLabel",
+      "string",
+      "auto summary",
+      "What screen readers announce; defaults to a summary of the data."
     ]
   ],
   "behavior": [],