@expokit/cli 0.0.0-stage → 0.2.0

package/registry/otp-input/files/src/components/ui/otp-input.tsx

@@ -0,0 +1,380 @@
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  Animated,
+  Easing,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import Svg, { Circle, Path } from 'react-native-svg';
+
+import { alpha, motion, useKit } from '@/lib/kit';
+
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+const CHECK_LEN = 16;
+
+export type OtpInputVariant = 'box' | 'underline' | 'pill';
+
+export interface OtpInputProps {
+  /** Number of cells (default 6). */
+  length?: number;
+  value?: string;
+  onChangeText?: (code: string) => void;
+  /** Fires once every cell is filled (also after pasting a full code). */
+  onComplete?: (code: string) => void;
+  /** Shakes the row and turns it the danger colour. */
+  error?: boolean;
+  /** Message shown under the cells while `error` is set. */
+  errorText?: string;
+  /** Cells turn the success colour with a staggered pulse. */
+  success?: boolean;
+  /** Message shown under the cells while `success` is set. */
+  successText?: string;
+  /** Hint shown under the cells otherwise. */
+  helperText?: string;
+  /** Show dots instead of digits. */
+  secure?: boolean;
+  autoFocus?: boolean;
+  disabled?: boolean;
+  /** Active cell colour (default: theme accent). */
+  accent?: string;
+  /** 'box' cells, 'underline' bars, or round 'pill' cells. */
+  variant?: OtpInputVariant;
+  /** Draws a dash after this many cells, e.g. 3 → `123 – 456`. */
+  separatorAfter?: number;
+  /** Largest cell width in points; cells shrink below it to fit the row (default 52). */
+  maxCellSize?: number;
+  style?: StyleProp<ViewStyle>;
+}
+
+type CellState = 'idle' | 'error' | 'success';
+
+const GAP = 8;
+/** react-native-web draws the browser focus outline; our border + halo is the focus indicator. */
+const webNoOutline = Platform.OS === 'web' ? ({ outlineStyle: 'none', outlineWidth: 0 } as object) : null;
+const SEP = 22;
+
+/**
+ * One-time-code field. Cells size themselves to the available width, the active cell glows
+ * with a focus halo and a blinking caret, digits pop in, a pasted code fills every cell,
+ * errors shake the row and success pulses across the cells.
+ */
+export function OtpInput({
+  length = 6,
+  value,
+  onChangeText,
+  onComplete,
+  error,
+  errorText,
+  success,
+  successText,
+  helperText,
+  secure,
+  autoFocus,
+  disabled,
+  accent,
+  variant = 'box',
+  separatorAfter,
+  maxCellSize = 52,
+  style,
+}: OtpInputProps) {
+  const { colors } = useKit();
+  const input = useRef<TextInput>(null);
+  const [inner, setInner] = useState('');
+  const [focused, setFocused] = useState(false);
+  const [width, setWidth] = useState(0);
+  const code = (value ?? inner).slice(0, length);
+  const shake = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    if (!error) return;
+    shake.setValue(0);
+    Animated.sequence(
+      [10, -9, 7, -5, 3, 0].map((x) => Animated.timing(shake, { toValue: x, duration: 45, useNativeDriver: true }))
+    ).start();
+  }, [error, shake]);
+
+  const change = (raw: string) => {
+    // No maxLength on the input, so pasting "123-456" or a longer SMS snippet still fills every cell.
+    const next = raw.replace(/\D/g, '').slice(0, length);
+    if (next === code) return;
+    if (value === undefined) setInner(next);
+    onChangeText?.(next);
+    if (next.length === length && code.length !== length) onComplete?.(next);
+  };
+
+  const sep = separatorAfter && separatorAfter > 0 && separatorAfter < length ? separatorAfter : 0;
+  // 4pt each side leaves room for the focus halo.
+  const free = width - 8 - GAP * (length - 1) - (sep ? SEP : 0);
+  const cell = width ? Math.max(24, Math.min(maxCellSize, Math.floor(free / length))) : maxCellSize;
+  const cellH = variant === 'pill' ? cell : variant === 'underline' ? Math.round(cell * 1.04) : Math.round(cell * 1.16);
+
+  const state: CellState = error ? 'error' : success ? 'success' : 'idle';
+  const tone = error ? colors.danger : success ? colors.success : accent ?? colors.accent;
+  const activeIndex = Math.min(code.length, length - 1);
+  const a11yLabel = `One-time code, ${length} digits`;
+  const message = error ? errorText : success ? successText : helperText;
+
+  return (
+    <View
+      onLayout={(e) => setWidth(Math.floor(e.nativeEvent.layout.width))}
+      style={[styles.root, disabled && styles.disabled, style]}
+    >
+      <Animated.View style={{ transform: [{ translateX: shake }] }}>
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={a11yLabel}
+          accessibilityHint="Activates the code field"
+          accessibilityState={{ disabled: !!disabled }}
+          disabled={disabled}
+          onPress={() => input.current?.focus()}
+          style={styles.row}
+        >
+          {Array.from({ length }, (_, i) => (
+            <React.Fragment key={i}>
+              {sep && i === sep ? (
+                <View style={[styles.sep, { width: SEP - GAP, height: cellH }]}>
+                  <View style={[styles.dash, { backgroundColor: colors.mutedForeground }]} />
+                </View>
+              ) : null}
+              <Cell
+                index={i}
+                char={code[i]}
+                secure={secure}
+                active={focused && i === activeIndex}
+                tone={tone}
+                state={state}
+                variant={variant}
+                w={cell}
+                h={cellH}
+              />
+            </React.Fragment>
+          ))}
+        </Pressable>
+      </Animated.View>
+      <TextInput
+        ref={input}
+        value={code}
+        onChangeText={change}
+        onFocus={() => setFocused(true)}
+        onBlur={() => setFocused(false)}
+        editable={!disabled}
+        keyboardType="number-pad"
+        textContentType="oneTimeCode"
+        autoComplete="one-time-code"
+        autoFocus={autoFocus}
+        caretHidden
+        accessibilityLabel={a11yLabel}
+        accessibilityHint={
+          error ? `Invalid code. Enter your ${length}-digit verification code` : `Enter your ${length}-digit verification code`
+        }
+        importantForAccessibility="yes"
+        style={[styles.hidden, webNoOutline]}
+      />
+      {message ? <Message text={message} kind={state} /> : null}
+    </View>
+  );
+}
+
+function Cell({
+  index,
+  char,
+  secure,
+  active,
+  tone,
+  state,
+  variant,
+  w,
+  h,
+}: {
+  index: number;
+  char?: string;
+  secure?: boolean;
+  active: boolean;
+  tone: string;
+  state: CellState;
+  variant: OtpInputVariant;
+  w: number;
+  h: number;
+}) {
+  const { colors, radius } = useKit();
+  const filled = !!char;
+  // Native driver: digit pop, caret blink, halo, success pulse.
+  const pop = useRef(new Animated.Value(filled ? 1 : 0)).current;
+  const caret = useRef(new Animated.Value(0)).current;
+  const halo = useRef(new Animated.Value(0)).current;
+  const pulse = useRef(new Animated.Value(0)).current;
+  // JS driver: border / fill colours.
+  const ring = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    if (char) {
+      pop.setValue(0.3);
+      Animated.spring(pop, { toValue: 1, useNativeDriver: true, ...motion.bouncy }).start();
+    } else {
+      Animated.timing(pop, { toValue: 0, duration: 110, useNativeDriver: true }).start();
+    }
+  }, [char, pop]);
+
+  useEffect(() => {
+    const to = active ? 1 : 0;
+    Animated.spring(halo, { toValue: to, useNativeDriver: true, ...motion.snappy }).start();
+    Animated.timing(ring, { toValue: to, duration: motion.fast, useNativeDriver: false }).start();
+    if (!active) return;
+    caret.setValue(1);
+    const blink = Animated.loop(
+      Animated.sequence([
+        Animated.delay(450),
+        Animated.timing(caret, { toValue: 0, duration: 140, useNativeDriver: true }),
+        Animated.delay(300),
+        Animated.timing(caret, { toValue: 1, duration: 140, useNativeDriver: true }),
+      ])
+    );
+    blink.start();
+    return () => blink.stop();
+  }, [active, halo, ring, caret]);
+
+  useEffect(() => {
+    if (state !== 'success') return;
+    pulse.setValue(0);
+    Animated.sequence([
+      Animated.delay(index * 55),
+      Animated.timing(pulse, { toValue: 1, duration: 140, easing: Easing.out(Easing.quad), useNativeDriver: true }),
+      Animated.spring(pulse, { toValue: 0, useNativeDriver: true, ...motion.bouncy }),
+    ]).start();
+  }, [state, index, pulse]);
+
+  const underline = variant === 'underline';
+  const pill = variant === 'pill';
+  // Box cells follow KitProvider radius; pill stays round; underline has no corners.
+  const r = pill ? h / 2 : underline ? 0 : radius.md;
+  const rest = pill ? 'transparent' : filled ? alpha(colors.foreground, 0.32) : colors.input;
+  const borderColor =
+    state !== 'idle' ? tone : ring.interpolate({ inputRange: [0, 1], outputRange: [rest, tone] });
+  const fill =
+    state === 'success'
+      ? alpha(colors.success, 0.12)
+      : state === 'error'
+        ? alpha(colors.danger, 0.08)
+        : underline
+          ? 'transparent'
+          : pill
+            ? colors.muted
+            : colors.card;
+  const fg = state === 'idle' ? colors.foreground : tone;
+  const font = Math.round(w * 0.46);
+  const dot = Math.max(8, Math.round(w * 0.22));
+
+  return (
+    <Animated.View
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+      style={{
+        width: w,
+        height: h,
+        transform: [{ scale: pulse.interpolate({ inputRange: [0, 1], outputRange: [1, 1.1] }) }],
+      }}
+    >
+      <Animated.View
+        pointerEvents="none"
+        style={[
+          styles.halo,
+          {
+            borderRadius: underline ? 10 : r + 4,
+            backgroundColor: alpha(tone, 0.18),
+            opacity: halo,
+            transform: [{ scale: halo.interpolate({ inputRange: [0, 1], outputRange: [0.86, 1] }) }],
+          },
+        ]}
+      />
+      <Animated.View
+        style={[
+          styles.cell,
+          underline
+            ? { borderBottomWidth: 2.5, borderColor, backgroundColor: fill }
+            : { borderWidth: 1.5, borderRadius: r, borderColor, backgroundColor: fill },
+        ]}
+      >
+        {filled ? (
+          <Animated.View style={{ opacity: pop, transform: [{ scale: pop }] }}>
+            {secure ? (
+              <View style={{ width: dot, height: dot, borderRadius: dot / 2, backgroundColor: fg }} />
+            ) : (
+              <Text style={[styles.char, { color: fg, fontSize: font, lineHeight: Math.round(font * 1.2) }]}>{char}</Text>
+            )}
+          </Animated.View>
+        ) : active ? (
+          <Animated.View style={[styles.caret, { height: Math.round(h * 0.42), backgroundColor: tone, opacity: caret }]} />
+        ) : null}
+      </Animated.View>
+    </Animated.View>
+  );
+}
+
+/** Helper / error / success line that fades and slides in whenever its text changes. */
+function Message({ text, kind }: { text: string; kind: CellState }) {
+  const { colors } = useKit();
+  const enter = useRef(new Animated.Value(0)).current;
+  const draw = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    enter.setValue(0);
+    Animated.timing(enter, { toValue: 1, duration: motion.normal, easing: Easing.out(Easing.cubic), useNativeDriver: true }).start();
+    draw.setValue(0);
+    if (kind === 'success') {
+      Animated.timing(draw, { toValue: 1, duration: 360, delay: 120, easing: Easing.out(Easing.cubic), useNativeDriver: false }).start();
+    }
+  }, [text, kind, enter, draw]);
+
+  const color = kind === 'error' ? colors.danger : kind === 'success' ? colors.success : colors.mutedForeground;
+  return (
+    <Animated.View
+      accessibilityLiveRegion="polite"
+      style={[
+        styles.message,
+        { opacity: enter, transform: [{ translateY: enter.interpolate({ inputRange: [0, 1], outputRange: [4, 0] }) }] },
+      ]}
+    >
+      {kind === 'error' ? (
+        <Svg width={14} height={14} viewBox="0 0 24 24" fill="none">
+          <Circle cx={12} cy={12} r={9} stroke={color} strokeWidth={1.8} />
+          <Path d="M12 7.6v5.2M12 16.3v.1" stroke={color} strokeWidth={1.8} strokeLinecap="round" />
+        </Svg>
+      ) : kind === 'success' ? (
+        <Svg width={14} height={14} viewBox="0 0 24 24" fill="none">
+          <Circle cx={12} cy={12} r={9} stroke={color} strokeWidth={1.8} />
+          <AnimatedPath
+            d="M8 12.3l2.7 2.7L16 9.6"
+            stroke={color}
+            strokeWidth={1.8}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeDasharray={CHECK_LEN}
+            strokeDashoffset={draw.interpolate({ inputRange: [0, 1], outputRange: [CHECK_LEN, 0] }) as unknown as number}
+          />
+        </Svg>
+      ) : null}
+      <Text style={[styles.messageText, { color }]}>{text}</Text>
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: { alignSelf: 'stretch' },
+  disabled: { opacity: 0.5 },
+  row: { flexDirection: 'row', gap: GAP, paddingHorizontal: 4, paddingVertical: 4, justifyContent: 'center', alignItems: 'center' },
+  halo: { position: 'absolute', top: -4, left: -4, right: -4, bottom: -4 },
+  cell: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+  char: { fontWeight: '400', fontVariant: ['tabular-nums'], textAlign: 'center' },
+  caret: { width: 2, borderRadius: 1 },
+  sep: { alignItems: 'center', justifyContent: 'center' },
+  dash: { width: 10, height: 2, borderRadius: 1, opacity: 0.6 },
+  message: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 6, marginTop: 6 },
+  messageText: { fontSize: 12.5, lineHeight: 17, fontWeight: '400' },
+  hidden: { position: 'absolute', width: 1, height: 1, opacity: 0 },
+});

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

@@ -0,0 +1,17 @@
+{
+  "name": "otp-input",
+  "type": "component",
+  "title": "OTP Input",
+  "description": "One-time-code cells that size themselves to fit any width. The active cell glows with a soft focus halo and a blinking caret, digits pop in on a spring, a pasted code fills every cell, errors shake the row and success pulses across the cells with a drawn check.",
+  "tier": "free",
+  "dependencies": [
+    "react-native-svg"
+  ],
+  "registryDependencies": [
+    "kit"
+  ],
+  "sharedFiles": [
+    "lib/kit.tsx"
+  ],
+  "filesDir": "otp-input/files"
+}