@webority-technologies/mobile 0.0.20 → 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/FieldBase/FieldBase.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.resolveVariantColors = exports.resolveFieldTextStyle = exports.resolveFieldSize = exports.default = exports.FieldBase = void 0;
+exports.resolveVariantColors = exports.resolveFieldTextStyle = exports.resolveFieldSize = exports.pickRepresentativeBorderColor = exports.default = exports.FieldBase = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _index = require("../../theme/index.js");
@@ -33,6 +33,66 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  *   - Shake-on-error or any cross-field animation.
  */
 
+const SIDES = ['top', 'right', 'bottom', 'left'];
+
+/** Map a single colour string to all four sides (shorthand expansion). */
+const expandColorSides = value => {
+  if (typeof value === 'string') {
+    return {
+      top: value,
+      right: value,
+      bottom: value,
+      left: value
+    };
+  }
+  // Object form: any side the consumer omitted falls through to 'transparent'.
+  // Rationale: if a consumer says `{ bottom: '#000' }`, they want only the
+  // bottom drawn — the other sides should be invisible, not inherit some
+  // unrelated colour.
+  return {
+    top: value.top ?? 'transparent',
+    right: value.right ?? 'transparent',
+    bottom: value.bottom ?? 'transparent',
+    left: value.left ?? 'transparent'
+  };
+};
+
+/** Map a single width number to all four sides (shorthand expansion). */
+const expandWidthSides = value => {
+  if (typeof value === 'number') {
+    return {
+      top: value,
+      right: value,
+      bottom: value,
+      left: value
+    };
+  }
+  return {
+    top: value.top ?? 0,
+    right: value.right ?? 0,
+    bottom: value.bottom ?? 0,
+    left: value.left ?? 0
+  };
+};
+
+/** Are all four sides of a per-side record equal? Used to collapse to shorthand. */
+const allSidesEqual = sides => sides.top === sides.right && sides.right === sides.bottom && sides.bottom === sides.left;
+
+/**
+ * Pick the most "representative" side colour from a 4-side record. Used by
+ * consumers (Input's selectionColor, focus rings, etc.) that need a single
+ * colour to mirror the visible focus indicator. Priority: bottom → top →
+ * left → right, skipping `'transparent'`. The bottom-first order means
+ * underline variants pick their underline colour automatically.
+ */
+const pickRepresentativeBorderColor = sides => {
+  for (const side of ['bottom', 'top', 'left', 'right']) {
+    const c = sides[side];
+    if (c && c !== 'transparent') return c;
+  }
+  return sides.bottom;
+};
+
 /**
  * Resolved text styling for the editable / displayed content inside a field.
  * Single source of truth so every field component (Input, NumberInput,
@@ -41,7 +101,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * same place. OTPInput intentionally overrides this with its own semibold
  * display weight.
  */
-
+exports.pickRepresentativeBorderColor = pickRepresentativeBorderColor;
 /**
  * Resolve the canonical text style chunk for a field's value. Reads from
  * `theme.components.field.{textColor,disabledTextColor,placeholderColor,fontWeight}`
@@ -122,31 +182,70 @@ const DEFAULT_SIZES = {
 
 /**
  * Strict, fully-resolved colour set used internally. Mirrors `FieldVariantTokens`
- * but every field is non-optional — every state has a concrete colour by the
- * time the box renders, so downstream code can rely on string-typed fills.
+ * but every border colour / width is expanded to a 4-side record by the time
+ * the box renders, so the animation pipeline can treat per-side and shorthand
+ * the same way. `borderFocusedRepresentative` is a single colour pulled from
+ * the focused sides — exposed for consumers (Input's selectionColor) that
+ * need to mirror the visible focus indicator without re-resolving per side.
  */
 
 /**
  * Resolve the full set of state-aware fill + border colours for a given
- * variant. Order: explicit override → theme token → library default.
+ * variant. Order: explicit override → theme token → library default. Border
+ * colour + width are normalized to per-side records here; callers that need
+ * a single colour read `borderFocusedRepresentative`.
  */
 const resolveVariantColors = (theme, variant, override) => {
   const tokenSet = theme.components.field?.[variant];
-  const isOutlined = variant === 'outlined';
-  const idleEmpty = isOutlined ? theme.colors.background.primary : theme.colors.background.secondary;
-  const borderIdle = isOutlined ? theme.colors.border.primary : 'transparent';
-  const borderWidth = isOutlined ? theme.colors.border.width : 0;
+
+  // Variant-specific defaults for resting fill + border treatment. `outlined`
+  // draws all four sides; `filled` draws nothing (fill-only); `underline`
+  // draws only the bottom edge — Material-style single-line inputs.
+  let idleEmpty;
+  let borderIdleDefault;
+  let borderWidthDefault;
+  if (variant === 'outlined') {
+    idleEmpty = theme.colors.background.primary;
+    borderIdleDefault = theme.colors.border.primary;
+    borderWidthDefault = theme.colors.border.width;
+  } else if (variant === 'underline') {
+    idleEmpty = 'transparent';
+    borderIdleDefault = {
+      bottom: theme.colors.border.primary
+    };
+    borderWidthDefault = {
+      bottom: theme.colors.border.width
+    };
+  } else {
+    idleEmpty = theme.colors.background.secondary;
+    borderIdleDefault = 'transparent';
+    borderWidthDefault = 0;
+  }
+
+  // For focused/error/disabled we expand using the same per-side shape as
+  // idle. If `borderIdle` ended up bottom-only (underline), an unset
+  // `borderFocused` defaults to `{ bottom: colors.border.focus }` so the
+  // focus indicator stays on the same edge. Same logic for error.
+  const wrapToIdleShape = colour => typeof borderIdleDefault === 'string' ? colour : {
+    bottom: colour
+  };
+  const borderIdle = expandColorSides(override?.borderIdle ?? tokenSet?.borderIdle ?? borderIdleDefault);
+  const borderFocused = expandColorSides(override?.borderFocused ?? tokenSet?.borderFocused ?? wrapToIdleShape(theme.colors.border.focus));
+  const borderError = expandColorSides(override?.borderError ?? tokenSet?.borderError ?? wrapToIdleShape(theme.colors.border.error));
+  const borderDisabled = expandColorSides(override?.borderDisabled ?? tokenSet?.borderDisabled ?? borderIdleDefault);
+  const borderWidth = expandWidthSides(override?.borderWidth ?? tokenSet?.borderWidth ?? borderWidthDefault);
   return {
     backgroundIdleEmpty: override?.backgroundIdleEmpty ?? tokenSet?.backgroundIdleEmpty ?? idleEmpty,
     backgroundIdleFilled: override?.backgroundIdleFilled ?? tokenSet?.backgroundIdleFilled ?? override?.backgroundIdleEmpty ?? tokenSet?.backgroundIdleEmpty ?? idleEmpty,
     backgroundFocused: override?.backgroundFocused ?? tokenSet?.backgroundFocused ?? undefined,
     backgroundError: override?.backgroundError ?? tokenSet?.backgroundError ?? undefined,
     backgroundDisabled: override?.backgroundDisabled ?? tokenSet?.backgroundDisabled ?? theme.colors.surface.disabled,
-    borderIdle: override?.borderIdle ?? tokenSet?.borderIdle ?? borderIdle,
-    borderFocused: override?.borderFocused ?? tokenSet?.borderFocused ?? theme.colors.border.focus,
-    borderError: override?.borderError ?? tokenSet?.borderError ?? theme.colors.border.error,
-    borderDisabled: override?.borderDisabled ?? tokenSet?.borderDisabled ?? borderIdle,
-    borderWidth: override?.borderWidth ?? tokenSet?.borderWidth ?? borderWidth
+    borderIdle,
+    borderFocused,
+    borderError,
+    borderDisabled,
+    borderWidth,
+    borderFocusedRepresentative: pickRepresentativeBorderColor(borderFocused)
   };
 };
 exports.resolveVariantColors = resolveVariantColors;
@@ -169,7 +268,15 @@ const FieldBase = props => {
     paddingHorizontal: paddingHorizontalProp,
     paddingVertical: paddingVerticalProp,
     borderRadius: borderRadiusProp,
+    borderTopLeftRadius: borderTopLeftRadiusProp,
+    borderTopRightRadius: borderTopRightRadiusProp,
+    borderBottomLeftRadius: borderBottomLeftRadiusProp,
+    borderBottomRightRadius: borderBottomRightRadiusProp,
     borderWidth: borderWidthProp,
+    borderTopWidth: borderTopWidthProp,
+    borderRightWidth: borderRightWidthProp,
+    borderBottomWidth: borderBottomWidthProp,
+    borderLeftWidth: borderLeftWidthProp,
     gap: gapProp,
     fillOverrides,
     style,
@@ -208,13 +315,6 @@ const FieldBase = props => {
   const idleFill = filled ? colors.backgroundIdleFilled : colors.backgroundIdleEmpty;
   const focusedFill = colors.backgroundFocused ?? idleFill;
   const errorFill = colors.backgroundError ?? idleFill;
-  const animatedBorderColor = disabled ? colors.borderDisabled : error ? errorAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: [colors.borderIdle, colors.borderError]
-  }) : focusAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: [colors.borderIdle, colors.borderFocused]
-  });
   const animatedBackgroundColor = disabled ? colors.backgroundDisabled : error ? errorAnim.interpolate({
     inputRange: [0, 1],
     outputRange: [idleFill, errorFill]
@@ -222,17 +322,105 @@ const FieldBase = props => {
     inputRange: [0, 1],
     outputRange: [idleFill, focusedFill]
   });
+
+  // Per-side border colour. For each side we resolve the "from" (idle) and
+  // "to" (focused or error, depending on state) colour, then drive a single
+  // animated interpolation. When all four sides share the same from+to pair
+  // we collapse to one `borderColor` key — the common case stays cheap.
+  const activeColors = error ? colors.borderError : colors.borderFocused;
+  const activeAnim = error ? errorAnim : focusAnim;
+  const sideFrom = disabled ? colors.borderDisabled : colors.borderIdle;
+  const sideTo = disabled ? colors.borderDisabled : activeColors;
+
+  // Per-side widths: longhand prop wins over shorthand prop wins over
+  // resolved variant token. Each side independently.
+  const propWidth = {
+    top: borderTopWidthProp,
+    right: borderRightWidthProp,
+    bottom: borderBottomWidthProp,
+    left: borderLeftWidthProp
+  };
+  const resolvedWidths = {
+    top: propWidth.top ?? borderWidthProp ?? colors.borderWidth.top,
+    right: propWidth.right ?? borderWidthProp ?? colors.borderWidth.right,
+    bottom: propWidth.bottom ?? borderWidthProp ?? colors.borderWidth.bottom,
+    left: propWidth.left ?? borderWidthProp ?? colors.borderWidth.left
+  };
   const boxStyle = {
     minHeight: height ?? minHeightProp ?? sizeTokens.minHeight,
     maxHeight,
     paddingHorizontal: paddingHorizontalProp ?? sizeTokens.paddingHorizontal,
     paddingVertical: paddingVerticalProp ?? sizeTokens.paddingVertical,
-    borderRadius: borderRadiusProp ?? sizeTokens.borderRadius,
-    borderWidth: borderWidthProp ?? colors.borderWidth,
-    borderColor: animatedBorderColor,
     backgroundColor: animatedBackgroundColor,
     columnGap: gapProp ?? theme.spacing.sm
   };
+
+  // Radius: per-corner prop wins over shorthand prop wins over size token.
+  // Collapse to single `borderRadius` when all four corners match.
+  const radiusShorthand = borderRadiusProp ?? sizeTokens.borderRadius;
+  const corners = {
+    tl: borderTopLeftRadiusProp ?? radiusShorthand,
+    tr: borderTopRightRadiusProp ?? radiusShorthand,
+    bl: borderBottomLeftRadiusProp ?? radiusShorthand,
+    br: borderBottomRightRadiusProp ?? radiusShorthand
+  };
+  if (corners.tl === corners.tr && corners.tr === corners.bl && corners.bl === corners.br) {
+    boxStyle.borderRadius = corners.tl;
+  } else {
+    boxStyle.borderTopLeftRadius = corners.tl;
+    boxStyle.borderTopRightRadius = corners.tr;
+    boxStyle.borderBottomLeftRadius = corners.bl;
+    boxStyle.borderBottomRightRadius = corners.br;
+  }
+
+  // Width: collapse to single `borderWidth` when all four sides match.
+  if (resolvedWidths.top === resolvedWidths.right && resolvedWidths.right === resolvedWidths.bottom && resolvedWidths.bottom === resolvedWidths.left) {
+    boxStyle.borderWidth = resolvedWidths.top;
+  } else {
+    boxStyle.borderTopWidth = resolvedWidths.top;
+    boxStyle.borderRightWidth = resolvedWidths.right;
+    boxStyle.borderBottomWidth = resolvedWidths.bottom;
+    boxStyle.borderLeftWidth = resolvedWidths.left;
+  }
+
+  // Colour: collapse to single `borderColor` only when both endpoints are
+  // identical across all sides. Otherwise emit four `borderXColor`
+  // interpolations. Disabled state is static (no animation needed).
+  const fromAllEqual = allSidesEqual(sideFrom);
+  const toAllEqual = allSidesEqual(sideTo);
+  if (disabled) {
+    if (fromAllEqual) {
+      boxStyle.borderColor = sideFrom.top;
+    } else {
+      boxStyle.borderTopColor = sideFrom.top;
+      boxStyle.borderRightColor = sideFrom.right;
+      boxStyle.borderBottomColor = sideFrom.bottom;
+      boxStyle.borderLeftColor = sideFrom.left;
+    }
+  } else if (fromAllEqual && toAllEqual && sideFrom.top === sideFrom.right && sideTo.top === sideTo.right) {
+    // Common case: shorthand on both ends → single interpolation.
+    boxStyle.borderColor = activeAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [sideFrom.top, sideTo.top]
+    });
+  } else {
+    boxStyle.borderTopColor = activeAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [sideFrom.top, sideTo.top]
+    });
+    boxStyle.borderRightColor = activeAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [sideFrom.right, sideTo.right]
+    });
+    boxStyle.borderBottomColor = activeAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [sideFrom.bottom, sideTo.bottom]
+    });
+    boxStyle.borderLeftColor = activeAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [sideFrom.left, sideTo.left]
+    });
+  }
   if (width !== undefined) boxStyle.width = width;
   if (height !== undefined) boxStyle.height = height;
   const a11yState = {

package/lib/commonjs/components/Input/Input.js

@@ -168,7 +168,7 @@ const Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
   // Selection / caret / handle colour walks the same resolution chain as the
   // focused border so brands that override `components.field.<variant>.borderFocused`
   // get a matching selection tint without also having to update root `border.focus`.
-  const selectionColor = (0, _react.useMemo)(() => (0, _FieldBase.resolveVariantColors)(theme, variant, fillOverrides).borderFocused, [theme, variant, fillOverrides]);
+  const selectionColor = (0, _react.useMemo)(() => (0, _FieldBase.resolveVariantColors)(theme, variant, fillOverrides).borderFocusedRepresentative, [theme, variant, fillOverrides]);
   const borderRadiusOverride = borderRadiusProp ?? theme.components.input?.borderRadius;
 
   // Floating label styles

package/lib/commonjs/components/SearchBar/SearchBar.js

@@ -40,7 +40,13 @@ const SearchBar = exports.SearchBar = /*#__PURE__*/(0, _react.forwardRef)((props
   // field-family token (`components.field.defaultVariant`) → library default.
   // Library default stays `'filled'` so SearchBar reads as the traditional
   // pill-shaped, borderless search box when no theme opinion is expressed.
-  const variant = variantProp ?? theme.components.searchBar?.defaultVariant ?? theme.components.field?.defaultVariant ?? 'filled';
+  // SearchBar deliberately only supports 'filled' and 'outlined' — an
+  // underline-only pill makes no visual sense. If the shared field default is
+  // 'underline', fall through to 'filled' rather than carry an unsupported
+  // value down to the variant token lookup.
+  const sharedDefault = theme.components.field?.defaultVariant;
+  const sharedFallback = sharedDefault === 'outlined' || sharedDefault === 'filled' ? sharedDefault : 'filled';
+  const variant = variantProp ?? theme.components.searchBar?.defaultVariant ?? sharedFallback;
   const fieldTokens = (0, _FieldBase.resolveFieldSize)(theme, size);
   const sizeStyles = {
     ...fieldTokens,
@@ -184,7 +190,7 @@ const SearchBar = exports.SearchBar = /*#__PURE__*/(0, _react.forwardRef)((props
           autoFocus: autoFocus,
           editable: !disabled,
           returnKeyType: "search",
-          selectionColor: (0, _FieldBase.resolveVariantColors)(theme, variant).borderFocused,
+          selectionColor: (0, _FieldBase.resolveVariantColors)(theme, variant).borderFocusedRepresentative,
           accessibilityLabel: accessibilityLabel ?? placeholder,
           accessibilityState: {
             disabled

package/lib/commonjs/components/Select/Select.js

@@ -326,7 +326,7 @@ const Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
               onChangeText: setQuery,
               placeholder: "Search\u2026",
               placeholderTextColor: theme.colors.text.tertiary,
-              selectionColor: (0, _FieldBase.resolveVariantColors)(theme, theme.components.field?.defaultVariant ?? 'outlined').borderFocused,
+              selectionColor: (0, _FieldBase.resolveVariantColors)(theme, theme.components.field?.defaultVariant ?? 'outlined').borderFocusedRepresentative,
               accessibilityLabel: "Search options",
               style: [styles.searchInput, {
                 color: theme.colors.text.primary,

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