@expokit/cli 0.0.0-stage → 0.2.0

package/registry/_docs/liquidglass-tab.json

@@ -0,0 +1,27 @@
+{
+  "name": "liquidglass-tab",
+  "category": "Templates",
+  "aliases": [],
+  "exportName": null,
+  "files": [
+    "src/app/(tabs)/_layout.tsx",
+    "src/app/(tabs)/alerts.tsx",
+    "src/app/(tabs)/explore.tsx",
+    "src/app/(tabs)/index.tsx",
+    "src/app/(tabs)/profile.tsx",
+    "src/app/_layout.tsx",
+    "src/components/GlassTabBar.tsx",
+    "src/components/TabScreen.tsx",
+    "src/lib/tab-bar.ts",
+    "src/lib/tab-icons.ts",
+    "src/lib/tabs.ts"
+  ],
+  "props": [],
+  "examples": [
+    {
+      "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"
+    }
+  ]
+}

package/registry/_docs/list-item.json

@@ -0,0 +1,200 @@
+{
+  "name": "list-item",
+  "category": "Display",
+  "aliases": [],
+  "exportName": "ListItem",
+  "files": [
+    "src/components/ui/list-item.tsx"
+  ],
+  "props": [
+    [
+      "title",
+      "string",
+      "—",
+      "Main text (required)."
+    ],
+    [
+      "subtitle",
+      "string",
+      "—",
+      "One muted line under the title."
+    ],
+    [
+      "description",
+      "string",
+      "—",
+      "Longer muted text, clamped to numberOfLines."
+    ],
+    [
+      "numberOfLines",
+      "number",
+      "2",
+      "Lines of description shown."
+    ],
+    [
+      "meta",
+      "string",
+      "—",
+      "Small text at the end of the title row, e.g. a time."
+    ],
+    [
+      "icon",
+      "ListItemIconName | ({ color, size }) => ReactNode",
+      "—",
+      "Built-in glyph (user, bell, lock, shield, mail, card, help, logout, moon, globe, star, trash, settings, heart, phone, wifi) or your own, drawn in a rounded tile."
+    ],
+    [
+      "iconColor",
+      "string",
+      "accent",
+      "Tile colour (danger when destructive)."
+    ],
+    [
+      "iconVariant",
+      "\"filled\" | \"tinted\"",
+      "\"filled\"",
+      "White glyph on a solid tile, or coloured glyph on a soft tile."
+    ],
+    [
+      "avatar",
+      "{ src?, name?, color?, online? }",
+      "—",
+      "Round avatar with initials fallback and presence dot."
+    ],
+    [
+      "leading",
+      "ReactNode",
+      "—",
+      "Custom leading content (overrides icon / avatar)."
+    ],
+    [
+      "value",
+      "string",
+      "—",
+      "Muted value text on the right."
+    ],
+    [
+      "badge",
+      "boolean | number | string",
+      "—",
+      "Dot, count (99+) or short label pill."
+    ],
+    [
+      "checked",
+      "boolean",
+      "—",
+      "Accent check mark, for pickers."
+    ],
+    [
+      "chevron",
+      "boolean",
+      "pressable",
+      "Disclosure chevron; on by default for pressable rows without trailing / checked."
+    ],
+    [
+      "trailing",
+      "ReactNode",
+      "—",
+      "Any control on the right, e.g. a Switch."
+    ],
+    [
+      "onPress / onLongPress",
+      "() => void",
+      "—",
+      "Makes the row pressable with a fading highlight."
+    ],
+    [
+      "destructive",
+      "boolean",
+      "false",
+      "Red title, icon and highlight."
+    ],
+    [
+      "disabled",
+      "boolean",
+      "false",
+      "Dims and blocks presses."
+    ],
+    [
+      "size",
+      "\"sm\" | \"md\" | \"lg\"",
+      "\"md\"",
+      "44 / 52 / 68pt minimum height; icons and avatars scale."
+    ],
+    [
+      "divider",
+      "boolean",
+      "auto in groups",
+      "Hairline that starts past the leading slot."
+    ],
+    [
+      "accent",
+      "string",
+      "theme accent",
+      "Check, badge and default tile colour."
+    ],
+    [
+      "titleStyle",
+      "StyleProp<TextStyle>",
+      "—",
+      "E.g. bold for unread rows."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the row; ListGroup / ListSection apply theirs to their root view."
+    ],
+    [
+      "ListGroup header / footer",
+      "string",
+      "—",
+      "Uppercase heading and muted note around the inset card."
+    ],
+    [
+      "ListGroup background",
+      "string",
+      "colors.card",
+      "Card colour."
+    ],
+    [
+      "ListSection header / footer",
+      "string",
+      "—",
+      "Plain, full-width section (contacts, inbox)."
+    ],
+    [
+      "ListSection dividerAfterLast",
+      "boolean",
+      "false",
+      "Draw the inset hairline under the last row too."
+    ]
+  ],
+  "examples": [
+    {
+      "name": "Settings",
+      "title": "Settings",
+      "code": "import React, { useState } from 'react';\nimport { View } from 'react-native';\nimport { ListGroup, ListItem, ListSection } from '@/components/ui/list-item';\nimport { Switch } from '@/components/ui/switch';\n\nexport default function Settings() {\n  const [dark, setDark] = useState(true);\n  return (\n    <View style={{ gap: 22 }}>\n      <ListGroup header=\"Account\">\n        <ListItem icon=\"user\" title=\"Profile\" value=\"Amelia Hart\" onPress={() => {}} />\n        <ListItem icon=\"bell\" iconColor=\"#ef4444\" title=\"Notifications\" value=\"Banners\" onPress={() => {}} />\n        <ListItem icon=\"shield\" iconColor=\"#22c55e\" title=\"Privacy & security\" onPress={() => {}} />\n        <ListItem\n          icon=\"moon\"\n          iconColor=\"#0ea5e9\"\n          title=\"Dark mode\"\n          trailing={<Switch size=\"sm\" value={dark} onValueChange={setDark} accessibilityLabel=\"Dark mode\" />}\n        />\n      </ListGroup>\n      <ListGroup footer=\"You'll need your password to sign back in on this device.\">\n        <ListItem icon=\"logout\" title=\"Sign out\" destructive chevron={false} onPress={() => {}} />\n      </ListGroup>\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Contacts",
+      "title": "Contacts",
+      "code": "import { View } from 'react-native';\nimport { ListGroup, ListItem, ListSection } from '@/components/ui/list-item';\n\nconst CONTACTS = [\n  { name: 'Aisha Rahman', role: 'Product designer · Lisbon', src: 'https://i.pravatar.cc/120?img=47', online: true },\n  { name: 'Alex Moreno', role: 'iOS engineer · Madrid' },\n  { name: 'Ben Carter', role: 'Founder at Northwind', src: 'https://i.pravatar.cc/120?img=12' },\n  { name: 'Bianca Rossi', role: 'Marketing lead · Milan', online: true },\n];\n\nexport default function Contacts() {\n  return (\n    <View>\n      <ListSection header=\"A\">\n        {CONTACTS.slice(0, 2).map((c) => (\n          <ListItem key={c.name} avatar={{ src: c.src, name: c.name, online: c.online }} title={c.name} subtitle={c.role} onPress={() => {}} />\n        ))}\n      </ListSection>\n      <ListSection header=\"B\">\n        {CONTACTS.slice(2).map((c) => (\n          <ListItem key={c.name} avatar={{ src: c.src, name: c.name, online: c.online }} title={c.name} subtitle={c.role} onPress={() => {}} />\n        ))}\n      </ListSection>\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Inbox",
+      "title": "Inbox",
+      "code": "import { ListGroup, ListItem, ListSection } from '@/components/ui/list-item';\n\nconst MAIL = [\n  { from: 'Maya Lin', subject: 'Q3 roadmap — final draft', body: 'Attached the updated plan with the launch moved to the 14th. Can you sign off by Friday?', time: '9:41', unread: 3 },\n  { from: 'Stripe', subject: 'Your payout is on the way', body: '₹4,21,850 will arrive in your account ending 4432 on Wednesday.', time: '8:02', unread: 1, color: '#635bff' },\n  { from: 'Jonas Weber', subject: 'Re: Dinner on Saturday?', body: \"Booked the Italian place for 7:30. I'll bring the wine.\", time: 'Tue' },\n];\n\nexport default function Inbox() {\n  return (\n    <ListGroup>\n      {MAIL.map((m) => (\n        <ListItem\n          key={m.from}\n          size=\"lg\"\n          avatar={{ name: m.from, color: m.color }}\n          title={m.from}\n          titleStyle={m.unread ? { fontWeight: '400' } : null}\n          meta={m.time}\n          subtitle={m.subject}\n          description={m.body}\n          badge={m.unread}\n          chevron={false}\n          onPress={() => {}}\n        />\n      ))}\n    </ListGroup>\n  );\n}\n"
+    },
+    {
+      "name": "Picker",
+      "title": "Picker",
+      "code": "import React, { useState } from 'react';\nimport { ListGroup, ListItem, ListSection } from '@/components/ui/list-item';\n\nexport default function Picker() {\n  const [lang, setLang] = useState('English');\n  return (\n    <ListGroup header=\"Language\" footer=\"Apps and websites will use the first language they support.\">\n      {['English', 'Español', 'Deutsch', '日本語'].map((l) => (\n        <ListItem key={l} size=\"sm\" title={l} checked={lang === l} onPress={() => setLang(l)} />\n      ))}\n    </ListGroup>\n  );\n}\n"
+    },
+    {
+      "name": "Tinted",
+      "title": "Tinted",
+      "code": "import { ListGroup, ListItem, ListSection } from '@/components/ui/list-item';\n\nexport default function Tinted() {\n  return (\n    <ListGroup>\n      <ListItem icon=\"wifi\" iconVariant=\"tinted\" iconColor=\"#0ea5e9\" title=\"Wi-Fi\" value=\"Home-5G\" onPress={() => {}} />\n      <ListItem icon=\"card\" iconVariant=\"tinted\" iconColor=\"#f59e0b\" title=\"Payment methods\" description=\"Visa ending 4432 · Apple Pay\" onPress={() => {}} />\n      <ListItem icon=\"star\" iconVariant=\"tinted\" title=\"Upgrade to Pro\" badge=\"New\" onPress={() => {}} />\n      <ListItem icon=\"trash\" iconVariant=\"tinted\" title=\"Delete account\" destructive disabled onPress={() => {}} />\n    </ListGroup>\n  );\n}\n"
+    }
+  ]
+}

package/registry/_docs/loyalty-card.json

@@ -0,0 +1,108 @@
+{
+  "name": "loyalty-card",
+  "category": "3D",
+  "aliases": [],
+  "exportName": "LoyaltyCard",
+  "files": [
+    "src/components/ui/loyalty-card.tsx"
+  ],
+  "props": [
+    [
+      "brand",
+      "string",
+      "—",
+      "Programme name, top-left."
+    ],
+    [
+      "member",
+      "string",
+      "—",
+      "Member's name (bottom line)."
+    ],
+    [
+      "memberId",
+      "string",
+      "—",
+      "Shown on the back under the code."
+    ],
+    [
+      "tier",
+      "string",
+      "—",
+      "Tier pill, e.g. \"Gold\"."
+    ],
+    [
+      "points",
+      "number",
+      "—",
+      "Points balance (ignored with stamps)."
+    ],
+    [
+      "nextReward",
+      "{ at: number; label: string }",
+      "—",
+      "Draws progress toward the next reward."
+    ],
+    [
+      "stamps",
+      "{ filled: number; total: number; reward?: string }",
+      "—",
+      "Stamp card instead of points."
+    ],
+    [
+      "stampGlyph",
+      "string",
+      "\"✓\"",
+      "Glyph in a filled stamp (\"☕\")."
+    ],
+    [
+      "image",
+      "ImageSourcePropType",
+      "—",
+      "Card art — a photo of the shop, product or a texture."
+    ],
+    [
+      "renderCode",
+      "(memberId: string) => ReactNode",
+      "—",
+      "Draw a real scannable code on the back."
+    ],
+    [
+      "flipped / defaultFlipped / onFlip",
+      "boolean / boolean / (flipped) => void",
+      "— / false / —",
+      "Controlled or uncontrolled side."
+    ],
+    [
+      "tilt",
+      "boolean",
+      "true",
+      "Tilt toward the finger."
+    ],
+    [
+      "radius",
+      "number",
+      "18",
+      "Corner radius."
+    ],
+    [
+      "background",
+      "string",
+      "\"#2b1f17\"",
+      "Card colour when there is no image."
+    ],
+    [
+      "labels",
+      "{ ready?, more?, reward?, points?, toNext?, back? }",
+      "English",
+      "Every built-in string, for translation ({n} and {reward} are filled in)."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the root."
+    ]
+  ],
+  "examples": []
+}

package/registry/_docs/morph-button.json

@@ -0,0 +1,108 @@
+{
+  "name": "morph-button",
+  "category": "Buttons",
+  "aliases": [],
+  "exportName": "MorphButton",
+  "files": [
+    "src/components/ui/morph-button.tsx"
+  ],
+  "props": [
+    [
+      "onPress",
+      "() => Promise<unknown>",
+      "—",
+      "Async work. Resolve → tick, reject → cross + shake."
+    ],
+    [
+      "variant",
+      "\"primary\" | \"accent\" | \"soft\" | \"outline\"",
+      "\"primary\"",
+      "Look while idle."
+    ],
+    [
+      "size",
+      "\"sm\" | \"md\" | \"lg\"",
+      "\"md\"",
+      "40 / 48 / 56pt tall."
+    ],
+    [
+      "color",
+      "string",
+      "theme accent",
+      "Brand colour for accent, soft and outline."
+    ],
+    [
+      "successColor / errorColor",
+      "string",
+      "theme success / danger",
+      "Colours of the result circle."
+    ],
+    [
+      "resetAfter",
+      "number",
+      "1300",
+      "ms the result stays before morphing back."
+    ],
+    [
+      "minLoading",
+      "number",
+      "600",
+      "Minimum ms the spinner is shown."
+    ],
+    [
+      "onSuccess / onError",
+      "(value) => void",
+      "—",
+      "Called with the resolved value or the thrown error."
+    ],
+    [
+      "onStatusChange",
+      "(status) => void",
+      "—",
+      "\"idle\" | \"loading\" | \"success\" | \"error\"."
+    ],
+    [
+      "pill",
+      "boolean",
+      "true",
+      "Fully rounded ends while idle."
+    ],
+    [
+      "block",
+      "boolean",
+      "false",
+      "Full width; shrinks to the centre while busy."
+    ],
+    [
+      "left",
+      "ReactNode",
+      "—",
+      "Icon before the label."
+    ],
+    [
+      "haptics",
+      "boolean",
+      "true",
+      "Taps on start, success and error."
+    ],
+    [
+      "disabled",
+      "boolean",
+      "false",
+      "Blocks presses."
+    ],
+    [
+      "textStyle",
+      "StyleProp<TextStyle>",
+      "—",
+      "Style for the idle label text."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the outer animated wrapper (margins, alignment)."
+    ]
+  ],
+  "examples": []
+}

package/registry/_docs/number-ticker.json

@@ -0,0 +1,96 @@
+{
+  "name": "number-ticker",
+  "category": "Motion",
+  "aliases": [],
+  "exportName": "NumberTicker",
+  "files": [
+    "src/components/ui/number-ticker.tsx"
+  ],
+  "props": [
+    [
+      "value",
+      "number",
+      "—",
+      "The number to show."
+    ],
+    [
+      "decimals",
+      "number",
+      "0",
+      "Digits after the decimal point."
+    ],
+    [
+      "prefix / suffix",
+      "string",
+      "—",
+      "Static text around the number (\"₹\", \"%\")."
+    ],
+    [
+      "separator",
+      "string | false",
+      "\",\"",
+      "Thousands separator."
+    ],
+    [
+      "grouping",
+      "'thousands' | 'indian'",
+      "'thousands'",
+      "Digit grouping: 1,234,567 or lakh / crore style 12,34,567."
+    ],
+    [
+      "decimalSeparator",
+      "string",
+      "\".\"",
+      "Decimal point."
+    ],
+    [
+      "size",
+      "\"sm\" | \"md\" | \"lg\" | \"xl\" | number",
+      "\"md\"",
+      "18 / 28 / 40 / 56pt, or a font size."
+    ],
+    [
+      "fontWeight",
+      "TextStyle['fontWeight']",
+      "\"500\"",
+      "Weight of the digits."
+    ],
+    [
+      "color",
+      "string",
+      "theme foreground",
+      "Text colour."
+    ],
+    [
+      "flash",
+      "boolean",
+      "true",
+      "Tint green on increase, red on decrease."
+    ],
+    [
+      "animateOnMount",
+      "boolean",
+      "true",
+      "Roll up from zero on first render."
+    ],
+    [
+      "stagger",
+      "number",
+      "35",
+      "Delay between columns in ms."
+    ],
+    [
+      "textStyle",
+      "StyleProp<TextStyle>",
+      "—",
+      "Extra glyph styles."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the row of digits."
+    ]
+  ],
+  "examples": []
+}

package/registry/_docs/offers.json

@@ -0,0 +1,78 @@
+{
+  "name": "offers",
+  "category": "Blocks",
+  "aliases": [],
+  "exportName": "Offers",
+  "files": [
+    "src/components/blocks/offers.tsx"
+  ],
+  "props": [
+    [
+      "offers",
+      "Offer[]",
+      "sample food-delivery offers",
+      "Coupon props plus { id, category?, minOrder?, saves? } — saves is an amount or (total) => amount."
+    ],
+    [
+      "featuredId",
+      "string | null",
+      "first offer",
+      "The offer shown big at the top in 3D; null hides it."
+    ],
+    [
+      "cartTotal",
+      "number",
+      "549",
+      "Decides which coupons are locked and what you save."
+    ],
+    [
+      "appliedId / defaultAppliedId / onApply",
+      "string | null / string | null / (offer | null) => void",
+      "— / null / —",
+      "Controlled or uncontrolled applied coupon; null means removed."
+    ],
+    [
+      "onRedeemCode",
+      "(code) => Offer | null | Promise<…>",
+      "match by code",
+      "Look up a typed code (e.g. on your server)."
+    ],
+    [
+      "onCopy",
+      "(code) => void",
+      "—",
+      "Code chips — wire to expo-clipboard."
+    ],
+    [
+      "onBack",
+      "() => void",
+      "—",
+      "Shows the back button."
+    ],
+    [
+      "onDone",
+      "(offer | null) => void",
+      "—",
+      "Shows the To pay footer with a Done button."
+    ],
+    [
+      "currency / formatPrice",
+      "string / (amount) => string",
+      "'₹' / Indian grouping",
+      "Money formatting."
+    ],
+    [
+      "labels",
+      "Partial<OffersLabels>",
+      "English",
+      "Every string, with {code} and {amount} placeholders."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Root style."
+    ]
+  ],
+  "examples": []
+}