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

package/dist/react/combobox.js

@@ -0,0 +1,574 @@
+import { createContext, useMemo, useRef, useState, useCallback, useEffect, useContext, isValidElement, useLayoutEffect } from 'react';
+import { MagnifyingGlassIcon } from '@phosphor-icons/react/dist/csr/MagnifyingGlass';
+import { ComboBox as ComboBox$1, ListBox, Label as Label$1, ComboBoxStateContext, Button, Group, Input, OverlayTriggerStateContext, Popover as Popover$1, Text, TooltipTrigger as TooltipTrigger$1, Tooltip as Tooltip$1, OverlayArrow } from 'react-aria-components';
+import { extendTailwindMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { QuestionIcon } from '@phosphor-icons/react/dist/csr/Question';
+import { createPortal } from 'react-dom';
+import { XIcon } from '@phosphor-icons/react/dist/csr/X';
+import '@phosphor-icons/react/dist/csr/Eye';
+import '@phosphor-icons/react/dist/csr/EyeSlash';
+import '@phosphor-icons/react/dist/csr/Info';
+
+var twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      text: ["display-xs", "display-sm", "display-md", "display-lg", "display-xl", "display-2xl"]
+    }
+  }
+});
+var cx = twMerge;
+var HintText = ({ isInvalid, className, size = "md", ...props }) => {
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      ...props,
+      slot: isInvalid ? "errorMessage" : "description",
+      className: cx(
+        "text-sm text-tertiary",
+        // Size
+        size === "sm" && "text-xs",
+        "in-data-[input-size=sm]:text-xs",
+        // Invalid state
+        isInvalid && "text-error-primary",
+        "group-invalid:text-error-primary",
+        className
+      )
+    }
+  );
+};
+HintText.displayName = "HintText";
+var Tooltip = ({
+  title,
+  description,
+  children,
+  arrow = false,
+  delay = 100,
+  closeDelay = 0,
+  trigger,
+  isDisabled,
+  isOpen,
+  defaultOpen,
+  offset = 6,
+  crossOffset,
+  placement = "top",
+  onOpenChange,
+  ...tooltipProps
+}) => {
+  const isTopOrBottomLeft = ["top left", "top end", "bottom left", "bottom end"].includes(placement);
+  const isTopOrBottomRight = ["top right", "top start", "bottom right", "bottom start"].includes(placement);
+  const calculatedCrossOffset = isTopOrBottomLeft ? -12 : isTopOrBottomRight ? 12 : 0;
+  return /* @__PURE__ */ jsxs(TooltipTrigger$1, { ...{ trigger, delay, closeDelay, isDisabled, isOpen, defaultOpen, onOpenChange }, children: [
+    children,
+    /* @__PURE__ */ jsx(
+      Tooltip$1,
+      {
+        ...tooltipProps,
+        offset,
+        placement,
+        crossOffset: crossOffset ?? calculatedCrossOffset,
+        className: ({ isEntering, isExiting }) => cx(isEntering && "ease-out animate-in", isExiting && "ease-in animate-out"),
+        children: ({ isEntering, isExiting }) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cx(
+              "z-50 flex max-w-xs origin-(--trigger-anchor-point) flex-col items-start gap-1 rounded-lg bg-primary-solid px-3 shadow-lg will-change-transform",
+              description ? "py-3" : "py-2",
+              isEntering && "ease-out animate-in fade-in zoom-in-95 in-placement-left:slide-in-from-right-0.5 in-placement-right:slide-in-from-left-0.5 in-placement-top:slide-in-from-bottom-0.5 in-placement-bottom:slide-in-from-top-0.5",
+              isExiting && "ease-in animate-out fade-out zoom-out-95 in-placement-left:slide-out-to-right-0.5 in-placement-right:slide-out-to-left-0.5 in-placement-top:slide-out-to-bottom-0.5 in-placement-bottom:slide-out-to-top-0.5"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-white", children: title }),
+              description && /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-tooltip-supporting-text", children: description }),
+              arrow && /* @__PURE__ */ jsx(OverlayArrow, { children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  viewBox: "0 0 100 100",
+                  className: "size-2.5 fill-bg-primary-solid in-placement-left:-rotate-90 in-placement-right:rotate-90 in-placement-top:rotate-0 in-placement-bottom:rotate-180",
+                  children: /* @__PURE__ */ jsx("path", { d: "M0,0 L35.858,35.858 Q50,50 64.142,35.858 L100,0 Z" })
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+};
+var TooltipTrigger = ({ children, className, ...buttonProps }) => {
+  return /* @__PURE__ */ jsx(Button, { ...buttonProps, className: (values) => cx("h-max w-max outline-hidden", typeof className === "function" ? className(values) : className), children });
+};
+var Label = ({ isInvalid, isRequired, tooltip, tooltipDescription, className, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    Label$1,
+    {
+      "data-label": "true",
+      ...props,
+      className: cx("flex cursor-default items-center gap-0.5 text-sm font-medium text-secondary", className),
+      children: [
+        props.children,
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cx(
+              "hidden text-brand-tertiary",
+              isRequired && "block",
+              typeof isRequired === "undefined" && "group-required:block",
+              isInvalid && "text-error-primary",
+              typeof isInvalid === "undefined" && "group-invalid:text-error-primary"
+            ),
+            children: "*"
+          }
+        ),
+        tooltip && /* @__PURE__ */ jsx(Tooltip, { title: tooltip, description: tooltipDescription, placement: "top", children: /* @__PURE__ */ jsx(
+          TooltipTrigger,
+          {
+            isDisabled: false,
+            className: "cursor-pointer text-fg-quaternary transition duration-200 hover:text-fg-quaternary_hover focus:text-fg-quaternary_hover",
+            children: /* @__PURE__ */ jsx(QuestionIcon, { className: "size-4" })
+          }
+        ) })
+      ]
+    }
+  );
+};
+Label.displayName = "Label";
+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 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 };
+}
+function MobileSheetCloseButton({ onClose }) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      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 MobileSheetChrome({
+  title,
+  contentClassName,
+  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(MobileSheetCloseButton, { onClose })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cx(
+          "min-h-0 flex-1 overflow-y-auto pb-[calc(5rem+env(safe-area-inset-bottom,0px))]",
+          contentClassName
+        ),
+        children
+      }
+    )
+  ] });
+}
+var Popover = ({ mobileOptions, children, size, className, style, compoundContent = false, ...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 { 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]);
+  const close = () => overlayState?.close();
+  const showMobileSheet = useMobileSheet && shouldRender;
+  const isMobileSheetExiting = showMobileSheet && !open;
+  const mobileScrim = useMobileSheet && shouldRender && typeof document !== "undefined" ? createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "fixed inset-0 z-50 bg-overlay/70",
+        style: backdropStyle,
+        onClick: close,
+        "aria-hidden": "true"
+      }
+    ),
+    document.body
+  ) : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    mobileScrim,
+    /* @__PURE__ */ jsx(
+      Popover$1,
+      {
+        placement: "bottom",
+        containerPadding: 0,
+        offset: 4,
+        ...props,
+        isExiting: isMobileSheetExiting,
+        ...useMobileSheet ? { "data-select-mobile-sheet": true } : {},
+        style: useMobileSheet ? { ...panelStyle, ...style } : style,
+        className: (state) => cx(
+          "outline-hidden",
+          !useMobileSheet && [
+            "w-(--trigger-width) origin-(--trigger-anchor-point) rounded-lg bg-primary shadow-lg ring-1 ring-secondary_alt will-change-transform",
+            compoundContent ? "overflow-hidden outline-hidden" : "overflow-x-hidden overflow-y-auto py-1 outline-hidden",
+            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",
+            !compoundContent && size === "sm" && "max-h-56!",
+            !compoundContent && size === "md" && "max-h-64!",
+            !compoundContent && size === "lg" && "max-h-80!"
+          ],
+          useMobileSheet && [
+            "fixed! inset-x-0! bottom-0! top-auto! left-0! right-0! z-[51] flex 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",
+            "max-h-[min(90dvh,calc(100dvh-env(safe-area-inset-bottom,0px)))]",
+            resolvedMobile.sheetClassName
+          ],
+          typeof className === "function" ? className(state) : className
+        ),
+        children: (state) => {
+          const content = typeof children === "function" ? children(state) : children;
+          if (useMobileSheet) {
+            return /* @__PURE__ */ jsx(
+              MobileSheetChrome,
+              {
+                title: resolvedMobile.title,
+                contentClassName: resolvedMobile.contentClassName,
+                onClose: close,
+                children: content
+              }
+            );
+          }
+          return content;
+        }
+      }
+    )
+  ] });
+};
+var sizes = {
+  sm: {
+    root: "py-2 pl-3 pr-2.5 gap-2 *:data-icon:size-4 *:data-icon:stroke-[2.25px]",
+    withIcon: "",
+    text: "text-sm",
+    textContainer: "gap-x-1.5",
+    shortcut: "pr-2.5"
+  },
+  md: { root: "py-2 px-3 gap-2 *:data-icon:size-5", withIcon: "", text: "text-md", textContainer: "gap-x-1.5", shortcut: "pr-2.5" },
+  lg: { root: "py-2.5 px-3.5 gap-2 *:data-icon:size-5", withIcon: "", text: "text-md", textContainer: "gap-x-1.5", shortcut: "pr-3" }
+};
+var searchSizes = {
+  sm: { wrapper: "py-1", root: "px-3 py-2 gap-2 *:data-icon:size-4 *:data-icon:stroke-[2.25px]", text: "text-sm" },
+  md: { wrapper: "py-0.5", root: "px-3 py-2 gap-2 *:data-icon:size-5", text: "text-md" },
+  lg: { wrapper: "py-0.5", root: "px-3.5 py-2.5 gap-2 *:data-icon:size-5", text: "text-md" }
+};
+var SelectContext = createContext({ size: "md" });
+function hasResizeObserver() {
+  return typeof window.ResizeObserver !== "undefined";
+}
+function useResizeObserver(options) {
+  const { ref, box, onResize } = options;
+  useEffect(() => {
+    const element = ref?.current;
+    if (!element) {
+      return;
+    }
+    if (!hasResizeObserver()) {
+      window.addEventListener("resize", onResize, false);
+      return () => {
+        window.removeEventListener("resize", onResize, false);
+      };
+    } else {
+      const resizeObserverInstance = new window.ResizeObserver((entries) => {
+        if (!entries.length) {
+          return;
+        }
+        onResize();
+      });
+      resizeObserverInstance.observe(element, { box });
+      return () => {
+        if (element) {
+          resizeObserverInstance.unobserve(element);
+        }
+      };
+    }
+  }, [onResize, ref, box]);
+}
+var inputFocusRingShadow = "border-brand ring-1 ring-inset ring-brand";
+var inputErrorFocusRingShadow = "border-error ring-1 ring-inset ring-error";
+createContext({});
+
+// ../../utils/is-react-component.ts
+var isFunctionComponent = (component) => {
+  return typeof component === "function";
+};
+var isClassComponent = (component) => {
+  return typeof component === "function" && component.prototype && (!!component.prototype.isReactComponent || !!component.prototype.render);
+};
+var isForwardRefComponent = (component) => {
+  return typeof component === "object" && component !== null && component.$$typeof.toString() === "Symbol(react.forward_ref)";
+};
+var isReactComponent = (component) => {
+  return isFunctionComponent(component) || isForwardRefComponent(component) || isClassComponent(component);
+};
+var ComboBoxMobileTrigger = ({ size, placeholder, icon: IconProp, isInvalid, onPointerEnter, ref }) => {
+  const state = useContext(ComboBoxStateContext);
+  const selectedItem = state?.selectedItem?.value ?? null;
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      ref,
+      onPress: () => state?.open(),
+      onPointerEnter,
+      className: ({ isFocusVisible, isDisabled }) => cx(
+        "relative flex w-full cursor-pointer items-center gap-2 rounded-lg border border-solid border-primary bg-primary text-left shadow-xs outline-hidden transition-[border-color,box-shadow] duration-100 ease-linear",
+        isDisabled && "cursor-not-allowed opacity-50",
+        !isInvalid && (isFocusVisible || state?.isOpen) && inputFocusRingShadow,
+        isInvalid && !(isFocusVisible || state?.isOpen) && "border-error_subtle",
+        isInvalid && (isFocusVisible || state?.isOpen) && inputErrorFocusRingShadow,
+        "*:data-icon:shrink-0 *:data-icon:text-fg-quaternary",
+        sizes[size].root
+      ),
+      children: [
+        isReactComponent(IconProp) ? /* @__PURE__ */ jsx(IconProp, { "data-icon": true, className: "pointer-events-none", "aria-hidden": "true" }) : isValidElement(IconProp) ? IconProp : /* @__PURE__ */ jsx(MagnifyingGlassIcon, { "data-icon": true, className: "pointer-events-none", "aria-hidden": "true" }),
+        selectedItem ? /* @__PURE__ */ jsxs("section", { className: cx("flex w-full truncate", sizes[size].textContainer), children: [
+          /* @__PURE__ */ jsx("p", { className: cx("truncate font-medium text-primary", sizes[size].text), children: selectedItem.label }),
+          selectedItem.supportingText && /* @__PURE__ */ jsx("p", { className: cx("text-tertiary", sizes[size].text), children: selectedItem.supportingText })
+        ] }) : /* @__PURE__ */ jsx("p", { className: cx("truncate text-placeholder", sizes[size].text), children: placeholder })
+      ]
+    }
+  );
+};
+var ComboBoxSheetSearch = ({ size, placeholder, icon: IconProp }) => /* @__PURE__ */ jsx("div", { className: cx("shrink-0 border-b border-secondary", searchSizes[size].wrapper), children: /* @__PURE__ */ jsxs("div", { className: cx("flex items-center", searchSizes[size].root), children: [
+  isReactComponent(IconProp) ? /* @__PURE__ */ jsx(IconProp, { "data-icon": true, "aria-hidden": "true", className: "shrink-0 text-fg-quaternary" }) : isValidElement(IconProp) ? IconProp : /* @__PURE__ */ jsx(MagnifyingGlassIcon, { "data-icon": true, "aria-hidden": "true", className: "shrink-0 text-fg-quaternary" }),
+  /* @__PURE__ */ jsx(
+    Input,
+    {
+      placeholder,
+      className: cx(
+        "w-full appearance-none bg-transparent text-primary caret-alpha-black/90 outline-hidden placeholder:text-placeholder",
+        searchSizes[size].text
+      )
+    }
+  )
+] }) });
+var ComboBoxValue = ({ size, shortcut, placeholder, shortcutClassName, icon: IconProp, isInvalid, ref, ...otherProps }) => {
+  const state = useContext(ComboBoxStateContext);
+  const value = state?.selectedItem?.value || null;
+  const inputValue = state?.inputValue || null;
+  const first = inputValue?.split(value?.supportingText)?.[0] || "";
+  const last = inputValue?.split(first)[1];
+  return /* @__PURE__ */ jsxs(
+    Group,
+    {
+      ref,
+      ...otherProps,
+      isInvalid,
+      className: ({ isDisabled, isInvalid: isGroupInvalid }) => cx(
+        "relative flex w-full items-center gap-2 rounded-lg border border-solid border-primary bg-primary shadow-xs outline-hidden transition-[border-color,box-shadow] duration-100 ease-linear",
+        isDisabled && "cursor-not-allowed opacity-50",
+        !isGroupInvalid && state?.isOpen && inputFocusRingShadow,
+        !isGroupInvalid && "has-[input:focus-visible]:border-brand has-[input:focus-visible]:ring-1 has-[input:focus-visible]:ring-inset has-[input:focus-visible]:ring-brand",
+        isGroupInvalid && !state?.isOpen && "border-error_subtle",
+        isGroupInvalid && state?.isOpen && inputErrorFocusRingShadow,
+        isGroupInvalid && "has-[input:focus-visible]:border-error has-[input:focus-visible]:ring-1 has-[input:focus-visible]:ring-inset has-[input:focus-visible]:ring-error",
+        // Icon styles
+        "*:data-icon:shrink-0 *:data-icon:text-fg-quaternary",
+        sizes[size].root
+      ),
+      children: [
+        isReactComponent(IconProp) ? /* @__PURE__ */ jsx(IconProp, { "data-icon": true, className: "pointer-events-none", "aria-hidden": "true" }) : isValidElement(IconProp) ? IconProp : /* @__PURE__ */ jsx(MagnifyingGlassIcon, { "data-icon": true, className: "pointer-events-none", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxs("div", { className: "relative flex w-full items-center", children: [
+          inputValue && /* @__PURE__ */ jsxs("span", { className: cx("absolute top-1/2 z-0 inline-flex w-full -translate-y-1/2 truncate", sizes[size].textContainer), "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx("p", { className: cx("font-medium text-primary", sizes[size].text), children: first }),
+            last && /* @__PURE__ */ jsx("p", { className: cx("-ml-0.75 text-tertiary", sizes[size].text), children: last })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              placeholder,
+              className: cx(
+                "z-10 w-full appearance-none bg-transparent text-transparent caret-alpha-black/90 placeholder:text-placeholder focus:outline-hidden disabled:cursor-not-allowed",
+                sizes[size].text
+              )
+            }
+          )
+        ] }),
+        shortcut && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cx(
+              "absolute inset-y-0.5 right-0.5 z-10 hidden items-center rounded-r-[inherit] bg-linear-to-r from-transparent to-bg-primary to-40% pl-8 md:flex",
+              sizes[size].shortcut,
+              shortcutClassName
+            ),
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "pointer-events-none rounded px-1 py-px text-xs font-medium text-quaternary ring-1 ring-secondary select-none ring-inset",
+                "aria-hidden": "true",
+                children: "\u2318K"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+var ComboBox = ({
+  placeholder = "Search",
+  shortcut = true,
+  size = "md",
+  children,
+  items,
+  shortcutClassName,
+  icon,
+  hideRequiredIndicator,
+  mobileOptions,
+  ...otherProps
+}) => {
+  const isMobile = useIsMobile();
+  const resolvedMobile = useMemo(() => resolveSelectMobileOptions(mobileOptions), [mobileOptions]);
+  const useMobileSheet = isMobile && resolvedMobile.sheet;
+  const triggerRef = useRef(null);
+  const [popoverWidth, setPopoverWidth] = useState("");
+  const onResize = useCallback(() => {
+    if (!triggerRef.current) return;
+    const divRect = triggerRef.current.getBoundingClientRect();
+    setPopoverWidth(divRect.width + "px");
+  }, []);
+  useResizeObserver({
+    ref: triggerRef,
+    box: "border-box",
+    onResize
+  });
+  return /* @__PURE__ */ jsx(SelectContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx(ComboBox$1, { menuTrigger: useMobileSheet ? "manual" : "focus", ...otherProps, children: (state) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+    otherProps.label && /* @__PURE__ */ jsx(Label, { isRequired: hideRequiredIndicator ? false : state.isRequired, tooltip: otherProps.tooltip, children: otherProps.label }),
+    useMobileSheet ? /* @__PURE__ */ jsx(
+      ComboBoxMobileTrigger,
+      {
+        ref: triggerRef,
+        placeholder,
+        icon,
+        size,
+        isInvalid: state.isInvalid,
+        onPointerEnter: onResize
+      }
+    ) : /* @__PURE__ */ jsx(
+      ComboBoxValue,
+      {
+        ref: triggerRef,
+        placeholder,
+        shortcut,
+        shortcutClassName,
+        icon,
+        size,
+        isInvalid: state.isInvalid,
+        onFocus: onResize,
+        onPointerEnter: onResize
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        size,
+        triggerRef,
+        compoundContent: useMobileSheet,
+        style: useMobileSheet ? void 0 : { width: popoverWidth },
+        className: otherProps.popoverClassName,
+        mobileOptions: { title: otherProps.label, ...mobileOptions },
+        children: useMobileSheet ? /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-col overflow-hidden outline-hidden", children: [
+          /* @__PURE__ */ jsx(ComboBoxSheetSearch, { size, placeholder, icon }),
+          /* @__PURE__ */ jsx(ListBox, { items, className: "min-h-0 flex-1 overflow-y-auto py-1 outline-hidden", children })
+        ] }) : /* @__PURE__ */ jsx(ListBox, { items, className: "size-full outline-hidden", children })
+      }
+    ),
+    otherProps.hint && /* @__PURE__ */ jsx(HintText, { isInvalid: state.isInvalid, className: cx(size === "sm" && "text-xs"), children: otherProps.hint })
+  ] }) }) });
+};
+
+export { ComboBox };
+//# sourceMappingURL=combobox.js.map
+//# sourceMappingURL=combobox.js.map