@q9labsai/chalk-react-native 4.1.17 → 5.0.1

package/src/primitives/CopyButton.tsx

@@ -0,0 +1,78 @@
+import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { Pressable, StyleSheet } from "react-native";
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+import { Icon } from "../icons/Icon";
+import { timings } from "../motion/motion";
+import { usePressAnimation } from "../motion/press";
+import { useTheme } from "../theme/theme";
+import { durations, fixed } from "../theme/tokens";
+import { announce } from "./announce";
+
+export type CopyButtonProps = {
+  /** Writes the value to the clipboard. The button morphs to a check once it resolves. */
+  readonly onCopy: () => void | Promise<void>;
+  readonly accessibilityLabel: string;
+  /** Spoken once the copy succeeds, for example "Link copied". */
+  readonly announcement: string;
+  readonly testID?: string;
+};
+
+/** The mockup's copy button (`.cp`): the copy icon turns into a green check for two seconds. */
+export const CopyButton = memo(function CopyButton({ onCopy, accessibilityLabel, announcement, testID }: CopyButtonProps): React.JSX.Element {
+  const { colors } = useTheme();
+  const press = usePressAnimation("small");
+  const [copied, setCopied] = useState(false);
+  const done = useSharedValue(0);
+  const reset = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    done.value = withTiming(copied ? 1 : 0, timings.copyMorph);
+  }, [copied, done]);
+  useEffect(() => () => clearReset(reset), []);
+
+  const copy = useCallback(async () => {
+    await onCopy();
+    setCopied(true);
+    announce(announcement);
+    clearReset(reset);
+    reset.current = setTimeout(() => setCopied(false), durations.copyReset);
+  }, [announcement, onCopy]);
+
+  const copyIconStyle = useAnimatedStyle(() => {
+    "worklet";
+    return { opacity: 1 - done.value, transform: [{ scale: 1 - 0.6 * done.value }, { rotate: `${20 * done.value}deg` }] };
+  });
+  const checkIconStyle = useAnimatedStyle(() => {
+    "worklet";
+    return { opacity: done.value, transform: [{ scale: 0.4 + 0.6 * done.value }, { rotate: `${-20 * (1 - done.value)}deg` }] };
+  });
+  const { down } = press;
+  const pressed = colors.pressed;
+  const backgroundStyle = useAnimatedStyle(() => {
+    "worklet";
+    return { backgroundColor: down.value ? pressed : fixed.transparent };
+  });
+
+  return (
+    <Pressable accessibilityLabel={accessibilityLabel} accessibilityRole="button" hitSlop={4} onPress={copy} onPressIn={press.onPressIn} onPressOut={press.onPressOut} testID={testID}>
+      <Animated.View style={[styles.button, backgroundStyle, press.scaleStyle]}>
+        <Animated.View style={[styles.icon, copyIconStyle]}>
+          <Icon color={colors.text} name="copy" size={18} />
+        </Animated.View>
+        <Animated.View style={[styles.icon, checkIconStyle]}>
+          <Icon color={colors.success} name="check" size={18} />
+        </Animated.View>
+      </Animated.View>
+    </Pressable>
+  );
+});
+
+function clearReset(reset: { current: ReturnType<typeof setTimeout> | null }): void {
+  if (reset.current) clearTimeout(reset.current);
+  reset.current = null;
+}
+
+const styles = StyleSheet.create({
+  button: { width: 36, height: 36, borderRadius: 18, alignItems: "center", justifyContent: "center" },
+  icon: { position: "absolute" },
+});

package/src/primitives/IconButton.tsx

@@ -0,0 +1,90 @@
+import { forwardRef, memo } from "react";
+import { Pressable, StyleSheet, View, type View as ViewType } from "react-native";
+import Animated, { useAnimatedStyle } from "react-native-reanimated";
+import { Icon, type IconName } from "../icons/Icon";
+import { usePressAnimation } from "../motion/press";
+import { useTheme } from "../theme/theme";
+import { fixed, type Palette } from "../theme/tokens";
+import { useMeasuredRef } from "../frame/measurement";
+import { ChalkText } from "./ChalkText";
+
+export type IconButtonProps = {
+  readonly icon: IconName;
+  readonly accessibilityLabel: string;
+  readonly onPress?: () => void;
+  /** 44 pt by default, 52 pt in the phone dock, 40 pt in the header, 36 pt for a close button. */
+  readonly size?: 36 | 40 | 44 | 52;
+  /** `raised` for dock buttons, `surface` for header buttons, `danger` for Leave, `ghost` for close buttons (`.x`). */
+  readonly tone?: "raised" | "surface" | "danger" | "ghost";
+  /** An on state: the button inverts, as `aria-pressed="true"` does in the mockup. */
+  readonly selected?: boolean;
+  /** Draws the icon in the danger text colour, for a muted microphone or a camera that's off. */
+  readonly off?: boolean;
+  /** A short name under the button, such as the dock's "Speaker". */
+  readonly caption?: string;
+  /** The button opens a menu or sheet; reported as expanded while it's open. */
+  readonly expanded?: boolean;
+  /** Sits directly on the call canvas (dock, header); the light theme rings it with a hairline. */
+  readonly onCanvas?: boolean;
+  readonly disabled?: boolean;
+  readonly testID?: string;
+};
+
+/** The mockup's round button (`.rb`): press scale 0.94 over 150 ms, background switches at once. */
+export const IconButton = memo(
+  forwardRef<ViewType, IconButtonProps>(function IconButton({ icon, accessibilityLabel, onPress, size = 44, tone = "raised", selected = false, off = false, caption, expanded, onCanvas = false, disabled = false, testID }, ref) {
+    const { colors, elevation } = useTheme();
+    const press = usePressAnimation("round");
+    const base = selected ? colors.text : BASE[tone](colors);
+    const pressedColor = selected ? colors.text : tone === "danger" ? colors.dangerPressed : colors.pressed;
+    const iconColor = selected ? colors.canvas : tone === "danger" ? fixed.onDanger : off ? colors.dangerText : tone === "ghost" ? colors.textMuted : colors.text;
+    const ring = onCanvas && elevation.ringOnCanvas && tone !== "danger";
+    const { down } = press;
+    const roundStyle = [styles.round, { width: size, height: size, borderRadius: size / 2 }, ring ? { boxShadow: `0px 0px 0px 1px ${colors.line}` } : null, disabled ? styles.disabled : null];
+    const roundRef = useMeasuredRef<ViewType>(testID, [roundStyle, { backgroundColor: base }]);
+    const background = useAnimatedStyle(() => {
+      "worklet";
+      return { backgroundColor: down.value ? pressedColor : base };
+    });
+
+    return (
+      <Pressable
+        accessibilityLabel={accessibilityLabel}
+        accessibilityRole="button"
+        accessibilityState={{ selected, disabled, expanded }}
+        disabled={disabled}
+        hitSlop={size < 44 ? (44 - size) / 2 : undefined}
+        onPress={onPress}
+        onPressIn={press.onPressIn}
+        onPressOut={press.onPressOut}
+        ref={ref}
+        testID={testID}
+      >
+        <Animated.View ref={roundRef} style={[roundStyle, background, press.scaleStyle]}>
+          <Icon color={iconColor} name={icon} size={tone === "ghost" ? 18 : 20} />
+        </Animated.View>
+        {caption ? (
+          <View pointerEvents="none" style={styles.captionBox}>
+            <ChalkText numberOfLines={1} tone="textMuted" variant="caption">
+              {caption}
+            </ChalkText>
+          </View>
+        ) : null}
+      </Pressable>
+    );
+  }),
+);
+
+const BASE: Readonly<Record<NonNullable<IconButtonProps["tone"]>, (colors: Palette) => string>> = {
+  raised: (colors) => colors.raised,
+  surface: (colors) => colors.surface,
+  danger: (colors) => colors.danger,
+  ghost: () => fixed.transparent,
+};
+
+const styles = StyleSheet.create({
+  round: { alignItems: "center", justifyContent: "center" },
+  disabled: { opacity: 0.45 },
+  // `.rl`: absolutely placed so the dock keeps its height; its bottom sits 17 pt below the button.
+  captionBox: { position: "absolute", left: -20, right: -20, bottom: -17, alignItems: "center" },
+});

package/src/primitives/Menu.tsx

@@ -0,0 +1,212 @@
+import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, type ReactNode, type RefObject } from "react";
+import { AccessibilityInfo, findNodeHandle, Keyboard, Pressable, ScrollView, StyleSheet, View, type LayoutChangeEvent } from "react-native";
+import Animated, { useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from "react-native-reanimated";
+import { useBackHandler } from "../frame/back-handler";
+import { useDeviceLayout } from "../frame/device-layout";
+import { Portal } from "../frame/portal";
+import { useMeasuredRef } from "../frame/measurement";
+import { Icon, type IconName } from "../icons/Icon";
+import { timings } from "../motion/motion";
+import { useTheme } from "../theme/theme";
+import { radii, sizes } from "../theme/tokens";
+import { ChalkText } from "./ChalkText";
+import { placeMenu, type MenuPlacement, type Rect } from "./menu-placement";
+
+export type MenuProps = {
+  readonly open: boolean;
+  readonly onClose: () => void;
+  /** The button that opened the menu. The menu sits next to it and focus returns to it. */
+  readonly anchorRef: RefObject<View | null>;
+  readonly accessibilityLabel: string;
+  readonly children: ReactNode;
+  readonly minWidth?: number;
+  readonly testID?: string;
+};
+
+type MenuFocus = { readonly claim: (node: View) => void };
+const MenuFocusContext = createContext<MenuFocus | null>(null);
+
+/**
+ * The menu and popover surface (`.pop`): 12 pt radius, sentence-case section labels and
+ * 40 pt rows (48 pt on a phone). It opens below its trigger, flips above only when there's
+ * more room there, shifts sideways to stay on screen, and stays inside the safe area.
+ */
+export function Menu({ open, onClose, anchorRef, accessibilityLabel, children, minWidth = 250, testID }: MenuProps): React.JSX.Element | null {
+  const { colors, elevation } = useTheme();
+  const layout = useDeviceLayout();
+  const reduceMotion = useReducedMotion();
+  const [trigger, setTrigger] = useState<Rect | null>(null);
+  const [placement, setPlacement] = useState<MenuPlacement | null>(null);
+  const firstItem = useRef<View | null>(null);
+  const keyboardHeight = useKeyboardHeight();
+  const shown = useSharedValue(0);
+
+  useBackHandler(open, onClose);
+
+  useEffect(() => {
+    if (!open) {
+      firstItem.current = null;
+      setTrigger(null);
+      setPlacement(null);
+      shown.value = 0;
+      return;
+    }
+    anchorRef.current?.measureInWindow((x, y, width, height) => setTrigger({ x, y, width, height }));
+  }, [anchorRef, open, shown]);
+
+  // Like iOS menus, an open menu closes when the screen rotates or resizes, because its trigger moved.
+  const viewport = `${layout.width}x${layout.height}`;
+  const openedIn = useRef(viewport);
+  useEffect(() => {
+    if (!open) openedIn.current = viewport;
+    else if (viewport !== openedIn.current) onClose();
+  }, [onClose, open, viewport]);
+
+  const wasOpen = useRef(open);
+  useEffect(() => {
+    const closed = wasOpen.current && !open;
+    wasOpen.current = open;
+    if (!closed || !anchorRef.current) return;
+    const node = findNodeHandle(anchorRef.current);
+    if (node) AccessibilityInfo.setAccessibilityFocus(node);
+  }, [anchorRef, open]);
+
+  const onLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      if (!trigger || placement) return;
+      const { width, height } = event.nativeEvent.layout;
+      setPlacement(placeMenu(trigger, { width, height }, layout, layout.insets, keyboardHeight));
+      shown.value = reduceMotion ? 1 : withTiming(1, timings.menu);
+    },
+    [keyboardHeight, layout, placement, reduceMotion, shown, trigger],
+  );
+
+  useEffect(() => {
+    if (!placement || !firstItem.current) return;
+    const node = findNodeHandle(firstItem.current);
+    if (node) AccessibilityInfo.setAccessibilityFocus(node);
+  }, [placement]);
+
+  const surfaceStyle = useAnimatedStyle(() => {
+    "worklet";
+    return { opacity: shown.value, transform: [{ translateY: reduceMotion ? 0 : (1 - shown.value) * 4 }] };
+  });
+  const focus = useMemo<MenuFocus>(
+    () => ({
+      claim: (node) => {
+        firstItem.current ??= node;
+      },
+    }),
+    [],
+  );
+
+  const surfaceStatic = [styles.surface, { minWidth, backgroundColor: colors.popover, borderColor: colors.lineStrong, boxShadow: elevation.popover }, placement ? { left: placement.x, top: placement.y, maxHeight: placement.maxHeight ?? undefined } : styles.measuring];
+  const surfaceRef = useMeasuredRef<View>(testID, surfaceStatic);
+
+  if (!open || !trigger) return null;
+  return (
+    <Portal layer="menus">
+      <Pressable accessible={false} onPress={onClose} style={StyleSheet.absoluteFill} testID={testID ? `${testID}.backdrop` : undefined} />
+      <Animated.View accessibilityLabel={accessibilityLabel} accessibilityRole="menu" accessibilityViewIsModal onAccessibilityEscape={onClose} onLayout={onLayout} ref={surfaceRef} style={[surfaceStatic, surfaceStyle]} testID={testID}>
+        <MenuFocusContext.Provider value={focus}>
+          <ScrollView bounces={false} scrollEnabled={placement?.maxHeight != null}>
+            {children}
+          </ScrollView>
+        </MenuFocusContext.Provider>
+      </Animated.View>
+    </Portal>
+  );
+}
+
+export type MenuItemProps = {
+  readonly label: string;
+  readonly onPress: () => void;
+  readonly icon?: IconName;
+  /** A smaller second line under the label (`.mi small`). */
+  readonly detail?: string;
+  /** Muted text at the end of the row (`.mi .end`). */
+  readonly trailing?: string;
+  /** Rows in a choice list reserve a check column; `true` draws the check. */
+  readonly checked?: boolean;
+  readonly danger?: boolean;
+  readonly testID?: string;
+};
+
+export function MenuItem({ label, onPress, icon, detail, trailing, checked, danger = false, testID }: MenuItemProps): React.JSX.Element {
+  const { colors } = useTheme();
+  const { phone } = useDeviceLayout();
+  const focus = useContext(MenuFocusContext);
+  const ref = useRef<View>(null);
+  useLayoutEffect(() => {
+    if (ref.current) focus?.claim(ref.current);
+  }, [focus]);
+  const tone = danger ? "dangerText" : "text";
+  return (
+    <Pressable
+      accessibilityLabel={trailing ? `${label}, ${trailing}` : label}
+      accessibilityRole="menuitem"
+      accessibilityState={checked === undefined ? undefined : { checked }}
+      onPress={onPress}
+      ref={ref}
+      style={({ pressed }) => [styles.item, { minHeight: phone ? sizes.menuRowPhone : sizes.menuRow }, pressed ? { backgroundColor: colors.hover } : null]}
+      testID={testID}
+    >
+      {checked === undefined ? null : <View style={styles.check}>{checked ? <Icon color={colors.text} name="check" size={18} /> : null}</View>}
+      {icon ? <Icon color={danger ? colors.dangerText : colors.textMuted} name={icon} size={18} /> : null}
+      <View style={styles.labels}>
+        <ChalkText numberOfLines={1} tone={tone}>
+          {label}
+        </ChalkText>
+        {detail ? (
+          <ChalkText tone="textMuted" variant="label">
+            {detail}
+          </ChalkText>
+        ) : null}
+      </View>
+      {trailing ? (
+        <ChalkText tone="textMuted" variant="meta">
+          {trailing}
+        </ChalkText>
+      ) : null}
+    </Pressable>
+  );
+}
+
+/** A sentence-case label above a group of rows (`.mh2`). */
+export function MenuSection({ label }: { readonly label: string }): React.JSX.Element {
+  return (
+    <View accessibilityRole="header" accessible style={styles.section}>
+      <ChalkText tone="textMuted" variant="section">
+        {label}
+      </ChalkText>
+    </View>
+  );
+}
+
+export function MenuSeparator(): React.JSX.Element {
+  const { colors } = useTheme();
+  return <View style={[styles.separator, { backgroundColor: colors.line }]} />;
+}
+
+function useKeyboardHeight(): number {
+  const [height, setHeight] = useState(0);
+  useEffect(() => {
+    const show = Keyboard.addListener("keyboardDidShow", (event) => setHeight(event.endCoordinates.height));
+    const hide = Keyboard.addListener("keyboardDidHide", () => setHeight(0));
+    return () => {
+      show.remove();
+      hide.remove();
+    };
+  }, []);
+  return height;
+}
+
+const styles = StyleSheet.create({
+  surface: { position: "absolute", padding: 6, borderWidth: 1, borderRadius: radii.menu },
+  measuring: { left: 0, top: 0, opacity: 0 },
+  item: { flexDirection: "row", alignItems: "center", gap: 10, paddingHorizontal: 10, borderRadius: radii.menuRow },
+  check: { width: 18, alignItems: "center" },
+  labels: { flex: 1, minWidth: 0, gap: 2 },
+  section: { paddingTop: 8, paddingHorizontal: 10, paddingBottom: 4 },
+  separator: { height: 1, marginVertical: 6, marginHorizontal: 4 },
+});

package/src/primitives/NameTag.tsx

@@ -0,0 +1,68 @@
+import { memo } from "react";
+import { StyleSheet, View } from "react-native";
+import { useMeasuredRef } from "../frame/measurement";
+import { Icon, type IconName } from "../icons/Icon";
+import { fixed, fontFamilies, type } from "../theme/tokens";
+import { ChalkText } from "./ChalkText";
+
+export type NameTagProps = {
+  readonly name: string;
+  readonly muted?: boolean;
+  readonly pinned?: boolean;
+  /** A leading icon for a tile that isn't a person, such as `share` on a shared screen or `pen` on the board. */
+  readonly icon?: IconName;
+  /** Your own tile: `(You)` follows the name and stays whole when a long name truncates. */
+  readonly you?: boolean;
+  /** Raised hand; `handOrder` shows the place in the queue when more than one hand is up. */
+  readonly handRaised?: boolean;
+  readonly handOrder?: number;
+  readonly testID?: string;
+};
+
+/** The mockup's name tag (`.tag`): bottom-left of a tile, white on the dark overlay in both themes. */
+export const NameTag = memo(function NameTag({ name, muted = false, pinned = false, icon, you = false, handRaised = false, handOrder, testID }: NameTagProps): React.JSX.Element {
+  const tagRef = useMeasuredRef<View>(testID, styles.tag);
+  return (
+    <View pointerEvents="none" style={styles.slot}>
+      <View ref={tagRef} style={styles.tag} testID={testID}>
+        {pinned ? <Icon color={fixed.overlayText} name="pin" size={14} /> : null}
+        {icon ? <Icon color={fixed.overlayText} name={icon} size={14} /> : null}
+        <ChalkText color={fixed.overlayText} numberOfLines={1} style={styles.name} variant="label">
+          {name}
+        </ChalkText>
+        {you ? (
+          <ChalkText color={fixed.overlayText} style={styles.you} variant="label">
+            (You)
+          </ChalkText>
+        ) : null}
+        {muted ? <Icon color={fixed.overlayDanger} name="micOff" size={14} /> : null}
+        {handRaised ? (
+          <View style={styles.hand}>
+            <Icon color={fixed.overlayWarning} name="hand" size={14} />
+            {handOrder !== undefined ? (
+              <ChalkText color={fixed.overlayWarning} style={styles.order} tabular>
+                {handOrder}
+              </ChalkText>
+            ) : null}
+          </View>
+        ) : null}
+      </View>
+    </View>
+  );
+});
+
+const INSET = 8;
+const HEIGHT = 24;
+
+/** The strip at the bottom of a tile that the name tag can cover, so tile content can keep clear of it. */
+export const nameTagZone = INSET + HEIGHT;
+
+const styles = StyleSheet.create({
+  // `.tag`: 8 pt from the bottom-left corner and never wider than the tile less 16 pt.
+  slot: { position: "absolute", left: INSET, right: INSET, bottom: INSET, flexDirection: "row", zIndex: 2 },
+  tag: { flexShrink: 1, height: HEIGHT, paddingHorizontal: 8, borderRadius: 6, backgroundColor: fixed.overlay, flexDirection: "row", alignItems: "center", gap: 5 },
+  name: { flexShrink: 1 },
+  you: { flexShrink: 0 },
+  hand: { flexDirection: "row", alignItems: "center", gap: 2 },
+  order: { ...type.caption, fontFamily: fontFamilies[700] },
+});

package/src/primitives/PillButton.tsx

@@ -0,0 +1,56 @@
+import { forwardRef, memo } from "react";
+import { Pressable, StyleSheet, type View as ViewType } from "react-native";
+import Animated from "react-native-reanimated";
+import { Icon, type IconName } from "../icons/Icon";
+import { usePressAnimation } from "../motion/press";
+import { useTheme } from "../theme/theme";
+import { fixed, type TypeStyle } from "../theme/tokens";
+import { ChalkText } from "./ChalkText";
+
+export type PillButtonProps = {
+  readonly label: string;
+  readonly onPress?: () => void;
+  readonly variant?: "primary" | "secondary" | "danger";
+  /**
+   * `sm` 32, `md` 36 (`.pb`), `lg` 40, `wide` 48 and full width (sheets), `big` 52 and full width (Home).
+   * Home's inline buttons: `inline` 40 (`.clipc .pb`), `card` 44 and full width (`.lcard .pb`), `field` 48 beside a field (`.yrow .pb`).
+   */
+  readonly size?: "sm" | "md" | "lg" | "wide" | "big" | "inline" | "card" | "field";
+  readonly icon?: IconName;
+  readonly accessibilityLabel?: string;
+  readonly disabled?: boolean;
+  readonly testID?: string;
+};
+
+const HEIGHT = { sm: 32, md: 36, lg: 40, wide: 48, big: 52, inline: 40, card: 44, field: 48 } as const;
+const PADDING = { sm: 12, md: 14, lg: 14, wide: 14, big: 14, inline: 12, card: 14, field: 18 } as const;
+const TEXT: Readonly<Record<keyof typeof HEIGHT, TypeStyle>> = { sm: "button", md: "button", lg: "bodyStrong", wide: "wideButton", big: "sheetTitle", inline: "button", card: "button", field: "button" };
+const ICON = { sm: 18, md: 18, lg: 18, wide: 18, big: 20, inline: 18, card: 18, field: 18 } as const;
+
+/** The mockup's pill button (`.pb`, `.big`): primary inverts, secondary is raised, danger is red. */
+export const PillButton = memo(
+  forwardRef<ViewType, PillButtonProps>(function PillButton({ label, onPress, variant = "secondary", size = "md", icon, accessibilityLabel, disabled = false, testID }, ref) {
+    const { colors } = useTheme();
+    const press = usePressAnimation(size === "big" ? "big" : "pill");
+    // Disabled swaps the fill and label colours instead of fading the pill, so the label keeps 3:1 against its fill in both themes.
+    const background = disabled ? colors.hover : variant === "primary" ? colors.text : variant === "danger" ? colors.danger : size === "big" ? colors.raised : colors.hover;
+    const foreground = disabled ? colors.textMuted : variant === "primary" ? colors.canvas : variant === "danger" ? fixed.onDanger : colors.text;
+    const full = size === "wide" || size === "big" || size === "card";
+
+    return (
+      <Pressable accessibilityLabel={accessibilityLabel} accessibilityRole="button" accessibilityState={{ disabled }} disabled={disabled} onPress={onPress} onPressIn={press.onPressIn} onPressOut={press.onPressOut} ref={ref} style={full ? styles.full : null} testID={testID}>
+        <Animated.View style={[styles.pill, { height: HEIGHT[size], paddingHorizontal: PADDING[size], backgroundColor: background }, press.scaleStyle]}>
+          {icon ? <Icon color={foreground} name={icon} size={ICON[size]} /> : null}
+          <ChalkText color={foreground} numberOfLines={1} variant={TEXT[size]}>
+            {label}
+          </ChalkText>
+        </Animated.View>
+      </Pressable>
+    );
+  }),
+);
+
+const styles = StyleSheet.create({
+  pill: { flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 6, borderRadius: 999 },
+  full: { alignSelf: "stretch" },
+});

package/src/primitives/SegmentedControl.tsx

@@ -0,0 +1,55 @@
+import { Pressable, StyleSheet, View } from "react-native";
+import { useMeasuredRef } from "../frame/measurement";
+import { useTheme } from "../theme/theme";
+import { fixed } from "../theme/tokens";
+import { ChalkText } from "./ChalkText";
+
+export type SegmentOption<TValue extends string> = {
+  readonly value: TValue;
+  readonly label: string;
+  readonly testID?: string;
+};
+
+export type SegmentedControlProps<TValue extends string> = {
+  readonly options: readonly SegmentOption<TValue>[];
+  readonly value: TValue;
+  readonly onChange: (value: TValue) => void;
+  readonly accessibilityLabel: string;
+  /** `regular` is the sheet row control (38 pt segments); `compact` is the call details one (30 pt). */
+  readonly size?: "regular" | "compact";
+  readonly testID?: string;
+};
+
+/** The mockup's segmented control (`.seg2`). The selected segment lifts onto a brighter surface. */
+export function SegmentedControl<TValue extends string>({ options, value, onChange, accessibilityLabel, size = "regular", testID }: SegmentedControlProps<TValue>): React.JSX.Element {
+  const { colors } = useTheme();
+  const compact = size === "compact";
+  const trackStyle = [styles.track, { backgroundColor: compact ? colors.hover : colors.surface }];
+  const trackRef = useMeasuredRef<View>(testID, trackStyle);
+  return (
+    <View accessibilityLabel={accessibilityLabel} accessibilityRole="radiogroup" ref={trackRef} style={trackStyle} testID={testID}>
+      {options.map((option) => (
+        <Segment compact={compact} key={option.value} onChange={onChange} option={option} selected={option.value === value} />
+      ))}
+    </View>
+  );
+}
+
+function Segment<TValue extends string>({ option, selected, compact, onChange }: { readonly option: SegmentOption<TValue>; readonly selected: boolean; readonly compact: boolean; readonly onChange: (value: TValue) => void }): React.JSX.Element {
+  const { colors } = useTheme();
+  const style = [styles.segment, { height: compact ? 30 : 38 }, selected ? (compact ? [{ backgroundColor: colors.popover }, styles.lifted] : { backgroundColor: colors.pressed }) : null];
+  const ref = useMeasuredRef<View>(option.testID, style);
+  return (
+    <Pressable accessibilityLabel={option.label} accessibilityRole="radio" accessibilityState={{ selected, checked: selected }} hitSlop={compact ? 7 : 3} onPress={() => onChange(option.value)} ref={ref} style={style} testID={option.testID}>
+      <ChalkText tone={selected ? "text" : "textMuted"} variant={compact ? "button" : "bodyStrong"}>
+        {option.label}
+      </ChalkText>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  track: { flexDirection: "row", padding: 3, borderRadius: 999 },
+  segment: { justifyContent: "center", paddingHorizontal: 14, borderRadius: 999 },
+  lifted: { boxShadow: fixed.segmentShadow },
+});

package/src/primitives/SheetGroup.tsx

@@ -0,0 +1,72 @@
+import { Children, Fragment, type ReactNode } from "react";
+import { Pressable, StyleSheet, View } from "react-native";
+import { Icon, type IconName } from "../icons/Icon";
+import { useTheme } from "../theme/theme";
+import { ChalkText } from "./ChalkText";
+
+/** A rounded group of sheet rows (`.sgrp`), with a hairline between rows. */
+export function SheetGroup({ children, testID }: { readonly children: ReactNode; readonly testID?: string }): React.JSX.Element {
+  const { colors } = useTheme();
+  const rows = Children.toArray(children);
+  return (
+    <View style={[styles.group, { backgroundColor: colors.raised }]} testID={testID}>
+      {rows.map((row, index) => (
+        <Fragment key={index}>
+          {index > 0 ? <View style={[styles.divider, { backgroundColor: colors.line }]} /> : null}
+          {row}
+        </Fragment>
+      ))}
+    </View>
+  );
+}
+
+export type SheetRowProps = {
+  readonly label: string;
+  readonly icon?: IconName;
+  /** A control or muted text at the end of the row: a switch, a segmented control, a count. */
+  readonly end?: ReactNode;
+  /** A mark right after the label, such as the unread dot (`.udot`); the end control stays at the edge. */
+  readonly badge?: ReactNode;
+  /** What a screen reader says for the row, when the badge adds meaning the label lacks. Defaults to the label. */
+  readonly accessibilityLabel?: string;
+  /** Makes the whole row a button. Leave it out when the row holds its own control. */
+  readonly onPress?: () => void;
+  readonly danger?: boolean;
+  readonly testID?: string;
+};
+
+/** A phone sheet row (`.srow`): 52 pt high, 16 pt text, an optional icon in front and a control at the end. */
+export function SheetRow({ label, icon, end, badge, accessibilityLabel = label, onPress, danger = false, testID }: SheetRowProps): React.JSX.Element {
+  const { colors } = useTheme();
+  const content = (
+    <>
+      {icon ? <Icon color={danger ? colors.dangerText : colors.textSoft} name={icon} /> : null}
+      <ChalkText numberOfLines={1} style={badge ? styles.labelShrink : styles.label} tone={danger ? "dangerText" : "text"} variant="phoneRow">
+        {label}
+      </ChalkText>
+      {badge ? <View style={styles.badge}>{badge}</View> : null}
+      {end}
+    </>
+  );
+  if (!onPress) {
+    return (
+      <View style={styles.row} testID={testID}>
+        {content}
+      </View>
+    );
+  }
+  return (
+    <Pressable accessibilityLabel={accessibilityLabel} accessibilityRole="button" onPress={onPress} style={({ pressed }) => [styles.row, pressed ? { backgroundColor: colors.pressed } : null]} testID={testID}>
+      {content}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  group: { borderRadius: 16, overflow: "hidden" },
+  divider: { height: 1 },
+  row: { flexDirection: "row", alignItems: "center", gap: 14, minHeight: 52, paddingHorizontal: 16 },
+  label: { flex: 1 },
+  labelShrink: { flexShrink: 1 },
+  badge: { marginLeft: 2, marginRight: "auto" },
+});

package/src/primitives/Switch.tsx

@@ -0,0 +1,39 @@
+import { memo, useEffect } from "react";
+import { Pressable, StyleSheet } from "react-native";
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+import { timings } from "../motion/motion";
+import { useTheme } from "../theme/theme";
+import { fixed } from "../theme/tokens";
+
+export type SwitchProps = {
+  readonly value: boolean;
+  readonly onValueChange: (value: boolean) => void;
+  readonly accessibilityLabel: string;
+  readonly testID?: string;
+};
+
+/** The mockup's switch (`.sw`): a 36 by 22 track, green when on, with a knob that slides 14 pt in 150 ms. */
+export const Switch = memo(function Switch({ value, onValueChange, accessibilityLabel, testID }: SwitchProps): React.JSX.Element {
+  const { colors } = useTheme();
+  const on = useSharedValue(value ? 1 : 0);
+  useEffect(() => {
+    on.value = withTiming(value ? 1 : 0, timings.switch);
+  }, [on, value]);
+  const knobStyle = useAnimatedStyle(() => {
+    "worklet";
+    return { transform: [{ translateX: on.value * 14 }] };
+  });
+
+  return (
+    <Pressable accessibilityLabel={accessibilityLabel} accessibilityRole="switch" accessibilityState={{ checked: value }} hitSlop={11} onPress={() => onValueChange(!value)} testID={testID}>
+      <Animated.View style={[styles.track, { backgroundColor: value ? colors.success : colors.pressed }]}>
+        <Animated.View style={[styles.knob, knobStyle]} />
+      </Animated.View>
+    </Pressable>
+  );
+});
+
+const styles = StyleSheet.create({
+  track: { width: 36, height: 22, borderRadius: 999 },
+  knob: { position: "absolute", left: 3, top: 3, width: 16, height: 16, borderRadius: 8, backgroundColor: fixed.switchKnob },
+});