@avenue-ticketing/ui 0.11.0 → 0.12.0-beta.2

package/dist/react/sheet.js

@@ -1,13 +1,18 @@
 import React, { useCallback, useState, useMemo, useEffect, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
-import { X, ArrowLeft } from 'lucide-react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { ArrowLeftIcon } from '@phosphor-icons/react/dist/csr/ArrowLeft';
+import { XIcon } from '@phosphor-icons/react/dist/csr/X';
+import { extendTailwindMerge } from 'tailwind-merge';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
+var twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      text: ["display-xs", "display-sm", "display-md", "display-lg", "display-xl", "display-2xl"]
+    }
+  }
+});
+var cx = twMerge;
 var CLOSE_THRESHOLD = 200;
 var VELOCITY_THRESHOLD = 1;
 var SHEET_MOBILE_MAX_WIDTH_PX = 1024;
@@ -32,10 +37,10 @@ var PANEL_OFF_Y = "100%";
 var SHEET_Z_PANEL_CLOSE = 100;
 var SHEET_Z_PORTAL_STEP = 10;
 var SIDE_LAYOUT = {
-  top: "top-0 left-0 right-0 border-b border-primary/10",
-  bottom: "bottom-0 left-0 right-0 border-t border-primary/10",
-  left: "left-0 top-0 bottom-0 border-r border-primary/10",
-  right: "right-0 top-0 bottom-0 md:border-l border-primary/10"
+  top: "top-0 left-0 right-0 border-b border-secondary",
+  bottom: "bottom-0 left-0 right-0 border-t border-secondary",
+  left: "left-0 top-0 bottom-0 border-r border-secondary",
+  right: "right-0 top-0 bottom-0 md:border-l border-secondary"
 };
 function sizeClassFor(side, size) {
   const horizontal = side === "left" || side === "right";
@@ -93,22 +98,9 @@ var SheetBoundary = ({ className, children, ...props }) => {
     setHost(node);
   }, []);
   const boundaryValue = useMemo(() => ({ host, depth }), [host, depth]);
-  return /* @__PURE__ */ jsx(SheetBoundaryContext.Provider, { value: boundaryValue, children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: setRef,
-      className: cn("relative min-h-0 min-w-0", className),
-      ...props,
-      children
-    }
-  ) });
+  return /* @__PURE__ */ jsx(SheetBoundaryContext.Provider, { value: boundaryValue, children: /* @__PURE__ */ jsx("div", { ref: setRef, className: cx("relative min-h-0 min-w-0", className), ...props, children }) });
 };
-var Sheet = ({
-  children,
-  open: controlledOpen,
-  onOpenChange,
-  showBackdrop = false
-}) => {
+var Sheet = ({ children, open: controlledOpen, onOpenChange, showBackdrop = false }) => {
   const [internalOpen, setInternalOpen] = useState(false);
   const isControlled = controlledOpen !== void 0;
   const open = isControlled ? controlledOpen : internalOpen;
@@ -154,14 +146,7 @@ var Sheet = ({
       clearCloseHandoff,
       handoffAfterCloseRef
     }),
-    [
-      open,
-      setOpen,
-      nestDepth,
-      showBackdrop,
-      closeHandoffActive,
-      clearCloseHandoff
-    ]
+    [open, setOpen, nestDepth, showBackdrop, closeHandoffActive, clearCloseHandoff]
   );
   return /* @__PURE__ */ jsx(SheetContext.Provider, { value: sheetContextValue, children });
 };
@@ -184,18 +169,13 @@ var SheetTrigger = ({ children, asChild }) => {
 };
 var SheetClose = ({ children, asChild, afterClose }) => {
   const { setOpen } = useSheetContext();
-  const closeSheet = useCallback(
-    () => setOpen(false, afterClose ? { afterClose } : void 0),
-    [setOpen, afterClose]
-  );
+  const closeSheet = useCallback(() => setOpen(false, afterClose ? { afterClose } : void 0), [setOpen, afterClose]);
   return mergeChildClick(children, asChild, closeSheet);
 };
 function useSheetMobileViewport() {
   const [isMobileViewport, setIsMobileViewport] = useState(false);
   useEffect(() => {
-    const mqMobile = window.matchMedia(
-      `(max-width: ${SHEET_MOBILE_MAX_WIDTH_PX}px)`
-    );
+    const mqMobile = window.matchMedia(`(max-width: ${SHEET_MOBILE_MAX_WIDTH_PX}px)`);
     const sync = () => setIsMobileViewport(mqMobile.matches);
     sync();
     mqMobile.addEventListener("change", sync);
@@ -212,10 +192,7 @@ function useSheetRenderLifecycle(open, panelCloseMs, showBackdrop) {
       setShouldRender(true);
     } else {
       setIsAnimating(false);
-      const timer = setTimeout(
-        () => setShouldRender(false),
-        unmountAfterCloseMs
-      );
+      const timer = setTimeout(() => setShouldRender(false), unmountAfterCloseMs);
       return () => clearTimeout(timer);
     }
   }, [open, unmountAfterCloseMs]);
@@ -275,14 +252,14 @@ var SheetCloseButton = React.forwardRef(
         ref,
         type,
         style: { zIndex: SHEET_Z_PANEL_CLOSE, ...style },
-        className: cn(
-          "flex size-12 cursor-pointer items-center justify-center rounded-full md:bg-background transition-all hover:bg-secondary-background active:scale-[0.96] md:border md:border-primary/10 md:shadow-xl hover:border-primary/20",
+        className: cx(
+          "flex size-12 cursor-pointer items-center justify-center rounded-full text-fg-primary transition duration-100 ease-linear hover:bg-primary_hover active:scale-[0.96] md:border md:border-secondary md:bg-primary md:shadow-xl md:hover:bg-primary_hover focus-visible:outline-none focus-visible:[box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]",
           className
         ),
         onClick: handleClick,
         ...props,
         children: [
-          /* @__PURE__ */ jsx(X, { className: "size-5.5" }),
+          /* @__PURE__ */ jsx(XIcon, { className: "size-5.5", "aria-hidden": "true" }),
           /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
         ]
       }
@@ -303,38 +280,19 @@ var SheetContent = ({
   role,
   ...props
 }) => {
-  const {
-    open,
-    setOpen,
-    nestDepth,
-    showBackdrop,
-    closeHandoffActive,
-    clearCloseHandoff,
-    handoffAfterCloseRef
-  } = useSheetContext();
+  const { open, setOpen, nestDepth, showBackdrop, closeHandoffActive, clearCloseHandoff, handoffAfterCloseRef } = useSheetContext();
   const boundaryCtx = React.useContext(SheetBoundaryContext);
   const inBoundaryTree = useMemo(() => boundaryCtx != null, [boundaryCtx]);
   const boundaryHost = useMemo(() => boundaryCtx?.host ?? null, [boundaryCtx]);
-  const bounded = useMemo(
-    () => inBoundaryTree && boundaryHost != null,
-    [inBoundaryTree, boundaryHost]
-  );
+  const bounded = useMemo(() => inBoundaryTree && boundaryHost != null, [inBoundaryTree, boundaryHost]);
   const isMobileViewport = useSheetMobileViewport();
-  const dialogMotion = useMemo(
-    () => bounded && role === "dialog" && isMobileViewport,
-    [bounded, role, isMobileViewport]
-  );
-  const swipeActive = useMemo(
-    () => swipeEnabled && !dialogMotion,
-    [swipeEnabled, dialogMotion]
-  );
+  const dialogMotion = useMemo(() => bounded && role === "dialog" && isMobileViewport, [bounded, role, isMobileViewport]);
+  const swipeActive = useMemo(() => swipeEnabled && !dialogMotion, [swipeEnabled, dialogMotion]);
   const basePanelCloseMs = useMemo(
     () => dialogMotion ? DIALOG_MOTION_MS : isMobileViewport ? PANEL_CLOSE_MS_MOBILE : PANEL_CLOSE_MS_DESKTOP,
     [dialogMotion, isMobileViewport]
   );
-  const [handoffExitMsLatch, setHandoffExitMsLatch] = useState(
-    null
-  );
+  const [handoffExitMsLatch, setHandoffExitMsLatch] = useState(null);
   useLayoutEffect(() => {
     if (open) {
       setHandoffExitMsLatch(null);
@@ -347,11 +305,7 @@ var SheetContent = ({
   const panelCloseMs = useMemo(() => {
     return !open && closeHandoffActive ? PANEL_CLOSE_MS_HANDOFF : !open && handoffExitMsLatch != null ? handoffExitMsLatch : basePanelCloseMs;
   }, [open, closeHandoffActive, handoffExitMsLatch, basePanelCloseMs]);
-  const { shouldRender, isAnimating } = useSheetRenderLifecycle(
-    open,
-    panelCloseMs,
-    showBackdrop
-  );
+  const { shouldRender, isAnimating } = useSheetRenderLifecycle(open, panelCloseMs, showBackdrop);
   useEffect(() => {
     if (open || !closeHandoffActive) return;
     const cb = handoffAfterCloseRef.current;
@@ -388,20 +342,15 @@ var SheetContent = ({
     swipeReboundCleanupRef.current = null;
   }, []);
   const updateTransform = useCallback(() => {
-    if (!panelRef.current || !touchRef.current.isDragging || !swipeActive)
-      return;
+    if (!panelRef.current || !touchRef.current.isDragging || !swipeActive) return;
     const { startX, startY, currentX, currentY, direction } = touchRef.current;
     const deltaX = currentX - startX;
     const deltaY = currentY - startY;
     let transform = "";
-    if (side === "right" && direction === "x" && deltaX > 0)
-      transform = `translateX(${deltaX}px)`;
-    else if (side === "left" && direction === "x" && deltaX < 0)
-      transform = `translateX(${deltaX}px)`;
-    else if (side === "bottom" && direction === "y" && deltaY > 0)
-      transform = `translateY(${deltaY}px)`;
-    else if (side === "top" && direction === "y" && deltaY < 0)
-      transform = `translateY(${deltaY}px)`;
+    if (side === "right" && direction === "x" && deltaX > 0) transform = `translateX(${deltaX}px)`;
+    else if (side === "left" && direction === "x" && deltaX < 0) transform = `translateX(${deltaX}px)`;
+    else if (side === "bottom" && direction === "y" && deltaY > 0) transform = `translateY(${deltaY}px)`;
+    else if (side === "top" && direction === "y" && deltaY < 0) transform = `translateY(${deltaY}px)`;
     if (transform) {
       panelRef.current.style.transform = transform;
       panelRef.current.style.transition = "none";
@@ -431,12 +380,8 @@ var SheetContent = ({
       if (!touchRef.current.isDragging || !swipeActive || !e.touches[0]) return;
       touchRef.current.currentX = e.touches[0].clientX;
       touchRef.current.currentY = e.touches[0].clientY;
-      const deltaX = Math.abs(
-        touchRef.current.currentX - touchRef.current.startX
-      );
-      const deltaY = Math.abs(
-        touchRef.current.currentY - touchRef.current.startY
-      );
+      const deltaX = Math.abs(touchRef.current.currentX - touchRef.current.startX);
+      const deltaY = Math.abs(touchRef.current.currentY - touchRef.current.startY);
       if (!touchRef.current.direction && (deltaX > 5 || deltaY > 5)) {
         touchRef.current.direction = deltaX > deltaY ? "x" : "y";
       }
@@ -445,8 +390,7 @@ var SheetContent = ({
   );
   const handleTouchEnd = useCallback(
     (e) => {
-      if (!touchRef.current.isDragging || !swipeActive || !e.changedTouches[0])
-        return;
+      if (!touchRef.current.isDragging || !swipeActive || !e.changedTouches[0]) return;
       touchRef.current.isDragging = false;
       if (rafId.current) cancelAnimationFrame(rafId.current);
       const endX = e.changedTouches[0].clientX;
@@ -517,17 +461,7 @@ var SheetContent = ({
         }
       }
     },
-    [
-      swipeActive,
-      closeThreshold,
-      velocityThreshold,
-      side,
-      isMobileViewport,
-      bounded,
-      setOpen,
-      cancelSwipeRebound,
-      panelOpenMs
-    ]
+    [swipeActive, closeThreshold, velocityThreshold, side, isMobileViewport, bounded, setOpen, cancelSwipeRebound, panelOpenMs]
   );
   const panelTransform = useMemo(
     () => dialogMotion ? isAnimating ? "translateY(0)" : `translateY(${DIALOG_MOTION_OFFSET_PX}px)` : panelSlideTransform(side, isAnimating, bounded),
@@ -573,136 +507,80 @@ var SheetContent = ({
       transitionTimingFunction: open ? PANEL_OPEN_EASING : panelCloseEasingViaSwipeRef.current ? PANEL_SWIPE_CLOSE_EASING : PANEL_CLOSE_EASING,
       touchAction
     };
-  }, [
-    dialogMotion,
-    props.style,
-    panelTransform,
-    isAnimating,
-    open,
-    panelOpenMs,
-    panelCloseMs,
-    side,
-    swipeActive
-  ]);
+  }, [dialogMotion, props.style, panelTransform, isAnimating, open, panelOpenMs, panelCloseMs, side, swipeActive]);
   if (!shouldRender) return null;
   if (inBoundaryTree && boundaryHost == null) {
     return null;
   }
-  const sheetTree = /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        layerPosition,
-        "inset-0",
-        !bounded && "flex items-center justify-center",
-        bounded && "pointer-events-none"
-      ),
-      style: rootLayerStyle,
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              layerPosition,
-              "inset-0",
-              showBackdrop && "bg-black/20 transition-opacity dark:bg-primary/4",
-              showBackdrop && (isAnimating ? "opacity-100" : "opacity-0"),
-              !showBackdrop && "bg-transparent",
-              bounded && "pointer-events-auto"
-            ),
-            style: backdropStyle,
-            onClick: closeSheet
-          }
+  const sheetTree = /* @__PURE__ */ jsxs("div", { className: cx(layerPosition, "inset-0", !bounded && "flex items-center justify-center", bounded && "pointer-events-none"), style: rootLayerStyle, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cx(
+          layerPosition,
+          "inset-0",
+          showBackdrop && "bg-overlay/40 transition-opacity",
+          showBackdrop && (isAnimating ? "opacity-100" : "opacity-0"),
+          !showBackdrop && "bg-transparent",
+          bounded && "pointer-events-auto"
+        ),
+        style: backdropStyle,
+        onClick: closeSheet
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...props,
+        ref: panelRef,
+        role,
+        className: cx(
+          "flex flex-col bg-primary p-6 shadow-xl",
+          layerPosition,
+          bounded ? cx("pointer-events-auto inset-0 z-10 h-full w-full max-w-none overflow-hidden") : cx("z-50", SIDE_LAYOUT[side], sizeClassFor(side, size)),
+          className
         ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            ...props,
-            ref: panelRef,
-            role,
-            className: cn(
-              "bg-background flex flex-col p-6 shadow-xl",
-              layerPosition,
-              bounded ? cn(
-                "inset-0 z-10 h-full w-full max-w-none overflow-hidden pointer-events-auto"
-              ) : cn("z-50", SIDE_LAYOUT[side], sizeClassFor(side, size)),
-              className
-            ),
-            style: panelSurfaceStyle,
-            onTouchStart: swipeActive ? handleTouchStart : void 0,
-            onTouchMove: swipeActive ? handleTouchMove : void 0,
-            onTouchEnd: swipeActive ? handleTouchEnd : void 0,
-            children: [
-              children,
-              showClose && /* @__PURE__ */ jsx(
-                SheetCloseButton,
-                {
-                  side,
-                  className: cn(
-                    "absolute top-4 right-4",
-                    side === "right" && "md:top-5 md:right-auto md:-left-16",
-                    side === "left" && "md:top-5 md:-right-16 md:left-auto",
-                    side === "top" && "md:top-auto md:right-auto md:-bottom-15 md:left-1/2 md:-translate-x-1/2",
-                    side === "bottom" && "md:-top-15 md:right-auto md:bottom-auto md:left-1/2 md:-translate-x-1/2"
-                  )
-                }
+        style: panelSurfaceStyle,
+        onTouchStart: swipeActive ? handleTouchStart : void 0,
+        onTouchMove: swipeActive ? handleTouchMove : void 0,
+        onTouchEnd: swipeActive ? handleTouchEnd : void 0,
+        children: [
+          children,
+          showClose && /* @__PURE__ */ jsx(
+            SheetCloseButton,
+            {
+              side,
+              className: cx(
+                "absolute top-4 right-4",
+                side === "right" && "md:top-5 md:right-auto md:-left-16",
+                side === "left" && "md:top-5 md:-right-16 md:left-auto",
+                side === "top" && "md:top-auto md:right-auto md:-bottom-15 md:left-1/2 md:-translate-x-1/2",
+                side === "bottom" && "md:-top-15 md:right-auto md:bottom-auto md:left-1/2 md:-translate-x-1/2"
               )
-            ]
-          }
-        )
-      ]
-    }
-  );
-  return createPortal(
-    sheetTree,
-    bounded && boundaryHost ? boundaryHost : document.body
-  );
+            }
+          )
+        ]
+      }
+    )
+  ] });
+  return createPortal(sheetTree, bounded && boundaryHost ? boundaryHost : document.body);
 };
-var SheetHeader = ({ className, fixed, ...props }) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    className: cn(
-      "flex flex-col text-left",
-      fixed && "bg-background border-primary/10 sticky top-0 z-10 border-b p-4",
-      className
-    ),
-    ...props
-  }
-);
-var SheetFooter = ({ className, fixed, ...props }) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    className: cn(
-      "flex flex-row",
-      fixed && "bg-background border-primary/10 sticky bottom-0 z-10 border-t p-4",
-      className
-    ),
-    ...props
-  }
-);
-var SheetTitle = ({
-  className,
-  ...props
-}) => /* @__PURE__ */ jsx(
-  "h3",
-  {
-    className: cn("text-primary text-lg font-semibold", className),
-    ...props
-  }
-);
-var SheetDescription = ({ className, ...props }) => /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground text-sm", className), ...props });
+var SheetHeader = ({ className, fixed, ...props }) => /* @__PURE__ */ jsx("div", { className: cx("flex flex-col text-left", fixed && "sticky top-0 z-10 border-b border-secondary bg-primary p-4", className), ...props });
+var SheetFooter = ({ className, fixed, ...props }) => /* @__PURE__ */ jsx("div", { className: cx("flex flex-row", fixed && "sticky bottom-0 z-10 border-t border-secondary bg-primary p-4", className), ...props });
+var SheetTitle = ({ className, ...props }) => /* @__PURE__ */ jsx("h3", { className: cx("text-lg font-semibold text-primary", className), ...props });
+var SheetDescription = ({ className, ...props }) => /* @__PURE__ */ jsx("p", { className: cx("text-sm text-tertiary", className), ...props });
 var SheetNestedClose = ({ className, children, onClick, afterClose, ...props }) => /* @__PURE__ */ jsx(SheetClose, { asChild: true, afterClose, children: /* @__PURE__ */ jsx(
   "button",
   {
     type: "button",
-    className: cn(
-      "inline-flex size-12 shrink-0 cursor-pointer items-center justify-center rounded-full bg-background transition-all hover:bg-primary/5 active:scale-[0.96]",
+    className: cx(
+      "inline-flex size-12 shrink-0 cursor-pointer items-center justify-center rounded-full bg-primary text-fg-primary transition duration-100 ease-linear hover:bg-primary_hover active:scale-[0.96]",
       className
     ),
     onClick,
     ...props,
     children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(ArrowLeft, { className: "size-5.5", "aria-hidden": true }),
+      /* @__PURE__ */ jsx(ArrowLeftIcon, { className: "size-5.5", "aria-hidden": true }),
       /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Back" })
     ] })
   }