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

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

@@ -0,0 +1,47 @@
+"use client";
+import { jsx as p } from "react/jsx-runtime";
+import { useState as w } from "react";
+import v from "./DrawerContent.js";
+import x from "./DrawerHeader.js";
+import F from "./DrawerFooter.js";
+import { DrawerProvider as H } from "./DrawerContext.js";
+function t({
+  children: i,
+  open: e,
+  defaultOpen: a = !1,
+  onOpenChange: r,
+  position: m = "right",
+  size: f = "md",
+  closeOnOverlayClick: l = !0,
+  closeOnEscape: c = !0
+}) {
+  const [u, n] = w(a), o = e !== void 0, D = o ? e : u, d = (s) => {
+    o || n(s), r == null || r(s);
+  };
+  return /* @__PURE__ */ p(
+    H,
+    {
+      value: {
+        isOpen: D,
+        closeDrawer: () => {
+          d(!1);
+        },
+        position: m,
+        size: f,
+        closeOnOverlayClick: l,
+        closeOnEscape: c
+      },
+      children: i
+    }
+  );
+}
+t.Content = v;
+t.Header = x;
+t.Footer = F;
+export {
+  v as DrawerContent,
+  F as DrawerFooter,
+  x as DrawerHeader,
+  t as default
+};
+//# sourceMappingURL=Drawer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","sources":["../../../../../src/ui/components/Drawer/Drawer.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, type ReactNode } from \"react\";\nimport DrawerContent from \"./DrawerContent\";\nimport DrawerHeader from \"./DrawerHeader\";\nimport DrawerFooter from \"./DrawerFooter\";\nimport { DrawerProvider } from \"./DrawerContext\";\n\nexport type DrawerPosition = \"left\" | \"right\" | \"top\" | \"bottom\";\n\nexport interface DrawerProps {\n  children: ReactNode;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  position?: DrawerPosition;\n  size?: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\n  closeOnOverlayClick?: boolean;\n  closeOnEscape?: boolean;\n}\n\n/**\n * Drawer Component\n *\n * A side drawer component that slides in from different positions.\n * Follows Atomic Design principles as an Atom component.\n * Uses Compound Component pattern.\n *\n * @example\n * ```tsx\n * <Drawer>\n *   <DrawerContent>\n *     <DrawerHeader>\n *       <h2>Title</h2>\n *     </DrawerHeader>\n *     <p>Content goes here</p>\n *     <DrawerFooter>\n *       <Button>Close</Button>\n *     </DrawerFooter>\n *   </DrawerContent>\n * </Drawer>\n * ```\n */\nexport default function Drawer({\n  children,\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  position = \"right\",\n  size = \"md\",\n  closeOnOverlayClick = true,\n  closeOnEscape = true,\n}: DrawerProps) {\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n\n  const isControlled = controlledOpen !== undefined;\n  const isOpen = isControlled ? controlledOpen : internalOpen;\n\n  const setIsOpen = (newOpen: boolean) => {\n    if (!isControlled) {\n      setInternalOpen(newOpen);\n    }\n    onOpenChange?.(newOpen);\n  };\n\n  const closeDrawer = () => {\n    setIsOpen(false);\n  };\n\n  return (\n    <DrawerProvider\n      value={{\n        isOpen,\n        closeDrawer,\n        position,\n        size,\n        closeOnOverlayClick,\n        closeOnEscape,\n      }}\n    >\n      {children}\n    </DrawerProvider>\n  );\n}\n\n// Export sub-components for compound pattern\nDrawer.Content = DrawerContent;\nDrawer.Header = DrawerHeader;\nDrawer.Footer = DrawerFooter;\n\n// Also export as named exports for easier imports\nexport { DrawerContent, DrawerHeader, DrawerFooter };\n"],"names":["Drawer","children","controlledOpen","defaultOpen","onOpenChange","position","size","closeOnOverlayClick","closeOnEscape","internalOpen","setInternalOpen","useState","isControlled","isOpen","setIsOpen","newOpen","jsx","DrawerProvider","DrawerContent","DrawerHeader","DrawerFooter"],"mappings":";;;;;;;AA2CA,SAAwBA,EAAO;AAAA,EAC7B,UAAAC;AAAA,EACA,MAAMC;AAAA,EACN,aAAAC,IAAc;AAAA,EACd,cAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAO;AAAA,EACP,qBAAAC,IAAsB;AAAA,EACtB,eAAAC,IAAgB;AAClB,GAAgB;AACd,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAASR,CAAW,GAEtDS,IAAeV,MAAmB,QAClCW,IAASD,IAAeV,IAAiBO,GAEzCK,IAAY,CAACC,MAAqB;AACtC,IAAKH,KACHF,EAAgBK,CAAO,GAEzBX,KAAA,QAAAA,EAAeW;AAAA,EACjB;AAMA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,QAAAJ;AAAA,QACA,aARc,MAAM;AACxB,UAAAC,EAAU,EAAK;AAAA,QACjB;AAAA,QAOM,UAAAT;AAAA,QACA,MAAAC;AAAA,QACA,qBAAAC;AAAA,QACA,eAAAC;AAAA,MAAA;AAAA,MAGD,UAAAP;AAAA,IAAA;AAAA,EAAA;AAGP;AAGAD,EAAO,UAAUkB;AACjBlB,EAAO,SAASmB;AAChBnB,EAAO,SAASoB;"}

package/dist/granular/ui/components/Drawer/DrawerContent.js

@@ -0,0 +1,140 @@
+"use client";
+import { jsxs as m, Fragment as N, jsx as r } from "react/jsx-runtime";
+import { useId as F, useRef as O, useEffect as f } from "react";
+import { createPortal as j } from "react-dom";
+import { getShadowClass as z } from "../../tokens/shadows.js";
+import { getZIndexClass as g } from "../../tokens/z-index.js";
+import { getAnimationClass as b } from "../../tokens/animations.js";
+import { getSpacingClass as d } from "../../tokens/spacing.js";
+import { useDrawerContext as D } from "./DrawerContext.js";
+import { useFocusRestore as I } from "../../hooks/useFocusRestore.js";
+import { useFocusTrap as R } from "../../hooks/useFocusTrap.js";
+import { useAutoFocus as A } from "../../hooks/useAutoFocus.js";
+import { X as S } from "lucide-react";
+import { Button as T } from "../../primitives/Button/Button.js";
+function _({
+  children: w,
+  className: x = "",
+  showCloseButton: c = !1,
+  title: o,
+  "aria-label": u,
+  "aria-labelledby": i
+}) {
+  const p = F(), n = i != null ? i : o ? p : void 0, {
+    isOpen: t,
+    closeDrawer: s,
+    position: e,
+    size: v,
+    closeOnOverlayClick: y,
+    closeOnEscape: h
+  } = D(), a = O(null);
+  if (I(t), R(a, t), A(a, t), f(() => {
+    if (t && h) {
+      const l = (E) => {
+        E.key === "Escape" && s();
+      };
+      return document.addEventListener("keydown", l), () => document.removeEventListener("keydown", l);
+    }
+  }, [t, h, s]), f(() => {
+    if (t)
+      return document.body.style.overflow = "hidden", () => {
+        document.body.style.overflow = "";
+      };
+  }, [t]), f(() => {
+  }, [t, o, u, n]), !t) return null;
+  const C = {
+    sm: e === "left" || e === "right" ? "w-64" : "h-64",
+    md: e === "left" || e === "right" ? "w-96" : "h-96",
+    lg: e === "left" || e === "right" ? "w-[32rem]" : "h-[32rem]",
+    xl: e === "left" || e === "right" ? "w-[42rem]" : "h-[42rem]",
+    full: e === "left" || e === "right" ? "w-full" : "h-full"
+  }, $ = {
+    left: "left-0 top-0 bottom-0",
+    right: "right-0 top-0 bottom-0",
+    top: "top-0 left-0 right-0",
+    bottom: "bottom-0 left-0 right-0"
+  }, k = /* @__PURE__ */ m(N, { children: [
+    /* @__PURE__ */ r(
+      "div",
+      {
+        className: `
+          fixed
+          inset-0
+          bg-scrim
+          ${g("modal")}
+          ${b("base")}
+          ${t ? "opacity-100" : "opacity-0"}
+        `,
+        onClick: y ? s : void 0,
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ m(
+      "div",
+      {
+        ref: a,
+        className: `
+          fixed
+          ${$[e]}
+          ${C[v]}
+          ${e === "left" || e === "right" ? "max-w-[90vw]" : "max-h-[90vh]"}
+          bg-surface-overlay
+          ${z("xl")}
+          ${g("modal")}
+          ${b("base")}
+          flex
+          flex-col
+          ${x}
+        `,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": n,
+        "aria-label": n ? void 0 : u,
+        onClick: (l) => l.stopPropagation(),
+        children: [
+          (o || c) && /* @__PURE__ */ m(
+            "div",
+            {
+              className: `
+            flex
+            items-center
+            justify-between
+            ${d("base", "px")}
+            ${d("md", "py")}
+            border-b
+            border-line-default
+          `,
+              children: [
+                o ? /* @__PURE__ */ r(
+                  "h2",
+                  {
+                    id: p,
+                    className: "text-lg font-semibold text-fg-primary",
+                    children: o
+                  }
+                ) : /* @__PURE__ */ r("span", {}),
+                c && /* @__PURE__ */ r(
+                  T,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    onClick: s,
+                    className: `h-auto ${d("xs", "p")}`,
+                    "aria-label": "Close drawer",
+                    children: /* @__PURE__ */ r(S, { className: "h-4 w-4" })
+                  }
+                )
+              ]
+            }
+          ),
+          w
+        ]
+      }
+    )
+  ] });
+  return typeof window != "undefined" ? j(k, document.body) : null;
+}
+export {
+  _ as default
+};
+//# sourceMappingURL=DrawerContent.js.map

package/dist/granular/ui/components/Drawer/DrawerContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerContent.js","sources":["../../../../../src/ui/components/Drawer/DrawerContent.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useId, useRef, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { getShadowClass } from \"../../tokens/shadows\";\nimport { getZIndexClass } from \"../../tokens/z-index\";\nimport { getAnimationClass } from \"../../tokens/animations\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { useDrawerContext } from \"./DrawerContext\";\nimport { useFocusRestore } from \"../../hooks/useFocusRestore\";\nimport { useFocusTrap } from \"../../hooks/useFocusTrap\";\nimport { useAutoFocus } from \"../../hooks/useAutoFocus\";\nimport { X } from \"lucide-react\";\nimport { Button } from \"../../primitives\";\n\nexport interface DrawerContentProps {\n  children: ReactNode;\n  className?: string;\n  showCloseButton?: boolean;\n  /**\n   * Visible title rendered as a heading at the top of the drawer AND\n   * wired as the dialog's accessible name via `aria-labelledby`. Use\n   * this for the canonical case (\"the drawer has a title\").\n   */\n  title?: string;\n  /**\n   * Invisible accessible name. Use when the drawer has no visible\n   * title (e.g. a content-only side panel). One of `title`,\n   * `aria-label`, or `aria-labelledby` MUST be present — without any,\n   * `role=\"dialog\"` has no accessible name and axe `aria-dialog-name`\n   * (serious) flags it. A dev-only warning fires when all three are\n   * missing.\n   */\n  \"aria-label\"?: string;\n  /**\n   * Override path: point at an id the consumer manages externally\n   * (typically a heading inside a `<DrawerHeader>` they laid out\n   * themselves). Takes precedence over `title` (which would otherwise\n   * generate its own id).\n   */\n  \"aria-labelledby\"?: string;\n}\n\n/**\n * DrawerContent Component\n *\n * The main content container for the drawer.\n * Renders in a portal with overlay.\n *\n * Accessible name — one of three paths:\n *   1. `title=\"...\"` → auto-renders a heading at the top and wires\n *      `aria-labelledby` to it.\n *   2. `aria-label=\"...\"` → invisible name on the dialog.\n *   3. `aria-labelledby=\"external-id\"` → consumer-managed id (typically\n *      a heading they place inside `<DrawerHeader>`).\n *\n * If all three are absent, the dialog has no accessible name —\n * a dev-only `console.warn` fires.\n */\nexport default function DrawerContent({\n  children,\n  className = \"\",\n  showCloseButton = false,\n  title,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledByProp,\n}: DrawerContentProps) {\n  const autoTitleId = useId();\n  // Precedence: explicit aria-labelledby > auto-generated from title.\n  const resolvedLabelledBy =\n    ariaLabelledByProp ?? (title ? autoTitleId : undefined);\n  const {\n    isOpen,\n    closeDrawer,\n    position,\n    size,\n    closeOnOverlayClick,\n    closeOnEscape,\n  } = useDrawerContext();\n\n  // Modal focus contract: trap + auto-focus + restore. The drawer ships\n  // role=\"dialog\" aria-modal=\"true\" — WAI-ARIA's modal pattern requires\n  // focus to enter on open, cycle within the surface while open, and\n  // return to the opening element on close. Prior to Phase 3 PR 2 the\n  // drawer declared the role without honouring any of these — a real\n  // WCAG 2.4.3 gap. The three hooks compose deliberately:\n  //   - useFocusRestore snapshots document.activeElement on the rising\n  //     edge (before useAutoFocus moves focus inside) and restores on\n  //     the falling edge.\n  //   - useFocusTrap cycles Tab/Shift+Tab within contentRef and pulls\n  //     errant focus back inside.\n  //   - useAutoFocus moves focus to the first focusable child (or the\n  //     panel itself, with tabindex=-1) on the rising edge, deferred\n  //     via setTimeout(0) to run after React's commit.\n  const contentRef = useRef<HTMLDivElement>(null);\n  useFocusRestore(isOpen);\n  useFocusTrap(contentRef, isOpen);\n  useAutoFocus(contentRef, isOpen);\n\n  // Close on escape\n  useEffect(() => {\n    if (isOpen && closeOnEscape) {\n      const handleEscape = (e: KeyboardEvent) => {\n        if (e.key === \"Escape\") {\n          closeDrawer();\n        }\n      };\n      document.addEventListener(\"keydown\", handleEscape);\n      return () => document.removeEventListener(\"keydown\", handleEscape);\n    }\n  }, [isOpen, closeOnEscape, closeDrawer]);\n\n  // Prevent body scroll when open\n  useEffect(() => {\n    if (isOpen) {\n      document.body.style.overflow = \"hidden\";\n      return () => {\n        document.body.style.overflow = \"\";\n      };\n    }\n  }, [isOpen]);\n\n  // Dev-only accessible-name warning: a `role=\"dialog\"` without\n  // aria-label/aria-labelledby fails axe `aria-dialog-name`. The fix is\n  // structural — supply one of the three paths documented on the props\n  // — and the warning fires when none of them are present. Same shape\n  // as the Textarea 6c guard; the Drawer is a public dialog surface,\n  // a silent nameless `role=\"dialog\"` is the defect we close here.\n  useEffect(() => {\n    if (!import.meta.env.DEV) return;\n    if (!isOpen) return;\n    if (title || ariaLabel || resolvedLabelledBy) return;\n    console.warn(\n      '[DrawerContent] Missing accessible name. Provide `title`, `aria-label`, or `aria-labelledby` — `role=\"dialog\"` without a name fails axe `aria-dialog-name`.',\n    );\n  }, [isOpen, title, ariaLabel, resolvedLabelledBy]);\n\n  if (!isOpen) return null;\n\n  const sizeClasses = {\n    sm: position === \"left\" || position === \"right\" ? \"w-64\" : \"h-64\",\n    md: position === \"left\" || position === \"right\" ? \"w-96\" : \"h-96\",\n    lg: position === \"left\" || position === \"right\" ? \"w-[32rem]\" : \"h-[32rem]\",\n    xl: position === \"left\" || position === \"right\" ? \"w-[42rem]\" : \"h-[42rem]\",\n    full: position === \"left\" || position === \"right\" ? \"w-full\" : \"h-full\",\n  };\n\n  const positionClasses = {\n    left: \"left-0 top-0 bottom-0\",\n    right: \"right-0 top-0 bottom-0\",\n    top: \"top-0 left-0 right-0\",\n    bottom: \"bottom-0 left-0 right-0\",\n  };\n\n  const drawerContent = (\n    <>\n      {/* Overlay */}\n      <div\n        className={`\n          fixed\n          inset-0\n          bg-scrim\n          ${getZIndexClass(\"modal\")}\n          ${getAnimationClass(\"base\")}\n          ${isOpen ? \"opacity-100\" : \"opacity-0\"}\n        `}\n        onClick={closeOnOverlayClick ? closeDrawer : undefined}\n        aria-hidden=\"true\"\n      />\n\n      {/* Drawer */}\n      <div\n        ref={contentRef}\n        className={`\n          fixed\n          ${positionClasses[position]}\n          ${sizeClasses[size]}\n          ${position === \"left\" || position === \"right\" ? \"max-w-[90vw]\" : \"max-h-[90vh]\"}\n          bg-surface-overlay\n          ${getShadowClass(\"xl\")}\n          ${getZIndexClass(\"modal\")}\n          ${getAnimationClass(\"base\")}\n          flex\n          flex-col\n          ${className}\n        `}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={resolvedLabelledBy}\n        aria-label={resolvedLabelledBy ? undefined : ariaLabel}\n        onClick={(e) => e.stopPropagation()}\n      >\n        {(title || showCloseButton) && (\n          <div\n            className={`\n            flex\n            items-center\n            justify-between\n            ${getSpacingClass(\"base\", \"px\")}\n            ${getSpacingClass(\"md\", \"py\")}\n            border-b\n            border-line-default\n          `}\n          >\n            {title ? (\n              <h2\n                id={autoTitleId}\n                className=\"text-lg font-semibold text-fg-primary\"\n              >\n                {title}\n              </h2>\n            ) : (\n              <span />\n            )}\n            {showCloseButton && (\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                onClick={closeDrawer}\n                className={`h-auto ${getSpacingClass(\"xs\", \"p\")}`}\n                aria-label=\"Close drawer\"\n              >\n                <X className=\"h-4 w-4\" />\n              </Button>\n            )}\n          </div>\n        )}\n        {children}\n      </div>\n    </>\n  );\n\n  return typeof window !== \"undefined\"\n    ? createPortal(drawerContent, document.body)\n    : null;\n}\n"],"names":["DrawerContent","children","className","showCloseButton","title","ariaLabel","ariaLabelledByProp","autoTitleId","useId","resolvedLabelledBy","isOpen","closeDrawer","position","size","closeOnOverlayClick","closeOnEscape","useDrawerContext","contentRef","useRef","useFocusRestore","useFocusTrap","useAutoFocus","useEffect","handleEscape","e","sizeClasses","positionClasses","drawerContent","jsxs","Fragment","jsx","getZIndexClass","getAnimationClass","getShadowClass","getSpacingClass","Button","X","createPortal"],"mappings":"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"}

package/dist/granular/ui/components/Drawer/DrawerContext.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as o } from "react/jsx-runtime";
+import { useContext as n, createContext as i } from "react";
+const e = i(void 0);
+function c({
+  children: r,
+  value: t
+}) {
+  return /* @__PURE__ */ o(e.Provider, { value: t, children: r });
+}
+function w() {
+  const r = n(e);
+  if (!r)
+    throw new Error("Drawer components must be used within Drawer");
+  return r;
+}
+export {
+  c as DrawerProvider,
+  w as useDrawerContext
+};
+//# sourceMappingURL=DrawerContext.js.map

package/dist/granular/ui/components/Drawer/DrawerContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerContext.js","sources":["../../../../../src/ui/components/Drawer/DrawerContext.tsx"],"sourcesContent":["\"use client\";\n\n/* eslint-disable react-refresh/only-export-components */\nimport { createContext, useContext, type ReactNode } from \"react\";\nimport type { DrawerPosition } from \"./Drawer\";\n\nexport interface DrawerContextValue {\n  isOpen: boolean;\n  closeDrawer: () => void;\n  position: DrawerPosition;\n  size: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\n  closeOnOverlayClick: boolean;\n  closeOnEscape: boolean;\n}\n\nconst DrawerContext = createContext<DrawerContextValue | undefined>(undefined);\n\nexport function DrawerProvider({\n  children,\n  value,\n}: {\n  children: ReactNode;\n  value: DrawerContextValue;\n}) {\n  return (\n    <DrawerContext.Provider value={value}>{children}</DrawerContext.Provider>\n  );\n}\n\nexport function useDrawerContext() {\n  const context = useContext(DrawerContext);\n  if (!context) {\n    throw new Error(\"Drawer components must be used within Drawer\");\n  }\n  return context;\n}\n"],"names":["DrawerContext","createContext","DrawerProvider","children","value","jsx","useDrawerContext","context","useContext"],"mappings":";;;AAeA,MAAMA,IAAgBC,EAA8C,MAAS;AAEtE,SAASC,EAAe;AAAA,EAC7B,UAAAC;AAAA,EACA,OAAAC;AACF,GAGG;AACD,SACE,gBAAAC,EAACL,EAAc,UAAd,EAAuB,OAAAI,GAAe,UAAAD,EAAA,CAAS;AAEpD;AAEO,SAASG,IAAmB;AACjC,QAAMC,IAAUC,EAAWR,CAAa;AACxC,MAAI,CAACO;AACH,UAAM,IAAI,MAAM,8CAA8C;AAEhE,SAAOA;AACT;"}

package/dist/granular/ui/components/Drawer/DrawerFooter.js

@@ -0,0 +1,53 @@
+"use client";
+var u = Object.defineProperty, c = Object.defineProperties;
+var g = Object.getOwnPropertyDescriptors;
+var a = Object.getOwnPropertySymbols;
+var l = Object.prototype.hasOwnProperty, f = Object.prototype.propertyIsEnumerable;
+var i = (e, r, t) => r in e ? u(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t, n = (e, r) => {
+  for (var t in r || (r = {}))
+    l.call(r, t) && i(e, t, r[t]);
+  if (a)
+    for (var t of a(r))
+      f.call(r, t) && i(e, t, r[t]);
+  return e;
+}, d = (e, r) => c(e, g(r));
+var m = (e, r) => {
+  var t = {};
+  for (var o in e)
+    l.call(e, o) && r.indexOf(o) < 0 && (t[o] = e[o]);
+  if (e != null && a)
+    for (var o of a(e))
+      r.indexOf(o) < 0 && f.call(e, o) && (t[o] = e[o]);
+  return t;
+};
+import { jsx as x } from "react/jsx-runtime";
+import { getSpacingClass as p } from "../../tokens/spacing.js";
+function v(o) {
+  var s = o, {
+    children: e,
+    className: r = ""
+  } = s, t = m(s, [
+    "children",
+    "className"
+  ]);
+  return /* @__PURE__ */ x(
+    "div",
+    d(n({
+      className: `
+        ${p("lg", "p")}
+        border-t
+        border-line-default
+        flex
+        justify-end
+        ${p("sm", "gap")}
+        ${r}
+      `
+    }, t), {
+      children: e
+    })
+  );
+}
+export {
+  v as default
+};
+//# sourceMappingURL=DrawerFooter.js.map

package/dist/granular/ui/components/Drawer/DrawerFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerFooter.js","sources":["../../../../../src/ui/components/Drawer/DrawerFooter.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactNode, type HTMLAttributes } from \"react\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\n\nexport interface DrawerFooterProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n}\n\n/**\n * DrawerFooter Component\n *\n * Footer section for drawer content, typically contains action buttons.\n *\n * @example\n * ```tsx\n * <DrawerFooter>\n *   <Button>Save</Button>\n *   <Button variant=\"outline\">Cancel</Button>\n * </DrawerFooter>\n * ```\n */\nexport default function DrawerFooter({\n  children,\n  className = \"\",\n  ...props\n}: DrawerFooterProps) {\n  return (\n    <div\n      className={`\n        ${getSpacingClass(\"lg\", \"p\")}\n        border-t\n        border-line-default\n        flex\n        justify-end\n        ${getSpacingClass(\"sm\", \"gap\")}\n        ${className}\n      `}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":["DrawerFooter","_a","_b","children","className","props","__objRest","jsx","__spreadProps","__spreadValues","getSpacingClass"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAsBA,SAAwBA,EAAaC,GAIf;AAJe,MAAAC,IAAAD,GACnC;AAAA,cAAAE;AAAA,IACA,WAAAC,IAAY;AAAA,MAFuBF,GAGhCG,IAAAC,EAHgCJ,GAGhC;AAAA,IAFH;AAAA,IACA;AAAA;AAGA,SACE,gBAAAK;AAAA,IAAC;AAAA,IAAAC,EAAAC,EAAA;AAAA,MACC,WAAW;AAAA,UACPC,EAAgB,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,UAK1BA,EAAgB,MAAM,KAAK,CAAC;AAAA,UAC5BN,CAAS;AAAA;AAAA,OAETC,IAVL;AAAA,MAYE,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/granular/ui/components/Drawer/DrawerHeader.js

@@ -0,0 +1,50 @@
+"use client";
+var p = Object.defineProperty, u = Object.defineProperties;
+var c = Object.getOwnPropertyDescriptors;
+var o = Object.getOwnPropertySymbols;
+var s = Object.prototype.hasOwnProperty, d = Object.prototype.propertyIsEnumerable;
+var l = (e, r, a) => r in e ? p(e, r, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[r] = a, n = (e, r) => {
+  for (var a in r || (r = {}))
+    s.call(r, a) && l(e, a, r[a]);
+  if (o)
+    for (var a of o(r))
+      d.call(r, a) && l(e, a, r[a]);
+  return e;
+}, f = (e, r) => u(e, c(r));
+var m = (e, r) => {
+  var a = {};
+  for (var t in e)
+    s.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 && d.call(e, t) && (a[t] = e[t]);
+  return a;
+};
+import { jsx as b } from "react/jsx-runtime";
+import { getSpacingClass as g } from "../../tokens/spacing.js";
+function v(t) {
+  var i = t, {
+    children: e,
+    className: r = ""
+  } = i, a = m(i, [
+    "children",
+    "className"
+  ]);
+  return /* @__PURE__ */ b(
+    "div",
+    f(n({
+      className: `
+        ${g("lg", "p")}
+        border-b
+        border-line-default
+        ${r}
+      `
+    }, a), {
+      children: e
+    })
+  );
+}
+export {
+  v as default
+};
+//# sourceMappingURL=DrawerHeader.js.map

package/dist/granular/ui/components/Drawer/DrawerHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerHeader.js","sources":["../../../../../src/ui/components/Drawer/DrawerHeader.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactNode, type HTMLAttributes } from \"react\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\n\nexport interface DrawerHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n}\n\n/**\n * DrawerHeader Component\n *\n * Header section for drawer content.\n *\n * @example\n * ```tsx\n * <DrawerHeader>\n *   <h2>Drawer Title</h2>\n * </DrawerHeader>\n * ```\n */\nexport default function DrawerHeader({\n  children,\n  className = \"\",\n  ...props\n}: DrawerHeaderProps) {\n  return (\n    <div\n      className={`\n        ${getSpacingClass(\"lg\", \"p\")}\n        border-b\n        border-line-default\n        ${className}\n      `}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":["DrawerHeader","_a","_b","children","className","props","__objRest","jsx","__spreadProps","__spreadValues","getSpacingClass"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAqBA,SAAwBA,EAAaC,GAIf;AAJe,MAAAC,IAAAD,GACnC;AAAA,cAAAE;AAAA,IACA,WAAAC,IAAY;AAAA,MAFuBF,GAGhCG,IAAAC,EAHgCJ,GAGhC;AAAA,IAFH;AAAA,IACA;AAAA;AAGA,SACE,gBAAAK;AAAA,IAAC;AAAA,IAAAC,EAAAC,EAAA;AAAA,MACC,WAAW;AAAA,UACPC,EAAgB,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA,UAG1BN,CAAS;AAAA;AAAA,OAETC,IAPL;AAAA,MASE,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP;"}

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

@@ -0,0 +1,243 @@
+"use client";
+var Q = Object.defineProperty, X = Object.defineProperties;
+var Y = Object.getOwnPropertyDescriptors;
+var x = Object.getOwnPropertySymbols;
+var L = Object.prototype.hasOwnProperty, j = Object.prototype.propertyIsEnumerable;
+var z = (n, r, s) => r in n ? Q(n, r, { enumerable: !0, configurable: !0, writable: !0, value: s }) : n[r] = s, H = (n, r) => {
+  for (var s in r || (r = {}))
+    L.call(r, s) && z(n, s, r[s]);
+  if (x)
+    for (var s of x(r))
+      j.call(r, s) && z(n, s, r[s]);
+  return n;
+}, F = (n, r) => X(n, Y(r));
+var P = (n, r) => {
+  var s = {};
+  for (var l in n)
+    L.call(n, l) && r.indexOf(l) < 0 && (s[l] = n[l]);
+  if (n != null && x)
+    for (var l of x(n))
+      r.indexOf(l) < 0 && j.call(n, l) && (s[l] = n[l]);
+  return s;
+};
+import { jsx as v, jsxs as U, Fragment as Z } from "react/jsx-runtime";
+import V, { useState as W, useRef as k, useId as ee, useEffect as _ } from "react";
+import { mergeRefs as ne } from "../../utils/mergeRefs.js";
+import { cn as f } from "../../utils/cn.js";
+import { getTypographySize as re } from "../../tokens/typography.js";
+import { getSpacingClass as w } from "../../tokens/spacing.js";
+import { getShadowClass as te } from "../../tokens/shadows.js";
+import { getRadiusClass as ae } from "../../tokens/radius.js";
+function be(oe) {
+  var C = oe, {
+    trigger: n,
+    items: r,
+    align: s = "right",
+    variant: l = "default",
+    className: q = "",
+    "aria-label": D
+  } = C, B = P(C, [
+    "trigger",
+    "items",
+    "align",
+    "variant",
+    "className",
+    "aria-label"
+  ]);
+  const [c, p] = W(!1), [u, d] = W(-1), y = k(null), g = k(null), E = k(null), m = k([]), R = ee(), b = `dropdown-menu-${R}`, I = `dropdown-trigger-${R}`;
+  _(() => {
+    const e = (t) => {
+      y.current && !y.current.contains(t.target) && (p(!1), d(-1));
+    };
+    return c && (document.addEventListener("mousedown", e), setTimeout(() => {
+      var a;
+      const t = r.findIndex((i) => !i.disabled);
+      t >= 0 && (d(t), (a = m.current[t]) == null || a.focus());
+    }, 0)), () => {
+      document.removeEventListener("mousedown", e);
+    };
+  }, [c, r]), _(() => {
+    if (!c) return;
+    const e = (a) => {
+      var N, O, S, A;
+      const i = r.map((o, M) => ({ item: o, index: M })).filter(({ item: o }) => !o.disabled), h = i.findIndex(
+        ({ index: o }) => o === u
+      );
+      switch (a.key) {
+        case "ArrowDown": {
+          a.preventDefault();
+          const o = h < i.length - 1 ? i[h + 1].index : i[0].index;
+          d(o), (N = m.current[o]) == null || N.focus();
+          break;
+        }
+        case "ArrowUp": {
+          a.preventDefault();
+          const o = h > 0 ? i[h - 1].index : i[i.length - 1].index;
+          d(o), (O = m.current[o]) == null || O.focus();
+          break;
+        }
+        case "Home": {
+          a.preventDefault();
+          const o = i[0].index;
+          d(o), (S = m.current[o]) == null || S.focus();
+          break;
+        }
+        case "End": {
+          a.preventDefault();
+          const o = i[i.length - 1].index;
+          d(o), (A = m.current[o]) == null || A.focus();
+          break;
+        }
+        case "Enter":
+        case " ":
+          a.preventDefault(), u >= 0 && !r[u].disabled && K(r[u]);
+          break;
+        case "Escape":
+          a.preventDefault(), p(!1), d(-1), setTimeout(() => {
+            var o;
+            (o = g.current) == null || o.focus();
+          }, 0);
+          break;
+      }
+    }, t = E.current;
+    if (t) {
+      const a = e;
+      return t.addEventListener("keydown", a), () => {
+        t.removeEventListener("keydown", a);
+      };
+    }
+  }, [c, u, r]);
+  const K = (e) => {
+    e.disabled || (e.onClick(), p(!1), d(-1), setTimeout(() => {
+      var t;
+      (t = g.current) == null || t.focus();
+    }, 0));
+  }, T = () => {
+    p(!c), d(-1);
+  }, $ = (e) => {
+    (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") && (e.preventDefault(), p(!0));
+  }, G = s === "right" ? "right-0" : "left-0", J = V.isValidElement(n) ? V.cloneElement(n, {
+    onClick: (e) => {
+      var t, a;
+      T(), (a = (t = n.props).onClick) == null || a.call(t, e);
+    },
+    onKeyDown: (e) => {
+      var t, a;
+      $(e), (a = (t = n.props).onKeyDown) == null || a.call(t, e);
+    },
+    "aria-haspopup": "menu",
+    "aria-expanded": c,
+    "aria-controls": b,
+    "aria-label": D || n.props["aria-label"] || "Open menu",
+    id: I,
+    ref: ne(g, n.props.ref)
+  }) : /* @__PURE__ */ v(
+    "div",
+    {
+      ref: (e) => {
+        g.current = e;
+      },
+      onClick: T,
+      onKeyDown: $,
+      role: "button",
+      tabIndex: 0,
+      "aria-haspopup": "menu",
+      "aria-expanded": c,
+      "aria-controls": b,
+      "aria-label": D || "Open menu",
+      id: I,
+      children: n
+    }
+  );
+  return /* @__PURE__ */ U(
+    "div",
+    F(H({
+      className: f("relative", "inline-block", q),
+      ref: y
+    }, B), {
+      children: [
+        J,
+        c && /* @__PURE__ */ U(Z, { children: [
+          /* @__PURE__ */ v(
+            "div",
+            {
+              className: f("fixed", "inset-0", "z-10"),
+              onClick: () => {
+                p(!1), d(-1);
+              },
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ v(
+            "div",
+            {
+              ref: E,
+              id: b,
+              className: f(
+                "absolute",
+                // micro-z: dropdown content above its own backdrop
+                "z-20",
+                w("sm", "mt"),
+                "w-48",
+                // Fixed width for dropdown menu - justified as layout constraint
+                ae("md"),
+                te("lg"),
+                "bg-surface-overlay",
+                "ring-1",
+                "ring-line-strong",
+                "ring-opacity-5",
+                G
+              ),
+              role: "menu",
+              "aria-orientation": "vertical",
+              "aria-labelledby": I,
+              "aria-activedescendant": u >= 0 ? `${b}-item-${u}` : void 0,
+              children: /* @__PURE__ */ v("div", { className: f(w("xs", "py")), role: "none", children: r.map((e, t) => {
+                const a = f(
+                  "block",
+                  w("base", "px"),
+                  w("xs", "py"),
+                  re("bodySmall"),
+                  "w-full",
+                  "text-left",
+                  "focus:outline-none",
+                  e.disabled ? f("text-fg-disabled", "cursor-not-allowed", "opacity-50") : e.variant === "danger" ? f(
+                    "text-error-dark",
+                    "hover:bg-error-bg-emphasis",
+                    "focus:bg-error-bg-emphasis"
+                  ) : f(
+                    "text-fg-primary",
+                    "hover:bg-surface-hover",
+                    "focus:bg-surface-hover"
+                  )
+                );
+                return /* @__PURE__ */ v(
+                  "button",
+                  {
+                    id: `${b}-item-${t}`,
+                    ref: (i) => {
+                      m.current[t] = i;
+                    },
+                    type: "button",
+                    className: a,
+                    onClick: () => K(e),
+                    disabled: e.disabled,
+                    role: "menuitem",
+                    "aria-disabled": e.disabled,
+                    tabIndex: e.disabled ? -1 : u === t ? 0 : -1,
+                    children: e.label
+                  },
+                  t
+                );
+              }) })
+            }
+          )
+        ] })
+      ]
+    })
+  );
+}
+export {
+  be as default
+};
+//# sourceMappingURL=Dropdown.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.js","sources":["../../../../../src/ui/components/Dropdown/Dropdown.tsx"],"sourcesContent":["\"use client\";\n\nimport type { HTMLAttributes, ReactNode, KeyboardEvent } from \"react\";\nimport React, { useState, useRef, useEffect, useId } from \"react\";\nimport { cn, mergeRefs } from \"../../utils\";\nimport {\n  getRadiusClass,\n  getSpacingClass,\n  getTypographySize,\n  getShadowClass,\n} from \"../../tokens\";\n\nexport interface DropdownItem {\n  label: string;\n  onClick: () => void;\n  disabled?: boolean;\n  variant?: \"default\" | \"danger\";\n}\n\n/**\n * Shape of the props the trigger element accepts when cloned. Limits\n * what cloneElement is allowed to override and what `props.ref` is\n * permitted to be — both essential for React 19's tighter\n * ReactElement<unknown> typing.\n */\ntype TriggerChildProps = {\n  onClick?: (e: React.MouseEvent) => void;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  \"aria-label\"?: string;\n  \"aria-haspopup\"?: React.AriaAttributes[\"aria-haspopup\"];\n  \"aria-expanded\"?: React.AriaAttributes[\"aria-expanded\"];\n  \"aria-controls\"?: React.AriaAttributes[\"aria-controls\"];\n  id?: string;\n  ref?: React.Ref<HTMLElement>;\n};\n\nexport interface DropdownProps extends HTMLAttributes<HTMLDivElement> {\n  trigger: ReactNode;\n  items: DropdownItem[];\n  align?: \"left\" | \"right\";\n  variant?: \"default\" | \"minimal\";\n  \"aria-label\"?: string;\n}\n\n/**\n * Dropdown Component\n *\n * A dropdown menu component for displaying actions and options.\n * Follows Atomic Design principles as a Molecule component.\n *\n * @example\n * ```tsx\n * <Dropdown\n *   trigger={<Button>Actions</Button>}\n *   items={[\n *     { label: \"Edit\", onClick: () => handleEdit() },\n *     { label: \"Delete\", onClick: () => handleDelete(), variant: \"danger\" },\n *   ]}\n * />\n * ```\n */\nexport default function Dropdown({\n  trigger,\n  items,\n  align = \"right\",\n  variant: _variant = \"default\",\n  className = \"\",\n  \"aria-label\": ariaLabel,\n  ...props\n}: DropdownProps) {\n  const [isOpen, setIsOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number>(-1);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLElement | null>(null);\n  const menuRef = useRef<HTMLDivElement>(null);\n  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n  // Stable per-instance IDs. Math.random() at the call site regenerated\n  // both IDs on every render, so aria-controls / aria-labelledby (which\n  // pair the trigger with the menu) silently desynced across renders.\n  // useId is SSR-safe and stable per component instance.\n  const reactId = useId();\n  const menuId = `dropdown-menu-${reactId}`;\n  const triggerId = `dropdown-trigger-${reactId}`;\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (\n        dropdownRef.current &&\n        !dropdownRef.current.contains(event.target as Node)\n      ) {\n        setIsOpen(false);\n        setActiveIndex(-1);\n      }\n    };\n\n    if (isOpen) {\n      document.addEventListener(\"mousedown\", handleClickOutside);\n      // Focus first item when opening\n      setTimeout(() => {\n        const firstEnabledIndex = items.findIndex((item) => !item.disabled);\n        if (firstEnabledIndex >= 0) {\n          setActiveIndex(firstEnabledIndex);\n          itemRefs.current[firstEnabledIndex]?.focus();\n        }\n      }, 0);\n    }\n\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n    };\n  }, [isOpen, items]);\n\n  // Keyboard navigation\n  useEffect(() => {\n    if (!isOpen) return;\n\n    const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n      const enabledItems = items\n        .map((item, index) => ({ item, index }))\n        .filter(({ item }) => !item.disabled);\n      const currentEnabledIndex = enabledItems.findIndex(\n        ({ index }) => index === activeIndex,\n      );\n\n      switch (e.key) {\n        case \"ArrowDown\": {\n          e.preventDefault();\n          const nextIndex =\n            currentEnabledIndex < enabledItems.length - 1\n              ? enabledItems[currentEnabledIndex + 1].index\n              : enabledItems[0].index;\n          setActiveIndex(nextIndex);\n          itemRefs.current[nextIndex]?.focus();\n          break;\n        }\n        case \"ArrowUp\": {\n          e.preventDefault();\n          const prevIndex =\n            currentEnabledIndex > 0\n              ? enabledItems[currentEnabledIndex - 1].index\n              : enabledItems[enabledItems.length - 1].index;\n          setActiveIndex(prevIndex);\n          itemRefs.current[prevIndex]?.focus();\n          break;\n        }\n        case \"Home\": {\n          e.preventDefault();\n          const firstIndex = enabledItems[0].index;\n          setActiveIndex(firstIndex);\n          itemRefs.current[firstIndex]?.focus();\n          break;\n        }\n        case \"End\": {\n          e.preventDefault();\n          const lastIndex = enabledItems[enabledItems.length - 1].index;\n          setActiveIndex(lastIndex);\n          itemRefs.current[lastIndex]?.focus();\n          break;\n        }\n        case \"Enter\":\n        case \" \":\n          e.preventDefault();\n          if (activeIndex >= 0 && !items[activeIndex].disabled) {\n            handleItemClick(items[activeIndex]);\n          }\n          break;\n        case \"Escape\":\n          e.preventDefault();\n          setIsOpen(false);\n          setActiveIndex(-1);\n          // Restore focus to trigger after closing\n          setTimeout(() => {\n            triggerRef.current?.focus();\n          }, 0);\n          break;\n      }\n    };\n\n    const menuElement = menuRef.current;\n    if (menuElement) {\n      const typedHandleKeyDown = handleKeyDown as unknown as (e: Event) => void;\n      menuElement.addEventListener(\"keydown\", typedHandleKeyDown);\n      return () => {\n        menuElement.removeEventListener(\"keydown\", typedHandleKeyDown);\n      };\n    }\n  }, [isOpen, activeIndex, items]);\n\n  const handleItemClick = (item: DropdownItem) => {\n    if (!item.disabled) {\n      item.onClick();\n      setIsOpen(false);\n      setActiveIndex(-1);\n      // Restore focus to trigger after item selection\n      setTimeout(() => {\n        triggerRef.current?.focus();\n      }, 0);\n    }\n  };\n\n  const handleTriggerClick = () => {\n    setIsOpen(!isOpen);\n    setActiveIndex(-1);\n  };\n\n  const handleTriggerKeyDown = (e: KeyboardEvent) => {\n    if (e.key === \"Enter\" || e.key === \" \" || e.key === \"ArrowDown\") {\n      e.preventDefault();\n      setIsOpen(true);\n    }\n  };\n\n  const alignClasses = align === \"right\" ? \"right-0\" : \"left-0\";\n\n  // Clone trigger to add accessibility props. Handles both Button and\n  // native elements. React 19 surfaces consumer-supplied refs via\n  // `child.props.ref` (no longer on the element itself), so mergeRefs\n  // composes the parent's internal triggerRef with whatever the\n  // consumer attached.\n  const triggerWithProps = React.isValidElement<TriggerChildProps>(trigger) ? (\n    React.cloneElement(trigger, {\n      onClick: (e: React.MouseEvent) => {\n        handleTriggerClick();\n        trigger.props.onClick?.(e);\n      },\n      onKeyDown: (e: React.KeyboardEvent) => {\n        handleTriggerKeyDown(e);\n        trigger.props.onKeyDown?.(e);\n      },\n      \"aria-haspopup\": \"menu\",\n      \"aria-expanded\": isOpen,\n      \"aria-controls\": menuId,\n      \"aria-label\": ariaLabel || trigger.props[\"aria-label\"] || \"Open menu\",\n      id: triggerId,\n      ref: mergeRefs<HTMLElement>(triggerRef, trigger.props.ref),\n    })\n  ) : (\n    <div\n      ref={(node) => {\n        // Else-branch: trigger is a plain ReactNode (string/fragment/etc),\n        // so we wrap it in a div. Forward the div node into the shared\n        // HTMLElement-typed triggerRef via callback (RefObject is invariant\n        // — direct assignment of RefObject<HTMLElement> to a HTMLDivElement\n        // ref slot does not typecheck).\n        triggerRef.current = node;\n      }}\n      onClick={handleTriggerClick}\n      onKeyDown={handleTriggerKeyDown}\n      role=\"button\"\n      tabIndex={0}\n      aria-haspopup=\"menu\"\n      aria-expanded={isOpen}\n      aria-controls={menuId}\n      aria-label={ariaLabel || \"Open menu\"}\n      id={triggerId}\n    >\n      {trigger}\n    </div>\n  );\n\n  return (\n    <div\n      className={cn(\"relative\", \"inline-block\", className)}\n      ref={dropdownRef}\n      {...props}\n    >\n      {triggerWithProps}\n\n      {isOpen && (\n        <>\n          <div\n            // micro-z: dropdown click-outside backdrop internal to dropdown scope\n            className={cn(\"fixed\", \"inset-0\", \"z-10\")}\n            onClick={() => {\n              setIsOpen(false);\n              setActiveIndex(-1);\n            }}\n            aria-hidden=\"true\"\n          />\n          <div\n            ref={menuRef}\n            id={menuId}\n            className={cn(\n              \"absolute\",\n              // micro-z: dropdown content above its own backdrop\n              \"z-20\",\n              getSpacingClass(\"sm\", \"mt\"),\n              \"w-48\", // Fixed width for dropdown menu - justified as layout constraint\n              getRadiusClass(\"md\"),\n              getShadowClass(\"lg\"),\n              \"bg-surface-overlay\",\n              \"ring-1\",\n              \"ring-line-strong\",\n              \"ring-opacity-5\",\n              alignClasses,\n            )}\n            role=\"menu\"\n            aria-orientation=\"vertical\"\n            aria-labelledby={triggerId}\n            aria-activedescendant={\n              activeIndex >= 0 ? `${menuId}-item-${activeIndex}` : undefined\n            }\n          >\n            <div className={cn(getSpacingClass(\"xs\", \"py\"))} role=\"none\">\n              {items.map((item, index) => {\n                const itemClasses = cn(\n                  \"block\",\n                  getSpacingClass(\"base\", \"px\"),\n                  getSpacingClass(\"xs\", \"py\"),\n                  getTypographySize(\"bodySmall\"),\n                  \"w-full\",\n                  \"text-left\",\n                  \"focus:outline-none\",\n                  item.disabled\n                    ? cn(\"text-fg-disabled\", \"cursor-not-allowed\", \"opacity-50\")\n                    : item.variant === \"danger\"\n                      ? cn(\n                          \"text-error-dark\",\n                          \"hover:bg-error-bg-emphasis\",\n                          \"focus:bg-error-bg-emphasis\",\n                        )\n                      : cn(\n                          \"text-fg-primary\",\n                          \"hover:bg-surface-hover\",\n                          \"focus:bg-surface-hover\",\n                        ),\n                );\n\n                return (\n                  <button\n                    key={index}\n                    id={`${menuId}-item-${index}`}\n                    ref={(el) => {\n                      itemRefs.current[index] = el;\n                    }}\n                    type=\"button\"\n                    className={itemClasses}\n                    onClick={() => handleItemClick(item)}\n                    disabled={item.disabled}\n                    role=\"menuitem\"\n                    aria-disabled={item.disabled}\n                    tabIndex={\n                      item.disabled ? -1 : activeIndex === index ? 0 : -1\n                    }\n                  >\n                    {item.label}\n                  </button>\n                );\n              })}\n            </div>\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":["Dropdown","_a","_b","trigger","items","align","_variant","className","ariaLabel","props","__objRest","isOpen","setIsOpen","useState","activeIndex","setActiveIndex","dropdownRef","useRef","triggerRef","menuRef","itemRefs","reactId","useId","menuId","triggerId","useEffect","handleClickOutside","event","firstEnabledIndex","item","handleKeyDown","e","enabledItems","index","currentEnabledIndex","nextIndex","prevIndex","firstIndex","_c","lastIndex","_d","handleItemClick","menuElement","typedHandleKeyDown","handleTriggerClick","handleTriggerKeyDown","alignClasses","triggerWithProps","React","mergeRefs","jsx","node","jsxs","__spreadProps","__spreadValues","cn","Fragment","getSpacingClass","getRadiusClass","getShadowClass","itemClasses","getTypographySize","el"],"mappings":"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"}