@avenue-ticketing/ui 0.12.0-beta.1 → 0.12.0-beta.3

package/dist/react/dropdown-account-card-xs.js

@@ -1,16 +1,18 @@
-import { createContext, useState, useCallback, useRef, useLayoutEffect } from 'react';
+import { createContext, useState, useMemo, useContext, useEffect, useCallback, useLayoutEffect, useRef } from 'react';
 import { CaretDownIcon } from '@phosphor-icons/react/dist/csr/CaretDown';
 import { SignOutIcon } from '@phosphor-icons/react/dist/csr/SignOut';
 import { MoonIcon } from '@phosphor-icons/react/dist/csr/Moon';
 import { PlusIcon } from '@phosphor-icons/react/dist/csr/Plus';
 import { GearIcon } from '@phosphor-icons/react/dist/csr/Gear';
-import { MenuTrigger, Button, MenuSection, Header, SubmenuTrigger, Popover, Menu, MenuItem, Separator } from 'react-aria-components';
+import { MenuTrigger, Button, MenuSection, Header, SubmenuTrigger, OverlayTriggerStateContext, Popover, Menu, MenuItem, Separator } from 'react-aria-components';
 import { UserIcon } from '@phosphor-icons/react/dist/csr/User';
 import { extendTailwindMerge } from 'tailwind-merge';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { createPortal } from 'react-dom';
 import { CheckIcon } from '@phosphor-icons/react/dist/csr/Check';
 import { CaretRightIcon } from '@phosphor-icons/react/dist/csr/CaretRight';
 import '@phosphor-icons/react/dist/csr/DotsThreeVertical';
+import { XIcon } from '@phosphor-icons/react/dist/csr/X';
 
 var twMerge = extendTailwindMerge({
   extend: {
@@ -170,9 +172,84 @@ var Avatar = ({
     }
   );
 };
+var MOBILE_SHEET_MOTION_MS = 175;
+var MOBILE_SHEET_ENTRY_EASING = "cubic-bezier(0.85, 0, 0.15, 1)";
+var MOBILE_SHEET_EXIT_EASING = "cubic-bezier(0.85, 0, 1, 0.15)";
+var MOBILE_SHEET_SLIDE_ENTRANCE_OFFSET_PX = 120;
+function resolveSelectMobileOptions(mobileOptions) {
+  return {
+    sheet: mobileOptions?.sheet ?? true,
+    title: mobileOptions?.title,
+    sheetClassName: mobileOptions?.className,
+    contentClassName: mobileOptions?.contentClassName
+  };
+}
+function useMobileSheetAnimation(open, enabled, slideEntrance = true, slideOffsetPx = MOBILE_SHEET_SLIDE_ENTRANCE_OFFSET_PX) {
+  const [shouldRender, setShouldRender] = useState(open);
+  const [isAnimating, setIsAnimating] = useState(false);
+  useLayoutEffect(() => {
+    if (!enabled) {
+      setShouldRender(open);
+      return;
+    }
+    if (open) {
+      setShouldRender(true);
+    }
+  }, [open, enabled]);
+  useEffect(() => {
+    if (!enabled || open) return;
+    const timer = setTimeout(() => setShouldRender(false), MOBILE_SHEET_MOTION_MS);
+    return () => clearTimeout(timer);
+  }, [open, enabled]);
+  useLayoutEffect(() => {
+    if (!enabled || open || !shouldRender) return;
+    setIsAnimating(false);
+  }, [enabled, open, shouldRender]);
+  useEffect(() => {
+    if (!enabled || !shouldRender || !open) return;
+    let raf2 = 0;
+    const raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => setIsAnimating(true));
+    });
+    return () => {
+      cancelAnimationFrame(raf1);
+      if (raf2) cancelAnimationFrame(raf2);
+    };
+  }, [shouldRender, open, enabled]);
+  const motionEasing = open ? MOBILE_SHEET_ENTRY_EASING : MOBILE_SHEET_EXIT_EASING;
+  const hiddenTransform = slideEntrance ? `translateY(${slideOffsetPx}px)` : "translateY(100%)";
+  const panelStyle = enabled ? {
+    transform: isAnimating ? "translateY(0)" : hiddenTransform,
+    opacity: isAnimating ? 1 : 0,
+    transitionProperty: "transform, opacity",
+    transitionDuration: `${MOBILE_SHEET_MOTION_MS}ms`,
+    transitionTimingFunction: motionEasing
+  } : void 0;
+  const backdropStyle = enabled ? {
+    opacity: isAnimating ? 1 : 0,
+    transitionProperty: "opacity",
+    transitionDuration: `${MOBILE_SHEET_MOTION_MS}ms`,
+    transitionTimingFunction: motionEasing
+  } : void 0;
+  return { shouldRender, isAnimating, panelStyle, backdropStyle };
+}
+var MOBILE_SHEET_MAX_PX = 1024;
+function useIsMobile(breakpoint = MOBILE_SHEET_MAX_PX + 1) {
+  const [isMobile, setIsMobile] = useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia(`(max-width: ${breakpoint - 1}px)`).matches;
+  });
+  useEffect(() => {
+    const mq = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
+    const handler = (e) => setIsMobile(e.matches);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, [breakpoint]);
+  return isMobile;
+}
 var CHECKBOX_TICK_DELAY_MS = 60;
 var CHECKBOX_TICK_DRAW_MS = 100;
-function CheckboxAnimatedCheckMark({ className }) {
+function CheckboxAnimatedCheckMark({ pixelSize, className }) {
   const pathRef = useRef(null);
   useLayoutEffect(() => {
     const path = pathRef.current;
@@ -193,7 +270,7 @@ function CheckboxAnimatedCheckMark({ className }) {
     });
     return () => anim.cancel();
   }, []);
-  return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 14 14", fill: "none", className: cx("block shrink-0", className), children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", width: pixelSize, height: pixelSize, viewBox: "0 0 14 14", fill: "none", className: cx("block", className), children: /* @__PURE__ */ jsx(
     "path",
     {
       ref: pathRef,
@@ -208,14 +285,15 @@ function CheckboxAnimatedCheckMark({ className }) {
 var focusRingShadow = "outline-none [box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]";
 var CheckboxBase = ({ className, isSelected, isDisabled, isIndeterminate, size = "sm", isFocusVisible = false }) => {
   const isChecked = isSelected || isIndeterminate;
-  const iconClassName = size === "sm" ? "size-2.5" : "size-3.5";
+  const iconPixelSize = size === "sm" ? 10 : 14;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cx(
-        "relative flex shrink-0 cursor-pointer appearance-none items-center justify-center border border-solid border-primary",
+        "relative flex shrink-0 cursor-pointer appearance-none items-center justify-center overflow-clip border border-solid border-primary",
         size === "sm" ? "size-4 rounded-xs" : "size-5 rounded-sm",
         isChecked ? "border-transparent bg-brand-solid" : "bg-primary",
+        !isChecked && !isDisabled && "group-hover:bg-primary_hover",
         isDisabled && "cursor-not-allowed opacity-50",
         isDisabled && !isChecked && "bg-tertiary",
         isFocusVisible && !isDisabled && focusRingShadow,
@@ -226,13 +304,15 @@ var CheckboxBase = ({ className, isSelected, isDisabled, isIndeterminate, size =
           "svg",
           {
             "aria-hidden": "true",
+            width: iconPixelSize,
+            height: iconPixelSize,
             viewBox: "0 0 14 14",
             fill: "none",
-            className: cx("pointer-events-none block shrink-0 text-fg-white", iconClassName),
+            className: "pointer-events-none block text-fg-white",
             children: /* @__PURE__ */ jsx("path", { d: "M2.91675 7H11.0834", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
           }
         ),
-        isSelected && !isIndeterminate && /* @__PURE__ */ jsx(CheckboxAnimatedCheckMark, { className: cx("pointer-events-none text-fg-white", iconClassName) })
+        isSelected && !isIndeterminate && /* @__PURE__ */ jsx(CheckboxAnimatedCheckMark, { pixelSize: iconPixelSize, className: "pointer-events-none text-fg-white" })
       ]
     }
   );
@@ -277,6 +357,7 @@ var RadioButtonBase = ({ className, isFocusVisible, isSelected, isDisabled, size
         "relative flex shrink-0 cursor-pointer appearance-none items-center justify-center overflow-clip rounded-full border border-solid border-primary bg-primary",
         size === "sm" ? "size-4" : "size-5",
         isSelected && "border-transparent bg-brand-solid",
+        !isSelected && !isDisabled && "group-hover:bg-primary_hover",
         isDisabled && "cursor-not-allowed opacity-50",
         isDisabled && !isSelected && "bg-tertiary",
         isFocusVisible && !isDisabled && focusRingShadow2,
@@ -318,7 +399,7 @@ var ToggleBase = ({ className, isHovered, isDisabled, isFocusVisible, isSelected
   const classes = slim ? styles2.slim[size] : styles2.default[size];
   const offTrackBackground = (() => {
     if (isDisabled) return "bg-tertiary";
-    if (isHovered) return slim ? "bg-tertiary" : "bg-brand-primary";
+    if (isHovered) return "bg-toggle-track_hover";
     return "bg-quaternary";
   })();
   return /* @__PURE__ */ jsx(
@@ -413,11 +494,11 @@ var DropdownItem = ({ label, children, addon, icon: Icon, avatarUrl, unstyled, s
           children: [
             state.selectionMode !== "none" && !avatarUrl && !Icon && /* @__PURE__ */ jsx(SelectionIndicator, { ...state, className: "mr-2" }),
             avatarUrl && /* @__PURE__ */ jsx("div", { className: "mr-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ jsx(Avatar, { "aria-hidden": "true", size: "xs", src: avatarUrl, alt: label, className: "size-5" }) }),
-            Icon && /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", className: "mr-2 size-4 shrink-0 stroke-[2.25px] text-fg-quaternary" }),
+            Icon && /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", className: "mr-2 size-4 shrink-0 stroke-[2.25px] text-fg-secondary" }),
             /* @__PURE__ */ jsx("span", { className: cx("grow truncate text-sm font-semibold text-secondary", state.isFocused && "text-secondary_hover"), children: label || (typeof children === "function" ? children(state) : children) }),
             addon && /* @__PURE__ */ jsx("span", { className: "ml-1 shrink-0 pr-1 text-xs font-medium text-quaternary", children: addon }),
             state.selectionMode !== "none" && (avatarUrl || Icon) && /* @__PURE__ */ jsx(SelectionIndicator, { ...state, className: "ml-1" }),
-            state.hasSubmenu && /* @__PURE__ */ jsx(CaretRightIcon, { "aria-hidden": "true", className: "ml-auto size-4 shrink-0 stroke-[2.25px] text-fg-quaternary" })
+            state.hasSubmenu && /* @__PURE__ */ jsx(CaretRightIcon, { "aria-hidden": "true", className: "ml-auto size-4 shrink-0 stroke-[2.25px] text-fg-secondary" })
           ]
         }
       )
@@ -433,21 +514,105 @@ var DropdownMenu = (props) => {
     }
   );
 };
-var DropdownPopover = (props) => {
-  return /* @__PURE__ */ jsx(
-    Popover,
+var DropdownSheetDepthContext = createContext(0);
+function DropdownSheetCloseButton({ onClose }) {
+  return /* @__PURE__ */ jsxs(
+    "button",
     {
-      placement: "bottom right",
-      ...props,
-      className: (state) => cx(
-        "w-62 origin-(--trigger-anchor-point) overflow-auto rounded-lg bg-primary shadow-lg ring-1 ring-secondary_alt will-change-transform",
-        state.isEntering && "duration-150 ease-out animate-in fade-in placement-right:slide-in-from-left-0.5 placement-top:slide-in-from-bottom-0.5 placement-bottom:slide-in-from-top-0.5",
-        state.isExiting && "duration-100 ease-in animate-out fade-out placement-right:slide-out-to-left-0.5 placement-top:slide-out-to-bottom-0.5 placement-bottom:slide-out-to-top-0.5",
-        typeof props.className === "function" ? props.className(state) : props.className
-      ),
-      children: props.children
+      type: "button",
+      onClick: (e) => {
+        e.stopPropagation();
+        onClose();
+      },
+      className: "flex size-12 shrink-0 cursor-pointer items-center justify-center rounded-full text-fg-primary transition duration-100 ease-linear hover:bg-primary_hover active:scale-[0.96] focus-visible:outline-none focus-visible:[box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]",
+      children: [
+        /* @__PURE__ */ jsx(XIcon, { className: "size-5", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+      ]
     }
   );
+}
+function DropdownSheetChrome({ title, onClose, children }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: cx("flex w-full shrink-0 items-center py-2 pl-4 pr-2", title ? "justify-between gap-3" : "justify-end"), children: [
+      title ? /* @__PURE__ */ jsx("p", { className: "min-w-0 flex-1 truncate text-base font-semibold text-primary", children: title }) : null,
+      /* @__PURE__ */ jsx(DropdownSheetCloseButton, { onClose })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto pb-[max(2.5rem,calc(env(safe-area-inset-bottom)+2rem))]", children })
+  ] });
+}
+var DropdownPopover = ({ mobileOptions, children, className, style, ...props }) => {
+  const isMobile = useIsMobile();
+  const resolvedMobile = useMemo(() => resolveSelectMobileOptions(mobileOptions), [mobileOptions]);
+  const useMobileSheet = isMobile && resolvedMobile.sheet;
+  const overlayState = useContext(OverlayTriggerStateContext);
+  const open = overlayState?.isOpen ?? false;
+  const parentDepth = useContext(DropdownSheetDepthContext);
+  const depth = parentDepth + 1;
+  const { shouldRender, panelStyle, backdropStyle } = useMobileSheetAnimation(open, useMobileSheet);
+  useEffect(() => {
+    if (!useMobileSheet || !open) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [useMobileSheet, open]);
+  if (!useMobileSheet) {
+    return /* @__PURE__ */ jsx(
+      Popover,
+      {
+        placement: "bottom right",
+        ...props,
+        style,
+        className: (state) => cx(
+          "w-62 origin-(--trigger-anchor-point) overflow-auto rounded-lg bg-primary shadow-lg ring-1 ring-secondary_alt will-change-transform",
+          state.isEntering && "duration-150 ease-out animate-in fade-in placement-right:slide-in-from-left-0.5 placement-top:slide-in-from-bottom-0.5 placement-bottom:slide-in-from-top-0.5",
+          state.isExiting && "duration-100 ease-in animate-out fade-out placement-right:slide-out-to-left-0.5 placement-top:slide-out-to-bottom-0.5 placement-bottom:slide-out-to-top-0.5",
+          typeof className === "function" ? className(state) : className
+        ),
+        children
+      }
+    );
+  }
+  const close = () => overlayState?.close();
+  const showMobileSheet = shouldRender;
+  const isMobileSheetExiting = showMobileSheet && !open;
+  const scrimZIndex = 50 + (depth - 1) * 10;
+  const sheetZIndex = scrimZIndex + 1;
+  const mobileScrim = shouldRender && typeof document !== "undefined" ? createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "fixed inset-0 bg-overlay/70",
+        style: { ...backdropStyle, zIndex: scrimZIndex },
+        onClick: close,
+        "aria-hidden": "true"
+      }
+    ),
+    document.body
+  ) : null;
+  return /* @__PURE__ */ jsxs(DropdownSheetDepthContext.Provider, { value: depth, children: [
+    mobileScrim,
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        placement: "bottom",
+        containerPadding: 0,
+        offset: 0,
+        ...props,
+        isExiting: isMobileSheetExiting,
+        "data-dropdown-mobile-sheet": true,
+        style: { ...panelStyle, zIndex: sheetZIndex, ...style },
+        className: (state) => cx(
+          "fixed! inset-x-0! bottom-0! top-auto! right-0! left-0! flex max-h-[min(90dvh,calc(100dvh-env(safe-area-inset-bottom,0px)))] w-full! max-w-none! flex-col overflow-hidden rounded-t-2xl rounded-b-none border-x-0 border-t border-secondary bg-primary shadow-xl outline-hidden",
+          resolvedMobile.sheetClassName,
+          typeof className === "function" ? className(state) : className
+        ),
+        children: /* @__PURE__ */ jsx(DropdownSheetChrome, { title: resolvedMobile.title, onClose: close, children: typeof children === "function" ? null : children })
+      }
+    )
+  ] });
 };
 var DropdownSeparator = (props) => {
   return /* @__PURE__ */ jsx(Separator, { ...props, className: cx("my-1 h-px w-full bg-border-secondary", props.className) });