@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-AQ5FIG74.js

@@ -0,0 +1,419 @@
+import { resolveTextRole } from './chunk-L4D5LHCH.js';
+import { SkeletonText } from './chunk-YJ5PXOX3.js';
+import { softToneSkin } from './chunk-PJLTKDVY.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { useFocusRing } from './chunk-2YKVID2V.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import * as React from 'react';
+import { Animated, Pressable, Text, Platform, Easing, findNodeHandle, AccessibilityInfo, Modal, View } from 'react-native';
+import { useStyles, createStyleSheet, useLoamTheme } 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 measureBox(node) {
+  return new Promise((resolve) => {
+    if (!node?.measureInWindow) return resolve(null);
+    node.measureInWindow(
+      (x, y, w, h) => resolve(Number.isFinite(x) && w > 0 && h > 0 ? { x, y, w, h } : null)
+    );
+  });
+}
+var DEFAULT_LABELS = {
+  closeDialog: "Close dialog",
+  close: "Close"
+};
+var DialogPlatformContext = React.createContext(void 0);
+function resolveDialogPlatform(explicit, themed) {
+  if (explicit) return explicit;
+  if (Platform.OS === "ios") return "ios";
+  if (Platform.OS === "android") return "android";
+  return themed === "Android" ? "android" : "ios";
+}
+function Dialog({
+  open,
+  defaultOpen = false,
+  onClose,
+  onOpenChange,
+  dismissible = true,
+  remember = false,
+  rememberKey,
+  storage = defaultRememberStorage,
+  title,
+  description,
+  showClose = dismissible,
+  accessibilityLabel,
+  motion = "full",
+  size,
+  loading = false,
+  tone,
+  morphFrom,
+  children,
+  labels: labelsProp,
+  platform
+}) {
+  const labels = useLabels("dialog", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("dialog");
+  const closeRing = useFocusRing(theme.ctl.r.md);
+  const os = resolveDialogPlatform(platform, theme.platform);
+  const { styles } = useStyles(sheet);
+  const skin = tone ? softToneSkin(theme, tone) : null;
+  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;
+  const canMorph = !!morphFrom && !reducedMotion && !instantMotion;
+  const rootRef = React.useRef(null);
+  const cardRef = React.useRef(null);
+  const fly = React.useRef(new Animated.Value(1)).current;
+  const [pending, setPending] = React.useState(false);
+  const [flight, setFlight] = React.useState(null);
+  const closingMorph = React.useRef(false);
+  const flightFor = React.useCallback(async () => {
+    const [src, dst, root] = await Promise.all([
+      measureBox(morphFrom?.current),
+      measureBox(cardRef.current),
+      measureBox(rootRef.current)
+    ]);
+    if (!src || !dst) return null;
+    const ox = root?.x ?? 0;
+    const oy = root?.y ?? 0;
+    const radius = Math.abs(src.w - src.h) < 2 ? src.h / 2 : Math.min(src.h / 2, theme.radius.md);
+    return {
+      src: { ...src, x: src.x - ox, y: src.y - oy },
+      dst: { ...dst, x: dst.x - ox, y: dst.y - oy },
+      radius
+    };
+  }, [morphFrom, theme.radius.md]);
+  const onCardLayout = React.useCallback(() => {
+    if (!pending) return;
+    void flightFor().then((f) => {
+      setPending(false);
+      if (!f) return;
+      setFlight(f);
+      fly.setValue(0);
+      Animated.timing(fly, {
+        toValue: 1,
+        duration: theme.motion.expand.duration,
+        easing: Easing.bezier(...theme.motion.expand.easing),
+        useNativeDriver: false
+      }).start(() => setFlight(null));
+    });
+  }, [pending, flightFor, fly, theme.motion.expand]);
+  React.useEffect(() => {
+    const easing = Easing.bezier(...theme.easing.base);
+    if (actualOpen) {
+      setMounted(true);
+      closingMorph.current = false;
+      if (canMorph) setPending(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;
+      }
+      if (canMorph) {
+        closingMorph.current = true;
+        setPending(false);
+        void flightFor().then((f) => {
+          if (!closingMorph.current) return;
+          if (!f) {
+            closingMorph.current = false;
+            setMounted(false);
+            return;
+          }
+          setFlight(f);
+          fly.setValue(1);
+          Animated.timing(fly, {
+            toValue: 0,
+            duration: theme.motion.collapse.duration,
+            easing: Easing.bezier(...theme.motion.collapse.easing),
+            useNativeDriver: false
+          }).start(() => {
+            if (!closingMorph.current) return;
+            closingMorph.current = false;
+            setFlight(null);
+            setMounted(false);
+          });
+        });
+      }
+      Animated.timing(progress, {
+        toValue: 0,
+        duration: theme.motion.exit.duration,
+        easing: Easing.bezier(...theme.motion.exit.easing),
+        useNativeDriver: true
+      }).start(({ finished }) => {
+        if (finished && !closingMorph.current) setMounted(false);
+      });
+    }
+  }, [
+    actualOpen,
+    progress,
+    theme.duration.base,
+    theme.easing.base,
+    theme.motion.exit.duration,
+    theme.motion.exit.easing,
+    instantMotion,
+    canMorph,
+    flightFor,
+    fly,
+    theme.motion.collapse
+  ]);
+  const titleRef = React.useRef(null);
+  const cardMounted = mounted;
+  React.useEffect(() => {
+    if (!actualOpen || !cardMounted || Platform.OS === "web") return;
+    const node = titleRef.current;
+    const tag = node ? findNodeHandle(node) : null;
+    if (tag !== null) AccessibilityInfo.setAccessibilityFocus(tag);
+  }, [actualOpen, cardMounted]);
+  if (!mounted) return null;
+  const cardScale = reducedMotion || canMorph ? 1 : progress.interpolate({ inputRange: [0, 1], outputRange: [0.96, 1] });
+  const lerp = (a, b) => fly.interpolate({ inputRange: [0, 1], outputRange: [a, b] });
+  const clipStyle = flight ? [
+    styles.clip,
+    {
+      left: lerp(flight.src.x, flight.dst.x),
+      top: lerp(flight.src.y, flight.dst.y),
+      width: lerp(flight.src.w, flight.dst.w),
+      height: lerp(flight.src.h, flight.dst.h),
+      borderRadius: lerp(flight.radius, theme.radius.xl)
+    }
+  ] : styles.rest;
+  const innerStyle = flight ? {
+    position: "absolute",
+    left: lerp(flight.dst.x - flight.src.x, 0),
+    top: lerp(flight.dst.y - flight.src.y, 0),
+    width: flight.dst.w,
+    // The content arrives once the clip is big enough to hold it.
+    opacity: fly.interpolate({ inputRange: [0, 0.4, 1], outputRange: [0, 0, 1] })
+  } : styles.rest;
+  const cardStyle = flight ? [styles.card, styles.flat, { width: flight.dst.w, maxWidth: flight.dst.w }] : [
+    styles.card,
+    size ? { maxWidth: theme.dialog[size] } : null,
+    skin ? { borderWidth: theme.borderWidth.thin, borderColor: skin.edge } : null,
+    { opacity: pending ? 0 : progress, transform: [{ scale: cardScale }] }
+  ];
+  return /* @__PURE__ */ jsx(Modal, { transparent: true, visible: mounted, animationType: "none", onRequestClose: requestDismiss, children: /* @__PURE__ */ jsxs(View, { ref: rootRef, collapsable: false, style: styles.root, children: [
+    /* @__PURE__ */ jsx(
+      AnimatedPressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: labels.closeDialog,
+        accessibilityElementsHidden: !dismissible,
+        importantForAccessibility: dismissible ? "auto" : "no-hide-descendants",
+        onPress: dismissible ? requestDismiss : void 0,
+        style: [styles.scrim, { opacity: progress }]
+      }
+    ),
+    /* @__PURE__ */ jsx(Animated.View, { style: clipStyle, children: /* @__PURE__ */ jsx(Animated.View, { style: innerStyle, children: /* @__PURE__ */ jsxs(
+      Animated.View,
+      {
+        ref: cardRef,
+        role: "dialog",
+        accessibilityViewIsModal: true,
+        accessibilityLabel: accessibilityLabel ?? title,
+        "aria-busy": loading || void 0,
+        onLayout: onCardLayout,
+        style: cardStyle,
+        children: [
+          showClose ? /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: labels.close,
+              onPress: requestDismiss,
+              onFocus: closeRing.handlers.onFocus,
+              onBlur: closeRing.handlers.onBlur,
+              style: ({ pressed }) => [
+                styles.close,
+                pressed && styles.closePressed,
+                closeRing.focused && closeRing.style
+              ],
+              hitSlop: Math.max(0, (theme.tapMin - theme.ctl.iconBtn) / 2),
+              children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.ctl.icon.md, color: theme.color.text3 })
+            }
+          ) : null,
+          /* @__PURE__ */ jsxs(DialogPlatformContext.Provider, { value: os, children: [
+            title ? /* @__PURE__ */ jsx(DialogTitle, { ref: titleRef, color: skin?.ink, children: title }) : null,
+            description ? /* @__PURE__ */ jsx(DialogDescription, { children: description }) : null,
+            loading ? /* @__PURE__ */ jsx(SkeletonText, { lines: 3 }) : children
+          ] })
+        ]
+      }
+    ) }) })
+  ] }) });
+}
+var DialogTitle = React.forwardRef(
+  function DialogTitle2({ children, color }, ref) {
+    const { styles, theme } = useStyles(sheet);
+    const os = resolveDialogPlatform(React.useContext(DialogPlatformContext), theme.platform);
+    const brand = theme.font.display !== theme.font.sans;
+    return /* @__PURE__ */ jsx(
+      Text,
+      {
+        ref,
+        accessibilityRole: "header",
+        style: [
+          styles.title,
+          resolveTextRole(theme, "dialogTitle", os === "android"),
+          brand ? { fontFamily: theme.font.display } : null,
+          color ? { color } : null
+        ],
+        children
+      }
+    );
+  }
+);
+function DialogDescription({ children }) {
+  const { styles } = useStyles(sheet);
+  return /* @__PURE__ */ jsx(Text, { style: styles.description, children });
+}
+function DialogFooter({ children }) {
+  const { styles, theme } = useStyles(sheet);
+  const os = resolveDialogPlatform(React.useContext(DialogPlatformContext), theme.platform);
+  if (os === "android") return /* @__PURE__ */ jsx(View, { style: styles.footer, children });
+  const ordered = React.Children.toArray(children).filter(Boolean);
+  const longLabel = ordered.some((child) => {
+    const label = React.isValidElement(child) ? child.props.children : null;
+    return typeof label === "string" && label.length >= 12;
+  });
+  const stacked = ordered.length >= 3 || longLabel;
+  const actions = stacked && ordered.length === 2 ? [...ordered].reverse() : ordered;
+  return /* @__PURE__ */ jsx(View, { style: stacked ? styles.footerStacked : styles.footerColumns, children: actions.map((child, i) => /* @__PURE__ */ jsx(View, { style: stacked ? void 0 : styles.column, children: child }, i)) });
+}
+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
+  },
+  // The pass-through wrappers around the card at rest: full width, centring it.
+  rest: {
+    width: "100%",
+    alignItems: "center"
+  },
+  // The travelling clip while the card morphs to or from its source.
+  clip: {
+    position: "absolute",
+    overflow: "hidden",
+    backgroundColor: theme.color.surface
+  },
+  // No shadow in flight: overflow clipping would cut it anyway.
+  flat: {
+    shadowOpacity: 0,
+    elevation: 0
+  },
+  close: {
+    position: "absolute",
+    top: theme.space.s4,
+    right: theme.space.s4,
+    zIndex: 1,
+    // Ghost icon button: 36 box, the control radius, pressed = the state fill.
+    width: theme.ctl.iconBtn,
+    height: theme.ctl.iconBtn,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.ctl.r.md
+  },
+  closePressed: { backgroundColor: theme.state.pressed },
+  title: {
+    fontFamily: theme.font.sans,
+    color: theme.color.text
+  },
+  // F10: the subheadline role — 15 on iOS, 14 on Android.
+  description: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.lineHeight,
+    letterSpacing: theme.type.subheadline.letterSpacing,
+    color: theme.color.text2
+  },
+  footer: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    alignItems: "center",
+    gap: theme.space.s2,
+    // 24 below the body: the card's 12 gap plus this.
+    marginTop: theme.space.s3
+  },
+  footerColumns: {
+    flexDirection: "row",
+    alignItems: "stretch",
+    gap: theme.space.s2,
+    marginTop: theme.space.s3
+  },
+  footerStacked: {
+    flexDirection: "column",
+    alignItems: "stretch",
+    gap: theme.space.s2,
+    marginTop: theme.space.s3
+  },
+  column: { flex: 1 }
+}));
+
+export { Dialog, DialogDescription, DialogFooter, DialogTitle, defaultRememberStorage, measureBox };

package/dist/chunk-AWKQIE5I.js

@@ -0,0 +1,139 @@
+import { useWindowDimensions } from 'react-native';
+import { breakpoints, useLoamTheme } from '@btndprojects/loam-theme-native';
+
+// src/adaptive/form-factor.ts
+var FORM_FACTORS = [
+  "phone",
+  "phoneLandscape",
+  "foldable",
+  "tablet",
+  "tabletLarge"
+];
+var FOLD_LIST_FLEX = 1;
+var FOLD_DETAIL_FLEX = 1.25;
+var TABLET_LIST_FLEX = 0.85;
+var TABLET_DETAIL_FLEX = 1.3;
+var FORM_FACTOR_SPECS = {
+  phone: {
+    formFactor: "phone",
+    token: "--bp-phone 430px",
+    label: "390 \xD7 844 \xB7 compact width",
+    panes: 1,
+    nav: "bottom",
+    drawerAllowed: false,
+    hinge: false,
+    listFlex: 1,
+    detailFlex: 0,
+    asideFlex: 0,
+    collapseLargeTitle: false,
+    halveVerticalPadding: false,
+    modal: "fullWidthSheet",
+    fab: "floating",
+    rule: "Single column. Detail is a push. Sheets go full-width and respect the bottom safe area."
+  },
+  phoneLandscape: {
+    formFactor: "phoneLandscape",
+    token: "--bp-phone-land 740px",
+    label: "844 \xD7 390 \xB7 compact height",
+    panes: 1,
+    nav: "rail",
+    drawerAllowed: false,
+    hinge: false,
+    listFlex: 1,
+    detailFlex: 0,
+    asideFlex: 0,
+    collapseLargeTitle: true,
+    halveVerticalPadding: true,
+    modal: "fullWidthSheet",
+    fab: "floating",
+    rule: "Landscape phone: collapse large titles to inline, move nav to a rail, halve vertical padding, never a bottom bar over the keyboard."
+  },
+  foldable: {
+    formFactor: "foldable",
+    token: "--bp-fold 585px",
+    label: "585 \xD7 800 \xB7 medium width \xB7 hinge gutter",
+    panes: 2,
+    nav: "rail",
+    drawerAllowed: false,
+    hinge: true,
+    listFlex: FOLD_LIST_FLEX,
+    detailFlex: FOLD_DETAIL_FLEX,
+    asideFlex: 0,
+    collapseLargeTitle: false,
+    halveVerticalPadding: false,
+    modal: "fullWidthSheet",
+    fab: "floating",
+    rule: "Treat the hinge as a hard gutter \u2014 no interactive element straddles it. Support half-opened (tabletop) by keeping controls in the bottom half."
+  },
+  tablet: {
+    formFactor: "tablet",
+    token: "--bp-tablet 768px",
+    label: "768 \xD7 1024 \xB7 expanded width",
+    panes: 2,
+    nav: "rail",
+    drawerAllowed: true,
+    hinge: false,
+    listFlex: TABLET_LIST_FLEX,
+    detailFlex: TABLET_DETAIL_FLEX,
+    asideFlex: 0,
+    collapseLargeTitle: false,
+    halveVerticalPadding: false,
+    modal: "centeredDialog",
+    fab: "toolbarButton",
+    rule: "List\u2013detail side by side, one selection always visible. Modals become centred dialogs; FAB becomes a toolbar button."
+  },
+  tabletLarge: {
+    formFactor: "tabletLarge",
+    token: "--bp-tablet-lg 1024px",
+    label: "1024 \xD7 768 \xB7 expanded width",
+    panes: 3,
+    nav: "rail",
+    drawerAllowed: true,
+    hinge: false,
+    listFlex: TABLET_LIST_FLEX,
+    detailFlex: TABLET_DETAIL_FLEX,
+    // The spec's Expanded row reads "Two–three" panes; the third pane mirrors
+    // the list's weight so the detail stays the widest column.
+    asideFlex: TABLET_LIST_FLEX,
+    collapseLargeTitle: false,
+    halveVerticalPadding: false,
+    modal: "centeredDialog",
+    fab: "toolbarButton",
+    rule: "List\u2013detail(\u2013aside) side by side, one selection always visible. Modals become centred dialogs; FAB becomes a toolbar button."
+  }
+};
+function classifyFormFactor({ width, height }) {
+  if (height < breakpoints.phone && (width >= breakpoints.phoneLand || width > height)) {
+    return "phoneLandscape";
+  }
+  if (width >= breakpoints.tabletLg) return "tabletLarge";
+  if (width >= breakpoints.tablet) return "tablet";
+  if (width >= breakpoints.fold) return "foldable";
+  return "phone";
+}
+function adaptivePadding(formFactor, screenPad) {
+  const { halveVerticalPadding } = FORM_FACTOR_SPECS[formFactor];
+  return {
+    paddingHorizontal: screenPad,
+    paddingVertical: halveVerticalPadding ? screenPad / 2 : screenPad
+  };
+}
+function useFormFactor(override) {
+  const theme = useLoamTheme("adaptive");
+  const { width, height } = useWindowDimensions();
+  const formFactor = override ?? classifyFormFactor({ width, height });
+  const spec = FORM_FACTOR_SPECS[formFactor];
+  const padding = adaptivePadding(formFactor, theme.layout.screenPad);
+  return {
+    ...spec,
+    ...padding,
+    width,
+    height,
+    isLandscape: width > height,
+    isCompactHeight: height < breakpoints.phone,
+    reachZoneY: height * theme.layout.reachZone,
+    readingMeasure: theme.type.body.fontSize * 0.5 * theme.measure.base
+  };
+}
+
+export { FORM_FACTORS, FORM_FACTOR_SPECS, adaptivePadding, classifyFormFactor, useFormFactor };