@expokit/cli 0.0.0-stage → 0.2.0

package/registry/slider/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/slider.json

@@ -0,0 +1,17 @@
+{
+  "name": "slider",
+  "type": "component",
+  "title": "Slider",
+  "description": "A slider that feels native on iPhone and Android: thumb and fill ride the native driver, the thumb swells under your finger, tap the track to seek, and values spring-snap to the step. Thin iOS track, a Control-Center style bar with an icon that inverts as the fill passes, a stepped track with ticks, and two-thumb range mode with an optional histogram.",
+  "tier": "free",
+  "dependencies": [
+    "react-native-svg"
+  ],
+  "registryDependencies": [
+    "kit"
+  ],
+  "sharedFiles": [
+    "lib/kit.tsx"
+  ],
+  "filesDir": "slider/files"
+}

package/registry/spin-wheel.json

@@ -0,0 +1,18 @@
+{
+  "name": "spin-wheel",
+  "type": "component",
+  "title": "Spin Wheel",
+  "description": "A casino-grade \"spin & win\" wheel for coupons and rewards: glossy wedges in a gold rim of chasing lights, a 3D SPIN hub, and a flapper that ticks over every divider with haptics. Tap, flick or spin it from code — it keeps turning while your server picks the prize, then eases onto it and lights up the win.",
+  "tier": "pro",
+  "dependencies": [
+    "react-native-svg",
+    "expo-haptics"
+  ],
+  "registryDependencies": [
+    "kit"
+  ],
+  "sharedFiles": [
+    "lib/kit.tsx"
+  ],
+  "filesDir": null
+}

package/registry/spinner/files/src/components/ui/spinner.tsx

@@ -0,0 +1,335 @@
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  AccessibilityInfo,
+  Animated,
+  Easing,
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import Svg, { Circle } from 'react-native-svg';
+
+import { alpha, useKit } from '@/lib/kit';
+
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+
+export type SpinnerVariant = 'ring' | 'dots';
+export type SpinnerSize = 'sm' | 'md' | 'lg' | 'xl';
+export type SpinnerLabelPosition = 'none' | 'right' | 'bottom';
+
+export interface SpinnerProps {
+  variant?: SpinnerVariant;
+  /** 'sm' 16 · 'md' 24 · 'lg' 36 · 'xl' 52 — or any number of points. */
+  size?: SpinnerSize | number;
+  /** Indicator colour (default: theme accent). */
+  color?: string;
+  /** Speed multiplier: 2 is twice as fast. */
+  speed?: number;
+  /** Read by screen readers, and shown when `labelPosition` is set. */
+  label?: string;
+  /** Show `label` beside or under the spinner with an animated ellipsis (default 'none': screen readers only). */
+  labelPosition?: SpinnerLabelPosition;
+  /** Faint full circle behind the ring. */
+  track?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+const SIZES: Record<SpinnerSize, number> = { sm: 16, md: 24, lg: 36, xl: 52 };
+/** Arcs stacked from the head backwards: the shortest is solid, the rest faint, so the tail fades out. */
+const TAIL = 7;
+
+function useReduceMotion() {
+  const [reduce, setReduce] = useState(false);
+  useEffect(() => {
+    let alive = true;
+    AccessibilityInfo.isReduceMotionEnabled()
+      .then((r) => alive && setReduce(r))
+      .catch(() => {});
+    const sub = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduce);
+    return () => {
+      alive = false;
+      sub.remove();
+    };
+  }, []);
+  return reduce;
+}
+
+/** Looping value 0 → 1. Each spinner part interpolates it. */
+function useLoop(duration: number, easing: (t: number) => number, native: boolean, running = true) {
+  const v = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    v.setValue(0);
+    if (!running) return;
+    const loop = Animated.loop(
+      Animated.timing(v, {
+        toValue: 1,
+        duration,
+        easing,
+        useNativeDriver: native,
+      }),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [v, duration, easing, native, running]);
+  return v;
+}
+
+const linear = Easing.linear;
+const sine = Easing.inOut(Easing.sin);
+
+/**
+ * Pre-samples an eased piecewise curve (each segment eased like `interpolate({ easing })`) so it can
+ * run on the native driver, which doesn't support `easing` on interpolations.
+ */
+function eased(points: number[], values: number[], ease: (t: number) => number, steps = 12) {
+  const inputRange: number[] = [];
+  const outputRange: number[] = [];
+  for (let i = 0; i < points.length - 1; i++) {
+    for (let k = 0; k < steps; k++) {
+      const t = k / steps;
+      inputRange.push(points[i] + (points[i + 1] - points[i]) * t);
+      outputRange.push(values[i] + (values[i + 1] - values[i]) * ease(t));
+    }
+  }
+  inputRange.push(points[points.length - 1]);
+  outputRange.push(values[values.length - 1]);
+  return { inputRange, outputRange };
+}
+
+/**
+ * Loading indicator — a comet arc whose tail fades out and breathes as it spins, or a soft wave of
+ * dots. Optionally shows a label with an animated ellipsis. Rotation runs on the native driver.
+ */
+export function Spinner({
+  variant = 'ring',
+  size = 'md',
+  color,
+  speed = 1,
+  label = 'Loading',
+  labelPosition = 'none',
+  track = false,
+  style,
+}: SpinnerProps) {
+  const { colors } = useKit();
+  const reduce = useReduceMotion();
+  const px = typeof size === 'number' ? size : SIZES[size];
+  const tint = color ?? colors.accent;
+  const Body = BODIES[variant] ?? Ring;
+  const s = Math.max(0.1, speed);
+  const body = <Body size={px} color={tint} speed={s} track={track} reduce={reduce} />;
+
+  if (labelPosition === 'none' || !label) {
+    return (
+      <View
+        accessible
+        accessibilityRole="progressbar"
+        accessibilityLabel={label}
+        accessibilityState={{ busy: true }}
+        style={[styles.root, { width: px, height: px }, style]}
+      >
+        {body}
+      </View>
+    );
+  }
+
+  const bottom = labelPosition === 'bottom';
+  return (
+    <View
+      accessible
+      accessibilityRole="progressbar"
+      accessibilityLabel={label}
+      accessibilityState={{ busy: true }}
+      style={[bottom ? styles.column : styles.inline, { gap: bottom ? 10 : 8 }, style]}
+    >
+      <View style={[styles.root, { width: px, height: px }]}>{body}</View>
+      <Ellipsis
+        text={label}
+        speed={s}
+        reduce={reduce}
+        color={colors.mutedForeground}
+        fontSize={bottom ? 14 : Math.max(13, Math.min(15, px * 0.62))}
+      />
+    </View>
+  );
+}
+
+interface BodyProps {
+  size: number;
+  color: string;
+  speed: number;
+  track: boolean;
+  reduce: boolean;
+}
+
+function Ring({ size, color, speed, track, reduce }: BodyProps) {
+  const stroke = Math.max(2, size / 9);
+  const r = (size - stroke) / 2;
+  const c = 2 * Math.PI * r;
+  // Native: a steady spin plus an eased surge on a nested view. JS: the arc length breathing on the SVG.
+  const spin = useLoop(1100 / speed, linear, true);
+  const lunge = useLoop(1500 / speed, linear, true, !reduce);
+  const breath = useLoop(1500 / speed, linear, false, !reduce);
+
+  const rotate = spin.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  });
+  // The head races ahead while the arc grows, then eases while the tail catches up.
+  const surge = eased([0, 0.5, 1], [0, 290, 360], sine);
+  const rotateSurge = lunge.interpolate({ inputRange: surge.inputRange, outputRange: surge.outputRange.map((d) => `${d}deg`) });
+  // Arc length breathes 14% → 62% → 14% of the circle.
+  const min = c * 0.14;
+  const max = c * 0.62;
+  const steady = c * 0.36;
+
+  return (
+    <Animated.View style={{ width: size, height: size, transform: [{ rotate }] }}>
+      <Animated.View style={[StyleSheet.absoluteFill, { transform: [{ rotate: rotateSurge }] }]}>
+        {/* Mirrored so the dash grows backwards from a fixed head at the path start. */}
+        <View style={styles.mirror}>
+          <Svg width={size} height={size}>
+            {track ? (
+              <Circle cx={size / 2} cy={size / 2} r={r} stroke={alpha(color, 0.14)} strokeWidth={stroke} fill="none" />
+            ) : null}
+            {Array.from({ length: TAIL }, (_, k) => {
+              // k = 0 is the full tail (faintest layer), k = TAIL - 1 the solid head.
+              const part = (TAIL - k) / TAIL;
+              const headLayer = k === TAIL - 1;
+              const longest = max * part;
+              const offset = reduce
+                ? longest - steady * part
+                : breath.interpolate({
+                    inputRange: [0, 0.5, 1],
+                    outputRange: [longest - min * part, 0, longest - min * part],
+                    easing: sine,
+                  });
+              return (
+                <AnimatedCircle
+                  key={k}
+                  cx={size / 2}
+                  cy={size / 2}
+                  r={r}
+                  stroke={color}
+                  strokeOpacity={headLayer ? 1 : 0.2}
+                  strokeWidth={stroke}
+                  strokeLinecap="round"
+                  strokeDasharray={`${longest} ${c * 2}`}
+                  strokeDashoffset={offset}
+                  fill="none"
+                />
+              );
+            })}
+          </Svg>
+        </View>
+      </Animated.View>
+    </Animated.View>
+  );
+}
+
+function Dots({ size, color, speed, reduce }: BodyProps) {
+  const t = useLoop(1200 / speed, linear, true, !reduce);
+  const dot = size / 4.2;
+  return (
+    <View style={[styles.row, { gap: dot / 2.2 }]}>
+      {[0, 1, 2].map((i) => {
+        // A smooth wave: each dot swells, brightens and lifts slightly during its slice of the cycle.
+        const s = i * 0.16;
+        const range = {
+          inputRange: [0, s, s + 0.22, s + 0.44, 1],
+          easing: sine,
+        };
+        return (
+          <Animated.View
+            key={i}
+            style={{
+              width: dot,
+              height: dot,
+              borderRadius: dot / 2,
+              backgroundColor: color,
+              opacity: reduce
+                ? 0.4 + i * 0.3
+                : t.interpolate({
+                    ...range,
+                    outputRange: [0.35, 0.35, 1, 0.35, 0.35],
+                  }),
+              transform: reduce
+                ? []
+                : [
+                    {
+                      translateY: t.interpolate({
+                        ...range,
+                        outputRange: [0, 0, -size / 9, 0, 0],
+                      }),
+                    },
+                    {
+                      scale: t.interpolate({
+                        ...range,
+                        outputRange: [0.65, 0.65, 1.1, 0.65, 0.65],
+                      }),
+                    },
+                  ],
+            }}
+          />
+        );
+      })}
+    </View>
+  );
+}
+
+/** Label whose three trailing dots fade in one after another (native opacity). */
+function Ellipsis({
+  text,
+  speed,
+  reduce,
+  color,
+  fontSize,
+}: {
+  text: string;
+  speed: number;
+  reduce: boolean;
+  color: string;
+  fontSize: number;
+}) {
+  const t = useLoop(1400 / speed, linear, true, !reduce);
+  const base = text.replace(/(…|\.{1,3})\s*$/, '');
+  return (
+    <View style={styles.ellipsis}>
+      <Text style={[styles.label, { color, fontSize }]}>{base}</Text>
+      {[0, 1, 2].map((i) => (
+        <Animated.Text
+          key={i}
+          style={{
+            color,
+            fontSize,
+            fontWeight: '400',
+            opacity: reduce
+              ? 1
+              : t.interpolate({
+                  inputRange: [0, 0.15 + i * 0.18, 0.3 + i * 0.18, 0.85, 1],
+                  outputRange: [0, 0, 1, 1, 0],
+                }),
+          }}
+        >
+          .
+        </Animated.Text>
+      ))}
+    </View>
+  );
+}
+
+const BODIES: Record<SpinnerVariant, (p: BodyProps) => React.JSX.Element> = {
+  ring: Ring,
+  dots: Dots,
+};
+
+const styles = StyleSheet.create({
+  root: { alignItems: 'center', justifyContent: 'center' },
+  row: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center' },
+  column: { flexDirection: 'column', alignItems: 'center' },
+  inline: { flexDirection: 'row', alignItems: 'center' },
+  mirror: { transform: [{ scaleX: -1 }] },
+  ellipsis: { flexDirection: 'row', alignItems: 'baseline', flexShrink: 1 },
+  label: { fontWeight: '400', flexShrink: 1 },
+});