@olympusoss/canvas 3.2.1 → 5.0.0

package/src/atoms/popover/popover.shared.tsx

@@ -0,0 +1,124 @@
+import { useState } from "react";
+import { View, Text, useTheme, type StyleProp, type ViewStyle } from "../../style/index.js";
+import { Button } from "../button/button.js";
+import { type PopoverSkin, type Placement } from "./popover.styles.js";
+import * as s from "./popover.styles.js";
+
+// Shared Popover shell. The structure (a trigger paired with a floating card of
+// rich content — a heading, supporting text, and an optional action), the public
+// boolean-prop API, the placement precedence, the controlled/uncontrolled open
+// state, the open/close handlers, the inline (always-visible) mode, and the
+// floating-vs-inline overlay behavior all live here once. A platform file
+// supplies only its skin (card shape/fill/border, heading/description type, and
+// whether an anchor arrow is drawn) and calls createPopover.
+//
+// The card is an overlay surface; in real use it floats above the page anchored
+// to the trigger. Here it is rendered inline, directly below the trigger, so the
+// open state is visible without a portal or Modal.
+//
+// Axes:
+//
+// - Placement (pick one; default is `bottom`): `top` > `bottom`. Presentational
+//   only in this inline rendering; it documents the intended anchor side and (on
+//   iOS) which edge the arrow rides.
+//
+// Content props (the children-less / data-driven case):
+//
+// - `trigger`: label for the trigger Button (rendered as <Button outline small>).
+// - `title`: the popover heading.
+// - `description`: the supporting line beneath the title.
+// - `actionLabel`: when set, renders a <Button primary small> action row.
+//
+// State:
+//
+// - `open` (default false, uncontrolled via the trigger): when true, the floating
+//   card is shown below the trigger; when false, only the trigger renders.
+
+export interface PopoverProps {
+  /** Label for the trigger button. */
+  trigger?: string;
+  /** Heading shown at the top of the floating card. */
+  title?: string;
+  /** Supporting line beneath the title. */
+  description?: string;
+  /** When set, renders a primary action button at the bottom of the card. */
+  actionLabel?: string;
+  // Placement (pick one; default is `bottom`). Presentational only here.
+  top?: boolean;
+  bottom?: boolean;
+  /**
+   * Static mode: render the card on its own with no trigger button (an
+   * always-visible inline panel). When set, the card is always shown and
+   * `open` is ignored.
+   */
+  inline?: boolean;
+  /** Controlled open state. Omit for uncontrolled (the trigger toggles it). */
+  open?: boolean;
+  /** Fired when the open state changes. */
+  onOpenChange?: (open: boolean) => void;
+  /** Escape hatch for layout/positioning composition (width, margins). */
+  style?: StyleProp<ViewStyle>;
+}
+
+// Placement precedence when more than one is passed: first match wins.
+function placementOf(p: PopoverProps): Placement {
+  if (p.top) return "top";
+  return "bottom";
+}
+
+/** Build a Popover component from a platform skin. */
+export function createPopover(skin: PopoverSkin) {
+  return function Popover(props: PopoverProps) {
+    const { trigger, title, description, actionLabel, inline, onOpenChange, style } = props;
+    const { tokens } = useTheme();
+    const [internalOpen, setInternalOpen] = useState(false);
+    // In static (inline) mode the card is always shown; otherwise it is
+    // uncontrolled (the trigger toggles it) unless a controlled `open` is passed.
+    const open = inline ? true : (props.open ?? internalOpen);
+    const setOpen = (next: boolean) => {
+      if (props.open === undefined) setInternalOpen(next);
+      onOpenChange?.(next);
+    };
+    // Resolve the placement axis (documented, presentational in this rendering;
+    // on iOS it also picks the edge the arrow rides).
+    const placement = placementOf(props);
+
+    // With a trigger, the card floats (absolute) below it (the wrapper is
+    // `relative`), so it overflows its container instead of growing it. In
+    // inline mode it is a standalone in-flow panel. The `style` escape hatch
+    // applies last.
+    const card: StyleProp<ViewStyle> = [
+      skin.card(tokens),
+      !inline ? s.cardFloating : null,
+      style,
+    ];
+
+    return (
+      <View style={[inline ? null : s.wrapper, !inline && open ? s.wrapperLifted : null]}>
+        {inline ? null : (
+          <View style={s.triggerWrap}>
+            <Button outline small onPress={() => setOpen(!open)}>
+              {trigger ?? "Open popover"}
+            </Button>
+          </View>
+        )}
+        {open ? (
+          <View style={card}>
+            {/* The anchor arrow: drawn only when the skin supplies one (iOS) and
+                only in the floating case (an inline panel has no anchor). */}
+            {skin.arrow != null && !inline ? <View style={skin.arrow(tokens, placement)} /> : null}
+            {title != null ? <Text style={skin.title(tokens)}>{title}</Text> : null}
+            {description != null ? <Text style={skin.description(tokens)}>{description}</Text> : null}
+            {actionLabel != null ? (
+              <View style={s.actionRow}>
+                <Button primary small onPress={() => setOpen(false)}>
+                  {actionLabel}
+                </Button>
+              </View>
+            ) : null}
+          </View>
+        ) : null}
+      </View>
+    );
+  };
+}

package/src/atoms/popover/popover.styles.ts

@@ -0,0 +1,144 @@
+import { type ViewStyle, type TextStyle } from "react-native";
+import { type ColorTokens, shadow } from "../../style/index.js";
+
+// Co-located Popover skins, one per platform, all driven by the brand tokens
+// (passed in from useTheme so they follow light/dark and read as glass when the
+// ThemeProvider's surface is "glass", since tokens.popover is swapped translucent
+// at the theming level). The BRAND survives on every platform (the heading type
+// and the primary action button stay the indigo brand, never a platform default);
+// only the native SHAPE, fill, border treatment, elevation, and padding change
+// per OS:
+//   iOS 27 (iOS 26+, Liquid Glass) popover: a largely rounded card (~26 radius)
+//     over the `popover` material, NO visible border, a soft lg shadow, ~16pt
+//     padding, with a small soft ARROW pointing toward the anchor (up when the
+//     card is below the trigger, down when above). The selection accent / action
+//     button stay the brand indigo.
+//   Android (no native popover): a flat-cornered ELEVATED surface (~12 radius)
+//     over `popover`, M3 elevation (md shadow), NO border and NO arrow — an
+//     elevated menu/dialog-style surface, mirroring the select Android menu.
+//   Web: the established Canvas look (the current popover, lifted verbatim) — a
+//     fixed 260px card, 8 radius, a full 1px `border`, `popover` fill, 16 padding,
+//     shadow-lg; no arrow.
+
+export type Placement = "top" | "bottom";
+
+// The contract a platform skin fulfills. The shell resolves the placement axis
+// and the inline/floating state and passes them in; the skin maps them to RN
+// style objects. `arrow` returns the small pointer's ViewStyle (positioned by the
+// shell toward the anchor) or null when the platform draws no arrow.
+export interface PopoverSkin {
+  /** The floating card frame: width, radius, border, fill, padding, shadow. */
+  card: (t: ColorTokens) => ViewStyle;
+  /** The popover heading. */
+  title: (t: ColorTokens) => TextStyle;
+  /** The supporting line beneath the title. */
+  description: (t: ColorTokens) => TextStyle;
+  /** The arrow pointing toward the anchor, or null when the platform has none. */
+  arrow: ((t: ColorTokens, placement: Placement) => ViewStyle) | null;
+}
+
+// --- shared layout fragments (identical across platforms) -------------------
+
+// The outer wrapper when a trigger is present: it anchors the absolutely
+// positioned card (`relative`) and hugs its content (`self-start`).
+export const wrapper: ViewStyle = { position: "relative", alignSelf: "flex-start" };
+
+// When the popover is open, the wrapper itself is lifted into its own stacking
+// context above sibling content. react-native-web gives every positioned View an
+// implicit stacking context, so the card's own `zIndex` is scoped INSIDE the
+// `relative` wrapper and cannot rise above a later sibling (e.g. the next
+// platform row in the docs preview, or any following element on a real page).
+// Raising the wrapper's zIndex while open lifts the whole overlay — trigger and
+// card together — above everything painted after it.
+export const wrapperLifted: ViewStyle = { zIndex: 50 };
+
+// The trigger button is wrapped so it hugs its content rather than stretching.
+export const triggerWrap: ViewStyle = { alignSelf: "flex-start" };
+
+// With a trigger, the card floats below it (the wrapper is `relative`): pinned
+// to the wrapper's bottom-left, lifted above siblings, with a small gap.
+export const cardFloating: ViewStyle = {
+  position: "absolute",
+  top: "100%",
+  left: 0,
+  zIndex: 50,
+  marginTop: 8,
+};
+
+// The action row: a right-aligned button, spaced from the body above it.
+export const actionRow: ViewStyle = { marginTop: 12, flexDirection: "row", justifyContent: "flex-end" };
+
+// The card heading + description share this brand type scale across platforms
+// (small, the brand face, not a platform-specific font).
+const TITLE_TYPE: TextStyle = { fontSize: 14, lineHeight: 20, fontWeight: "600" };
+const DESC_TYPE: TextStyle = { marginTop: 4, fontSize: 14, lineHeight: 20 };
+
+// ---------- Web: the established Canvas look (lifted verbatim) ----------
+// A fixed 260px card, the menu radius (8), a full 1px `border`, the `popover`
+// fill (translucent under glass), 16 padding, shadow-lg; no arrow.
+export const webSkin: PopoverSkin = {
+  card: (t) => ({
+    width: 260,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: t.border,
+    backgroundColor: t.popover,
+    padding: 16,
+    ...shadow("lg"),
+  }),
+  title: (t) => ({ ...TITLE_TYPE, color: t["popover-foreground"] }),
+  description: (t) => ({ ...DESC_TYPE, color: t["muted-foreground"] }),
+  arrow: null,
+};
+
+// ---------- iOS 27 (Liquid Glass popover): rounded material card, no border, arrow ----------
+// Apple's iOS 26+/Liquid Glass popover: a largely rounded rect (~26pt) over the
+// `popover` material with NO visible border, a soft lg drop shadow, ~16pt
+// padding, and a small soft arrow pointing toward the anchor view. Brand
+// type/accents survive.
+const IOS_ARROW = 9; // half-side of the rotated square that forms the soft pointer
+export const iosSkin: PopoverSkin = {
+  card: (t) => ({
+    width: 260,
+    borderRadius: 26,
+    backgroundColor: t.popover,
+    padding: 16,
+    ...shadow("lg"),
+  }),
+  title: (t) => ({ ...TITLE_TYPE, color: t["popover-foreground"] }),
+  description: (t) => ({ ...DESC_TYPE, color: t["muted-foreground"] }),
+  // A square rotated 45° reads as a diamond; clipped by the card edge it shows as
+  // a pointer. Its corners are softly rounded so the exposed tip reads as the
+  // Liquid Glass nub (a soft bump) rather than a hard triangle. Positioned by the
+  // shell flush to the card's anchor-facing edge, offset in from the left so it
+  // sits under the trigger.
+  arrow: (t, placement) => ({
+    position: "absolute",
+    left: 22,
+    width: IOS_ARROW * 2,
+    height: IOS_ARROW * 2,
+    backgroundColor: t.popover,
+    borderRadius: 5,
+    transform: [{ rotate: "45deg" }],
+    // Card is below the trigger (`bottom`): pointer rides the TOP edge pointing
+    // up. For `top` (card above) it rides the BOTTOM edge pointing down.
+    ...(placement === "top" ? { bottom: -IOS_ARROW } : { top: -IOS_ARROW }),
+  }),
+};
+
+// ---------- Android (no native popover): flat-cornered elevated surface ----------
+// Material 3 has no popover; the convention is an elevated menu/dialog-style
+// surface. A flat-cornered card (~12dp radius) over `popover` with M3 elevation
+// (md shadow), NO border and NO arrow — mirrors the select Android menu surface.
+export const androidSkin: PopoverSkin = {
+  card: (t) => ({
+    width: 260,
+    borderRadius: 12,
+    backgroundColor: t.popover,
+    padding: 16,
+    ...shadow("md"),
+  }),
+  title: (t) => ({ ...TITLE_TYPE, color: t["popover-foreground"] }),
+  description: (t) => ({ ...DESC_TYPE, color: t["muted-foreground"] }),
+  arrow: null,
+};

package/src/atoms/popover/popover.tsx

@@ -0,0 +1,6 @@
+import { createPopover } from "./popover.shared.js";
+import { webSkin } from "./popover.styles.js";
+
+// Web Popover (the base; Metro falls back to it on native, web bundlers resolve it).
+export const Popover = createPopover(webSkin);
+export type { PopoverProps } from "./popover.shared.js";

package/src/atoms/radio/radio.android.tsx

@@ -0,0 +1,6 @@
+import { createRadio } from "./radio.shared.js";
+import { androidSkin } from "./radio.styles.js";
+
+// Material 3 Radio. Metro resolves this file on Android; the docs import it for preview.
+export const Radio = createRadio(androidSkin);
+export type { RadioProps } from "./radio.shared.js";

package/src/atoms/radio/radio.ios.tsx

@@ -0,0 +1,6 @@
+import { createRadio } from "./radio.shared.js";
+import { iosSkin } from "./radio.styles.js";
+
+// iOS (HIG) Radio. Metro resolves this file on iOS; the docs import it for preview.
+export const Radio = createRadio(iosSkin);
+export type { RadioProps } from "./radio.shared.js";

package/src/atoms/radio/radio.md

@@ -0,0 +1,173 @@
+# Radios
+
+Single-pick selection: stacked, inline, card-style.
+
+## Usage
+
+```tsx
+<View style={{ flexDirection: "column", gap: 10 }}>
+  <View style={{ flexDirection: "row", gap: 8 }}>
+    <Radio style={{ marginTop: 3 }} />
+    <View>
+      <Text style={{ fontSize: 13, fontWeight: "500", color: tokens.foreground }}>Hobby</Text>
+      <Text style={{ fontSize: 12, lineHeight: 16, color: tokens["muted-foreground"] }}>For personal projects and experiments.</Text>
+    </View>
+  </View>
+  <View style={{ flexDirection: "row", gap: 8 }}>
+    <Radio checked style={{ marginTop: 3 }} />
+    <View>
+      <Text style={{ fontSize: 13, fontWeight: "500", color: tokens.foreground }}>Pro</Text>
+      <Text style={{ fontSize: 12, lineHeight: 16, color: tokens["muted-foreground"] }}>For growing teams that need more control.</Text>
+    </View>
+  </View>
+  <View style={{ flexDirection: "row", gap: 8 }}>
+    <Radio style={{ marginTop: 3 }} />
+    <View>
+      <Text style={{ fontSize: 13, fontWeight: "500", color: tokens.foreground }}>Enterprise</Text>
+      <Text style={{ fontSize: 12, lineHeight: 16, color: tokens["muted-foreground"] }}>Advanced security, compliance, and support.</Text>
+    </View>
+  </View>
+</View>
+```
+
+## Variants
+
+### Variant - inline
+
+```tsx
+<Radio checked small>Pro, for growing teams that need more control.</Radio>
+```
+
+### Variant - card
+
+```tsx
+<View style={{ flexDirection: "row", gap: 8 }}>
+  <View style={{ flexGrow: 1, flexShrink: 1, flexBasis: "0%", flexDirection: "column", borderRadius: 6, padding: 14, borderWidth: 1, borderColor: tokens.border }}>
+    <Radio style={{ marginBottom: 8 }} />
+    <Text style={{ fontSize: 13, fontWeight: "600", color: tokens.foreground }}>Hobby</Text>
+    <Text style={{ fontSize: 12, lineHeight: 16, color: tokens["muted-foreground"] }}>For personal projects and experiments.</Text>
+  </View>
+  <View style={{ flexGrow: 1, flexShrink: 1, flexBasis: "0%", flexDirection: "column", borderRadius: 6, padding: 14, borderWidth: 2, borderColor: tokens.primary, backgroundColor: alpha(tokens.primary, 0.05) }}>
+    <Radio checked style={{ marginBottom: 8 }} />
+    <Text style={{ fontSize: 13, fontWeight: "600", color: tokens.foreground }}>Pro</Text>
+    <Text style={{ fontSize: 12, lineHeight: 16, color: tokens["muted-foreground"] }}>For growing teams that need more control.</Text>
+  </View>
+  <View style={{ flexGrow: 1, flexShrink: 1, flexBasis: "0%", flexDirection: "column", borderRadius: 6, padding: 14, borderWidth: 1, borderColor: tokens.border }}>
+    <Radio style={{ marginBottom: 8 }} />
+    <Text style={{ fontSize: 13, fontWeight: "600", color: tokens.foreground }}>Enterprise</Text>
+    <Text style={{ fontSize: 12, lineHeight: 16, color: tokens["muted-foreground"] }}>Advanced security, compliance, and support.</Text>
+  </View>
+</View>
+```
+
+## Do & Don't
+
+**Do** — Pre-select a sensible default so the common path needs no clicks.
+
+```tsx
+<View style={{ flexDirection: "column", gap: 8 }}>
+  <Text style={{ marginBottom: 4, fontSize: 14, lineHeight: 20, fontWeight: "600", color: tokens.foreground }}>Plan</Text>
+  <Radio>Hobby</Radio>
+  <Radio checked>Pro</Radio>
+  <Radio>Enterprise</Radio>
+</View>
+```
+
+**Don't** — Leaving a radio group with nothing selected forces an extra decision and can submit empty.
+
+```tsx
+<View style={{ flexDirection: "column", gap: 8 }}>
+  <Text style={{ marginBottom: 4, fontSize: 14, lineHeight: 20, fontWeight: "600", color: tokens.foreground }}>Plan</Text>
+  <Radio>Hobby</Radio>
+  <Radio>Pro</Radio>
+  <Radio>Enterprise</Radio>
+</View>
+```
+
+### Stacked
+
+**Do** — Align the control to the first text line (mt-[3px]) so it sits beside the title, with the description flowing below.
+
+```tsx
+<View style={{ flexDirection: "column", gap: 10 }}>
+  <View style={{ flexDirection: "row", gap: 8 }}>
+    <Radio checked style={{ marginTop: 3 }} />
+    <View>
+      <Text style={{ fontSize: 13, fontWeight: "500", color: tokens.foreground }}>Pro</Text>
+      <Text style={{ fontSize: 12, lineHeight: 16, color: tokens["muted-foreground"] }}>For growing teams that need more control.</Text>
+    </View>
+  </View>
+</View>
+```
+
+**Don't** — With items-center the input floats to the vertical middle of a two-line label, leaving it visually unattached to the title it controls.
+
+```tsx
+<View style={{ flexDirection: "column", gap: 10 }}>
+  <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+    <Radio checked />
+    <View>
+      <Text style={{ fontSize: 13, fontWeight: "500", color: tokens.foreground }}>Pro</Text>
+      <Text style={{ fontSize: 12, lineHeight: 16, color: tokens["muted-foreground"] }}>For growing teams that need more control.</Text>
+    </View>
+  </View>
+</View>
+```
+
+### Inline
+
+**Do** — Use gap-6 between options (gap-2 inside each) so every label clearly pairs with its own control.
+
+```tsx
+<View style={{ flexDirection: "row", flexWrap: "wrap", gap: 24 }}>
+  <Radio checked small>Hobby</Radio>
+  <Radio small>Pro</Radio>
+  <Radio small>Enterprise</Radio>
+</View>
+```
+
+**Don't** — Cramped gap-1 between options makes each label blur into the next radio, so it is hard to tell which dot belongs to which choice.
+
+```tsx
+<View style={{ flexDirection: "row", flexWrap: "wrap", gap: 6 }}>
+  <Radio checked small>Hobby</Radio>
+  <Radio small>Pro</Radio>
+  <Radio small>Enterprise</Radio>
+</View>
+```
+
+### Card
+
+**Do** — Give the selected card a primary border and tinted fill so the whole tile reads as chosen, not just the dot.
+
+```tsx
+<View style={{ flexDirection: "row", gap: 8 }}>
+  <View style={{ flexGrow: 1, flexShrink: 1, flexBasis: "0%", flexDirection: "column", borderRadius: 6, borderWidth: 2, borderColor: tokens.primary, backgroundColor: alpha(tokens.primary, 0.05), padding: 14 }}>
+    <Radio checked style={{ marginBottom: 8 }} />
+    <Text style={{ fontSize: 13, fontWeight: "600", color: tokens.foreground }}>Pro</Text>
+    <Text style={{ fontSize: 12, lineHeight: 16, color: tokens["muted-foreground"] }}>For growing teams.</Text>
+  </View>
+  <View style={{ flexGrow: 1, flexShrink: 1, flexBasis: "0%", flexDirection: "column", borderRadius: 6, borderWidth: 1, borderColor: tokens.border, padding: 14 }}>
+    <Radio style={{ marginBottom: 8 }} />
+    <Text style={{ fontSize: 13, fontWeight: "600", color: tokens.foreground }}>Enterprise</Text>
+    <Text style={{ fontSize: 12, lineHeight: 16, color: tokens["muted-foreground"] }}>Advanced security.</Text>
+  </View>
+</View>
+```
+
+**Don't** — When the selected card keeps the same plain border, only the tiny native dot signals the choice and the active card is easy to miss.
+
+```tsx
+<View style={{ flexDirection: "row", gap: 8 }}>
+  <View style={{ flexGrow: 1, flexShrink: 1, flexBasis: "0%", flexDirection: "column", borderRadius: 6, borderWidth: 1, borderColor: tokens.border, padding: 14 }}>
+    <Radio checked style={{ marginBottom: 8 }} />
+    <Text style={{ fontSize: 13, fontWeight: "600", color: tokens.foreground }}>Pro</Text>
+    <Text style={{ fontSize: 12, lineHeight: 16, color: tokens["muted-foreground"] }}>For growing teams.</Text>
+  </View>
+  <View style={{ flexGrow: 1, flexShrink: 1, flexBasis: "0%", flexDirection: "column", borderRadius: 6, borderWidth: 1, borderColor: tokens.border, padding: 14 }}>
+    <Radio style={{ marginBottom: 8 }} />
+    <Text style={{ fontSize: 13, fontWeight: "600", color: tokens.foreground }}>Enterprise</Text>
+    <Text style={{ fontSize: 12, lineHeight: 16, color: tokens["muted-foreground"] }}>Advanced security.</Text>
+  </View>
+</View>
+```

package/src/atoms/radio/radio.shared.tsx

@@ -0,0 +1,98 @@
+import { type ReactNode } from "react";
+import { type GestureResponderEvent } from "react-native";
+import { View, Pressable, Text, useTheme, type ColorTokens, type StyleProp, type ViewStyle, type TextStyle } from "../../style/index.js";
+
+// Shared Radio shell. Uses React Native's primitives DIRECTLY and reads the active
+// brand tokens via useTheme, so colors follow light/dark and the glass surface. The
+// shared structure (the ring + dot + label row, the size precedence, accessibility,
+// the controlled checked/selected alias, the onChange handler) lives here once; a
+// platform file supplies only its skin (ring shape/sizing/border, dot fill, press
+// feedback) and calls createRadio. iOS has no native radio, so every skin is
+// hand-drawn from the brand tokens — no platform default color ever leaks in.
+//
+// A radio is a single circular control that fills with a centered dot when it is the
+// chosen option in its group. The group (one selected option at a time) is the
+// caller's job; this component renders one control in the state it is told to
+// (controlled). Selecting swaps the ring from the neutral input border to primary
+// and reveals the primary dot.
+
+export interface RadioProps {
+  /** Whether this control is the selected option (controlled). */
+  checked?: boolean;
+  /** Alias for `checked`, for callers that think in terms of "selected". */
+  selected?: boolean;
+  /** Fired on press with the next checked value (always true for a radio). */
+  onChange?: (checked: boolean, event: GestureResponderEvent) => void;
+  /** Label text shown beside the control. */
+  children?: ReactNode;
+  // Size (pick one; default is the 16px control).
+  small?: boolean;
+  large?: boolean;
+  /** Dim the control and block presses. */
+  disabled?: boolean;
+  /** Escape hatch for layout/positioning composition. */
+  style?: StyleProp<ViewStyle>;
+}
+
+export type Size = "small" | "default" | "large";
+
+// Size precedence when more than one is passed: first match wins.
+function sizeOf(p: RadioProps): Size {
+  if (p.small) return "small";
+  if (p.large) return "large";
+  return "default";
+}
+
+// The only thing a platform skin owns: the ring, dot, and label styles for a given
+// state and size, plus the press/disabled feedback. Everything else is the shell.
+export interface RadioSkin {
+  /** The circular control. `checked` swaps the neutral border for primary. `nudge` aligns the ring to a label's first line. */
+  ring: (tokens: ColorTokens, size: Size, checked: boolean, nudge: boolean) => ViewStyle;
+  /** The centered fill dot, rendered only when checked. */
+  dot: (tokens: ColorTokens, size: Size) => ViewStyle;
+  /** The label text to the right of the ring. */
+  label: (tokens: ColorTokens, size: Size, disabled: boolean) => TextStyle;
+  /** Opacity applied to the row when disabled. */
+  disabledOpacity: number;
+  /** iOS/web dim the row on press; Android uses a ripple instead (null). */
+  pressedOpacity: number | null;
+  /** Android ripple over the ring; null on iOS/web. */
+  ripple: ((tokens: ColorTokens) => { color: string; borderless: boolean; radius?: number }) | null;
+}
+
+// The pressable row: control beside an optional label, control top-aligned so a
+// multi-line label hangs from the ring's first line.
+const ROW: ViewStyle = { flexDirection: "row", alignItems: "flex-start", gap: 8 };
+
+/** Build a Radio component from a platform skin. */
+export function createRadio(skin: RadioSkin) {
+  return function Radio(props: RadioProps) {
+    const { checked, selected, onChange, children, disabled, style } = props;
+    const isChecked = !!(checked ?? selected);
+    const size = sizeOf(props);
+    const { tokens } = useTheme();
+
+    const ripple = skin.ripple ? skin.ripple(tokens) : undefined;
+
+    return (
+      <Pressable
+        onPress={(event) => onChange?.(true, event)}
+        disabled={disabled}
+        accessibilityRole="radio"
+        accessibilityState={{ checked: isChecked, disabled: !!disabled }}
+        android_ripple={ripple}
+        style={({ pressed }) => [
+          ROW,
+          disabled ? { opacity: skin.disabledOpacity } : null,
+          skin.pressedOpacity != null && pressed ? { opacity: skin.pressedOpacity } : null,
+          style,
+        ]}
+      >
+        <View style={skin.ring(tokens, size, isChecked, children != null)}>
+          {isChecked ? <View style={skin.dot(tokens, size)} /> : null}
+        </View>
+        {children != null ? <Text style={skin.label(tokens, size, !!disabled)}>{children}</Text> : null}
+      </Pressable>
+    );
+  };
+}

package/src/atoms/radio/radio.styles.ts

@@ -0,0 +1,109 @@
+import { type ViewStyle, type TextStyle } from "react-native";
+import { type ColorTokens } from "../../style/index.js";
+import { type RadioSkin, type Size } from "./radio.shared.js";
+
+// Co-located Radio skins, one per platform, all driven by the brand tokens (passed
+// in from useTheme so they follow light/dark and the glass surface). The BRAND
+// survives on every platform (the selected ring + dot are always the indigo
+// `primary`, never a platform default), and only the native SHAPE, sizing, border
+// weight, and press feedback change per OS:
+//   iOS (HIG): no native radio; the de-facto ring + filled center dot — a ~20pt
+//     circle, a 1.5px border when empty, brand ring + ~40% inner dot when selected,
+//     instant; press = opacity dim (~0.8).
+//   Android (Material 3): a 20dp outer ring (2dp border), brand ring + ~10dp solid
+//     inner dot when selected; press = android_ripple over a 40dp state layer;
+//     disabled opacity 0.38.
+//   Web: the established Canvas look (the current radio, lifted verbatim) —
+//     14/16/20px ring per size, 2px border, brand ring + 6/8/10px primary dot.
+
+// Ring diameter per size, per platform family. Default is the form control; small
+// pairs with dense rows, large with touch-first layouts.
+const WEB_RING: Record<Size, number> = { small: 14, default: 16, large: 20 };
+const IOS_RING: Record<Size, number> = { small: 20, default: 22, large: 24 };
+const ANDROID_RING: Record<Size, number> = { small: 18, default: 20, large: 22 };
+
+// Inner dot diameter per size, per platform family. Web keeps ~half the ring; iOS
+// runs ~40% of the ring; Android uses the M3 ~10dp dot at the default size.
+const WEB_DOT: Record<Size, number> = { small: 6, default: 8, large: 10 };
+const IOS_DOT: Record<Size, number> = { small: 8, default: 9, large: 10 };
+const ANDROID_DOT: Record<Size, number> = { small: 9, default: 10, large: 11 };
+
+// Label type per size (shared across platforms; the label is brand type, not a
+// platform face). Matches the original Canvas label scale.
+const LABEL_TYPE: Record<Size, TextStyle> = {
+  small: { fontSize: 12, lineHeight: 16 }, // text-xs
+  default: { fontSize: 14, lineHeight: 20 }, // text-sm
+  large: { fontSize: 16, lineHeight: 24 }, // text-base
+};
+
+// The label beside the control. Medium weight; dimmed to muted when disabled. Shared
+// across every platform.
+function label(tokens: ColorTokens, size: Size, disabled: boolean): TextStyle {
+  return {
+    fontWeight: "500",
+    color: disabled ? tokens["muted-foreground"] : tokens.foreground,
+    ...LABEL_TYPE[size],
+  };
+}
+
+// Ring base: a perfect circle, centered, nudged down (`marginTop: 3`) to align with
+// the label's first line. Per-platform border weight is layered on by each skin.
+function ringBase(box: number, nudge: boolean): ViewStyle {
+  return {
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 9999,
+    width: box,
+    height: box,
+    backgroundColor: "transparent",
+    ...(nudge ? { marginTop: 3 } : null),
+  };
+}
+
+// Dot base: a centered circle. Color is the brand primary on every platform.
+function dotBase(box: number): ViewStyle {
+  return { borderRadius: 9999, width: box, height: box };
+}
+
+// ---------- Web: the established Canvas look ----------
+export const webSkin: RadioSkin = {
+  ring: (t, size, checked, nudge) => ({
+    ...ringBase(WEB_RING[size], nudge),
+    borderWidth: 2,
+    borderColor: checked ? t.primary : t.input,
+  }),
+  dot: (t, size) => ({ ...dotBase(WEB_DOT[size]), backgroundColor: t.primary }),
+  label,
+  disabledOpacity: 0.5,
+  pressedOpacity: 0.9,
+  ripple: null,
+};
+
+// ---------- iOS (HIG): ~20pt ring, 1.5px border, dim on press ----------
+export const iosSkin: RadioSkin = {
+  ring: (t, size, checked, nudge) => ({
+    ...ringBase(IOS_RING[size], nudge),
+    borderWidth: 1.5, // hairline-plus when empty; the ring stays visible when selected
+    borderColor: checked ? t.primary : t.input,
+  }),
+  dot: (t, size) => ({ ...dotBase(IOS_DOT[size]), backgroundColor: t.primary }),
+  label,
+  disabledOpacity: 0.5,
+  pressedOpacity: 0.8,
+  ripple: null,
+};
+
+// ---------- Android (Material 3): 20dp ring, 2dp border, ~10dp dot, ripple ----------
+export const androidSkin: RadioSkin = {
+  ring: (t, size, checked, nudge) => ({
+    ...ringBase(ANDROID_RING[size], nudge),
+    borderWidth: 2,
+    borderColor: checked ? t.primary : t["muted-foreground"],
+  }),
+  dot: (t, size) => ({ ...dotBase(ANDROID_DOT[size]), backgroundColor: t.primary }),
+  label,
+  disabledOpacity: 0.38, // M3 disabled opacity
+  pressedOpacity: null, // Android uses a ripple instead
+  ripple: (t) => ({ color: t.primary, borderless: true, radius: 20 }), // 40dp state layer
+};