@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-3SCKCWF5.js

@@ -0,0 +1,298 @@
+import { NAMED_ROLE } from './chunk-W23G6JLF.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var COMMON_GLYPHS = {
+  enter: "\u21B5",
+  return: "\u21B5",
+  esc: "Esc",
+  escape: "Esc",
+  tab: "\u21E5",
+  backspace: "\u232B",
+  delete: "Del",
+  del: "Del",
+  space: "\u2423",
+  up: "\u2191",
+  down: "\u2193",
+  left: "\u2190",
+  right: "\u2192",
+  arrowup: "\u2191",
+  arrowdown: "\u2193",
+  arrowleft: "\u2190",
+  arrowright: "\u2192",
+  pageup: "PgUp",
+  pagedown: "PgDn",
+  home: "Home",
+  end: "End",
+  capslock: "\u21EA",
+  win: "Win"
+};
+var DEFAULT_LABELS = {
+  keys: {
+    command: "Command",
+    control: "Control",
+    option: "Option",
+    alt: "Alt",
+    shift: "Shift",
+    enter: "Enter",
+    return: "Return",
+    escape: "Escape",
+    tab: "Tab",
+    backspace: "Backspace",
+    delete: "Delete",
+    space: "Space",
+    up: "Up",
+    down: "Down",
+    left: "Left",
+    right: "Right",
+    pageUp: "Page Up",
+    pageDown: "Page Down",
+    home: "Home",
+    end: "End",
+    capsLock: "Caps Lock",
+    windows: "Windows"
+  },
+  caps: {
+    command: "Cmd",
+    meta: "Meta",
+    super: "Super",
+    shift: "Shift",
+    control: "Ctrl",
+    alt: "Alt",
+    escape: "Esc",
+    delete: "Del",
+    pageUp: "PgUp",
+    pageDown: "PgDn",
+    home: "Home",
+    end: "End",
+    windows: "Win"
+  }
+};
+var KEY_ID = {
+  cmd: "command",
+  command: "command",
+  meta: "command",
+  super: "command",
+  shift: "shift",
+  ctrl: "control",
+  control: "control",
+  alt: "alt",
+  opt: "option",
+  option: "option",
+  enter: "enter",
+  return: "return",
+  esc: "escape",
+  escape: "escape",
+  tab: "tab",
+  backspace: "backspace",
+  delete: "delete",
+  del: "delete",
+  space: "space",
+  up: "up",
+  down: "down",
+  left: "left",
+  right: "right",
+  arrowup: "up",
+  arrowdown: "down",
+  arrowleft: "left",
+  arrowright: "right",
+  pageup: "pageUp",
+  pagedown: "pageDown",
+  home: "home",
+  end: "end",
+  capslock: "capsLock",
+  win: "windows"
+};
+var WORD_CAP_ID = {
+  esc: "escape",
+  escape: "escape",
+  delete: "delete",
+  del: "delete",
+  pageup: "pageUp",
+  pagedown: "pageDown",
+  home: "home",
+  end: "end",
+  win: "windows"
+};
+var TEXT_MODIFIER_ID = {
+  cmd: "command",
+  command: "command",
+  meta: "meta",
+  super: "super",
+  shift: "shift",
+  ctrl: "control",
+  control: "control",
+  alt: "alt",
+  opt: "alt",
+  option: "alt"
+};
+var MODIFIER_ROWS = [
+  ["cmd", "\u2318", "Cmd"],
+  ["command", "\u2318", "Cmd"],
+  ["meta", "\u2318", "Meta"],
+  ["super", "\u2318", "Super"],
+  ["shift", "\u21E7", "Shift"],
+  ["ctrl", "\u2303", "Ctrl"],
+  ["control", "\u2303", "Ctrl"],
+  ["alt", "\u2325", "Alt"],
+  ["opt", "\u2325", "Alt"],
+  ["option", "\u2325", "Alt"]
+];
+var APPLE_MODIFIERS = Object.fromEntries(
+  MODIFIER_ROWS.map(([alias, apple]) => [alias, apple])
+);
+var TEXT_MODIFIERS = Object.fromEntries(
+  MODIFIER_ROWS.map(([alias, , text]) => [alias, text])
+);
+var GLYPH_ICON = {
+  "\u2318": "key-command",
+  "\u21E7": "key-shift",
+  "\u2325": "key-option",
+  "\u2303": "key-control",
+  "\u21A9": "key-enter",
+  "\u21B5": "key-enter",
+  "\u21E5": "key-tab",
+  "\u232B": "key-backspace",
+  "\u2423": "key-space",
+  "\u21EA": "key-capslock",
+  "\u2191": "arrow-up",
+  "\u2193": "arrow-down",
+  "\u2190": "arrow-left",
+  "\u2192": "arrow-right"
+};
+var ICON_SIZE = { sm: 12, md: 13 };
+function resolveKey(key, symbols, apple, labels) {
+  if (!symbols) return key;
+  const k = key.trim().toLowerCase();
+  if (apple) {
+    const glyph = APPLE_MODIFIERS[k];
+    if (glyph) return glyph;
+  } else {
+    const modifierId = TEXT_MODIFIER_ID[k];
+    if (modifierId) return labels.caps[modifierId] ?? TEXT_MODIFIERS[k] ?? key;
+  }
+  const wordId = WORD_CAP_ID[k];
+  if (wordId) return labels.caps[wordId] ?? COMMON_GLYPHS[k] ?? key;
+  return COMMON_GLYPHS[k] ?? key;
+}
+function spokenKey(key, apple, labels) {
+  const k = key.trim().toLowerCase();
+  let id = KEY_ID[k];
+  if (id === "option" || id === "alt") id = apple ? "option" : "alt";
+  const word = id ? labels.keys[id] : void 0;
+  if (word) return word;
+  return key.length === 1 ? key.toUpperCase() : key;
+}
+function spokenLabel(parts, apple, labels) {
+  return parts.map((k) => spokenKey(k, apple, labels)).join(" ");
+}
+function Kbd({
+  keys,
+  symbols = true,
+  size = "md",
+  variant = "default",
+  tone = "neutral",
+  // `motion` is accepted for API parity but intentionally unused — Kbd has no
+  // animation. Destructured so it never lands on the underlying View.
+  motion: _motion = "full",
+  children,
+  accessibilityLabel,
+  labels: labelsProp
+}) {
+  const labels = useLabels("kbd", DEFAULT_LABELS, labelsProp);
+  const { styles } = useStyles(sheet, { size });
+  const theme = useLoamTheme("kbd");
+  const apple = theme.platform === "iOS";
+  const soft = tone === "neutral" ? void 0 : {
+    accent: { bg: theme.color.accentSoft, ink: theme.color.accentOnSoft },
+    good: { bg: theme.color.goodSoft, ink: theme.color.goodOnSoft },
+    warn: { bg: theme.color.warnSoft, ink: theme.color.warnOnSoft },
+    danger: { bg: theme.color.dangerSoft, ink: theme.color.dangerOnSoft },
+    info: { bg: theme.color.infoSoft, ink: theme.color.infoOnSoft }
+  }[tone];
+  const ink = soft?.ink ?? theme.color.text2;
+  const capStyle = [
+    styles.cap,
+    variant === "outline" && { backgroundColor: "transparent" },
+    variant === "ghost" && { backgroundColor: "transparent", borderColor: "transparent" },
+    soft && variant === "default" && { backgroundColor: soft.bg },
+    tone !== "neutral" && variant !== "ghost" && { borderColor: theme.edge[tone] }
+  ];
+  const face = (label2) => {
+    const icon = GLYPH_ICON[label2];
+    return icon ? /* @__PURE__ */ jsx(View, { testID: `kbd-glyph-${label2}`, children: /* @__PURE__ */ jsx(Icon, { name: icon, size: ICON_SIZE[size ?? "md"], color: ink, strokeWidth: 2 }) }) : /* @__PURE__ */ jsx(Text, { style: [styles.label, soft && { color: ink }], children: label2 });
+  };
+  if (keys === void 0) {
+    const label2 = accessibilityLabel ?? (typeof children === "string" ? spokenLabel([children], apple, labels) : void 0);
+    return /* @__PURE__ */ jsx(View, { accessible: true, accessibilityRole: NAMED_ROLE, accessibilityLabel: label2, style: capStyle, children: typeof children === "string" ? face(children) : children });
+  }
+  const list = Array.isArray(keys) ? keys : String(keys).split("+");
+  const parts = list.map((k) => k.trim()).filter((k) => k.length > 0);
+  const label = accessibilityLabel ?? spokenLabel(parts, apple, labels);
+  return /* @__PURE__ */ jsx(View, { accessible: true, accessibilityRole: NAMED_ROLE, accessibilityLabel: label, style: styles.group, children: parts.map((key, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    i > 0 ? /* @__PURE__ */ jsx(Text, { style: styles.plus, children: "+" }) : null,
+    /* @__PURE__ */ jsx(View, { style: capStyle, children: face(resolveKey(key, symbols, apple, labels)) })
+  ] }, `${key}-${i}`)) });
+}
+var sheet = createStyleSheet((theme) => ({
+  // The row of keycaps. `space.s1` gap matches the web `gap-1` between caps.
+  group: { flexDirection: "row", alignItems: "center", gap: theme.space.s1 },
+  // A single keycap. No native `--kbd-bg` token exists, so — as the native
+  // contract prescribes — the subtle surface falls back to `surface2` + a
+  // hairline border. The tiny `minWidth`/`minHeight` (20 / 24) mirror the web
+  // `kbd`'s raw-px `h-[20px]`/`min-w-[20px]` keycap box one-to-one.
+  cap: {
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: theme.color.surface2,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    borderRadius: theme.radius.sm,
+    variants: {
+      size: {
+        sm: {
+          minWidth: theme.space[20],
+          minHeight: theme.space[20],
+          paddingHorizontal: theme.space.s1
+        },
+        md: {
+          minWidth: theme.space[24],
+          minHeight: theme.space[24],
+          paddingHorizontal: theme.space.s2
+        }
+      }
+    }
+  },
+  // Monospace, tabular figures so combos line up. `text2` matches web `text-ink-2`.
+  label: {
+    fontFamily: theme.font.mono,
+    color: theme.color.text2,
+    textAlign: "center",
+    fontVariant: ["tabular-nums"],
+    variants: {
+      size: {
+        sm: {
+          fontSize: theme.type.caption2.fontSize,
+          lineHeight: theme.type.caption2.lineHeight
+        },
+        md: {
+          fontSize: theme.type.caption1.fontSize,
+          lineHeight: theme.type.caption1.lineHeight
+        }
+      }
+    }
+  },
+  // The `+` between keys — muted (`text3`, web `text-ink-3`), decorative only.
+  plus: {
+    fontFamily: theme.font.mono,
+    color: theme.color.text3,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight
+  }
+}));
+
+export { Kbd };

package/dist/chunk-3TZNDHKO.js

@@ -0,0 +1,187 @@
+import { Screen } from './chunk-EMWAJMAS.js';
+import { IconTile } from './chunk-XBXUBBJZ.js';
+import { Alert } from './chunk-Z7I4ZSO6.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { resolveTextRole } from './chunk-L4D5LHCH.js';
+import { Badge } from './chunk-LGNTP5XA.js';
+import { Input } from './chunk-KXLDK6HB.js';
+import { Spinner } from './chunk-G7H3NX3G.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import * as React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var DEFAULT_LABELS = {
+  or: "or",
+  email: "Email",
+  continue: "Continue",
+  lastUsed: "Last used"
+};
+function SignInScreen({
+  title,
+  description,
+  icon = "lock",
+  providers,
+  lastUsed,
+  defaultEmail = "",
+  pending,
+  error,
+  onEmailSubmit,
+  legal,
+  onCredentialSheet,
+  insets,
+  platform,
+  surface,
+  size = "lg",
+  density = "comfortable",
+  labels: labelsProp,
+  testID
+}) {
+  const labels = useLabels("signInScreen", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("sign-in-screen");
+  const { styles } = useStyles(sheet);
+  const android = isAndroidIdiom(theme, platform);
+  const [email, setEmail] = React.useState(defaultEmail);
+  const busy = pending !== void 0;
+  const compact = density === "compact";
+  const sheetFirst = React.useRef(onCredentialSheet);
+  React.useEffect(() => {
+    if (android) sheetFirst.current?.();
+  }, [android]);
+  const titleType = android ? resolveTextRole(theme, "headlineMedium", true) : { ...resolveTextRole(theme, "title1", false), fontWeight: theme.fontWeight.bold };
+  const labelType = android ? { fontSize: theme.fontSize[14], fontWeight: theme.fontWeight.medium } : { fontSize: theme.fontSize[16], fontWeight: theme.fontWeight.semibold };
+  return /* @__PURE__ */ jsx(Screen, { testID, insets, padding: android ? 16 : 20, children: /* @__PURE__ */ jsxs(View, { style: [styles.stack, compact ? styles.stackCompact : null], children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
+      /* @__PURE__ */ jsx(IconTile, { icon, tone: "accent", size: "xl" }),
+      /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: [styles.title, titleType], children: title }),
+      description ? /* @__PURE__ */ jsx(Text, { style: styles.body, children: description }) : null
+    ] }),
+    error ? /* @__PURE__ */ jsx(Alert, { tone: "danger", title: error }) : null,
+    /* @__PURE__ */ jsx(View, { style: [styles.providers, compact ? styles.providersCompact : null], children: providers.map((p) => {
+      const isPending = pending === p.id;
+      const off = busy && !isPending;
+      return /* @__PURE__ */ jsxs(View, { style: styles.providerSlot, children: [
+        /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            testID: `sign-in-provider-${p.id}`,
+            accessibilityRole: "button",
+            accessibilityLabel: p.label,
+            accessibilityState: { disabled: busy, busy: isPending },
+            disabled: busy,
+            onPress: p.onPress,
+            android_ripple: android ? { color: theme.state.pressed } : void 0,
+            style: ({ pressed }) => [
+              styles.provider,
+              {
+                height: theme.ctl[size],
+                paddingHorizontal: theme.ctl.px[size],
+                borderRadius: theme.ctl.r[size]
+              },
+              !android && pressed ? { backgroundColor: theme.state.pressed } : null,
+              off ? { opacity: theme.state.disabledOpacity } : null
+            ],
+            children: isPending ? /* @__PURE__ */ jsx(Spinner, { size: "md" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(View, { style: styles.mark, children: p.mark }),
+              /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles.providerLabel, labelType], children: p.label })
+            ] })
+          }
+        ),
+        lastUsed === p.id ? /* @__PURE__ */ jsx(View, { style: styles.lastUsed, children: /* @__PURE__ */ jsx(Badge, { variant: "accent", size: "sm", children: labels.lastUsed }) }) : null
+      ] }, p.id);
+    }) }),
+    onEmailSubmit ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(View, { style: styles.divider, accessibilityElementsHidden: true, importantForAccessibility: "no", children: [
+        /* @__PURE__ */ jsx(View, { style: styles.rule }),
+        /* @__PURE__ */ jsx(Text, { style: [styles.or, resolveTextRole(theme, "overline", android)], children: labels.or }),
+        /* @__PURE__ */ jsx(View, { style: styles.rule })
+      ] }),
+      /* @__PURE__ */ jsxs(View, { style: styles.email, children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            size,
+            surface,
+            platform: android ? "android" : "ios",
+            value: email,
+            onChangeText: setEmail,
+            placeholder: labels.email,
+            accessibilityLabel: labels.email,
+            keyboardType: "email-address",
+            autoCapitalize: "none",
+            autoComplete: "email",
+            textContentType: "emailAddress",
+            editable: !busy,
+            onSubmitEditing: () => email && onEmailSubmit(email)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "primary",
+            size,
+            fullWidth: true,
+            loading: pending === "email",
+            disabled: busy && pending !== "email",
+            onPress: () => onEmailSubmit(email),
+            children: labels.continue
+          }
+        )
+      ] })
+    ] }) : null,
+    legal ? /* @__PURE__ */ jsx(Text, { style: styles.legal, children: legal }) : null
+  ] }) });
+}
+var sheet = createStyleSheet((theme) => ({
+  stack: { gap: theme.space[20] },
+  stackCompact: { gap: theme.space[12] },
+  providersCompact: { gap: theme.space[8] },
+  header: { alignItems: "center", gap: theme.space[12] },
+  title: { fontFamily: theme.font.sans, color: theme.color.text, textAlign: "center" },
+  body: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[15],
+    lineHeight: theme.space[20],
+    color: theme.color.text2,
+    textAlign: "center"
+  },
+  providers: { gap: theme.space[12] },
+  providerSlot: { alignItems: "center", gap: theme.space[6] },
+  provider: {
+    alignSelf: "stretch",
+    height: theme.ctl.lg,
+    paddingHorizontal: theme.ctl.px.lg,
+    borderRadius: theme.ctl.r.lg,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.borderStrong,
+    backgroundColor: theme.color.surface,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.space[8],
+    overflow: "hidden"
+  },
+  mark: {
+    width: theme.space[20],
+    height: theme.space[20],
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  providerLabel: { fontFamily: theme.font.sans, color: theme.color.text, flexShrink: 1 },
+  lastUsed: { alignItems: "center" },
+  divider: { flexDirection: "row", alignItems: "center", gap: theme.space[12] },
+  rule: { flex: 1, height: theme.borderWidth.base, backgroundColor: theme.color.border },
+  or: { fontFamily: theme.font.sans, color: theme.color.text2 },
+  email: { gap: theme.space[12] },
+  legal: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    lineHeight: theme.space[16],
+    color: theme.color.text2,
+    textAlign: "center"
+  }
+}));
+
+export { SignInScreen };

package/dist/chunk-43K3BLXV.js

@@ -0,0 +1,9 @@
+// src/lib/field-surface.ts
+function fieldSurfaceFill(theme, surface = "filled") {
+  if (surface === "raised") return theme.color.surface;
+  if (surface === "ghost")
+    return /^#[0-9a-f]{6}$/i.test(theme.color.surface) ? `${theme.color.surface}00` : "transparent";
+  return theme.color.surface2;
+}
+
+export { fieldSurfaceFill };

package/dist/chunk-46ZJIQ2Z.js

@@ -0,0 +1,208 @@
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import 'react';
+import { ScrollView, Pressable, View, Text } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DEFAULT_LABELS = {
+  more: "More"
+};
+function translucent(color) {
+  return /^#[0-9a-f]{6}$/i.test(color) ? `${color}eb` : color;
+}
+function Toolbar({
+  children,
+  accessibilityLabel,
+  overflow = "wrap",
+  density = "comfortable",
+  justify = "start",
+  onMorePress,
+  bar = false,
+  platform,
+  size,
+  orientation = "horizontal",
+  labels: labelsProp
+}) {
+  const labels = useLabels("toolbar", DEFAULT_LABELS, labelsProp);
+  const { styles } = useStyles(sheet, { density, justify });
+  const theme = useLoamTheme("toolbar");
+  const android = isAndroidIdiom(theme, platform);
+  const barStyle = bar ? android ? {
+    minHeight: theme.space[64],
+    paddingHorizontal: theme.space[4],
+    backgroundColor: theme.color.surface2
+  } : {
+    minHeight: theme.ctl.lg,
+    paddingHorizontal: theme.space[8],
+    backgroundColor: translucent(theme.color.surface),
+    borderTopWidth: theme.borderWidth.hair,
+    borderTopColor: theme.color.border
+  } : null;
+  const vertical = orientation === "vertical";
+  const sizeStyle = size ? { minHeight: theme.ctl[size] } : null;
+  const moreHit = bar && android ? theme.space[48] : theme.tapMin;
+  if (overflow === "scroll" || overflow === "menu") {
+    return /* @__PURE__ */ jsxs(
+      ScrollView,
+      {
+        horizontal: !vertical,
+        showsHorizontalScrollIndicator: false,
+        showsVerticalScrollIndicator: false,
+        accessibilityRole: "toolbar",
+        accessibilityLabel,
+        style: [styles.scrollRoot, sizeStyle, barStyle],
+        contentContainerStyle: [styles.scrollContent, vertical ? styles.column : null],
+        children: [
+          children,
+          overflow === "menu" ? /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: labels.more,
+              onPress: onMorePress,
+              hitSlop: 8,
+              android_ripple: android ? { color: theme.state.pressed, borderless: true, radius: moreHit / 2 } : void 0,
+              style: [styles.more, { minWidth: moreHit, minHeight: moreHit }],
+              children: /* @__PURE__ */ jsx(Icon, { name: "more-horizontal", size: theme.icon.md, color: theme.color.text })
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      accessibilityRole: "toolbar",
+      accessibilityLabel,
+      style: [styles.wrapRoot, sizeStyle, vertical ? styles.column : null, barStyle],
+      children
+    }
+  );
+}
+function ToolbarSeparator({ height }) {
+  const theme = useLoamTheme("toolbar");
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      style: {
+        width: theme.borderWidth.hair,
+        height: height ?? theme.icon.sm,
+        backgroundColor: theme.color.borderStrong,
+        marginHorizontal: theme.space[4]
+      }
+    }
+  );
+}
+function ToolbarTextAction({
+  children,
+  onPress,
+  disabled = false,
+  platform,
+  icon
+}) {
+  const theme = useLoamTheme("toolbar");
+  const android = isAndroidIdiom(theme, platform);
+  const ink = android ? theme.color.accentOnSoft : theme.color.accentStrong;
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: children,
+      accessibilityState: { disabled },
+      disabled,
+      onPress,
+      hitSlop: 8,
+      android_ripple: android ? { color: theme.state.pressed } : void 0,
+      style: ({ pressed }) => [
+        {
+          minHeight: android ? theme.ctl.md : theme.ctl.sm,
+          paddingHorizontal: theme.space[12],
+          alignItems: "center",
+          justifyContent: "center",
+          flexDirection: "row",
+          gap: theme.space[8],
+          borderRadius: android ? theme.radius.full : theme.ctl.r.sm,
+          backgroundColor: android ? theme.color.accentSoft : void 0,
+          opacity: disabled ? theme.state.disabledOpacity : 1
+        },
+        pressed && !android && !disabled ? { backgroundColor: theme.state.pressed } : null
+      ],
+      children: [
+        icon ? /* @__PURE__ */ jsx(Icon, { name: icon, size: theme.icon.md, color: ink }) : null,
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: {
+              color: ink,
+              fontSize: theme.fontSize[android ? 14 : 17],
+              fontWeight: android ? theme.fontWeight.medium : theme.fontWeight.semibold
+            },
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  // A wrapping row. `toolbarH` sets the resting height of a single-line strip;
+  // extra lines grow it naturally.
+  wrapRoot: {
+    flexDirection: "row",
+    alignItems: "center",
+    flexWrap: "wrap",
+    minHeight: theme.layout.toolbarH,
+    paddingHorizontal: theme.space.s1,
+    variants: {
+      density: {
+        comfortable: { gap: theme.space.s2, paddingVertical: theme.space.s1 },
+        compact: { gap: theme.space.s1, paddingVertical: 0 }
+      },
+      justify: {
+        start: { justifyContent: "flex-start" },
+        between: { justifyContent: "space-between" }
+      }
+    }
+  },
+  // The scroll container itself must not grow to fill its parent's cross axis,
+  // so `flexGrow: 0` keeps it toolbar-height.
+  scrollRoot: {
+    minHeight: theme.layout.toolbarH,
+    flexGrow: 0
+  },
+  // `justify` has no meaning on a horizontally-scrolling content row (it sizes
+  // to its content), so this style intentionally omits that variant group.
+  scrollContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: theme.space.s1,
+    variants: {
+      density: {
+        comfortable: { gap: theme.space.s2 },
+        compact: { gap: theme.space.s1 }
+      }
+    }
+  },
+  // `orientation="vertical"`: actions stack in a column.
+  column: {
+    flexDirection: "column",
+    alignItems: "flex-start",
+    flexWrap: "nowrap"
+  },
+  // The trailing "More" affordance for `overflow="menu"`. A real ≥44pt target
+  // (`tapMin`), squared off.
+  more: {
+    minWidth: theme.tapMin,
+    minHeight: theme.tapMin,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radius.md
+  }
+}));
+
+export { Toolbar, ToolbarSeparator, ToolbarTextAction };