@expokit/cli 0.0.0-stage → 0.3.0

package/registry/_docs/textarea.json

@@ -0,0 +1,191 @@
+{
+  "name": "textarea",
+  "category": "Inputs",
+  "aliases": [],
+  "exportName": "Textarea",
+  "files": [
+    "src/components/ui/textarea.tsx"
+  ],
+  "summary": "A multiline field that glides taller line by line, with a ring-style counter.",
+  "props": [
+    [
+      "label",
+      "string",
+      "—",
+      "Rests on the first line, floats onto the border on focus."
+    ],
+    [
+      "floatingLabel",
+      "boolean",
+      "true",
+      "Set to false to put the label above the field as static text (no notch); placeholder shows inside."
+    ],
+    [
+      "variant",
+      "\"outlined\" | \"filled\"",
+      "\"outlined\"",
+      "Field style."
+    ],
+    [
+      "size",
+      "\"sm\" | \"md\" | \"lg\"",
+      "\"md\"",
+      "14 / 16 / 18px text; line height and padding scale too."
+    ],
+    [
+      "minRows / maxRows",
+      "number",
+      "3 / 8",
+      "Grows smoothly between these, then scrolls."
+    ],
+    [
+      "maxLength",
+      "number",
+      "—",
+      "Character limit; enables the counter."
+    ],
+    [
+      "enforceMaxLength",
+      "boolean",
+      "true",
+      "false makes the limit soft: typing past it turns the counter red and negative."
+    ],
+    [
+      "showCount",
+      "boolean",
+      "true when maxLength",
+      "Counter that becomes a ring in the last 20%."
+    ],
+    [
+      "toolbar",
+      "ReactNode",
+      "—",
+      "Row inside the bottom edge — attach, emoji, send."
+    ],
+    [
+      "error",
+      "string",
+      "—",
+      "Red state, icon + message that slides in, one shake."
+    ],
+    [
+      "success",
+      "boolean | string",
+      "—",
+      "Green border + animated check; a string is shown as the message."
+    ],
+    [
+      "helper",
+      "string",
+      "—",
+      "Hint under the field."
+    ],
+    [
+      "accent",
+      "string",
+      "theme accent",
+      "Focus border and halo colour."
+    ],
+    [
+      "surface",
+      "string",
+      "theme background",
+      "Colour behind the field (paints the label notch)."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the outer wrapper around the field and footer (the one that shakes)."
+    ],
+    [
+      "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). height is ignored: the box grows with minRows / maxRows."
+    ],
+    [
+      "inputStyle",
+      "StyleProp<TextStyle>",
+      "—",
+      "The typed text — fontSize, lineHeight, fontWeight, color, fontFamily. Row height follows lineHeight (or scales with fontSize)."
+    ],
+    [
+      "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."
+    ],
+    [
+      "counterStyle",
+      "StyleProp<TextStyle>",
+      "—",
+      "Counter text (42/280 and the characters-left number); warning / danger still win near the limit."
+    ],
+    [
+      "placeholderTextColor",
+      "string",
+      "theme mutedForeground",
+      "Placeholder colour."
+    ],
+    [
+      "…TextInputProps",
+      "",
+      "",
+      "value, defaultValue, onChangeText, placeholder, …"
+    ]
+  ],
+  "behavior": [
+    [
+      "Motion",
+      "The box grows smoothly between minRows and maxRows as you type; the label floats up on focus and a halo glows around the field."
+    ],
+    [
+      "Screen readers",
+      "The input is labelled by label or placeholder; the counter reads like '42 of 200 characters left' and error / success messages land in a polite live region."
+    ],
+    [
+      "Web",
+      "The browser focus outline is removed; the field draws its own focus halo."
+    ]
+  ],
+  "usage": "import { useState } from 'react';\nimport { Textarea } from '@/components/ui/textarea';\n\nconst [review, setReview] = useState('');\n<Textarea label=\"Your review\" value={review} onChangeText={setReview} maxLength={200} />",
+  "examples": [
+    {
+      "name": "Composer",
+      "title": "Composer",
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View } from 'react-native';\nimport { Textarea } from '@/components/ui/textarea';\nimport { useKit } from '@/lib/kit';\n\nfunction ToolButton({ glyph, label }: { glyph: string; label: string }) {\n  const { colors } = useKit();\n  return (\n    <Pressable\n      accessibilityRole=\"button\"\n      accessibilityLabel={label}\n      hitSlop={6}\n      style={{ width: 32, height: 32, borderRadius: 16, alignItems: 'center', justifyContent: 'center', backgroundColor: colors.muted }}\n    >\n      <Text style={{ fontSize: 17, fontWeight: '400', color: colors.mutedForeground }}>{glyph}</Text>\n    </Pressable>\n  );\n}\n\nexport default function Composer() {\n  const { colors, radius } = useKit();\n  const [draft, setDraft] = useState('');\n  const [sent, setSent] = useState<string[]>(['Are we still on for the design review at 3?']);\n  const canSend = draft.trim().length > 0;\n  const send = () => {\n    if (!canSend) return;\n    setSent((s) => [...s.slice(-1), draft.trim()]);\n    setDraft('');\n  };\n  return (\n    <View style={{ gap: 10 }}>\n      {sent.map((m, i) => (\n        <View\n          key={i}\n          style={{ alignSelf: 'flex-end', maxWidth: '80%', backgroundColor: colors.accent, borderRadius: radius.scale(18), paddingHorizontal: 14, paddingVertical: 9 }}\n        >\n          <Text style={{ color: colors.accentForeground, fontSize: 15 }}>{m}</Text>\n        </View>\n      ))}\n      <Textarea\n        placeholder=\"Message Alex…\"\n        value={draft}\n        onChangeText={setDraft}\n        minRows={1}\n        maxRows={5}\n        toolbar={\n          <>\n            <ToolButton glyph=\"+\" label=\"Attach a file\" />\n            <ToolButton glyph=\"@\" label=\"Mention someone\" />\n            <View style={{ flex: 1 }} />\n            <Pressable\n              onPress={send}\n              disabled={!canSend}\n              accessibilityRole=\"button\"\n              accessibilityLabel=\"Send message\"\n              hitSlop={6}\n              style={{\n                height: 32,\n                paddingHorizontal: 14,\n                borderRadius: radius.capsule(32),\n                alignItems: 'center',\n                justifyContent: 'center',\n                backgroundColor: colors.accent,\n                opacity: canSend ? 1 : 0.4,\n              }}\n            >\n              <Text style={{ color: colors.accentForeground, fontSize: 14, fontWeight: '400' }}>Send ↑</Text>\n            </Pressable>\n          </>\n        }\n      />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Review",
+      "title": "Review",
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View } from 'react-native';\nimport { Textarea } from '@/components/ui/textarea';\nimport { useKit } from '@/lib/kit';\n\nfunction Card({ title, subtitle, children }: { title: string; subtitle?: string; children: React.ReactNode }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={{\n        padding: 16,\n        gap: 12,\n        borderRadius: radius.xl,\n        borderWidth: StyleSheet.hairlineWidth,\n        borderColor: colors.border,\n        backgroundColor: colors.card,\n      }}\n    >\n      <View style={{ gap: 2, marginBottom: 2 }}>\n        <Text style={{ fontSize: 16, fontWeight: '400', color: colors.foreground }}>{title}</Text>\n        {subtitle ? <Text style={{ fontSize: 13, color: colors.mutedForeground }}>{subtitle}</Text> : null}\n      </View>\n      {children}\n    </View>\n  );\n}\n\nexport default function Review() {\n  const [review, setReview] = useState('Great coffee, but');\n  const length = review.trim().length;\n  return (\n    <Card title=\"Rate Blue Bottle, Hayes Valley\" subtitle=\"Reviews are public and show your first name.\">\n      <Textarea\n        label=\"Your review\"\n        value={review}\n        onChangeText={setReview}\n        maxLength={200}\n        enforceMaxLength={false}\n        minRows={3}\n        error={length > 0 && length < 20 ? 'Tell us a little more — at least 20 characters' : length > 200 ? 'Keep it under 200 characters' : undefined}\n        success={length >= 20 && length <= 200 ? 'Thanks — that will really help others' : undefined}\n      />\n    </Card>\n  );\n}\n"
+    },
+    {
+      "name": "Feedback",
+      "title": "Feedback",
+      "code": "import React, { useState } from 'react';\nimport { Pressable, StyleSheet, Text, View } from 'react-native';\nimport { Textarea } from '@/components/ui/textarea';\nimport { useKit } from '@/lib/kit';\n\nfunction Card({ title, subtitle, children }: { title: string; subtitle?: string; children: React.ReactNode }) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={{\n        padding: 16,\n        gap: 12,\n        borderRadius: radius.xl,\n        borderWidth: StyleSheet.hairlineWidth,\n        borderColor: colors.border,\n        backgroundColor: colors.card,\n      }}\n    >\n      <View style={{ gap: 2, marginBottom: 2 }}>\n        <Text style={{ fontSize: 16, fontWeight: '400', color: colors.foreground }}>{title}</Text>\n        {subtitle ? <Text style={{ fontSize: 13, color: colors.mutedForeground }}>{subtitle}</Text> : null}\n      </View>\n      {children}\n    </View>\n  );\n}\n\nexport default function Feedback() {\n  return (\n    <Card title=\"Send feedback\" subtitle=\"Goes straight to the product team.\">\n      <Textarea\n        variant=\"filled\"\n        label=\"What could be better?\"\n        defaultValue=\"Dark mode on the invoices page is a little too low-contrast for me.\"\n        helper=\"Screenshots help — attach them in the next step.\"\n        minRows={3}\n        maxRows={6}\n      />\n    </Card>\n  );\n}\n"
+    },
+    {
+      "name": "CharacterLimit",
+      "title": "Character Limit",
+      "code": "import { Textarea } from '@/components/ui/textarea';\n\nexport default function CharacterLimit() {\n  return (\n    <Textarea\n      label=\"What's happening?\"\n      maxLength={140}\n      defaultValue=\"Shipping the new ExpoKit inputs today — focus halos, animated checks and fields that glide taller as you type.\"\n      minRows={3}\n    />\n  );\n}\n"
+    },
+    {
+      "name": "States",
+      "title": "States",
+      "code": "import { Pressable, StyleSheet, Text, View } from 'react-native';\nimport { Textarea } from '@/components/ui/textarea';\n\nexport default function States() {\n  return (\n    <View style={{ gap: 16 }}>\n      <Textarea label=\"Delivery instructions\" minRows={2} defaultValue=\"Leave it with the concierge, code 4417.\" success=\"Saved for next time\" />\n      <Textarea label=\"Notes for the courier\" minRows={2} editable={false} defaultValue=\"Locked while the order is out for delivery.\" />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Sizes",
+      "title": "Sizes",
+      "code": "import { Pressable, StyleSheet, Text, View } from 'react-native';\nimport { Textarea } from '@/components/ui/textarea';\n\nexport default function Sizes() {\n  return (\n    <View style={{ gap: 14 }}>\n      <Textarea size=\"sm\" label=\"Small · 14px\" minRows={1} defaultValue=\"Compact comment box\" />\n      <Textarea size=\"md\" label=\"Medium · 16px\" minRows={1} defaultValue=\"The default for forms\" />\n      <Textarea size=\"lg\" label=\"Large · 18px\" minRows={1} defaultValue=\"Journaling and long-form\" />\n    </View>\n  );\n}\n"
+    }
+  ]
+}

package/registry/_docs/ticket-card.json

@@ -0,0 +1,194 @@
+{
+  "name": "ticket-card",
+  "category": "3D",
+  "aliases": [],
+  "exportName": "TicketCard",
+  "files": [
+    "src/components/ui/ticket-card.tsx"
+  ],
+  "summary": "A boarding pass or event ticket with real notches and a stub you can tear off.",
+  "props": [
+    [
+      "brand / logo",
+      "string / ReactNode",
+      "—",
+      "Operator, venue or brand (and its logo), top-left."
+    ],
+    [
+      "badge",
+      "string",
+      "—",
+      "Chip top-right (\"VIP\", \"Business\") — on holographic foil when holo."
+    ],
+    [
+      "eyebrow",
+      "string",
+      "—",
+      "Small line above the title or route (\"Boarding pass · TP 1043\")."
+    ],
+    [
+      "title / subtitle",
+      "string",
+      "—",
+      "Event name and details (omit for a route pass)."
+    ],
+    [
+      "from / to",
+      "{ code: string; detail?: string }",
+      "—",
+      "Route endpoints; a dashed flight path runs between them."
+    ],
+    [
+      "duration",
+      "string",
+      "—",
+      "Under the flight path (\"7h 25m\")."
+    ],
+    [
+      "transport",
+      "\"flight\" | \"train\" | \"bus\" | \"boat\"",
+      "\"flight\"",
+      "Icon riding the flight path."
+    ],
+    [
+      "fields",
+      "{ label: string; value: string; span?: number }[]",
+      "[]",
+      "Details grid that wraps onto more rows; span widens a field."
+    ],
+    [
+      "columns",
+      "number",
+      "up to 4",
+      "Columns in the details grid."
+    ],
+    [
+      "code",
+      "string",
+      "—",
+      "Printed in the stub and shown big on the back. Omit for a ticket without a stub."
+    ],
+    [
+      "codeType",
+      "\"qr\" | \"barcode\"",
+      "\"qr\"",
+      "Look-alike code style — use renderCode for a scannable one."
+    ],
+    [
+      "renderCode",
+      "(code: string, size: number) => ReactNode",
+      "—",
+      "Draw a real code (e.g. react-native-qrcode-svg)."
+    ],
+    [
+      "notes",
+      "string | string[]",
+      "—",
+      "Lines on the back: terms, baggage, gate notes."
+    ],
+    [
+      "image",
+      "ImageSourcePropType",
+      "—",
+      "Header photo (vertical) or full-bleed art (horizontal)."
+    ],
+    [
+      "layout",
+      "\"vertical\" | \"horizontal\"",
+      "\"vertical\"",
+      "Pass with the stub below, or admit-one ticket with the stub on the right."
+    ],
+    [
+      "theme",
+      "\"midnight\" | \"paper\" | \"aurora\" | \"sunset\" | \"neon\" | \"royal\" | \"mint\" | TicketTheme",
+      "\"midnight\"",
+      "Preset, or { fill, stub?, ink, soft?, accent, pattern? } — fill can be a gradient."
+    ],
+    [
+      "tone",
+      "\"dark\" | \"light\"",
+      "—",
+      "Shorthand for theme: midnight / paper."
+    ],
+    [
+      "accent",
+      "string",
+      "theme accent",
+      "Route line, badge and stamp colour."
+    ],
+    [
+      "holo",
+      "boolean",
+      "false",
+      "Rainbow foil glare and a holographic badge."
+    ],
+    [
+      "stamp / stampColor",
+      "string / string",
+      "— / accent",
+      "Rubber stamp across the ticket (\"CHECKED IN\"); thumps in when set."
+    ],
+    [
+      "onTear",
+      "() => void",
+      "—",
+      "Enables swiping the stub off along the tear line; called once it's gone."
+    ],
+    [
+      "torn",
+      "boolean",
+      "—",
+      "Controlled torn state (the stub is gone, the torn edge stays)."
+    ],
+    [
+      "flipped / defaultFlipped / onFlip",
+      "boolean / boolean / (flipped) => void",
+      "— / false / —",
+      "Controlled or uncontrolled side (tap to flip)."
+    ],
+    [
+      "tilt",
+      "boolean",
+      "true",
+      "Tilt toward the finger; false for long lists."
+    ],
+    [
+      "radius",
+      "number",
+      "22",
+      "Corner radius."
+    ],
+    [
+      "labels",
+      "{ scan?, admit?, tear?, back? }",
+      "English",
+      "Every built-in string, for translation."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the root (width, margins)."
+    ]
+  ],
+  "behavior": [
+    [
+      "Touch",
+      "The card tilts toward your finger (tilt={false} turns it off). Tap to flip it to the big code and notes; with onTear set, swipe the stub sideways to tear it off."
+    ],
+    [
+      "Motion",
+      "A holo badge shimmers as the card leans, a stamp thumps down when set, and a torn stub falls away along the tear line."
+    ],
+    [
+      "Haptics",
+      "A success notification when the stub tears off."
+    ],
+    [
+      "Screen readers",
+      "One element whose label joins the brand, title or route, every field and the stamp; it is a button when there is a back to flip to."
+    ]
+  ],
+  "usage": null,
+  "examples": []
+}

package/registry/_docs/ticket-shape.json

@@ -0,0 +1,14 @@
+{
+  "name": "ticket-shape",
+  "category": null,
+  "aliases": [],
+  "exportName": "TicketStamp",
+  "files": [
+    "src/lib/ticket-shape.tsx"
+  ],
+  "summary": null,
+  "props": [],
+  "behavior": [],
+  "usage": null,
+  "examples": []
+}

package/registry/_docs/tilt-card.json

@@ -0,0 +1,157 @@
+{
+  "name": "tilt-card",
+  "category": "3D",
+  "aliases": [],
+  "exportName": "TiltCard",
+  "files": [
+    "src/components/ui/tilt-card.tsx"
+  ],
+  "summary": "A card that leans toward your finger in 3D while a glare slides across it.",
+  "props": [
+    [
+      "children",
+      "ReactNode",
+      "—",
+      "Content (sets the card's size). Wrap parts in <TiltLayer depth> to float them."
+    ],
+    [
+      "image",
+      "ImageSourcePropType",
+      "—",
+      "Photo that fills the card behind the content."
+    ],
+    [
+      "shade",
+      "number",
+      "0.6",
+      "Darkens the bottom of the photo so white text stays readable (0–1)."
+    ],
+    [
+      "maxTilt",
+      "number",
+      "12",
+      "Tilt in degrees at the card's edge."
+    ],
+    [
+      "pressScale",
+      "number",
+      "1.03",
+      "Scale while touched."
+    ],
+    [
+      "glare",
+      "\"soft\" | \"sharp\" | \"holo\" | \"none\"",
+      "\"soft\"",
+      "Light reflection that follows your finger. \"holo\" adds a rainbow foil sheen that shifts as the card leans."
+    ],
+    [
+      "glareClip",
+      "{ x, y, width, height }[]",
+      "whole card",
+      "Where the reflection may fall (card points) — for cards with cut-outs, so light never shows over a hole."
+    ],
+    [
+      "perspective",
+      "number",
+      "800",
+      "Depth of the effect — smaller is more dramatic."
+    ],
+    [
+      "idle",
+      "boolean",
+      "false",
+      "Slowly sway while untouched."
+    ],
+    [
+      "radius",
+      "number",
+      "20",
+      "Corner radius."
+    ],
+    [
+      "shadow",
+      "boolean",
+      "true",
+      "Soft shadow under the card that shifts as it tilts."
+    ],
+    [
+      "disabled",
+      "boolean",
+      "false",
+      "Turn touch tilting off."
+    ],
+    [
+      "onPress",
+      "() => void",
+      "—",
+      "Fires on a tap (not after a drag)."
+    ],
+    [
+      "accessibilityLabel",
+      "string",
+      "—",
+      "Label for screen readers."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the card (width, margins)."
+    ],
+    [
+      "TiltLayer.depth",
+      "number",
+      "0.5",
+      "How far a layer floats above the card (negative sinks below)."
+    ],
+    [
+      "TiltFoil",
+      "{ children?, radius?, base?, style? }",
+      "—",
+      "A holographic foil patch (seal, sticker, strip) whose rainbow shifts as the card leans."
+    ],
+    [
+      "useTilt()",
+      "() => { tx, ty, press, width, height } | null",
+      "—",
+      "The card's live tilt values (native-driver friendly) for your own effects."
+    ]
+  ],
+  "behavior": [
+    [
+      "Touch",
+      "Press and drag to tilt up to maxTilt degrees; the card scales by pressScale and springs flat on release. onPress fires on a tap, not after a drag."
+    ],
+    [
+      "Motion",
+      "The shadow slides away from the light and the glare (soft, sharp or holo) glides across. TiltLayer children float at their own depth, and idle makes it sway gently at rest."
+    ],
+    [
+      "Screen readers",
+      "Exposed as one element when it has onPress or accessibilityLabel; with onPress it is a button with an 'activate' action."
+    ]
+  ],
+  "usage": "import { TiltCard, TiltLayer } from '@/components/ui/tilt-card';\n\n<TiltCard image={{ uri: photoUrl }} idle accessibilityLabel=\"Manarola, Cinque Terre\" style={{ width: 270, height: 360 }}>\n  <TiltLayer depth={1}>\n    <PlaceCaption place={place} />\n  </TiltLayer>\n</TiltCard>",
+  "examples": [
+    {
+      "name": "TravelCard",
+      "title": "Travel Card",
+      "code": "import React, { useState } from 'react';\nimport { Image, Pressable, Text, View } from 'react-native';\nimport { TiltCard, TiltLayer } from '@/components/ui/tilt-card';\nimport { alpha, useKit } from '@/lib/kit';\n\n/** Any photo works (`require()` or a URL). `blur` gives soft, abstract art. */\nconst photo = (id: number, w: number, h: number, blur = false) => ({ uri: `https://picsum.photos/id/${id}/${w}/${h}${blur ? '?blur=10' : ''}` });\n\n/** A screen title, as it sits above the card in your app. */\nfunction Header({ title, sub, right }: { title: string; sub?: string; right?: React.ReactNode }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>\n      <View style={{ flex: 1 }}>\n        <Text style={{ color: colors.foreground, fontSize: 22, fontWeight: '700', letterSpacing: -0.4 }}>{title}</Text>\n        {sub ? <Text style={{ color: colors.mutedForeground, fontSize: 13, marginTop: 2 }}>{sub}</Text> : null}\n      </View>\n      {right}\n    </View>\n  );\n}\n\nconst glass = {\n  paddingHorizontal: 10,\n  paddingVertical: 5,\n  borderRadius: 999,\n  backgroundColor: 'rgba(255,255,255,0.18)',\n  borderWidth: 1,\n  borderColor: 'rgba(255,255,255,0.32)',\n} as const;\n\nexport default function TravelCard() {\n  const { colors } = useKit();\n  const [tab, setTab] = useState('Coast');\n  return (\n    <View style={{ gap: 18 }}>\n      <Header title=\"Explore\" sub=\"Stays our guests loved this month\" />\n      <View style={{ flexDirection: 'row', gap: 8 }}>\n        {['Coast', 'Mountains', 'Cities', 'Lakes'].map((t) => {\n          const on = t === tab;\n          return (\n            <Pressable\n              key={t}\n              onPress={() => setTab(t)}\n              accessibilityRole=\"tab\"\n              accessibilityState={{ selected: on }}\n              style={{ paddingHorizontal: 14, paddingVertical: 8, borderRadius: 999, backgroundColor: on ? colors.foreground : colors.muted }}\n            >\n              <Text style={{ color: on ? colors.background : colors.foreground, fontSize: 13, fontWeight: '600' }}>{t}</Text>\n            </Pressable>\n          );\n        })}\n      </View>\n      <TiltCard idle image={photo(397, 540, 720)} radius={26} accessibilityLabel=\"Manarola, Cinque Terre\" style={{ width: 270, alignSelf: 'center' }}>\n      <View style={{ height: 360 }} />\n      <TiltLayer depth={1.2}>\n        <View style={[glass, { position: 'absolute', top: 16, right: 16 }]}>\n          <Text style={{ color: '#fff', fontSize: 12, fontWeight: '700' }}>★ 4.9</Text>\n        </View>\n      </TiltLayer>\n      <TiltLayer depth={0.8}>\n        <View style={{ position: 'absolute', left: 20, right: 20, bottom: 20, gap: 2 }}>\n          <Text style={{ color: 'rgba(255,255,255,0.8)', fontSize: 12, fontWeight: '600', letterSpacing: 1 }}>CINQUE TERRE · ITALY</Text>\n          <Text style={{ color: '#fff', fontSize: 30, fontWeight: '800', letterSpacing: -0.8 }}>Manarola</Text>\n          <Text style={{ color: 'rgba(255,255,255,0.8)', fontSize: 13 }}>3 nights · from €140</Text>\n        </View>\n      </TiltLayer>\n      </TiltCard>\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "NowPlaying",
+      "title": "Now Playing",
+      "code": "import React, { useState } from 'react';\nimport { Image, Pressable, Text, View } from 'react-native';\nimport { TiltCard, TiltLayer } from '@/components/ui/tilt-card';\nimport { alpha, useKit } from '@/lib/kit';\n\n/** Any photo works (`require()` or a URL). `blur` gives soft, abstract art. */\nconst photo = (id: number, w: number, h: number, blur = false) => ({ uri: `https://picsum.photos/id/${id}/${w}/${h}${blur ? '?blur=10' : ''}` });\n\nexport default function NowPlaying() {\n  const { colors } = useKit();\n  const [playing, setPlaying] = useState(true);\n  return (\n    <View style={{ alignItems: 'center', gap: 18 }}>\n      <View style={{ alignSelf: 'stretch', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 6 }}>\n        <Text style={{ color: colors.foreground, fontSize: 20 }}>⌄</Text>\n        <View style={{ alignItems: 'center' }}>\n          <Text style={{ color: colors.mutedForeground, fontSize: 11, fontWeight: '700', letterSpacing: 1 }}>PLAYING FROM</Text>\n          <Text style={{ color: colors.foreground, fontSize: 13, fontWeight: '600' }}>Late night drive</Text>\n        </View>\n        <Text style={{ color: colors.foreground, fontSize: 20 }}>⋯</Text>\n      </View>\n      <TiltCard idle image={photo(888, 300, 300, true)} shade={0.35} radius={20} accessibilityLabel=\"Midnight Bloom by Lumen\" style={{ width: 250 }}>\n        <View style={{ height: 250 }} />\n        <TiltLayer depth={1}>\n          <View style={{ position: 'absolute', left: 18, bottom: 16 }}>\n            <Text style={{ color: '#fff', fontSize: 30, fontWeight: '900', letterSpacing: -1, lineHeight: 30 }}>MIDNIGHT</Text>\n            <Text style={{ color: '#fff', fontSize: 30, fontWeight: '300', letterSpacing: -1, lineHeight: 32 }}>bloom</Text>\n          </View>\n        </TiltLayer>\n      </TiltCard>\n      <View style={{ alignSelf: 'stretch', gap: 10 }}>\n        <View>\n          <Text style={{ color: colors.foreground, fontSize: 18, fontWeight: '700' }}>Midnight Bloom</Text>\n          <Text style={{ color: colors.mutedForeground, fontSize: 14 }}>Lumen</Text>\n        </View>\n        <View style={{ height: 4, borderRadius: 2, backgroundColor: alpha(colors.mutedForeground, 0.25) }}>\n          <View style={{ width: '42%', height: 4, borderRadius: 2, backgroundColor: colors.foreground }} />\n        </View>\n        <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: -4 }}>\n          <Text style={{ color: colors.mutedForeground, fontSize: 11, fontVariant: ['tabular-nums'] }}>1:42</Text>\n          <Text style={{ color: colors.mutedForeground, fontSize: 11, fontVariant: ['tabular-nums'] }}>−2:21</Text>\n        </View>\n        <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', gap: 34 }}>\n          <Text style={{ color: colors.foreground, fontSize: 22 }}>⏮</Text>\n          <Pressable\n            onPress={() => setPlaying((p) => !p)}\n            accessibilityRole=\"button\"\n            accessibilityLabel={playing ? 'Pause' : 'Play'}\n            style={{ width: 58, height: 58, borderRadius: 29, backgroundColor: colors.foreground, alignItems: 'center', justifyContent: 'center' }}\n          >\n            <Text style={{ color: colors.background, fontSize: 20 }}>{playing ? '❚❚' : '▶'}</Text>\n          </Pressable>\n          <Text style={{ color: colors.foreground, fontSize: 22 }}>⏭</Text>\n        </View>\n      </View>\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Product",
+      "title": "Product",
+      "code": "import React, { useState } from 'react';\nimport { Image, Pressable, Text, View } from 'react-native';\nimport { TiltCard, TiltLayer } from '@/components/ui/tilt-card';\nimport { alpha, useKit } from '@/lib/kit';\n\n/** Any photo works (`require()` or a URL). `blur` gives soft, abstract art. */\nconst photo = (id: number, w: number, h: number, blur = false) => ({ uri: `https://picsum.photos/id/${id}/${w}/${h}${blur ? '?blur=10' : ''}` });\n\n/** A screen title, as it sits above the card in your app. */\nfunction Header({ title, sub, right }: { title: string; sub?: string; right?: React.ReactNode }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>\n      <View style={{ flex: 1 }}>\n        <Text style={{ color: colors.foreground, fontSize: 22, fontWeight: '700', letterSpacing: -0.4 }}>{title}</Text>\n        {sub ? <Text style={{ color: colors.mutedForeground, fontSize: 13, marginTop: 2 }}>{sub}</Text> : null}\n      </View>\n      {right}\n    </View>\n  );\n}\n\nexport default function Product() {\n  const { colors } = useKit();\n  return (\n    <View style={{ gap: 18 }}>\n      <Header\n        title=\"New in\"\n        sub=\"Film cameras, serviced and tested\"\n        right={\n          <View style={{ paddingHorizontal: 12, paddingVertical: 7, borderRadius: 999, backgroundColor: colors.muted }}>\n            <Text style={{ color: colors.foreground, fontSize: 13, fontWeight: '600' }}>Bag · 2</Text>\n          </View>\n        }\n      />\n      <TiltCard maxTilt={14} radius={26} accessibilityLabel=\"Leica M6 film camera\" style={{ width: 280, alignSelf: 'center' }}>\n      <View style={{ height: 360, backgroundColor: '#efece6' }} />\n      <TiltLayer depth={1.4}>\n        <View style={{ position: 'absolute', top: 26, left: 22, right: 22, height: 190, borderRadius: 18, overflow: 'hidden' }}>\n          <Image alt=\"\" source={photo(250, 560, 380)} style={{ flex: 1 }} />\n        </View>\n      </TiltLayer>\n      <TiltLayer depth={0.4}>\n        <View style={{ position: 'absolute', left: 24, right: 24, bottom: 22, gap: 12 }}>\n          <View>\n            <Text style={{ color: '#8a8378', fontSize: 11, fontWeight: '700', letterSpacing: 1.2 }}>FILM CAMERA</Text>\n            <Text style={{ color: '#1b1915', fontSize: 22, fontWeight: '800', letterSpacing: -0.4 }}>Rangefinder 35</Text>\n          </View>\n          <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>\n            <Text style={{ color: '#1b1915', fontSize: 20, fontWeight: '700' }}>$1,290</Text>\n            <View style={{ paddingHorizontal: 16, paddingVertical: 10, borderRadius: 999, backgroundColor: '#1b1915' }}>\n              <Text style={{ color: '#fff', fontSize: 13, fontWeight: '700' }}>Add to bag</Text>\n            </View>\n          </View>\n        </View>\n      </TiltLayer>\n      </TiltCard>\n      <Text style={{ color: colors.mutedForeground, fontSize: 13, textAlign: 'center' }}>Free shipping · 2-year warranty</Text>\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "FeedCard",
+      "title": "Feed Card",
+      "code": "import React, { useState } from 'react';\nimport { Image, Pressable, Text, View } from 'react-native';\nimport { TiltCard, TiltLayer } from '@/components/ui/tilt-card';\nimport { alpha, useKit } from '@/lib/kit';\n\n/** Any photo works (`require()` or a URL). `blur` gives soft, abstract art. */\nconst photo = (id: number, w: number, h: number, blur = false) => ({ uri: `https://picsum.photos/id/${id}/${w}/${h}${blur ? '?blur=10' : ''}` });\n\n/** A screen title, as it sits above the card in your app. */\nfunction Header({ title, sub, right }: { title: string; sub?: string; right?: React.ReactNode }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>\n      <View style={{ flex: 1 }}>\n        <Text style={{ color: colors.foreground, fontSize: 22, fontWeight: '700', letterSpacing: -0.4 }}>{title}</Text>\n        {sub ? <Text style={{ color: colors.mutedForeground, fontSize: 13, marginTop: 2 }}>{sub}</Text> : null}\n      </View>\n      {right}\n    </View>\n  );\n}\n\nexport default function FeedCard() {\n  const { colors } = useKit();\n  return (\n    <View style={{ gap: 16 }}>\n      <Header title=\"For you\" sub=\"Picked from places you saved\" />\n      <TiltCard maxTilt={5} pressScale={1.015} glare=\"soft\" radius={20} onPress={() => {}} accessibilityLabel=\"Read: A fairytale weekend in Bavaria\" style={{ alignSelf: 'stretch' }}>\n      <View style={{ backgroundColor: colors.card }}>\n        <Image alt=\"\" source={photo(1040, 720, 360)} style={{ height: 170 }} />\n        <View style={{ padding: 16, gap: 4 }}>\n          <Text style={{ color: colors.mutedForeground, fontSize: 11, fontWeight: '700', letterSpacing: 1 }}>TRAVEL · 6 MIN READ</Text>\n          <Text style={{ color: colors.foreground, fontSize: 18, fontWeight: '700', letterSpacing: -0.3 }}>A fairytale weekend in Bavaria</Text>\n          <Text style={{ color: colors.mutedForeground, fontSize: 13, lineHeight: 19 }}>Castles, lakes and the best pretzels we had all year.</Text>\n        </View>\n      </View>\n      </TiltCard>\n      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12, padding: 10, borderRadius: 16, backgroundColor: colors.card }}>\n        <Image alt=\"\" source={photo(419, 160, 160)} style={{ width: 56, height: 56, borderRadius: 12, backgroundColor: colors.muted }} />\n        <View style={{ flex: 1 }}>\n          <Text style={{ color: colors.mutedForeground, fontSize: 11, fontWeight: '700', letterSpacing: 1 }}>UP NEXT · 4 MIN READ</Text>\n          <Text style={{ color: colors.foreground, fontSize: 15, fontWeight: '600' }}>Lisbon by tram, end to end</Text>\n        </View>\n      </View>\n    </View>\n  );\n}\n"
+    }
+  ]
+}