@btndprojects/loam-ui-native 0.1.0 → 0.2.1

package/dist/{chunk-2GK6PHGE.js → chunk-TY4MTKQJ.js}

@@ -1,10 +1,50 @@
-import { useResolvedMotion } from './chunk-6N33LFQA.js';
-import { Icon } from './chunk-TKVFVF5D.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
+import { useResolvedMotion, springConfig, motionTiming } from './chunk-J64KGCGX.js';
 import * as React from 'react';
 import { View, Pressable, Text, Animated, Easing } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
+var DEFAULT_LABELS = {
+  seek: "Seek",
+  seekValue: (current, total) => `${current} of ${total}`,
+  previous: "Previous track",
+  next: "Next track",
+  play: "Play",
+  pause: "Pause",
+  close: "Close player",
+  artworkPlaceholder: "1:1",
+  expand: (title, meta) => `${title}${meta ? `, ${meta}` : ""}. Expand player`,
+  collapse: "Collapse player",
+  artwork: "Artwork 1:1",
+  position: "Playback position",
+  skipBack: "Skip back",
+  skipForward: "Skip forward"
+};
+function PlayPauseGlyph({ playing, size, color }) {
+  const theme = useLoamTheme("audio-player");
+  const level = useResolvedMotion(void 0, "audio-player");
+  const v = React.useRef(new Animated.Value(playing ? 1 : 0)).current;
+  React.useEffect(() => {
+    const toValue = playing ? 1 : 0;
+    if (level === "none") v.setValue(toValue);
+    else if (level === "reduced") Animated.timing(v, { ...motionTiming(level), toValue, useNativeDriver: true }).start();
+    else Animated.spring(v, { ...springConfig(theme, "fs"), toValue, useNativeDriver: true }).start();
+  }, [playing, level, v, theme]);
+  const layer = (shown) => ({
+    position: "absolute",
+    opacity: shown,
+    transform: level === "full" ? [{ scale: shown.interpolate({ inputRange: [0, 1], outputRange: [0.5, 1] }) }] : []
+  });
+  const pauseShown = v.interpolate({ inputRange: [0, 1], outputRange: [0, 1], extrapolate: "clamp" });
+  const playShown = v.interpolate({ inputRange: [0, 1], outputRange: [1, 0], extrapolate: "clamp" });
+  return /* @__PURE__ */ jsxs(View, { style: { width: size, height: size, alignItems: "center", justifyContent: "center" }, children: [
+    /* @__PURE__ */ jsx(Animated.View, { style: layer(playShown), children: /* @__PURE__ */ jsx(Icon, { name: "play", size, color }) }),
+    /* @__PURE__ */ jsx(Animated.View, { style: layer(pauseShown), children: /* @__PURE__ */ jsx(Icon, { name: "pause", size, color }) })
+  ] });
+}
+var SEEK_STEP = 5;
 function formatTime(seconds) {
   const s = Number.isFinite(seconds) && seconds > 0 ? Math.floor(seconds) : 0;
   return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;
@@ -15,16 +55,18 @@ function AudioMiniBar({
   playing = false,
   progress,
   onPress,
-  onTogglePlay
+  onTogglePlay,
+  labels: labelsProp
 }) {
+  const labels = useLabels("audioPlayer", DEFAULT_LABELS, labelsProp);
   const { styles } = useStyles(sheet);
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("audio-player");
   return /* @__PURE__ */ jsxs(View, { style: styles.mini, children: [
     /* @__PURE__ */ jsxs(
       Pressable,
       {
         accessibilityRole: "button",
-        accessibilityLabel: `${title}${meta ? `, ${meta}` : ""}. Expand player`,
+        accessibilityLabel: labels.expand(title, meta),
         onPress,
         style: styles.miniBody,
         children: [
@@ -40,11 +82,11 @@ function AudioMiniBar({
       Pressable,
       {
         accessibilityRole: "button",
-        accessibilityLabel: playing ? "Pause" : "Play",
+        accessibilityLabel: playing ? labels.pause : labels.play,
         onPress: onTogglePlay,
         hitSlop: Math.max(0, (theme.tapMin - theme.ctl.iconBtn) / 2),
         style: styles.miniTransport,
-        children: /* @__PURE__ */ jsx(Icon, { name: playing ? "pause" : "play", size: 16, color: theme.color.accentInk })
+        children: /* @__PURE__ */ jsx(PlayPauseGlyph, { playing, size: 16, color: theme.color.accentInk })
       }
     ),
     progress != null ? /* @__PURE__ */ jsx(
@@ -62,40 +104,75 @@ function AudioSheet({
   position = 0,
   duration = 0,
   onTogglePlay,
+  onSeek,
   onSkipBack,
   onSkipForward,
-  onCollapse
+  onCollapse,
+  labels: labelsProp
 }) {
+  const labels = useLabels("audioPlayer", DEFAULT_LABELS, labelsProp);
   const { styles } = useStyles(sheet);
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("audio-player");
   const pct = duration > 0 ? Math.min(1, Math.max(0, position / duration)) : 0;
+  const [trackWidth, setTrackWidth] = React.useState(0);
+  const held = React.useRef(new Animated.Value(0)).current;
+  const hold = (to) => {
+    if (theme.reduceMotion) return held.setValue(0);
+    Animated.spring(held, { ...springConfig(theme, "fs"), toValue: to, useNativeDriver: true }).start();
+  };
+  const seekFromX = (x) => {
+    if (!onSeek || trackWidth <= 0 || duration <= 0) return;
+    onSeek(Math.min(duration, Math.max(0, x / trackWidth * duration)));
+  };
   return /* @__PURE__ */ jsxs(View, { style: styles.sheetBody, children: [
     /* @__PURE__ */ jsx(
       Pressable,
       {
         accessibilityRole: "button",
-        accessibilityLabel: "Collapse player",
+        accessibilityLabel: labels.collapse,
         onPress: onCollapse,
         style: styles.grabberHit,
         children: /* @__PURE__ */ jsx(View, { style: styles.grabber })
       }
     ),
-    /* @__PURE__ */ jsx(View, { style: styles.artwork, children: /* @__PURE__ */ jsx(Text, { style: styles.artworkLabel, children: "Artwork 1:1" }) }),
+    /* @__PURE__ */ jsx(View, { style: styles.artwork, children: /* @__PURE__ */ jsx(Text, { style: styles.artworkLabel, children: labels.artwork }) }),
     /* @__PURE__ */ jsxs(View, { style: styles.sheetText, children: [
       /* @__PURE__ */ jsx(Text, { style: styles.sheetTitle, children: title }),
       meta ? /* @__PURE__ */ jsx(Text, { style: styles.sheetMeta, children: meta }) : null
     ] }),
     /* @__PURE__ */ jsxs(View, { style: styles.progressWrap, children: [
       /* @__PURE__ */ jsx(
-        View,
+        Pressable,
         {
-          accessibilityRole: "progressbar",
-          accessibilityLabel: "Playback position",
+          accessibilityRole: onSeek ? "adjustable" : "progressbar",
+          accessibilityLabel: labels.position,
           "aria-valuemin": 0,
           "aria-valuemax": Math.round(duration),
           "aria-valuenow": Math.round(position),
-          style: styles.progressTrack,
-          children: /* @__PURE__ */ jsx(View, { style: [styles.progressFill, { width: `${pct * 100}%` }] })
+          "aria-valuetext": labels.seekValue(formatTime(position), formatTime(duration)),
+          accessibilityActions: onSeek ? [{ name: "increment" }, { name: "decrement" }] : void 0,
+          onAccessibilityAction: (e) => {
+            const delta = e.nativeEvent.actionName === "increment" ? SEEK_STEP : -SEEK_STEP;
+            onSeek?.(Math.min(duration, Math.max(0, position + delta)));
+          },
+          onLayout: (e) => setTrackWidth(e.nativeEvent.layout.width),
+          onPress: onSeek ? (e) => seekFromX(e.nativeEvent.locationX) : void 0,
+          onTouchMove: onSeek ? (e) => seekFromX(e.nativeEvent.locationX) : void 0,
+          onPressIn: onSeek ? () => hold(1) : void 0,
+          onPressOut: onSeek ? () => hold(0) : void 0,
+          hitSlop: onSeek ? theme.space.s4 : void 0,
+          disabled: !onSeek,
+          style: styles.progressHit,
+          children: /* @__PURE__ */ jsx(
+            Animated.View,
+            {
+              style: [
+                styles.progressTrack,
+                { pointerEvents: "none", transform: [{ scaleY: held.interpolate({ inputRange: [0, 1], outputRange: [1, 2] }) }] }
+              ],
+              children: /* @__PURE__ */ jsx(View, { style: [styles.progressFill, { width: `${pct * 100}%` }] })
+            }
+          )
         }
       ),
       /* @__PURE__ */ jsxs(View, { style: styles.timeRow, children: [
@@ -111,7 +188,7 @@ function AudioSheet({
         Pressable,
         {
           accessibilityRole: "button",
-          accessibilityLabel: "Skip back",
+          accessibilityLabel: labels.skipBack,
           onPress: onSkipBack,
           style: styles.transportSecondary,
           children: /* @__PURE__ */ jsx(Icon, { name: "skip-back", size: 22, color: theme.color.text2 })
@@ -121,17 +198,17 @@ function AudioSheet({
         Pressable,
         {
           accessibilityRole: "button",
-          accessibilityLabel: playing ? "Pause" : "Play",
+          accessibilityLabel: playing ? labels.pause : labels.play,
           onPress: onTogglePlay,
           style: styles.transportPrimary,
-          children: /* @__PURE__ */ jsx(Icon, { name: playing ? "pause" : "play", size: 26, color: theme.color.accentInk })
+          children: /* @__PURE__ */ jsx(PlayPauseGlyph, { playing, size: 26, color: theme.color.accentInk })
         }
       ),
       /* @__PURE__ */ jsx(
         Pressable,
         {
           accessibilityRole: "button",
-          accessibilityLabel: "Skip forward",
+          accessibilityLabel: labels.skipForward,
           onPress: onSkipForward,
           style: styles.transportSecondary,
           children: /* @__PURE__ */ jsx(Icon, { name: "skip-forward", size: 22, color: theme.color.text2 })
@@ -148,8 +225,8 @@ function AudioPlayerCollapsible({
   ...rest
 }) {
   const { styles } = useStyles(sheet);
-  const theme = useLoamTheme();
-  const resolvedMotion = useResolvedMotion(motion);
+  const theme = useLoamTheme("audio-player");
+  const resolvedMotion = useResolvedMotion(motion, "audio-player");
   const [ownExpanded, setOwnExpanded] = React.useState(false);
   const isExpanded = expanded ?? ownExpanded;
   const fade = React.useRef(new Animated.Value(isExpanded ? 1 : 0)).current;
@@ -322,6 +399,7 @@ var sheet = createStyleSheet((theme) => ({
     color: theme.color.text3
   },
   progressWrap: { gap: theme.space[6] },
+  progressHit: { justifyContent: "center" },
   progressTrack: {
     height: theme.space[4],
     borderRadius: theme.radius.full,

package/dist/{chunk-AZRX6SAC.js → chunk-U23FYWME.js}

@@ -1,9 +1,14 @@
-import { Icon } from './chunk-TKVFVF5D.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
+import { springConfig } from './chunk-J64KGCGX.js';
 import * as React from 'react';
 import { StyleSheet, Animated, Easing, View, Pressable, Text } from 'react-native';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
+var DEFAULT_LABELS = {
+  closeMenu: "Close menu"
+};
 function foreground(theme, variant) {
   switch (variant) {
     case "primary":
@@ -36,9 +41,12 @@ function Fab({
   position = "bottom-end",
   motion = "full",
   safeAreaBottom = 0,
-  accessibilityLabel
+  bottomOffset = 0,
+  accessibilityLabel,
+  labels: labelsProp
 }) {
-  const theme = useLoamTheme();
+  const labels = useLabels("fab", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("fab");
   const isExtended = typeof label === "string" && label.length > 0;
   const { styles } = useStyles(sheet, {
     variant,
@@ -57,7 +65,7 @@ function Fab({
   const animateOpen = motion === "full" && !reduced;
   const fg = foreground(theme, variant);
   const iconSize = size === "regular" ? theme.icon.lg : theme.icon.md;
-  const bottom = theme.layout.screenPad + safeAreaBottom;
+  const bottom = theme.layout.screenPad + safeAreaBottom + bottomOffset;
   const highContrast = theme.contrast === "more";
   const elevation = size === "regular" ? theme.shadow.lg : theme.shadow.md;
   const edgeStyle = highContrast ? { borderWidth: theme.borderWidth.base, borderColor: highContrastEdge(theme, variant) } : null;
@@ -98,7 +106,7 @@ function Fab({
   const scale = React.useRef(new Animated.Value(1)).current;
   const spring = (to) => {
     if (!animatePress) return;
-    Animated.spring(scale, { toValue: to, useNativeDriver: true, speed: 40, bounciness: 6 }).start();
+    Animated.spring(scale, { ...springConfig(theme, "fs"), toValue: to, useNativeDriver: true }).start();
   };
   const handleMainPress = () => {
     if (hasActions) setOpen((o) => !o);
@@ -125,7 +133,7 @@ function Fab({
       Pressable,
       {
         accessibilityRole: "button",
-        accessibilityLabel: "Close menu",
+        accessibilityLabel: labels.closeMenu,
         onPress: () => setOpen(false),
         style: styles.scrim
       }
@@ -176,7 +184,7 @@ function Fab({
           accessibilityLabel: name,
           accessibilityState: hasActions ? { expanded: open } : void 0,
           onPress: handleMainPress,
-          onPressIn: () => spring(0.97),
+          onPressIn: () => spring(0.96),
           onPressOut: () => spring(1),
           children: /* @__PURE__ */ jsxs(Animated.View, { style: [styles.fab, edgeStyle, elevation, { transform: [{ scale }] }], children: [
             /* @__PURE__ */ jsx(Animated.View, { style: { transform: [{ rotate }] }, children: /* @__PURE__ */ jsx(Icon, { name: icon, size: iconSize, color: fg }) }),

package/dist/{chunk-PZXZJBMP.js → chunk-U5NLHYV6.js}

@@ -1,6 +1,7 @@
-import { expandedProps } from './chunk-RQ3HASCC.js';
+import { expandedProps } from './chunk-W23G6JLF.js';
 import { haptics } from './chunk-NY2U3PBI.js';
-import { Icon } from './chunk-TKVFVF5D.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
 import * as React from 'react';
 import { useWindowDimensions, Animated, Easing, Modal, View, StyleSheet, Pressable, Text, Platform } from 'react-native';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
@@ -54,7 +55,7 @@ function placeContextMenu(anchor, screen, platform) {
   return { left, top, width };
 }
 function useResolvedPlatform(explicit) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("context-menu");
   if (explicit) return explicit;
   if (Platform.OS === "ios") return "ios";
   if (Platform.OS === "android") return "android";
@@ -68,11 +69,13 @@ function ContextMenuOverlay({
   platform,
   lift,
   radius,
-  accessibilityLabel = "Actions",
-  closeLabel = "Close menu",
+  accessibilityLabel,
+  closeLabel,
+  labels: labelsProp,
   motion = "full"
 }) {
-  const theme = useLoamTheme();
+  const labels = useLabels("contextMenu", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("context-menu");
   const os = useResolvedPlatform(platform);
   const ios = os === "ios";
   const { styles } = useStyles(sheet, { platform: os });
@@ -229,7 +232,7 @@ function ContextMenuOverlay({
             {
               style: StyleSheet.absoluteFill,
               accessibilityRole: "button",
-              accessibilityLabel: closeLabel,
+              accessibilityLabel: closeLabel ?? labels.closeMenu,
               onPress: onClose
             }
           )
@@ -238,6 +241,8 @@ function ContextMenuOverlay({
           Animated.View,
           {
             pointerEvents: "none",
+            accessibilityElementsHidden: true,
+            importantForAccessibility: "no-hide-descendants",
             style: [
               styles.lift,
               {
@@ -258,8 +263,9 @@ function ContextMenuOverlay({
         /* @__PURE__ */ jsxs(
           Animated.View,
           {
+            accessibilityViewIsModal: true,
             accessibilityRole: "menu",
-            accessibilityLabel,
+            accessibilityLabel: accessibilityLabel ?? labels.actions,
             style: [
               styles.menu,
               {
@@ -295,7 +301,7 @@ function MenuItem({
   last,
   onClose
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("context-menu");
   const ios = platform === "ios";
   const { styles } = useStyles(sheet, { platform, separated: ios && !last });
   const size = React.useRef({ width: 0, height: 0 });
@@ -395,6 +401,11 @@ function MenuItem({
     }
   );
 }
+var DEFAULT_LABELS = {
+  actions: "Actions",
+  closeMenu: "Close menu",
+  showActions: "Show actions"
+};
 function ContextMenu({
   items,
   children,
@@ -406,9 +417,11 @@ function ContextMenu({
   style,
   onOpen,
   onClose,
-  motion = "full"
+  motion = "full",
+  labels: labelsProp
 }) {
-  const theme = useLoamTheme();
+  const labels = useLabels("contextMenu", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("context-menu");
   const os = useResolvedPlatform(platform);
   const ios = os === "ios";
   const { styles } = useStyles(sheet, { platform: os });
@@ -464,7 +477,7 @@ function ContextMenu({
             accessibilityLabel,
             accessibilityState: { disabled, expanded: open },
             ...expandedProps(open),
-            accessibilityActions: [{ name: "longpress", label: "Show actions" }],
+            accessibilityActions: [{ name: "longpress", label: labels.showActions }],
             onAccessibilityAction: (e) => {
               if (e.nativeEvent.actionName === "longpress") openMenu();
             },
@@ -509,6 +522,7 @@ function ContextMenu({
         lift: children,
         radius: triggerRadius,
         accessibilityLabel,
+        labels: labelsProp,
         motion
       }
     )

package/dist/chunk-UQEN55EY.js

@@ -0,0 +1 @@
+

package/dist/chunk-UQGBTPXH.js

@@ -0,0 +1,218 @@
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
+import { useResolvedMotion, springConfig } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { Animated, Easing, Pressable, Text, View } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var DEFAULT_LABELS = {
+  offline: (queued) => `Offline \xB7 ${queued} change${queued === 1 ? "" : "s"} queued`,
+  syncing: "Back online \xB7 syncing",
+  synced: "All changes synced",
+  retry: "RETRY",
+  badgeQueued: "Queued \u2014 waiting for a connection",
+  badgeSyncing: "Syncing",
+  badgeSynced: "Synced",
+  badgeFailed: "Failed to sync"
+};
+function statusMeta(status, queued, labels) {
+  switch (status) {
+    case "offline":
+      return { icon: "wifi-off", label: labels.offline(queued) };
+    case "syncing":
+      return { icon: "refresh", label: labels.syncing };
+    default:
+      return { icon: "check-circle", label: labels.synced };
+  }
+}
+function ConnectivityBanner({
+  status,
+  queuedCount = 0,
+  onRetry,
+  message,
+  motion = "full",
+  labels: labelsProp
+}) {
+  const labels = useLabels("connectivity", DEFAULT_LABELS, labelsProp);
+  const { styles } = useStyles(sheet, { status });
+  const theme = useLoamTheme("connectivity");
+  const level = useResolvedMotion(motion, "connectivity");
+  const enter = React.useRef(new Animated.Value(level === "full" ? 0 : 1)).current;
+  const first = React.useRef(true);
+  React.useEffect(() => {
+    if (level !== "full") {
+      enter.setValue(1);
+      return;
+    }
+    enter.setValue(first.current ? 0 : 0.6);
+    first.current = false;
+    const run = Animated.spring(enter, {
+      ...springConfig(theme, "ds"),
+      toValue: 1,
+      useNativeDriver: true
+    });
+    run.start();
+    return () => run.stop();
+  }, [status, level, enter, theme]);
+  const dim = React.useRef(new Animated.Value(1)).current;
+  React.useEffect(() => {
+    if (status !== "syncing" || level !== "full" || theme.reduceMotion) {
+      dim.setValue(1);
+      return;
+    }
+    const half = theme.loop.pulse / 2;
+    const easing = Easing.bezier(...theme.easing.inOut);
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(dim, { toValue: 0.4, duration: half, easing, useNativeDriver: true }),
+        Animated.timing(dim, { toValue: 1, duration: half, easing, useNativeDriver: true })
+      ])
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [status, level, theme.reduceMotion, theme.loop.pulse, theme.easing.inOut, dim]);
+  const meta = statusMeta(status, queuedCount, labels);
+  const fg = status === "offline" ? (
+    // The offline banner rests on `surface3`, where neutral `text2` measures
+    // only 4.4:1 (WCAG fail); primary `text` clears 4.5:1.
+    theme.color.text
+  ) : status === "syncing" ? theme.color.warnOnSoft : theme.color.goodOnSoft;
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: onRetry ? "button" : "text",
+      accessibilityLabel: message ?? meta.label,
+      accessibilityState: onRetry ? {} : { disabled: true },
+      onPress: onRetry,
+      style: ({ pressed }) => [styles.banner, pressed && onRetry ? styles.pressed : null],
+      children: /* @__PURE__ */ jsxs(
+        Animated.View,
+        {
+          style: [
+            styles.slide,
+            {
+              opacity: enter,
+              transform: [
+                {
+                  translateY: enter.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [-theme.space[10], 0]
+                  })
+                }
+              ]
+            }
+          ],
+          children: [
+            /* @__PURE__ */ jsx(Animated.View, { style: { opacity: dim }, children: /* @__PURE__ */ jsx(Icon, { name: meta.icon, size: 15, color: fg }) }),
+            /* @__PURE__ */ jsx(Text, { style: [styles.label, { color: fg }], numberOfLines: 1, ellipsizeMode: "tail", children: message ?? meta.label }),
+            status === "offline" && onRetry ? /* @__PURE__ */ jsx(Text, { style: styles.retry, children: labels.retry }) : null
+          ]
+        }
+      )
+    }
+  );
+}
+var SYNC_ICON = {
+  queued: "refresh",
+  syncing: "refresh",
+  synced: "check",
+  failed: "alert-circle"
+};
+function SyncBadge({
+  state,
+  accessibilityLabel,
+  size = 26,
+  labels: labelsProp
+}) {
+  const labels = useLabels("connectivity", DEFAULT_LABELS, labelsProp);
+  const { styles } = useStyles(sheet, { state });
+  const theme = useLoamTheme("connectivity");
+  const meta = {
+    icon: SYNC_ICON[state],
+    label: {
+      queued: labels.badgeQueued,
+      syncing: labels.badgeSyncing,
+      synced: labels.badgeSynced,
+      failed: labels.badgeFailed
+    }[state]
+  };
+  const fg = state === "synced" ? theme.color.goodOnSoft : state === "failed" ? theme.color.dangerOnSoft : theme.color.warnOnSoft;
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      accessibilityRole: "image",
+      accessibilityLabel: accessibilityLabel ?? meta.label,
+      style: [styles.badge, { width: size, height: size }],
+      children: /* @__PURE__ */ jsx(Icon, { name: meta.icon, size: Math.round(size * 0.54), color: fg })
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  banner: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: theme.space[10],
+    paddingHorizontal: theme.space.s4,
+    borderBottomWidth: theme.borderWidth.base,
+    variants: {
+      status: {
+        offline: {
+          backgroundColor: theme.color.surface3,
+          borderBottomColor: theme.color.border
+        },
+        syncing: {
+          backgroundColor: theme.color.warnSoft,
+          borderBottomColor: theme.edge.warn
+        },
+        online: {
+          backgroundColor: theme.color.goodSoft,
+          borderBottomColor: theme.edge.good
+        }
+      },
+      state: {}
+    }
+  },
+  slide: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[9],
+    variants: { status: {}, state: {} }
+  },
+  // `minWidth: 0` lets the copy truncate rather than push `RETRY` off the edge.
+  label: {
+    flex: 1,
+    minWidth: 0,
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.type.caption1.fontSize,
+    variants: { status: {}, state: {} }
+  },
+  retry: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.fontSize[10],
+    // Shown only on the offline banner's `surface3` fill, where `text3` is
+    // 4.16:1 (WCAG fail); primary `text` clears 4.5:1.
+    color: theme.color.text,
+    variants: { status: {}, state: {} }
+  },
+  badge: {
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.base,
+    variants: {
+      state: {
+        queued: { backgroundColor: theme.color.warnSoft, borderColor: theme.edge.warn },
+        syncing: { backgroundColor: theme.color.warnSoft, borderColor: theme.edge.warn },
+        synced: { backgroundColor: theme.color.goodSoft, borderColor: theme.edge.good },
+        failed: { backgroundColor: theme.color.dangerSoft, borderColor: theme.edge.danger }
+      },
+      status: {}
+    }
+  },
+  pressed: { opacity: theme.state.pressedOpacity }
+}));
+
+export { ConnectivityBanner, SyncBadge };