@expokit/cli 0.0.0-stage → 0.3.0

package/registry/_docs/tabs.json

@@ -0,0 +1,129 @@
+{
+  "name": "tabs",
+  "category": "Navigation",
+  "aliases": [],
+  "exportName": "Tabs",
+  "files": [
+    "src/components/ui/tabs.tsx"
+  ],
+  "summary": "Underline tabs whose indicator moves like liquid, leading edge first.",
+  "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."
+    ]
+  ],
+  "behavior": [
+    [
+      "Touch",
+      "Tap a tab or drag the content panes sideways; the underline follows your finger, with rubber-band resistance at the ends."
+    ],
+    [
+      "Motion",
+      "The underline is measured to each label and springs with the leading edge first. Badges pop, and an overflowing bar scrolls to centre the active tab."
+    ],
+    [
+      "Reduced motion",
+      "Springs become short timings, the bar scrolls without animating and badges change without the pop."
+    ],
+    [
+      "Haptics",
+      "A selection tick on every change; turn it off with haptics={false}."
+    ],
+    [
+      "Screen readers",
+      "The bar is a tablist of tabs with selected and disabled state; badges are read with the label, and inactive panes are hidden."
+    ]
+  ],
+  "usage": "import { Tabs } from '@/components/ui/tabs';\n\n<Tabs\n  items={[\n    { value: 'overview', label: 'Overview', content: <Overview /> },\n    { value: 'reviews', label: 'Reviews', badge: 128, content: <Reviews /> },\n  ]}\n/>",
+  "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,148 @@
+{
+  "name": "tag-input",
+  "category": "Inputs",
+  "aliases": [],
+  "exportName": "TagInput",
+  "files": [
+    "src/components/ui/tag-input.tsx"
+  ],
+  "summary": "Chips that spring in on Enter or comma and shrink away as neighbours slide over.",
+  "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, …"
+    ]
+  ],
+  "behavior": [
+    [
+      "Keyboard",
+      "Enter or a separator commits the text as a chip. Backspace in an empty field highlights the last chip, and a second press removes it."
+    ],
+    [
+      "Motion",
+      "Chips pop in on a spring and shrink out on removal; duplicates bump and a rejected tag shakes the field."
+    ],
+    [
+      "Screen readers",
+      "Each chip has a 'Remove' button and each suggestion an 'Add' button; error messages land in a polite live region and the counter reads '3 of 5 tags'."
+    ],
+    [
+      "Web",
+      "The browser focus outline on the input is removed; the field draws its own focus state."
+    ]
+  ],
+  "usage": "import { useState } from 'react';\nimport { TagInput } from '@/components/ui/tag-input';\n\nconst [skills, setSkills] = useState(['TypeScript']);\n<TagInput value={skills} onChange={setSkills} placeholder=\"Add a skill…\" suggestions={['React', 'Swift', 'Kotlin']} />",
+  "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/text-animation.json

@@ -0,0 +1,141 @@
+{
+  "name": "text-animation",
+  "category": "Motion",
+  "aliases": [
+    "text-effect",
+    "animated-text",
+    "typewriter",
+    "shimmer-text",
+    "scramble-text"
+  ],
+  "exportName": "AnimatedText",
+  "files": [
+    "src/components/ui/text-animation.tsx"
+  ],
+  "summary": "Reveal, shimmer, cascade, scramble and typewriter text effects.",
+  "props": [
+    [
+      "children",
+      "string",
+      "—",
+      "The text to animate."
+    ],
+    [
+      "variant",
+      "\"reveal\" | \"shimmer\" | \"cascade\" | \"scramble\" | \"typewriter\"",
+      "\"reveal\"",
+      "Which effect to play."
+    ],
+    [
+      "trigger",
+      "\"mount\" | \"change\"",
+      "\"change\" for cascade / typewriter, else \"mount\"",
+      "Animate once on mount, or also every time the text changes. A typewriter keeps typing when the new text extends the old (streaming)."
+    ],
+    [
+      "delay",
+      "number",
+      "0",
+      "ms before the first animation."
+    ],
+    [
+      "stagger",
+      "number",
+      "70 reveal · 80 shimmer · 28 cascade · 45 scramble · 32 typewriter",
+      "ms between words (reveal) or letters. Shimmer: ms of sweep per letter."
+    ],
+    [
+      "speed",
+      "number",
+      "1",
+      "Speed multiplier: 2 plays twice as fast."
+    ],
+    [
+      "color",
+      "string",
+      "theme foreground",
+      "Text colour."
+    ],
+    [
+      "caret",
+      "boolean",
+      "true",
+      "Blinking caret for the typewriter."
+    ],
+    [
+      "replayKey",
+      "string | number",
+      "—",
+      "Change it to replay the animation."
+    ],
+    [
+      "onComplete",
+      "() => void",
+      "—",
+      "Called when an animation finishes (not for the looping shimmer)."
+    ],
+    [
+      "textStyle",
+      "StyleProp<TextStyle>",
+      "—",
+      "fontSize, fontWeight, lineHeight, letterSpacing, textAlign… for every letter."
+    ],
+    [
+      "style",
+      "StyleProp<ViewStyle>",
+      "—",
+      "Style for the root view."
+    ]
+  ],
+  "behavior": [
+    [
+      "Motion",
+      "Reveal, shimmer and cascade run one native-driver clock per animation with spring curves pre-sampled into interpolations; scramble and typewriter use a light JS timer. Text wraps by word."
+    ],
+    [
+      "Reduced motion",
+      "Shows the final text immediately; shimmer stays static and the typewriter caret is hidden."
+    ],
+    [
+      "Screen readers",
+      "The whole string is one text element; the per-letter views are hidden. Cascade and typewriter announce new text when it changes (typewriter once streaming settles)."
+    ],
+    [
+      "Platforms",
+      "iOS, Android and web. Arabic, Hebrew, Indic, Thai and other connected scripts animate a word at a time so shaping is never broken; right-to-left text flows from the right."
+    ]
+  ],
+  "usage": "import { AnimatedText } from '@/components/ui/text-animation';\n\n<AnimatedText textStyle={{ fontSize: 28, fontWeight: '600' }}>\n  Ship native apps that feel alive.\n</AnimatedText>\n\n<AnimatedText variant=\"shimmer\">Thinking…</AnimatedText>\n<AnimatedText variant=\"cascade\">{status}</AnimatedText>",
+  "examples": [
+    {
+      "name": "Reveal",
+      "title": "Reveal",
+      "code": "import React, { useEffect, useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { AnimatedText } from '@/components/ui/text-animation';\nimport { useKit } from '@/lib/kit';\n\nfunction Chip({ label, onPress }: { label: string; onPress: () => void }) {\n  const { colors, radius } = useKit();\n  return (\n    <Pressable\n      accessibilityRole=\"button\"\n      onPress={onPress}\n      hitSlop={4}\n      style={{ height: 36, paddingHorizontal: 14, borderRadius: radius.capsule(36), justifyContent: 'center', alignSelf: 'flex-start', backgroundColor: colors.muted }}\n    >\n      <Text style={{ color: colors.foreground, fontSize: 14 }}>{label}</Text>\n    </Pressable>\n  );\n}\n\nexport default function Reveal() {\n  const [run, setRun] = useState(0);\n  return (\n    <View style={{ gap: 16 }}>\n      <AnimatedText replayKey={run} textStyle={{ fontSize: 30, fontWeight: '600', letterSpacing: -0.8, lineHeight: 36 }}>\n        Ship native apps that feel alive.\n      </AnimatedText>\n      <Chip label=\"Replay\" onPress={() => setRun((r) => r + 1)} />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Thinking",
+      "title": "Thinking",
+      "code": "import { Pressable, Text, View } from 'react-native';\nimport { AnimatedText } from '@/components/ui/text-animation';\nimport { useKit } from '@/lib/kit';\n\nexport default function Thinking() {\n  const { colors, radius } = useKit();\n  return (\n    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10, padding: 14, borderRadius: radius.lg, backgroundColor: colors.card, borderWidth: 1, borderColor: colors.border }}>\n      <View style={{ width: 28, height: 28, borderRadius: radius.capsule(28), backgroundColor: colors.accent }} />\n      <AnimatedText variant=\"shimmer\" textStyle={{ fontSize: 16 }}>\n        Thinking…\n      </AnimatedText>\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "DeployStatus",
+      "title": "Deploy Status",
+      "code": "import React, { useEffect, useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { AnimatedText } from '@/components/ui/text-animation';\nimport { useKit } from '@/lib/kit';\n\nfunction Chip({ label, onPress }: { label: string; onPress: () => void }) {\n  const { colors, radius } = useKit();\n  return (\n    <Pressable\n      accessibilityRole=\"button\"\n      onPress={onPress}\n      hitSlop={4}\n      style={{ height: 36, paddingHorizontal: 14, borderRadius: radius.capsule(36), justifyContent: 'center', alignSelf: 'flex-start', backgroundColor: colors.muted }}\n    >\n      <Text style={{ color: colors.foreground, fontSize: 14 }}>{label}</Text>\n    </Pressable>\n  );\n}\n\nconst STATUSES = ['Queued', 'Building', 'Deploying', 'Live'];\n\nexport default function DeployStatus() {\n  const { colors, radius } = useKit();\n  const [i, setI] = useState(0);\n  const status = STATUSES[i];\n  const live = status === 'Live';\n  return (\n    <View style={{ gap: 16 }}>\n      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>\n        <View style={{ width: 10, height: 10, borderRadius: radius.capsule(10), backgroundColor: live ? colors.success : colors.warning }} />\n        <Text style={{ fontSize: 17, color: colors.mutedForeground }}>expokit.dev</Text>\n        <AnimatedText variant=\"cascade\" color={live ? colors.success : colors.foreground} textStyle={{ fontSize: 17, fontWeight: '600' }}>\n          {status}\n        </AnimatedText>\n      </View>\n      <Chip label=\"Next status\" onPress={() => setI((n) => (n + 1) % STATUSES.length)} />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Scramble",
+      "title": "Scramble",
+      "code": "import React, { useEffect, useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { AnimatedText } from '@/components/ui/text-animation';\nimport { useKit } from '@/lib/kit';\n\nfunction Chip({ label, onPress }: { label: string; onPress: () => void }) {\n  const { colors, radius } = useKit();\n  return (\n    <Pressable\n      accessibilityRole=\"button\"\n      onPress={onPress}\n      hitSlop={4}\n      style={{ height: 36, paddingHorizontal: 14, borderRadius: radius.capsule(36), justifyContent: 'center', alignSelf: 'flex-start', backgroundColor: colors.muted }}\n    >\n      <Text style={{ color: colors.foreground, fontSize: 14 }}>{label}</Text>\n    </Pressable>\n  );\n}\n\nexport default function Scramble() {\n  const { colors, font } = useKit();\n  const [run, setRun] = useState(0);\n  return (\n    <View style={{ gap: 16 }}>\n      <View style={{ gap: 4 }}>\n        <Text style={{ fontSize: 13, color: colors.mutedForeground }}>Your referral code</Text>\n        <AnimatedText variant=\"scramble\" replayKey={run} textStyle={{ fontSize: 28, fontWeight: '600', letterSpacing: 2, fontFamily: font.mono }}>\n          SPRING-7Q2X\n        </AnimatedText>\n      </View>\n      <Chip label=\"Generate again\" onPress={() => setRun((r) => r + 1)} />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Streaming",
+      "title": "Streaming",
+      "code": "import React, { useEffect, useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { AnimatedText } from '@/components/ui/text-animation';\nimport { useKit } from '@/lib/kit';\n\nfunction Chip({ label, onPress }: { label: string; onPress: () => void }) {\n  const { colors, radius } = useKit();\n  return (\n    <Pressable\n      accessibilityRole=\"button\"\n      onPress={onPress}\n      hitSlop={4}\n      style={{ height: 36, paddingHorizontal: 14, borderRadius: radius.capsule(36), justifyContent: 'center', alignSelf: 'flex-start', backgroundColor: colors.muted }}\n    >\n      <Text style={{ color: colors.foreground, fontSize: 14 }}>{label}</Text>\n    </Pressable>\n  );\n}\n\nconst ANSWER =\n  'Spring animations feel natural because they keep momentum: a flick carries its speed into the motion, and nothing stops dead.';\n\nexport default function Streaming() {\n  const { colors, radius } = useKit();\n  const [text, setText] = useState('');\n  const [run, setRun] = useState(0);\n  useEffect(() => {\n    // Simulates tokens arriving from a model, a few words at a time.\n    const words = ANSWER.split(' ');\n    let n = 0;\n    const id = setInterval(() => {\n      n = Math.min(words.length, n + 1 + Math.floor(Math.random() * 3));\n      setText(words.slice(0, n).join(' '));\n      if (n >= words.length) clearInterval(id);\n    }, 260);\n    return () => clearInterval(id);\n  }, [run]);\n  return (\n    <View style={{ gap: 16 }}>\n      <View style={{ padding: 14, borderRadius: radius.lg, backgroundColor: colors.muted }}>\n        <AnimatedText key={run} variant=\"typewriter\" textStyle={{ fontSize: 16, lineHeight: 23 }}>\n          {text}\n        </AnimatedText>\n      </View>\n      <Chip\n        label=\"Ask again\"\n        onPress={() => {\n          setText('');\n          setRun((r) => r + 1);\n        }}\n      />\n    </View>\n  );\n}\n"
+    },
+    {
+      "name": "Hero",
+      "title": "Hero",
+      "code": "import React, { useEffect, useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport { AnimatedText } from '@/components/ui/text-animation';\nimport { useKit } from '@/lib/kit';\n\nexport default function Hero() {\n  const { colors } = useKit();\n  const [run, setRun] = useState(0);\n  return (\n    <Pressable accessibilityRole=\"button\" accessibilityHint=\"Replays the animation\" onPress={() => setRun((r) => r + 1)} style={{ alignItems: 'center', gap: 10, paddingVertical: 12 }}>\n      <AnimatedText variant=\"scramble\" replayKey={run} color={colors.accent} style={{ alignSelf: 'stretch' }} textStyle={{ fontSize: 13, fontWeight: '600', letterSpacing: 1.5, textAlign: 'center' }}>\n        NEW IN EXPOKIT\n      </AnimatedText>\n      <AnimatedText replayKey={run} delay={250} style={{ alignSelf: 'stretch' }} textStyle={{ fontSize: 34, fontWeight: '700', letterSpacing: -1, lineHeight: 40, textAlign: 'center' }}>\n        Motion your users can feel\n      </AnimatedText>\n      <AnimatedText variant=\"typewriter\" replayKey={run} delay={900} caret={false} style={{ alignSelf: 'stretch' }} color={colors.mutedForeground} textStyle={{ fontSize: 15, textAlign: 'center' }}>\n        Tap anywhere to play it again.\n      </AnimatedText>\n    </Pressable>\n  );\n}\n"
+    }
+  ]
+}