@mrmeg/expo-ui 0.13.0-rsd.0 → 0.13.0

package/dist/components/Dialog.js

@@ -1,232 +1,84 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
-import { createContext, use, useCallback, useEffect, useId, useMemo, useRef, useState, } from "react";
-import { Platform } from "react-native";
-import { css, html } from "react-strict-dom";
-import { Portal } from "../lib/portal.js";
-import { flattenStyle } from "../lib/styles.js";
+import { Platform, StyleSheet, View } from "react-native";
+import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
+import * as DialogPrimitive from "@rn-primitives/dialog";
+import * as AlertDialogPrimitive from "@rn-primitives/alert-dialog";
+import { AnimatedView } from "./AnimatedView.js";
 import { TextClassContext, TextColorContext } from "./StyledText.context";
 import { StyledText } from "./StyledText.js";
 import { useTheme } from "../hooks/useTheme.js";
 import { spacing } from "../constants/spacing.js";
 import { palette } from "../constants/colors.js";
-const isWeb = Platform.OS === "web";
-const DialogContext = createContext(null);
-function useDialogContext(component) {
-    const ctx = use(DialogContext);
-    if (!ctx) {
-        throw new Error(`${component} must be used within a <Dialog> / <AlertDialog>`);
-    }
-    return ctx;
-}
-function createDialogRoot(variant) {
-    return function DialogRoot({ children, open: openProp, defaultOpen, onOpenChange, }) {
-        const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen ?? false);
-        const isControlled = openProp !== undefined;
-        const open = isControlled ? openProp : uncontrolledOpen;
-        const baseId = useId();
-        const setOpen = useCallback((next) => {
-            if (!isControlled)
-                setUncontrolledOpen(next);
-            onOpenChange?.(next);
-        }, [isControlled, onOpenChange]);
-        const value = useMemo(() => ({
-            open,
-            setOpen,
-            variant,
-            titleId: `${baseId}-title`,
-            descriptionId: `${baseId}-desc`,
-            dismissOnOverlay: variant === "dialog",
-        }), [open, setOpen, baseId]);
-        return _jsx(DialogContext.Provider, { value: value, children: children });
-    };
-}
+const FullWindowOverlay = Platform.OS === "ios" ? RNFullWindowOverlay : React.Fragment;
 // ============================================================================
-// Trigger / Close (asChild slot pattern)
+// Dialog
 // ============================================================================
-/**
- * Clone a single child element to inject an onPress handler (the package's
- * interactive components — Button — expose onPress). Falls back to a plain
- * html.button when `asChild` is not used.
- */
-function SlotPressable({ asChild, onActivate, children, }) {
-    if (asChild && React.isValidElement(children)) {
-        const child = children;
-        return React.cloneElement(child, {
-            onPress: () => {
-                child.props.onPress?.();
-                onActivate();
-            },
-        });
-    }
-    return (_jsx(html.button, { type: "button", onClick: onActivate, children: children }));
-}
-function DialogTrigger({ asChild, children, }) {
-    const { setOpen } = useDialogContext("DialogTrigger");
-    return (_jsx(SlotPressable, { asChild: asChild, onActivate: () => setOpen(true), children: children }));
-}
-function DialogClose({ asChild, children, }) {
-    const { setOpen } = useDialogContext("DialogClose");
-    return (_jsx(SlotPressable, { asChild: asChild, onActivate: () => setOpen(false), children: children }));
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogClose = DialogPrimitive.Close;
+function DialogRoot({ children, ...props }) {
+    return _jsx(DialogPrimitive.Root, { ...props, children: children });
 }
-// ============================================================================
-// Content (Portal + Overlay + centered card)
-// ============================================================================
-// css.keyframes() MUST be called inline and unconditionally, before the
-// css.create() that references it: StyleX's babel plugin (web) only folds a
-// keyframe name defined in the same file, and it cannot fold a runtime ternary
-// condition (`Platform.OS === "web" ? ... : ""` throws "Referenced constant is
-// not defined" in dev). On native css.keyframes is a no-op returning its arg,
-// and the animationName has no visible effect (native animation fidelity gap).
-const fadeIn = css.keyframes({
-    from: { opacity: 0 },
-    to: { opacity: 1 },
-});
-const scaleIn = css.keyframes({
-    from: { opacity: 0, transform: "scale(0.95)" },
-    to: { opacity: 1, transform: "scale(1)" },
-});
-const styles = css.create({
-    overlay: (backgroundColor, zIndex) => ({
-        position: "fixed",
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        backgroundColor,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        zIndex,
-        // Fade-in on web; instant on native (animation props are no-ops there).
-        animationName: fadeIn,
-        animationDuration: "0.2s",
-        animationTimingFunction: "ease-out",
-    }),
-    // Native uses absolute fill rather than position:fixed (RSD maps fixed→
-    // absolute on native, but be explicit for the full-screen scrim).
-    overlayNative: {
-        position: "absolute",
-    },
-    // html.div defaults to display:block on web (not RN flexbox), so set flex
-    // explicitly on the wrapper + card to lay out their children predictably.
-    sizer: {
-        display: "flex",
-        flexDirection: "column",
-        width: "90%",
-        maxWidth: 450,
-        maxHeight: "85%",
-        animationName: scaleIn,
-        animationDuration: "0.25s",
-        animationTimingFunction: "ease-out",
-    },
-    card: (backgroundColor, borderColor, borderRadius, padding, boxShadow) => ({
-        display: "flex",
-        flexDirection: "column",
-        backgroundColor,
-        borderColor,
-        borderWidth: 1,
-        borderStyle: "solid",
-        borderRadius,
-        padding,
-        width: "100%",
-        boxShadow,
-    }),
-    header: (gap, marginBottom) => ({
-        display: "flex",
-        flexDirection: "column",
-        gap,
-        marginBottom,
-    }),
-    footer: (gap, marginTop) => ({
-        display: "flex",
-        flexDirection: "row",
-        justifyContent: "flex-end",
-        gap,
-        marginTop,
-    }),
-});
-function DialogContentImpl({ children, style, portalHost }) {
-    const ctx = useDialogContext("DialogContent");
-    const { open, setOpen, variant, titleId, descriptionId, dismissOnOverlay } = ctx;
+function DialogContent({ portalHost, style, children, ...props }) {
     const { theme, getShadowStyle, getContrastingColor } = useTheme();
-    const cardRef = useRef(null);
     const textColor = getContrastingColor(theme.colors.popover, palette.white, palette.black);
-    const zIndex = variant === "alertdialog" ? 52 : 50;
-    // Escape-to-close on web.
-    useEffect(() => {
-        if (!open || !isWeb || typeof document === "undefined")
-            return;
-        const onKeyDown = (e) => {
-            if (e.key === "Escape")
-                setOpen(false);
-        };
-        document.addEventListener("keydown", onKeyDown);
-        return () => document.removeEventListener("keydown", onKeyDown);
-    }, [open, setOpen]);
-    // Move focus into the dialog card on open (web).
-    useEffect(() => {
-        if (!open || !isWeb)
-            return;
-        cardRef.current?.focus?.();
-    }, [open]);
-    if (!open)
-        return null;
-    const handleOverlayClick = () => {
-        if (dismissOnOverlay)
-            setOpen(false);
-    };
-    // The Portal renders into a separate subtree (the PortalHost), so the
-    // DialogContext from the provider above is NOT visible there. Re-provide it
-    // inside the portal so Title/Description (which read titleId/descriptionId)
-    // and Close work from within the portaled content.
-    return (_jsx(Portal, { hostName: portalHost, children: _jsx(DialogContext.Provider, { value: ctx, children: _jsx(html.div, { style: [styles.overlay(theme.colors.overlay, zIndex), !isWeb ? styles.overlayNative : null], onClick: dismissOnOverlay ? handleOverlayClick : undefined, children: _jsx(html.div, { style: styles.sizer, children: _jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(html.div, { ref: cardRef, role: variant === "alertdialog" ? "alertdialog" : "dialog", "aria-modal": true, "aria-labelledby": titleId, "aria-describedby": descriptionId, tabIndex: -1, 
-                                // Stop clicks inside the card from bubbling to the overlay scrim.
-                                onClick: (e) => e.stopPropagation?.(), style: [
-                                    styles.card(theme.colors.popover, theme.colors.border, spacing.radiusLg, spacing.lg, getShadowStyle("soft").boxShadow ?? "none"),
-                                    style,
-                                ], children: children }) }) }) }) }) }) }));
-}
-// ============================================================================
-// Header / Footer / Title / Description
-// ============================================================================
-function DialogHeader({ children, style }) {
-    return (_jsx(html.div, { style: [styles.header(spacing.xs, spacing.md), style], children: children }));
+    return (_jsx(DialogPrimitive.Portal, { hostName: portalHost, children: _jsx(FullWindowOverlay, { children: _jsx(DialogPrimitive.Overlay, { style: StyleSheet.flatten([
+                    StyleSheet.absoluteFill,
+                    { backgroundColor: theme.colors.overlay },
+                    Platform.OS === "web" && { zIndex: 50 },
+                ]), children: _jsx(AnimatedView, { type: "fade", enterDuration: 200, style: StyleSheet.absoluteFill, children: _jsx(View, { style: overlayStyles.centeredContainer, children: _jsx(AnimatedView, { type: "scale", enterDuration: 250, style: overlayStyles.sizer, children: _jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(DialogPrimitive.Content, { style: StyleSheet.flatten([
+                                            {
+                                                backgroundColor: theme.colors.popover,
+                                                borderColor: theme.colors.border,
+                                                borderWidth: 1,
+                                                borderRadius: spacing.radiusLg,
+                                                padding: spacing.lg,
+                                                width: "100%",
+                                                ...getShadowStyle("soft"),
+                                            },
+                                            style,
+                                        ]), ...props, children: children }) }) }) }) }) }) }) }) }));
 }
-function DialogFooter({ children, style }) {
-    return (_jsx(html.div, { style: [styles.footer(spacing.sm, spacing.lg), style], children: children }));
+function DialogHeader({ children, style, ...props }) {
+    return (_jsx(View, { style: StyleSheet.flatten([{ gap: spacing.xs, marginBottom: spacing.md }, style]), ...props, children: children }));
 }
-function createTitle(variant) {
-    return function DialogTitle({ children, style, }) {
-        const { theme } = useTheme();
-        const { titleId } = useDialogContext(variant === "alertdialog" ? "AlertDialogTitle" : "DialogTitle");
-        const merged = flattenStyle([
-            { fontSize: 18, lineHeight: 24, letterSpacing: 0, color: theme.colors.text },
+function DialogFooter({ children, style, ...props }) {
+    return (_jsx(View, { style: StyleSheet.flatten([
+            {
+                flexDirection: "row",
+                justifyContent: "flex-end",
+                gap: spacing.sm,
+                marginTop: spacing.lg,
+            },
             style,
-        ]);
-        return (_jsx(StyledText, { id: titleId, fontWeight: "semibold", style: merged, children: children }));
-    };
+        ]), ...props, children: children }));
 }
-function createDescription(variant) {
-    return function DialogDescription({ children, style, }) {
-        const { theme } = useTheme();
-        const { descriptionId } = useDialogContext(variant === "alertdialog" ? "AlertDialogDescription" : "DialogDescription");
-        const merged = flattenStyle([
-            { fontSize: 14, lineHeight: 20, color: theme.colors.textDim },
-            style,
-        ]);
-        return (_jsx(StyledText, { id: descriptionId, style: merged, children: children }));
-    };
+function DialogTitle({ children, style, ...props }) {
+    const { theme } = useTheme();
+    return (_jsx(DialogPrimitive.Title, { asChild: true, children: _jsx(StyledText, { fontWeight: "semibold", style: StyleSheet.flatten([
+                {
+                    fontSize: 18,
+                    lineHeight: 24,
+                    letterSpacing: 0,
+                    color: theme.colors.text,
+                },
+                style,
+            ]), ...props, children: children }) }));
+}
+function DialogDescription({ children, style, ...props }) {
+    const { theme } = useTheme();
+    return (_jsx(DialogPrimitive.Description, { asChild: true, children: _jsx(StyledText, { style: StyleSheet.flatten([
+                {
+                    fontSize: 14,
+                    lineHeight: 20,
+                    color: theme.colors.textDim,
+                },
+                style,
+            ]), ...props, children: children }) }));
 }
-// ============================================================================
-// Dialog assembly
-// ============================================================================
-const DialogRoot = createDialogRoot("dialog");
-const DialogTitle = createTitle("dialog");
-const DialogDescription = createDescription("dialog");
 const Dialog = Object.assign(DialogRoot, {
     Trigger: DialogTrigger,
-    Content: DialogContentImpl,
+    Content: DialogContent,
     Header: DialogHeader,
     Footer: DialogFooter,
     Title: DialogTitle,
@@ -234,25 +86,60 @@ const Dialog = Object.assign(DialogRoot, {
     Close: DialogClose,
 });
 // ============================================================================
-// AlertDialog assembly
+// AlertDialog
 // ============================================================================
-const AlertDialogRoot = createDialogRoot("alertdialog");
-const AlertDialogTitle = createTitle("alertdialog");
-const AlertDialogDescription = createDescription("alertdialog");
-function AlertDialogTrigger(props) {
-    return _jsx(DialogTrigger, { ...props });
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+const AlertDialogAction = AlertDialogPrimitive.Action;
+const AlertDialogCancel = AlertDialogPrimitive.Cancel;
+function AlertDialogRoot({ children, ...props }) {
+    return _jsx(AlertDialogPrimitive.Root, { ...props, children: children });
 }
-/** AlertDialog action button — closes the dialog after the child's onPress. */
-function AlertDialogAction({ asChild, children, }) {
-    return _jsx(DialogClose, { asChild: asChild, children: children });
+function AlertDialogContent({ portalHost, style, children, ...props }) {
+    const { theme, getShadowStyle, getContrastingColor } = useTheme();
+    const textColor = getContrastingColor(theme.colors.popover, palette.white, palette.black);
+    return (_jsx(AlertDialogPrimitive.Portal, { hostName: portalHost, children: _jsx(FullWindowOverlay, { children: _jsx(AlertDialogPrimitive.Overlay, { style: StyleSheet.flatten([
+                    StyleSheet.absoluteFill,
+                    { backgroundColor: theme.colors.overlay },
+                    Platform.OS === "web" && { zIndex: 52 },
+                ]), children: _jsx(AnimatedView, { type: "fade", enterDuration: 200, style: StyleSheet.absoluteFill, children: _jsx(View, { style: overlayStyles.centeredContainer, children: _jsx(AnimatedView, { type: "scale", enterDuration: 250, style: overlayStyles.sizer, children: _jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(AlertDialogPrimitive.Content, { style: StyleSheet.flatten([
+                                            {
+                                                backgroundColor: theme.colors.popover,
+                                                borderColor: theme.colors.border,
+                                                borderWidth: 1,
+                                                borderRadius: spacing.radiusLg,
+                                                padding: spacing.lg,
+                                                width: "100%",
+                                                ...getShadowStyle("soft"),
+                                            },
+                                            style,
+                                        ]), ...props, children: children }) }) }) }) }) }) }) }) }));
 }
-/** AlertDialog cancel button — closes the dialog after the child's onPress. */
-function AlertDialogCancel({ asChild, children, }) {
-    return _jsx(DialogClose, { asChild: asChild, children: children });
+function AlertDialogTitle({ children, style, ...props }) {
+    const { theme } = useTheme();
+    return (_jsx(AlertDialogPrimitive.Title, { asChild: true, children: _jsx(StyledText, { fontWeight: "semibold", style: StyleSheet.flatten([
+                {
+                    fontSize: 18,
+                    lineHeight: 24,
+                    letterSpacing: 0,
+                    color: theme.colors.text,
+                },
+                style,
+            ]), ...props, children: children }) }));
+}
+function AlertDialogDescription({ children, style, ...props }) {
+    const { theme } = useTheme();
+    return (_jsx(AlertDialogPrimitive.Description, { asChild: true, children: _jsx(StyledText, { style: StyleSheet.flatten([
+                {
+                    fontSize: 14,
+                    lineHeight: 20,
+                    color: theme.colors.textDim,
+                },
+                style,
+            ]), ...props, children: children }) }));
 }
 const AlertDialog = Object.assign(AlertDialogRoot, {
     Trigger: AlertDialogTrigger,
-    Content: DialogContentImpl,
+    Content: AlertDialogContent,
     Header: DialogHeader,
     Footer: DialogFooter,
     Title: AlertDialogTitle,
@@ -261,8 +148,28 @@ const AlertDialog = Object.assign(AlertDialogRoot, {
     Cancel: AlertDialogCancel,
 });
 // ============================================================================
+// Shared styles
+// ============================================================================
+const overlayStyles = StyleSheet.create({
+    centeredContainer: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    // Sizes the dialog relative to the full-screen centered container. Both the
+    // width AND maxHeight must live on this wrapper (the direct flex child of the
+    // full-screen container) rather than on Content: a percentage resolves
+    // against the parent's resolved box, and this wrapper's box is the screen.
+    // Putting `maxHeight: "85%"` on Content instead resolves it against this
+    // (content-sized) wrapper — clamping the card to 85% of its own content
+    // height, so the footer spills out the bottom.
+    sizer: {
+        width: "90%",
+        maxWidth: 450,
+        maxHeight: "85%",
+    },
+});
+// ============================================================================
 // Exports
 // ============================================================================
-const DialogContent = DialogContentImpl;
-const AlertDialogContent = DialogContentImpl;
 export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogClose, AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };

package/dist/components/DismissKeyboard.js

@@ -1,12 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { Platform, ScrollView, View, } from "react-native";
-import { css, html } from "react-strict-dom";
 import { KeyboardController, useKeyboardContext, useKeyboardState, } from "react-native-keyboard-controller";
 import { KeyboardAvoidingView, useKeyboardAvoidance } from "./KeyboardAvoidingView.js";
 import { isTouchInsideKeyboardFocusedInput } from "./keyboardFocusRegistry.js";
-import { sanitizeWebStyle } from "../lib/styles.js";
-const IS_WEB = Platform.OS === "web";
 /**
  * Native tap-away keyboard dismissal.
  *
@@ -35,35 +32,10 @@ function useDismissKeyboardOnOutsideTouch() {
         return false;
     }, [focusedInput, isVisible]);
 }
-const webStyles = css.create({
-    fill: { display: "flex", flexDirection: "column", flexGrow: 1, flexShrink: 1, flexBasis: "0%" },
-    scroller: {
-        display: "flex",
-        flexDirection: "column",
-        flexGrow: 1,
-        flexShrink: 1,
-        flexBasis: "0%",
-        justifyContent: "center",
-        overflowY: "auto",
-    },
-});
 /**
- * Web layout. There's no software keyboard to dismiss on web, so the native
- * tap-away + responder-capture logic is inert here — this is purely the layout
- * wrapper, rebuilt on react-strict-dom (html.div) so web is RNW-free. A
- * scrollable variant uses overflowY:auto; otherwise it's a flex fill.
- */
-function WebDismissKeyboardLayout({ children, style, scrollable = true }) {
-    return (_jsx(html.div, { style: [
-            scrollable ? webStyles.scroller : webStyles.fill,
-            sanitizeWebStyle(style),
-        ], children: children }));
-}
-/**
- * Native layout — unchanged: RN ScrollView/View (no RSD scroll analog) plus the
- * KeyboardAvoidingView path and the responder-capture tap-away dismissal.
+ * @returns Wrapper for a view that dismisses the keyboard when tapped outside of a text input
  */
-function NativeDismissKeyboardLayout({ children, style, avoidKeyboard = true, scrollable = true, dismissOnTouchStart, }) {
+function DismissKeyboardLayout({ children, style, avoidKeyboard = true, scrollable = true, dismissOnTouchStart, }) {
     const hasKeyboardAvoidance = useKeyboardAvoidance();
     const content = scrollable ? (_jsx(ScrollView, { style: { flex: 1 }, contentContainerStyle: { flexGrow: 1, justifyContent: "center" }, keyboardShouldPersistTaps: "handled", showsVerticalScrollIndicator: false, children: children })) : (children);
     if (!avoidKeyboard || hasKeyboardAvoidance) {
@@ -71,9 +43,6 @@ function NativeDismissKeyboardLayout({ children, style, avoidKeyboard = true, sc
     }
     return (_jsx(KeyboardAvoidingView, { style: [{ flex: 1, width: "100%" }, style], keyboardVerticalOffset: Platform.OS === "ios" ? 0 : 0, onStartShouldSetResponderCapture: dismissOnTouchStart, children: content }));
 }
-function DismissKeyboardLayout(props) {
-    return IS_WEB ? _jsx(WebDismissKeyboardLayout, { ...props }) : _jsx(NativeDismissKeyboardLayout, { ...props });
-}
 function NativeDismissKeyboard(props) {
     const dismissOnTouchStart = useDismissKeyboardOnOutsideTouch();
     return (_jsx(DismissKeyboardLayout, { ...props, dismissOnTouchStart: dismissOnTouchStart }));

package/dist/components/Drawer.d.ts

@@ -1,74 +1,120 @@
-import * as React from "react";
-import { type LooseStyle } from "../lib/styles";
+import React from "react";
+import { ViewProps, StyleProp, ViewStyle } from "react-native";
+type DrawerSide = "left" | "right";
 /**
- * Drawer Component (react-strict-dom)
- *
- * A sliding drawer overlay (left/right) plus a docked, collapsible "rail"
- * variant. Controlled or uncontrolled. Web uses CSS keyframes (overlay slide-in
- * + backdrop fade) and a CSS width transition (rail). Native shows instantly —
- * the package ships no Reanimated, and there's no RSD swipe-gesture analog, so
- * the previous PanResponder swipe-to-close is a documented native gap.
+ * Drawer presentation mode.
+ * - `"overlay"` (default): modal drawer that slides in over content with a backdrop.
+ * - `"rail"`: docked, always-mounted collapsible sidebar (icon strip that expands to
+ *   a labeled panel). It is in-flow and pushes sibling content as it grows.
  */
-type DrawerSide = "left" | "right";
 type DrawerVariant = "overlay" | "rail";
-export interface DrawerProps {
+interface DrawerProps {
+    /** Controlled open state */
     open?: boolean;
+    /** Callback when open state changes */
     onOpenChange?: (open: boolean) => void;
+    /** Default open state for uncontrolled mode */
     defaultOpen?: boolean;
+    /** Which side the drawer appears from */
     side?: DrawerSide;
-    /** Drawer width in px or percentage string (overlay mode). */
+    /** Drawer width in pixels or percentage string (overlay mode only) */
     width?: number | `${number}%`;
+    /** Whether to close when backdrop is pressed */
     closeOnBackdropPress?: boolean;
+    /**
+     * Presentation mode. `"overlay"` (default) is the classic modal drawer;
+     * `"rail"` is a docked collapsible sidebar. See {@link DrawerVariant}.
+     */
     variant?: DrawerVariant;
-    /** Collapsed (icon-strip) width for rail mode. @default 72 */
+    /** Collapsed (icon-strip) width in pixels for rail mode. @default 72 */
     collapsedWidth?: number;
-    /** Expanded (labeled-panel) width for rail mode. @default 240 */
+    /** Expanded (labeled-panel) width in pixels for rail mode. @default 240 */
     expandedWidth?: number;
-    /** Whether the rail expands on hover (web only). @default true on web */
+    /**
+     * Whether the rail expands on hover (web only — native has no hover).
+     * @default true on web, false on native
+     */
     expandOnHover?: boolean;
+    /** Default expanded state for uncontrolled rail mode. @default false */
     defaultExpanded?: boolean;
+    /** Controlled expanded state for rail mode */
     expanded?: boolean;
+    /** Callback when rail expanded state changes */
     onExpandedChange?: (expanded: boolean) => void;
+    /** Children components */
     children: React.ReactNode;
 }
-export interface DrawerTriggerProps {
-    /** Accepted for API parity; the wrapper always handles the press. */
+interface DrawerTriggerProps {
+    /** Use child component as trigger */
     asChild?: boolean;
+    /** Children components */
     children: React.ReactNode;
-    style?: LooseStyle;
+    /** Optional style override */
+    style?: StyleProp<ViewStyle>;
 }
-export interface DrawerContentProps {
-    /** Accepted for API parity (native swipe is a documented gap). */
+interface DrawerContentProps extends ViewProps {
+    /** Whether to enable swipe gestures (native only) */
     swipeEnabled?: boolean;
+    /** Swipe threshold to trigger close (0-1, percentage of width) */
     swipeThreshold?: number;
+    /** Velocity threshold for quick swipe */
     velocityThreshold?: number;
-    style?: LooseStyle;
+    /** Optional style override */
+    style?: StyleProp<ViewStyle>;
+    /** Children components */
     children: React.ReactNode;
-    testID?: string;
 }
-export interface DrawerSectionProps {
+interface DrawerHeaderProps extends ViewProps {
+    /** Custom header content. Used when the structured slots are omitted. */
+    children?: React.ReactNode;
+    /** Brand or app icon shown before the title. */
+    icon?: React.ReactNode;
+    /** Header title. Strings receive the package's default drawer title style. */
+    title?: React.ReactNode;
+    /** Trailing control, such as a close or rail-collapse button. */
+    action?: React.ReactNode;
+}
+interface DrawerBodyProps extends ViewProps {
     children: React.ReactNode;
-    style?: LooseStyle;
 }
-declare function DrawerRoot({ open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen, side, width, closeOnBackdropPress, variant, collapsedWidth, expandedWidth, expandOnHover, defaultExpanded, expanded: controlledExpanded, onExpandedChange: controlledOnExpandedChange, children, }: DrawerProps): React.JSX.Element;
-declare function DrawerTrigger({ asChild, children, style }: DrawerTriggerProps): React.JSX.Element;
-export interface DrawerToggleCollapseProps {
-    asChild?: boolean;
+interface DrawerFooterProps extends ViewProps {
     children: React.ReactNode;
-    style?: LooseStyle;
 }
-declare function DrawerToggleCollapse({ asChild, children, style }: DrawerToggleCollapseProps): React.JSX.Element;
-export interface DrawerCloseProps {
+declare function DrawerRoot({ open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen, side, width, closeOnBackdropPress, variant, collapsedWidth, expandedWidth, expandOnHover, defaultExpanded, expanded: controlledExpanded, onExpandedChange: controlledOnExpandedChange, children, }: DrawerProps): React.JSX.Element;
+declare function DrawerTrigger({ asChild, children, style: styleOverride }: DrawerTriggerProps): React.JSX.Element;
+interface DrawerToggleCollapseProps {
+    /** Use child component as the toggle */
     asChild?: boolean;
+    /** Children components */
     children: React.ReactNode;
-    style?: LooseStyle;
+    /** Optional style override */
+    style?: StyleProp<ViewStyle>;
 }
-declare function DrawerClose({ asChild, children, style }: DrawerCloseProps): React.JSX.Element;
+/**
+ * Toggles the rail's expanded state. Native has no hover, so a rail needs an
+ * explicit expand/collapse control; this provides it. On web it works too and
+ * coexists with `expandOnHover`.
+ */
+declare function DrawerToggleCollapse({ asChild, children, style: styleOverride }: DrawerToggleCollapseProps): React.JSX.Element;
+/**
+ * DrawerContent dispatches to the overlay or rail implementation based on the
+ * `variant` set on the Drawer root. Both implementations are separate components
+ * so their hooks never run conditionally.
+ */
 declare function DrawerContent(props: DrawerContentProps): React.JSX.Element;
-declare function DrawerHeader({ children, style }: DrawerSectionProps): React.JSX.Element;
-declare function DrawerBody({ children, style }: DrawerSectionProps): React.JSX.Element;
-declare function DrawerFooter({ children, style }: DrawerSectionProps): React.JSX.Element;
+declare function DrawerHeader({ children, icon, title, action, style, ...props }: DrawerHeaderProps): React.JSX.Element;
+declare function DrawerBody({ children, style, ...props }: DrawerBodyProps): React.JSX.Element;
+declare function DrawerFooter({ children, style, ...props }: DrawerFooterProps): React.JSX.Element;
 declare function useDrawerClose(): () => void;
+interface DrawerCloseProps {
+    /** Use child component as close button */
+    asChild?: boolean;
+    /** Children components */
+    children: React.ReactNode;
+    /** Optional style override */
+    style?: StyleProp<ViewStyle>;
+}
+declare function DrawerClose({ asChild, children, style: styleOverride }: DrawerCloseProps): React.JSX.Element;
 declare const Drawer: typeof DrawerRoot & {
     Trigger: typeof DrawerTrigger;
     Content: typeof DrawerContent;
@@ -79,4 +125,4 @@ declare const Drawer: typeof DrawerRoot & {
     ToggleCollapse: typeof DrawerToggleCollapse;
 };
 export { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, DrawerClose, DrawerToggleCollapse, useDrawerClose, };
-export type { DrawerVariant, DrawerSide };
+export type { DrawerProps, DrawerVariant, DrawerTriggerProps, DrawerContentProps, DrawerHeaderProps, DrawerBodyProps, DrawerFooterProps, DrawerCloseProps, DrawerToggleCollapseProps, };