@sproutsocial/seeds-react-drawer 1.2.11 → 2.2.8

package/dist/esm/index.js

@@ -1,65 +1,316 @@
-// src/Drawer.tsx
-import * as React from "react";
-import { useContext, useEffect, useRef } from "react";
-import FocusLock from "react-focus-lock";
-import { motion, AnimatePresence } from "motion/react";
-import { MOTION_DURATION_MEDIUM } from "@sproutsocial/seeds-motion/unitless";
-import Box2 from "@sproutsocial/seeds-react-box";
-import Button from "@sproutsocial/seeds-react-button";
-import Icon from "@sproutsocial/seeds-react-icon";
-import Text from "@sproutsocial/seeds-react-text";
-import Portal from "@sproutsocial/seeds-react-portal";
+// src/DrawerHybrid.tsx
+import { hasStyledProps } from "@sproutsocial/seeds-react-system-props";
+
+// src/DrawerStyled.tsx
+import { Drawer as BaseDrawer2 } from "@base-ui/react/drawer";
 
 // src/styles.ts
-import styled, { css } from "styled-components";
+import { Drawer } from "@base-ui/react/drawer";
+import styled3 from "styled-components";
 import { COMMON } from "@sproutsocial/seeds-react-system-props";
+import { MOTION_DURATION_MEDIUM } from "@sproutsocial/seeds-motion/unitless";
 import Box from "@sproutsocial/seeds-react-box";
-var Content = styled(Box)`
+
+// src/ActionRail/ActionRail.tsx
+import "react";
+import styled, { css } from "styled-components";
+import { jsx } from "react/jsx-runtime";
+var RAIL_BUTTON_SIZE = 44;
+var RAIL_BUTTON_HEIGHT = 32;
+var RAIL_OFFSET = 12;
+var RAIL_GAP = 12;
+var mobileLayout = css`
+  top: auto;
+  bottom: calc(100% + ${RAIL_OFFSET}px);
+  right: ${RAIL_OFFSET}px;
+  left: auto;
+  flex-direction: row-reverse;
+`;
+var desktopLayout = css`
+  top: ${RAIL_OFFSET}px;
+  right: calc(-1 * (${RAIL_BUTTON_SIZE}px + ${RAIL_OFFSET}px));
+  flex-direction: column;
+`;
+var Rail = styled.div`
+  position: absolute;
+  display: flex;
+  gap: ${RAIL_GAP}px;
+  z-index: 1;
+  ${(props) => props.$isMobile ? mobileLayout : desktopLayout}
+`;
+var ActionRail = ({
+  children,
+  isMobile,
+  "aria-label": ariaLabel = "Quick actions"
+}) => {
+  return /* @__PURE__ */ jsx(
+    Rail,
+    {
+      $isMobile: isMobile,
+      "data-slot": "action-rail",
+      "data-qa-action-rail": true,
+      "aria-label": ariaLabel,
+      role: "group",
+      children
+    }
+  );
+};
+ActionRail.displayName = "ActionRail";
+
+// src/ActionRail/ActionRailButton.tsx
+import * as React2 from "react";
+import styled2 from "styled-components";
+import { focusRing } from "@sproutsocial/seeds-react-mixins";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var StyledButton = styled2.button`
+  width: ${RAIL_BUTTON_SIZE}px;
+  height: ${RAIL_BUTTON_HEIGHT}px;
+  display: inline-grid;
+  place-items: center;
+  border-radius: ${(props) => props.theme.radii.outer};
+  border: none;
+  background: ${(props) => props.theme.colors.button.overlay.background.base};
+  color: ${(props) => props.theme.colors.button.overlay.text.base};
+  cursor: pointer;
+  outline: none;
+  transition: all ${(props) => props.theme.duration.fast}
+    ${(props) => props.theme.easing.ease_inout};
+
+  &:hover {
+    background: ${(props) => props.theme.colors.button.overlay.background.hover};
+  }
+
+  &:hover,
+  &:active {
+    transform: none;
+  }
+
+  &:focus-visible {
+    ${focusRing}
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+var ActionRailButton = React2.forwardRef(({ children, ...rest }, ref) => /* @__PURE__ */ jsx2(
+  StyledButton,
+  {
+    ref,
+    type: "button",
+    "data-slot": "action-rail-button",
+    ...rest,
+    children
+  }
+));
+ActionRailButton.displayName = "ActionRailButton";
+
+// src/styles.ts
+var ACTION_RAIL_OUTSET = RAIL_BUTTON_HEIGHT + RAIL_OFFSET;
+var Content = styled3(Box)`
   overflow-y: auto;
 `;
-var Container = styled.div`
+var StyledViewport = styled3(Drawer.Viewport)`
+  ${(props) => props.$hasSnapPoints ? `
+        position: fixed;
+        inset: 0;
+        display: flex;
+        align-items: flex-end;
+        justify-content: center;
+        touch-action: none;
+        /* The viewport spans the whole screen but the popup only fills part of
+           it. Letting clicks fall through the empty area means a nested
+           snap-point drawer doesn't block selection/interaction with the
+           parent drawer visible underneath. The popup re-enables events. */
+        pointer-events: none;
+      ` : ""}
+`;
+var StyledPopup = styled3(Drawer.Popup)`
   display: flex;
   flex-direction: column;
   position: fixed;
-  top: 0;
-  height: 100%;
-  width: ${(props) => props.width}px;
   background-color: ${(props) => props.theme.colors.container.background.base};
-  box-shadow: ${(props) => props.theme.shadows.high};
+  z-index: ${(props) => props.$zIndex};
   filter: blur(0);
+  transition: transform ${MOTION_DURATION_MEDIUM}s ease,
+    border-radius ${MOTION_DURATION_MEDIUM}s ease,
+    height ${MOTION_DURATION_MEDIUM}s ease;
+
+  /* Always-on opacity transition so content fades smoothly both into and out of stacked state */
+  > * {
+    transition: opacity ${MOTION_DURATION_MEDIUM}s ease;
+  }
+
+  ${(props) => {
+  if (props.$direction === "bottom") {
+    if (props.$hasSnapPoints) {
+      return `
+          box-sizing: border-box;
+          position: relative;
+          width: 100%;
+          height: calc(100dvh - 1rem);
+          padding-bottom: max(0px, calc(var(--drawer-snap-point-offset, 0px) + var(--drawer-swipe-movement-y, 0px)));
+          overflow: visible;
+          touch-action: none;
+          /* Counterpart to the viewport's pointer-events: none \u2014 the popup
+             itself stays interactive. */
+          pointer-events: auto;
+          border-radius: ${props.theme.radii[800]} ${props.theme.radii[800]} 0 0;
+          box-shadow: 0px -8px 16px rgba(39,51,51,.25);
+          transform: translateY(calc(var(--drawer-snap-point-offset, 0px) + var(--drawer-swipe-movement-y, 0px)));
+          will-change: transform;
+          transition:
+            transform ${MOTION_DURATION_MEDIUM}s cubic-bezier(0.32, 0.72, 0, 1),
+            box-shadow ${MOTION_DURATION_MEDIUM}s cubic-bezier(0.32, 0.72, 0, 1);
+        `;
+    }
+    return `
+        --bleed: 3rem;
+        --stack-scale: 1;
+        --translate-y: 0px;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        width: 100%;
+        height: calc(90vh + var(--bleed));
+        margin-bottom: calc(-1 * var(--bleed));
+        border-radius: ${props.theme.radii[800]} ${props.theme.radii[800]} 0 0;
+        transform: translateY(var(--translate-y)) scale(var(--stack-scale));
+        transform-origin: 50% calc(100% - var(--bleed));
+        box-shadow: 0px -8px 16px rgba(39,51,51,.25);
+      `;
+  }
+  return `
+      top: 0;
+      height: 100%;
+      width: ${props.$width}px;
+      ${props.$direction === "right" ? `right: ${props.$offset}px;` : `left: ${props.$offset}px;`}
+      box-shadow: ${props.theme.shadows.medium};
+    `;
+}}
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    ${(props) => {
+  if (props.$direction !== "bottom") {
+    return `transform: translateX(${props.$direction === "right" ? "100%" : "-100%"});`;
+  }
+  const railOffset = props.$hasActionRail ? ` + ${ACTION_RAIL_OUTSET}px` : "";
+  if (props.$hasSnapPoints) {
+    return `
+          transform: translateY(calc(100% + 2px${railOffset}));
+          padding-bottom: 0;
+        `;
+  }
+  return `transform: translateY(calc(100% - var(--bleed) + 2px${railOffset}));`;
+}}
+  }
 
-  ${(props) => css`
-    ${props.direction}: ${props.offset}px;
-  `}
+  &[data-swiping],
+  &[data-nested-drawer-swiping] {
+    transition-duration: 0ms;
+  }
+
+  &[data-nested-drawer-open] {
+    border-radius: ${(props) => props.theme.radii[800]};
+
+    ${(props) => {
+  if (props.$direction === "bottom") {
+    if (props.$hasSnapPoints) return "";
+    return `
+          --stack-step: 0.05;
+          --stack-progress: clamp(0, var(--drawer-swipe-progress), 1);
+          /* Override default vars; base transform rule picks them up automatically */
+          --stack-scale: max(0, calc(
+            1 - (var(--nested-drawers) * var(--stack-step))
+              + (var(--stack-step) * var(--stack-progress))
+          ));
+          --stack-shrink: calc(1 - var(--stack-scale));
+          --stack-height: max(0px, calc(
+            var(--drawer-frontmost-height, var(--drawer-height)) - var(--bleed)
+          ));
+          --stack-peek-offset: max(0px, calc(
+            (var(--nested-drawers) - var(--stack-progress)) * 1rem
+          ));
+          --translate-y: calc(
+            var(--drawer-swipe-movement-y)
+              - var(--stack-peek-offset)
+              - (var(--stack-shrink) * var(--stack-height))
+          );
+          height: calc(var(--stack-height) + var(--bleed));
+          overflow: hidden;
+        `;
+  }
+  return `
+        transform: translateY(calc(var(--nested-drawers) * -20px))
+                   scale(calc(1 - var(--nested-drawers) * 0.08));
+        transform-origin: top center;
+      `;
+}}
+
+    ${(props) => props.$hasSnapPoints ? "" : `
+          > * {
+            opacity: 0;
+          }
+        `}
+  }
+
+  &[data-nested-drawer-open][data-nested-drawer-swiping] {
+    > * {
+      opacity: 1;
+    }
+  }
 
   ${COMMON}
 `;
-var styles_default = Container;
+var DragHandle = styled3.div`
+  position: absolute;
+  top: 8px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 36px;
+  height: 4px;
+  border-radius: 2px;
+  background-color: ${(props) => props.theme.colors.container.border.base};
+`;
+var StyledBackdrop = styled3(Drawer.Backdrop)`
+  position: fixed;
+  inset: 0;
+  background: transparent;
+  pointer-events: none;
+`;
 
-// src/Drawer.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var MotionContainer = motion(styles_default);
-var doesRefContainEventTarget = (ref, event) => {
-  return ref.current && event.target instanceof Node && ref.current.contains(event.target);
-};
-var DrawerContext = React.createContext({
+// src/DrawerShared.tsx
+import * as React3 from "react";
+import { useContext } from "react";
+import "@base-ui/react/drawer";
+import Box2 from "@sproutsocial/seeds-react-box";
+import Button from "@sproutsocial/seeds-react-button";
+import Icon from "@sproutsocial/seeds-react-icon";
+import Text from "@sproutsocial/seeds-react-text";
+import { useIsMobile } from "@sproutsocial/seeds-react-hooks";
+import { DisablePortalToBodyContext } from "@sproutsocial/seeds-react-portal";
+import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
+var DrawerContext = React3.createContext({
   isLocked: false,
   setIsLocked: () => {
-  }
+  },
+  hasActionRail: false
 });
 var DrawerCloseButton = (props) => {
   const drawerContext = useContext(DrawerContext);
   if (props.render) {
     return props.render(drawerContext) ?? null;
   }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx3(
     Button,
     {
       appearance: "pill",
       "aria-label": drawerContext.closeButtonLabel,
       onClick: drawerContext.onClose,
       ...props,
-      children: props.children || /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, name: "x-outline" })
+      children: props.children || /* @__PURE__ */ jsx3(Icon, { "aria-hidden": true, name: "x-outline" })
     }
   );
 };
@@ -74,7 +325,7 @@ var DrawerHeader = ({
   if (render) {
     return render(drawerContext);
   }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx3(
     Box2,
     {
       display: "flex",
@@ -84,8 +335,8 @@ var DrawerHeader = ({
       pt: 400,
       px: 450,
       ...rest,
-      children: children || /* @__PURE__ */ jsxs(React.Fragment, { children: [
-        /* @__PURE__ */ jsx(
+      children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx3(
           Text,
           {
             as: "h2",
@@ -96,177 +347,333 @@ var DrawerHeader = ({
             children: title
           }
         ),
-        /* @__PURE__ */ jsx(DrawerCloseButton, {})
+        !drawerContext.hasActionRail && /* @__PURE__ */ jsx3(DrawerCloseButton, {})
       ] })
     }
   );
 };
-var DrawerContent = ({ children, ...rest }) => /* @__PURE__ */ jsx(Content, { height: "100%", p: 450, color: "text.body", ...rest, children });
-var useCloseOnBodyClick = ({
-  isOpen,
-  ref,
-  disableCloseOnClickOutside,
-  onClose,
-  closeTargets
-}) => {
-  const { isLocked } = useContext(DrawerContext);
-  useEffect(() => {
-    const documentBody = document.body;
-    if (!documentBody || !isOpen) {
-      return;
-    }
-    const onEsc = (event) => {
-      if (!isLocked && event.key === "Escape") {
-        onClose();
-      }
-    };
-    const bodyClick = (event) => {
-      if (
-        // @ts-ignore I'm not sure how to type this ref properly
-        !doesRefContainEventTarget(ref, event) && !disableCloseOnClickOutside
-      ) {
-        onClose();
+var DrawerContent = ({
+  children,
+  ...rest
+}) => /* @__PURE__ */ jsx3(
+  Content,
+  {
+    height: "100%",
+    p: 450,
+    color: "text.body",
+    "data-drawer-content": "",
+    ...rest,
+    children
+  }
+);
+DrawerHeader.displayName = "Drawer.Header";
+DrawerContent.displayName = "Drawer.Content";
+DrawerCloseButton.displayName = "Drawer.CloseButton";
+var useDrawerShell = (props) => {
+  const {
+    children,
+    closeButtonLabel,
+    direction = "right",
+    disableCloseOnClickOutside = false,
+    id,
+    modal = false,
+    open,
+    offset = 0,
+    onClose,
+    zIndex = 7,
+    width = 600,
+    snapPoints,
+    defaultSnapPoint,
+    snapPoint,
+    onSnapPointChange,
+    snapToSequentialPoints,
+    actions,
+    actionsInHeader = false,
+    ...rest
+  } = props;
+  const isMobile = useIsMobile();
+  const effectiveDirection = isMobile ? "bottom" : direction;
+  const effectiveSnapPoints = effectiveDirection === "bottom" ? snapPoints : void 0;
+  const hasSnapPoints = !!effectiveSnapPoints && effectiveSnapPoints.length > 0;
+  const hasActionRail = isMobile && !actionsInHeader && !!actions && actions.length > 0;
+  const [isLocked, setIsLocked] = React3.useState(false);
+  const ariaLabelledBy = rest["aria-labelledby"];
+  const ariaLabel = rest["aria-label"];
+  React3.useEffect(() => {
+    if (process.env.NODE_ENV !== "production") {
+      if (!ariaLabelledBy && !ariaLabel) {
+        console.warn(
+          "[Drawer] Missing accessible name. Add aria-labelledby pointing to your Drawer.Header id, or aria-label, so screen readers can identify the dialog."
+        );
       }
-    };
-    documentBody?.addEventListener("keydown", onEsc, { capture: true });
-    if (closeTargets) {
-      closeTargets.forEach(
-        (targetElement) => targetElement?.addEventListener("click", bodyClick, { capture: true })
-      );
-    } else {
-      documentBody.firstElementChild?.addEventListener("click", bodyClick, {
-        capture: true
-      });
     }
-    return () => {
-      documentBody?.removeEventListener("keydown", onEsc, { capture: true });
-      if (closeTargets) {
-        closeTargets.forEach(
-          (targetElement) => targetElement?.removeEventListener("click", bodyClick, {
-            capture: true
-          })
-        );
-      } else {
-        documentBody.firstElementChild?.removeEventListener(
-          "click",
-          bodyClick,
-          { capture: true }
-        );
+  }, [ariaLabelledBy, ariaLabel]);
+  const isLockedRef = React3.useRef(isLocked);
+  isLockedRef.current = isLocked;
+  const prevChildrenRef = React3.useRef(null);
+  if (open) {
+    prevChildrenRef.current = children;
+  }
+  const renderedChildren = open ? children : prevChildrenRef.current;
+  const rootProps = {
+    open,
+    onOpenChange: (isOpen, eventDetails) => {
+      if (!isOpen) {
+        if (isLockedRef.current && eventDetails.reason === "escape-key") {
+          return;
+        }
+        onClose();
       }
-    };
-  }, [
-    onClose,
-    disableCloseOnClickOutside,
-    closeTargets,
-    ref,
+    },
+    disablePointerDismissal: disableCloseOnClickOutside,
+    swipeDirection: effectiveDirection === "bottom" ? "down" : effectiveDirection,
+    modal,
+    snapPoints: effectiveSnapPoints,
+    defaultSnapPoint,
+    snapPoint,
+    onSnapPointChange: onSnapPointChange ? (sp) => onSnapPointChange(sp) : void 0,
+    snapToSequentialPoints
+  };
+  return {
+    effectiveDirection,
+    hasSnapPoints,
+    hasActionRail,
     isLocked,
-    isOpen
-  ]);
+    setIsLocked,
+    renderedChildren,
+    rootProps,
+    rest,
+    width,
+    offset,
+    zIndex,
+    id,
+    open,
+    closeButtonLabel,
+    onClose,
+    actions
+  };
 };
-var Drawer = ({
-  id,
-  offset,
-  direction,
-  children,
-  disableCloseOnClickOutside,
-  onClose,
-  zIndex,
-  closeTargets,
-  width,
-  focusLockExemptCheck,
-  isOpen,
-  ...rest
-}) => {
-  const ref = useRef(null);
-  useCloseOnBodyClick({
-    ref,
-    disableCloseOnClickOutside,
+var DrawerPopupContents = ({ shell }) => {
+  const {
+    hasActionRail,
+    closeButtonLabel,
     onClose,
-    closeTargets,
-    isOpen
-  });
-  const offset_x = width * (direction === "left" ? -1 : 1);
-  return /* @__PURE__ */ jsx(
-    FocusLock,
-    {
-      autoFocus: true,
-      disabled: !isOpen,
-      returnFocus: true,
-      whiteList: focusLockExemptCheck ? (e) => !focusLockExemptCheck(e) : void 0,
-      children: /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(
-        MotionContainer,
+    actions,
+    isLocked,
+    setIsLocked,
+    renderedChildren
+  } = shell;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    hasActionRail && actions && /* @__PURE__ */ jsxs(ActionRail, { isMobile: true, "aria-label": "Drawer quick actions", children: [
+      /* @__PURE__ */ jsx3(
+        ActionRailButton,
         {
-          ref,
-          style: { zIndex },
-          width,
-          offset,
-          direction,
-          "data-qa-drawer": id,
-          role: "dialog",
-          initial: { opacity: 0, x: offset_x },
-          animate: { opacity: 1, x: 0 },
-          exit: { opacity: 0, x: offset_x },
-          transition: { duration: MOTION_DURATION_MEDIUM },
-          ...rest,
-          children
+          "aria-label": closeButtonLabel,
+          onClick: onClose,
+          "data-qa-drawer-rail-close": true,
+          children: /* @__PURE__ */ jsx3(Icon, { "aria-hidden": true, name: "x-outline" })
         }
-      ) })
-    },
-    id
-  );
-};
-var DrawerContainer = ({
-  children,
-  closeButtonLabel,
-  direction = "right",
-  disableCloseOnClickOutside = false,
-  id,
-  isOpen,
-  offset = 0,
-  onClose,
-  zIndex = 7,
-  closeTargets = [],
-  width = 600,
-  ...rest
-}) => {
-  const [isLocked, setIsLocked] = React.useState(false);
-  return /* @__PURE__ */ jsx(Portal, { id, children: /* @__PURE__ */ jsx(
-    DrawerContext.Provider,
-    {
-      value: {
-        onClose,
-        closeButtonLabel,
-        isLocked,
-        setIsLocked
-      },
-      children: /* @__PURE__ */ jsx(
-        Drawer,
+      ),
+      actions.map((action, i) => /* @__PURE__ */ jsx3(
+        ActionRailButton,
         {
-          isOpen,
-          id,
-          offset,
-          direction,
-          disableCloseOnClickOutside,
+          "aria-label": action["aria-label"],
+          onClick: action.onClick,
+          disabled: action.disabled,
+          children: action.iconName && /* @__PURE__ */ jsx3(Icon, { "aria-hidden": true, name: action.iconName })
+        },
+        i
+      ))
+    ] }),
+    /* @__PURE__ */ jsx3(DisablePortalToBodyContext.Provider, { value: true, children: /* @__PURE__ */ jsx3(
+      DrawerContext.Provider,
+      {
+        value: {
           onClose,
-          zIndex,
-          closeTargets,
-          width,
-          "data-qa-drawer": id || "",
-          "data-qa-drawer-isopen": isOpen,
-          ...rest,
-          children
+          closeButtonLabel,
+          isLocked,
+          setIsLocked,
+          hasActionRail
+        },
+        children: renderedChildren
+      }
+    ) })
+  ] });
+};
+
+// src/DrawerStyled.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var DrawerStyled = (props) => {
+  const shell = useDrawerShell(props);
+  const {
+    effectiveDirection,
+    hasSnapPoints,
+    hasActionRail,
+    rootProps,
+    rest,
+    width,
+    offset,
+    zIndex,
+    id,
+    open
+  } = shell;
+  return /* @__PURE__ */ jsx4(BaseDrawer2.Root, { ...rootProps, children: /* @__PURE__ */ jsxs2(BaseDrawer2.Portal, { children: [
+    /* @__PURE__ */ jsx4(StyledBackdrop, { "data-testid": "drawer-backdrop" }),
+    /* @__PURE__ */ jsx4(StyledViewport, { $hasSnapPoints: hasSnapPoints, children: /* @__PURE__ */ jsxs2(
+      StyledPopup,
+      {
+        initialFocus: true,
+        $width: width,
+        $offset: offset,
+        $direction: effectiveDirection,
+        $zIndex: zIndex,
+        $hasSnapPoints: hasSnapPoints,
+        $hasActionRail: hasActionRail,
+        "data-qa-drawer": id,
+        "data-qa-drawer-isopen": open,
+        ...rest,
+        children: [
+          effectiveDirection === "bottom" && /* @__PURE__ */ jsx4(DragHandle, { "aria-hidden": true }),
+          /* @__PURE__ */ jsx4(DrawerPopupContents, { shell })
+        ]
+      }
+    ) })
+  ] }) });
+};
+var DrawerStyled_default = DrawerStyled;
+
+// src/DrawerTailwind.tsx
+import { Drawer as BaseDrawer3 } from "@base-ui/react/drawer";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function cn(...inputs) {
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
         }
-      )
+      }
     }
-  ) });
+  }
+  return classes.join(" ");
+}
+var DrawerTailwind = (props) => {
+  const shell = useDrawerShell(props);
+  const {
+    effectiveDirection,
+    hasSnapPoints,
+    hasActionRail,
+    rootProps,
+    rest,
+    width,
+    offset,
+    zIndex,
+    id,
+    open
+  } = shell;
+  const { className, style, ...domRest } = rest;
+  return /* @__PURE__ */ jsx5(BaseDrawer3.Root, { ...rootProps, children: /* @__PURE__ */ jsxs3(BaseDrawer3.Portal, { children: [
+    /* @__PURE__ */ jsx5(
+      BaseDrawer3.Backdrop,
+      {
+        "data-testid": "drawer-backdrop",
+        className: "seeds-drawer-backdrop"
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      BaseDrawer3.Viewport,
+      {
+        className: cn("seeds-drawer-viewport", {
+          "seeds-drawer-viewport--snap": hasSnapPoints
+        }),
+        children: /* @__PURE__ */ jsxs3(
+          BaseDrawer3.Popup,
+          {
+            initialFocus: true,
+            "data-qa-drawer": id,
+            "data-qa-drawer-isopen": open,
+            ...domRest,
+            className: cn(
+              "seeds-drawer-popup",
+              effectiveDirection === "bottom" ? "seeds-drawer-popup--bottom" : "seeds-drawer-popup--side",
+              effectiveDirection === "right" && "seeds-drawer-popup--right",
+              effectiveDirection === "left" && "seeds-drawer-popup--left",
+              {
+                "seeds-drawer-popup--snap": hasSnapPoints,
+                "seeds-drawer-popup--action-rail": hasActionRail
+              },
+              // Consumer className folded in last so it appends to (not
+              // replaces) the component classes.
+              className
+            ),
+            style: {
+              // z-index is always inline (runtime numeric, mirrors styles.ts).
+              zIndex,
+              // Side drawers carry their width/offset as direct inline styles —
+              // runtime numerics, and required for the jsdom `toHaveStyle`
+              // assertions. Bottom drawers derive width/position from the class.
+              ...effectiveDirection === "right" ? { width: `${width}px`, right: `${offset}px` } : effectiveDirection === "left" ? { width: `${width}px`, left: `${offset}px` } : {},
+              // Consumer style folded in last so it wins over the computed
+              // geometry, matching the styled-components inline-style semantics.
+              ...style
+            },
+            children: [
+              effectiveDirection === "bottom" && /* @__PURE__ */ jsx5("div", { "aria-hidden": true, className: "seeds-drawer-drag-handle" }),
+              /* @__PURE__ */ jsx5(DrawerPopupContents, { shell })
+            ]
+          }
+        )
+      }
+    )
+  ] }) });
 };
-DrawerHeader.displayName = "Drawer.Header";
-DrawerContent.displayName = "Drawer.Content";
-DrawerCloseButton.displayName = "Drawer.CloseButton";
-DrawerContainer.Header = DrawerHeader;
-DrawerContainer.Content = DrawerContent;
-DrawerContainer.CloseButton = DrawerCloseButton;
-var Drawer_default = DrawerContainer;
+var DrawerTailwind_default = DrawerTailwind;
+
+// src/DrawerHybrid.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var DRAWER_OWN_PROPS = [
+  "children",
+  "closeButtonLabel",
+  "direction",
+  "disableCloseOnClickOutside",
+  "id",
+  "modal",
+  "open",
+  "offset",
+  "onClose",
+  "zIndex",
+  "width",
+  "snapPoints",
+  "defaultSnapPoint",
+  "snapPoint",
+  "onSnapPointChange",
+  "snapToSequentialPoints",
+  "actions",
+  "actionsInHeader"
+];
+var DrawerHybrid = (props) => {
+  const rest = {};
+  for (const key of Object.keys(props)) {
+    if (!DRAWER_OWN_PROPS.includes(key)) {
+      rest[key] = props[key];
+    }
+  }
+  if (hasStyledProps(rest)) {
+    return /* @__PURE__ */ jsx6(DrawerStyled_default, { ...props });
+  }
+  return /* @__PURE__ */ jsx6(DrawerTailwind_default, { ...props });
+};
+DrawerHybrid.Header = DrawerHeader;
+DrawerHybrid.Content = DrawerContent;
+DrawerHybrid.CloseButton = DrawerCloseButton;
+var DrawerHybrid_default = DrawerHybrid;
+
+// src/Drawer.tsx
+var Drawer_default = DrawerHybrid_default;
 
 // src/DrawerTypes.ts
 import "react";
@@ -274,8 +681,14 @@ import "react";
 // src/index.ts
 var index_default = Drawer_default;
 export {
+  ActionRail,
+  ActionRailButton,
   Drawer_default as Drawer,
   DrawerContext,
+  RAIL_BUTTON_HEIGHT,
+  RAIL_BUTTON_SIZE,
+  RAIL_GAP,
+  RAIL_OFFSET,
   index_default as default
 };
 //# sourceMappingURL=index.js.map