@expokit/cli 0.0.0-stage → 0.3.0

package/registry/_docs/calendar.json

@@ -0,0 +1,198 @@
+{
+  "name": "calendar",
+  "category": "Inputs",
+  "aliases": [],
+  "exportName": "Calendar",
+  "files": [
+    "src/components/ui/calendar.tsx"
+  ],
+  "summary": "A month calendar where months slide in from the side you travel and ranges draw one band.",
+  "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."
+    ]
+  ],
+  "behavior": [
+    [
+      "Touch",
+      "Tap a day to select it. Swipe sideways or use the chevrons to change month, and tap the title for a month and year grid."
+    ],
+    [
+      "Motion",
+      "Months slide in with a spring, selected days pop with a bouncy spring and range bands fade in."
+    ],
+    [
+      "Screen readers",
+      "Days are buttons with selected and disabled state, labelled with the full date plus \"today\" or \"has events\" where they apply."
+    ]
+  ],
+  "usage": "import { useState } from 'react';\nimport { Calendar } from '@/components/ui/calendar';\n\nconst [date, setDate] = useState(new Date());\n<Calendar value={date} onChange={setDate} minDate={new Date()} />",
+  "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,124 @@
+{
+  "name": "card-stack",
+  "category": "3D",
+  "aliases": [],
+  "exportName": "CardStack",
+  "files": [
+    "src/components/ui/card-stack.tsx"
+  ],
+  "summary": "A Wallet-style stack that fans open on tap and slides the picked card to the front.",
+  "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."
+    ]
+  ],
+  "behavior": [
+    [
+      "Touch",
+      "Tap the closed stack to fan it open, then tap a card to bring it to the front as the stack closes. With onPressFront, a tap on the front card calls it instead."
+    ],
+    [
+      "Motion",
+      "Cards behind the front one shrink and tilt back in 3D depth. Opening, closing and reordering all run on springs."
+    ],
+    [
+      "Screen readers",
+      "Each card is a button with selected and expanded state, labelled \"Card 2 of 4\" by default or by getAccessibilityLabel."
+    ]
+  ],
+  "usage": null,
+  "examples": []
+}

package/registry/_docs/card.json

@@ -0,0 +1,131 @@
+{
+  "name": "card",
+  "category": "Display",
+  "aliases": [],
+  "exportName": "Card",
+  "files": [
+    "src/components/ui/card.tsx"
+  ],
+  "summary": "A composable card that springs down on press, with a spotlight that follows your finger.",
+  "props": [
+    [
+      "variant",
+      "\"default\" | \"outline\" | \"elevated\"",
+      "\"default\"",
+      "Surface style. Glass is translucent with a light edge — place it over colour or imagery."
+    ],
+    [
+      "onPress / onLongPress",
+      "(e) => void",
+      "—",
+      "Makes the card a button with a spring press."
+    ],
+    [
+      "pressable",
+      "boolean",
+      "false",
+      "Spring press without an onPress."
+    ],
+    [
+      "highlight",
+      "\"none\" | \"spotlight\" | \"border\"",
+      "\"none\"",
+      "Radial glow that tracks the finger, or an accent border that glows in."
+    ],
+    [
+      "accent",
+      "string",
+      "theme accent",
+      "Highlight colour."
+    ],
+    [
+      "padding",
+      "number",
+      "18",
+      "Inner padding."
+    ],
+    [
+      "gap",
+      "number",
+      "14",
+      "Space between sections."
+    ],
+    [
+      "disabled",
+      "boolean",
+      "false",
+      "Dims and blocks presses."
+    ],
+    [
+      "Card.Header action",
+      "ReactNode",
+      "—",
+      "Element pinned to the header's top-right."
+    ],
+    [
+      "Card.Title / Description numberOfLines",
+      "number",
+      "—",
+      "Clamp the text to this many lines with an ellipsis."
+    ],
+    [
+      "Card.Content / Footer",
+      "{ children, style? }",
+      "—",
+      "Plain section view / bottom row of actions (row, 10pt gap); `style` overrides either."
+    ],
+    [
+      "Card.Media source / height",
+      "ImageSource / number",
+      "— / 168",
+      "Full-bleed image; place it first."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the card surface (merged after the variant background, border and radius)."
+    ]
+  ],
+  "behavior": [
+    [
+      "Touch",
+      "With onPress, onLongPress or pressable it scales down with a spring and bounces back on release."
+    ],
+    [
+      "Motion",
+      "highlight=\"spotlight\" springs in a soft glow under your finger; highlight=\"border\" fades in a glowing accent ring."
+    ],
+    [
+      "Screen readers",
+      "Becomes a button with disabled state when it has onPress or onLongPress. Card.Title is a header."
+    ],
+    [
+      "Web",
+      "Shows a pointer cursor when it has onPress."
+    ]
+  ],
+  "usage": "import { Card } from '@/components/ui/card';\n\n<Card variant=\"elevated\" highlight=\"spotlight\" onPress={openGuide}>\n  <Card.Header>\n    <Card.Title>Kyoto in autumn</Card.Title>\n    <Card.Description>Temples, maple-lined paths and the best matcha spots.</Card.Description>\n  </Card.Header>\n</Card>",
+  "examples": [
+    {
+      "name": "Default",
+      "title": "Default",
+      "code": "import { Text, View } from 'react-native';\nimport { Card } from '@/components/ui/card';\nimport { Button } from '@/components/ui/button';\nimport { useKit } from '@/lib/kit';\n\nexport default function Default() {\n  const { colors } = useKit();\n  return (\n    <Card>\n      <Card.Header action={<Text style={{ fontSize: 18, color: colors.mutedForeground }}>⋯</Text>}>\n        <Card.Title>Invite your team</Card.Title>\n        <Card.Description>Collaborators can edit boards, leave comments and see version history.</Card.Description>\n      </Card.Header>\n      <Card.Content>\n        <Text style={{ fontSize: 13, color: colors.mutedForeground }}>3 of 10 seats used on the Starter plan</Text>\n      </Card.Content>\n      <Card.Footer>\n        <Button variant=\"outline\" size=\"sm\">Copy link</Button>\n        <Button variant=\"accent\" size=\"sm\">Send invites</Button>\n      </Card.Footer>\n    </Card>\n  );\n}\n"
+    },
+    {
+      "name": "Variants",
+      "title": "Variants",
+      "code": "import { Text, View } from 'react-native';\nimport { Card } from '@/components/ui/card';\n\nexport default function Variants() {\n  return (\n    <View style={{ gap: 12 }}>\n      {(['default', 'outline', 'elevated'] as const).map((variant) => (\n        <Card key={variant} variant={variant} padding={16}>\n          <Card.Header>\n            <Card.Title>{variant[0].toUpperCase() + variant.slice(1)}</Card.Title>\n            <Card.Description>variant=&quot;{variant}&quot;</Card.Description>\n          </Card.Header>\n        </Card>\n      ))}\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Spotlight",
+      "title": "Spotlight",
+      "code": "import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport { Card } from '@/components/ui/card';\nimport { useKit } from '@/lib/kit';\n\nexport default function Spotlight() {\n  const { colors } = useKit();\n  const [opened, setOpened] = useState(0);\n  return (\n    <Card variant=\"elevated\" highlight=\"spotlight\" onPress={() => setOpened((n) => n + 1)} accessibilityLabel=\"Open Kyoto guide\">\n      <Card.Media source={{ uri: 'https://picsum.photos/seed/kyoto/600/400' }} height={150} />\n      <Card.Header>\n        <Card.Title>Kyoto in autumn</Card.Title>\n        <Card.Description numberOfLines={2}>Temples, maple-lined paths and the best matcha spots — a 4-day walking guide.</Card.Description>\n      </Card.Header>\n      <Card.Footer>\n        <Text style={{ fontSize: 13, color: colors.mutedForeground }}>12 min read · opened {opened}×</Text>\n      </Card.Footer>\n    </Card>\n  );\n}\n"
+    },
+    {
+      "name": "SelectablePlans",
+      "title": "Selectable Plans",
+      "code": "import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport { Card } from '@/components/ui/card';\nimport { useKit } from '@/lib/kit';\n\nexport default function SelectablePlans() {\n  const { colors } = useKit();\n  const [plan, setPlan] = useState('pro');\n  const plans = [\n    { id: 'starter', name: 'Starter', price: 'Free', note: 'For side projects' },\n    { id: 'pro', name: 'Pro', price: '₹499/mo', note: 'Unlimited boards and history' },\n    { id: 'team', name: 'Team', price: '₹1,499/mo', note: 'Roles, SSO and audit log' },\n  ];\n  return (\n    <View style={{ gap: 10 }}>\n      {plans.map((p) => (\n        <Card\n          key={p.id}\n          variant=\"outline\"\n          padding={16}\n          highlight=\"border\"\n          onPress={() => setPlan(p.id)}\n          accessibilityLabel={`${p.name} plan`}\n          style={plan === p.id ? { borderColor: colors.accent, borderWidth: 1.5 } : undefined}\n        >\n          <Card.Header action={<Text style={{ fontWeight: '400', color: plan === p.id ? colors.accent : colors.mutedForeground }}>{p.price}</Text>}>\n            <Card.Title>{p.name}</Card.Title>\n            <Card.Description>{p.note}</Card.Description>\n          </Card.Header>\n        </Card>\n      ))}\n    </View>\n  );\n}\n"
+    }
+  ]
+}

package/registry/_docs/carousel.json

@@ -0,0 +1,122 @@
+{
+  "name": "carousel",
+  "category": "Display",
+  "aliases": [],
+  "exportName": "Carousel",
+  "files": [
+    "src/components/ui/carousel.tsx"
+  ],
+  "summary": "A snapping carousel whose neighbouring slides shrink, fade or tilt with the scroll.",
+  "props": [
+    [
+      "data",
+      "T[]",
+      "—",
+      "Items to render, one slide each."
+    ],
+    [
+      "renderItem",
+      "({ item, index, progress, width }) => ReactNode",
+      "—",
+      "Render a slide. `progress` runs -1 → 0 → 1 across the centre — use it for parallax."
+    ],
+    [
+      "keyExtractor",
+      "(item: T, index: number) => string",
+      "index",
+      "React key for each slide."
+    ],
+    [
+      "itemWidth",
+      "number",
+      "0.82",
+      "Fraction of the carousel (≤ 1) or points. Capped at 460pt for tablets."
+    ],
+    [
+      "height",
+      "number",
+      "200",
+      "Slide height."
+    ],
+    [
+      "gap",
+      "number",
+      "12",
+      "Space between slides."
+    ],
+    [
+      "effect",
+      "\"scale\" | \"coverflow\" | \"flat\"",
+      "\"scale\"",
+      "How neighbours look."
+    ],
+    [
+      "pagination",
+      "\"dots\" | \"expanding\" | \"bar\" | \"none\"",
+      "\"dots\"",
+      "Indicator under the slides; dots are tappable."
+    ],
+    [
+      "autoplay",
+      "boolean | number",
+      "false",
+      "Advance every 3.5s (or N ms); pauses while touched."
+    ],
+    [
+      "loop",
+      "boolean",
+      "true",
+      "Autoplay wraps to the first slide."
+    ],
+    [
+      "index",
+      "number",
+      "—",
+      "Controlled active slide. Pair with onIndexChange so autoplay / swipes update parent state."
+    ],
+    [
+      "defaultIndex",
+      "number",
+      "0",
+      "Uncontrolled initial slide (ignored when index is set)."
+    ],
+    [
+      "onIndexChange",
+      "(index: number) => void",
+      "—",
+      "Fires when the centred slide changes (swipe, dots, autoplay)."
+    ],
+    [
+      "accent",
+      "string",
+      "theme accent",
+      "Active dot / bar colour."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "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": []
+}