@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-SPUK7JD4.js

@@ -0,0 +1,238 @@
+import { MetricDelta } from './chunk-N7AX4OA4.js';
+import { resolveTextRole } from './chunk-L4D5LHCH.js';
+import { NumberRoll } from './chunk-IMMALLRU.js';
+import { Skeleton } from './chunk-YJ5PXOX3.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels, useLoamLocale } 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 DIRECTION_WORD = {
+  up: "up",
+  down: "down",
+  flat: "no change"
+};
+function direction(item) {
+  if (item.deltaDirection) return item.deltaDirection;
+  const n = typeof item.delta === "number" ? item.delta : Number.parseFloat(String(item.delta).replace("\u2212", "-"));
+  return n > 0 ? "up" : n < 0 ? "down" : "flat";
+}
+var DEFAULT_LABELS = { error: "Couldn\u2019t load", retry: "Retry" };
+function MetricStrip({
+  items,
+  columns = 2,
+  value,
+  onValueChange,
+  platform,
+  size = "md",
+  roll = false,
+  motion,
+  labels: labelsProp,
+  variant = "outline",
+  elevation = "none",
+  padding,
+  interactive: interactiveProp,
+  format,
+  deltaFormat,
+  align = "start",
+  testID
+}) {
+  const labels = useLabels("metricStrip", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("metric-strip");
+  const { styles } = useStyles(sheet);
+  const android = isAndroidIdiom(theme, platform);
+  const interactive = interactiveProp ?? onValueChange !== void 0;
+  const locale = useLoamLocale();
+  const chosen = value ?? items[0]?.id;
+  const [width, setWidth] = React.useState();
+  const labelType = android ? resolveTextRole(theme, "labelMedium", true) : { ...resolveTextRole(theme, "footnote", false), fontWeight: theme.fontWeight.semibold };
+  const small = size === "sm";
+  const valueType = android ? resolveTextRole(theme, small ? "titleLarge" : "headlineSmall", true) : {
+    ...resolveTextRole(theme, small ? "title3" : "title1", false),
+    fontWeight: theme.fontWeight.semibold
+  };
+  const captionType = resolveTextRole(theme, android ? "bodySmall" : "caption1", android);
+  const valueSize = valueType.fontSize ?? theme.fontSize[28];
+  const cellWidth = width !== void 0 ? width / columns : void 0;
+  const onLayout = (e) => setWidth(e.nativeEvent.layout.width);
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      testID,
+      style: [
+        styles.card,
+        variant === "filled" ? { backgroundColor: theme.color.surface2 } : null,
+        variant === "ghost" ? { borderWidth: 0, backgroundColor: "transparent" } : null,
+        elevation === "none" ? null : theme.shadow[elevation]
+      ],
+      accessibilityRole: interactive ? "tablist" : void 0,
+      children: /* @__PURE__ */ jsx(View, { style: styles.grid, onLayout, children: items.map((item) => {
+        const selected = interactive && item.id === chosen;
+        const spoken = [
+          item.label,
+          item.loading ? void 0 : item.error ? labels.error : `${item.value ?? ""}${item.unit ?? ""}`,
+          item.loading || item.error || item.delta === void 0 || item.delta === "" ? void 0 : `${DIRECTION_WORD[direction(item)]} ${String(item.delta).replace(/^[+−-]/, "")}`,
+          item.caption
+        ].filter(Boolean).join(", ");
+        const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: [
+                styles.label,
+                labelType,
+                selected ? { color: theme.color.accentStrong } : null
+              ],
+              children: item.label
+            }
+          ),
+          item.loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(View, { style: styles.boneValue, children: /* @__PURE__ */ jsx(Skeleton, { variant: "rect", height: Math.round(valueSize * 0.8), decorative: true }) }),
+            /* @__PURE__ */ jsx(View, { style: styles.boneDelta, children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", height: 10, decorative: true }) })
+          ] }) : item.error ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Text, { style: [styles.value, valueType, { color: theme.color.text3 }], children: "\u2014" }),
+            /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
+              /* @__PURE__ */ jsx(Text, { style: [styles.caption, captionType, { color: theme.color.text2 }], children: labels.error }),
+              item.onRetry ? /* @__PURE__ */ jsx(
+                Pressable,
+                {
+                  accessibilityRole: "button",
+                  onPress: item.onRetry,
+                  hitSlop: theme.space[12],
+                  children: /* @__PURE__ */ jsx(Text, { style: [styles.caption, captionType, styles.retry], children: labels.retry })
+                }
+              ) : null
+            ] })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            roll && typeof item.value === "number" ? (
+              // A rolling figure is a View, so it sits beside the unit rather than inside its Text.
+              /* @__PURE__ */ jsxs(View, { style: styles.rollRow, children: [
+                /* @__PURE__ */ jsx(
+                  NumberRoll,
+                  {
+                    value: item.value,
+                    format,
+                    textStyle: [styles.value, valueType],
+                    motion
+                  }
+                ),
+                item.unit !== void 0 ? /* @__PURE__ */ jsxs(Text, { style: [styles.unit, { fontSize: Math.round(valueSize * 0.5) }], children: [
+                  " ",
+                  item.unit
+                ] }) : null
+              ] })
+            ) : /* @__PURE__ */ jsxs(Text, { style: [styles.value, valueType], numberOfLines: 1, children: [
+              format && typeof item.value === "number" ? item.value.toLocaleString(locale, format) : item.value,
+              item.unit !== void 0 ? /* @__PURE__ */ jsxs(Text, { style: [styles.unit, { fontSize: Math.round(valueSize * 0.5) }], children: [
+                " ",
+                item.unit
+              ] }) : null
+            ] }),
+            item.delta !== void 0 || item.caption !== void 0 ? /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
+              item.delta !== void 0 && item.delta !== "" ? /* @__PURE__ */ jsx(
+                MetricDelta,
+                {
+                  delta: deltaFormat && typeof item.delta === "number" ? `${item.delta > 0 ? "+" : item.delta < 0 ? "\u2212" : ""}${Math.abs(item.delta).toLocaleString(locale, deltaFormat)}` : item.delta,
+                  deltaDirection: item.deltaDirection ?? direction(item),
+                  invert: item.invert,
+                  size: "sm"
+                }
+              ) : null,
+              item.caption !== void 0 ? /* @__PURE__ */ jsx(Text, { style: [styles.caption, captionType], children: item.caption }) : null
+            ] }) : null
+          ] })
+        ] });
+        const cellStyle = [
+          styles.cell,
+          small ? {
+            paddingVertical: theme.space[12],
+            paddingHorizontal: theme.space[16],
+            gap: theme.space[6]
+          } : null,
+          padding === "sm" ? {
+            paddingVertical: theme.space[8],
+            paddingHorizontal: theme.space[12],
+            gap: theme.space[4]
+          } : padding === "md" ? {
+            paddingVertical: theme.space[16],
+            paddingHorizontal: theme.space[20],
+            gap: theme.space[8]
+          } : padding === "lg" ? {
+            paddingVertical: theme.space[24],
+            paddingHorizontal: theme.space[28],
+            gap: theme.space[12]
+          } : null,
+          align === "center" ? { alignItems: "center" } : align === "end" ? { alignItems: "flex-end" } : null,
+          cellWidth !== void 0 ? { width: cellWidth } : { flexBasis: `${100 / columns}%` },
+          selected ? { backgroundColor: theme.state.selected } : null
+        ];
+        if (interactive) {
+          return /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "tab",
+              accessibilityState: { selected },
+              "aria-selected": selected,
+              accessibilityLabel: spoken,
+              onPress: () => onValueChange?.(item.id),
+              android_ripple: android ? { color: theme.state.pressed } : void 0,
+              style: ({ pressed }) => [
+                cellStyle,
+                !android && pressed && !selected ? { backgroundColor: theme.state.pressed } : null
+              ],
+              children: body
+            },
+            item.id
+          );
+        }
+        return /* @__PURE__ */ jsx(View, { accessible: true, accessibilityLabel: spoken, style: cellStyle, children: body }, item.id);
+      }) })
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  card: {
+    overflow: "hidden",
+    borderRadius: theme.radius.lg,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface
+  },
+  // Pulled 1 past the end and bottom so the outer cell rules fall under the clip.
+  grid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    marginEnd: -1,
+    marginBottom: -1
+  },
+  cell: {
+    gap: theme.space[8],
+    paddingVertical: theme.space[16],
+    paddingHorizontal: theme.space[20],
+    borderEndWidth: theme.borderWidth.base,
+    borderBottomWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    minWidth: 0
+  },
+  label: { fontFamily: theme.font.sans, color: theme.color.text2 },
+  value: {
+    fontFamily: theme.font.sans,
+    color: theme.color.text,
+    fontVariant: ["tabular-nums"]
+  },
+  unit: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.medium,
+    color: theme.color.text2
+  },
+  rollRow: { flexDirection: "row", alignItems: "baseline" },
+  boneValue: { width: "70%" },
+  boneDelta: { width: "45%" },
+  row: { flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: theme.space[6] },
+  caption: { fontFamily: theme.font.sans, color: theme.color.text3 },
+  retry: { color: theme.color.accentStrong, fontWeight: theme.fontWeight.semibold }
+}));
+
+export { MetricStrip };

package/dist/chunk-SWXV2K5N.js

@@ -0,0 +1,434 @@
+import { Sheet } from './chunk-B7JZ3N5G.js';
+import { DialogTitle, DialogFooter, Dialog } from './chunk-AQ5FIG74.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { Badge } from './chunk-LGNTP5XA.js';
+import { Skeleton } from './chunk-YJ5PXOX3.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { springConfig, motionTiming } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { Animated, Text, Pressable, View, LayoutAnimation } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var DEFAULT_LABELS = {
+  next: "Next announcement",
+  dismiss: "Dismiss",
+  primary: "See what changed",
+  secondary: "Later"
+};
+function AnnouncementBar({
+  tone = "info",
+  children,
+  items,
+  eyebrow,
+  rotateInterval = 6e3,
+  nextLabel,
+  announcementId,
+  version,
+  icon,
+  actionLabel,
+  onAction,
+  onDismiss,
+  dismissLabel,
+  wrap = false,
+  motion = "full",
+  variant,
+  size = "md",
+  labels: labelsProp
+}) {
+  const labels = useLabels("announcement", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("announcement");
+  const { styles } = useStyles(sheet);
+  const slide = React.useRef(new Animated.Value(0)).current;
+  const animate = motion === "full" && !theme.reduceMotion;
+  const count = items?.length ?? 0;
+  const rotating = children === void 0 && count > 1;
+  const [index, setIndex] = React.useState(0);
+  const [held, setHeld] = React.useState(false);
+  const next = () => setIndex((i) => (i + 1) % Math.max(1, count));
+  React.useEffect(() => {
+    if (!rotating || !animate || held) return void 0;
+    const id = setTimeout(next, rotateInterval);
+    return () => clearTimeout(id);
+  }, [rotating, animate, held, index, rotateInterval, count]);
+  const body = children ?? items?.[Math.min(index, Math.max(0, count - 1))];
+  React.useEffect(() => {
+    if (animate) {
+      Animated.spring(slide, {
+        ...springConfig(theme, "ds"),
+        toValue: 1,
+        useNativeDriver: true
+      }).start();
+    } else {
+      Animated.timing(slide, {
+        ...motionTiming(motion === "none" ? "none" : "reduced"),
+        toValue: 1,
+        useNativeDriver: true
+      }).start();
+    }
+  }, [slide, animate]);
+  const dismiss = () => {
+    if (animate) {
+      LayoutAnimation.configureNext({
+        duration: theme.spring.ds.duration,
+        update: { type: LayoutAnimation.Types.spring, springDamping: theme.spring.ds.dampingRatio },
+        delete: {
+          type: LayoutAnimation.Types.easeOut,
+          property: LayoutAnimation.Properties.opacity
+        }
+      });
+    }
+    onDismiss?.({ id: announcementId, version });
+  };
+  const actionSlopY = Math.max(
+    theme.space[10],
+    Math.round((theme.tapMin - theme.type.footnote.lineHeight) / 2)
+  );
+  const dismissSlop = Math.max(theme.space[10], Math.round((theme.tapMin - theme.ctl.xs) / 2));
+  const ink = tone === "info" ? theme.color.infoOnSoft : tone === "warn" ? theme.color.warnOnSoft : tone === "danger" ? theme.color.dangerOnSoft : tone === "good" ? theme.color.goodOnSoft : theme.color.accentOnSoft;
+  const fills = {
+    info: {
+      fill: theme.color.info,
+      ink: theme.color.infoInk,
+      soft: theme.color.infoSoft,
+      edge: theme.color.info
+    },
+    warn: {
+      fill: theme.color.warn,
+      ink: theme.color.warnInk,
+      soft: theme.color.warnSoft,
+      edge: theme.color.warn
+    },
+    danger: {
+      fill: theme.color.danger,
+      ink: theme.color.dangerInk,
+      soft: theme.color.dangerSoft,
+      edge: theme.color.danger
+    },
+    good: {
+      fill: theme.color.good,
+      ink: theme.color.goodInk,
+      soft: theme.color.goodSoft,
+      edge: theme.color.good
+    },
+    accent: {
+      fill: theme.color.accent,
+      ink: theme.color.accentInk,
+      soft: theme.color.accentSoft,
+      edge: theme.color.accent
+    }
+  }[tone];
+  const solid = variant === "solid";
+  const emphasis = variant === "solid" ? { backgroundColor: fills.fill, borderColor: fills.fill } : variant === "soft" ? { backgroundColor: fills.soft, borderColor: fills.soft } : variant === "outline" ? { borderColor: fills.edge } : null;
+  const barInk = solid ? fills.ink : void 0;
+  const defaultIcon = tone === "warn" ? "alert-triangle" : tone === "danger" ? "alert-circle" : tone === "good" ? "check-circle" : tone === "accent" ? "star" : "info";
+  return /* @__PURE__ */ jsxs(
+    Animated.View,
+    {
+      accessibilityRole: tone === "warn" || tone === "danger" ? "alert" : "text",
+      accessibilityLiveRegion: rotating && animate ? "none" : "polite",
+      onTouchStart: rotating ? () => setHeld(true) : void 0,
+      onTouchEnd: rotating ? () => setHeld(false) : void 0,
+      onTouchCancel: rotating ? () => setHeld(false) : void 0,
+      style: [
+        styles.bar,
+        size === "compact" ? styles.barCompact : null,
+        emphasis,
+        animate ? {
+          transform: [
+            {
+              translateY: slide.interpolate({
+                inputRange: [0, 1],
+                outputRange: [-theme.space[40], 0]
+              })
+            }
+          ]
+        } : { opacity: slide }
+      ],
+      children: [
+        /* @__PURE__ */ jsx(Icon, { name: icon ?? defaultIcon, size: theme.icon.sm, color: barInk ?? ink }),
+        eyebrow ? /* @__PURE__ */ jsx(Badge, { variant: "accent", size: "sm", children: eyebrow }) : null,
+        /* @__PURE__ */ jsx(Text, { numberOfLines: wrap ? 2 : 1, style: [styles.text, barInk ? { color: barInk } : null], children: body }),
+        rotating && !animate ? /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: nextLabel ?? labels.next,
+            onPress: next,
+            hitSlop: dismissSlop,
+            style: ({ pressed }) => [styles.counter, pressed ? styles.pressed : null],
+            children: /* @__PURE__ */ jsxs(Text, { style: styles.counterText, children: [
+              index + 1,
+              "/",
+              count
+            ] })
+          }
+        ) : null,
+        actionLabel && onAction ? /* @__PURE__ */ jsxs(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: actionLabel,
+            onPress: onAction,
+            hitSlop: {
+              top: actionSlopY,
+              bottom: actionSlopY,
+              left: theme.space[10],
+              right: theme.space[10]
+            },
+            style: ({ pressed }) => [styles.action, pressed ? styles.pressed : null],
+            children: [
+              /* @__PURE__ */ jsx(Text, { style: [styles.actionLabel, barInk ? { color: barInk } : null], children: actionLabel }),
+              /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  name: "chevron-right",
+                  size: theme.icon.xs,
+                  color: barInk ?? theme.color.accentStrong
+                }
+              )
+            ]
+          }
+        ) : null,
+        onDismiss ? /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: dismissLabel ?? labels.dismiss,
+            onPress: dismiss,
+            hitSlop: dismissSlop,
+            style: ({ pressed }) => [styles.iconButton, pressed ? styles.pressed : null],
+            children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.icon.xs, color: barInk ?? theme.color.text3 })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function AnnouncementHighlights({
+  items
+}) {
+  const theme = useLoamTheme("announcement");
+  const { styles } = useStyles(sheet);
+  if (!items.length) return null;
+  return /* @__PURE__ */ jsx(View, { style: styles.highlights, children: items.map((h) => /* @__PURE__ */ jsxs(View, { style: styles.highlightRow, children: [
+    /* @__PURE__ */ jsx(Icon, { name: "check", size: theme.icon.xs, color: theme.color.good }),
+    /* @__PURE__ */ jsx(Text, { style: styles.highlightText, children: h })
+  ] }, h)) });
+}
+function AnnouncementModal({
+  open,
+  onOpenChange,
+  kicker,
+  title,
+  body,
+  media,
+  highlights,
+  primaryLabel,
+  onPrimary,
+  secondaryLabel,
+  onSecondary,
+  modal = true,
+  motion = "full",
+  size,
+  labels: labelsProp,
+  presentation = "anchored",
+  loading = false,
+  tone
+}) {
+  const labels = useLabels("announcement", DEFAULT_LABELS, labelsProp);
+  const { styles, theme } = useStyles(sheet);
+  const toneInk = tone ? {
+    info: theme.color.infoOnSoft,
+    warn: theme.color.warnOnSoft,
+    danger: theme.color.dangerOnSoft,
+    good: theme.color.goodOnSoft,
+    accent: theme.color.accentOnSoft
+  }[tone] : void 0;
+  const toneEdge = tone ? {
+    info: theme.edge.info,
+    warn: theme.edge.warn,
+    danger: theme.edge.danger,
+    good: theme.edge.good,
+    accent: theme.edge.accent
+  }[tone] : void 0;
+  const asSheet = presentation !== "anchored" && modal;
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.modalBody, "aria-busy": loading || void 0, children: [
+      kicker ? /* @__PURE__ */ jsx(Text, { style: [styles.kicker, toneInk ? { color: toneInk } : null], children: kicker }) : null,
+      asSheet ? null : /* @__PURE__ */ jsx(DialogTitle, { children: title }),
+      media,
+      loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Skeleton, { variant: "text", decorative: true }),
+        /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: theme.space[160], decorative: true })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        body ? /* @__PURE__ */ jsx(Text, { style: styles.modalText, children: body }) : null,
+        highlights ? /* @__PURE__ */ jsx(AnnouncementHighlights, { items: highlights }) : null
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(DialogFooter, { children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "lg",
+          variant: "outline",
+          disabled: loading,
+          onPress: () => {
+            onSecondary?.();
+            onOpenChange(false);
+          },
+          children: secondaryLabel ?? labels.secondary
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "lg",
+          variant: "primary",
+          disabled: loading,
+          onPress: () => {
+            onPrimary?.();
+            onOpenChange(false);
+          },
+          children: primaryLabel ?? labels.primary
+        }
+      )
+    ] })
+  ] });
+  if (!modal) {
+    return open ? /* @__PURE__ */ jsx(
+      View,
+      {
+        accessibilityLabel: title,
+        style: [
+          styles.inlineCard,
+          size ? { maxWidth: theme.dialog[size] } : null,
+          toneEdge ? { borderColor: toneEdge } : null
+        ],
+        children: content
+      }
+    ) : /* @__PURE__ */ jsx(Fragment, {});
+  }
+  if (asSheet) {
+    return /* @__PURE__ */ jsx(
+      Sheet,
+      {
+        open,
+        onOpenChange,
+        title,
+        ...presentation === "full" ? { detents: ["full"], initialDetent: "full" } : {},
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open,
+      onClose: () => onOpenChange(false),
+      accessibilityLabel: title,
+      motion,
+      size,
+      children: content
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  bar: {
+    flexDirection: "row",
+    alignItems: "center",
+    // px 16 py 8, gap 12: the text lines up with the 16 page gutter (Final 03).
+    gap: theme.space[12],
+    paddingStart: theme.space[16],
+    paddingEnd: theme.space[8],
+    paddingVertical: theme.space[8],
+    // Final 03 (latest over Refinement 06's full-bleed tint): a surface bar,
+    // 1 px border, r 12. The tone lives on the leading icon only.
+    borderWidth: theme.borderWidth.thin,
+    borderColor: theme.color.border,
+    borderRadius: theme.radius.md,
+    backgroundColor: theme.color.surface
+  },
+  barCompact: {
+    paddingStart: theme.space[12],
+    paddingVertical: theme.space[4]
+  },
+  text: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.medium,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text
+  },
+  pressed: { opacity: theme.state.pressedOpacity },
+  counter: { alignItems: "center", justifyContent: "center", paddingHorizontal: theme.space[2] },
+  counterText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    fontVariant: ["tabular-nums"],
+    color: theme.color.text2
+  },
+  action: { flexDirection: "row", alignItems: "center", gap: theme.space[2] },
+  // The OS button weight (Final 03): 600 on iOS, 500 on Android — not 800.
+  actionLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.platform === "iOS" ? theme.fontWeight.semibold : theme.fontWeight.medium,
+    fontSize: theme.type.footnote.fontSize,
+    color: theme.color.accentStrong
+  },
+  iconButton: {
+    width: theme.ctl.xs,
+    height: theme.ctl.xs,
+    alignItems: "center",
+    justifyContent: "center",
+    // A ghost icon Button xs: 26, r 8 — not a round close.
+    borderRadius: theme.radius.sm
+  },
+  highlights: {
+    gap: theme.space[8],
+    padding: theme.space[12],
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.thin,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface2
+  },
+  highlightRow: { flexDirection: "row", alignItems: "flex-start", gap: theme.space[9] },
+  highlightText: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.lineHeight,
+    color: theme.color.text2
+  },
+  inlineCard: {
+    width: "100%",
+    maxWidth: theme.panel.xl,
+    alignSelf: "center",
+    gap: theme.space.s3,
+    // Card: r 16, 1px border, sh-sm (Final 03).
+    padding: theme.space[20],
+    borderRadius: theme.radius.lg,
+    borderWidth: theme.borderWidth.thin,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface,
+    ...theme.shadow.sm
+  },
+  modalBody: { gap: theme.space[12] },
+  modalText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.body.fontSize,
+    lineHeight: theme.type.body.lineHeight,
+    color: theme.color.text2
+  },
+  // The section overline (P2), in text3.
+  kicker: {
+    fontFamily: theme.font.sans,
+    ...theme.type.overline,
+    letterSpacing: theme.tracking.caps,
+    color: theme.color.text3
+  }
+}));
+
+export { AnnouncementBar, AnnouncementHighlights, AnnouncementModal };