@expokit/cli 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,122 @@
+{
+  "name": "button-3d",
+  "category": "3D",
+  "aliases": [],
+  "exportName": "Button3D",
+  "files": [
+    "src/components/ui/button-3d.tsx"
+  ],
+  "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)."
+    ]
+  ],
+  "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,115 @@
+{
+  "name": "button",
+  "category": "Buttons",
+  "aliases": [],
+  "exportName": "Button",
+  "files": [
+    "src/components/ui/button.tsx"
+  ],
+  "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, …"
+    ]
+  ],
+  "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"
+    }
+  ]
+}

package/registry/_docs/calendar.json

@@ -0,0 +1,182 @@
+{
+  "name": "calendar",
+  "category": "Inputs",
+  "aliases": [],
+  "exportName": "Calendar",
+  "files": [
+    "src/components/ui/calendar.tsx"
+  ],
+  "props": [
+    [
+      "mode",
+      "'single' | 'range' | 'multiple'",
+      "'single'",
+      "Selection model; decides the value type."
+    ],
+    [
+      "value",
+      "Date | { start, end } | Date[] | null",
+      "—",
+      "Controlled selection (Date for single, DateRange for range, Date[] for multiple)."
+    ],
+    [
+      "defaultValue",
+      "same as value",
+      "null",
+      "Initial selection when uncontrolled."
+    ],
+    [
+      "onChange",
+      "(value) => void",
+      "—",
+      "Fires on every tap. Range fires { start, end: null } first, then both ends."
+    ],
+    [
+      "month",
+      "Date",
+      "—",
+      "Controlled visible month (any date inside it)."
+    ],
+    [
+      "defaultMonth",
+      "Date",
+      "selection or today",
+      "Month shown first when uncontrolled."
+    ],
+    [
+      "onMonthChange",
+      "(month: Date) => void",
+      "—",
+      "Called with the first day of the month navigated to."
+    ],
+    [
+      "weekStartsOn",
+      "0 | 1",
+      "0",
+      "0 = Sunday, 1 = Monday."
+    ],
+    [
+      "locale",
+      "string",
+      "device",
+      "BCP 47 locale for month and weekday names."
+    ],
+    [
+      "minDate",
+      "Date",
+      "—",
+      "Earliest selectable day; also limits navigation."
+    ],
+    [
+      "maxDate",
+      "Date",
+      "—",
+      "Latest selectable day; also limits navigation."
+    ],
+    [
+      "isDateDisabled",
+      "(date: Date) => boolean",
+      "—",
+      "Disable individual days (booked, holidays, weekends)."
+    ],
+    [
+      "markedDates",
+      "Record<string, string | string[]>",
+      "—",
+      "Up to three coloured dots under each day, keyed by toDateKey(date) (YYYY-MM-DD)."
+    ],
+    [
+      "highlightedDates",
+      "Record<string, string>",
+      "—",
+      "Fills whole days with a colour (birthdays, shifts, people), keyed by toDateKey(date). Text switches to a readable colour on top."
+    ],
+    [
+      "variant",
+      "'tiles' | 'minimal'",
+      "'tiles'",
+      "tiles puts every day of the month on a soft tile; minimal shows bare numbers with a hover / press circle."
+    ],
+    [
+      "weekdayFormat",
+      "'narrow' | 'short'",
+      "'narrow'",
+      "Weekday header as single letters (M T W) or short names (Mon Tue Wed), via Intl."
+    ],
+    [
+      "showTodayButton",
+      "boolean",
+      "true",
+      "Shows a Today pill in the header whenever another month is on screen; tapping it jumps back."
+    ],
+    [
+      "showOutsideDays",
+      "boolean",
+      "false",
+      "Show faded days of the neighbouring months (tapping one navigates there)."
+    ],
+    [
+      "showToday",
+      "boolean",
+      "true",
+      "Ring and tint today."
+    ],
+    [
+      "fixedWeeks",
+      "boolean",
+      "false",
+      "Always render six week rows so the height never changes."
+    ],
+    [
+      "monthPicker",
+      "boolean",
+      "true",
+      "Tap the title for a month grid, tap again for a year grid."
+    ],
+    [
+      "max",
+      "number",
+      "—",
+      "Most dates selectable in multiple mode."
+    ],
+    [
+      "accent",
+      "string",
+      "theme accent",
+      "Selection, band and today colour."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Root container style."
+    ]
+  ],
+  "examples": [
+    {
+      "name": "Single",
+      "title": "Single",
+      "code": "import React, { useMemo, useState } from 'react';\nimport { StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { Calendar, addDays, startOfDay, toDateKey, type DateRange } from '@/components/ui/calendar';\nimport { alpha, useKit } from '@/lib/kit';\n\nconst today = startOfDay(new Date());\n\nconst day = (d: Date | null) => (d ? d.toLocaleDateString(undefined, { weekday: 'short', day: 'numeric', month: 'short' }) : '—');\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 <View style={[s.card, { backgroundColor: colors.card, borderColor: colors.border, borderRadius: radius.xl }, style]} {...rest} />;\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 s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  title: { fontSize: 15, fontWeight: '400' },\n  summary: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },\n  row: { flexDirection: 'row', alignItems: 'center', gap: 12 },\n  col: { flex: 1, gap: 2 },\n  muted: { fontSize: 13 },\n  strong: { fontSize: 15, fontWeight: '400' },\n  pill: { paddingHorizontal: 10, paddingVertical: 6 },\n  pillText: { fontSize: 13, fontWeight: '400' },\n  legend: { flexDirection: 'row', flexWrap: 'wrap', columnGap: 14, rowGap: 6, justifyContent: 'center' },\n  legendItem: { flexDirection: 'row', alignItems: 'center', gap: 6 },\n  dot: { width: 8, height: 8, borderRadius: 4 },\n});\n\nexport default function Single() {\n  const [date, setDate] = useState<Date>(addDays(today, 3));\n  return (\n    <Card>\n      <Ink style={s.title}>Delivery day</Ink>\n      <Calendar value={date} onChange={setDate} minDate={today} />\n      <View style={s.summary}>\n        <Ink tone=\"muted\" style={s.muted}>Arriving</Ink>\n        <Ink style={s.strong}>{day(date)}</Ink>\n      </View>\n    </Card>\n  );\n}\n"
+    },
+    {
+      "name": "Range",
+      "title": "Range",
+      "code": "import React, { useMemo, useState } from 'react';\nimport { StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { Calendar, addDays, startOfDay, toDateKey, type DateRange } from '@/components/ui/calendar';\nimport { alpha, useKit } from '@/lib/kit';\n\nconst today = startOfDay(new Date());\n\nconst day = (d: Date | null) => (d ? d.toLocaleDateString(undefined, { weekday: 'short', day: 'numeric', month: 'short' }) : '—');\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 <View style={[s.card, { backgroundColor: colors.card, borderColor: colors.border, borderRadius: radius.xl }, style]} {...rest} />;\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 s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  title: { fontSize: 15, fontWeight: '400' },\n  summary: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },\n  row: { flexDirection: 'row', alignItems: 'center', gap: 12 },\n  col: { flex: 1, gap: 2 },\n  muted: { fontSize: 13 },\n  strong: { fontSize: 15, fontWeight: '400' },\n  pill: { paddingHorizontal: 10, paddingVertical: 6 },\n  pillText: { fontSize: 13, fontWeight: '400' },\n  legend: { flexDirection: 'row', flexWrap: 'wrap', columnGap: 14, rowGap: 6, justifyContent: 'center' },\n  legendItem: { flexDirection: 'row', alignItems: 'center', gap: 6 },\n  dot: { width: 8, height: 8, borderRadius: 4 },\n});\n\nexport default function Range() {\n  const [stay, setStay] = useState<DateRange>({ start: addDays(today, 4), end: addDays(today, 8) });\n  const { colors, radius } = useKit();\n  const nights = stay.start && stay.end ? Math.round((stay.end.getTime() - stay.start.getTime()) / 86400000) : 0;\n  return (\n    <Card>\n      <Ink style={s.title}>Your stay · Lisbon</Ink>\n      <Calendar mode=\"range\" value={stay} onChange={setStay} minDate={today} />\n      <View style={s.row}>\n        <View style={s.col}>\n          <Ink tone=\"muted\" style={s.muted}>Check-in</Ink>\n          <Ink style={s.strong}>{day(stay.start)}</Ink>\n        </View>\n        <View style={s.col}>\n          <Ink tone=\"muted\" style={s.muted}>Check-out</Ink>\n          <Ink style={s.strong}>{stay.end ? day(stay.end) : 'Select a date'}</Ink>\n        </View>\n        <View style={[s.pill, { opacity: nights ? 1 : 0.4, backgroundColor: alpha(colors.accent, 0.14), borderRadius: radius.capsule(30) }]}>\n          <Text style={[s.pillText, { color: colors.accent }]}>{nights ? `${nights} night${nights > 1 ? 's' : ''}` : '0 nights'}</Text>\n        </View>\n      </View>\n    </Card>\n  );\n}\n"
+    },
+    {
+      "name": "Marked",
+      "title": "Marked",
+      "code": "import React, { useMemo, useState } from 'react';\nimport { StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { Calendar, addDays, startOfDay, toDateKey, type DateRange } from '@/components/ui/calendar';\nimport { alpha, useKit } from '@/lib/kit';\n\nconst today = startOfDay(new Date());\n\nconst day = (d: Date | null) => (d ? d.toLocaleDateString(undefined, { weekday: 'short', day: 'numeric', month: 'short' }) : '—');\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 <View style={[s.card, { backgroundColor: colors.card, borderColor: colors.border, borderRadius: radius.xl }, style]} {...rest} />;\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 MEETING = '#38bdf8';\n\nconst BIRTHDAY = '#f472b6';\n\nconst TRIP = '#f59e0b';\n\nconst DONE = '#22c55e';\n\nconst DUE = '#ef4444';\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  title: { fontSize: 15, fontWeight: '400' },\n  summary: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },\n  row: { flexDirection: 'row', alignItems: 'center', gap: 12 },\n  col: { flex: 1, gap: 2 },\n  muted: { fontSize: 13 },\n  strong: { fontSize: 15, fontWeight: '400' },\n  pill: { paddingHorizontal: 10, paddingVertical: 6 },\n  pillText: { fontSize: 13, fontWeight: '400' },\n  legend: { flexDirection: 'row', flexWrap: 'wrap', columnGap: 14, rowGap: 6, justifyContent: 'center' },\n  legendItem: { flexDirection: 'row', alignItems: 'center', gap: 6 },\n  dot: { width: 8, height: 8, borderRadius: 4 },\n});\n\nexport default function Marked() {\n  const [date, setDate] = useState<Date>(today);\n  const { highlights, marks } = useMemo(() => {\n    const y = today.getFullYear();\n    const m = today.getMonth();\n    const k = (d: number) => toDateKey(new Date(y, m, d));\n    return {\n      // Whole-day fills: who / what owns the day.\n      highlights: { [k(2)]: MEETING, [k(14)]: BIRTHDAY, [k(18)]: TRIP, [k(21)]: MEETING, [k(31)]: BIRTHDAY },\n      // Dots underneath: smaller things on that day.\n      marks: { [k(3)]: DONE, [k(8)]: DUE, [k(12)]: DONE, [k(17)]: DONE, [k(22)]: [DONE, DUE], [k(26)]: DUE },\n    };\n  }, []);\n  return (\n    <Card>\n      <Ink style={s.title}>Schedule</Ink>\n      <Calendar value={date} onChange={setDate} highlightedDates={highlights} markedDates={marks} weekStartsOn={1} />\n      <View style={s.legend}>\n        {[\n          ['Meeting', MEETING],\n          ['Birthday', BIRTHDAY],\n          ['Trip', TRIP],\n          ['Done', DONE],\n          ['Due', DUE],\n        ].map(([label, color]) => (\n          <View key={label} style={s.legendItem}>\n            <View style={[s.dot, { backgroundColor: color }]} />\n            <Ink tone=\"muted\" style={s.muted}>{label}</Ink>\n          </View>\n        ))}\n      </View>\n    </Card>\n  );\n}\n"
+    },
+    {
+      "name": "Booking",
+      "title": "Booking",
+      "code": "import React, { useMemo, useState } from 'react';\nimport { StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { Calendar, addDays, startOfDay, toDateKey, type DateRange } from '@/components/ui/calendar';\nimport { alpha, useKit } from '@/lib/kit';\n\nconst today = startOfDay(new Date());\n\nconst day = (d: Date | null) => (d ? d.toLocaleDateString(undefined, { weekday: 'short', day: 'numeric', month: 'short' }) : '—');\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 <View style={[s.card, { backgroundColor: colors.card, borderColor: colors.border, borderRadius: radius.xl }, style]} {...rest} />;\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 s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  title: { fontSize: 15, fontWeight: '400' },\n  summary: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },\n  row: { flexDirection: 'row', alignItems: 'center', gap: 12 },\n  col: { flex: 1, gap: 2 },\n  muted: { fontSize: 13 },\n  strong: { fontSize: 15, fontWeight: '400' },\n  pill: { paddingHorizontal: 10, paddingVertical: 6 },\n  pillText: { fontSize: 13, fontWeight: '400' },\n  legend: { flexDirection: 'row', flexWrap: 'wrap', columnGap: 14, rowGap: 6, justifyContent: 'center' },\n  legendItem: { flexDirection: 'row', alignItems: 'center', gap: 6 },\n  dot: { width: 8, height: 8, borderRadius: 4 },\n});\n\nexport default function Booking() {\n  const booked = useMemo(() => new Set([2, 5, 6, 11, 19].map((n) => toDateKey(addDays(today, n)))), []);\n  const [date, setDate] = useState<Date | null>(null);\n  return (\n    <Card>\n      <Ink style={s.title}>Book a consultation</Ink>\n      <Calendar\n        value={date}\n        onChange={setDate}\n        minDate={today}\n        maxDate={addDays(today, 45)}\n        isDateDisabled={(d) => d.getDay() === 0 || booked.has(toDateKey(d))}\n        showOutsideDays\n        fixedWeeks\n      />\n      <Ink tone=\"muted\" style={s.muted}>\n        {date ? `Next: choose a time on ${day(date)}` : 'Faded days are fully booked or closed on Sundays.'}\n      </Ink>\n    </Card>\n  );\n}\n"
+    },
+    {
+      "name": "WeekStartsMonday",
+      "title": "Week Starts Monday",
+      "code": "import React, { useMemo, useState } from 'react';\nimport { StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { Calendar, addDays, startOfDay, toDateKey, type DateRange } from '@/components/ui/calendar';\nimport { alpha, useKit } from '@/lib/kit';\n\nconst today = startOfDay(new Date());\n\nconst day = (d: Date | null) => (d ? d.toLocaleDateString(undefined, { weekday: 'short', day: 'numeric', month: 'short' }) : '—');\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 <View style={[s.card, { backgroundColor: colors.card, borderColor: colors.border, borderRadius: radius.xl }, style]} {...rest} />;\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 s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  title: { fontSize: 15, fontWeight: '400' },\n  summary: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },\n  row: { flexDirection: 'row', alignItems: 'center', gap: 12 },\n  col: { flex: 1, gap: 2 },\n  muted: { fontSize: 13 },\n  strong: { fontSize: 15, fontWeight: '400' },\n  pill: { paddingHorizontal: 10, paddingVertical: 6 },\n  pillText: { fontSize: 13, fontWeight: '400' },\n  legend: { flexDirection: 'row', flexWrap: 'wrap', columnGap: 14, rowGap: 6, justifyContent: 'center' },\n  legendItem: { flexDirection: 'row', alignItems: 'center', gap: 6 },\n  dot: { width: 8, height: 8, borderRadius: 4 },\n});\n\nexport default function WeekStartsMonday() {\n  const [days, setDays] = useState<Date[]>([addDays(today, 1), addDays(today, 3)]);\n  return (\n    <Card>\n      <Ink style={s.title}>Training days · pick up to 3</Ink>\n      <Calendar mode=\"multiple\" value={days} onChange={setDays} max={3} weekStartsOn={1} locale=\"en-GB\" showOutsideDays />\n      <Ink tone=\"muted\" style={s.muted}>{days.length ? days.map((d) => day(d)).join('  ·  ') : 'No sessions planned'}</Ink>\n    </Card>\n  );\n}\n"
+    }
+  ]
+}

package/registry/_docs/card-stack.json

@@ -0,0 +1,108 @@
+{
+  "name": "card-stack",
+  "category": "3D",
+  "aliases": [],
+  "exportName": "CardStack",
+  "files": [
+    "src/components/ui/card-stack.tsx"
+  ],
+  "props": [
+    [
+      "data",
+      "T[]",
+      "—",
+      "Items, one card each."
+    ],
+    [
+      "renderItem",
+      "({ item, index, front }) => ReactNode",
+      "—",
+      "Render a card. `front` is true for the card in front."
+    ],
+    [
+      "keyExtractor",
+      "(item: T, index: number) => string",
+      "index",
+      "React key for each card."
+    ],
+    [
+      "cardHeight",
+      "number",
+      "190",
+      "Card height."
+    ],
+    [
+      "peek",
+      "number",
+      "14",
+      "How much of each card shows behind the front one when closed."
+    ],
+    [
+      "spread",
+      "number",
+      "64",
+      "Space between cards when open."
+    ],
+    [
+      "depth",
+      "number",
+      "3",
+      "Cards visible behind the front one when closed."
+    ],
+    [
+      "selected",
+      "number",
+      "—",
+      "Controlled front card (index into data)."
+    ],
+    [
+      "onPressFront",
+      "(index) => void",
+      "—",
+      "Tap on the front card while closed (pay with it); the cards behind still open the stack."
+    ],
+    [
+      "getAccessibilityLabel",
+      "(item, index) => string",
+      "\"Card 2 of 4\"",
+      "Screen-reader label for each card."
+    ],
+    [
+      "defaultSelected",
+      "number",
+      "0",
+      "Uncontrolled initial front card."
+    ],
+    [
+      "onSelect",
+      "(index: number) => void",
+      "—",
+      "Fires when a card is picked."
+    ],
+    [
+      "open",
+      "boolean",
+      "—",
+      "Controlled open state."
+    ],
+    [
+      "onOpenChange",
+      "(open: boolean) => void",
+      "—",
+      "Fires when the stack opens or closes."
+    ],
+    [
+      "radius",
+      "number",
+      "18",
+      "Corner radius of each card."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the root view."
+    ]
+  ],
+  "examples": []
+}