@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-ALJYZLNQ.js

@@ -0,0 +1,509 @@
+import { Avatar } from './chunk-JWCVBFDU.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.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 { Dimensions, Animated, Easing, PanResponder, View, Platform, findNodeHandle, AccessibilityInfo, StyleSheet, Pressable, Text, Modal } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var DEFAULT_LABELS = {
+  navigation: "Navigation",
+  close: "Close navigation"
+};
+var PANEL_FRACTION = 0.78;
+var SIZE_FRACTION = { sm: 0.66, md: PANEL_FRACTION, lg: 0.88 };
+var SWIPE_SLOP = 10;
+var SWIPE_DISMISS_FRACTION = 0.3;
+var SWIPE_FLICK_VELOCITY = 0.4;
+var SPEC = {
+  /** Panel top padding, before the safe-area inset is added. */
+  panelPadTop: 34,
+  /** Panel bottom padding. */
+  panelPadBottom: 22,
+  /** Gap between the panel's children (header → items, item → item). */
+  itemGap: 3,
+  /** Gap between the avatar and the name/email block. */
+  headerGap: 11,
+  /** Identity header padding: top / horizontal / bottom. */
+  headerPadTop: 6,
+  headerPadX: 10,
+  /** Gap between the name and the email. */
+  identityGap: 1,
+  /** Row height on iOS (the OS list row). */
+  rowIOS: 44,
+  /** Row height on Android (the Material drawer item). */
+  rowAndroid: 56,
+  /** Leading glyph size. */
+  glyph: 22
+};
+function NavDrawer({
+  open,
+  onClose,
+  items,
+  userName,
+  userEmail,
+  avatarInitials,
+  closeLabel,
+  safeAreaTop = 0,
+  motion = "full",
+  inline = false,
+  onOpen,
+  platform,
+  variant = "default",
+  size,
+  labels: labelsProp
+}) {
+  const labels = useLabels("navDrawer", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("nav-drawer");
+  const { styles } = useStyles(navDrawer);
+  const android = isAndroidIdiom(theme, platform);
+  const fraction = size ? SIZE_FRACTION[size] : PANEL_FRACTION;
+  const panelWidth = React.useMemo(() => Dimensions.get("window").width * fraction, [fraction]);
+  const rowHeight = size ? size === "sm" ? theme.tapMin : Math.max(theme.tapMin, theme.ctl.lg) + (size === "lg" ? theme.space.s2 : 0) : void 0;
+  const reducedMotion = theme.reduceMotion || motion === "reduced";
+  const instantMotion = motion === "none";
+  const [visible, setVisible] = React.useState(open);
+  const translateX = React.useRef(new Animated.Value(-panelWidth)).current;
+  const scrimOpacity = React.useRef(new Animated.Value(0)).current;
+  const panelOpacity = React.useRef(new Animated.Value(1)).current;
+  const scrimShown = React.useMemo(
+    () => Animated.multiply(
+      scrimOpacity,
+      translateX.interpolate({
+        inputRange: [-panelWidth, 0],
+        outputRange: [0, 1],
+        extrapolate: "clamp"
+      })
+    ),
+    [scrimOpacity, translateX, panelWidth]
+  );
+  const slideDuration = theme.motion.enter.duration;
+  const slideEasing = React.useMemo(
+    () => Easing.bezier(...theme.motion.enter.easing),
+    [theme.motion.enter.easing]
+  );
+  const fadeDuration = theme.duration.base;
+  const fadeEasing = React.useMemo(() => Easing.bezier(...theme.easing.base), [theme.easing.base]);
+  const exitSlideDuration = theme.motion.exit.duration;
+  const exitSlideEasing = React.useMemo(
+    () => Easing.bezier(...theme.motion.exit.easing),
+    [theme.motion.exit.easing]
+  );
+  const exitFadeDuration = Math.min(fadeDuration, exitSlideDuration);
+  const animateIn = React.useCallback(() => {
+    if (instantMotion) {
+      translateX.setValue(0);
+      scrimOpacity.setValue(1);
+      panelOpacity.setValue(1);
+      return;
+    }
+    if (reducedMotion) {
+      translateX.setValue(0);
+      panelOpacity.setValue(0);
+      scrimOpacity.setValue(0);
+      Animated.parallel([
+        Animated.timing(panelOpacity, {
+          toValue: 1,
+          duration: fadeDuration,
+          easing: fadeEasing,
+          useNativeDriver: true
+        }),
+        Animated.timing(scrimOpacity, {
+          toValue: 1,
+          duration: fadeDuration,
+          easing: fadeEasing,
+          useNativeDriver: true
+        })
+      ]).start();
+      return;
+    }
+    translateX.setValue(-panelWidth);
+    scrimOpacity.setValue(0);
+    panelOpacity.setValue(1);
+    Animated.parallel([
+      Animated.timing(translateX, {
+        toValue: 0,
+        duration: slideDuration,
+        easing: slideEasing,
+        useNativeDriver: true
+      }),
+      Animated.timing(scrimOpacity, {
+        toValue: 1,
+        duration: fadeDuration,
+        easing: fadeEasing,
+        useNativeDriver: true
+      })
+    ]).start();
+  }, [
+    translateX,
+    scrimOpacity,
+    panelOpacity,
+    panelWidth,
+    slideDuration,
+    slideEasing,
+    fadeDuration,
+    fadeEasing,
+    reducedMotion,
+    instantMotion
+  ]);
+  const animateOut = React.useCallback(() => {
+    if (instantMotion) {
+      scrimOpacity.setValue(0);
+      panelOpacity.setValue(0);
+      setVisible(false);
+      return;
+    }
+    if (reducedMotion) {
+      Animated.parallel([
+        Animated.timing(panelOpacity, {
+          toValue: 0,
+          duration: exitFadeDuration,
+          easing: fadeEasing,
+          useNativeDriver: true
+        }),
+        Animated.timing(scrimOpacity, {
+          toValue: 0,
+          duration: exitFadeDuration,
+          easing: fadeEasing,
+          useNativeDriver: true
+        })
+      ]).start(({ finished }) => {
+        if (finished) setVisible(false);
+      });
+      return;
+    }
+    Animated.parallel([
+      Animated.timing(translateX, {
+        toValue: -panelWidth,
+        duration: exitSlideDuration,
+        easing: exitSlideEasing,
+        useNativeDriver: true
+      }),
+      Animated.timing(scrimOpacity, {
+        toValue: 0,
+        duration: exitFadeDuration,
+        easing: fadeEasing,
+        useNativeDriver: true
+      })
+    ]).start(({ finished }) => {
+      if (finished) setVisible(false);
+    });
+  }, [
+    translateX,
+    scrimOpacity,
+    panelOpacity,
+    panelWidth,
+    exitSlideDuration,
+    exitSlideEasing,
+    exitFadeDuration,
+    fadeEasing,
+    reducedMotion,
+    instantMotion
+  ]);
+  React.useEffect(() => {
+    if (open) {
+      setVisible(true);
+    } else if (visible) {
+      animateOut();
+    }
+  }, [open]);
+  React.useEffect(() => {
+    if (visible && open) animateIn();
+  }, [visible]);
+  const pan = React.useMemo(
+    () => PanResponder.create({
+      onMoveShouldSetPanResponder: (_e, g) => g.dx < -SWIPE_SLOP && Math.abs(g.dx) > Math.abs(g.dy) * 1.5,
+      onPanResponderMove: (_e, g) => {
+        translateX.setValue(Math.min(0, g.dx));
+      },
+      onPanResponderRelease: (_e, g) => {
+        if (g.dx < -panelWidth * SWIPE_DISMISS_FRACTION || g.vx < -SWIPE_FLICK_VELOCITY) {
+          onClose();
+          return;
+        }
+        Animated.timing(translateX, {
+          toValue: 0,
+          duration: exitSlideDuration,
+          easing: exitSlideEasing,
+          useNativeDriver: true
+        }).start();
+      },
+      onPanResponderTerminate: () => translateX.setValue(0)
+    }),
+    [translateX, panelWidth, onClose, exitSlideDuration, exitSlideEasing]
+  );
+  const edgePan = React.useMemo(
+    () => PanResponder.create({
+      onMoveShouldSetPanResponder: (_e, g) => g.dx > SWIPE_SLOP && Math.abs(g.dx) > Math.abs(g.dy) * 1.5,
+      onPanResponderRelease: (_e, g) => {
+        if (g.dx > panelWidth * SWIPE_DISMISS_FRACTION || g.vx > SWIPE_FLICK_VELOCITY) onOpen?.();
+      }
+    }),
+    [panelWidth, onOpen]
+  );
+  const edge = onOpen && !open ? /* @__PURE__ */ jsx(
+    View,
+    {
+      testID: "nav-drawer-edge",
+      ...edgePan.panHandlers,
+      style: styles.edge,
+      importantForAccessibility: "no-hide-descendants",
+      accessibilityElementsHidden: true
+    }
+  ) : null;
+  const panelRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!visible || !open || Platform.OS === "web") return;
+    const node = panelRef.current;
+    const tag = node ? findNodeHandle(node) : null;
+    if (tag !== null) AccessibilityInfo.setAccessibilityFocus(tag);
+  }, [visible, open]);
+  const handleItemPress = (item) => {
+    item.onPress?.();
+    onClose();
+  };
+  const body = /* @__PURE__ */ jsxs(View, { style: [styles.root, inline && StyleSheet.absoluteFill], children: [
+    /* @__PURE__ */ jsx(Animated.View, { style: [StyleSheet.absoluteFill, styles.scrim, { opacity: scrimShown }], children: /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        style: StyleSheet.absoluteFill,
+        accessibilityRole: "button",
+        accessibilityLabel: closeLabel ?? labels.close,
+        onPress: onClose
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      Animated.View,
+      {
+        ref: panelRef,
+        ...pan.panHandlers,
+        accessibilityViewIsModal: true,
+        role: "navigation",
+        accessibilityLabel: userName ?? labels.navigation,
+        style: [
+          styles.panel,
+          variant === "soft" ? { backgroundColor: theme.color.surface2 } : null,
+          {
+            width: inline ? `${fraction * 100}%` : panelWidth,
+            paddingTop: SPEC.panelPadTop + safeAreaTop,
+            opacity: panelOpacity,
+            transform: [{ translateX }]
+          }
+        ],
+        children: [
+          (avatarInitials || userName || userEmail) && /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
+            avatarInitials || userName ? /* @__PURE__ */ jsx(Avatar, { size: "lg", name: userName ?? avatarInitials }) : null,
+            /* @__PURE__ */ jsxs(View, { style: styles.identity, children: [
+              userName ? /* @__PURE__ */ jsx(Text, { style: styles.userName, numberOfLines: 1, children: userName }) : null,
+              userEmail ? /* @__PURE__ */ jsx(Text, { style: styles.userEmail, numberOfLines: 1, children: userEmail }) : null
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(View, { style: styles.list, children: items.map((item, i) => {
+            const active = item.active ?? false;
+            const section = item.section && item.section !== items[i - 1]?.section ? item.section : null;
+            return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+              section ? /* @__PURE__ */ jsx(
+                Text,
+                {
+                  accessibilityRole: "header",
+                  style: [styles.section, android ? styles.sectionAndroid : null],
+                  children: android ? section : section.toUpperCase()
+                }
+              ) : null,
+              /* @__PURE__ */ jsx(
+                DrawerRow,
+                {
+                  item,
+                  active,
+                  android,
+                  rowHeight,
+                  styles,
+                  onPress: () => handleItemPress(item)
+                }
+              )
+            ] }, `${item.label}-${i}`);
+          }) })
+        ]
+      }
+    )
+  ] });
+  if (inline) return visible ? body : /* @__PURE__ */ jsx(Fragment, { children: edge });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    edge,
+    /* @__PURE__ */ jsx(
+      Modal,
+      {
+        visible,
+        transparent: true,
+        animationType: "none",
+        onRequestClose: onClose,
+        statusBarTranslucent: true,
+        children: body
+      }
+    )
+  ] });
+}
+function DrawerRow({
+  item,
+  active,
+  android,
+  rowHeight,
+  styles,
+  onPress
+}) {
+  const theme = useLoamTheme("nav-drawer");
+  const focusRing = useFocusRing(theme.radius.md);
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: "link",
+      accessibilityLabel: item.count !== void 0 ? `${item.label}, ${item.count}` : item.label,
+      accessibilityState: { selected: active },
+      ...active ? { "aria-current": "page" } : null,
+      onPress,
+      onFocus: focusRing.handlers.onFocus,
+      onBlur: focusRing.handlers.onBlur,
+      android_ripple: android ? { color: theme.state.pressed } : void 0,
+      style: ({ pressed }) => [
+        styles.item,
+        { minHeight: rowHeight ?? (android ? SPEC.rowAndroid : SPEC.rowIOS) },
+        active ? styles.itemActive : null,
+        pressed && !android && !active ? styles.itemPressed : null,
+        focusRing.style
+      ],
+      children: [
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: item.icon,
+            size: SPEC.glyph,
+            color: active ? theme.color.accentStrong : theme.color.text2
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { style: [styles.itemLabel, android ? styles.itemLabelAndroid : null], numberOfLines: 1, children: item.label }),
+        item.count !== void 0 ? /* @__PURE__ */ jsx(Text, { style: styles.itemCount, accessibilityElementsHidden: true, importantForAccessibility: "no", children: item.count }) : null
+      ]
+    }
+  );
+}
+var navDrawer = createStyleSheet((theme) => ({
+  root: {
+    flex: 1,
+    flexDirection: "row"
+  },
+  edge: {
+    position: "absolute",
+    left: 0,
+    top: 0,
+    bottom: 0,
+    // The closed-drawer edge strip that catches a swipe-to-open.
+    width: theme.space[20]
+  },
+  scrim: {
+    backgroundColor: theme.color.scrim,
+    zIndex: theme.z.overlay
+  },
+  // `paddingTop` is applied at the use site — it folds in the safe-area inset.
+  // 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.
+  panel: {
+    height: "100%",
+    backgroundColor: theme.color.surface,
+    paddingHorizontal: theme.space.s3,
+    paddingBottom: SPEC.panelPadBottom,
+    gap: SPEC.itemGap,
+    zIndex: theme.z.modal,
+    ...theme.shadow.lg
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    minWidth: 0,
+    gap: SPEC.headerGap,
+    paddingTop: SPEC.headerPadTop,
+    paddingHorizontal: SPEC.headerPadX,
+    paddingBottom: theme.space.s4
+  },
+  // `minWidth: 0` lets a long name/email truncate instead of widening the row.
+  identity: {
+    flex: 1,
+    minWidth: 0,
+    flexDirection: "column",
+    gap: SPEC.identityGap
+  },
+  userName: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.type.body.fontSize,
+    lineHeight: theme.type.body.lineHeight,
+    color: theme.color.text
+  },
+  userEmail: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text2
+  },
+  // Horizontal padding now lives on the panel, so the rows sit inside its 12px.
+  list: {
+    gap: SPEC.itemGap
+  },
+  section: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text2,
+    paddingHorizontal: theme.space.s3,
+    paddingTop: theme.space.s4,
+    paddingBottom: theme.space[6]
+  },
+  // Material titleSmall, accent-strong.
+  sectionAndroid: {
+    fontSize: theme.fontSize[14],
+    lineHeight: theme.space[20],
+    fontWeight: theme.fontWeight.medium,
+    color: theme.color.accentStrong
+  },
+  // OS-tier rows (44 iOS / 56 Android) at r 12; the height is set at the use site.
+  item: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[14],
+    paddingHorizontal: theme.space.s3,
+    borderRadius: theme.radius.md,
+    overflow: "hidden",
+    backgroundColor: "transparent"
+  },
+  // Selection is state-selected and the accent-strong glyph; no edge (no start bar).
+  itemActive: {
+    backgroundColor: theme.state.selected
+  },
+  itemPressed: {
+    backgroundColor: theme.state.pressed
+  },
+  itemLabel: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.body.fontSize,
+    lineHeight: theme.type.body.lineHeight,
+    fontWeight: theme.fontWeight.regular,
+    color: theme.color.text
+  },
+  itemCount: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[13],
+    color: theme.color.text3
+  },
+  // Material label large, 14 / 500.
+  itemLabelAndroid: {
+    fontSize: theme.fontSize[14],
+    lineHeight: theme.space[20],
+    fontWeight: theme.fontWeight.medium
+  }
+}));
+
+export { NavDrawer };

package/dist/chunk-APCWFOZW.js

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/lib/labels.tsx
+var LabelsContext = React.createContext({ labels: {}, locale: void 0 });
+function LoamLabelsProvider({ labels, locale, children }) {
+  const outer = React.useContext(LabelsContext);
+  const value = React.useMemo(() => {
+    const merged = { ...outer.labels };
+    for (const [key, own] of Object.entries(labels ?? {})) {
+      merged[key] = { ...merged[key], ...own };
+    }
+    return { labels: merged, locale: locale ?? outer.locale };
+  }, [outer, labels, locale]);
+  return /* @__PURE__ */ jsx(LabelsContext.Provider, { value, children });
+}
+function useLabels(key, defaults, own) {
+  const fromContext = React.useContext(LabelsContext).labels[key];
+  return React.useMemo(
+    () => ({ ...defaults, ...fromContext, ...own }),
+    [defaults, fromContext, own]
+  );
+}
+function useLoamLocale() {
+  return React.useContext(LabelsContext).locale;
+}
+
+export { LoamLabelsProvider, useLabels, useLoamLocale };