@expokit/cli 0.0.0-stage → 0.3.0

package/registry/_docs/bottom-sheet.json

@@ -0,0 +1,186 @@
+{
+  "name": "bottom-sheet",
+  "category": "Overlays",
+  "aliases": [],
+  "exportName": "BottomSheet",
+  "files": [
+    "src/components/ui/bottom-sheet.tsx"
+  ],
+  "summary": "A draggable sheet with snap points whose grabber stretches as you pull it.",
+  "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."
+    ]
+  ],
+  "behavior": [
+    [
+      "Touch",
+      "Drag the grabber or header between snap points; release velocity picks the detent and dragging past the limits rubber-bands. Tap the scrim or drag down to close."
+    ],
+    [
+      "Motion",
+      "Glides between detents on a firm spring while the scrim dims with its height. The keyboard lifts the sheet when avoidKeyboard is on."
+    ],
+    [
+      "Reduced motion",
+      "Snapping uses a short timing instead of a spring."
+    ],
+    [
+      "Haptics",
+      "A light impact on open and a selection tick on each snap. Turn off with haptics={false}."
+    ],
+    [
+      "Screen readers",
+      "The sheet is a modal view. The grabber is adjustable with increment and decrement actions to change snap point, and the title is a header."
+    ],
+    [
+      "Keyboard",
+      "Escape closes it on web when dismissible; the Android back button closes it too."
+    ]
+  ],
+  "usage": "import { useState } from 'react';\nimport { BottomSheet } from '@/components/ui/bottom-sheet';\n\nconst [open, setOpen] = useState(false);\n<BottomSheet\n  open={open}\n  onClose={() => setOpen(false)}\n  snapPoints={['40%', '85%']}\n  title=\"Share album\"\n/>",
+  "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,27 @@
+{
+  "name": "bullet",
+  "category": "Charts",
+  "aliases": [],
+  "exportName": "BulletChart",
+  "files": [
+    "src/components/charts/bullet.tsx"
+  ],
+  "summary": null,
+  "props": [
+    [
+      "data",
+      "{ label, value, target?, ranges? }[]",
+      "—",
+      "KPI rows."
+    ],
+    [
+      "rowHeight / barHeight",
+      "number",
+      "52 / 14",
+      "Sizing."
+    ]
+  ],
+  "behavior": [],
+  "usage": null,
+  "examples": []
+}

package/registry/_docs/button-3d.json

@@ -0,0 +1,138 @@
+{
+  "name": "button-3d",
+  "category": "3D",
+  "aliases": [],
+  "exportName": "Button3D",
+  "files": [
+    "src/components/ui/button-3d.tsx"
+  ],
+  "summary": "A keycap-style button whose lit face sinks into its edge when pressed.",
+  "props": [
+    [
+      "children",
+      "ReactNode",
+      "—",
+      "Label, a single glyph (circle buttons) or custom content."
+    ],
+    [
+      "onPress",
+      "() => void",
+      "—",
+      "Fires on tap."
+    ],
+    [
+      "appearance",
+      "\"auto\" | \"light\" | \"dark\" | \"glass\"",
+      "\"auto\"",
+      "Keycap material; auto is light on dark screens and dark on light ones. Glass is for buttons on photos."
+    ],
+    [
+      "color",
+      "string",
+      "—",
+      "A custom face colour instead of a material, e.g. your brand colour."
+    ],
+    [
+      "size",
+      "\"sm\" | \"md\" | \"lg\"",
+      "\"md\"",
+      "Height and text size (36 / 46 / 56)."
+    ],
+    [
+      "shape",
+      "\"rounded\" | \"pill\" | \"circle\"",
+      "\"rounded\"",
+      "Keycap, pill or round icon button."
+    ],
+    [
+      "depth",
+      "number",
+      "4 / 5 / 6 by size",
+      "Edge height in points."
+    ],
+    [
+      "icon",
+      "ReactNode",
+      "—",
+      "Shown before the label."
+    ],
+    [
+      "block",
+      "boolean",
+      "false",
+      "Stretch to the parent's width."
+    ],
+    [
+      "loading",
+      "boolean",
+      "false",
+      "Show a spinner and ignore taps."
+    ],
+    [
+      "disabled",
+      "boolean",
+      "false",
+      "Dim the button and ignore taps."
+    ],
+    [
+      "haptics",
+      "boolean",
+      "true",
+      "Light haptic tap on press (iOS / Android)."
+    ],
+    [
+      "accessibilityLabel",
+      "string",
+      "—",
+      "Label for screen readers (needed for icon-only buttons)."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the root (width, margins)."
+    ]
+  ],
+  "behavior": [
+    [
+      "Touch",
+      "The face sinks into its edge on press-in and springs back on release. Small sizes pad their hit area to 44pt."
+    ],
+    [
+      "Haptics",
+      "A light impact on press-in on iOS and on press on Android, so scrolling past it doesn't buzz. Turn off with haptics={false}."
+    ],
+    [
+      "Screen readers",
+      "A button with disabled and busy state. Pass accessibilityLabel for circle keys that show only a glyph."
+    ]
+  ],
+  "usage": "import { Button3D } from '@/components/ui/button-3d';\n\n<Button3D size=\"lg\" shape=\"pill\" onPress={startTrip}>\n  Start the trip\n</Button3D>",
+  "examples": [
+    {
+      "name": "OnPhoto",
+      "title": "On Photo",
+      "code": "import React, { useState } from 'react';\nimport { Image, Text, View } from 'react-native';\nimport { Button3D } from '@/components/ui/button-3d';\nimport { useKit } from '@/lib/kit';\n\n/** Any photo works (`require()` or a URL). `blur` gives soft, abstract art. */\nconst photo = (id: number, w: number, h: number, blur = false) => ({ uri: `https://picsum.photos/id/${id}/${w}/${h}${blur ? '?blur=10' : ''}` });\n\n/** A screen title, as it sits above the content in your app. */\nfunction Header({ title, sub, right }: { title: string; sub?: string; right?: React.ReactNode }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>\n      <View style={{ flex: 1 }}>\n        <Text style={{ color: colors.foreground, fontSize: 22, fontWeight: '700', letterSpacing: -0.4 }}>{title}</Text>\n        {sub ? <Text style={{ color: colors.mutedForeground, fontSize: 13, marginTop: 2 }}>{sub}</Text> : null}\n      </View>\n      {right}\n    </View>\n  );\n}\n\nexport default function OnPhoto() {\n  const { colors } = useKit();\n  return (\n    <View style={{ gap: 18 }}>\n      <Header\n        title=\"Good morning, Maya\"\n        sub=\"Your trip starts in 3 days\"\n        right={\n          <View style={{ width: 40, height: 40, borderRadius: 20, backgroundColor: colors.muted, alignItems: 'center', justifyContent: 'center' }}>\n            <Text style={{ color: colors.foreground, fontSize: 14, fontWeight: '700' }}>MP</Text>\n          </View>\n        }\n      />\n      <View style={{ height: 440, borderRadius: 28, overflow: 'hidden', backgroundColor: '#1a2a22' }}>\n        <Image alt=\"\" source={photo(1039, 700, 880)} style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }} />\n        <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,0.28)' }} />\n        <View style={{ flex: 1, justifyContent: 'flex-end', padding: 22, gap: 16 }}>\n          <View>\n            <Text style={{ color: 'rgba(255,255,255,0.85)', fontSize: 12, fontWeight: '700', letterSpacing: 1.2 }}>OREGON · 3 DAYS</Text>\n            <Text style={{ color: '#fff', fontSize: 30, fontWeight: '800', letterSpacing: -0.8 }}>Multnomah Falls</Text>\n            <Text style={{ color: 'rgba(255,255,255,0.8)', fontSize: 13, marginTop: 2 }}>Waterfalls, old-growth forest and a lodge by the river</Text>\n          </View>\n          <View style={{ flexDirection: 'row', gap: 10, alignItems: 'center' }}>\n            <Button3D appearance=\"glass\" size=\"lg\" shape=\"pill\" style={{ flex: 1 }} block>\n              Start the trip\n            </Button3D>\n            <Button3D appearance=\"glass\" size=\"lg\" shape=\"circle\" accessibilityLabel=\"Save\">\n              ♡\n            </Button3D>\n            <Button3D appearance=\"glass\" size=\"lg\" shape=\"circle\" accessibilityLabel=\"Share\">\n              ↗\n            </Button3D>\n          </View>\n        </View>\n      </View>\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Keypad",
+      "title": "Keypad",
+      "code": "import React, { useState } from 'react';\nimport { Image, Text, View } from 'react-native';\nimport { Button3D } from '@/components/ui/button-3d';\nimport { useKit } from '@/lib/kit';\n\nexport default function Keypad() {\n  const { colors } = useKit();\n  const [pin, setPin] = useState('');\n  const keys = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '', '0', '⌫'];\n  return (\n    <View style={{ gap: 26, alignItems: 'center' }}>\n      <View style={{ alignItems: 'center', gap: 4 }}>\n        <Text style={{ color: colors.foreground, fontSize: 22, fontWeight: '700', letterSpacing: -0.4 }}>Enter passcode</Text>\n        <Text style={{ color: colors.mutedForeground, fontSize: 13 }}>to unlock Northwind</Text>\n      </View>\n      <View style={{ flexDirection: 'row', gap: 14 }}>\n        {[0, 1, 2, 3].map((i) => (\n          <View key={i} style={{ width: 12, height: 12, borderRadius: 6, backgroundColor: i < pin.length ? colors.foreground : colors.border }} />\n        ))}\n      </View>\n      <View style={{ width: 252, flexDirection: 'row', flexWrap: 'wrap', gap: 12, justifyContent: 'center' }}>\n        {keys.map((k, i) =>\n          k ? (\n            <Button3D\n              key={k}\n              appearance=\"light\"\n              size=\"lg\"\n              style={{ width: 76 }}\n              accessibilityLabel={k === '⌫' ? 'Delete' : k}\n              onPress={() => setPin((p) => (k === '⌫' ? p.slice(0, -1) : (p + k).slice(0, 4)))}\n            >\n              {k}\n            </Button3D>\n          ) : (\n            <View key={`gap-${i}`} style={{ width: 76 }} />\n          )\n        )}\n      </View>\n      <Text style={{ color: colors.mutedForeground, fontSize: 13, fontWeight: '500' }}>Forgot passcode?</Text>\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Checkout",
+      "title": "Checkout",
+      "code": "import React, { useState } from 'react';\nimport { Image, Text, View } from 'react-native';\nimport { Button3D } from '@/components/ui/button-3d';\nimport { useKit } from '@/lib/kit';\n\n/** Any photo works (`require()` or a URL). `blur` gives soft, abstract art. */\nconst photo = (id: number, w: number, h: number, blur = false) => ({ uri: `https://picsum.photos/id/${id}/${w}/${h}${blur ? '?blur=10' : ''}` });\n\n/** A screen title, as it sits above the content in your app. */\nfunction Header({ title, sub, right }: { title: string; sub?: string; right?: React.ReactNode }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>\n      <View style={{ flex: 1 }}>\n        <Text style={{ color: colors.foreground, fontSize: 22, fontWeight: '700', letterSpacing: -0.4 }}>{title}</Text>\n        {sub ? <Text style={{ color: colors.mutedForeground, fontSize: 13, marginTop: 2 }}>{sub}</Text> : null}\n      </View>\n      {right}\n    </View>\n  );\n}\n\nexport default function Checkout() {\n  const { colors } = useKit();\n  const [busy, setBusy] = useState(false);\n  const items = [\n    { img: 766, name: 'House blend beans', detail: '250 g · ×2', price: '₹880' },\n    { img: 1060, name: 'Pour-over filters', detail: 'Pack of 100', price: '₹120' },\n  ];\n  const line = (label: string, value: string, strong = false) => (\n    <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>\n      <Text style={{ color: strong ? colors.foreground : colors.mutedForeground, fontSize: strong ? 16 : 14, fontWeight: strong ? '700' : '400' }}>{label}</Text>\n      <Text style={{ color: colors.foreground, fontSize: strong ? 16 : 14, fontWeight: strong ? '700' : '500' }}>{value}</Text>\n    </View>\n  );\n  return (\n    <View style={{ gap: 18 }}>\n      <Header title=\"Checkout\" sub=\"2 items · arrives tomorrow\" />\n      <View style={{ gap: 12 }}>\n        {items.map((it) => (\n          <View key={it.name} style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>\n            <Image alt=\"\" source={photo(it.img, 120, 120)} style={{ width: 52, height: 52, borderRadius: 12, backgroundColor: colors.muted }} />\n            <View style={{ flex: 1 }}>\n              <Text style={{ color: colors.foreground, fontSize: 15, fontWeight: '600' }}>{it.name}</Text>\n              <Text style={{ color: colors.mutedForeground, fontSize: 12 }}>{it.detail}</Text>\n            </View>\n            <Text style={{ color: colors.foreground, fontSize: 14, fontWeight: '600' }}>{it.price}</Text>\n          </View>\n        ))}\n      </View>\n      <View style={{ gap: 8, paddingTop: 14, borderTopWidth: 1, borderTopColor: colors.border }}>\n        {line('Subtotal', '₹1,000')}\n        {line('Express delivery', '₹240')}\n        {line('Total', '₹1,240', true)}\n      </View>\n      <View style={{ gap: 12 }}>\n        <Button3D\n          block\n          size=\"lg\"\n          loading={busy}\n          onPress={() => {\n            setBusy(true);\n            setTimeout(() => setBusy(false), 1500);\n          }}\n        >\n          Pay ₹1,240\n        </Button3D>\n        <Button3D block size=\"md\" color={colors.muted}>\n          Add a promo code\n        </Button3D>\n      </View>\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Keycaps",
+      "title": "Keycaps",
+      "code": "import React, { useState } from 'react';\nimport { Image, Text, View } from 'react-native';\nimport { Button3D } from '@/components/ui/button-3d';\nimport { useKit } from '@/lib/kit';\n\n/** A screen title, as it sits above the content in your app. */\nfunction Header({ title, sub, right }: { title: string; sub?: string; right?: React.ReactNode }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>\n      <View style={{ flex: 1 }}>\n        <Text style={{ color: colors.foreground, fontSize: 22, fontWeight: '700', letterSpacing: -0.4 }}>{title}</Text>\n        {sub ? <Text style={{ color: colors.mutedForeground, fontSize: 13, marginTop: 2 }}>{sub}</Text> : null}\n      </View>\n      {right}\n    </View>\n  );\n}\n\nexport default function Keycaps() {\n  const row = (keys: [string, number?][], appearance: 'light' | 'dark') => (\n    <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'center' }}>\n      {keys.map(([k, w]) => (\n        <Button3D key={k} appearance={appearance} size=\"lg\" style={{ width: w ?? 56 }} accessibilityLabel={k}>\n          {k}\n        </Button3D>\n      ))}\n    </View>\n  );\n  return (\n    <View style={{ gap: 22 }}>\n      <Header title=\"Keycaps\" sub=\"Press and hold a key to feel it sink\" />\n      <View style={{ gap: 12 }}>\n        {row([['esc', 64], ['Q'], ['W'], ['E'], ['R']], 'light')}\n        {row([['⌘', 64], ['A'], ['S'], ['D'], ['F']], 'dark')}\n        {row([['space', 196], ['↵', 92]], 'light')}\n      </View>\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Materials",
+      "title": "Materials",
+      "code": "import React, { useState } from 'react';\nimport { Image, Text, View } from 'react-native';\nimport { Button3D } from '@/components/ui/button-3d';\nimport { useKit } from '@/lib/kit';\n\n/** Any photo works (`require()` or a URL). `blur` gives soft, abstract art. */\nconst photo = (id: number, w: number, h: number, blur = false) => ({ uri: `https://picsum.photos/id/${id}/${w}/${h}${blur ? '?blur=10' : ''}` });\n\n/** A screen title, as it sits above the content in your app. */\nfunction Header({ title, sub, right }: { title: string; sub?: string; right?: React.ReactNode }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>\n      <View style={{ flex: 1 }}>\n        <Text style={{ color: colors.foreground, fontSize: 22, fontWeight: '700', letterSpacing: -0.4 }}>{title}</Text>\n        {sub ? <Text style={{ color: colors.mutedForeground, fontSize: 13, marginTop: 2 }}>{sub}</Text> : null}\n      </View>\n      {right}\n    </View>\n  );\n}\n\nexport default function Materials() {\n  return (\n    <View style={{ gap: 18 }}>\n      <Header title=\"Materials\" sub=\"Light, dark, frosted glass — or any colour\" />\n      <View style={{ flexDirection: 'row', gap: 10, justifyContent: 'center' }}>\n        <Button3D appearance=\"light\">Light</Button3D>\n        <Button3D appearance=\"dark\">Dark</Button3D>\n        <Button3D color=\"#ff5a5f\">Custom</Button3D>\n      </View>\n      <View style={{ borderRadius: 22, overflow: 'hidden', padding: 18, alignItems: 'center', backgroundColor: '#3a2b55' }}>\n        <Image alt=\"\" source={photo(888, 300, 160, true)} style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }} />\n        <View style={{ flexDirection: 'row', gap: 10 }}>\n          <Button3D appearance=\"glass\">Glass</Button3D>\n          <Button3D appearance=\"glass\" shape=\"pill\">\n            On any photo\n          </Button3D>\n        </View>\n      </View>\n    </View>\n  );\n}\n"
+    }
+  ]
+}

package/registry/_docs/button.json

@@ -0,0 +1,131 @@
+{
+  "name": "button",
+  "category": "Buttons",
+  "aliases": [],
+  "exportName": "Button",
+  "files": [
+    "src/components/ui/button.tsx"
+  ],
+  "summary": "A button that springs down on press, in eleven variants including gradient and glow.",
+  "props": [
+    [
+      "variant",
+      "\"primary\" | \"accent\" | \"secondary\" | \"outline\" | \"ghost\" | \"soft\" | \"destructive\" | \"link\" | \"gradient\" | \"glow\" | \"elevated\"",
+      "\"primary\"",
+      "Solid primary / accent / secondary / danger fill, bordered outline, transparent ghost, tinted soft, underlined link, two-tone gradient, accent with a coloured glow, or a raised elevated surface."
+    ],
+    [
+      "size",
+      "\"sm\" | \"md\" | \"lg\" | \"icon\"",
+      "\"md\"",
+      "36 / 46 / 54pt, or a round icon button."
+    ],
+    [
+      "loading",
+      "boolean",
+      "false",
+      "Spinner + blocks presses."
+    ],
+    [
+      "left / right",
+      "ReactNode",
+      "—",
+      "Icons beside the label."
+    ],
+    [
+      "block",
+      "boolean",
+      "false",
+      "Stretches to the parent's width (alignSelf: stretch)."
+    ],
+    [
+      "pill",
+      "boolean",
+      "false",
+      "Fully rounded."
+    ],
+    [
+      "color",
+      "string",
+      "theme accent",
+      "Any colour; recolours every tinted variant and picks readable text automatically."
+    ],
+    [
+      "gradientTo",
+      "string",
+      "color shifted 38° on the hue wheel",
+      "Second stop for variant=\"gradient\"."
+    ],
+    [
+      "haptics",
+      "boolean",
+      "false",
+      "Light tap on press."
+    ],
+    [
+      "textStyle",
+      "StyleProp<TextStyle>",
+      "—",
+      "Style for the label text (merged over size and variant typography)."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the outer animated wrapper (margins, alignment); the pressable surface keeps its own."
+    ],
+    [
+      "…PressableProps",
+      "",
+      "",
+      "onPress, disabled, …"
+    ]
+  ],
+  "behavior": [
+    [
+      "Touch",
+      "Scales down with a spring on press-in and bounces back on release. loading swaps the label for a spinner and blocks presses."
+    ],
+    [
+      "Haptics",
+      "Opt-in light impact on press with haptics; off by default."
+    ],
+    [
+      "Screen readers",
+      "A button with disabled and busy state."
+    ]
+  ],
+  "usage": "import { Button } from '@/components/ui/button';\n\n<Button variant=\"accent\" size=\"lg\" block onPress={checkout}>\n  Continue to payment\n</Button>",
+  "examples": [
+    {
+      "name": "Variants",
+      "title": "Variants",
+      "code": "import { Pressable, Text, View } from 'react-native';\nimport { Button } from '@/components/ui/button';\n\nexport default function Variants() {\n  return (\n    <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 10 }}>\n      <Button>Primary</Button>\n      <Button variant=\"accent\">Accent</Button>\n      <Button variant=\"secondary\">Secondary</Button>\n      <Button variant=\"outline\">Outline</Button>\n      <Button variant=\"soft\">Soft</Button>\n      <Button variant=\"ghost\">Ghost</Button>\n      <Button variant=\"elevated\">Elevated</Button>\n      <Button variant=\"destructive\">Delete</Button>\n      <Button variant=\"link\">Link</Button>\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "GradientAndGlow",
+      "title": "Gradient And Glow",
+      "code": "import { Pressable, Text, View } from 'react-native';\nimport { Button } from '@/components/ui/button';\nimport { readableOn, useKit } from '@/lib/kit';\n\nexport default function GradientAndGlow() {\n  const { colors } = useKit();\n  return (\n    <View style={{ gap: 12 }}>\n      <Button\n        variant=\"gradient\"\n        size=\"lg\"\n        block\n        pill\n        right={<Text style={{ color: readableOn(colors.accent), fontSize: 18 }}>→</Text>}\n      >\n        Get started\n      </Button>\n      <View style={{ flexDirection: 'row', gap: 10 }}>\n        <Button variant=\"glow\" pill style={{ flex: 1 }}>\n          Go live\n        </Button>\n        <Button variant=\"gradient\" pill style={{ flex: 1 }}>\n          Boost\n        </Button>\n      </View>\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "DynamicColor",
+      "title": "Dynamic Color",
+      "code": "import React, { useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { Button } from '@/components/ui/button';\nimport { readableOn, useKit } from '@/lib/kit';\n\nconst PALETTE = ['#6366f1', '#10b981', '#f59e0b', '#ef4444', '#0ea5e9', '#ec4899'];\n\nexport default function DynamicColor() {\n  const { colors, radius } = useKit();\n  const [color, setColor] = useState(PALETTE[0]);\n  return (\n    <View style={{ gap: 14 }}>\n      <View style={{ flexDirection: 'row', gap: 10 }}>\n        {PALETTE.map((c) => (\n          <Pressable\n            key={c}\n            onPress={() => setColor(c)}\n            accessibilityRole=\"button\"\n            accessibilityLabel={`Use ${c}`}\n            style={{\n              width: 28,\n              height: 28,\n              borderRadius: radius.full,\n              backgroundColor: c,\n              borderWidth: 3,\n              borderColor: c === color ? colors.foreground : 'transparent',\n            }}\n          />\n        ))}\n      </View>\n      <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 10 }}>\n        <Button variant=\"accent\" color={color}>Accent</Button>\n        <Button variant=\"gradient\" color={color}>Gradient</Button>\n        <Button variant=\"glow\" color={color}>Glow</Button>\n        <Button variant=\"soft\" color={color}>Soft</Button>\n        <Button variant=\"outline\" color={color}>Outline</Button>\n        <Button variant=\"elevated\" color={color}>Elevated</Button>\n      </View>\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Sizes",
+      "title": "Sizes",
+      "code": "import { Pressable, Text, View } from 'react-native';\nimport { Button } from '@/components/ui/button';\n\nexport default function Sizes() {\n  return (\n    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>\n      <Button size=\"sm\">Small</Button>\n      <Button size=\"md\">Medium</Button>\n      <Button size=\"lg\">Large</Button>\n      <Button size=\"icon\" variant=\"outline\">\n        <Text style={{ fontSize: 18 }}>♥</Text>\n      </Button>\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Loading",
+      "title": "Loading",
+      "code": "import React, { useState } from 'react';\nimport { Button } from '@/components/ui/button';\n\nexport default function Loading() {\n  const [busy, setBusy] = useState(false);\n  return (\n    <Button\n      variant=\"accent\"\n      pill\n      block\n      size=\"lg\"\n      loading={busy}\n      onPress={() => {\n        setBusy(true);\n        setTimeout(() => setBusy(false), 1600);\n      }}\n    >\n      {busy ? 'Saving' : 'Save changes'}\n    </Button>\n  );\n}\n"
+    },
+    {
+      "name": "Colors",
+      "title": "Colors",
+      "code": "import { Pressable, Text, View } from 'react-native';\nimport { Button } from '@/components/ui/button';\n\nexport default function Colors() {\n  return (\n    <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 10 }}>\n      <Button variant=\"soft\" color=\"#10b981\">Approve</Button>\n      <Button variant=\"soft\" color=\"#f59e0b\">Pending</Button>\n      <Button variant=\"soft\" color=\"#ef4444\">Reject</Button>\n      <Button variant=\"accent\" color=\"#ec4899\" pill>Follow</Button>\n    </View>\n  );\n}\n"
+    }
+  ]
+}