@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-JXRTD5RI.js

@@ -0,0 +1,414 @@
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { useResolvedMotion, springConfig } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { Platform, AccessibilityInfo, Animated, Easing, Text, Pressable, View } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsx, Fragment, 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",
+  dismiss: "Dismiss",
+  badgeCount: (count) => `${count} pending`
+};
+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,
+  platform,
+  variant = "soft",
+  size = "md",
+  dismissible = false,
+  onDismiss,
+  icon,
+  shape = "strip"
+}) {
+  const labels = useLabels("connectivity", DEFAULT_LABELS, labelsProp);
+  const { styles } = useStyles(sheet, { status });
+  const theme = useLoamTheme("connectivity");
+  const level = useResolvedMotion(motion, "connectivity");
+  const android = isAndroidIdiom(theme, platform);
+  const [dismissed, setDismissed] = React.useState(false);
+  React.useEffect(() => setDismissed(false), [status]);
+  const spoken = message ?? statusMeta(status, queuedCount, labels).label;
+  const lastStatus = React.useRef(status);
+  React.useEffect(() => {
+    if (lastStatus.current === status) return;
+    lastStatus.current = status;
+    if (Platform.OS === "ios" || Platform.OS === "android")
+      AccessibilityInfo.announceForAccessibility(spoken);
+  }, [status, spoken]);
+  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" ? theme.color.warnOnSoft : status === "syncing" ? theme.color.text : theme.color.goodOnSoft;
+  const solidFill = status === "offline" ? { fill: theme.color.warn, ink: theme.color.warnInk } : status === "syncing" ? { fill: theme.color.text, ink: theme.color.surface } : { fill: theme.color.good, ink: theme.color.goodInk };
+  const edge = status === "offline" ? theme.edge.warn : status === "syncing" ? theme.edge.neutral : theme.edge.good;
+  const emphasis = variant === "solid" ? { backgroundColor: solidFill.fill, borderBottomColor: solidFill.fill } : variant === "outline" ? { backgroundColor: theme.color.surface, borderBottomColor: edge } : null;
+  const ink = variant === "solid" ? solidFill.ink : fg;
+  const iconColor = variant === "solid" ? ink : status === "syncing" ? theme.status.working : fg;
+  if (dismissible && dismissed) return /* @__PURE__ */ jsx(Fragment, {});
+  const body = /* @__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: icon ?? meta.icon, size: theme.space[16], color: iconColor }) }),
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            style: [
+              styles.label,
+              {
+                color: ink,
+                fontWeight: android ? theme.fontWeight.medium : theme.fontWeight.semibold
+              }
+            ],
+            numberOfLines: 1,
+            ellipsizeMode: "tail",
+            children: message ?? meta.label
+          }
+        ),
+        status === "offline" && onRetry ? /* @__PURE__ */ jsx(Text, { style: [styles.retry, { color: ink }], children: labels.retry }) : null
+      ]
+    }
+  );
+  if (shape !== "strip") {
+    const tint = status === "offline" ? theme.color.warnSoft : status === "syncing" ? theme.color.surface2 : theme.color.goodSoft;
+    const fill = variant === "solid" ? solidFill.fill : variant === "outline" ? theme.color.surface : tint;
+    const compactLook = [
+      shape === "glyph" ? styles.glyph : styles.pill,
+      { backgroundColor: fill },
+      variant === "outline" ? { borderWidth: theme.borderWidth.base, borderColor: edge } : null
+    ];
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: onRetry ? "button" : shape === "glyph" ? "image" : "text",
+        accessibilityLabel: message ?? meta.label,
+        accessibilityState: onRetry ? {} : { disabled: true },
+        onPress: onRetry,
+        style: ({ pressed }) => [...compactLook, pressed && onRetry ? styles.pressed : null],
+        children: /* @__PURE__ */ jsx(Animated.View, { style: { opacity: enter }, children: /* @__PURE__ */ jsxs(Animated.View, { style: styles.pillRow, children: [
+          shape === "glyph" || status === "syncing" ? /* @__PURE__ */ jsx(Animated.View, { style: { opacity: dim }, children: /* @__PURE__ */ jsx(Icon, { name: icon ?? meta.icon, size: theme.space[16], color: iconColor }) }) : null,
+          shape === "pill" ? /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: [
+                styles.pillLabel,
+                {
+                  color: ink,
+                  fontWeight: android ? theme.fontWeight.medium : theme.fontWeight.semibold
+                }
+              ],
+              numberOfLines: 1,
+              children: message ?? meta.label
+            }
+          ) : null
+        ] }) })
+      }
+    );
+  }
+  const strip = [styles.banner, size === "compact" ? styles.bannerCompact : null, emphasis];
+  if (!dismissible) {
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: onRetry ? "button" : "text",
+        accessibilityLabel: message ?? meta.label,
+        accessibilityState: onRetry ? {} : { disabled: true },
+        onPress: onRetry,
+        style: ({ pressed }) => [...strip, pressed && onRetry ? styles.pressed : null],
+        children: body
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(View, { style: strip, children: [
+    /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: onRetry ? "button" : "text",
+        accessibilityLabel: message ?? meta.label,
+        accessibilityState: onRetry ? {} : { disabled: true },
+        onPress: onRetry,
+        style: ({ pressed }) => [styles.grow, pressed && onRetry ? styles.pressed : null],
+        children: body
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: labels.dismiss,
+        hitSlop: theme.space[8],
+        onPress: () => {
+          setDismissed(true);
+          onDismiss?.();
+        },
+        style: ({ pressed }) => [styles.close, pressed ? styles.pressed : null],
+        children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.space[16], color: ink })
+      }
+    )
+  ] });
+}
+var SYNC_ICON = {
+  queued: "refresh",
+  syncing: "refresh",
+  synced: "check",
+  failed: "alert-circle"
+};
+function SyncBadge({
+  state,
+  accessibilityLabel,
+  size = 40,
+  variant = "soft",
+  count,
+  motion = "full",
+  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 level = useResolvedMotion(motion, "connectivity");
+  const turn = React.useRef(new Animated.Value(0)).current;
+  React.useEffect(() => {
+    if (state !== "syncing" || level !== "full" || theme.reduceMotion) {
+      turn.setValue(0);
+      return;
+    }
+    const loop = Animated.loop(
+      Animated.timing(turn, {
+        toValue: 1,
+        duration: theme.loop.spin,
+        easing: Easing.linear,
+        useNativeDriver: true
+      })
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [state, level, theme.reduceMotion, theme.loop.spin, turn]);
+  const fg = state === "synced" ? theme.color.goodOnSoft : state === "failed" ? theme.color.dangerOnSoft : theme.color.warnOnSoft;
+  const solid = state === "synced" ? { fill: theme.color.good, ink: theme.color.goodInk, edge: theme.edge.good } : state === "failed" ? { fill: theme.color.danger, ink: theme.color.dangerInk, edge: theme.edge.danger } : { fill: theme.color.warn, ink: theme.color.warnInk, edge: theme.edge.warn };
+  const emphasis = variant === "solid" ? { backgroundColor: solid.fill, borderColor: solid.fill } : variant === "outline" ? { backgroundColor: theme.color.surface, borderColor: solid.edge } : null;
+  const glyphColor = variant === "solid" ? solid.ink : fg;
+  const label = accessibilityLabel ?? meta.label;
+  const hasCount = count !== void 0 && count > 0;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessibilityRole: "image",
+      accessibilityLabel: hasCount && !accessibilityLabel ? `${label} \xB7 ${labels.badgeCount(count)}` : label,
+      style: [styles.badge, emphasis, { width: size, height: size }],
+      children: [
+        /* @__PURE__ */ jsx(
+          Animated.View,
+          {
+            style: state === "syncing" ? {
+              transform: [
+                {
+                  rotate: turn.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: ["0deg", "360deg"]
+                  })
+                }
+              ]
+            } : void 0,
+            children: /* @__PURE__ */ jsx(Icon, { name: meta.icon, size: Math.round(size * 0.54), color: glyphColor })
+          }
+        ),
+        hasCount ? /* @__PURE__ */ jsx(View, { style: [styles.countPill, { backgroundColor: solid.fill }], children: /* @__PURE__ */ jsx(Text, { style: [styles.countText, { color: solid.ink }], children: count > 99 ? "99+" : count }) }) : null
+      ]
+    }
+  );
+}
+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.warnSoft,
+          borderBottomColor: theme.edge.warn
+        },
+        syncing: {
+          backgroundColor: theme.color.surface2,
+          borderBottomColor: theme.edge.neutral
+        },
+        online: {
+          backgroundColor: theme.color.goodSoft,
+          borderBottomColor: theme.edge.good
+        }
+      },
+      state: {}
+    }
+  },
+  pill: {
+    alignSelf: "flex-start",
+    borderRadius: theme.radius.full,
+    paddingVertical: theme.space[4],
+    paddingHorizontal: theme.space[10]
+  },
+  glyph: {
+    alignSelf: "flex-start",
+    alignItems: "center",
+    justifyContent: "center",
+    width: theme.space[32],
+    height: theme.space[32],
+    borderRadius: theme.radius.full
+  },
+  pillRow: { flexDirection: "row", alignItems: "center", gap: theme.space[4] },
+  pillLabel: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight
+  },
+  bannerCompact: { paddingVertical: theme.space[4] },
+  slide: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    // The status row is 24 high (Final 03).
+    minHeight: theme.space[24],
+    gap: theme.space[8],
+    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,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    variants: { status: {}, state: {} }
+  },
+  retry: {
+    // The count style (mono 12 / 500 tabular) — mono 10 was under the floor.
+    // Inked in the banner's on-soft colour so it holds AA on the warn tint.
+    fontFamily: theme.font.mono,
+    fontSize: theme.fontSize[12],
+    fontWeight: theme.fontWeight.medium,
+    fontVariant: ["tabular-nums"],
+    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: {}
+    }
+  },
+  grow: { flex: 1, flexDirection: "row", alignItems: "center" },
+  close: {
+    minWidth: theme.space[24],
+    minHeight: theme.space[24],
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  countPill: {
+    position: "absolute",
+    top: -theme.space[4],
+    end: -theme.space[4],
+    minWidth: theme.space[16],
+    height: theme.space[16],
+    paddingHorizontal: theme.space[4],
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radius.full
+  },
+  countText: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.fontSize[10],
+    fontWeight: theme.fontWeight.semibold,
+    fontVariant: ["tabular-nums"]
+  },
+  pressed: { opacity: theme.state.pressedOpacity }
+}));
+
+export { ConnectivityBanner, SyncBadge };