@expokit/cli 0.0.0-stage → 0.3.0

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

@@ -0,0 +1,109 @@
+{
+  "name": "checkbox",
+  "category": "Selection",
+  "aliases": [],
+  "exportName": "Checkbox",
+  "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",
+      "boolean",
+      "—",
+      "Controlled state (or use defaultChecked)."
+    ],
+    [
+      "defaultChecked",
+      "boolean",
+      "false",
+      "Initial state when uncontrolled."
+    ],
+    [
+      "label",
+      "string",
+      "—",
+      "Text next to the box."
+    ],
+    [
+      "description",
+      "string",
+      "—",
+      "Secondary line."
+    ],
+    [
+      "strike",
+      "boolean",
+      "false",
+      "Strike the label through when checked."
+    ],
+    [
+      "shape",
+      "\"square\" | \"circle\"",
+      "\"square\"",
+      "Rounded square (corner = size / 3.4) or full circle."
+    ],
+    [
+      "size",
+      "number",
+      "24",
+      "Box width and height in points; the tick is 80% of it."
+    ],
+    [
+      "accent",
+      "string",
+      "theme accent",
+      "Checked colour."
+    ],
+    [
+      "disabled",
+      "boolean",
+      "false",
+      "Dims to 50% and blocks presses."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "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",
+      "title": "Default",
+      "code": "import { Checkbox } from '@/components/ui/checkbox';\n\nexport default function Default() {\n  return <Checkbox label=\"Accept terms and conditions\" defaultChecked />;\n}\n"
+    },
+    {
+      "name": "WithDescription",
+      "title": "With Description",
+      "code": "import { Checkbox } from '@/components/ui/checkbox';\n\nexport default function WithDescription() {\n  return (\n    <Checkbox\n      label=\"Marketing emails\"\n      description=\"Product news and offers, about once a month.\"\n    />\n  );\n}\n"
+    },
+    {
+      "name": "TodoList",
+      "title": "Todo List",
+      "code": "import { View } from 'react-native';\nimport { Checkbox } from '@/components/ui/checkbox';\n\nexport default function TodoList() {\n  return (\n    <View style={{ gap: 16 }}>\n      <Checkbox shape=\"circle\" strike label=\"Design the onboarding flow\" defaultChecked />\n      <Checkbox shape=\"circle\" strike label=\"Ship floating inputs\" />\n      <Checkbox shape=\"circle\" strike label=\"Write the docs\" />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Colors",
+      "title": "Colors",
+      "code": "import { View } from 'react-native';\nimport { Checkbox } from '@/components/ui/checkbox';\n\nexport default function Colors() {\n  return (\n    <View style={{ flexDirection: 'row', gap: 18 }}>\n      {['#6366f1', '#10b981', '#f59e0b', '#ef4444', '#ec4899'].map((c) => (\n        <Checkbox key={c} accent={c} defaultChecked size={28} />\n      ))}\n    </View>\n  );\n}\n"
+    }
+  ]
+}

package/registry/_docs/checkout.json

@@ -0,0 +1,105 @@
+{
+  "name": "checkout",
+  "category": "Blocks",
+  "aliases": [],
+  "exportName": "Checkout",
+  "files": [
+    "src/components/blocks/checkout.tsx"
+  ],
+  "summary": null,
+  "props": [
+    [
+      "items",
+      "{ id, name, variant?, price, quantity, image? }[]",
+      "3 sample products",
+      "Initial bag. Quantities and removals are kept in state."
+    ],
+    [
+      "onItemsChange",
+      "(items) => void",
+      "—",
+      "Quantity changed or an item was removed."
+    ],
+    [
+      "shippingOptions",
+      "{ value, label, description?, price, icon? }[]",
+      "Standard / Express",
+      "Delivery cards. price 0 shows 'Free'; icon is 'standard' | 'express' | 'pickup'."
+    ],
+    [
+      "defaultShipping",
+      "string",
+      "first option",
+      "Initially selected delivery option."
+    ],
+    [
+      "paymentMethod",
+      "{ brand, last4, expiry? }",
+      "Visa •••• 4242",
+      "Card shown in the Payment row."
+    ],
+    [
+      "onChangePayment",
+      "() => void",
+      "—",
+      "Shows a Change link on the payment row."
+    ],
+    [
+      "onApplyPromo",
+      "(code) => number | null | Promise<…>",
+      "—",
+      "Return the discount fraction (0.1 = 10%) or null. Omit to hide the promo row."
+    ],
+    [
+      "taxRate",
+      "number",
+      "0.08",
+      "Tax on the discounted subtotal."
+    ],
+    [
+      "onPay",
+      "(summary) => void | Promise",
+      "—",
+      "Slider completed. Resolve to show the order-placed screen; reject to slide back."
+    ],
+    [
+      "orderNumber",
+      "string",
+      "'EK-48213'",
+      "Shown on the success screen."
+    ],
+    [
+      "onBack / onDone",
+      "() => void",
+      "—",
+      "Header back button / success and empty-bag buttons."
+    ],
+    [
+      "currency",
+      "string",
+      "'₹'",
+      "Symbol placed before amounts by the default formatter (Indian digit grouping, decimals only when non-zero)."
+    ],
+    [
+      "formatPrice",
+      "(amount) => string",
+      "'₹1,23,456'",
+      "Money formatter. Overrides currency — use for Intl, other grouping or suffix symbols like '12,50 €'."
+    ],
+    [
+      "accent",
+      "string",
+      "theme accent",
+      "Selection, steppers and the pay slider."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Root style."
+    ]
+  ],
+  "behavior": [],
+  "usage": null,
+  "examples": []
+}

package/registry/_docs/chip-group.json

@@ -0,0 +1,132 @@
+{
+  "name": "chip-group",
+  "category": "Selection",
+  "aliases": [],
+  "exportName": "ChipGroup",
+  "files": [
+    "src/components/ui/chip-group.tsx"
+  ],
+  "summary": "Filter chips that widen to make room as a check mark draws itself in.",
+  "props": [
+    [
+      "options",
+      "(string | { value, label?, icon?, count?, disabled? })[]",
+      "—",
+      "Plain strings or objects with label, icon, count and per-chip disabled."
+    ],
+    [
+      "multiple",
+      "boolean",
+      "false",
+      "Allow several selected chips."
+    ],
+    [
+      "value / onValueChange",
+      "string[]",
+      "—",
+      "Controlled selection (or use defaultValue). Single mode reports [] or [value]."
+    ],
+    [
+      "defaultValue",
+      "string[]",
+      "[]",
+      "Initial selection when uncontrolled."
+    ],
+    [
+      "deselectable",
+      "boolean",
+      "true",
+      "Single mode: tapping the selected chip clears it."
+    ],
+    [
+      "variant",
+      "\"solid\" | \"outline\" | \"soft\"",
+      "\"solid\"",
+      "Selected look: filled accent, accent border with a faint tint, or soft accent tint."
+    ],
+    [
+      "size",
+      "\"sm\" | \"md\" | \"lg\"",
+      "\"md\"",
+      "30 / 36 / 42pt tall."
+    ],
+    [
+      "scrollable",
+      "boolean",
+      "false",
+      "One horizontally scrolling row instead of wrapping."
+    ],
+    [
+      "contentInset",
+      "number",
+      "0",
+      "Scroll-row edge padding that bleeds into your screen gutter."
+    ],
+    [
+      "showCheck",
+      "boolean",
+      "true",
+      "Morph a check in front of the label when selected."
+    ],
+    [
+      "accent",
+      "string",
+      "theme accent",
+      "Selected colour."
+    ],
+    [
+      "disabled",
+      "boolean",
+      "false",
+      "Dims every chip and blocks presses (or set disabled per option)."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "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",
+      "title": "Solid",
+      "code": "import { ChipGroup } from '@/components/ui/chip-group';\n\nexport default function Solid() {\n  return (\n    <ChipGroup\n      multiple\n      defaultValue={['Vegan', 'Gluten-free']}\n      options={['Vegan', 'Vegetarian', 'Gluten-free', 'Dairy-free', 'Nut-free', 'Halal']}\n    />\n  );\n}\n"
+    },
+    {
+      "name": "Outline",
+      "title": "Outline",
+      "code": "import { ChipGroup } from '@/components/ui/chip-group';\n\nexport default function Outline() {\n  return (\n    <ChipGroup\n      variant=\"outline\"\n      defaultValue={['Remote']}\n      options={['Remote', 'Hybrid', 'On-site']}\n    />\n  );\n}\n"
+    },
+    {
+      "name": "Soft",
+      "title": "Soft",
+      "code": "import { ChipGroup } from '@/components/ui/chip-group';\n\nexport default function Soft() {\n  return (\n    <ChipGroup\n      variant=\"soft\"\n      multiple\n      defaultValue={['open']}\n      options={[\n        { value: 'open', label: 'Open', count: 24 },\n        { value: 'review', label: 'In review', count: 7 },\n        { value: 'merged', label: 'Merged', count: 112 },\n        { value: 'closed', label: 'Closed', count: 3 },\n      ]}\n    />\n  );\n}\n"
+    },
+    {
+      "name": "Scrollable",
+      "title": "Scrollable",
+      "code": "import React, { useState } from 'react';\nimport { Text, View } from 'react-native';\nimport { ChipGroup } from '@/components/ui/chip-group';\n\nexport default function Scrollable() {\n  const [picked, setPicked] = useState<string[]>(['all']);\n  return (\n    <ChipGroup\n      scrollable\n      deselectable={false}\n      value={picked}\n      onValueChange={setPicked}\n      options={[\n        { value: 'all', label: 'All' },\n        { value: 'coffee', label: 'Coffee', icon: <Text>☕️</Text> },\n        { value: 'bakery', label: 'Bakery', icon: <Text>🥐</Text> },\n        { value: 'brunch', label: 'Brunch', icon: <Text>🍳</Text> },\n        { value: 'pizza', label: 'Pizza', icon: <Text>🍕</Text> },\n        { value: 'sushi', label: 'Sushi', icon: <Text>🍣</Text> },\n      ]}\n    />\n  );\n}\n"
+    },
+    {
+      "name": "Sizes",
+      "title": "Sizes",
+      "code": "import { Text, View } from 'react-native';\nimport { ChipGroup } from '@/components/ui/chip-group';\n\nexport default function Sizes() {\n  return (\n    <View style={{ gap: 12 }}>\n      <ChipGroup size=\"sm\" multiple defaultValue={['S']} options={['XS', 'S', 'M', 'L']} />\n      <ChipGroup size=\"md\" multiple defaultValue={['M']} options={['XS', 'S', 'M', 'L']} />\n      <ChipGroup size=\"lg\" multiple defaultValue={['L']} options={['XS', 'S', 'M', 'L']} />\n    </View>\n  );\n}\n"
+    }
+  ]
+}

package/registry/_docs/color-swatch.json

@@ -0,0 +1,82 @@
+{
+  "name": "color-swatch",
+  "category": "Selection",
+  "aliases": [],
+  "exportName": "ColorSwatch",
+  "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",
+      "(string | { color, label? })[]",
+      "10-colour palette",
+      "Your swatches (hex)."
+    ],
+    [
+      "value / onValueChange",
+      "string",
+      "—",
+      "Controlled selection (or use defaultValue)."
+    ],
+    [
+      "defaultValue",
+      "string",
+      "—",
+      "Initial selection when uncontrolled."
+    ],
+    [
+      "variant",
+      "\"circle\" | \"square\" | \"pill\"",
+      "\"circle\"",
+      "Swatch shape."
+    ],
+    [
+      "size",
+      "\"sm\" | \"md\" | \"lg\"",
+      "\"md\"",
+      "28 / 36 / 44pt swatches."
+    ],
+    [
+      "scrollable",
+      "boolean",
+      "false",
+      "One horizontally scrolling row instead of a wrapping grid."
+    ],
+    [
+      "showLabels",
+      "boolean",
+      "false",
+      "Colour names under each swatch."
+    ],
+    [
+      "disabled",
+      "boolean",
+      "false",
+      "Dims and blocks presses."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "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": []
+}