@expokit/cli 0.0.0-stage → 0.2.0

package/registry/_docs/card.json

@@ -0,0 +1,111 @@
+{
+  "name": "card",
+  "category": "Display",
+  "aliases": [],
+  "exportName": "Card",
+  "files": [
+    "src/components/ui/card.tsx"
+  ],
+  "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)."
+    ]
+  ],
+  "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,102 @@
+{
+  "name": "carousel",
+  "category": "Display",
+  "aliases": [],
+  "exportName": "Carousel",
+  "files": [
+    "src/components/ui/carousel.tsx"
+  ],
+  "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."
+    ]
+  ],
+  "examples": []
+}

package/registry/_docs/checkbox.json

@@ -0,0 +1,93 @@
+{
+  "name": "checkbox",
+  "category": "Selection",
+  "aliases": [],
+  "exportName": "Checkbox",
+  "files": [
+    "src/components/ui/checkbox.tsx"
+  ],
+  "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."
+    ]
+  ],
+  "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,102 @@
+{
+  "name": "checkout",
+  "category": "Blocks",
+  "aliases": [],
+  "exportName": "Checkout",
+  "files": [
+    "src/components/blocks/checkout.tsx"
+  ],
+  "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."
+    ]
+  ],
+  "examples": []
+}

package/registry/_docs/chip-group.json

@@ -0,0 +1,116 @@
+{
+  "name": "chip-group",
+  "category": "Selection",
+  "aliases": [],
+  "exportName": "ChipGroup",
+  "files": [
+    "src/components/ui/chip-group.tsx"
+  ],
+  "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)."
+    ]
+  ],
+  "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,66 @@
+{
+  "name": "color-swatch",
+  "category": "Selection",
+  "aliases": [],
+  "exportName": "ColorSwatch",
+  "files": [
+    "src/components/ui/color-swatch.tsx"
+  ],
+  "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)."
+    ]
+  ],
+  "examples": []
+}

package/registry/_docs/confetti.json

@@ -0,0 +1,82 @@
+{
+  "name": "confetti",
+  "category": "Coupons",
+  "aliases": [],
+  "exportName": "Confetti",
+  "files": [
+    "src/components/ui/confetti.tsx"
+  ],
+  "props": [
+    [
+      "count",
+      "number",
+      "80",
+      "Pieces per burst (max 160)."
+    ],
+    [
+      "colors",
+      "string[]",
+      "vivid mix",
+      "Piece colours."
+    ],
+    [
+      "origin",
+      "\"top\" | \"center\" | \"bottom\"",
+      "\"bottom\"",
+      "Rain from the top, pop outward, or two cannons from the bottom corners."
+    ],
+    [
+      "duration",
+      "number",
+      "2600",
+      "How long a burst lasts, in ms."
+    ],
+    [
+      "trigger",
+      "unknown",
+      "—",
+      "Fire a burst whenever this value changes — no ref needed."
+    ],
+    [
+      "autoplay",
+      "boolean",
+      "false",
+      "Fire once on mount."
+    ],
+    [
+      "onDone",
+      "() => void",
+      "—",
+      "A burst finished."
+    ],
+    [
+      "ref.burst(options?)",
+      "{ origin?, x?, y?, count?, colors? }",
+      "—",
+      "Fire a burst (they can overlap); x / y place a center burst."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "fills its parent",
+      "The overlay never takes touches."
+    ]
+  ],
+  "examples": [
+    {
+      "name": "Celebrate",
+      "title": "Celebrate",
+      "code": "import React, { useRef, useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { Confetti, type ConfettiHandle } from '@/components/ui/confetti';\nimport { useKit } from '@/lib/kit';\n\nexport default function Celebrate() {\n  const { colors, radius } = useKit();\n  const confetti = useRef<ConfettiHandle>(null);\n  return (\n    <View style={{ height: 420, borderRadius: radius.xl, backgroundColor: colors.muted, overflow: 'hidden', alignItems: 'center', justifyContent: 'center', gap: 10, padding: 24 }}>\n      <Text style={{ fontSize: 44 }}>🎉</Text>\n      <Text style={{ color: colors.foreground, fontSize: 24, fontWeight: '800', letterSpacing: -0.5 }}>Order placed!</Text>\n      <Text style={{ color: colors.mutedForeground, fontSize: 14, textAlign: 'center' }}>You saved ₹240 with coupon GLOW50. Arriving Thursday.</Text>\n      <Pressable\n        onPress={() => confetti.current?.burst()}\n        accessibilityRole=\"button\"\n        style={{ marginTop: 12, paddingHorizontal: 22, paddingVertical: 13, borderRadius: 999, backgroundColor: colors.primary }}\n      >\n        <Text style={{ color: colors.primaryForeground, fontSize: 15, fontWeight: '700' }}>Celebrate again</Text>\n      </Pressable>\n      <Confetti ref={confetti} autoplay />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Rain",
+      "title": "Rain",
+      "code": "import React, { useRef, useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { Confetti, type ConfettiHandle } from '@/components/ui/confetti';\nimport { useKit } from '@/lib/kit';\n\nexport default function Rain() {\n  const { colors, radius } = useKit();\n  const [shower, setShower] = useState(0);\n  return (\n    <View style={{ height: 360, borderRadius: radius.xl, backgroundColor: colors.muted, overflow: 'hidden', alignItems: 'center', justifyContent: 'center' }}>\n      <Pressable onPress={() => setShower((n) => n + 1)} accessibilityRole=\"button\" style={{ paddingHorizontal: 22, paddingVertical: 13, borderRadius: 999, borderWidth: 1.5, borderColor: colors.foreground }}>\n        <Text style={{ color: colors.foreground, fontSize: 15, fontWeight: '700' }}>Make it rain</Text>\n      </Pressable>\n      <Confetti origin=\"top\" count={120} trigger={shower} colors={['#ffd23f', '#ffb000', '#fff3b0', '#ffffff']} />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "TapToPop",
+      "title": "Tap To Pop",
+      "code": "import React, { useRef, useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { Confetti, type ConfettiHandle } from '@/components/ui/confetti';\nimport { useKit } from '@/lib/kit';\n\nexport default function TapToPop() {\n  const { colors, radius } = useKit();\n  const confetti = useRef<ConfettiHandle>(null);\n  return (\n    <Pressable\n      onPress={(e) => confetti.current?.burst({ origin: 'center', x: e.nativeEvent.locationX, y: e.nativeEvent.locationY, count: 50 })}\n      accessibilityRole=\"button\"\n      accessibilityLabel=\"Tap to pop confetti\"\n      style={{ height: 360, borderRadius: radius.xl, backgroundColor: colors.muted, overflow: 'hidden', alignItems: 'center', justifyContent: 'center' }}\n    >\n      {/* Not touchable, so locationX/Y are always relative to the panel. */}\n      <View pointerEvents=\"none\">\n        <Text style={{ color: colors.mutedForeground, fontSize: 15, fontWeight: '600' }}>Tap anywhere</Text>\n      </View>\n      <Confetti ref={confetti} />\n    </Pressable>\n  );\n}\n"
+    }
+  ]
+}