@fabio.caffarello/react-design-system 3.8.0 → 3.10.0

package/dist/granular/ui/components/Menu/MenuItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.js","sources":["../../../../../src/ui/components/Menu/MenuItem.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, type ReactNode, type HTMLAttributes } from \"react\";\nimport { ChevronRight } from \"lucide-react\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { getTypographySize } from \"../../tokens/typography\";\nimport { useMenuContext } from \"./MenuContext\";\n\nexport interface MenuItemProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  \"onClick\"\n> {\n  children: ReactNode;\n  icon?: ReactNode;\n  rightIcon?: ReactNode;\n  disabled?: boolean;\n  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;\n  onSelect?: (e: React.MouseEvent<HTMLDivElement>) => void;\n  hasSubmenu?: boolean;\n}\n\n/**\n * MenuItem Component\n *\n * A single menu item. Supports icons, disabled state, and submenu indicator.\n *\n * @example\n * ```tsx\n * <MenuItem onClick={handleClick} icon={<Icon />}>\n *   Menu Item\n * </MenuItem>\n * ```\n */\nconst MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(function MenuItem(\n  {\n    children,\n    icon,\n    rightIcon,\n    disabled = false,\n    onClick,\n    onSelect,\n    hasSubmenu = false,\n    className = \"\",\n    ...props\n  },\n  ref,\n) {\n  const { closeMenu } = useMenuContext();\n\n  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (disabled) return;\n\n    onClick?.(e);\n    onSelect?.(e);\n\n    // Close menu unless it has a submenu\n    if (!hasSubmenu && !e.defaultPrevented) {\n      closeMenu();\n    }\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (disabled) return;\n\n    if (e.key === \"Enter\" || e.key === \" \") {\n      e.preventDefault();\n      handleClick(e as unknown as React.MouseEvent<HTMLDivElement>);\n    }\n  };\n\n  return (\n    <div\n      ref={ref}\n      role=\"menuitem\"\n      tabIndex={disabled ? -1 : 0}\n      aria-disabled={disabled}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      className={`\n          flex\n          items-center\n          ${getSpacingClass(\"sm\", \"gap\")}\n          ${getSpacingClass(\"sm\", \"px\")}\n          ${getSpacingClass(\"sm\", \"py\")}\n          ${getTypographySize(\"bodySmall\")}\n          text-fg-primary\n          cursor-pointer\n          transition-colors\n          hover:bg-surface-hover\n          focus:bg-surface-hover\n          focus:outline-none\n          ${disabled ? \"opacity-50 cursor-not-allowed\" : \"\"}\n          ${className}\n        `}\n      {...props}\n    >\n      {icon && <span className=\"shrink-0\">{icon}</span>}\n      <span className=\"flex-1\">{children}</span>\n      {hasSubmenu && (\n        <ChevronRight className=\"h-4 w-4 text-fg-secondary shrink-0\" />\n      )}\n      {rightIcon && !hasSubmenu && (\n        <span className=\"shrink-0\">{rightIcon}</span>\n      )}\n    </div>\n  );\n});\n\nMenuItem.displayName = \"MenuItem\";\n\nexport default MenuItem;\n"],"names":["MenuItem","forwardRef","_a","ref","_b","children","icon","rightIcon","disabled","onClick","onSelect","hasSubmenu","className","props","__objRest","closeMenu","useMenuContext","handleClick","e","jsxs","__spreadProps","__spreadValues","getSpacingClass","getTypographySize","jsx","ChevronRight"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,MAAMA,IAAWC,EAA0C,SACzDC,GAWAC,GACA;AAZA,MAAAC,IAAAF,GACE;AAAA,cAAAG;AAAA,IACA,MAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,WAAAC,IAAY;AAAA,MARdR,GASKS,IAAAC,EATLV,GASK;AAAA,IARH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAKF,QAAM,EAAE,WAAAW,EAAA,IAAcC,EAAA,GAEhBC,IAAc,CAACC,MAAwC;AAC3D,IAAIV,MAEJC,KAAA,QAAAA,EAAUS,IACVR,KAAA,QAAAA,EAAWQ,IAGP,CAACP,KAAc,CAACO,EAAE,oBACpBH,EAAA;AAAA,EAEJ;AAWA,SACE,gBAAAI;AAAA,IAAC;AAAA,IAAAC,EAAAC,EAAA;AAAA,MACC,KAAAlB;AAAA,MACA,MAAK;AAAA,MACL,UAAUK,IAAW,KAAK;AAAA,MAC1B,iBAAeA;AAAA,MACf,SAASS;AAAA,MACT,WAhBkB,CAACC,MAA2C;AAChE,QAAIV,MAEAU,EAAE,QAAQ,WAAWA,EAAE,QAAQ,SACjCA,EAAE,eAAA,GACFD,EAAYC,CAAgD;AAAA,MAEhE;AAAA,MAUI,WAAW;AAAA;AAAA;AAAA,YAGLI,EAAgB,MAAM,KAAK,CAAC;AAAA,YAC5BA,EAAgB,MAAM,IAAI,CAAC;AAAA,YAC3BA,EAAgB,MAAM,IAAI,CAAC;AAAA,YAC3BC,EAAkB,WAAW,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAO9Bf,IAAW,kCAAkC,EAAE;AAAA,YAC/CI,CAAS;AAAA;AAAA,OAEXC,IAvBL;AAAA,MAyBE,UAAA;AAAA,QAAAP,KAAQ,gBAAAkB,EAAC,QAAA,EAAK,WAAU,YAAY,UAAAlB,GAAK;AAAA,QAC1C,gBAAAkB,EAAC,QAAA,EAAK,WAAU,UAAU,UAAAnB,EAAA,CAAS;AAAA,QAClCM,KACC,gBAAAa,EAACC,GAAA,EAAa,WAAU,qCAAA,CAAqC;AAAA,QAE9DlB,KAAa,CAACI,uBACZ,QAAA,EAAK,WAAU,YAAY,UAAAJ,EAAA,CAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAI9C,CAAC;AAEDP,EAAS,cAAc;"}

package/dist/granular/ui/components/Menu/MenuSeparator.js

@@ -0,0 +1,46 @@
+"use client";
+var p = Object.defineProperty;
+var o = Object.getOwnPropertySymbols;
+var i = Object.prototype.hasOwnProperty, l = Object.prototype.propertyIsEnumerable;
+var s = (e, r, a) => r in e ? p(e, r, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[r] = a, m = (e, r) => {
+  for (var a in r || (r = {}))
+    i.call(r, a) && s(e, a, r[a]);
+  if (o)
+    for (var a of o(r))
+      l.call(r, a) && s(e, a, r[a]);
+  return e;
+};
+var n = (e, r) => {
+  var a = {};
+  for (var t in e)
+    i.call(e, t) && r.indexOf(t) < 0 && (a[t] = e[t]);
+  if (e != null && o)
+    for (var t of o(e))
+      r.indexOf(t) < 0 && l.call(e, t) && (a[t] = e[t]);
+  return a;
+};
+import { jsx as u } from "react/jsx-runtime";
+import { getSpacingClass as f } from "../../tokens/spacing.js";
+function x(a) {
+  var t = a, {
+    className: e = ""
+  } = t, r = n(t, [
+    "className"
+  ]);
+  return /* @__PURE__ */ u(
+    "div",
+    m({
+      role: "separator",
+      className: `
+        h-px
+        bg-line-default
+        ${f("sm", "my")}
+        ${e}
+      `
+    }, r)
+  );
+}
+export {
+  x as default
+};
+//# sourceMappingURL=MenuSeparator.js.map

package/dist/granular/ui/components/Menu/MenuSeparator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuSeparator.js","sources":["../../../../../src/ui/components/Menu/MenuSeparator.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes } from \"react\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\n\nexport type MenuSeparatorProps = HTMLAttributes<HTMLDivElement>;\n\n/**\n * MenuSeparator Component\n *\n * A visual separator for menu items.\n *\n * @example\n * ```tsx\n * <MenuSeparator />\n * ```\n */\nexport default function MenuSeparator({\n  className = \"\",\n  ...props\n}: MenuSeparatorProps) {\n  return (\n    <div\n      role=\"separator\"\n      className={`\n        h-px\n        bg-line-default\n        ${getSpacingClass(\"sm\", \"my\")}\n        ${className}\n      `}\n      {...props}\n    />\n  );\n}\n"],"names":["MenuSeparator","_a","_b","className","props","__objRest","jsx","__spreadValues","getSpacingClass"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAiBA,SAAwBA,EAAcC,GAGf;AAHe,MAAAC,IAAAD,GACpC;AAAA,eAAAE,IAAY;AAAA,MADwBD,GAEjCE,IAAAC,EAFiCH,GAEjC;AAAA,IADH;AAAA;AAGA,SACE,gBAAAI;AAAA,IAAC;AAAA,IAAAC,EAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW;AAAA;AAAA;AAAA,UAGPC,EAAgB,MAAM,IAAI,CAAC;AAAA,UAC3BL,CAAS;AAAA;AAAA,OAETC;AAAA,EAAA;AAGV;"}

package/dist/granular/ui/components/Menu/MenuTrigger.js

@@ -0,0 +1,71 @@
+"use client";
+var E = Object.defineProperty, R = Object.defineProperties;
+var j = Object.getOwnPropertyDescriptors;
+var s = Object.getOwnPropertySymbols;
+var I = Object.prototype.hasOwnProperty, M = Object.prototype.propertyIsEnumerable;
+var b = (o, e, n) => e in o ? E(o, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : o[e] = n, a = (o, e) => {
+  for (var n in e || (e = {}))
+    I.call(e, n) && b(o, n, e[n]);
+  if (s)
+    for (var n of s(e))
+      M.call(e, n) && b(o, n, e[n]);
+  return o;
+}, f = (o, e) => R(o, j(e));
+var v = (o, e) => {
+  var n = {};
+  for (var t in o)
+    I.call(o, t) && e.indexOf(t) < 0 && (n[t] = o[t]);
+  if (o != null && s)
+    for (var t of s(o))
+      e.indexOf(t) < 0 && M.call(o, t) && (n[t] = o[t]);
+  return n;
+};
+import { jsx as w } from "react/jsx-runtime";
+import { forwardRef as N, Children as y, isValidElement as O, cloneElement as P } from "react";
+import { useMenuContext as V } from "./MenuContext.js";
+function k(...o) {
+  return (e) => {
+    for (const n of o)
+      n && (typeof n == "function" ? n(e) : n.current = e);
+  };
+}
+const q = N(
+  function(z, c) {
+    var d = z, { children: e, asChild: n, onClick: t } = d, l = v(d, ["children", "asChild", "onClick"]);
+    var g, x;
+    const { isOpen: u, setIsOpen: C } = V(), m = (r) => {
+      t == null || t(r), C(!u);
+    }, T = y.count(e) === 1 && O(e);
+    if (n === !0 || n === void 0 && T) {
+      const r = y.only(e), i = r.props.onClick, h = (p) => {
+        i == null || i(p), p.defaultPrevented || m(p);
+      };
+      return P(r, f(a({}, l), {
+        role: (g = r.props.role) != null ? g : "button",
+        tabIndex: (x = r.props.tabIndex) != null ? x : 0,
+        "aria-haspopup": "menu",
+        "aria-expanded": u,
+        onClick: h,
+        ref: k(c, r.props.ref)
+      }));
+    }
+    return /* @__PURE__ */ w(
+      "div",
+      f(a({
+        ref: c,
+        onClick: m,
+        role: "button",
+        tabIndex: 0,
+        "aria-haspopup": "menu",
+        "aria-expanded": u
+      }, l), {
+        children: e
+      })
+    );
+  }
+);
+q.displayName = "MenuTrigger";
+export {
+  q as default
+};
+//# sourceMappingURL=MenuTrigger.js.map

package/dist/granular/ui/components/Menu/MenuTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuTrigger.js","sources":["../../../../../src/ui/components/Menu/MenuTrigger.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Children,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  type ReactNode,\n  type ReactElement,\n  type HTMLAttributes,\n  type MouseEvent,\n  type Ref,\n} from \"react\";\nimport { useMenuContext } from \"./MenuContext\";\n\nexport interface MenuTriggerProps extends HTMLAttributes<HTMLElement> {\n  children: ReactNode;\n  /**\n   * Controls whether MenuTrigger merges its trigger semantics (`role`,\n   * `aria-haspopup`, `aria-expanded`, `tabIndex`, `onClick`, `ref`) onto\n   * its single child, or wraps the child in a `<div role=\"button\">`.\n   *\n   * - `true` — always clone the (single, valid) child. Throws via\n   *   `React.Children.only` if children aren't a single element.\n   * - `false` — always wrap in a `<div role=\"button\">` (legacy behavior).\n   * - `undefined` (default) — infer: clone when there is exactly one\n   *   valid React element child; otherwise wrap. This default avoids\n   *   nested-interactive when the canonical\n   *   `<MenuTrigger><Button/></MenuTrigger>` pattern is used.\n   *\n   * Note on history: prior versions accepted this prop but never altered\n   * the rendered DOM (the wrapper rendered unconditionally) AND a stale\n   * `if (!asChild) setIsOpen(...)` gate suppressed the toggle when\n   * `asChild={true}` was set. Both were broken contracts — this version\n   * implements `asChild` structurally and removes the gate.\n   */\n  asChild?: boolean;\n}\n\nfunction mergeRefs<T>(...refs: Array<Ref<T> | undefined>): Ref<T> {\n  return (node: T | null) => {\n    for (const ref of refs) {\n      if (!ref) continue;\n      if (typeof ref === \"function\") ref(node);\n      else (ref as { current: T | null }).current = node;\n    }\n  };\n}\n\n/**\n * MenuTrigger Component\n *\n * The trigger element that opens/closes the menu. Must be used within a\n * `<Menu>`. By default, when given a single valid React element child,\n * merges trigger semantics onto that child (no wrapper) — so the typical\n * `<MenuTrigger><Button>Open</Button></MenuTrigger>` renders a single\n * `<button>` instead of a `<div role=\"button\">` wrapping a `<button>`.\n */\nconst MenuTrigger = forwardRef<HTMLElement, MenuTriggerProps>(\n  function MenuTrigger({ children, asChild, onClick, ...props }, ref) {\n    const { isOpen, setIsOpen } = useMenuContext();\n\n    const handleClick = (e: MouseEvent<HTMLElement>) => {\n      onClick?.(e);\n      setIsOpen(!isOpen);\n    };\n\n    const single = Children.count(children) === 1 && isValidElement(children);\n    const shouldClone = asChild === true || (asChild === undefined && single);\n\n    if (shouldClone) {\n      const child = Children.only(children) as ReactElement<\n        HTMLAttributes<HTMLElement> & { ref?: Ref<HTMLElement> }\n      >;\n      const childOnClick = child.props.onClick;\n      const composedClick = (e: MouseEvent<HTMLElement>) => {\n        childOnClick?.(e);\n        if (!e.defaultPrevented) handleClick(e);\n      };\n      return cloneElement(child, {\n        ...props,\n        role: child.props.role ?? \"button\",\n        tabIndex: child.props.tabIndex ?? 0,\n        \"aria-haspopup\": \"menu\",\n        \"aria-expanded\": isOpen,\n        onClick: composedClick,\n        ref: mergeRefs(ref, child.props.ref),\n      });\n    }\n\n    return (\n      <div\n        ref={ref as Ref<HTMLDivElement>}\n        onClick={handleClick}\n        role=\"button\"\n        tabIndex={0}\n        aria-haspopup=\"menu\"\n        aria-expanded={isOpen}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nMenuTrigger.displayName = \"MenuTrigger\";\n\nexport default MenuTrigger;\n"],"names":["mergeRefs","refs","node","ref","MenuTrigger","forwardRef","_a","_b","children","asChild","onClick","props","__objRest","isOpen","setIsOpen","useMenuContext","handleClick","e","single","Children","isValidElement","child","childOnClick","composedClick","cloneElement","__spreadProps","__spreadValues","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,SAASA,KAAgBC,GAAyC;AAChE,SAAO,CAACC,MAAmB;AACzB,eAAWC,KAAOF;AAChB,MAAKE,MACD,OAAOA,KAAQ,aAAYA,EAAID,CAAI,IACjCC,EAA8B,UAAUD;AAAA,EAElD;AACF;AAWA,MAAME,IAAcC;AAAA,EAClB,SAAqBC,GAA0CH,GAAK;AAA/C,QAAAI,IAAAD,GAAE,YAAAE,GAAU,SAAAC,GAAS,SAAAC,MAArBH,GAAiCI,IAAAC,EAAjCL,GAAiC,CAA/B,YAAU,WAAS;;AACxC,UAAM,EAAE,QAAAM,GAAQ,WAAAC,EAAA,IAAcC,EAAA,GAExBC,IAAc,CAACC,MAA+B;AAClD,MAAAP,KAAA,QAAAA,EAAUO,IACVH,EAAU,CAACD,CAAM;AAAA,IACnB,GAEMK,IAASC,EAAS,MAAMX,CAAQ,MAAM,KAAKY,EAAeZ,CAAQ;AAGxE,QAFoBC,MAAY,MAASA,MAAY,UAAaS,GAEjD;AACf,YAAMG,IAAQF,EAAS,KAAKX,CAAQ,GAG9Bc,IAAeD,EAAM,MAAM,SAC3BE,IAAgB,CAACN,MAA+B;AACpD,QAAAK,KAAA,QAAAA,EAAeL,IACVA,EAAE,oBAAkBD,EAAYC,CAAC;AAAA,MACxC;AACA,aAAOO,EAAaH,GAAOI,EAAAC,EAAA,IACtBf,IADsB;AAAA,QAEzB,OAAML,IAAAe,EAAM,MAAM,SAAZ,OAAAf,IAAoB;AAAA,QAC1B,WAAUC,IAAAc,EAAM,MAAM,aAAZ,OAAAd,IAAwB;AAAA,QAClC,iBAAiB;AAAA,QACjB,iBAAiBM;AAAA,QACjB,SAASU;AAAA,QACT,KAAKvB,EAAUG,GAAKkB,EAAM,MAAM,GAAG;AAAA,MAAA,EACpC;AAAA,IACH;AAEA,WACE,gBAAAM;AAAA,MAAC;AAAA,MAAAF,EAAAC,EAAA;AAAA,QACC,KAAAvB;AAAA,QACA,SAASa;AAAA,QACT,MAAK;AAAA,QACL,UAAU;AAAA,QACV,iBAAc;AAAA,QACd,iBAAeH;AAAA,SACXF,IAPL;AAAA,QASE,UAAAH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEAJ,EAAY,cAAc;"}

package/dist/granular/ui/components/Modal/Modal.js

@@ -0,0 +1,171 @@
+"use client";
+var S = Object.defineProperty, I = Object.defineProperties;
+var L = Object.getOwnPropertyDescriptors;
+var i = Object.getOwnPropertySymbols;
+var x = Object.prototype.hasOwnProperty, b = Object.prototype.propertyIsEnumerable;
+var y = (e, a, t) => a in e ? S(e, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[a] = t, v = (e, a) => {
+  for (var t in a || (a = {}))
+    x.call(a, t) && y(e, t, a[t]);
+  if (i)
+    for (var t of i(a))
+      b.call(a, t) && y(e, t, a[t]);
+  return e;
+}, g = (e, a) => I(e, L(a));
+var h = (e, a) => {
+  var t = {};
+  for (var o in e)
+    x.call(e, o) && a.indexOf(o) < 0 && (t[o] = e[o]);
+  if (e != null && i)
+    for (var o of i(e))
+      a.indexOf(o) < 0 && b.call(e, o) && (t[o] = e[o]);
+  return t;
+};
+import { jsxs as d, jsx as l } from "react/jsx-runtime";
+import { useRef as P, useEffect as p } from "react";
+import { createPortal as T } from "react-dom";
+import { X as w } from "lucide-react";
+import { getRadiusClass as z } from "../../tokens/radius.js";
+import { getShadowClass as A } from "../../tokens/shadows.js";
+import { getSpacingClass as r } from "../../tokens/spacing.js";
+import { getZIndexClass as M } from "../../tokens/z-index.js";
+import { useFocusRestore as X } from "../../hooks/useFocusRestore.js";
+import { useFocusTrap as Z } from "../../hooks/useFocusTrap.js";
+import { useAutoFocus as q } from "../../hooks/useAutoFocus.js";
+function ee(B) {
+  var f = B, {
+    isOpen: e,
+    onClose: a,
+    title: t,
+    children: o,
+    variant: N = "default",
+    showCloseButton: m = !0,
+    footer: c,
+    className: C = ""
+  } = f, j = h(f, [
+    "isOpen",
+    "onClose",
+    "title",
+    "children",
+    "variant",
+    "showCloseButton",
+    "footer",
+    "className"
+  ]);
+  const n = P(null);
+  if (X(e), Z(n, e), q(n, e), p(() => {
+    if (!e) return;
+    const s = (F) => {
+      F.key === "Escape" && a();
+    };
+    return document.addEventListener("keydown", s), () => {
+      document.removeEventListener("keydown", s);
+    };
+  }, [e, a]), p(() => (e ? document.body.style.overflow = "hidden" : document.body.style.overflow = "", () => {
+    document.body.style.overflow = "";
+  }), [e]), !e) return null;
+  const k = [
+    "fixed",
+    "inset-0",
+    M("modal"),
+    "overflow-y-auto"
+  ], E = ["fixed", "inset-0", "bg-scrim", "transition-opacity"], $ = {
+    default: "max-w-md",
+    large: "max-w-2xl",
+    fullscreen: "max-w-full h-full"
+  }, R = [
+    "relative",
+    "bg-surface-overlay",
+    z("lg"),
+    A("xl"),
+    r("xl", "my"),
+    "mx-auto",
+    $[N],
+    r("lg", "p"),
+    C
+  ].filter(Boolean).join(" "), u = /* @__PURE__ */ d(
+    "div",
+    {
+      className: k.join(" "),
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": t ? "modal-title" : void 0,
+      onClick: (s) => {
+        s.target === s.currentTarget && a();
+      },
+      children: [
+        /* @__PURE__ */ l("div", { className: E.join(" "), "aria-hidden": "true" }),
+        /* @__PURE__ */ l(
+          "div",
+          {
+            className: `flex min-h-full items-center justify-center ${r("base", "p")}`,
+            children: /* @__PURE__ */ d(
+              "div",
+              g(v({
+                ref: n,
+                tabIndex: -1,
+                className: R,
+                onClick: (s) => s.stopPropagation()
+              }, j), {
+                children: [
+                  t && /* @__PURE__ */ d(
+                    "div",
+                    {
+                      className: `flex justify-between items-center ${r("base", "mb")}`,
+                      children: [
+                        /* @__PURE__ */ l(
+                          "h2",
+                          {
+                            id: "modal-title",
+                            className: "text-xl font-semibold text-fg-primary",
+                            children: t
+                          }
+                        ),
+                        m && /* @__PURE__ */ l(
+                          "button",
+                          {
+                            onClick: a,
+                            className: "text-fg-tertiary hover:text-fg-secondary focus:outline-none",
+                            "aria-label": "Close modal",
+                            children: /* @__PURE__ */ l(w, { className: "h-6 w-6" })
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  !t && m && /* @__PURE__ */ l(
+                    "div",
+                    {
+                      className: `flex justify-end ${r("base", "mb")}`,
+                      children: /* @__PURE__ */ l(
+                        "button",
+                        {
+                          onClick: a,
+                          className: "text-fg-tertiary hover:text-fg-secondary focus:outline-none",
+                          "aria-label": "Close modal",
+                          children: /* @__PURE__ */ l(w, { className: "h-6 w-6" })
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ l("div", { className: r("base", "mb"), children: o }),
+                  c && /* @__PURE__ */ l(
+                    "div",
+                    {
+                      className: `flex justify-end ${r("sm", "gap")} ${r("base", "mt")}`,
+                      children: c
+                    }
+                  )
+                ]
+              })
+            )
+          }
+        )
+      ]
+    }
+  );
+  return typeof window != "undefined" ? T(u, document.body) : u;
+}
+export {
+  ee as default
+};
+//# sourceMappingURL=Modal.js.map

package/dist/granular/ui/components/Modal/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sources":["../../../../../src/ui/components/Modal/Modal.tsx"],"sourcesContent":["\"use client\";\n\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { useEffect, useRef } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { X } from \"lucide-react\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { getShadowClass } from \"../../tokens/shadows\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { getZIndexClass } from \"../../tokens/z-index\";\nimport { useFocusRestore } from \"../../hooks/useFocusRestore\";\nimport { useFocusTrap } from \"../../hooks/useFocusTrap\";\nimport { useAutoFocus } from \"../../hooks/useAutoFocus\";\n\ninterface Props extends HTMLAttributes<HTMLDivElement> {\n  isOpen: boolean;\n  onClose: () => void;\n  title?: string;\n  children: ReactNode;\n  variant?: \"default\" | \"large\" | \"fullscreen\";\n  showCloseButton?: boolean;\n  footer?: ReactNode;\n}\n\n/**\n * Modal Component\n *\n * A modal/dialog component with overlay, portal rendering, and accessibility.\n * Follows Atomic Design principles as an Organism component.\n *\n * @example\n * ```tsx\n * <Modal isOpen={isOpen} onClose={handleClose} title=\"Confirm Action\">\n *   <p>Are you sure?</p>\n * </Modal>\n * ```\n */\nexport default function Modal({\n  isOpen,\n  onClose,\n  title,\n  children,\n  variant = \"default\",\n  showCloseButton = true,\n  footer,\n  className = \"\",\n  ...props\n}: Props) {\n  const modalRef = useRef<HTMLDivElement>(null);\n\n  // Modal focus contract: trap + restore + auto-focus from the shared\n  // Phase 3 hooks. Replaces an inline implementation that snapshotted\n  // document.activeElement, focused the modal CONTAINER (not its first\n  // focusable child), and restored on cleanup. The hook variant of\n  // auto-focus targets the first focusable inside the modal — matching\n  // Dialog/Drawer post-PR-#138/#140 — and falls back to focusing the\n  // container with tabindex=-1 when no focusable child exists, so the\n  // existing tabIndex={-1} on the inner div still has a job to do in\n  // that fallback path. The trap was MISSING pre-PR-#141: Modal\n  // declared aria-modal=true without any Tab interception, identical\n  // shape to the Drawer gap closed in #138. WCAG 2.4.3.\n  useFocusRestore(isOpen);\n  useFocusTrap(modalRef, isOpen);\n  useAutoFocus(modalRef, isOpen);\n\n  // ESC handling stays inline. Same shape as the Dialog/Drawer parallel\n  // handlers — the shared hooks intentionally don't know about\n  // close-callback semantics.\n  useEffect(() => {\n    if (!isOpen) return;\n\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") {\n        onClose();\n      }\n    };\n\n    document.addEventListener(\"keydown\", handleEscape);\n    return () => {\n      document.removeEventListener(\"keydown\", handleEscape);\n    };\n  }, [isOpen, onClose]);\n\n  // Prevent body scroll when modal is open\n  useEffect(() => {\n    if (isOpen) {\n      document.body.style.overflow = \"hidden\";\n    } else {\n      document.body.style.overflow = \"\";\n    }\n    return () => {\n      document.body.style.overflow = \"\";\n    };\n  }, [isOpen]);\n\n  if (!isOpen) return null;\n\n  const baseClasses = [\n    \"fixed\",\n    \"inset-0\",\n    getZIndexClass(\"modal\"),\n    \"overflow-y-auto\",\n  ];\n\n  const overlayClasses = [\"fixed\", \"inset-0\", \"bg-scrim\", \"transition-opacity\"];\n\n  const modalSizeClasses: Record<NonNullable<Props[\"variant\"]>, string> = {\n    default: \"max-w-md\",\n    large: \"max-w-2xl\",\n    fullscreen: \"max-w-full h-full\",\n  };\n\n  const modalClasses = [\n    \"relative\",\n    \"bg-surface-overlay\",\n    getRadiusClass(\"lg\"),\n    getShadowClass(\"xl\"),\n    getSpacingClass(\"xl\", \"my\"),\n    \"mx-auto\",\n    modalSizeClasses[variant],\n    getSpacingClass(\"lg\", \"p\"),\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  const modalContent = (\n    <div\n      className={baseClasses.join(\" \")}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby={title ? \"modal-title\" : undefined}\n      onClick={(e) => {\n        if (e.target === e.currentTarget) {\n          onClose();\n        }\n      }}\n    >\n      <div className={overlayClasses.join(\" \")} aria-hidden=\"true\" />\n      <div\n        className={`flex min-h-full items-center justify-center ${getSpacingClass(\"base\", \"p\")}`}\n      >\n        <div\n          ref={modalRef}\n          tabIndex={-1}\n          className={modalClasses}\n          onClick={(e) => e.stopPropagation()}\n          {...props}\n        >\n          {title && (\n            <div\n              className={`flex justify-between items-center ${getSpacingClass(\"base\", \"mb\")}`}\n            >\n              <h2\n                id=\"modal-title\"\n                className=\"text-xl font-semibold text-fg-primary\"\n              >\n                {title}\n              </h2>\n              {showCloseButton && (\n                <button\n                  onClick={onClose}\n                  className=\"text-fg-tertiary hover:text-fg-secondary focus:outline-none\"\n                  aria-label=\"Close modal\"\n                >\n                  <X className=\"h-6 w-6\" />\n                </button>\n              )}\n            </div>\n          )}\n          {!title && showCloseButton && (\n            <div\n              className={`flex justify-end ${getSpacingClass(\"base\", \"mb\")}`}\n            >\n              <button\n                onClick={onClose}\n                className=\"text-fg-tertiary hover:text-fg-secondary focus:outline-none\"\n                aria-label=\"Close modal\"\n              >\n                <X className=\"h-6 w-6\" />\n              </button>\n            </div>\n          )}\n          <div className={getSpacingClass(\"base\", \"mb\")}>{children}</div>\n          {footer && (\n            <div\n              className={`flex justify-end ${getSpacingClass(\"sm\", \"gap\")} ${getSpacingClass(\"base\", \"mt\")}`}\n            >\n              {footer}\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n\n  // Portal rendering to avoid z-index issues\n  if (typeof window !== \"undefined\") {\n    return createPortal(modalContent, document.body);\n  }\n\n  return modalContent;\n}\n"],"names":["Modal","_a","_b","isOpen","onClose","title","children","variant","showCloseButton","footer","className","props","__objRest","modalRef","useRef","useFocusRestore","useFocusTrap","useAutoFocus","useEffect","handleEscape","e","baseClasses","getZIndexClass","overlayClasses","modalSizeClasses","modalClasses","getRadiusClass","getShadowClass","getSpacingClass","modalContent","jsxs","jsx","__spreadProps","__spreadValues","X","createPortal"],"mappings":"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"}

package/dist/granular/ui/components/MultiSelect/MultiSelect.js

@@ -0,0 +1,193 @@
+"use client";
+var te = Object.defineProperty, le = Object.defineProperties;
+var se = Object.getOwnPropertyDescriptors;
+var j = Object.getOwnPropertySymbols;
+var ie = Object.prototype.hasOwnProperty, re = Object.prototype.propertyIsEnumerable;
+var K = (c, l, r) => l in c ? te(c, l, { enumerable: !0, configurable: !0, writable: !0, value: r }) : c[l] = r, M = (c, l) => {
+  for (var r in l || (l = {}))
+    ie.call(l, r) && K(c, r, l[r]);
+  if (j)
+    for (var r of j(l))
+      re.call(l, r) && K(c, r, l[r]);
+  return c;
+}, B = (c, l) => le(c, se(l));
+import { jsxs as H, jsx as m } from "react/jsx-runtime";
+import { forwardRef as ne, useId as ue, useState as x, useRef as y, useEffect as ae } from "react";
+import ce from "../../primitives/Chip/Chip.js";
+import { Check as fe } from "lucide-react";
+import de from "../Autocomplete/AutocompleteList.js";
+import { cn as p } from "../../utils/cn.js";
+import { getSpacingClass as D } from "../../tokens/spacing.js";
+import { getRadiusClass as oe } from "../../tokens/radius.js";
+const me = ne(
+  function({
+    options: l,
+    value: r,
+    defaultValue: T = [],
+    onChange: n,
+    onSelect: u,
+    placeholder: U = "Select options...",
+    loading: A = !1,
+    disabled: q = !1,
+    emptyMessage: O = "No options found",
+    maxSelected: R,
+    showSelectAll: z = !1,
+    className: G = "",
+    inputClassName: J = "",
+    size: I = "md",
+    label: N
+  }, v) {
+    const E = ue(), [P, w] = x(T), [h, f] = x(!1), [b, d] = x(-1), [g, V] = x(""), k = y(null), Q = y(null), W = y(null), o = r !== void 0, i = o ? r : P, X = l.filter(
+      (e) => i.includes(e.value)
+    ), a = (() => {
+      let e = l;
+      return g.trim() && (e = l.filter(
+        (t) => t.label.toLowerCase().includes(g.toLowerCase())
+      )), e;
+    })(), Y = a.length > 0, Z = (e) => {
+      const t = e.target.value;
+      V(t), f(!0), d(-1);
+    }, L = (e) => {
+      if (e.disabled || R && i.length >= R && !i.includes(e.value))
+        return;
+      const t = i.includes(e.value) ? i.filter((s) => s !== e.value) : [...i, e.value];
+      o || w(t), n == null || n(t), u == null || u(l.filter((s) => t.includes(s.value))), V("");
+    }, _ = () => {
+      const e = a.filter((s) => !s.disabled).map((s) => s.value), t = [.../* @__PURE__ */ new Set([...i, ...e])];
+      o || w(t), n == null || n(t), u == null || u(l.filter((s) => t.includes(s.value)));
+    }, $ = () => {
+      const e = a.map((s) => s.value), t = i.filter(
+        (s) => !e.includes(s)
+      );
+      o || w(t), n == null || n(t), u == null || u(l.filter((s) => t.includes(s.value)));
+    }, F = (e) => {
+      const t = i.filter((s) => s !== e);
+      o || w(t), n == null || n(t), u == null || u(l.filter((s) => t.includes(s.value)));
+    }, S = (e) => {
+      if (!h || a.length === 0) {
+        (e.key === "ArrowDown" || e.key === "Enter") && f(!0), e.key === "Backspace" && g === "" && i.length > 0 && F(i[i.length - 1]);
+        return;
+      }
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault(), d(
+            (t) => t < a.length - 1 ? t + 1 : 0
+          );
+          break;
+        case "ArrowUp":
+          e.preventDefault(), d(
+            (t) => t > 0 ? t - 1 : a.length - 1
+          );
+          break;
+        case "Enter":
+          e.preventDefault(), b >= 0 && b < a.length && L(a[b]);
+          break;
+        case "Escape":
+          e.preventDefault(), f(!1), d(-1);
+          break;
+      }
+    };
+    ae(() => {
+      if (!h) return;
+      const e = (t) => {
+        k.current && !k.current.contains(t.target) && (f(!1), d(-1), V(""));
+      };
+      return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+    }, [h]);
+    const C = a.filter((e) => !e.disabled).every((e) => i.includes(e.value)), ee = h && (Y || A || O);
+    return /* @__PURE__ */ H("div", { ref: k, className: p("relative", G), children: [
+      /* @__PURE__ */ m(
+        "label",
+        {
+          htmlFor: E,
+          className: p(
+            "block",
+            D("sm", "mb"),
+            "text-sm",
+            "font-medium",
+            "text-fg-primary"
+          ),
+          children: N
+        }
+      ),
+      /* @__PURE__ */ H(
+        "div",
+        {
+          className: p(
+            "flex",
+            "flex-wrap",
+            D("sm", "gap"),
+            D("sm", "p"),
+            "border",
+            "border-line-default",
+            oe("md"),
+            "min-h-10",
+            "focus-within:outline-none",
+            "focus-within:ring-2",
+            "focus-within:ring-offset-2",
+            "focus-within:border-line-brand",
+            "focus-within:ring-line-brand"
+          ),
+          children: [
+            X.map((e) => /* @__PURE__ */ m(
+              ce,
+              {
+                onRemove: () => F(e.value),
+                size: I === "sm" ? "sm" : I === "lg" ? "lg" : "md",
+                children: e.label
+              },
+              e.value
+            )),
+            /* @__PURE__ */ m(
+              "input",
+              {
+                id: E,
+                ref: (e) => {
+                  typeof v == "function" ? v(e) : v && (v.current = e), Q.current = e;
+                },
+                type: "text",
+                value: g,
+                onChange: Z,
+                onKeyDown: S,
+                onFocus: () => f(!0),
+                placeholder: i.length === 0 ? U : "",
+                disabled: q,
+                className: p(
+                  "flex-1",
+                  "min-w-32",
+                  "outline-none",
+                  "bg-transparent",
+                  J
+                )
+              }
+            )
+          ]
+        }
+      ),
+      ee && /* @__PURE__ */ m(
+        de,
+        {
+          ref: W,
+          "aria-label": N,
+          options: a.map((e) => B(M({}, e), {
+            icon: i.includes(e.value) ? /* @__PURE__ */ m(fe, { className: p("h-4", "w-4", "text-fg-brand") }) : e.icon
+          })),
+          highlightedIndex: b,
+          onSelect: L,
+          loading: A,
+          emptyMessage: O,
+          containerRef: k,
+          showSelectAll: z && a.length > 0,
+          allSelected: C,
+          onSelectAll: _,
+          onDeselectAll: $
+        }
+      )
+    ] });
+  }
+);
+me.displayName = "MultiSelect";
+export {
+  me as default
+};
+//# sourceMappingURL=MultiSelect.js.map

package/dist/granular/ui/components/MultiSelect/MultiSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect.js","sources":["../../../../../src/ui/components/MultiSelect/MultiSelect.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, useRef, useEffect, useId, forwardRef } from \"react\";\nimport Chip from \"../../primitives/Chip/Chip\";\nimport { Check } from \"lucide-react\";\nimport AutocompleteList from \"../Autocomplete/AutocompleteList\";\nimport type { AutocompleteOptionType } from \"../Autocomplete/AutocompleteOption\";\nimport { cn } from \"../../utils\";\nimport { getSpacingClass } from \"../../tokens\";\nimport { getRadiusClass } from \"../../tokens\";\n\nexport interface MultiSelectProps {\n  options: AutocompleteOptionType[];\n  value?: string[];\n  defaultValue?: string[];\n  onChange?: (values: string[]) => void;\n  onSelect?: (options: AutocompleteOptionType[]) => void;\n  placeholder?: string;\n  loading?: boolean;\n  disabled?: boolean;\n  emptyMessage?: string;\n  maxSelected?: number;\n  showSelectAll?: boolean;\n  className?: string;\n  inputClassName?: string;\n  size?: \"sm\" | \"md\" | \"lg\";\n  /**\n   * Required label for the multi-select input. Becomes the accessible\n   * name via <label htmlFor>. Make this a real domain term (\"Tags\",\n   * \"Select fruits\"), not the element type (\"multi-select\" / \"input\").\n   */\n  label: string;\n}\n\n/**\n * MultiSelect Component\n *\n * A multi-select component with chips for selected items.\n * Supports keyboard navigation, loading states, and custom filtering.\n *\n * @example\n * ```tsx\n * <MultiSelect\n *   options={[\n *     { value: '1', label: 'Option 1' },\n *     { value: '2', label: 'Option 2' },\n *   ]}\n *   onSelect={(options) => console.log(options)}\n * />\n * ```\n */\nconst MultiSelect = forwardRef<HTMLInputElement, MultiSelectProps>(\n  function MultiSelect(\n    {\n      options,\n      value: controlledValue,\n      defaultValue = [],\n      onChange,\n      onSelect,\n      placeholder = \"Select options...\",\n      loading = false,\n      disabled = false,\n      emptyMessage = \"No options found\",\n      maxSelected,\n      showSelectAll = false,\n      className = \"\",\n      inputClassName = \"\",\n      size = \"md\",\n      label,\n    },\n    ref,\n  ) {\n    const inputId = useId();\n    const [internalValue, setInternalValue] = useState<string[]>(defaultValue);\n    const [isOpen, setIsOpen] = useState(false);\n    const [highlightedIndex, setHighlightedIndex] = useState(-1);\n    const [searchValue, setSearchValue] = useState(\"\");\n    const containerRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const listRef = useRef<HTMLDivElement>(null);\n\n    const isControlled = controlledValue !== undefined;\n    const selectedValues = isControlled ? controlledValue : internalValue;\n\n    // Get selected options\n    const selectedOptions = options.filter((opt) =>\n      selectedValues.includes(opt.value),\n    );\n\n    // Filter options (exclude already selected if needed, or show all)\n    const getFilteredOptions = (): AutocompleteOptionType[] => {\n      let filtered = options;\n\n      if (searchValue.trim()) {\n        filtered = options.filter((option) =>\n          option.label.toLowerCase().includes(searchValue.toLowerCase()),\n        );\n      }\n\n      return filtered;\n    };\n\n    const filteredOptions = getFilteredOptions();\n    const hasOptions = filteredOptions.length > 0;\n\n    // Handle input change\n    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      const newValue = e.target.value;\n      setSearchValue(newValue);\n      setIsOpen(true);\n      setHighlightedIndex(-1);\n    };\n\n    // Handle option toggle\n    const handleToggleOption = (option: AutocompleteOptionType) => {\n      if (option.disabled) return;\n      if (\n        maxSelected &&\n        selectedValues.length >= maxSelected &&\n        !selectedValues.includes(option.value)\n      ) {\n        return;\n      }\n\n      const newValues = selectedValues.includes(option.value)\n        ? selectedValues.filter((v) => v !== option.value)\n        : [...selectedValues, option.value];\n\n      if (!isControlled) {\n        setInternalValue(newValues);\n      }\n\n      onChange?.(newValues);\n      onSelect?.(options.filter((opt) => newValues.includes(opt.value)));\n      setSearchValue(\"\");\n    };\n\n    // Handle select all\n    const handleSelectAll = () => {\n      const allValues = filteredOptions\n        .filter((opt) => !opt.disabled)\n        .map((opt) => opt.value);\n      const newValues = [...new Set([...selectedValues, ...allValues])];\n\n      if (!isControlled) {\n        setInternalValue(newValues);\n      }\n\n      onChange?.(newValues);\n      onSelect?.(options.filter((opt) => newValues.includes(opt.value)));\n    };\n\n    // Handle deselect all\n    const handleDeselectAll = () => {\n      const filteredValues = filteredOptions.map((opt) => opt.value);\n      const newValues = selectedValues.filter(\n        (v) => !filteredValues.includes(v),\n      );\n\n      if (!isControlled) {\n        setInternalValue(newValues);\n      }\n\n      onChange?.(newValues);\n      onSelect?.(options.filter((opt) => newValues.includes(opt.value)));\n    };\n\n    // Handle remove chip\n    const handleRemoveChip = (value: string) => {\n      const newValues = selectedValues.filter((v) => v !== value);\n\n      if (!isControlled) {\n        setInternalValue(newValues);\n      }\n\n      onChange?.(newValues);\n      onSelect?.(options.filter((opt) => newValues.includes(opt.value)));\n    };\n\n    // Handle keyboard navigation\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (!isOpen || filteredOptions.length === 0) {\n        if (e.key === \"ArrowDown\" || e.key === \"Enter\") {\n          setIsOpen(true);\n        }\n        // Remove last chip on backspace\n        if (\n          e.key === \"Backspace\" &&\n          searchValue === \"\" &&\n          selectedValues.length > 0\n        ) {\n          handleRemoveChip(selectedValues[selectedValues.length - 1]);\n        }\n        return;\n      }\n\n      switch (e.key) {\n        case \"ArrowDown\":\n          e.preventDefault();\n          setHighlightedIndex((prev) =>\n            prev < filteredOptions.length - 1 ? prev + 1 : 0,\n          );\n          break;\n        case \"ArrowUp\":\n          e.preventDefault();\n          setHighlightedIndex((prev) =>\n            prev > 0 ? prev - 1 : filteredOptions.length - 1,\n          );\n          break;\n        case \"Enter\":\n          e.preventDefault();\n          if (\n            highlightedIndex >= 0 &&\n            highlightedIndex < filteredOptions.length\n          ) {\n            handleToggleOption(filteredOptions[highlightedIndex]);\n          }\n          break;\n        case \"Escape\":\n          e.preventDefault();\n          setIsOpen(false);\n          setHighlightedIndex(-1);\n          break;\n      }\n    };\n\n    // Close on click outside\n    useEffect(() => {\n      if (!isOpen) return;\n\n      const handleClickOutside = (e: MouseEvent) => {\n        if (\n          containerRef.current &&\n          !containerRef.current.contains(e.target as Node)\n        ) {\n          setIsOpen(false);\n          setHighlightedIndex(-1);\n          setSearchValue(\"\");\n        }\n      };\n\n      document.addEventListener(\"mousedown\", handleClickOutside);\n      return () =>\n        document.removeEventListener(\"mousedown\", handleClickOutside);\n    }, [isOpen]);\n\n    // Check if all filtered options are selected\n    const allSelected = filteredOptions\n      .filter((opt) => !opt.disabled)\n      .every((opt) => selectedValues.includes(opt.value));\n\n    const shouldShowList = isOpen && (hasOptions || loading || emptyMessage);\n\n    return (\n      <div ref={containerRef} className={cn(\"relative\", className)}>\n        <label\n          htmlFor={inputId}\n          className={cn(\n            \"block\",\n            getSpacingClass(\"sm\", \"mb\"),\n            \"text-sm\",\n            \"font-medium\",\n            \"text-fg-primary\",\n          )}\n        >\n          {label}\n        </label>\n        <div\n          className={cn(\n            \"flex\",\n            \"flex-wrap\",\n            getSpacingClass(\"sm\", \"gap\"),\n            getSpacingClass(\"sm\", \"p\"),\n            \"border\",\n            \"border-line-default\",\n            getRadiusClass(\"md\"),\n            \"min-h-10\",\n            \"focus-within:outline-none\",\n            \"focus-within:ring-2\",\n            \"focus-within:ring-offset-2\",\n            \"focus-within:border-line-brand\",\n            \"focus-within:ring-line-brand\",\n          )}\n        >\n          {selectedOptions.map((option) => (\n            <Chip\n              key={option.value}\n              onRemove={() => handleRemoveChip(option.value)}\n              size={size === \"sm\" ? \"sm\" : size === \"lg\" ? \"lg\" : \"md\"}\n            >\n              {option.label}\n            </Chip>\n          ))}\n          <input\n            id={inputId}\n            ref={(node) => {\n              if (typeof ref === \"function\") {\n                ref(node);\n              } else if (ref) {\n                (\n                  ref as React.MutableRefObject<HTMLInputElement | null>\n                ).current = node;\n              }\n              inputRef.current = node;\n            }}\n            type=\"text\"\n            value={searchValue}\n            onChange={handleInputChange}\n            onKeyDown={handleKeyDown}\n            onFocus={() => setIsOpen(true)}\n            placeholder={selectedValues.length === 0 ? placeholder : \"\"}\n            disabled={disabled}\n            className={cn(\n              \"flex-1\",\n              \"min-w-32\",\n              \"outline-none\",\n              \"bg-transparent\",\n              inputClassName,\n            )}\n          />\n        </div>\n\n        {shouldShowList && (\n          <AutocompleteList\n            ref={listRef}\n            // Cascade the input's accessible-name source to the\n            // listbox portal — axe `aria-input-field-name` flags a\n            // role=\"listbox\" without aria-label / aria-labelledby.\n            // MultiSelect's `label` is TS-required, so the listbox\n            // always inherits a name.\n            aria-label={label}\n            options={filteredOptions.map((opt) => ({\n              ...opt,\n              icon: selectedValues.includes(opt.value) ? (\n                <Check className={cn(\"h-4\", \"w-4\", \"text-fg-brand\")} />\n              ) : (\n                opt.icon\n              ),\n            }))}\n            highlightedIndex={highlightedIndex}\n            onSelect={handleToggleOption}\n            loading={loading}\n            emptyMessage={emptyMessage}\n            containerRef={containerRef}\n            showSelectAll={showSelectAll && filteredOptions.length > 0}\n            allSelected={allSelected}\n            onSelectAll={handleSelectAll}\n            onDeselectAll={handleDeselectAll}\n          />\n        )}\n      </div>\n    );\n  },\n);\n\nMultiSelect.displayName = \"MultiSelect\";\n\nexport default MultiSelect;\n"],"names":["MultiSelect","forwardRef","options","controlledValue","defaultValue","onChange","onSelect","placeholder","loading","disabled","emptyMessage","maxSelected","showSelectAll","className","inputClassName","size","label","ref","inputId","useId","internalValue","setInternalValue","useState","isOpen","setIsOpen","highlightedIndex","setHighlightedIndex","searchValue","setSearchValue","containerRef","useRef","inputRef","listRef","isControlled","selectedValues","selectedOptions","opt","filteredOptions","filtered","option","hasOptions","handleInputChange","newValue","handleToggleOption","newValues","v","handleSelectAll","allValues","handleDeselectAll","filteredValues","handleRemoveChip","value","handleKeyDown","prev","useEffect","handleClickOutside","e","allSelected","shouldShowList","jsxs","cn","jsx","getSpacingClass","getRadiusClass","Chip","node","AutocompleteList","__spreadProps","__spreadValues","Check"],"mappings":"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"}