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

package/dist/react/checkbox.js

@@ -13,7 +13,7 @@ var twMerge = extendTailwindMerge({
 var cx = twMerge;
 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;
@@ -34,7 +34,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,
@@ -49,14 +49,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,
@@ -67,13 +68,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" })
       ]
     }
   );
@@ -99,7 +102,7 @@ var Checkbox = ({ label, hint, size = "sm", className, ...ariaCheckboxProps }) =
     {
       ...ariaCheckboxProps,
       className: (state) => cx(
-        "relative flex items-start",
+        "group relative flex items-start",
         state.isDisabled && "cursor-not-allowed",
         sizes[size].root,
         typeof className === "function" ? className(state) : className

package/dist/react/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../utils/cx.ts","../../../../components/base/checkbox/checkbox.tsx"],"names":["AriaCheckbox"],"mappings":"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","file":"checkbox.js","sourcesContent":["import { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n    extend: {\n        theme: {\n            text: [\"display-xs\", \"display-sm\", \"display-md\", \"display-lg\", \"display-xl\", \"display-2xl\"],\n        },\n    },\n});\n\n/**\n * This function is a wrapper around the twMerge function.\n * It is used to merge the classes inside style objects.\n */\nexport const cx = twMerge;\n\n/**\n * This function does nothing besides helping us to be able to\n * sort the classes inside style objects which is not supported\n * by the Tailwind IntelliSense by default.\n */\nexport function sortCx<T extends Record<string, string | number | Record<string, string | number | Record<string, string | number>>>>(classes: T): T {\n    return classes;\n}\n","\"use client\";\n\nimport { useLayoutEffect, useRef, type ReactNode, type Ref } from \"react\";\nimport { Checkbox as AriaCheckbox, type CheckboxProps as AriaCheckboxProps } from \"react-aria-components\";\nimport { cx } from \"@/utils/cx\";\n\nconst CHECKBOX_TICK_DELAY_MS = 60;\nconst CHECKBOX_TICK_DRAW_MS = 100;\n\n/** Draw-on-check tick animation — remounts when checked so it replays each time. */\nfunction CheckboxAnimatedCheckMark({ className }: { className?: string }) {\n    const pathRef = useRef<SVGPathElement>(null);\n\n    useLayoutEffect(() => {\n        const path = pathRef.current;\n        if (!path || typeof path.getTotalLength !== \"function\") return;\n        const len = path.getTotalLength();\n        if (len <= 0) return;\n\n        path.style.strokeDasharray = `${len}`;\n        path.style.strokeDashoffset = `${len}`;\n\n        if (typeof path.animate !== \"function\") {\n            path.style.strokeDashoffset = \"0\";\n            return;\n        }\n\n        const anim = path.animate([{ strokeDashoffset: len }, { strokeDashoffset: 0 }], {\n            duration: CHECKBOX_TICK_DRAW_MS,\n            delay: CHECKBOX_TICK_DELAY_MS,\n            easing: \"cubic-bezier(0.45, 0, 0.2, 1)\",\n            fill: \"forwards\",\n        });\n        return () => anim.cancel();\n    }, []);\n\n    return (\n        <svg aria-hidden=\"true\" viewBox=\"0 0 14 14\" fill=\"none\" className={cx(\"block shrink-0\", className)}>\n            <path\n                ref={pathRef}\n                d=\"M2.33325 7L5.24992 9.91667L11.6666 3.5\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n            />\n        </svg>\n    );\n}\n\n/** Figma Focus rings/focus-ring — 2px surface gap + 4px brand ring (matches Button). */\nconst focusRingShadow =\n    \"outline-none [box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]\";\n\nexport interface CheckboxBaseProps {\n    size?: \"sm\" | \"md\";\n    className?: string;\n    isFocusVisible?: boolean;\n    isSelected?: boolean;\n    isDisabled?: boolean;\n    isIndeterminate?: boolean;\n}\n\nexport const CheckboxBase = ({ className, isSelected, isDisabled, isIndeterminate, size = \"sm\", isFocusVisible = false }: CheckboxBaseProps) => {\n    const isChecked = isSelected || isIndeterminate;\n    const iconClassName = size === \"sm\" ? \"size-2.5\" : \"size-3.5\";\n\n    return (\n        <div\n            className={cx(\n                \"relative flex shrink-0 cursor-pointer appearance-none items-center justify-center border border-solid border-primary\",\n                size === \"sm\" ? \"size-4 rounded-xs\" : \"size-5 rounded-sm\",\n                isChecked ? \"border-transparent bg-brand-solid\" : \"bg-primary\",\n                isDisabled && \"cursor-not-allowed opacity-50\",\n                isDisabled && !isChecked && \"bg-tertiary\",\n                isFocusVisible && !isDisabled && focusRingShadow,\n                className,\n            )}\n        >\n            {isIndeterminate && (\n                <svg\n                    aria-hidden=\"true\"\n                    viewBox=\"0 0 14 14\"\n                    fill=\"none\"\n                    className={cx(\"pointer-events-none block shrink-0 text-fg-white\", iconClassName)}\n                >\n                    <path d=\"M2.91675 7H11.0834\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n                </svg>\n            )}\n\n            {isSelected && !isIndeterminate && (\n                <CheckboxAnimatedCheckMark className={cx(\"pointer-events-none text-fg-white\", iconClassName)} />\n            )}\n        </div>\n    );\n};\nCheckboxBase.displayName = \"CheckboxBase\";\n\ninterface CheckboxProps extends AriaCheckboxProps {\n    ref?: Ref<HTMLLabelElement>;\n    size?: \"sm\" | \"md\";\n    label?: ReactNode;\n    hint?: ReactNode;\n}\n\nexport const Checkbox = ({ label, hint, size = \"sm\", className, ...ariaCheckboxProps }: CheckboxProps) => {\n    const sizes = {\n        sm: {\n            root: \"gap-2\",\n            textWrapper: \"\",\n            label: \"text-sm font-medium\",\n            hint: \"text-sm\",\n        },\n        md: {\n            root: \"gap-3\",\n            textWrapper: \"gap-0.5 break-words\",\n            label: \"text-md font-medium\",\n            hint: \"text-md\",\n        },\n    };\n\n    return (\n        <AriaCheckbox\n            {...ariaCheckboxProps}\n            className={(state) =>\n                cx(\n                    \"relative flex items-start\",\n                    state.isDisabled && \"cursor-not-allowed\",\n                    sizes[size].root,\n                    typeof className === \"function\" ? className(state) : className,\n                )\n            }\n        >\n            {({ isSelected, isIndeterminate, isDisabled, isFocusVisible }) => (\n                <>\n                    <CheckboxBase\n                        size={size}\n                        isSelected={isSelected}\n                        isIndeterminate={isIndeterminate}\n                        isDisabled={isDisabled}\n                        isFocusVisible={isFocusVisible}\n                        className={label || hint ? \"mt-0.5\" : \"\"}\n                    />\n                    {(label || hint) && (\n                        <div className={cx(\"inline-flex flex-col\", sizes[size].textWrapper)}>\n                            {label && <p className={cx(\"text-secondary select-none\", sizes[size].label)}>{label}</p>}\n                            {hint && (\n                                <span className={cx(\"text-tertiary\", sizes[size].hint)} onClick={(event) => event.stopPropagation()}>\n                                    {hint}\n                                </span>\n                            )}\n                        </div>\n                    )}\n                </>\n            )}\n        </AriaCheckbox>\n    );\n};\nCheckbox.displayName = \"Checkbox\";\n"]}
+{"version":3,"sources":["../../../../utils/cx.ts","../../../../components/base/checkbox/checkbox.tsx"],"names":["AriaCheckbox"],"mappings":"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","file":"checkbox.js","sourcesContent":["import { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n    extend: {\n        theme: {\n            text: [\"display-xs\", \"display-sm\", \"display-md\", \"display-lg\", \"display-xl\", \"display-2xl\"],\n        },\n    },\n});\n\n/**\n * This function is a wrapper around the twMerge function.\n * It is used to merge the classes inside style objects.\n */\nexport const cx = twMerge;\n\n/**\n * This function does nothing besides helping us to be able to\n * sort the classes inside style objects which is not supported\n * by the Tailwind IntelliSense by default.\n */\nexport function sortCx<T extends Record<string, string | number | Record<string, string | number | Record<string, string | number>>>>(classes: T): T {\n    return classes;\n}\n","\"use client\";\n\nimport { useLayoutEffect, useRef, type ReactNode, type Ref } from \"react\";\nimport { Checkbox as AriaCheckbox, type CheckboxProps as AriaCheckboxProps } from \"react-aria-components\";\nimport { cx } from \"@/utils/cx\";\n\nconst CHECKBOX_TICK_DELAY_MS = 60;\nconst CHECKBOX_TICK_DRAW_MS = 100;\n\n/** Draw-on-check tick animation — remounts when checked so it replays each time. */\nfunction CheckboxAnimatedCheckMark({ pixelSize, className }: { pixelSize: number; className?: string }) {\n    const pathRef = useRef<SVGPathElement>(null);\n\n    useLayoutEffect(() => {\n        const path = pathRef.current;\n        if (!path || typeof path.getTotalLength !== \"function\") return;\n        const len = path.getTotalLength();\n        if (len <= 0) return;\n\n        path.style.strokeDasharray = `${len}`;\n        path.style.strokeDashoffset = `${len}`;\n\n        if (typeof path.animate !== \"function\") {\n            path.style.strokeDashoffset = \"0\";\n            return;\n        }\n\n        const anim = path.animate([{ strokeDashoffset: len }, { strokeDashoffset: 0 }], {\n            duration: CHECKBOX_TICK_DRAW_MS,\n            delay: CHECKBOX_TICK_DELAY_MS,\n            easing: \"cubic-bezier(0.45, 0, 0.2, 1)\",\n            fill: \"forwards\",\n        });\n        return () => anim.cancel();\n    }, []);\n\n    return (\n        <svg aria-hidden=\"true\" width={pixelSize} height={pixelSize} viewBox=\"0 0 14 14\" fill=\"none\" className={cx(\"block\", className)}>\n            <path\n                ref={pathRef}\n                d=\"M2.33325 7L5.24992 9.91667L11.6666 3.5\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n            />\n        </svg>\n    );\n}\n\n/** Figma Focus rings/focus-ring — 2px surface gap + 4px brand ring (matches Button). */\nconst focusRingShadow =\n    \"outline-none [box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]\";\n\nexport interface CheckboxBaseProps {\n    size?: \"sm\" | \"md\";\n    className?: string;\n    isFocusVisible?: boolean;\n    isSelected?: boolean;\n    isDisabled?: boolean;\n    isIndeterminate?: boolean;\n}\n\nexport const CheckboxBase = ({ className, isSelected, isDisabled, isIndeterminate, size = \"sm\", isFocusVisible = false }: CheckboxBaseProps) => {\n    const isChecked = isSelected || isIndeterminate;\n    const iconPixelSize = size === \"sm\" ? 10 : 14;\n\n    return (\n        <div\n            className={cx(\n                \"relative flex shrink-0 cursor-pointer appearance-none items-center justify-center overflow-clip border border-solid border-primary\",\n                size === \"sm\" ? \"size-4 rounded-xs\" : \"size-5 rounded-sm\",\n                isChecked ? \"border-transparent bg-brand-solid\" : \"bg-primary\",\n                !isChecked && !isDisabled && \"group-hover:bg-primary_hover\",\n                isDisabled && \"cursor-not-allowed opacity-50\",\n                isDisabled && !isChecked && \"bg-tertiary\",\n                isFocusVisible && !isDisabled && focusRingShadow,\n                className,\n            )}\n        >\n            {isIndeterminate && (\n                <svg\n                    aria-hidden=\"true\"\n                    width={iconPixelSize}\n                    height={iconPixelSize}\n                    viewBox=\"0 0 14 14\"\n                    fill=\"none\"\n                    className=\"pointer-events-none block text-fg-white\"\n                >\n                    <path d=\"M2.91675 7H11.0834\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n                </svg>\n            )}\n\n            {isSelected && !isIndeterminate && (\n                <CheckboxAnimatedCheckMark pixelSize={iconPixelSize} className=\"pointer-events-none text-fg-white\" />\n            )}\n        </div>\n    );\n};\nCheckboxBase.displayName = \"CheckboxBase\";\n\ninterface CheckboxProps extends AriaCheckboxProps {\n    ref?: Ref<HTMLLabelElement>;\n    size?: \"sm\" | \"md\";\n    label?: ReactNode;\n    hint?: ReactNode;\n}\n\nexport const Checkbox = ({ label, hint, size = \"sm\", className, ...ariaCheckboxProps }: CheckboxProps) => {\n    const sizes = {\n        sm: {\n            root: \"gap-2\",\n            textWrapper: \"\",\n            label: \"text-sm font-medium\",\n            hint: \"text-sm\",\n        },\n        md: {\n            root: \"gap-3\",\n            textWrapper: \"gap-0.5 break-words\",\n            label: \"text-md font-medium\",\n            hint: \"text-md\",\n        },\n    };\n\n    return (\n        <AriaCheckbox\n            {...ariaCheckboxProps}\n            className={(state) =>\n                cx(\n                    \"group relative flex items-start\",\n                    state.isDisabled && \"cursor-not-allowed\",\n                    sizes[size].root,\n                    typeof className === \"function\" ? className(state) : className,\n                )\n            }\n        >\n            {({ isSelected, isIndeterminate, isDisabled, isFocusVisible }) => (\n                <>\n                    <CheckboxBase\n                        size={size}\n                        isSelected={isSelected}\n                        isIndeterminate={isIndeterminate}\n                        isDisabled={isDisabled}\n                        isFocusVisible={isFocusVisible}\n                        className={label || hint ? \"mt-0.5\" : \"\"}\n                    />\n                    {(label || hint) && (\n                        <div className={cx(\"inline-flex flex-col\", sizes[size].textWrapper)}>\n                            {label && <p className={cx(\"text-secondary select-none\", sizes[size].label)}>{label}</p>}\n                            {hint && (\n                                <span className={cx(\"text-tertiary\", sizes[size].hint)} onClick={(event) => event.stopPropagation()}>\n                                    {hint}\n                                </span>\n                            )}\n                        </div>\n                    )}\n                </>\n            )}\n        </AriaCheckbox>\n    );\n};\nCheckbox.displayName = \"Checkbox\";\n"]}

package/dist/react/combobox.d.ts

@@ -1,7 +1,8 @@
 import * as react from 'react';
 import { RefAttributes, FC, ReactNode } from 'react';
 import { ComboBoxProps as ComboBoxProps$1, ListBoxProps } from 'react-aria-components';
-import { S as SelectItemType, C as CommonProps } from '../select-shared-B3Y5SMXU.js';
+import { S as SelectItemType, C as CommonProps } from '../select-shared-oJEeJxeB.js';
+import '../select-mobile-sheet-CB2ptDTJ.js';
 
 interface ComboBoxProps extends Omit<ComboBoxProps$1<SelectItemType>, "children" | "items">, RefAttributes<HTMLDivElement>, CommonProps {
     shortcut?: boolean;
@@ -12,6 +13,6 @@ interface ComboBoxProps extends Omit<ComboBoxProps$1<SelectItemType>, "children"
     icon?: FC | ReactNode;
     children: ListBoxProps<SelectItemType>["children"];
 }
-declare const ComboBox: ({ placeholder, shortcut, size, children, items, shortcutClassName, icon, hideRequiredIndicator, ...otherProps }: ComboBoxProps) => react.JSX.Element;
+declare const ComboBox: ({ placeholder, shortcut, size, children, items, shortcutClassName, icon, hideRequiredIndicator, mobileOptions, ...otherProps }: ComboBoxProps) => react.JSX.Element;
 
 export { ComboBox };

package/dist/react/combobox.js

@@ -1,9 +1,11 @@
-import { createContext, useRef, useState, useCallback, useEffect, useContext, isValidElement } from 'react';
+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, Group, Input, Popover as Popover$1, Text, TooltipTrigger as TooltipTrigger$1, Tooltip as Tooltip$1, OverlayArrow, Button } from 'react-aria-components';
+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 } from 'react/jsx-runtime';
+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';
@@ -131,25 +133,199 @@ var Label = ({ isInvalid, isRequired, tooltip, tooltipDescription, className, ..
   );
 };
 Label.displayName = "Label";
-var Popover = (props) => {
-  return /* @__PURE__ */ jsx(
-    Popover$1,
+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",
     {
-      placement: "bottom",
-      containerPadding: 0,
-      offset: 4,
-      ...props,
-      className: (state) => cx(
-        "w-(--trigger-width) origin-(--trigger-anchor-point) overflow-x-hidden overflow-y-auto rounded-lg bg-primary py-1 shadow-lg ring-1 ring-secondary_alt outline-hidden 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",
-        props.size === "sm" && "max-h-56!",
-        props.size === "md" && "max-h-64!",
-        props.size === "lg" && "max-h-80!",
-        typeof props.className === "function" ? props.className(state) : props.className
-      )
+      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: {
@@ -162,6 +338,11 @@ var sizes = {
   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";
@@ -211,6 +392,47 @@ var isForwardRefComponent = (component) => {
 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;
@@ -223,12 +445,14 @@ var ComboBoxValue = ({ size, shortcut, placeholder, shortcutClassName, icon: Ico
       ref,
       ...otherProps,
       isInvalid,
-      className: ({ isFocusWithin, isDisabled, isInvalid: isGroupInvalid }) => cx(
+      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 && isFocusWithin && inputFocusRingShadow,
-        isGroupInvalid && !isFocusWithin && "border-error_subtle",
-        isGroupInvalid && isFocusWithin && inputErrorFocusRingShadow,
+        !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
@@ -282,26 +506,40 @@ var ComboBox = ({
   shortcutClassName,
   icon,
   hideRequiredIndicator,
+  mobileOptions,
   ...otherProps
 }) => {
-  const placeholderRef = useRef(null);
+  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 (!placeholderRef.current) return;
-    const divRect = placeholderRef.current?.getBoundingClientRect();
+    if (!triggerRef.current) return;
+    const divRect = triggerRef.current.getBoundingClientRect();
     setPopoverWidth(divRect.width + "px");
-  }, [placeholderRef, setPopoverWidth]);
+  }, []);
   useResizeObserver({
-    ref: placeholderRef,
+    ref: triggerRef,
     box: "border-box",
     onResize
   });
-  return /* @__PURE__ */ jsx(SelectContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx(ComboBox$1, { menuTrigger: "focus", ...otherProps, children: (state) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+  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 }),
-    /* @__PURE__ */ jsx(
+    useMobileSheet ? /* @__PURE__ */ jsx(
+      ComboBoxMobileTrigger,
+      {
+        ref: triggerRef,
+        placeholder,
+        icon,
+        size,
+        isInvalid: state.isInvalid,
+        onPointerEnter: onResize
+      }
+    ) : /* @__PURE__ */ jsx(
       ComboBoxValue,
       {
-        ref: placeholderRef,
+        ref: triggerRef,
         placeholder,
         shortcut,
         shortcutClassName,
@@ -312,7 +550,21 @@ var ComboBox = ({
         onPointerEnter: onResize
       }
     ),
-    /* @__PURE__ */ jsx(Popover, { size, triggerRef: placeholderRef, style: { width: popoverWidth }, className: otherProps.popoverClassName, children: /* @__PURE__ */ jsx(ListBox, { items, className: "size-full outline-hidden", children }) }),
+    /* @__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 })
   ] }) }) });
 };