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

package/dist/react/popover.d.ts

@@ -1,10 +1,19 @@
 import * as react from 'react';
 import { RefAttributes } from 'react';
 import { PopoverProps as PopoverProps$1 } from 'react-aria-components';
+import { S as SelectMobileOptions } from '../select-mobile-sheet-CB2ptDTJ.js';
 
 interface PopoverProps extends PopoverProps$1, RefAttributes<HTMLElement> {
     size: "sm" | "md" | "lg";
+    /** Narrow-viewport (≤1024px) bottom-sheet options. */
+    mobileOptions?: SelectMobileOptions;
+    /**
+     * When `true`, the popover shell does not scroll and has no max-height;
+     * inner content manages its own regions (e.g. multi-select search + list + footer).
+     * @default false
+     */
+    compoundContent?: boolean;
 }
-declare const Popover: (props: PopoverProps) => react.JSX.Element;
+declare const Popover: ({ mobileOptions, children, size, className, style, compoundContent, ...props }: PopoverProps) => react.JSX.Element;
 
 export { Popover };

package/dist/react/popover.js

@@ -1,7 +1,85 @@
-import { Popover as Popover$1 } from 'react-aria-components';
+import { useMemo, useContext, useEffect, useState, useLayoutEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { XIcon } from '@phosphor-icons/react/dist/csr/X';
+import { OverlayTriggerStateContext, Popover as Popover$1 } from 'react-aria-components';
 import { extendTailwindMerge } from 'tailwind-merge';
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
+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 };
+}
 var twMerge = extendTailwindMerge({
   extend: {
     theme: {
@@ -10,25 +88,124 @@ var twMerge = extendTailwindMerge({
   }
 });
 var cx = twMerge;
-var Popover = (props) => {
-  return /* @__PURE__ */ jsx(
-    Popover$1,
+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;
+        }
+      }
+    )
+  ] });
 };
 
 export { Popover };

package/dist/react/popover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../utils/cx.ts","../../../../components/base/select/popover.tsx"],"names":["AriaPopover"],"mappings":";;;;AAEA,IAAM,UAAU,mBAAA,CAAoB;AAAA,EAChC,MAAA,EAAQ;AAAA,IACJ,KAAA,EAAO;AAAA,MACH,MAAM,CAAC,YAAA,EAAc,cAAc,YAAA,EAAc,YAAA,EAAc,cAAc,aAAa;AAAA;AAC9F;AAER,CAAC,CAAA;AAMM,IAAM,EAAA,GAAK,OAAA;ACDX,IAAM,OAAA,GAAU,CAAC,KAAA,KAAwB;AAC5C,EAAA,uBACI,GAAA;AAAA,IAACA,SAAA;AAAA,IAAA;AAAA,MACG,SAAA,EAAU,QAAA;AAAA,MACV,gBAAA,EAAkB,CAAA;AAAA,MAClB,MAAA,EAAQ,CAAA;AAAA,MACP,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,CAAC,KAAA,KACR,EAAA;AAAA,QACI,2LAAA;AAAA,QAEA,MAAM,UAAA,IACF,+JAAA;AAAA,QACJ,MAAM,SAAA,IACF,6JAAA;AAAA,QAEJ,KAAA,CAAM,SAAS,IAAA,IAAQ,WAAA;AAAA,QACvB,KAAA,CAAM,SAAS,IAAA,IAAQ,WAAA;AAAA,QACvB,KAAA,CAAM,SAAS,IAAA,IAAQ,WAAA;AAAA,QAEvB,OAAO,MAAM,SAAA,KAAc,UAAA,GAAa,MAAM,SAAA,CAAU,KAAK,IAAI,KAAA,CAAM;AAAA;AAC3E;AAAA,GAER;AAER","file":"popover.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\n/** Figma: Select menu popover (11132:11643) — floating menu border + shadow. */\n\nimport type { RefAttributes } from \"react\";\nimport type { PopoverProps as AriaPopoverProps } from \"react-aria-components\";\nimport { Popover as AriaPopover } from \"react-aria-components\";\nimport { cx } from \"@/utils/cx\";\n\ninterface PopoverProps extends AriaPopoverProps, RefAttributes<HTMLElement> {\n    size: \"sm\" | \"md\" | \"lg\";\n}\n\nexport const Popover = (props: PopoverProps) => {\n    return (\n        <AriaPopover\n            placement=\"bottom\"\n            containerPadding={0}\n            offset={4}\n            {...props}\n            className={(state) =>\n                cx(\n                    \"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\",\n\n                    state.isEntering &&\n                        \"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\",\n                    state.isExiting &&\n                        \"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\",\n\n                    props.size === \"sm\" && \"max-h-56!\",\n                    props.size === \"md\" && \"max-h-64!\",\n                    props.size === \"lg\" && \"max-h-80!\",\n\n                    typeof props.className === \"function\" ? props.className(state) : props.className,\n                )\n            }\n        />\n    );\n};\n"]}
+{"version":3,"sources":["../../../../hooks/use-is-mobile.ts","../../../../components/base/select/select-mobile-sheet.ts","../../../../utils/cx.ts","../../../../components/base/select/popover.tsx"],"names":["useState","useEffect","X","AriaPopover"],"mappings":"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","file":"popover.js","sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\n/** Viewport width at or below which mobile sheet behavior applies (matches Avenue dropdown/select). */\nexport const MOBILE_SHEET_MAX_PX = 1024;\n\n/**\n * Returns true when the viewport is at most {@link MOBILE_SHEET_MAX_PX} wide.\n * Initial value is read synchronously on mount so the first paint matches mobile layout.\n */\nexport function useIsMobile(breakpoint = MOBILE_SHEET_MAX_PX + 1): boolean {\n    const [isMobile, setIsMobile] = useState(() => {\n        if (typeof window === \"undefined\") return false;\n        return window.matchMedia(`(max-width: ${breakpoint - 1}px)`).matches;\n    });\n\n    useEffect(() => {\n        const mq = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);\n        const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches);\n        mq.addEventListener(\"change\", handler);\n        return () => mq.removeEventListener(\"change\", handler);\n    }, [breakpoint]);\n\n    return isMobile;\n}\n","\"use client\";\n\nimport { useEffect, useLayoutEffect, useState, type CSSProperties } from \"react\";\n\n/** Matches Avenue dropdown/select mobile sheet motion. */\nexport const MOBILE_SHEET_MOTION_MS = 175;\nexport const MOBILE_SHEET_ENTRY_EASING = \"cubic-bezier(0.85, 0, 0.15, 1)\";\nexport const MOBILE_SHEET_EXIT_EASING = \"cubic-bezier(0.85, 0, 1, 0.15)\";\nexport const MOBILE_SHEET_SLIDE_ENTRANCE_OFFSET_PX = 120;\n\nexport interface SelectMobileOptions {\n    /** When `false`, keep the floating menu on narrow viewports. Default `true`. */\n    sheet?: boolean;\n    /** Optional header title on the same row as the close control. */\n    title?: string;\n    /** Extra classes on the sheet panel (merged after base sheet styles). */\n    className?: string;\n    /** Extra classes on the scrollable body below the header. */\n    contentClassName?: string;\n}\n\nexport function resolveSelectMobileOptions(mobileOptions?: SelectMobileOptions) {\n    return {\n        sheet: mobileOptions?.sheet ?? true,\n        title: mobileOptions?.title,\n        sheetClassName: mobileOptions?.className,\n        contentClassName: mobileOptions?.contentClassName,\n    };\n}\n\nexport function useMobileSheetAnimation(\n    open: boolean,\n    enabled: boolean,\n    slideEntrance = true,\n    slideOffsetPx = MOBILE_SHEET_SLIDE_ENTRANCE_OFFSET_PX,\n) {\n    const [shouldRender, setShouldRender] = useState(open);\n    const [isAnimating, setIsAnimating] = useState(false);\n\n    useLayoutEffect(() => {\n        if (!enabled) {\n            setShouldRender(open);\n            return;\n        }\n\n        if (open) {\n            setShouldRender(true);\n        }\n    }, [open, enabled]);\n\n    useEffect(() => {\n        if (!enabled || open) return;\n\n        const timer = setTimeout(() => setShouldRender(false), MOBILE_SHEET_MOTION_MS);\n        return () => clearTimeout(timer);\n    }, [open, enabled]);\n\n    useLayoutEffect(() => {\n        if (!enabled || open || !shouldRender) return;\n        setIsAnimating(false);\n    }, [enabled, open, shouldRender]);\n\n    useEffect(() => {\n        if (!enabled || !shouldRender || !open) return;\n\n        let raf2 = 0;\n        const raf1 = requestAnimationFrame(() => {\n            raf2 = requestAnimationFrame(() => setIsAnimating(true));\n        });\n\n        return () => {\n            cancelAnimationFrame(raf1);\n            if (raf2) cancelAnimationFrame(raf2);\n        };\n    }, [shouldRender, open, enabled]);\n\n    const motionEasing = open ? MOBILE_SHEET_ENTRY_EASING : MOBILE_SHEET_EXIT_EASING;\n    const hiddenTransform = slideEntrance ? `translateY(${slideOffsetPx}px)` : \"translateY(100%)\";\n\n    const panelStyle: CSSProperties | undefined = enabled\n        ? {\n              transform: isAnimating ? \"translateY(0)\" : hiddenTransform,\n              opacity: isAnimating ? 1 : 0,\n              transitionProperty: \"transform, opacity\",\n              transitionDuration: `${MOBILE_SHEET_MOTION_MS}ms`,\n              transitionTimingFunction: motionEasing,\n          }\n        : undefined;\n\n    const backdropStyle: CSSProperties | undefined = enabled\n        ? {\n              opacity: isAnimating ? 1 : 0,\n              transitionProperty: \"opacity\",\n              transitionDuration: `${MOBILE_SHEET_MOTION_MS}ms`,\n              transitionTimingFunction: motionEasing,\n          }\n        : undefined;\n\n    return { shouldRender, isAnimating, panelStyle, backdropStyle };\n}\n","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\n/** Figma: Select menu popover (11132:11643) — desktop floating menu; mobile bottom sheet (≤1024px). */\n\nimport { useContext, useEffect, useMemo, type ReactNode, type RefAttributes } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { XIcon as X } from \"@phosphor-icons/react/dist/csr/X\";\nimport type { PopoverProps as AriaPopoverProps } from \"react-aria-components\";\nimport { OverlayTriggerStateContext, Popover as AriaPopover } from \"react-aria-components\";\nimport { useIsMobile } from \"@/hooks/use-is-mobile\";\nimport {\n    resolveSelectMobileOptions,\n    useMobileSheetAnimation,\n    type SelectMobileOptions,\n} from \"@/components/base/select/select-mobile-sheet\";\nimport { cx } from \"@/utils/cx\";\n\ninterface PopoverProps extends AriaPopoverProps, RefAttributes<HTMLElement> {\n    size: \"sm\" | \"md\" | \"lg\";\n    /** Narrow-viewport (≤1024px) bottom-sheet options. */\n    mobileOptions?: SelectMobileOptions;\n    /**\n     * When `true`, the popover shell does not scroll and has no max-height;\n     * inner content manages its own regions (e.g. multi-select search + list + footer).\n     * @default false\n     */\n    compoundContent?: boolean;\n}\n\nfunction MobileSheetCloseButton({ onClose }: { onClose: () => void }) {\n    return (\n        <button\n            type=\"button\"\n            onClick={(e) => {\n                e.stopPropagation();\n                onClose();\n            }}\n            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)]\"\n        >\n            <X className=\"size-5\" aria-hidden=\"true\" />\n            <span className=\"sr-only\">Close</span>\n        </button>\n    );\n}\n\nfunction MobileSheetChrome({\n    title,\n    contentClassName,\n    onClose,\n    children,\n}: {\n    title?: string;\n    contentClassName?: string;\n    onClose: () => void;\n    children: ReactNode;\n}) {\n    return (\n        <>\n            <div className={cx(\"flex w-full shrink-0 items-center py-2 pl-4 pr-2\", title ? \"justify-between gap-3\" : \"justify-end\")}>\n                {title ? <p className=\"min-w-0 flex-1 truncate text-base font-semibold text-primary\">{title}</p> : null}\n                <MobileSheetCloseButton onClose={onClose} />\n            </div>\n            <div\n                className={cx(\n                    \"min-h-0 flex-1 overflow-y-auto pb-[calc(5rem+env(safe-area-inset-bottom,0px))]\",\n                    contentClassName,\n                )}\n            >\n                {children}\n            </div>\n        </>\n    );\n}\n\nexport const Popover = ({ mobileOptions, children, size, className, style, compoundContent = false, ...props }: PopoverProps) => {\n    const isMobile = useIsMobile();\n    const resolvedMobile = useMemo(() => resolveSelectMobileOptions(mobileOptions), [mobileOptions]);\n    const useMobileSheet = isMobile && resolvedMobile.sheet;\n    const overlayState = useContext(OverlayTriggerStateContext);\n    const open = overlayState?.isOpen ?? false;\n    const { shouldRender, panelStyle, backdropStyle } = useMobileSheetAnimation(open, useMobileSheet);\n\n    useEffect(() => {\n        if (!useMobileSheet || !open) return;\n\n        const prev = document.body.style.overflow;\n        document.body.style.overflow = \"hidden\";\n        return () => {\n            document.body.style.overflow = prev;\n        };\n    }, [useMobileSheet, open]);\n\n    const close = () => overlayState?.close();\n    const showMobileSheet = useMobileSheet && shouldRender;\n    const isMobileSheetExiting = showMobileSheet && !open;\n\n    const mobileScrim =\n        useMobileSheet && shouldRender && typeof document !== \"undefined\"\n            ? createPortal(\n                  <div\n                      className=\"fixed inset-0 z-50 bg-overlay/70\"\n                      style={backdropStyle}\n                      onClick={close}\n                      aria-hidden=\"true\"\n                  />,\n                  document.body,\n              )\n            : null;\n\n    return (\n        <>\n            {mobileScrim}\n            <AriaPopover\n                placement=\"bottom\"\n                containerPadding={0}\n                offset={4}\n                {...props}\n                isExiting={isMobileSheetExiting}\n                {...(useMobileSheet ? { \"data-select-mobile-sheet\": true } : {})}\n                style={useMobileSheet ? { ...panelStyle, ...style } : style}\n                className={(state) =>\n                    cx(\n                        \"outline-hidden\",\n                        !useMobileSheet && [\n                            \"w-(--trigger-width) origin-(--trigger-anchor-point) rounded-lg bg-primary shadow-lg ring-1 ring-secondary_alt will-change-transform\",\n                            compoundContent\n                                ? \"overflow-hidden outline-hidden\"\n                                : \"overflow-x-hidden overflow-y-auto py-1 outline-hidden\",\n                            state.isEntering &&\n                                \"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\",\n                            state.isExiting &&\n                                \"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\",\n                            !compoundContent && size === \"sm\" && \"max-h-56!\",\n                            !compoundContent && size === \"md\" && \"max-h-64!\",\n                            !compoundContent && size === \"lg\" && \"max-h-80!\",\n                        ],\n                        useMobileSheet && [\n                            \"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\",\n                            \"max-h-[min(90dvh,calc(100dvh-env(safe-area-inset-bottom,0px)))]\",\n                            resolvedMobile.sheetClassName,\n                        ],\n                        typeof className === \"function\" ? className(state) : className,\n                    )\n                }\n            >\n                {(state) => {\n                    const content = typeof children === \"function\" ? children(state) : children;\n\n                    if (useMobileSheet) {\n                        return (\n                            <MobileSheetChrome\n                                title={resolvedMobile.title}\n                                contentClassName={resolvedMobile.contentClassName}\n                                onClose={close}\n                            >\n                                {content}\n                            </MobileSheetChrome>\n                        );\n                    }\n\n                    return content;\n                }}\n            </AriaPopover>\n        </>\n    );\n};\n"]}

package/dist/react/radio-buttons.js

@@ -50,6 +50,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 && focusRingShadow,
@@ -82,7 +83,7 @@ var RadioButton = ({ label, hint, className, size = "sm", ...ariaRadioProps }) =
     {
       ...ariaRadioProps,
       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/radio-buttons.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../utils/cx.ts","../../../../components/base/radio-buttons/radio-buttons.tsx"],"names":["AriaRadio","AriaRadioGroup"],"mappings":"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","file":"radio-buttons.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, createContext, useContext } from \"react\";\nimport {\n    Radio as AriaRadio,\n    RadioGroup as AriaRadioGroup,\n    type RadioGroupProps as AriaRadioGroupProps,\n    type RadioProps as AriaRadioProps,\n} from \"react-aria-components\";\nimport { cx } from \"@/utils/cx\";\n\nconst RADIO_DOT_DELAY_MS = 60;\nconst RADIO_DOT_POP_MS = 100;\n\n/** Pop-in dot animation — remounts when selected so it replays each time (matches Checkbox tick timing). */\nfunction RadioAnimatedDot({ className }: { className?: string }) {\n    const dotRef = useRef<HTMLDivElement>(null);\n\n    useLayoutEffect(() => {\n        const dot = dotRef.current;\n        if (!dot) return;\n\n        if (typeof dot.animate !== \"function\") {\n            dot.style.opacity = \"1\";\n            dot.style.transform = \"scale(1)\";\n            return;\n        }\n\n        const anim = dot.animate(\n            [\n                { opacity: 0, transform: \"scale(0)\" },\n                { opacity: 1, transform: \"scale(1)\" },\n            ],\n            {\n                duration: RADIO_DOT_POP_MS,\n                delay: RADIO_DOT_DELAY_MS,\n                easing: \"cubic-bezier(0.45, 0, 0.2, 1)\",\n                fill: \"forwards\",\n            },\n        );\n        return () => anim.cancel();\n    }, []);\n\n    return <div ref={dotRef} aria-hidden=\"true\" className={cx(\"rounded-full bg-fg-white\", className)} style={{ opacity: 0, transform: \"scale(0)\" }} />;\n}\n\n/** Figma: _Radio button base (1097:63638) — spread focus ring (2px surface gap + 4px focus-ring). */\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 RadioGroupContextType {\n    size?: \"sm\" | \"md\";\n}\n\nconst RadioGroupContext = createContext<RadioGroupContextType | null>(null);\n\nexport interface RadioButtonBaseProps {\n    size?: \"sm\" | \"md\";\n    className?: string;\n    isFocusVisible?: boolean;\n    isSelected?: boolean;\n    isDisabled?: boolean;\n}\n\nexport const RadioButtonBase = ({ className, isFocusVisible, isSelected, isDisabled, size = \"sm\" }: RadioButtonBaseProps) => {\n    const dotClassName = size === \"sm\" ? \"size-1.5\" : \"size-2\";\n\n    return (\n        <div\n            className={cx(\n                \"relative flex shrink-0 cursor-pointer appearance-none items-center justify-center overflow-clip rounded-full border border-solid border-primary bg-primary\",\n                size === \"sm\" ? \"size-4\" : \"size-5\",\n                isSelected && \"border-transparent bg-brand-solid\",\n                isDisabled && \"cursor-not-allowed opacity-50\",\n                isDisabled && !isSelected && \"bg-tertiary\",\n                isFocusVisible && !isDisabled && focusRingShadow,\n                className,\n            )}\n        >\n            {isSelected && <RadioAnimatedDot className={cx(\"pointer-events-none\", dotClassName)} />}\n        </div>\n    );\n};\nRadioButtonBase.displayName = \"RadioButtonBase\";\n\ninterface RadioButtonProps extends AriaRadioProps {\n    size?: \"sm\" | \"md\";\n    label?: ReactNode;\n    hint?: ReactNode;\n    ref?: Ref<HTMLLabelElement>;\n}\n\nexport const RadioButton = ({ label, hint, className, size = \"sm\", ...ariaRadioProps }: RadioButtonProps) => {\n    const context = useContext(RadioGroupContext);\n\n    size = context?.size ?? size;\n\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\",\n            label: \"text-md font-medium\",\n            hint: \"text-md\",\n        },\n    };\n\n    return (\n        <AriaRadio\n            {...ariaRadioProps}\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, isDisabled, isFocusVisible }) => (\n                <>\n                    <RadioButtonBase\n                        size={size}\n                        isSelected={isSelected}\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        </AriaRadio>\n    );\n};\nRadioButton.displayName = \"RadioButton\";\n\ninterface RadioGroupProps extends RadioGroupContextType, AriaRadioGroupProps {\n    children: ReactNode;\n    className?: string;\n}\n\nexport const RadioGroup = ({ children, className, size = \"sm\", ...props }: RadioGroupProps) => {\n    return (\n        <RadioGroupContext.Provider value={{ size }}>\n            <AriaRadioGroup {...props} className={cx(\"flex flex-col gap-4\", className)}>\n                {children}\n            </AriaRadioGroup>\n        </RadioGroupContext.Provider>\n    );\n};\n"]}
+{"version":3,"sources":["../../../../utils/cx.ts","../../../../components/base/radio-buttons/radio-buttons.tsx"],"names":["AriaRadio","AriaRadioGroup"],"mappings":"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","file":"radio-buttons.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, createContext, useContext } from \"react\";\nimport {\n    Radio as AriaRadio,\n    RadioGroup as AriaRadioGroup,\n    type RadioGroupProps as AriaRadioGroupProps,\n    type RadioProps as AriaRadioProps,\n} from \"react-aria-components\";\nimport { cx } from \"@/utils/cx\";\n\nconst RADIO_DOT_DELAY_MS = 60;\nconst RADIO_DOT_POP_MS = 100;\n\n/** Pop-in dot animation — remounts when selected so it replays each time (matches Checkbox tick timing). */\nfunction RadioAnimatedDot({ className }: { className?: string }) {\n    const dotRef = useRef<HTMLDivElement>(null);\n\n    useLayoutEffect(() => {\n        const dot = dotRef.current;\n        if (!dot) return;\n\n        if (typeof dot.animate !== \"function\") {\n            dot.style.opacity = \"1\";\n            dot.style.transform = \"scale(1)\";\n            return;\n        }\n\n        const anim = dot.animate(\n            [\n                { opacity: 0, transform: \"scale(0)\" },\n                { opacity: 1, transform: \"scale(1)\" },\n            ],\n            {\n                duration: RADIO_DOT_POP_MS,\n                delay: RADIO_DOT_DELAY_MS,\n                easing: \"cubic-bezier(0.45, 0, 0.2, 1)\",\n                fill: \"forwards\",\n            },\n        );\n        return () => anim.cancel();\n    }, []);\n\n    return <div ref={dotRef} aria-hidden=\"true\" className={cx(\"rounded-full bg-fg-white\", className)} style={{ opacity: 0, transform: \"scale(0)\" }} />;\n}\n\n/** Figma: _Radio button base (1097:63638) — spread focus ring (2px surface gap + 4px focus-ring). */\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 RadioGroupContextType {\n    size?: \"sm\" | \"md\";\n}\n\nconst RadioGroupContext = createContext<RadioGroupContextType | null>(null);\n\nexport interface RadioButtonBaseProps {\n    size?: \"sm\" | \"md\";\n    className?: string;\n    isFocusVisible?: boolean;\n    isSelected?: boolean;\n    isDisabled?: boolean;\n}\n\nexport const RadioButtonBase = ({ className, isFocusVisible, isSelected, isDisabled, size = \"sm\" }: RadioButtonBaseProps) => {\n    const dotClassName = size === \"sm\" ? \"size-1.5\" : \"size-2\";\n\n    return (\n        <div\n            className={cx(\n                \"relative flex shrink-0 cursor-pointer appearance-none items-center justify-center overflow-clip rounded-full border border-solid border-primary bg-primary\",\n                size === \"sm\" ? \"size-4\" : \"size-5\",\n                isSelected && \"border-transparent bg-brand-solid\",\n                !isSelected && !isDisabled && \"group-hover:bg-primary_hover\",\n                isDisabled && \"cursor-not-allowed opacity-50\",\n                isDisabled && !isSelected && \"bg-tertiary\",\n                isFocusVisible && !isDisabled && focusRingShadow,\n                className,\n            )}\n        >\n            {isSelected && <RadioAnimatedDot className={cx(\"pointer-events-none\", dotClassName)} />}\n        </div>\n    );\n};\nRadioButtonBase.displayName = \"RadioButtonBase\";\n\ninterface RadioButtonProps extends AriaRadioProps {\n    size?: \"sm\" | \"md\";\n    label?: ReactNode;\n    hint?: ReactNode;\n    ref?: Ref<HTMLLabelElement>;\n}\n\nexport const RadioButton = ({ label, hint, className, size = \"sm\", ...ariaRadioProps }: RadioButtonProps) => {\n    const context = useContext(RadioGroupContext);\n\n    size = context?.size ?? size;\n\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\",\n            label: \"text-md font-medium\",\n            hint: \"text-md\",\n        },\n    };\n\n    return (\n        <AriaRadio\n            {...ariaRadioProps}\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, isDisabled, isFocusVisible }) => (\n                <>\n                    <RadioButtonBase\n                        size={size}\n                        isSelected={isSelected}\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        </AriaRadio>\n    );\n};\nRadioButton.displayName = \"RadioButton\";\n\ninterface RadioGroupProps extends RadioGroupContextType, AriaRadioGroupProps {\n    children: ReactNode;\n    className?: string;\n}\n\nexport const RadioGroup = ({ children, className, size = \"sm\", ...props }: RadioGroupProps) => {\n    return (\n        <RadioGroupContext.Provider value={{ size }}>\n            <AriaRadioGroup {...props} className={cx(\"flex flex-col gap-4\", className)}>\n                {children}\n            </AriaRadioGroup>\n        </RadioGroupContext.Provider>\n    );\n};\n"]}

package/dist/react/select-item.d.ts

@@ -1,6 +1,7 @@
 import * as react from 'react';
 import { ListBoxItemProps } from 'react-aria-components';
-import { S as SelectItemType } from '../select-shared-B3Y5SMXU.js';
+import { S as SelectItemType } from '../select-shared-oJEeJxeB.js';
+import '../select-mobile-sheet-CB2ptDTJ.js';
 
 interface SelectItemProps extends Omit<ListBoxItemProps<SelectItemType>, "id">, SelectItemType {
     /** The selection indicator to be displayed on the item. */

package/dist/react/select-item.js

@@ -166,7 +166,7 @@ var Avatar = ({
 };
 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;
@@ -187,7 +187,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,
@@ -202,14 +202,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,
@@ -220,13 +221,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" })
       ]
     }
   );
@@ -309,7 +312,8 @@ var SelectItem = ({
         {
           className: cx(
             "flex cursor-pointer items-center rounded-md outline-hidden select-none",
-            (state.isFocused || state.isHovered || state.isSelected && selectionIndicator !== "checkbox") && "bg-primary_hover",
+            (state.isFocused || state.isHovered) && !(state.isSelected && selectionIndicator !== "checkbox") && "bg-primary_hover",
+            state.isSelected && selectionIndicator !== "checkbox" && "bg-brand-primary_alt",
             state.isDisabled && "cursor-not-allowed opacity-50",
             // Icon styles
             "*:data-icon:shrink-0 *:data-icon:text-fg-quaternary",