@expokit/cli 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,18 @@
+{
+  "name": "avatar",
+  "type": "component",
+  "title": "Avatar",
+  "description": "Photo that fades in over soft tinted initials (hue hashed from the name, ink picked for contrast), presence dots, notification badges and a verified seal cut into the edge, a gapped story ring that cross-fades to “seen”, and an AvatarGroup with cut-out borders, a +N chip and a staggered spring-in.",
+  "tier": "free",
+  "dependencies": [
+    "react-native-svg",
+    "expo-haptics"
+  ],
+  "registryDependencies": [
+    "kit"
+  ],
+  "sharedFiles": [
+    "lib/kit.tsx"
+  ],
+  "filesDir": "avatar/files"
+}

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

@@ -0,0 +1,316 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Animated, Easing, StyleSheet, Text, View, type StyleProp, type ViewStyle } from 'react-native';
+import Svg, { Circle, Path } from 'react-native-svg';
+
+import { alpha, isTextNode, motion, readableOn, type Colors, useKit } from '@/lib/kit';
+
+export type BadgeIconName = 'bell' | 'message' | 'package' | 'cart' | 'heart';
+
+const ICON_STROKE = { strokeWidth: 1.85, strokeLinecap: 'round' as const, strokeLinejoin: 'round' as const, fill: 'none' as const };
+
+/** Line icon for notification anchors and badge labels. */
+export function BadgeIcon({ name, color, size = 22 }: { name: BadgeIconName; color: string; size?: number }) {
+  const p = { ...ICON_STROKE, stroke: color };
+  const body: Record<BadgeIconName, React.ReactNode> = {
+    bell: (
+      <>
+        <Path d="M6 16v-5a6 6 0 0 1 12 0v5l1.5 2h-15z" {...p} />
+        <Path d="M10 21h4" {...p} />
+      </>
+    ),
+    message: (
+      <>
+        <Path d="M5 5h14a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H9l-4 4V7a2 2 0 0 1 2-2z" {...p} />
+      </>
+    ),
+    package: (
+      <>
+        <Path d="M4 8l8-4 8 4v9a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8z" {...p} />
+        <Path d="M4 8l8 4 8-4M12 12v9" {...p} />
+      </>
+    ),
+    cart: (
+      <>
+        <Path d="M6 6h15l-1.5 7H8L6 6z" {...p} />
+        <Circle cx={10} cy={19} r={1.4} fill={color} />
+        <Circle cx={17} cy={19} r={1.4} fill={color} />
+        <Path d="M6 6L5 3H2" {...p} />
+      </>
+    ),
+    heart: <Path d="M12 20.5l-1.1-1C6.1 15.1 3 12.2 3 8.6A4.6 4.6 0 0 1 7.6 4c2 0 3.1 1.2 4.4 2.5C13.3 5.2 14.4 4 16.4 4A4.6 4.6 0 0 1 21 8.6c0 3.6-3.1 6.5-7.9 10.9L12 20.5z" {...p} />,
+  };
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      {body[name]}
+    </Svg>
+  );
+}
+
+export interface BadgeIconTileProps {
+  /** Built-in icon name. */
+  name?: BadgeIconName;
+  /** Your own icon node — overrides `name`. */
+  icon?: React.ReactNode;
+  /** Tile size in points (default 48). */
+  size?: number;
+  /** Glyph colour (default: foreground). */
+  color?: string;
+  /** Tile background (default: muted). */
+  backgroundColor?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** Rounded square anchor for `NotificationBadge` — pass a built-in `name` or your own `icon`. */
+export function BadgeIconTile({ name, icon, size = 48, color, backgroundColor, style }: BadgeIconTileProps) {
+  const { colors, radius } = useKit();
+  const tint = color ?? colors.foreground;
+  const glyph = icon ?? (name ? <BadgeIcon name={name} color={tint} size={Math.round(size * 0.46)} /> : null);
+  return (
+    <View
+      style={[
+        {
+          width: size,
+          height: size,
+          borderRadius: radius.scale(14),
+          backgroundColor: backgroundColor ?? colors.muted,
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+        style,
+      ]}
+    >
+      {glyph}
+    </View>
+  );
+}
+
+export type BadgeVariant = 'solid' | 'soft' | 'outline' | 'dot';
+export type BadgeTone = 'neutral' | 'accent' | 'success' | 'warning' | 'danger';
+export type BadgeSize = 'sm' | 'md' | 'lg';
+
+export interface BadgeProps {
+  children: React.ReactNode;
+  variant?: BadgeVariant;
+  tone?: BadgeTone;
+  size?: BadgeSize;
+  /** Custom colour — overrides `tone`. */
+  color?: string;
+  /** Icon or emoji before the label. */
+  icon?: React.ReactNode;
+  /** 'pill' (default) or 'rounded' corners. */
+  shape?: 'pill' | 'rounded';
+  /** Pulse the leading dot (dot variant) — "live" states. */
+  pulse?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+const SIZES: Record<BadgeSize, { h: number; px: number; font: number; dot: number; gap: number }> = {
+  sm: { h: 20, px: 7, font: 11, dot: 6, gap: 4 },
+  md: { h: 24, px: 9, font: 12.5, dot: 7, gap: 5 },
+  lg: { h: 28, px: 11, font: 14, dot: 8, gap: 6 },
+};
+
+function toneColor(colors: Colors, tone: BadgeTone) {
+  return { neutral: colors.mutedForeground, accent: colors.accent, success: colors.success, warning: colors.warning, danger: colors.danger }[tone];
+}
+
+/** Small status label: solid, soft, outline or dot — five tones, three sizes. */
+export function Badge({
+  children,
+  variant = 'soft',
+  tone = 'neutral',
+  size = 'md',
+  color,
+  icon,
+  shape = 'pill',
+  pulse,
+  style,
+}: BadgeProps) {
+  const { colors, radius, dark } = useKit();
+  const s = SIZES[size];
+  const c = color ?? toneColor(colors, tone);
+  const neutral = !color && tone === 'neutral';
+  const pulseV = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    if (!pulse || variant !== 'dot') return;
+    const loop = Animated.loop(
+      Animated.timing(pulseV, { toValue: 1, duration: 1400, easing: Easing.out(Easing.quad), useNativeDriver: true })
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [pulse, variant, pulseV]);
+
+  const look: Record<BadgeVariant, { bg: string; fg: string; border: string }> = {
+    solid: neutral
+      ? { bg: colors.primary, fg: colors.primaryForeground, border: 'transparent' }
+      : { bg: c, fg: color ? readableOn(c) : tone === 'accent' ? colors.accentForeground : readableOn(c), border: 'transparent' },
+    soft: neutral
+      ? { bg: colors.muted, fg: colors.foreground, border: 'transparent' }
+      : { bg: alpha(c, dark ? 0.2 : 0.13), fg: c, border: 'transparent' },
+    outline: neutral
+      ? { bg: 'transparent', fg: colors.foreground, border: colors.border }
+      : { bg: 'transparent', fg: c, border: alpha(c, 0.45) },
+    dot: { bg: 'transparent', fg: colors.foreground, border: colors.border },
+  };
+  const { bg, fg, border } = look[variant];
+  const dotColor = neutral ? colors.mutedForeground : c;
+
+  const label =
+    isTextNode(children) ? (
+      <Text numberOfLines={1} allowFontScaling={false} style={[styles.label, { color: fg, fontSize: s.font }]}>
+        {children}
+      </Text>
+    ) : (
+      children
+    );
+
+  return (
+    <View
+      accessibilityRole="text"
+      style={[
+        styles.base,
+        {
+          height: s.h,
+          paddingHorizontal: s.px,
+          gap: s.gap,
+          backgroundColor: bg,
+          borderColor: border,
+          borderRadius: shape === 'pill' ? radius.capsule(s.h) : radius.sm,
+        },
+        style,
+      ]}
+    >
+      {variant === 'dot' ? (
+        <View style={{ width: s.dot, height: s.dot }}>
+          {pulse ? (
+            <Animated.View
+              style={[
+                styles.fill,
+                {
+                  borderRadius: s.dot,
+                  backgroundColor: dotColor,
+                  opacity: pulseV.interpolate({ inputRange: [0, 1], outputRange: [0.6, 0] }),
+                  transform: [{ scale: pulseV.interpolate({ inputRange: [0, 1], outputRange: [1, 2.6] }) }],
+                },
+              ]}
+            />
+          ) : null}
+          <View style={[styles.fill, { borderRadius: s.dot, backgroundColor: dotColor }]} />
+        </View>
+      ) : null}
+      {icon}
+      {label}
+    </View>
+  );
+}
+
+export interface NotificationBadgeProps {
+  /** The number to show. 0 hides the badge (unless `showZero`). */
+  count?: number;
+  /** Above this, show "99+". */
+  max?: number;
+  /** Just a dot, no number. */
+  dot?: boolean;
+  showZero?: boolean;
+  tone?: BadgeTone;
+  color?: string;
+  size?: 'sm' | 'md';
+  /** What the badge sits on (icon, avatar, button). Omit to render the badge inline. */
+  children?: React.ReactNode;
+  /** Nudge the badge from the top-right corner: [x, y] in points. */
+  offset?: [number, number];
+  style?: StyleProp<ViewStyle>;
+}
+
+/** Count bubble that springs in, pops every time the number changes, and shrinks away at zero. */
+export function NotificationBadge({
+  count = 0,
+  max = 99,
+  dot,
+  showZero,
+  tone = 'danger',
+  color,
+  size = 'md',
+  children,
+  offset = [0, 0],
+  style,
+}: NotificationBadgeProps) {
+  const { colors } = useKit();
+  const c = color ?? toneColor(colors, tone);
+  const fg = !color && tone === 'accent' ? colors.accentForeground : readableOn(c);
+  const visible = count > 0 || !!showZero;
+
+  // Keep the last number on screen while it shrinks away.
+  const [shown, setShown] = useState(count);
+  const show = useRef(new Animated.Value(visible ? 1 : 0)).current;
+  const pop = useRef(new Animated.Value(1)).current;
+  const prev = useRef(count);
+
+  useEffect(() => {
+    if (visible) setShown(count);
+    Animated.spring(show, { toValue: visible ? 1 : 0, useNativeDriver: true, ...motion.bouncy }).start();
+    if (visible && prev.current !== count && prev.current > 0) {
+      pop.setValue(1.35);
+      Animated.spring(pop, { toValue: 1, useNativeDriver: true, damping: 9, stiffness: 320, mass: 0.6 }).start();
+    }
+    prev.current = count;
+  }, [count, visible, show, pop]);
+
+  const h = size === 'sm' ? 18 : 22; // includes the 2pt ring
+  const d = size === 'sm' ? 11 : 13;
+  const text = shown > max ? `${max}+` : String(shown);
+
+  const bubble = (
+    <Animated.View
+      pointerEvents="none"
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+      style={[
+        styles.bubble,
+        dot
+          ? { width: d, height: d, borderRadius: d / 2 }
+          : { minWidth: h, height: h, borderRadius: h / 2, paddingHorizontal: text.length > 1 ? 4 : 0 },
+        {
+          backgroundColor: c,
+          borderColor: colors.background,
+          opacity: show.interpolate({ inputRange: [0, 0.3, 1], outputRange: [0, 1, 1] }),
+          transform: [{ scale: Animated.multiply(show, pop) }],
+        },
+        children
+          ? { position: 'absolute', top: -(dot ? d : h) / 3 + offset[1], right: -(dot ? d : h) / 3 - offset[0] }
+          : null,
+      ]}
+    >
+      {dot ? null : (
+        <Text allowFontScaling={false} numberOfLines={1} style={[styles.count, { color: fg, fontSize: size === 'sm' ? 10 : 11.5 }]}>
+          {text}
+        </Text>
+      )}
+    </Animated.View>
+  );
+
+  const a11y = visible ? (dot ? 'New activity' : `${count} notification${count === 1 ? '' : 's'}`) : undefined;
+  if (!children) {
+    return (
+      <View accessibilityLabel={a11y} style={style}>
+        {bubble}
+      </View>
+    );
+  }
+  return (
+    <View accessibilityLabel={a11y} style={[styles.anchor, style]}>
+      {children}
+      {bubble}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  base: { flexDirection: 'row', alignItems: 'center', alignSelf: 'flex-start', borderWidth: 1 },
+  label: { fontWeight: '400', letterSpacing: 0.1 },
+  fill: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 },
+  anchor: { alignSelf: 'flex-start' },
+  bubble: { alignItems: 'center', justifyContent: 'center', borderWidth: 2 },
+  count: { fontWeight: '400', fontVariant: ['tabular-nums'], includeFontPadding: false },
+});