Approval Card

npx expo install react-native-gesture-handler react-native-reanimated react-native-svg react-native-worklets
npm install uniwind tailwindcss

/* Matches the default beUI palette in ui-components/lib/themes.ts.
   Native surface maps to card; muted maps to muted-foreground. */
@layer theme {
  :root {
    @variant light {
      --color-background: oklch(99% 0 0);
      --color-surface: oklch(97% 0 0);
      --color-foreground: oklch(15% 0 0);
      --color-muted: oklch(50% 0 0);
      --color-border: oklch(15% 0 0 / 0.06);
      --color-border-strong: oklch(15% 0 0 / 0.16);
      --color-primary: #0285f7;
      --color-on-primary: #ffffff;
      --color-destructive: #dc2626;
      --color-success: #059669;
      --color-warning: #d97706;
    }
  }

  :root {
    @variant dark {
      --color-background: #151515;
      --color-surface: #1c1c1c;
      --color-foreground: oklch(96% 0 0);
      --color-muted: oklch(62% 0 0);
      --color-border: rgb(255 255 255 / 0.05);
      --color-border-strong: rgb(255 255 255 / 0.14);
      --color-primary: #0285f7;
      --color-on-primary: #ffffff;
      --color-destructive: #f87171;
      --color-success: #34d399;
      --color-warning: #fbbf24;
    }
  }

  /* Tailwind's default monospace stack isn't a font React Native can load. */
  :root {
    @variant ios {
      --font-mono: Menlo;
    }
  }

  :root {
    @variant android {
      --font-mono: monospace;
    }
  }
}

import type { ButtonSize, ButtonVariant } from "./button.types";

// Class strings stay literal so Uniwind can discover them.

export const variants: Record<
  ButtonVariant,
  { container: string; label: string }
> = {
  primary: { container: "bg-primary border-primary", label: "text-on-primary" },
  secondary: {
    container: "bg-surface border-border",
    label: "text-foreground",
  },
  ghost: {
    container: "bg-transparent border-transparent",
    label: "text-muted",
  },
  outline: {
    container: "bg-transparent border-border",
    label: "text-foreground",
  },
};

/**
 * Visible heights match beUI web (32, 40, 48). `hitSlop` tops the touch area up
 * to 48 points; content may grow taller for larger text.
 */
export const sizes: Record<
  ButtonSize,
  {
    container: string;
    radius: string;
    label: string;
    icon: number;
    gap: number;
    hitSlop: number;
  }
> = {
  sm: {
    container: "min-h-8 px-3 py-1 gap-1.5",
    radius: "rounded-full",
    label: "text-xs",
    icon: 14,
    gap: 6,
    hitSlop: 8,
  },
  md: {
    container: "min-h-10 px-5 py-2 gap-2",
    radius: "rounded-full",
    label: "text-sm",
    icon: 16,
    gap: 8,
    hitSlop: 4,
  },
  lg: {
    container: "min-h-12 px-6 py-2 gap-2",
    radius: "rounded-full",
    label: "text-base",
    icon: 18,
    gap: 8,
    hitSlop: 0,
  },
  icon: {
    container: "h-8 w-8",
    radius: "rounded-lg",
    label: "text-sm",
    icon: 16,
    gap: 0,
    hitSlop: 8,
  },
};

import { createContext, useContext, useEffect, useRef, useState } from "react";
import {
  type ColorValue,
  Pressable,
  StyleSheet,
  Text,
  type TextProps,
  View,
} from "react-native";
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withSpring,
  withTiming,
} from "react-native-reanimated";
import { useResolveClassNames } from "uniwind";
import { useReducedMotionPreference } from "../../hooks/use-reduced-motion";
import { renderIcon } from "../../primitives/render-icon";
import { EASE_OUT, motion } from "../../styles/motion";
import { sizes, variants } from "./button.styles";
import type {
  ButtonIcon as ButtonIconType,
  ButtonProps,
  ButtonRootProps,
  ButtonSize,
  ButtonVariant,
} from "./button.types";

const AnimatedPressable = Animated.createAnimatedComponent(Pressable);

const HOVER_SCALE = 1.02;
const RIPPLE_DURATION = 1600;

type ButtonContextValue = {
  variant: ButtonVariant;
  size: ButtonSize;
  color: ColorValue | undefined;
};

const ButtonContext = createContext<ButtonContextValue | null>(null);

/** Internal: size, variant and resolved foreground color of the enclosing button. */
export function useButtonContext() {
  const context = useContext(ButtonContext);
  if (!context) throw new Error("Button content must be rendered in a Button.");
  return context;
}

export { renderIcon as renderButtonIcon };

function ButtonLabel({ className = "", ...props }: TextProps) {
  const { variant, size } = useButtonContext();
  return (
    <Text
      {...props}
      className={`shrink text-center font-medium ${sizes[size].label} ${variants[variant].label} ${className}`}
    />
  );
}

function ButtonIcon({ icon }: { icon: ButtonIconType }) {
  const { size, color } = useButtonContext();
  return (
    <View
      accessibilityElementsHidden
      importantForAccessibility="no-hide-descendants"
      aria-hidden
      style={styles.icon}
    >
      {renderIcon(icon, { size: sizes[size].icon, color })}
    </View>
  );
}

type Ripple = { id: number; x: number; y: number; size: number };

function RippleDot({ ripple, color }: { ripple: Ripple; color: ColorValue }) {
  const progress = useSharedValue(0);

  useEffect(() => {
    progress.value = withTiming(1, {
      duration: RIPPLE_DURATION,
      easing: EASE_OUT,
    });
  }, [progress]);

  const animatedStyle = useAnimatedStyle(() => ({
    opacity: 0.3 * (1 - progress.value),
    transform: [{ scale: 0.05 + 0.95 * progress.value }],
  }));

  return (
    <Animated.View
      style={[
        styles.ripple,
        {
          left: ripple.x - ripple.size / 2,
          top: ripple.y - ripple.size / 2,
          width: ripple.size,
          height: ripple.size,
          borderRadius: ripple.size / 2,
          backgroundColor: color,
        },
        animatedStyle,
      ]}
    />
  );
}

/** Internal: the pressable surface, rendering arbitrary content. */
export function ButtonRoot({
  variant = "primary",
  size = "md",
  pressScale = 0.93,
  ripple = false,
  disableAnimation = false,
  disabled: disabledProp,
  children,
  className = "",
  style,
  hitSlop,
  accessibilityState,
  onPressIn,
  onPressOut,
  onHoverIn,
  onHoverOut,
  ref,
  ...props
}: ButtonRootProps) {
  const disabled = disabledProp ?? false;
  const reducedMotion = useReducedMotionPreference();
  const animate = !reducedMotion && !disableAnimation;
  const appearance = variants[variant];
  const dimensions = sizes[size];
  const { color } = useResolveClassNames(appearance.label);

  const scale = useSharedValue(1);
  const pressed = useSharedValue(false);
  const hovered = useSharedValue(false);
  const layout = useRef({ width: 0, height: 0 });
  const nextRippleId = useRef(0);
  const rippleTimers = useRef(new Set<ReturnType<typeof setTimeout>>());
  const [ripples, setRipples] = useState<Ripple[]>([]);

  useEffect(() => {
    const timers = rippleTimers.current;
    return () => {
      for (const timer of timers) clearTimeout(timer);
    };
  }, []);

  useEffect(() => {
    if (!animate || disabled) scale.value = 1;
  }, [animate, disabled, scale]);

  const animatedStyle = useAnimatedStyle(
    () => ({
      transform: [{ scale: scale.value }],
      // Without scale, pressing still needs visible feedback.
      opacity: disabled ? 0.5 : !animate && pressed.value ? 0.7 : 1,
    }),
    [animate, disabled],
  );

  const restScale = () => (hovered.value ? HOVER_SCALE : 1);

  return (
    <ButtonContext.Provider value={{ variant, size, color }}>
      <AnimatedPressable
        {...props}
        ref={ref}
        accessible
        accessibilityRole="button"
        accessibilityState={{ ...accessibilityState, disabled }}
        aria-disabled={disabled}
        disabled={disabled}
        hitSlop={hitSlop ?? dimensions.hitSlop}
        // Hugs its content unless the caller places it with a self-* class; on web,
        // a default self-start would otherwise win over the caller's.
        className={`${/\bself-/.test(className) ? "" : "self-start"} flex-row items-center justify-center border ${appearance.container} ${dimensions.container} ${dimensions.radius} ${className}`}
        style={[style, animatedStyle]}
        onPressIn={(event) => {
          pressed.value = true;
          if (animate) scale.value = withSpring(pressScale, motion.press);
          if (ripple && animate && color) {
            const { locationX, locationY } = event.nativeEvent;
            const { width, height } = layout.current;
            const id = nextRippleId.current++;
            setRipples((current) => [
              ...current,
              {
                id,
                x: locationX,
                y: locationY,
                size: Math.max(width, height) * 2,
              },
            ]);
            const timer = setTimeout(() => {
              rippleTimers.current.delete(timer);
              setRipples((current) => current.filter((r) => r.id !== id));
            }, RIPPLE_DURATION);
            rippleTimers.current.add(timer);
          }
          onPressIn?.(event);
        }}
        onPressOut={(event) => {
          pressed.value = false;
          if (animate) scale.value = withSpring(restScale(), motion.press);
          onPressOut?.(event);
        }}
        onHoverIn={(event) => {
          hovered.value = true;
          if (animate && !pressed.value) {
            scale.value = withSpring(HOVER_SCALE, motion.press);
          }
          onHoverIn?.(event);
        }}
        onHoverOut={(event) => {
          hovered.value = false;
          if (animate && !pressed.value) {
            scale.value = withSpring(1, motion.press);
          }
          onHoverOut?.(event);
        }}
      >
        {ripple && (
          <View
            className={`absolute inset-0 overflow-hidden ${dimensions.radius}`}
            style={styles.passThrough}
            onLayout={({ nativeEvent }) => {
              layout.current = nativeEvent.layout;
            }}
          >
            {color != null &&
              ripples.map((item) => (
                <RippleDot key={item.id} ripple={item} color={color} />
              ))}
          </View>
        )}
        {children}
      </AnimatedPressable>
    </ButtonContext.Provider>
  );
}

export function Button(props: ButtonProps) {
  if (props.size === "icon") {
    const { icon, ...rest } = props;
    return (
      <ButtonRoot {...rest}>
        <ButtonIcon icon={icon} />
      </ButtonRoot>
    );
  }
  const { startIcon, endIcon, children, ...rest } = props;
  const label = Array.isArray(children) ? children.join("") : String(children);
  return (
    <ButtonRoot {...rest}>
      {startIcon != null && <ButtonIcon icon={startIcon} />}
      <ButtonLabel>{label}</ButtonLabel>
      {endIcon != null && <ButtonIcon icon={endIcon} />}
    </ButtonRoot>
  );
}

const styles = StyleSheet.create({
  icon: { flexShrink: 0 },
  passThrough: { pointerEvents: "none" },
  ripple: { position: "absolute" },
});

import { type Ref, useEffect, useState } from "react";
import {
  type ColorValue,
  Pressable,
  type PressableProps,
  StyleSheet,
  Text,
  View,
} from "react-native";
import Animated, {
  cancelAnimation,
  interpolateColor,
  useAnimatedStyle,
  useSharedValue,
  withDelay,
  withSpring,
  withTiming,
} from "react-native-reanimated";
import { useResolveClassNames } from "uniwind";
import { usePresence } from "../../hooks/use-presence";
import { useReducedMotionPreference } from "../../hooks/use-reduced-motion";
import { DrawnPath, type PathSegment } from "../../primitives/drawn-path";
import { EASE_OUT, motion } from "../../styles/motion";

const BOX = 20;
// The web mark is a 24-unit SVG path drawn at 12px with a 3-unit stroke.
const MARK = 12;
const CHECK: PathSegment[] = [
  [5, 13, 9, 17],
  [9, 17, 19, 7],
];
const DASH: PathSegment[] = [[6, 12, 18, 12]];
// Tops a 20-point row up to a 48-point touch area.
const HIT_SLOP = { top: 14, bottom: 14, left: 0, right: 0 };
const COLOR_FADE = { duration: 200, reduceMotion: motion.fade.reduceMotion };

type Mark = "check" | "dash";

export type CheckboxProps = Omit<
  PressableProps,
  "children" | "style" | "onPress" | "disabled"
> & {
  /** Controlled state. Omit it and use `defaultChecked` for uncontrolled use. */
  checked?: boolean;
  defaultChecked?: boolean;
  onCheckedChange?: (checked: boolean) => void;
  /** Shows a dash and reports a mixed state, for "select all" rows. */
  indeterminate?: boolean;
  disabled?: boolean;
  label?: string;
  /** Supporting text under the label, read as the hint rather than the name. */
  description?: string;
  /** Disables press and mark motion independently of the system preference. */
  disableAnimation?: boolean;
  className?: string;
  ref?: Ref<View>;
};

function CheckMark({
  mark,
  appear,
  exiting,
  reduce,
  color,
}: {
  mark: Mark;
  appear: boolean;
  exiting: boolean;
  reduce: boolean;
  color: ColorValue | undefined;
}) {
  const segments = mark === "check" ? CHECK : DASH;
  const presence = useSharedValue(appear && !reduce ? 0 : 1);
  const draw = useSharedValue(appear && !reduce ? 0 : 1);

  useEffect(() => {
    if (reduce) {
      presence.value = exiting ? 0 : 1;
      draw.value = 1;
      return;
    }
    presence.value = withTiming(exiting ? 0 : 1, motion.exit);
    if (!exiting) {
      draw.value = withDelay(
        40,
        withTiming(1, {
          duration: mark === "check" ? 300 : 200,
          easing: EASE_OUT,
        }),
      );
    }
  }, [draw, exiting, mark, presence, reduce]);

  const markStyle = useAnimatedStyle(() => ({
    opacity: presence.value,
    transform: [{ scale: 0.5 + 0.5 * presence.value }],
  }));

  return (
    <Animated.View style={[styles.mark, markStyle]}>
      <DrawnPath
        segments={segments}
        size={MARK}
        strokeWidth={3}
        color={color}
        progress={draw}
      />
    </Animated.View>
  );
}

export function Checkbox({
  checked: checkedProp,
  defaultChecked = false,
  onCheckedChange,
  indeterminate = false,
  disabled = false,
  label,
  description,
  disableAnimation = false,
  className = "",
  accessibilityLabel,
  accessibilityHint,
  accessibilityState,
  hitSlop,
  onPressIn,
  onPressOut,
  ref,
  ...props
}: CheckboxProps) {
  const [uncontrolled, setUncontrolled] = useState(defaultChecked);
  const checked = checkedProp ?? uncontrolled;
  const showMark = checked || indeterminate;
  const reducedMotion = useReducedMotionPreference();
  const animate = !reducedMotion && !disableAnimation;

  const { backgroundColor: idleFill } = useResolveClassNames("bg-background");
  const { backgroundColor: idleBorder } = useResolveClassNames("bg-muted/50");
  const { backgroundColor: activeFill } = useResolveClassNames("bg-primary");
  const { color: markColor } = useResolveClassNames("text-on-primary");

  const active = useSharedValue(showMark ? 1 : 0);
  const scale = useSharedValue(1);
  const marks = usePresence<Mark | null>(
    showMark ? (indeterminate ? "dash" : "check") : null,
    showMark ? (indeterminate ? "dash" : "check") : null,
    () => motion.exit.duration + 40,
  );

  useEffect(() => {
    const target = showMark ? 1 : 0;
    active.value = animate ? withTiming(target, COLOR_FADE) : target;
  }, [active, animate, showMark]);

  useEffect(() => {
    if (!animate || disabled) {
      cancelAnimation(scale);
      scale.value = 1;
    }
  }, [animate, disabled, scale]);

  const boxStyle = useAnimatedStyle(() => ({
    backgroundColor: interpolateColor(
      active.value,
      [0, 1],
      [String(idleFill ?? "transparent"), String(activeFill ?? "blue")],
    ),
    borderColor: interpolateColor(
      active.value,
      [0, 1],
      [String(idleBorder ?? "gray"), String(activeFill ?? "blue")],
    ),
    transform: [{ scale: scale.value }],
  }));

  return (
    <Pressable
      {...props}
      ref={ref}
      accessible
      accessibilityRole="checkbox"
      accessibilityLabel={accessibilityLabel ?? label}
      accessibilityHint={accessibilityHint ?? description}
      accessibilityState={{
        ...accessibilityState,
        checked: indeterminate ? "mixed" : checked,
        disabled,
      }}
      aria-checked={indeterminate ? "mixed" : checked}
      aria-disabled={disabled}
      disabled={disabled}
      hitSlop={hitSlop ?? HIT_SLOP}
      className={`self-start flex-row gap-3 ${description ? "items-start" : "items-center"} ${className}`}
      onPress={() => {
        const next = !checked;
        if (checkedProp === undefined) setUncontrolled(next);
        onCheckedChange?.(next);
      }}
      onPressIn={(event) => {
        if (animate) scale.value = withSpring(0.92, motion.press);
        onPressIn?.(event);
      }}
      onPressOut={(event) => {
        if (animate) scale.value = withSpring(1, motion.press);
        onPressOut?.(event);
      }}
    >
      <Animated.View
        style={[styles.box, disabled && styles.disabled, boxStyle]}
      >
        {marks.map((item) =>
          item.value ? (
            <CheckMark
              key={item.key}
              mark={item.value}
              appear={item.appear}
              exiting={item.exiting}
              reduce={!animate}
              color={markColor}
            />
          ) : null,
        )}
      </Animated.View>
      {label || description ? (
        <View className={`shrink gap-0.5 ${disabled ? "opacity-60" : ""}`}>
          {label ? (
            <Text className="text-sm leading-5 text-foreground">{label}</Text>
          ) : null}
          {description ? (
            <Text className="text-xs text-muted">{description}</Text>
          ) : null}
        </View>
      ) : null}
    </Pressable>
  );
}

const styles = StyleSheet.create({
  box: {
    width: BOX,
    height: BOX,
    borderRadius: 6,
    borderWidth: 2,
    alignItems: "center",
    justifyContent: "center",
    flexShrink: 0,
  },
  disabled: { opacity: 0.6 },
  mark: { position: "absolute", width: MARK, height: MARK },
});

import { type Ref, useEffect, useRef, useState } from "react";
import {
  AccessibilityInfo,
  Platform,
  StyleSheet,
  Text,
  TextInput,
  type TextInputProps,
  View,
} from "react-native";
import Animated, {
  Easing,
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from "react-native-reanimated";
import { useResolveClassNames, useUniwind } from "uniwind";
import { usePresence } from "../../hooks/use-presence";
import { useReducedMotionPreference } from "../../hooks/use-reduced-motion";
import { useShake } from "../../hooks/use-shake";
import { DrawnPath, type PathSegment } from "../../primitives/drawn-path";
import { type IconSource, renderIcon } from "../../primitives/render-icon";
import { motion } from "../../styles/motion";

const FIELD_HEIGHT = 44;
const ICON = 16;
const CHECK: PathSegment[] = [
  [5, 12.5, 9.5, 17],
  [9.5, 17, 19, 7.5],
];
const SHAKE = [0, -6, 6, -4, 4, -2, 0];
const COLOR_FADE = { duration: 200, reduceMotion: motion.fade.reduceMotion };
const MESSAGE_FADE = { duration: 200, reduceMotion: motion.fade.reduceMotion };

export type InputClassNames = {
  root?: string;
  label?: string;
  field?: string;
  input?: string;
  errorMessage?: string;
};

export type InputProps = Omit<TextInputProps, "editable"> & {
  label?: string;
  /** A truthy error shakes the field and turns it red. A string also shows a message. */
  error?: string | boolean;
  /** Reserves one message line so validation does not shift content below. */
  reserveErrorLine?: boolean;
  /** Draws a check at the trailing edge in place of `rightIcon`. */
  success?: boolean;
  /** Decorative icon at the leading edge, given `{ size, color }`. */
  leftIcon?: IconSource;
  /** Trailing icon or control, such as a show-password button. */
  rightIcon?: IconSource;
  disabled?: boolean;
  /** Disables shake and transitions independently of the system preference. */
  disableAnimation?: boolean;
  className?: string;
  classNames?: InputClassNames;
  ref?: Ref<TextInput>;
};

function ErrorMessage({
  message,
  appear,
  exiting,
  reduce,
  className,
}: {
  message: string;
  appear: boolean;
  exiting: boolean;
  reduce: boolean;
  className: string;
}) {
  const progress = useSharedValue(appear ? 0 : 1);

  useEffect(() => {
    progress.value = withTiming(exiting ? 0 : 1, MESSAGE_FADE);
  }, [exiting, progress]);

  const animatedStyle = useAnimatedStyle(
    () => ({
      opacity: progress.value,
      transform: [{ translateY: reduce ? 0 : -4 * (1 - progress.value) }],
    }),
    [reduce],
  );

  return (
    <Animated.View
      style={[exiting && styles.exiting, animatedStyle]}
      accessibilityLiveRegion="polite"
    >
      <Text className={`px-1 text-xs text-destructive ${className}`}>
        {message}
      </Text>
    </Animated.View>
  );
}

function SuccessCheck({ reduce }: { reduce: boolean }) {
  const { color } = useResolveClassNames("text-success");
  const draw = useSharedValue(reduce ? 1 : 0);

  useEffect(() => {
    if (!reduce) {
      draw.value = withTiming(1, {
        duration: 350,
        easing: Easing.out(Easing.quad),
      });
    }
  }, [draw, reduce]);

  return (
    <View
      accessibilityElementsHidden
      importantForAccessibility="no-hide-descendants"
      aria-hidden
      style={styles.trailing}
    >
      <DrawnPath
        segments={CHECK}
        size={20}
        strokeWidth={2.5}
        color={color}
        progress={draw}
      />
    </View>
  );
}

export function Input({
  label,
  error,
  reserveErrorLine = false,
  success = false,
  leftIcon,
  rightIcon,
  disabled = false,
  disableAnimation = false,
  className = "",
  classNames,
  value: valueProp,
  defaultValue,
  onChangeText,
  onFocus,
  onBlur,
  accessibilityLabel,
  accessibilityHint,
  keyboardAppearance,
  style,
  ref,
  ...props
}: InputProps) {
  // Match the keyboard to the app's theme unless the caller chooses one.
  const { theme } = useUniwind();
  const [uncontrolled, setUncontrolled] = useState(defaultValue ?? "");
  const value = valueProp ?? uncontrolled;
  const [focused, setFocused] = useState(false);
  const inputRef = useRef<TextInput | null>(null);
  const reducedMotion = useReducedMotionPreference();
  const animate = !reducedMotion && !disableAnimation;

  const hasError = Boolean(error);
  const errorMessage = typeof error === "string" && error ? error : null;
  const state = hasError ? "error" : focused ? "focused" : "idle";

  const { color: foreground } = useResolveClassNames("text-foreground");
  const { color: muted } = useResolveClassNames("text-muted");
  const { color: placeholder } = useResolveClassNames("text-muted/60");
  const { backgroundColor: idleBorder } = useResolveClassNames("bg-border");
  const { backgroundColor: focusBorder } =
    useResolveClassNames("bg-foreground/40");
  const { backgroundColor: focusRing } =
    useResolveClassNames("bg-foreground/10");
  const { backgroundColor: errorBorder } =
    useResolveClassNames("bg-destructive");
  const { backgroundColor: errorRing } =
    useResolveClassNames("bg-destructive/25");

  const borderColor =
    state === "error"
      ? errorBorder
      : state === "focused"
        ? focusBorder
        : idleBorder;
  const ringColor = state === "error" ? errorRing : focusRing;
  const border = useSharedValue(String(borderColor ?? "transparent"));
  const ring = useSharedValue(state === "idle" ? 0 : 1);
  const { shake, style: shakeStyle } = useShake(SHAKE, 450);

  useEffect(() => {
    const next = String(borderColor ?? "transparent");
    border.value = animate ? withTiming(next, COLOR_FADE) : next;
    const target = state === "idle" ? 0 : 1;
    ring.value = animate ? withTiming(target, COLOR_FADE) : target;
  }, [animate, border, borderColor, ring, state]);

  // Shake and announce when an error appears, not while it stays.
  useEffect(() => {
    if (!hasError) return;
    if (animate) shake();
  }, [animate, hasError, shake]);

  useEffect(() => {
    if (errorMessage) AccessibilityInfo.announceForAccessibility(errorMessage);
  }, [errorMessage]);

  const messages = usePresence(
    errorMessage,
    errorMessage ?? "",
    () => MESSAGE_FADE.duration + 40,
  );

  const fieldStyle = useAnimatedStyle(() => ({ borderColor: border.value }));
  const ringStyle = useAnimatedStyle(() => ({ opacity: ring.value }));

  const trailing = success ? null : rightIcon;
  const iconProps = { size: ICON, color: muted };

  return (
    <View className={`gap-1.5 ${className} ${classNames?.root ?? ""}`}>
      {label ? (
        <Text
          // The field already carries the label for screen readers.
          accessibilityElementsHidden
          importantForAccessibility="no"
          className={`px-1 text-sm font-medium text-foreground ${classNames?.label ?? ""}`}
          onPress={() => inputRef.current?.focus()}
        >
          {label}
        </Text>
      ) : null}

      <Animated.View
        style={[styles.fieldWrap, disabled && styles.disabled, shakeStyle]}
      >
        <Animated.View
          style={[styles.ring, { borderColor: ringColor }, ringStyle]}
        />
        <Animated.View
          className={`flex-row items-center overflow-hidden rounded-full border ${classNames?.field ?? ""}`}
          style={[styles.field, fieldStyle]}
        >
          {leftIcon != null ? (
            <View
              accessibilityElementsHidden
              importantForAccessibility="no-hide-descendants"
              aria-hidden
              style={styles.leading}
            >
              {renderIcon(leftIcon, iconProps)}
            </View>
          ) : null}
          <TextInput
            {...props}
            ref={(node) => {
              inputRef.current = node;
              if (typeof ref === "function") ref(node);
              else if (ref) ref.current = node;
            }}
            value={value}
            editable={!disabled}
            accessibilityLabel={accessibilityLabel ?? label}
            accessibilityHint={accessibilityHint ?? errorMessage ?? undefined}
            aria-invalid={hasError}
            aria-disabled={disabled}
            placeholderTextColor={placeholder}
            cursorColor={foreground}
            selectionColor={foreground}
            className={`h-full flex-1 text-foreground ${leftIcon != null ? "ps-10" : "ps-3.5"} ${trailing != null || success ? "pe-10" : "pe-3.5"} ${classNames?.input ?? ""}`}
            style={[styles.input, style]}
            keyboardAppearance={keyboardAppearance ?? theme}
            onChangeText={(next) => {
              if (valueProp === undefined) setUncontrolled(next);
              onChangeText?.(next);
            }}
            onFocus={(event) => {
              setFocused(true);
              onFocus?.(event);
            }}
            onBlur={(event) => {
              setFocused(false);
              onBlur?.(event);
            }}
          />
          {success ? (
            <SuccessCheck reduce={!animate} />
          ) : trailing != null ? (
            <View style={styles.trailingControl}>
              {renderIcon(trailing, iconProps)}
            </View>
          ) : null}
        </Animated.View>
      </Animated.View>

      <View style={reserveErrorLine && styles.reserved}>
        {messages.map((item) =>
          item.value ? (
            <ErrorMessage
              key={item.key}
              message={item.value}
              appear={item.appear}
              exiting={item.exiting}
              reduce={!animate}
              className={classNames?.errorMessage ?? ""}
            />
          ) : null,
        )}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  fieldWrap: { height: FIELD_HEIGHT },
  disabled: { opacity: 0.6 },
  // A 2-point ring around the border box, like the web's ring-2.
  ring: {
    position: "absolute",
    top: -2,
    bottom: -2,
    left: -2,
    right: -2,
    borderRadius: FIELD_HEIGHT,
    borderWidth: 2,
    pointerEvents: "none",
  },
  field: { height: FIELD_HEIGHT },
  input: {
    // A font size without a line height: a TextInput line height pushes the
    // text and placeholder off center on iOS.
    fontSize: 16,
    paddingVertical: 0,
    // Android centers text vertically only when asked, and adds font padding.
    textAlignVertical: "center",
    includeFontPadding: false,
    // Web inputs draw a focus outline; the field's border and ring replace it.
    // Chrome draws an "auto" outline whatever its width, so the style has to
    // go. React Native's types don't list "none", but React Native Web passes
    // it through.
    ...Platform.select({
      web: { outlineStyle: "none" as "solid" },
      default: {},
    }),
  },
  leading: {
    position: "absolute",
    start: 12,
    pointerEvents: "none",
  },
  trailing: {
    position: "absolute",
    end: 14,
    pointerEvents: "none",
  },
  // A 44-point square keeps trailing controls such as a password toggle tappable.
  trailingControl: {
    position: "absolute",
    end: 0,
    top: 0,
    bottom: 0,
    width: 44,
    alignItems: "center",
    justifyContent: "center",
  },
  reserved: { minHeight: 16 },
  exiting: { position: "absolute", left: 0, right: 0, top: 0 },
});

import {
  createContext,
  type ReactNode,
  type Ref,
  type RefObject,
  useCallback,
  useContext,
  useEffect,
  useMemo,
  useRef,
  useState,
} from "react";
import {
  Pressable,
  type PressableProps,
  StyleSheet,
  Text,
  View,
  type ViewProps,
} from "react-native";
import Animated, {
  cancelAnimation,
  interpolateColor,
  type SharedValue,
  useAnimatedStyle,
  useSharedValue,
  withSpring,
  withTiming,
} from "react-native-reanimated";
import { useResolveClassNames } from "uniwind";
import { useReducedMotionPreference } from "../../hooks/use-reduced-motion";
import { motion } from "../../styles/motion";

const RING = 20;
const BORDER = 2;
const DOT = 8;
const DOT_INSET = (RING - DOT) / 2;
// Tops a 20-point row up to a 48-point touch area.
const HIT_SLOP = { top: 14, bottom: 14, left: 0, right: 0 };
const COLOR_FADE = { duration: 200, reduceMotion: motion.fade.reduceMotion };

type Measure = () => void;

type RadioGroupContextValue = {
  value: string;
  select: (value: string) => void;
  animate: boolean;
  groupRef: RefObject<View | null>;
  /** Records where an item's ring sits inside the group. */
  place: (value: string, x: number, y: number) => void;
  register: (value: string, measure: Measure) => () => void;
  dotScale: SharedValue<number>;
};

const RadioGroupContext = createContext<RadioGroupContextValue | null>(null);

function useRadioGroup() {
  const context = useContext(RadioGroupContext);
  if (!context) {
    throw new Error("RadioGroupItem must be rendered inside a RadioGroup.");
  }
  return context;
}

export type RadioGroupProps = Omit<ViewProps, "children"> & {
  /** Controlled value. Omit it and use `defaultValue` for uncontrolled use. */
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  orientation?: "vertical" | "horizontal";
  /** Disables dot and press motion independently of the system preference. */
  disableAnimation?: boolean;
  children: ReactNode;
  className?: string;
};

export function RadioGroup({
  value: valueProp,
  defaultValue = "",
  onValueChange,
  orientation = "vertical",
  disableAnimation = false,
  children,
  className = "",
  onLayout,
  ...props
}: RadioGroupProps) {
  const [uncontrolled, setUncontrolled] = useState(defaultValue);
  const value = valueProp ?? uncontrolled;
  const reducedMotion = useReducedMotionPreference();
  const animate = !reducedMotion && !disableAnimation;
  const { backgroundColor: dotColor } = useResolveClassNames("bg-primary");

  const groupRef = useRef<View>(null);
  const positions = useRef(new Map<string, { x: number; y: number }>());
  const measures = useRef(new Map<string, Measure>());
  const valueRef = useRef(value);
  valueRef.current = value;
  const animateRef = useRef(animate);
  animateRef.current = animate;

  const x = useSharedValue(0);
  const y = useSharedValue(0);
  const visible = useSharedValue(0);
  const dotScale = useSharedValue(1);

  // Glide to the selected ring, or appear in place when nothing was shown yet.
  const moveDot = useCallback(
    (target: string) => {
      const position = positions.current.get(target);
      if (!position) {
        visible.value = 0;
        return;
      }
      const left = position.x + DOT_INSET;
      const top = position.y + DOT_INSET;
      if (visible.value === 0 || !animateRef.current) {
        x.value = left;
        y.value = top;
      } else {
        x.value = withSpring(left, motion.layout);
        y.value = withSpring(top, motion.layout);
      }
      visible.value = 1;
    },
    [visible, x, y],
  );

  useEffect(() => {
    moveDot(value);
  }, [moveDot, value]);

  // Stable so items only re-register when their own value changes.
  const place = useCallback(
    (item: string, left: number, top: number) => {
      positions.current.set(item, { x: left, y: top });
      if (item === valueRef.current) moveDot(item);
    },
    [moveDot],
  );

  const register = useCallback(
    (item: string, measure: Measure) => {
      measures.current.set(item, measure);
      return () => {
        measures.current.delete(item);
        positions.current.delete(item);
        if (item === valueRef.current) visible.value = 0;
      };
    },
    [visible],
  );

  const context = useMemo<RadioGroupContextValue>(
    () => ({
      value,
      animate,
      groupRef,
      dotScale,
      place,
      register,
      select: (next) => {
        if (valueProp === undefined) setUncontrolled(next);
        onValueChange?.(next);
      },
    }),
    [animate, dotScale, onValueChange, place, register, value, valueProp],
  );

  const dotStyle = useAnimatedStyle(() => ({
    opacity: visible.value,
    transform: [
      { translateX: x.value },
      { translateY: y.value },
      { scale: dotScale.value },
    ],
  }));

  return (
    <RadioGroupContext.Provider value={context}>
      <View
        {...props}
        ref={groupRef}
        accessibilityRole="radiogroup"
        className={`relative gap-3 ${orientation === "vertical" ? "flex-col" : "flex-row flex-wrap"} ${className}`}
        onLayout={(event) => {
          // Items can move without their own layout changing, such as on reflow.
          for (const measure of measures.current.values()) measure();
          onLayout?.(event);
        }}
      >
        {children}
        <Animated.View
          style={[styles.dot, { backgroundColor: dotColor }, dotStyle]}
        />
      </View>
    </RadioGroupContext.Provider>
  );
}

export type RadioGroupItemProps = Omit<
  PressableProps,
  "children" | "style" | "onPress" | "disabled"
> & {
  value: string;
  label?: string;
  /** Supporting text under the label, read as the hint rather than the name. */
  description?: string;
  disabled?: boolean;
  className?: string;
  ref?: Ref<View>;
};

export function RadioGroupItem({
  value,
  label,
  description,
  disabled = false,
  className = "",
  accessibilityLabel,
  accessibilityHint,
  accessibilityState,
  hitSlop,
  onPressIn,
  onPressOut,
  ref,
  ...props
}: RadioGroupItemProps) {
  const group = useRadioGroup();
  const { animate, dotScale, groupRef, place, register } = group;
  const selected = group.value === value;
  const ringRef = useRef<View>(null);

  const { backgroundColor: idleBorder } = useResolveClassNames("bg-muted/50");
  const { backgroundColor: activeBorder } = useResolveClassNames("bg-primary");

  const active = useSharedValue(selected ? 1 : 0);
  const scale = useSharedValue(1);

  const measure = useCallback(() => {
    const ring = ringRef.current;
    const groupNode = groupRef.current;
    if (!ring || !groupNode) return;
    ring.measureLayout(groupNode, (left, top) => place(value, left, top));
  }, [groupRef, place, value]);

  useEffect(() => register(value, measure), [measure, register, value]);

  useEffect(() => {
    const target = selected ? 1 : 0;
    active.value = animate ? withTiming(target, COLOR_FADE) : target;
  }, [active, animate, selected]);

  useEffect(() => {
    if (!animate || disabled) {
      cancelAnimation(scale);
      scale.value = 1;
    }
  }, [animate, disabled, scale]);

  const ringStyle = useAnimatedStyle(() => ({
    borderColor: interpolateColor(
      active.value,
      [0, 1],
      [String(idleBorder ?? "gray"), String(activeBorder ?? "blue")],
    ),
    transform: [{ scale: scale.value }],
  }));

  return (
    <Pressable
      {...props}
      ref={ref}
      accessible
      accessibilityRole="radio"
      accessibilityLabel={accessibilityLabel ?? label}
      accessibilityHint={accessibilityHint ?? description}
      accessibilityState={{
        ...accessibilityState,
        checked: selected,
        disabled,
      }}
      aria-checked={selected}
      aria-disabled={disabled}
      disabled={disabled}
      hitSlop={hitSlop ?? HIT_SLOP}
      className={`self-start flex-row gap-3 ${description ? "items-start" : "items-center"} ${className}`}
      onPress={() => {
        if (!selected) group.select(value);
      }}
      onPressIn={(event) => {
        if (animate) {
          scale.value = withSpring(0.92, motion.press);
          // The dot lives in the group, so it presses along with its ring.
          if (selected) dotScale.value = withSpring(0.92, motion.press);
        }
        onPressIn?.(event);
      }}
      onPressOut={(event) => {
        if (animate) {
          scale.value = withSpring(1, motion.press);
          dotScale.value = withSpring(1, motion.press);
        }
        onPressOut?.(event);
      }}
    >
      <Animated.View
        ref={ringRef}
        onLayout={measure}
        style={[styles.ring, disabled && styles.disabled, ringStyle]}
      />
      {label || description ? (
        <View className={`shrink gap-0.5 ${disabled ? "opacity-60" : ""}`}>
          {label ? (
            <Text className="text-sm leading-5 text-foreground">{label}</Text>
          ) : null}
          {description ? (
            <Text className="text-xs text-muted">{description}</Text>
          ) : null}
        </View>
      ) : null}
    </Pressable>
  );
}

const styles = StyleSheet.create({
  ring: {
    width: RING,
    height: RING,
    borderRadius: RING / 2,
    borderWidth: BORDER,
    flexShrink: 0,
  },
  disabled: { opacity: 0.6 },
  dot: {
    position: "absolute",
    left: 0,
    top: 0,
    width: DOT,
    height: DOT,
    borderRadius: DOT / 2,
    pointerEvents: "none",
  },
});

import { useEffect, useRef, useState } from "react";

export type PresenceItem<T> = {
  key: string;
  value: T;
  /** False for the item present on first render, so it does not animate in. */
  appear: boolean;
  exiting: boolean;
};

/**
 * Keeps replaced items mounted while they animate out, like AnimatePresence.
 * A key that returns while exiting is revived in place.
 */
export function usePresence<T>(
  key: string | null,
  value: T,
  exitDuration: (value: T) => number,
) {
  const [items, setItems] = useState<PresenceItem<T>[]>(() =>
    key === null ? [] : [{ key, value, appear: false, exiting: false }],
  );
  const [currentKey, setCurrentKey] = useState(key);
  const exitDurationRef = useRef(exitDuration);
  exitDurationRef.current = exitDuration;

  // Adjust during render so the new item and the exits start in the same frame.
  if (key !== currentKey) {
    setCurrentKey(key);
    setItems((previous) => {
      const next = previous.map((item) =>
        item.key === key
          ? { ...item, value, exiting: false }
          : { ...item, exiting: true },
      );
      if (key !== null && !previous.some((item) => item.key === key)) {
        next.push({ key, value, appear: true, exiting: false });
      }
      return next;
    });
  }

  const exitingKeys = items
    .filter((item) => item.exiting)
    .map((item) => item.key)
    .join("\n");

  useEffect(() => {
    if (!exitingKeys) return;
    const timers = items
      .filter((item) => item.exiting)
      .map((item) =>
        setTimeout(() => {
          setItems((previous) =>
            previous.filter(
              (candidate) => !(candidate.key === item.key && candidate.exiting),
            ),
          );
        }, exitDurationRef.current(item.value)),
      );
    return () => {
      for (const timer of timers) clearTimeout(timer);
    };
    // Restart removal timers only when the set of exiting items changes.
  }, [exitingKeys]);

  return items;
}

import { useEffect, useState } from "react";
import { AccessibilityInfo } from "react-native";
import { useReducedMotion } from "react-native-reanimated";

/** Reanimated supplies a synchronous initial value; native events keep it current. */
export function useReducedMotionPreference() {
  const initialValue = useReducedMotion();
  const [reducedMotion, setReducedMotion] = useState(initialValue);

  useEffect(() => {
    let active = true;
    let receivedEvent = false;
    const subscription = AccessibilityInfo.addEventListener(
      "reduceMotionChanged",
      (value) => {
        receivedEvent = true;
        setReducedMotion(value);
      },
    );
    void AccessibilityInfo.isReduceMotionEnabled().then((value) => {
      if (active && !receivedEvent) setReducedMotion(value);
    });
    return () => {
      active = false;
      subscription.remove();
    };
  }, []);

  return reducedMotion;
}

import { useCallback } from "react";
import {
  type EasingFunction,
  type EasingFunctionFactory,
  useAnimatedStyle,
  useSharedValue,
  withSequence,
  withTiming,
} from "react-native-reanimated";

/**
 * Horizontal shake through `keyframes` (in points) over `duration` ms, split
 * evenly like a Motion keyframe array. Callers skip it under reduced motion.
 */
export function useShake(
  keyframes: number[],
  duration: number,
  easing?: EasingFunction | EasingFunctionFactory,
) {
  const offset = useSharedValue(0);
  const step = duration / Math.max(1, keyframes.length - 1);

  const shake = useCallback(() => {
    const [first = 0, ...rest] = keyframes;
    offset.value = first;
    offset.value = withSequence(
      // An explicit `easing: undefined` would replace Reanimated's default.
      ...rest.map((point) =>
        withTiming(
          point,
          easing ? { duration: step, easing } : { duration: step },
        ),
      ),
    );
  }, [easing, keyframes, offset, step]);

  const style = useAnimatedStyle(() => ({
    transform: [{ translateX: offset.value }],
  }));

  return { shake, style };
}

import type { ReactNode } from "react";
import type { ColorValue } from "react-native";
import Svg, { Circle, Path, Rect } from "react-native-svg";

type GlyphProps = { size?: number; color?: ColorValue; strokeWidth?: number };

function Glyph({
  size = 16,
  color = "currentColor",
  strokeWidth = 2,
  children,
}: GlyphProps & { children: ReactNode }) {
  return (
    <Svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke={color}
      strokeWidth={strokeWidth}
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      {children}
    </Svg>
  );
}

// Simple 24-unit stroke glyphs shared by the agent components.

export function ChevronDownGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M6 9l6 6 6-6" />
    </Glyph>
  );
}

export function ArrowUpGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M12 19V5M5.5 11.5L12 5l6.5 6.5" />
    </Glyph>
  );
}

export function PlusGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M12 5v14M5 12h14" />
    </Glyph>
  );
}

export function StopGlyph({ size = 12, color }: GlyphProps) {
  return (
    <Svg width={size} height={size} viewBox="0 0 12 12">
      <Rect x={1} y={1} width={10} height={10} rx={2.5} fill={color} />
    </Svg>
  );
}

export function CheckGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M5 12.5l4.5 4.5L19 7" />
    </Glyph>
  );
}

export function CopyGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Rect x={8.5} y={8.5} width={12} height={12} rx={2.5} />
      <Path d="M15.5 5.5v-.5A2 2 0 0 0 13.5 3h-8.5A2 2 0 0 0 3 5v8.5a2 2 0 0 0 2 2h.5" />
    </Glyph>
  );
}

export function RetryGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M3.5 12a8.5 8.5 0 1 0 2.6-6.1L3.5 8.5" />
      <Path d="M3.5 3.5v5h5" />
    </Glyph>
  );
}

export function ThumbGlyph({
  down = false,
  ...props
}: GlyphProps & { down?: boolean }) {
  return (
    <Glyph {...props}>
      <Path
        d="M7.5 10.5v10M7.5 10.5L11 3.5a2.5 2.5 0 0 1 2.5 2.5v3.5h5a2 2 0 0 1 2 2.3l-1.2 7A2 2 0 0 1 17.3 20.5H4.5a1 1 0 0 1-1-1v-8a1 1 0 0 1 1-1z"
        transform={down ? "rotate(180 12 12)" : undefined}
      />
    </Glyph>
  );
}

export function SearchGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Circle cx={11} cy={11} r={6.5} />
      <Path d="M16 16l4 4" />
    </Glyph>
  );
}

export function GlobeGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Circle cx={12} cy={12} r={8.5} />
      <Path d="M3.5 12h17M12 3.5c2.4 2.5 3.5 5.3 3.5 8.5s-1.1 6-3.5 8.5c-2.4-2.5-3.5-5.3-3.5-8.5s1.1-6 3.5-8.5z" />
    </Glyph>
  );
}

export function FileGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M14 3.5H7.5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2V8z" />
      <Path d="M14 3.5V8h4.5M9 13h6M9 16.5h4" />
    </Glyph>
  );
}

export function PencilGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M4 20h4L19 9a2.1 2.1 0 0 0-4-4L4 16z" />
      <Path d="M13.5 6.5l4 4M14 20h6" />
    </Glyph>
  );
}

export function TerminalGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Rect x={3.5} y={4.5} width={17} height={15} rx={2.5} />
      <Path d="M7.5 10l2.5 2-2.5 2M12.5 15h4" />
    </Glyph>
  );
}

export function WrenchGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M14.5 6.5a4 4 0 0 0 5 5l-8.8 8.8a2.1 2.1 0 0 1-3-3l8.8-8.8a4 4 0 0 1-2-2z" />
    </Glyph>
  );
}

export function SparkleGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M12 4l1.8 4.6L18.5 10.5l-4.7 1.9L12 17l-1.8-4.6-4.7-1.9 4.7-1.9z" />
      <Path d="M18.5 16.5v3M17 18h3" />
    </Glyph>
  );
}

export function MessageGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M20 14.5a2 2 0 0 1-2 2H8.5L4 20V6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2z" />
    </Glyph>
  );
}

export function ImageGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Rect x={3.5} y={4.5} width={17} height={15} rx={2.5} />
      <Circle cx={9} cy={10} r={1.5} />
      <Path d="M20.5 15.5l-4.5-4.5-9 8.5" />
    </Glyph>
  );
}

export function ShieldGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M12 3.5l7 2.5v5.5c0 4.4-3 7.7-7 9-4-1.3-7-4.6-7-9V6z" />
      <Path d="M9 12l2 2 4-4" />
    </Glyph>
  );
}

export function AlertGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Circle cx={12} cy={12} r={8.5} />
      <Path d="M12 8v4.5M12 16h.01" />
    </Glyph>
  );
}

export function CrossGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M6.5 6.5l11 11M17.5 6.5l-11 11" />
    </Glyph>
  );
}

export function HelpGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Circle cx={12} cy={12} r={8.5} />
      <Path d="M9.6 9.5a2.5 2.5 0 0 1 4.8 1c0 1.7-2.4 2.2-2.4 3.5M12 16.8h.01" />
    </Glyph>
  );
}

export function ArrowGlyph({
  back = false,
  ...props
}: GlyphProps & { back?: boolean }) {
  return (
    <Glyph {...props}>
      <Path
        d="M5 12h14M13 6l6 6-6 6"
        transform={back ? "rotate(180 12 12)" : undefined}
      />
    </Glyph>
  );
}

export function BracesGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M8.5 4H8a2 2 0 0 0-2 2v3.5A2.5 2.5 0 0 1 3.5 12 2.5 2.5 0 0 1 6 14.5V18a2 2 0 0 0 2 2h.5M15.5 4h.5a2 2 0 0 1 2 2v3.5a2.5 2.5 0 0 0 2.5 2.5 2.5 2.5 0 0 0-2.5 2.5V18a2 2 0 0 1-2 2h-.5" />
    </Glyph>
  );
}

export function BanGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Circle cx={12} cy={12} r={8.5} />
      <Path d="M6 6l12 12" />
    </Glyph>
  );
}

export function CircleCheckGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Circle cx={12} cy={12} r={8.5} />
      <Path d="M8.5 12.2l2.4 2.4 4.6-4.8" />
    </Glyph>
  );
}

export function CircleCrossGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Circle cx={12} cy={12} r={8.5} />
      <Path d="M9.5 9.5l5 5M14.5 9.5l-5 5" />
    </Glyph>
  );
}

export function ListGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M4 6.5l1.5 1.5L8 5.5M4 13l1.5 1.5L8 12M11.5 7h8.5M11.5 13.5h8.5M11.5 19h8.5M4.5 19h2" />
    </Glyph>
  );
}

/** An open ring, spun by SpinGlyph. */
export function RingGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M20.5 12a8.5 8.5 0 1 1-6-8.1" />
    </Glyph>
  );
}

export function ReplyGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M9.5 7L4.5 12l5 5M4.5 12h10a5 5 0 0 1 5 5v1" />
    </Glyph>
  );
}

export function WrapGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M4 6.5h16M4 12h12.5a3.25 3.25 0 0 1 0 6.5H12M4 18.5h4.5M14 16.5l-2 2 2 2" />
    </Glyph>
  );
}

export function BookGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M12 6.5c-1.6-1.3-4-2-7.5-2v13c3.5 0 5.9.7 7.5 2 1.6-1.3 4-2 7.5-2v-13c-3.5 0-5.9.7-7.5 2zM12 6.5v13" />
    </Glyph>
  );
}

export function ExternalGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M14 4.5h5.5V10M19.5 4.5L11 13M17 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h4" />
    </Glyph>
  );
}

export function DoubleCheckGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M2.5 12.5l4.5 4.5 9-9.5M12 16.5l.5.5 9-9.5" />
    </Glyph>
  );
}

export function ClockGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Circle cx={12} cy={12} r={8.5} />
      <Path d="M12 7.5V12l3 2" />
    </Glyph>
  );
}

export function MicGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Rect x={9} y={3.5} width={6} height={11} rx={3} />
      <Path d="M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5v3" />
    </Glyph>
  );
}