@expokit/cli 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,262 @@
+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/files/src/lib/kit.tsx

@@ -0,0 +1,219 @@
+import React, { createContext, useContext, useMemo } from 'react';
+import { Platform, useColorScheme, type TextStyle } from 'react-native';
+
+/**
+ * ExpoKit design tokens. Every component reads them through useKit(), so one
+ * <KitProvider> (optional) re-skins the whole kit: light / dark, accent colour, radius.
+ * Without a provider, components follow the system colour scheme.
+ */
+
+/**
+ * Bumped whenever components start using a new kit API (2: radius.scale / radius.capsule).
+ * The CLI won't keep an edited kit.tsx older than the component being added needs.
+ */
+export const KIT_VERSION = 2;
+
+export type ColorScheme = 'light' | 'dark';
+
+export interface Colors {
+  background: string;
+  foreground: string;
+  /** Cards, sheets, inputs. */
+  card: string;
+  cardForeground: string;
+  /** Raised surfaces: popovers, toasts. */
+  popover: string;
+  muted: string;
+  mutedForeground: string;
+  border: string;
+  input: string;
+  primary: string;
+  primaryForeground: string;
+  secondary: string;
+  secondaryForeground: string;
+  accent: string;
+  accentForeground: string;
+  success: string;
+  warning: string;
+  danger: string;
+  dangerForeground: string;
+  ring: string;
+  overlay: string;
+}
+
+export interface Theme {
+  dark: boolean;
+  colors: Colors;
+  /** Corner radius scale. `radius.full` makes pills. */
+  radius: {
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    full: number;
+    /** A corner designed at the default radius (12), scaled to the current one: `radius.scale(16)` is 16 at 12, 0 at 0. */
+    scale: (n: number) => number;
+    /** Corner for a bar or chip of height `h`: a pill at radius ≥ 12, softer below, square at 0. */
+    capsule: (h: number) => number;
+  };
+  /** 4pt spacing scale: space(4) === 16. */
+  space: (n: number) => number;
+  font: { family?: string; mono: string };
+  text: Record<'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl', TextStyle>;
+}
+
+const light: Colors = {
+  background: '#ffffff',
+  foreground: '#09090b',
+  card: '#ffffff',
+  cardForeground: '#09090b',
+  popover: '#ffffff',
+  muted: '#f4f4f5',
+  mutedForeground: '#71717a',
+  border: '#e4e4e7',
+  input: '#d4d4d8',
+  primary: '#18181b',
+  primaryForeground: '#fafafa',
+  secondary: '#f4f4f5',
+  secondaryForeground: '#18181b',
+  accent: '#18181b',
+  accentForeground: '#ffffff',
+  success: '#16a34a',
+  warning: '#f59e0b',
+  danger: '#e5484d',
+  dangerForeground: '#ffffff',
+  ring: '#18181b',
+  overlay: 'rgba(0,0,0,0.4)',
+};
+
+const dark: Colors = {
+  background: '#09090b',
+  foreground: '#fafafa',
+  card: '#111113',
+  cardForeground: '#fafafa',
+  popover: '#18181b',
+  muted: '#1c1c20',
+  mutedForeground: '#a1a1aa',
+  border: '#27272a',
+  input: '#34343a',
+  primary: '#fafafa',
+  primaryForeground: '#18181b',
+  secondary: '#1f1f23',
+  secondaryForeground: '#fafafa',
+  accent: '#fafafa',
+  accentForeground: '#09090b',
+  success: '#3dd68c',
+  warning: '#ffb224',
+  danger: '#ff6369',
+  dangerForeground: '#ffffff',
+  ring: '#d4d4d8',
+  overlay: 'rgba(0,0,0,0.6)',
+};
+
+export const palettes = { light, dark };
+
+function build(scheme: ColorScheme, overrides?: ThemeOverrides): Theme {
+  const base = scheme === 'dark' ? dark : light;
+  const accent = overrides?.accent;
+  const colors: Colors = {
+    ...base,
+    ...(accent ? { accent, ring: accent, accentForeground: readableOn(accent) } : null),
+    ...overrides?.colors?.[scheme],
+  };
+  const r = overrides?.radius ?? 12;
+  return {
+    dark: scheme === 'dark',
+    colors,
+    radius: {
+      sm: Math.round(r * 0.5),
+      md: r,
+      lg: Math.round(r * 1.35),
+      xl: Math.round(r * 1.8),
+      full: 999,
+      scale: (n) => Math.round((n * r) / 12),
+      capsule: (h) => Math.round((h / 2) * Math.min(1, r / 12)),
+    },
+    space: (n) => n * 4,
+    font: {
+      family: overrides?.fontFamily,
+      mono: Platform.select({ ios: 'Menlo', android: 'monospace', default: 'ui-monospace, SFMono-Regular, Menlo, monospace' })!,
+    },
+    text: {
+      xs: { fontSize: 12, lineHeight: 16 },
+      sm: { fontSize: 14, lineHeight: 20 },
+      md: { fontSize: 16, lineHeight: 22 },
+      lg: { fontSize: 18, lineHeight: 24, fontWeight: '400' },
+      xl: { fontSize: 22, lineHeight: 28, fontWeight: '400', letterSpacing: -0.3 },
+      xxl: { fontSize: 30, lineHeight: 36, fontWeight: '400', letterSpacing: -0.8 },
+    },
+  };
+}
+
+export interface ThemeOverrides {
+  /** Brand colour used for focus rings, selected states and accent buttons. */
+  accent?: string;
+  /** Base corner radius in points (default 12). */
+  radius?: number;
+  fontFamily?: string;
+  /** Override any token per scheme. */
+  colors?: Partial<Record<ColorScheme, Partial<Colors>>>;
+}
+
+const KitContext = createContext<{ scheme?: ColorScheme; overrides?: ThemeOverrides } | null>(null);
+
+export function KitProvider({
+  scheme,
+  children,
+  ...overrides
+}: ThemeOverrides & { scheme?: ColorScheme | 'system'; children: React.ReactNode }) {
+  const value = useMemo(
+    () => ({ scheme: scheme === 'system' ? undefined : scheme, overrides }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [scheme, overrides.accent, overrides.radius, overrides.fontFamily, overrides.colors]
+  );
+  return <KitContext.Provider value={value}>{children}</KitContext.Provider>;
+}
+
+export function useKit(): Theme {
+  const ctx = useContext(KitContext);
+  const system = useColorScheme();
+  const scheme: ColorScheme = ctx?.scheme ?? (system === 'dark' ? 'dark' : 'light');
+  return useMemo(() => build(scheme, ctx?.overrides), [scheme, ctx?.overrides]);
+}
+
+/** Shared motion presets so the whole kit moves the same way. */
+export const motion = {
+  /** Toggles, selection indicators. */
+  snappy: { damping: 18, stiffness: 260, mass: 0.8 },
+  /** Press feedback, pops. */
+  bouncy: { damping: 11, stiffness: 220, mass: 0.7 },
+  /** Sheets, layout changes. */
+  gentle: { damping: 22, stiffness: 160, mass: 1 },
+  fast: 160,
+  normal: 240,
+};
+
+/** Adds alpha to a #rrggbb colour: alpha('#6366f1', 0.2). */
+export function alpha(hex: string, a: number) {
+  if (!hex.startsWith('#') || (hex.length !== 7 && hex.length !== 4)) return hex;
+  const full = hex.length === 4 ? '#' + [...hex.slice(1)].map((c) => c + c).join('') : hex;
+  return full + Math.round(Math.max(0, Math.min(1, a)) * 255).toString(16).padStart(2, '0');
+}
+
+/** Black or white, whichever reads better on `hex`. */
+export function readableOn(hex: string) {
+  const full = hex.length === 4 ? '#' + [...hex.slice(1)].map((c) => c + c).join('') : hex;
+  const n = parseInt(full.slice(1, 7), 16);
+  if (Number.isNaN(n)) return '#ffffff';
+  const [r, g, b] = [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+  return (r * 299 + g * 587 + b * 114) / 1000 > 150 ? '#09090b' : '#ffffff';
+}
+
+/**
+ * True for children that must be wrapped in <Text>: strings, numbers and arrays of them —
+ * `{count} new` is the array [3, ' new'], and raw text outside <Text> crashes on native.
+ */
+export function isTextNode(node: React.ReactNode): node is string | number | (string | number)[] {
+  if (typeof node === 'string' || typeof node === 'number') return true;
+  return Array.isArray(node) && node.length > 0 && node.every((n) => typeof n === 'string' || typeof n === 'number');
+}

package/registry/pagination-dots.json

@@ -0,0 +1,15 @@
+{
+  "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/parallax-layers.json

@@ -0,0 +1,15 @@
+{
+  "name": "parallax-layers",
+  "type": "component",
+  "title": "Parallax Layers",
+  "description": "Build a scene from layers at different depths — drag across it and near layers slide further than far ones while the whole scene tilts, for a convincing 3D look. Drifts on its own at rest. Native-driven, no extra libraries.",
+  "tier": "pro",
+  "dependencies": [],
+  "registryDependencies": [
+    "kit"
+  ],
+  "sharedFiles": [
+    "lib/kit.tsx"
+  ],
+  "filesDir": null
+}

package/registry/parallax-scroll.json

@@ -0,0 +1,17 @@
+{
+  "name": "parallax-scroll",
+  "type": "component",
+  "title": "Parallax Scroll",
+  "description": "A scroll view with real depth: the header photo glides slower than the page, darkens as it leaves and stretches when you pull down, while a title bar fades in over it. Photos pan inside their frames and headlines drift at their own speed — all on the native driver, zero JS per scroll frame.",
+  "tier": "pro",
+  "dependencies": [
+    "react-native-svg"
+  ],
+  "registryDependencies": [
+    "kit"
+  ],
+  "sharedFiles": [
+    "lib/kit.tsx"
+  ],
+  "filesDir": null
+}