@olympusoss/canvas 4.0.0 → 5.0.0

package/src/atoms/combobox/combobox.styles.ts

@@ -0,0 +1,270 @@
+import { StyleSheet, type ViewStyle, type TextStyle } from "react-native";
+import { type ColorTokens, shadow } from "../../style/index.js";
+
+// Co-located Combobox skins, one per platform. A Combobox is a searchable
+// single-select: an editable field that filters an open option list. The BRAND
+// survives on every platform (the indigo `primary`/`accent` tokens stay; the
+// focus accent is the `ring`, never a platform default) and only the native
+// SHAPE, sizing, fill, border/underline treatment, popover elevation, and press
+// feedback change per OS. The treatment mirrors Input/Select:
+//   iOS 27 (iOS 26+/Liquid Glass): a plain field, transparent, no capsule, just
+//     a bottom hairline (`border` at rest -> brand `primary` when open); the
+//     trailing chevron is `muted-foreground`; the open list is a large
+//     continuous-corner `popover` card (~27 radius) with a soft shadow and roomy
+//     rows. Press = opacity dim (~0.8).
+//   Android (Material 3 filled): a subtle `muted` fill, TOP corners ~4 radius and
+//     a flat bottom, a bottom active-indicator underline (1dp `border` at rest ->
+//     2dp `ring` brand when open); the menu surface is a flat-cornered (~4)
+//     elevated `popover` sheet (M3 elevation, no soft drop shadow), full-width
+//     rows ~48dp tall; press = android_ripple.
+//   Web: the established Canvas look (the current combobox, lifted verbatim) —
+//     full 1px `input` border, 6 radius, `background` fill, h-8/9/10; the popover
+//     is a 6-radius bordered `popover` card with `shadow-lg`, 4px padding, 2-radius
+//     accent rows. Press dims nothing (the active accent fill is the feedback).
+
+export type Size = "small" | "default" | "large";
+
+// The contract a platform skin fulfills. The shell resolves the size and the
+// open/selected/pressed/muted state and asks the skin to map them to RN style
+// objects. The skin owns shape, fill, border/underline, popover elevation, the
+// row layout, and the press-feedback channel (iOS/web opacity vs Android ripple).
+export interface ComboboxSkin {
+  /** Type scale per size; the field text and the option rows share it. */
+  text: (size: Size) => TextStyle;
+  /** Stacked field label above the field. */
+  label: (t: ColorTokens, size: Size) => TextStyle;
+  /** The editable field surface: shape, fill, border/underline for the open state. */
+  field: (t: ColorTokens, size: Size, open: boolean) => ViewStyle;
+  /** The field's value text (foreground), or muted for the placeholder. */
+  fieldText: (t: ColorTokens, size: Size, muted: boolean) => TextStyle;
+  /** The trailing disclosure chevron. */
+  chevron: (t: ColorTokens, size: Size) => TextStyle;
+  /** The open option list surface (radius, elevation/shadow, padding). */
+  popover: (t: ColorTokens) => ViewStyle;
+  /** The "No results" row box. */
+  emptyRow: ViewStyle;
+  emptyText: (t: ColorTokens, size: Size) => TextStyle;
+  /** A single option row's layout (gutter, radius, padding). */
+  row: ViewStyle;
+  /** The accent surface for the selected row and the pressed/active row. */
+  rowAccent: (t: ColorTokens) => ViewStyle;
+  /** The leading check column. */
+  check: (t: ColorTokens, size: Size) => TextStyle;
+  /** The option label. */
+  optionText: (t: ColorTokens, size: Size) => TextStyle;
+  /** Helper line below the option list. */
+  helper: (t: ColorTokens) => TextStyle;
+  /** Opacity applied to the whole control when disabled. */
+  disabledOpacity: number;
+  /** iOS/web dim the field on press; Android uses a ripple instead (null). */
+  pressedOpacity: number | null;
+  /** Android ripple over the pressable surfaces; null on iOS/web. */
+  ripple: ((t: ColorTokens) => { color: string; borderless: boolean }) | null;
+}
+
+// `relative w-full`: the positioning context for the absolutely-placed popover.
+export const wrapper: ViewStyle = { position: "relative", width: "100%" };
+
+// When the list 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 popover'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 — field and popover together — above
+// everything painted after it.
+export const wrapperLifted: ViewStyle = { zIndex: 50 };
+
+// --- shared type scale (identical across platforms; brand type, not a face) --
+const TEXT_SIZE: Record<Size, TextStyle> = {
+  small: { fontSize: 12, lineHeight: 16 },
+  default: { fontSize: 14, lineHeight: 20 },
+  large: { fontSize: 16, lineHeight: 24 },
+};
+function webText(size: Size): TextStyle {
+  return TEXT_SIZE[size];
+}
+
+// Field height per size; mirrors Input's footprint per platform.
+const WEB_FIELD_BOX: Record<Size, number> = { small: 32, default: 36, large: 40 };
+
+// ---------- Web: the established Canvas look (lifted verbatim) ----------
+export const webSkin: ComboboxSkin = {
+  text: webText,
+  label: (t, size) => ({ marginBottom: 6, fontWeight: "500", color: t.foreground, ...TEXT_SIZE[size] }),
+  field: (t, size) => ({
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: t.input,
+    backgroundColor: t.background,
+    paddingHorizontal: 12,
+    height: WEB_FIELD_BOX[size],
+  }),
+  fieldText: (t, size, muted) => ({ color: muted ? t["muted-foreground"] : t.foreground, ...TEXT_SIZE[size] }),
+  chevron: (t, size) => ({ color: t["muted-foreground"], ...TEXT_SIZE[size] }),
+  popover: (t) => ({
+    position: "absolute",
+    top: "100%",
+    left: 0,
+    right: 0,
+    zIndex: 50,
+    marginTop: 4,
+    maxHeight: 240,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: t.border,
+    backgroundColor: t.popover,
+    padding: 4,
+    ...shadow("lg"),
+  }),
+  emptyRow: { paddingHorizontal: 8, paddingVertical: 6 },
+  emptyText: (t, size) => ({ color: t["muted-foreground"], ...TEXT_SIZE[size] }),
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    borderRadius: 2,
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+  },
+  rowAccent: (t) => ({ backgroundColor: t.accent }),
+  check: (t, size) => ({ width: 14, color: t["popover-foreground"], ...TEXT_SIZE[size] }),
+  optionText: (t, size) => ({ color: t["popover-foreground"], ...TEXT_SIZE[size] }),
+  helper: (t) => ({ marginTop: 6, fontSize: 12, lineHeight: 16, color: t["muted-foreground"] }),
+  disabledOpacity: 0.5,
+  pressedOpacity: null, // web shows press via the active accent fill, not opacity
+  ripple: null,
+};
+
+// ---------- iOS 27 (iOS 26+/Liquid Glass): plain hairline field, large-radius glass menu ----------
+// The iOS 27 combo box reads like the new iOS text field: NO filled capsule and
+// no box, just the value text on a transparent surface above a thin bottom
+// hairline (`border` at rest, the brand indigo `primary` when the list is open,
+// echoing the field's blue caret in the reference). The open list is the iOS 26+
+// menu surface: a large continuous-corner `popover` card (~27 radius, up from the
+// old ~12) floating on a soft shadow, with roomy rows. Press dims the surface
+// (~0.8); no ripple. The brand survives: the open hairline, the leading check,
+// and the focus accent are all the indigo `primary`, never iOS system blue.
+const IOS_MENU_RADIUS = 27;
+const IOS_FIELD_BOX: Record<Size, number> = { small: 36, default: 44, large: 50 };
+export const iosSkin: ComboboxSkin = {
+  text: webText,
+  label: (t, size) => ({ marginBottom: 6, fontWeight: "600", color: t.foreground, ...TEXT_SIZE[size] }),
+  // Plain field: transparent, square (no capsule), bottom hairline only. The
+  // hairline thickens and tints to the brand `primary` when the list is open.
+  field: (t, size, open) => ({
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    borderRadius: 0,
+    backgroundColor: "transparent",
+    borderBottomWidth: open ? 1.5 : StyleSheet.hairlineWidth,
+    borderBottomColor: open ? t.primary : t.border,
+    paddingHorizontal: 0,
+    height: IOS_FIELD_BOX[size],
+  }),
+  fieldText: (t, size, muted) => ({ color: muted ? t["muted-foreground"] : t.foreground, ...TEXT_SIZE[size] }),
+  chevron: (t, size) => ({ color: t["muted-foreground"], ...TEXT_SIZE[size] }),
+  popover: (t) => ({
+    position: "absolute",
+    top: "100%",
+    left: 0,
+    right: 0,
+    zIndex: 50,
+    marginTop: 6,
+    maxHeight: 260,
+    borderRadius: IOS_MENU_RADIUS,
+    backgroundColor: t.popover,
+    padding: 6,
+    ...shadow("lg"),
+  }),
+  emptyRow: { paddingHorizontal: 14, paddingVertical: 10 },
+  emptyText: (t, size) => ({ color: t["muted-foreground"], ...TEXT_SIZE[size] }),
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    borderRadius: 18,
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+  },
+  rowAccent: (t) => ({ backgroundColor: t.accent }),
+  check: (t, size) => ({ width: 16, color: t.primary, ...TEXT_SIZE[size] }),
+  optionText: (t, size) => ({ color: t["popover-foreground"], ...TEXT_SIZE[size] }),
+  helper: (t) => ({ marginTop: 6, fontSize: 12, lineHeight: 16, color: t["muted-foreground"] }),
+  disabledOpacity: 0.5,
+  pressedOpacity: 0.8,
+  ripple: null,
+};
+
+// ---------- Android (Material 3 filled): subtle fill, top radius, bottom indicator, elevated menu ----------
+// M3 exposed dropdown: the anchor is a filled field (`muted`) with the TOP
+// corners rounded ~4dp and a flat bottom, plus a bottom active-indicator
+// underline — 1dp `border` at rest, 2dp `ring` (brand) when open. The menu is a
+// flat-cornered (~4) elevated `popover` sheet (M3 elevation via `elevation`, no
+// soft iOS drop shadow), full-width rows ~48dp tall whose active/selected state
+// is the `accent` state layer. The action feedback is android_ripple.
+const ANDROID_TOP_RADIUS = 4;
+const ANDROID_FIELD_BOX: Record<Size, number> = { small: 48, default: 56, large: 60 };
+export const androidSkin: ComboboxSkin = {
+  // M3 body text is 16sp; nudge base/large up, keep small readable.
+  text: (size) => {
+    if (size === "large") return { fontSize: 18, lineHeight: 26 };
+    if (size === "small") return { fontSize: 14, lineHeight: 20 };
+    return { fontSize: 16, lineHeight: 24 };
+  },
+  label: (t, size) => ({ marginBottom: 6, fontWeight: "500", color: t.foreground, ...TEXT_SIZE[size] }),
+  field: (t, size, open) => ({
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    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 field is distinct from the iOS lineless capsule.
+    borderBottomColor: open ? t.ring : t["muted-foreground"],
+    backgroundColor: t.muted,
+    paddingHorizontal: 16,
+    height: ANDROID_FIELD_BOX[size],
+  }),
+  fieldText: (t, size, muted) => ({ color: muted ? t["muted-foreground"] : t.foreground, ...TEXT_SIZE[size] }),
+  chevron: (t, size) => ({ color: t["muted-foreground"], ...TEXT_SIZE[size] }),
+  // M3 menu surface: flat 4dp corners, elevated (no soft drop shadow), zero
+  // padding so the full-bleed rows reach the edges.
+  popover: (t) => ({
+    position: "absolute",
+    top: "100%",
+    left: 0,
+    right: 0,
+    zIndex: 50,
+    marginTop: 4,
+    maxHeight: 280,
+    borderRadius: 4,
+    backgroundColor: t.popover,
+    paddingVertical: 8,
+    elevation: 8,
+  }),
+  emptyRow: { paddingHorizontal: 16, paddingVertical: 12 },
+  emptyText: (t, size) => ({ color: t["muted-foreground"], ...TEXT_SIZE[size] }),
+  // Full-bleed M3 list rows: square corners, ~48dp tall, 16dp gutter.
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    borderRadius: 0,
+    minHeight: 48,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+  },
+  rowAccent: (t) => ({ backgroundColor: t.accent }),
+  check: (t, size) => ({ width: 16, color: t.primary, ...TEXT_SIZE[size] }),
+  optionText: (t, size) => ({ color: t["popover-foreground"], ...TEXT_SIZE[size] }),
+  helper: (t) => ({ marginTop: 6, fontSize: 12, lineHeight: 16, color: t["muted-foreground"] }),
+  disabledOpacity: 0.38, // M3 disabled opacity
+  pressedOpacity: null, // Android uses a ripple instead
+  ripple: (t) => ({ color: t.accent, borderless: false }),
+};

package/src/atoms/combobox/combobox.tsx

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

package/src/atoms/divider/divider.md

@@ -0,0 +1,140 @@
+# Dividers
+
+Horizontal, vertical, with label, with action.
+
+## Usage
+
+```tsx
+<Divider />
+```
+
+## Variants
+
+### Orientation - vertical
+
+```tsx
+<Divider vertical />
+```
+
+### Variant - label
+
+```tsx
+<Divider>Or continue with</Divider>
+```
+
+### Variant - action
+
+```tsx
+<View style={{ width: 320 }}>
+  <View style={{ gap: 8 }}>
+    <View style={{ borderRadius: 6, borderWidth: 1, borderColor: tokens.border, paddingHorizontal: 12, paddingVertical: 8 }}>
+      <Text style={{ fontSize: 14, lineHeight: 20, color: tokens.foreground }}>Ada commented on the draft</Text>
+    </View>
+    <View style={{ borderRadius: 6, borderWidth: 1, borderColor: tokens.border, paddingHorizontal: 12, paddingVertical: 8 }}>
+      <Text style={{ fontSize: 14, lineHeight: 20, color: tokens.foreground }}>Grace approved the request</Text>
+    </View>
+  </View>
+  <Divider style={{ marginTop: 12 }} children={<Button ghost small>Show more</Button>} />
+</View>
+```
+
+## Do & Don't
+
+### Plain
+
+**Do** — Click a row: group with spacing and reserve a divider for a real break like Sign out.
+
+```tsx
+<View style={{ maxWidth: 280 }}>
+  <Text style={{ borderRadius: 6, paddingHorizontal: 8, paddingVertical: 6, fontSize: 14, lineHeight: 20 }}>Profile</Text>
+  <Text style={{ borderRadius: 6, paddingHorizontal: 8, paddingVertical: 6, fontSize: 14, lineHeight: 20 }}>Account</Text>
+  <Text style={{ borderRadius: 6, paddingHorizontal: 8, paddingVertical: 6, fontSize: 14, lineHeight: 20 }}>Notifications</Text>
+  <Divider style={{ marginVertical: 4 }} />
+  <Text style={{ borderRadius: 6, paddingHorizontal: 8, paddingVertical: 6, fontSize: 14, lineHeight: 20 }}>Sign out</Text>
+</View>
+```
+
+**Don't** — Click a row: a divider between every one is noise that competes with the content.
+
+```tsx
+<View style={{ maxWidth: 280 }}>
+  <Text style={{ borderRadius: 6, paddingHorizontal: 8, paddingVertical: 6, fontSize: 14, lineHeight: 20 }}>Profile</Text>
+  <Divider />
+  <Text style={{ borderRadius: 6, paddingHorizontal: 8, paddingVertical: 6, fontSize: 14, lineHeight: 20 }}>Account</Text>
+  <Divider />
+  <Text style={{ borderRadius: 6, paddingHorizontal: 8, paddingVertical: 6, fontSize: 14, lineHeight: 20 }}>Notifications</Text>
+  <Divider />
+  <Text style={{ borderRadius: 6, paddingHorizontal: 8, paddingVertical: 6, fontSize: 14, lineHeight: 20 }}>Billing</Text>
+</View>
+```
+
+### With label
+
+**Do** — Click a provider: keep the label to a few words and let the buttons carry the options.
+
+```tsx
+<View style={{ width: 320, flexDirection: "column", gap: 8 }}>
+  <Button primary block>Sign in</Button>
+  <Divider>or continue with</Divider>
+  <View style={{ flexDirection: "row", gap: 8 }}>
+    <Button outline block style={{ flexGrow: 1, flexShrink: 1, flexBasis: "0%" }}>Google</Button>
+    <Button outline block style={{ flexGrow: 1, flexShrink: 1, flexBasis: "0%" }}>GitHub</Button>
+  </View>
+</View>
+```
+
+**Don't** — Click Sign in: a full sentence in the label divider buries the choice.
+
+```tsx
+<View style={{ width: 320, flexDirection: "column", gap: 8 }}>
+  <Button primary block>Sign in</Button>
+  <Divider>or continue with one of your previously linked third-party accounts</Divider>
+</View>
+```
+
+### With action
+
+**Do** — Click Show more: the button toggles its label and reveals the rest.
+
+```tsx
+<View style={{ width: 320, gap: 6 }}>
+  <Text style={{ paddingVertical: 6, fontSize: 14, lineHeight: 20, color: tokens["muted-foreground"] }}>Logged in from 2 new devices · 3 more entries</Text>
+  <Divider>
+    <Button ghost small>Show less</Button>
+  </Divider>
+</View>
+```
+
+**Don't** — Click the button: an action divider that does nothing is just decoration.
+
+```tsx
+<View style={{ width: 320 }}>
+  <Divider>
+    <Button ghost small>Show more</Button>
+  </Divider>
+</View>
+```
+
+### Vertical
+
+**Do** — Click an action: the vertical rule separates inline actions in a row.
+
+```tsx
+<View style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
+  <Text style={{ fontSize: 14, lineHeight: 20 }}>Edit</Text>
+  <Divider vertical style={{ height: 16 }} />
+  <Text style={{ fontSize: 14, lineHeight: 20 }}>Delete</Text>
+  <Divider vertical style={{ height: 16 }} />
+  <Text style={{ fontSize: 14, lineHeight: 20 }}>Share</Text>
+</View>
+```
+
+**Don't** — Click an action: a vertical rule between stacked items reads as a glitch.
+
+```tsx
+<View style={{ flexDirection: "column", alignItems: "flex-start", gap: 8 }}>
+  <Text style={{ fontSize: 14, lineHeight: 20 }}>Edit</Text>
+  <Divider vertical style={{ height: 16 }} />
+  <Text style={{ fontSize: 14, lineHeight: 20 }}>Delete</Text>
+</View>
+```

package/src/atoms/divider/divider.styles.ts

@@ -0,0 +1,35 @@
+import { type ViewStyle, type TextStyle } from "react-native";
+import { type ColorTokens } from "../../style/index.js";
+
+// Co-located Divider styles. The hairline rule is layout-only except for its
+// fill, which reads a token (so it follows light/dark and the glass surface):
+// `strong` tracks the standard border token, `soft` steps down to muted for a
+// quieter rule. Layout fragments are static objects; the color is a function of
+// the active tokens.
+
+export type Orientation = "horizontal" | "vertical";
+export type Emphasis = "soft" | "strong";
+
+// The hairline fill color, token-backed. `strong` is the standard border;
+// `soft` steps down to the muted token for a quieter rule (was bg-border / bg-muted).
+export function ruleFill(tokens: ColorTokens, emphasis: Emphasis): ViewStyle {
+  return { backgroundColor: emphasis === "strong" ? tokens.border : tokens.muted };
+}
+
+// Vertical rule: 1px wide, stretching to the row height it sits in (w-px self-stretch).
+export const verticalRule: ViewStyle = { width: 1, alignSelf: "stretch" };
+
+// Plain horizontal hairline spanning the full width (h-px w-full).
+export const horizontalRule: ViewStyle = { height: 1, width: "100%" };
+
+// The labeled/action row: a centered node flanked by two hairlines
+// (flex-row items-center gap-3).
+export const labelRow: ViewStyle = { flexDirection: "row", alignItems: "center", gap: 12 };
+
+// A flanking hairline inside the labeled row: 1px tall, growing to fill (h-px flex-1).
+export const flankRule: ViewStyle = { height: 1, flexGrow: 1, flexShrink: 1, flexBasis: "0%" };
+
+// The centered label text: xs muted (text-xs text-muted-foreground).
+export function labelText(tokens: ColorTokens): TextStyle {
+  return { fontSize: 12, lineHeight: 16, color: tokens["muted-foreground"] };
+}

package/src/atoms/divider/divider.tsx

@@ -0,0 +1,67 @@
+import { type ReactNode } from "react";
+import { View, Text, useTheme, type StyleProp, type ViewStyle } from "../../style/index.js";
+import * as s from "./divider.styles.js";
+import { type Orientation, type Emphasis } from "./divider.styles.js";
+
+export interface DividerProps {
+  /**
+   * Optional middle content. With children, a horizontal divider renders a
+   * flanking-line + centered-label row (the "with label" / "with action"
+   * patterns). A string renders as muted label text; arbitrary nodes (e.g. a
+   * button) render as-is for the action pattern. Ignored when `vertical`.
+   */
+  children?: ReactNode;
+  // Orientation (pick one; default is horizontal).
+  horizontal?: boolean;
+  vertical?: boolean;
+  // Emphasis (pick one; default tracks the border token).
+  soft?: boolean;
+  strong?: boolean;
+  /** Escape hatch for layout/positioning composition (width, margins, alignment). */
+  style?: StyleProp<ViewStyle>;
+}
+
+// First match wins when more than one orientation flag is passed.
+function orientationOf(p: DividerProps): Orientation {
+  if (p.vertical) return "vertical";
+  return "horizontal";
+}
+
+// First match wins when more than one emphasis flag is passed.
+function emphasisOf(p: DividerProps): Emphasis {
+  if (p.soft) return "soft";
+  return "strong";
+}
+
+export function Divider(props: DividerProps) {
+  const { children, style } = props;
+  const orientation = orientationOf(props);
+  const emphasis = emphasisOf(props);
+  const { tokens } = useTheme();
+  const ruleFill = s.ruleFill(tokens, emphasis);
+
+  if (orientation === "vertical") {
+    // A thin vertical rule that adapts to the row height it sits in.
+    return <View style={[s.verticalRule, ruleFill, style]} />;
+  }
+
+  // Horizontal with a label/action in the middle: a centered node flanked by
+  // two hairlines (the sepLabel pattern: gap-3, xs muted text).
+  if (children != null) {
+    const isText = typeof children === "string" || typeof children === "number";
+    return (
+      <View style={[s.labelRow, style]}>
+        <View style={[s.flankRule, ruleFill]} />
+        {isText ? (
+          <Text style={s.labelText(tokens)}>{children}</Text>
+        ) : (
+          children
+        )}
+        <View style={[s.flankRule, ruleFill]} />
+      </View>
+    );
+  }
+
+  // Plain horizontal hairline spanning the full width.
+  return <View style={[s.horizontalRule, ruleFill, style]} />;
+}

package/src/atoms/dropdown/dropdown.android.tsx

@@ -0,0 +1,6 @@
+import { createDropdown } from "./dropdown.shared.js";
+import { androidSkin } from "./dropdown.styles.js";
+
+// Material 3 (menu) Dropdown. Metro resolves this file on Android; the docs import it for preview.
+export const Dropdown = createDropdown(androidSkin);
+export type { DropdownProps, DropdownItem } from "./dropdown.shared.js";

package/src/atoms/dropdown/dropdown.ios.tsx

@@ -0,0 +1,6 @@
+import { createDropdown } from "./dropdown.shared.js";
+import { iosSkin } from "./dropdown.styles.js";
+
+// iOS (HIG pull-down menu) Dropdown. Metro resolves this file on iOS; the docs import it for preview.
+export const Dropdown = createDropdown(iosSkin);
+export type { DropdownProps, DropdownItem } from "./dropdown.shared.js";