@expokit/cli 0.0.0-stage → 0.3.0

package/registry/_docs/avatar.json

@@ -0,0 +1,227 @@
+{
+  "name": "avatar",
+  "category": "Display",
+  "aliases": [],
+  "exportName": "Avatar",
+  "files": [
+    "src/components/ui/avatar.tsx"
+  ],
+  "summary": "A photo over hashed-colour initials, with presence dots and badges cut into the edge.",
+  "props": [
+    [
+      "src",
+      "string",
+      "—",
+      "Image URL. Fades in over the initials; falls back to them on error."
+    ],
+    [
+      "name",
+      "string",
+      "—",
+      "Initials, the deterministic fallback colour and the accessibility label."
+    ],
+    [
+      "size",
+      "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | number",
+      "\"md\"",
+      "24 / 32 / 40 / 56 / 72pt, or any number."
+    ],
+    [
+      "shape",
+      "\"circle\" | \"rounded\"",
+      "\"circle\"",
+      "Circle or rounded square (follows the kit radius)."
+    ],
+    [
+      "fallback",
+      "\"soft\" | \"solid\" | \"gradient\"",
+      "\"soft\"",
+      "Soft tint with deep ink, flat fill, or an opt-in two-tone gradient."
+    ],
+    [
+      "status",
+      "\"online\" | \"away\" | \"busy\" | \"offline\"",
+      "—",
+      "Presence dot in a ring cut-out: filled, crescent, bar, hollow."
+    ],
+    [
+      "pulse",
+      "boolean",
+      "true when online",
+      "Soft pulse behind the dot (off with reduce motion)."
+    ],
+    [
+      "ring",
+      "\"none\" | \"story\" | \"accent\" | \"seen\"",
+      "\"none\"",
+      "Solid accent ring with a clear gap. \"seen\" = story + seen."
+    ],
+    [
+      "seen",
+      "boolean",
+      "false",
+      "Story watched: the ring cross-fades to a quiet hairline."
+    ],
+    [
+      "ringColors",
+      "string[]",
+      "sunset",
+      "Ring colour override; the first entry is used as a solid colour."
+    ],
+    [
+      "ringSpin",
+      "boolean",
+      "false",
+      "Broken ring that spins — a loading story (circle only)."
+    ],
+    [
+      "verified",
+      "boolean",
+      "false",
+      "Rosette seal with a check, bottom-right (bottom-left if a status dot is shown)."
+    ],
+    [
+      "badge",
+      "number | boolean",
+      "—",
+      "Notification count (99+), or true for a dot, top-right."
+    ],
+    [
+      "surface",
+      "string",
+      "theme background",
+      "Colour behind the avatar; cut-outs and group borders use it."
+    ],
+    [
+      "accent",
+      "string",
+      "theme accent",
+      "Ring and verified seal colour."
+    ],
+    [
+      "elevated",
+      "boolean",
+      "true for 72pt+",
+      "Soft drop shadow under the face."
+    ],
+    [
+      "onPress",
+      "() => void",
+      "—",
+      "Makes it a button with spring press feedback."
+    ],
+    [
+      "haptics",
+      "boolean",
+      "true",
+      "Light haptic tick on press."
+    ],
+    [
+      "AvatarGroup.max",
+      "number",
+      "4",
+      "Avatars shown before the +N chip."
+    ],
+    [
+      "AvatarGroup.total",
+      "number",
+      "children count",
+      "Real total when larger than what you pass."
+    ],
+    [
+      "AvatarGroup.overlap",
+      "number",
+      "0.28",
+      "Overlap as a fraction of the size."
+    ],
+    [
+      "AvatarGroup.surface",
+      "string",
+      "theme background",
+      "Colour of the separating borders — match the parent."
+    ],
+    [
+      "AvatarGroup.animated",
+      "boolean",
+      "true",
+      "Staggered spring-in on mount."
+    ],
+    [
+      "AvatarGroup.onPressMore",
+      "() => void",
+      "—",
+      "Makes the +N chip a button."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the avatar root; AvatarGroup applies it to its row."
+    ]
+  ],
+  "behavior": [
+    [
+      "Motion",
+      "The photo fades in over the initials, a story ring cross-fades to a hairline once seen, and AvatarGroup springs its faces in with a stagger."
+    ],
+    [
+      "Touch",
+      "With onPress it becomes a button that springs down while pressed."
+    ],
+    [
+      "Reduced motion",
+      "The status pulse, ring spin, press squish and group stagger are skipped, and the seen cross-fade is instant."
+    ],
+    [
+      "Haptics",
+      "A light impact on press when onPress is set. Turn off with haptics={false}."
+    ],
+    [
+      "Screen readers",
+      "Read as an image (or a button when pressable) labelled with the name plus verified, status, notification and story details. A group reads its first names and \"and N more\"."
+    ]
+  ],
+  "usage": "import { Avatar, AvatarGroup } from '@/components/ui/avatar';\n\n<Avatar name=\"Ava Rossi\" src=\"https://i.pravatar.cc/240?img=47\" size=\"lg\" status=\"online\" />\n<AvatarGroup max={3} total={12}>\n  <Avatar name=\"Noah Kim\" />\n  <Avatar name=\"Priya Patel\" />\n  <Avatar name=\"Diego Alvarez\" />\n</AvatarGroup>",
+  "examples": [
+    {
+      "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\nexport default function ProfileHeader() {\n  const { colors, radius, dark } = useKit();\n  return (\n    <View\n      style={{\n        alignItems: 'center',\n        gap: 12,\n        paddingVertical: 20,\n        paddingHorizontal: 16,\n        borderRadius: radius.xl,\n        backgroundColor: colors.card,\n        borderWidth: 1,\n        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={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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "name": "Fallbacks",
+      "title": "Fallbacks",
+      "code": "import { Pressable, ScrollView, Text, View } from 'react-native';\nimport { Avatar, AvatarGroup } from '@/components/ui/avatar';\n\nexport default function Fallbacks() {\n  const names = ['Priya Patel', 'Diego Alvarez', 'Hannah Lee', 'Omar Haddad', 'Sven Larsen'];\n  return (\n    <View style={{ gap: 14 }}>\n      <View style={{ flexDirection: 'row', gap: 12 }}>\n        {names.map((n) => (\n          <Avatar key={n} name={n} size=\"lg\" />\n        ))}\n      </View>\n      <View style={{ flexDirection: 'row', gap: 12 }}>\n        {names.map((n) => (\n          <Avatar key={n} name={n} size=\"lg\" fallback=\"solid\" />\n        ))}\n      </View>\n      <View style={{ flexDirection: 'row', gap: 12 }}>\n        {names.slice(0, 3).map((n) => (\n          <Avatar key={n} name={n} size=\"lg\" shape=\"rounded\" fallback=\"gradient\" />\n        ))}\n        <Avatar size=\"lg\" shape=\"rounded\" src=\"https://example.invalid/broken.jpg\" name=\"Kenji Watanabe\" />\n        <Avatar size=\"lg\" />\n      </View>\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Sizes",
+      "title": "Sizes",
+      "code": "import { Pressable, ScrollView, Text, View } from 'react-native';\nimport { Avatar, AvatarGroup } from '@/components/ui/avatar';\n\nexport default function Sizes() {\n  return (\n    <View style={{ flexDirection: 'row', alignItems: 'flex-end', gap: 12 }}>\n      <Avatar size=\"xs\" src=\"https://i.pravatar.cc/150?img=32\" name=\"Maya Chen\" />\n      <Avatar size=\"sm\" src=\"https://i.pravatar.cc/150?img=12\" name=\"Leo Park\" status=\"online\" />\n      <Avatar size=\"md\" name=\"Ava Rossi\" status=\"away\" />\n      <Avatar size=\"lg\" src=\"https://i.pravatar.cc/150?img=59\" name=\"Noah Kim\" verified />\n      <Avatar size=\"xl\" src=\"https://i.pravatar.cc/150?img=5\" name=\"Zoe Martin\" status=\"online\" />\n    </View>\n  );\n}\n"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    }
+  ]
+}

package/registry/_docs/badge.json

@@ -0,0 +1,148 @@
+{
+  "name": "badge",
+  "category": "Display",
+  "aliases": [],
+  "exportName": "BadgeIcon",
+  "files": [
+    "src/components/ui/badge.tsx"
+  ],
+  "summary": "Status pills in four styles that roll, pop and re-tint when their status changes.",
+  "props": [
+    [
+      "variant",
+      "\"solid\" | \"soft\" | \"outline\" | \"dot\"",
+      "\"soft\"",
+      "Filled, tinted, bordered, or a neutral outline with a coloured leading dot."
+    ],
+    [
+      "tone",
+      "\"neutral\" | \"accent\" | \"success\" | \"warning\" | \"danger\"",
+      "\"neutral\"",
+      "Semantic colour."
+    ],
+    [
+      "size",
+      "\"sm\" | \"md\" | \"lg\"",
+      "\"md\"",
+      "20 / 24 / 28pt tall."
+    ],
+    [
+      "color",
+      "string",
+      "—",
+      "Custom colour (overrides tone)."
+    ],
+    [
+      "icon",
+      "ReactNode",
+      "—",
+      "Shown before the label."
+    ],
+    [
+      "shape",
+      "\"pill\" | \"rounded\"",
+      "\"pill\"",
+      "Corner style."
+    ],
+    [
+      "pulse",
+      "boolean",
+      "false",
+      "Pulsing dot for live states (dot variant)."
+    ],
+    [
+      "animateChanges",
+      "boolean",
+      "true",
+      "Roll the label, pop the icon, cross-fade colours and spring the width when they change. Never on mount."
+    ],
+    [
+      "NotificationBadge.count",
+      "number",
+      "0",
+      "Number shown; 0 hides it."
+    ],
+    [
+      "NotificationBadge.showZero",
+      "boolean",
+      "false",
+      "Keep the badge visible (showing 0) when count is 0."
+    ],
+    [
+      "NotificationBadge.max",
+      "number",
+      "99",
+      "Shows \"99+\" above this."
+    ],
+    [
+      "NotificationBadge.dot",
+      "boolean",
+      "false",
+      "Dot only, no number."
+    ],
+    [
+      "NotificationBadge.children",
+      "ReactNode",
+      "—",
+      "Element the badge is pinned to (top-right)."
+    ],
+    [
+      "NotificationBadge.offset",
+      "[number, number]",
+      "[0, 0]",
+      "Nudge from the corner."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the badge pill; NotificationBadge applies it to the anchor wrapper or bare bubble wrapper."
+    ]
+  ],
+  "behavior": [
+    [
+      "Motion",
+      "On a change the old label rolls up and out as the new one rolls in (per letter for short Latin text), the icon swaps with a scale-and-rotate pop and the pill width springs to fit. Rolls and pops use the native driver; colour and width run on the JS driver on separate views. Nothing animates on mount; animateChanges={false} swaps instantly."
+    ],
+    [
+      "Reduced motion",
+      "Changes swap instantly: no roll, pop, colour fade or width spring. The dot variant's pulse still loops."
+    ],
+    [
+      "Screen readers",
+      "Text labels are one accessible element whose label is always the current text; on Android it is a polite live region so status changes are announced."
+    ],
+    [
+      "Platforms",
+      "React Native Animated and react-native-svg only — iOS, Android, Expo Go and web."
+    ]
+  ],
+  "usage": "import { Badge } from '@/components/ui/badge';\n\nexport function BuildStatus({ done }: { done: boolean }) {\n  return (\n    <Badge tone={done ? 'success' : 'warning'}>{done ? 'Deployed' : 'Building'}</Badge>\n  );\n}",
+  "examples": [
+    {
+      "name": "Variants",
+      "title": "Variants",
+      "code": "import { Pressable, Text, View } from 'react-native';\nimport { Badge, BadgeIcon, BadgeIconTile, NotificationBadge, type BadgeIconName, type BadgeTone } from '@/components/ui/badge';\n\nconst TONES = ['neutral', 'accent', 'success', 'warning', 'danger'] as const;\n\nexport default function Variants() {\n  return (\n    <View style={{ gap: 10 }}>\n      {(['solid', 'soft', 'outline', 'dot'] as const).map((variant) => (\n        <View key={variant} style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 6 }}>\n          {TONES.map((tone) => (\n            <Badge key={tone} variant={variant} tone={tone}>\n              {tone[0].toUpperCase() + tone.slice(1)}\n            </Badge>\n          ))}\n        </View>\n      ))}\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Statuses",
+      "title": "Statuses",
+      "code": "import { 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 Statuses() {\n  const { colors } = useKit();\n  return (\n    <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>\n      <Badge variant=\"dot\" tone=\"success\" pulse>Live</Badge>\n      <Badge variant=\"soft\" tone=\"success\" icon={<BadgeIcon name=\"package\" color={colors.success} size={14} />}>Paid</Badge>\n      <Badge variant=\"soft\" tone=\"warning\">Pending review</Badge>\n      <Badge variant=\"outline\" tone=\"danger\">Overdue</Badge>\n      <Badge variant=\"solid\" tone=\"accent\" shape=\"rounded\">PRO</Badge>\n      <Badge variant=\"soft\" tone=\"accent\" icon={<BadgeIcon name=\"heart\" color={colors.accent} size={14} />}>Saved</Badge>\n    </View>\n  );\n}\n"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    }
+  ]
+}

package/registry/_docs/bottom-nav.json

@@ -0,0 +1,143 @@
+{
+  "name": "bottom-nav",
+  "category": "Navigation",
+  "aliases": [
+    "bottom-tabs",
+    "tab-bar",
+    "bottom-bar"
+  ],
+  "exportName": "BottomNav",
+  "files": [
+    "src/components/ui/bottom-nav.tsx"
+  ],
+  "summary": "A tab bar whose indicator stretches between tabs, leading edge first.",
+  "props": [
+    [
+      "items",
+      "{ key, label, icon, badge?, action? }[]",
+      "—",
+      "Tabs. `icon` is a built-in name (home, explore, search, projects, saved, profile, inbox, activity, analytics, message, work, browse, library, music, create) or a render function `({ color, size, active }) => node` — called for both the outline (`active: false`) and filled (`active: true`) states so it can morph."
+    ],
+    [
+      "value / defaultValue",
+      "string",
+      "first tab",
+      "Active tab key (controlled / uncontrolled)."
+    ],
+    [
+      "onValueChange",
+      "(key: string) => void",
+      "—",
+      "Called when a tab is pressed."
+    ],
+    [
+      "onAction",
+      "(key: string) => void",
+      "—",
+      "Called when an `action: true` item (e.g. Create) is pressed. Action items render as a solid accent button and never become active."
+    ],
+    [
+      "variant",
+      "\"minimal\" | \"floating\" | \"pill\" | \"center-fab\" | \"indicator\"",
+      "\"minimal\"",
+      "Look. Deprecated values still render: `glass`, `neumorphic`, `dock`, `curved` → `floating`; `gradient`, `outline` → `pill`."
+    ],
+    [
+      "accent",
+      "string",
+      "theme accent",
+      "Active colour and the action button fill."
+    ],
+    [
+      "gradient",
+      "[string, string]",
+      "none (solid accent)",
+      "Opt-in two-colour gradient for the action button."
+    ],
+    [
+      "showLabels",
+      "boolean",
+      "true",
+      "Show labels. `floating` and `pill` reveal only the active label; the others show all."
+    ],
+    [
+      "bottomInset",
+      "number",
+      "0",
+      "Extra bottom padding — pass `useSafeAreaInsets().bottom` when the bar sits at the screen edge."
+    ],
+    [
+      "homeIndicator",
+      "boolean",
+      "minimal",
+      "Draw the iOS home-indicator line."
+    ],
+    [
+      "haptics",
+      "boolean",
+      "true",
+      "Selection tick on tab change, light impact on the action button."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style of the bar (the outer shadow view for `floating`)."
+    ]
+  ],
+  "behavior": [
+    [
+      "Touch",
+      "Tap a tab to select it. Items marked action call onAction instead and never become the active tab."
+    ],
+    [
+      "Motion",
+      "The indicator springs its leading edge first and the trailing edge catches up. Icons morph from outline to filled and badges pop in."
+    ],
+    [
+      "Reduced motion",
+      "The indicator glides with a short timing and no stretch, and icon changes use quick timings instead of springs."
+    ],
+    [
+      "Haptics",
+      "A selection tick on tab change and a light impact on the action button. Turn off with haptics={false}."
+    ],
+    [
+      "Screen readers",
+      "The bar is a tablist and each tab carries selected state, with the badge count in its label. Action items are buttons."
+    ]
+  ],
+  "usage": "import { useState } from 'react';\nimport { BottomNav } from '@/components/ui/bottom-nav';\n\nconst [tab, setTab] = useState('home');\n<BottomNav\n  items={[{ key: 'home', label: 'Home', icon: 'home' }, { key: 'inbox', label: 'Inbox', icon: 'inbox', badge: 3 }]}\n  value={tab}\n  onValueChange={setTab}\n/>",
+  "examples": [
+    {
+      "name": "MinimalClean",
+      "title": "Minimal Clean",
+      "code": "import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport { BottomNav, type BottomNavItem } from '@/components/ui/bottom-nav';\nimport { alpha, useKit } from '@/lib/kit';\n\ntype Row = [title: string, subtitle: string, meta: string];\n\n/** The bottom of a phone screen: a title, a few rows, the bar docked at the bottom. */\nfunction Screen({ title, rows, children }: { title: string; rows: Row[]; children: React.ReactNode }) {\n  const { colors, radius, dark } = useKit();\n  return (\n    <View\n      style={{\n        height: 300,\n        alignSelf: 'stretch',\n        borderRadius: radius.scale(28),\n        overflow: 'hidden',\n        borderWidth: 1,\n        borderColor: alpha(colors.foreground, dark ? 0.1 : 0.06),\n        backgroundColor: colors.background,\n        justifyContent: 'space-between',\n      }}\n    >\n      <View style={{ paddingHorizontal: 18, paddingTop: 18, gap: 14 }}>\n        <Text style={{ fontSize: 22, fontWeight: '400', letterSpacing: -0.5, color: colors.foreground }}>{title}</Text>\n        {rows.map(([t, s, m]) => (\n          <View key={t} style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>\n            <View\n              style={{\n                width: 36,\n                height: 36,\n                borderRadius: radius.capsule(36),\n                backgroundColor: alpha(colors.accent, dark ? 0.22 : 0.12),\n                alignItems: 'center',\n                justifyContent: 'center',\n              }}\n            >\n              <Text style={{ fontSize: 13, fontWeight: '400', color: colors.accent }}>{t.slice(0, 1)}</Text>\n            </View>\n            <View style={{ flex: 1 }}>\n              <Text numberOfLines={1} style={{ fontSize: 14.5, fontWeight: '400', color: colors.foreground }}>{t}</Text>\n              <Text numberOfLines={1} style={{ fontSize: 13, fontWeight: '400', color: colors.mutedForeground }}>{s}</Text>\n            </View>\n            <Text style={{ fontSize: 12, fontWeight: '400', color: colors.mutedForeground }}>{m}</Text>\n          </View>\n        ))}\n      </View>\n      {children}\n    </View>\n  );\n}\n\nconst ROWS: Record<string, Row[]> = {\n  home: [\n    ['Maya Chen', 'Shipped the onboarding redesign', '2m'],\n    ['Leo Park', 'Booked the team offsite for June', '1h'],\n  ],\n  explore: [\n    ['Design Systems Weekly', 'Motion tokens that scale', 'New'],\n    ['Product Notes', 'How Linear plans a cycle', '4m read'],\n  ],\n  search: [\n    ['Recent: invoices', 'Q2 invoices · 14 results', 'Today'],\n    ['Recent: Maya', 'People · Design team', 'Mon'],\n  ],\n  projects: [\n    ['Mobile app 2.0', '18 of 24 tasks done', '75%'],\n    ['Brand refresh', 'Review on Thursday', '40%'],\n  ],\n  saved: [\n    ['Kyoto travel guide', 'Saved from Atlas', 'Apr 2'],\n    ['Sourdough basics', 'Saved from Recipes', 'Mar 28'],\n  ],\n  inbox: [\n    ['Priya Nair', 'Can you review the pricing page?', '9:41'],\n    ['GitHub', 'PR #482 was approved', '9:12'],\n  ],\n  analytics: [\n    ['Weekly active users', '12,480 · up 8.2%', '7d'],\n    ['Conversion', '3.4% · up 0.6 pts', '7d'],\n  ],\n  activity: [\n    ['Leo Park', 'Commented on Launch plan', '5m'],\n    ['Ana Ruiz', 'Moved Pricing to Done', '22m'],\n  ],\n  profile: [\n    ['Karan Kumar', 'Product designer · Berlin', 'Edit'],\n    ['Notifications', 'Mentions and replies only', 'On'],\n  ],\n  home2: [\n    ['Late Night Drive', 'Playlist · 42 songs', '2h 31m'],\n    ['Midnight City', 'M83 · Hurry Up, We\\'re Dreaming', '4:03'],\n  ],\n  browse: [\n    ['New this week', 'Fresh releases picked for you', '24'],\n    ['Focus', 'Instrumental, low tempo', '60'],\n  ],\n  find: [\n    ['Recent: Tycho', 'Artist · Ambient', 'Yesterday'],\n    ['Recent: lo-fi beats', 'Playlist · 120 songs', 'Sun'],\n  ],\n  library: [\n    ['Liked songs', '1,204 songs', 'Pinned'],\n    ['Downloaded', '86 songs · 412 MB', 'Offline'],\n  ],\n};\n\nconst titleOf = (items: BottomNavItem[], key: string) => items.find((i) => i.key === key)?.label ?? '';\n\nexport default function MinimalClean() {\n  const items: BottomNavItem[] = [\n    { key: 'home', label: 'Home', icon: 'home' },\n    { key: 'explore', label: 'Explore', icon: 'explore' },\n    { key: 'projects', label: 'Projects', icon: 'projects' },\n    { key: 'saved', label: 'Saved', icon: 'saved' },\n    { key: 'profile', label: 'Profile', icon: 'profile' },\n  ];\n  const [tab, setTab] = useState('home');\n  return (\n    <Screen title={titleOf(items, tab)} rows={ROWS[tab]}>\n      <BottomNav variant=\"minimal\" items={items} value={tab} onValueChange={setTab} />\n    </Screen>\n  );\n}\n"
+    },
+    {
+      "name": "Floating",
+      "title": "Floating",
+      "code": "import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport { BottomNav, type BottomNavItem } from '@/components/ui/bottom-nav';\nimport { alpha, useKit } from '@/lib/kit';\n\ntype Row = [title: string, subtitle: string, meta: string];\n\n/** The bottom of a phone screen: a title, a few rows, the bar docked at the bottom. */\nfunction Screen({ title, rows, children }: { title: string; rows: Row[]; children: React.ReactNode }) {\n  const { colors, radius, dark } = useKit();\n  return (\n    <View\n      style={{\n        height: 300,\n        alignSelf: 'stretch',\n        borderRadius: radius.scale(28),\n        overflow: 'hidden',\n        borderWidth: 1,\n        borderColor: alpha(colors.foreground, dark ? 0.1 : 0.06),\n        backgroundColor: colors.background,\n        justifyContent: 'space-between',\n      }}\n    >\n      <View style={{ paddingHorizontal: 18, paddingTop: 18, gap: 14 }}>\n        <Text style={{ fontSize: 22, fontWeight: '400', letterSpacing: -0.5, color: colors.foreground }}>{title}</Text>\n        {rows.map(([t, s, m]) => (\n          <View key={t} style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>\n            <View\n              style={{\n                width: 36,\n                height: 36,\n                borderRadius: radius.capsule(36),\n                backgroundColor: alpha(colors.accent, dark ? 0.22 : 0.12),\n                alignItems: 'center',\n                justifyContent: 'center',\n              }}\n            >\n              <Text style={{ fontSize: 13, fontWeight: '400', color: colors.accent }}>{t.slice(0, 1)}</Text>\n            </View>\n            <View style={{ flex: 1 }}>\n              <Text numberOfLines={1} style={{ fontSize: 14.5, fontWeight: '400', color: colors.foreground }}>{t}</Text>\n              <Text numberOfLines={1} style={{ fontSize: 13, fontWeight: '400', color: colors.mutedForeground }}>{s}</Text>\n            </View>\n            <Text style={{ fontSize: 12, fontWeight: '400', color: colors.mutedForeground }}>{m}</Text>\n          </View>\n        ))}\n      </View>\n      {children}\n    </View>\n  );\n}\n\nconst ROWS: Record<string, Row[]> = {\n  home: [\n    ['Maya Chen', 'Shipped the onboarding redesign', '2m'],\n    ['Leo Park', 'Booked the team offsite for June', '1h'],\n  ],\n  explore: [\n    ['Design Systems Weekly', 'Motion tokens that scale', 'New'],\n    ['Product Notes', 'How Linear plans a cycle', '4m read'],\n  ],\n  search: [\n    ['Recent: invoices', 'Q2 invoices · 14 results', 'Today'],\n    ['Recent: Maya', 'People · Design team', 'Mon'],\n  ],\n  projects: [\n    ['Mobile app 2.0', '18 of 24 tasks done', '75%'],\n    ['Brand refresh', 'Review on Thursday', '40%'],\n  ],\n  saved: [\n    ['Kyoto travel guide', 'Saved from Atlas', 'Apr 2'],\n    ['Sourdough basics', 'Saved from Recipes', 'Mar 28'],\n  ],\n  inbox: [\n    ['Priya Nair', 'Can you review the pricing page?', '9:41'],\n    ['GitHub', 'PR #482 was approved', '9:12'],\n  ],\n  analytics: [\n    ['Weekly active users', '12,480 · up 8.2%', '7d'],\n    ['Conversion', '3.4% · up 0.6 pts', '7d'],\n  ],\n  activity: [\n    ['Leo Park', 'Commented on Launch plan', '5m'],\n    ['Ana Ruiz', 'Moved Pricing to Done', '22m'],\n  ],\n  profile: [\n    ['Karan Kumar', 'Product designer · Berlin', 'Edit'],\n    ['Notifications', 'Mentions and replies only', 'On'],\n  ],\n  home2: [\n    ['Late Night Drive', 'Playlist · 42 songs', '2h 31m'],\n    ['Midnight City', 'M83 · Hurry Up, We\\'re Dreaming', '4:03'],\n  ],\n  browse: [\n    ['New this week', 'Fresh releases picked for you', '24'],\n    ['Focus', 'Instrumental, low tempo', '60'],\n  ],\n  find: [\n    ['Recent: Tycho', 'Artist · Ambient', 'Yesterday'],\n    ['Recent: lo-fi beats', 'Playlist · 120 songs', 'Sun'],\n  ],\n  library: [\n    ['Liked songs', '1,204 songs', 'Pinned'],\n    ['Downloaded', '86 songs · 412 MB', 'Offline'],\n  ],\n};\n\nconst titleOf = (items: BottomNavItem[], key: string) => items.find((i) => i.key === key)?.label ?? '';\n\nexport default function Floating() {\n  const [tab, setTab] = useState('home');\n  const [unread, setUnread] = useState(3);\n  const [drafts, setDrafts] = useState(0);\n  const items: BottomNavItem[] = [\n    { key: 'home', label: 'Home', icon: 'home' },\n    { key: 'search', label: 'Search', icon: 'search' },\n    { key: 'create', label: 'New note', icon: 'create', action: true },\n    { key: 'inbox', label: 'Inbox', icon: 'inbox', badge: unread || undefined },\n    { key: 'profile', label: 'Profile', icon: 'profile' },\n  ];\n  const open = (k: string) => {\n    setTab(k);\n    if (k === 'inbox') setUnread(0);\n  };\n  return (\n    <Screen title={drafts ? `${drafts} new ${drafts === 1 ? 'draft' : 'drafts'}` : titleOf(items, tab)} rows={ROWS[tab]}>\n      <BottomNav variant=\"floating\" items={items} value={tab} onValueChange={open} onAction={() => setDrafts((n) => n + 1)} />\n    </Screen>\n  );\n}\n"
+    },
+    {
+      "name": "PillHighlight",
+      "title": "Pill Highlight",
+      "code": "import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport { BottomNav, type BottomNavItem } from '@/components/ui/bottom-nav';\nimport { alpha, useKit } from '@/lib/kit';\n\ntype Row = [title: string, subtitle: string, meta: string];\n\n/** The bottom of a phone screen: a title, a few rows, the bar docked at the bottom. */\nfunction Screen({ title, rows, children }: { title: string; rows: Row[]; children: React.ReactNode }) {\n  const { colors, radius, dark } = useKit();\n  return (\n    <View\n      style={{\n        height: 300,\n        alignSelf: 'stretch',\n        borderRadius: radius.scale(28),\n        overflow: 'hidden',\n        borderWidth: 1,\n        borderColor: alpha(colors.foreground, dark ? 0.1 : 0.06),\n        backgroundColor: colors.background,\n        justifyContent: 'space-between',\n      }}\n    >\n      <View style={{ paddingHorizontal: 18, paddingTop: 18, gap: 14 }}>\n        <Text style={{ fontSize: 22, fontWeight: '400', letterSpacing: -0.5, color: colors.foreground }}>{title}</Text>\n        {rows.map(([t, s, m]) => (\n          <View key={t} style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>\n            <View\n              style={{\n                width: 36,\n                height: 36,\n                borderRadius: radius.capsule(36),\n                backgroundColor: alpha(colors.accent, dark ? 0.22 : 0.12),\n                alignItems: 'center',\n                justifyContent: 'center',\n              }}\n            >\n              <Text style={{ fontSize: 13, fontWeight: '400', color: colors.accent }}>{t.slice(0, 1)}</Text>\n            </View>\n            <View style={{ flex: 1 }}>\n              <Text numberOfLines={1} style={{ fontSize: 14.5, fontWeight: '400', color: colors.foreground }}>{t}</Text>\n              <Text numberOfLines={1} style={{ fontSize: 13, fontWeight: '400', color: colors.mutedForeground }}>{s}</Text>\n            </View>\n            <Text style={{ fontSize: 12, fontWeight: '400', color: colors.mutedForeground }}>{m}</Text>\n          </View>\n        ))}\n      </View>\n      {children}\n    </View>\n  );\n}\n\nconst ROWS: Record<string, Row[]> = {\n  home: [\n    ['Maya Chen', 'Shipped the onboarding redesign', '2m'],\n    ['Leo Park', 'Booked the team offsite for June', '1h'],\n  ],\n  explore: [\n    ['Design Systems Weekly', 'Motion tokens that scale', 'New'],\n    ['Product Notes', 'How Linear plans a cycle', '4m read'],\n  ],\n  search: [\n    ['Recent: invoices', 'Q2 invoices · 14 results', 'Today'],\n    ['Recent: Maya', 'People · Design team', 'Mon'],\n  ],\n  projects: [\n    ['Mobile app 2.0', '18 of 24 tasks done', '75%'],\n    ['Brand refresh', 'Review on Thursday', '40%'],\n  ],\n  saved: [\n    ['Kyoto travel guide', 'Saved from Atlas', 'Apr 2'],\n    ['Sourdough basics', 'Saved from Recipes', 'Mar 28'],\n  ],\n  inbox: [\n    ['Priya Nair', 'Can you review the pricing page?', '9:41'],\n    ['GitHub', 'PR #482 was approved', '9:12'],\n  ],\n  analytics: [\n    ['Weekly active users', '12,480 · up 8.2%', '7d'],\n    ['Conversion', '3.4% · up 0.6 pts', '7d'],\n  ],\n  activity: [\n    ['Leo Park', 'Commented on Launch plan', '5m'],\n    ['Ana Ruiz', 'Moved Pricing to Done', '22m'],\n  ],\n  profile: [\n    ['Karan Kumar', 'Product designer · Berlin', 'Edit'],\n    ['Notifications', 'Mentions and replies only', 'On'],\n  ],\n  home2: [\n    ['Late Night Drive', 'Playlist · 42 songs', '2h 31m'],\n    ['Midnight City', 'M83 · Hurry Up, We\\'re Dreaming', '4:03'],\n  ],\n  browse: [\n    ['New this week', 'Fresh releases picked for you', '24'],\n    ['Focus', 'Instrumental, low tempo', '60'],\n  ],\n  find: [\n    ['Recent: Tycho', 'Artist · Ambient', 'Yesterday'],\n    ['Recent: lo-fi beats', 'Playlist · 120 songs', 'Sun'],\n  ],\n  library: [\n    ['Liked songs', '1,204 songs', 'Pinned'],\n    ['Downloaded', '86 songs · 412 MB', 'Offline'],\n  ],\n};\n\nconst titleOf = (items: BottomNavItem[], key: string) => items.find((i) => i.key === key)?.label ?? '';\n\nexport default function PillHighlight() {\n  const items: BottomNavItem[] = [\n    { key: 'home', label: 'Home', icon: 'home' },\n    { key: 'projects', label: 'Projects', icon: 'projects' },\n    { key: 'inbox', label: 'Inbox', icon: 'inbox', badge: true },\n    { key: 'profile', label: 'Profile', icon: 'profile' },\n  ];\n  const [tab, setTab] = useState('home');\n  return (\n    <Screen title={titleOf(items, tab)} rows={ROWS[tab]}>\n      <BottomNav variant=\"pill\" items={items} value={tab} onValueChange={setTab} />\n    </Screen>\n  );\n}\n"
+    },
+    {
+      "name": "CenterFab",
+      "title": "Center Fab",
+      "code": "import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport { BottomNav, type BottomNavItem } from '@/components/ui/bottom-nav';\nimport { alpha, useKit } from '@/lib/kit';\n\ntype Row = [title: string, subtitle: string, meta: string];\n\n/** The bottom of a phone screen: a title, a few rows, the bar docked at the bottom. */\nfunction Screen({ title, rows, children }: { title: string; rows: Row[]; children: React.ReactNode }) {\n  const { colors, radius, dark } = useKit();\n  return (\n    <View\n      style={{\n        height: 300,\n        alignSelf: 'stretch',\n        borderRadius: radius.scale(28),\n        overflow: 'hidden',\n        borderWidth: 1,\n        borderColor: alpha(colors.foreground, dark ? 0.1 : 0.06),\n        backgroundColor: colors.background,\n        justifyContent: 'space-between',\n      }}\n    >\n      <View style={{ paddingHorizontal: 18, paddingTop: 18, gap: 14 }}>\n        <Text style={{ fontSize: 22, fontWeight: '400', letterSpacing: -0.5, color: colors.foreground }}>{title}</Text>\n        {rows.map(([t, s, m]) => (\n          <View key={t} style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>\n            <View\n              style={{\n                width: 36,\n                height: 36,\n                borderRadius: radius.capsule(36),\n                backgroundColor: alpha(colors.accent, dark ? 0.22 : 0.12),\n                alignItems: 'center',\n                justifyContent: 'center',\n              }}\n            >\n              <Text style={{ fontSize: 13, fontWeight: '400', color: colors.accent }}>{t.slice(0, 1)}</Text>\n            </View>\n            <View style={{ flex: 1 }}>\n              <Text numberOfLines={1} style={{ fontSize: 14.5, fontWeight: '400', color: colors.foreground }}>{t}</Text>\n              <Text numberOfLines={1} style={{ fontSize: 13, fontWeight: '400', color: colors.mutedForeground }}>{s}</Text>\n            </View>\n            <Text style={{ fontSize: 12, fontWeight: '400', color: colors.mutedForeground }}>{m}</Text>\n          </View>\n        ))}\n      </View>\n      {children}\n    </View>\n  );\n}\n\nconst ROWS: Record<string, Row[]> = {\n  home: [\n    ['Maya Chen', 'Shipped the onboarding redesign', '2m'],\n    ['Leo Park', 'Booked the team offsite for June', '1h'],\n  ],\n  explore: [\n    ['Design Systems Weekly', 'Motion tokens that scale', 'New'],\n    ['Product Notes', 'How Linear plans a cycle', '4m read'],\n  ],\n  search: [\n    ['Recent: invoices', 'Q2 invoices · 14 results', 'Today'],\n    ['Recent: Maya', 'People · Design team', 'Mon'],\n  ],\n  projects: [\n    ['Mobile app 2.0', '18 of 24 tasks done', '75%'],\n    ['Brand refresh', 'Review on Thursday', '40%'],\n  ],\n  saved: [\n    ['Kyoto travel guide', 'Saved from Atlas', 'Apr 2'],\n    ['Sourdough basics', 'Saved from Recipes', 'Mar 28'],\n  ],\n  inbox: [\n    ['Priya Nair', 'Can you review the pricing page?', '9:41'],\n    ['GitHub', 'PR #482 was approved', '9:12'],\n  ],\n  analytics: [\n    ['Weekly active users', '12,480 · up 8.2%', '7d'],\n    ['Conversion', '3.4% · up 0.6 pts', '7d'],\n  ],\n  activity: [\n    ['Leo Park', 'Commented on Launch plan', '5m'],\n    ['Ana Ruiz', 'Moved Pricing to Done', '22m'],\n  ],\n  profile: [\n    ['Karan Kumar', 'Product designer · Berlin', 'Edit'],\n    ['Notifications', 'Mentions and replies only', 'On'],\n  ],\n  home2: [\n    ['Late Night Drive', 'Playlist · 42 songs', '2h 31m'],\n    ['Midnight City', 'M83 · Hurry Up, We\\'re Dreaming', '4:03'],\n  ],\n  browse: [\n    ['New this week', 'Fresh releases picked for you', '24'],\n    ['Focus', 'Instrumental, low tempo', '60'],\n  ],\n  find: [\n    ['Recent: Tycho', 'Artist · Ambient', 'Yesterday'],\n    ['Recent: lo-fi beats', 'Playlist · 120 songs', 'Sun'],\n  ],\n  library: [\n    ['Liked songs', '1,204 songs', 'Pinned'],\n    ['Downloaded', '86 songs · 412 MB', 'Offline'],\n  ],\n};\n\nconst titleOf = (items: BottomNavItem[], key: string) => items.find((i) => i.key === key)?.label ?? '';\n\nexport default function CenterFab() {\n  const [tab, setTab] = useState('home');\n  const [posts, setPosts] = useState(0);\n  const items: BottomNavItem[] = [\n    { key: 'home', label: 'Home', icon: 'home' },\n    { key: 'explore', label: 'Explore', icon: 'explore' },\n    { key: 'create', label: 'Post', icon: 'create', action: true },\n    { key: 'inbox', label: 'Inbox', icon: 'inbox', badge: 12 + posts },\n    { key: 'profile', label: 'Profile', icon: 'profile' },\n  ];\n  return (\n    <Screen title={posts ? `Posted ${posts} ${posts === 1 ? 'time' : 'times'}` : titleOf(items, tab)} rows={ROWS[tab]}>\n      <BottomNav variant=\"center-fab\" items={items} value={tab} onValueChange={setTab} onAction={() => setPosts((n) => n + 1)} />\n    </Screen>\n  );\n}\n"
+    },
+    {
+      "name": "TabWithIndicator",
+      "title": "Tab With Indicator",
+      "code": "import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport { BottomNav, type BottomNavItem } from '@/components/ui/bottom-nav';\nimport { alpha, useKit } from '@/lib/kit';\n\ntype Row = [title: string, subtitle: string, meta: string];\n\n/** The bottom of a phone screen: a title, a few rows, the bar docked at the bottom. */\nfunction Screen({ title, rows, children }: { title: string; rows: Row[]; children: React.ReactNode }) {\n  const { colors, radius, dark } = useKit();\n  return (\n    <View\n      style={{\n        height: 300,\n        alignSelf: 'stretch',\n        borderRadius: radius.scale(28),\n        overflow: 'hidden',\n        borderWidth: 1,\n        borderColor: alpha(colors.foreground, dark ? 0.1 : 0.06),\n        backgroundColor: colors.background,\n        justifyContent: 'space-between',\n      }}\n    >\n      <View style={{ paddingHorizontal: 18, paddingTop: 18, gap: 14 }}>\n        <Text style={{ fontSize: 22, fontWeight: '400', letterSpacing: -0.5, color: colors.foreground }}>{title}</Text>\n        {rows.map(([t, s, m]) => (\n          <View key={t} style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>\n            <View\n              style={{\n                width: 36,\n                height: 36,\n                borderRadius: radius.capsule(36),\n                backgroundColor: alpha(colors.accent, dark ? 0.22 : 0.12),\n                alignItems: 'center',\n                justifyContent: 'center',\n              }}\n            >\n              <Text style={{ fontSize: 13, fontWeight: '400', color: colors.accent }}>{t.slice(0, 1)}</Text>\n            </View>\n            <View style={{ flex: 1 }}>\n              <Text numberOfLines={1} style={{ fontSize: 14.5, fontWeight: '400', color: colors.foreground }}>{t}</Text>\n              <Text numberOfLines={1} style={{ fontSize: 13, fontWeight: '400', color: colors.mutedForeground }}>{s}</Text>\n            </View>\n            <Text style={{ fontSize: 12, fontWeight: '400', color: colors.mutedForeground }}>{m}</Text>\n          </View>\n        ))}\n      </View>\n      {children}\n    </View>\n  );\n}\n\nconst ROWS: Record<string, Row[]> = {\n  home: [\n    ['Maya Chen', 'Shipped the onboarding redesign', '2m'],\n    ['Leo Park', 'Booked the team offsite for June', '1h'],\n  ],\n  explore: [\n    ['Design Systems Weekly', 'Motion tokens that scale', 'New'],\n    ['Product Notes', 'How Linear plans a cycle', '4m read'],\n  ],\n  search: [\n    ['Recent: invoices', 'Q2 invoices · 14 results', 'Today'],\n    ['Recent: Maya', 'People · Design team', 'Mon'],\n  ],\n  projects: [\n    ['Mobile app 2.0', '18 of 24 tasks done', '75%'],\n    ['Brand refresh', 'Review on Thursday', '40%'],\n  ],\n  saved: [\n    ['Kyoto travel guide', 'Saved from Atlas', 'Apr 2'],\n    ['Sourdough basics', 'Saved from Recipes', 'Mar 28'],\n  ],\n  inbox: [\n    ['Priya Nair', 'Can you review the pricing page?', '9:41'],\n    ['GitHub', 'PR #482 was approved', '9:12'],\n  ],\n  analytics: [\n    ['Weekly active users', '12,480 · up 8.2%', '7d'],\n    ['Conversion', '3.4% · up 0.6 pts', '7d'],\n  ],\n  activity: [\n    ['Leo Park', 'Commented on Launch plan', '5m'],\n    ['Ana Ruiz', 'Moved Pricing to Done', '22m'],\n  ],\n  profile: [\n    ['Karan Kumar', 'Product designer · Berlin', 'Edit'],\n    ['Notifications', 'Mentions and replies only', 'On'],\n  ],\n  home2: [\n    ['Late Night Drive', 'Playlist · 42 songs', '2h 31m'],\n    ['Midnight City', 'M83 · Hurry Up, We\\'re Dreaming', '4:03'],\n  ],\n  browse: [\n    ['New this week', 'Fresh releases picked for you', '24'],\n    ['Focus', 'Instrumental, low tempo', '60'],\n  ],\n  find: [\n    ['Recent: Tycho', 'Artist · Ambient', 'Yesterday'],\n    ['Recent: lo-fi beats', 'Playlist · 120 songs', 'Sun'],\n  ],\n  library: [\n    ['Liked songs', '1,204 songs', 'Pinned'],\n    ['Downloaded', '86 songs · 412 MB', 'Offline'],\n  ],\n};\n\nconst titleOf = (items: BottomNavItem[], key: string) => items.find((i) => i.key === key)?.label ?? '';\n\nexport default function TabWithIndicator() {\n  const items: BottomNavItem[] = [\n    { key: 'home', label: 'Home', icon: 'home' },\n    { key: 'analytics', label: 'Insights', icon: 'analytics' },\n    { key: 'activity', label: 'Activity', icon: 'activity' },\n    { key: 'inbox', label: 'Inbox', icon: 'inbox', badge: 5 },\n    { key: 'profile', label: 'Profile', icon: 'profile' },\n  ];\n  const [tab, setTab] = useState('analytics');\n  return (\n    <Screen title={titleOf(items, tab)} rows={ROWS[tab]}>\n      <BottomNav variant=\"indicator\" items={items} value={tab} onValueChange={setTab} />\n    </Screen>\n  );\n}\n"
+    },
+    {
+      "name": "MusicIconsOnly",
+      "title": "Music Icons Only",
+      "code": "import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport { BottomNav, type BottomNavItem } from '@/components/ui/bottom-nav';\nimport { alpha, useKit } from '@/lib/kit';\n\ntype Row = [title: string, subtitle: string, meta: string];\n\n/** The bottom of a phone screen: a title, a few rows, the bar docked at the bottom. */\nfunction Screen({ title, rows, children }: { title: string; rows: Row[]; children: React.ReactNode }) {\n  const { colors, radius, dark } = useKit();\n  return (\n    <View\n      style={{\n        height: 300,\n        alignSelf: 'stretch',\n        borderRadius: radius.scale(28),\n        overflow: 'hidden',\n        borderWidth: 1,\n        borderColor: alpha(colors.foreground, dark ? 0.1 : 0.06),\n        backgroundColor: colors.background,\n        justifyContent: 'space-between',\n      }}\n    >\n      <View style={{ paddingHorizontal: 18, paddingTop: 18, gap: 14 }}>\n        <Text style={{ fontSize: 22, fontWeight: '400', letterSpacing: -0.5, color: colors.foreground }}>{title}</Text>\n        {rows.map(([t, s, m]) => (\n          <View key={t} style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>\n            <View\n              style={{\n                width: 36,\n                height: 36,\n                borderRadius: radius.capsule(36),\n                backgroundColor: alpha(colors.accent, dark ? 0.22 : 0.12),\n                alignItems: 'center',\n                justifyContent: 'center',\n              }}\n            >\n              <Text style={{ fontSize: 13, fontWeight: '400', color: colors.accent }}>{t.slice(0, 1)}</Text>\n            </View>\n            <View style={{ flex: 1 }}>\n              <Text numberOfLines={1} style={{ fontSize: 14.5, fontWeight: '400', color: colors.foreground }}>{t}</Text>\n              <Text numberOfLines={1} style={{ fontSize: 13, fontWeight: '400', color: colors.mutedForeground }}>{s}</Text>\n            </View>\n            <Text style={{ fontSize: 12, fontWeight: '400', color: colors.mutedForeground }}>{m}</Text>\n          </View>\n        ))}\n      </View>\n      {children}\n    </View>\n  );\n}\n\nconst ROWS: Record<string, Row[]> = {\n  home: [\n    ['Maya Chen', 'Shipped the onboarding redesign', '2m'],\n    ['Leo Park', 'Booked the team offsite for June', '1h'],\n  ],\n  explore: [\n    ['Design Systems Weekly', 'Motion tokens that scale', 'New'],\n    ['Product Notes', 'How Linear plans a cycle', '4m read'],\n  ],\n  search: [\n    ['Recent: invoices', 'Q2 invoices · 14 results', 'Today'],\n    ['Recent: Maya', 'People · Design team', 'Mon'],\n  ],\n  projects: [\n    ['Mobile app 2.0', '18 of 24 tasks done', '75%'],\n    ['Brand refresh', 'Review on Thursday', '40%'],\n  ],\n  saved: [\n    ['Kyoto travel guide', 'Saved from Atlas', 'Apr 2'],\n    ['Sourdough basics', 'Saved from Recipes', 'Mar 28'],\n  ],\n  inbox: [\n    ['Priya Nair', 'Can you review the pricing page?', '9:41'],\n    ['GitHub', 'PR #482 was approved', '9:12'],\n  ],\n  analytics: [\n    ['Weekly active users', '12,480 · up 8.2%', '7d'],\n    ['Conversion', '3.4% · up 0.6 pts', '7d'],\n  ],\n  activity: [\n    ['Leo Park', 'Commented on Launch plan', '5m'],\n    ['Ana Ruiz', 'Moved Pricing to Done', '22m'],\n  ],\n  profile: [\n    ['Karan Kumar', 'Product designer · Berlin', 'Edit'],\n    ['Notifications', 'Mentions and replies only', 'On'],\n  ],\n  home2: [\n    ['Late Night Drive', 'Playlist · 42 songs', '2h 31m'],\n    ['Midnight City', 'M83 · Hurry Up, We\\'re Dreaming', '4:03'],\n  ],\n  browse: [\n    ['New this week', 'Fresh releases picked for you', '24'],\n    ['Focus', 'Instrumental, low tempo', '60'],\n  ],\n  find: [\n    ['Recent: Tycho', 'Artist · Ambient', 'Yesterday'],\n    ['Recent: lo-fi beats', 'Playlist · 120 songs', 'Sun'],\n  ],\n  library: [\n    ['Liked songs', '1,204 songs', 'Pinned'],\n    ['Downloaded', '86 songs · 412 MB', 'Offline'],\n  ],\n};\n\nconst titleOf = (items: BottomNavItem[], key: string) => items.find((i) => i.key === key)?.label ?? '';\n\nexport default function MusicIconsOnly() {\n  const items: BottomNavItem[] = [\n    { key: 'home2', label: 'Listen now', icon: 'music' },\n    { key: 'browse', label: 'Browse', icon: 'browse' },\n    { key: 'library', label: 'Library', icon: 'library' },\n    { key: 'find', label: 'Search', icon: 'search' },\n  ];\n  const [tab, setTab] = useState('home2');\n  return (\n    <Screen title={titleOf(items, tab)} rows={ROWS[tab]}>\n      <BottomNav variant=\"floating\" showLabels={false} items={items} value={tab} onValueChange={setTab} />\n    </Screen>\n  );\n}\n"
+    }
+  ]
+}