@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-KHZDNQQD.js

@@ -0,0 +1,171 @@
+import { useLabels, useLoamLocale } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { useResolvedMotion } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { View, Text, Pressable, LayoutAnimation } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DEFAULT_LABELS = {
+  items: "items",
+  showing: (shown, total, noun) => `Showing ${shown} of ${total} ${noun}`,
+  showAllName: (total, noun) => `Show all ${total} ${noun}`,
+  showAll: (total) => `Show all ${total}`,
+  dismiss: "Dismiss"
+};
+function TruncationNotice({
+  shown,
+  total,
+  noun: nounProp,
+  onShowAll,
+  actionIcon = "arrow-down",
+  variant = "inline",
+  size = "md",
+  motion = "full",
+  tone = "neutral",
+  dismissible = false,
+  onDismiss,
+  icon,
+  labels: labelsProp
+}) {
+  const labels = useLabels("truncationNotice", DEFAULT_LABELS, labelsProp);
+  const locale = useLoamLocale();
+  const noun = nounProp ?? labels.items;
+  const { styles } = useStyles(sheet, { variant, size });
+  const theme = useLoamTheme("truncation-notice");
+  const level = useResolvedMotion(motion, "truncation-notice");
+  const [dismissed, setDismissed] = React.useState(false);
+  if (shown >= total || dismissed) return null;
+  const totalText = total.toLocaleString(locale);
+  const message = labels.showing(shown.toLocaleString(locale), totalText, noun);
+  const iconSize = size === "sm" ? theme.icon.xs : theme.icon.sm;
+  const pad = variant === "bar" ? size === "sm" ? { paddingHorizontal: theme.space.s3, paddingVertical: theme.space.s2 } : { paddingHorizontal: theme.space.s4, paddingVertical: theme.space.s3 } : null;
+  const toned = tone === "neutral" ? null : {
+    ink: theme.color[`${tone}OnSoft`],
+    fill: theme.color[`${tone}Soft`],
+    edge: theme.edge[tone]
+  };
+  const barTone = toned && variant === "bar" ? { backgroundColor: toned.fill, borderTopColor: toned.edge } : null;
+  return /* @__PURE__ */ jsxs(View, { style: [styles.base, pad, barTone], children: [
+    icon ? /* @__PURE__ */ jsx(Icon, { name: icon, size: iconSize, color: toned?.ink ?? theme.color.text2 }) : null,
+    /* @__PURE__ */ jsx(Text, { style: [styles.message, toned ? { color: toned.ink } : null], children: message }),
+    onShowAll ? /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: labels.showAllName(totalText, noun),
+        onPress: () => {
+          if (level === "full") {
+            const ds = theme.spring.ds;
+            LayoutAnimation.configureNext({
+              duration: ds.duration,
+              create: { type: "easeInEaseOut", property: "opacity" },
+              update: { type: "spring", springDamping: ds.dampingRatio },
+              delete: { type: "easeInEaseOut", property: "opacity" }
+            });
+          }
+          onShowAll();
+        },
+        hitSlop: { top: theme.space.s2, bottom: theme.space.s2 },
+        style: ({ pressed }) => [styles.action, pressed ? styles.pressed : null],
+        children: [
+          /* @__PURE__ */ jsx(Text, { style: [styles.actionLabel, toned ? { color: toned.ink } : null], children: labels.showAll(totalText) }),
+          actionIcon ? /* @__PURE__ */ jsx(
+            Icon,
+            {
+              name: actionIcon,
+              size: iconSize,
+              color: toned?.ink ?? theme.color.accentStrong
+            }
+          ) : null
+        ]
+      }
+    ) : null,
+    dismissible ? /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: labels.dismiss,
+        hitSlop: theme.space.s2,
+        onPress: () => {
+          setDismissed(true);
+          onDismiss?.();
+        },
+        style: ({ pressed }) => [pressed ? styles.pressed : null],
+        children: /* @__PURE__ */ jsx(Icon, { name: "x", size: iconSize, color: toned?.ink ?? theme.color.text2 })
+      }
+    ) : null
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  /** Press feedback for the action affordance. */
+  pressed: { opacity: theme.state.pressedOpacity },
+  base: {
+    flexDirection: "row",
+    alignItems: "center",
+    variants: {
+      variant: {
+        inline: { alignSelf: "flex-start", gap: theme.space.s2 },
+        bar: {
+          alignSelf: "stretch",
+          justifyContent: "space-between",
+          gap: theme.space.s3,
+          borderTopWidth: theme.borderWidth.base,
+          borderTopColor: theme.color.border,
+          backgroundColor: theme.color.surface2
+        }
+      },
+      size: { sm: {}, md: {} }
+    }
+  },
+  // Muted secondary ink; clears AA on surface / surface-2 in both modes. Tabular
+  // figures keep the digits aligned as the counts change.
+  message: {
+    fontFamily: theme.font.sans,
+    color: theme.color.text2,
+    fontVariant: ["tabular-nums"],
+    variants: {
+      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
+        }
+      },
+      variant: {}
+    }
+  },
+  action: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s1
+  },
+  actionLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    color: theme.color.accentStrong,
+    fontVariant: ["tabular-nums"],
+    variants: {
+      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
+        }
+      },
+      variant: {}
+    }
+  }
+}));
+
+export { TruncationNotice };

package/dist/chunk-KL4GDV4V.js

@@ -0,0 +1,131 @@
+import * as React from 'react';
+import { NativeModules, NativeEventEmitter, Platform } from 'react-native';
+
+// src/shortcuts-sheet/shortcuts-sheet.tsx
+var IOS_MOD = {
+  cmd: "command",
+  command: "command",
+  meta: "command",
+  mod: "command",
+  shift: "shift",
+  alt: "alternate",
+  option: "alternate",
+  opt: "alternate",
+  ctrl: "control",
+  control: "control"
+};
+var ANDROID_MOD = {
+  cmd: "CTRL",
+  command: "CTRL",
+  mod: "CTRL",
+  ctrl: "CTRL",
+  control: "CTRL",
+  meta: "META",
+  shift: "SHIFT",
+  alt: "ALT",
+  option: "ALT",
+  opt: "ALT"
+};
+var IOS_KEY = {
+  up: "UIKeyInputUpArrow",
+  down: "UIKeyInputDownArrow",
+  left: "UIKeyInputLeftArrow",
+  right: "UIKeyInputRightArrow",
+  esc: "UIKeyInputEscape",
+  escape: "UIKeyInputEscape",
+  enter: "\r",
+  return: "\r",
+  tab: "	",
+  space: " ",
+  backspace: "\b"
+};
+var ANDROID_KEY = {
+  up: "KEYCODE_DPAD_UP",
+  down: "KEYCODE_DPAD_DOWN",
+  left: "KEYCODE_DPAD_LEFT",
+  right: "KEYCODE_DPAD_RIGHT",
+  esc: "KEYCODE_ESCAPE",
+  escape: "KEYCODE_ESCAPE",
+  enter: "KEYCODE_ENTER",
+  return: "KEYCODE_ENTER",
+  tab: "KEYCODE_TAB",
+  space: "KEYCODE_SPACE",
+  backspace: "KEYCODE_DEL",
+  ",": "KEYCODE_COMMA",
+  ".": "KEYCODE_PERIOD",
+  "/": "KEYCODE_SLASH",
+  ";": "KEYCODE_SEMICOLON",
+  "[": "KEYCODE_LEFT_BRACKET",
+  "]": "KEYCODE_RIGHT_BRACKET",
+  "-": "KEYCODE_MINUS",
+  "=": "KEYCODE_EQUALS",
+  "+": "KEYCODE_PLUS"
+};
+function split(binding) {
+  if (/\s/.test(binding.trim())) return null;
+  const parts = binding.endsWith("++") ? [...binding.slice(0, -2).split("+"), "+"] : binding.split("+");
+  const key = parts.pop();
+  if (!key) return null;
+  return { mods: parts.map((m) => m.toLowerCase()), key };
+}
+function toKeyCommands(shortcuts) {
+  const out = [];
+  for (const s of shortcuts) {
+    const parsed = split(s.binding);
+    if (!parsed) continue;
+    const lower = parsed.key.toLowerCase();
+    out.push({
+      id: s.id,
+      input: IOS_KEY[lower] ?? (parsed.key.length === 1 ? lower : parsed.key),
+      modifierFlags: parsed.mods.flatMap((m) => IOS_MOD[m] ? [IOS_MOD[m]] : []),
+      discoverabilityTitle: s.label,
+      disabled: s.disabledReason !== void 0
+    });
+  }
+  return out;
+}
+function toKeyboardShortcutGroups(shortcuts, fallbackGroup = "General") {
+  const groups = /* @__PURE__ */ new Map();
+  for (const s of shortcuts) {
+    const parsed = split(s.binding);
+    if (!parsed) continue;
+    const lower = parsed.key.toLowerCase();
+    const keyCode = ANDROID_KEY[lower] ?? (/^[a-z0-9]$/.test(lower) ? `KEYCODE_${lower.toUpperCase()}` : `KEYCODE_${parsed.key.toUpperCase()}`);
+    const modifiers = [
+      ...new Set(parsed.mods.flatMap((m) => ANDROID_MOD[m] ? [ANDROID_MOD[m]] : []))
+    ];
+    const label = s.group ?? fallbackGroup;
+    const list = groups.get(label) ?? [];
+    list.push({
+      id: s.id,
+      label: s.label,
+      keyCode,
+      modifiers,
+      disabled: s.disabledReason !== void 0
+    });
+    groups.set(label, list);
+  }
+  return [...groups].map(([label, items]) => ({ label, items }));
+}
+function useKeyboardShortcuts(shortcuts, platform = Platform.OS === "android" ? "android" : "ios") {
+  const latest = React.useRef(shortcuts);
+  latest.current = shortcuts;
+  React.useEffect(() => {
+    const mod = NativeModules.LoamKeyCommands;
+    if (!mod) return;
+    if (platform === "android") mod.setShortcutGroups?.(toKeyboardShortcutGroups(shortcuts));
+    else mod.setKeyCommands?.(toKeyCommands(shortcuts));
+  }, [shortcuts, platform]);
+  React.useEffect(() => {
+    const mod = NativeModules.LoamKeyCommands;
+    if (!mod?.addListener) return;
+    const emitter = new NativeEventEmitter(mod);
+    const sub = emitter.addListener("onKeyCommand", (e) => {
+      const hit = latest.current.find((s) => s.id === e.id);
+      if (hit && hit.disabledReason === void 0) hit.run?.();
+    });
+    return () => sub.remove();
+  }, []);
+}
+
+export { toKeyCommands, toKeyboardShortcutGroups, useKeyboardShortcuts };

package/dist/chunk-KNILMM4H.js

@@ -0,0 +1,225 @@
+import { FieldMessage } from './chunk-BTRMA7GC.js';
+import { useColorTransition } from './chunk-KXLDK6HB.js';
+import { haptics } from './chunk-NY2U3PBI.js';
+import { useFocusRing } from './chunk-2YKVID2V.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { useResolvedMotion, springConfig } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { Easing, Animated, Pressable, View, Text, Platform } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var BOX = { sm: 16, md: 24 };
+var GLYPH = { sm: 12, md: 14 };
+var CHECK_STROKE = 3.5;
+var HALO = 44;
+function nextChecked(current) {
+  return current === true ? false : true;
+}
+function useResolvedPlatform(explicit) {
+  const theme = useLoamTheme("checkbox");
+  if (explicit) return explicit;
+  if (Platform.OS === "ios") return "ios";
+  if (Platform.OS === "android") return "android";
+  return theme.platform === "iOS" ? "ios" : "android";
+}
+function Checkbox({
+  checked,
+  defaultChecked = false,
+  onCheckedChange,
+  size = "md",
+  platform,
+  disabled = false,
+  motion = "full",
+  accessibilityLabel,
+  label,
+  error = false,
+  tone = "accent",
+  hint
+}) {
+  const isControlled = checked !== void 0;
+  const [internal, setInternal] = React.useState(defaultChecked);
+  const value = isControlled ? checked : internal;
+  const isChecked = value === true;
+  const isIndeterminate = value === "indeterminate";
+  const isOn = isChecked || isIndeterminate;
+  const theme = useLoamTheme("checkbox");
+  const os = useResolvedPlatform(platform);
+  const { styles } = useStyles(sheet, { shape: `${os}-${size}`, disabled });
+  const hasLabel = label != null && label !== "";
+  const invalid = Boolean(error);
+  const onFill = theme.color[tone];
+  const onInk = theme.color[`${tone}Ink`];
+  const message = typeof error === "string" && error ? error : hint;
+  const resolvedMotion = useResolvedMotion(motion, "checkbox");
+  const animateColour = resolvedMotion !== "none";
+  const animatePress = resolvedMotion === "full";
+  const easing = React.useMemo(() => Easing.bezier(...theme.easing.base), [theme.easing.base]);
+  const fillMs = isOn ? theme.spring.de.duration : theme.spring.fe.duration;
+  const backgroundColor = useColorTransition(
+    isOn ? onFill : "transparent",
+    fillMs,
+    easing,
+    animateColour
+  );
+  const borderColor = useColorTransition(
+    isOn ? onFill : invalid ? theme.color.danger : theme.color.text3,
+    fillMs,
+    easing,
+    animateColour
+  );
+  const android = os === "android";
+  const focusRing = useFocusRing(
+    hasLabel ? theme.radius.sm : android ? theme.radius.xs : theme.radius.full
+  );
+  const scale = React.useRef(new Animated.Value(1)).current;
+  const spring = (to) => Animated.spring(scale, {
+    ...springConfig(theme, "fs"),
+    toValue: to,
+    useNativeDriver: true
+  }).start();
+  const [pressed, setPressed] = React.useState(false);
+  const pressIn = disabled ? void 0 : android ? () => setPressed(true) : animatePress ? () => spring(0.97) : void 0;
+  const pressOut = disabled ? void 0 : android ? () => setPressed(false) : animatePress ? () => spring(1) : void 0;
+  const handlePress = () => {
+    const next = nextChecked(value);
+    if (!isControlled) setInternal(next);
+    haptics.impact("light");
+    onCheckedChange?.(next);
+  };
+  const control = /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: "checkbox",
+      accessibilityLabel: accessibilityLabel ?? label,
+      accessibilityState: { checked: isIndeterminate ? "mixed" : isChecked, disabled },
+      "aria-checked": isIndeterminate ? "mixed" : isChecked,
+      "aria-invalid": invalid || void 0,
+      disabled,
+      hitSlop: hasLabel ? void 0 : Math.max(0, (theme.tapMin - BOX[size]) / 2),
+      style: [hasLabel ? [styles.row, { minHeight: theme.tapMin }] : null, focusRing.style],
+      onFocus: focusRing.handlers.onFocus,
+      onBlur: focusRing.handlers.onBlur,
+      onPress: disabled ? void 0 : handlePress,
+      onPressIn: pressIn,
+      onPressOut: pressOut,
+      children: [
+        /* @__PURE__ */ jsxs(View, { style: styles.markWrap, children: [
+          android && pressed ? /* @__PURE__ */ jsx(
+            View,
+            {
+              testID: "checkbox-halo",
+              pointerEvents: "none",
+              style: [styles.halo, { backgroundColor: theme.state.pressed }]
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            Animated.View,
+            {
+              testID: "checkbox-box",
+              style: [styles.box, { backgroundColor, borderColor, transform: [{ scale }] }],
+              children: isOn ? /* @__PURE__ */ jsx(
+                Glyph,
+                {
+                  name: isIndeterminate ? "minus" : "check",
+                  size: GLYPH[size],
+                  color: onInk,
+                  animate: animatePress
+                },
+                isIndeterminate ? "minus" : "check"
+              ) : null
+            }
+          )
+        ] }),
+        hasLabel ? (
+          // Part of the control's name already — not a second element to reach.
+          /* @__PURE__ */ jsx(View, { accessible: false, importantForAccessibility: "no", style: styles.labelWrap, children: /* @__PURE__ */ jsx(Text, { style: styles.label, children: label }) })
+        ) : null
+      ]
+    }
+  );
+  if (!message) return control;
+  return /* @__PURE__ */ jsxs(View, { style: styles.field, children: [
+    control,
+    /* @__PURE__ */ jsx(FieldMessage, { invalid: invalid && typeof error === "string", children: message })
+  ] });
+}
+function Glyph({
+  name,
+  size,
+  color,
+  animate
+}) {
+  const theme = useLoamTheme("checkbox");
+  const p = React.useRef(new Animated.Value(animate ? 0 : 1)).current;
+  React.useEffect(() => {
+    if (!animate) return;
+    Animated.spring(p, { ...springConfig(theme, "ds"), toValue: 1, useNativeDriver: true }).start();
+  }, [animate, p, theme]);
+  return /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      style: {
+        opacity: p.interpolate({ inputRange: [0, 1], outputRange: [0, 1], extrapolate: "clamp" }),
+        transform: [{ scale: p.interpolate({ inputRange: [0, 1], outputRange: [0.5, 1] }) }]
+      },
+      children: /* @__PURE__ */ jsx(Icon, { name, size, color, strokeWidth: CHECK_STROKE })
+    }
+  );
+}
+function boxStyle(os, size, radius) {
+  return {
+    width: BOX[size],
+    height: BOX[size],
+    borderRadius: os === "ios" ? radius.full : radius.xs
+  };
+}
+var sheet = createStyleSheet((theme) => ({
+  // Label 10 from the box (R10).
+  row: { flexDirection: "row", alignItems: "center", gap: theme.space[10] },
+  // Message under the control, aligned with the label's start (box + R10 gap).
+  field: { gap: theme.space.s1 },
+  markWrap: { alignItems: "center", justifyContent: "center" },
+  halo: {
+    position: "absolute",
+    width: HALO,
+    height: HALO,
+    borderRadius: HALO / 2
+  },
+  labelWrap: { flexShrink: 1 },
+  label: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text,
+    variants: {
+      disabled: {
+        true: { opacity: theme.state.disabledOpacity },
+        false: {}
+      }
+    }
+  },
+  // `backgroundColor` / `borderColor` are supplied at the use site as animated
+  // values so the box can travel between states over `duration.base`.
+  box: {
+    alignItems: "center",
+    justifyContent: "center",
+    // The reference draws a `2px` edge — the static `w3` weight, not the
+    // contrast-reactive hairline, because the ring is part of the drawing.
+    borderWidth: theme.borderWidth.heavy,
+    variants: {
+      shape: {
+        "ios-sm": boxStyle("ios", "sm", theme.radius),
+        "ios-md": boxStyle("ios", "md", theme.radius),
+        "android-sm": boxStyle("android", "sm", theme.radius),
+        "android-md": boxStyle("android", "md", theme.radius)
+      },
+      disabled: {
+        true: { opacity: theme.state.disabledOpacity },
+        false: {}
+      }
+    }
+  }
+}));
+
+export { Checkbox };

package/dist/chunk-KRBUZV45.js

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { TIMING } from '@btndprojects/loam-tokens';
+
+// src/lib/delayed-loading.ts
+function useDelayedLoading(loading, delay = TIMING.loadingFloor) {
+  const [visible, setVisible] = React.useState(false);
+  const shownAt = React.useRef(0);
+  React.useEffect(() => {
+    if (loading) {
+      if (visible) return;
+      const t2 = setTimeout(() => {
+        shownAt.current = Date.now();
+        setVisible(true);
+      }, delay);
+      return () => clearTimeout(t2);
+    }
+    if (!visible) return;
+    const remaining = Math.max(0, delay - (Date.now() - shownAt.current));
+    const t = setTimeout(() => setVisible(false), remaining);
+    return () => clearTimeout(t);
+  }, [loading, visible, delay]);
+  return visible;
+}
+
+export { useDelayedLoading };