@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/{chunk-ZVFE5QGU.js → chunk-B7JZ3N5G.js}

@@ -1,8 +1,11 @@
-import { defaultRememberStorage } from './chunk-OPXFZ4Y5.js';
+import { defaultRememberStorage } from './chunk-AQ5FIG74.js';
+import { resolveTextRole } from './chunk-L4D5LHCH.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels } from './chunk-APCWFOZW.js';
 import * as React from 'react';
-import { useWindowDimensions, Animated, Easing, PanResponder, Modal, View, StyleSheet, Pressable, Text, ScrollView } from 'react-native';
+import { useWindowDimensions, Animated, Easing, PanResponder, Platform, findNodeHandle, AccessibilityInfo, StyleSheet, Pressable, View, Text, ScrollView, Modal } from 'react-native';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var FALLBACK_HEIGHT = 640;
 var DEFAULT_DISMISS_FRACTION = 0.25;
@@ -30,6 +33,11 @@ function SheetStackProvider({
   }
   return /* @__PURE__ */ jsx(SheetStackContext.Provider, { value, children });
 }
+var DEFAULT_LABELS = {
+  close: "Close",
+  grabber: "Resize sheet",
+  detents: { peek: "peek", half: "half", full: "full" }
+};
 function clamp(n, lo, hi) {
   return Math.max(lo, Math.min(hi, n));
 }
@@ -43,23 +51,32 @@ function Sheet({
   children,
   footer,
   safeAreaBottom = 0,
-  closeLabel = "Close",
+  closeLabel,
   dismissible = true,
   detents,
-  grabberLabel = "Resize sheet",
+  initialDetent,
+  grabberLabel,
+  labels: labelsProp,
   dismissFraction = DEFAULT_DISMISS_FRACTION,
   remember = false,
   rememberKey,
   storage = defaultRememberStorage,
-  motion = "full"
+  motion = "full",
+  side = "bottom",
+  presentation = "modal"
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("sheet");
+  const labels = useLabels("sheet", DEFAULT_LABELS, labelsProp);
   const { styles } = useStyles(sheet);
   const { height: windowHeight } = useWindowDimensions();
   const controlled = open !== void 0;
   const persist = remember && rememberKey != null;
   const reducedMotion = theme.reduceMotion || motion === "reduced";
-  const instantMotion = motion === "none";
+  const inline = presentation === "inline";
+  const instantMotion = motion === "none" || inline;
+  const sgn = side === "top" ? -1 : 1;
+  const sgnRef = React.useRef(sgn);
+  sgnRef.current = sgn;
   const [internalOpen, setInternalOpen] = React.useState(() => {
     if (!controlled && persist) {
       const v = storage.getItem(`${rememberKey}:open`);
@@ -97,7 +114,7 @@ function Sheet({
       const n = raw == null ? NaN : Number(raw);
       if (Number.isInteger(n)) return n;
     }
-    return 0;
+    return initialDetent ? Math.max(0, detentList.indexOf(initialDetent)) : 0;
   });
   const activeIndex = hasDetents ? clamp(detentIndex, 0, detentList.length - 1) : 0;
   const detentPx = React.useCallback(
@@ -182,7 +199,7 @@ function Sheet({
       ]).start();
       return;
     }
-    translateY.setValue(heightRef.current || FALLBACK_HEIGHT);
+    translateY.setValue(sgn * (heightRef.current || FALLBACK_HEIGHT));
     overlayOpacity.setValue(0);
     panelOpacity.setValue(1);
     Animated.parallel([
@@ -206,7 +223,8 @@ function Sheet({
     enter.duration,
     enterEase,
     reducedMotion,
-    instantMotion
+    instantMotion,
+    sgn
   ]);
   const animateOut = React.useCallback(() => {
     if (instantMotion) {
@@ -236,7 +254,7 @@ function Sheet({
     }
     Animated.parallel([
       Animated.timing(translateY, {
-        toValue: heightRef.current || FALLBACK_HEIGHT,
+        toValue: sgn * (heightRef.current || FALLBACK_HEIGHT),
         duration: exit.duration,
         easing: exitEase,
         useNativeDriver: true
@@ -257,7 +275,8 @@ function Sheet({
     exit.duration,
     exitEase,
     reducedMotion,
-    instantMotion
+    instantMotion,
+    sgn
   ]);
   React.useEffect(() => {
     if (actualOpen) {
@@ -318,13 +337,13 @@ function Sheet({
       onStartShouldSetPanResponder: () => true,
       onMoveShouldSetPanResponder: (_e, g) => Math.abs(g.dy) > 2,
       onPanResponderMove: (_e, g) => {
-        const dy = Math.max(0, g.dy);
-        translateY.setValue(dy);
+        const dy = Math.max(0, sgnRef.current * g.dy);
+        translateY.setValue(sgnRef.current * dy);
         overlayOpacity.setValue(1 - clamp(dy / (heightRef.current || FALLBACK_HEIGHT), 0, 1));
       },
       onPanResponderRelease: (_e, g) => {
         const threshold = (heightRef.current || FALLBACK_HEIGHT) * fractionRef.current;
-        if (dismissRef.current && (g.dy > threshold || g.vy > 0.5)) {
+        if (dismissRef.current && (sgnRef.current * g.dy > threshold || sgnRef.current * g.vy > 0.5)) {
           dismissRef.current();
         } else {
           Animated.parallel([
@@ -353,89 +372,133 @@ function Sheet({
   const headerPan = !hasDetents && dismissible ? pan.panHandlers : {};
   const pushScale = pushAnim.interpolate({ inputRange: [0, 1], outputRange: [1, 0.955] });
   const pushLift = pushAnim.interpolate({ inputRange: [0, 1], outputRange: [0, -10] });
+  const titleRef = React.useRef(null);
+  const panelRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!mounted || !actualOpen || Platform.OS === "web") return;
+    const node = titleRef.current ?? panelRef.current;
+    const tag = node ? findNodeHandle(node) : null;
+    if (tag !== null) AccessibilityInfo.setAccessibilityFocus(tag);
+  }, [mounted, actualOpen]);
+  const onGrabberKey = (event) => {
+    const last = detentList.length - 1;
+    let next = null;
+    if (event.key === "ArrowUp" || event.key === "ArrowRight") next = activeIndex + 1;
+    else if (event.key === "ArrowDown" || event.key === "ArrowLeft") next = activeIndex - 1;
+    else if (event.key === "Home") next = 0;
+    else if (event.key === "End") next = last;
+    if (next === null) return;
+    event.preventDefault?.();
+    commitDetent(next);
+  };
   const onDetentAction = (name) => {
     if (name === "increment") commitDetent(activeIndex + 1);
     else if (name === "decrement") commitDetent(activeIndex - 1);
   };
-  return /* @__PURE__ */ jsx(
-    Modal,
-    {
-      visible: mounted,
-      transparent: true,
-      animationType: "none",
-      onRequestClose: requestDismiss,
-      statusBarTranslucent: true,
-      children: /* @__PURE__ */ jsxs(View, { style: styles.root, children: [
-        /* @__PURE__ */ jsx(
-          Animated.View,
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    inline ? null : /* @__PURE__ */ jsx(
+      Animated.View,
+      {
+        style: [StyleSheet.absoluteFill, styles.overlay, { opacity: overlayOpacity }],
+        children: dismissible ? /* @__PURE__ */ jsx(
+          Pressable,
           {
-            style: [StyleSheet.absoluteFill, styles.overlay, { opacity: overlayOpacity }],
-            children: dismissible ? /* @__PURE__ */ jsx(
-              Pressable,
-              {
-                style: StyleSheet.absoluteFill,
-                accessibilityRole: "button",
-                accessibilityLabel: closeLabel,
-                onPress: requestDismiss
-              }
-            ) : null
+            style: StyleSheet.absoluteFill,
+            accessibilityRole: "button",
+            accessibilityLabel: closeLabel ?? labels.close,
+            onPress: requestDismiss
           }
-        ),
-        /* @__PURE__ */ jsxs(
-          Animated.View,
+        ) : null
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Animated.View,
+      {
+        ref: panelRef,
+        role: "dialog",
+        accessibilityViewIsModal: true,
+        accessibilityLabel: title,
+        onLayout: onPanelLayout,
+        style: [
+          styles.panel,
+          side === "top" ? styles.panelTop : null,
+          inline ? styles.panelInline : null,
+          footer != null ? styles.panelWithFooter : null,
+          hasDetents ? { height: detentHeight, maxHeight: "96%" } : (
+            // An inline sheet sizes its own root, so a percentage cap would resolve against
+            // the panel's own height and clip its content.
+            inline ? null : styles.panelAuto
+          ),
           {
-            role: "dialog",
-            accessibilityViewIsModal: true,
-            accessibilityLabel: title,
-            onLayout: onPanelLayout,
-            style: [
-              styles.panel,
-              footer != null ? styles.panelWithFooter : null,
-              hasDetents ? { height: detentHeight, maxHeight: "96%" } : styles.panelAuto,
+            opacity: panelOpacity,
+            transform: [{ translateY }, { translateY: pushLift }, { scale: pushScale }]
+          }
+        ],
+        children: [
+          /* @__PURE__ */ jsxs(View, { style: styles.header, ...headerPan, children: [
+            hasDetents ? /* @__PURE__ */ jsx(
+              View,
               {
-                opacity: panelOpacity,
-                transform: [{ translateY }, { translateY: pushLift }, { scale: pushScale }]
+                accessibilityRole: "adjustable",
+                accessibilityLabel: grabberLabel ?? labels.grabber,
+                "aria-valuemin": 0,
+                "aria-valuemax": detentList.length - 1,
+                "aria-valuenow": activeIndex,
+                "aria-valuetext": detentList[activeIndex] ? labels.detents[detentList[activeIndex]] : void 0,
+                accessibilityActions: [{ name: "increment" }, { name: "decrement" }],
+                onAccessibilityAction: (e) => onDetentAction(e.nativeEvent.actionName),
+                focusable: true,
+                ...{ onKeyDown: onGrabberKey },
+                style: styles.grabberHit,
+                ...grabberPan.panHandlers,
+                children: /* @__PURE__ */ jsx(View, { style: styles.handle })
               }
-            ],
-            children: [
-              /* @__PURE__ */ jsxs(View, { style: styles.header, ...headerPan, children: [
-                hasDetents ? /* @__PURE__ */ jsx(
-                  View,
-                  {
-                    accessibilityRole: "adjustable",
-                    accessibilityLabel: grabberLabel,
-                    "aria-valuemin": 0,
-                    "aria-valuemax": detentList.length - 1,
-                    "aria-valuenow": activeIndex,
-                    "aria-valuetext": detentList[activeIndex],
-                    accessibilityActions: [{ name: "increment" }, { name: "decrement" }],
-                    onAccessibilityAction: (e) => onDetentAction(e.nativeEvent.actionName),
-                    style: styles.grabberHit,
-                    ...grabberPan.panHandlers,
-                    children: /* @__PURE__ */ jsx(View, { style: styles.handle })
-                  }
-                ) : /* @__PURE__ */ jsx(View, { style: styles.handle }),
-                title ? (
-                  // `role="heading"` + a cast `aria-level`, the idiom this repo
-                  // already uses in `calendar.tsx` — RN's own `accessibilityRole`
-                  // carries no level, and react-native-web needs the ARIA pair.
-                  /* @__PURE__ */ jsx(Text, { style: styles.title, role: "heading", ...{ "aria-level": titleLevel }, children: title })
-                ) : null
-              ] }),
+            ) : /* @__PURE__ */ jsx(View, { style: styles.handle }),
+            title ? (
+              // `role="heading"` + a cast `aria-level`, the idiom this repo
+              // already uses in `calendar.tsx` — RN's own `accessibilityRole`
+              // carries no level, and react-native-web needs the ARIA pair.
               /* @__PURE__ */ jsx(
-                ScrollView,
+                Text,
                 {
-                  style: styles.scroll,
-                  contentContainerStyle: styles.content,
-                  showsVerticalScrollIndicator: false,
-                  children
+                  ref: titleRef,
+                  style: [
+                    styles.title,
+                    resolveTextRole(theme, "dialogTitle", isAndroidIdiom(theme)),
+                    theme.font.display !== theme.font.sans ? { fontFamily: theme.font.display } : null
+                  ],
+                  role: "heading",
+                  ...{ "aria-level": titleLevel },
+                  children: title
                 }
-              ),
-              footer != null ? /* @__PURE__ */ jsx(View, { style: [styles.footer, { paddingBottom: safeAreaBottom }], children: footer }) : null
-            ]
-          }
-        )
-      ] })
+              )
+            ) : null
+          ] }),
+          /* @__PURE__ */ jsx(
+            ScrollView,
+            {
+              style: styles.scroll,
+              contentContainerStyle: styles.content,
+              showsVerticalScrollIndicator: false,
+              focusable: true,
+              children
+            }
+          ),
+          footer != null ? /* @__PURE__ */ jsx(View, { style: [styles.footer, { paddingBottom: safeAreaBottom }], children: footer }) : null
+        ]
+      }
+    )
+  ] });
+  if (inline) return mounted ? /* @__PURE__ */ jsx(View, { style: styles.inlineRoot, children: body }) : /* @__PURE__ */ jsx(Fragment, {});
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      visible: mounted,
+      transparent: true,
+      animationType: "none",
+      onRequestClose: requestDismiss,
+      statusBarTranslucent: true,
+      children: /* @__PURE__ */ jsx(View, { style: [styles.root, side === "top" ? styles.rootTop : null], children: body })
     }
   );
 }
@@ -444,9 +507,26 @@ var sheet = createStyleSheet((theme) => ({
     flex: 1,
     justifyContent: "flex-end"
   },
+  rootTop: {
+    justifyContent: "flex-start"
+  },
+  inlineRoot: {
+    alignSelf: "stretch"
+  },
   overlay: {
     backgroundColor: theme.color.scrim
   },
+  panelTop: {
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+    borderBottomLeftRadius: theme.radius.xl,
+    borderBottomRightRadius: theme.radius.xl
+  },
+  panelInline: {
+    shadowOpacity: 0,
+    elevation: 0,
+    boxShadow: "none"
+  },
   // 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
@@ -455,8 +535,8 @@ var sheet = createStyleSheet((theme) => ({
     backgroundColor: theme.color.surface,
     borderTopLeftRadius: theme.radius.xl,
     borderTopRightRadius: theme.radius.xl,
-    // Reference (buildSheet): `padding:8px 0 22px` — bottom is 22px.
-    paddingBottom: theme.space[22],
+    // Final 04: sheet padding 24, same as the dialog shell.
+    paddingBottom: theme.space[24],
     ...theme.shadow.lg
   },
   // A footer owns the bottom edge, so the panel's own bottom padding would only
@@ -494,10 +574,7 @@ var sheet = createStyleSheet((theme) => ({
   title: {
     alignSelf: "stretch",
     marginTop: theme.space.s2,
-    fontFamily: theme.font.display,
-    fontWeight: theme.font.displayWeight,
-    // Reference (buildSheet): `font-size:24px` — 24px, read from the ramp rather than hardcoded.
-    fontSize: theme.fontSize[24],
+    fontFamily: theme.font.sans,
     color: theme.color.text
   },
   scroll: {
@@ -513,11 +590,11 @@ var sheet = createStyleSheet((theme) => ({
     flexShrink: 0
   },
   content: {
-    // Reference (buildSheet) content: `padding:6px 22px 20px;gap:14px`.
-    // 22px and 14px are steps of the spacing ramp.
-    paddingHorizontal: theme.space[22],
+    // Final 04: padding 24, content gap 12 (the dialog card's gap), so a sheet
+    // and a dialog share one rhythm.
+    paddingHorizontal: theme.space[24],
     paddingTop: theme.space[6],
-    gap: theme.space[14]
+    gap: theme.space.s3
   }
 }));