@expokit/cli 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,654 @@
+import * as Haptics from 'expo-haptics';
+import React, { useEffect, useId, useRef, useState } from 'react';
+import {
+  AccessibilityInfo,
+  Animated,
+  Easing,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import Svg, { Circle, Defs, Path, RadialGradient, Rect, Stop } from 'react-native-svg';
+
+import { alpha, motion, readableOn, useKit } from '@/lib/kit';
+
+export type AlertVariant = 'info' | 'success' | 'warning' | 'danger';
+/**
+ * `soft` — card with a glow of the tone behind the icon (default).
+ * `outline` — transparent with a hairline tone border.
+ * `solid` — filled with the solid tone.
+ * @deprecated `accent-bar` — renders as `soft`; the side-bar look was retired.
+ */
+export type AlertAppearance = 'soft' | 'outline' | 'solid' | 'accent-bar';
+
+export interface AlertAction {
+  label: string;
+  onPress: () => void;
+}
+
+export interface AlertActions {
+  /** Filled pill tinted with the tone. */
+  primary: AlertAction;
+  /** Quiet neutral pill beside it. */
+  secondary?: AlertAction;
+}
+
+export interface AlertProps {
+  variant?: AlertVariant;
+  /** Surface look. `accent-bar` is deprecated and renders as `soft`. */
+  appearance?: AlertAppearance;
+  title?: string;
+  description?: React.ReactNode;
+  children?: React.ReactNode;
+  /** Custom icon (shown inside the halo), or `false` to hide it. */
+  icon?: React.ReactNode | false;
+  /** One action: a pill under the text, or inline on the right in the compact (no title) layout. Or any node. */
+  action?: AlertAction | React.ReactNode;
+  /** A primary + secondary pill pair on the bottom row. */
+  actions?: AlertActions;
+  /** Show a close button that collapses the alert away. */
+  dismissible?: boolean;
+  /** Controlled visibility. Changing it to false collapses the alert smoothly. */
+  visible?: boolean;
+  /** Called when closed (button or `duration`). In controlled mode, set `visible` to false here. */
+  onDismiss?: () => void;
+  /** Auto-dismiss after this many ms. A hairline along the bottom drains to show the time left; touching pauses it. */
+  duration?: number;
+  /** Play a notification haptic (success / warning / error) when the alert appears. */
+  haptics?: boolean;
+  /** Override the tone colour. */
+  color?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+const HALO = 34;
+const HALO_COMPACT = 28;
+
+/**
+ * Inline banner with a living icon in a halo, a soft glow of its tone, and optional actions.
+ * The icon draws itself in, an optional timer drains along the bottom edge (pausing while
+ * touched), and on dismiss the alert fades and collapses its height so the content below glides up.
+ */
+export function Alert({
+  variant = 'info',
+  appearance = 'soft',
+  title,
+  description,
+  children,
+  icon,
+  action,
+  actions,
+  dismissible,
+  visible,
+  onDismiss,
+  duration,
+  haptics = false,
+  color,
+  style,
+}: AlertProps) {
+  const { colors, radius, dark } = useKit();
+  const uid = useId().replace(/[^a-zA-Z0-9]/g, '');
+  const reduceMotion = useReduceMotion();
+  const tones: Record<AlertVariant, string> = {
+    info: dark ? '#60a5fa' : '#2563eb',
+    success: colors.success,
+    warning: colors.warning,
+    danger: colors.danger,
+  };
+  const tone = color ?? tones[variant];
+  const look = appearance === 'accent-bar' ? 'soft' : appearance;
+  const solid = look === 'solid';
+
+  const [inner, setInner] = useState(true);
+  const open = visible ?? inner;
+  const [box, setBox] = useState({ w: 0, h: 0 });
+  const [animating, setAnimating] = useState(false);
+  const [gone, setGone] = useState(!open);
+
+  // Native: card life, icon glyph pop, halo ripple, timer drain. JS: wrapper height, icon outline draw.
+  const life = useRef(new Animated.Value(0)).current;
+  const size = useRef(new Animated.Value(open ? 1 : 0)).current;
+  const draw = useRef(new Animated.Value(0)).current;
+  const glyph = useRef(new Animated.Value(0)).current;
+  const ripple = useRef(new Animated.Value(0)).current;
+  const drain = useRef(new Animated.Value(1)).current;
+  const first = useRef(true);
+  const reduceRef = useRef(reduceMotion);
+  reduceRef.current = reduceMotion;
+
+  const dismiss = () => {
+    if (visible === undefined) setInner(false);
+    onDismiss?.();
+  };
+  const dismissRef = useRef(dismiss);
+  dismissRef.current = dismiss;
+
+  const playIcon = () => {
+    if (reduceRef.current) {
+      draw.setValue(1);
+      glyph.setValue(1);
+      ripple.setValue(1);
+      return;
+    }
+    draw.setValue(0);
+    glyph.setValue(0);
+    ripple.setValue(0);
+    Animated.timing(draw, { toValue: 1, duration: 520, easing: Easing.out(Easing.cubic), useNativeDriver: false }).start();
+    Animated.sequence([
+      Animated.delay(280),
+      Animated.spring(glyph, { toValue: 1, useNativeDriver: true, ...motion.bouncy }),
+    ]).start();
+    Animated.timing(ripple, { toValue: 1, duration: 700, delay: 120, easing: Easing.out(Easing.quad), useNativeDriver: true }).start();
+  };
+
+  const buzz = () => {
+    if (!haptics) return;
+    const type =
+      variant === 'success'
+        ? Haptics.NotificationFeedbackType.Success
+        : variant === 'warning'
+          ? Haptics.NotificationFeedbackType.Warning
+          : variant === 'danger'
+            ? Haptics.NotificationFeedbackType.Error
+            : null;
+    if (type !== null) Haptics.notificationAsync(type).catch(() => {});
+  };
+
+  useEffect(() => {
+    if (first.current) {
+      first.current = false;
+      if (open) {
+        Animated.spring(life, { toValue: 1, useNativeDriver: true, ...motion.gentle }).start();
+        playIcon();
+        buzz();
+      }
+      return;
+    }
+    setAnimating(true);
+    if (open) {
+      setGone(false);
+      playIcon();
+      buzz();
+      Animated.parallel([
+        Animated.timing(size, { toValue: 1, duration: 260, easing: Easing.out(Easing.cubic), useNativeDriver: false }),
+        Animated.spring(life, { toValue: 1, useNativeDriver: true, ...motion.gentle }),
+      ]).start(() => setAnimating(false));
+    } else {
+      Animated.parallel([
+        Animated.timing(life, { toValue: 0, duration: 160, useNativeDriver: true }),
+        Animated.timing(size, {
+          toValue: 0,
+          duration: 280,
+          delay: 90,
+          easing: Easing.inOut(Easing.cubic),
+          useNativeDriver: false,
+        }),
+      ]).start(({ finished }) => {
+        if (!finished) return;
+        setAnimating(false);
+        setGone(true);
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+
+  // Reduce motion switched on mid-animation: jump the decorative icon motion to its end.
+  useEffect(() => {
+    if (!reduceMotion) return;
+    draw.stopAnimation();
+    draw.setValue(1);
+    glyph.setValue(1);
+    ripple.setValue(1);
+  }, [reduceMotion, draw, glyph, ripple]);
+
+  // Auto-dismiss timer. Wall-clock bookkeeping so pause/resume is exact without reading native values.
+  const remaining = useRef(0);
+  const startedAt = useRef(0);
+  const held = useRef({ press: false, hover: false });
+  const running = useRef(false);
+
+  const runTimer = () => {
+    if (!duration || remaining.current <= 0) return;
+    running.current = true;
+    startedAt.current = Date.now();
+    Animated.timing(drain, {
+      toValue: 0,
+      duration: remaining.current,
+      easing: Easing.linear,
+      useNativeDriver: true,
+    }).start(({ finished }) => {
+      if (finished) {
+        running.current = false;
+        dismissRef.current();
+      }
+    });
+  };
+
+  const hold = (key: 'press' | 'hover', on: boolean) => {
+    held.current[key] = on;
+    const paused = held.current.press || held.current.hover;
+    if (paused && running.current) {
+      running.current = false;
+      remaining.current -= Date.now() - startedAt.current;
+      drain.stopAnimation();
+    } else if (!paused && !running.current && open) {
+      runTimer();
+    }
+  };
+
+  useEffect(() => {
+    if (!open || !duration) return;
+    drain.setValue(1);
+    remaining.current = duration;
+    held.current = { press: false, hover: false };
+    runTimer();
+    return () => {
+      running.current = false;
+      drain.stopAnimation();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, duration]);
+
+  if (gone && !animating) return null;
+
+  const compact = !title && !actions;
+  const haloSize = compact ? HALO_COMPACT : HALO;
+  const pad = compact ? 10 : 14;
+  const ink = dark ? tone : mix(tone, colors.foreground, 0.28);
+
+  const fg = solid ? readableOn(tone) : colors.foreground;
+  const sub = solid ? alpha(fg, 0.82) : colors.mutedForeground;
+  const iconColor = solid ? fg : tone;
+  const disc = solid ? alpha('#ffffff', 0.24) : alpha(tone, 0.14);
+  const ring = solid ? alpha('#ffffff', 0.12) : alpha(tone, 0.08);
+
+  const surface: ViewStyle = solid
+    ? { backgroundColor: tone }
+    : look === 'outline'
+      ? { backgroundColor: 'transparent', borderWidth: 1, borderColor: alpha(tone, dark ? 0.45 : 0.38) }
+      : { backgroundColor: colors.card, borderWidth: 1, borderColor: alpha(colors.foreground, dark ? 0.1 : 0.08) };
+
+  // Only the soft look gets a light-leak, and it is the tone itself at low opacity.
+  const glow = look === 'soft' ? { c: tone, a: dark ? 0.18 : 0.12 } : null;
+  const glowCenter = pad + haloSize / 2;
+
+  const pillColors = {
+    primary: solid ? { bg: fg, fg: tone } : { bg: tone, fg: readableOn(tone) },
+    secondary: solid
+      ? { bg: alpha(fg, 0.16), fg }
+      : { bg: alpha(colors.foreground, dark ? 0.08 : 0.05), fg: colors.foreground },
+    tint: solid ? { bg: alpha(fg, 0.16), fg } : { bg: alpha(tone, dark ? 0.18 : 0.12), fg: ink },
+  };
+
+  const single = isAction(action) ? action : null;
+  const pair: AlertActions | null = actions ?? (single && !compact ? { primary: single } : null);
+
+  const iconNode =
+    icon === false ? null : (
+      <Halo size={haloSize} corner={radius.capsule} disc={disc} ring={ring} ripple={ripple}>
+        {icon ?? (
+          <LivingIcon variant={variant} color={iconColor} size={compact ? 16 : 20} draw={draw} glyph={glyph} />
+        )}
+      </Halo>
+    );
+
+  const closeNode = dismissible ? (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel="Dismiss"
+      hitSlop={8}
+      onPress={dismiss}
+      style={({ pressed }) => [
+        styles.close,
+        {
+          borderRadius: radius.capsule(28),
+          backgroundColor: solid ? alpha(fg, pressed ? 0.24 : 0.14) : alpha(colors.foreground, pressed ? 0.12 : 0.06),
+          marginTop: compact ? 0 : (HALO - 28) / 2,
+        },
+      ]}
+    >
+      <Svg width={12} height={12} viewBox="0 0 24 24">
+        <Path d="M6 6l12 12M18 6L6 18" stroke={solid ? fg : colors.mutedForeground} strokeWidth={2.6} strokeLinecap="round" />
+      </Svg>
+    </Pressable>
+  ) : null;
+
+  const textTop = compact || icon === false ? 0 : (HALO - (title ? 21 : 20)) / 2;
+
+  const row = (
+    <>
+      {iconNode}
+      <View style={[styles.body, { paddingTop: textTop }]}>
+        {title ? <Text style={[styles.title, { color: fg }]}>{title}</Text> : null}
+        {typeof description === 'string' ? (
+          <Text style={[styles.desc, { color: title ? sub : fg }]}>{description}</Text>
+        ) : (
+          description
+        )}
+        {children}
+        {pair ? (
+          <View style={styles.actions}>
+            <Pill action={pair.primary} height={32} radius={radius.capsule(32)} {...pillColors.primary} />
+            {pair.secondary ? (
+              <Pill action={pair.secondary} height={32} radius={radius.capsule(32)} {...pillColors.secondary} />
+            ) : null}
+          </View>
+        ) : !single && action ? (
+          (action as React.ReactNode)
+        ) : null}
+      </View>
+      {compact && single ? <Pill action={single} height={28} radius={radius.capsule(28)} {...pillColors.tint} /> : null}
+      {closeNode}
+    </>
+  );
+
+  const rowStyle = [styles.row, compact ? styles.rowCompact : null, { padding: pad }];
+
+  return (
+    <Animated.View
+      style={[
+        animating && box.h > 0
+          ? { height: size.interpolate({ inputRange: [0, 1], outputRange: [0, box.h] }), overflow: 'hidden' }
+          : null,
+        style,
+      ]}
+    >
+      <Animated.View
+        onLayout={(e) => setBox({ w: e.nativeEvent.layout.width, h: e.nativeEvent.layout.height })}
+        accessibilityRole="alert"
+        accessibilityLiveRegion="polite"
+        style={[
+          styles.card,
+          { borderRadius: radius.scale(compact ? 14 : 16) },
+          surface,
+          {
+            opacity: life,
+            transform: [
+              { translateY: life.interpolate({ inputRange: [0, 1], outputRange: [-8, 0] }) },
+              { scale: life.interpolate({ inputRange: [0, 1], outputRange: [0.96, 1] }) },
+            ],
+          },
+        ]}
+      >
+        {box.w > 0 && glow && icon !== false ? (
+          <Svg width={box.w} height={box.h} style={StyleSheet.absoluteFill} pointerEvents="none">
+            <Defs>
+              <RadialGradient
+                id={`glow${uid}`}
+                cx={glowCenter}
+                cy={glowCenter}
+                fx={glowCenter}
+                fy={glowCenter}
+                r={Math.min(240, Math.max(120, box.w * 0.5))}
+                gradientUnits="userSpaceOnUse"
+              >
+                <Stop offset="0" stopColor={glow.c} stopOpacity={glow.a} />
+                <Stop offset="0.35" stopColor={glow.c} stopOpacity={glow.a * 0.4} />
+                <Stop offset="1" stopColor={glow.c} stopOpacity={0} />
+              </RadialGradient>
+            </Defs>
+            <Rect width={box.w} height={box.h} fill={`url(#glow${uid})`} />
+          </Svg>
+        ) : null}
+
+        {duration ? (
+          <Pressable
+            accessible={false}
+            focusable={false}
+            onPressIn={() => hold('press', true)}
+            onPressOut={() => hold('press', false)}
+            onHoverIn={() => hold('hover', true)}
+            onHoverOut={() => hold('hover', false)}
+            style={rowStyle}
+          >
+            {row}
+          </Pressable>
+        ) : (
+          <View style={rowStyle}>{row}</View>
+        )}
+
+        {duration && box.w > 0 ? (
+          <Animated.View
+            pointerEvents="none"
+            style={[
+              styles.timer,
+              {
+                backgroundColor: solid ? alpha(fg, 0.7) : tone,
+                transform: [
+                  { translateX: drain.interpolate({ inputRange: [0, 1], outputRange: [-box.w / 2, 0] }) },
+                  { scaleX: drain.interpolate({ inputRange: [0, 1], outputRange: [0.0001, 1] }) },
+                ],
+              },
+            ]}
+          />
+        ) : null}
+      </Animated.View>
+    </Animated.View>
+  );
+}
+
+function Pill({
+  action,
+  height,
+  radius,
+  bg,
+  fg,
+}: {
+  action: AlertAction;
+  height: number;
+  radius: number;
+  bg: string;
+  fg: string;
+}) {
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={action.label}
+      onPress={action.onPress}
+      hitSlop={(44 - height) / 2}
+      style={({ pressed }) => [
+        styles.pill,
+        { height, borderRadius: radius, backgroundColor: bg, paddingHorizontal: height >= 32 ? 14 : 12 },
+        pressed ? { opacity: 0.75, transform: [{ scale: 0.97 }] } : null,
+      ]}
+    >
+      <Text style={[styles.pillText, { color: fg }]} numberOfLines={1}>
+        {action.label}
+      </Text>
+    </Pressable>
+  );
+}
+
+/** Tinted disc with a faint outer ring; the ring ripples out once when `ripple` runs 0 → 1. */
+function Halo({
+  size,
+  corner,
+  disc,
+  ring,
+  ripple,
+  children,
+}: {
+  size: number;
+  corner: (h: number) => number;
+  disc: string;
+  ring: string;
+  ripple: Animated.Value;
+  children: React.ReactNode;
+}) {
+  const outer = size + 8;
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <View
+        style={{
+          position: 'absolute',
+          width: outer,
+          height: outer,
+          borderRadius: corner(outer),
+          backgroundColor: ring,
+        }}
+      />
+      <Animated.View
+        pointerEvents="none"
+        style={{
+          position: 'absolute',
+          width: size,
+          height: size,
+          borderRadius: corner(size),
+          borderWidth: 1.5,
+          borderColor: disc,
+          opacity: ripple.interpolate({ inputRange: [0, 0.15, 1], outputRange: [0, 1, 0] }),
+          transform: [{ scale: ripple.interpolate({ inputRange: [0, 1], outputRange: [1, 1.9] }) }],
+        }}
+      />
+      <View
+        style={{
+          width: size,
+          height: size,
+          borderRadius: corner(size),
+          backgroundColor: disc,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        {children}
+      </View>
+    </View>
+  );
+}
+
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+const OUTLINE_LEN = 64;
+
+function iconPaths(variant: AlertVariant) {
+  const outline =
+    variant === 'warning'
+      ? 'M10.3 4.2a2 2 0 0 1 3.4 0l7.1 12.6a2 2 0 0 1-1.7 3H4.9a2 2 0 0 1-1.7-3z'
+      : // Circle r=9 drawn from 12 o'clock so it sweeps in clockwise.
+        'M12 3a9 9 0 1 1 0 18a9 9 0 1 1 0-18';
+  const mark =
+    variant === 'success'
+      ? 'M8 12.4l2.7 2.7L16.2 9.4'
+      : variant === 'danger'
+        ? 'M9.2 9.2l5.6 5.6M14.8 9.2l-5.6 5.6'
+        : variant === 'warning'
+          ? 'M12 9.5v4'
+          : 'M12 11v5';
+  const dot = variant === 'warning' ? { cx: 12, cy: 16.6 } : variant === 'info' ? { cx: 12, cy: 7.9 } : null;
+  return { outline, mark, dot };
+}
+
+/** Outline draws itself (JS-driven dash offset), then the glyph springs in (native scale). */
+function LivingIcon({
+  variant,
+  color,
+  size,
+  draw,
+  glyph,
+}: {
+  variant: AlertVariant;
+  color: string;
+  size: number;
+  draw: Animated.Value;
+  glyph: Animated.Value;
+}) {
+  const { outline, mark, dot } = iconPaths(variant);
+  const s = { stroke: color, strokeWidth: 2.2, strokeLinecap: 'round' as const, strokeLinejoin: 'round' as const, fill: 'none' };
+  return (
+    <View style={{ width: size, height: size }} pointerEvents="none">
+      <Svg width={size} height={size} viewBox="0 0 24 24" style={StyleSheet.absoluteFill}>
+        <AnimatedPath
+          d={outline}
+          {...s}
+          strokeDasharray={[OUTLINE_LEN, OUTLINE_LEN]}
+          strokeDashoffset={draw.interpolate({ inputRange: [0, 1], outputRange: [OUTLINE_LEN, 0] })}
+        />
+      </Svg>
+      <Animated.View
+        style={[
+          StyleSheet.absoluteFill,
+          {
+            opacity: glyph.interpolate({ inputRange: [0, 0.3, 1], outputRange: [0, 1, 1], extrapolate: 'clamp' }),
+            transform: [
+              { translateY: glyph.interpolate({ inputRange: [0, 1], outputRange: [-3, 0] }) },
+              { scale: glyph.interpolate({ inputRange: [0, 1], outputRange: [0.4, 1] }) },
+            ],
+          },
+        ]}
+      >
+        <Svg width={size} height={size} viewBox="0 0 24 24">
+          <Path d={mark} {...s} />
+          {dot ? <Circle cx={dot.cx} cy={dot.cy} r={1.25} fill={color} /> : null}
+        </Svg>
+      </Animated.View>
+    </View>
+  );
+}
+
+/** The four built-in icons, static, drawn with react-native-svg. */
+export function AlertIcon({ variant, color, size = 20 }: { variant: AlertVariant; color: string; size?: number }) {
+  const { outline, mark, dot } = iconPaths(variant);
+  const s = { stroke: color, strokeWidth: 2.2, strokeLinecap: 'round' as const, strokeLinejoin: 'round' as const, fill: 'none' };
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24">
+      <Path d={outline} {...s} />
+      <Path d={mark} {...s} />
+      {dot ? <Circle cx={dot.cx} cy={dot.cy} r={1.25} fill={color} /> : null}
+    </Svg>
+  );
+}
+
+function isAction(a: unknown): a is AlertAction {
+  return !!a && typeof a === 'object' && 'label' in a && 'onPress' in a;
+}
+
+function useReduceMotion() {
+  const [reduce, setReduce] = useState(false);
+  useEffect(() => {
+    let alive = true;
+    AccessibilityInfo.isReduceMotionEnabled()
+      .then((v) => alive && setReduce(v))
+      .catch(() => {});
+    const sub = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduce);
+    return () => {
+      alive = false;
+      sub.remove();
+    };
+  }, []);
+  return reduce;
+}
+
+function parseHex(hex: string): [number, number, number] | null {
+  const full = hex.length === 4 ? '#' + [...hex.slice(1)].map((c) => c + c).join('') : hex;
+  if (!/^#[0-9a-fA-F]{6}/.test(full)) return null;
+  const n = parseInt(full.slice(1, 7), 16);
+  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+}
+
+function toHex(r: number, g: number, b: number) {
+  return '#' + [r, g, b].map((v) => Math.round(Math.max(0, Math.min(255, v))).toString(16).padStart(2, '0')).join('');
+}
+
+/** Blend `a` toward `b` by t (0–1). Used to deepen tone text so it reads on light surfaces. */
+function mix(a: string, b: string, t: number) {
+  const x = parseHex(a);
+  const y = parseHex(b);
+  if (!x || !y) return a;
+  return toHex(x[0] + (y[0] - x[0]) * t, x[1] + (y[1] - x[1]) * t, x[2] + (y[2] - x[2]) * t);
+}
+
+const styles = StyleSheet.create({
+  card: { overflow: 'hidden' },
+  row: { flexDirection: 'row', alignItems: 'flex-start', gap: 12 },
+  rowCompact: { alignItems: 'center', gap: 10 },
+  body: { flex: 1, gap: 3 },
+  title: { fontSize: 15, fontWeight: '400', lineHeight: 21, letterSpacing: -0.1 },
+  desc: { fontSize: 14, fontWeight: '400', lineHeight: 20 },
+  actions: { flexDirection: 'row', flexWrap: 'wrap', gap: 8, marginTop: 10 },
+  pill: { alignItems: 'center', justifyContent: 'center' },
+  pillText: { fontSize: 14, fontWeight: '400', lineHeight: 18 },
+  close: { width: 28, height: 28, alignItems: 'center', justifyContent: 'center' },
+  timer: { position: 'absolute', left: 0, right: 0, bottom: 0, height: 2 },
+});