@expokit/cli 0.2.0 → 0.3.0

package/registry/_docs/bottom-sheet.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/bottom-sheet.tsx"
   ],
+  "summary": "A draggable sheet with snap points whose grabber stretches as you pull it.",
   "props": [
     [
       "open",
@@ -128,6 +129,33 @@
       "Sheet and content styles."
     ]
   ],
+  "behavior": [
+    [
+      "Touch",
+      "Drag the grabber or header between snap points; release velocity picks the detent and dragging past the limits rubber-bands. Tap the scrim or drag down to close."
+    ],
+    [
+      "Motion",
+      "Glides between detents on a firm spring while the scrim dims with its height. The keyboard lifts the sheet when avoidKeyboard is on."
+    ],
+    [
+      "Reduced motion",
+      "Snapping uses a short timing instead of a spring."
+    ],
+    [
+      "Haptics",
+      "A light impact on open and a selection tick on each snap. Turn off with haptics={false}."
+    ],
+    [
+      "Screen readers",
+      "The sheet is a modal view. The grabber is adjustable with increment and decrement actions to change snap point, and the title is a header."
+    ],
+    [
+      "Keyboard",
+      "Escape closes it on web when dismissible; the Android back button closes it too."
+    ]
+  ],
+  "usage": "import { useState } from 'react';\nimport { BottomSheet } from '@/components/ui/bottom-sheet';\n\nconst [open, setOpen] = useState(false);\n<BottomSheet\n  open={open}\n  onClose={() => setOpen(false)}\n  snapPoints={['40%', '85%']}\n  title=\"Share album\"\n/>",
   "examples": [
     {
       "name": "Basic",

package/registry/_docs/bullet.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/charts/bullet.tsx"
   ],
+  "summary": null,
   "props": [
     [
       "data",
@@ -20,5 +21,7 @@
       "Sizing."
     ]
   ],
+  "behavior": [],
+  "usage": null,
   "examples": []
 }

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

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/button-3d.tsx"
   ],
+  "summary": "A keycap-style button whose lit face sinks into its edge when pressed.",
   "props": [
     [
       "children",
@@ -92,6 +93,21 @@
       "Style for the root (width, margins)."
     ]
   ],
+  "behavior": [
+    [
+      "Touch",
+      "The face sinks into its edge on press-in and springs back on release. Small sizes pad their hit area to 44pt."
+    ],
+    [
+      "Haptics",
+      "A light impact on press-in on iOS and on press on Android, so scrolling past it doesn't buzz. Turn off with haptics={false}."
+    ],
+    [
+      "Screen readers",
+      "A button with disabled and busy state. Pass accessibilityLabel for circle keys that show only a glyph."
+    ]
+  ],
+  "usage": "import { Button3D } from '@/components/ui/button-3d';\n\n<Button3D size=\"lg\" shape=\"pill\" onPress={startTrip}>\n  Start the trip\n</Button3D>",
   "examples": [
     {
       "name": "OnPhoto",

package/registry/_docs/button.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/button.tsx"
   ],
+  "summary": "A button that springs down on press, in eleven variants including gradient and glow.",
   "props": [
     [
       "variant",
@@ -80,6 +81,21 @@
       "onPress, disabled, …"
     ]
   ],
+  "behavior": [
+    [
+      "Touch",
+      "Scales down with a spring on press-in and bounces back on release. loading swaps the label for a spinner and blocks presses."
+    ],
+    [
+      "Haptics",
+      "Opt-in light impact on press with haptics; off by default."
+    ],
+    [
+      "Screen readers",
+      "A button with disabled and busy state."
+    ]
+  ],
+  "usage": "import { Button } from '@/components/ui/button';\n\n<Button variant=\"accent\" size=\"lg\" block onPress={checkout}>\n  Continue to payment\n</Button>",
   "examples": [
     {
       "name": "Variants",

package/registry/_docs/calendar.json

@@ -6,6 +6,7 @@
   "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",
@@ -152,6 +153,21 @@
       "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",

package/registry/_docs/card-stack.json

@@ -6,6 +6,7 @@
   "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",
@@ -104,5 +105,20 @@
       "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

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/card.tsx"
   ],
+  "summary": "A composable card that springs down on press, with a spotlight that follows your finger.",
   "props": [
     [
       "variant",
@@ -86,6 +87,25 @@
       "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",

package/registry/_docs/carousel.json

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

package/registry/_docs/chat.json

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

package/registry/_docs/checkbox.json

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

package/registry/_docs/checkout.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/blocks/checkout.tsx"
   ],
+  "summary": null,
   "props": [
     [
       "items",
@@ -98,5 +99,7 @@
       "Root style."
     ]
   ],
+  "behavior": [],
+  "usage": null,
   "examples": []
 }

package/registry/_docs/chip-group.json

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

package/registry/_docs/color-swatch.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/color-swatch.tsx"
   ],
+  "summary": "A colour picker where the chosen swatch settles in as a ring springs out around it.",
   "props": [
     [
       "colors",
@@ -62,5 +63,20 @@
       "Style for the wrapping grid (the ScrollView when scrollable)."
     ]
   ],
+  "behavior": [
+    [
+      "Touch",
+      "Tap a swatch to choose it. Each swatch's hit area is padded out to 44pt."
+    ],
+    [
+      "Motion",
+      "The chosen swatch settles inward while a ring and check spring out. The check uses whichever ink reads best on that colour."
+    ],
+    [
+      "Screen readers",
+      "A radiogroup labelled \"Colour\" by default; each swatch is a radio named by its label or hex value."
+    ]
+  ],
+  "usage": null,
   "examples": []
 }

package/registry/_docs/confetti.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/confetti.tsx"
   ],
+  "summary": "Confetti that flies on real arcs with gravity and drag, then flutters as it falls.",
   "props": [
     [
       "count",
@@ -62,6 +63,25 @@
       "The overlay never takes touches."
     ]
   ],
+  "behavior": [
+    [
+      "Motion",
+      "Each burst launches pieces with velocity, gravity and air drag, all moved by one native-driven animation. Bursts can overlap."
+    ],
+    [
+      "Touch",
+      "The overlay fills its parent and never takes touches."
+    ],
+    [
+      "Reduced motion",
+      "Bursts launch a quarter of the pieces."
+    ],
+    [
+      "Screen readers",
+      "The overlay is hidden from assistive tech."
+    ]
+  ],
+  "usage": "import { useState } from 'react';\nimport { Confetti } from '@/components/ui/confetti';\n\nconst [orders, setOrders] = useState(0);\n<Confetti trigger={orders} origin=\"bottom\" />",
   "examples": [
     {
       "name": "Celebrate",

package/registry/_docs/coupon.json

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

package/registry/_docs/cube-pager.json

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

package/registry/_docs/dashboard.json

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

package/registry/_docs/date-picker.json

@@ -6,6 +6,7 @@
   "files": [
     "src/components/ui/date-picker.tsx"
   ],
+  "summary": "A floating-label date field that opens the calendar in a draggable spring sheet.",
   "props": [
     [
       "label",
@@ -224,6 +225,25 @@
       "Sheet / dialog / popover panel — background, border, radius, padding, shadow (transform and opacity are animated)."
     ]
   ],
+  "behavior": [
+    [
+      "Touch",
+      "Tap the field to open the picker. In a sheet, drag the grabber header down (or flick it) to dismiss."
+    ],
+    [
+      "Motion",
+      "The label floats onto the border and a focus halo springs in while open. An error shakes the field once and its message springs in below."
+    ],
+    [
+      "Screen readers",
+      "The field is a button labelled with your label, with the date (or \"Not set\") as its value and an expanded state. Helper, error and success messages are polite live regions."
+    ],
+    [
+      "Platforms",
+      "With presentation 'auto' it opens a bottom sheet on phones and a centred dialog from 640pt wide."
+    ]
+  ],
+  "usage": "import { useState } from 'react';\nimport { DatePicker } from '@/components/ui/date-picker';\n\nconst [date, setDate] = useState<Date | null>(null);\n<DatePicker label=\"Date of birth\" value={date} onChange={setDate} maxDate={new Date()} />",
   "examples": [
     {
       "name": "Birthday",