@olympusoss/canvas 3.2.1 → 5.0.0

package/src/atoms/dropdown/dropdown.md

@@ -0,0 +1,221 @@
+# Dropdowns
+
+Floating menus triggered by a button: actions, options, navigation.
+
+## Usage
+
+```tsx
+<Dropdown
+  trigger="Actions"
+  items={[
+    { label: "Edit profile", icon: "✎" },
+    { label: "Duplicate", icon: "⧉" },
+    { label: "Settings", icon: "⚙" }
+  ]}
+/>
+```
+
+## Variants
+
+### Section label
+
+```tsx
+<Dropdown
+  trigger="Actions"
+  label="Actions"
+  items={[
+    { label: "Edit profile", icon: "✎" },
+    { label: "Duplicate", icon: "⧉" },
+    { label: "Settings", icon: "⚙" }
+  ]}
+/>
+```
+
+### Keyboard shortcuts
+
+```tsx
+<Dropdown
+  trigger="Actions"
+  items={[
+    { label: "Edit profile", icon: "✎", shortcut: "⌘E" },
+    { label: "Duplicate", icon: "⧉", shortcut: "⌘D" },
+    { label: "Settings", icon: "⚙", shortcut: "⌘," }
+  ]}
+/>
+```
+
+### Disabled item
+
+```tsx
+<Dropdown
+  trigger="Actions"
+  items={[
+    { label: "Edit profile", icon: "✎" },
+    { label: "Duplicate", icon: "⧉" },
+    { label: "Settings", icon: "⚙" },
+    { label: "Archive", icon: "📦", disabled: true }
+  ]}
+/>
+```
+
+### Destructive item
+
+```tsx
+<Dropdown
+  trigger="Actions"
+  items={[
+    { label: "Edit profile", icon: "✎" },
+    { label: "Duplicate", icon: "⧉" },
+    { label: "Settings", icon: "⚙" },
+    { label: "Delete…", icon: "🗑", destructive: true, separatorBefore: true }
+  ]}
+/>
+```
+
+## Do & Don't
+
+### Trigger
+
+**Do** — Click Actions to open; click outside to dismiss.
+
+```tsx
+<Dropdown trigger="Actions" items={[
+    { label: "Edit profile" },
+    { label: "Duplicate" },
+    { label: "Settings" }
+  ]} />
+```
+
+**Don't** — Always open: it clutters the page and there's no way to dismiss it.
+
+```tsx
+<Dropdown trigger="Actions" open items={[
+    { label: "Edit profile" },
+    { label: "Duplicate" },
+    { label: "Settings" }
+  ]} />
+```
+
+### Sectioning
+
+**Do** — Click an item: group related actions under labels with a separator.
+
+```tsx
+<Dropdown trigger="Actions" label="Create" items={[
+    { label: "New file" },
+    { label: "New folder" },
+    { label: "Upload" },
+    { label: "Rename", separatorBefore: true },
+    { label: "Move to…" },
+    { label: "Download" }
+  ]} />
+```
+
+**Don't** — Click an item: a long, flat menu of eight actions is hard to scan.
+
+```tsx
+<Dropdown trigger="Actions" items={[
+    { label: "New file" },
+    { label: "New folder" },
+    { label: "Upload" },
+    { label: "Rename" },
+    { label: "Duplicate" },
+    { label: "Move to…" },
+    { label: "Download" },
+    { label: "Delete" }
+  ]} />
+```
+
+### Leading icons
+
+**Do** — Click an item: give every row a leading icon so labels share one start column.
+
+```tsx
+<Dropdown trigger="Actions" items={[
+    { label: "Edit", icon: "✎" },
+    { label: "Duplicate", icon: "⧉" },
+    { label: "Settings", icon: "⚙" }
+  ]} />
+```
+
+**Don't** — Click an item: icons on some rows but not others leave labels misaligned and the column ragged.
+
+```tsx
+<Dropdown trigger="Actions" items={[
+    { label: "Edit", icon: "✎" },
+    { label: "Duplicate" },
+    { label: "Settings", icon: "⚙" }
+  ]} />
+```
+
+### Keyboard shortcuts
+
+**Do** — Click an item: push shortcuts to a muted, right-aligned column so the eye can scan them.
+
+```tsx
+<Dropdown trigger="Actions" items={[
+    { label: "Edit profile", shortcut: "⌘E" },
+    { label: "Duplicate", shortcut: "⌘D" },
+    { label: "Settings", shortcut: "⌘," }
+  ]} />
+```
+
+**Don't** — Click an item: hints inline after the label crowd the text and never line up into a readable column.
+
+```tsx
+<Dropdown trigger="Actions" items={[
+    { label: "Edit profile ⌘E" },
+    { label: "Duplicate ⌘D" },
+    { label: "Settings ⌘," }
+  ]} />
+```
+
+### Disabled item
+
+**Do** — Click Archive: nothing happens; a real disabled item doesn't respond.
+
+```tsx
+<Dropdown trigger="Actions" items={[
+    { label: "Edit" },
+    { label: "Archive", disabled: true },
+    { label: "Duplicate" }
+  ]} />
+```
+
+**Don't** — Click Archive: it looks disabled but still fires, a greyed item that works is a trap.
+
+```tsx
+<View style={{ alignSelf: "flex-start", borderRadius: 6, borderWidth: 1, borderColor: tokens.border, backgroundColor: tokens.popover, padding: 4, ...shadow("lg"), minWidth: 200 }}>
+  <Pressable style={({ pressed }) => [{ flexDirection: "row", alignItems: "center", gap: 8, borderRadius: 2, paddingHorizontal: 8, paddingVertical: 6 }, pressed ? { backgroundColor: tokens.accent } : null]}>
+    <Text style={{ fontSize: 14, lineHeight: 20, color: tokens["popover-foreground"] }}>Edit</Text>
+  </Pressable>
+  <Pressable style={({ pressed }) => [{ flexDirection: "row", alignItems: "center", gap: 8, borderRadius: 2, paddingHorizontal: 8, paddingVertical: 6, opacity: 0.5 }, pressed ? { backgroundColor: tokens.accent } : null]}>
+    <Text style={{ fontSize: 14, lineHeight: 20, color: tokens["popover-foreground"] }}>Archive</Text>
+  </Pressable>
+  <Pressable style={({ pressed }) => [{ flexDirection: "row", alignItems: "center", gap: 8, borderRadius: 2, paddingHorizontal: 8, paddingVertical: 6 }, pressed ? { backgroundColor: tokens.accent } : null]}>
+    <Text style={{ fontSize: 14, lineHeight: 20, color: tokens["popover-foreground"] }}>Duplicate</Text>
+  </Pressable>
+</View>
+```
+
+### Destructive item
+
+**Do** — Click an item: separate destructive actions with a divider, color them, and place them last.
+
+```tsx
+<Dropdown trigger="Actions" items={[
+    { label: "Edit" },
+    { label: "Duplicate" },
+    { label: "Delete", destructive: true, separatorBefore: true }
+  ]} />
+```
+
+**Don't** — Click an item: a destructive action wedged between routine ones invites a costly misclick.
+
+```tsx
+<Dropdown trigger="Actions" items={[
+    { label: "Edit" },
+    { label: "Delete" },
+    { label: "Duplicate" }
+  ]} />
+```

package/src/atoms/dropdown/dropdown.shared.tsx

@@ -0,0 +1,190 @@
+import { useState, type ReactNode } from "react";
+import { Platform } from "react-native";
+import { View, Pressable, Text, useTheme, type StyleProp, type ViewStyle } from "../../style/index.js";
+import { Button } from "../button/button.js";
+import { wrapper, wrapperLifted, customTrigger, type DropdownSkin } from "./dropdown.styles.js";
+
+// Shared Dropdown shell. The structure (the trigger plus a floating menu of
+// action rows, each with an optional leading icon glyph, a label, and an
+// optional trailing keyboard shortcut, with hairline separators between groups
+// and red-tinted destructive rows), the public boolean-prop API, the
+// controlled/uncontrolled open state, the trigger/select close handlers, the
+// web-only dismiss backdrop, the disabled handling, and accessibility all live
+// here once. A platform file supplies only its skin (the menu card shape/fill/
+// border, the separators, the row sizing, and the press feedback) and calls
+// createDropdown.
+//
+// The trigger defaults to an outline button labelled by `trigger`. Pass
+// `children` to supply a CUSTOM trigger instead (e.g. an avatar account chip in
+// a topbar): the children render in place of the button, inside a Pressable that
+// toggles the menu. Either way the menu rows still come from `items`.
+//
+// Overlay note: the open menu renders as a floating card positioned absolutely
+// below the trigger (the wrapper is `relative`), so it overflows its container
+// (e.g. a docs card or the playground stage) instead of growing it, with no
+// portal/Modal. On the web, an UNCONTROLLED menu also lays down a transparent
+// full-viewport backdrop so a press anywhere off the menu dismisses it; a
+// controlled `open` menu and native get no backdrop (native would use a Modal).
+//
+// There are no visual style axes on the menu itself, so there is no boolean-prop
+// precedence to resolve; the per-item `destructive` flag is the only variant and
+// it is scoped to its own row.
+
+export interface DropdownItem {
+  label: string;
+  /** Optional leading glyph rendered before the label (a single character). */
+  icon?: string;
+  /** Optional trailing keyboard shortcut, right-aligned and muted. */
+  shortcut?: string;
+  /** Red-tinted row for destructive actions (e.g. Delete). */
+  destructive?: boolean;
+  /** Dimmed, non-interactive row: skips onSelect and renders at reduced opacity. */
+  disabled?: boolean;
+  /** Draw a hairline separator above this row to start a new group. */
+  separatorBefore?: boolean;
+}
+
+export interface DropdownProps {
+  /** Label for the default outline trigger button. Omit when supplying a custom
+   *  trigger via `children`. */
+  trigger?: string;
+  /** A custom trigger rendered in place of the default outline button, e.g. an
+   *  avatar account chip. It is wrapped in a Pressable that toggles the menu;
+   *  the menu itself still comes from `items`. */
+  children?: ReactNode;
+  /** Optional muted section heading rendered above the rows (e.g. "Actions"). */
+  label?: string;
+  /** The menu rows, top to bottom. */
+  items: DropdownItem[];
+  /** Controlled open state. Omit for uncontrolled (the trigger opens/closes it). */
+  open?: boolean;
+  /** Fired when the open state changes (trigger press, select, etc.). */
+  onOpenChange?: (open: boolean) => void;
+  /** Fired with the selected item and its index when a row is pressed. */
+  onSelect?: (item: DropdownItem, index: number) => void;
+  /** Escape hatch for layout/positioning composition (mainly width). */
+  style?: StyleProp<ViewStyle>;
+}
+
+// The menu's width floor. A menu under a small trigger (e.g. an outline button)
+// stays at least this wide; a wider trigger (an account chip) sets the width.
+const MENU_MIN_WIDTH = 200;
+
+// A transparent full-viewport layer behind the open menu (web only): a press off
+// the menu dismisses it. `position: fixed` is not in RN's ViewStyle type but
+// react-native-web honors it; cast through unknown. zIndex sits below the menu's
+// z-50 so the menu and its items stay clickable above the backdrop.
+const DISMISS_BACKDROP = {
+  position: "fixed",
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  zIndex: 40,
+} as unknown as StyleProp<ViewStyle>;
+
+// The menu card is positioned absolutely below the trigger on every platform; the
+// skin owns the card's shape/fill/shadow, this owns the anchoring.
+const MENU_ANCHOR: ViewStyle = { position: "absolute", top: "100%", left: 0, zIndex: 50, marginTop: 4 };
+
+/** Build a Dropdown component from a platform skin. */
+export function createDropdown(skin: DropdownSkin) {
+  return function Dropdown(props: DropdownProps) {
+    const { trigger, children, label, items, open: openProp, onOpenChange, onSelect, style } = props;
+    const { tokens, dark } = useTheme();
+    // Uncontrolled by default (Headless-UI style): the trigger opens/closes the
+    // menu and 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);
+    };
+
+    // Match the menu width to the trigger (and let longer rows grow past it), so a
+    // wide trigger like a topbar account chip gets a menu of the same width.
+    // Measured via the wrapper's layout; the menu is absolute, so it never feeds
+    // back into this width.
+    const [triggerWidth, setTriggerWidth] = useState(0);
+
+    const ripple = skin.ripple ? skin.ripple(tokens) : undefined;
+
+    return (
+      // self-start keeps the trigger from stretching; relative anchors the menu.
+      <View
+        style={[wrapper, open ? wrapperLifted : null, style]}
+        onLayout={(e) => setTriggerWidth(e.nativeEvent.layout.width)}
+      >
+        {children != null ? (
+          <Pressable
+            style={customTrigger}
+            onPress={() => setOpen(!open)}
+            accessibilityRole="button"
+            accessibilityState={{ expanded: open }}
+          >
+            {children}
+          </Pressable>
+        ) : (
+          <Button outline small onPress={() => setOpen(!open)}>
+            {trigger}
+          </Button>
+        )}
+
+        {open && openProp === undefined && Platform.OS === "web" ? (
+          <Pressable accessible={false} onPress={() => setOpen(false)} style={DISMISS_BACKDROP} />
+        ) : null}
+
+        {open ? (
+          <View
+            style={[
+              MENU_ANCHOR,
+              skin.menuCard(tokens),
+              { minWidth: Math.max(triggerWidth, MENU_MIN_WIDTH) },
+            ]}
+          >
+            {label ? (
+              <Text style={skin.menuLabel(tokens)}>
+                {label}
+              </Text>
+            ) : null}
+            {items.map((item, index) => (
+              <View key={`${item.label}-${index}`}>
+                {item.separatorBefore && skin.separator ? (
+                  <View style={skin.separator(tokens)} />
+                ) : null}
+                <Pressable
+                  style={({ pressed }) => [
+                    skin.itemRow,
+                    // iOS/web tint the row on press here; Android uses the ripple instead.
+                    skin.itemPressed != null && pressed ? skin.itemPressed(tokens) : null,
+                    skin.pressedOpacity != null && pressed ? { opacity: skin.pressedOpacity } : null,
+                    item.disabled ? { opacity: skin.disabledOpacity } : null,
+                  ]}
+                  onPress={item.disabled ? undefined : () => { onSelect?.(item, index); setOpen(false); }}
+                  disabled={item.disabled}
+                  android_ripple={ripple}
+                  accessibilityRole="menuitem"
+                  accessibilityState={{ disabled: item.disabled }}
+                >
+                  {item.icon ? (
+                    <Text style={[skin.itemTextType, skin.itemTextColor(tokens, dark, !!item.destructive)]}>
+                      {item.icon}
+                    </Text>
+                  ) : null}
+                  <Text style={[skin.itemTextType, skin.itemTextColor(tokens, dark, !!item.destructive)]}>
+                    {item.label}
+                  </Text>
+                  {item.shortcut ? (
+                    <Text style={skin.shortcut(tokens)}>
+                      {item.shortcut}
+                    </Text>
+                  ) : null}
+                </Pressable>
+              </View>
+            ))}
+          </View>
+        ) : null}
+      </View>
+    );
+  };
+}

package/src/atoms/dropdown/dropdown.styles.ts

@@ -0,0 +1,233 @@
+import { type ViewStyle, type TextStyle } from "react-native";
+import { type ColorTokens, palette, shadow, alpha } from "../../style/index.js";
+
+// Co-located Dropdown skins, one per platform, all driven by the brand tokens
+// (passed in from useTheme so they follow light/dark and read as glass when
+// tokens.popover is swapped translucent at the theming level). The BRAND
+// survives on every platform (the indigo `primary` press tint on Android, the
+// `destructive` red for destructive rows); only the native SHAPE, sizing, fill,
+// separators, and press feedback change per OS:
+//   iOS (iOS 26 / Liquid Glass pull-down menu): a VERY rounded popover panel
+//     (~26 radius, `popover` fill, NO border, soft shadow), rows ~44pt tall with
+//     ~17pt labels, hairline `border` separators between groups, a destructive
+//     row in `destructive` red, an optional trailing SF-style icon; a pressed row
+//     tints with a subtle `secondary` highlight (no ripple) at pressedOpacity 0.8.
+//   Android (Material 3 menu): an ELEVATED surface (4 radius, `popover`, shadow
+//     md, paddingVertical 8), rows ~48dp tall with 14sp labels and a leading
+//     icon gutter, an android_ripple (alpha(primary, 0.12) state layer) on rows,
+//     and NO separators.
+//   Web: the established Canvas look (the current dropdown, lifted verbatim) — a
+//     bordered popover card (6 radius, `border`, `popover` fill, shadow-lg,
+//     padding 4), rows with rounded-sm px-2 py-1.5 layout, hairline `border`
+//     separators, an `accent` pressed/active fill, and `red-600/red-400`
+//     destructive rows.
+
+// The contract a platform skin fulfills. The shell renders the wrapper, the
+// trigger, the optional backdrop, the menu card, the optional section label, the
+// per-group separators, and the item rows; the skin maps the active platform's
+// shape/fill/sizing/feedback onto each piece.
+export interface DropdownSkin {
+  /** The floating menu card: shape, fill, border (or lack of), shadow, padding.
+   *  The shell supplies the measured minWidth inline. */
+  menuCard: (t: ColorTokens) => ViewStyle;
+  /** Muted section heading rendered above the rows. */
+  menuLabel: (t: ColorTokens) => TextStyle;
+  /** A hairline separator above a row that starts a new group. iOS/web draw one;
+   *  Android (M3) returns null (no dividers). */
+  separator: ((t: ColorTokens) => ViewStyle) | null;
+  /** An item row layout (the flex-row + gap + radius + padding box). */
+  itemRow: ViewStyle;
+  /** The fill applied to a pressed row (iOS/web tint here; Android uses a
+   *  ripple, so this is null). */
+  itemPressed: ((t: ColorTokens) => ViewStyle) | null;
+  /** Item icon + label type scale. */
+  itemTextType: TextStyle;
+  /** Item icon + label color; branches on `destructive`. */
+  itemTextColor: (t: ColorTokens, dark: boolean, destructive: boolean) => TextStyle;
+  /** Trailing keyboard shortcut, right-aligned and muted. */
+  shortcut: (t: ColorTokens) => TextStyle;
+  /** Opacity applied to a disabled row. */
+  disabledOpacity: number;
+  /** iOS/web dim a row on press via this; Android uses a ripple instead (null). */
+  pressedOpacity: number | null;
+  /** Android ripple over the rows; null on iOS/web. */
+  ripple: ((t: ColorTokens) => { color: string; borderless: boolean }) | null;
+}
+
+// --- wrapper + trigger (identical across platforms) -------------------------
+
+// self-start keeps the trigger from stretching; relative anchors the menu.
+export const wrapper: ViewStyle = { position: "relative", alignSelf: "flex-start" };
+
+// When the menu is open, the wrapper is lifted into its own stacking context
+// above sibling content. react-native-web gives every positioned View an
+// implicit stacking context, so the menu's own `zIndex` is scoped INSIDE the
+// `relative` wrapper and cannot rise above a later sibling. Raising the wrapper's
+// zIndex while open lifts the whole control — trigger and menu together — above
+// everything painted after it.
+export const wrapperLifted: ViewStyle = { zIndex: 50 };
+
+// The custom-trigger Pressable: keeps the chip from stretching.
+export const customTrigger: ViewStyle = { alignSelf: "flex-start" };
+
+// ---------- Web: the established Canvas look (lifted verbatim) ----------
+// The current dropdown: a popover card (rounded-md border bg-popover p-1
+// shadow-lg) positioned absolutely below the trigger; rows with the
+// flex-row items-center gap-2 rounded-sm px-2 py-1.5 layout, hairline
+// my-1 h-px bg-border separators, an active:bg-accent pressed fill, and
+// text-red-600 dark:text-red-400 destructive rows.
+export const webSkin: DropdownSkin = {
+  menuCard: (t) => ({
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: t.border,
+    backgroundColor: t.popover,
+    padding: 4,
+    ...shadow("lg"),
+  }),
+  menuLabel: (t) => ({
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    fontSize: 12,
+    lineHeight: 16,
+    fontWeight: "500",
+    color: t["muted-foreground"],
+  }),
+  separator: (t) => ({ marginTop: 4, marginBottom: 4, height: 1, backgroundColor: t.border }),
+  itemRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    borderRadius: 2,
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+  },
+  itemPressed: (t) => ({ backgroundColor: t.accent }),
+  itemTextType: { fontSize: 14, lineHeight: 20 },
+  itemTextColor: (t, dark, destructive) => {
+    if (destructive) return { color: dark ? palette["red-400"] : palette["red-600"] };
+    return { color: t["popover-foreground"] };
+  },
+  shortcut: (t) => ({
+    marginLeft: "auto",
+    fontSize: 12,
+    lineHeight: 16,
+    letterSpacing: 1.6,
+    color: t["muted-foreground"],
+  }),
+  disabledOpacity: 0.5,
+  pressedOpacity: null, // web tints the row fill on press, no opacity dim
+  ripple: null,
+};
+
+// ---------- iOS 26 (Liquid Glass pull-down menu): VERY rounded popover, no border, hairline groups ----------
+// Apple's iOS 26 pull-down/context menu: a very rounded popover panel (~26pt
+// continuous radius, matching the Liquid Glass kit render in
+// docs/public/refs/ios/dropdown/menu-iphone-light.png) over the `popover` fill
+// with NO visible border and a soft shadow; rows ~44pt tall with ~17pt labels,
+// full-bleed hairline `border` separators between groups, a destructive row in
+// the `destructive` red (icon + label), section titles in `muted-foreground`,
+// and an optional trailing SF-style icon (e.g. a submenu chevron). A pressed row
+// tints with a subtle `secondary` highlight (no ripple) at pressedOpacity 0.8.
+// iOS 26 menus are markedly rounder than legacy (~13pt) menus; the larger radius
+// is the headline shape change.
+const IOS_RADIUS = 26;
+export const iosSkin: DropdownSkin = {
+  menuCard: (t) => ({
+    borderRadius: IOS_RADIUS,
+    backgroundColor: t.popover,
+    paddingVertical: 6,
+    // Clip the pressed-row highlight and full-bleed separators to the heavily
+    // rounded panel so they don't poke past the ~26pt corners. iOS still draws
+    // the soft shadow outside these bounds.
+    overflow: "hidden",
+    ...shadow("lg"),
+  }),
+  menuLabel: (t) => ({
+    paddingHorizontal: 16,
+    paddingVertical: 6,
+    fontSize: 13,
+    lineHeight: 18,
+    fontWeight: "600",
+    color: t["muted-foreground"],
+  }),
+  // Hairline group separators run full-bleed across the panel (iOS 26 groups
+  // rows with a thin divider).
+  separator: (t) => ({ marginTop: 6, marginBottom: 6, height: 1, backgroundColor: t.border }),
+  itemRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    paddingHorizontal: 16,
+    paddingVertical: 11,
+    minHeight: 44,
+  },
+  // Subtle highlight under a pressed row (no ripple on iOS).
+  itemPressed: (t) => ({ backgroundColor: t.secondary }),
+  itemTextType: { fontSize: 17, lineHeight: 22 },
+  itemTextColor: (t, _dark, destructive) => {
+    if (destructive) return { color: t.destructive };
+    return { color: t["popover-foreground"] };
+  },
+  shortcut: (t) => ({
+    marginLeft: "auto",
+    fontSize: 15,
+    lineHeight: 20,
+    letterSpacing: 0.5,
+    color: t["muted-foreground"],
+  }),
+  disabledOpacity: 0.5,
+  pressedOpacity: 0.8,
+  ripple: null,
+};
+
+// ---------- Android (Material 3 menu): elevated surface, ripple rows, no dividers ----------
+// M3 dropdown menu: an ELEVATED surface (4dp radius, `popover` fill, soft shadow,
+// 8dp vertical padding); rows ~48dp tall with 14sp labels and a leading icon
+// gutter, an android_ripple (alpha(primary, 0.12) state layer) on each row, and
+// NO separators (M3 menus group with spacing, not dividers).
+const ANDROID_RADIUS = 4;
+export const androidSkin: DropdownSkin = {
+  menuCard: (t) => ({
+    borderRadius: ANDROID_RADIUS,
+    backgroundColor: t.popover,
+    paddingVertical: 8,
+    ...shadow("md"),
+  }),
+  menuLabel: (t) => ({
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    fontSize: 12,
+    lineHeight: 16,
+    fontWeight: "500",
+    letterSpacing: 0.5,
+    color: t["muted-foreground"],
+  }),
+  // M3 menus use no dividers between items.
+  separator: null,
+  itemRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    paddingHorizontal: 16,
+    paddingVertical: 0,
+    minHeight: 48,
+  },
+  // Android uses the ripple, so no static pressed fill.
+  itemPressed: null,
+  itemTextType: { fontSize: 14, lineHeight: 20 },
+  itemTextColor: (t, _dark, destructive) => {
+    if (destructive) return { color: t.destructive };
+    return { color: t["popover-foreground"] };
+  },
+  shortcut: (t) => ({
+    marginLeft: "auto",
+    fontSize: 12,
+    lineHeight: 16,
+    letterSpacing: 0.5,
+    color: t["muted-foreground"],
+  }),
+  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/dropdown/dropdown.tsx

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