panelui-native 0.77.0 → 0.79.0

package/src/components/progress-button/progress-button-hold.ts

@@ -0,0 +1,88 @@
+/**
+ * The arithmetic behind a hold, kept out of the component so it can be tested
+ * without a renderer — the same split `splitter-math` and `ai-input-growth` use.
+ *
+ * None of it is worklet-only, so the component can call it from either runtime.
+ */
+
+/** Milliseconds a hold has to be sustained before it counts. */
+export const DEFAULT_HOLD_DURATION = 2000;
+
+/**
+ * Milliseconds a complete fill takes to rewind, when the hold length is not
+ * known — the default only exists so {@link releaseDuration} has one.
+ *
+ * The component always passes the hold's own duration instead: the drain is
+ * the fill running backwards at the same rate, so a two-second hold takes two
+ * seconds to give back.
+ */
+export const DEFAULT_RELEASE_DURATION = DEFAULT_HOLD_DURATION;
+
+/** Milliseconds before an `autoReset` button offers itself again. */
+export const DEFAULT_AUTO_RESET_DELAY = 1000;
+
+/**
+ * A hold duration that cannot produce a broken animation.
+ *
+ * Zero would complete on touch-down, which defeats the point of the control:
+ * a hold-to-confirm that confirms on a tap is a button with extra steps. A
+ * floor rather than a rejection, because the caller asking for `0` wants it
+ * fast, not broken.
+ */
+export function resolveHoldDuration(duration: number | undefined): number {
+  if (duration === undefined) return DEFAULT_HOLD_DURATION;
+  if (!Number.isFinite(duration)) return DEFAULT_HOLD_DURATION;
+  return Math.max(200, duration);
+}
+
+/**
+ * How long the fill should take to drain from where it is.
+ *
+ * The fill, run backwards. `full` is the hold's own duration, so the drain
+ * covers the distance left at exactly the rate it was filled at: let go at
+ * nine tenths of a two-second hold and it takes 1.8 seconds to give back, the
+ * same 1.8 seconds it took to earn.
+ *
+ * That is the point of it. The wait was drawn on the button, so undoing the
+ * wait is worth drawing too — a fill that vanishes has been deleted, and a
+ * fill that travels back has been let go.
+ */
+export function releaseDuration(
+  progress: number,
+  full: number = DEFAULT_RELEASE_DURATION
+): number {
+  // A worklet, because the only runtime that knows how far the fill actually
+  // got is the one animating it. Reading a shared value from JavaScript gives
+  // the value before the animation started, so the release has to be started
+  // from the UI thread — and that means this has to run there too.
+  'worklet';
+  const travelled = Math.min(1, Math.max(0, progress));
+  return Math.max(80, full * travelled);
+}
+
+/**
+ * Whether a hold that has been released should still be honoured.
+ *
+ * The fill is the promise, so anything short of the end is not a confirmation —
+ * there is no "close enough" here. It exists as a named function because the
+ * tempting version of this rule is a tolerance, and a tolerance means the
+ * button sometimes fires when the reader let go early on purpose.
+ */
+export function isComplete(progress: number): boolean {
+  'worklet';
+  return progress >= 1;
+}
+
+/**
+ * How long it takes to cover the distance still ahead, at the fill's own rate.
+ *
+ * A press that arrives while the fill is on its way back should carry on from
+ * where it is rather than restarting the clock — otherwise a fill picked up at
+ * halfway takes the whole hold to cover the half that is left, and the second
+ * attempt is twice as slow as the first for no reason the reader can see.
+ */
+export function fillDuration(from: number, full: number): number {
+  'worklet';
+  const remaining = Math.min(1, Math.max(0, 1 - from));
+  return Math.max(80, full * remaining);
+}

package/src/components/scatter-chart/index.tsx

@@ -70,6 +70,7 @@ import { Text } from '../../primitives/text';
 import { ChartAccessibilityData, type ChartAccessibilityProps } from '../../primitives/chart-accessibility';
 import { compactNumber, useSeriesColor, xAt, yOf, type Plot } from '../../utils/chart';
 import { cn } from '../../utils/cn';
+import { useSkeletonHandoff } from '../../hooks/use-skeleton-handoff';
 
 const AnimatedCircle = Animated.createAnimatedComponent(Circle);
 const AnimatedG = Animated.createAnimatedComponent(G);
@@ -81,9 +82,6 @@ const AnimatedG = Animated.createAnimatedComponent(G);
  */
 const STAGGER = 0.4;
 
-/** Milliseconds for the placeholder field to dissolve once the data arrives. */
-const SKELETON_FADE = 220;
-
 /** Milliseconds for a point to swell as it is selected, and settle as it is not. */
 const SELECT_DURATION = 140;
 
@@ -206,7 +204,7 @@ export interface ScatterChartProps extends ViewProps, ChartAccessibilityProps<Sc
   status?: ScatterChartStatus;
   /** Width ÷ height. `1` suits a scatter plot: neither axis is the important one. */
   aspectRatio?: number;
-  /** Milliseconds for the reveal on mount. */
+  /** Milliseconds for the reveal on mount. Defaults to `650`. */
   animationDuration?: number;
   /** Milliseconds for the axes to settle after the data changes. */
   domainDuration?: number;
@@ -240,7 +238,7 @@ const ScatterChartRoot = forwardRef<ScatterChartHandle, ScatterChartProps>(
       xDataKey = 'x',
       status = 'ready',
       aspectRatio = 1,
-      animationDuration = 900,
+      animationDuration = 650,
       domainDuration = 500,
       xDomain,
       yDomain,
@@ -869,27 +867,8 @@ function ScatterChartSkeleton({ count = 24, color }: ScatterChartSkeletonProps)
   const { plot, status } = useChart('ScatterChart.Skeleton');
   const token = useCSSVariable('--color-skeleton');
   const fill = color ?? (typeof token === 'string' ? token : 'rgba(128,128,128,0.2)');
-  const reducedMotion = useReducedMotion();
-
-  const loading = status === 'loading';
-  const fade = useSharedValue(1);
-  // Mounted a beat longer than `loading`, so there is something to fade.
-  const [mounted, setMounted] = useState(loading);
 
-  useEffect(() => {
-    if (loading) {
-      fade.value = 1;
-      setMounted(true);
-      return;
-    }
-    if (reducedMotion) {
-      setMounted(false);
-      return;
-    }
-    fade.value = withTiming(0, { duration: SKELETON_FADE }, (finished) => {
-      if (finished) runOnJS(setMounted)(false);
-    });
-  }, [loading, reducedMotion, fade]);
+  const { mounted, opacity: fade } = useSkeletonHandoff(status === 'loading');
 
   const dots = useMemo(() => {
     // A cheap deterministic scatter: two irrational-ish strides that do not

package/src/components/section-rail/index.tsx

@@ -58,10 +58,10 @@ import { selectionTick } from '../../utils/haptics';
 
 const SPRING = { damping: 20, stiffness: 260, mass: 0.6 } as const;
 /** Bar width at the top level, and how much each nested level takes off it. */
-const BAR_WIDTH = 16;
-const BAR_LEVEL_STEP = 4;
+const BAR_WIDTH = 14;
+const BAR_LEVEL_STEP = 3;
 /** How much wider the active bar gets, so position is readable at a glance. */
-const BAR_ACTIVE_EXTRA = 12;
+const BAR_ACTIVE_EXTRA = 10;
 /**
  * How much of that extra the bars either side of the active one keep.
  *
@@ -83,8 +83,17 @@ const BAR_REST_OPACITY = 0.32;
  * that a jump which never lands does not mute the next one.
  */
 const JUMP_TIMEOUT = 900;
+/**
+ * How long the rail stays quiet *after* a jump has landed.
+ *
+ * A caller may set the value optimistically, before the scroll it triggers has
+ * started — so arriving at the target is not proof the journey is over. This
+ * covers the tail of the animation, in which the scroller passes through the
+ * sections either side of the destination and reports each of them.
+ */
+const JUMP_SETTLE = 260;
 /** Indent per level in the expanded panel. */
-const ITEM_INDENT = 12;
+const ITEM_INDENT = 10;
 /**
  * How wide the panel may grow by default. A row spends at least 40pt on
  * indent, padding and the panel's own border before any text, so a tighter cap
@@ -92,7 +101,7 @@ const ITEM_INDENT = 12;
  */
 const PANEL_MAX_WIDTH = '78%' as const;
 /** …and a floor, so a rail with one short section still opens a readable panel. */
-const PANEL_MIN_WIDTH = 200;
+const PANEL_MIN_WIDTH = 184;
 
 export type SectionRailPlacement = 'left' | 'right';
 export type SectionRailAlign = 'center' | 'top' | 'bottom';
@@ -232,7 +241,7 @@ function SectionRailRoot({
    * the panel lit up a row nobody chose. Nothing between the tap and the
    * arrival is a section the reader went to, so nothing between them ticks.
    */
-  const jumpTo = useRef<string | null>(null);
+  const jumpTo = useRef<{ target: string; landed: boolean } | null>(null);
 
   const endJump = useCallback(() => {
     jumpTo.current = null;
@@ -244,7 +253,7 @@ function SectionRailRoot({
 
   const handleValueChange = useCallback(
     (next: string) => {
-      jumpTo.current = next;
+      jumpTo.current = { target: next, landed: false };
       if (jumpTimer.current) clearTimeout(jumpTimer.current);
       /*
        * A backstop, not the normal way out. A jump to a section the scroller
@@ -279,12 +288,23 @@ function SectionRailRoot({
       return;
     }
 
-    const target = jumpTo.current;
-    if (target !== null) {
-      // Still on the way. Only the section that was asked for ends the jump,
-      // and only it is worth feeling.
-      if (value !== target) return;
-      endJump();
+    const jump = jumpTo.current;
+    if (jump !== null) {
+      // Still on the way. Nothing the screen passes through is a section the
+      // reader went to, so nothing between the tap and the arrival ticks.
+      if (value !== jump.target) return;
+
+      // Arrived — worth feeling, once. The window stays armed a moment longer
+      // rather than closing here, because a caller that sets the value
+      // optimistically hands it to us *before* the scroll starts: closing on
+      // the first match would disarm the rail for the whole animation, which
+      // is the entire journey it was there to cover. Every section the screen
+      // then passed lit a row and fired a tick of its own, several of them
+      // inside a few hundred milliseconds.
+      if (jump.landed) return;
+      jump.landed = true;
+      if (jumpTimer.current) clearTimeout(jumpTimer.current);
+      jumpTimer.current = setTimeout(endJump, JUMP_SETTLE);
     }
 
     if (haptics) selectionTick();
@@ -366,10 +386,10 @@ function SectionRailTrigger({ className, children, ...props }: SectionRailTrigge
       accessibilityState={{ expanded: open }}
       onPress={() => setOpen(!open)}
       // Generous padding is the hit target; the bars themselves are hairlines.
-      hitSlop={8}
+      hitSlop={10}
       className={cn(
-        'gap-2 py-3',
-        placement === 'right' ? 'items-end ps-6 pe-2' : 'items-start ps-2 pe-6',
+        'gap-1.5 py-2.5',
+        placement === 'right' ? 'items-end ps-5 pe-2' : 'items-start ps-2 pe-5',
         className
       )}
       {...props}
@@ -549,7 +569,7 @@ function SectionRailPanel({
       style={[style, { maxWidth, minWidth: PANEL_MIN_WIDTH }]}
       accessibilityRole="menu"
       className={cn(
-        'gap-0.5 rounded-2xl border border-border bg-popover p-2 shadow-lg',
+        'gap-0.5 rounded-xl border border-border bg-popover p-1.5 shadow-lg',
         className
       )}
       {...props}
@@ -582,9 +602,9 @@ function SectionRailItem({ className, value, level = 0, children }: SectionRailI
       onPress={() => onValueChange?.(value)}
       // `paddingStart`, not `paddingLeft`: the indent has to fall on the same
       // side as the bar it belongs to, which is the trailing edge under RTL.
-      style={{ paddingStart: 12 + level * ITEM_INDENT }}
+      style={{ paddingStart: 10 + level * ITEM_INDENT }}
       className={cn(
-        'rounded-lg py-2 pe-2.5 active:bg-accent',
+        'rounded-lg py-1.5 pe-2 active:bg-accent',
         selected && 'bg-accent',
         className
       )}

package/src/components/split-view/index.tsx

@@ -79,11 +79,45 @@ const splitViewVariants = tv({
     root: 'w-full flex-col overflow-hidden',
     top: 'w-full overflow-hidden',
     bottom: 'w-full flex-1 overflow-hidden',
-    dragArea: 'w-full items-center justify-center py-2',
-    handle: 'h-1 w-10 rounded-full bg-muted-foreground/30',
+    dragArea: 'w-full items-center justify-center',
+    handle: 'rounded-full',
+  },
+  variants: {
+    /*
+     * How the split is drawn. The mechanics are the same either way — this is
+     * only what the reader sees, and what they see decides what they think the
+     * control is.
+     *
+     * `panes` gives each half a surface of its own on a recessed ground, with
+     * the grip in the gap between them. Two things you can resize, and a
+     * handle that belongs to neither.
+     *
+     * `seam` is a hairline grip on a shared background: no surfaces, no gap,
+     * the two halves reading as one region with a line through it. It suits a
+     * split inside something that already has a surface — a card, a sheet —
+     * where a second one is a box in a box.
+     */
+    variant: {
+      panes: {
+        root: 'bg-inset',
+        top: 'rounded-2xl bg-surface',
+        bottom: 'rounded-2xl bg-surface',
+        dragArea: 'py-3',
+        handle: 'h-1.5 w-12 bg-muted-foreground/50',
+      },
+      seam: {
+        dragArea: 'py-2',
+        handle: 'h-1 w-10 bg-muted-foreground/30',
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'panes',
   },
 });
 
+export type SplitViewVariant = 'panes' | 'seam';
+
 interface SplitViewContextValue {
   /** The top pane's height in points. Written by drags, read by both panes. */
   topHeight: SharedValue<number>;
@@ -101,6 +135,7 @@ interface SplitViewContextValue {
   snapTo: (index: number) => void;
   measureDragArea: (height: number) => void;
   dragAreaHeight: number;
+  variant: SplitViewVariant;
 }
 
 const SplitViewContext = createContext<SplitViewContextValue | null>(null);
@@ -123,6 +158,13 @@ export function useSplitView() {
 
 export interface SplitViewProps extends ViewProps {
   className?: string;
+  /**
+   * How the split is drawn. `panes` gives each half its own rounded surface on
+   * a recessed ground, with the grip in the gap between them; `seam` is a
+   * hairline grip on a shared background, for a split inside something that
+   * already has a surface of its own.
+   */
+  variant?: SplitViewVariant;
   /**
    * Heights the seam settles on. A number at or below `1` is a fraction of the
    * room the panes share; anything larger is points. Defaults to
@@ -154,6 +196,7 @@ export interface SplitViewProps extends ViewProps {
 
 function SplitViewRoot({
   className,
+  variant = 'panes',
   snapPoints,
   minHeight,
   maxHeight,
@@ -167,7 +210,7 @@ function SplitViewRoot({
   onLayout,
   ...props
 }: SplitViewProps) {
-  const { root } = splitViewVariants();
+  const { root } = splitViewVariants({ variant });
   const reducedMotion = useReducedMotion();
   const animate = !reducedMotion;
 
@@ -284,6 +327,7 @@ function SplitViewRoot({
       snapTo,
       measureDragArea,
       dragAreaHeight,
+      variant,
     }),
     [
       topHeight,
@@ -298,6 +342,7 @@ function SplitViewRoot({
       snapTo,
       measureDragArea,
       dragAreaHeight,
+      variant,
     ]
   );
 
@@ -325,7 +370,7 @@ export interface SplitViewPaneProps extends ViewProps {
  */
 function SplitViewTop({ className, children, style, ...props }: SplitViewPaneProps) {
   const context = useSplitViewContext('SplitView.Top');
-  const { top } = splitViewVariants();
+  const { top } = splitViewVariants({ variant: context.variant });
 
   const animatedStyle = useAnimatedStyle(() => ({
     height: context.topHeight.value,
@@ -356,8 +401,8 @@ function SplitViewTop({ className, children, style, ...props }: SplitViewPanePro
  * every frame of a drag rather than only at rest.
  */
 function SplitViewBottom({ className, children, ...props }: SplitViewPaneProps) {
-  useSplitViewContext('SplitView.Bottom');
-  const { bottom } = splitViewVariants();
+  const context = useSplitViewContext('SplitView.Bottom');
+  const { bottom } = splitViewVariants({ variant: context.variant });
 
   return (
     <View className={bottom({ className })} {...props}>
@@ -390,7 +435,7 @@ function SplitViewDragArea({
   ...props
 }: SplitViewDragAreaProps) {
   const context = useSplitViewContext('SplitView.DragArea');
-  const { dragArea } = splitViewVariants();
+  const { dragArea } = splitViewVariants({ variant: context.variant });
   const { topHeight, dragging, points, minPx, maxPx, room, disabled, snapTo } = context;
 
   const start = useSharedValue(0);
@@ -504,7 +549,7 @@ export interface SplitViewHandleProps extends ViewProps {
  */
 function SplitViewHandle({ className, children, style, ...props }: SplitViewHandleProps) {
   const context = useSplitViewContext('SplitView.Handle');
-  const { handle } = splitViewVariants();
+  const { handle } = splitViewVariants({ variant: context.variant });
   const { animate } = context;
 
   const animatedStyle = useAnimatedStyle(() => {

package/src/components/theme-selector/index.tsx

@@ -0,0 +1,281 @@
+/**
+ * ThemeSelector — light, dark, or whatever the device is set to.
+ *
+ * Three miniatures of a screen, the chosen one ringed. A row of words would
+ * take a third of the space and say the same thing, but "System" is the option
+ * people hesitate over, and a picture of a screen split down the middle
+ * explains it in less time than a sentence does.
+ *
+ * ```tsx
+ * <ThemeSelector label="Choose a theme" />
+ * ```
+ *
+ * ## It reads the theme rather than remembering it
+ *
+ * There is already one answer to "which theme is this" — Uniwind's — so the
+ * selector asks for it instead of keeping a copy that can disagree. Change the
+ * theme anywhere else in the app and the ring moves. Pass `value` to show
+ * something else, for a settings screen that stages a choice before applying
+ * it.
+ *
+ * ## Light and dark stay inside the family
+ *
+ * A reader in Moon who picks Light gets Moon's light theme, not the default
+ * one. System is the exception, and cannot be otherwise: the device knows only
+ * light and dark, so following it means following those two.
+ */
+import { createContext, useCallback, useContext, useMemo, type ReactNode } from 'react';
+import { Pressable, View, type PressableProps, type ViewProps } from 'react-native';
+import { tv } from 'tailwind-variants';
+import { useUniwind } from 'uniwind';
+import { Text, textChildren } from '../../primitives/text';
+import { useTheme, useThemeMode } from '../../theme/use-theme';
+import { ThemePreview, type ThemePreviewVariant } from './theme-preview';
+
+export type { ThemePreviewVariant } from './theme-preview';
+
+/** What the selector chooses between. */
+export type ThemeSelection = 'system' | 'light' | 'dark';
+
+/** How big the miniatures are drawn. */
+export type ThemeSelectorSize = 'sm' | 'md';
+
+/** The three, in the order a selector draws them when it is not told. */
+const OPTIONS: readonly ThemeSelection[] = ['system', 'light', 'dark'];
+
+/** What each one is called, when the caller does not say. */
+const LABELS: Record<ThemeSelection, string> = {
+  system: 'System',
+  light: 'Light',
+  dark: 'Dark',
+};
+
+/** How wide the miniature is drawn, per size. */
+const PREVIEW_WIDTH: Record<ThemeSelectorSize, number> = { sm: 72, md: 88 };
+
+const themeSelectorVariants = tv({
+  slots: {
+    root: 'gap-3',
+    legend: 'font-medium',
+    options: 'flex-row flex-wrap items-start gap-4',
+    option: 'items-center gap-2',
+    /*
+     * The ring lives on a box around the artwork rather than on the artwork
+     * itself. React Native has no outline, so a border on the preview would
+     * take a strip out of the drawing every time the option was chosen — the
+     * miniature would change size as you picked it.
+     */
+    frame: 'overflow-hidden rounded-xl border-2 p-1',
+    /*
+     * The artwork's own corners, rounded to sit concentrically inside the
+     * frame: the frame's radius less the padding between them. A square
+     * miniature inside a rounded ring reads as a screenshot somebody pasted in
+     * — the two edges have to curve together or neither should.
+     */
+    preview: 'overflow-hidden rounded-lg',
+    label: 'text-center',
+  },
+  variants: {
+    selected: {
+      true: { frame: 'border-primary', label: 'text-foreground' },
+      false: { frame: 'border-transparent', label: 'text-muted-foreground' },
+    },
+    disabled: {
+      true: { root: 'opacity-40' },
+    },
+  },
+  defaultVariants: { selected: false },
+});
+
+interface ThemeSelectorContextValue {
+  value: ThemeSelection;
+  select: (value: ThemeSelection) => void;
+  variant: ThemePreviewVariant;
+  size: ThemeSelectorSize;
+  disabled: boolean;
+}
+
+const ThemeSelectorContext = createContext<ThemeSelectorContextValue | null>(null);
+
+function useThemeSelector(part: string): ThemeSelectorContextValue {
+  const value = useContext(ThemeSelectorContext);
+  if (!value) throw new Error(`${part} must be used inside a <ThemeSelector>.`);
+  return value;
+}
+
+/**
+ * Which of the three the app is on, read from the theme itself.
+ *
+ * `hasAdaptiveThemes` is the part that makes this possible: it is true exactly
+ * while the theme is following the device, which is the one thing the theme's
+ * own name cannot tell you — `system` resolves to `light` or `dark` the moment
+ * it is applied, and the two are indistinguishable afterwards.
+ */
+export function useThemeSelection(): ThemeSelection {
+  const { hasAdaptiveThemes } = useUniwind();
+  const { mode } = useThemeMode();
+  return hasAdaptiveThemes ? 'system' : mode;
+}
+
+export interface ThemeSelectorProps extends Omit<ViewProps, 'children'> {
+  className?: string;
+  /**
+   * Show this as chosen instead of whatever the app is actually on. For a
+   * settings screen that stages a choice before applying it; left unset, the
+   * selector reads the live theme.
+   */
+  value?: ThemeSelection;
+  /** Fires with the option pressed, before the theme changes. */
+  onValueChange?: (value: ThemeSelection) => void;
+  /**
+   * Apply the choice. On by default — a theme selector that does not select a
+   * theme is a radio group. Turn it off to store the choice and apply it
+   * yourself, which is what an app that persists the preference wants.
+   */
+  applyTheme?: boolean;
+  /** The heading above the row. Left out, there is none. */
+  label?: string;
+  /**
+   * Which miniature is drawn. `window` is an app screen with a panel on it;
+   * `card` is a framed card with an accent, cut on the diagonal for system.
+   */
+  variant?: ThemePreviewVariant;
+  /**
+   * How wide the miniatures are drawn. `sm` for a settings row that has other
+   * things on it; `md` when choosing the theme is what the screen is for.
+   */
+  size?: ThemeSelectorSize;
+  /** Stop the row being pressed, and dim it to say so. */
+  disabled?: boolean;
+  /**
+   * The options, in the order you want them. Left out, the selector draws
+   * system, light and dark in that order — which is the whole component.
+   */
+  children?: ReactNode;
+}
+
+function ThemeSelectorRoot({
+  className,
+  value,
+  onValueChange,
+  applyTheme = true,
+  label,
+  variant = 'window',
+  size = 'md',
+  disabled = false,
+  children,
+  ...props
+}: ThemeSelectorProps) {
+  const slots = themeSelectorVariants({ disabled });
+  const { setTheme } = useTheme();
+  const { setMode } = useThemeMode();
+  const live = useThemeSelection();
+  const current = value ?? live;
+
+  const select = useCallback(
+    (next: ThemeSelection) => {
+      onValueChange?.(next);
+      if (!applyTheme) return;
+      // `setMode` rather than `setTheme`, so a reader in a named family stays
+      // in it. Following the device is the one choice that cannot: the device
+      // has no opinion beyond light and dark.
+      if (next === 'system') setTheme('system');
+      else setMode(next);
+    },
+    [applyTheme, onValueChange, setTheme, setMode]
+  );
+
+  const context = useMemo<ThemeSelectorContextValue>(
+    () => ({ value: current, select, variant, size, disabled }),
+    [current, select, variant, size, disabled]
+  );
+
+  return (
+    <ThemeSelectorContext.Provider value={context}>
+      <View
+        accessibilityRole="radiogroup"
+        accessibilityLabel={label}
+        {...props}
+        className={slots.root({ className })}
+      >
+        {label ? (
+          <Text size="sm" className={slots.legend()}>
+            {label}
+          </Text>
+        ) : null}
+        <View className={slots.options()}>
+          {children
+            ? textChildren(children)
+            : OPTIONS.map((option) => (
+                <ThemeSelectorOption key={option} value={option} />
+              ))}
+        </View>
+      </View>
+    </ThemeSelectorContext.Provider>
+  );
+}
+
+export interface ThemeSelectorOptionProps
+  extends Omit<PressableProps, 'children' | 'onPress'> {
+  className?: string;
+  /** Which of the three this option chooses. */
+  value: ThemeSelection;
+  /** What it is called under the miniature. Defaults to System, Light or Dark. */
+  label?: string;
+  /** Replaces the drawn miniature. */
+  children?: ReactNode;
+}
+
+/**
+ * One of the three.
+ *
+ * The whole thing is the target — the miniature and the word under it — because
+ * at this size the word is the easier of the two to hit and pressing it should
+ * not miss.
+ */
+function ThemeSelectorOption({
+  className,
+  value,
+  label,
+  children,
+  ...props
+}: ThemeSelectorOptionProps) {
+  const context = useThemeSelector('ThemeSelector.Option');
+  const selected = context.value === value;
+  const slots = themeSelectorVariants({ selected, disabled: context.disabled });
+  const name = label ?? LABELS[value];
+
+  return (
+    <Pressable
+      accessibilityRole="radio"
+      accessibilityLabel={name}
+      accessibilityState={{ selected, disabled: context.disabled }}
+      disabled={context.disabled}
+      {...props}
+      onPress={() => context.select(value)}
+      className={slots.option({ className })}
+    >
+      <View className={slots.frame()}>
+        <View className={slots.preview()}>
+          {children ?? (
+            <ThemePreview
+              mode={value}
+              variant={context.variant}
+              width={PREVIEW_WIDTH[context.size]}
+            />
+          )}
+        </View>
+      </View>
+      <Text size="sm" className={slots.label()}>
+        {name}
+      </Text>
+    </Pressable>
+  );
+}
+
+ThemeSelectorRoot.displayName = 'ThemeSelector';
+ThemeSelectorOption.displayName = 'ThemeSelector.Option';
+
+export const ThemeSelector = Object.assign(ThemeSelectorRoot, {
+  Option: ThemeSelectorOption,
+});