@expokit/cli 0.3.0 → 0.4.1

package/registry/_docs/morph-button.json

@@ -1,128 +0,0 @@
-{
-  "name": "morph-button",
-  "category": "Buttons",
-  "aliases": [],
-  "exportName": "MorphButton",
-  "files": [
-    "src/components/ui/morph-button.tsx"
-  ],
-  "summary": "An async button that shrinks to a spinner, then draws a tick or shakes a cross.",
-  "props": [
-    [
-      "onPress",
-      "() => Promise<unknown>",
-      "—",
-      "Async work. Resolve → tick, reject → cross + shake."
-    ],
-    [
-      "variant",
-      "\"primary\" | \"accent\" | \"soft\" | \"outline\"",
-      "\"primary\"",
-      "Look while idle."
-    ],
-    [
-      "size",
-      "\"sm\" | \"md\" | \"lg\"",
-      "\"md\"",
-      "40 / 48 / 56pt tall."
-    ],
-    [
-      "color",
-      "string",
-      "theme accent",
-      "Brand colour for accent, soft and outline."
-    ],
-    [
-      "successColor / errorColor",
-      "string",
-      "theme success / danger",
-      "Colours of the result circle."
-    ],
-    [
-      "resetAfter",
-      "number",
-      "1300",
-      "ms the result stays before morphing back."
-    ],
-    [
-      "minLoading",
-      "number",
-      "600",
-      "Minimum ms the spinner is shown."
-    ],
-    [
-      "onSuccess / onError",
-      "(value) => void",
-      "—",
-      "Called with the resolved value or the thrown error."
-    ],
-    [
-      "onStatusChange",
-      "(status) => void",
-      "—",
-      "\"idle\" | \"loading\" | \"success\" | \"error\"."
-    ],
-    [
-      "pill",
-      "boolean",
-      "true",
-      "Fully rounded ends while idle."
-    ],
-    [
-      "block",
-      "boolean",
-      "false",
-      "Full width; shrinks to the centre while busy."
-    ],
-    [
-      "left",
-      "ReactNode",
-      "—",
-      "Icon before the label."
-    ],
-    [
-      "haptics",
-      "boolean",
-      "true",
-      "Taps on start, success and error."
-    ],
-    [
-      "disabled",
-      "boolean",
-      "false",
-      "Blocks presses."
-    ],
-    [
-      "textStyle",
-      "StyleProp<TextStyle>",
-      "—",
-      "Style for the idle label text."
-    ],
-    [
-      "style",
-      "StyleProp<ViewStyle>",
-      "—",
-      "Style for the outer animated wrapper (margins, alignment)."
-    ]
-  ],
-  "behavior": [
-    [
-      "Motion",
-      "While the promise runs the button springs into a circle with a spinner. A resolve draws a success tick, a reject shakes with an error cross, then it springs back to its label."
-    ],
-    [
-      "Touch",
-      "Presses are ignored while it is busy, and the spinner shows for at least minLoading so fast requests still register."
-    ],
-    [
-      "Haptics",
-      "A light impact on start, then a success or error notification when the promise settles."
-    ],
-    [
-      "Screen readers",
-      "A button with busy and disabled states; while not idle its value reads \"Working\", \"Done\" or \"Failed\"."
-    ]
-  ],
-  "usage": null,
-  "examples": []
-}

package/registry/_docs/pagination-dots.json

@@ -1,108 +0,0 @@
-{
-  "name": "pagination-dots",
-  "category": "Display",
-  "aliases": [],
-  "exportName": "PaginationDots",
-  "files": [
-    "src/components/ui/pagination-dots.tsx"
-  ],
-  "summary": "The active dot stretches into a pill that follows your swipe live.",
-  "props": [
-    [
-      "count",
-      "number",
-      "—",
-      "Number of pages."
-    ],
-    [
-      "index",
-      "number",
-      "0",
-      "Active page; changes spring the indicator across."
-    ],
-    [
-      "progress",
-      "Animated.Value | AnimatedInterpolation | number",
-      "—",
-      "Live page position (e.g. Animated.divide(scrollX, width)) for smooth tracking while swiping. Use useNativeDriver: false for the 'dots' variant."
-    ],
-    [
-      "variant",
-      "\"dots\" | \"scale\" | \"line\" | \"numbers\"",
-      "\"dots\"",
-      "Stretching pill · growing dot · filling segments · rolling \"2 / 5\"."
-    ],
-    [
-      "size",
-      "\"sm\" | \"md\" | \"lg\"",
-      "\"md\"",
-      "6 / 8 / 10pt dots."
-    ],
-    [
-      "onPress",
-      "(index: number) => void",
-      "—",
-      "Makes dots tappable (44pt hit area) and enables accessibility increment / decrement."
-    ],
-    [
-      "accent",
-      "string",
-      "theme accent",
-      "Active colour."
-    ],
-    [
-      "inactiveColor",
-      "string",
-      "18% foreground",
-      "Inactive dot colour."
-    ],
-    [
-      "accessibilityLabel",
-      "string",
-      "\"Page\"",
-      "Announced with \"2 of 5\"."
-    ],
-    [
-      "style",
-      "StyleProp<ViewStyle>",
-      "—",
-      "Style for the row of dots (the numbers pill or line track in those variants)."
-    ]
-  ],
-  "behavior": [
-    [
-      "Motion",
-      "Pass a live progress value (scroll offset ÷ page width) and the indicator tracks the finger; with index alone it springs across. Variants stretch a pill, scale a dot, fill line segments or roll the page number."
-    ],
-    [
-      "Touch",
-      "With onPress, each dot becomes a button with an enlarged hit area that reports its page."
-    ],
-    [
-      "Screen readers",
-      "Read as one element with 'N of M'. With onPress it is adjustable, so swiping up or down changes the page."
-    ],
-    [
-      "Platforms",
-      "The 'dots' variant animates widths, so drive its progress with useNativeDriver: false. The other variants work with either driver."
-    ]
-  ],
-  "usage": "import { useState } from 'react';\nimport { PaginationDots } from '@/components/ui/pagination-dots';\n\nconst [page, setPage] = useState(0);\n<PaginationDots count={4} index={page} onPress={setPage} />",
-  "examples": [
-    {
-      "name": "Onboarding",
-      "title": "Onboarding",
-      "code": "import React, { useMemo, useRef, useState } from 'react';\nimport { Animated, Pressable, ScrollView, Text, View } from 'react-native';\nimport { PaginationDots } from '@/components/ui/pagination-dots';\nimport { useKit } from '@/lib/kit';\n\nconst PAGES: { color?: string; kicker: string; title: string; body: string }[] = [\n  { kicker: 'PLAN', title: 'Plan your week in minutes', body: 'Drag tasks onto your calendar and we block the time for you.' },\n  { color: '#0ea5e9', kicker: 'FOCUS', title: 'Stay in the zone', body: 'Focus sessions silence notifications until your block ends.' },\n  { color: '#10b981', kicker: 'REVIEW', title: 'See what moved', body: 'A Friday recap shows what you shipped and what slipped.' },\n  { color: '#f59e0b', kicker: 'SHARE', title: 'Bring your team along', body: 'Shared boards keep everyone on the same page.' },\n];\n\nexport default function Onboarding() {\n  const { colors, radius } = useKit();\n  const [width, setWidth] = useState(0);\n  const [page, setPage] = useState(0);\n  const scrollX = useRef(new Animated.Value(0)).current;\n  const ref = useRef<ScrollView>(null);\n  const progress = useMemo(() => (width ? Animated.divide(scrollX, width) : 0), [scrollX, width]);\n  const go = (i: number) => ref.current?.scrollTo({ x: i * width, animated: true });\n\n  return (\n    <View style={{ gap: 18 }} onLayout={(e) => setWidth(e.nativeEvent.layout.width)}>\n      <Animated.ScrollView\n        ref={ref}\n        horizontal\n        pagingEnabled\n        showsHorizontalScrollIndicator={false}\n        scrollEventThrottle={16}\n        onScroll={Animated.event([{ nativeEvent: { contentOffset: { x: scrollX } } }], { useNativeDriver: false })}\n        onMomentumScrollEnd={(e) => width && setPage(Math.round(e.nativeEvent.contentOffset.x / width))}\n      >\n        {PAGES.map((p) => (\n          <View key={p.title} style={{ width: width || 1, paddingHorizontal: 2 }}>\n            <View style={{ height: 210, borderRadius: radius.scale(24), backgroundColor: p.color ?? colors.accent, padding: 22, justifyContent: 'flex-end' }}>\n              <Text style={{ color: 'rgba(255,255,255,0.75)', fontSize: 12, fontWeight: '400', letterSpacing: 1.2 }}>{p.kicker}</Text>\n              <Text style={{ color: '#fff', fontSize: 24, fontWeight: '400', letterSpacing: -0.5, marginTop: 6 }}>{p.title}</Text>\n              <Text style={{ color: 'rgba(255,255,255,0.85)', fontSize: 14, lineHeight: 20, marginTop: 6 }}>{p.body}</Text>\n            </View>\n          </View>\n        ))}\n      </Animated.ScrollView>\n      <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>\n        <Pressable onPress={() => go(PAGES.length - 1)} hitSlop={12} accessibilityRole=\"button\">\n          <Text style={{ fontSize: 15, fontWeight: '400', color: colors.mutedForeground }}>Skip</Text>\n        </Pressable>\n        <PaginationDots count={PAGES.length} progress={progress} onPress={go} accessibilityLabel=\"Onboarding page\" />\n        <Pressable\n          onPress={() => go(Math.min(PAGES.length - 1, page + 1))}\n          accessibilityRole=\"button\"\n          style={{ height: 44, paddingHorizontal: 18, borderRadius: radius.capsule(44), backgroundColor: colors.accent, justifyContent: 'center' }}\n        >\n          <Text style={{ fontSize: 15, fontWeight: '400', color: colors.accentForeground }}>{page === PAGES.length - 1 ? 'Done' : 'Next'}</Text>\n        </Pressable>\n      </View>\n    </View>\n  );\n}\n"
-    },
-    {
-      "name": "Variants",
-      "title": "Variants",
-      "code": "import React, { useMemo, useRef, useState } from 'react';\nimport { Animated, Pressable, ScrollView, Text, View } from 'react-native';\nimport { PaginationDots } from '@/components/ui/pagination-dots';\nimport { useKit } from '@/lib/kit';\n\nfunction Label({ children }: { children: string }) {\n  const { colors } = useKit();\n  return <Text style={{ fontSize: 12, fontWeight: '400', letterSpacing: 0.4, color: colors.mutedForeground }}>{children}</Text>;\n}\n\nexport default function Variants() {\n  const { colors, radius } = useKit();\n  const [i, setI] = useState(1);\n  return (\n    <View style={{ gap: 22 }}>\n      {(['dots', 'scale', 'line', 'numbers'] as const).map((variant) => (\n        <View key={variant} style={{ gap: 10 }}>\n          <Label>{variant.toUpperCase()}</Label>\n          <PaginationDots variant={variant} count={5} index={i} onPress={setI} />\n        </View>\n      ))}\n      <View style={{ flexDirection: 'row', gap: 10, justifyContent: 'center' }}>\n        {['Previous', 'Next'].map((t, k) => (\n          <Pressable\n            key={t}\n            onPress={() => setI((v) => Math.max(0, Math.min(4, v + (k ? 1 : -1))))}\n            accessibilityRole=\"button\"\n            style={{ height: 44, paddingHorizontal: 18, borderRadius: radius.md, borderWidth: 1, borderColor: colors.border, justifyContent: 'center' }}\n          >\n            <Text style={{ fontSize: 14, fontWeight: '400', color: colors.foreground }}>{t}</Text>\n          </Pressable>\n        ))}\n      </View>\n    </View>\n  );\n}\n"
-    },
-    {
-      "name": "Sizes",
-      "title": "Sizes",
-      "code": "import { Animated, Pressable, ScrollView, Text, View } from 'react-native';\nimport { PaginationDots } from '@/components/ui/pagination-dots';\n\nexport default function Sizes() {\n  return (\n    <View style={{ gap: 18, alignItems: 'center' }}>\n      <PaginationDots size=\"sm\" count={6} index={2} />\n      <PaginationDots size=\"md\" count={6} index={2} />\n      <PaginationDots size=\"lg\" count={6} index={2} />\n    </View>\n  );\n}\n"
-    }
-  ]
-}

package/registry/_docs/shimmer-button.json

@@ -1,98 +0,0 @@
-{
-  "name": "shimmer-button",
-  "category": "Buttons",
-  "aliases": [],
-  "exportName": "ShimmerButton",
-  "files": [
-    "src/components/ui/shimmer-button.tsx"
-  ],
-  "summary": "A call-to-action with a looping light sweep, breathing glow or orbiting beam.",
-  "props": [
-    [
-      "variant",
-      "\"shimmer\" | \"glow\" | \"border-beam\"",
-      "\"shimmer\"",
-      "Light sweep, breathing halo or orbiting border beam."
-    ],
-    [
-      "size",
-      "\"sm\" | \"md\" | \"lg\"",
-      "\"md\"",
-      "40 / 50 / 58pt tall."
-    ],
-    [
-      "color",
-      "string",
-      "primary / accent",
-      "Button colour (beam colour for border-beam)."
-    ],
-    [
-      "textColor",
-      "string",
-      "readable on color",
-      "Label colour."
-    ],
-    [
-      "speed",
-      "number",
-      "2600 / 2400 / 3200",
-      "Loop length in ms."
-    ],
-    [
-      "pill",
-      "boolean",
-      "true",
-      "Fully rounded ends."
-    ],
-    [
-      "block",
-      "boolean",
-      "false",
-      "Stretches to the parent's width (alignSelf: stretch)."
-    ],
-    [
-      "left / right",
-      "ReactNode",
-      "—",
-      "Icons beside the label."
-    ],
-    [
-      "textStyle",
-      "StyleProp<TextStyle>",
-      "—",
-      "Style for the label text."
-    ],
-    [
-      "style",
-      "StyleProp<ViewStyle>",
-      "—",
-      "Style for the outer animated wrapper (margins, alignment)."
-    ],
-    [
-      "…PressableProps",
-      "",
-      "",
-      "onPress, disabled, …"
-    ]
-  ],
-  "behavior": [
-    [
-      "Motion",
-      "'shimmer' sweeps a light band across on a loop, 'glow' breathes a soft halo and 'border-beam' sends a bright comet around the border. speed sets the loop length."
-    ],
-    [
-      "Touch",
-      "Pressing scales the button down on a bouncy spring."
-    ],
-    [
-      "Reduced motion",
-      "With Reduce Motion on, or while disabled, the loop stops and the button rests in a still state."
-    ],
-    [
-      "Screen readers",
-      "A button with its disabled state. Other Pressable props, such as accessibilityLabel, pass through."
-    ]
-  ],
-  "usage": null,
-  "examples": []
-}

package/registry/_docs/tag-input.json

@@ -1,148 +0,0 @@
-{
-  "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/color-swatch.json

@@ -1,17 +0,0 @@
-{
-  "name": "color-swatch",
-  "type": "component",
-  "title": "Color Swatch",
-  "description": "A colour picker row or grid. The chosen swatch settles inward while a ring springs out around it and a check pops in, in whichever colour reads best on top.",
-  "tier": "pro",
-  "dependencies": [
-    "react-native-svg"
-  ],
-  "registryDependencies": [
-    "kit"
-  ],
-  "sharedFiles": [
-    "lib/kit.tsx"
-  ],
-  "filesDir": null
-}

package/registry/kpi-card/files/src/components/charts/kpi-card.tsx

@@ -1,45 +0,0 @@
-import { StyleSheet, Text, View, type StyleProp, type ViewStyle } from "react-native";
-import { Sparkline, useChartTheme } from "expo-charts";
-
-export interface KpiCardProps {
-  label: string;
-  value: string;
-  /** Percentage change, e.g. 12.4 or -3.1. */
-  delta?: number;
-  /** Recent values for the sparkline (oldest first). */
-  trend?: number[];
-  style?: StyleProp<ViewStyle>;
-}
-
-/** Big number + trend badge + sparkline. Colours follow <ChartProvider>. */
-export function KpiCard({ label, value, delta, trend, style }: KpiCardProps) {
-  const theme = useChartTheme();
-  const up = (delta ?? 0) >= 0;
-  const tone = up ? theme.positive : theme.negative;
-  return (
-    <View style={[styles.card, { backgroundColor: theme.card, borderColor: theme.border }, style]}>
-      <View style={styles.row}>
-        <Text style={[styles.label, { color: theme.mutedForeground }]}>{label}</Text>
-        {delta !== undefined ? (
-          <View style={[styles.badge, { borderColor: tone }]}>
-            <Text style={[styles.badgeText, { color: tone }]}>
-              {up ? "+" : ""}
-              {delta.toFixed(1)}%
-            </Text>
-          </View>
-        ) : null}
-      </View>
-      <Text style={[styles.value, { color: theme.foreground }]}>{value}</Text>
-      {trend && trend.length > 1 ? <Sparkline data={trend} height={40} color={tone} /> : null}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  card: { borderRadius: 16, borderWidth: StyleSheet.hairlineWidth, padding: 16, gap: 6 },
-  row: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" },
-  label: { fontSize: 13, fontWeight: "400" },
-  badge: { borderWidth: StyleSheet.hairlineWidth, borderRadius: 999, paddingHorizontal: 8, paddingVertical: 2 },
-  badgeText: { fontSize: 11, fontWeight: "400", fontVariant: ["tabular-nums"] },
-  value: { fontSize: 28, fontWeight: "400", letterSpacing: -0.5, fontVariant: ["tabular-nums"] },
-});

package/registry/kpi-card.json

@@ -1,14 +0,0 @@
-{
-  "name": "kpi-card",
-  "type": "chart",
-  "title": "KPI card",
-  "description": "Big number, trend badge and an animated sparkline. Built on expo-charts.",
-  "tier": "free",
-  "dependencies": [
-    "expo-charts",
-    "react-native-svg"
-  ],
-  "registryDependencies": [],
-  "sharedFiles": [],
-  "filesDir": "kpi-card/files"
-}

package/registry/like-button.json

@@ -1,18 +0,0 @@
-{
-  "name": "like-button",
-  "type": "component",
-  "title": "Like Button",
-  "description": "Heart, star or bookmark that pops, throws a ring and a burst of coloured particles when liked, with an optional counter that rolls to the new number.",
-  "tier": "pro",
-  "dependencies": [
-    "react-native-svg",
-    "expo-haptics"
-  ],
-  "registryDependencies": [
-    "kit"
-  ],
-  "sharedFiles": [
-    "lib/kit.tsx"
-  ],
-  "filesDir": null
-}

package/registry/morph-button.json

@@ -1,18 +0,0 @@
-{
-  "name": "morph-button",
-  "type": "component",
-  "title": "Morph Button",
-  "description": "Async button that shrinks into a circle with a spinner while your promise runs, then draws a success tick or shakes with an error cross before springing back to its label.",
-  "tier": "pro",
-  "dependencies": [
-    "react-native-svg",
-    "expo-haptics"
-  ],
-  "registryDependencies": [
-    "kit"
-  ],
-  "sharedFiles": [
-    "lib/kit.tsx"
-  ],
-  "filesDir": null
-}