@webority-technologies/mobile 0.0.21 → 0.0.23

package/lib/commonjs/hooks/useControllableState.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useControllableState = useControllableState;
+var _react = require("react");
+/**
+ * Bridges controlled and uncontrolled usage for a value+onChange pair. When
+ * `value` is provided the component is controlled (the hook just forwards it
+ * and calls `onChange`); otherwise the hook owns the state, seeded from
+ * `defaultValue`. The controlled/uncontrolled decision is locked on first
+ * render so a component never flips modes mid-life.
+ */
+function useControllableState({
+  value,
+  defaultValue,
+  onChange
+}) {
+  const isControlledRef = (0, _react.useRef)(value !== undefined);
+  const isControlled = isControlledRef.current;
+  const [internal, setInternal] = (0, _react.useState)(defaultValue);
+  const current = isControlled ? value : internal;
+  const setValue = (0, _react.useCallback)(next => {
+    if (!isControlled) setInternal(next);
+    onChange?.(next);
+  }, [isControlled, onChange]);
+  return [current, setValue];
+}
+//# sourceMappingURL=useControllableState.js.map

package/lib/commonjs/hooks/useReducedMotion.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useReducedMotion = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+/**
+ * Tracks the OS "Reduce Motion" accessibility setting. The library's
+ * ThemeProvider uses this to collapse `theme.motion` (durations → 0, springs →
+ * near-instant) so animations don't trigger vestibular discomfort; consumers
+ * can also read it directly to swap an animated path for a static one.
+ */
+const useReducedMotion = () => {
+  const [reduced, setReduced] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    let mounted = true;
+    _reactNative.AccessibilityInfo.isReduceMotionEnabled().then(value => {
+      if (mounted) setReduced(value);
+    });
+    const sub = _reactNative.AccessibilityInfo.addEventListener('reduceMotionChanged', value => setReduced(value));
+    return () => {
+      mounted = false;
+      sub.remove();
+    };
+  }, []);
+  return reduced;
+};
+exports.useReducedMotion = useReducedMotion;
+//# sourceMappingURL=useReducedMotion.js.map

package/lib/commonjs/index.js

@@ -42,6 +42,8 @@ var _exportNames = {
   useToggle: true,
   useDebounce: true,
   usePressAnimation: true,
+  useReducedMotion: true,
+  useControllableState: true,
   ScreenDimensions: true,
   Breakpoints: true,
   Responsive: true,
@@ -83,6 +85,16 @@ var _exportNames = {
   isBetween: true,
   minLength: true,
   maxLength: true,
+  useForm: true,
+  useField: true,
+  useFieldArray: true,
+  Form: true,
+  useFormContext: true,
+  useOptionalFormContext: true,
+  rules: true,
+  getPath: true,
+  setPath: true,
+  deletePath: true,
   useNetworkStatus: true,
   getNetworkStatus: true,
   addNetworkStatusListener: true,
@@ -95,6 +107,12 @@ Object.defineProperty(exports, "Breakpoints", {
     return _index7.Breakpoints;
   }
 });
+Object.defineProperty(exports, "Form", {
+  enumerable: true,
+  get: function () {
+    return _index0.Form;
+  }
+});
 Object.defineProperty(exports, "Logger", {
   enumerable: true,
   get: function () {
@@ -110,7 +128,7 @@ Object.defineProperty(exports, "Margin", {
 Object.defineProperty(exports, "NetworkStatusBanner", {
   enumerable: true,
   get: function () {
-    return _index0.NetworkStatusBanner;
+    return _index1.NetworkStatusBanner;
   }
 });
 Object.defineProperty(exports, "Padding", {
@@ -122,7 +140,7 @@ Object.defineProperty(exports, "Padding", {
 Object.defineProperty(exports, "Permissions", {
   enumerable: true,
   get: function () {
-    return _index1.Permissions;
+    return _index10.Permissions;
   }
 });
 Object.defineProperty(exports, "Responsive", {
@@ -164,7 +182,7 @@ Object.defineProperty(exports, "VersionCheck", {
 Object.defineProperty(exports, "addNetworkStatusListener", {
   enumerable: true,
   get: function () {
-    return _index0.addNetworkStatusListener;
+    return _index1.addNetworkStatusListener;
   }
 });
 Object.defineProperty(exports, "compressImage", {
@@ -185,6 +203,12 @@ Object.defineProperty(exports, "decodeJWT", {
     return _jwt.decodeJWT;
   }
 });
+Object.defineProperty(exports, "deletePath", {
+  enumerable: true,
+  get: function () {
+    return _index0.deletePath;
+  }
+});
 Object.defineProperty(exports, "formatCompactNumber", {
   enumerable: true,
   get: function () {
@@ -272,7 +296,13 @@ Object.defineProperty(exports, "getJWTExpiry", {
 Object.defineProperty(exports, "getNetworkStatus", {
   enumerable: true,
   get: function () {
-    return _index0.getNetworkStatus;
+    return _index1.getNetworkStatus;
+  }
+});
+Object.defineProperty(exports, "getPath", {
+  enumerable: true,
+  get: function () {
+    return _index0.getPath;
   }
 });
 Object.defineProperty(exports, "getTheme", {
@@ -485,6 +515,12 @@ Object.defineProperty(exports, "resetTheme", {
     return _index5.resetTheme;
   }
 });
+Object.defineProperty(exports, "rules", {
+  enumerable: true,
+  get: function () {
+    return _index0.rules;
+  }
+});
 Object.defineProperty(exports, "setColorMode", {
   enumerable: true,
   get: function () {
@@ -503,6 +539,12 @@ Object.defineProperty(exports, "setHapticImplementation", {
     return _index7.setHapticImplementation;
   }
 });
+Object.defineProperty(exports, "setPath", {
+  enumerable: true,
+  get: function () {
+    return _index0.setPath;
+  }
+});
 Object.defineProperty(exports, "setRemoteLogger", {
   enumerable: true,
   get: function () {
@@ -545,16 +587,52 @@ Object.defineProperty(exports, "triggerHaptic", {
     return _index7.triggerHaptic;
   }
 });
+Object.defineProperty(exports, "useControllableState", {
+  enumerable: true,
+  get: function () {
+    return _index6.useControllableState;
+  }
+});
 Object.defineProperty(exports, "useDebounce", {
   enumerable: true,
   get: function () {
     return _index6.useDebounce;
   }
 });
+Object.defineProperty(exports, "useField", {
+  enumerable: true,
+  get: function () {
+    return _index0.useField;
+  }
+});
+Object.defineProperty(exports, "useFieldArray", {
+  enumerable: true,
+  get: function () {
+    return _index0.useFieldArray;
+  }
+});
+Object.defineProperty(exports, "useForm", {
+  enumerable: true,
+  get: function () {
+    return _index0.useForm;
+  }
+});
+Object.defineProperty(exports, "useFormContext", {
+  enumerable: true,
+  get: function () {
+    return _index0.useFormContext;
+  }
+});
 Object.defineProperty(exports, "useNetworkStatus", {
   enumerable: true,
   get: function () {
-    return _index0.useNetworkStatus;
+    return _index1.useNetworkStatus;
+  }
+});
+Object.defineProperty(exports, "useOptionalFormContext", {
+  enumerable: true,
+  get: function () {
+    return _index0.useOptionalFormContext;
   }
 });
 Object.defineProperty(exports, "usePressAnimation", {
@@ -563,6 +641,12 @@ Object.defineProperty(exports, "usePressAnimation", {
     return _index6.usePressAnimation;
   }
 });
+Object.defineProperty(exports, "useReducedMotion", {
+  enumerable: true,
+  get: function () {
+    return _index6.useReducedMotion;
+  }
+});
 Object.defineProperty(exports, "useTheme", {
   enumerable: true,
   get: function () {
@@ -609,17 +693,18 @@ var _index6 = require("./hooks/index.js");
 var _index7 = require("./utils/index.js");
 var _index8 = require("./formatters/index.js");
 var _index9 = require("./validators/index.js");
-var _index0 = require("./network/index.js");
-var _index1 = require("./permissions/index.js");
-var _index10 = require("./components/index.js");
-Object.keys(_index10).forEach(function (key) {
+var _index0 = require("./form/index.js");
+var _index1 = require("./network/index.js");
+var _index10 = require("./permissions/index.js");
+var _index11 = require("./components/index.js");
+Object.keys(_index11).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _index10[key]) return;
+  if (key in exports && exports[key] === _index11[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _index10[key];
+      return _index11[key];
     }
   });
 });

package/lib/commonjs/theme/ThemeContext.js

@@ -8,8 +8,31 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _tokens = require("./tokens.js");
 var _merge = require("./merge.js");
+var _useReducedMotion = require("../hooks/useReducedMotion.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const REDUCED_SPRING = {
+  damping: 100,
+  stiffness: 1000,
+  mass: 1
+};
+// Reduce Motion: collapse timed animations to instant and make springs settle in
+// ~1 frame, so vestibular-sensitive users aren't subjected to slides/scales/bounces.
+const collapseMotion = motion => ({
+  ...motion,
+  duration: {
+    instant: 0,
+    fast: 0,
+    normal: 0,
+    slow: 0,
+    slower: 0
+  },
+  spring: {
+    gentle: REDUCED_SPRING,
+    bouncy: REDUCED_SPRING,
+    snappy: REDUCED_SPRING
+  }
+});
 const defaultValue = {
   theme: _tokens.lightTheme,
   mode: 'light',
@@ -35,11 +58,16 @@ const ThemeProvider = ({
     return () => sub.remove();
   }, []);
   const mode = preference === 'system' ? systemMode : preference;
+  const reduceMotion = (0, _useReducedMotion.useReducedMotion)();
   const theme = (0, _react.useMemo)(() => {
     const base = mode === 'dark' ? _tokens.darkTheme : _tokens.lightTheme;
     const overrides = mode === 'dark' ? darkOverrides : lightOverrides;
-    return overrides ? (0, _merge.mergeTheme)(base, overrides) : base;
-  }, [mode, lightOverrides, darkOverrides]);
+    const merged = overrides ? (0, _merge.mergeTheme)(base, overrides) : base;
+    return reduceMotion ? {
+      ...merged,
+      motion: collapseMotion(merged.motion)
+    } : merged;
+  }, [mode, lightOverrides, darkOverrides, reduceMotion]);
   const value = (0, _react.useMemo)(() => ({
     theme,
     mode,

package/lib/commonjs/theme/tokens.js

@@ -525,6 +525,12 @@ const lightTheme = exports.lightTheme = {
     warning: '#F59E0B',
     error: '#E5484D',
     info: '#3B82F6',
+    onPrimary: '#FFFFFF',
+    onSecondary: '#0F0F1A',
+    onSuccess: '#FFFFFF',
+    onWarning: '#0F0F1A',
+    onError: '#FFFFFF',
+    onInfo: '#FFFFFF',
     text: {
       primary: '#0F0F1A',
       secondary: '#52525B',
@@ -580,6 +586,12 @@ const darkTheme = exports.darkTheme = {
     warning: '#FBBF24',
     error: '#F87171',
     info: '#60A5FA',
+    onPrimary: '#0F0F1A',
+    onSecondary: '#FAFAFA',
+    onSuccess: '#0F0F1A',
+    onWarning: '#0F0F1A',
+    onError: '#0F0F1A',
+    onInfo: '#0F0F1A',
     text: {
       primary: '#FAFAFA',
       secondary: '#B4B4BB',

package/lib/module/components/Accordion/Accordion.js

@@ -108,7 +108,7 @@ const Accordion = props => {
     // Skip animation when state matches the previous value (e.g. on mount).
     if (lastExpandedRef.current === expanded) return;
     lastExpandedRef.current = expanded;
-    Animated.parallel([Animated.timing(heightAnim, {
+    const anim = Animated.parallel([Animated.timing(heightAnim, {
       toValue: expanded ? 1 : 0,
       duration: theme.motion.duration.normal,
       easing: Easing.bezier(...theme.motion.easing.standard),
@@ -127,7 +127,9 @@ const Accordion = props => {
       duration: theme.motion.duration.normal,
       easing: Easing.bezier(...theme.motion.easing.standard),
       useNativeDriver: false
-    })]).start();
+    })]);
+    anim.start();
+    return () => anim.stop();
   }, [expanded, heightAnim, opacityAnim, rotateAnim, theme.motion]);
   const onContentLayout = useCallback(e => {
     const h = e.nativeEvent.layout.height;

package/lib/module/components/Avatar/Avatar.js

@@ -208,13 +208,15 @@ const AvatarGroupItem = ({
 }) => {
   const opacity = useRef(createAnimatedValue(0)).current;
   useEffect(() => {
-    Animated.timing(opacity, {
+    const anim = Animated.timing(opacity, {
       toValue: 1,
       duration: ENTRANCE_DURATION_MS,
       delay,
       easing: Easing.out(Easing.cubic),
       useNativeDriver: true
-    }).start();
+    });
+    anim.start();
+    return () => anim.stop();
   }, [delay, opacity]);
   return /*#__PURE__*/_jsx(Animated.View, {
     style: [groupStyles.item, {

package/lib/module/components/Badge/Badge.js

@@ -10,22 +10,22 @@ const toneFor = (theme, tone) => {
     case 'primary':
       return {
         background: theme.colors.primary,
-        text: theme.colors.text.inverse
+        text: theme.colors.onPrimary
       };
     case 'success':
       return {
         background: theme.colors.success,
-        text: theme.colors.text.inverse
+        text: theme.colors.onSuccess
       };
     case 'warning':
       return {
         background: theme.colors.warning,
-        text: theme.colors.text.inverse
+        text: theme.colors.onWarning
       };
     case 'info':
       return {
         background: theme.colors.info,
-        text: theme.colors.text.inverse
+        text: theme.colors.onInfo
       };
     case 'neutral':
       return {
@@ -36,7 +36,7 @@ const toneFor = (theme, tone) => {
     default:
       return {
         background: theme.colors.error,
-        text: theme.colors.text.inverse
+        text: theme.colors.onError
       };
   }
 };

package/lib/module/components/Banner/Banner.js

@@ -39,9 +39,10 @@ const Banner = /*#__PURE__*/forwardRef((props, ref) => {
       isFirstRun.current = false;
       if (!animateMount) return;
     }
+    let anim;
     if (visible) {
       setMounted(true);
-      Animated.parallel([Animated.timing(translateY, {
+      anim = Animated.parallel([Animated.timing(translateY, {
         toValue: 0,
         duration: theme.motion.duration.normal,
         useNativeDriver: true
@@ -49,9 +50,10 @@ const Banner = /*#__PURE__*/forwardRef((props, ref) => {
         toValue: 1,
         duration: theme.motion.duration.normal,
         useNativeDriver: true
-      })]).start();
+      })]);
+      anim.start();
     } else if (mounted) {
-      Animated.parallel([Animated.timing(translateY, {
+      anim = Animated.parallel([Animated.timing(translateY, {
         toValue: -20,
         duration: theme.motion.duration.fast,
         useNativeDriver: true
@@ -59,10 +61,12 @@ const Banner = /*#__PURE__*/forwardRef((props, ref) => {
         toValue: 0,
         duration: theme.motion.duration.fast,
         useNativeDriver: true
-      })]).start(() => {
+      })]);
+      anim.start(() => {
         setMounted(false);
       });
     }
+    return () => anim?.stop();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [visible]);
   if (!mounted) return null;

package/lib/module/components/BottomNavigation/BottomNavigation.js

@@ -46,7 +46,7 @@ const BottomNavigation = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     tabs,
     activeTab,
-    onTabPress,
+    onChange,
     haptic = 'selection',
     showLabels = true,
     variant = 'pill',
@@ -95,12 +95,14 @@ const BottomNavigation = /*#__PURE__*/forwardRef((props, ref) => {
   // this value directly.
   useEffect(() => {
     if (tabWidth <= 0) return;
-    Animated.spring(indicatorTranslateX, {
+    const anim = Animated.spring(indicatorTranslateX, {
       toValue: activeIndex * tabWidth,
       tension: 120,
       friction: 14,
       useNativeDriver: true
-    }).start();
+    });
+    anim.start();
+    return () => anim.stop();
   }, [activeIndex, tabWidth, indicatorTranslateX]);
   const handleLayout = e => {
     const total = e.nativeEvent.layout.width;
@@ -125,7 +127,7 @@ const BottomNavigation = /*#__PURE__*/forwardRef((props, ref) => {
         useNativeDriver: true
       })]).start();
     }
-    onTabPress(tab.key);
+    onChange(tab.key);
   };
   const paddingBottom = Math.max(8, insets.bottom);
   return /*#__PURE__*/_jsx(View, {

package/lib/module/components/BottomSheet/BottomSheet.js

@@ -19,14 +19,40 @@
  * ref.current?.close();    // dismiss
  */
 
-import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import React, { createContext, forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { Dimensions, Keyboard, Modal, Platform, StyleSheet, View } from 'react-native';
 import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
 import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTheme } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/index.js";
+
+/**
+ * State + actions exposed to anything rendered inside a `<BottomSheet>` —
+ * including the `header` and `footer` slots. Read via `useBottomSheet()`.
+ *
+ * `snapIndex` is the JS-thread mirror of the current snap point. -1 means the
+ * sheet is closed (mid-close-animation included). Use it to drive footer
+ * button enable state, conditional headers, etc. If you need per-frame
+ * progress (e.g. fade a header in as the sheet expands), reach for the
+ * animated value via a future enhancement — not exposed today to keep the
+ * surface minimal.
+ */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const BottomSheetContext = /*#__PURE__*/createContext(null);
+
+/**
+ * Access the enclosing `<BottomSheet>`'s state and imperative actions.
+ * Must be called from a component rendered inside a `<BottomSheet>` (as
+ * `children`, `header`, or `footer`).
+ */
+export const useBottomSheet = () => {
+  const ctx = useContext(BottomSheetContext);
+  if (!ctx) {
+    throw new Error('useBottomSheet must be used inside a <BottomSheet>.');
+  }
+  return ctx;
+};
 const SPRING_CONFIG = {
   damping: 20,
   stiffness: 240,
@@ -46,6 +72,10 @@ const BottomSheet = /*#__PURE__*/forwardRef((props, ref) => {
     mode = 'modal',
     handleIndicatorStyle,
     containerStyle,
+    header,
+    footer,
+    headerStyle,
+    footerStyle,
     children,
     accessibilityLabel,
     accessibilityViewIsModal,
@@ -68,7 +98,6 @@ const BottomSheet = /*#__PURE__*/forwardRef((props, ref) => {
     return () => sub.remove();
   }, []);
   const closedY = screenHeight; // fully off-screen
-  const minSnapPoint = resolvedSnapPoints[0] ?? 0;
   const maxSnapPoint = resolvedSnapPoints[resolvedSnapPoints.length - 1] ?? 0;
 
   // translateY: 0 = top of screen, screenHeight = fully closed.
@@ -102,6 +131,13 @@ const BottomSheet = /*#__PURE__*/forwardRef((props, ref) => {
     currentIndexShared.value = next;
     onChange?.(next);
   }, [currentIndex, currentIndexShared, onChange]);
+  const markAnimationDone = useCallback(() => {
+    isAnimatingRef.current = false;
+    // If we just finished a close animation, unmount the sheet wrapper.
+    if (currentIndexShared.value < 0) {
+      if (mode === 'modal') setModalVisible(false);else setInlineMounted(false);
+    }
+  }, [mode, currentIndexShared]);
   const animateTo = useCallback((to, fromIndex, toIndex) => {
     isAnimatingRef.current = true;
     onAnimate?.(fromIndex, toIndex);
@@ -112,14 +148,7 @@ const BottomSheet = /*#__PURE__*/forwardRef((props, ref) => {
         runOnJS(markAnimationDone)();
       }
     });
-  }, [onAnimate, translateY]);
-  const markAnimationDone = useCallback(() => {
-    isAnimatingRef.current = false;
-    // If we just finished a close animation, unmount the sheet wrapper.
-    if (currentIndexShared.value < 0) {
-      if (mode === 'modal') setModalVisible(false);else setInlineMounted(false);
-    }
-  }, [mode, currentIndexShared]);
+  }, [onAnimate, translateY, markAnimationDone]);
   const expand = useCallback(idx => {
     const target = typeof idx === 'number' ? clamp(idx, 0, resolvedSnapPoints.length - 1) : currentIndex >= 0 ? currentIndex : 0;
     const fromIndex = currentIndexShared.value;
@@ -331,6 +360,13 @@ const BottomSheet = /*#__PURE__*/forwardRef((props, ref) => {
     if (!success) return;
     runOnJS(handleBackdropPress)();
   }), [handleBackdropPress]);
+  const contextValue = useMemo(() => ({
+    snapIndex: currentIndex,
+    snapPoints: resolvedSnapPoints,
+    expand,
+    collapse,
+    close
+  }), [currentIndex, resolvedSnapPoints, expand, collapse, close]);
 
   // Don't render the backdrop / sheet tree when the sheet is fully closed.
   // Inline: gated by `inlineMounted` (set in expand, cleared in
@@ -384,13 +420,23 @@ const BottomSheet = /*#__PURE__*/forwardRef((props, ref) => {
               backgroundColor: theme.components.bottomSheet?.handleColor ?? theme.colors.border.primary
             }, handleIndicatorStyle]
           })
+        }), header != null && /*#__PURE__*/_jsx(View, {
+          style: [styles.header, headerStyle],
+          children: header
         }), /*#__PURE__*/_jsx(View, {
           style: styles.content,
           children: children
+        }), footer != null && /*#__PURE__*/_jsx(View, {
+          style: [styles.footer, footerStyle],
+          children: footer
         })]
       })
     })]
   });
+  const wrappedTree = /*#__PURE__*/_jsx(BottomSheetContext.Provider, {
+    value: contextValue,
+    children: sheetTree
+  });
   if (mode === 'modal') {
     return /*#__PURE__*/_jsx(Modal, {
       transparent: true,
@@ -405,11 +451,11 @@ const BottomSheet = /*#__PURE__*/forwardRef((props, ref) => {
       supportedOrientations: ['portrait', 'landscape'],
       children: Platform.OS === 'android' ? /*#__PURE__*/_jsx(GestureHandlerRootView, {
         style: styles.modalRoot,
-        children: sheetTree
-      }) : sheetTree
+        children: wrappedTree
+      }) : wrappedTree
     });
   }
-  return sheetTree;
+  return wrappedTree;
 });
 BottomSheet.displayName = 'BottomSheet';
 
@@ -454,6 +500,15 @@ const buildStyles = _theme => StyleSheet.create({
     paddingTop: 10,
     paddingBottom: 8
   },
+  header: {
+    // No opinionated padding — slot owns its own styling. Sits between the
+    // drag handle and the scrollable content; does not flex.
+  },
+  footer: {
+    // Pinned to the bottom of the sheet (above safe-area inset, which lives
+    // on the sheet's paddingBottom). Does not flex, does not scroll with
+    // content. Rides with the keyboard via the sheet's `top` animation.
+  },
   handle: {
     width: 36,
     height: 4,

package/lib/module/components/BottomSheet/index.js

@@ -1,4 +1,4 @@
 "use strict";
 
-export { BottomSheet, default } from "./BottomSheet.js";
+export { BottomSheet, default, useBottomSheet } from "./BottomSheet.js";
 //# sourceMappingURL=index.js.map