@expokit/cli 0.0.0-stage → 0.2.0

package/registry/_docs/coupon.json

@@ -0,0 +1,176 @@
+{
+  "name": "coupon",
+  "category": "Coupons",
+  "aliases": [],
+  "exportName": "Coupon",
+  "files": [
+    "src/components/ui/coupon.tsx"
+  ],
+  "props": [
+    [
+      "value",
+      "string",
+      "—",
+      "The headline: \"50%\", \"₹200\", \"FREE\", \"BOGO\"."
+    ],
+    [
+      "unit / prefix",
+      "string",
+      "—",
+      "Under / above the value: \"OFF\", \"FLAT\", \"UP TO\"."
+    ],
+    [
+      "title / description",
+      "string",
+      "—",
+      "What the offer is and its conditions."
+    ],
+    [
+      "code",
+      "string",
+      "—",
+      "Promo code in a dashed chip — tap to copy when onCopy is set."
+    ],
+    [
+      "brand / logo",
+      "string / ReactNode",
+      "—",
+      "Who it's from."
+    ],
+    [
+      "expires",
+      "string",
+      "—",
+      "Expiry line (\"Valid till 31 Dec\")."
+    ],
+    [
+      "expiresAt",
+      "Date | number",
+      "—",
+      "Live countdown (\"Ends in 05:42:10\"); turns expired when it passes."
+    ],
+    [
+      "terms",
+      "string[]",
+      "—",
+      "Shown on the back — the T&C link turns the coupon over."
+    ],
+    [
+      "status",
+      "\"available\" | \"applied\" | \"used\" | \"expired\" | \"locked\"",
+      "\"available\"",
+      "Applied shows a green ring; used / expired dim with a stamp; locked goes grey."
+    ],
+    [
+      "lockedHint",
+      "string",
+      "—",
+      "Why it's locked (\"Add ₹120 more to unlock\")."
+    ],
+    [
+      "theme",
+      "\"sunset\" | \"candy\" | \"ocean\" | \"lime\" | \"gold\" | \"fire\" | \"neon\" | \"ink\" | \"paper\" | \"holo\" | CouponTheme",
+      "\"sunset\"",
+      "Preset, or { fill, ink, accent?, body?, bodyInk?, pattern? } — fill can be a gradient."
+    ],
+    [
+      "pattern",
+      "\"none\" | \"dots\" | \"stripes\" | \"grid\" | \"waves\" | \"sunburst\" | \"confetti\"",
+      "theme's",
+      "Texture on the value panel."
+    ],
+    [
+      "layout",
+      "\"horizontal\" | \"vertical\"",
+      "\"horizontal\"",
+      "Value panel on the left, or on top."
+    ],
+    [
+      "variant",
+      "\"ticket\" | \"stamp\" | \"receipt\" | \"scallop\" | \"cutout\"",
+      "\"ticket\"",
+      "Outline: notches, perforations, torn zigzag ends, wavy edges, or a dashed cut-here line."
+    ],
+    [
+      "size",
+      "\"sm\" | \"md\" | \"lg\"",
+      "\"md\"",
+      "Compact for long lists, large for a hero."
+    ],
+    [
+      "shine",
+      "boolean",
+      "false",
+      "A light sweep across the value panel every few seconds."
+    ],
+    [
+      "tilt / holo / idle",
+      "boolean",
+      "false",
+      "3D tilt toward the finger; rainbow foil sheen; slow sway at rest."
+    ],
+    [
+      "onCopy",
+      "(code) => void",
+      "—",
+      "Called from the code chip — wire it to expo-clipboard."
+    ],
+    [
+      "onApply",
+      "() => void",
+      "—",
+      "Shows the Apply button."
+    ],
+    [
+      "onPress",
+      "() => void",
+      "—",
+      "Tap on the coupon itself (open details, select it)."
+    ],
+    [
+      "flipped / defaultFlipped / onFlip",
+      "boolean / boolean / (flipped) => void",
+      "— / false / —",
+      "Controlled or uncontrolled side."
+    ],
+    [
+      "labels",
+      "{ copy?, copied?, apply?, applied?, used?, expired?, locked?, endsIn?, terms?, termsTitle?, back? }",
+      "English",
+      "Every built-in string, for translation."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Width, margins."
+    ]
+  ],
+  "examples": [
+    {
+      "name": "Hero",
+      "title": "Hero",
+      "code": "import React, { useRef, useState } from 'react';\nimport { Image, Pressable, Text, View } from 'react-native';\nimport { Confetti, type ConfettiHandle } from '@/components/ui/confetti';\nimport { Coupon } from '@/components/ui/coupon';\nimport { useKit } from '@/lib/kit';\n\nconst logo = (id: number) => <Image alt=\"\" source={{ uri: `https://picsum.photos/id/${id}/64/64` }} style={{ width: 18, height: 18, borderRadius: 5 }} />;\n\nexport default function Hero() {\n  const { colors } = useKit();\n  const [applied, setApplied] = useState(false);\n  const confetti = useRef<ConfettiHandle>(null);\n  return (\n    <View style={{ gap: 14, paddingVertical: 8 }}>\n      <View>\n        <Text style={{ color: colors.foreground, fontSize: 22, fontWeight: '800', letterSpacing: -0.5 }}>Just for you</Text>\n        <Text style={{ color: colors.mutedForeground, fontSize: 13 }}>Tilt the coupon · tap T&C to flip it</Text>\n      </View>\n      <Coupon\n        tilt\n        holo\n        idle\n        shine\n        theme=\"candy\"\n        size=\"lg\"\n        brand=\"Glow Beauty\"\n        logo={logo(64)}\n        prefix=\"Flat\"\n        value=\"50%\"\n        unit=\"Off\"\n        title=\"Your first order, on us\"\n        description=\"Up to ₹300 off on skincare & makeup\"\n        code=\"GLOW50\"\n        expires=\"Valid till 31 Dec\"\n        terms={['Min. order ₹699', 'Once per account', 'Not valid on gift cards', 'Can’t be combined with other offers']}\n        status={applied ? 'applied' : 'available'}\n        onCopy={() => {}}\n        onApply={() => {\n          setApplied(true);\n          confetti.current?.burst();\n        }}\n      />\n      {applied ? (\n        <Pressable onPress={() => setApplied(false)} accessibilityRole=\"button\" style={{ alignSelf: 'center', padding: 8 }}>\n          <Text style={{ color: colors.mutedForeground, fontSize: 13, fontWeight: '600' }}>Remove coupon</Text>\n        </Pressable>\n      ) : null}\n      <Confetti ref={confetti} />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "OffersList",
+      "title": "Offers List",
+      "code": "import React, { useRef, useState } from 'react';\nimport { Image, Pressable, Text, View } from 'react-native';\nimport { Coupon } from '@/components/ui/coupon';\nimport { useKit } from '@/lib/kit';\n\nconst logo = (id: number) => <Image alt=\"\" source={{ uri: `https://picsum.photos/id/${id}/64/64` }} style={{ width: 18, height: 18, borderRadius: 5 }} />;\n\nexport default function OffersList() {\n  const { colors } = useKit();\n  const [applied, setApplied] = useState<string | null>('SWIGGY60');\n  const [soon] = useState(() => Date.now() + 2 * 3600_000 + 14 * 60_000);\n  return (\n    <View style={{ gap: 14 }}>\n      <Text style={{ color: colors.foreground, fontSize: 18, fontWeight: '800' }}>Offers for you</Text>\n      <Coupon\n        theme=\"fire\"\n        brand=\"Swiggy\"\n        logo={logo(292)}\n        value=\"60%\"\n        unit=\"Off\"\n        title=\"Up to ₹120 on your next meal\"\n        code=\"SWIGGY60\"\n        expiresAt={soon}\n        status={applied === 'SWIGGY60' ? 'applied' : 'available'}\n        onCopy={() => {}}\n        onApply={() => setApplied('SWIGGY60')}\n      />\n      <Coupon\n        theme=\"ocean\"\n        variant=\"stamp\"\n        brand=\"HDFC Bank\"\n        prefix=\"Instant\"\n        value=\"₹250\"\n        unit=\"Off\"\n        title=\"On HDFC credit cards\"\n        description=\"Orders above ₹1,500\"\n        code=\"HDFC250\"\n        status={applied === 'HDFC250' ? 'applied' : 'available'}\n        onCopy={() => {}}\n        onApply={() => setApplied('HDFC250')}\n      />\n      <Coupon\n        theme=\"lime\"\n        variant=\"receipt\"\n        brand=\"BigBasket\"\n        value=\"FREE\"\n        unit=\"Delivery\"\n        title=\"Free delivery on groceries\"\n        code=\"FREEDEL\"\n        status=\"locked\"\n        lockedHint=\"Add ₹120 more to unlock\"\n        onApply={() => {}}\n      />\n      <Coupon theme=\"ink\" variant=\"scallop\" brand=\"Myntra\" value=\"BOGO\" unit=\"Deal\" title=\"Buy 1 get 1 on tees\" code=\"BOGOTEE\" status=\"expired\" onApply={() => {}} />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Shapes",
+      "title": "Shapes",
+      "code": "import { Image, Pressable, Text, View } from 'react-native';\nimport { Coupon } from '@/components/ui/coupon';\n\nexport default function Shapes() {\n  return (\n    <View style={{ gap: 14 }}>\n      <Coupon size=\"sm\" theme=\"sunset\" variant=\"ticket\" value=\"30%\" unit=\"Off\" title=\"Ticket — classic notches\" code=\"TICKET30\" onCopy={() => {}} />\n      <Coupon size=\"sm\" theme=\"ocean\" variant=\"stamp\" value=\"₹99\" unit=\"Off\" title=\"Stamp — perforated edges\" code=\"STAMP99\" onCopy={() => {}} />\n      <Coupon size=\"sm\" theme=\"gold\" variant=\"receipt\" value=\"2X\" unit=\"Points\" title=\"Receipt — torn zigzag ends\" code=\"RECEIPT2X\" onCopy={() => {}} />\n      <Coupon size=\"sm\" theme=\"candy\" variant=\"scallop\" value=\"FREE\" unit=\"Gift\" title=\"Scallop — wavy edges\" code=\"SCALLOP\" onCopy={() => {}} />\n      <Coupon size=\"sm\" theme=\"paper\" variant=\"cutout\" value=\"25%\" unit=\"Off\" title=\"Cut-out — clip along the line\" code=\"CLIPME25\" onCopy={() => {}} />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Grid",
+      "title": "Grid",
+      "code": "import { Image, Pressable, Text, View } from 'react-native';\nimport { Coupon } from '@/components/ui/coupon';\n\nexport default function Grid() {\n  const offers = [\n    { theme: 'neon' as const, brand: 'Paytm', value: '₹100', unit: 'Cashback', title: 'On UPI payments', code: 'PAYTM100' },\n    { theme: 'gold' as const, brand: 'Amex', value: '10%', unit: 'Off', title: 'Weekend dining', code: 'AMEX10' },\n    { theme: 'sunset' as const, brand: 'Zomato', value: '₹75', unit: 'Off', title: 'Orders above ₹299', code: 'ZOMATO75' },\n    { theme: 'holo' as const, brand: 'Nykaa', value: '3X', unit: 'Points', title: 'This weekend only', code: 'NYKAA3X' },\n  ];\n  return (\n    <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 12 }}>\n      {offers.map((o) => (\n        <Coupon key={o.code} {...o} layout=\"vertical\" size=\"sm\" variant={o.theme === 'gold' ? 'stamp' : 'ticket'} onCopy={() => {}} style={{ width: '47%', flexGrow: 1 }} />\n      ))}\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "FlashSale",
+      "title": "Flash Sale",
+      "code": "import React, { useRef, useState } from 'react';\nimport { Image, Pressable, Text, View } from 'react-native';\nimport { Coupon } from '@/components/ui/coupon';\nimport { useKit } from '@/lib/kit';\n\nexport default function FlashSale() {\n  const { colors } = useKit();\n  const [ends, setEnds] = useState(() => Date.now() + 47_000);\n  return (\n    <View style={{ gap: 14 }}>\n      <Coupon\n        theme=\"sunset\"\n        layout=\"vertical\"\n        size=\"lg\"\n        shine\n        brand=\"Flash sale\"\n        prefix=\"Extra\"\n        value=\"70%\"\n        unit=\"Off\"\n        title=\"Sneakers · next 47 seconds\"\n        description=\"Ends when the timer does — no extensions\"\n        code=\"FLASH70\"\n        expiresAt={ends}\n        onCopy={() => {}}\n        onApply={() => {}}\n      />\n      <Pressable onPress={() => setEnds(Date.now() + 47_000)} accessibilityRole=\"button\" style={{ alignSelf: 'center', padding: 8 }}>\n        <Text style={{ color: colors.mutedForeground, fontSize: 13, fontWeight: '600' }}>Restart timer</Text>\n      </Pressable>\n    </View>\n  );\n}\n"
+    }
+  ]
+}

package/registry/_docs/cube-pager.json

@@ -0,0 +1,84 @@
+{
+  "name": "cube-pager",
+  "category": "3D",
+  "aliases": [],
+  "exportName": "CubePager",
+  "files": [
+    "src/components/ui/cube-pager.tsx"
+  ],
+  "props": [
+    [
+      "children",
+      "ReactNode",
+      "—",
+      "One child per page."
+    ],
+    [
+      "height",
+      "number",
+      "260",
+      "Page height."
+    ],
+    [
+      "effect",
+      "\"cube\" | \"inside\" | \"flip\"",
+      "\"cube\"",
+      "Outside of a cube, its inner walls, or each page spinning in place."
+    ],
+    [
+      "index",
+      "number",
+      "—",
+      "Controlled page."
+    ],
+    [
+      "defaultIndex",
+      "number",
+      "0",
+      "Uncontrolled initial page."
+    ],
+    [
+      "onIndexChange",
+      "(index: number) => void",
+      "—",
+      "Fires when the page changes."
+    ],
+    [
+      "pagination",
+      "boolean",
+      "true",
+      "Dots under the pager."
+    ],
+    [
+      "shade",
+      "boolean",
+      "true",
+      "Darken faces as they turn away."
+    ],
+    [
+      "accent",
+      "string",
+      "theme foreground",
+      "Active dot colour."
+    ],
+    [
+      "radius",
+      "number",
+      "20",
+      "Corner radius of the pages."
+    ],
+    [
+      "disabled",
+      "boolean",
+      "false",
+      "Turn swiping off (dots and a controlled index still work)."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the root view."
+    ]
+  ],
+  "examples": []
+}

package/registry/_docs/dashboard.json

@@ -0,0 +1,120 @@
+{
+  "name": "dashboard",
+  "category": "Blocks",
+  "aliases": [],
+  "exportName": "Dashboard",
+  "files": [
+    "src/components/blocks/dashboard.tsx"
+  ],
+  "props": [
+    [
+      "data",
+      "{ userName?, avatar?, periods: Record<'day' | 'week' | 'month', { revenue, delta, series, labels?, kpis }>, transactions }",
+      "sample merchant",
+      "Everything the screen shows. KPIs: { id, label, value, format?: 'money' | 'count' | 'percent', delta?, trend?, invert? }. Transactions: { id, title, subtitle?, amount (signed), category?, pending? }."
+    ],
+    [
+      "currency",
+      "string",
+      "'₹'",
+      "Symbol placed before money values."
+    ],
+    [
+      "formatMoney",
+      "(value: number) => string",
+      "—",
+      "Custom money formatter (overrides currency), e.g. Intl.NumberFormat or en-IN grouping."
+    ],
+    [
+      "title",
+      "string",
+      "'Overview'",
+      "Large title."
+    ],
+    [
+      "defaultPeriod / period",
+      "'day' | 'week' | 'month'",
+      "'week'",
+      "Uncontrolled initial period, or controlled period."
+    ],
+    [
+      "onPeriodChange",
+      "(period) => void",
+      "—",
+      "Segmented control changed."
+    ],
+    [
+      "loading",
+      "boolean",
+      "false",
+      "Shows skeleton placeholders for the chart, KPIs, actions and transactions."
+    ],
+    [
+      "onRefresh",
+      "() => void | Promise",
+      "—",
+      "Enables pull-to-refresh; a returned promise keeps the spinner until it settles."
+    ],
+    [
+      "refreshing",
+      "boolean",
+      "—",
+      "Controlled refreshing flag."
+    ],
+    [
+      "quickActions",
+      "{ id, label, icon: 'send' | 'request' | 'topup' | 'cards' | 'more' }[]",
+      "Send · Request · Top up · Cards",
+      "Round shortcut buttons under the KPIs."
+    ],
+    [
+      "onQuickAction",
+      "(action) => void",
+      "—",
+      "A quick action was tapped."
+    ],
+    [
+      "onSelectTransaction",
+      "(transaction) => void",
+      "—",
+      "Makes transaction rows pressable."
+    ],
+    [
+      "onSeeAllTransactions",
+      "() => void",
+      "—",
+      "Shows a “See all” link beside the section heading."
+    ],
+    [
+      "onSelectKpi",
+      "(kpi) => void",
+      "—",
+      "Makes KPI tiles pressable."
+    ],
+    [
+      "onPressAvatar / onPressNotifications",
+      "() => void",
+      "—",
+      "Header avatar and bell."
+    ],
+    [
+      "notificationBadge",
+      "boolean | number",
+      "—",
+      "Red dot on the bell."
+    ],
+    [
+      "accent",
+      "string",
+      "theme accent",
+      "Chart, quick action and refresh colour."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Root style."
+    ]
+  ],
+  "examples": []
+}

package/registry/_docs/date-picker.json

@@ -0,0 +1,249 @@
+{
+  "name": "date-picker",
+  "category": "Inputs",
+  "aliases": [],
+  "exportName": "DatePicker",
+  "files": [
+    "src/components/ui/date-picker.tsx"
+  ],
+  "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)."
+    ]
+  ],
+  "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"
+    }
+  ]
+}