@sproutsocial/seeds-react-drawer 1.2.10 → 2.2.7

package/dist/drawer.css

@@ -0,0 +1,248 @@
+/**
+ * Seeds Drawer component classes.
+ * Component-scoped port of the styled-components shell in styles.ts. Used by
+ * DrawerTailwind.tsx on the Base UI primitives (Backdrop/Viewport/Popup).
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for the
+ * CSS variable definitions (and dark mode support).
+ *
+ * Runtime numerics (z-index, and width/offset for side drawers) are applied as
+ * inline styles on the popup, not here. The Base-UI-injected custom properties
+ * (--drawer-snap-point-offset, --drawer-swipe-movement-y, --drawer-swipe-progress,
+ * --nested-drawers, --drawer-height, --drawer-frontmost-height) arrive on the
+ * popup at runtime and are read via var(...) below.
+ *
+ * All rules live in `@layer components` so Tailwind utilities (which the
+ * Storybook/racine setup registers in the canonical theme/base/components/
+ * utilities layer order) can override these component defaults. Unlayered
+ * rules would outrank any layered utility per the CSS cascade-layers spec,
+ * so utilities like `mx-200`/`p-300`/`inline-flex` passed via `className`
+ * would otherwise have no effect on the popup. Inline-styled geometry
+ * (width/offset/zIndex on the popup) is unaffected by layers and stays
+ * non-overridable by design.
+ */
+
+@layer components {
+  /* Viewport ---------------------------------------------------------------- */
+
+  .seeds-drawer-viewport {
+  }
+
+  .seeds-drawer-viewport--snap {
+    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;
+  }
+
+  /* Backdrop ---------------------------------------------------------------- */
+
+  .seeds-drawer-backdrop {
+    position: fixed;
+    inset: 0;
+    background: transparent;
+    pointer-events: none;
+  }
+
+  /* Drag handle ------------------------------------------------------------- */
+
+  .seeds-drawer-drag-handle {
+    position: absolute;
+    top: 8px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 36px;
+    height: 4px;
+    border-radius: 2px;
+    background-color: var(--color-container-border-base);
+  }
+
+  /* Popup base -------------------------------------------------------------- */
+
+  .seeds-drawer-popup {
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    background-color: var(--color-container-bg-base);
+    filter: blur(0);
+    transition: transform var(--duration-medium) ease,
+      border-radius var(--duration-medium) ease,
+      height var(--duration-medium) ease;
+  }
+
+  /* Always-on opacity transition so content fades smoothly both into and out of
+     stacked state. */
+  .seeds-drawer-popup > * {
+    transition: opacity var(--duration-medium) ease;
+  }
+
+  /* Side (left/right) layout. width + left/right come from inline style. */
+  .seeds-drawer-popup--side {
+    top: 0;
+    height: 100%;
+    box-shadow: var(--shadow-medium);
+  }
+
+  /* Bottom layout (non-snap bottom sheet). */
+  .seeds-drawer-popup--bottom:not(.seeds-drawer-popup--snap) {
+    --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: var(--radius-800) var(--radius-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, 0.25);
+  }
+
+  /* Bottom snap-points layout. Follows base-ui's reference layout. Critical:
+     - box-sizing: border-box so offsetHeight ignores padding-bottom; otherwise
+       base-ui's ResizeObserver feedback (padding-bottom driven by snap offset)
+       grows popupHeight on every measurement and snap math diverges.
+     - height (not max-height) so popupHeight is large enough that base-ui's snap
+       offset = max(0, popupHeight - snapHeight) distinguishes snap points.
+     - position: relative inside the flex-end Viewport so base-ui can measure
+       popupHeight vs viewportHeight for snap math. */
+  .seeds-drawer-popup--bottom.seeds-drawer-popup--snap {
+    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 — the popup itself
+       stays interactive. */
+    pointer-events: auto;
+    border-radius: var(--radius-800) var(--radius-800) 0 0;
+    box-shadow: 0px -8px 16px rgba(39, 51, 51, 0.25);
+    transform: translateY(
+      calc(
+        var(--drawer-snap-point-offset, 0px) +
+          var(--drawer-swipe-movement-y, 0px)
+      )
+    );
+    will-change: transform;
+    transition: transform var(--duration-medium) cubic-bezier(0.32, 0.72, 0, 1),
+      box-shadow var(--duration-medium) cubic-bezier(0.32, 0.72, 0, 1);
+  }
+
+  /* Enter / exit ------------------------------------------------------------ */
+
+  .seeds-drawer-popup--right[data-starting-style],
+  .seeds-drawer-popup--right[data-ending-style] {
+    transform: translateX(100%);
+  }
+
+  .seeds-drawer-popup--left[data-starting-style],
+  .seeds-drawer-popup--left[data-ending-style] {
+    transform: translateX(-100%);
+  }
+
+  .seeds-drawer-popup--bottom:not(.seeds-drawer-popup--snap)[data-starting-style],
+  .seeds-drawer-popup--bottom:not(.seeds-drawer-popup--snap)[data-ending-style] {
+    transform: translateY(calc(100% - var(--bleed) + 2px));
+  }
+
+  .seeds-drawer-popup--bottom.seeds-drawer-popup--snap[data-starting-style],
+  .seeds-drawer-popup--bottom.seeds-drawer-popup--snap[data-ending-style] {
+    transform: translateY(calc(100% + 2px));
+    padding-bottom: 0;
+  }
+
+  /* The action rail lives above the popup (position: absolute, bottom: 100% +
+     RAIL_OFFSET). Translating the popup by its own height alone leaves the rail
+     visible at the bottom of the viewport during enter/exit, so we add the rail's
+     outset: RAIL_BUTTON_HEIGHT (32) + RAIL_OFFSET (12) = 44px. */
+  .seeds-drawer-popup--bottom.seeds-drawer-popup--action-rail:not(.seeds-drawer-popup--snap)[data-starting-style],
+  .seeds-drawer-popup--bottom.seeds-drawer-popup--action-rail:not(.seeds-drawer-popup--snap)[data-ending-style] {
+    transform: translateY(calc(100% - var(--bleed) + 2px + 44px));
+  }
+
+  .seeds-drawer-popup--bottom.seeds-drawer-popup--snap.seeds-drawer-popup--action-rail[data-starting-style],
+  .seeds-drawer-popup--bottom.seeds-drawer-popup--snap.seeds-drawer-popup--action-rail[data-ending-style] {
+    transform: translateY(calc(100% + 2px + 44px));
+    padding-bottom: 0;
+  }
+
+  /* Swiping ----------------------------------------------------------------- */
+
+  .seeds-drawer-popup[data-swiping],
+  .seeds-drawer-popup[data-nested-drawer-swiping] {
+    transition-duration: 0ms;
+  }
+
+  /* Nested drawer open ------------------------------------------------------ */
+
+  .seeds-drawer-popup[data-nested-drawer-open] {
+    border-radius: var(--radius-800);
+  }
+
+  /* Bottom non-snap stacked bottom-sheet animation. Snap-point drawers don't
+     participate: the stack math overwrites --translate-y and clips overflow,
+     which collides with base-ui's snap-offset transform. */
+  .seeds-drawer-popup--bottom:not(.seeds-drawer-popup--snap)[data-nested-drawer-open] {
+    --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;
+  }
+
+  /* Side stacked animation. */
+  .seeds-drawer-popup--side[data-nested-drawer-open] {
+    transform: translateY(calc(var(--nested-drawers) * -20px))
+      scale(calc(1 - var(--nested-drawers) * 0.08));
+    transform-origin: top center;
+  }
+
+  /* Fade children out while stacked — every direction except snap. */
+  .seeds-drawer-popup:not(.seeds-drawer-popup--snap)[data-nested-drawer-open]
+    > * {
+    opacity: 0;
+  }
+
+  /* While actively swiping a nested drawer, keep children visible. Equal
+     specificity to the fade-out rule above, so this must come after it. */
+  .seeds-drawer-popup[data-nested-drawer-open][data-nested-drawer-swiping] > * {
+    opacity: 1;
+  }
+}