@expokit/cli 0.0.0-stage → 0.2.0

package/registry/_docs/tabs.json

@@ -0,0 +1,105 @@
+{
+  "name": "tabs",
+  "category": "Navigation",
+  "aliases": [],
+  "exportName": "Tabs",
+  "files": [
+    "src/components/ui/tabs.tsx"
+  ],
+  "props": [
+    [
+      "items",
+      "{ value, label, icon?, badge?, content?, disabled?, accessibilityLabel? }[]",
+      "—",
+      "Tabs and (optionally) their content panes. `icon` is a node or `({ active, color }) => node`."
+    ],
+    [
+      "value / defaultValue",
+      "string",
+      "first enabled tab",
+      "Active tab (controlled / uncontrolled)."
+    ],
+    [
+      "onValueChange",
+      "(value: string) => void",
+      "—",
+      "Called when a tab is pressed or swiped to."
+    ],
+    [
+      "size",
+      "\"sm\" | \"md\"",
+      "\"md\"",
+      "36 / 44pt tall (sm keeps a 44pt hit area)."
+    ],
+    [
+      "scrollable",
+      "boolean",
+      "auto",
+      "`true` sizes tabs to labels and scrolls; `false` gives equal widths. Default fills the width and scrolls only when tabs overflow, keeping the active tab centred."
+    ],
+    [
+      "swipeable",
+      "boolean",
+      "true",
+      "Drag the content sideways to change tab; the underline tracks the drag."
+    ],
+    [
+      "transition",
+      "\"slide\" | \"fade\" | \"none\"",
+      "\"slide\"",
+      "How content changes on a tap."
+    ],
+    [
+      "haptics",
+      "boolean",
+      "true",
+      "Selection tick on change."
+    ],
+    [
+      "accent",
+      "string",
+      "theme accent",
+      "Underline and active badge colour."
+    ],
+    [
+      "variant",
+      "\"underline\"",
+      "\"underline\"",
+      "Deprecated: `pill` and `soft` render as `underline` — use SegmentedControl for a pill switch."
+    ],
+    [
+      "contentStyle",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style of each content pane."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the root view wrapping the tab bar and content."
+    ]
+  ],
+  "examples": [
+    {
+      "name": "Underline",
+      "title": "Underline",
+      "code": "import { Pressable, Text, View } from 'react-native';\nimport { Tabs } from '@/components/ui/tabs';\nimport { alpha, useKit } from '@/lib/kit';\n\nfunction Panel({ title, body }: { title: string; body: string }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ gap: 4 }}>\n      <Text style={{ fontSize: 16, fontWeight: '400', color: colors.foreground }}>{title}</Text>\n      <Text style={{ fontSize: 14, fontWeight: '400', lineHeight: 20, color: colors.mutedForeground }}>{body}</Text>\n    </View>\n  );\n}\n\nexport default function Underline() {\n  return (\n    <Tabs\n      items={[\n        { value: 'overview', label: 'Overview', content: <Panel title=\"Revenue up 12%\" body=\"Annual plans drove most of the growth this week. Churn held at 1.8%.\" /> },\n        { value: 'activity', label: 'Activity', badge: 3, content: <Panel title=\"3 new comments\" body=\"Priya and Leo left notes on the Q4 roadmap since yesterday.\" /> },\n        { value: 'settings', label: 'Settings', content: <Panel title=\"Project settings\" body=\"Notifications, members and integrations for Mobile app 2.0.\" /> },\n      ]}\n    />\n  );\n}\n"
+    },
+    {
+      "name": "Profile",
+      "title": "Profile",
+      "code": "import { Pressable, Text, View } from 'react-native';\nimport { Tabs } from '@/components/ui/tabs';\nimport { alpha, useKit } from '@/lib/kit';\n\ntype Post = [who: string, text: string, meta: string];\n\nfunction Feed({ posts }: { posts: Post[] }) {\n  const { colors, radius, dark } = useKit();\n  return (\n    <View style={{ gap: 14 }}>\n      {posts.map(([who, text, meta]) => (\n        <View key={text} style={{ flexDirection: 'row', gap: 10 }}>\n          <View\n            style={{\n              width: 34,\n              height: 34,\n              borderRadius: radius.capsule(34),\n              backgroundColor: alpha(colors.accent, dark ? 0.22 : 0.12),\n              alignItems: 'center',\n              justifyContent: 'center',\n            }}\n          >\n            <Text style={{ fontSize: 13, fontWeight: '400', color: colors.accent }}>{who.slice(0, 1)}</Text>\n          </View>\n          <View style={{ flex: 1, gap: 2 }}>\n            <Text style={{ fontSize: 13, fontWeight: '400', color: colors.mutedForeground }}>\n              <Text style={{ color: colors.foreground }}>{who}</Text> · {meta}\n            </Text>\n            <Text style={{ fontSize: 14.5, fontWeight: '400', lineHeight: 20, color: colors.foreground }}>{text}</Text>\n          </View>\n        </View>\n      ))}\n    </View>\n  );\n}\n\nfunction Grid() {\n  const { colors, radius, dark } = useKit();\n  const tones = [0.1, 0.18, 0.26, 0.14, 0.22, 0.3];\n  return (\n    <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 6 }}>\n      {tones.map((a, i) => (\n        <View\n          key={i}\n          style={{ width: '32%', aspectRatio: 1, borderRadius: radius.scale(10), backgroundColor: alpha(colors.accent, dark ? a + 0.08 : a) }}\n        />\n      ))}\n    </View>\n  );\n}\n\nexport default function Profile() {\n  return (\n    <Tabs\n      items={[\n        {\n          value: 'posts',\n          label: 'Posts',\n          badge: 128,\n          content: (\n            <Feed\n              posts={[\n                ['Maya Chen', 'Shipped the new onboarding today. Three screens instead of seven, and it finally feels calm.', '2h'],\n                ['Maya Chen', 'Hot take: every tab bar needs a haptic tick.', '1d'],\n              ]}\n            />\n          ),\n        },\n        {\n          value: 'replies',\n          label: 'Replies',\n          content: <Feed posts={[['Maya Chen', 'Agreed, the spring on that indicator is perfect. Ship it.', '5h']]} />,\n        },\n        { value: 'media', label: 'Media', badge: 24, content: <Grid /> },\n        {\n          value: 'likes',\n          label: 'Likes',\n          content: (\n            <Feed\n              posts={[\n                ['Leo Park', 'Offsite is booked: June 12–14 in Lisbon. Bring sunscreen.', '3h'],\n                ['Ana Ruiz', 'Pricing page v3 is live. Conversion up 0.6 points so far.', '1d'],\n              ]}\n            />\n          ),\n        },\n      ]}\n    />\n  );\n}\n"
+    },
+    {
+      "name": "Scrollable",
+      "title": "Scrollable",
+      "code": "import { Pressable, Text, View } from 'react-native';\nimport { Tabs } from '@/components/ui/tabs';\nimport { alpha, useKit } from '@/lib/kit';\n\nfunction Panel({ title, body }: { title: string; body: string }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ gap: 4 }}>\n      <Text style={{ fontSize: 16, fontWeight: '400', color: colors.foreground }}>{title}</Text>\n      <Text style={{ fontSize: 14, fontWeight: '400', lineHeight: 20, color: colors.mutedForeground }}>{body}</Text>\n    </View>\n  );\n}\n\nexport default function Scrollable() {\n  const categories = ['For you', 'Trending', 'Design', 'Engineering', 'Product', 'Marketing', 'Finance', 'Remote'];\n  return (\n    <Tabs\n      items={categories.map((c, i) => ({\n        value: c,\n        label: c,\n        badge: i === 1 ? 'New' : undefined,\n        content: <Panel title={c} body={`Hand-picked ${c.toLowerCase()} stories from people you follow, updated every hour.`} />,\n      }))}\n    />\n  );\n}\n"
+    },
+    {
+      "name": "WithIcons",
+      "title": "With Icons",
+      "code": "import React, { useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { BottomNavIcon } from '@/components/ui/bottom-nav';\nimport { Tabs } from '@/components/ui/tabs';\nimport { alpha, useKit } from '@/lib/kit';\n\nfunction Panel({ title, body }: { title: string; body: string }) {\n  const { colors } = useKit();\n  return (\n    <View style={{ gap: 4 }}>\n      <Text style={{ fontSize: 16, fontWeight: '400', color: colors.foreground }}>{title}</Text>\n      <Text style={{ fontSize: 14, fontWeight: '400', lineHeight: 20, color: colors.mutedForeground }}>{body}</Text>\n    </View>\n  );\n}\n\ntype Post = [who: string, text: string, meta: string];\n\nfunction Feed({ posts }: { posts: Post[] }) {\n  const { colors, radius, dark } = useKit();\n  return (\n    <View style={{ gap: 14 }}>\n      {posts.map(([who, text, meta]) => (\n        <View key={text} style={{ flexDirection: 'row', gap: 10 }}>\n          <View\n            style={{\n              width: 34,\n              height: 34,\n              borderRadius: radius.capsule(34),\n              backgroundColor: alpha(colors.accent, dark ? 0.22 : 0.12),\n              alignItems: 'center',\n              justifyContent: 'center',\n            }}\n          >\n            <Text style={{ fontSize: 13, fontWeight: '400', color: colors.accent }}>{who.slice(0, 1)}</Text>\n          </View>\n          <View style={{ flex: 1, gap: 2 }}>\n            <Text style={{ fontSize: 13, fontWeight: '400', color: colors.mutedForeground }}>\n              <Text style={{ color: colors.foreground }}>{who}</Text> · {meta}\n            </Text>\n            <Text style={{ fontSize: 14.5, fontWeight: '400', lineHeight: 20, color: colors.foreground }}>{text}</Text>\n          </View>\n        </View>\n      ))}\n    </View>\n  );\n}\n\nexport default function WithIcons() {\n  const { colors } = useKit();\n  const [unread, setUnread] = useState(4);\n  const [mentions, setMentions] = useState(2);\n  const clear = (\n    <Pressable\n      accessibilityRole=\"button\"\n      onPress={() => {\n        setUnread(0);\n        setMentions(0);\n      }}\n      hitSlop={10}\n      style={{ alignSelf: 'flex-start', marginTop: 12 }}\n    >\n      <Text style={{ fontSize: 14, fontWeight: '400', color: colors.accent }}>Mark all as read</Text>\n    </Pressable>\n  );\n  return (\n    <Tabs\n      size=\"sm\"\n      items={[\n        {\n          value: 'inbox',\n          label: 'Inbox',\n          icon: ({ active, color }) => <BottomNavIcon name=\"inbox\" color={color} size={17} active={active} />,\n          badge: unread || undefined,\n          content: (\n            <View>\n              <Feed posts={[['Priya Nair', 'Can you review the pricing page before 3pm?', '9:41']]} />\n              {clear}\n            </View>\n          ),\n        },\n        {\n          value: 'mentions',\n          label: 'Mentions',\n          icon: ({ active, color }) => <BottomNavIcon name=\"message\" color={color} size={17} active={active} />,\n          badge: mentions || undefined,\n          content: <Feed posts={[['Leo Park', '@karan the offsite deck is ready for a look.', '9:12']]} />,\n        },\n        { value: 'activity', label: 'Activity', icon: ({ active, color }) => <BottomNavIcon name=\"activity\" color={color} size={17} active={active} />, content: <Panel title=\"All quiet\" body=\"Nothing new since you last checked.\" /> },\n      ]}\n    />\n  );\n}\n"
+    }
+  ]
+}

package/registry/_docs/tag-input.json

@@ -0,0 +1,128 @@
+{
+  "name": "tag-input",
+  "category": "Inputs",
+  "aliases": [],
+  "exportName": "TagInput",
+  "files": [
+    "src/components/ui/tag-input.tsx"
+  ],
+  "props": [
+    [
+      "value / defaultValue",
+      "string[]",
+      "[]",
+      "Controlled or uncontrolled tags."
+    ],
+    [
+      "onChange",
+      "(tags) => void",
+      "—",
+      "Called when a tag is added or removed (the removed chip then shrinks out)."
+    ],
+    [
+      "variant",
+      "\"outlined\" | \"filled\"",
+      "\"outlined\"",
+      "Field style."
+    ],
+    [
+      "chipVariant",
+      "\"soft\" | \"solid\" | \"outline\"",
+      "\"soft\"",
+      "Tinted accent chips, filled accent chips, or bordered chips with an accent dot."
+    ],
+    [
+      "colorize",
+      "boolean",
+      "false",
+      "Tint each chip from a hash of its label."
+    ],
+    [
+      "prefix",
+      "string",
+      "—",
+      "Shown before every chip label (e.g. \"#\"); typed copies are stripped."
+    ],
+    [
+      "transform",
+      "(tag) => string",
+      "—",
+      "Normalise a tag before validation (lowercase, strip spaces…)."
+    ],
+    [
+      "maxTags",
+      "number",
+      "—",
+      "Limit; shows a filling ring and \"3/5\" counter, and locks the input when reached."
+    ],
+    [
+      "suggestions",
+      "string[]",
+      "—",
+      "Pills under the empty field; while typing, a list with the match highlighted and an \"Add …\" row."
+    ],
+    [
+      "separators",
+      "string[]",
+      "[\",\"]",
+      "Characters that commit a tag (Enter always does)."
+    ],
+    [
+      "validate",
+      "(tag, tags) => boolean | string",
+      "—",
+      "Reject a tag (the field shakes); return a string to show it as the error."
+    ],
+    [
+      "error / helper",
+      "string",
+      "—",
+      "Message under the field; errors shake once."
+    ],
+    [
+      "accent",
+      "string",
+      "theme accent",
+      "Focus and chip colour."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the outer wrapper around the field, suggestions and message (the one that shakes)."
+    ],
+    [
+      "…TextInputProps",
+      "",
+      "",
+      "placeholder, keyboardType, …"
+    ]
+  ],
+  "examples": [
+    {
+      "name": "Skills",
+      "title": "Skills",
+      "code": "import React, { useState } from 'react';\nimport { StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { TagInput } from '@/components/ui/tag-input';\nimport { useKit } from '@/lib/kit';\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        s.card,\n        { borderRadius: radius.xl, borderColor: colors.border, backgroundColor: colors.card },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\n/** Text in the kit's ink: `tone=\"muted\"` for secondary copy. */\nfunction Ink({ tone, style, ...rest }: TextProps & { tone?: 'muted' }) {\n  const { colors } = useKit();\n  return <Text style={[{ color: tone === 'muted' ? colors.mutedForeground : colors.foreground }, style]} {...rest} />;\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  title: { fontSize: 15, fontWeight: '400' },\n  label: { fontSize: 12, fontWeight: '400', letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: -6 },\n});\n\nexport default function Skills() {\n  return (\n    <Card>\n      <Ink style={s.title}>Your skills</Ink>\n      <TagInput\n        placeholder=\"Add a skill…\"\n        defaultValue={['TypeScript', 'React Native']}\n        suggestions={['React', 'Swift', 'SwiftUI', 'Kotlin', 'GraphQL', 'Figma', 'Node.js', 'Rust', 'PostgreSQL']}\n        helper=\"Type to search, or tap a suggestion.\"\n      />\n    </Card>\n  );\n}\n"
+    },
+    {
+      "name": "InviteByEmail",
+      "title": "Invite By Email",
+      "code": "import React, { useState } from 'react';\nimport { StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { TagInput } from '@/components/ui/tag-input';\nimport { useKit } from '@/lib/kit';\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        s.card,\n        { borderRadius: radius.xl, borderColor: colors.border, backgroundColor: colors.card },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\n/** Text in the kit's ink: `tone=\"muted\"` for secondary copy. */\nfunction Ink({ tone, style, ...rest }: TextProps & { tone?: 'muted' }) {\n  const { colors } = useKit();\n  return <Text style={[{ color: tone === 'muted' ? colors.mutedForeground : colors.foreground }, style]} {...rest} />;\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  title: { fontSize: 15, fontWeight: '400' },\n  label: { fontSize: 12, fontWeight: '400', letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: -6 },\n});\n\nexport default function InviteByEmail() {\n  const [emails, setEmails] = useState(['maya@studio.co', 'leo@studio.co']);\n  return (\n    <Card>\n      <Ink style={s.title}>Invite teammates</Ink>\n      <TagInput\n        value={emails}\n        onChange={setEmails}\n        validate={(tag) => /^[^\\s@]+@[^\\s@]+\\.[^\\s@]{2,}$/.test(tag) || `“${tag}” isn't a valid email address`}\n        transform={(tag) => tag.toLowerCase()}\n        chipVariant=\"outline\"\n        keyboardType=\"email-address\"\n        placeholder=\"name@company.com\"\n        helper=\"Separate addresses with a comma or space.\"\n        separators={[',', ' ']}\n      />\n    </Card>\n  );\n}\n"
+    },
+    {
+      "name": "Topics",
+      "title": "Topics",
+      "code": "import { StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { TagInput } from '@/components/ui/tag-input';\nimport { useKit } from '@/lib/kit';\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        s.card,\n        { borderRadius: radius.xl, borderColor: colors.border, backgroundColor: colors.card },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\n/** Text in the kit's ink: `tone=\"muted\"` for secondary copy. */\nfunction Ink({ tone, style, ...rest }: TextProps & { tone?: 'muted' }) {\n  const { colors } = useKit();\n  return <Text style={[{ color: tone === 'muted' ? colors.mutedForeground : colors.foreground }, style]} {...rest} />;\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  title: { fontSize: 15, fontWeight: '400' },\n  label: { fontSize: 12, fontWeight: '400', letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: -6 },\n});\n\nexport default function Topics() {\n  return (\n    <Card>\n      <Ink style={s.title}>Follow topics</Ink>\n      <TagInput\n        colorize\n        maxTags={5}\n        defaultValue={['Design', 'Climate', 'Startups']}\n        suggestions={['Space', 'AI', 'Music', 'Cooking', 'Photography', 'Travel']}\n        placeholder=\"Add a topic…\"\n        helper=\"Pick up to five for your feed.\"\n      />\n    </Card>\n  );\n}\n"
+    },
+    {
+      "name": "Hashtags",
+      "title": "Hashtags",
+      "code": "import { StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { TagInput } from '@/components/ui/tag-input';\nimport { useKit } from '@/lib/kit';\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        s.card,\n        { borderRadius: radius.xl, borderColor: colors.border, backgroundColor: colors.card },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\n/** Text in the kit's ink: `tone=\"muted\"` for secondary copy. */\nfunction Ink({ tone, style, ...rest }: TextProps & { tone?: 'muted' }) {\n  const { colors } = useKit();\n  return <Text style={[{ color: tone === 'muted' ? colors.mutedForeground : colors.foreground }, style]} {...rest} />;\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  title: { fontSize: 15, fontWeight: '400' },\n  label: { fontSize: 12, fontWeight: '400', letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: -6 },\n});\n\nexport default function Hashtags() {\n  return (\n    <Card>\n      <Ink style={s.title}>New post</Ink>\n      <TagInput\n        variant=\"filled\"\n        chipVariant=\"solid\"\n        prefix=\"#\"\n        transform={(tag) => tag.replace(/\\s+/g, '').toLowerCase()}\n        separators={[',', ' ']}\n        defaultValue={['sunset', 'lisbon']}\n        suggestions={['travel', 'goldenhour', 'streetphotography', 'portugal']}\n        placeholder=\"#hashtag\"\n        helper=\"Backspace once to highlight the last tag, twice to remove it.\"\n      />\n    </Card>\n  );\n}\n"
+    },
+    {
+      "name": "ChipStyles",
+      "title": "Chip Styles",
+      "code": "import { StyleSheet, Text, View, type TextProps, type ViewProps } from 'react-native';\nimport { TagInput } from '@/components/ui/tag-input';\nimport { useKit } from '@/lib/kit';\n\n/** Demo card that follows the kit theme, so the docs radius / accent picker reshapes it too. */\nfunction Card({ style, ...rest }: ViewProps) {\n  const { colors, radius } = useKit();\n  return (\n    <View\n      style={[\n        s.card,\n        { borderRadius: radius.xl, borderColor: colors.border, backgroundColor: colors.card },\n        style,\n      ]}\n      {...rest}\n    />\n  );\n}\n\n/** Text in the kit's ink: `tone=\"muted\"` for secondary copy. */\nfunction Ink({ tone, style, ...rest }: TextProps & { tone?: 'muted' }) {\n  const { colors } = useKit();\n  return <Text style={[{ color: tone === 'muted' ? colors.mutedForeground : colors.foreground }, style]} {...rest} />;\n}\n\nconst s = StyleSheet.create({\n  card: { padding: 16, borderWidth: StyleSheet.hairlineWidth, gap: 12 },\n  title: { fontSize: 15, fontWeight: '400' },\n  label: { fontSize: 12, fontWeight: '400', letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: -6 },\n});\n\nexport default function ChipStyles() {\n  return (\n    <Card>\n      <Ink tone=\"muted\" style={s.label}>Soft</Ink>\n      <TagInput defaultValue={['Vegan', 'Gluten-free']} placeholder=\"Dietary needs\" />\n      <Ink tone=\"muted\" style={s.label}>Solid</Ink>\n      <TagInput chipVariant=\"solid\" defaultValue={['Urgent', 'Bug']} placeholder=\"Labels\" />\n      <Ink tone=\"muted\" style={s.label}>Outline</Ink>\n      <TagInput chipVariant=\"outline\" defaultValue={['Remote', 'Full-time']} placeholder=\"Job filters\" />\n      <Ink tone=\"muted\" style={s.label}>Disabled</Ink>\n      <TagInput editable={false} defaultValue={['Read-only']} />\n    </Card>\n  );\n}\n"
+    }
+  ]
+}

package/registry/_docs/textarea.json

@@ -0,0 +1,175 @@
+{
+  "name": "textarea",
+  "category": "Inputs",
+  "aliases": [],
+  "exportName": "Textarea",
+  "files": [
+    "src/components/ui/textarea.tsx"
+  ],
+  "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, …"
+    ]
+  ],
+  "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,174 @@
+{
+  "name": "ticket-card",
+  "category": "3D",
+  "aliases": [],
+  "exportName": "TicketCard",
+  "files": [
+    "src/components/ui/ticket-card.tsx"
+  ],
+  "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)."
+    ]
+  ],
+  "examples": []
+}

package/registry/_docs/ticket-shape.json

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