@expokit/cli 0.0.0-stage → 0.2.0

package/registry/_docs/badge.json

@@ -0,0 +1,117 @@
+{
+  "name": "badge",
+  "category": "Display",
+  "aliases": [],
+  "exportName": "BadgeIcon",
+  "files": [
+    "src/components/ui/badge.tsx"
+  ],
+  "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)."
+    ],
+    [
+      "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."
+    ]
+  ],
+  "examples": [
+    {
+      "name": "Variants",
+      "title": "Variants",
+      "code": "import { Pressable, Text, View } from 'react-native';\nimport { Badge, BadgeIcon, BadgeIconTile, NotificationBadge } 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 } 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": "Sizes",
+      "title": "Sizes",
+      "code": "import { Pressable, Text, View } from 'react-native';\nimport { Badge, BadgeIcon, BadgeIconTile, NotificationBadge } 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, { useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { Badge, BadgeIcon, BadgeIconTile, NotificationBadge } 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,119 @@
+{
+  "name": "bottom-nav",
+  "category": "Navigation",
+  "aliases": [
+    "bottom-tabs",
+    "tab-bar",
+    "bottom-bar"
+  ],
+  "exportName": "BottomNav",
+  "files": [
+    "src/components/ui/bottom-nav.tsx"
+  ],
+  "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`)."
+    ]
+  ],
+  "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"
+    }
+  ]
+}

package/registry/_docs/bottom-sheet.json

@@ -0,0 +1,158 @@
+{
+  "name": "bottom-sheet",
+  "category": "Overlays",
+  "aliases": [],
+  "exportName": "BottomSheet",
+  "files": [
+    "src/components/ui/bottom-sheet.tsx"
+  ],
+  "props": [
+    [
+      "open",
+      "boolean",
+      "—",
+      "Show the sheet."
+    ],
+    [
+      "onClose",
+      "() => void",
+      "—",
+      "Called after it is dragged, flung, tapped or back-buttoned closed."
+    ],
+    [
+      "snapPoints",
+      "(number | \"NN%\")[]",
+      "content height",
+      "Resting heights, in points or % of the screen. Omit to size the sheet to its content (taller content scrolls)."
+    ],
+    [
+      "initialSnap",
+      "number",
+      "0",
+      "Snap index it opens at."
+    ],
+    [
+      "snapIndex",
+      "number",
+      "—",
+      "Controlled snap index — change it while open to move the sheet."
+    ],
+    [
+      "onSnapChange",
+      "(index: number) => void",
+      "—",
+      "Fires when it settles on another snap."
+    ],
+    [
+      "dismissible",
+      "boolean",
+      "true",
+      "Allow drag-down / scrim / back to close; otherwise it rubber-bands at the lowest snap."
+    ],
+    [
+      "title / subtitle",
+      "string",
+      "—",
+      "Left-aligned heading and muted line under the grabber."
+    ],
+    [
+      "headerRight",
+      "ReactNode",
+      "—",
+      "Trailing node in the title row, e.g. a Reset link."
+    ],
+    [
+      "showClose",
+      "boolean",
+      "with a title",
+      "Round ✕ in the header (shown when dismissible, there's a title and no headerRight)."
+    ],
+    [
+      "handle",
+      "boolean",
+      "true",
+      "Grabber pill (also an accessibility adjustable)."
+    ],
+    [
+      "scrollable",
+      "boolean",
+      "false",
+      "Body is a ScrollView: below the top snap a drag resizes the sheet, at the top snap it scrolls, and pulling down from the top collapses it."
+    ],
+    [
+      "dragFromContent",
+      "boolean",
+      "= scrollable",
+      "Let vertical drags on the body move the sheet. Leave false if children contain their own ScrollView."
+    ],
+    [
+      "footer",
+      "ReactNode",
+      "—",
+      "Pinned to the bottom of the visible sheet at every snap point."
+    ],
+    [
+      "avoidKeyboard",
+      "boolean",
+      "true",
+      "Lift the sheet above the keyboard (capped below the status bar; the rest becomes scroll padding)."
+    ],
+    [
+      "haptics",
+      "boolean",
+      "true",
+      "Light impact on open, selection tick on each snap."
+    ],
+    [
+      "backdropOpacity",
+      "number",
+      "1",
+      "Scrim dim at the top snap, 0–1."
+    ],
+    [
+      "bottomInset",
+      "number",
+      "platform safe inset",
+      "Extra padding above the home indicator; pass useSafeAreaInsets().bottom for the device."
+    ],
+    [
+      "accessibilityLabel",
+      "string",
+      "title",
+      "Label for the modal sheet."
+    ],
+    [
+      "style / contentStyle",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Sheet and content styles."
+    ]
+  ],
+  "examples": [
+    {
+      "name": "Basic",
+      "title": "Basic",
+      "code": "import React, { useState } from 'react';\nimport { Pressable, ScrollView, Text, TextInput, View } from 'react-native';\nimport { Avatar } from '@/components/ui/avatar';\nimport { BottomSheet } from '@/components/ui/bottom-sheet';\nimport { Button } from '@/components/ui/button';\nimport { ListIcon, ListItem, ListSection } from '@/components/ui/list-item';\nimport { alpha, readableOn, useKit } from '@/lib/kit';\n\nexport default function Basic() {\n  const { colors, radius } = useKit();\n  const [open, setOpen] = useState(false);\n  const apps: [string, 'mail' | 'phone' | 'globe' | 'heart', string][] = [\n    ['Mail', 'mail', colors.accent],\n    ['Messages', 'phone', colors.success],\n    ['Browser', 'globe', colors.warning],\n    ['Favorites', 'heart', colors.danger],\n  ];\n  return (\n    <View style={{ alignItems: 'center' }}>\n      <Button variant=\"accent\" onPress={() => setOpen(true)}>\n        Share album\n      </Button>\n      <BottomSheet\n        open={open}\n        onClose={() => setOpen(false)}\n        title=\"Share “Lisbon, May 12–16”\"\n        subtitle=\"24 photos · 3 videos\"\n        contentStyle={{ paddingHorizontal: 0 }}\n      >\n        <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ gap: 18, paddingHorizontal: 20, paddingVertical: 8 }}>\n          {['Ana Costa', 'Luis Moreno', 'Priya Shah', 'Tom Becker', 'Mei Lin'].map((name) => (\n            <Pressable key={name} accessibilityRole=\"button\" accessibilityLabel={`Send to ${name}`} style={{ alignItems: 'center', gap: 6, width: 58 }}>\n              <Avatar name={name} size={54} />\n              <Text numberOfLines={1} style={{ fontSize: 12, color: colors.foreground }}>\n                {name.split(' ')[0]}\n              </Text>\n            </Pressable>\n          ))}\n        </ScrollView>\n        <View style={{ flexDirection: 'row', justifyContent: 'space-between', paddingHorizontal: 20, paddingVertical: 14 }}>\n          {apps.map(([label, icon, color]) => (\n            <Pressable key={label} accessibilityRole=\"button\" accessibilityLabel={label} style={{ alignItems: 'center', gap: 6, flex: 1 }}>\n              <View\n                style={{\n                  width: 54,\n                  height: 54,\n                  borderRadius: radius.scale(16),\n                  backgroundColor: color,\n                  alignItems: 'center',\n                  justifyContent: 'center',\n                }}\n              >\n                <ListIcon name={icon} color={readableOn(color)} size={24} />\n              </View>\n              <Text style={{ fontSize: 12, color: colors.mutedForeground }}>{label}</Text>\n            </Pressable>\n          ))}\n        </View>\n        <ListSection>\n          <ListItem title=\"Copy link\" icon=\"globe\" iconVariant=\"tinted\" chevron={false} size=\"sm\" onPress={() => setOpen(false)} />\n          <ListItem title=\"Add to shared album\" icon=\"user\" iconVariant=\"tinted\" chevron={false} size=\"sm\" onPress={() => setOpen(false)} />\n          <ListItem title=\"Mark as favorite\" icon=\"star\" iconVariant=\"tinted\" chevron={false} size=\"sm\" onPress={() => setOpen(false)} />\n        </ListSection>\n      </BottomSheet>\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "SnapPoints",
+      "title": "Snap Points",
+      "code": "import React, { useState } from 'react';\nimport { Pressable, ScrollView, Text, TextInput, View } from 'react-native';\nimport { Avatar } from '@/components/ui/avatar';\nimport { BottomSheet } from '@/components/ui/bottom-sheet';\nimport { Button } from '@/components/ui/button';\nimport { ListIcon, ListItem, ListSection } from '@/components/ui/list-item';\nimport { alpha, readableOn, useKit } from '@/lib/kit';\n\nfunction useMuted() {\n  const { colors } = useKit();\n  return { fontSize: 14, lineHeight: 20, color: colors.mutedForeground };\n}\n\nexport default function SnapPoints() {\n  const { colors, radius } = useKit();\n  const muted = useMuted();\n  const [open, setOpen] = useState(false);\n  const [snap, setSnap] = useState(0);\n  return (\n    <View style={{ alignItems: 'center' }}>\n      <Button variant=\"accent\" onPress={() => setOpen(true)}>\n        Track your ride\n      </Button>\n      <BottomSheet\n        open={open}\n        onClose={() => {\n          setOpen(false);\n          setSnap(0);\n        }}\n        snapPoints={['40%', '90%']}\n        snapIndex={snap}\n        onSnapChange={setSnap}\n        scrollable\n        accessibilityLabel=\"Ride details\"\n      >\n        <View style={{ flexDirection: 'row', alignItems: 'flex-start', justifyContent: 'space-between' }}>\n          <View>\n            <Text style={{ fontSize: 24, letterSpacing: -0.5, color: colors.foreground }}>Arriving in 4 min</Text>\n            <Text style={[muted, { marginTop: 2 }]}>Silver Toyota Prius · 7KJ 482</Text>\n          </View>\n          <View\n            style={{\n              paddingHorizontal: 10,\n              height: 28,\n              justifyContent: 'center',\n              borderRadius: radius.capsule(28),\n              backgroundColor: alpha(colors.success, 0.14),\n            }}\n          >\n            <Text style={{ fontSize: 13, color: colors.success }}>On time</Text>\n          </View>\n        </View>\n        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12, marginTop: 18 }}>\n          <Avatar name=\"Daniel Ortiz\" size={48} />\n          <View style={{ flex: 1 }}>\n            <Text style={{ fontSize: 16, color: colors.foreground }}>Daniel Ortiz</Text>\n            <Text style={muted}>★ 4.92 · 2,184 trips</Text>\n          </View>\n        </View>\n        <View style={{ flexDirection: 'row', gap: 10, marginTop: 18 }}>\n          <Button variant=\"secondary\" style={{ flex: 1 }}>\n            Message\n          </Button>\n          <Button variant=\"secondary\" style={{ flex: 1 }}>\n            Call\n          </Button>\n          <Button variant=\"secondary\" style={{ flex: 1 }} onPress={() => setSnap(1)}>\n            {snap === 0 ? 'Details' : 'Share'}\n          </Button>\n        </View>\n\n        <Text style={[muted, { marginTop: 28, marginBottom: 6, fontSize: 12, letterSpacing: 0.8 }]}>TRIP</Text>\n        {[\n          ['Pickup', 'Rua Augusta 24, Baixa', colors.accent],\n          ['Drop-off', 'Lisbon Airport, Terminal 1', colors.foreground],\n        ].map(([label, place, color]) => (\n          <View key={label} style={{ flexDirection: 'row', gap: 12, paddingVertical: 10 }}>\n            <View style={{ width: 10, height: 10, marginTop: 5, borderRadius: radius.capsule(10), backgroundColor: color }} />\n            <View>\n              <Text style={muted}>{label}</Text>\n              <Text style={{ fontSize: 15, color: colors.foreground }}>{place}</Text>\n            </View>\n          </View>\n        ))}\n        <Text style={[muted, { marginTop: 22, marginBottom: 6, fontSize: 12, letterSpacing: 0.8 }]}>FARE</Text>\n        {[\n          ['Comfort · 14.2 km', '₹333'],\n          ['Airport fee', '₹50'],\n          ['Promo SPRING10', '−₹35'],\n          ['Total · Visa ••42', '₹348'],\n        ].map(([item, price], i, all) => (\n          <View key={item} style={{ flexDirection: 'row', justifyContent: 'space-between', paddingVertical: 10 }}>\n            <Text style={[muted, i === all.length - 1 && { color: colors.foreground }]}>{item}</Text>\n            <Text style={{ fontSize: 14, color: colors.foreground }}>{price}</Text>\n          </View>\n        ))}\n        <Text style={[muted, { marginTop: 22, marginBottom: 6, fontSize: 12, letterSpacing: 0.8 }]}>SAFETY</Text>\n        <ListSection>\n          <ListItem title=\"Share trip status\" icon=\"user\" iconVariant=\"tinted\" size=\"sm\" onPress={() => {}} />\n          <ListItem title=\"Emergency assistance\" icon=\"shield\" iconVariant=\"tinted\" size=\"sm\" onPress={() => {}} />\n          <ListItem title=\"Cancel ride\" icon=\"trash\" destructive size=\"sm\" chevron={false} onPress={() => setOpen(false)} />\n        </ListSection>\n      </BottomSheet>\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Filters",
+      "title": "Filters",
+      "code": "import React, { useState } from 'react';\nimport { Pressable, ScrollView, Text, TextInput, View } from 'react-native';\nimport { BottomSheet } from '@/components/ui/bottom-sheet';\nimport { Button } from '@/components/ui/button';\nimport { ChipGroup } from '@/components/ui/chip-group';\nimport { Switch } from '@/components/ui/switch';\nimport { alpha, readableOn, useKit } from '@/lib/kit';\n\nexport default function Filters() {\n  const { colors } = useKit();\n  const [open, setOpen] = useState(false);\n  const [type, setType] = useState<string[]>(['Entire home']);\n  const [price, setPrice] = useState<string[]>(['₹5,000 – ₹10,000']);\n  const [rooms, setRooms] = useState<string[]>(['2']);\n  const [amenities, setAmenities] = useState<string[]>(['Wi-Fi', 'Kitchen']);\n  const [instant, setInstant] = useState(true);\n  const [flexible, setFlexible] = useState(false);\n  const count = 214 - amenities.length * 23 - (instant ? 31 : 0) - (flexible ? 18 : 0);\n  const reset = () => {\n    setType([]);\n    setPrice([]);\n    setRooms([]);\n    setAmenities([]);\n    setInstant(false);\n    setFlexible(false);\n  };\n  const heading = (t: string) => <Text style={{ fontSize: 16, color: colors.foreground, marginTop: 20, marginBottom: 10 }}>{t}</Text>;\n  return (\n    <View style={{ alignItems: 'center' }}>\n      <Button variant=\"outline\" onPress={() => setOpen(true)}>\n        Filters · Porto\n      </Button>\n      <BottomSheet\n        open={open}\n        onClose={() => setOpen(false)}\n        snapPoints={['62%', '92%']}\n        scrollable\n        title=\"Filters\"\n        headerRight={\n          <Pressable onPress={reset} accessibilityRole=\"button\" hitSlop={12}>\n            <Text style={{ fontSize: 15, color: colors.accent }}>Reset</Text>\n          </Pressable>\n        }\n        footer={\n          <Button variant=\"accent\" block onPress={() => setOpen(false)}>\n            {`Show ${count} homes`}\n          </Button>\n        }\n      >\n        {heading('Type of place')}\n        <ChipGroup options={['Entire home', 'Private room', 'Shared room']} value={type} onValueChange={setType} />\n        {heading('Price per night')}\n        <ChipGroup options={['Under ₹5,000', '₹5,000 – ₹10,000', '₹10,000+']} value={price} onValueChange={setPrice} />\n        {heading('Bedrooms')}\n        <ChipGroup options={['Any', '1', '2', '3', '4+']} value={rooms} onValueChange={setRooms} />\n        {heading('Amenities')}\n        <ChipGroup\n          multiple\n          options={['Wi-Fi', 'Kitchen', 'Washer', 'Air conditioning', 'Free parking', 'Workspace', 'Pool']}\n          value={amenities}\n          onValueChange={setAmenities}\n        />\n        {heading('Booking options')}\n        <View style={{ gap: 14 }}>\n          <Switch label=\"Instant book\" description=\"Book without waiting for host approval\" value={instant} onValueChange={setInstant} />\n          <Switch label=\"Free cancellation\" description=\"Cancel up to 48 h before check-in\" value={flexible} onValueChange={setFlexible} />\n        </View>\n      </BottomSheet>\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "KeyboardAware",
+      "title": "Keyboard Aware",
+      "code": "import React, { useState } from 'react';\nimport { Pressable, ScrollView, Text, TextInput, View } from 'react-native';\nimport { BottomSheet } from '@/components/ui/bottom-sheet';\nimport { Button } from '@/components/ui/button';\nimport { alpha, readableOn, useKit } from '@/lib/kit';\n\nexport default function KeyboardAware() {\n  const { colors, radius } = useKit();\n  const [open, setOpen] = useState(false);\n  const [text, setText] = useState('');\n  return (\n    <View style={{ alignItems: 'center' }}>\n      <Button variant=\"secondary\" onPress={() => setOpen(true)}>\n        Reply to Lena\n      </Button>\n      <BottomSheet\n        open={open}\n        onClose={() => setOpen(false)}\n        snapPoints={[300]}\n        title=\"Reply to Lena Fischer\"\n        subtitle=\"Re: Offsite agenda\"\n      >\n        <TextInput\n          value={text}\n          onChangeText={setText}\n          placeholder=\"Thursday works for me — I’ll bring the prototypes.\"\n          placeholderTextColor={colors.mutedForeground}\n          multiline\n          accessibilityLabel=\"Reply\"\n          style={{\n            minHeight: 110,\n            padding: 14,\n            fontSize: 15,\n            textAlignVertical: 'top',\n            color: colors.foreground,\n            borderRadius: radius.lg,\n            borderWidth: 1,\n            borderColor: alpha(colors.foreground, 0.08),\n            backgroundColor: colors.muted,\n          }}\n        />\n        <View style={{ flexDirection: 'row', justifyContent: 'flex-end', gap: 10, marginTop: 12 }}>\n          <Button variant=\"ghost\" onPress={() => setOpen(false)}>\n            Discard\n          </Button>\n          <Button\n            variant=\"accent\"\n            disabled={!text.trim()}\n            onPress={() => {\n              setText('');\n              setOpen(false);\n            }}\n          >\n            Send\n          </Button>\n        </View>\n      </BottomSheet>\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "NonDismissible",
+      "title": "Non Dismissible",
+      "code": "import React, { useState } from 'react';\nimport { Pressable, ScrollView, Text, TextInput, View } from 'react-native';\nimport { BottomSheet } from '@/components/ui/bottom-sheet';\nimport { Button } from '@/components/ui/button';\nimport { alpha, readableOn, useKit } from '@/lib/kit';\n\nfunction useMuted() {\n  const { colors } = useKit();\n  return { fontSize: 14, lineHeight: 20, color: colors.mutedForeground };\n}\n\nexport default function NonDismissible() {\n  const muted = useMuted();\n  const [open, setOpen] = useState(false);\n  return (\n    <View style={{ alignItems: 'center' }}>\n      <Button variant=\"secondary\" onPress={() => setOpen(true)}>\n        Review terms\n      </Button>\n      <BottomSheet\n        open={open}\n        onClose={() => setOpen(false)}\n        snapPoints={['40%', '70%']}\n        dismissible={false}\n        title=\"We updated our terms\"\n        subtitle=\"Effective November 1, 2026\"\n      >\n        <Text style={muted}>\n          Your files stay encrypted at rest, and we never sell personal information. We now keep deleted items for 30 days so you\n          can restore them. Please review and accept to keep using your account.\n        </Text>\n        <View style={{ flexDirection: 'row', gap: 10, marginTop: 20 }}>\n          <Button variant=\"outline\" style={{ flex: 1 }} block onPress={() => setOpen(false)}>\n            Later\n          </Button>\n          <Button variant=\"accent\" style={{ flex: 1 }} block onPress={() => setOpen(false)}>\n            Accept\n          </Button>\n        </View>\n      </BottomSheet>\n    </View>\n  );\n}\n"
+    }
+  ]
+}

package/registry/_docs/bullet.json

@@ -0,0 +1,24 @@
+{
+  "name": "bullet",
+  "category": "Charts",
+  "aliases": [],
+  "exportName": "BulletChart",
+  "files": [
+    "src/components/charts/bullet.tsx"
+  ],
+  "props": [
+    [
+      "data",
+      "{ label, value, target?, ranges? }[]",
+      "—",
+      "KPI rows."
+    ],
+    [
+      "rowHeight / barHeight",
+      "number",
+      "52 / 14",
+      "Sizing."
+    ]
+  ],
+  "examples": []
+}