@cdx-ui/components 0.1.3 → 0.1.5

package/src/components/Drawer/index.tsx

@@ -0,0 +1,896 @@
+import {
+  Children,
+  forwardRef,
+  isValidElement,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentRef,
+  type ReactNode,
+} from 'react';
+import {
+  BackHandler,
+  Platform,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  useWindowDimensions,
+  View,
+  type ScrollViewProps,
+  type TextProps,
+  type ViewProps,
+} from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import { FocusScope } from '@react-native-aria/focus';
+import { Close as CloseIcon } from '@cdx-ui/icons';
+import {
+  DrawerClose as DrawerClosePrimitive,
+  DrawerOverlay as DrawerOverlayPrimitive,
+  DrawerPortal as DrawerPortalPrimitive,
+  DrawerRoot as DrawerRootPrimitive,
+  FullWindowOverlay,
+  MODAL_OVERLAY_Z_INDEX,
+  Slot,
+  dataAttributes,
+  mergeDataAttributes,
+  useDrawer,
+  useEscapeKey,
+  useOverlayStackRegistration,
+  type IDrawerCloseProps,
+  type IDrawerRootProps,
+} from '@cdx-ui/primitives';
+import { cn, mergeRefs, ParentContext, useParentContext, useStyleContext } from '@cdx-ui/utils';
+import {
+  usePopupOverlayAnimation,
+  usePopupRootAnimation,
+  type AnimationRootDisableAll,
+} from '../../animation';
+import {
+  AnimationSettingsProvider,
+  useAnimationSettings,
+} from '../../providers/animation-settings';
+import { Heading } from '../Heading';
+import { Icon } from '../Icon';
+import { Text } from '../Text';
+import { DrawerAnimationProvider, useDrawerAnimation } from './animation';
+import {
+  type DrawerFooterVariantProps,
+  type DrawerHeaderVariantProps,
+  type DrawerPlacement,
+  type DrawerVariantProps,
+  drawerCloseIconVariants,
+  drawerCloseVariants,
+  drawerContentInnerVariants,
+  drawerContentVariants,
+  drawerDescriptionVariants,
+  drawerFooterVariants,
+  drawerHeaderContentVariants,
+  drawerHeaderVariants,
+  drawerLeadingSlotVariants,
+  drawerOverlayVariants,
+  drawerPanelVariants,
+  drawerPortalVariants,
+  drawerTitleVariants,
+} from './styles';
+import {
+  DRAWER_EDGE_PADDING,
+  DRAWER_ENTER_EASING,
+  DRAWER_ENTER_MS,
+  DRAWER_EXIT_EASING,
+  DRAWER_EXIT_MS,
+  DRAWER_WIDE_BREAKPOINT,
+  WEB_TRANSITION_SAFETY_MS,
+  getDrawerSlideKeyframes,
+  isHorizontalDrawerPlacement,
+  resolveDrawerPlacement,
+  useClampedDrawerExtent,
+  useSafeInsets,
+} from './utils';
+
+export type { DrawerPlacement } from './styles';
+
+export { useDrawer } from '@cdx-ui/primitives';
+
+const IS_WEB = Platform.OS === 'web';
+
+type DrawerDataState = 'entering' | 'open' | 'closed';
+
+// =============================================================================
+// STYLE CONTEXT
+// =============================================================================
+
+const SCOPE = 'DRAWER';
+
+const useDrawerStyleContext = () => useStyleContext(SCOPE) as DrawerVariantProps;
+
+// =============================================================================
+// ANIMATED PRIMITIVES
+// =============================================================================
+
+const AnimatedOverlay = Animated.createAnimatedComponent(DrawerOverlayPrimitive);
+
+// =============================================================================
+// STYLED ROOT
+// =============================================================================
+
+export interface DrawerRootProps
+  extends
+    Omit<ViewProps, 'children' | 'role'>,
+    IDrawerRootProps,
+    Omit<DrawerVariantProps, 'placement'> {
+  className?: string;
+  animation?: AnimationRootDisableAll;
+  /**
+   * Edge the panel attaches to. Applies to both `modal` and `permanent`.
+   * @default 'right'
+   */
+  placement?: DrawerPlacement;
+  /**
+   * Stacking order for the modal overlay layer (backdrop + panel).
+   * Defaults to {@link MODAL_OVERLAY_Z_INDEX} (10000).
+   */
+  zIndex?: number;
+}
+
+const DrawerRoot = forwardRef<View, DrawerRootProps>(
+  (
+    {
+      variant = 'permanent',
+      size = 'default',
+      placement: placementProp,
+      fullBleed = false,
+      animation,
+      className,
+      children,
+      style,
+      isOpen,
+      defaultOpen,
+      onOpenChange,
+      closeOnBackdropPress = true,
+      closeOnEscKey = true,
+      zIndex = MODAL_OVERLAY_Z_INDEX,
+      ...props
+    },
+    ref,
+  ) => {
+    const placement = resolveDrawerPlacement(placementProp);
+    const parent = useParentContext();
+    const ctx = useMemo(
+      () => ({ ...parent, [SCOPE]: { variant, size, placement, fullBleed } }),
+      [parent, variant, size, placement, fullBleed],
+    );
+
+    const { progress, isAllAnimationsDisabled } = usePopupRootAnimation({ animation });
+    const panelExtent = useClampedDrawerExtent(size, placement);
+
+    const animationContextValue = useMemo(() => ({ progress }), [progress]);
+
+    const animationSettingsContextValue = useMemo(
+      () => ({ isAllAnimationsDisabled }),
+      [isAllAnimationsDisabled],
+    );
+
+    if (variant === 'permanent') {
+      return (
+        <AnimationSettingsProvider value={animationSettingsContextValue}>
+          <ParentContext.Provider value={ctx}>
+            <DrawerRootPrimitive
+              ref={ref}
+              isOpen={isOpen}
+              defaultOpen={defaultOpen ?? true}
+              onOpenChange={onOpenChange}
+              closeOnBackdropPress={false}
+              closeOnEscKey={false}
+              className={cn('self-stretch overflow-hidden', className)}
+              style={style}
+              {...props}
+              {...mergeDataAttributes(props, dataAttributes({ slot: 'drawer', placement }))}
+            >
+              <DrawerPermanentPanel size={size} placement={placement} panelExtent={panelExtent}>
+                {children}
+              </DrawerPermanentPanel>
+            </DrawerRootPrimitive>
+          </ParentContext.Provider>
+        </AnimationSettingsProvider>
+      );
+    }
+
+    return (
+      <AnimationSettingsProvider value={animationSettingsContextValue}>
+        <DrawerAnimationProvider value={animationContextValue}>
+          <ParentContext.Provider value={ctx}>
+            <DrawerRootPrimitive
+              ref={ref}
+              isOpen={isOpen}
+              defaultOpen={defaultOpen}
+              onOpenChange={onOpenChange}
+              closeOnBackdropPress={closeOnBackdropPress}
+              closeOnEscKey={closeOnEscKey}
+              className={className}
+              style={style}
+              {...props}
+              {...mergeDataAttributes(props, dataAttributes({ slot: 'drawer', placement }))}
+            >
+              <DrawerPopup zIndex={zIndex}>{children}</DrawerPopup>
+            </DrawerRootPrimitive>
+          </ParentContext.Provider>
+        </DrawerAnimationProvider>
+      </AnimationSettingsProvider>
+    );
+  },
+);
+
+DrawerRoot.displayName = 'Drawer';
+
+interface DrawerPermanentPanelProps {
+  size: DrawerVariantProps['size'];
+  placement: DrawerPlacement;
+  panelExtent: number;
+  children?: ReactNode;
+}
+
+const DrawerPermanentPanel = ({
+  size,
+  placement,
+  panelExtent,
+  children,
+}: DrawerPermanentPanelProps) => {
+  const { open } = useDrawer();
+  const { isAllAnimationsDisabled } = useAnimationSettings();
+  const isHorizontal = isHorizontalDrawerPlacement(placement);
+  const extent = useSharedValue(open ? panelExtent : 0);
+  const hasMounted = useRef(false);
+
+  useEffect(() => {
+    const target = open ? panelExtent : 0;
+
+    if (!hasMounted.current) {
+      hasMounted.current = true;
+      extent.set(target);
+      return;
+    }
+
+    if (isAllAnimationsDisabled) {
+      extent.set(target);
+      return;
+    }
+
+    extent.set(
+      withTiming(target, {
+        duration: open ? DRAWER_ENTER_MS : DRAWER_EXIT_MS,
+        easing: open ? DRAWER_ENTER_EASING : DRAWER_EXIT_EASING,
+      }),
+    );
+  }, [extent, isAllAnimationsDisabled, open, panelExtent]);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const value = extent.get();
+    return isHorizontal ? { width: value } : { height: value };
+  }, [isHorizontal]);
+
+  return (
+    <Animated.View
+      className={drawerPanelVariants({ size, variant: 'permanent', placement })}
+      pointerEvents={open ? 'auto' : 'none'}
+      style={animatedStyle}
+    >
+      <View
+        className="h-full"
+        style={isHorizontal ? { width: panelExtent } : { height: panelExtent }}
+      >
+        {open ? children : null}
+      </View>
+    </Animated.View>
+  );
+};
+
+// =============================================================================
+// INTERNAL POPUP (portal + overlay + panel — not a Figma slot)
+// =============================================================================
+
+interface DrawerPopupProps {
+  className?: string;
+  children?: ReactNode;
+  disableFullWindowOverlay?: boolean;
+  zIndex?: number;
+}
+
+const DrawerPopup = forwardRef<View, DrawerPopupProps>(
+  (
+    { className, children, disableFullWindowOverlay = false, zIndex = MODAL_OVERLAY_Z_INDEX },
+    ref,
+  ) => {
+    const { size, placement: placementProp } = useDrawerStyleContext();
+    const placement = resolveDrawerPlacement(placementProp);
+    const { open, onOpenChange, closeOnEscKey, nativeID } = useDrawer();
+    const { width: windowWidth, height: windowHeight } = useWindowDimensions();
+    const panelExtent = useClampedDrawerExtent(size, placement);
+    const parentContext = useParentContext();
+
+    const animationContext = useDrawerAnimation();
+    const parentAnimationSettings = useAnimationSettings();
+    const { isAllAnimationsDisabled } = parentAnimationSettings;
+    const panelMotion = useMemo(
+      () => getDrawerSlideKeyframes(placement, panelExtent),
+      [panelExtent, placement],
+    );
+
+    const fallbackIsDragging = useSharedValue(false);
+    const fallbackIsGestureReleaseAnimationRunning = useSharedValue(false);
+
+    const progress = animationContext.progress;
+
+    useEffect(() => {
+      if (open) {
+        progress.set(1);
+      }
+    }, [open, progress]);
+
+    const {
+      rContainerStyle,
+      entering: overlayEntering,
+      exiting: overlayExiting,
+    } = usePopupOverlayAnimation({
+      progress,
+      isDragging: fallbackIsDragging,
+      isGestureReleaseAnimationRunning: fallbackIsGestureReleaseAnimationRunning,
+    });
+
+    const panelRef = useRef<View | null>(null);
+    const prevOpenRef = useRef(open);
+    const [isExiting, setIsExiting] = useState(false);
+    const [webState, setWebState] = useState<DrawerDataState>(open ? 'entering' : 'closed');
+
+    const handleClose = useCallback(() => {
+      onOpenChange(false);
+    }, [onOpenChange]);
+
+    useEscapeKey(open && closeOnEscKey, handleClose, {
+      id: nativeID,
+      groupId: nativeID,
+      layer: 'modal',
+    });
+    const { isTopmost } = useOverlayStackRegistration({
+      active: open && Platform.OS !== 'web',
+      capabilities: ['back'],
+      id: nativeID,
+      groupId: nativeID,
+      layer: 'modal',
+    });
+
+    useEffect(() => {
+      if (!open || Platform.OS === 'web') return;
+
+      const backHandler = 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;
+
+    useEffect(() => {
+      if (!IS_WEB || !open) return;
+      const raf = requestAnimationFrame(() => {
+        setWebState('open');
+      });
+      return () => cancelAnimationFrame(raf);
+    }, [open]);
+
+    useEffect(() => {
+      if (!IS_WEB || !isExiting) return;
+
+      const node = panelRef.current as unknown as HTMLElement | null;
+      let done = false;
+
+      const finish = () => {
+        if (done) return;
+        done = true;
+        setIsExiting(false);
+      };
+
+      const safetyTimer = setTimeout(finish, WEB_TRANSITION_SAFETY_MS);
+
+      if (!node || typeof node.addEventListener !== 'function') {
+        return () => {
+          clearTimeout(safetyTimer);
+        };
+      }
+
+      const handler = (event: Event) => {
+        if (event.target !== node) return;
+        const propertyName = (event as unknown as { propertyName?: string }).propertyName ?? '';
+        if (propertyName === 'opacity' || propertyName === 'transform') {
+          finish();
+        }
+      };
+      node.addEventListener('transitionend', handler);
+
+      return () => {
+        clearTimeout(safetyTimer);
+        node.removeEventListener('transitionend', handler);
+      };
+    }, [isExiting]);
+
+    const dataState: DrawerDataState = webState;
+    const shouldMount = IS_WEB ? open || isExiting : open;
+
+    if (!shouldMount) {
+      return null;
+    }
+
+    const portalClassName = cn(drawerPortalVariants());
+    const overlayClassName = cn(drawerOverlayVariants());
+    const panelClassName = cn(
+      drawerPanelVariants({ size, variant: 'modal', placement }),
+      className,
+    );
+    const panelSizeStyle = 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 (
+      <DrawerPortalPrimitive forceMount>
+        <ParentContext.Provider value={parentContext}>
+          <AnimationSettingsProvider value={parentAnimationSettings}>
+            <DrawerAnimationProvider value={animationContext}>
+              <FullWindowOverlay
+                disableFullWindowOverlay={disableFullWindowOverlay}
+                unstable_accessibilityContainerViewIsModal
+              >
+                <View
+                  className={portalClassName}
+                  style={{ zIndex }}
+                  pointerEvents="box-none"
+                  {...(IS_WEB ? dataAttributes({ state: dataState }) : undefined)}
+                >
+                  <Animated.View
+                    entering={overlayEntering}
+                    exiting={overlayExiting}
+                    style={StyleSheet.absoluteFill}
+                  >
+                    <AnimatedOverlay
+                      forceMount
+                      testID="drawer-overlay"
+                      className={overlayClassName}
+                      style={IS_WEB ? undefined : rContainerStyle}
+                      {...mergeDataAttributes(
+                        {},
+                        dataAttributes({ slot: 'drawer-overlay' }),
+                        IS_WEB ? dataAttributes({ state: dataState }) : undefined,
+                      )}
+                    />
+                  </Animated.View>
+
+                  <Animated.View
+                    entering={nativePanelEntering}
+                    exiting={nativePanelExiting}
+                    pointerEvents="box-none"
+                    style={[internalStyles[placement], panelSizeStyle]}
+                  >
+                    <FocusScope contain={open} restoreFocus autoFocus={open}>
+                      <View
+                        ref={mergeRefs(ref, panelRef)}
+                        nativeID={nativeID}
+                        role="dialog"
+                        aria-modal={true}
+                        aria-labelledby={`${nativeID}-title`}
+                        aria-describedby={`${nativeID}-description`}
+                        className={panelClassName}
+                        style={panelSizeStyle}
+                        {...mergeDataAttributes(
+                          {},
+                          dataAttributes({ slot: 'drawer', placement }),
+                          IS_WEB ? dataAttributes({ state: dataState }) : undefined,
+                        )}
+                      >
+                        {children}
+                      </View>
+                    </FocusScope>
+                  </Animated.View>
+                </View>
+              </FullWindowOverlay>
+            </DrawerAnimationProvider>
+          </AnimationSettingsProvider>
+        </ParentContext.Provider>
+      </DrawerPortalPrimitive>
+    );
+  },
+);
+
+DrawerPopup.displayName = 'DrawerPopup';
+
+export interface DrawerCloseProps extends IDrawerCloseProps {
+  className?: string;
+  /** Replaces the default close glyph. */
+  children?: ReactNode;
+}
+
+const DrawerClose = forwardRef<ComponentRef<typeof Pressable>, DrawerCloseProps>(
+  ({ className, accessibilityLabel = 'Close', children, style, ...props }, ref) => (
+    <DrawerClosePrimitive
+      ref={ref}
+      className={cn(drawerCloseVariants(), className)}
+      style={style}
+      hitSlop={12}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'drawer-close' }))}
+    >
+      {children ?? <Icon as={CloseIcon} className={drawerCloseIconVariants()} />}
+    </DrawerClosePrimitive>
+  ),
+);
+
+DrawerClose.displayName = 'Drawer.Close';
+
+// =============================================================================
+// STYLED LEADING SLOT
+// =============================================================================
+
+export interface DrawerLeadingSlotProps extends ViewProps {
+  asChild?: boolean;
+  className?: string;
+  'aria-hidden'?: boolean;
+}
+
+const DrawerLeadingSlot = forwardRef<View, DrawerLeadingSlotProps>(
+  ({ asChild, className, style, 'aria-hidden': ariaHidden, ...props }, ref) => {
+    const Comp = asChild ? Slot : View;
+    return (
+      <Comp
+        ref={ref}
+        accessibilityElementsHidden={ariaHidden !== false}
+        aria-hidden={ariaHidden ?? true}
+        className={cn(drawerLeadingSlotVariants(), className)}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, 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.
+ */
+export interface DrawerHeaderProps extends ViewProps, DrawerHeaderVariantProps {
+  /**
+   * Substitute the header element with the single child. The child is rendered
+   * unchanged: no row partition and no close control are applied, and `close`
+   * is ignored.
+   */
+  asChild?: boolean;
+  /**
+   * Close control rendered at the end of the row.
+   *
+   * - omitted: renders a composed `Drawer.Close` child if present, otherwise a
+   *   default `<Drawer.Close />`
+   * - `null`: renders no close control
+   * - a node: rendered in place of the default and any `Drawer.Close` child
+   */
+  close?: ReactNode;
+  className?: string;
+  children?: ReactNode;
+}
+
+const renderDrawerHeaderRow = (children: ReactNode, close: ReactNode) => {
+  const childArray = Children.toArray(children);
+  const leadingChild = childArray.find(
+    (child) => isValidElement(child) && child.type === DrawerLeadingSlot,
+  );
+  const closeChild = childArray.find(
+    (child) => isValidElement(child) && child.type === DrawerClose,
+  );
+  const textChildren = childArray.filter(
+    (child) =>
+      !isValidElement(child) || (child.type !== DrawerLeadingSlot && child.type !== DrawerClose),
+  );
+  const closeElement = close === undefined ? (closeChild ?? <DrawerClose />) : close;
+
+  return (
+    <>
+      {leadingChild}
+      {textChildren.length > 0 ? (
+        <View className={drawerHeaderContentVariants()}>{textChildren}</View>
+      ) : null}
+      {closeElement}
+    </>
+  );
+};
+
+const DrawerHeader = forwardRef<View, DrawerHeaderProps>(
+  ({ asChild, close, showSeparator = true, className, children, style, ...props }, ref) => {
+    const insets = useSafeInsets();
+    const { placement: placementProp, variant } = useDrawerStyleContext();
+    const placement = resolveDrawerPlacement(placementProp);
+    const paddingTop =
+      variant === 'modal' && placement !== 'bottom'
+        ? Math.max(insets.top, DRAWER_EDGE_PADDING)
+        : DRAWER_EDGE_PADDING;
+    const computedClassName = cn(drawerHeaderVariants({ showSeparator }), className);
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={[{ paddingTop }, style]}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'drawer-header' }))}
+      >
+        {asChild ? children : renderDrawerHeaderRow(children, close)}
+      </Comp>
+    );
+  },
+);
+
+DrawerHeader.displayName = 'Drawer.Header';
+
+// =============================================================================
+// STYLED TITLE
+// =============================================================================
+
+export interface DrawerTitleProps extends TextProps {
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+const DrawerTitle = forwardRef<View, DrawerTitleProps>(
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const { nativeID } = useDrawer();
+    const computedClassName = cn(drawerTitleVariants(), className);
+
+    if (asChild) {
+      return (
+        <Slot
+          ref={ref}
+          nativeID={`${nativeID}-title`}
+          className={computedClassName}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'drawer-title' }))}
+        >
+          {children}
+        </Slot>
+      );
+    }
+
+    return (
+      <Heading
+        ref={ref}
+        size="sm"
+        nativeID={`${nativeID}-title`}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'drawer-title' }))}
+      >
+        {children}
+      </Heading>
+    );
+  },
+);
+
+DrawerTitle.displayName = 'Drawer.Title';
+
+// =============================================================================
+// STYLED DESCRIPTION
+// =============================================================================
+
+export interface DrawerDescriptionProps extends TextProps {
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+const DrawerDescription = forwardRef<View, DrawerDescriptionProps>(
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const { nativeID } = useDrawer();
+    const computedClassName = cn(drawerDescriptionVariants(), className);
+    const Comp = asChild ? Slot : Text;
+
+    return (
+      <Comp
+        ref={ref}
+        nativeID={`${nativeID}-description`}
+        size="sm"
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'drawer-description' }))}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+DrawerDescription.displayName = 'Drawer.Description';
+
+// =============================================================================
+// STYLED CONTENT (Figma Drawer.Content — scroll region)
+// =============================================================================
+
+export interface DrawerContentProps extends ScrollViewProps {
+  className?: string;
+  contentClassName?: string;
+  children?: ReactNode;
+  fullBleed?: boolean;
+}
+
+const DrawerContent = forwardRef<ScrollView, DrawerContentProps>(
+  (
+    {
+      className,
+      contentClassName,
+      children,
+      style,
+      contentContainerStyle,
+      fullBleed: fullBleedProp,
+      ...props
+    },
+    ref,
+  ) => {
+    const { fullBleed: contextFullBleed } = useDrawerStyleContext();
+    const fullBleed = fullBleedProp ?? contextFullBleed ?? false;
+
+    return (
+      <ScrollView
+        ref={ref}
+        className={cn(drawerContentVariants({ fullBleed }), className)}
+        style={style}
+        contentContainerClassName={cn(drawerContentInnerVariants(), contentClassName)}
+        contentContainerStyle={contentContainerStyle}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'drawer-content' }))}
+      >
+        {children}
+      </ScrollView>
+    );
+  },
+);
+
+DrawerContent.displayName = 'Drawer.Content';
+
+// =============================================================================
+// STYLED FOOTER
+// =============================================================================
+
+export interface DrawerFooterProps extends ViewProps, DrawerFooterVariantProps {
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+  direction?: 'row' | 'column';
+}
+
+const DrawerFooter = forwardRef<View, DrawerFooterProps>(
+  (
+    {
+      asChild,
+      showSeparator = false,
+      direction: directionProp,
+      className,
+      children,
+      style,
+      ...props
+    },
+    ref,
+  ) => {
+    const { width } = useWindowDimensions();
+    const insets = useSafeInsets();
+    const { placement: placementProp, variant } = useDrawerStyleContext();
+    const placement = resolveDrawerPlacement(placementProp);
+    const direction = directionProp ?? (width >= DRAWER_WIDE_BREAKPOINT ? 'row' : 'column');
+    const computedClassName = cn(drawerFooterVariants({ showSeparator, direction }), className);
+    const Comp = asChild ? Slot : View;
+    const paddingBottom =
+      variant === 'modal' && placement !== 'top'
+        ? Math.max(insets.bottom, DRAWER_EDGE_PADDING)
+        : DRAWER_EDGE_PADDING;
+
+    return (
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={[{ paddingBottom }, style]}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'drawer-footer' }))}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+DrawerFooter.displayName = 'Drawer.Footer';
+
+// =============================================================================
+// COMPOUND COMPONENT
+// =============================================================================
+
+type DrawerCompoundComponent = typeof DrawerRoot & {
+  Header: typeof DrawerHeader;
+  LeadingSlot: typeof DrawerLeadingSlot;
+  Close: typeof DrawerClose;
+  Title: typeof DrawerTitle;
+  Description: typeof DrawerDescription;
+  Content: typeof DrawerContent;
+  Footer: typeof DrawerFooter;
+};
+
+export const Drawer = Object.assign(DrawerRoot, {
+  Header: DrawerHeader,
+  LeadingSlot: DrawerLeadingSlot,
+  Close: DrawerClose,
+  Title: DrawerTitle,
+  Description: DrawerDescription,
+  Content: DrawerContent,
+  Footer: DrawerFooter,
+}) as DrawerCompoundComponent;
+
+const internalStyles = 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,
+  },
+});
+
+export { MODAL_OVERLAY_Z_INDEX };