@cdx-ui/components 0.1.3 → 0.1.5

package/lib/commonjs/components/Drawer/index.js

@@ -0,0 +1,739 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Drawer = void 0;
+Object.defineProperty(exports, "MODAL_OVERLAY_Z_INDEX", {
+  enumerable: true,
+  get: function () {
+    return _primitives.MODAL_OVERLAY_Z_INDEX;
+  }
+});
+Object.defineProperty(exports, "useDrawer", {
+  enumerable: true,
+  get: function () {
+    return _primitives.useDrawer;
+  }
+});
+var _react = require("react");
+var _reactNative = require("react-native");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _focus = require("@react-native-aria/focus");
+var _icons = require("@cdx-ui/icons");
+var _primitives = require("@cdx-ui/primitives");
+var _utils = require("@cdx-ui/utils");
+var _animation = require("../../animation");
+var _animationSettings = require("../../providers/animation-settings");
+var _Heading = require("../Heading");
+var _Icon = require("../Icon");
+var _Text = require("../Text");
+var _animation2 = require("./animation");
+var _styles = require("./styles");
+var _utils2 = require("./utils");
+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 IS_WEB = _reactNative.Platform.OS === 'web';
+// =============================================================================
+// STYLE CONTEXT
+// =============================================================================
+
+const SCOPE = 'DRAWER';
+const useDrawerStyleContext = () => (0, _utils.useStyleContext)(SCOPE);
+
+// =============================================================================
+// ANIMATED PRIMITIVES
+// =============================================================================
+
+const AnimatedOverlay = _reactNativeReanimated.default.createAnimatedComponent(_primitives.DrawerOverlay);
+
+// =============================================================================
+// STYLED ROOT
+// =============================================================================
+
+const DrawerRoot = /*#__PURE__*/(0, _react.forwardRef)(({
+  variant = 'permanent',
+  size = 'default',
+  placement: placementProp,
+  fullBleed = false,
+  animation,
+  className,
+  children,
+  style,
+  isOpen,
+  defaultOpen,
+  onOpenChange,
+  closeOnBackdropPress = true,
+  closeOnEscKey = true,
+  zIndex = _primitives.MODAL_OVERLAY_Z_INDEX,
+  ...props
+}, ref) => {
+  const placement = (0, _utils2.resolveDrawerPlacement)(placementProp);
+  const parent = (0, _utils.useParentContext)();
+  const ctx = (0, _react.useMemo)(() => ({
+    ...parent,
+    [SCOPE]: {
+      variant,
+      size,
+      placement,
+      fullBleed
+    }
+  }), [parent, variant, size, placement, fullBleed]);
+  const {
+    progress,
+    isAllAnimationsDisabled
+  } = (0, _animation.usePopupRootAnimation)({
+    animation
+  });
+  const panelExtent = (0, _utils2.useClampedDrawerExtent)(size, placement);
+  const animationContextValue = (0, _react.useMemo)(() => ({
+    progress
+  }), [progress]);
+  const animationSettingsContextValue = (0, _react.useMemo)(() => ({
+    isAllAnimationsDisabled
+  }), [isAllAnimationsDisabled]);
+  if (variant === 'permanent') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_animationSettings.AnimationSettingsProvider, {
+      value: animationSettingsContextValue,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_utils.ParentContext.Provider, {
+        value: ctx,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.DrawerRoot, {
+          ref: ref,
+          isOpen: isOpen,
+          defaultOpen: defaultOpen ?? true,
+          onOpenChange: onOpenChange,
+          closeOnBackdropPress: false,
+          closeOnEscKey: false,
+          className: (0, _utils.cn)('self-stretch overflow-hidden', className),
+          style: style,
+          ...props,
+          ...(0, _primitives.mergeDataAttributes)(props, (0, _primitives.dataAttributes)({
+            slot: 'drawer',
+            placement
+          })),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DrawerPermanentPanel, {
+            size: size,
+            placement: placement,
+            panelExtent: panelExtent,
+            children: children
+          })
+        })
+      })
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_animationSettings.AnimationSettingsProvider, {
+    value: animationSettingsContextValue,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_animation2.DrawerAnimationProvider, {
+      value: animationContextValue,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_utils.ParentContext.Provider, {
+        value: ctx,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.DrawerRoot, {
+          ref: ref,
+          isOpen: isOpen,
+          defaultOpen: defaultOpen,
+          onOpenChange: onOpenChange,
+          closeOnBackdropPress: closeOnBackdropPress,
+          closeOnEscKey: closeOnEscKey,
+          className: className,
+          style: style,
+          ...props,
+          ...(0, _primitives.mergeDataAttributes)(props, (0, _primitives.dataAttributes)({
+            slot: 'drawer',
+            placement
+          })),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DrawerPopup, {
+            zIndex: zIndex,
+            children: children
+          })
+        })
+      })
+    })
+  });
+});
+DrawerRoot.displayName = 'Drawer';
+const DrawerPermanentPanel = ({
+  size,
+  placement,
+  panelExtent,
+  children
+}) => {
+  const {
+    open
+  } = (0, _primitives.useDrawer)();
+  const {
+    isAllAnimationsDisabled
+  } = (0, _animationSettings.useAnimationSettings)();
+  const isHorizontal = (0, _utils2.isHorizontalDrawerPlacement)(placement);
+  const extent = (0, _reactNativeReanimated.useSharedValue)(open ? panelExtent : 0);
+  const hasMounted = (0, _react.useRef)(false);
+  (0, _react.useEffect)(() => {
+    const target = open ? panelExtent : 0;
+    if (!hasMounted.current) {
+      hasMounted.current = true;
+      extent.set(target);
+      return;
+    }
+    if (isAllAnimationsDisabled) {
+      extent.set(target);
+      return;
+    }
+    extent.set((0, _reactNativeReanimated.withTiming)(target, {
+      duration: open ? _utils2.DRAWER_ENTER_MS : _utils2.DRAWER_EXIT_MS,
+      easing: open ? _utils2.DRAWER_ENTER_EASING : _utils2.DRAWER_EXIT_EASING
+    }));
+  }, [extent, isAllAnimationsDisabled, open, panelExtent]);
+  const animatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    const value = extent.get();
+    return isHorizontal ? {
+      width: value
+    } : {
+      height: value
+    };
+  }, [isHorizontal]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+    className: (0, _styles.drawerPanelVariants)({
+      size,
+      variant: 'permanent',
+      placement
+    }),
+    pointerEvents: open ? 'auto' : 'none',
+    style: animatedStyle,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      className: "h-full",
+      style: isHorizontal ? {
+        width: panelExtent
+      } : {
+        height: panelExtent
+      },
+      children: open ? children : null
+    })
+  });
+};
+
+// =============================================================================
+// INTERNAL POPUP (portal + overlay + panel — not a Figma slot)
+// =============================================================================
+
+const DrawerPopup = /*#__PURE__*/(0, _react.forwardRef)(({
+  className,
+  children,
+  disableFullWindowOverlay = false,
+  zIndex = _primitives.MODAL_OVERLAY_Z_INDEX
+}, ref) => {
+  const {
+    size,
+    placement: placementProp
+  } = useDrawerStyleContext();
+  const placement = (0, _utils2.resolveDrawerPlacement)(placementProp);
+  const {
+    open,
+    onOpenChange,
+    closeOnEscKey,
+    nativeID
+  } = (0, _primitives.useDrawer)();
+  const {
+    width: windowWidth,
+    height: windowHeight
+  } = (0, _reactNative.useWindowDimensions)();
+  const panelExtent = (0, _utils2.useClampedDrawerExtent)(size, placement);
+  const parentContext = (0, _utils.useParentContext)();
+  const animationContext = (0, _animation2.useDrawerAnimation)();
+  const parentAnimationSettings = (0, _animationSettings.useAnimationSettings)();
+  const {
+    isAllAnimationsDisabled
+  } = parentAnimationSettings;
+  const panelMotion = (0, _react.useMemo)(() => (0, _utils2.getDrawerSlideKeyframes)(placement, panelExtent), [panelExtent, placement]);
+  const fallbackIsDragging = (0, _reactNativeReanimated.useSharedValue)(false);
+  const fallbackIsGestureReleaseAnimationRunning = (0, _reactNativeReanimated.useSharedValue)(false);
+  const progress = animationContext.progress;
+  (0, _react.useEffect)(() => {
+    if (open) {
+      progress.set(1);
+    }
+  }, [open, progress]);
+  const {
+    rContainerStyle,
+    entering: overlayEntering,
+    exiting: overlayExiting
+  } = (0, _animation.usePopupOverlayAnimation)({
+    progress,
+    isDragging: fallbackIsDragging,
+    isGestureReleaseAnimationRunning: fallbackIsGestureReleaseAnimationRunning
+  });
+  const panelRef = (0, _react.useRef)(null);
+  const prevOpenRef = (0, _react.useRef)(open);
+  const [isExiting, setIsExiting] = (0, _react.useState)(false);
+  const [webState, setWebState] = (0, _react.useState)(open ? 'entering' : 'closed');
+  const handleClose = (0, _react.useCallback)(() => {
+    onOpenChange(false);
+  }, [onOpenChange]);
+  (0, _primitives.useEscapeKey)(open && closeOnEscKey, handleClose, {
+    id: nativeID,
+    groupId: nativeID,
+    layer: 'modal'
+  });
+  const {
+    isTopmost
+  } = (0, _primitives.useOverlayStackRegistration)({
+    active: open && _reactNative.Platform.OS !== 'web',
+    capabilities: ['back'],
+    id: nativeID,
+    groupId: nativeID,
+    layer: 'modal'
+  });
+  (0, _react.useEffect)(() => {
+    if (!open || _reactNative.Platform.OS === 'web') return;
+    const backHandler = _reactNative.BackHandler.addEventListener('hardwareBackPress', () => {
+      if (!isTopmost('back')) return false;
+      handleClose();
+      return true;
+    });
+    return () => {
+      backHandler.remove();
+    };
+  }, [handleClose, isTopmost, open]);
+  if (IS_WEB && prevOpenRef.current && !open && !isExiting) {
+    setIsExiting(true);
+    setWebState('closed');
+  }
+  if (IS_WEB && !prevOpenRef.current && open) {
+    setIsExiting(false);
+    setWebState('entering');
+  }
+  prevOpenRef.current = open;
+  (0, _react.useEffect)(() => {
+    if (!IS_WEB || !open) return;
+    const raf = requestAnimationFrame(() => {
+      setWebState('open');
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [open]);
+  (0, _react.useEffect)(() => {
+    if (!IS_WEB || !isExiting) return;
+    const node = panelRef.current;
+    let done = false;
+    const finish = () => {
+      if (done) return;
+      done = true;
+      setIsExiting(false);
+    };
+    const safetyTimer = setTimeout(finish, _utils2.WEB_TRANSITION_SAFETY_MS);
+    if (!node || typeof node.addEventListener !== 'function') {
+      return () => {
+        clearTimeout(safetyTimer);
+      };
+    }
+    const handler = event => {
+      if (event.target !== node) return;
+      const propertyName = event.propertyName ?? '';
+      if (propertyName === 'opacity' || propertyName === 'transform') {
+        finish();
+      }
+    };
+    node.addEventListener('transitionend', handler);
+    return () => {
+      clearTimeout(safetyTimer);
+      node.removeEventListener('transitionend', handler);
+    };
+  }, [isExiting]);
+  const dataState = webState;
+  const shouldMount = IS_WEB ? open || isExiting : open;
+  if (!shouldMount) {
+    return null;
+  }
+  const portalClassName = (0, _utils.cn)((0, _styles.drawerPortalVariants)());
+  const overlayClassName = (0, _utils.cn)((0, _styles.drawerOverlayVariants)());
+  const panelClassName = (0, _utils.cn)((0, _styles.drawerPanelVariants)({
+    size,
+    variant: 'modal',
+    placement
+  }), className);
+  const panelSizeStyle = (0, _utils2.isHorizontalDrawerPlacement)(placement) ? {
+    width: panelExtent,
+    height: windowHeight
+  } : {
+    width: windowWidth,
+    height: panelExtent
+  };
+  const nativePanelEntering = IS_WEB || isAllAnimationsDisabled ? undefined : panelMotion.entering;
+  const nativePanelExiting = IS_WEB || isAllAnimationsDisabled ? undefined : panelMotion.exiting;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.DrawerPortal, {
+    forceMount: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_utils.ParentContext.Provider, {
+      value: parentContext,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_animationSettings.AnimationSettingsProvider, {
+        value: parentAnimationSettings,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_animation2.DrawerAnimationProvider, {
+          value: animationContext,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.FullWindowOverlay, {
+            disableFullWindowOverlay: disableFullWindowOverlay,
+            unstable_accessibilityContainerViewIsModal: true,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              className: portalClassName,
+              style: {
+                zIndex
+              },
+              pointerEvents: "box-none",
+              ...(IS_WEB ? (0, _primitives.dataAttributes)({
+                state: dataState
+              }) : undefined),
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+                entering: overlayEntering,
+                exiting: overlayExiting,
+                style: _reactNative.StyleSheet.absoluteFill,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedOverlay, {
+                  forceMount: true,
+                  testID: "drawer-overlay",
+                  className: overlayClassName,
+                  style: IS_WEB ? undefined : rContainerStyle,
+                  ...(0, _primitives.mergeDataAttributes)({}, (0, _primitives.dataAttributes)({
+                    slot: 'drawer-overlay'
+                  }), IS_WEB ? (0, _primitives.dataAttributes)({
+                    state: dataState
+                  }) : undefined)
+                })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+                entering: nativePanelEntering,
+                exiting: nativePanelExiting,
+                pointerEvents: "box-none",
+                style: [internalStyles[placement], panelSizeStyle],
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_focus.FocusScope, {
+                  contain: open,
+                  restoreFocus: true,
+                  autoFocus: open,
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                    ref: (0, _utils.mergeRefs)(ref, panelRef),
+                    nativeID: nativeID,
+                    role: "dialog",
+                    "aria-modal": true,
+                    "aria-labelledby": `${nativeID}-title`,
+                    "aria-describedby": `${nativeID}-description`,
+                    className: panelClassName,
+                    style: panelSizeStyle,
+                    ...(0, _primitives.mergeDataAttributes)({}, (0, _primitives.dataAttributes)({
+                      slot: 'drawer',
+                      placement
+                    }), IS_WEB ? (0, _primitives.dataAttributes)({
+                      state: dataState
+                    }) : undefined),
+                    children: children
+                  })
+                })
+              })]
+            })
+          })
+        })
+      })
+    })
+  });
+});
+DrawerPopup.displayName = 'DrawerPopup';
+const DrawerClose = /*#__PURE__*/(0, _react.forwardRef)(({
+  className,
+  accessibilityLabel = 'Close',
+  children,
+  style,
+  ...props
+}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.DrawerClose, {
+  ref: ref,
+  className: (0, _utils.cn)((0, _styles.drawerCloseVariants)(), className),
+  style: style,
+  hitSlop: 12,
+  accessibilityRole: "button",
+  accessibilityLabel: accessibilityLabel,
+  ...props,
+  ...(0, _primitives.mergeDataAttributes)(props, (0, _primitives.dataAttributes)({
+    slot: 'drawer-close'
+  })),
+  children: children ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+    as: _icons.Close,
+    className: (0, _styles.drawerCloseIconVariants)()
+  })
+}));
+DrawerClose.displayName = 'Drawer.Close';
+
+// =============================================================================
+// STYLED LEADING SLOT
+// =============================================================================
+
+const DrawerLeadingSlot = /*#__PURE__*/(0, _react.forwardRef)(({
+  asChild,
+  className,
+  style,
+  'aria-hidden': ariaHidden,
+  ...props
+}, ref) => {
+  const Comp = asChild ? _primitives.Slot : _reactNative.View;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, {
+    ref: ref,
+    accessibilityElementsHidden: ariaHidden !== false,
+    "aria-hidden": ariaHidden ?? true,
+    className: (0, _utils.cn)((0, _styles.drawerLeadingSlotVariants)(), className),
+    style: style,
+    ...props,
+    ...(0, _primitives.mergeDataAttributes)(props, (0, _primitives.dataAttributes)({
+      slot: 'drawer-leading'
+    }))
+  });
+});
+DrawerLeadingSlot.displayName = 'Drawer.LeadingSlot';
+
+// =============================================================================
+// STYLED HEADER
+// =============================================================================
+
+/**
+ * Props for `Drawer.Header`.
+ *
+ * The header lays out its direct children as a fixed row regardless of JSX
+ * order: the first `Drawer.LeadingSlot` at the start, every other child
+ * (`Drawer.Title`, `Drawer.Description`, custom content) in a text column, and
+ * the close control at the end. Additional `Drawer.LeadingSlot` or
+ * `Drawer.Close` children are ignored.
+ *
+ * `Drawer.LeadingSlot` and `Drawer.Close` must be direct children. They are
+ * matched by component identity, so wrapping them in `memo()`, an HOC, or a
+ * custom component hides them from the header and they render in the text
+ * column instead.
+ */
+
+const renderDrawerHeaderRow = (children, close) => {
+  const childArray = _react.Children.toArray(children);
+  const leadingChild = childArray.find(child => /*#__PURE__*/(0, _react.isValidElement)(child) && child.type === DrawerLeadingSlot);
+  const closeChild = childArray.find(child => /*#__PURE__*/(0, _react.isValidElement)(child) && child.type === DrawerClose);
+  const textChildren = childArray.filter(child => ! /*#__PURE__*/(0, _react.isValidElement)(child) || child.type !== DrawerLeadingSlot && child.type !== DrawerClose);
+  const closeElement = close === undefined ? closeChild ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(DrawerClose, {}) : close;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [leadingChild, textChildren.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      className: (0, _styles.drawerHeaderContentVariants)(),
+      children: textChildren
+    }) : null, closeElement]
+  });
+};
+const DrawerHeader = /*#__PURE__*/(0, _react.forwardRef)(({
+  asChild,
+  close,
+  showSeparator = true,
+  className,
+  children,
+  style,
+  ...props
+}, ref) => {
+  const insets = (0, _utils2.useSafeInsets)();
+  const {
+    placement: placementProp,
+    variant
+  } = useDrawerStyleContext();
+  const placement = (0, _utils2.resolveDrawerPlacement)(placementProp);
+  const paddingTop = variant === 'modal' && placement !== 'bottom' ? Math.max(insets.top, _utils2.DRAWER_EDGE_PADDING) : _utils2.DRAWER_EDGE_PADDING;
+  const computedClassName = (0, _utils.cn)((0, _styles.drawerHeaderVariants)({
+    showSeparator
+  }), className);
+  const Comp = asChild ? _primitives.Slot : _reactNative.View;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, {
+    ref: ref,
+    className: computedClassName,
+    style: [{
+      paddingTop
+    }, style],
+    ...props,
+    ...(0, _primitives.mergeDataAttributes)(props, (0, _primitives.dataAttributes)({
+      slot: 'drawer-header'
+    })),
+    children: asChild ? children : renderDrawerHeaderRow(children, close)
+  });
+});
+DrawerHeader.displayName = 'Drawer.Header';
+
+// =============================================================================
+// STYLED TITLE
+// =============================================================================
+
+const DrawerTitle = /*#__PURE__*/(0, _react.forwardRef)(({
+  asChild,
+  className,
+  children,
+  style,
+  ...props
+}, ref) => {
+  const {
+    nativeID
+  } = (0, _primitives.useDrawer)();
+  const computedClassName = (0, _utils.cn)((0, _styles.drawerTitleVariants)(), className);
+  if (asChild) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Slot, {
+      ref: ref,
+      nativeID: `${nativeID}-title`,
+      className: computedClassName,
+      style: style,
+      ...props,
+      ...(0, _primitives.mergeDataAttributes)(props, (0, _primitives.dataAttributes)({
+        slot: 'drawer-title'
+      })),
+      children: children
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Heading.Heading, {
+    ref: ref,
+    size: "sm",
+    nativeID: `${nativeID}-title`,
+    className: computedClassName,
+    style: style,
+    ...props,
+    ...(0, _primitives.mergeDataAttributes)(props, (0, _primitives.dataAttributes)({
+      slot: 'drawer-title'
+    })),
+    children: children
+  });
+});
+DrawerTitle.displayName = 'Drawer.Title';
+
+// =============================================================================
+// STYLED DESCRIPTION
+// =============================================================================
+
+const DrawerDescription = /*#__PURE__*/(0, _react.forwardRef)(({
+  asChild,
+  className,
+  children,
+  style,
+  ...props
+}, ref) => {
+  const {
+    nativeID
+  } = (0, _primitives.useDrawer)();
+  const computedClassName = (0, _utils.cn)((0, _styles.drawerDescriptionVariants)(), className);
+  const Comp = asChild ? _primitives.Slot : _Text.Text;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, {
+    ref: ref,
+    nativeID: `${nativeID}-description`,
+    size: "sm",
+    className: computedClassName,
+    style: style,
+    ...props,
+    ...(0, _primitives.mergeDataAttributes)(props, (0, _primitives.dataAttributes)({
+      slot: 'drawer-description'
+    })),
+    children: children
+  });
+});
+DrawerDescription.displayName = 'Drawer.Description';
+
+// =============================================================================
+// STYLED CONTENT (Figma Drawer.Content — scroll region)
+// =============================================================================
+
+const DrawerContent = /*#__PURE__*/(0, _react.forwardRef)(({
+  className,
+  contentClassName,
+  children,
+  style,
+  contentContainerStyle,
+  fullBleed: fullBleedProp,
+  ...props
+}, ref) => {
+  const {
+    fullBleed: contextFullBleed
+  } = useDrawerStyleContext();
+  const fullBleed = fullBleedProp ?? contextFullBleed ?? false;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+    ref: ref,
+    className: (0, _utils.cn)((0, _styles.drawerContentVariants)({
+      fullBleed
+    }), className),
+    style: style,
+    contentContainerClassName: (0, _utils.cn)((0, _styles.drawerContentInnerVariants)(), contentClassName),
+    contentContainerStyle: contentContainerStyle,
+    ...props,
+    ...(0, _primitives.mergeDataAttributes)(props, (0, _primitives.dataAttributes)({
+      slot: 'drawer-content'
+    })),
+    children: children
+  });
+});
+DrawerContent.displayName = 'Drawer.Content';
+
+// =============================================================================
+// STYLED FOOTER
+// =============================================================================
+
+const DrawerFooter = /*#__PURE__*/(0, _react.forwardRef)(({
+  asChild,
+  showSeparator = false,
+  direction: directionProp,
+  className,
+  children,
+  style,
+  ...props
+}, ref) => {
+  const {
+    width
+  } = (0, _reactNative.useWindowDimensions)();
+  const insets = (0, _utils2.useSafeInsets)();
+  const {
+    placement: placementProp,
+    variant
+  } = useDrawerStyleContext();
+  const placement = (0, _utils2.resolveDrawerPlacement)(placementProp);
+  const direction = directionProp ?? (width >= _utils2.DRAWER_WIDE_BREAKPOINT ? 'row' : 'column');
+  const computedClassName = (0, _utils.cn)((0, _styles.drawerFooterVariants)({
+    showSeparator,
+    direction
+  }), className);
+  const Comp = asChild ? _primitives.Slot : _reactNative.View;
+  const paddingBottom = variant === 'modal' && placement !== 'top' ? Math.max(insets.bottom, _utils2.DRAWER_EDGE_PADDING) : _utils2.DRAWER_EDGE_PADDING;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, {
+    ref: ref,
+    className: computedClassName,
+    style: [{
+      paddingBottom
+    }, style],
+    ...props,
+    ...(0, _primitives.mergeDataAttributes)(props, (0, _primitives.dataAttributes)({
+      slot: 'drawer-footer'
+    })),
+    children: children
+  });
+});
+DrawerFooter.displayName = 'Drawer.Footer';
+
+// =============================================================================
+// COMPOUND COMPONENT
+// =============================================================================
+
+const Drawer = exports.Drawer = Object.assign(DrawerRoot, {
+  Header: DrawerHeader,
+  LeadingSlot: DrawerLeadingSlot,
+  Close: DrawerClose,
+  Title: DrawerTitle,
+  Description: DrawerDescription,
+  Content: DrawerContent,
+  Footer: DrawerFooter
+});
+const internalStyles = _reactNative.StyleSheet.create({
+  right: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    right: 0
+  },
+  left: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0
+  },
+  top: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0
+  },
+  bottom: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0
+  }
+});
+//# sourceMappingURL=index.js.map