@expokit/cli 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,222 @@
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { AccessibilityInfo, Animated, Easing, StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
+
+export type ConfettiOrigin = 'top' | 'center' | 'bottom';
+
+export interface ConfettiBurst {
+  /** Where it comes from (default: the `origin` prop). */
+  origin?: ConfettiOrigin;
+  /** For `center`: the burst point in the overlay, in points (default: the middle). */
+  x?: number;
+  y?: number;
+  /** Pieces in this burst (default: the `count` prop). */
+  count?: number;
+  colors?: readonly string[];
+}
+
+export interface ConfettiHandle {
+  /** Fire a burst; bursts can overlap. */
+  burst: (options?: ConfettiBurst) => void;
+}
+
+export interface ConfettiProps {
+  /** Pieces per burst (default 80, max 160). */
+  count?: number;
+  colors?: readonly string[];
+  /** `top` rains down, `center` pops outward, `bottom` fires two cannons from the corners (default "bottom"). */
+  origin?: ConfettiOrigin;
+  /** How long a burst lasts in ms (default 2600). */
+  duration?: number;
+  /** Fire a burst whenever this value changes (not on mount) — no ref needed. */
+  trigger?: unknown;
+  /** Fire once on mount. */
+  autoplay?: boolean;
+  /** Called when a burst has finished. */
+  onDone?: () => void;
+  /** The overlay fills its parent by default; it never takes touches. */
+  style?: StyleProp<ViewStyle>;
+}
+
+const PALETTE = ['#ff3d77', '#ffb000', '#3ddcff', '#7cff6b', '#a855ff', '#ffffff', '#ff7a1a'];
+const SAMPLES = [0, 0.15, 0.3, 0.45, 0.6, 0.75, 0.9, 1];
+
+interface Piece {
+  key: number;
+  color: string;
+  w: number;
+  h: number;
+  round: boolean;
+  xs: number[];
+  ys: number[];
+  spin: [string, string];
+  flip: [string, string];
+}
+
+interface Burst {
+  id: number;
+  t: Animated.Value;
+  pieces: Piece[];
+}
+
+let nextId = 1;
+
+/**
+ * Confetti for the moments that deserve it — a coupon applied, a reward revealed, an order placed.
+ * Every piece flies on a real arc (launch, gravity, drag) and flutters as it falls; one native-driven
+ * animation moves them all. Respects Reduce Motion.
+ */
+export const Confetti = forwardRef<ConfettiHandle, ConfettiProps>(function Confetti(
+  { count = 80, colors = PALETTE, origin = 'bottom', duration = 2600, trigger, autoplay = false, onDone, style },
+  ref
+) {
+  const [size, setSize] = useState({ w: 0, h: 0 });
+  const [bursts, setBursts] = useState<Burst[]>([]);
+  const reduce = useRef(false);
+  const sizeRef = useRef(size);
+  sizeRef.current = size;
+  const latest = useRef({ count, colors, origin, duration, onDone });
+  latest.current = { count, colors, origin, duration, onDone };
+  const pending = useRef<ConfettiBurst[]>([]);
+  const mounted = useRef(true);
+
+  useEffect(() => {
+    mounted.current = true;
+    AccessibilityInfo.isReduceMotionEnabled()
+      .then((r) => (reduce.current = r))
+      .catch(() => {});
+    const sub = AccessibilityInfo.addEventListener('reduceMotionChanged', (r) => (reduce.current = r));
+    return () => {
+      mounted.current = false;
+      sub.remove();
+    };
+  }, []);
+
+  const fire = (opts: ConfettiBurst = {}) => {
+    const { w, h } = sizeRef.current;
+    // Not measured yet (fired on mount): keep it until the first layout.
+    if (!w || !h) {
+      pending.current.push(opts);
+      return;
+    }
+    const cfg = latest.current;
+    const from = opts.origin ?? cfg.origin;
+    const palette = opts.colors ?? cfg.colors;
+    const n = Math.min(160, Math.max(1, Math.round((opts.count ?? cfg.count) * (reduce.current ? 0.25 : 1))));
+    const D = cfg.duration / 1000;
+    const g = h * 1.25; // gravity, points / s²
+    const pieces: Piece[] = [];
+    for (let i = 0; i < n; i++) {
+      let x0: number, y0: number, vx: number, vy: number;
+      if (from === 'top') {
+        x0 = Math.random() * w;
+        y0 = -20 - Math.random() * h * 0.25;
+        vx = (Math.random() - 0.5) * w * 0.25;
+        vy = Math.random() * h * 0.1;
+      } else if (from === 'center') {
+        x0 = opts.x ?? w / 2;
+        y0 = opts.y ?? h / 2;
+        const a = -Math.PI / 2 + (Math.random() - 0.5) * Math.PI * 1.6;
+        const v = (0.45 + Math.random() * 0.75) * Math.max(w, h) * 0.9;
+        vx = Math.cos(a) * v;
+        vy = Math.sin(a) * v;
+      } else {
+        const leftSide = i % 2 === 0;
+        x0 = leftSide ? -6 : w + 6;
+        y0 = h + 6;
+        const a = -Math.PI / 2 + (leftSide ? 1 : -1) * (0.25 + Math.random() * 0.45);
+        const v = (0.75 + Math.random() * 0.55) * h * 1.15;
+        vx = Math.cos(a) * v;
+        vy = Math.sin(a) * v;
+      }
+      // Air drag eases the launch; sideways sway makes paper fall like paper.
+      const drag = 1.6 + Math.random();
+      const sway = (Math.random() - 0.5) * 40;
+      const xs: number[] = [];
+      const ys: number[] = [];
+      for (const p of SAMPLES) {
+        const t = p * D;
+        const k = (1 - Math.exp(-drag * t)) / drag;
+        xs.push(x0 + vx * k + sway * Math.sin(t * 6 + i));
+        ys.push(y0 + vy * k + 0.5 * g * t * t * 0.55);
+      }
+      const round = Math.random() < 0.3;
+      const strip = !round && Math.random() < 0.35;
+      const s0 = Math.round(Math.random() * 360);
+      const turns = (Math.random() < 0.5 ? -1 : 1) * (1 + Math.random() * 2.5);
+      pieces.push({
+        key: i,
+        color: palette[Math.floor(Math.random() * palette.length)],
+        w: round ? 7 : strip ? 4 : 7,
+        h: round ? 7 : strip ? 16 : 11,
+        round,
+        xs,
+        ys,
+        spin: [`${s0}deg`, `${s0 + turns * 360}deg`],
+        flip: ['0deg', `${(2 + Math.random() * 4) * 360}deg`],
+      });
+    }
+    const burst: Burst = { id: nextId++, t: new Animated.Value(0), pieces };
+    setBursts((b) => [...b, burst]);
+    Animated.timing(burst.t, { toValue: 1, duration: cfg.duration, easing: Easing.linear, useNativeDriver: true }).start(() => {
+      if (!mounted.current) return;
+      setBursts((b) => b.filter((x) => x.id !== burst.id));
+      latest.current.onDone?.();
+    });
+  };
+  const fireRef = useRef(fire);
+  fireRef.current = fire;
+
+  useImperativeHandle(ref, () => ({ burst: (o) => fireRef.current(o) }), []);
+
+  const first = useRef(true);
+  useEffect(() => {
+    if (first.current) {
+      first.current = false;
+      if (autoplay) fireRef.current();
+      return;
+    }
+    fireRef.current();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [trigger]);
+
+  return (
+    <View
+      pointerEvents="none"
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+      onLayout={(e) => {
+        const { width, height } = e.nativeEvent.layout;
+        if (width === size.w && height === size.h) return;
+        sizeRef.current = { w: width, h: height };
+        setSize({ w: width, h: height });
+        const queued = pending.current.splice(0);
+        queued.forEach((o) => fireRef.current(o));
+      }}
+      style={[StyleSheet.absoluteFill, { overflow: 'hidden' }, style]}
+    >
+      {bursts.map((b) =>
+        b.pieces.map((p) => (
+          <Animated.View
+            key={`${b.id}-${p.key}`}
+            style={{
+              position: 'absolute',
+              left: -p.w / 2,
+              top: -p.h / 2,
+              width: p.w,
+              height: p.h,
+              borderRadius: p.round ? p.w / 2 : 1.5,
+              backgroundColor: p.color,
+              opacity: b.t.interpolate({ inputRange: [0, 0.8, 1], outputRange: [1, 1, 0] }),
+              transform: [
+                { translateX: b.t.interpolate({ inputRange: SAMPLES, outputRange: p.xs }) },
+                { translateY: b.t.interpolate({ inputRange: SAMPLES, outputRange: p.ys }) },
+                { rotate: b.t.interpolate({ inputRange: [0, 1], outputRange: p.spin }) },
+                { rotateX: b.t.interpolate({ inputRange: [0, 1], outputRange: p.flip }) },
+              ],
+            }}
+          />
+        ))
+      )}
+    </View>
+  );
+});

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

@@ -0,0 +1,15 @@
+{
+  "name": "confetti",
+  "type": "component",
+  "title": "Confetti",
+  "description": "Confetti for the moments that deserve it — a coupon applied, a reward revealed, an order placed. Pieces fly on real arcs (launch, gravity, air drag) and flutter as they fall; one native-driven animation moves them all. Cannons, rain or a pop under your finger; respects Reduce Motion.",
+  "tier": "free",
+  "dependencies": [],
+  "registryDependencies": [
+    "kit"
+  ],
+  "sharedFiles": [
+    "lib/kit.tsx"
+  ],
+  "filesDir": "confetti/files"
+}