@olympusoss/canvas 3.2.1 → 5.0.0

package/src/atoms/radio/radio.tsx

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

package/src/atoms/select/select.android.tsx

@@ -0,0 +1,6 @@
+import { createSelect } from "./select.shared.js";
+import { androidSkin } from "./select.styles.js";
+
+// Material 3 (exposed dropdown) Select. Metro resolves this file on Android; the docs import it for preview.
+export const Select = createSelect(androidSkin);
+export type { SelectProps } from "./select.shared.js";

package/src/atoms/select/select.ios.tsx

@@ -0,0 +1,6 @@
+import { createSelect } from "./select.shared.js";
+import { iosSkin } from "./select.styles.js";
+
+// iOS (HIG pop-up button) Select. Metro resolves this file on iOS; the docs import it for preview.
+export const Select = createSelect(iosSkin);
+export type { SelectProps } from "./select.shared.js";

package/src/atoms/select/select.md

@@ -0,0 +1,156 @@
+# Selects
+
+Native select restyled to match Canvas inputs.
+
+## Usage
+
+```tsx
+<Select
+  label="Country"
+  value="United States"
+  options={["United States", "Canada", "Mexico", "United Kingdom"]}
+  placeholder="Select a country"
+  style={{ maxWidth: 280 }}
+/>
+```
+
+## Variants
+
+### Size - sm
+
+```tsx
+<Select
+  small
+  label="Country"
+  value="United States"
+  options={["United States", "Canada", "Mexico", "United Kingdom"]}
+  placeholder="Select a country"
+  style={{ maxWidth: 280 }}
+/>
+```
+
+### Size - lg
+
+```tsx
+<Select
+  large
+  label="Country"
+  value="United States"
+  options={["United States", "Canada", "Mexico", "United Kingdom"]}
+  placeholder="Select a country"
+  style={{ maxWidth: 280 }}
+/>
+```
+
+### With leading icon
+
+```tsx
+<Select
+  label="Country"
+  icon
+  value="United States"
+  options={["United States", "Canada", "Mexico", "United Kingdom"]}
+  placeholder="Select a country"
+  style={{ maxWidth: 280 }}
+/>
+```
+
+### Disabled
+
+```tsx
+<Select
+  disabled
+  label="Country"
+  value="United States"
+  options={["United States", "Canada", "Mexico", "United Kingdom"]}
+  placeholder="Select a country"
+  style={{ maxWidth: 280 }}
+/>
+```
+
+## Do & Don't
+
+**Do** — Mark the placeholder disabled and selected so it prompts without being a valid choice.
+
+```tsx
+<View style={{ minHeight: 220 }}>
+  <Select open label="Country" placeholder="Choose a country…" options={["United States", "Canada", "Mexico"]} style={{ maxWidth: 280 }} />
+</View>
+```
+
+**Don't** — A placeholder as a normal option can be submitted as a real value.
+
+```tsx
+<View style={{ minHeight: 260 }}>
+  <Select open label="Country" value="Choose a country…" options={["Choose a country…", "United States", "Canada", "Mexico"]} style={{ maxWidth: 280 }} />
+</View>
+```
+
+### sm
+
+**Do** — Keep the small select inline with a short label so it stays compact inside toolbars and table footers.
+
+```tsx
+<View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+  <Text style={{ fontSize: 12, lineHeight: 16, color: tokens["muted-foreground"] }}>Rows</Text>
+  <Select small value="10" options={["10", "25", "50"]} style={{ width: "auto" }} />
+</View>
+```
+
+**Don't** — A stacked block label towers over the small control and breaks the dense row it belongs in.
+
+```tsx
+<Select small label="Rows per page" value="10" options={["10", "25", "50"]} style={{ maxWidth: 200 }} />
+```
+
+### default
+
+**Do** — Match the default select to sibling inputs at the same height so the form row lines up.
+
+```tsx
+<View style={{ flexDirection: "row", alignItems: "flex-end", gap: 12, maxWidth: 420 }}>
+  <View style={{ flexGrow: 1, flexShrink: 1, flexBasis: "0%" }}>
+    <Text style={{ marginBottom: 6, fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens.foreground }}>City</Text>
+    <Input value="Austin" />
+  </View>
+  <View style={{ flexGrow: 1, flexShrink: 1, flexBasis: "0%" }}>
+    <Text style={{ marginBottom: 6, fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens.foreground }}>State</Text>
+    <Select value="Texas" options={["Texas", "Oregon"]} />
+  </View>
+</View>
+```
+
+**Don't** — A default select next to a taller lg input leaves the row baselines misaligned.
+
+```tsx
+<View style={{ flexDirection: "row", alignItems: "flex-end", gap: 12, maxWidth: 420 }}>
+  <View style={{ flexGrow: 1, flexShrink: 1, flexBasis: "0%" }}>
+    <Text style={{ marginBottom: 6, fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens.foreground }}>City</Text>
+    <Input large value="Austin" />
+  </View>
+  <View style={{ flexGrow: 1, flexShrink: 1, flexBasis: "0%" }}>
+    <Text style={{ marginBottom: 6, fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens.foreground }}>State</Text>
+    <Select value="Texas" options={["Texas", "Oregon"]} />
+  </View>
+</View>
+```
+
+### lg
+
+**Do** — Scale the text up with the height so the large select reads as a deliberate, touch-friendly target.
+
+```tsx
+<Select large label="Plan" value="Starter" options={["Starter", "Pro", "Enterprise"]} style={{ maxWidth: 320 }} />
+```
+
+**Don't** — Tiny option text inside a tall control wastes the height and looks like an accidental mismatch.
+
+```tsx
+<View style={{ maxWidth: 320 }}>
+  <Text style={{ marginBottom: 6, fontSize: 14, lineHeight: 20, fontWeight: "500", color: tokens.foreground }}>Plan</Text>
+  <Pressable style={{ height: 40, flexDirection: "row", alignItems: "center", justifyContent: "space-between", borderRadius: 6, borderWidth: 1, borderColor: tokens.input, backgroundColor: tokens.background, paddingHorizontal: 12 }} accessibilityRole="button">
+    <Text style={{ fontSize: 12, lineHeight: 16, color: tokens.foreground }}>Starter</Text>
+    <Text style={{ fontSize: 12, lineHeight: 16, color: tokens["muted-foreground"] }}>▾</Text>
+  </Pressable>
+</View>
+```

package/src/atoms/select/select.shared.tsx

@@ -0,0 +1,143 @@
+import { useState } from "react";
+import { View, Pressable, Text, useTheme, type StyleProp, type ViewStyle } from "../../style/index.js";
+import { Icon } from "../icon/icon.js";
+import { root, rootLifted, type SelectSkin, type Size } from "./select.styles.js";
+
+// Shared Select shell. The structure (the stacked label + the trigger row with
+// its optional leading icon, value/placeholder and trailing chevron, plus the
+// inline open option list with its selectable rows), the public boolean-prop
+// API, the size precedence, the controlled/uncontrolled open state, the
+// select/close handlers, the disabled handling, and accessibility all live here
+// once. A platform file supplies only its skin (trigger shape/fill/border, the
+// chevron glyph, the menu surface, the row tint, where the selection indicator
+// renders, and the press feedback) and calls createSelect.
+
+export interface SelectProps {
+  /** The currently selected option label. Empty shows the placeholder. */
+  value?: string;
+  /** The list of selectable option labels. */
+  options?: string[];
+  /** Optional stacked field label rendered above the trigger. */
+  label?: string;
+  /** Renders a leading globe glyph inside the trigger, indented so the value clears it. */
+  icon?: boolean;
+  /** Prompt shown in the trigger when no value is selected. */
+  placeholder?: string;
+  /**
+   * Whether the option list is open. Defaults to true so the open state is
+   * visible inline (the docs render it this way; there is no portal/Modal).
+   */
+  open?: boolean;
+  /** Fired when the open state changes (trigger press, select). */
+  onOpenChange?: (open: boolean) => void;
+  /** Dims the control and blocks interaction. */
+  disabled?: boolean;
+  /** Called with the chosen option label when a row is pressed. */
+  onSelect?: (option: string) => void;
+  // Size (pick one; default is the medium field, matching Input's h-9).
+  small?: boolean;
+  large?: boolean;
+  /** Escape hatch for layout/positioning composition (mainly width). */
+  style?: StyleProp<ViewStyle>;
+}
+
+// Size precedence when more than one is passed: first match wins.
+function sizeOf(p: SelectProps): Size {
+  if (p.small) return "small";
+  if (p.large) return "large";
+  return "default";
+}
+
+/** Build a Select component from a platform skin. */
+export function createSelect(skin: SelectSkin) {
+  return function Select(props: SelectProps) {
+    const {
+      value,
+      options = [],
+      label,
+      icon,
+      placeholder = "Select an option",
+      open: openProp,
+      onOpenChange,
+      disabled,
+      onSelect,
+      style,
+    } = props;
+    const size = sizeOf(props);
+    const { tokens } = useTheme();
+    // Uncontrolled by default: the trigger opens/closes the list, a select closes
+    // it; a controlled `open` prop overrides this.
+    const [internalOpen, setInternalOpen] = useState(false);
+    const open = openProp ?? internalOpen;
+    const setOpen = (next: boolean) => {
+      if (openProp === undefined) setInternalOpen(next);
+      onOpenChange?.(next);
+    };
+
+    const hasValue = value != null && value !== "";
+    const ripple = skin.ripple ? skin.ripple(tokens) : undefined;
+
+    return (
+      <View style={[root, open ? rootLifted : null, style]}>
+        {label != null && label !== "" ? (
+          <Text style={skin.label(tokens, size)}>{label}</Text>
+        ) : null}
+        <Pressable
+          style={({ pressed }) => [
+            skin.trigger(tokens, size, open),
+            disabled ? { opacity: skin.disabledOpacity } : null,
+            skin.pressedOpacity != null && pressed ? { opacity: skin.pressedOpacity } : null,
+          ]}
+          disabled={disabled}
+          onPress={() => setOpen(!open)}
+          android_ripple={ripple}
+          accessibilityRole="button"
+        >
+          <View style={skin.triggerValue}>
+            {icon ? <Icon globe muted size={14} /> : null}
+            <Text style={skin.valueText(tokens, size, hasValue)}>{hasValue ? value : placeholder}</Text>
+          </View>
+          <Text style={skin.chevron(tokens, size, open)}>{skin.chevronGlyph}</Text>
+        </Pressable>
+
+        {open ? (
+          <View style={skin.panel(tokens)}>
+            {options.map((option, i) => {
+              const selected = option === value;
+              return (
+                <Pressable
+                  key={option}
+                  style={({ pressed }) => [
+                    skin.optionRow(tokens, selected),
+                    // iOS draws a hairline group separator between rows (not above the
+                    // first); a skin that omits rowSeparator keeps every row borderless.
+                    i > 0 && skin.rowSeparator ? skin.rowSeparator(tokens) : null,
+                    // Web/iOS tint the row on press here; Android uses the ripple instead.
+                    skin.ripple == null && pressed ? skin.optionPressed(tokens) : null,
+                  ]}
+                  onPress={() => { onSelect?.(option); setOpen(false); }}
+                  android_ripple={ripple}
+                  accessibilityRole="button"
+                >
+                  {skin.selectedSide === "leading" ? (
+                    <Text style={[skin.indicator(tokens, size), { width: 14 }]}>
+                      {selected ? "✓" : " "}
+                    </Text>
+                  ) : null}
+                  <Text style={[skin.optionText(tokens, size), { flexShrink: 1 }]}>
+                    {option}
+                  </Text>
+                  {skin.selectedSide === "trailing" ? (
+                    <Text style={skin.indicator(tokens, size)}>
+                      {selected ? "✓" : ""}
+                    </Text>
+                  ) : null}
+                </Pressable>
+              );
+            })}
+          </View>
+        ) : null}
+      </View>
+    );
+  };
+}

package/src/atoms/select/select.styles.ts

@@ -0,0 +1,310 @@
+import { StyleSheet, type ViewStyle, type TextStyle } from "react-native";
+import { type ColorTokens, shadow, alpha } from "../../style/index.js";
+
+// Co-located Select skins, one per platform, all driven by the brand tokens
+// (passed in from useTheme so they follow light/dark and the glass surface, since
+// tokens.popover is swapped translucent at the theming level). The BRAND survives
+// on every platform (the open/focus accent and the selected-row indicator are the
+// indigo `primary`, never a platform default); only the native SHAPE, sizing,
+// fill, border/underline treatment, and press feedback change per OS:
+//   iOS 26 (Liquid Glass pop-up button): a PLAIN hairline-outlined trigger
+//     (~12 radius, 1px `border`, `background` fill, NO heavy gray capsule), ~44pt
+//     tall, with a trailing chevron-up-down glyph in `primary`; press = opacity
+//     dim (~0.8). The menu is the very rounded Liquid Glass popover (26 radius,
+//     `popover`, soft shadow, ~17pt rows ~42pt tall, hairline group separators);
+//     the selected row shows a LEADING brand checkmark.
+//   Android (Material 3 exposed dropdown): a filled trigger (subtle `muted`
+//     fill, TOP corners ~4 radius, flat bottom) with a bottom active-indicator
+//     underline — 1dp `input` at rest -> 2dp `primary` when open — and a trailing
+//     chevron-down; press = android_ripple. The menu is an elevated surface
+//     (4 radius, `popover`, soft shadow); pressed rows tint with the ripple
+//     (alpha(primary, 0.12) state layer) and the selected row is tinted.
+//   Web: the established Canvas look (the current select, lifted verbatim) — a
+//     full 1px `input` border, 6 radius, `background` fill, 32/36/40 tall, a
+//     trailing ▾ chevron in `muted-foreground`; the menu is a bordered popover
+//     (6 radius, `border`, shadow-lg) and the selected row carries the `accent`
+//     fill with a LEADING ✓ in the gutter.
+
+export type Size = "small" | "default" | "large";
+
+// Type scale per size, shared by the label, the trigger value, and the option
+// rows (text-xs / text-sm / text-base). Brand type, not a platform face.
+const TEXT_SIZE: Record<Size, TextStyle> = {
+  small: { fontSize: 12, lineHeight: 16 },
+  default: { fontSize: 14, lineHeight: 20 },
+  large: { fontSize: 16, lineHeight: 24 },
+};
+function textType(size: Size): TextStyle {
+  return TEXT_SIZE[size];
+}
+
+// The contract a platform skin fulfills. The shell resolves size + the open and
+// hasValue/selected states and passes them in; the skin maps them to RN style
+// objects. `selectedSide` tells the shell where to render the selection
+// indicator (a leading gutter glyph on web, a trailing brand check on iOS), and
+// `selectedGlyph` is the character it draws there.
+export interface SelectSkin {
+  /** Type scale per size; label, trigger value, and rows share it so they line up. */
+  text: (size: Size) => TextStyle;
+  /** The stacked field label above the trigger. */
+  label: (t: ColorTokens, size: Size) => TextStyle;
+  /** The trigger surface: shape, fill, border/underline; `open` lights the active state. */
+  trigger: (t: ColorTokens, size: Size, open: boolean) => ViewStyle;
+  /** The leading cluster inside the trigger (optional icon + value/placeholder). */
+  triggerValue: ViewStyle;
+  /** The trigger value text: foreground when a value is selected, muted otherwise. */
+  valueText: (t: ColorTokens, size: Size, hasValue: boolean) => TextStyle;
+  /** The trailing chevron glyph. Different character per platform; `open` lets
+   *  Android tint it with the brand `primary` when the menu is expanded. */
+  chevron: (t: ColorTokens, size: Size, open: boolean) => TextStyle;
+  /** The chevron character (▾ on web, ⌄ on Android, chevron-up-down on iOS). */
+  chevronGlyph: string;
+  /** The open option list surface. */
+  panel: (t: ColorTokens) => ViewStyle;
+  /** An option row. `selected` carries the active tint. */
+  optionRow: (t: ColorTokens, selected: boolean) => ViewStyle;
+  /**
+   * Optional hairline group separator applied to every row after the first, so
+   * the menu reads as iOS's separated item groups. Skins that omit it (web,
+   * Android) render borderless rows exactly as before.
+   */
+  rowSeparator?: (t: ColorTokens) => ViewStyle;
+  /** The fill applied on press (web/iOS dim via this; Android uses a ripple). */
+  optionPressed: (t: ColorTokens) => ViewStyle;
+  /** Option row text (label + the indicator glyph). */
+  optionText: (t: ColorTokens, size: Size) => TextStyle;
+  /** The selected-row indicator glyph (✓) styled in the platform's accent. */
+  indicator: (t: ColorTokens, size: Size) => TextStyle;
+  /** Which side the selection indicator renders on. */
+  selectedSide: "leading" | "trailing";
+  /** Opacity applied to the trigger when disabled. */
+  disabledOpacity: number;
+  /** iOS/web dim the trigger + rows on press; Android uses a ripple instead (null). */
+  pressedOpacity: number | null;
+  /** Android ripple over the trigger and the rows; null on iOS/web. */
+  ripple: ((t: ColorTokens) => { color: string; borderless: boolean }) | null;
+}
+
+// The control owns the full width of its slot; `relative` makes it the
+// positioning context for the floating option list. The escape-hatch `style`
+// (mainly width) is applied after this by the shell.
+export const root: ViewStyle = { position: "relative", width: "100%" };
+
+// When the list is open, the root is lifted into its own stacking context above
+// sibling content. react-native-web gives every positioned View an implicit
+// stacking context, so the panel's own `zIndex` is scoped INSIDE the `relative`
+// root and cannot rise above a later sibling. Raising the root's zIndex while
+// open lifts the whole control — trigger and panel together — above everything
+// painted after it.
+export const rootLifted: ViewStyle = { zIndex: 50 };
+
+// --- shared layout fragments (identical across platforms) -------------------
+
+const TRIGGER_ROW: ViewStyle = {
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "space-between",
+};
+
+// Every skin's option list floats below the trigger (the root is `relative`) so
+// it overlays the content beneath instead of reflowing the page, mirroring
+// Combobox. The per-skin `marginTop` adds the gap; `maxHeight`/fill/shape stay
+// per platform.
+const PANEL_ANCHOR: ViewStyle = { position: "absolute", top: "100%", left: 0, right: 0, zIndex: 50 };
+
+// ---------- Web: the established Canvas look (lifted verbatim) ----------
+// Trigger height per size; mirrors the Input control's footprint (h-8/h-9/h-10).
+const WEB_TRIGGER_BOX: Record<Size, number> = { small: 32, default: 36, large: 40 };
+export const webSkin: SelectSkin = {
+  text: textType,
+  label: (t, size) => ({ marginBottom: 6, fontWeight: "500", color: t.foreground, ...TEXT_SIZE[size] }),
+  trigger: (t, size) => ({
+    ...TRIGGER_ROW,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: t.input,
+    backgroundColor: t.background,
+    paddingHorizontal: 12,
+    height: WEB_TRIGGER_BOX[size],
+  }),
+  triggerValue: { flexDirection: "row", alignItems: "center", gap: 8 },
+  valueText: (t, size, hasValue) => ({ color: hasValue ? t.foreground : t["muted-foreground"], ...TEXT_SIZE[size] }),
+  chevron: (t, size) => ({ color: t["muted-foreground"], ...TEXT_SIZE[size] }),
+  chevronGlyph: "▾",
+  panel: (t) => ({
+    ...PANEL_ANCHOR,
+    marginTop: 4,
+    maxHeight: 240,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: t.border,
+    backgroundColor: t.popover,
+    padding: 4,
+    ...shadow("lg"),
+  }),
+  optionRow: (t, selected) => ({
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    borderRadius: 2,
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    ...(selected ? { backgroundColor: t.accent } : null),
+  }),
+  optionPressed: (t) => ({ backgroundColor: t.accent }),
+  optionText: (t, size) => ({ color: t["popover-foreground"], ...TEXT_SIZE[size] }),
+  indicator: (t, size) => ({ color: t["popover-foreground"], ...TEXT_SIZE[size] }),
+  selectedSide: "leading",
+  disabledOpacity: 0.5,
+  pressedOpacity: 0.9,
+  ripple: null,
+};
+
+// ---------- iOS 26 (Liquid Glass) pop-up button + menu ----------
+// Apple's iOS 26 pop-up button is a PLAIN, lightly outlined row (not a heavy
+// filled gray capsule): the value text followed by a trailing chevron-up-down
+// disclosure tinted with the brand `primary`, over the `background` fill with a
+// single hairline `border`, ~44pt tall and only modestly rounded (~12pt). The
+// MENU it opens is the Liquid Glass surface from Apple's kit: a VERY rounded
+// popover (26pt continuous corners), `popover` fill, a soft drop shadow, ~17pt
+// rows that are ~42pt tall (the kit's iPhone "Menu Item, Title" is 198x42), with
+// a hairline group separator between rows. The SELECTED row is marked by a
+// LEADING brand checkmark (the kit's "Menu Item - Selectable" puts the check on
+// the leading edge), in `primary`.
+const IOS_TRIGGER_RADIUS = 12;
+const IOS_MENU_RADIUS = 26;
+const IOS_TRIGGER_BOX: Record<Size, number> = { small: 36, default: 44, large: 50 };
+const IOS_TEXT: Record<Size, TextStyle> = {
+  small: { fontSize: 13, lineHeight: 18 },
+  default: { fontSize: 15, lineHeight: 20 },
+  large: { fontSize: 17, lineHeight: 22 },
+};
+// Menu rows hold the iOS body size (17pt) regardless of the trigger's size axis,
+// matching the kit's fixed menu type.
+const IOS_ROW_TEXT: TextStyle = { fontSize: 17, lineHeight: 22 };
+export const iosSkin: SelectSkin = {
+  text: (size) => IOS_TEXT[size],
+  label: (t, size) => ({ marginBottom: 6, fontWeight: "600", color: t.foreground, ...IOS_TEXT[size] }),
+  // A plain pop-up button: hairline-outlined row over `background`, NOT a filled
+  // capsule, so the value + primary chevron read as the iOS 26 pop-up control.
+  trigger: (t, size) => ({
+    ...TRIGGER_ROW,
+    borderRadius: IOS_TRIGGER_RADIUS,
+    borderWidth: 1,
+    borderColor: t.border,
+    backgroundColor: t.background,
+    paddingHorizontal: 14,
+    height: IOS_TRIGGER_BOX[size],
+  }),
+  triggerValue: { flexDirection: "row", alignItems: "center", gap: 8 },
+  valueText: (t, size, hasValue) => ({ color: hasValue ? t.foreground : t["muted-foreground"], ...IOS_TEXT[size] }),
+  // The trailing disclosure is the brand indigo, the iOS pop-up button tint.
+  // "⇅" reads as the chevron-up-down pop-up disclosure inline.
+  chevron: (t, size) => ({ color: t.primary, fontWeight: "600", ...IOS_TEXT[size] }),
+  chevronGlyph: "⇅",
+  // The Liquid Glass menu: very rounded (26pt), `popover`, soft shadow. No
+  // `overflow: hidden` (it would clip the shadow on iOS, matching how the web and
+  // Android panels here keep their drop shadow); the inset hairline separators and
+  // the subtle neutral press tint stay clear of the rounded corners.
+  panel: (t) => ({
+    ...PANEL_ANCHOR,
+    marginTop: 8,
+    maxHeight: 320,
+    borderRadius: IOS_MENU_RADIUS,
+    backgroundColor: t.popover,
+    paddingVertical: 4,
+    ...shadow("lg"),
+  }),
+  // No row tint at rest on iOS; the selection is shown by the leading check and
+  // rows are separated by hairlines (see rowSeparator). ~42pt tall per the kit.
+  optionRow: (_t, _selected) => ({
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    paddingHorizontal: 16,
+    paddingVertical: 11,
+    minHeight: 42,
+  }),
+  // Hairline group separator between rows, in `border` (the iOS opaque-separator
+  // read), inset to clear the leading text gutter as the kit shows.
+  rowSeparator: (t) => ({ borderTopWidth: StyleSheet.hairlineWidth, borderTopColor: t.border }),
+  optionPressed: (t) => ({ backgroundColor: t.secondary }),
+  optionText: (t, _size) => ({ color: t["popover-foreground"], ...IOS_ROW_TEXT }),
+  // The selected-row checkmark is the brand indigo, LEADING-aligned (iOS 26
+  // selectable menu marks the leading edge).
+  indicator: (t, _size) => ({ color: t.primary, fontWeight: "600", ...IOS_ROW_TEXT }),
+  selectedSide: "leading",
+  disabledOpacity: 0.5,
+  pressedOpacity: 0.8,
+  ripple: null,
+};
+
+// ---------- Android (Material 3 exposed dropdown): filled field, top radius, active indicator ----------
+// M3 exposed dropdown menu: a filled trigger (subtle `muted` fill ~
+// surface-container-highest), the TOP corners rounded ~4dp and a flat bottom,
+// with a bottom active-indicator underline — 1dp `input` at rest, 2dp `primary`
+// (brand) when open — and a trailing dropdown arrow (chevron-down). The menu is
+// an elevated surface (4dp, `popover`, soft shadow); pressed rows tint with the
+// ripple (alpha(primary, 0.12) state layer) and the selected row is tinted.
+const ANDROID_TOP_RADIUS = 4;
+const ANDROID_TRIGGER_BOX: Record<Size, number> = { small: 48, default: 56, large: 60 };
+const ANDROID_TEXT: Record<Size, TextStyle> = {
+  small: { fontSize: 14, lineHeight: 20 },
+  default: { fontSize: 16, lineHeight: 24 },
+  large: { fontSize: 18, lineHeight: 26 },
+};
+// M3 supporting-text label scale, a notch below the field type.
+const ANDROID_LABEL: Record<Size, TextStyle> = {
+  small: { fontSize: 12, lineHeight: 16 },
+  default: { fontSize: 12, lineHeight: 16 },
+  large: { fontSize: 14, lineHeight: 20 },
+};
+export const androidSkin: SelectSkin = {
+  text: (size) => ANDROID_TEXT[size],
+  label: (t, size) => ({ marginBottom: 6, fontWeight: "500", color: t.foreground, ...ANDROID_LABEL[size] }),
+  trigger: (t, size, open) => ({
+    ...TRIGGER_ROW,
+    borderTopLeftRadius: ANDROID_TOP_RADIUS,
+    borderTopRightRadius: ANDROID_TOP_RADIUS,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    borderBottomWidth: open ? 2 : 1,
+    // Rest baseline reads clearly (on-surface-variant ~ muted-foreground) so the M3
+    // filled trigger is distinct from the iOS lineless capsule.
+    borderBottomColor: open ? t.primary : t["muted-foreground"],
+    backgroundColor: t.muted,
+    paddingHorizontal: 16,
+    height: ANDROID_TRIGGER_BOX[size],
+  }),
+  triggerValue: { flexDirection: "row", alignItems: "center", gap: 8 },
+  valueText: (t, size, hasValue) => ({ color: hasValue ? t.foreground : t["muted-foreground"], ...ANDROID_TEXT[size] }),
+  // The trailing dropdown arrow tints with the brand `primary` when open, muted at rest.
+  chevron: (t, size, open) => ({ color: open ? t.primary : t["muted-foreground"], ...ANDROID_TEXT[size] }),
+  chevronGlyph: "⌄",
+  panel: (t) => ({
+    ...PANEL_ANCHOR,
+    marginTop: 2,
+    maxHeight: 280,
+    borderRadius: 4,
+    backgroundColor: t.popover,
+    paddingVertical: 8,
+    ...shadow("md"),
+  }),
+  optionRow: (t, selected) => ({
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    minHeight: 48,
+    ...(selected ? { backgroundColor: alpha(t.primary, 0.12) } : null),
+  }),
+  // The M3 pressed state layer: the brand primary at ~12% alpha (the ripple tint).
+  optionPressed: (t) => ({ backgroundColor: alpha(t.primary, 0.12) }),
+  optionText: (t, _size) => ({ color: t["popover-foreground"], ...ANDROID_TEXT["small"] }),
+  indicator: (t, _size) => ({ color: t.primary, fontWeight: "700", ...ANDROID_TEXT["small"] }),
+  selectedSide: "leading",
+  disabledOpacity: 0.38, // M3 disabled opacity
+  pressedOpacity: null, // Android uses a ripple instead
+  ripple: (t) => ({ color: alpha(t.primary, 0.12), borderless: false }),
+};

package/src/atoms/select/select.tsx

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