@btndprojects/loam-ui-native 0.0.0-stage → 0.1.0

package/dist/chunk-OETCUXQP.js

@@ -0,0 +1,134 @@
+import { Icon } from './chunk-TKVFVF5D.js';
+import 'react';
+import { View, Text, Pressable } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var TONE_ICON = {
+  info: "info",
+  good: "check-circle",
+  warn: "alert-triangle",
+  danger: "alert-circle",
+  neutral: "info"
+};
+function alertToneColors(theme, tone) {
+  switch (tone) {
+    case "good":
+      return {
+        glyph: theme.color.goodOnSoft,
+        border: theme.color.good,
+        tint: theme.color.goodSoft
+      };
+    case "warn":
+      return {
+        glyph: theme.color.warnOnSoft,
+        border: theme.color.warn,
+        tint: theme.color.warnSoft
+      };
+    case "danger":
+      return {
+        glyph: theme.color.dangerOnSoft,
+        border: theme.color.danger,
+        tint: theme.color.dangerSoft
+      };
+    case "neutral":
+      return {
+        glyph: theme.color.text2,
+        border: theme.color.borderStrong,
+        tint: theme.color.surface2
+      };
+    default:
+      return {
+        glyph: theme.color.infoOnSoft,
+        border: theme.color.info,
+        tint: theme.color.infoSoft
+      };
+  }
+}
+function Alert({
+  title,
+  description,
+  tone = "info",
+  icon,
+  dismissible = false,
+  onDismiss,
+  action,
+  children
+}) {
+  const { styles } = useStyles(sheet, { tone });
+  const theme = useLoamTheme();
+  const toneColors = alertToneColors(theme, tone);
+  const showDismiss = dismissible || onDismiss != null;
+  const iconName = icon === false ? void 0 : icon ?? TONE_ICON[tone];
+  const dismissHitSlop = Math.max(0, Math.round((theme.tapMin - theme.icon.sm) / 2));
+  return /* @__PURE__ */ jsxs(View, { accessibilityRole: "alert", style: [styles.base, { borderColor: toneColors.border }], children: [
+    iconName ? /* @__PURE__ */ jsx(View, { style: styles.iconSlot, children: /* @__PURE__ */ jsx(Icon, { name: iconName, size: theme.icon.md, color: toneColors.glyph }) }) : null,
+    /* @__PURE__ */ jsxs(View, { style: styles.content, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.title, children: title }),
+      description ? /* @__PURE__ */ jsx(Text, { style: styles.description, children: description }) : null,
+      children,
+      action ? /* @__PURE__ */ jsx(View, { style: styles.action, children: action }) : null
+    ] }),
+    showDismiss ? /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: "Dismiss",
+        onPress: onDismiss,
+        hitSlop: dismissHitSlop,
+        style: styles.dismiss,
+        children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.icon.sm, color: toneColors.glyph })
+      }
+    ) : null
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  base: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: theme.space.s3,
+    padding: theme.space.s4,
+    borderRadius: theme.radius.lg,
+    borderWidth: theme.borderWidth.thin,
+    variants: {
+      tone: {
+        info: { backgroundColor: theme.color.infoSoft },
+        good: { backgroundColor: theme.color.goodSoft },
+        warn: { backgroundColor: theme.color.warnSoft },
+        danger: { backgroundColor: theme.color.dangerSoft },
+        neutral: { backgroundColor: theme.color.surface2 }
+      }
+    }
+  },
+  iconSlot: {
+    // Nudge the icon onto the title's optical baseline.
+    paddingTop: theme.space[1]
+  },
+  content: {
+    flex: 1,
+    gap: theme.space.s1
+  },
+  title: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.fontSize[14],
+    color: theme.color.text
+  },
+  description: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[14],
+    color: theme.color.text
+  },
+  action: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s2,
+    marginTop: theme.space.s2
+  },
+  // `marginStart`, not `marginLeft`: RN's layout engine mirrors it under RTL.
+  dismiss: {
+    marginStart: theme.space.s2
+  }
+}));
+
+export { Alert };

package/dist/chunk-OOPPQH27.js

@@ -0,0 +1,179 @@
+import { Thinking } from './chunk-XXXEFXY5.js';
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React from 'react';
+import { Animated, Easing, View, Text, Pressable } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var STATE_META = {
+  idle: { icon: "check-circle", text: "Up to date", tone: "muted" },
+  typing: { icon: "edit", text: "Editing\u2026", tone: "muted" },
+  saving: { icon: "loader", text: "Saving\u2026", tone: "muted", spin: true },
+  saved: { icon: "check", text: "Saved", tone: "good" },
+  offline: { icon: "cloud-off", text: "Offline \u2014 changes queued", tone: "warn" },
+  error: { icon: "alert-triangle", text: "Couldn't save", tone: "danger" }
+};
+function formatSavedAt(value) {
+  const then = typeof value === "number" ? value : value.getTime();
+  const diff = Date.now() - then;
+  if (!Number.isFinite(then) || diff < 0) return "just now";
+  const sec = Math.floor(diff / 1e3);
+  if (sec < 45) return "just now";
+  const min = Math.floor(sec / 60);
+  if (min < 60) return `${min}m ago`;
+  const hr = Math.floor(min / 60);
+  if (hr < 24) return `${hr}h ago`;
+  return `${Math.floor(hr / 24)}d ago`;
+}
+function SaveStatus({
+  status,
+  savedAt,
+  onRetry,
+  variant = "inline",
+  size = "md",
+  motion = "full",
+  accessibilityLabel,
+  style,
+  testID
+}) {
+  const { styles } = useStyles(sheet, { variant, size, tone: STATE_META[status].tone });
+  const theme = useLoamTheme();
+  const meta = STATE_META[status];
+  const tone = meta.tone === "good" ? theme.color.good : meta.tone === "warn" ? theme.color.warn : meta.tone === "danger" ? theme.color.danger : theme.color.text2;
+  const iconSize = size === "sm" ? theme.icon.xs : theme.icon.sm;
+  const animate = motion === "full" && !theme.reduceMotion;
+  const label = status === "saved" && savedAt != null ? `Saved \xB7 ${formatSavedAt(savedAt)}` : meta.text;
+  const chipPad = variant === "toolbar" ? {
+    paddingHorizontal: size === "sm" ? theme.space.s2 : theme.space.s3,
+    paddingVertical: size === "sm" ? theme.space.s1 : theme.space.s2
+  } : null;
+  const fade = React.useRef(new Animated.Value(1)).current;
+  const mounted = React.useRef(false);
+  React.useEffect(() => {
+    if (!animate) {
+      fade.setValue(1);
+      return;
+    }
+    if (!mounted.current) {
+      mounted.current = true;
+      return;
+    }
+    fade.setValue(0);
+    Animated.timing(fade, {
+      toValue: 1,
+      duration: theme.motion.swap.duration,
+      easing: Easing.bezier(...theme.motion.swap.easing),
+      useNativeDriver: true
+    }).start();
+  }, [status, animate, fade, theme.motion.swap.duration, theme.motion.swap.easing]);
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessibilityRole: "text",
+      accessibilityLiveRegion: "polite",
+      accessibilityLabel: accessibilityLabel || label,
+      testID,
+      style: [styles.root, chipPad, style],
+      children: [
+        /* @__PURE__ */ jsx(Animated.View, { style: [styles.line, animate ? { opacity: fade } : null], children: meta.spin ? (
+          // `saving` is the single-signal `thinking` recipe: a gently pulsing
+          // label says "working". A spinning icon beside it would say it twice.
+          // Compose the Thinking primitive as a muted, embedded indicator
+          // (`announce={false}` — the root View already owns the polite live
+          // region, so the state is announced once). It keeps the same
+          // `save-status-icon` test id so the "icon beside the text" contract
+          // (non-colour indicator) holds.
+          /* @__PURE__ */ jsx(
+            Thinking,
+            {
+              testID: "save-status-icon",
+              label,
+              tone: "neutral",
+              size: size === "sm" ? "sm" : "md",
+              motion,
+              announce: false
+            }
+          )
+        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(View, { testID: "save-status-icon", children: /* @__PURE__ */ jsx(Icon, { name: meta.icon, size: iconSize, color: tone }) }),
+          /* @__PURE__ */ jsx(Text, { style: styles.label, children: label })
+        ] }) }),
+        status === "error" && onRetry ? /* @__PURE__ */ jsxs(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: "Retry",
+            onPress: onRetry,
+            hitSlop: 8,
+            style: ({ pressed }) => [styles.retry, pressed ? { opacity: theme.state.pressedOpacity } : null],
+            children: [
+              /* @__PURE__ */ jsx(Icon, { name: "refresh", size: iconSize, color: theme.color.danger }),
+              /* @__PURE__ */ jsx(Text, { style: styles.retryLabel, children: "Retry" })
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  root: {
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "flex-start",
+    gap: theme.space.s2,
+    variants: {
+      // A neutral chip surface — kept off a tone tint so the tone inks stay AA.
+      variant: {
+        inline: {},
+        toolbar: {
+          borderRadius: theme.radius.lg,
+          borderWidth: theme.borderWidth.base,
+          borderColor: theme.color.border,
+          backgroundColor: theme.color.surface2
+        }
+      }
+    }
+  },
+  line: { flexDirection: "row", alignItems: "center", gap: theme.space.s2 },
+  label: {
+    fontFamily: theme.font.sans,
+    variants: {
+      tone: {
+        muted: { color: theme.color.text2 },
+        good: { color: theme.color.good },
+        warn: { color: theme.color.warn },
+        danger: { color: theme.color.danger }
+      },
+      size: {
+        sm: {
+          fontSize: theme.type.caption1.fontSize,
+          lineHeight: theme.type.caption1.lineHeight,
+          letterSpacing: theme.type.caption1.letterSpacing
+        },
+        md: {
+          fontSize: theme.type.footnote.fontSize,
+          lineHeight: theme.type.footnote.lineHeight,
+          letterSpacing: theme.type.footnote.letterSpacing
+        }
+      }
+    }
+  },
+  retry: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s1,
+    paddingHorizontal: theme.space.s1
+  },
+  retryLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    color: theme.color.danger,
+    textDecorationLine: "underline",
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    letterSpacing: theme.type.footnote.letterSpacing
+  }
+}));
+
+export { SaveStatus };

package/dist/chunk-OPXFZ4Y5.js

@@ -0,0 +1,204 @@
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React from 'react';
+import { Animated, Pressable, Easing, Modal, View, Text } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+var memoryStore = /* @__PURE__ */ new Map();
+var defaultRememberStorage = {
+  getItem: (key) => memoryStore.get(key) ?? null,
+  setItem: (key, value) => {
+    memoryStore.set(key, value);
+  }
+};
+function Dialog({
+  open,
+  defaultOpen = false,
+  onClose,
+  onOpenChange,
+  dismissible = true,
+  remember = false,
+  rememberKey,
+  storage = defaultRememberStorage,
+  title,
+  description,
+  showClose = dismissible,
+  accessibilityLabel,
+  motion = "full",
+  children
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet);
+  const controlled = open !== void 0;
+  const persist = remember && rememberKey != null;
+  const reducedMotion = theme.reduceMotion || motion === "reduced";
+  const instantMotion = motion === "none";
+  const [internalOpen, setInternalOpen] = React.useState(() => {
+    if (!controlled && persist) {
+      const v = storage.getItem(rememberKey);
+      if (v === "open") return true;
+      if (v === "closed") return false;
+    }
+    return defaultOpen;
+  });
+  const actualOpen = controlled ? open : internalOpen;
+  const setOpen = React.useCallback(
+    (next) => {
+      if (persist) storage.setItem(rememberKey, next ? "open" : "closed");
+      if (!controlled) setInternalOpen(next);
+      onOpenChange?.(next);
+    },
+    [persist, rememberKey, storage, controlled, onOpenChange]
+  );
+  const requestDismiss = React.useCallback(() => {
+    if (!dismissible) return;
+    setOpen(false);
+    onClose?.();
+  }, [dismissible, setOpen, onClose]);
+  const [mounted, setMounted] = React.useState(actualOpen);
+  const progress = React.useRef(new Animated.Value(actualOpen ? 1 : 0)).current;
+  React.useEffect(() => {
+    const easing = Easing.bezier(...theme.easing.base);
+    if (actualOpen) {
+      setMounted(true);
+      if (instantMotion) {
+        progress.setValue(1);
+        return;
+      }
+      Animated.timing(progress, {
+        toValue: 1,
+        duration: theme.duration.base,
+        easing,
+        useNativeDriver: true
+      }).start();
+    } else {
+      if (instantMotion) {
+        progress.setValue(0);
+        setMounted(false);
+        return;
+      }
+      Animated.timing(progress, {
+        toValue: 0,
+        duration: theme.duration.base,
+        easing,
+        useNativeDriver: true
+      }).start(({ finished }) => {
+        if (finished) setMounted(false);
+      });
+    }
+  }, [actualOpen, progress, theme.duration.base, theme.easing.base, instantMotion]);
+  if (!mounted) return null;
+  const cardScale = reducedMotion ? 1 : progress.interpolate({ inputRange: [0, 1], outputRange: [0.96, 1] });
+  return /* @__PURE__ */ jsx(Modal, { transparent: true, visible: mounted, animationType: "none", onRequestClose: requestDismiss, children: /* @__PURE__ */ jsxs(View, { style: styles.root, children: [
+    /* @__PURE__ */ jsx(
+      AnimatedPressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: "Close dialog",
+        accessibilityElementsHidden: !dismissible,
+        importantForAccessibility: dismissible ? "auto" : "no-hide-descendants",
+        onPress: dismissible ? requestDismiss : void 0,
+        style: [styles.scrim, { opacity: progress }]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Animated.View,
+      {
+        role: "dialog",
+        accessibilityViewIsModal: true,
+        accessibilityLabel: accessibilityLabel ?? title,
+        style: [styles.card, { opacity: progress, transform: [{ scale: cardScale }] }],
+        children: [
+          showClose ? /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: "Close",
+              onPress: requestDismiss,
+              style: styles.close,
+              hitSlop: 8,
+              children: /* @__PURE__ */ jsx(Icon, { name: "x", size: 20, color: theme.color.text3 })
+            }
+          ) : null,
+          title ? /* @__PURE__ */ jsx(DialogTitle, { children: title }) : null,
+          description ? /* @__PURE__ */ jsx(DialogDescription, { children: description }) : null,
+          children
+        ]
+      }
+    )
+  ] }) });
+}
+function DialogTitle({ children }) {
+  const { styles } = useStyles(sheet);
+  return /* @__PURE__ */ jsx(Text, { style: styles.title, children });
+}
+function DialogDescription({ children }) {
+  const { styles } = useStyles(sheet);
+  return /* @__PURE__ */ jsx(Text, { style: styles.description, children });
+}
+function DialogFooter({ children }) {
+  const { styles } = useStyles(sheet);
+  return /* @__PURE__ */ jsx(View, { style: styles.footer, children });
+}
+var sheet = createStyleSheet((theme) => ({
+  root: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: theme.space.s5
+  },
+  scrim: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: theme.color.scrim
+  },
+  // loam-contrast-ignore — the boundary here is the scrim, not the shadow.
+  // `color.scrim` is a 44% wash and is *not* re-resolved by high contrast, so
+  // this surface is still separated from the page when the elevation zeroes
+  // out. A border would put a hairline around every modal for no gain.
+  card: {
+    width: "100%",
+    // The reference width, which is now a named tier rather than a literal.
+    maxWidth: theme.panel.xl,
+    alignSelf: "center",
+    backgroundColor: theme.color.surface,
+    borderRadius: theme.radius.xl,
+    padding: theme.space.s5,
+    gap: theme.space.s3,
+    ...theme.shadow.lg
+  },
+  close: {
+    position: "absolute",
+    top: theme.space.s3,
+    right: theme.space.s3,
+    zIndex: 1,
+    padding: theme.space.s1,
+    borderRadius: theme.radius.full
+  },
+  title: {
+    fontFamily: theme.font.display,
+    fontWeight: `${theme.font.displayWeight}`,
+    fontSize: theme.fontSize[26],
+    color: theme.color.text
+  },
+  description: {
+    fontFamily: theme.font.sans,
+    // Reference (buildOverlays, Android): font-size:14px — sm token matches exactly.
+    fontSize: theme.fontSize[14],
+    lineHeight: theme.fontSize[14] * 1.5,
+    color: theme.color.text2
+  },
+  footer: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    alignItems: "center",
+    gap: theme.space.s2,
+    marginTop: theme.space.s2
+  }
+}));
+
+export { Dialog, DialogDescription, DialogFooter, DialogTitle, defaultRememberStorage };