colibri-ui 0.8.80 → 0.8.82

package/Theme/themes/buenos_aires.js

@@ -524,6 +524,36 @@ var THEME_BA = {
   "component-avatar-font-size-xxxl": "9rem",
   "component-accordion-text": theme_buenos_aires.default.BRAND_BA_FOREST,
   "component-accordion-line": theme_buenos_aires.default.NEUTRAL_BA_300,
+  "component-sheet-bg": "var(--color-bg-surface)",
+  "component-sheet-text": "var(--color-text-primary)",
+  "component-sheet-secondary": "var(--color-text-secondary)",
+  "component-sheet-overlay": "var(--component-modal-overlay)",
+  "component-sheet-radius": "var(--radius-xl)",
+  "component-sheet-shadow": "var(--shadow-raised)",
+  "component-sheet-z-index": "1000",
+  "component-sheet-max-height": "96dvh",
+  "component-sheet-overlay-blur": "var(--space-3)",
+  "component-sheet-motion-duration": "220ms",
+  "component-sheet-resize-duration": "200ms",
+  "component-sheet-motion-easing": "cubic-bezier(0.2, 0.8, 0.2, 1)",
+  "component-sheet-reduced-motion-duration": "0.001ms",
+  "component-sheet-drag-area-height": "var(--space-6)",
+  "component-sheet-handle-width": "calc(var(--space-10) + var(--space-1))",
+  "component-sheet-handle-height": "var(--space-1)",
+  "component-sheet-handle-radius": "var(--radius-full)",
+  "component-sheet-handle-opacity": "0.45",
+  "component-sheet-header-gap": "var(--space-4)",
+  "component-sheet-header-padding": "var(--space-3) var(--space-5) var(--space-4)",
+  "component-sheet-border-width": "var(--border-width-hairline)",
+  "component-sheet-border-color": "var(--color-border-subtle)",
+  "component-sheet-title-font-size": "var(--font-size-heading-sm)",
+  "component-sheet-title-line-height": "var(--line-height-heading-sm)",
+  "component-sheet-title-font-weight": "var(--font-weight-semibold)",
+  "component-sheet-description-offset": "var(--space-1)",
+  "component-sheet-description-font-size": "var(--font-size-text-sm)",
+  "component-sheet-body-padding": "var(--space-5)",
+  "component-sheet-footer-padding-block": "var(--space-4)",
+  "component-sheet-footer-padding-inline": "var(--space-5)",
   "component-modal-bg": theme_buenos_aires.default.NEUTRAL_BA_0,
   "component-modal-border": theme_buenos_aires.default.NEUTRAL_BA_200,
   "component-modal-overlay": "rgb(22 51 0 / 28%)",

package/Theme/themes/jaipur.d.ts

@@ -518,6 +518,36 @@ declare const _default: {
     "component-avatar-font-size-xxxl": string;
     "component-accordion-text": string;
     "component-accordion-line": string;
+    "component-sheet-bg": string;
+    "component-sheet-text": string;
+    "component-sheet-secondary": string;
+    "component-sheet-overlay": string;
+    "component-sheet-radius": string;
+    "component-sheet-shadow": string;
+    "component-sheet-z-index": string;
+    "component-sheet-max-height": string;
+    "component-sheet-overlay-blur": string;
+    "component-sheet-motion-duration": string;
+    "component-sheet-resize-duration": string;
+    "component-sheet-motion-easing": string;
+    "component-sheet-reduced-motion-duration": string;
+    "component-sheet-drag-area-height": string;
+    "component-sheet-handle-width": string;
+    "component-sheet-handle-height": string;
+    "component-sheet-handle-radius": string;
+    "component-sheet-handle-opacity": string;
+    "component-sheet-header-gap": string;
+    "component-sheet-header-padding": string;
+    "component-sheet-border-width": string;
+    "component-sheet-border-color": string;
+    "component-sheet-title-font-size": string;
+    "component-sheet-title-line-height": string;
+    "component-sheet-title-font-weight": string;
+    "component-sheet-description-offset": string;
+    "component-sheet-description-font-size": string;
+    "component-sheet-body-padding": string;
+    "component-sheet-footer-padding-block": string;
+    "component-sheet-footer-padding-inline": string;
     "component-modal-bg": string;
     "component-modal-border": string;
     "component-modal-overlay": string;

package/Theme/themes/jaipur.js

@@ -524,6 +524,36 @@ var theme_jaipur = {
   "component-avatar-font-size-xxxl": "9rem",
   "component-accordion-text": theme_jaipur$1.default.BRAND_JP_EGGPLANT,
   "component-accordion-line": theme_jaipur$1.default.NEUTRAL_JP_300,
+  "component-sheet-bg": "var(--color-bg-surface)",
+  "component-sheet-text": "var(--color-text-primary)",
+  "component-sheet-secondary": "var(--color-text-secondary)",
+  "component-sheet-overlay": "var(--component-modal-overlay)",
+  "component-sheet-radius": "var(--radius-xl)",
+  "component-sheet-shadow": "var(--shadow-raised)",
+  "component-sheet-z-index": "1000",
+  "component-sheet-max-height": "96dvh",
+  "component-sheet-overlay-blur": "var(--space-3)",
+  "component-sheet-motion-duration": "220ms",
+  "component-sheet-resize-duration": "200ms",
+  "component-sheet-motion-easing": "cubic-bezier(0.2, 0.8, 0.2, 1)",
+  "component-sheet-reduced-motion-duration": "0.001ms",
+  "component-sheet-drag-area-height": "var(--space-6)",
+  "component-sheet-handle-width": "calc(var(--space-10) + var(--space-1))",
+  "component-sheet-handle-height": "var(--space-1)",
+  "component-sheet-handle-radius": "var(--radius-full)",
+  "component-sheet-handle-opacity": "0.45",
+  "component-sheet-header-gap": "var(--space-4)",
+  "component-sheet-header-padding": "var(--space-3) var(--space-5) var(--space-4)",
+  "component-sheet-border-width": "var(--border-width-hairline)",
+  "component-sheet-border-color": "var(--color-border-subtle)",
+  "component-sheet-title-font-size": "var(--font-size-heading-sm)",
+  "component-sheet-title-line-height": "var(--line-height-heading-sm)",
+  "component-sheet-title-font-weight": "var(--font-weight-semibold)",
+  "component-sheet-description-offset": "var(--space-1)",
+  "component-sheet-description-font-size": "var(--font-size-text-sm)",
+  "component-sheet-body-padding": "var(--space-5)",
+  "component-sheet-footer-padding-block": "var(--space-4)",
+  "component-sheet-footer-padding-inline": "var(--space-5)",
   "component-modal-bg": theme_jaipur$1.default.NEUTRAL_JP_0,
   "component-modal-border": theme_jaipur$1.default.NEUTRAL_JP_200,
   "component-modal-overlay": "color-mix(in srgb, var(--palette-black) 25%, transparent)",

package/esm/Modal/index.js

@@ -4,6 +4,7 @@ import React, { useRef, useState, useContext, useId, useCallback, useMemo, useEf
 import clsx from 'clsx';
 import { useScrollLock } from '../hooks/useScrollLock/index.js';
 import { useTrapFocus } from '../hooks/useTrapFocus/index.js';
+import { useModalStack } from '../hooks/useModalStack/index.js';
 import { Portal } from '../Portal/index.js';
 import { useMediaSizes } from '../hooks/useMediaSizes/index.js';
 import { Body } from './components/Body/index.js';
@@ -13,7 +14,6 @@ import { Footer } from './components/Footer/index.js';
 import { Header } from './components/Header/index.js';
 import { Title } from './components/Title/index.js';
 import { ModalContext } from './context.js';
-import { useModalStack } from './useModalStack.js';
 import styles from './Modal.module.css';
 
 var compoundParts = [Header, Body, Footer];
@@ -83,7 +83,9 @@ var ModalRoot = function ModalRoot(_ref) {
   }, [handleClose]);
   useEffect(function () {
     var handleEscape = function handleEscape(event) {
-      if (event.key === "Escape" && isTopmost()) {
+      // A layer that closed on this Escape already called preventDefault.
+      if (event.key === "Escape" && !event.defaultPrevented && isTopmost()) {
+        event.preventDefault();
         handleClose();
       }
     };

package/esm/Sheet/Sheet.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { SheetProps } from "./index.props";
+export declare const Sheet: React.ForwardRefExoticComponent<SheetProps & React.RefAttributes<HTMLDivElement>>;

package/esm/Sheet/Sheet.js

@@ -0,0 +1,266 @@
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { __rest } from 'tslib';
+import React, { forwardRef, useState, useRef, useId, useMemo, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import clsx from 'clsx';
+import { useModalStack } from '../hooks/useModalStack/index.js';
+import styles from './Sheet.module.css';
+
+var defaultSnapPoints = ["60dvh"];
+var focusableSelector = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+var toCssSize = function toCssSize(point) {
+  return typeof point === "number" ? "".concat(point, "px") : point;
+};
+var toPixels = function toPixels(point, viewportHeight) {
+  if (typeof point === "number") return point;
+  var value = Number.parseFloat(point);
+  if (!Number.isFinite(value)) return 0;
+  if (point.endsWith("%") || point.endsWith("vh") || point.endsWith("dvh")) return viewportHeight * value / 100;
+  return value;
+};
+var findPoint = function findPoint(points, preferred) {
+  var _a;
+  if (preferred !== undefined && points.includes(preferred)) return preferred;
+  return (_a = points[0]) !== null && _a !== void 0 ? _a : "60dvh";
+};
+var Sheet = /*#__PURE__*/forwardRef(function SheetComponent(_a, forwardedRef) {
+  var open = _a.open,
+    onOpenChange = _a.onOpenChange,
+    title = _a.title,
+    description = _a.description,
+    header = _a.header,
+    footer = _a.footer,
+    _a$snapPoints = _a.snapPoints,
+    snapPoints = _a$snapPoints === void 0 ? defaultSnapPoints : _a$snapPoints,
+    snapPoint = _a.snapPoint,
+    defaultSnapPoint = _a.defaultSnapPoint,
+    onSnapPointChange = _a.onSnapPointChange,
+    _a$modal = _a.modal,
+    modal = _a$modal === void 0 ? true : _a$modal,
+    _a$blurOverlay = _a.blurOverlay,
+    blurOverlay = _a$blurOverlay === void 0 ? false : _a$blurOverlay,
+    _a$closeOnOverlayClic = _a.closeOnOverlayClick,
+    closeOnOverlayClick = _a$closeOnOverlayClic === void 0 ? true : _a$closeOnOverlayClic,
+    _a$closeOnEscape = _a.closeOnEscape,
+    closeOnEscape = _a$closeOnEscape === void 0 ? true : _a$closeOnEscape,
+    _a$draggable = _a.draggable,
+    draggable = _a$draggable === void 0 ? true : _a$draggable,
+    _a$showHandle = _a.showHandle,
+    showHandle = _a$showHandle === void 0 ? true : _a$showHandle,
+    _a$lockBodyScroll = _a.lockBodyScroll,
+    lockBodyScroll = _a$lockBodyScroll === void 0 ? true : _a$lockBodyScroll,
+    portalContainer = _a.portalContainer,
+    initialFocusRef = _a.initialFocusRef,
+    returnFocusRef = _a.returnFocusRef,
+    zIndex = _a.zIndex,
+    className = _a.className,
+    style = _a.style,
+    children = _a.children,
+    ariaLabel = _a["aria-label"],
+    ariaLabelledBy = _a["aria-labelledby"],
+    ariaDescribedBy = _a["aria-describedby"],
+    rest = __rest(_a, ["open", "onOpenChange", "title", "description", "header", "footer", "snapPoints", "snapPoint", "defaultSnapPoint", "onSnapPointChange", "modal", "blurOverlay", "closeOnOverlayClick", "closeOnEscape", "draggable", "showHandle", "lockBodyScroll", "portalContainer", "initialFocusRef", "returnFocusRef", "zIndex", "className", "style", "children", "aria-label", "aria-labelledby", "aria-describedby"]);
+  var normalizedPoints = snapPoints.length ? snapPoints : defaultSnapPoints;
+  var controlledSnap = snapPoint !== undefined;
+  var _useState = useState(function () {
+      return findPoint(normalizedPoints, defaultSnapPoint);
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalSnap = _useState2[0],
+    setInternalSnap = _useState2[1];
+  var activeSnap = findPoint(normalizedPoints, controlledSnap ? snapPoint : internalSnap);
+  var _useState3 = useState(open),
+    _useState4 = _slicedToArray(_useState3, 2),
+    rendered = _useState4[0],
+    setRendered = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    closing = _useState6[0],
+    setClosing = _useState6[1];
+  var panelRef = useRef(null);
+  var previousFocusRef = useRef(null);
+  var dragRef = useRef({
+    pointerId: -1,
+    startY: 0,
+    startHeight: 0,
+    currentHeight: 0
+  });
+  var titleId = useId();
+  var descriptionId = useId();
+  var isTopmost = useModalStack(titleId, open && modal);
+  var setPanelRef = function setPanelRef(node) {
+    panelRef.current = node;
+    if (typeof forwardedRef === "function") forwardedRef(node);else if (forwardedRef) forwardedRef.current = node;
+  };
+  var sortedPoints = useMemo(function () {
+    return _toConsumableArray(normalizedPoints).sort(function (left, right) {
+      var height = typeof window === "undefined" ? 1000 : window.innerHeight;
+      return toPixels(left, height) - toPixels(right, height);
+    });
+  }, [normalizedPoints]);
+  var changeSnap = function changeSnap(next) {
+    if (!controlledSnap) setInternalSnap(next);
+    onSnapPointChange === null || onSnapPointChange === void 0 ? void 0 : onSnapPointChange(next);
+  };
+  useEffect(function () {
+    if (open) {
+      setRendered(true);
+      setClosing(false);
+      return;
+    }
+    if (!rendered) return;
+    setClosing(true);
+    var duration = panelRef.current ? Number.parseFloat(getComputedStyle(panelRef.current).animationDuration) * 1000 : 220;
+    var timer = window.setTimeout(function () {
+      setRendered(false);
+      setClosing(false);
+    }, Number.isFinite(duration) ? duration : 220);
+    return function () {
+      return window.clearTimeout(timer);
+    };
+  }, [open, rendered]);
+  useEffect(function () {
+    var _a;
+    if (!open || typeof document === "undefined") return;
+    previousFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    var returnFocusElement = (_a = returnFocusRef === null || returnFocusRef === void 0 ? void 0 : returnFocusRef.current) !== null && _a !== void 0 ? _a : previousFocusRef.current;
+    var previousOverflow = document.body.style.overflow;
+    if (modal && lockBodyScroll) document.body.style.overflow = "hidden";
+    var frame = window.requestAnimationFrame(function () {
+      var _a, _b, _c, _d;
+      var first = (_a = panelRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(focusableSelector);
+      (_d = (_c = (_b = initialFocusRef === null || initialFocusRef === void 0 ? void 0 : initialFocusRef.current) !== null && _b !== void 0 ? _b : first) !== null && _c !== void 0 ? _c : panelRef.current) === null || _d === void 0 ? void 0 : _d.focus();
+    });
+    var onKeyDown = function onKeyDown(event) {
+      if (event.defaultPrevented || !isTopmost()) return;
+      if (event.key === "Escape" && closeOnEscape) {
+        event.preventDefault();
+        onOpenChange(false, "escape");
+        return;
+      }
+      if (!modal || event.key !== "Tab" || !panelRef.current) return;
+      var focusable = Array.from(panelRef.current.querySelectorAll(focusableSelector));
+      if (!focusable.length) {
+        event.preventDefault();
+        panelRef.current.focus();
+        return;
+      }
+      var first = focusable[0];
+      var last = focusable[focusable.length - 1];
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return function () {
+      window.cancelAnimationFrame(frame);
+      document.removeEventListener("keydown", onKeyDown);
+      if (modal && lockBodyScroll) document.body.style.overflow = previousOverflow;
+      returnFocusElement === null || returnFocusElement === void 0 ? void 0 : returnFocusElement.focus();
+    };
+  }, [open, modal, lockBodyScroll, closeOnEscape, onOpenChange, initialFocusRef, returnFocusRef, isTopmost]);
+  var startDrag = function startDrag(event) {
+    if (!draggable || !panelRef.current) return;
+    event.currentTarget.setPointerCapture(event.pointerId);
+    var height = panelRef.current.getBoundingClientRect().height;
+    dragRef.current = {
+      pointerId: event.pointerId,
+      startY: event.clientY,
+      startHeight: height,
+      currentHeight: height
+    };
+    panelRef.current.classList.add(styles.dragging);
+  };
+  var moveDrag = function moveDrag(event) {
+    if (dragRef.current.pointerId !== event.pointerId || !panelRef.current) return;
+    var viewportHeight = window.innerHeight;
+    var maximum = Math.max.apply(Math, _toConsumableArray(sortedPoints.map(function (point) {
+      return toPixels(point, viewportHeight);
+    })));
+    var nextHeight = Math.max(0, Math.min(maximum, dragRef.current.startHeight - (event.clientY - dragRef.current.startY)));
+    dragRef.current.currentHeight = nextHeight;
+    panelRef.current.style.height = "".concat(nextHeight, "px");
+  };
+  var endDrag = function endDrag(event) {
+    if (dragRef.current.pointerId !== event.pointerId || !panelRef.current) return;
+    event.currentTarget.releasePointerCapture(event.pointerId);
+    panelRef.current.classList.remove(styles.dragging);
+    var _dragRef$current = dragRef.current,
+      currentHeight = _dragRef$current.currentHeight,
+      startHeight = _dragRef$current.startHeight;
+    dragRef.current.pointerId = -1;
+    var pointHeights = sortedPoints.map(function (point) {
+      return toPixels(point, window.innerHeight);
+    });
+    var minimum = pointHeights[0];
+    if (currentHeight < Math.min(minimum * 0.65, startHeight * 0.65)) {
+      panelRef.current.style.height = toCssSize(activeSnap);
+      onOpenChange(false, "drag");
+      return;
+    }
+    var nearest = 0;
+    pointHeights.forEach(function (height, index) {
+      if (Math.abs(height - currentHeight) < Math.abs(pointHeights[nearest] - currentHeight)) nearest = index;
+    });
+    var next = sortedPoints[nearest];
+    panelRef.current.style.height = toCssSize(next);
+    changeSnap(next);
+  };
+  if (!rendered || typeof document === "undefined") return null;
+  var panelStyle = Object.assign(Object.assign({}, style), {
+    height: toCssSize(activeSnap)
+  });
+  var node = /*#__PURE__*/React.createElement("div", {
+    className: clsx(styles.root, !modal && styles["non-modal"], closing && styles.closing),
+    style: {
+      zIndex: zIndex
+    }
+  }, modal && (/*#__PURE__*/React.createElement("div", {
+    className: clsx(styles.overlay, blurOverlay && styles.blur),
+    "aria-hidden": "true",
+    onClick: function onClick() {
+      return closeOnOverlayClick && onOpenChange(false, "overlay");
+    }
+  })), /*#__PURE__*/React.createElement("div", Object.assign({}, rest, {
+    ref: setPanelRef,
+    role: "dialog",
+    "aria-modal": modal || undefined,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy !== null && ariaLabelledBy !== void 0 ? ariaLabelledBy : title ? titleId : undefined,
+    "aria-describedby": ariaDescribedBy !== null && ariaDescribedBy !== void 0 ? ariaDescribedBy : description ? descriptionId : undefined,
+    tabIndex: -1,
+    className: clsx(styles.sheet, className),
+    style: panelStyle
+  }), (showHandle || draggable) && (/*#__PURE__*/React.createElement("div", {
+    className: styles["drag-area"],
+    onPointerDown: startDrag,
+    onPointerMove: moveDrag,
+    onPointerUp: endDrag,
+    onPointerCancel: endDrag
+  }, showHandle && (/*#__PURE__*/React.createElement("span", {
+    className: styles.handle,
+    "aria-hidden": "true"
+  })))), (title || description || header) && (/*#__PURE__*/React.createElement("header", {
+    className: styles.header
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.heading
+  }, title && /*#__PURE__*/React.createElement("h2", {
+    id: titleId
+  }, title), description && /*#__PURE__*/React.createElement("p", {
+    id: descriptionId
+  }, description)), header && (/*#__PURE__*/React.createElement("div", {
+    className: styles["header-actions"]
+  }, header)))), /*#__PURE__*/React.createElement("div", {
+    className: styles.body
+  }, children), footer && /*#__PURE__*/React.createElement("footer", {
+    className: styles.footer
+  }, footer)));
+  return /*#__PURE__*/createPortal(node, portalContainer !== null && portalContainer !== void 0 ? portalContainer : document.body);
+});
+
+export { Sheet };

package/esm/Sheet/Sheet.module.css

@@ -0,0 +1,153 @@
+.root {
+  font-family: var(--font-family-ui);
+  inset: 0;
+  pointer-events: none;
+  position: fixed;
+  z-index: var(--component-sheet-z-index);
+}
+
+.overlay {
+  animation: fade-in var(--component-sheet-motion-duration) ease-out both;
+  background: var(--component-sheet-overlay);
+  inset: 0;
+  pointer-events: auto;
+  position: absolute;
+}
+
+.blur {
+  backdrop-filter: blur(var(--component-sheet-overlay-blur));
+}
+
+.sheet {
+  animation: sheet-in var(--component-sheet-motion-duration) var(--component-sheet-motion-easing) both;
+  background: var(--component-sheet-bg);
+  border-radius: var(--component-sheet-radius) var(--component-sheet-radius) 0 0;
+  bottom: 0;
+  box-shadow: var(--component-sheet-shadow);
+  box-sizing: border-box;
+  color: var(--component-sheet-text);
+  display: flex;
+  flex-direction: column;
+  left: 0;
+  max-height: min(var(--component-sheet-max-height), 100%);
+  outline: none;
+  overflow: hidden;
+  pointer-events: auto;
+  position: absolute;
+  right: 0;
+  transition: height var(--component-sheet-resize-duration) ease, transform var(--component-sheet-motion-duration) ease;
+}
+
+.dragging {
+  transition: none;
+  user-select: none;
+}
+
+.drag-area {
+  align-items: center;
+  cursor: ns-resize;
+  display: flex;
+  flex: none;
+  justify-content: center;
+  min-height: var(--component-sheet-drag-area-height);
+  touch-action: none;
+}
+
+.handle {
+  background: var(--component-sheet-secondary);
+  border-radius: var(--component-sheet-handle-radius);
+  height: var(--component-sheet-handle-height);
+  opacity: var(--component-sheet-handle-opacity);
+  width: var(--component-sheet-handle-width);
+}
+
+.header {
+  align-items: flex-start;
+  border-bottom: var(--component-sheet-border-width) solid var(--component-sheet-border-color);
+  display: flex;
+  flex: none;
+  gap: var(--component-sheet-header-gap);
+  padding: var(--component-sheet-header-padding);
+}
+
+.heading {
+  flex: 1;
+  min-width: 0;
+}
+
+.heading h2 {
+  font-size: var(--component-sheet-title-font-size);
+  font-weight: var(--component-sheet-title-font-weight);
+  line-height: var(--component-sheet-title-line-height);
+  margin: 0;
+}
+
+.heading p {
+  color: var(--component-sheet-secondary);
+  font-size: var(--component-sheet-description-font-size);
+  margin: var(--component-sheet-description-offset) 0 0;
+}
+
+.header-actions {
+  align-items: center;
+  display: flex;
+  flex: none;
+}
+
+.body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  padding: var(--component-sheet-body-padding);
+}
+
+.footer {
+  background: var(--component-sheet-bg);
+  border-top: var(--component-sheet-border-width) solid var(--component-sheet-border-color);
+  flex: none;
+  padding: var(--component-sheet-footer-padding-block) var(--component-sheet-footer-padding-inline) max(var(--component-sheet-footer-padding-block), env(safe-area-inset-bottom));
+}
+
+.closing .overlay {
+  animation: fade-out var(--component-sheet-motion-duration) ease-in both;
+}
+
+.closing .sheet {
+  animation: sheet-out var(--component-sheet-motion-duration) ease-in both;
+}
+
+.non-modal {
+  height: 100%;
+  inset: auto 0 0;
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+}
+@keyframes fade-out {
+  to {
+    opacity: 0;
+  }
+}
+@keyframes sheet-in {
+  from {
+    transform: translateY(100%);
+  }
+}
+@keyframes sheet-out {
+  to {
+    transform: translateY(100%);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .overlay,
+  .sheet,
+  .closing .overlay,
+  .closing .sheet {
+    animation-duration: var(--component-sheet-reduced-motion-duration);
+    transition-duration: var(--component-sheet-reduced-motion-duration);
+  }
+}

package/esm/Sheet/index.d.ts

@@ -0,0 +1,2 @@
+export { Sheet } from "./Sheet";
+export type { SheetProps, SheetSnapPoint, SheetCloseReason, } from "./index.props";

package/esm/Sheet/index.js

@@ -0,0 +1 @@
+export { Sheet } from './Sheet.js';

package/esm/Sheet/index.props.d.ts

@@ -0,0 +1,26 @@
+import type { HTMLAttributes, ReactNode, RefObject } from "react";
+export type SheetSnapPoint = number | `${number}px` | `${number}%` | `${number}vh` | `${number}dvh`;
+export type SheetCloseReason = "overlay" | "escape" | "drag";
+export interface SheetProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "onChange"> {
+    open: boolean;
+    onOpenChange: (open: boolean, reason?: SheetCloseReason) => void;
+    title?: ReactNode;
+    description?: ReactNode;
+    header?: ReactNode;
+    footer?: ReactNode;
+    snapPoints?: readonly SheetSnapPoint[];
+    snapPoint?: SheetSnapPoint;
+    defaultSnapPoint?: SheetSnapPoint;
+    onSnapPointChange?: (snapPoint: SheetSnapPoint) => void;
+    modal?: boolean;
+    blurOverlay?: boolean;
+    closeOnOverlayClick?: boolean;
+    closeOnEscape?: boolean;
+    draggable?: boolean;
+    showHandle?: boolean;
+    lockBodyScroll?: boolean;
+    portalContainer?: HTMLElement | null;
+    initialFocusRef?: RefObject<HTMLElement | null>;
+    returnFocusRef?: RefObject<HTMLElement | null>;
+    zIndex?: number;
+}

package/esm/Theme/index.d.ts

@@ -597,6 +597,36 @@ export declare const THEMES: {
         "component-avatar-font-size-xxxl": string;
         "component-accordion-text": string;
         "component-accordion-line": string;
+        "component-sheet-bg": string;
+        "component-sheet-text": string;
+        "component-sheet-secondary": string;
+        "component-sheet-overlay": string;
+        "component-sheet-radius": string;
+        "component-sheet-shadow": string;
+        "component-sheet-z-index": string;
+        "component-sheet-max-height": string;
+        "component-sheet-overlay-blur": string;
+        "component-sheet-motion-duration": string;
+        "component-sheet-resize-duration": string;
+        "component-sheet-motion-easing": string;
+        "component-sheet-reduced-motion-duration": string;
+        "component-sheet-drag-area-height": string;
+        "component-sheet-handle-width": string;
+        "component-sheet-handle-height": string;
+        "component-sheet-handle-radius": string;
+        "component-sheet-handle-opacity": string;
+        "component-sheet-header-gap": string;
+        "component-sheet-header-padding": string;
+        "component-sheet-border-width": string;
+        "component-sheet-border-color": string;
+        "component-sheet-title-font-size": string;
+        "component-sheet-title-line-height": string;
+        "component-sheet-title-font-weight": string;
+        "component-sheet-description-offset": string;
+        "component-sheet-description-font-size": string;
+        "component-sheet-body-padding": string;
+        "component-sheet-footer-padding-block": string;
+        "component-sheet-footer-padding-inline": string;
         "component-modal-bg": string;
         "component-modal-border": string;
         "component-modal-overlay": string;
@@ -1384,6 +1414,36 @@ export declare const THEMES: {
         "component-avatar-font-size-xxxl": string;
         "component-accordion-text": string;
         "component-accordion-line": string;
+        "component-sheet-bg": string;
+        "component-sheet-text": string;
+        "component-sheet-secondary": string;
+        "component-sheet-overlay": string;
+        "component-sheet-radius": string;
+        "component-sheet-shadow": string;
+        "component-sheet-z-index": string;
+        "component-sheet-max-height": string;
+        "component-sheet-overlay-blur": string;
+        "component-sheet-motion-duration": string;
+        "component-sheet-resize-duration": string;
+        "component-sheet-motion-easing": string;
+        "component-sheet-reduced-motion-duration": string;
+        "component-sheet-drag-area-height": string;
+        "component-sheet-handle-width": string;
+        "component-sheet-handle-height": string;
+        "component-sheet-handle-radius": string;
+        "component-sheet-handle-opacity": string;
+        "component-sheet-header-gap": string;
+        "component-sheet-header-padding": string;
+        "component-sheet-border-width": string;
+        "component-sheet-border-color": string;
+        "component-sheet-title-font-size": string;
+        "component-sheet-title-line-height": string;
+        "component-sheet-title-font-weight": string;
+        "component-sheet-description-offset": string;
+        "component-sheet-description-font-size": string;
+        "component-sheet-body-padding": string;
+        "component-sheet-footer-padding-block": string;
+        "component-sheet-footer-padding-inline": string;
         "component-modal-bg": string;
         "component-modal-border": string;
         "component-modal-overlay": string;