@expokit/cli 0.2.0 → 0.4.0

package/registry/_docs/tag-input.json

@@ -1,128 +0,0 @@
-{
-  "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/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
-}

package/registry/pagination-dots/files/src/components/ui/pagination-dots.tsx

@@ -1,262 +0,0 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import {
-  Animated,
-  Pressable,
-  StyleSheet,
-  Text,
-  View,
-  type AccessibilityActionEvent,
-  type LayoutChangeEvent,
-  type StyleProp,
-  type ViewStyle,
-} from 'react-native';
-
-import { alpha, motion, useKit } from '@/lib/kit';
-
-export type PaginationDotsVariant = 'dots' | 'scale' | 'line' | 'numbers';
-export type PaginationDotsSize = 'sm' | 'md' | 'lg';
-
-/** A page position: 0 = first page, 1.5 = halfway between the second and third. */
-export type PaginationProgress = Animated.Value | Animated.AnimatedInterpolation<number> | number;
-
-export interface PaginationDotsProps {
-  /** Number of pages. */
-  count: number;
-  /** Active page. Changes spring the indicator across. Ignored when `progress` is an Animated value. */
-  index?: number;
-  /**
-   * Live page position, e.g. `Animated.divide(scrollX, pageWidth)`, so the indicator follows the
-   * finger while swiping. Drive it with `useNativeDriver: false` for the 'dots' variant (it
-   * animates widths); 'scale', 'line' and 'numbers' work with either driver.
-   */
-  progress?: PaginationProgress;
-  /** 'dots' active dot stretches into a pill · 'scale' active dot grows · 'line' progress segments · 'numbers' "2 / 5". */
-  variant?: PaginationDotsVariant;
-  size?: PaginationDotsSize;
-  /** Makes each dot a button (with a 44pt hit area) that reports its page. */
-  onPress?: (index: number) => void;
-  /** Active colour (default: theme accent). */
-  accent?: string;
-  /** Inactive dot colour (default: a soft tint of the foreground). */
-  inactiveColor?: string;
-  accessibilityLabel?: string;
-  style?: StyleProp<ViewStyle>;
-}
-
-const SIZES: Record<PaginationDotsSize, { dot: number; gap: number; pill: number; line: number; font: number }> = {
-  sm: { dot: 6, gap: 6, pill: 18, line: 3, font: 12 },
-  md: { dot: 8, gap: 8, pill: 24, line: 4, font: 13 },
-  lg: { dot: 10, gap: 10, pill: 32, line: 5, font: 15 },
-};
-
-/**
- * Page indicator for carousels and onboarding. Feed it a live `progress` value and it tracks the
- * swipe continuously: the active dot stretches into a pill that hands its width to the next dot,
- * scales up, fills a segmented line or rolls the page number.
- */
-export function PaginationDots({
-  count,
-  index = 0,
-  progress,
-  variant = 'dots',
-  size = 'md',
-  onPress,
-  accent,
-  inactiveColor,
-  accessibilityLabel = 'Page',
-  style,
-}: PaginationDotsProps) {
-  const { colors, radius } = useKit();
-  const tint = accent ?? colors.accent;
-  const idle = inactiveColor ?? alpha(colors.foreground, 0.18);
-  const s = SIZES[size];
-  const n = Math.max(1, count);
-
-  // A spring-driven position when we aren't handed an Animated value.
-  const external = typeof progress === 'object' ? progress : null;
-  const target = typeof progress === 'number' ? progress : index;
-  const internal = useRef(new Animated.Value(target)).current;
-  useEffect(() => {
-    if (external) return;
-    if (typeof progress === 'number') internal.setValue(target);
-    else Animated.spring(internal, { toValue: target, useNativeDriver: false, ...motion.snappy }).start();
-  }, [external, progress, target, internal]);
-  const pos = external ?? internal;
-
-  // Rounded page for the 'numbers' label and accessibility.
-  const [page, setPage] = useState(Math.round(target));
-  useEffect(() => {
-    if (!external) {
-      setPage(Math.round(target));
-      return;
-    }
-    const id = external.addListener(({ value }: { value: number }) => setPage(Math.min(n - 1, Math.max(0, Math.round(value)))));
-    return () => external.removeListener(id);
-  }, [external, target, n]);
-
-  const pages = useMemo(() => Array.from({ length: n }, (_, i) => i), [n]);
-  const around = (i: number, outside: number, inside: number) =>
-    pos.interpolate({ inputRange: [i - 1, i, i + 1], outputRange: [outside, inside, outside], extrapolate: 'clamp' });
-
-  const onAction = (e: AccessibilityActionEvent) => {
-    if (!onPress) return;
-    if (e.nativeEvent.actionName === 'increment' && page < n - 1) onPress(page + 1);
-    if (e.nativeEvent.actionName === 'decrement' && page > 0) onPress(page - 1);
-  };
-
-  const a11y = {
-    accessible: true,
-    accessibilityRole: onPress ? ('adjustable' as const) : ('text' as const),
-    accessibilityLabel,
-    accessibilityValue: { min: 1, max: n, now: page + 1, text: `${page + 1} of ${n}` },
-    accessibilityActions: onPress ? [{ name: 'increment' as const }, { name: 'decrement' as const }] : undefined,
-    onAccessibilityAction: onAction,
-  };
-
-  const hit = (i: number, child: React.ReactNode, extra?: ViewStyle) =>
-    onPress ? (
-      <Pressable
-        key={i}
-        onPress={() => onPress(i)}
-        hitSlop={{ top: 18, bottom: 18, left: s.gap / 2, right: s.gap / 2 }}
-        accessibilityLabel={`Go to page ${i + 1}`}
-        style={extra}
-      >
-        {child}
-      </Pressable>
-    ) : (
-      <View key={i} style={extra}>
-        {child}
-      </View>
-    );
-
-  if (variant === 'numbers') {
-    return (
-      <View {...a11y} style={[styles.numbers, { borderRadius: radius.capsule(Math.ceil(s.font * 1.4) + 10), backgroundColor: alpha(colors.foreground, 0.06) }, style]}>
-        <RollingNumber value={page + 1} color={tint} size={s.font} />
-        <Text style={[styles.numText, { fontSize: s.font, color: colors.mutedForeground }]}> / {n}</Text>
-      </View>
-    );
-  }
-
-  if (variant === 'line') return <LineSegments {...{ pages, pos, s, tint, idle, a11y, hit, style }} />;
-
-  return (
-    <View {...a11y} style={[styles.row, { gap: s.gap, height: s.dot * (variant === 'scale' ? 1.8 : 1) }, style]}>
-      {pages.map((i) =>
-        variant === 'scale'
-          ? hit(
-              i,
-              <Animated.View
-                style={{
-                  width: s.dot,
-                  height: s.dot,
-                  borderRadius: s.dot,
-                  backgroundColor: tint,
-                  opacity: around(i, 0.28, 1),
-                  transform: [{ scale: around(i, 1, 1.55) }],
-                }}
-              />
-            )
-          : hit(
-              i,
-              // Width (JS driver) on the outer view, the accent fill fades on an inner view.
-              <Animated.View
-                style={{ width: around(i, s.dot, s.pill), height: s.dot, borderRadius: s.dot, backgroundColor: idle, overflow: 'hidden' }}
-              >
-                <Animated.View style={[StyleSheet.absoluteFill, { backgroundColor: tint, opacity: around(i, 0, 1) }]} />
-              </Animated.View>
-            )
-      )}
-    </View>
-  );
-}
-
-interface LineProps {
-  pages: number[];
-  pos: Animated.Value | Animated.AnimatedInterpolation<number>;
-  s: (typeof SIZES)[PaginationDotsSize];
-  tint: string;
-  idle: string;
-  a11y: object;
-  hit: (i: number, child: React.ReactNode, extra?: ViewStyle) => React.ReactNode;
-  style?: StyleProp<ViewStyle>;
-}
-
-/** Segments fill left-to-right as the position moves into each page. */
-function LineSegments({ pages, pos, s, tint, idle, a11y, hit, style }: LineProps) {
-  const [w, setW] = useState(0);
-  const n = pages.length;
-  const segW = w ? (w - s.gap * (n - 1)) / n : 0;
-  const onLayout = (e: LayoutChangeEvent) => setW(e.nativeEvent.layout.width);
-  return (
-    <View {...a11y} onLayout={onLayout} style={[styles.line, { gap: s.gap }, style]}>
-      {pages.map((i) =>
-        hit(
-          i,
-          <View style={{ height: s.line, borderRadius: s.line, backgroundColor: idle, overflow: 'hidden' }}>
-            {segW ? (
-              <Animated.View
-                style={{
-                  width: segW,
-                  height: s.line,
-                  borderRadius: s.line,
-                  backgroundColor: tint,
-                  transform: [
-                    {
-                      translateX: pos.interpolate({ inputRange: [i - 1, i], outputRange: [-segW, 0], extrapolate: 'clamp' }),
-                    },
-                  ],
-                }}
-              />
-            ) : null}
-          </View>,
-          styles.segment
-        )
-      )}
-    </View>
-  );
-}
-
-function RollingNumber({ value, color, size }: { value: number; color: string; size: number }) {
-  const v = useRef(new Animated.Value(1)).current;
-  const last = useRef(value);
-  const dir = value >= last.current ? 1 : -1;
-  useEffect(() => {
-    if (value === last.current) return;
-    last.current = value;
-    v.setValue(0);
-    Animated.spring(v, { toValue: 1, useNativeDriver: true, ...motion.snappy }).start();
-  }, [value, v]);
-  return (
-    <Animated.Text
-      style={[
-        styles.numText,
-        {
-          fontSize: size,
-          color,
-          fontWeight: '400',
-          opacity: v,
-          transform: [{ translateY: v.interpolate({ inputRange: [0, 1], outputRange: [dir * size * 0.7, 0] }) }],
-        },
-      ]}
-    >
-      {value}
-    </Animated.Text>
-  );
-}
-
-const styles = StyleSheet.create({
-  row: { flexDirection: 'row', alignItems: 'center', alignSelf: 'center' },
-  line: { flexDirection: 'row', alignItems: 'center', alignSelf: 'stretch' },
-  segment: { flex: 1, justifyContent: 'center' },
-  numbers: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    alignSelf: 'center',
-    paddingHorizontal: 12,
-    paddingVertical: 5,
-    overflow: 'hidden',
-  },
-  numText: { fontVariant: ['tabular-nums'], fontWeight: '400' },
-});

package/registry/pagination-dots.json

@@ -1,15 +0,0 @@
-{
-  "name": "pagination-dots",
-  "type": "component",
-  "title": "Pagination Dots",
-  "description": "Page indicator for carousels and onboarding that follows your finger: hand it a live scroll position and the active dot stretches into a pill that pours into the next one, dots scale, segments fill, or the page number rolls. Tap a dot to jump; VoiceOver can swipe through pages.",
-  "tier": "free",
-  "dependencies": [],
-  "registryDependencies": [
-    "kit"
-  ],
-  "sharedFiles": [
-    "lib/kit.tsx"
-  ],
-  "filesDir": "pagination-dots/files"
-}

package/registry/shimmer-button.json

@@ -1,17 +0,0 @@
-{
-  "name": "shimmer-button",
-  "type": "component",
-  "title": "Shimmer Button",
-  "description": "Premium call-to-action with a looping light sweep, a breathing glow halo or a beam of light orbiting the border — all native-driven, with spring press feedback and reduce-motion support.",
-  "tier": "pro",
-  "dependencies": [
-    "react-native-svg"
-  ],
-  "registryDependencies": [
-    "kit"
-  ],
-  "sharedFiles": [
-    "lib/kit.tsx"
-  ],
-  "filesDir": null
-}