@webority-technologies/mobile 0.0.21 → 0.0.22

package/lib/commonjs/components/BottomSheet/BottomSheet.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.BottomSheet = void 0;
+exports.useBottomSheet = exports.default = exports.BottomSheet = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _reactNativeGestureHandler = require("react-native-gesture-handler");
@@ -32,6 +32,33 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * ref.current?.close();    // dismiss
  */
 
+/**
+ * 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.
+ */
+
+const BottomSheetContext = /*#__PURE__*/(0, _react.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`).
+ */
+const useBottomSheet = () => {
+  const ctx = (0, _react.useContext)(BottomSheetContext);
+  if (!ctx) {
+    throw new Error('useBottomSheet must be used inside a <BottomSheet>.');
+  }
+  return ctx;
+};
+exports.useBottomSheet = useBottomSheet;
 const SPRING_CONFIG = {
   damping: 20,
   stiffness: 240,
@@ -51,6 +78,10 @@ const BottomSheet = exports.BottomSheet = /*#__PURE__*/(0, _react.forwardRef)((p
     mode = 'modal',
     handleIndicatorStyle,
     containerStyle,
+    header,
+    footer,
+    headerStyle,
+    footerStyle,
     children,
     accessibilityLabel,
     accessibilityViewIsModal,
@@ -336,6 +367,13 @@ const BottomSheet = exports.BottomSheet = /*#__PURE__*/(0, _react.forwardRef)((p
     if (!success) return;
     (0, _reactNativeReanimated.runOnJS)(handleBackdropPress)();
   }), [handleBackdropPress]);
+  const contextValue = (0, _react.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
@@ -389,13 +427,23 @@ const BottomSheet = exports.BottomSheet = /*#__PURE__*/(0, _react.forwardRef)((p
               backgroundColor: theme.components.bottomSheet?.handleColor ?? theme.colors.border.primary
             }, handleIndicatorStyle]
           })
+        }), header != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [styles.header, headerStyle],
+          children: header
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
           style: styles.content,
           children: children
+        }), footer != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [styles.footer, footerStyle],
+          children: footer
         })]
       })
     })]
   });
+  const wrappedTree = /*#__PURE__*/(0, _jsxRuntime.jsx)(BottomSheetContext.Provider, {
+    value: contextValue,
+    children: sheetTree
+  });
   if (mode === 'modal') {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
       transparent: true,
@@ -410,11 +458,11 @@ const BottomSheet = exports.BottomSheet = /*#__PURE__*/(0, _react.forwardRef)((p
       supportedOrientations: ['portrait', 'landscape'],
       children: _reactNative.Platform.OS === 'android' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureHandlerRootView, {
         style: styles.modalRoot,
-        children: sheetTree
-      }) : sheetTree
+        children: wrappedTree
+      }) : wrappedTree
     });
   }
-  return sheetTree;
+  return wrappedTree;
 });
 BottomSheet.displayName = 'BottomSheet';
 
@@ -459,6 +507,15 @@ const buildStyles = _theme => _reactNative.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/commonjs/components/BottomSheet/index.js

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "default", {
     return _BottomSheet.default;
   }
 });
+Object.defineProperty(exports, "useBottomSheet", {
+  enumerable: true,
+  get: function () {
+    return _BottomSheet.useBottomSheet;
+  }
+});
 var _BottomSheet = _interopRequireWildcard(require("./BottomSheet.js"));
 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); }
 //# sourceMappingURL=index.js.map

package/lib/commonjs/components/index.js

@@ -345,6 +345,12 @@ Object.defineProperty(exports, "toast", {
     return _index41.toast;
   }
 });
+Object.defineProperty(exports, "useBottomSheet", {
+  enumerable: true,
+  get: function () {
+    return _index6.useBottomSheet;
+  }
+});
 Object.defineProperty(exports, "useReduceMotion", {
   enumerable: true,
   get: function () {

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,
@@ -331,6 +361,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 +421,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 +452,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 +501,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

package/lib/module/components/index.js

@@ -5,7 +5,7 @@ export { Avatar, AvatarGroup } from "./Avatar/index.js";
 export { Badge } from "./Badge/index.js";
 export { Banner } from "./Banner/index.js";
 export { BottomNavigation } from "./BottomNavigation/index.js";
-export { BottomSheet } from "./BottomSheet/index.js";
+export { BottomSheet, useBottomSheet } from "./BottomSheet/index.js";
 export { Button } from "./Button/index.js";
 export { Card } from "./Card/index.js";
 export { Carousel } from "./Carousel/index.js";

package/lib/typescript/commonjs/components/BottomSheet/BottomSheet.d.ts

@@ -56,6 +56,23 @@ export interface BottomSheetProps {
     mode?: BottomSheetMode;
     handleIndicatorStyle?: StyleProp<ViewStyle>;
     containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Sticky region rendered between the drag handle and the scrollable content.
+     * Does not scroll with `children`. Can call `useBottomSheet()` to read sheet
+     * state.
+     */
+    header?: React.ReactNode;
+    /**
+     * Sticky region pinned to the bottom of the sheet, above the safe-area
+     * inset. Does not scroll with `children`, and rides up with the keyboard
+     * when `keyboardBehavior='shift'` (no extra wiring needed — the whole sheet
+     * shifts). Typical use: action button rows.
+     */
+    footer?: React.ReactNode;
+    /** Style applied to the header region wrapper. */
+    headerStyle?: StyleProp<ViewStyle>;
+    /** Style applied to the footer region wrapper. */
+    footerStyle?: StyleProp<ViewStyle>;
     children?: React.ReactNode;
     accessibilityLabel?: string;
     accessibilityViewIsModal?: boolean;
@@ -66,6 +83,30 @@ export interface BottomSheetRef {
     collapse: () => void;
     close: () => void;
 }
+/**
+ * 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.
+ */
+export interface BottomSheetContextValue {
+    snapIndex: number;
+    snapPoints: number[];
+    expand: (index?: number) => void;
+    collapse: () => void;
+    close: () => void;
+}
+/**
+ * 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 declare const useBottomSheet: () => BottomSheetContextValue;
 declare const BottomSheet: React.ForwardRefExoticComponent<BottomSheetProps & React.RefAttributes<BottomSheetRef>>;
 export { BottomSheet };
 export default BottomSheet;

package/lib/typescript/commonjs/components/BottomSheet/index.d.ts

@@ -1,3 +1,3 @@
-export { BottomSheet, default } from './BottomSheet';
-export type { BottomSheetProps, BottomSheetRef, SnapPoint } from './BottomSheet';
+export { BottomSheet, default, useBottomSheet } from './BottomSheet';
+export type { BottomSheetContextValue, BottomSheetProps, BottomSheetRef, SnapPoint } from './BottomSheet';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/commonjs/components/index.d.ts

@@ -8,8 +8,8 @@ export { Banner } from './Banner';
 export type { BannerProps, BannerVariant, BannerAction } from './Banner';
 export { BottomNavigation } from './BottomNavigation';
 export type { BottomNavigationProps, TabConfig } from './BottomNavigation';
-export { BottomSheet } from './BottomSheet';
-export type { BottomSheetProps, BottomSheetRef } from './BottomSheet';
+export { BottomSheet, useBottomSheet } from './BottomSheet';
+export type { BottomSheetContextValue, BottomSheetProps, BottomSheetRef } from './BottomSheet';
 export { Button } from './Button';
 export type { ButtonProps, ButtonVariant, ButtonTone, ButtonSize } from './Button';
 export { Card } from './Card';

package/lib/typescript/module/components/BottomSheet/BottomSheet.d.ts

@@ -56,6 +56,23 @@ export interface BottomSheetProps {
     mode?: BottomSheetMode;
     handleIndicatorStyle?: StyleProp<ViewStyle>;
     containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Sticky region rendered between the drag handle and the scrollable content.
+     * Does not scroll with `children`. Can call `useBottomSheet()` to read sheet
+     * state.
+     */
+    header?: React.ReactNode;
+    /**
+     * Sticky region pinned to the bottom of the sheet, above the safe-area
+     * inset. Does not scroll with `children`, and rides up with the keyboard
+     * when `keyboardBehavior='shift'` (no extra wiring needed — the whole sheet
+     * shifts). Typical use: action button rows.
+     */
+    footer?: React.ReactNode;
+    /** Style applied to the header region wrapper. */
+    headerStyle?: StyleProp<ViewStyle>;
+    /** Style applied to the footer region wrapper. */
+    footerStyle?: StyleProp<ViewStyle>;
     children?: React.ReactNode;
     accessibilityLabel?: string;
     accessibilityViewIsModal?: boolean;
@@ -66,6 +83,30 @@ export interface BottomSheetRef {
     collapse: () => void;
     close: () => void;
 }
+/**
+ * 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.
+ */
+export interface BottomSheetContextValue {
+    snapIndex: number;
+    snapPoints: number[];
+    expand: (index?: number) => void;
+    collapse: () => void;
+    close: () => void;
+}
+/**
+ * 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 declare const useBottomSheet: () => BottomSheetContextValue;
 declare const BottomSheet: React.ForwardRefExoticComponent<BottomSheetProps & React.RefAttributes<BottomSheetRef>>;
 export { BottomSheet };
 export default BottomSheet;

package/lib/typescript/module/components/BottomSheet/index.d.ts

@@ -1,3 +1,3 @@
-export { BottomSheet, default } from './BottomSheet';
-export type { BottomSheetProps, BottomSheetRef, SnapPoint } from './BottomSheet';
+export { BottomSheet, default, useBottomSheet } from './BottomSheet';
+export type { BottomSheetContextValue, BottomSheetProps, BottomSheetRef, SnapPoint } from './BottomSheet';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/components/index.d.ts

@@ -8,8 +8,8 @@ export { Banner } from './Banner';
 export type { BannerProps, BannerVariant, BannerAction } from './Banner';
 export { BottomNavigation } from './BottomNavigation';
 export type { BottomNavigationProps, TabConfig } from './BottomNavigation';
-export { BottomSheet } from './BottomSheet';
-export type { BottomSheetProps, BottomSheetRef } from './BottomSheet';
+export { BottomSheet, useBottomSheet } from './BottomSheet';
+export type { BottomSheetContextValue, BottomSheetProps, BottomSheetRef } from './BottomSheet';
 export { Button } from './Button';
 export type { ButtonProps, ButtonVariant, ButtonTone, ButtonSize } from './Button';
 export { Card } from './Card';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority-technologies/mobile",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "description": "Beautiful, animated, accessible React Native components plus API/auth/logging/network/storage utilities for Webority projects.",
   "keywords": [
     "react-native",