@12-apps/ui 5.0.0 → 5.0.1

package/dist/chunk-LGB6Z34C.js

@@ -0,0 +1,898 @@
+import {
+  withDefaults
+} from "./chunk-Y2JYDXL7.js";
+import {
+  accentFor,
+  muiColor
+} from "./chunk-OZCEKQIX.js";
+
+// src/components/data-display/Sheet/Sheet.parts.tsx
+import CloseIcon from "@mui/icons-material/Close";
+import { alpha, Backdrop, Box, Divider, Fade, IconButton, Typography, useTheme } from "@mui/material";
+
+// src/components/data-display/Sheet/Sheet.animations.ts
+import { keyframes } from "@mui/material";
+var SPRING_CONFIG = {
+  tension: 200,
+  friction: 25,
+  velocity: 0
+};
+var DEFAULT_VELOCITY_THRESHOLD = 0.5;
+var DEFAULT_DRAG_RESISTANCE = 0.3;
+var pulseAnimation = keyframes`
+  0% {
+    box-shadow: 0 0 0 0 rgba(var(--pulse-color), 0.4);
+  }
+  70% {
+    box-shadow: 0 0 0 20px rgba(var(--pulse-color), 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(var(--pulse-color), 0);
+  }
+`;
+var shimmerAnimation = keyframes`
+  0% {
+    background-position: -1000px 0;
+  }
+  100% {
+    background-position: 1000px 0;
+  }
+`;
+var glowAnimation = keyframes`
+  0%, 100% {
+    box-shadow: 0 0 20px 5px rgba(var(--glow-color), 0.3);
+  }
+  50% {
+    box-shadow: 0 0 35px 10px rgba(var(--glow-color), 0.5);
+  }
+`;
+
+// src/components/data-display/Sheet/Sheet.parts.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var handleSx = (theme, isDraggable) => ({
+  width: isDraggable ? 48 : 32,
+  height: isDraggable ? 6 : 4,
+  backgroundColor: alpha(theme.palette.text.primary, 0.3),
+  borderRadius: 3,
+  transition: theme.transitions.create(["all"], {
+    duration: theme.transitions.duration.short,
+    easing: theme.transitions.easing.easeInOut
+  }),
+  position: "relative",
+  overflow: "hidden",
+  "&::after": {
+    content: '""',
+    position: "absolute",
+    top: 0,
+    left: "-100%",
+    width: "100%",
+    height: "100%",
+    background: `linear-gradient(
+      90deg,
+      transparent,
+      ${alpha(theme.palette.common.white, 0.3)},
+      transparent
+    )`,
+    animation: isDraggable ? `${shimmerAnimation} 2s infinite` : "none"
+  },
+  ...isDraggable && {
+    backgroundColor: alpha(theme.palette.primary.main, 0.4),
+    boxShadow: `0 2px 4px ${alpha(theme.palette.primary.main, 0.2)}`,
+    "&:hover": {
+      backgroundColor: theme.palette.primary.main,
+      transform: "scaleX(1.15) scaleY(1.2)",
+      boxShadow: `0 3px 6px ${alpha(theme.palette.primary.main, 0.3)}`
+    }
+  }
+});
+var SheetHandle = ({ isDraggable }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      sx: {
+        display: "flex",
+        justifyContent: "center",
+        mb: 1,
+        // The handle is decoration on a draggable header: the drag listeners sit
+        // on the header itself, so letting the bar swallow the press would open
+        // a dead zone in the middle of the grab target.
+        pointerEvents: isDraggable ? "none" : "auto"
+      },
+      children: /* @__PURE__ */ jsx(Box, { sx: handleSx(theme, isDraggable) })
+    }
+  );
+};
+var HEADER_DEFAULTS = {
+  isDraggable: false,
+  dataTestId: "sheet-header"
+};
+var SheetHeader = (props) => {
+  const {
+    title,
+    description,
+    showCloseButton,
+    onClose,
+    showHandle,
+    isDraggable,
+    onDragStart,
+    className,
+    style,
+    children,
+    dataTestId
+  } = withDefaults(props, HEADER_DEFAULTS);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className,
+      "data-testid": dataTestId,
+      sx: {
+        p: 2,
+        pb: showHandle ? 1 : 2,
+        cursor: isDraggable ? "grab" : "auto",
+        "&:active": isDraggable ? { cursor: "grabbing" } : {},
+        ...style
+      },
+      onMouseDown: isDraggable ? onDragStart : void 0,
+      onTouchStart: isDraggable ? onDragStart : void 0,
+      children: [
+        showHandle && /* @__PURE__ */ jsx(SheetHandle, { isDraggable: Boolean(isDraggable) }),
+        /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "flex-start", justifyContent: "space-between" }, children: [
+          /* @__PURE__ */ jsxs(Box, { sx: { flex: 1 }, children: [
+            title && /* @__PURE__ */ jsx(Typography, { variant: "h6", sx: { fontWeight: 600 }, "data-testid": `${dataTestId}-title`, children: title }),
+            description && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mt: 0.5 }, children: description }),
+            children
+          ] }),
+          showCloseButton && /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              onClick: onClose,
+              size: "small",
+              sx: { ml: 1, mt: -0.5 },
+              "data-testid": `${dataTestId}-close-button`,
+              children: /* @__PURE__ */ jsx(CloseIcon, { "data-testid": `${dataTestId}-close-icon` })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+var CONTENT_DEFAULTS = {
+  padded: true,
+  dataTestId: "sheet-content"
+};
+var SheetContent = (props) => {
+  const { children, className, style, padded, dataTestId } = withDefaults(props, CONTENT_DEFAULTS);
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className,
+      "data-testid": dataTestId,
+      sx: { flex: 1, overflow: "auto", p: padded ? 2 : 0, ...style },
+      children
+    }
+  );
+};
+var FOOTER_DEFAULTS = {
+  sticky: false,
+  divider: false,
+  dataTestId: "sheet-footer"
+};
+var SheetFooter = (props) => {
+  const { children, className, style, sticky, divider, dataTestId } = withDefaults(
+    props,
+    FOOTER_DEFAULTS
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    divider && /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        className,
+        "data-testid": dataTestId,
+        sx: {
+          p: 2,
+          position: sticky ? "sticky" : "relative",
+          bottom: sticky ? 0 : "auto",
+          backgroundColor: "background.paper",
+          borderTop: sticky ? "1px solid" : "none",
+          borderColor: "divider",
+          ...style
+        },
+        children
+      }
+    )
+  ] });
+};
+var OVERLAY_DEFAULTS = {
+  open: false,
+  blur: false
+};
+var SheetOverlay = (props) => {
+  const { open, onClick, className, style, blur } = withDefaults(props, OVERLAY_DEFAULTS);
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(Fade, { in: open, timeout: 300, children: /* @__PURE__ */ jsx(
+    Backdrop,
+    {
+      open: Boolean(open),
+      onClick,
+      className,
+      sx: {
+        // One below the drawer: this backdrop replaces MUI's own (the drawer
+        // is given a no-op BackdropComponent) and must sit under the panel.
+        zIndex: theme.zIndex.drawer - 1,
+        backgroundColor: alpha(theme.palette.common.black, blur ? 0.6 : 0.5),
+        backdropFilter: blur ? "blur(8px) saturate(180%)" : "none",
+        WebkitBackdropFilter: blur ? "blur(8px) saturate(180%)" : "none",
+        ...style
+      }
+    }
+  ) });
+};
+
+// src/components/data-display/Sheet/Sheet.tsx
+import { Drawer, SwipeableDrawer, useTheme as useTheme2 } from "@mui/material";
+import React from "react";
+
+// src/components/data-display/Sheet/Sheet.body.tsx
+import { Box as Box2, CircularProgress } from "@mui/material";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var needsHeader = (props) => Boolean(
+  props.showHandle || props.title || props.description || props.showCloseButton || props.header
+);
+var SheetLoading = ({ color }) => /* @__PURE__ */ jsx2(
+  Box2,
+  {
+    sx: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      minHeight: 200
+    },
+    children: /* @__PURE__ */ jsx2(CircularProgress, { color: color === void 0 ? void 0 : muiColor(color, "inherit") })
+  }
+);
+var SheetBody = (props) => {
+  const {
+    title,
+    description,
+    showCloseButton,
+    showHandle,
+    header,
+    footer,
+    loading,
+    color,
+    children,
+    onClick,
+    onFocus,
+    onBlur,
+    testId,
+    isDragging,
+    isVerticalSheet,
+    isDraggableVariant,
+    onClose,
+    onDragStart
+  } = props;
+  return /* @__PURE__ */ jsxs2(
+    Box2,
+    {
+      onClick,
+      onFocus,
+      onBlur,
+      "data-testid": testId,
+      sx: {
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        position: "relative",
+        userSelect: isDragging ? "none" : "auto"
+      },
+      children: [
+        needsHeader(props) && /* @__PURE__ */ jsx2(
+          SheetHeader,
+          {
+            title,
+            description,
+            showCloseButton,
+            onClose,
+            showHandle: showHandle && isVerticalSheet,
+            isDraggable: isDraggableVariant && isVerticalSheet,
+            onDragStart,
+            dataTestId: `${testId}-header`,
+            children: header
+          }
+        ),
+        /* @__PURE__ */ jsx2(SheetContent, { padded: true, dataTestId: `${testId}-content`, children: loading ? /* @__PURE__ */ jsx2(SheetLoading, { color }) : children }),
+        footer && /* @__PURE__ */ jsx2(SheetFooter, { sticky: true, divider: true, dataTestId: `${testId}-footer`, children: footer })
+      ]
+    }
+  );
+};
+
+// src/components/data-display/Sheet/Sheet.hooks.ts
+import { useCallback as useCallback2, useEffect as useEffect2, useMemo, useRef as useRef2, useState as useState2 } from "react";
+
+// src/components/data-display/Sheet/Sheet.drag.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+var clientYOf = (e) => "touches" in e ? e.touches[0]?.clientY ?? 0 : e.clientY;
+var useDragListeners = (isDragging, onMove, onEnd) => {
+  useEffect(() => {
+    if (!isDragging) return;
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onEnd);
+    document.addEventListener("touchmove", onMove, { passive: false });
+    document.addEventListener("touchend", onEnd);
+    return () => {
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onEnd);
+      document.removeEventListener("touchmove", onMove);
+      document.removeEventListener("touchend", onEnd);
+    };
+  }, [isDragging, onMove, onEnd]);
+};
+var useVelocityTracker = () => {
+  const velocityRef = useRef(0);
+  const lastYRef = useRef(0);
+  const lastTimeRef = useRef(0);
+  const begin = useCallback((clientY) => {
+    lastYRef.current = clientY;
+    lastTimeRef.current = globalThis.performance.now();
+    velocityRef.current = 0;
+  }, []);
+  const track = useCallback((clientY) => {
+    const now = globalThis.performance.now();
+    const deltaTime = now - lastTimeRef.current;
+    if (deltaTime > 0) {
+      velocityRef.current = (clientY - lastYRef.current) / deltaTime;
+    }
+    lastYRef.current = clientY;
+    lastTimeRef.current = now;
+  }, []);
+  const read = useCallback(() => velocityRef.current || 0, []);
+  return { begin, track, read };
+};
+var useDragMath = (input, dragStartY) => {
+  const { isBottomSheet, minSnapPoint, maxSnapPoint, dragResistance } = input;
+  const snapDeltaFor = useCallback(
+    (clientY) => (isBottomSheet ? dragStartY - clientY : clientY - dragStartY) / window.innerHeight,
+    [isBottomSheet, dragStartY]
+  );
+  const withResistance = useCallback(
+    (snapPoint) => {
+      if (snapPoint < minSnapPoint) {
+        return minSnapPoint - (minSnapPoint - snapPoint) * dragResistance;
+      }
+      if (snapPoint > maxSnapPoint) {
+        return maxSnapPoint + (snapPoint - maxSnapPoint) * dragResistance;
+      }
+      return snapPoint;
+    },
+    [minSnapPoint, maxSnapPoint, dragResistance]
+  );
+  return { snapDeltaFor, withResistance };
+};
+var useDragInFlight = (input, geometry, { isDragging, dragStartY, stopDragging, velocity }) => {
+  const { isVerticalSheet, isBottomSheet, onDragEnd } = input;
+  const { sheetRef, currentSnapPoint, updateSheetHeight, settleAt } = geometry;
+  const { snapDeltaFor, withResistance } = useDragMath(input, dragStartY);
+  const handleDragMove = useCallback(
+    (e) => {
+      if (!isDragging || !sheetRef.current || !isVerticalSheet) return;
+      e.preventDefault();
+      const clientY = clientYOf(e);
+      velocity.track(clientY);
+      updateSheetHeight(withResistance(currentSnapPoint + snapDeltaFor(clientY)));
+    },
+    [isDragging, sheetRef, isVerticalSheet, currentSnapPoint, snapDeltaFor, withResistance, updateSheetHeight, velocity]
+  );
+  const handleDragEnd = useCallback(
+    (e) => {
+      if (!isDragging || !isVerticalSheet) return;
+      e.preventDefault();
+      stopDragging();
+      const position = currentSnapPoint + snapDeltaFor(clientYOf(e));
+      const finalVelocity = isBottomSheet ? -velocity.read() : velocity.read();
+      const target = settleAt(position, finalVelocity);
+      if (target !== void 0) {
+        onDragEnd?.(target);
+      }
+    },
+    [isDragging, isVerticalSheet, isBottomSheet, currentSnapPoint, snapDeltaFor, settleAt, stopDragging, velocity, onDragEnd]
+  );
+  return { handleDragMove, handleDragEnd };
+};
+var useDragGestures = (input, geometry) => {
+  const { isDraggableVariant, isVerticalSheet, onDragStart } = input;
+  const { isAnimating, cancelAnimation } = geometry;
+  const [isDragging, setIsDragging] = useState(false);
+  const [dragStartY, setDragStartY] = useState(0);
+  const velocity = useVelocityTracker();
+  const handleDragStart = useCallback(
+    (e) => {
+      if (!isDraggableVariant || !isVerticalSheet || isAnimating) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const clientY = clientYOf(e);
+      setIsDragging(true);
+      setDragStartY(clientY);
+      velocity.begin(clientY);
+      cancelAnimation();
+      onDragStart?.();
+    },
+    [isDraggableVariant, isVerticalSheet, isAnimating, velocity, cancelAnimation, onDragStart]
+  );
+  const stopDragging = useCallback(() => setIsDragging(false), []);
+  const { handleDragMove, handleDragEnd } = useDragInFlight(input, geometry, {
+    isDragging,
+    dragStartY,
+    stopDragging,
+    velocity
+  });
+  useDragListeners(isDragging, handleDragMove, handleDragEnd);
+  return { isDragging, handleDragStart };
+};
+
+// src/components/data-display/Sheet/Sheet.hooks.ts
+var closestSnapPoint = (points, position, from, velocity, velocityThreshold) => {
+  if (Math.abs(velocity) > velocityThreshold) {
+    const index = points.findIndex((point) => Math.abs(point - from) < 0.01);
+    if (velocity > 0 && index < points.length - 1) return points[index + 1];
+    if (velocity < 0 && index > 0) return points[index - 1];
+  }
+  return points.reduce(
+    (closest, point) => Math.abs(position - point) < Math.abs(position - closest) ? point : closest,
+    points[0] ?? from
+  );
+};
+var useSheetHeight = (input) => {
+  const { isVerticalSheet, isBottomSheet, isTopSheet } = input;
+  const [currentHeight, setCurrentHeight] = useState2(null);
+  const sheetRef = useRef2(null);
+  const updateSheetHeight = useCallback2(
+    (snapPoint) => {
+      if (!sheetRef.current || !isVerticalSheet) return;
+      const height = Math.round(window.innerHeight * snapPoint);
+      if (isBottomSheet) {
+        sheetRef.current.style.height = `${height}px`;
+        sheetRef.current.style.transform = "translateY(0)";
+      } else if (isTopSheet) {
+        sheetRef.current.style.height = `${height}px`;
+      }
+      setCurrentHeight(height);
+    },
+    [isBottomSheet, isTopSheet, isVerticalSheet]
+  );
+  return { sheetRef, currentHeight, updateSheetHeight };
+};
+var useSnapAnimation = ({
+  isVerticalSheet,
+  animationConfig,
+  updateSheetHeight,
+  onSettled,
+  enabled
+}) => {
+  const [isAnimating, setIsAnimating] = useState2(false);
+  const animationFrameRef = useRef2(void 0);
+  const animateToSnapPoint = useCallback2(
+    (from, to, velocity = 0) => {
+      if (!enabled() || !isVerticalSheet) return;
+      setIsAnimating(true);
+      const distance = to - from;
+      const startTime = globalThis.performance.now();
+      const { tension, friction } = { ...SPRING_CONFIG, ...animationConfig };
+      let currentVelocity = velocity * 1e3;
+      const animate = () => {
+        const elapsed = (globalThis.performance.now() - startTime) / 1e3;
+        const springForce = -tension * (from - to);
+        const dampingForce = -friction * currentVelocity;
+        currentVelocity += (springForce + dampingForce) * 0.016;
+        const progress = Math.min(1, elapsed * 4);
+        updateSheetHeight(from + distance * progress);
+        if (progress < 1) {
+          animationFrameRef.current = window.requestAnimationFrame(animate);
+          return;
+        }
+        setIsAnimating(false);
+        onSettled(to);
+        updateSheetHeight(to);
+      };
+      animate();
+    },
+    [isVerticalSheet, animationConfig, updateSheetHeight, onSettled, enabled]
+  );
+  const cancelAnimation = useCallback2(() => {
+    if (animationFrameRef.current) {
+      window.cancelAnimationFrame(animationFrameRef.current);
+    }
+  }, []);
+  return { isAnimating, animateToSnapPoint, cancelAnimation };
+};
+var useSnapGeometry = (input) => {
+  const {
+    isVerticalSheet,
+    snapPoints,
+    defaultSnapPoint,
+    minSnapPoint,
+    maxSnapPoint,
+    velocityThreshold,
+    animationConfig,
+    onSnapPointChange
+  } = input;
+  const [currentSnapPoint, setCurrentSnapPoint] = useState2(defaultSnapPoint);
+  const { sheetRef, currentHeight, updateSheetHeight } = useSheetHeight(input);
+  const sortedSnapPoints = useMemo(
+    () => [...snapPoints].sort((a, b) => a - b).filter((point) => point >= minSnapPoint && point <= maxSnapPoint),
+    [snapPoints, minSnapPoint, maxSnapPoint]
+  );
+  const onSettled = useCallback2(
+    (snapPoint) => {
+      setCurrentSnapPoint(snapPoint);
+      onSnapPointChange?.(snapPoint);
+    },
+    [onSnapPointChange]
+  );
+  const hasPanel = useCallback2(() => Boolean(sheetRef.current), [sheetRef]);
+  const { isAnimating, animateToSnapPoint, cancelAnimation } = useSnapAnimation({
+    isVerticalSheet,
+    animationConfig,
+    updateSheetHeight,
+    onSettled,
+    enabled: hasPanel
+  });
+  const settleAt = useCallback2(
+    (position, velocity) => {
+      const target = closestSnapPoint(
+        sortedSnapPoints,
+        position,
+        currentSnapPoint,
+        velocity,
+        velocityThreshold
+      );
+      if (target === void 0) return void 0;
+      animateToSnapPoint(currentSnapPoint, target, velocity);
+      return target;
+    },
+    [sortedSnapPoints, currentSnapPoint, velocityThreshold, animateToSnapPoint]
+  );
+  const resetToDefaultSnapPoint = useCallback2(() => {
+    setCurrentSnapPoint(defaultSnapPoint);
+    updateSheetHeight(defaultSnapPoint);
+  }, [defaultSnapPoint, updateSheetHeight]);
+  return {
+    sheetRef,
+    currentSnapPoint,
+    currentHeight,
+    isAnimating,
+    updateSheetHeight,
+    settleAt,
+    resetToDefaultSnapPoint,
+    cancelAnimation
+  };
+};
+var useSheetDrag = (input) => {
+  const geometry = useSnapGeometry(input);
+  const { isDragging, handleDragStart } = useDragGestures(input, geometry);
+  return {
+    sheetRef: geometry.sheetRef,
+    currentHeight: geometry.currentHeight,
+    isAnimating: geometry.isAnimating,
+    resetToDefaultSnapPoint: geometry.resetToDefaultSnapPoint,
+    isDragging,
+    handleDragStart
+  };
+};
+var useSheetOpen = (input) => {
+  const {
+    open,
+    persistent,
+    disabled,
+    closeOnEscape,
+    closeOnOverlayClick,
+    isDraggableVariant,
+    isVerticalSheet,
+    resetToDefaultSnapPoint,
+    onOpenChange,
+    onClose,
+    onOpen
+  } = input;
+  const [isOpen, setIsOpen] = useState2(open);
+  const handleClose = useCallback2(() => {
+    if (!persistent && !disabled) {
+      setIsOpen(false);
+      onOpenChange?.(false);
+      onClose?.();
+    }
+  }, [persistent, disabled, onOpenChange, onClose]);
+  const handleOverlayClick = useCallback2(() => {
+    if (closeOnOverlayClick && !persistent) {
+      handleClose();
+    }
+  }, [closeOnOverlayClick, persistent, handleClose]);
+  const handleSwipeOpen = useCallback2(() => {
+    setIsOpen(true);
+    onOpenChange?.(true);
+    onOpen?.();
+  }, [onOpenChange, onOpen]);
+  useEffect2(() => {
+    setIsOpen(open);
+    if (open) {
+      onOpen?.();
+      if (isDraggableVariant && isVerticalSheet) {
+        resetToDefaultSnapPoint();
+      }
+    }
+  }, [open, onOpen, isDraggableVariant, isVerticalSheet, resetToDefaultSnapPoint]);
+  useEffect2(() => {
+    if (!isOpen) return;
+    const handleEscape = (e) => {
+      if (closeOnEscape && e.key === "Escape") {
+        handleClose();
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [isOpen, closeOnEscape, handleClose]);
+  return { isOpen, handleClose, handleOverlayClick, handleSwipeOpen };
+};
+
+// src/components/data-display/Sheet/Sheet.styles.ts
+import { alpha as alpha2 } from "@mui/material";
+var isHorizontalPosition = (position) => position === "left" || position === "right";
+var HORIZONTAL_SIZES = {
+  xs: "min(92vw, 240px)",
+  sm: "min(92vw, 320px)",
+  md: "min(92vw, 400px)",
+  lg: "min(92vw, max(560px, 32vw))",
+  xl: "min(92vw, max(720px, 40vw))",
+  full: "100%"
+};
+var VERTICAL_SIZES = {
+  xs: 200,
+  sm: 300,
+  md: 400,
+  lg: 500,
+  xl: 600,
+  full: "100%"
+};
+var sizeStyles = ({
+  position,
+  size,
+  isDraggableVariant,
+  isVerticalSheet,
+  currentHeight
+}) => {
+  if (isDraggableVariant && isVerticalSheet && currentHeight !== null) {
+    return { height: currentHeight };
+  }
+  return isHorizontalPosition(position) ? { width: HORIZONTAL_SIZES[size] ?? HORIZONTAL_SIZES.md } : { height: VERTICAL_SIZES[size] ?? VERTICAL_SIZES.md };
+};
+var toRgbTriplet = (hexColor) => {
+  const hex = hexColor.replace("#", "");
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+  return `${r}, ${g}, ${b}`;
+};
+var roundedStyles = (theme, position) => {
+  const radius = theme.spacing(2);
+  const byPosition = {
+    top: `0 0 ${radius} ${radius}`,
+    bottom: `${radius} ${radius} 0 0`,
+    left: `0 ${radius} ${radius} 0`,
+    right: `${radius} 0 0 ${radius}`
+  };
+  return { borderRadius: byPosition[position] };
+};
+var SURFACES = {
+  draggable: ({ theme, elevation, accent }) => ({
+    boxShadow: `
+            ${theme.shadows[Math.min(elevation + 4, 24)]},
+            0 -2px 10px 0 ${alpha2(theme.palette.common.black, 0.1)}
+          `,
+    border: `1px solid ${alpha2(theme.palette.divider, 0.12)}`,
+    borderTop: `2px solid ${alpha2(accent, 0.3)}`,
+    transition: theme.transitions.create(["transform", "box-shadow", "border-color"], {
+      duration: theme.transitions.duration.shorter,
+      easing: theme.transitions.easing.easeInOut
+    }),
+    "&:hover": { borderTopColor: alpha2(accent, 0.5) }
+  }),
+  glass: ({ theme, glass }) => ({
+    backgroundColor: alpha2(theme.palette.background.paper, glass ? 0.75 : 0.95),
+    backdropFilter: "blur(24px) saturate(180%)",
+    WebkitBackdropFilter: "blur(24px) saturate(180%)",
+    border: `1px solid ${alpha2(theme.palette.divider, 0.15)}`,
+    boxShadow: `
+            0 8px 32px 0 ${alpha2(theme.palette.common.black, 0.15)},
+            inset 0 0 0 1px ${alpha2(theme.palette.common.white, 0.1)}
+          `
+  }),
+  gradient: ({ theme, color, gradient, accent }) => ({
+    background: gradient ? `linear-gradient(
+                135deg,
+                ${theme.palette.background.paper} 0%,
+                ${alpha2(accent, 0.08)} 50%,
+                ${alpha2(accentFor(theme, color)?.dark || accent, 0.12)} 100%
+              )` : theme.palette.background.paper,
+    position: "relative",
+    overflow: "hidden",
+    "&::before": gradient ? shimmerOverlay(theme) : {}
+  }),
+  elevated: ({ theme, elevation }) => ({
+    boxShadow: `
+            ${theme.shadows[elevation]},
+            0 20px 40px -15px ${alpha2(theme.palette.common.black, 0.15)}
+          `,
+    transform: "translateZ(0)",
+    willChange: "transform"
+  }),
+  minimal: () => ({ boxShadow: "none", border: "none" }),
+  default: () => ({})
+};
+var shimmerOverlay = (theme) => ({
+  content: '""',
+  position: "absolute",
+  top: 0,
+  left: "-100%",
+  width: "100%",
+  height: "100%",
+  background: `linear-gradient(
+              90deg,
+              transparent,
+              ${alpha2(theme.palette.common.white, 0.2)},
+              transparent
+            )`,
+  animation: `${shimmerAnimation} 3s infinite`
+});
+var baseSurface = (input, accent) => {
+  const { theme, disabled, isDragging, isAnimating, isDraggableVariant, isVerticalSheet } = input;
+  const colorRgb = toRgbTriplet(accent);
+  return {
+    backgroundColor: theme.palette.background.paper,
+    // A transition would fight the per-frame height writes while a drag or a
+    // snap animation is driving the panel.
+    transition: !isDragging && !isAnimating ? theme.transitions.create(["all"], {
+      duration: theme.transitions.duration.standard,
+      easing: theme.transitions.easing.easeInOut
+    }) : "none",
+    opacity: disabled ? 0.5 : 1,
+    pointerEvents: disabled ? "none" : "auto",
+    cursor: isDraggableVariant && isVerticalSheet ? "grab" : "auto",
+    "--pulse-color": colorRgb,
+    "--glow-color": colorRgb,
+    ...isDragging && { cursor: "grabbing" }
+  };
+};
+var variantStyles = (input) => {
+  const { theme, variant, color, position, glow, pulse, rounded } = input;
+  const accent = accentFor(theme, color)?.main || theme.palette.primary.main;
+  return {
+    ...baseSurface(input, accent),
+    // glow first, then pulse: with both set the pulse keyframes win the shared
+    // `animation` slot, which is the order the original spread produced.
+    ...glow && { animation: `${glowAnimation} 2s ease-in-out infinite`, filter: "brightness(1.05)" },
+    ...pulse && { animation: `${pulseAnimation} 2s infinite`, position: "relative" },
+    ...rounded && roundedStyles(theme, position),
+    ...(SURFACES[variant] ?? SURFACES.default)({ ...input, accent })
+  };
+};
+var panelSx = (input) => {
+  const { position, size, isDraggableVariant, isVerticalSheet, currentHeight, fullHeight, style } = input;
+  return {
+    ...sizeStyles({ position, size, isDraggableVariant, isVerticalSheet, currentHeight }),
+    ...variantStyles(input),
+    ...style,
+    overflow: "visible",
+    // Expand only the cross axis so the chosen `size` still governs the main
+    // axis: side sheets keep their (responsive) width and go full-height;
+    // top/bottom sheets keep their height and go full-width.
+    ...fullHeight && !isDraggableVariant && (isHorizontalPosition(position) ? { height: "100%" } : { width: "100%" })
+  };
+};
+
+// src/components/data-display/Sheet/Sheet.tsx
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var DEFAULTS = {
+  open: false,
+  position: "bottom",
+  variant: "default",
+  size: "md",
+  color: "primary",
+  glow: false,
+  pulse: false,
+  glass: false,
+  gradient: false,
+  loading: false,
+  disabled: false,
+  showOverlay: true,
+  closeOnOverlayClick: true,
+  closeOnEscape: true,
+  showCloseButton: true,
+  showHandle: true,
+  swipeable: true,
+  snapPoints: [0.25, 0.5, 0.75, 1],
+  defaultSnapPoint: 0.5,
+  minSnapPoint: 0,
+  maxSnapPoint: 1,
+  velocityThreshold: DEFAULT_VELOCITY_THRESHOLD,
+  dragResistance: DEFAULT_DRAG_RESISTANCE,
+  animationConfig: SPRING_CONFIG,
+  persistent: false,
+  fullHeight: false,
+  rounded: true,
+  elevation: 16,
+  dataTestId: "sheet"
+};
+var NoBackdrop = React.forwardRef(
+  (_props, _ref) => null
+);
+NoBackdrop.displayName = "NoBackdrop";
+var orientationOf = ({ position, variant }) => {
+  const isBottomSheet = position === "bottom";
+  const isTopSheet = position === "top";
+  return {
+    isBottomSheet,
+    isTopSheet,
+    isVerticalSheet: isBottomSheet || isTopSheet,
+    isDraggableVariant: variant === "draggable"
+  };
+};
+var Sheet = (props) => {
+  const resolved = withDefaults(props, DEFAULTS);
+  const { position, variant, showOverlay, swipeable, className, dataTestId } = resolved;
+  const theme = useTheme2();
+  const orientation = orientationOf(resolved);
+  const testId = resolved["data-testid"] || dataTestId;
+  const { sheetRef, currentHeight, isDragging, isAnimating, handleDragStart, resetToDefaultSnapPoint } = useSheetDrag({ ...resolved, ...orientation });
+  const { isOpen, handleClose, handleOverlayClick, handleSwipeOpen } = useSheetOpen({
+    ...resolved,
+    ...orientation,
+    resetToDefaultSnapPoint
+  });
+  const drawerProps = {
+    anchor: position,
+    open: isOpen,
+    className,
+    onClose: handleClose,
+    PaperProps: {
+      ref: sheetRef,
+      sx: panelSx({ ...resolved, ...orientation, theme, currentHeight, isDragging, isAnimating })
+    },
+    ModalProps: { keepMounted: true, BackdropComponent: NoBackdrop }
+  };
+  const body = /* @__PURE__ */ jsx3(
+    SheetBody,
+    {
+      ...resolved,
+      ...orientation,
+      testId,
+      isDragging,
+      onClose: handleClose,
+      onDragStart: handleDragStart
+    }
+  );
+  const isSwipeable = swipeable && !orientation.isDraggableVariant;
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    showOverlay && isOpen && /* @__PURE__ */ jsx3(SheetOverlay, { open: isOpen, onClick: handleOverlayClick, blur: variant === "glass" }),
+    isSwipeable ? /* @__PURE__ */ jsx3(
+      SwipeableDrawer,
+      {
+        ...drawerProps,
+        onOpen: handleSwipeOpen,
+        disableSwipeToOpen: false,
+        swipeAreaWidth: 20,
+        children: body
+      }
+    ) : /* @__PURE__ */ jsx3(Drawer, { ...drawerProps, children: body })
+  ] });
+};
+
+export {
+  SheetHeader,
+  SheetContent,
+  SheetFooter,
+  SheetOverlay,
+  Sheet
+};
+//# sourceMappingURL=chunk-LGB6Z34C.js.map