@expokit/cli 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,18 @@
+{
+  "name": "progress-steps",
+  "type": "component",
+  "title": "Progress Steps",
+  "description": "Multi-step progress for checkout and onboarding. Completed steps pop and draw their check, the current step glows with a breathing ring, upcoming steps stay hollow; advance and the connector pours the accent into the next step with a selection tick. Horizontal with labels, vertical with descriptions, or a compact \"Step 2 of 4\" segmented bar.",
+  "tier": "free",
+  "dependencies": [
+    "react-native-svg",
+    "expo-haptics"
+  ],
+  "registryDependencies": [
+    "kit"
+  ],
+  "sharedFiles": [
+    "lib/kit.tsx"
+  ],
+  "filesDir": "progress-steps/files"
+}

package/registry/progress.json

@@ -0,0 +1,17 @@
+{
+  "name": "progress",
+  "type": "component",
+  "title": "Progress",
+  "description": "Solid bar in the accent colour with a soft glowing head that rides the fill (or sweeps when indeterminate, or carries animated stripes), an SVG ring with a glowing arc tip whose percentage counts up and morphs into a drawn check, and segments that pop as they fill while the current step pulses. Reaching max plays a short success flash.",
+  "tier": "free",
+  "dependencies": [
+    "react-native-svg"
+  ],
+  "registryDependencies": [
+    "kit"
+  ],
+  "sharedFiles": [
+    "lib/kit.tsx"
+  ],
+  "filesDir": "progress/files"
+}

package/registry/radio-group/files/src/components/ui/radio-group.tsx

@@ -0,0 +1,327 @@
+import * as Haptics from 'expo-haptics';
+import React, { useEffect, useRef, useState } from 'react';
+import { Animated, Pressable, StyleSheet, Text, View, type StyleProp, type ViewStyle } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+
+import { alpha, motion, readableOn, useKit } from '@/lib/kit';
+
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+const CHECK = 'M5 12.5l4.5 4.5L19 7.5';
+const CHECK_LEN = 24;
+
+export type RadioGroupVariant = 'default' | 'card' | 'segmented-list';
+
+export interface RadioOption {
+  value: string;
+  label: string;
+  description?: string;
+  /** Leading icon or emoji (card and segmented-list variants). */
+  icon?: React.ReactNode;
+  /** Trailing text, e.g. a price ("₹499/mo"). */
+  hint?: string;
+  disabled?: boolean;
+}
+
+export interface RadioGroupProps {
+  options: RadioOption[];
+  /** Controlled selection. */
+  value?: string;
+  /** Initial selection when uncontrolled. */
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  variant?: RadioGroupVariant;
+  direction?: 'vertical' | 'horizontal';
+  /** Selected colour (default: theme accent). */
+  accent?: string;
+  disabled?: boolean;
+  /** Selection tick on change (default true). */
+  haptics?: boolean;
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Single-choice list. The dot springs in with a ripple, cards light up their border and pop a
+ * check badge that draws itself, and the grouped list draws a tick next to the chosen row.
+ */
+export function RadioGroup({
+  options,
+  value,
+  defaultValue,
+  onValueChange,
+  variant = 'default',
+  direction = 'vertical',
+  accent,
+  disabled,
+  haptics = true,
+  accessibilityLabel,
+  style,
+}: RadioGroupProps) {
+  const { colors, radius } = useKit();
+  const tint = accent ?? colors.accent;
+  const [inner, setInner] = useState(defaultValue);
+  const selected = value ?? inner;
+  const horizontal = direction === 'horizontal';
+
+  const select = (next: string) => {
+    if (next === selected) return;
+    if (haptics) Haptics.selectionAsync().catch(() => {});
+    if (value === undefined) setInner(next);
+    onValueChange?.(next);
+  };
+
+  const list = variant === 'segmented-list';
+
+  return (
+    <View
+      accessibilityRole="radiogroup"
+      accessibilityLabel={accessibilityLabel}
+      style={[
+        horizontal ? styles.horizontal : styles.vertical,
+        variant === 'default' && { gap: horizontal ? 20 : 14 },
+        variant === 'card' && { gap: 10 },
+        list && [styles.list, { borderRadius: radius.lg, borderColor: colors.border, backgroundColor: colors.card }],
+        style,
+      ]}
+    >
+      {options.map((o, i) => (
+        <RadioItem
+          key={o.value}
+          option={o}
+          active={o.value === selected}
+          onPress={() => select(o.value)}
+          variant={variant}
+          horizontal={horizontal}
+          first={i === 0}
+          tint={tint}
+          disabled={disabled || o.disabled}
+        />
+      ))}
+    </View>
+  );
+}
+
+interface RadioItemProps {
+  option: RadioOption;
+  active: boolean;
+  onPress: () => void;
+  variant: RadioGroupVariant;
+  horizontal: boolean;
+  first: boolean;
+  tint: string;
+  disabled?: boolean;
+}
+
+function RadioItem({ option, active, onPress, variant, horizontal, first, tint, disabled }: RadioItemProps) {
+  const { colors, radius } = useKit();
+  // p: colours + svg (JS driver). dot: scale/opacity pops (native). press: press feedback (native).
+  // ripple: a ring that expands and fades when the item gets selected, 0 → 1 (native, rests at 1).
+  const p = useRef(new Animated.Value(active ? 1 : 0)).current;
+  const dot = useRef(new Animated.Value(active ? 1 : 0)).current;
+  const press = useRef(new Animated.Value(1)).current;
+  const ripple = useRef(new Animated.Value(1)).current;
+  const mounted = useRef(false);
+
+  useEffect(() => {
+    Animated.spring(p, { toValue: active ? 1 : 0, useNativeDriver: false, ...motion.snappy }).start();
+    Animated.spring(dot, { toValue: active ? 1 : 0, useNativeDriver: true, ...motion.bouncy }).start();
+    if (active && mounted.current) {
+      ripple.setValue(0);
+      Animated.timing(ripple, { toValue: 1, duration: 560, useNativeDriver: true }).start();
+    }
+    mounted.current = true;
+  }, [active, p, dot, ripple]);
+
+  const rippleStyle = {
+    backgroundColor: alpha(tint, 0.35),
+    opacity: ripple.interpolate({ inputRange: [0, 1], outputRange: [1, 0] }),
+    transform: [{ scale: ripple.interpolate({ inputRange: [0, 1], outputRange: [1, 2.3] }) }],
+  };
+
+  const pressTo = (to: number) =>
+    Animated.spring(press, { toValue: to, useNativeDriver: true, ...(to < 1 ? motion.snappy : motion.bouncy) }).start();
+
+  const fg = colors.foreground;
+  const muted = colors.mutedForeground;
+  const a11y = {
+    accessibilityRole: 'radio' as const,
+    accessibilityState: { checked: active, disabled: !!disabled },
+    accessibilityLabel: option.label,
+    accessibilityHint: option.description,
+    disabled,
+    onPress,
+  };
+
+  const text = (
+    <View style={styles.text}>
+      <Text numberOfLines={2} style={[styles.label, { color: fg }]}>
+        {option.label}
+      </Text>
+      {option.description ? <Text style={[styles.description, { color: muted }]}>{option.description}</Text> : null}
+    </View>
+  );
+
+  if (variant === 'card') {
+    const lit = (from: string, to: string) => p.interpolate({ inputRange: [0, 1], outputRange: [from, to], extrapolate: 'clamp' });
+    const hint = option.hint ? (
+      <Animated.Text style={[styles.hint, horizontal && styles.hintColumn, { color: lit(fg, tint) }]}>{option.hint}</Animated.Text>
+    ) : null;
+    return (
+      <Animated.View style={[horizontal && styles.flex, { opacity: disabled ? 0.5 : 1, transform: [{ scale: press }] }]}>
+        <Pressable {...a11y} onPressIn={() => pressTo(0.97)} onPressOut={() => pressTo(1)} style={styles.flexGrow}>
+          {/* Focus ring: a soft accent glow just outside the selected card. */}
+          <Animated.View
+            pointerEvents="none"
+            style={[styles.glow, { borderRadius: radius.lg + 4, borderColor: alpha(tint, 0.2), opacity: p }]}
+          />
+          <Animated.View
+            style={[
+              styles.card,
+              horizontal && styles.cardColumn,
+              {
+                borderRadius: radius.lg,
+                borderColor: lit(colors.border, tint),
+                backgroundColor: lit(colors.card, alpha(tint, 0.08)),
+              },
+            ]}
+          >
+            {option.icon ? (
+              <Animated.View style={[styles.cardIcon, { borderRadius: radius.md, backgroundColor: lit(colors.muted, alpha(tint, 0.16)) }]}>
+                {option.icon}
+              </Animated.View>
+            ) : null}
+            <View style={[styles.text, horizontal && styles.cardTextColumn]}>
+              <Text numberOfLines={2} style={[styles.label, { color: fg }]}>
+                {option.label}
+              </Text>
+              {option.description ? <Text style={[styles.description, { color: muted }]}>{option.description}</Text> : null}
+              {horizontal ? hint : null}
+            </View>
+            {horizontal ? null : hint}
+            <View style={[styles.badgeSlot, horizontal && styles.badgeCorner]}>
+              <View style={[styles.badgeRing, { borderColor: colors.input }]} />
+              <Animated.View pointerEvents="none" style={[styles.ripple, rippleStyle]} />
+              <Animated.View
+                style={[styles.badge, { backgroundColor: tint, opacity: dot, transform: [{ scale: dot }] }]}
+              >
+                <Svg width={14} height={14} viewBox="0 0 24 24">
+                  <AnimatedPath
+                    d={CHECK}
+                    stroke={readableOn(tint)}
+                    strokeWidth={3.2}
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    fill="none"
+                    strokeDasharray={CHECK_LEN}
+                    strokeDashoffset={p.interpolate({ inputRange: [0.3, 1], outputRange: [CHECK_LEN, 0], extrapolate: 'clamp' }) as unknown as number}
+                  />
+                </Svg>
+              </Animated.View>
+            </View>
+          </Animated.View>
+        </Pressable>
+      </Animated.View>
+    );
+  }
+
+  if (variant === 'segmented-list') {
+    return (
+      <Pressable
+        {...a11y}
+        style={({ pressed }) => [
+          styles.listRow,
+          horizontal ? styles.flex : null,
+          !first && (horizontal ? styles.dividerLeft : styles.dividerTop),
+          !first && { borderColor: colors.border },
+          { backgroundColor: pressed ? colors.muted : 'transparent', opacity: disabled ? 0.5 : 1 },
+        ]}
+      >
+        <Animated.View pointerEvents="none" style={[StyleSheet.absoluteFill, { backgroundColor: alpha(tint, 0.08), opacity: p }]} />
+        {option.icon ? <View style={styles.listIcon}>{option.icon}</View> : null}
+        <View style={styles.text}>
+          <Animated.Text
+            numberOfLines={1}
+            style={[styles.label, { color: p.interpolate({ inputRange: [0, 1], outputRange: [fg, tint], extrapolate: 'clamp' }) }]}
+          >
+            {option.label}
+          </Animated.Text>
+          {option.description ? <Text style={[styles.description, { color: muted }]}>{option.description}</Text> : null}
+        </View>
+        <Svg width={20} height={20} viewBox="0 0 24 24">
+          <AnimatedPath
+            d={CHECK}
+            stroke={tint}
+            strokeWidth={2.8}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            fill="none"
+            strokeDasharray={CHECK_LEN}
+            strokeDashoffset={p.interpolate({ inputRange: [0, 1], outputRange: [CHECK_LEN, 0], extrapolate: 'clamp' }) as unknown as number}
+          />
+        </Svg>
+      </Pressable>
+    );
+  }
+
+  return (
+    <Pressable
+      {...a11y}
+      hitSlop={8}
+      onPressIn={() => pressTo(0.86)}
+      onPressOut={() => pressTo(1)}
+      style={[styles.row, horizontal && styles.rowCompact, { opacity: disabled ? 0.5 : 1 }]}
+    >
+      <Animated.View style={[styles.ringSlot, { transform: [{ scale: press }] }]}>
+        <Animated.View pointerEvents="none" style={[styles.ripple, rippleStyle]} />
+        <Animated.View
+          style={[
+            styles.ring,
+            {
+              borderColor: p.interpolate({ inputRange: [0, 1], outputRange: [colors.input, tint], extrapolate: 'clamp' }),
+              backgroundColor: p.interpolate({ inputRange: [0, 1], outputRange: [colors.card, tint], extrapolate: 'clamp' }),
+            },
+          ]}
+        >
+          <Animated.View style={[styles.dot, { backgroundColor: readableOn(tint), opacity: dot, transform: [{ scale: dot }] }]} />
+        </Animated.View>
+      </Animated.View>
+      {horizontal && !option.description ? (
+        <Text style={[styles.label, { color: fg }]}>{option.label}</Text>
+      ) : (
+        text
+      )}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  vertical: { flexDirection: 'column' },
+  horizontal: { flexDirection: 'row', flexWrap: 'wrap' },
+  flex: { flex: 1, minWidth: 0 },
+  flexGrow: { flexGrow: 1 },
+  row: { flexDirection: 'row', alignItems: 'flex-start', gap: 12 },
+  rowCompact: { alignItems: 'center' },
+  ring: { width: 22, height: 22, borderRadius: 11, borderWidth: 1.5, alignItems: 'center', justifyContent: 'center' },
+  dot: { width: 8, height: 8, borderRadius: 4 },
+  ringSlot: { alignItems: 'center', justifyContent: 'center' },
+  ripple: { position: 'absolute', width: 22, height: 22, borderRadius: 11 },
+  text: { flex: 1, minWidth: 0 },
+  label: { fontSize: 15.5, fontWeight: '400', lineHeight: 21 },
+  description: { fontSize: 13, lineHeight: 18, marginTop: 2 },
+  hint: { fontSize: 16, fontWeight: '400', fontVariant: ['tabular-nums'] },
+  hintColumn: { marginTop: 8 },
+  card: { flexDirection: 'row', alignItems: 'center', gap: 14, borderWidth: 1.5, padding: 16, flexGrow: 1 },
+  glow: { position: 'absolute', top: -4, left: -4, right: -4, bottom: -4, borderWidth: 3 },
+  cardColumn: { flexDirection: 'column', alignItems: 'flex-start', gap: 10, paddingTop: 14 },
+  cardTextColumn: { flex: 0, alignSelf: 'stretch', paddingRight: 18 },
+  cardIcon: { width: 42, height: 42, alignItems: 'center', justifyContent: 'center' },
+  badgeSlot: { width: 22, height: 22, alignItems: 'center', justifyContent: 'center' },
+  badgeCorner: { position: 'absolute', top: 12, right: 12 },
+  badgeRing: { position: 'absolute', width: 22, height: 22, borderRadius: 11, borderWidth: 1.5 },
+  badge: { width: 22, height: 22, borderRadius: 11, alignItems: 'center', justifyContent: 'center' },
+  list: { borderWidth: StyleSheet.hairlineWidth, overflow: 'hidden' },
+  listRow: { flexDirection: 'row', alignItems: 'center', gap: 12, minHeight: 50, paddingHorizontal: 16, paddingVertical: 12 },
+  listIcon: { width: 24, alignItems: 'center' },
+  dividerTop: { borderTopWidth: StyleSheet.hairlineWidth },
+  dividerLeft: { borderLeftWidth: StyleSheet.hairlineWidth },
+});