@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-B2MMZZQB.js

@@ -0,0 +1,426 @@
+import { Progress } from './chunk-L2WMOA2V.js';
+import { Sheet } from './chunk-B7JZ3N5G.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { Badge } from './chunk-LGNTP5XA.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import * as React from 'react';
+import { View, Text, Pressable, Linking, Modal } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function toneInk(theme, tone) {
+  return tone === "good" ? theme.color.goodOnSoft : tone === "warn" ? theme.color.warnOnSoft : tone === "danger" ? theme.color.dangerOnSoft : theme.color.accentStrong;
+}
+function ReleaseSummary({
+  release,
+  productName: productNameProp,
+  labels: labelsProp
+}) {
+  const { styles } = useStyles(sheet);
+  const labels = useLabels("updateNotice", DEFAULT_LABELS, labelsProp);
+  const productName = productNameProp ?? labels.product;
+  const meta = [release.from ? labels.fromVersion(release.from) : null, release.size].filter(Boolean).join(" \xB7 ");
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: styles.summaryRow,
+      accessible: true,
+      accessibilityLabel: [labels.versionLine(productName, release.version), meta].filter(Boolean).join(", "),
+      children: [
+        /* @__PURE__ */ jsx(Text, { style: styles.version, children: productName }),
+        /* @__PURE__ */ jsx(Badge, { size: "sm", variant: "neutral", children: release.version }),
+        meta ? /* @__PURE__ */ jsx(Text, { style: styles.meta, children: meta }) : null
+      ]
+    }
+  );
+}
+function ReleaseNotes({ notes }) {
+  const theme = useLoamTheme("update-notice");
+  const { styles } = useStyles(sheet);
+  if (!notes.length) return null;
+  return /* @__PURE__ */ jsx(View, { style: styles.notes, children: notes.map((n) => /* @__PURE__ */ jsxs(View, { style: styles.noteRow, children: [
+    /* @__PURE__ */ jsx(Icon, { name: "check", size: theme.icon.xs, color: theme.color.good }),
+    /* @__PURE__ */ jsx(Text, { style: styles.noteText, children: n })
+  ] }, n)) });
+}
+function ReleaseMeta({ release, labels: labelsProp }) {
+  const { styles } = useStyles(sheet);
+  const labels = useLabels("updateNotice", DEFAULT_LABELS, labelsProp);
+  const pairs = [
+    [labels.installed, release.from],
+    [labels.required, release.version],
+    [labels.download, release.size]
+  ];
+  return /* @__PURE__ */ jsx(View, { style: styles.chips, children: pairs.filter((pair) => Boolean(pair[1])).map(([k, v]) => /* @__PURE__ */ jsx(Badge, { size: "sm", variant: "neutral", children: labels.metaItem(k, v) }, k)) });
+}
+var DEFAULT_LABELS = {
+  product: "Version",
+  versionLine: (product, version) => `${product} ${version}`,
+  fromVersion: (version) => `from ${version}`,
+  installed: "Installed",
+  required: "Required",
+  download: "Download",
+  metaItem: (caption, value) => `${caption} \xB7 ${value}`,
+  updateReady: "Update ready",
+  downloading: "Downloading",
+  updateAvailable: "Update available",
+  downloadFailed: "Download failed",
+  downloadFailedMessage: "Download failed.",
+  retryResumes: (pct) => `Retry resumes from ${pct}%.`,
+  retry: "Retry",
+  downloadProgress: "Download progress",
+  progressLine: (percent, remaining) => `${percent}%${remaining ? ` \xB7 ${remaining}` : ""} \xB7 you can keep working`,
+  notNow: "Not now",
+  snoozeInHour: "In 1 hour",
+  snoozeTomorrow: "Tomorrow",
+  releaseNotes: "Release notes",
+  cancel: "Cancel",
+  appliesOnRestart: "Applies on restart. Your open work is restored.",
+  apply: "Restart",
+  blockingTitle: "This build can no longer connect.",
+  blockingAction: "Update and restart",
+  requiredUpdate: "Required update"
+};
+var DEFAULT_SNOOZE_OPTIONS = [
+  { label: "In 1 hour", until: () => new Date(Date.now() + 60 * 60 * 1e3) },
+  {
+    label: "Tomorrow",
+    until: () => {
+      const tomorrow = /* @__PURE__ */ new Date();
+      tomorrow.setDate(tomorrow.getDate() + 1);
+      tomorrow.setHours(9, 0, 0, 0);
+      return tomorrow;
+    }
+  }
+];
+function UpdateNotice({
+  release,
+  state: stateProp,
+  defaultState = "available",
+  onStateChange,
+  progress = 0,
+  remaining,
+  error: errorProp,
+  onRetry,
+  onDismiss,
+  onDownload,
+  onCancel,
+  onApply,
+  onSnooze,
+  snoozeOptions,
+  productName,
+  layout = "sheet",
+  motion = "full",
+  size = "md",
+  tone = "accent",
+  icon,
+  labels: labelsProp
+}) {
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme("update-notice");
+  const labels = useLabels("updateNotice", DEFAULT_LABELS, labelsProp);
+  const error = errorProp ?? labels.downloadFailedMessage;
+  const [uncontrolled, setUncontrolled] = React.useState(defaultState);
+  const state = stateProp ?? uncontrolled;
+  const pct = Math.max(0, Math.min(100, Math.round(progress)));
+  const presets = snoozeOptions === true ? [
+    { label: labels.snoozeInHour, until: DEFAULT_SNOOZE_OPTIONS[0].until },
+    { label: labels.snoozeTomorrow, until: DEFAULT_SNOOZE_OPTIONS[1].until }
+  ] : snoozeOptions || null;
+  const go = (next) => {
+    if (stateProp === void 0) setUncontrolled(next);
+    onStateChange?.(next);
+  };
+  const kicker = state === "ready" ? labels.updateReady : state === "downloading" ? labels.downloading : state === "failed" ? labels.downloadFailed : labels.updateAvailable;
+  const actionSize = size === "compact" ? "md" : "lg";
+  const content = /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessibilityLiveRegion: "polite",
+      style: [styles.body, size === "compact" ? styles.bodyCompact : null],
+      children: [
+        /* @__PURE__ */ jsxs(View, { style: styles.kickerRow, children: [
+          icon ? /* @__PURE__ */ jsx(Icon, { name: icon, size: theme.icon.xs, color: toneInk(theme, tone) }) : null,
+          /* @__PURE__ */ jsx(Text, { style: [styles.kicker, { color: toneInk(theme, tone) }], children: kicker })
+        ] }),
+        /* @__PURE__ */ jsx(ReleaseSummary, { release, productName, labels }),
+        state === "available" || state === "ready" ? /* @__PURE__ */ jsx(ReleaseNotes, { notes: release.notes ?? [] }) : null,
+        state === "failed" ? /* @__PURE__ */ jsxs(View, { accessibilityRole: "alert", style: styles.errorRow, children: [
+          /* @__PURE__ */ jsx(Icon, { name: "alert-circle", size: theme.icon.xs, color: theme.color.dangerOnSoft }),
+          /* @__PURE__ */ jsxs(Text, { style: styles.errorText, children: [
+            error,
+            pct > 0 ? ` ${labels.retryResumes(pct)}` : ""
+          ] })
+        ] }) : null,
+        state === "downloading" ? /* @__PURE__ */ jsxs(View, { style: styles.progressBlock, children: [
+          /* @__PURE__ */ jsx(
+            Progress,
+            {
+              size: "sm",
+              value: pct,
+              accessibilityLabel: labels.downloadProgress,
+              motion
+            }
+          ),
+          /* @__PURE__ */ jsx(Text, { style: styles.meta, children: labels.progressLine(pct, remaining) })
+        ] }) : null,
+        /* @__PURE__ */ jsx(View, { style: styles.actions, children: state === "available" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          onSnooze && presets ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Text, { style: styles.meta, children: labels.notNow }),
+            presets.map((o) => /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "md",
+                variant: "outline",
+                onPress: () => onSnooze(o.until()),
+                children: o.label
+              },
+              o.label
+            ))
+          ] }) : onSnooze ? /* @__PURE__ */ jsx(Button, { size: actionSize, variant: "ghost", onPress: () => onSnooze(), children: labels.notNow }) : null,
+          /* @__PURE__ */ jsx(View, { style: styles.grow }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: actionSize,
+              variant: "primary",
+              leadingIcon: "download",
+              onPress: () => {
+                go("downloading");
+                onDownload?.();
+              },
+              children: labels.download
+            }
+          )
+        ] }) : state === "failed" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(View, { style: styles.grow }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: actionSize,
+              variant: "primary",
+              leadingIcon: "refresh",
+              onPress: () => {
+                go("downloading");
+                (onRetry ?? onDownload)?.();
+              },
+              children: labels.retry
+            }
+          )
+        ] }) : state === "downloading" ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: actionSize,
+            variant: "ghost",
+            onPress: () => {
+              go("available");
+              onCancel?.();
+            },
+            children: labels.cancel
+          }
+        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Text, { style: styles.applyNote, children: labels.appliesOnRestart }),
+          /* @__PURE__ */ jsx(Button, { size: actionSize, variant: "primary", leadingIcon: "refresh", onPress: onApply, children: labels.apply })
+        ] }) })
+      ]
+    }
+  );
+  if (layout === "inline") return content;
+  return /* @__PURE__ */ jsx(
+    Sheet,
+    {
+      open: true,
+      onClose: () => onDismiss ? onDismiss() : onSnooze?.(),
+      dismissible: Boolean(onDismiss ?? onSnooze),
+      motion,
+      children: content
+    }
+  );
+}
+function BlockingUpdate({
+  release,
+  title: titleProp,
+  actionLabel: actionLabelProp,
+  onApply,
+  notesHref,
+  notesLabel: notesLabelProp,
+  motion = "full",
+  size = "md",
+  dismissible = false,
+  onDismiss,
+  presentation = "full",
+  loading = false,
+  tone = "danger",
+  labels: labelsProp
+}) {
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme("update-notice");
+  const labels = useLabels("updateNotice", DEFAULT_LABELS, labelsProp);
+  const title = titleProp ?? labels.blockingTitle;
+  const actionLabel = actionLabelProp ?? labels.blockingAction;
+  const card = /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessibilityRole: "alert",
+      accessibilityViewIsModal: true,
+      style: [
+        styles.blockCard,
+        size === "sm" ? styles.blockCardCompact : null,
+        size === "lg" ? styles.blockCardWide : null
+      ],
+      children: [
+        /* @__PURE__ */ jsx(Text, { style: [styles.blockKicker, { color: toneInk(theme, tone) }], children: labels.requiredUpdate }),
+        /* @__PURE__ */ jsx(Text, { style: styles.blockTitle, children: title }),
+        release.reason ? /* @__PURE__ */ jsx(Text, { style: styles.blockReason, children: release.reason }) : null,
+        /* @__PURE__ */ jsx(ReleaseMeta, { release, labels }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: size === "sm" ? "md" : "lg",
+            fullWidth: true,
+            variant: "primary",
+            leadingIcon: "download",
+            loading,
+            onPress: onApply,
+            children: actionLabel
+          }
+        ),
+        dismissible ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: size === "sm" ? "md" : "lg",
+            fullWidth: true,
+            variant: "ghost",
+            onPress: onDismiss,
+            children: labels.notNow
+          }
+        ) : null,
+        notesHref ? /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "link",
+            onPress: () => void Linking.openURL(notesHref),
+            style: ({ pressed }) => [styles.notesLink, pressed ? styles.notesLinkPressed : null],
+            children: /* @__PURE__ */ jsx(Text, { style: styles.notesLinkText, children: notesLabelProp ?? labels.releaseNotes })
+          }
+        ) : null
+      ]
+    }
+  );
+  if (presentation === "anchored") return card;
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      visible: true,
+      transparent: true,
+      animationType: motion === "full" && !theme.reduceMotion ? "fade" : "none",
+      onRequestClose: () => dismissible ? onDismiss?.() : void 0,
+      children: /* @__PURE__ */ jsx(View, { style: [styles.blockScrim, presentation === "sheet" ? styles.blockScrimSheet : null], children: card })
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  body: { gap: theme.space[11] },
+  bodyCompact: { gap: theme.space[6] },
+  // The sans overline (page 28 P2); mono is kept for codes and counts.
+  kickerRow: { flexDirection: "row", alignItems: "center", gap: theme.space[6] },
+  kicker: { ...theme.type.overline, color: theme.color.accentStrong },
+  blockCardCompact: {
+    gap: theme.space[8],
+    padding: theme.space[16],
+    maxWidth: theme.dialog.sm
+  },
+  blockCardWide: { maxWidth: theme.dialog.lg },
+  blockScrimSheet: { justifyContent: "flex-end" },
+  summaryRow: { flexDirection: "row", alignItems: "baseline", gap: theme.space[8] },
+  version: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.subheadline.fontSize,
+    color: theme.color.text
+  },
+  // The count style (page 28 P6): mono 12 / 500 tabular in text2.
+  meta: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.fontSize[12],
+    fontWeight: theme.fontWeight.medium,
+    color: theme.color.text2,
+    fontVariant: ["tabular-nums"]
+  },
+  errorRow: { flexDirection: "row", alignItems: "flex-start", gap: theme.space[6] },
+  errorText: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    fontWeight: theme.fontWeight.medium,
+    color: theme.color.dangerOnSoft
+  },
+  notes: { gap: theme.space[5] },
+  noteRow: { flexDirection: "row", alignItems: "flex-start", gap: theme.space[8] },
+  noteText: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.lineHeight,
+    color: theme.color.text2
+  },
+  progressBlock: { gap: theme.space[6] },
+  // Wraps: on a phone the restart note and a large button do not share 340px
+  // without squeezing the note to three 115px lines.
+  actions: { flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: theme.space[9] },
+  grow: { flex: 1 },
+  applyNote: {
+    flexGrow: 1,
+    flexBasis: theme.panel.xs,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text2
+  },
+  notesLink: { alignSelf: "center", paddingVertical: theme.space[6] },
+  notesLinkPressed: { opacity: theme.state.pressedOpacity },
+  notesLinkText: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.type.footnote.fontSize,
+    color: theme.color.text2,
+    textDecorationLine: "underline"
+  },
+  chips: { flexDirection: "row", flexWrap: "wrap", gap: theme.space[8] },
+  blockScrim: {
+    flex: 1,
+    backgroundColor: theme.color.scrim,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: theme.space[24]
+  },
+  // loam-contrast-ignore — Dialog spec: the scrim, not an edge, bounds this surface.
+  blockCard: {
+    width: "100%",
+    maxWidth: theme.dialog.md,
+    gap: theme.space[14],
+    padding: theme.space[24],
+    // The Dialog surface (r 24, sh-lg, no edge): the scrim is the boundary.
+    borderRadius: theme.radius.xl,
+    backgroundColor: theme.color.surface,
+    ...theme.shadow.lg
+  },
+  blockKicker: { ...theme.type.overline, color: theme.color.dangerOnSoft },
+  blockTitle: {
+    fontFamily: theme.font.display,
+    fontWeight: theme.font.displayWeight,
+    fontSize: theme.type.title1.fontSize,
+    lineHeight: theme.type.title1.lineHeight,
+    color: theme.color.text
+  },
+  blockReason: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.body.fontSize,
+    lineHeight: theme.type.body.lineHeight,
+    color: theme.color.text2
+  }
+}));
+
+export { BlockingUpdate, DEFAULT_SNOOZE_OPTIONS, ReleaseMeta, ReleaseNotes, ReleaseSummary, UpdateNotice };