@expokit/cli 0.2.0 → 0.4.0

package/registry/_docs/carousel.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/carousel.tsx"
   ],
+  "summary": "A snapping carousel whose neighbouring slides shrink, fade or tilt with the scroll.",
   "props": [
     [
       "data",
@@ -98,5 +99,24 @@
       "Style for the root view wrapping the slides and pagination."
     ]
   ],
+  "behavior": [
+    [
+      "Touch",
+      "Swipe to snap from slide to slide. Autoplay waits while you drag and resumes after."
+    ],
+    [
+      "Motion",
+      "Slide effects are interpolated from the scroll position on the native driver. renderItem also gets a progress value for your own parallax."
+    ],
+    [
+      "Screen readers",
+      "The scroller is adjustable, reads \"Slide 2 of 5\" and supports increment and decrement. Dots are buttons labelled \"Go to slide N\"."
+    ],
+    [
+      "Web",
+      "Settles on the nearest slide once scrolling stops, since the web has no snap momentum."
+    ]
+  ],
+  "usage": null,
   "examples": []
 }

package/registry/_docs/chat.json

@@ -0,0 +1,184 @@
+{
+  "name": "chat",
+  "category": "Blocks",
+  "aliases": [
+    "ai-chat",
+    "chatbot",
+    "assistant",
+    "messages",
+    "chatgpt"
+  ],
+  "exportName": "ChatScreen",
+  "files": [
+    "src/components/blocks/chat.tsx"
+  ],
+  "summary": "AI assistant chat with streamed, fading-in replies, Thinking state and a Stop button.",
+  "props": [
+    [
+      "messages",
+      "{ id, role: 'user' | 'assistant', text, streaming?, feedback? }[]",
+      "[]",
+      "The conversation. Controlled when onSend is set; otherwise the starting messages for the built-in simulation."
+    ],
+    [
+      "onSend",
+      "(text: string) => void",
+      "—",
+      "The user sent a prompt (trimmed). Append it and the reply to messages yourself. Without it, replies are simulated from a canned list so the screen works as-is."
+    ],
+    [
+      "streaming",
+      "boolean",
+      "false",
+      "A reply is in flight: “Thinking…” until the last message is an assistant one with text, a caret while it grows, and Send becomes Stop."
+    ],
+    [
+      "onStop",
+      "() => void",
+      "—",
+      "Stop pressed while streaming."
+    ],
+    [
+      "suggestions",
+      "string[]",
+      "4 prompts",
+      "Chips above the input until the user sends something; tapping one sends it. [] hides them."
+    ],
+    [
+      "assistantName",
+      "string",
+      "'Assistant'",
+      "Used in the header, the placeholder and screen reader labels."
+    ],
+    [
+      "title / subtitle",
+      "string",
+      "assistantName / 'Ask me anything'",
+      "Header text. The subtitle shows “Thinking…” / “Typing…” while streaming."
+    ],
+    [
+      "header",
+      "ReactNode | null",
+      "built-in",
+      "Replace the header; null hides it."
+    ],
+    [
+      "avatar",
+      "ReactNode",
+      "sparkle mark",
+      "Replace the assistant mark beside replies, in the header and the empty state."
+    ],
+    [
+      "emptyTitle / emptySubtitle",
+      "string",
+      "'How can I help today?'",
+      "Empty state copy."
+    ],
+    [
+      "placeholder",
+      "string",
+      "`Message ${assistantName}`",
+      "Prompt placeholder and accessibility label."
+    ],
+    [
+      "variant",
+      "'plain' | 'bubbles'",
+      "'plain'",
+      "plain: assistant text sits on the page. bubbles: assistant replies in muted bubbles too (support bots)."
+    ],
+    [
+      "thinkingIndicator",
+      "'shimmer' | 'dots'",
+      "'shimmer'",
+      "What shows before the first token."
+    ],
+    [
+      "onAttach",
+      "() => void",
+      "—",
+      "Shows a + button left of the input."
+    ],
+    [
+      "onCopy",
+      "(message) => void",
+      "—",
+      "Copy pressed or a message long-pressed — write message.text to the clipboard here. The icon turns into a check."
+    ],
+    [
+      "onRegenerate",
+      "(message) => void",
+      "—",
+      "Regenerate pressed on the latest reply."
+    ],
+    [
+      "onFeedback",
+      "(message, 'up' | 'down' | null) => void",
+      "—",
+      "Thumbs toggled; null when cleared. Initial state comes from message.feedback."
+    ],
+    [
+      "onNewChat",
+      "() => void",
+      "—",
+      "Shows a new-chat button in the header (the simulation also clears itself)."
+    ],
+    [
+      "bottomInset",
+      "number",
+      "0",
+      "Extra padding under the input, e.g. useSafeAreaInsets().bottom. Ignored while the keyboard is open."
+    ],
+    [
+      "keyboardVerticalOffset",
+      "number",
+      "0",
+      "Height above the screen (navigator header) so the input clears the keyboard exactly."
+    ],
+    [
+      "haptics",
+      "boolean",
+      "true",
+      "Light haptics on send, stop, copy and feedback."
+    ],
+    [
+      "accent",
+      "string",
+      "theme accent",
+      "User bubbles, send button, focus ring and the assistant mark."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Root style."
+    ]
+  ],
+  "behavior": [
+    [
+      "Touch",
+      "Tap a suggestion chip to send it. Long-press a message to copy it; the row under each reply has copy, thumbs up / down and regenerate (latest reply). A round button jumps back to the latest message after scrolling up."
+    ],
+    [
+      "Motion",
+      "Messages rise and fade in on a spring, new words fade in as they stream with a soft blinking caret, “Thinking…” shimmers (or dots bounce), and the send arrow spins into a stop square. Opacity and transforms run on the native driver."
+    ],
+    [
+      "Reduced motion",
+      "No per-word fade, shimmer, bouncing dots or caret blink; simulated replies arrive in larger chunks and messages appear without the rise."
+    ],
+    [
+      "Screen readers",
+      "Messages read as “You: …” and “<assistant>: …” with markdown stripped, and long-press copy is exposed as an action. “<assistant> is thinking” is announced, then the full reply when streaming ends. Buttons have roles, labels and disabled / selected state."
+    ],
+    [
+      "Keyboard",
+      "The prompt stays above the keyboard on iOS and Android (KeyboardAvoidingView; pass keyboardVerticalOffset under a navigator header) and bottomInset is dropped while it is open. On web, Enter sends and Shift+Enter adds a line."
+    ],
+    [
+      "Haptics",
+      "A light tap on send, stop and copy, and a selection tick on chips, thumbs and regenerate (native only, haptics={false} to turn off)."
+    ]
+  ],
+  "usage": null,
+  "examples": []
+}

package/registry/_docs/checkbox.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/checkbox.tsx"
   ],
+  "summary": "A checkbox whose tick draws itself in as the box squishes and a ring bursts out.",
   "props": [
     [
       "checked / onChange",
@@ -68,6 +69,21 @@
       "Style for the pressable row holding the box and label."
     ]
   ],
+  "behavior": [
+    [
+      "Touch",
+      "The whole row toggles. The box squishes on press-in and bounces back on release."
+    ],
+    [
+      "Motion",
+      "The fill and tick spring in together, and a ring bursts outward each time it becomes checked."
+    ],
+    [
+      "Screen readers",
+      "A checkbox with checked and disabled state."
+    ]
+  ],
+  "usage": "import { Checkbox } from '@/components/ui/checkbox';\n\n<Checkbox\n  label=\"Email me about new releases\"\n  description=\"About once a month, never spam.\"\n  defaultChecked\n/>",
   "examples": [
     {
       "name": "Default",

package/registry/_docs/checkout.json

@@ -6,12 +6,13 @@
   "files": [
     "src/components/blocks/checkout.tsx"
   ],
+  "summary": null,
   "props": [
     [
       "items",
       "{ id, name, variant?, price, quantity, image? }[]",
       "3 sample products",
-      "Initial bag. Quantities and removals are kept in state."
+      "Initial bag. Quantities and removals are kept in state. Each item can carry a `thumbnail` node (your own drawing) instead of an `image` URL."
     ],
     [
       "onItemsChange",
@@ -49,6 +50,12 @@
       "—",
       "Return the discount fraction (0.1 = 10%) or null. Omit to hide the promo row."
     ],
+    [
+      "defaultPromo",
+      "string",
+      "—",
+      "A code to apply on mount (checked with onApplyPromo), e.g. a coupon picked on another screen."
+    ],
     [
       "taxRate",
       "number",
@@ -98,5 +105,7 @@
       "Root style."
     ]
   ],
+  "behavior": [],
+  "usage": null,
   "examples": []
 }

package/registry/_docs/chip-group.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/chip-group.tsx"
   ],
+  "summary": "Filter chips that widen to make room as a check mark draws itself in.",
   "props": [
     [
       "options",
@@ -86,6 +87,21 @@
       "Style for the wrapping row (the ScrollView when scrollable)."
     ]
   ],
+  "behavior": [
+    [
+      "Touch",
+      "Tap to select. In single mode, tapping the selected chip clears it unless deselectable is false. Short chips pad their hit area to 44pt."
+    ],
+    [
+      "Motion",
+      "Selection springs the check, width and colours together, and chips squish while pressed."
+    ],
+    [
+      "Screen readers",
+      "Chips are radios in single mode and checkboxes in multiple mode, with checked and disabled state."
+    ]
+  ],
+  "usage": "import { ChipGroup } from '@/components/ui/chip-group';\n\n<ChipGroup\n  multiple\n  defaultValue={['Vegan']}\n  options={['Vegan', 'Vegetarian', 'Gluten-free', 'Halal']}\n/>",
   "examples": [
     {
       "name": "Solid",

package/registry/_docs/confetti.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/confetti.tsx"
   ],
+  "summary": "Confetti that flies on real arcs with gravity and drag, then flutters as it falls.",
   "props": [
     [
       "count",
@@ -62,21 +63,40 @@
       "The overlay never takes touches."
     ]
   ],
+  "behavior": [
+    [
+      "Motion",
+      "Each burst launches pieces with velocity, gravity and air drag, all moved by one native-driven animation. Bursts can overlap."
+    ],
+    [
+      "Touch",
+      "The overlay fills its parent and never takes touches."
+    ],
+    [
+      "Reduced motion",
+      "Bursts launch a quarter of the pieces."
+    ],
+    [
+      "Screen readers",
+      "The overlay is hidden from assistive tech."
+    ]
+  ],
+  "usage": "import { useState } from 'react';\nimport { Confetti } from '@/components/ui/confetti';\n\nconst [orders, setOrders] = useState(0);\n<Confetti trigger={orders} origin=\"bottom\" />",
   "examples": [
     {
       "name": "Celebrate",
       "title": "Celebrate",
-      "code": "import React, { useRef, useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { Confetti, type ConfettiHandle } from '@/components/ui/confetti';\nimport { useKit } from '@/lib/kit';\n\nexport default function Celebrate() {\n  const { colors, radius } = useKit();\n  const confetti = useRef<ConfettiHandle>(null);\n  return (\n    <View style={{ height: 420, borderRadius: radius.xl, backgroundColor: colors.muted, overflow: 'hidden', alignItems: 'center', justifyContent: 'center', gap: 10, padding: 24 }}>\n      <Text style={{ fontSize: 44 }}>🎉</Text>\n      <Text style={{ color: colors.foreground, fontSize: 24, fontWeight: '800', letterSpacing: -0.5 }}>Order placed!</Text>\n      <Text style={{ color: colors.mutedForeground, fontSize: 14, textAlign: 'center' }}>You saved ₹240 with coupon GLOW50. Arriving Thursday.</Text>\n      <Pressable\n        onPress={() => confetti.current?.burst()}\n        accessibilityRole=\"button\"\n        style={{ marginTop: 12, paddingHorizontal: 22, paddingVertical: 13, borderRadius: 999, backgroundColor: colors.primary }}\n      >\n        <Text style={{ color: colors.primaryForeground, fontSize: 15, fontWeight: '700' }}>Celebrate again</Text>\n      </Pressable>\n      <Confetti ref={confetti} autoplay />\n    </View>\n  );\n}\n"
+      "code": "import React, { useRef, useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { Confetti, type ConfettiHandle } from '@/components/ui/confetti';\nimport { useKit } from '@/lib/kit';\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\nexport default function Celebrate({ screen }: DemoProps) {\n  const { colors, radius } = useKit();\n  const confetti = useRef<ConfettiHandle>(null);\n  return (\n    <View\n      style={[\n        { overflow: 'hidden', alignItems: 'center', justifyContent: 'center', gap: 10, padding: 24 },\n        screen ? { flex: 1, backgroundColor: colors.background } : { height: 420, borderRadius: radius.xl, backgroundColor: colors.muted },\n      ]}\n    >\n      <Text style={{ fontSize: 44 }}>🎉</Text>\n      <Text style={{ color: colors.foreground, fontSize: 24, fontWeight: '800', letterSpacing: -0.5 }}>Order placed!</Text>\n      <Text style={{ color: colors.mutedForeground, fontSize: 14, textAlign: 'center' }}>You saved ₹240 with coupon GLOW50. Arriving Thursday.</Text>\n      <Pressable\n        onPress={() => confetti.current?.burst()}\n        accessibilityRole=\"button\"\n        style={{ marginTop: 12, paddingHorizontal: 22, paddingVertical: 13, borderRadius: 999, backgroundColor: colors.primary }}\n      >\n        <Text style={{ color: colors.primaryForeground, fontSize: 15, fontWeight: '700' }}>Celebrate again</Text>\n      </Pressable>\n      <Confetti ref={confetti} autoplay />\n    </View>\n  );\n}\n"
     },
     {
       "name": "Rain",
       "title": "Rain",
-      "code": "import React, { useRef, useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { Confetti, type ConfettiHandle } from '@/components/ui/confetti';\nimport { useKit } from '@/lib/kit';\n\nexport default function Rain() {\n  const { colors, radius } = useKit();\n  const [shower, setShower] = useState(0);\n  return (\n    <View style={{ height: 360, borderRadius: radius.xl, backgroundColor: colors.muted, overflow: 'hidden', alignItems: 'center', justifyContent: 'center' }}>\n      <Pressable onPress={() => setShower((n) => n + 1)} accessibilityRole=\"button\" style={{ paddingHorizontal: 22, paddingVertical: 13, borderRadius: 999, borderWidth: 1.5, borderColor: colors.foreground }}>\n        <Text style={{ color: colors.foreground, fontSize: 15, fontWeight: '700' }}>Make it rain</Text>\n      </Pressable>\n      <Confetti origin=\"top\" count={120} trigger={shower} colors={['#ffd23f', '#ffb000', '#fff3b0', '#ffffff']} />\n    </View>\n  );\n}\n"
+      "code": "import React, { useRef, useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { Confetti, type ConfettiHandle } from '@/components/ui/confetti';\nimport { useKit } from '@/lib/kit';\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\nexport default function Rain({ screen }: DemoProps) {\n  const { colors, radius } = useKit();\n  const [shower, setShower] = useState(0);\n  return (\n    <View\n      style={[\n        { overflow: 'hidden', alignItems: 'center', justifyContent: 'center' },\n        screen ? { flex: 1, backgroundColor: colors.background } : { height: 360, borderRadius: radius.xl, backgroundColor: colors.muted },\n      ]}\n    >\n      <Pressable onPress={() => setShower((n) => n + 1)} accessibilityRole=\"button\" style={{ paddingHorizontal: 22, paddingVertical: 13, borderRadius: 999, borderWidth: 1.5, borderColor: colors.foreground }}>\n        <Text style={{ color: colors.foreground, fontSize: 15, fontWeight: '700' }}>Make it rain</Text>\n      </Pressable>\n      <Confetti origin=\"top\" count={120} trigger={shower} colors={['#ffd23f', '#ffb000', '#fff3b0', '#ffffff']} />\n    </View>\n  );\n}\n"
     },
     {
       "name": "TapToPop",
       "title": "Tap To Pop",
-      "code": "import React, { useRef, useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { Confetti, type ConfettiHandle } from '@/components/ui/confetti';\nimport { useKit } from '@/lib/kit';\n\nexport default function TapToPop() {\n  const { colors, radius } = useKit();\n  const confetti = useRef<ConfettiHandle>(null);\n  return (\n    <Pressable\n      onPress={(e) => confetti.current?.burst({ origin: 'center', x: e.nativeEvent.locationX, y: e.nativeEvent.locationY, count: 50 })}\n      accessibilityRole=\"button\"\n      accessibilityLabel=\"Tap to pop confetti\"\n      style={{ height: 360, borderRadius: radius.xl, backgroundColor: colors.muted, overflow: 'hidden', alignItems: 'center', justifyContent: 'center' }}\n    >\n      {/* Not touchable, so locationX/Y are always relative to the panel. */}\n      <View pointerEvents=\"none\">\n        <Text style={{ color: colors.mutedForeground, fontSize: 15, fontWeight: '600' }}>Tap anywhere</Text>\n      </View>\n      <Confetti ref={confetti} />\n    </Pressable>\n  );\n}\n"
+      "code": "import React, { useRef, useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { Confetti, type ConfettiHandle } from '@/components/ui/confetti';\nimport { useKit } from '@/lib/kit';\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\nexport default function TapToPop({ screen }: DemoProps) {\n  const { colors, radius } = useKit();\n  const confetti = useRef<ConfettiHandle>(null);\n  return (\n    <Pressable\n      onPress={(e) => confetti.current?.burst({ origin: 'center', x: e.nativeEvent.locationX, y: e.nativeEvent.locationY, count: 50 })}\n      accessibilityRole=\"button\"\n      accessibilityLabel=\"Tap to pop confetti\"\n      style={[\n        { overflow: 'hidden', alignItems: 'center', justifyContent: 'center' },\n        screen ? { flex: 1, backgroundColor: colors.background } : { height: 360, borderRadius: radius.xl, backgroundColor: colors.muted },\n      ]}\n    >\n      {/* Not touchable, so locationX/Y are always relative to the panel. */}\n      <View pointerEvents=\"none\">\n        <Text style={{ color: colors.mutedForeground, fontSize: 15, fontWeight: '600' }}>Tap anywhere</Text>\n      </View>\n      <Confetti ref={confetti} />\n    </Pressable>\n  );\n}\n"
     }
   ]
 }

package/registry/_docs/coupon.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/coupon.tsx"
   ],
+  "summary": "A perforated coupon with a copyable code that can tilt in 3D and flip to its terms.",
   "props": [
     [
       "value",
@@ -146,6 +147,21 @@
       "Width, margins."
     ]
   ],
+  "behavior": [
+    [
+      "Touch",
+      "Tapping the code chip calls onCopy and flips its icon to a check. The T&C link turns the coupon over to its terms."
+    ],
+    [
+      "Motion",
+      "With tilt it leans toward your finger with a moving reflection, holo adds a rainbow sheen, and shine sweeps light across the value panel."
+    ],
+    [
+      "Screen readers",
+      "The code chip is a button that reads the copy label and the code. Apply is a button with disabled and selected state."
+    ]
+  ],
+  "usage": "import { Coupon } from '@/components/ui/coupon';\n\n<Coupon\n  value=\"50%\"\n  unit=\"Off\"\n  title=\"Your first order, on us\"\n  code=\"GLOW50\"\n  onApply={applyCoupon}\n/>",
   "examples": [
     {
       "name": "Hero",

package/registry/_docs/cube-pager.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/cube-pager.tsx"
   ],
+  "summary": "Swipeable pages that turn like the faces of a cube, with flick momentum.",
   "props": [
     [
       "children",
@@ -80,5 +81,20 @@
       "Style for the root view."
     ]
   ],
+  "behavior": [
+    [
+      "Touch",
+      "Pages follow your finger. A quick flick or a drag past 35% turns the page, and the first and last pages rubber-band."
+    ],
+    [
+      "Motion",
+      "Pages rotate around their shared edge in 3D (cube, inside or flip) and darken as they turn away when shade is on."
+    ],
+    [
+      "Screen readers",
+      "The pager is adjustable with a \"2 / 5\" value and increment and decrement actions. Off-screen pages are hidden and dots are buttons."
+    ]
+  ],
+  "usage": null,
   "examples": []
 }

package/registry/_docs/dashboard.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/blocks/dashboard.tsx"
   ],
+  "summary": null,
   "props": [
     [
       "data",
@@ -116,5 +117,7 @@
       "Root style."
     ]
   ],
+  "behavior": [],
+  "usage": null,
   "examples": []
 }

package/registry/_docs/date-picker.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/date-picker.tsx"
   ],
+  "summary": "A floating-label date field that opens the calendar in a draggable spring sheet.",
   "props": [
     [
       "label",
@@ -224,26 +225,45 @@
       "Sheet / dialog / popover panel — background, border, radius, padding, shadow (transform and opacity are animated)."
     ]
   ],
+  "behavior": [
+    [
+      "Touch",
+      "Tap the field to open the picker. In a sheet, drag the grabber header down (or flick it) to dismiss."
+    ],
+    [
+      "Motion",
+      "The label floats onto the border and a focus halo springs in while open. An error shakes the field once and its message springs in below."
+    ],
+    [
+      "Screen readers",
+      "The field is a button labelled with your label, with the date (or \"Not set\") as its value and an expanded state. Helper, error and success messages are polite live regions."
+    ],
+    [
+      "Platforms",
+      "With presentation 'auto' it opens a bottom sheet on phones and a centred dialog from 640pt wide."
+    ]
+  ],
+  "usage": "import { useState } from 'react';\nimport { DatePicker } from '@/components/ui/date-picker';\n\nconst [date, setDate] = useState<Date | null>(null);\n<DatePicker label=\"Date of birth\" value={date} onChange={setDate} maxDate={new Date()} />",
   "examples": [
     {
       "name": "Birthday",
       "title": "Birthday",
-      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { DatePicker, type DatePickerPresentation, type DateRange } from '@/components/ui/date-picker';\nimport { useKit } from '@/lib/kit';\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        s.card,\n        { borderRadius: radius.xl, borderColor: colors.border, backgroundColor: colors.card },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nconst today = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate());\n\ntype Opens = Exclude<DatePickerPresentation, 'auto'>;\n\nconst OPENS: { key: Opens; label: string }[] = [\n  { key: 'sheet', label: 'Sheet' },\n  { key: 'dialog', label: 'Modal' },\n  { key: 'popover', label: 'Popover' },\n];\n\n/** Card header with a compact switch for how the picker opens. */\nfunction Header({ title, opens, onOpens }: { title: string; opens: Opens; onOpens: (o: Opens) => void }) {\n  const { colors, radius } = useKit();\n  return (\n    <View style={s.header}>\n      <Text style={[s.title, { color: colors.foreground }]} numberOfLines={1}>\n        {title}\n      </Text>\n      <View style={[s.switch, { backgroundColor: colors.muted, borderRadius: radius.md }]} accessibilityRole=\"radiogroup\">\n        {OPENS.map((o) => {\n          const on = o.key === opens;\n          return (\n            <Pressable\n              key={o.key}\n              onPress={() => onOpens(o.key)}\n              accessibilityRole=\"radio\"\n              accessibilityState={{ checked: on }}\n              accessibilityLabel={`Open as ${o.label}`}\n              style={[s.switchItem, { borderRadius: Math.max(0, radius.md - 3) }, on && { backgroundColor: colors.background }]}\n            >\n              <Text style={[s.switchText, { color: on ? colors.foreground : colors.mutedForeground }]}>{o.label}</Text>\n            </Pressable>\n          );\n        })}\n      </View>\n    </View>\n  );\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 14 },\n  header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 10 },\n  title: { flexShrink: 1, fontSize: 15, fontWeight: '400' },\n  switch: { flexDirection: 'row', padding: 3 },\n  switchItem: { height: 28, paddingHorizontal: 10, alignItems: 'center', justifyContent: 'center' },\n  switchText: { fontSize: 12.5, fontWeight: '400' },\n  label: { fontSize: 12, fontWeight: '400', letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: -6 },\n  button: { height: 46, alignItems: 'center', justifyContent: 'center' },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function Birthday() {\n  const [date, setDate] = useState<Date | null>(new Date(1994, 5, 12));\n  const age = date ? Math.floor((today.getTime() - date.getTime()) / (365.25 * 86400000)) : null;\n  const [opens, setOpens] = useState<Opens>('sheet');\n  return (\n    <Card>\n      <Header title=\"Profile\" opens={opens} onOpens={setOpens} />\n      <DatePicker\n        key={opens}\n        presentation={opens}\n        label=\"Date of birth\"\n        value={date}\n        onChange={setDate}\n        maxDate={today}\n        formatOptions={{ day: 'numeric', month: 'long', year: 'numeric' }}\n        helper={age !== null ? `You're ${age}. Tap the month title to jump years.` : 'Used to personalise your plan.'}\n      />\n    </Card>\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { DatePicker, type DatePickerPresentation, type DateRange } from '@/components/ui/date-picker';\nimport { useKit } from '@/lib/kit';\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        s.card,\n        screen\n          ? { flex: 1, backgroundColor: colors.background }\n          : [s.cardFrame, { borderRadius: radius.xl, borderColor: colors.border, backgroundColor: colors.card }],\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nconst today = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate());\n\ntype Opens = Exclude<DatePickerPresentation, 'auto'>;\n\nconst OPENS: { key: Opens; label: string }[] = [\n  { key: 'sheet', label: 'Sheet' },\n  { key: 'dialog', label: 'Modal' },\n  { key: 'popover', label: 'Popover' },\n];\n\n/** Card header with a compact switch for how the picker opens. */\nfunction Header({ title, opens, onOpens }: { title: string; opens: Opens; onOpens: (o: Opens) => void }) {\n  const { colors, radius } = useKit();\n  return (\n    <View style={s.header}>\n      <Text style={[s.title, { color: colors.foreground }]} numberOfLines={1}>\n        {title}\n      </Text>\n      <View style={[s.switch, { backgroundColor: colors.muted, borderRadius: radius.md }]} accessibilityRole=\"radiogroup\">\n        {OPENS.map((o) => {\n          const on = o.key === opens;\n          return (\n            <Pressable\n              key={o.key}\n              onPress={() => onOpens(o.key)}\n              accessibilityRole=\"radio\"\n              accessibilityState={{ checked: on }}\n              accessibilityLabel={`Open as ${o.label}`}\n              style={[s.switchItem, { borderRadius: Math.max(0, radius.md - 3) }, on && { backgroundColor: colors.background }]}\n            >\n              <Text style={[s.switchText, { color: on ? colors.foreground : colors.mutedForeground }]}>{o.label}</Text>\n            </Pressable>\n          );\n        })}\n      </View>\n    </View>\n  );\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, gap: 14 },\n  cardFrame: { borderWidth: StyleSheet.hairlineWidth },\n  header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 10 },\n  title: { flexShrink: 1, fontSize: 15, fontWeight: '400' },\n  switch: { flexDirection: 'row', padding: 3 },\n  switchItem: { height: 28, paddingHorizontal: 10, alignItems: 'center', justifyContent: 'center' },\n  switchText: { fontSize: 12.5, fontWeight: '400' },\n  label: { fontSize: 12, fontWeight: '400', letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: -6 },\n  button: { height: 46, alignItems: 'center', justifyContent: 'center' },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function Birthday({ screen }: DemoProps) {\n  const [date, setDate] = useState<Date | null>(new Date(1994, 5, 12));\n  const age = date ? Math.floor((today.getTime() - date.getTime()) / (365.25 * 86400000)) : null;\n  const [opens, setOpens] = useState<Opens>('sheet');\n  return (\n    <Card screen={screen}>\n      <Header title=\"Profile\" opens={opens} onOpens={setOpens} />\n      <DatePicker\n        key={opens}\n        presentation={opens}\n        label=\"Date of birth\"\n        value={date}\n        onChange={setDate}\n        maxDate={today}\n        formatOptions={{ day: 'numeric', month: 'long', year: 'numeric' }}\n        helper={age !== null ? `You're ${age}. Tap the month title to jump years.` : 'Used to personalise your plan.'}\n      />\n    </Card>\n  );\n}\n"
     },
     {
       "name": "TripDates",
       "title": "Trip Dates",
-      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { DatePicker, type DatePickerPresentation, type DateRange } from '@/components/ui/date-picker';\nimport { useKit } from '@/lib/kit';\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        s.card,\n        { borderRadius: radius.xl, borderColor: colors.border, backgroundColor: colors.card },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nconst today = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate());\n\ntype Opens = Exclude<DatePickerPresentation, 'auto'>;\n\nconst OPENS: { key: Opens; label: string }[] = [\n  { key: 'sheet', label: 'Sheet' },\n  { key: 'dialog', label: 'Modal' },\n  { key: 'popover', label: 'Popover' },\n];\n\n/** Card header with a compact switch for how the picker opens. */\nfunction Header({ title, opens, onOpens }: { title: string; opens: Opens; onOpens: (o: Opens) => void }) {\n  const { colors, radius } = useKit();\n  return (\n    <View style={s.header}>\n      <Text style={[s.title, { color: colors.foreground }]} numberOfLines={1}>\n        {title}\n      </Text>\n      <View style={[s.switch, { backgroundColor: colors.muted, borderRadius: radius.md }]} accessibilityRole=\"radiogroup\">\n        {OPENS.map((o) => {\n          const on = o.key === opens;\n          return (\n            <Pressable\n              key={o.key}\n              onPress={() => onOpens(o.key)}\n              accessibilityRole=\"radio\"\n              accessibilityState={{ checked: on }}\n              accessibilityLabel={`Open as ${o.label}`}\n              style={[s.switchItem, { borderRadius: Math.max(0, radius.md - 3) }, on && { backgroundColor: colors.background }]}\n            >\n              <Text style={[s.switchText, { color: on ? colors.foreground : colors.mutedForeground }]}>{o.label}</Text>\n            </Pressable>\n          );\n        })}\n      </View>\n    </View>\n  );\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 14 },\n  header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 10 },\n  title: { flexShrink: 1, fontSize: 15, fontWeight: '400' },\n  switch: { flexDirection: 'row', padding: 3 },\n  switchItem: { height: 28, paddingHorizontal: 10, alignItems: 'center', justifyContent: 'center' },\n  switchText: { fontSize: 12.5, fontWeight: '400' },\n  label: { fontSize: 12, fontWeight: '400', letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: -6 },\n  button: { height: 46, alignItems: 'center', justifyContent: 'center' },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function TripDates() {\n  const [trip, setTrip] = useState<DateRange | null>(null);\n  const nights = trip?.start && trip.end ? Math.round((trip.end.getTime() - trip.start.getTime()) / 86400000) : 0;\n  const [opens, setOpens] = useState<Opens>('dialog');\n  return (\n    <Card>\n      <Header title=\"Trip · Kyoto\" opens={opens} onOpens={setOpens} />\n      <DatePicker\n        key={opens}\n        presentation={opens}\n        mode=\"range\"\n        label=\"Check-in – Check-out\"\n        title=\"When are you travelling?\"\n        placeholder=\"Add dates\"\n        value={trip}\n        onChange={setTrip}\n        presets\n        confirm\n        clearable\n        minDate={today}\n        success={nights ? `${nights} night${nights > 1 ? 's' : ''} · free cancellation until 48h before` : undefined}\n      />\n    </Card>\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { DatePicker, type DatePickerPresentation, type DateRange } from '@/components/ui/date-picker';\nimport { useKit } from '@/lib/kit';\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        s.card,\n        screen\n          ? { flex: 1, backgroundColor: colors.background }\n          : [s.cardFrame, { borderRadius: radius.xl, borderColor: colors.border, backgroundColor: colors.card }],\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nconst today = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate());\n\ntype Opens = Exclude<DatePickerPresentation, 'auto'>;\n\nconst OPENS: { key: Opens; label: string }[] = [\n  { key: 'sheet', label: 'Sheet' },\n  { key: 'dialog', label: 'Modal' },\n  { key: 'popover', label: 'Popover' },\n];\n\n/** Card header with a compact switch for how the picker opens. */\nfunction Header({ title, opens, onOpens }: { title: string; opens: Opens; onOpens: (o: Opens) => void }) {\n  const { colors, radius } = useKit();\n  return (\n    <View style={s.header}>\n      <Text style={[s.title, { color: colors.foreground }]} numberOfLines={1}>\n        {title}\n      </Text>\n      <View style={[s.switch, { backgroundColor: colors.muted, borderRadius: radius.md }]} accessibilityRole=\"radiogroup\">\n        {OPENS.map((o) => {\n          const on = o.key === opens;\n          return (\n            <Pressable\n              key={o.key}\n              onPress={() => onOpens(o.key)}\n              accessibilityRole=\"radio\"\n              accessibilityState={{ checked: on }}\n              accessibilityLabel={`Open as ${o.label}`}\n              style={[s.switchItem, { borderRadius: Math.max(0, radius.md - 3) }, on && { backgroundColor: colors.background }]}\n            >\n              <Text style={[s.switchText, { color: on ? colors.foreground : colors.mutedForeground }]}>{o.label}</Text>\n            </Pressable>\n          );\n        })}\n      </View>\n    </View>\n  );\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, gap: 14 },\n  cardFrame: { borderWidth: StyleSheet.hairlineWidth },\n  header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 10 },\n  title: { flexShrink: 1, fontSize: 15, fontWeight: '400' },\n  switch: { flexDirection: 'row', padding: 3 },\n  switchItem: { height: 28, paddingHorizontal: 10, alignItems: 'center', justifyContent: 'center' },\n  switchText: { fontSize: 12.5, fontWeight: '400' },\n  label: { fontSize: 12, fontWeight: '400', letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: -6 },\n  button: { height: 46, alignItems: 'center', justifyContent: 'center' },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function TripDates({ screen }: DemoProps) {\n  const [trip, setTrip] = useState<DateRange | null>(null);\n  const nights = trip?.start && trip.end ? Math.round((trip.end.getTime() - trip.start.getTime()) / 86400000) : 0;\n  const [opens, setOpens] = useState<Opens>('dialog');\n  return (\n    <Card screen={screen}>\n      <Header title=\"Trip · Kyoto\" opens={opens} onOpens={setOpens} />\n      <DatePicker\n        key={opens}\n        presentation={opens}\n        mode=\"range\"\n        label=\"Check-in – Check-out\"\n        title=\"When are you travelling?\"\n        placeholder=\"Add dates\"\n        value={trip}\n        onChange={setTrip}\n        presets\n        confirm\n        clearable\n        minDate={today}\n        success={nights ? `${nights} night${nights > 1 ? 's' : ''} · free cancellation until 48h before` : undefined}\n      />\n    </Card>\n  );\n}\n"
     },
     {
       "name": "Deadline",
       "title": "Deadline",
-      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { DatePicker, type DatePickerPresentation, type DateRange } from '@/components/ui/date-picker';\nimport { useKit } from '@/lib/kit';\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        s.card,\n        { borderRadius: radius.xl, borderColor: colors.border, backgroundColor: colors.card },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nconst today = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate());\n\ntype Opens = Exclude<DatePickerPresentation, 'auto'>;\n\nconst OPENS: { key: Opens; label: string }[] = [\n  { key: 'sheet', label: 'Sheet' },\n  { key: 'dialog', label: 'Modal' },\n  { key: 'popover', label: 'Popover' },\n];\n\n/** Card header with a compact switch for how the picker opens. */\nfunction Header({ title, opens, onOpens }: { title: string; opens: Opens; onOpens: (o: Opens) => void }) {\n  const { colors, radius } = useKit();\n  return (\n    <View style={s.header}>\n      <Text style={[s.title, { color: colors.foreground }]} numberOfLines={1}>\n        {title}\n      </Text>\n      <View style={[s.switch, { backgroundColor: colors.muted, borderRadius: radius.md }]} accessibilityRole=\"radiogroup\">\n        {OPENS.map((o) => {\n          const on = o.key === opens;\n          return (\n            <Pressable\n              key={o.key}\n              onPress={() => onOpens(o.key)}\n              accessibilityRole=\"radio\"\n              accessibilityState={{ checked: on }}\n              accessibilityLabel={`Open as ${o.label}`}\n              style={[s.switchItem, { borderRadius: Math.max(0, radius.md - 3) }, on && { backgroundColor: colors.background }]}\n            >\n              <Text style={[s.switchText, { color: on ? colors.foreground : colors.mutedForeground }]}>{o.label}</Text>\n            </Pressable>\n          );\n        })}\n      </View>\n    </View>\n  );\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 14 },\n  header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 10 },\n  title: { flexShrink: 1, fontSize: 15, fontWeight: '400' },\n  switch: { flexDirection: 'row', padding: 3 },\n  switchItem: { height: 28, paddingHorizontal: 10, alignItems: 'center', justifyContent: 'center' },\n  switchText: { fontSize: 12.5, fontWeight: '400' },\n  label: { fontSize: 12, fontWeight: '400', letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: -6 },\n  button: { height: 46, alignItems: 'center', justifyContent: 'center' },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function Deadline() {\n  const { colors, radius } = useKit();\n  const [due, setDue] = useState<Date | null>(null);\n  const [submitted, setSubmitted] = useState(false);\n  const [opens, setOpens] = useState<Opens>('popover');\n  return (\n    <Card>\n      <Header title=\"New task\" opens={opens} onOpens={setOpens} />\n      <DatePicker\n        key={opens}\n        presentation={opens}\n        label=\"Due date\"\n        value={due}\n        onChange={setDue}\n        minDate={today}\n        isDateDisabled={(d) => d.getDay() === 0 || d.getDay() === 6}\n        presets={[\n          { label: 'Tomorrow', value: () => new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1) },\n          { label: 'End of month', value: () => new Date(today.getFullYear(), today.getMonth() + 1, 0) },\n        ]}\n        error={submitted && !due ? 'Pick a due date so the team can plan around it' : undefined}\n        helper=\"Weekdays only.\"\n      />\n      <Pressable\n        onPress={() => setSubmitted(true)}\n        style={({ pressed }) => [s.button, { backgroundColor: colors.accent, borderRadius: radius.md, opacity: pressed ? 0.85 : 1 }]}\n        accessibilityRole=\"button\"\n      >\n        <Text style={[s.buttonText, { color: colors.accentForeground }]}>Create task</Text>\n      </Pressable>\n    </Card>\n  );\n}\n"
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { DatePicker, type DatePickerPresentation, type DateRange } from '@/components/ui/date-picker';\nimport { useKit } from '@/lib/kit';\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        s.card,\n        screen\n          ? { flex: 1, backgroundColor: colors.background }\n          : [s.cardFrame, { borderRadius: radius.xl, borderColor: colors.border, backgroundColor: colors.card }],\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\nconst today = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate());\n\ntype Opens = Exclude<DatePickerPresentation, 'auto'>;\n\nconst OPENS: { key: Opens; label: string }[] = [\n  { key: 'sheet', label: 'Sheet' },\n  { key: 'dialog', label: 'Modal' },\n  { key: 'popover', label: 'Popover' },\n];\n\n/** Card header with a compact switch for how the picker opens. */\nfunction Header({ title, opens, onOpens }: { title: string; opens: Opens; onOpens: (o: Opens) => void }) {\n  const { colors, radius } = useKit();\n  return (\n    <View style={s.header}>\n      <Text style={[s.title, { color: colors.foreground }]} numberOfLines={1}>\n        {title}\n      </Text>\n      <View style={[s.switch, { backgroundColor: colors.muted, borderRadius: radius.md }]} accessibilityRole=\"radiogroup\">\n        {OPENS.map((o) => {\n          const on = o.key === opens;\n          return (\n            <Pressable\n              key={o.key}\n              onPress={() => onOpens(o.key)}\n              accessibilityRole=\"radio\"\n              accessibilityState={{ checked: on }}\n              accessibilityLabel={`Open as ${o.label}`}\n              style={[s.switchItem, { borderRadius: Math.max(0, radius.md - 3) }, on && { backgroundColor: colors.background }]}\n            >\n              <Text style={[s.switchText, { color: on ? colors.foreground : colors.mutedForeground }]}>{o.label}</Text>\n            </Pressable>\n          );\n        })}\n      </View>\n    </View>\n  );\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, gap: 14 },\n  cardFrame: { borderWidth: StyleSheet.hairlineWidth },\n  header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 10 },\n  title: { flexShrink: 1, fontSize: 15, fontWeight: '400' },\n  switch: { flexDirection: 'row', padding: 3 },\n  switchItem: { height: 28, paddingHorizontal: 10, alignItems: 'center', justifyContent: 'center' },\n  switchText: { fontSize: 12.5, fontWeight: '400' },\n  label: { fontSize: 12, fontWeight: '400', letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: -6 },\n  button: { height: 46, alignItems: 'center', justifyContent: 'center' },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function Deadline({ screen }: DemoProps) {\n  const { colors, radius } = useKit();\n  const [due, setDue] = useState<Date | null>(null);\n  const [submitted, setSubmitted] = useState(false);\n  const [opens, setOpens] = useState<Opens>('popover');\n  return (\n    <Card screen={screen}>\n      <Header title=\"New task\" opens={opens} onOpens={setOpens} />\n      <DatePicker\n        key={opens}\n        presentation={opens}\n        label=\"Due date\"\n        value={due}\n        onChange={setDue}\n        minDate={today}\n        isDateDisabled={(d) => d.getDay() === 0 || d.getDay() === 6}\n        presets={[\n          { label: 'Tomorrow', value: () => new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1) },\n          { label: 'End of month', value: () => new Date(today.getFullYear(), today.getMonth() + 1, 0) },\n        ]}\n        error={submitted && !due ? 'Pick a due date so the team can plan around it' : undefined}\n        helper=\"Weekdays only.\"\n      />\n      <Pressable\n        onPress={() => setSubmitted(true)}\n        style={({ pressed }) => [s.button, { backgroundColor: colors.accent, borderRadius: radius.md, opacity: pressed ? 0.85 : 1 }]}\n        accessibilityRole=\"button\"\n      >\n        <Text style={[s.buttonText, { color: colors.accentForeground }]}>Create task</Text>\n      </Pressable>\n    </Card>\n  );\n}\n"
     },
     {
       "name": "Sizes",
       "title": "Sizes",
-      "code": "import { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { DatePicker, type DatePickerPresentation, type DateRange } from '@/components/ui/date-picker';\nimport { useKit } from '@/lib/kit';\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        s.card,\n        { borderRadius: radius.xl, borderColor: colors.border, backgroundColor: colors.card },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\n/** Text in the kit's ink: `tone=\"muted\"` for secondary copy. */\nfunction Ink({ tone, style, ...rest }: TextProps & { tone?: 'muted' }) {\n  const { colors } = useKit();\n  return <Text style={[{ color: tone === 'muted' ? colors.mutedForeground : colors.foreground }, style]} {...rest} />;\n}\n\nconst today = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate());\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 14 },\n  header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 10 },\n  title: { flexShrink: 1, fontSize: 15, fontWeight: '400' },\n  switch: { flexDirection: 'row', padding: 3 },\n  switchItem: { height: 28, paddingHorizontal: 10, alignItems: 'center', justifyContent: 'center' },\n  switchText: { fontSize: 12.5, fontWeight: '400' },\n  label: { fontSize: 12, fontWeight: '400', letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: -6 },\n  button: { height: 46, alignItems: 'center', justifyContent: 'center' },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function Sizes() {\n  const d = new Date(today.getFullYear(), today.getMonth(), 24);\n  return (\n    <Card>\n      <Ink tone=\"muted\" style={s.label}>Small</Ink>\n      <DatePicker size=\"sm\" label=\"Invoice date\" defaultValue={d} />\n      <Ink tone=\"muted\" style={s.label}>Medium</Ink>\n      <DatePicker size=\"md\" label=\"Invoice date\" defaultValue={d} />\n      <Ink tone=\"muted\" style={s.label}>Large</Ink>\n      <DatePicker size=\"lg\" label=\"Invoice date\" defaultValue={d} />\n      <Ink tone=\"muted\" style={s.label}>Disabled</Ink>\n      <DatePicker disabled label=\"Invoice date\" defaultValue={d} />\n    </Card>\n  );\n}\n"
+      "code": "import { Pressable, StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { DatePicker, type DatePickerPresentation, type DateRange } from '@/components/ui/date-picker';\nimport { useKit } from '@/lib/kit';\n\n/** From the Expo Go viewer: `screen` = this IS the phone screen, so no mock frame; `bottomInset` = home indicator. */\ntype DemoProps = { screen?: boolean; bottomInset?: number };\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ screen, style, ...rest }: ViewProps & { screen?: boolean }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        s.card,\n        screen\n          ? { flex: 1, backgroundColor: colors.background }\n          : [s.cardFrame, { borderRadius: radius.xl, borderColor: colors.border, backgroundColor: colors.card }],\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\n/** Text in the kit's ink: `tone=\"muted\"` for secondary copy. */\nfunction Ink({ tone, style, ...rest }: TextProps & { tone?: 'muted' }) {\n  const { colors } = useKit();\n  return <Text style={[{ color: tone === 'muted' ? colors.mutedForeground : colors.foreground }, style]} {...rest} />;\n}\n\nconst today = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate());\n\nconst s = StyleSheet.create({\n  card: { padding: 16, gap: 14 },\n  cardFrame: { borderWidth: StyleSheet.hairlineWidth },\n  header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 10 },\n  title: { flexShrink: 1, fontSize: 15, fontWeight: '400' },\n  switch: { flexDirection: 'row', padding: 3 },\n  switchItem: { height: 28, paddingHorizontal: 10, alignItems: 'center', justifyContent: 'center' },\n  switchText: { fontSize: 12.5, fontWeight: '400' },\n  label: { fontSize: 12, fontWeight: '400', letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: -6 },\n  button: { height: 46, alignItems: 'center', justifyContent: 'center' },\n  buttonText: { fontSize: 15, fontWeight: '400' },\n});\n\nexport default function Sizes({ screen }: DemoProps) {\n  const d = new Date(today.getFullYear(), today.getMonth(), 24);\n  return (\n    <Card screen={screen}>\n      <Ink tone=\"muted\" style={s.label}>Small</Ink>\n      <DatePicker size=\"sm\" label=\"Invoice date\" defaultValue={d} />\n      <Ink tone=\"muted\" style={s.label}>Medium</Ink>\n      <DatePicker size=\"md\" label=\"Invoice date\" defaultValue={d} />\n      <Ink tone=\"muted\" style={s.label}>Large</Ink>\n      <DatePicker size=\"lg\" label=\"Invoice date\" defaultValue={d} />\n      <Ink tone=\"muted\" style={s.label}>Disabled</Ink>\n      <DatePicker disabled label=\"Invoice date\" defaultValue={d} />\n    </Card>\n  );\n}\n"
     }
   ]
 }

package/registry/_docs/dialog.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/dialog.tsx"
   ],
+  "summary": "A centred alert whose card springs up from 0.92 while its tone icon draws itself.",
   "props": [
     [
       "open / defaultOpen",
@@ -122,6 +123,29 @@
       "Card style."
     ]
   ],
+  "behavior": [
+    [
+      "Motion",
+      "The scrim fades in while the card springs to full size. A confirm that returns false keeps it open and shakes it."
+    ],
+    [
+      "Reduced motion",
+      "The card fades in without the scale spring, and the tone icon appears fully drawn instead of animating. The shake is skipped."
+    ],
+    [
+      "Haptics",
+      "A warning tick on open for destructive, warning and danger dialogs, success for the success tone, and an error buzz on shake."
+    ],
+    [
+      "Screen readers",
+      "The title is a header; destructive, warning and danger dialogs use the alert role. Buttons report disabled and busy, and the error text is a polite live region."
+    ],
+    [
+      "Keyboard",
+      "Escape closes it on web, and Return submits a prompt field."
+    ]
+  ],
+  "usage": "import { useState } from 'react';\nimport { Dialog } from '@/components/ui/dialog';\n\nconst [open, setOpen] = useState(false);\n<Dialog\n  open={open} onOpenChange={setOpen}\n  variant=\"destructive\"\n  title=\"Delete this project?\"\n  confirmLabel=\"Delete\"\n/>",
   "examples": [
     {
       "name": "Basic",