panelui-native 0.32.0 → 0.34.0

package/lib/module/components/button/index.js

@@ -1,14 +1,15 @@
 "use strict";
 
 import { forwardRef } from 'react';
+import { View } from 'react-native';
 import { tv } from 'tailwind-variants';
 import { useCSSVariable } from 'uniwind';
 import { AnimatedPressable } from "../../primitives/animated-pressable.js";
 import { Text, textChildren } from "../../primitives/text.js";
 import { IconColorProvider } from "../../icons/index.js";
-import { getNativeUI } from "../../native/index.js";
+import { getNativeUI, getSwiftUIModifiers } from "../../native/index.js";
 import { Spinner } from "../spinner/index.js";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const buttonVariants = tv({
   slots: {
     root: 'flex-row items-center justify-center gap-2 rounded-lg border border-transparent',
@@ -121,6 +122,50 @@ const NATIVE_HEIGHT = {
   icon: 44
 };
 
+/**
+ * Room around the glyph in a native icon button, applied to the glyph itself.
+ *
+ * Not to the button, and that distinction is the whole thing. SwiftUI's
+ * `padding` on a Button pads *outside* its background — the chrome stays the
+ * size it was and moves inward — and `frame` only sets the layout box, leaving
+ * a glyph-sized background centred in a larger invisible one. Neither grows
+ * the button. What the background is drawn around is the *label*, and the
+ * label here is a React Native view we host ourselves, so padding it in React
+ * is both the simplest lever and the only one that works.
+ */
+const NATIVE_ICON_PADDING = 6;
+
+/**
+ * The frame a native icon button is given, which must contain the padded glyph
+ * above with room to spare.
+ *
+ * It exists to end a measurement, not to set a look. The chain is
+ * `Host(matchContents)` → platform button → `RNHostView(matchContents)` → our
+ * view: every link sized by its contents, and nothing anywhere with a size of
+ * its own. Something has to be definite or the two layout systems ask each
+ * other the same question forever, and that fails down in the platform, where
+ * there is nothing for a JavaScript `try` to catch.
+ *
+ */
+const NATIVE_ICON_FRAME = 44;
+
+/**
+ * Our sizes on the platform's own control scale, which is how a native button
+ * is made bigger: it scales the room the style leaves around the label, and the
+ * label with it.
+ *
+ * Only ever sent for a *string* label. A hosted label is the case that has
+ * taken this app down twice, and while the cause turned out to be a missing
+ * frame rather than this modifier, a labelled button has no hosted view and no
+ * measurement to get wrong — so there is no reason to find out on both at once.
+ */
+const NATIVE_CONTROL_SIZE = {
+  sm: 'small',
+  md: 'regular',
+  lg: 'large',
+  icon: 'regular'
+};
+
 /** PanelUI variants mapped onto the platform button styles. */
 const NATIVE_VARIANT = {
   primary: 'filled',
@@ -142,6 +187,7 @@ export const Button = /*#__PURE__*/forwardRef(({
   startContent,
   endContent,
   native,
+  glass = false,
   ...props
 }, ref) => {
   const isDisabled = disabled || loading;
@@ -169,25 +215,74 @@ export const Button = /*#__PURE__*/forwardRef(({
       RNHostView
     } = nativeUI;
     const isStringLabel = typeof children === 'string';
+    const prominent = variant === 'primary' || variant === 'destructive';
+
+    /*
+     * Looks the portable props cannot ask for.
+     *
+     * `buttonStyle` because Liquid Glass has no cross-platform variant to
+     * map onto. `glassProminent` is the tinted one — it keeps the accent
+     * fill a prominent button is supposed to have, which drawing the
+     * material by hand over a plain button throws away. A supplied
+     * `buttonStyle` replaces the one the variant would have set, so this is
+     * a substitution rather than a layer on top.
+     *
+     * `buttonBorderShape` because an icon button is round and the platform's
+     * default capsule is not — a lone glyph in a capsule reads as a text
+     * button somebody forgot to label. It shapes the glass too.
+     */
+    const swiftUI = getSwiftUIModifiers();
+    const nativeModifiers = swiftUI ? [glass ? swiftUI.buttonStyle(prominent ? 'glassProminent' : 'glass') : null, size === 'icon' ? swiftUI.buttonBorderShape('circle') : null, isStringLabel ? swiftUI.controlSize(NATIVE_CONTROL_SIZE[size ?? 'md']) : null].filter(Boolean) : [];
+
+    /*
+     * The platform paints the background, not the theme — so a hosted icon
+     * cannot read its colour from a token the way it does in the styled
+     * button. On a tinted button that is white, whatever the theme thinks its
+     * own primary foreground is; on the rest, including plain glass, the
+     * material is clear enough to leave the page's own foreground legible.
+     */
+    const nativeContent = prominent ? '#ffffff' : contentColor;
     return /*#__PURE__*/_jsx(Host, {
       matchContents: true,
       children: /*#__PURE__*/_jsx(NativeButton, {
         label: isStringLabel ? children : undefined,
         variant: NATIVE_VARIANT[variant ?? 'primary'],
-        disabled: isDisabled,
-        style: {
+        disabled: isDisabled
+        /*
+         * A square for an icon button, a height for a labelled one — and
+         * in both cases a definite number, which is what stops the
+         * measurement chain above from having no fixed point in it.
+         *
+         * The frame does not decide how big the *button* looks; the padded
+         * label does, because that is what the platform draws its
+         * background around. The frame only has to be large enough to hold
+         * the result.
+         */,
+        style: size === 'icon' ? {
+          width: NATIVE_ICON_FRAME,
+          height: NATIVE_ICON_FRAME
+        } : {
           height: NATIVE_HEIGHT[size ?? 'md']
         },
+        modifiers: nativeModifiers.length ? nativeModifiers : undefined,
         onPress: props.onPress,
         children: isStringLabel ? undefined : /*#__PURE__*/_jsx(RNHostView, {
           matchContents: true,
-          children: /*#__PURE__*/_jsx(_Fragment, {
-            children: textChildren(children, text => /*#__PURE__*/_jsx(Text, {
-              className: label({
-                className: labelClassName
-              }),
-              children: text
-            }))
+          children: /*#__PURE__*/_jsx(View, {
+            style: size === 'icon' ? {
+              padding: NATIVE_ICON_PADDING,
+              alignItems: 'center',
+              justifyContent: 'center'
+            } : undefined,
+            children: /*#__PURE__*/_jsx(IconColorProvider, {
+              color: nativeContent,
+              children: textChildren(children, text => /*#__PURE__*/_jsx(Text, {
+                className: label({
+                  className: labelClassName
+                }),
+                children: text
+              }))
+            })
           })
         })
       })

package/lib/module/components/button/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","tv","useCSSVariable","AnimatedPressable","Text","textChildren","IconColorProvider","getNativeUI","Spinner","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","buttonVariants","slots","root","label","spinner","variants","variant","primary","secondary","outline","ghost","destructive","social","size","sm","md","lg","icon","fullWidth","true","disabled","defaultVariants","SPINNER_SIZE","CONTENT_COLOR_VAR","NATIVE_HEIGHT","NATIVE_VARIANT","Button","children","className","labelClassName","loading","startContent","endContent","native","props","ref","isDisabled","nativeUI","themedColor","contentColor","undefined","Host","NativeButton","RNHostView","isStringLabel","matchContents","style","height","onPress","text","color","accessibilityRole","accessibilityState","busy","displayName"],"sourceRoot":"../../../../src","sources":["components/button/index.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["forwardRef","View","tv","useCSSVariable","AnimatedPressable","Text","textChildren","IconColorProvider","getNativeUI","getSwiftUIModifiers","Spinner","jsx","_jsx","jsxs","_jsxs","buttonVariants","slots","root","label","spinner","variants","variant","primary","secondary","outline","ghost","destructive","social","size","sm","md","lg","icon","fullWidth","true","disabled","defaultVariants","SPINNER_SIZE","CONTENT_COLOR_VAR","NATIVE_HEIGHT","NATIVE_ICON_PADDING","NATIVE_ICON_FRAME","NATIVE_CONTROL_SIZE","NATIVE_VARIANT","Button","children","className","labelClassName","loading","startContent","endContent","native","glass","props","ref","isDisabled","nativeUI","themedColor","contentColor","undefined","Host","NativeButton","RNHostView","isStringLabel","prominent","swiftUI","nativeModifiers","buttonStyle","buttonBorderShape","controlSize","filter","Boolean","nativeContent","matchContents","style","width","height","modifiers","length","onPress","padding","alignItems","justifyContent","color","text","accessibilityRole","accessibilityState","busy","displayName"],"sourceRoot":"../../../../src","sources":["components/button/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/drawer/index.js

@@ -0,0 +1,477 @@
+"use strict";
+
+/**
+ * Drawer — a panel that comes in from an edge of the screen and covers the app
+ * until it is dismissed.
+ *
+ * ```tsx
+ * <Drawer>
+ *   <Drawer.Trigger>
+ *     <Button variant="outline">Menu</Button>
+ *   </Drawer.Trigger>
+ *   <Drawer.Content>
+ *     <Drawer.Header title="Workspace" description="Switch or manage" />
+ *     <Drawer.Body>
+ *       <Item title="Projects" />
+ *       <Item title="Members" />
+ *     </Drawer.Body>
+ *     <Drawer.Footer>
+ *       <Button className="flex-1">Settings</Button>
+ *     </Drawer.Footer>
+ *   </Drawer.Content>
+ * </Drawer>
+ * ```
+ *
+ * ## Why the sides are `start` and `end`
+ *
+ * A drawer is the one overlay whose whole identity is the edge it belongs to,
+ * and in a right-to-left app "the navigation edge" is the right one. Naming the
+ * sides `left` and `right` would bake a reading direction into the API and
+ * force every caller in an RTL app to invert it themselves, so the sides are
+ * logical: `start` is the edge text begins at, `end` the edge it runs toward.
+ * Both follow the enclosing `<Direction>`, and `top` and `bottom` mean what
+ * they say because the vertical axis does not mirror.
+ *
+ * Yoga mirrors the panel's own position, because that is laid out from `start-0`
+ * / `end-0`. It does not mirror the drag, which is measured in raw pixels — so
+ * the gesture consults the direction and negates itself, which is what keeps a
+ * swipe *outward* dismissing in both directions rather than only one.
+ *
+ * ## Why it is not a BottomSheet with a different edge
+ *
+ * A sheet is sized by its content and dragged along the axis its scroller runs
+ * on, which is why so much of it is about sharing one drag between the two. A
+ * side drawer is sized by the screen and dragged across its scroller's axis, so
+ * the two gestures never compete: the cross-axis drag simply fails and the list
+ * keeps it. That difference is the reason this is a separate component and not
+ * a prop on the sheet.
+ */
+import { cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { Pressable, ScrollView, useWindowDimensions, View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, { SlideInDown, SlideInLeft, SlideInRight, SlideInUp, SlideOutDown, SlideOutLeft, SlideOutRight, SlideOutUp, runOnJS, useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { tv } from 'tailwind-variants';
+import { useCSSVariable } from 'uniwind';
+import { XIcon } from "../../icons/index.js";
+import { Portal } from "../../primitives/portal.js";
+import { Scrim } from "../../primitives/scrim.js";
+import { Text, textChildren } from "../../primitives/text.js";
+import { useBackHandler } from "../../hooks/use-back-handler.js";
+import { DirectionContext, useDirection, useDirectionSign } from "../../hooks/use-direction.js";
+import { cn } from "../../utils/cn.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SPRING = {
+  damping: 24,
+  stiffness: 300,
+  mass: 0.7
+};
+/** How far a drag has to travel outward before releasing it dismisses. */
+const DISMISS_DISTANCE = 80;
+/** A flick this fast dismisses regardless of how far it got. */
+const DISMISS_VELOCITY = 650;
+/**
+ * How much of the screen each size asks for, and the cap it is never allowed
+ * past on a wide screen.
+ *
+ * The cap is the whole point. A fraction alone reads correctly on a phone and
+ * absurdly on a tablet, where 78% of the width is a navigation list with a
+ * column of whitespace beside it. Capping turns the fraction into "no wider
+ * than it needs to be", which is what a drawer is.
+ */
+const WIDTH = {
+  sm: {
+    fraction: 0.62,
+    max: 280
+  },
+  md: {
+    fraction: 0.78,
+    max: 320
+  },
+  lg: {
+    fraction: 0.88,
+    max: 400
+  },
+  // Not 1: an edge of the app left showing is what says it is still there
+  // behind the drawer, and it is also the only thing left to tap to dismiss.
+  full: {
+    fraction: 0.94,
+    max: Infinity
+  }
+};
+
+/** The same idea on the vertical axis, where there is no sensible cap. */
+const HEIGHT = {
+  sm: 0.3,
+  md: 0.45,
+  lg: 0.62,
+  full: 0.94
+};
+const panelVariants = tv({
+  base: 'absolute border-border bg-popover shadow-lg',
+  variants: {
+    side: {
+      // Three real edges each. The fourth is the screen edge the drawer is
+      // docked to, and drawing a border or a radius along it would be a line
+      // through the middle of nothing.
+      start: 'bottom-0 start-0 top-0 rounded-e-3xl border-e',
+      end: 'bottom-0 end-0 top-0 rounded-s-3xl border-s',
+      top: 'end-0 start-0 top-0 rounded-b-3xl border-b',
+      bottom: 'bottom-0 end-0 start-0 rounded-t-3xl border-t'
+    }
+  },
+  defaultVariants: {
+    side: 'start'
+  }
+});
+const DrawerContext = /*#__PURE__*/createContext(null);
+function useDrawer(component) {
+  const context = useContext(DrawerContext);
+  if (!context) {
+    throw new Error(`${component} must be used within a <Drawer>`);
+  }
+  return context;
+}
+
+/**
+ * What the panel knows and its parts need: which corner the close button took,
+ * so a header can leave it clear rather than wrap underneath it.
+ */
+
+const DrawerSurfaceContext = /*#__PURE__*/createContext(null);
+function DrawerRoot({
+  children,
+  open: controlledOpen,
+  onOpenChange,
+  defaultOpen = false
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const controlled = controlledOpen !== undefined;
+  const open = controlled ? controlledOpen : uncontrolledOpen;
+  const setOpen = useCallback(next => {
+    if (!controlled) setUncontrolledOpen(next);
+    onOpenChange?.(next);
+  }, [controlled, onOpenChange]);
+  const context = useMemo(() => ({
+    open,
+    setOpen
+  }), [open, setOpen]);
+  return /*#__PURE__*/_jsx(DrawerContext.Provider, {
+    value: context,
+    children: children
+  });
+}
+function DrawerTrigger({
+  children
+}) {
+  const {
+    setOpen
+  } = useDrawer('Drawer.Trigger');
+  if (! /*#__PURE__*/isValidElement(children)) return children;
+  return /*#__PURE__*/cloneElement(children, {
+    onPress: (...args) => {
+      children.props.onPress?.(...args);
+      setOpen(true);
+    }
+  });
+}
+function DrawerClose({
+  children
+}) {
+  const {
+    setOpen
+  } = useDrawer('Drawer.Close');
+  if (! /*#__PURE__*/isValidElement(children)) return children;
+  return /*#__PURE__*/cloneElement(children, {
+    onPress: (...args) => {
+      children.props.onPress?.(...args);
+      setOpen(false);
+    }
+  });
+}
+function DrawerContent({
+  className,
+  side = 'start',
+  size = 'md',
+  dismissible = true,
+  swipeToDismiss = true,
+  showClose = true,
+  blur = false,
+  children,
+  ...props
+}) {
+  const {
+    open,
+    setOpen
+  } = useDrawer('Drawer.Content');
+  const {
+    width: screenWidth,
+    height: screenHeight
+  } = useWindowDimensions();
+  const insets = useSafeAreaInsets();
+  const dir = useDirection();
+  const sign = useDirectionSign();
+  const closeTint = useCSSVariable('--color-muted-foreground');
+
+  // Memoised for the reason `Direction` memoises its own: this is the object
+  // that invalidates layout for the whole panel, and a fresh one every render
+  // would re-run Yoga over it for a value that almost never changes.
+  const directionStyle = useMemo(() => ({
+    direction: dir
+  }), [dir]);
+  const close = useCallback(() => setOpen(false), [setOpen]);
+
+  // An open drawer catches the Android back button, closing itself instead of
+  // popping the screen behind it.
+  useBackHandler(open, close);
+  const horizontal = side === 'start' || side === 'end';
+
+  /**
+   * How far the panel has to travel to be fully off-screen — the distance a
+   * dismissing drag animates out to, and the axis the drag is measured on.
+   */
+  const extent = horizontal ? Math.min(screenWidth * WIDTH[size].fraction, WIDTH[size].max) : screenHeight * HEIGHT[size];
+
+  /**
+   * Which way "outward" points in raw pixels.
+   *
+   * Yoga has already mirrored where the panel sits, but a transform is not
+   * laid out — it is applied to whatever Yoga decided — so this is the one
+   * place that has to know the reading direction and negate itself. A `start`
+   * drawer leaves toward negative X in a left-to-right app and positive X in a
+   * right-to-left one; `end` is the mirror of that.
+   */
+  const outward = horizontal ? (side === 'start' ? -1 : 1) * sign : side === 'top' ? -1 : 1;
+
+  /** Outward drag distance in points. Negative means dragged further in. */
+  const travel = useSharedValue(0);
+
+  /*
+   * Parked at zero on every open. A swipe-dismiss leaves the panel a full
+   * extent outward, and without this the next open would draw a lit backdrop
+   * over an app with the drawer still off-screen behind it — dimmed, blocking,
+   * and with nothing on it to close.
+   */
+  useEffect(() => {
+    if (open) travel.value = 0;
+  }, [open, travel]);
+  const pan = useMemo(() => {
+    const gesture = Gesture.Pan().enabled(swipeToDismiss).onChange(event => {
+      const delta = (horizontal ? event.changeX : event.changeY) * outward;
+      const next = travel.value + delta;
+      // Follow the finger outward; rubber-band the pull further in, which
+      // has nowhere to go.
+      travel.value = next > 0 ? next : next / 3;
+    }).onEnd(event => {
+      const velocity = (horizontal ? event.velocityX : event.velocityY) * outward;
+      if (travel.value > DISMISS_DISTANCE || velocity > DISMISS_VELOCITY) {
+        travel.value = withTiming(extent, {
+          duration: 180
+        }, finished => {
+          if (finished) runOnJS(close)();
+        });
+      } else {
+        travel.value = withSpring(0, SPRING);
+      }
+    });
+
+    /*
+     * The drag has to give way to whatever the content is doing on the other
+     * axis. A side drawer holds a vertical list, so a mostly-vertical drag
+     * fails here and the list keeps it — which is why a side drawer needs none
+     * of the shared-gesture machinery a bottom sheet does.
+     */
+    return horizontal ? gesture.activeOffsetX([-12, 12]).failOffsetY([-18, 18]) : gesture.activeOffsetY([-12, 12]).failOffsetX([-18, 18]);
+  }, [close, extent, horizontal, outward, swipeToDismiss, travel]);
+  const panelStyle = useAnimatedStyle(() => horizontal ? {
+    transform: [{
+      translateX: travel.value * outward
+    }]
+  } : {
+    transform: [{
+      translateY: travel.value * outward
+    }]
+  });
+  const surface = useMemo(() => ({
+    side,
+    showClose
+  }), [side, showClose]);
+  if (!open) return null;
+
+  /*
+   * The slide has to be given a physical direction, since the animation
+   * presets are physical. This is the same mirroring Yoga did for the panel's
+   * position, applied by hand to the one thing Yoga does not own.
+   */
+  const physical = horizontal ? side === 'start' === (dir === 'ltr') ? 'left' : 'right' : side;
+  const entering = {
+    left: SlideInLeft,
+    right: SlideInRight,
+    top: SlideInUp,
+    bottom: SlideInDown
+  }[physical];
+  const exiting = {
+    left: SlideOutLeft,
+    right: SlideOutRight,
+    top: SlideOutUp,
+    bottom: SlideOutDown
+  }[physical];
+
+  /*
+   * The inset and the panel's own padding stack rather than compete.
+   *
+   * A drawer that reaches the top of the screen is drawn behind the status bar
+   * on purpose — a surface the app disappears under should not stop short of
+   * the edge — but the clock and the battery are drawn *in* that band, so the
+   * content clears the whole of it and then takes its padding on top. `Math.max`
+   * gave the two the same slot: on a 59-point inset it resolved to 59, leaving
+   * the header and the close button flush against the clock with nothing
+   * between them.
+   *
+   * `bottom` is the one side whose top edge is nowhere near the status bar, and
+   * `top` the one side ending in open screen rather than at the home indicator.
+   * Each takes plain padding on the edge it does not meet.
+   */
+  const padding = {
+    paddingTop: side === 'bottom' ? 16 : insets.top + 16,
+    paddingBottom: side === 'top' ? 16 : Math.max(insets.bottom, 16)
+  };
+  return /*#__PURE__*/_jsx(Portal, {
+    children: /*#__PURE__*/_jsx(DrawerContext.Provider, {
+      value: {
+        open,
+        setOpen
+      },
+      children: /*#__PURE__*/_jsx(DirectionContext.Provider, {
+        value: dir,
+        children: /*#__PURE__*/_jsxs(View, {
+          className: "absolute inset-0",
+          style: directionStyle,
+          children: [/*#__PURE__*/_jsxs(View, {
+            className: "absolute inset-0",
+            children: [/*#__PURE__*/_jsx(Scrim, {
+              blur: blur
+            }), /*#__PURE__*/_jsx(Pressable, {
+              accessibilityLabel: "Close drawer",
+              className: "flex-1",
+              onPress: dismissible ? close : undefined
+            })]
+          }), /*#__PURE__*/_jsx(GestureDetector, {
+            gesture: pan,
+            children: /*#__PURE__*/_jsx(Animated.View, {
+              entering: entering.springify().damping(24).stiffness(260).mass(0.7),
+              exiting: exiting.duration(200),
+              accessibilityViewIsModal: true,
+              className: panelVariants({
+                side,
+                className
+              }),
+              ...props,
+              // After the spread, and folding the caller's own `style` in
+              // rather than replacing the array: spread last, a caller
+              // passing `style` would silently drop the drag transform and
+              // the safe-area padding with it.
+              style: [panelStyle, padding, horizontal ? {
+                width: extent
+              } : {
+                height: extent
+              }, props.style],
+              children: /*#__PURE__*/_jsxs(DrawerSurfaceContext.Provider, {
+                value: surface,
+                children: [textChildren(children), showClose ? /*#__PURE__*/_jsx(Pressable, {
+                  accessibilityRole: "button",
+                  accessibilityLabel: "Close",
+                  onPress: close,
+                  hitSlop: 8,
+                  className: cn('absolute z-10 h-8 w-8 items-center justify-center rounded-full bg-muted active:opacity-70', side === 'end' ? 'start-4' : 'end-4'),
+                  style: {
+                    top: padding.paddingTop
+                  },
+                  children: /*#__PURE__*/_jsx(XIcon, {
+                    size: 16,
+                    color: typeof closeTint === 'string' ? closeTint : undefined
+                  })
+                }) : null]
+              })
+            })
+          })]
+        })
+      })
+    })
+  });
+}
+function DrawerHeader({
+  className,
+  title,
+  description,
+  children,
+  ...props
+}) {
+  const surface = useContext(DrawerSurfaceContext);
+
+  /*
+   * Padding on whichever side the close button took, so a long title wraps
+   * above it rather than running underneath it. Nothing to clear when the
+   * button was turned off, and a header used outside a panel keeps its plain
+   * padding rather than reserving a corner for a button that is not there.
+   */
+  const clearance = !surface?.showClose ? undefined : surface.side === 'end' ? 'ps-14' : 'pe-14';
+  return /*#__PURE__*/_jsxs(View, {
+    className: cn('gap-1 px-5 pb-3', clearance, className),
+    ...props,
+    children: [typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
+      size: "lg",
+      weight: "semibold",
+      children: title
+    }) : title, typeof description === 'string' ? /*#__PURE__*/_jsx(Text, {
+      className: "text-sm text-muted-foreground",
+      children: description
+    }) : description, textChildren(children)]
+  });
+}
+function DrawerBody({
+  className,
+  scrollable = true,
+  children,
+  contentContainerStyle,
+  ...props
+}) {
+  if (!scrollable) {
+    return /*#__PURE__*/_jsx(View, {
+      className: cn('flex-1 px-5', className),
+      children: textChildren(children)
+    });
+  }
+  return /*#__PURE__*/_jsx(ScrollView, {
+    className: cn('flex-1', className),
+    showsVerticalScrollIndicator: false
+    // The drawer's own drag runs across this axis and fails out of a mostly
+    // vertical touch, so the two never have to be reconciled.
+    ,
+    contentContainerStyle: [{
+      paddingHorizontal: 20
+    }, contentContainerStyle],
+    ...props,
+    children: textChildren(children)
+  });
+}
+function DrawerFooter({
+  className,
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    className: cn('flex-row items-center gap-2 border-t border-border px-5 pt-3', className),
+    ...props,
+    children: textChildren(children)
+  });
+}
+export const Drawer = Object.assign(DrawerRoot, {
+  Trigger: DrawerTrigger,
+  Content: DrawerContent,
+  Header: DrawerHeader,
+  Body: DrawerBody,
+  Footer: DrawerFooter,
+  Close: DrawerClose
+});
+//# sourceMappingURL=index.js.map