@expokit/cli 0.0.0-stage → 0.3.0

package/registry/_docs/date-picker.json

@@ -0,0 +1,269 @@
+{
+  "name": "date-picker",
+  "category": "Inputs",
+  "aliases": [],
+  "exportName": "DatePicker",
+  "files": [
+    "src/components/ui/date-picker.tsx"
+  ],
+  "summary": "A floating-label date field that opens the calendar in a draggable spring sheet.",
+  "props": [
+    [
+      "label",
+      "string",
+      "—",
+      "Rests in the field, floats onto the border when open or filled."
+    ],
+    [
+      "floatingLabel",
+      "boolean",
+      "true",
+      "Set to false to put the label above the field as static text (no notch) and show placeholder inside."
+    ],
+    [
+      "mode",
+      "'single' | 'range'",
+      "'single'",
+      "One date or a start / end range."
+    ],
+    [
+      "value",
+      "Date | { start, end } | null",
+      "—",
+      "Controlled value."
+    ],
+    [
+      "defaultValue",
+      "Date | { start, end } | null",
+      "null",
+      "Initial value when uncontrolled."
+    ],
+    [
+      "onChange",
+      "(value) => void",
+      "—",
+      "Called with the committed date / range, or null when cleared."
+    ],
+    [
+      "presentation",
+      "'auto' | 'sheet' | 'dialog' | 'popover'",
+      "'auto'",
+      "auto: bottom sheet on phones, centred dialog from 640pt wide · sheet: always a bottom sheet with drag-to-dismiss · dialog: always a centred modal · popover: drops under the field."
+    ],
+    [
+      "presets",
+      "boolean | { label, value | () => value }[]",
+      "—",
+      "true adds built-in shortcuts (Today, Next 7 days, Next weekend, This month…); or pass your own."
+    ],
+    [
+      "confirm",
+      "boolean",
+      "false",
+      "Stage picks behind Clear / Done; otherwise picking (or finishing a range) closes the picker."
+    ],
+    [
+      "clearable",
+      "boolean",
+      "false",
+      "Show an × in the field that clears the value."
+    ],
+    [
+      "format",
+      "(date: Date) => string",
+      "—",
+      "Custom formatter for each date shown in the field."
+    ],
+    [
+      "formatOptions",
+      "Intl.DateTimeFormatOptions",
+      "{ day, month: 'short', year }",
+      "Intl options for the field text."
+    ],
+    [
+      "locale",
+      "string",
+      "device",
+      "Locale for the field and the calendar."
+    ],
+    [
+      "size",
+      "'sm' | 'md' | 'lg'",
+      "'md'",
+      "Field height 46 / 56 / 66 and type size."
+    ],
+    [
+      "placeholder",
+      "string",
+      "—",
+      "Shown in the field while open with nothing picked, and in the sheet header."
+    ],
+    [
+      "title",
+      "string",
+      "label",
+      "Sheet heading."
+    ],
+    [
+      "minDate / maxDate",
+      "Date",
+      "—",
+      "Selectable bounds; presets outside them are disabled."
+    ],
+    [
+      "isDateDisabled",
+      "(date: Date) => boolean",
+      "—",
+      "Disable individual days."
+    ],
+    [
+      "markedDates",
+      "Record<string, string | string[]>",
+      "—",
+      "Event dots, passed to Calendar."
+    ],
+    [
+      "weekStartsOn",
+      "0 | 1",
+      "0",
+      "First day of the week."
+    ],
+    [
+      "showOutsideDays",
+      "boolean",
+      "false",
+      "Show neighbouring-month days in the grid."
+    ],
+    [
+      "error",
+      "string",
+      "—",
+      "Red border, icon message and one shake."
+    ],
+    [
+      "success",
+      "boolean | string",
+      "—",
+      "Success border and check; a string is shown under the field."
+    ],
+    [
+      "helper",
+      "string",
+      "—",
+      "Hint under the field."
+    ],
+    [
+      "disabled",
+      "boolean",
+      "false",
+      "Dims the field and blocks opening."
+    ],
+    [
+      "accent",
+      "string",
+      "theme accent",
+      "Focus, halo and selection colour."
+    ],
+    [
+      "surface",
+      "string",
+      "theme background",
+      "Background behind the field (the label notch uses it)."
+    ],
+    [
+      "onOpenChange",
+      "(open: boolean) => void",
+      "—",
+      "Called when the picker opens or closes."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Root container style."
+    ],
+    [
+      "fieldStyle",
+      "StyleProp<ViewStyle>",
+      "—",
+      "The bordered box: background, border width / colour, radius, height, padding. Wins over the computed style; a borderColor replaces the resting border only (focus, error and success colours still show). A numeric height / borderRadius re-centres the label and resizes the halo."
+    ],
+    [
+      "inputStyle",
+      "StyleProp<TextStyle>",
+      "—",
+      "The formatted date text in the trigger."
+    ],
+    [
+      "labelStyle",
+      "StyleProp<TextStyle>",
+      "—",
+      "Label in both modes (floating and above). color is the resting colour — focus (accent), error and success still take over; fontSize sets the resting size, it floats at the same ratio and the notch follows its width."
+    ],
+    [
+      "messageStyle",
+      "StyleProp<TextStyle>",
+      "—",
+      "Helper / error / success text. color applies to the helper; error and success keep their tone colour."
+    ],
+    [
+      "placeholderTextColor",
+      "string",
+      "theme mutedForeground",
+      "Placeholder colour in the trigger."
+    ],
+    [
+      "iconColor",
+      "string",
+      "theme mutedForeground",
+      "Calendar icon and clear × colour at rest (calendar turns accent while open)."
+    ],
+    [
+      "menuStyle",
+      "StyleProp<ViewStyle>",
+      "—",
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    }
+  ]
+}

package/registry/_docs/dialog.json

@@ -0,0 +1,186 @@
+{
+  "name": "dialog",
+  "category": "Overlays",
+  "aliases": [],
+  "exportName": "Dialog",
+  "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",
+      "boolean",
+      "false",
+      "Controlled / uncontrolled visibility."
+    ],
+    [
+      "onOpenChange",
+      "(open: boolean) => void",
+      "—",
+      "Called on scrim tap, back, Escape and actions."
+    ],
+    [
+      "variant",
+      "\"default\" | \"destructive\"",
+      "\"default\"",
+      "Destructive adds a warning icon, a danger confirm and a warning haptic on open. The old \"sheet\" value is deprecated and renders as default."
+    ],
+    [
+      "tone",
+      "\"info\" | \"success\" | \"warning\" | \"danger\"",
+      "—",
+      "Living icon in a halo above the title with a soft glow of its colour; success / warning open with a matching haptic."
+    ],
+    [
+      "appearance",
+      "\"modern\" | \"ios\"",
+      "\"modern\"",
+      "Pill buttons, or iOS full-width text buttons split by hairlines."
+    ],
+    [
+      "title / description",
+      "string",
+      "—",
+      "Heading and body copy."
+    ],
+    [
+      "prompt",
+      "{ defaultValue?, value?, onChangeText?, placeholder?, secureTextEntry?, keyboardType?, maxLength?, … }",
+      "—",
+      "Adds a text field (a prompt dialog). Its text is passed to onConfirm / onPress; Return submits."
+    ],
+    [
+      "error",
+      "string",
+      "—",
+      "Error text under the field or description."
+    ],
+    [
+      "children",
+      "ReactNode",
+      "—",
+      "Custom content above the actions."
+    ],
+    [
+      "actions",
+      "{ label, onPress?, role?, disabled? }[]",
+      "Cancel + Confirm",
+      "Buttons. role: primary | default | destructive | cancel. onPress(value) may return a promise (spinner) or false (stays open and shakes)."
+    ],
+    [
+      "confirmLabel / cancelLabel",
+      "string / string | null",
+      "\"Continue\" / \"Cancel\"",
+      "Labels for the default buttons; cancelLabel null leaves a single button."
+    ],
+    [
+      "onConfirm / onCancel",
+      "(value) => void | false | Promise · () => void",
+      "—",
+      "Handlers for the default buttons (onCancel also fires on scrim, back and Escape)."
+    ],
+    [
+      "loading",
+      "boolean",
+      "false",
+      "Spinner on the confirm button; other buttons and dismissal are disabled."
+    ],
+    [
+      "actionsLayout",
+      "\"auto\" | \"row\" | \"stack\"",
+      "\"auto\"",
+      "Two short buttons side by side, otherwise stacked with Cancel last."
+    ],
+    [
+      "icon",
+      "ReactNode | false",
+      "tone icon",
+      "Custom node inside the halo, or false to hide it."
+    ],
+    [
+      "dismissible",
+      "boolean",
+      "true",
+      "Close on scrim tap, back and Escape."
+    ],
+    [
+      "haptics",
+      "boolean",
+      "true",
+      "Warning on open for destructive dialogs, success for success, error on shake."
+    ],
+    [
+      "accent",
+      "string",
+      "theme primary (accent in ios)",
+      "Colour of the primary action."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "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",
+      "title": "Basic",
+      "code": "import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport { Button } from '@/components/ui/button';\nimport { Dialog } from '@/components/ui/dialog';\n\nexport default function Basic() {\n  const [open, setOpen] = useState(false);\n  return (\n    <View style={{ alignItems: 'center' }}>\n      <Button variant=\"accent\" onPress={() => setOpen(true)}>\n        Enable notifications\n      </Button>\n      <Dialog\n        open={open}\n        onOpenChange={setOpen}\n        tone=\"info\"\n        title=\"Turn on notifications?\"\n        description=\"Get a heads-up when someone mentions you, replies to your post or shares a file.\"\n        cancelLabel=\"Not now\"\n        confirmLabel=\"Allow\"\n      />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Destructive",
+      "title": "Destructive",
+      "code": "import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport { Button } from '@/components/ui/button';\nimport { Dialog } from '@/components/ui/dialog';\nimport { useKit } from '@/lib/kit';\n\nfunction useMuted() {\n  const { colors } = useKit();\n  return { fontSize: 13, color: colors.mutedForeground, textAlign: 'center' as const };\n}\n\nexport default function Destructive() {\n  const muted = useMuted();\n  const [open, setOpen] = useState(false);\n  const [status, setStatus] = useState('');\n  return (\n    <View style={{ alignItems: 'center', gap: 10 }}>\n      <Button variant=\"destructive\" onPress={() => setOpen(true)}>\n        Delete project\n      </Button>\n      {status ? <Text style={muted}>{status}</Text> : null}\n      <Dialog\n        open={open}\n        onOpenChange={setOpen}\n        variant=\"destructive\"\n        title=\"Delete “Mobile redesign”?\"\n        description=\"This permanently removes the project, its 48 files and all comments. This can't be undone.\"\n        confirmLabel=\"Delete\"\n        onConfirm={() =>\n          new Promise<void>((resolve) =>\n            setTimeout(() => {\n              setStatus('“Mobile redesign” was deleted');\n              resolve();\n            }, 1200),\n          )\n        }\n      />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "WithForm",
+      "title": "With Form",
+      "code": "import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport { Button } from '@/components/ui/button';\nimport { Dialog } from '@/components/ui/dialog';\nimport { useKit } from '@/lib/kit';\n\nfunction useMuted() {\n  const { colors } = useKit();\n  return { fontSize: 13, color: colors.mutedForeground, textAlign: 'center' as const };\n}\n\nexport default function WithForm() {\n  const muted = useMuted();\n  const [open, setOpen] = useState(false);\n  const [name, setName] = useState('Q3 roadmap');\n  const [error, setError] = useState('');\n  return (\n    <View style={{ alignItems: 'center', gap: 10 }}>\n      <Button variant=\"secondary\" onPress={() => setOpen(true)}>\n        Rename board\n      </Button>\n      <Text style={muted}>Board: {name}</Text>\n      <Dialog\n        open={open}\n        onOpenChange={(next) => {\n          setOpen(next);\n          setError('');\n        }}\n        title=\"Rename board\"\n        description=\"Everyone with access will see the new name.\"\n        prompt={{ defaultValue: name, placeholder: 'Board name', maxLength: 40, onChangeText: () => setError('') }}\n        error={error}\n        confirmLabel=\"Save\"\n        onConfirm={(value) => {\n          const next = value.trim();\n          if (!next) {\n            setError('Give the board a name.');\n            return false;\n          }\n          setName(next);\n        }}\n      />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "PaymentSent",
+      "title": "Payment Sent",
+      "code": "import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport { Button } from '@/components/ui/button';\nimport { Dialog } from '@/components/ui/dialog';\n\nexport default function PaymentSent() {\n  const [open, setOpen] = useState(false);\n  return (\n    <View style={{ alignItems: 'center' }}>\n      <Button variant=\"accent\" onPress={() => setOpen(true)}>\n        Send ₹1,850\n      </Button>\n      <Dialog\n        open={open}\n        onOpenChange={setOpen}\n        tone=\"success\"\n        title=\"Payment sent\"\n        description=\"₹1,850 is on its way to Lena Fischer for “Dinner at Tasca”. She'll get it in a few seconds.\"\n        cancelLabel={null}\n        confirmLabel=\"Done\"\n      />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "SignOut",
+      "title": "Sign Out",
+      "code": "import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport { Button } from '@/components/ui/button';\nimport { Dialog } from '@/components/ui/dialog';\nimport { useKit } from '@/lib/kit';\n\nfunction useMuted() {\n  const { colors } = useKit();\n  return { fontSize: 13, color: colors.mutedForeground, textAlign: 'center' as const };\n}\n\nexport default function SignOut() {\n  const muted = useMuted();\n  const [open, setOpen] = useState(false);\n  const [status, setStatus] = useState('iOS-style hairline buttons');\n  return (\n    <View style={{ alignItems: 'center', gap: 10 }}>\n      <Button variant=\"outline\" onPress={() => setOpen(true)}>\n        Sign out\n      </Button>\n      <Text style={muted}>{status}</Text>\n      <Dialog\n        open={open}\n        onOpenChange={setOpen}\n        appearance=\"ios\"\n        title=\"Sign out of Northwind?\"\n        description=\"Offline drafts on this device will be removed.\"\n        actions={[\n          { label: 'Cancel', role: 'cancel' },\n          { label: 'Sign out', role: 'destructive', onPress: () => setStatus('Signed out') },\n        ]}\n      />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "ThreeActions",
+      "title": "Three Actions",
+      "code": "import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport { Button } from '@/components/ui/button';\nimport { Dialog } from '@/components/ui/dialog';\n\nexport default function ThreeActions() {\n  const [open, setOpen] = useState(false);\n  return (\n    <View style={{ alignItems: 'center' }}>\n      <Button variant=\"outline\" onPress={() => setOpen(true)}>\n        Close document\n      </Button>\n      <Dialog\n        open={open}\n        onOpenChange={setOpen}\n        appearance=\"ios\"\n        title=\"Save changes to “Pitch deck”?\"\n        description=\"Your edits will be lost if you don't save them.\"\n        actions={[\n          { label: 'Save', role: 'primary' },\n          { label: \"Don't save\", role: 'destructive' },\n          { label: 'Cancel', role: 'cancel' },\n        ]}\n      />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "ActionSheetDemo",
+      "title": "Action Sheet Demo",
+      "code": "import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport { ActionSheet } from '@/components/ui/action-sheet';\nimport { Button } from '@/components/ui/button';\nimport { Dialog } from '@/components/ui/dialog';\nimport { useKit } from '@/lib/kit';\n\nfunction useMuted() {\n  const { colors } = useKit();\n  return { fontSize: 13, color: colors.mutedForeground, textAlign: 'center' as const };\n}\n\nexport default function ActionSheetDemo() {\n  const muted = useMuted();\n  const [open, setOpen] = useState(false);\n  return (\n    <View style={{ alignItems: 'center', gap: 8 }}>\n      <Button variant=\"outline\" onPress={() => setOpen(true)}>\n        Change profile photo\n      </Button>\n      <Text style={muted}>Bottom choices live in Action Sheet — not Dialog.</Text>\n      <ActionSheet\n        open={open}\n        onOpenChange={setOpen}\n        title=\"Profile photo\"\n        message=\"Your photo is visible to everyone in your workspace.\"\n        actions={[\n          { label: 'Take photo' },\n          { label: 'Choose from library' },\n          { label: 'Remove photo', destructive: true },\n        ]}\n      />\n    </View>\n  );\n}\n"
+    }
+  ]
+}