@expokit/cli 0.4.0 → 0.4.2

package/README.md

@@ -9,6 +9,23 @@
 The CLI for **[ExpoKit](https://expokit.in)** — animated UI components for Expo and React Native. It copies
 the component source into your app (like shadcn/ui), so you own the code.
 
+<p align="center">
+  <a href="https://expokit.in/showcase"><img src="https://expokit.in/readme/charts.gif" alt="ExpoKit charts on iPhone: scrubbing an area chart and a bar chart, dragging a gauge, tapping through a donut" width="720"></a>
+</p>
+
+<p align="center">
+  <a href="https://expokit.in/docs/components"><img src="https://expokit.in/readme/screens.jpg" alt="ExpoKit on iPhone in dark and light mode: payment card, flip card, dashboard block and checkout block" width="720"></a>
+  <br>
+  <sub>Payment card and flip card are free; the dashboard and checkout screens are <a href="https://expokit.in/pricing">Pro</a> blocks.</sub>
+</p>
+
+- **Buttons, inputs, cards, sheets, tabs, charts and full screens**, all animated, with light and dark mode
+- **Built for touch**: springs, drag gestures and haptics, on iOS, Android, web and in Expo Go
+- **You own the code**: plain typed files in your app, with no runtime library to lock you in
+
+**[Browse every component with live previews →](https://expokit.in/docs/components)** ·
+**[Try them on your phone in Expo Go →](https://expokit.in/docs/run-on-your-phone)**
+
 ## Usage
 
 In your Expo app's folder:

package/bin/lib.mjs

@@ -312,7 +312,7 @@ export function kitVersion(text) {
 }
 
 /**
- * Packages a registry item may depend on that work in the Expo Go app (SDK 58): native modules Expo Go
+ * Packages a registry item may depend on that work in the Expo Go app (SDK 57): native modules Expo Go
  * ships, plus pure-JS packages. Anything else needs a development build (`npx expo run:ios|android`).
  * Keep in sync with the Expo Go module list when the SDK moves.
  */

package/bin/liquidglass.mjs

@@ -0,0 +1,281 @@
+/**
+ * Pure helpers for the liquidglass-tab template (no I/O): which Expo Router API shape to write for
+ * the installed SDK, starter-app detection, and tabs.ts generation for an existing app.
+ */
+
+import { CliError } from './lib.mjs';
+
+// ---------------------------------------------------------------------------
+// Expo SDK → API shape
+// ---------------------------------------------------------------------------
+
+/** Newest SDK this CLI knows the API of; also assumed when neither expo nor expo-router is installed. */
+export const LATEST_KNOWN_SDK = 58;
+export const MIN_SDK = 54;
+
+/** "~6.0.24", "^54.0.0", "6.0.24", "54" → [6, 0, 24]; "latest", "*", "file:…" → null. */
+export function parseVersion(spec) {
+  const m = /^(?:[\^~]|>=?|=)?\s*v?(\d+)(?:\.(\d+))?(?:\.(\d+))?/.exec(String(spec ?? '').trim());
+  return m ? [Number(m[1]), Number(m[2] ?? 0), Number(m[3] ?? 0)] : null;
+}
+
+/** expo-router majors before it switched to SDK numbering (55.x = SDK 55). */
+const ROUTER_TO_SDK = { 6: 54, 5: 53, 4: 52, 3: 50, 2: 49 };
+
+/**
+ * What to write for an installed expo / expo-router (versions or package.json ranges):
+ *   SDK 54     NativeTabs + standalone Icon/Label/Badge/VectorIcon; Tabs from 'expo-router'
+ *   SDK 55     NativeTabs.Trigger.*; Tabs from 'expo-router'
+ *   SDK 56–57  NativeTabs.Trigger.*; Tabs from 'expo-router/js-tabs'; themes from 'expo-router'
+ *   SDK 58+    as 56–57, NativeTabs from 'expo-router/native-tabs'
+ */
+export function routerTarget({ router, expo } = {}) {
+  const r = parseVersion(router);
+  const e = parseVersion(expo);
+  let sdk = null;
+  let source = null;
+  if (r) {
+    sdk = r[0] >= 50 ? r[0] : (ROUTER_TO_SDK[r[0]] ?? (r[0] < 2 ? 48 : null));
+    source = `expo-router ${r.join('.')}`;
+  }
+  if (sdk === null && e) {
+    sdk = e[0];
+    source = `expo ${e.join('.')}`;
+  }
+  const assumed = sdk === null;
+  if (assumed) sdk = LATEST_KNOWN_SDK;
+  if (sdk < MIN_SDK) return { sdk, source, unsupported: true };
+  const legacyNav = sdk <= 55;
+  return {
+    sdk,
+    source: source ?? `assumed SDK ${sdk}`,
+    assumed,
+    icons: sdk === 54 ? 'standalone' : 'trigger',
+    nativeTabs: sdk >= 58 ? 'expo-router/native-tabs' : 'expo-router/unstable-native-tabs',
+    tabs: legacyNav ? 'expo-router' : 'expo-router/js-tabs',
+    tabBarProps: legacyNav ? '@react-navigation/bottom-tabs' : 'expo-router/js-tabs',
+    themes: legacyNav ? '@react-navigation/native' : 'expo-router',
+    /** Imported directly on SDK 54–55 (expo-router depends on them; strict installers need them listed). */
+    deps: legacyNav ? ['@react-navigation/bottom-tabs', '@react-navigation/native'] : [],
+  };
+}
+
+function replaceOnce(text, re, replacement, what) {
+  if (!re.test(text)) throw new CliError(`liquidglass-tab template changed shape (${what}) — update the CLI: npx @expokit/cli@latest`);
+  return text.replace(re, replacement);
+}
+
+/** Registry `src/`-relative paths in comments ("src/app/(tabs)", "src/lib/tabs.ts") → the project's folders. */
+export function localizePaths(text, paths = {}) {
+  const map = { app: paths.app, components: paths.components, lib: paths.lib };
+  return text.replace(/\bsrc\/(app|components|lib)\//g, (all, folder) => (map[folder] ? `${map[folder].replace(/\/+$/, '')}/` : all));
+}
+
+/** A template file rewritten for `target` (from routerTarget). Files without SDK-specific imports come back unchanged. */
+export function adaptLiquidGlassFile(rel, text, target) {
+  if (rel === 'components/LiquidGlassTabs.tsx') {
+    const standalone = target.icons === 'standalone';
+    const header =
+      `// Expo SDK ${target.sdk}${standalone ? ': standalone Icon / Label / Badge / VectorIcon (NativeTabs.Trigger.* is SDK 55+)' : ''}.\n` +
+      `// After upgrading Expo, run \`npx @expokit/cli@latest update\` to get the matching imports.\n` +
+      `import { Tabs } from '${target.tabs}';\n` +
+      (standalone
+        ? `import { Badge, Icon, Label, NativeTabs, VectorIcon } from '${target.nativeTabs}';\n`
+        : `import { NativeTabs } from '${target.nativeTabs}';\n`);
+    let out = replaceOnce(
+      text,
+      /\/\/ Written for your Expo SDK[^\n]*\n\/\/[^\n]*\nimport \{ Tabs \} from 'expo-router\/js-tabs';\nimport \{ NativeTabs \} from 'expo-router\/unstable-native-tabs';\n/,
+      header,
+      'LiquidGlassTabs imports'
+    );
+    if (standalone) out = out.replace(/\bNativeTabs\.Trigger\.(Icon|Label|Badge|VectorIcon)\b/g, '$1');
+    return out;
+  }
+  if (rel === 'components/GlassTabBar.tsx') {
+    return replaceOnce(
+      text,
+      /\/\/ '@react-navigation\/bottom-tabs' on SDK[^\n]*\nimport type \{ BottomTabBarProps \} from 'expo-router\/js-tabs';\n/,
+      `import type { BottomTabBarProps } from '${target.tabBarProps}';\n`,
+      'GlassTabBar imports'
+    );
+  }
+  if (rel === 'app/_layout.tsx') {
+    const imports =
+      target.themes === 'expo-router'
+        ? "// SDK 56+: navigation themes come from expo-router itself. Using @react-navigation/native's\n" +
+          '// ThemeProvider here does nothing (expo-router ships its own copy) and causes a white flash.\n' +
+          "import { DarkTheme, DefaultTheme, Slot, ThemeProvider } from 'expo-router';\n"
+        : "import { Slot } from 'expo-router';\n" +
+          `// SDK ${target.sdk}: navigation themes come from React Navigation (expo-router re-exports them from SDK 56).\n` +
+          "import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';\n";
+    return replaceOnce(
+      text,
+      /\/\/ Navigation themes:[^\n]*\n\/\/[^\n]*\nimport \{ DarkTheme, DefaultTheme, Slot, ThemeProvider \} from 'expo-router';\n/,
+      imports,
+      'root layout imports'
+    );
+  }
+  return text;
+}
+
+// ---------------------------------------------------------------------------
+// Existing apps: routes → tabs.ts
+// ---------------------------------------------------------------------------
+
+const ROUTE_EXT = /\.(tsx|ts|jsx|js)$/;
+const PLATFORM_EXT = /\.(ios|android|web|native)$/;
+
+/**
+ * Tab names of a navigator from the entries of its folder (`{ name, dir }`): route files minus
+ * platform suffixes, and sub-folders. Skips layouts, `+not-found`-style special files and `_`/`.` names.
+ */
+export function routeNamesFromEntries(entries) {
+  const names = [];
+  for (const { name, dir } of entries) {
+    if (name.startsWith('.') || name.startsWith('_') || name.startsWith('+')) continue;
+    let route;
+    if (dir) route = name;
+    else {
+      if (!ROUTE_EXT.test(name) || name.endsWith('.d.ts')) continue;
+      route = name.replace(ROUTE_EXT, '').replace(PLATFORM_EXT, '');
+    }
+    if (!names.includes(route)) names.push(route);
+  }
+  return names;
+}
+
+/** "index" → "Home", "my-cards" → "My cards", "[id]" → "Id". */
+export function tabTitle(name) {
+  if (name === 'index') return 'Home';
+  const words = String(name).replace(/[[\]().]/g, ' ').split(/[\s_-]+/).filter(Boolean);
+  if (!words.length) return String(name);
+  const text = words.join(' ').toLowerCase();
+  return text.charAt(0).toUpperCase() + text.slice(1);
+}
+
+/**
+ * Tab order and titles from an existing layout: `<Tabs.Screen name="x" options={{ title: 'X' }}>` or
+ * `<NativeTabs.Trigger name="x"><…Label>X</…Label>`. Best effort — unknown shapes give [].
+ */
+export function readTabsFromLayout(text) {
+  const src = String(text ?? '');
+  const re = /<(Tabs\.Screen|NativeTabs\.Trigger)\b[^>]*?\bname=["'{]+([^"'}]+)["'}]+/g;
+  const hits = [...src.matchAll(re)];
+  return hits.map((m, i) => {
+    const end = i + 1 < hits.length ? hits[i + 1].index : src.length;
+    const block = src.slice(m.index, end);
+    const title =
+      /\btitle:\s*["']([^"']+)["']/.exec(block)?.[1] ??
+      /<(?:NativeTabs\.Trigger\.)?Label\b[^>]*>\s*([^<{]+?)\s*<\//.exec(block)?.[1] ??
+      null;
+    return { name: m[2], title };
+  });
+}
+
+/** [match words, SF Symbol default/selected, Ionicons default/selected] — a sensible icon per common tab name. */
+const ICON_GUESSES = [
+  [['index', 'home', 'feed'], 'house', 'house.fill', 'home-outline', 'home'],
+  [['explore', 'discover', 'browse'], 'safari', 'safari.fill', 'compass-outline', 'compass'],
+  [['search', 'find'], 'magnifyingglass', 'magnifyingglass', 'search-outline', 'search'],
+  [['profile', 'account', 'me', 'you', 'user'], 'person.crop.circle', 'person.crop.circle.fill', 'person-circle-outline', 'person-circle'],
+  [['settings', 'preferences'], 'gearshape', 'gearshape.fill', 'settings-outline', 'settings'],
+  [['alerts', 'notifications', 'activity'], 'bell', 'bell.fill', 'notifications-outline', 'notifications'],
+  [['messages', 'chat', 'chats', 'inbox'], 'bubble.left.and.bubble.right', 'bubble.left.and.bubble.right.fill', 'chatbubbles-outline', 'chatbubbles'],
+  [['cart', 'bag', 'shop', 'store', 'orders'], 'bag', 'bag.fill', 'bag-outline', 'bag'],
+  [['favorites', 'favourites', 'likes', 'saved'], 'heart', 'heart.fill', 'heart-outline', 'heart'],
+  [['cards', 'wallet', 'pay', 'payments'], 'creditcard', 'creditcard.fill', 'card-outline', 'card'],
+  [['calendar', 'schedule', 'events'], 'calendar', 'calendar', 'calendar-outline', 'calendar'],
+  [['library', 'books'], 'books.vertical', 'books.vertical.fill', 'library-outline', 'library'],
+];
+
+export function guessTabIcon(name) {
+  const key = String(name).toLowerCase().replace(/[^a-z]/g, '');
+  const hit = ICON_GUESSES.find(([words]) => words.includes(key)) ?? ICON_GUESSES.find(([words]) => words.some((w) => key.includes(w)));
+  const [, sf, sfSelected, ion, ionSelected] = hit ?? [null, 'circle', 'circle.fill', 'ellipse-outline', 'ellipse'];
+  return { sf, sfSelected, ion, ionSelected };
+}
+
+const q = (s) => `'${String(s).replace(/\\/g, '\\\\').replace(/'/g, "\\'")}'`;
+
+/** One TABS entry (same layout as the template's, so parseTabNamesFromConfig reads it back). */
+export function tabEntrySource({ name, title }) {
+  const icon = guessTabIcon(name);
+  const sf = icon.sf === icon.sfSelected ? q(icon.sf) : `{ default: ${q(icon.sf)}, selected: ${q(icon.sfSelected)} }`;
+  const lines = [
+    '  {',
+    `    name: ${q(name)},`,
+    `    title: ${q(title ?? tabTitle(name))},`,
+    ...(/^\[.*\]$/.test(name) ? ['    hidden: true,'] : []),
+    `    sf: ${sf},`,
+    `    icon: { set: 'Ionicons', name: ${q(icon.ion)}, selected: ${q(icon.ionSelected)} },`,
+    '  },',
+  ];
+  return lines.join('\n');
+}
+
+/**
+ * Tabs for an existing app: its route names, ordered and titled like its current layout when that
+ * layout names them, `index` first otherwise.
+ */
+export function tabsFromRoutes(routes, layoutTabs = []) {
+  const known = layoutTabs.filter((t) => routes.includes(t.name));
+  const rest = routes.filter((r) => !known.some((t) => t.name === r)).sort((a, b) => (a === 'index' ? -1 : b === 'index' ? 1 : a.localeCompare(b)));
+  return [...known.map((t) => ({ name: t.name, title: t.title ?? tabTitle(t.name) })), ...rest.map((name) => ({ name, title: tabTitle(name) }))];
+}
+
+/** The template's tabs.ts with its TABS list replaced by `tabs`. */
+export function replaceTabsList(tabsTs, tabs) {
+  const body = tabs.map(tabEntrySource).join('\n');
+  return replaceOnce(tabsTs, /export const TABS: TabItem\[\] = \[[\s\S]*?\n\];/, `export const TABS: TabItem[] = [\n${body}\n];`, 'tabs.ts TABS');
+}
+
+// ---------------------------------------------------------------------------
+// create-expo-app starters (safe to replace: nothing of the user's in them yet)
+// ---------------------------------------------------------------------------
+
+/** SDK 54 starter app/(tabs)/_layout.tsx: JS Tabs with HapticTab + IconSymbol. */
+export function isStarterTabsLayout(text) {
+  const s = String(text ?? '');
+  return /from ['"]@\/components\/haptic-?tab['"]/i.test(s) && /IconSymbol/.test(s) && !/Redirect|useAuth|useSession/.test(s);
+}
+
+/** SDK 55+ starter components/app-tabs(.web).tsx: the starter's two tabs (index, explore). */
+export function isStarterAppTabs(text) {
+  const s = String(text ?? '');
+  if (/Redirect|useAuth|useSession/.test(s)) return false;
+  const native = /tabIcons\/home\.png/.test(s) && /tabIcons\/explore\.png/.test(s);
+  const web = /from ['"]expo-router\/ui['"]/.test(s) && /TabList/.test(s) && /href=["']\/explore["']/.test(s);
+  return native || web;
+}
+
+/** create-expo-app root layouts (SDK 54: Stack anchored on (tabs) + modal; SDK 55+: AnimatedSplashOverlay + AppTabs). */
+export function isStarterRootLayout(text) {
+  const s = String(text ?? '');
+  const sdk54 = /anchor:\s*['"]\(tabs\)['"]/.test(s) && /name=["']modal["']/.test(s);
+  const sdk55 = /AnimatedSplashOverlay/.test(s) && /AppTabs/.test(s);
+  const providers = [...s.matchAll(/<(\w+Provider)\b/g)].map((m) => m[1]).filter((p) => p !== 'ThemeProvider');
+  return (sdk54 || sdk55) && !providers.length && !/Redirect/.test(s);
+}
+
+/** Files the template ships that a later `update` may refresh: anything that names its building blocks. */
+export function isLiquidGlassSource(text) {
+  return /\b(USE_NATIVE_TABS|LiquidGlassTabs|GlassTabBar|TabScreenFromConfig|tabBarCollapse|asFamily|TAB_BAR)\b/.test(String(text ?? ''));
+}
+
+// ---------------------------------------------------------------------------
+// package.json diff (what `npx expo install` changed)
+// ---------------------------------------------------------------------------
+
+/** `{ added: [[name, version]], changed: [[name, from, to]] }` between two package.json objects. */
+export function diffDependencies(before = {}, after = {}) {
+  const all = (pkg) => ({ ...pkg?.devDependencies, ...pkg?.dependencies });
+  const a = all(before);
+  const b = all(after);
+  const added = [];
+  const changed = [];
+  for (const [name, version] of Object.entries(b)) {
+    if (!(name in a)) added.push([name, version]);
+    else if (a[name] !== version) changed.push([name, a[name], version]);
+  }
+  return { added, changed };
+}

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@expokit/cli",
-  "version": "0.4.0",
-  "description": "shadcn-style CLI for Expo — add native UI blocks and components to your app",
+  "version": "0.4.2",
+  "mcpName": "io.github.Anshkaran7/expokit",
+  "description": "Animated UI components for Expo and React Native — a shadcn-style CLI that copies buttons, inputs, cards, charts and full screens into your app",
   "license": "MIT",
   "type": "module",
   "bin": {
@@ -17,9 +18,22 @@
   "keywords": [
     "expo",
     "react-native",
-    "cli",
+    "react-native-ui",
+    "ui-components",
+    "components",
+    "component-library",
+    "ui-kit",
     "ui",
+    "design-system",
+    "animation",
+    "animated",
+    "haptics",
+    "dark-mode",
+    "ios",
+    "android",
     "shadcn",
+    "shadcn-ui",
+    "cli",
     "liquid-glass",
     "native-tabs",
     "expo-router"

package/registry/_docs/accordion.json

@@ -104,7 +104,7 @@
     {
       "name": "SeparatedCards",
       "title": "Separated Cards",
-      "code": "import { Text, View } from 'react-native';\nimport { Accordion, AccordionItem } from '@/components/ui/accordion';\n\nexport default function SeparatedCards() {\n  return (\n    <Accordion variant=\"separated\">\n      {[\n        ['🔒', 'Is my data encrypted?', 'Everything is encrypted in transit with TLS 1.3 and at rest with AES-256. Keys rotate every 90 days.'],\n        ['💳', 'Do you offer refunds?', 'If ExpoKit is not for you, email us within 14 days of purchase and we will refund you in full.'],\n        ['🌍', 'Which regions do you host in?', 'Frankfurt, Virginia and Singapore. Pick a region when you create a project.'],\n      ].map(([icon, q, a]) => (\n        <AccordionItem key={q} value={q} title={q} icon={<Text style={{ fontSize: 18 }}>{icon}</Text>}>\n          {a}\n        </AccordionItem>\n      ))}\n    </Accordion>\n  );\n}\n"
+      "code": "import { Text, View } from 'react-native';\nimport { Accordion, AccordionItem } from '@/components/ui/accordion';\n\n/** Controls stop at iOS's largest standard text size; content text stays uncapped. */\nconst FONT_CAP = 1.35;\n\nexport default function SeparatedCards() {\n  return (\n    <Accordion variant=\"separated\">\n      {[\n        ['🔒', 'Is my data encrypted?', 'Everything is encrypted in transit with TLS 1.3 and at rest with AES-256. Keys rotate every 90 days.'],\n        ['💳', 'Do you offer refunds?', 'If ExpoKit is not for you, email us within 14 days of purchase and we will refund you in full.'],\n        ['🌍', 'Which regions do you host in?', 'Frankfurt, Virginia and Singapore. Pick a region when you create a project.'],\n      ].map(([icon, q, a]) => (\n        <AccordionItem key={q} value={q} title={q} icon={<Text maxFontSizeMultiplier={FONT_CAP} style={{ fontSize: 18 }}>{icon}</Text>}>\n          {a}\n        </AccordionItem>\n      ))}\n    </Accordion>\n  );\n}\n"
     },
     {
       "name": "Controlled",

package/registry/_docs/avatar.json

@@ -186,22 +186,22 @@
     {
       "name": "ProfileHeader",
       "title": "Profile Header",
-      "code": "import { Pressable, ScrollView, Text, View } from 'react-native';\nimport { Avatar, AvatarGroup } from '@/components/ui/avatar';\nimport { alpha, 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 ProfileHeader({ screen }: DemoProps) {\n  const { colors, radius, dark } = useKit();\n  return (\n    <View\n      style={[\n        { alignItems: 'center', gap: 12, paddingVertical: 20, paddingHorizontal: 16 },\n        screen\n          ? { flex: 1, justifyContent: 'center', backgroundColor: colors.background }\n          : { borderRadius: radius.xl, backgroundColor: colors.card, borderWidth: 1, borderColor: alpha(colors.foreground, dark ? 0.1 : 0.06) },\n      ]}\n    >\n      <Avatar\n        size={88}\n        src=\"https://i.pravatar.cc/240?img=47\"\n        name=\"Ava Rossi\"\n        ring=\"story\"\n        verified\n        surface={screen ? colors.background : colors.card}\n        elevated\n      />\n      <View style={{ alignItems: 'center', gap: 2 }}>\n        <Text style={{ fontSize: 19, fontWeight: '400', letterSpacing: -0.3, color: colors.foreground }}>Ava Rossi</Text>\n        <Text style={{ fontSize: 14, color: colors.mutedForeground }}>Product designer · Milan</Text>\n      </View>\n      <View style={{ flexDirection: 'row', gap: 24, marginTop: 4 }}>\n        {[\n          ['248', 'Posts'],\n          ['12.4k', 'Followers'],\n          ['311', 'Following'],\n        ].map(([n, l]) => (\n          <View key={l} style={{ alignItems: 'center' }}>\n            <Text style={{ fontSize: 16, color: colors.foreground, fontVariant: ['tabular-nums'] }}>{n}</Text>\n            <Text style={{ fontSize: 12, color: colors.mutedForeground }}>{l}</Text>\n          </View>\n        ))}\n      </View>\n    </View>\n  );\n}\n"
+      "code": "import { Pressable, ScrollView, Text, View } from 'react-native';\nimport { Avatar, AvatarGroup } from '@/components/ui/avatar';\nimport { alpha, 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 ProfileHeader({ screen }: DemoProps) {\n  const { colors, radius, dark } = useKit();\n  return (\n    <View\n      style={[\n        { alignItems: 'center', gap: 12, paddingVertical: 20, paddingHorizontal: 16 },\n        screen\n          ? { flex: 1, justifyContent: 'center', backgroundColor: colors.background }\n          : { borderRadius: radius.xl, backgroundColor: colors.card, borderWidth: 1, borderColor: alpha(colors.foreground, dark ? 0.1 : 0.06) },\n      ]}\n    >\n      <Avatar\n        size={88}\n        src=\"https://i.pravatar.cc/240?img=47\"\n        name=\"Ava Rossi\"\n        ring=\"story\"\n        verified\n        surface={screen ? colors.background : colors.card}\n        elevated\n      />\n      <View style={{ alignItems: 'center', gap: 2 }}>\n        <Text style={{ fontSize: 19, fontWeight: '400', letterSpacing: -0.3, color: colors.foreground }}>Ava Rossi</Text>\n        <Text style={{ fontSize: 14, color: colors.mutedForeground }}>Product designer · Milan</Text>\n      </View>\n      <View style={{ flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'center', gap: 24, marginTop: 4 }}>\n        {[\n          ['248', 'Posts'],\n          ['12.4k', 'Followers'],\n          ['311', 'Following'],\n        ].map(([n, l]) => (\n          <View key={l} style={{ alignItems: 'center' }}>\n            <Text style={{ fontSize: 16, color: colors.foreground, fontVariant: ['tabular-nums'] }}>{n}</Text>\n            <Text style={{ fontSize: 12, color: colors.mutedForeground }}>{l}</Text>\n          </View>\n        ))}\n      </View>\n    </View>\n  );\n}\n"
     },
     {
       "name": "ChatList",
       "title": "Chat List",
-      "code": "import { Pressable, ScrollView, Text, View } from 'react-native';\nimport { Avatar, AvatarGroup } from '@/components/ui/avatar';\nimport { alpha, useKit } from '@/lib/kit';\n\nexport default function ChatList() {\n  const { colors } = useKit();\n  const chats = [\n    { name: 'Noah Kim', src: 'https://i.pravatar.cc/150?img=59', status: 'online', msg: 'Pushed the fix — can you re-test?', time: '9:41', unread: 2 },\n    { name: 'Priya Patel', status: 'away', msg: 'Sounds good, see you at 3.', time: '9:12', unread: 0 },\n    { name: 'Diego Alvarez', src: 'https://i.pravatar.cc/150?img=12', status: 'busy', msg: 'In a call until noon', time: 'Mon', unread: 0 },\n    { name: 'Hannah Lee', status: 'offline', msg: 'Thanks for the notes!', time: 'Sun', unread: 0 },\n  ] as const;\n  return (\n    <View>\n      {chats.map((c, i) => (\n        <View\n          key={c.name}\n          style={{\n            flexDirection: 'row',\n            alignItems: 'center',\n            gap: 12,\n            paddingVertical: 10,\n            borderTopWidth: i ? 1 : 0,\n            borderTopColor: alpha(colors.foreground, 0.06),\n          }}\n        >\n          <Avatar size={48} name={c.name} src={'src' in c ? c.src : undefined} status={c.status} />\n          <View style={{ flex: 1, minWidth: 0 }}>\n            <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>\n              <Text style={{ fontSize: 15, color: colors.foreground }}>{c.name}</Text>\n              <Text style={{ fontSize: 12, color: c.unread ? colors.accent : colors.mutedForeground }}>{c.time}</Text>\n            </View>\n            <Text numberOfLines={1} style={{ fontSize: 14, color: colors.mutedForeground, marginTop: 2 }}>\n              {c.msg}\n            </Text>\n          </View>\n        </View>\n      ))}\n    </View>\n  );\n}\n"
+      "code": "import { Pressable, ScrollView, Text, View } from 'react-native';\nimport { Avatar, AvatarGroup } from '@/components/ui/avatar';\nimport { alpha, useKit } from '@/lib/kit';\n\nexport default function ChatList() {\n  const { colors } = useKit();\n  const chats = [\n    { name: 'Noah Kim', src: 'https://i.pravatar.cc/150?img=59', status: 'online', msg: 'Pushed the fix — can you re-test?', time: '9:41', unread: 2 },\n    { name: 'Priya Patel', status: 'away', msg: 'Sounds good, see you at 3.', time: '9:12', unread: 0 },\n    { name: 'Diego Alvarez', src: 'https://i.pravatar.cc/150?img=12', status: 'busy', msg: 'In a call until noon', time: 'Mon', unread: 0 },\n    { name: 'Hannah Lee', status: 'offline', msg: 'Thanks for the notes!', time: 'Sun', unread: 0 },\n  ] as const;\n  return (\n    <View>\n      {chats.map((c, i) => (\n        <View\n          key={c.name}\n          style={{\n            flexDirection: 'row',\n            alignItems: 'center',\n            gap: 12,\n            paddingVertical: 10,\n            borderTopWidth: i ? 1 : 0,\n            borderTopColor: alpha(colors.foreground, 0.06),\n          }}\n        >\n          <Avatar size={48} name={c.name} src={'src' in c ? c.src : undefined} status={c.status} />\n          <View style={{ flex: 1, minWidth: 0 }}>\n            <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>\n              <Text style={{ flexShrink: 1, fontSize: 15, color: colors.foreground }}>{c.name}</Text>\n              <Text style={{ fontSize: 12, color: c.unread ? colors.accent : colors.mutedForeground }}>{c.time}</Text>\n            </View>\n            <Text numberOfLines={1} style={{ fontSize: 14, color: colors.mutedForeground, marginTop: 2 }}>\n              {c.msg}\n            </Text>\n          </View>\n        </View>\n      ))}\n    </View>\n  );\n}\n"
     },
     {
       "name": "Stories",
       "title": "Stories",
-      "code": "import React, { useState } from 'react';\nimport { Pressable, ScrollView, Text, View } from 'react-native';\nimport { Avatar, AvatarGroup } from '@/components/ui/avatar';\nimport { alpha, useKit } from '@/lib/kit';\n\nexport default function Stories() {\n  const { colors } = useKit();\n  const [seen, setSeen] = useState<string[]>(['Theo']);\n  const people = [\n    { name: 'Kai Müller', short: 'Kai', img: 11 },\n    { name: 'Mila Novak', short: 'Mila', img: 25 },\n    { name: 'Theo Grant', short: 'Theo', img: 33 },\n    { name: 'Nora Ali', short: 'Nora', img: 41 },\n    { name: 'Sam Ortiz', short: 'Sam', img: 0 },\n    { name: 'Lucía Romero', short: 'Lucía', img: 44 },\n  ];\n  return (\n    <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ gap: 14, paddingRight: 8 }}>\n      {people.map((p, i) => (\n        <View key={p.short} style={{ alignItems: 'center', gap: 6 }}>\n          <Avatar\n            size=\"lg\"\n            src={p.img ? `https://i.pravatar.cc/150?img=${p.img}` : undefined}\n            name={p.name}\n            ring=\"story\"\n            seen={seen.includes(p.short)}\n            ringSpin={i === 1 && !seen.includes(p.short)}\n            onPress={() => setSeen((s) => (s.includes(p.short) ? s.filter((n) => n !== p.short) : [...s, p.short]))}\n          />\n          <Text style={{ fontSize: 12, color: seen.includes(p.short) ? colors.mutedForeground : colors.foreground }}>{p.short}</Text>\n        </View>\n      ))}\n    </ScrollView>\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { Pressable, ScrollView, Text, View } from 'react-native';\nimport { Avatar, AvatarGroup } from '@/components/ui/avatar';\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\nexport default function Stories() {\n  const { colors } = useKit();\n  const [seen, setSeen] = useState<string[]>(['Theo']);\n  const people = [\n    { name: 'Kai Müller', short: 'Kai', img: 11 },\n    { name: 'Mila Novak', short: 'Mila', img: 25 },\n    { name: 'Theo Grant', short: 'Theo', img: 33 },\n    { name: 'Nora Ali', short: 'Nora', img: 41 },\n    { name: 'Sam Ortiz', short: 'Sam', img: 0 },\n    { name: 'Lucía Romero', short: 'Lucía', img: 44 },\n  ];\n  return (\n    <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ gap: 14, paddingRight: 8 }}>\n      {people.map((p, i) => (\n        <View key={p.short} style={{ alignItems: 'center', gap: 6 }}>\n          <Avatar\n            size=\"lg\"\n            src={p.img ? `https://i.pravatar.cc/150?img=${p.img}` : undefined}\n            name={p.name}\n            ring=\"story\"\n            seen={seen.includes(p.short)}\n            ringSpin={i === 1 && !seen.includes(p.short)}\n            onPress={() => setSeen((s) => (s.includes(p.short) ? s.filter((n) => n !== p.short) : [...s, p.short]))}\n          />\n          <Text maxFontSizeMultiplier={FONT_CAP} style={{ fontSize: 12, color: seen.includes(p.short) ? colors.mutedForeground : colors.foreground }}>{p.short}</Text>\n        </View>\n      ))}\n    </ScrollView>\n  );\n}\n"
     },
     {
       "name": "Group",
       "title": "Group",
-      "code": "import { Pressable, ScrollView, Text, View } from 'react-native';\nimport { Avatar, AvatarGroup } from '@/components/ui/avatar';\nimport { alpha, useKit } from '@/lib/kit';\n\nexport default function Group() {\n  const { colors, radius, dark } = useKit();\n  return (\n    <View style={{ gap: 14 }}>\n      <View\n        style={{\n          padding: 14,\n          gap: 12,\n          borderRadius: radius.lg,\n          backgroundColor: colors.card,\n          borderWidth: 1,\n          borderColor: alpha(colors.foreground, dark ? 0.1 : 0.06),\n        }}\n      >\n        <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>\n          <View>\n            <Text style={{ fontSize: 15, color: colors.foreground }}>Mobile launch</Text>\n            <Text style={{ fontSize: 13, color: colors.mutedForeground }}>Design · Engineering</Text>\n          </View>\n          <AvatarGroup max={4} total={9} surface={colors.card} size=\"sm\" onPressMore={() => {}}>\n            {[8, 16, 26, 36, 48].map((n, i) => (\n              <Avatar key={n} src={`https://i.pravatar.cc/150?img=${n}`} name={['Maya Chen', 'Leo Park', 'Ava Rossi', 'Noah Kim', 'Zoe Martin'][i]} />\n            ))}\n          </AvatarGroup>\n        </View>\n      </View>\n      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>\n        <AvatarGroup size=\"sm\" max={3} total={1284}>\n          <Avatar name=\"Ana Silva\" />\n          <Avatar name=\"Ben Carter\" />\n          <Avatar name=\"Chloe Dubois\" />\n        </AvatarGroup>\n        <Text style={{ fontSize: 13, color: colors.mutedForeground }}>1,284 members</Text>\n      </View>\n      <AvatarGroup size=\"lg\" shape=\"rounded\" max={5}>\n        {['Priya Patel', 'Omar Haddad', 'Sven Larsen', 'Iris Okafor'].map((n) => (\n          <Avatar key={n} name={n} />\n        ))}\n      </AvatarGroup>\n    </View>\n  );\n}\n"
+      "code": "import { Pressable, ScrollView, Text, View } from 'react-native';\nimport { Avatar, AvatarGroup } from '@/components/ui/avatar';\nimport { alpha, useKit } from '@/lib/kit';\n\nexport default function Group() {\n  const { colors, radius, dark } = useKit();\n  return (\n    <View style={{ gap: 14 }}>\n      <View\n        style={{\n          padding: 14,\n          gap: 12,\n          borderRadius: radius.lg,\n          backgroundColor: colors.card,\n          borderWidth: 1,\n          borderColor: alpha(colors.foreground, dark ? 0.1 : 0.06),\n        }}\n      >\n        <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>\n          <View style={{ flexShrink: 1 }}>\n            <Text style={{ fontSize: 15, color: colors.foreground }}>Mobile launch</Text>\n            <Text style={{ fontSize: 13, color: colors.mutedForeground }}>Design · Engineering</Text>\n          </View>\n          <AvatarGroup max={4} total={9} surface={colors.card} size=\"sm\" onPressMore={() => {}}>\n            {[8, 16, 26, 36, 48].map((n, i) => (\n              <Avatar key={n} src={`https://i.pravatar.cc/150?img=${n}`} name={['Maya Chen', 'Leo Park', 'Ava Rossi', 'Noah Kim', 'Zoe Martin'][i]} />\n            ))}\n          </AvatarGroup>\n        </View>\n      </View>\n      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>\n        <AvatarGroup size=\"sm\" max={3} total={1284}>\n          <Avatar name=\"Ana Silva\" />\n          <Avatar name=\"Ben Carter\" />\n          <Avatar name=\"Chloe Dubois\" />\n        </AvatarGroup>\n        <Text style={{ flexShrink: 1, fontSize: 13, color: colors.mutedForeground }}>1,284 members</Text>\n      </View>\n      <AvatarGroup size=\"lg\" shape=\"rounded\" max={5}>\n        {['Priya Patel', 'Omar Haddad', 'Sven Larsen', 'Iris Okafor'].map((n) => (\n          <Avatar key={n} name={n} />\n        ))}\n      </AvatarGroup>\n    </View>\n  );\n}\n"
     },
     {
       "name": "Fallbacks",
@@ -216,12 +216,12 @@
     {
       "name": "Status",
       "title": "Status",
-      "code": "import { Pressable, ScrollView, Text, View } from 'react-native';\nimport { Avatar, AvatarGroup } from '@/components/ui/avatar';\nimport { alpha, useKit } from '@/lib/kit';\n\nexport default function Status() {\n  const { colors } = useKit();\n  const rows = [\n    { name: 'Ethan Brooks', img: 15, status: 'online' },\n    { name: 'Lina Novak', img: 44, status: 'away' },\n    { name: 'Marcus Hill', img: 68, status: 'busy' },\n    { name: 'Iris Okafor', img: 0, status: 'offline' },\n  ] as const;\n  return (\n    <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>\n      {rows.map((r) => (\n        <View key={r.name} style={{ alignItems: 'center', gap: 6 }}>\n          <Avatar size=\"lg\" src={r.img ? `https://i.pravatar.cc/150?img=${r.img}` : undefined} name={r.name} status={r.status} />\n          <Text style={{ fontSize: 12, color: colors.mutedForeground }}>{r.status[0].toUpperCase() + r.status.slice(1)}</Text>\n        </View>\n      ))}\n    </View>\n  );\n}\n"
+      "code": "import { Pressable, ScrollView, Text, View } from 'react-native';\nimport { Avatar, AvatarGroup } from '@/components/ui/avatar';\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\nexport default function Status() {\n  const { colors } = useKit();\n  const rows = [\n    { name: 'Ethan Brooks', img: 15, status: 'online' },\n    { name: 'Lina Novak', img: 44, status: 'away' },\n    { name: 'Marcus Hill', img: 68, status: 'busy' },\n    { name: 'Iris Okafor', img: 0, status: 'offline' },\n  ] as const;\n  return (\n    <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>\n      {rows.map((r) => (\n        <View key={r.name} style={{ alignItems: 'center', gap: 6 }}>\n          <Avatar size=\"lg\" src={r.img ? `https://i.pravatar.cc/150?img=${r.img}` : undefined} name={r.name} status={r.status} />\n          <Text maxFontSizeMultiplier={FONT_CAP} style={{ fontSize: 12, color: colors.mutedForeground }}>{r.status[0].toUpperCase() + r.status.slice(1)}</Text>\n        </View>\n      ))}\n    </View>\n  );\n}\n"
     },
     {
       "name": "Badges",
       "title": "Badges",
-      "code": "import React, { useState } from 'react';\nimport { Pressable, ScrollView, Text, View } from 'react-native';\nimport { Avatar, AvatarGroup } from '@/components/ui/avatar';\nimport { alpha, useKit } from '@/lib/kit';\n\nexport default function Badges() {\n  const { colors } = useKit();\n  const [count, setCount] = useState(3);\n  return (\n    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 22 }}>\n      <Pressable accessibilityRole=\"button\" accessibilityLabel=\"Add a notification\" onPress={() => setCount((c) => c + 1)} style={{ alignItems: 'center', gap: 6 }}>\n        <Avatar size=\"lg\" src=\"https://i.pravatar.cc/150?img=22\" name=\"Maya Chen\" badge={count} />\n        <Text style={{ fontSize: 12, color: colors.mutedForeground }}>Tap +1</Text>\n      </Pressable>\n      <View style={{ alignItems: 'center', gap: 6 }}>\n        <Avatar size=\"lg\" src=\"https://i.pravatar.cc/150?img=9\" name=\"Leo Park\" badge={128} status=\"online\" />\n        <Text style={{ fontSize: 12, color: colors.mutedForeground }}>Mentions</Text>\n      </View>\n      <View style={{ alignItems: 'center', gap: 6 }}>\n        <Avatar size=\"lg\" name=\"Design Team\" shape=\"rounded\" badge verified />\n        <Text style={{ fontSize: 12, color: colors.mutedForeground }}>Workspace</Text>\n      </View>\n    </View>\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { Pressable, ScrollView, Text, View } from 'react-native';\nimport { Avatar, AvatarGroup } from '@/components/ui/avatar';\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\nexport default function Badges() {\n  const { colors } = useKit();\n  const [count, setCount] = useState(3);\n  return (\n    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 22 }}>\n      <Pressable accessibilityRole=\"button\" accessibilityLabel=\"Add a notification\" onPress={() => setCount((c) => c + 1)} style={{ alignItems: 'center', gap: 6 }}>\n        <Avatar size=\"lg\" src=\"https://i.pravatar.cc/150?img=22\" name=\"Maya Chen\" badge={count} />\n        <Text maxFontSizeMultiplier={FONT_CAP} style={{ fontSize: 12, color: colors.mutedForeground }}>Tap +1</Text>\n      </Pressable>\n      <View style={{ alignItems: 'center', gap: 6 }}>\n        <Avatar size=\"lg\" src=\"https://i.pravatar.cc/150?img=9\" name=\"Leo Park\" badge={128} status=\"online\" />\n        <Text maxFontSizeMultiplier={FONT_CAP} style={{ fontSize: 12, color: colors.mutedForeground }}>Mentions</Text>\n      </View>\n      <View style={{ alignItems: 'center', gap: 6 }}>\n        <Avatar size=\"lg\" name=\"Design Team\" shape=\"rounded\" badge verified />\n        <Text maxFontSizeMultiplier={FONT_CAP} style={{ fontSize: 12, color: colors.mutedForeground }}>Workspace</Text>\n      </View>\n    </View>\n  );\n}\n"
     }
   ]
 }

package/registry/_docs/badge.json

@@ -132,17 +132,17 @@
     {
       "name": "LiveStatus",
       "title": "Live Status",
-      "code": "import React, { useEffect, useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { Badge, BadgeIcon, BadgeIconTile, NotificationBadge, type BadgeIconName, type BadgeTone } from '@/components/ui/badge';\nimport { alpha, useKit } from '@/lib/kit';\n\nconst DEPLOY: { label: string; tone: BadgeTone; icon: BadgeIconName }[] = [\n  { label: 'Queued', tone: 'neutral', icon: 'clock' },\n  { label: 'Building', tone: 'warning', icon: 'refresh' },\n  { label: 'Deployed', tone: 'success', icon: 'check' },\n  { label: 'Failed', tone: 'danger', icon: 'alert' },\n];\n\nexport default function LiveStatus() {\n  const { colors } = useKit();\n  const [step, setStep] = useState(0);\n  useEffect(() => {\n    const id = setInterval(() => setStep((i) => (i + 1) % DEPLOY.length), 1800);\n    return () => clearInterval(id);\n  }, []);\n  const { label, tone, icon } = DEPLOY[step];\n  const tint = { neutral: colors.mutedForeground, accent: colors.accent, success: colors.success, warning: colors.warning, danger: colors.danger }[tone];\n  return (\n    <View style={{ gap: 12 }}>\n      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>\n        <Text style={{ fontSize: 15, color: colors.foreground }}>web-checkout #482</Text>\n        <Badge tone={tone} icon={<BadgeIcon name={icon} color={tint} size={14} />}>\n          {label}\n        </Badge>\n      </View>\n      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>\n        <Text style={{ fontSize: 15, color: colors.foreground }}>api-gateway #117</Text>\n        <Badge variant=\"solid\" tone={tone} size=\"lg\">\n          {label}\n        </Badge>\n        <Badge variant=\"dot\" tone={tone} pulse={tone === 'warning'}>\n          {label}\n        </Badge>\n      </View>\n    </View>\n  );\n}\n"
+      "code": "import React, { useEffect, useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { Badge, BadgeIcon, BadgeIconTile, NotificationBadge, type BadgeIconName, type BadgeTone } from '@/components/ui/badge';\nimport { alpha, useKit } from '@/lib/kit';\n\nconst DEPLOY: { label: string; tone: BadgeTone; icon: BadgeIconName }[] = [\n  { label: 'Queued', tone: 'neutral', icon: 'clock' },\n  { label: 'Building', tone: 'warning', icon: 'refresh' },\n  { label: 'Deployed', tone: 'success', icon: 'check' },\n  { label: 'Failed', tone: 'danger', icon: 'alert' },\n];\n\nexport default function LiveStatus() {\n  const { colors } = useKit();\n  const [step, setStep] = useState(0);\n  useEffect(() => {\n    const id = setInterval(() => setStep((i) => (i + 1) % DEPLOY.length), 1800);\n    return () => clearInterval(id);\n  }, []);\n  const { label, tone, icon } = DEPLOY[step];\n  const tint = { neutral: colors.mutedForeground, accent: colors.accent, success: colors.success, warning: colors.warning, danger: colors.danger }[tone];\n  return (\n    <View style={{ gap: 12 }}>\n      <View style={{ flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', gap: 10 }}>\n        <Text style={{ flexShrink: 1, fontSize: 15, color: colors.foreground }}>web-checkout #482</Text>\n        <Badge tone={tone} icon={<BadgeIcon name={icon} color={tint} size={14} />}>\n          {label}\n        </Badge>\n      </View>\n      <View style={{ flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', gap: 10 }}>\n        <Text style={{ flexShrink: 1, fontSize: 15, color: colors.foreground }}>api-gateway #117</Text>\n        <Badge variant=\"solid\" tone={tone} size=\"lg\">\n          {label}\n        </Badge>\n        <Badge variant=\"dot\" tone={tone} pulse={tone === 'warning'}>\n          {label}\n        </Badge>\n      </View>\n    </View>\n  );\n}\n"
     },
     {
       "name": "Sizes",
       "title": "Sizes",
-      "code": "import { Pressable, Text, View } from 'react-native';\nimport { Badge, BadgeIcon, BadgeIconTile, NotificationBadge, type BadgeIconName, type BadgeTone } from '@/components/ui/badge';\n\nexport default function Sizes() {\n  return (\n    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>\n      <Badge size=\"sm\" tone=\"accent\">Small</Badge>\n      <Badge size=\"md\" tone=\"accent\">Medium</Badge>\n      <Badge size=\"lg\" tone=\"accent\">Large</Badge>\n    </View>\n  );\n}\n"
+      "code": "import { Pressable, Text, View } from 'react-native';\nimport { Badge, BadgeIcon, BadgeIconTile, NotificationBadge, type BadgeIconName, type BadgeTone } from '@/components/ui/badge';\n\nexport default function Sizes() {\n  return (\n    <View style={{ flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', gap: 8 }}>\n      <Badge size=\"sm\" tone=\"accent\">Small</Badge>\n      <Badge size=\"md\" tone=\"accent\">Medium</Badge>\n      <Badge size=\"lg\" tone=\"accent\">Large</Badge>\n    </View>\n  );\n}\n"
     },
     {
       "name": "Notifications",
       "title": "Notifications",
-      "code": "import React, { useEffect, useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { Badge, BadgeIcon, BadgeIconTile, NotificationBadge, type BadgeIconName, type BadgeTone } from '@/components/ui/badge';\nimport { alpha, useKit } from '@/lib/kit';\n\nexport default function Notifications() {\n  const { colors, radius } = useKit();\n  const [count, setCount] = useState(3);\n  return (\n    <View style={{ gap: 18 }}>\n      <View style={{ flexDirection: 'row', gap: 26 }}>\n        <NotificationBadge count={count}>\n          <BadgeIconTile name=\"bell\" backgroundColor={alpha(colors.accent, 0.12)} color={colors.accent} />\n        </NotificationBadge>\n        <NotificationBadge count={count * 37} tone=\"accent\">\n          <BadgeIconTile name=\"message\" backgroundColor={alpha(colors.accent, 0.1)} color={colors.accent} />\n        </NotificationBadge>\n        <NotificationBadge count={count} dot tone=\"success\">\n          <BadgeIconTile name=\"package\" backgroundColor={alpha(colors.success, 0.12)} color={colors.success} />\n        </NotificationBadge>\n      </View>\n      <View style={{ flexDirection: 'row', gap: 10 }}>\n        {[\n          ['+ New', () => setCount((c) => c + 1)],\n          ['Mark all read', () => setCount(0)],\n        ].map(([label, onPress]) => (\n          <Pressable\n            key={label as string}\n            onPress={onPress as () => void}\n            style={{ paddingHorizontal: 14, height: 36, borderRadius: radius.capsule(36), justifyContent: 'center', backgroundColor: colors.muted }}\n          >\n            <Text style={{ fontWeight: '400', color: colors.foreground }}>{label as string}</Text>\n          </Pressable>\n        ))}\n      </View>\n    </View>\n  );\n}\n"
+      "code": "import React, { useEffect, useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { Badge, BadgeIcon, BadgeIconTile, NotificationBadge, type BadgeIconName, type BadgeTone } from '@/components/ui/badge';\nimport { alpha, 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\nexport default function Notifications() {\n  const { colors, radius } = useKit();\n  const [count, setCount] = useState(3);\n  return (\n    <View style={{ gap: 18 }}>\n      <View style={{ flexDirection: 'row', gap: 26 }}>\n        <NotificationBadge count={count}>\n          <BadgeIconTile name=\"bell\" backgroundColor={alpha(colors.accent, 0.12)} color={colors.accent} />\n        </NotificationBadge>\n        <NotificationBadge count={count * 37} tone=\"accent\">\n          <BadgeIconTile name=\"message\" backgroundColor={alpha(colors.accent, 0.1)} color={colors.accent} />\n        </NotificationBadge>\n        <NotificationBadge count={count} dot tone=\"success\">\n          <BadgeIconTile name=\"package\" backgroundColor={alpha(colors.success, 0.12)} color={colors.success} />\n        </NotificationBadge>\n      </View>\n      <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 10 }}>\n        {[\n          ['+ New', () => setCount((c) => c + 1)],\n          ['Mark all read', () => setCount(0)],\n        ].map(([label, onPress]) => (\n          <Pressable\n            key={label as string}\n            onPress={onPress as () => void}\n            style={{ paddingHorizontal: 14, minHeight: 36, borderRadius: radius.capsule(36), justifyContent: 'center', backgroundColor: colors.muted }}\n          >\n            <Text maxFontSizeMultiplier={FONT_CAP} style={{ fontWeight: '400', color: colors.foreground }}>{label as string}</Text>\n          </Pressable>\n        ))}\n      </View>\n    </View>\n  );\n}\n"
     }
   ]
 }