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

package/dist/react/checkbox.js

@@ -1,129 +1,134 @@
-import * as React from 'react';
-import { useState, useRef, useLayoutEffect } from 'react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-import { jsx } from 'react/jsx-runtime';
+import { useRef, useLayoutEffect } from 'react';
+import { Checkbox as Checkbox$1 } from 'react-aria-components';
+import { extendTailwindMerge } from 'tailwind-merge';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
+var twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      text: ["display-xs", "display-sm", "display-md", "display-lg", "display-xl", "display-2xl"]
+    }
+  }
+});
+var cx = twMerge;
 var CHECKBOX_TICK_DELAY_MS = 60;
 var CHECKBOX_TICK_DRAW_MS = 100;
-function CheckboxAnimatedCheckMark() {
-  const lineRef = useRef(null);
+function CheckboxAnimatedCheckMark({ pixelSize, className }) {
+  const pathRef = useRef(null);
   useLayoutEffect(() => {
-    const poly = lineRef.current;
-    if (!poly || typeof poly.getTotalLength !== "function") return;
-    const len = poly.getTotalLength();
+    const path = pathRef.current;
+    if (!path || typeof path.getTotalLength !== "function") return;
+    const len = path.getTotalLength();
     if (len <= 0) return;
-    poly.style.strokeDasharray = `${len}`;
-    poly.style.strokeDashoffset = `${len}`;
-    if (typeof poly.animate !== "function") {
-      poly.style.strokeDashoffset = "0";
+    path.style.strokeDasharray = `${len}`;
+    path.style.strokeDashoffset = `${len}`;
+    if (typeof path.animate !== "function") {
+      path.style.strokeDashoffset = "0";
       return;
     }
-    const anim = poly.animate(
-      [{ strokeDashoffset: len }, { strokeDashoffset: 0 }],
-      {
-        duration: CHECKBOX_TICK_DRAW_MS,
-        delay: CHECKBOX_TICK_DELAY_MS,
-        easing: "cubic-bezier(0.45, 0, 0.2, 1)",
-        fill: "forwards"
-      }
-    );
+    const anim = path.animate([{ strokeDashoffset: len }, { strokeDashoffset: 0 }], {
+      duration: CHECKBOX_TICK_DRAW_MS,
+      delay: CHECKBOX_TICK_DELAY_MS,
+      easing: "cubic-bezier(0.45, 0, 0.2, 1)",
+      fill: "forwards"
+    });
     return () => anim.cancel();
   }, []);
-  return /* @__PURE__ */ jsx(
-    "svg",
+  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",
     {
-      className: "size-4 shrink-0 overflow-visible",
-      viewBox: "0 0 24 24",
-      "aria-hidden": true,
-      children: /* @__PURE__ */ jsx(
-        "polyline",
-        {
-          ref: lineRef,
-          points: "4 12 9 17 20 6",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "3",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      )
+      ref: pathRef,
+      d: "M2.33325 7L5.24992 9.91667L11.6666 3.5",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
     }
-  );
+  ) });
 }
-var Checkbox = React.forwardRef(
-  ({
-    checked: checkedProp,
-    defaultChecked = false,
-    onCheckedChange,
-    indeterminate = false,
-    disabled = false,
-    className,
-    onClick,
-    ...rest
-  }, ref) => {
-    const isControlled = checkedProp !== void 0;
-    const [uncontrolledChecked, setUncontrolledChecked] = useState(defaultChecked);
-    const checked = isControlled ? checkedProp : uncontrolledChecked;
-    const ariaChecked = indeterminate ? "mixed" : checked ? true : false;
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        ref,
-        type: "button",
-        role: "checkbox",
-        "data-slot": "checkbox",
-        "data-state": indeterminate ? "indeterminate" : checked ? "checked" : "unchecked",
-        disabled,
-        "aria-checked": ariaChecked,
-        className: cn(
-          "ring-offset-background focus-visible:ring-primary/40 inline-flex shrink-0 items-center justify-center rounded-md border border-transparent p-0 outline-none select-none",
-          "focus-visible:ring-2 focus-visible:ring-offset-2",
-          "disabled:cursor-not-allowed",
-          className
-        ),
-        onClick: (e) => {
-          onClick?.(e);
-          if (e.defaultPrevented) return;
-          if (disabled) return;
-          if (isControlled) {
-            onCheckedChange?.(!checked);
-            return;
+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 iconPixelSize = size === "sm" ? 10 : 14;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(
+        "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,
+        className
+      ),
+      children: [
+        isIndeterminate && /* @__PURE__ */ jsx(
+          "svg",
+          {
+            "aria-hidden": "true",
+            width: iconPixelSize,
+            height: iconPixelSize,
+            viewBox: "0 0 14 14",
+            fill: "none",
+            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" })
           }
-          setUncontrolledChecked((prev) => {
-            const next = !prev;
-            onCheckedChange?.(next);
-            return next;
-          });
-        },
-        ...rest,
-        children: /* @__PURE__ */ jsx("span", { className: "pointer-events-none", children: /* @__PURE__ */ jsx(
-          "span",
+        ),
+        isSelected && !isIndeterminate && /* @__PURE__ */ jsx(CheckboxAnimatedCheckMark, { pixelSize: iconPixelSize, className: "pointer-events-none text-fg-white" })
+      ]
+    }
+  );
+};
+CheckboxBase.displayName = "CheckboxBase";
+var Checkbox = ({ label, hint, size = "sm", className, ...ariaCheckboxProps }) => {
+  const sizes = {
+    sm: {
+      root: "gap-2",
+      textWrapper: "",
+      label: "text-sm font-medium",
+      hint: "text-sm"
+    },
+    md: {
+      root: "gap-3",
+      textWrapper: "gap-0.5 break-words",
+      label: "text-md font-medium",
+      hint: "text-md"
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Checkbox$1,
+    {
+      ...ariaCheckboxProps,
+      className: (state) => cx(
+        "group relative flex items-start",
+        state.isDisabled && "cursor-not-allowed",
+        sizes[size].root,
+        typeof className === "function" ? className(state) : className
+      ),
+      children: ({ isSelected, isIndeterminate, isDisabled, isFocusVisible }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          CheckboxBase,
           {
-            "aria-hidden": true,
-            className: cn(
-              "flex size-5 shrink-0 items-center justify-center rounded-[4px] border",
-              !disabled && (indeterminate ? "border-primary bg-primary text-background" : checked ? "border-primary bg-primary text-background" : "border-primary/20 bg-background"),
-              disabled && (indeterminate ? "border-transparent bg-primary/45 text-primary-foreground" : checked ? "border-transparent bg-primary/45 text-primary-foreground" : "border-primary/10 bg-muted/25")
-            ),
-            children: indeterminate ? /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: "size-2.5 shrink-0 rounded-[2px] border border-primary/20 bg-background",
-                "aria-hidden": true
-              }
-            ) : checked ? /* @__PURE__ */ jsx(CheckboxAnimatedCheckMark, {}) : null
+            size,
+            isSelected,
+            isIndeterminate,
+            isDisabled,
+            isFocusVisible,
+            className: label || hint ? "mt-0.5" : ""
           }
-        ) })
-      }
-    );
-  }
-);
+        ),
+        (label || hint) && /* @__PURE__ */ jsxs("div", { className: cx("inline-flex flex-col", sizes[size].textWrapper), children: [
+          label && /* @__PURE__ */ jsx("p", { className: cx("text-secondary select-none", sizes[size].label), children: label }),
+          hint && /* @__PURE__ */ jsx("span", { className: cx("text-tertiary", sizes[size].hint), onClick: (event) => event.stopPropagation(), children: hint })
+        ] })
+      ] })
+    }
+  );
+};
 Checkbox.displayName = "Checkbox";
 
-export { Checkbox };
+export { Checkbox, CheckboxBase };
 //# sourceMappingURL=checkbox.js.map
 //# sourceMappingURL=checkbox.js.map

package/dist/react/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/lib/utils.ts","../../src/react/checkbox.tsx"],"names":[],"mappings":"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","file":"checkbox.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport * as React from \"react\";\nimport { useLayoutEffect, useRef, useState } from \"react\";\n\nimport { cn } from \"../lib/utils\";\n\nconst CHECKBOX_TICK_DELAY_MS = 60;\nconst CHECKBOX_TICK_DRAW_MS = 100;\n\nfunction CheckboxAnimatedCheckMark() {\n  const lineRef = useRef<SVGPolylineElement>(null);\n\n  useLayoutEffect(() => {\n    const poly = lineRef.current;\n    if (!poly || typeof poly.getTotalLength !== \"function\") return;\n    const len = poly.getTotalLength();\n    if (len <= 0) return;\n\n    poly.style.strokeDasharray = `${len}`;\n    poly.style.strokeDashoffset = `${len}`;\n\n    if (typeof poly.animate !== \"function\") {\n      poly.style.strokeDashoffset = \"0\";\n      return;\n    }\n\n    const anim = poly.animate(\n      [{ strokeDashoffset: len }, { strokeDashoffset: 0 }],\n      {\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    );\n    return () => anim.cancel();\n  }, []);\n\n  return (\n    <svg\n      className=\"size-4 shrink-0 overflow-visible\"\n      viewBox=\"0 0 24 24\"\n      aria-hidden\n    >\n      <polyline\n        ref={lineRef}\n        points=\"4 12 9 17 20 6\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"3\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n}\n\nexport type CheckboxProps = Omit<\n  React.ComponentProps<\"button\">,\n  \"type\" | \"role\" | \"aria-checked\" | \"children\"\n> & {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onCheckedChange?: (next: boolean) => void;\n  // tri-state: same frame as checked; center shows a visible “blank” (inner surface)\n  indeterminate?: boolean;\n};\n\nconst Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(\n  (\n    {\n      checked: checkedProp,\n      defaultChecked = false,\n      onCheckedChange,\n      indeterminate = false,\n      disabled = false,\n      className,\n      onClick,\n      ...rest\n    },\n    ref,\n  ) => {\n    const isControlled = checkedProp !== undefined;\n    const [uncontrolledChecked, setUncontrolledChecked] =\n      useState(defaultChecked);\n    const checked = isControlled ? checkedProp : uncontrolledChecked;\n    const ariaChecked: boolean | \"mixed\" = indeterminate\n      ? \"mixed\"\n      : checked\n        ? true\n        : false;\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        role=\"checkbox\"\n        data-slot=\"checkbox\"\n        data-state={\n          indeterminate ? \"indeterminate\" : checked ? \"checked\" : \"unchecked\"\n        }\n        disabled={disabled}\n        aria-checked={ariaChecked}\n        className={cn(\n          \"ring-offset-background focus-visible:ring-primary/40 inline-flex shrink-0 items-center justify-center rounded-md border border-transparent p-0 outline-none select-none\",\n          \"focus-visible:ring-2 focus-visible:ring-offset-2\",\n          \"disabled:cursor-not-allowed\",\n          className,\n        )}\n        onClick={(e) => {\n          onClick?.(e);\n          if (e.defaultPrevented) return;\n          if (disabled) return;\n          if (isControlled) {\n            onCheckedChange?.(!checked);\n            return;\n          }\n          setUncontrolledChecked((prev) => {\n            const next = !prev;\n            onCheckedChange?.(next);\n            return next;\n          });\n        }}\n        {...rest}\n      >\n        <span className=\"pointer-events-none\">\n          <span\n            aria-hidden\n            className={cn(\n              \"flex size-5 shrink-0 items-center justify-center rounded-[4px] border\",\n              !disabled &&\n                (indeterminate\n                  ? \"border-primary bg-primary text-background\"\n                  : checked\n                    ? \"border-primary bg-primary text-background\"\n                    : \"border-primary/20 bg-background\"),\n              disabled &&\n                (indeterminate\n                  ? \"border-transparent bg-primary/45 text-primary-foreground\"\n                  : checked\n                    ? \"border-transparent bg-primary/45 text-primary-foreground\"\n                    : \"border-primary/10 bg-muted/25\"),\n            )}\n          >\n            {indeterminate ? (\n              <span\n                className=\"size-2.5 shrink-0 rounded-[2px] border border-primary/20 bg-background\"\n                aria-hidden\n              />\n            ) : checked ? (\n              <CheckboxAnimatedCheckMark />\n            ) : null}\n          </span>\n        </span>\n      </button>\n    );\n  },\n);\nCheckbox.displayName = \"Checkbox\";\n\nexport { 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/close-button.d.ts

@@ -0,0 +1,25 @@
+import * as react from 'react';
+import { ButtonProps } from 'react-aria-components';
+
+declare const sizes: {
+    sm: {
+        root: string;
+        icon: string;
+    };
+    md: {
+        root: string;
+        icon: string;
+    };
+    lg: {
+        root: string;
+        icon: string;
+    };
+};
+interface CloseButtonProps extends ButtonProps {
+    theme?: "light" | "dark";
+    size?: keyof typeof sizes;
+    label?: string;
+}
+declare const CloseButton: ({ label, className, size, theme, ...otherProps }: CloseButtonProps) => react.JSX.Element;
+
+export { CloseButton };

package/dist/react/close-button.js

@@ -0,0 +1,54 @@
+import { XIcon } from '@phosphor-icons/react/dist/csr/X';
+import { Button } from 'react-aria-components';
+import { extendTailwindMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+var twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      text: ["display-xs", "display-sm", "display-md", "display-lg", "display-xl", "display-2xl"]
+    }
+  }
+});
+var cx = twMerge;
+var focusShadowPlain = "focus-visible:outline-none focus-visible:[box-shadow:0px_0px_0px_2px_var(--color-bg-primary),0px_0px_0px_4px_var(--color-focus-ring)]";
+var sizes = {
+  sm: { root: "size-9", icon: "size-5" },
+  md: { root: "size-10", icon: "size-5" },
+  lg: { root: "size-11", icon: "size-6" }
+};
+var themes = {
+  light: [
+    "text-fg-quaternary",
+    "hover:bg-primary_hover hover:text-fg-quaternary_hover",
+    "focus-visible:bg-primary",
+    focusShadowPlain
+  ].join(" "),
+  dark: [
+    "text-fg-white",
+    "[&_svg]:opacity-70",
+    "hover:bg-white/20 [&:hover_svg]:opacity-100",
+    "focus-visible:bg-white/20 [&:focus-visible_svg]:opacity-70",
+    focusShadowPlain
+  ].join(" ")
+};
+var CloseButton = ({ label, className, size = "sm", theme = "light", ...otherProps }) => {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...otherProps,
+      "aria-label": label || "Close",
+      className: (state) => cx(
+        "flex cursor-pointer items-center justify-center overflow-clip rounded-full p-2 transition duration-100 ease-linear focus:outline-hidden disabled:pointer-events-none disabled:opacity-50 pressed:scale-[0.985] pressed:duration-100 motion-reduce:pressed:scale-100",
+        sizes[size].root,
+        themes[theme],
+        typeof className === "function" ? className(state) : className
+      ),
+      children: /* @__PURE__ */ jsx(XIcon, { "aria-hidden": "true", className: cx("shrink-0 transition-inherit-all", sizes[size].icon) })
+    }
+  );
+};
+
+export { CloseButton };
+//# sourceMappingURL=close-button.js.map
+//# sourceMappingURL=close-button.js.map

package/dist/react/close-button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../utils/cx.ts","../../../../components/base/buttons/close-button.tsx"],"names":["AriaButton","CloseIcon"],"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;ACDlB,IAAM,gBAAA,GACF,uIAAA;AAEJ,IAAM,KAAA,GAAQ;AAAA,EACV,EAAA,EAAI,EAAE,IAAA,EAAM,QAAA,EAAU,MAAM,QAAA,EAAS;AAAA,EACrC,EAAA,EAAI,EAAE,IAAA,EAAM,SAAA,EAAW,MAAM,QAAA,EAAS;AAAA,EACtC,EAAA,EAAI,EAAE,IAAA,EAAM,SAAA,EAAW,MAAM,QAAA;AACjC,CAAA;AAEA,IAAM,MAAA,GAAS;AAAA,EACX,KAAA,EAAO;AAAA,IACH,oBAAA;AAAA,IACA,uDAAA;AAAA,IACA,0BAAA;AAAA,IACA;AAAA,GACJ,CAAE,KAAK,GAAG,CAAA;AAAA,EACV,IAAA,EAAM;AAAA,IACF,eAAA;AAAA,IACA,oBAAA;AAAA,IACA,6CAAA;AAAA,IACA,4DAAA;AAAA,IACA;AAAA,GACJ,CAAE,KAAK,GAAG;AACd,CAAA;AAQO,IAAM,WAAA,GAAc,CAAC,EAAE,KAAA,EAAO,SAAA,EAAW,IAAA,GAAO,IAAA,EAAM,KAAA,GAAQ,OAAA,EAAS,GAAG,UAAA,EAAW,KAAwB;AAChH,EAAA,uBACI,GAAA;AAAA,IAACA,MAAA;AAAA,IAAA;AAAA,MACI,GAAG,UAAA;AAAA,MACJ,cAAY,KAAA,IAAS,OAAA;AAAA,MACrB,SAAA,EAAW,CAAC,KAAA,KACR,EAAA;AAAA,QACI,qQAAA;AAAA,QACA,KAAA,CAAM,IAAI,CAAA,CAAE,IAAA;AAAA,QACZ,OAAO,KAAK,CAAA;AAAA,QACZ,OAAO,SAAA,KAAc,UAAA,GAAa,SAAA,CAAU,KAAK,CAAA,GAAI;AAAA,OACzD;AAAA,MAGJ,QAAA,kBAAA,GAAA,CAACC,KAAA,EAAA,EAAU,aAAA,EAAY,MAAA,EAAO,SAAA,EAAW,EAAA,CAAG,iCAAA,EAAmC,KAAA,CAAM,IAAI,CAAA,CAAE,IAAI,CAAA,EAAG;AAAA;AAAA,GACtG;AAER","file":"close-button.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 { XIcon as CloseIcon } from \"@phosphor-icons/react/dist/csr/X\";\nimport { Button as AriaButton, type ButtonProps as AriaButtonProps } from \"react-aria-components\";\nimport { cx } from \"@/utils/cx\";\n\n/**\n * Figma: Buttons/Button close X (2763:420129)\n *\n * Always fully circular (`rounded-full`).\n * Focus: spread-shadow ring (2px surface gap + 4px focus-ring), not outline.\n */\n\nconst focusShadowPlain =\n    \"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\nconst sizes = {\n    sm: { root: \"size-9\", icon: \"size-5\" },\n    md: { root: \"size-10\", icon: \"size-5\" },\n    lg: { root: \"size-11\", icon: \"size-6\" },\n};\n\nconst themes = {\n    light: [\n        \"text-fg-quaternary\",\n        \"hover:bg-primary_hover hover:text-fg-quaternary_hover\",\n        \"focus-visible:bg-primary\",\n        focusShadowPlain,\n    ].join(\" \"),\n    dark: [\n        \"text-fg-white\",\n        \"[&_svg]:opacity-70\",\n        \"hover:bg-white/20 [&:hover_svg]:opacity-100\",\n        \"focus-visible:bg-white/20 [&:focus-visible_svg]:opacity-70\",\n        focusShadowPlain,\n    ].join(\" \"),\n};\n\ninterface CloseButtonProps extends AriaButtonProps {\n    theme?: \"light\" | \"dark\";\n    size?: keyof typeof sizes;\n    label?: string;\n}\n\nexport const CloseButton = ({ label, className, size = \"sm\", theme = \"light\", ...otherProps }: CloseButtonProps) => {\n    return (\n        <AriaButton\n            {...otherProps}\n            aria-label={label || \"Close\"}\n            className={(state) =>\n                cx(\n                    \"flex cursor-pointer items-center justify-center overflow-clip rounded-full p-2 transition duration-100 ease-linear focus:outline-hidden disabled:pointer-events-none disabled:opacity-50 pressed:scale-[0.985] pressed:duration-100 motion-reduce:pressed:scale-100\",\n                    sizes[size].root,\n                    themes[theme],\n                    typeof className === \"function\" ? className(state) : className,\n                )\n            }\n        >\n            <CloseIcon aria-hidden=\"true\" className={cx(\"shrink-0 transition-inherit-all\", sizes[size].icon)} />\n        </AriaButton>\n    );\n};\n"]}

package/dist/react/combobox.d.ts

@@ -0,0 +1,18 @@
+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-oJEeJxeB.js';
+import '../select-mobile-sheet-CB2ptDTJ.js';
+
+interface ComboBoxProps extends Omit<ComboBoxProps$1<SelectItemType>, "children" | "items">, RefAttributes<HTMLDivElement>, CommonProps {
+    shortcut?: boolean;
+    items?: SelectItemType[];
+    popoverClassName?: string;
+    shortcutClassName?: string;
+    /** Leading icon component displayed before the input. */
+    icon?: FC | ReactNode;
+    children: ListBoxProps<SelectItemType>["children"];
+}
+declare const ComboBox: ({ placeholder, shortcut, size, children, items, shortcutClassName, icon, hideRequiredIndicator, mobileOptions, ...otherProps }: ComboBoxProps) => react.JSX.Element;
+
+export { ComboBox };