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

package/dist/granular/ui/components/Header/components/HeaderNavigation.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as i } from "react/jsx-runtime";
+import { getSpacingClass as n } from "../../../tokens/spacing.js";
+import { cn as t } from "../../../utils/cn.js";
+function s({
+  children: e,
+  className: a
+}) {
+  return /* @__PURE__ */ i(
+    "nav",
+    {
+      className: t(
+        "flex-1 flex items-center justify-center",
+        n("base", "gap"),
+        "hidden md:flex",
+        // Hidden on mobile, visible on desktop
+        a
+      ),
+      "aria-label": "Main navigation",
+      children: e
+    }
+  );
+}
+export {
+  s as HeaderNavigation
+};
+//# sourceMappingURL=HeaderNavigation.js.map

package/dist/granular/ui/components/Header/components/HeaderNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderNavigation.js","sources":["../../../../../../src/ui/components/Header/components/HeaderNavigation.tsx"],"sourcesContent":["/**\n * HeaderNavigation Component\n *\n * Navigation slot component for Header.\n *\n * @see EPIC-002: Header Component (Molecule)\n * @see RFC-003: Header Composition Pattern (APPROVED)\n */\n\n\"use client\";\n\nimport { type ReactNode } from \"react\";\nimport { cn } from \"../../../utils\";\nimport { getSpacingClass } from \"../../../tokens/spacing\";\n\nexport interface HeaderNavigationProps {\n  /**\n   * Navigation content (typically NavLink components)\n   */\n  children: ReactNode;\n\n  /**\n   * Additional CSS classes\n   */\n  className?: string;\n}\n\n/**\n * HeaderNavigation Component\n *\n * Navigation slot for Header. Typically contains NavLink components.\n *\n * @example\n * ```tsx\n * <Header.Navigation>\n *   <NavLink href=\"/home\">Home</NavLink>\n *   <NavLink href=\"/about\">About</NavLink>\n * </Header.Navigation>\n * ```\n */\nexport function HeaderNavigation({\n  children,\n  className,\n}: HeaderNavigationProps) {\n  return (\n    <nav\n      className={cn(\n        \"flex-1 flex items-center justify-center\",\n        getSpacingClass(\"base\", \"gap\"),\n        \"hidden md:flex\", // Hidden on mobile, visible on desktop\n        className,\n      )}\n      aria-label=\"Main navigation\"\n    >\n      {children}\n    </nav>\n  );\n}\n"],"names":["HeaderNavigation","children","className","jsx","cn","getSpacingClass"],"mappings":";;;;AAwCO,SAASA,EAAiB;AAAA,EAC/B,UAAAC;AAAA,EACA,WAAAC;AACF,GAA0B;AACxB,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAC,EAAgB,QAAQ,KAAK;AAAA,QAC7B;AAAA;AAAA,QACAH;AAAA,MAAA;AAAA,MAEF,cAAW;AAAA,MAEV,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/granular/ui/components/Header/contexts/HeaderContext.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx as m } from "react/jsx-runtime";
+import { useState as v, useCallback as r, useContext as H, createContext as b } from "react";
+const c = b(void 0);
+function M({
+  children: t,
+  mobileMenuOpen: i,
+  onMobileMenuChange: o,
+  defaultMobileMenuOpen: l = !1
+}) {
+  const [d, a] = v(
+    l
+  ), s = i !== void 0, n = s ? i : d, e = r(
+    (u) => {
+      s || a(u), o == null || o(u);
+    },
+    [s, o]
+  ), f = r(() => {
+    e(!n);
+  }, [n, e]), x = r(() => {
+    e(!0);
+  }, [e]), p = r(() => {
+    e(!1);
+  }, [e]);
+  return /* @__PURE__ */ m(
+    c.Provider,
+    {
+      value: {
+        isMobileMenuOpen: n,
+        toggleMobileMenu: f,
+        setMobileMenuOpen: e,
+        openMobileMenu: x,
+        closeMobileMenu: p
+      },
+      children: t
+    }
+  );
+}
+function P() {
+  const t = H(c);
+  if (!t)
+    throw new Error("useHeaderContext must be used within HeaderProvider");
+  return t;
+}
+export {
+  M as HeaderProvider,
+  P as useHeaderContext
+};
+//# sourceMappingURL=HeaderContext.js.map

package/dist/granular/ui/components/Header/contexts/HeaderContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderContext.js","sources":["../../../../../../src/ui/components/Header/contexts/HeaderContext.tsx"],"sourcesContent":["/**\n * Header Context\n *\n * Context for managing Header component state, particularly mobile menu state.\n *\n * @see ADR-002: Header + SideNavbar Compatibility (ACCEPTED)\n * @see EPIC-002: Header Component (Molecule)\n * @see TASK-014: Implementar HeaderContext Completo\n */\n\n\"use client\";\n\n/* eslint-disable react-refresh/only-export-components */\nimport {\n  createContext,\n  useContext,\n  useState,\n  useCallback,\n  type ReactNode,\n} from \"react\";\n\n/**\n * Header Context Value\n */\nexport interface HeaderContextValue {\n  /**\n   * Whether the mobile menu is open\n   */\n  isMobileMenuOpen: boolean;\n\n  /**\n   * Toggle mobile menu state\n   */\n  toggleMobileMenu: () => void;\n\n  /**\n   * Set mobile menu state explicitly\n   */\n  setMobileMenuOpen: (open: boolean) => void;\n\n  /**\n   * Open mobile menu\n   */\n  openMobileMenu: () => void;\n\n  /**\n   * Close mobile menu\n   */\n  closeMobileMenu: () => void;\n}\n\n/**\n * Header Context\n *\n * Independent context for Header component state.\n * Does not interfere with SideNavbar contexts (ADR-002).\n */\nconst HeaderContext = createContext<HeaderContextValue | undefined>(undefined);\n\n/**\n * Header Provider Props\n */\nexport interface HeaderProviderProps {\n  /**\n   * Children components\n   */\n  children: ReactNode;\n\n  /**\n   * Controlled mode: mobile menu open state\n   */\n  mobileMenuOpen?: boolean;\n\n  /**\n   * Callback when mobile menu state changes\n   */\n  onMobileMenuChange?: (open: boolean) => void;\n\n  /**\n   * Default mobile menu open state (uncontrolled mode)\n   * @default false\n   */\n  defaultMobileMenuOpen?: boolean;\n}\n\n/**\n * HeaderProvider\n *\n * Provides Header context for mobile menu state management.\n * Independent from SideNavbarContexts (ADR-002).\n *\n * Supports both controlled and uncontrolled modes.\n *\n * @example\n * ```tsx\n * // Uncontrolled mode\n * <HeaderProvider>\n *   <Header>...</Header>\n * </HeaderProvider>\n *\n * // Controlled mode\n * <HeaderProvider\n *   mobileMenuOpen={isOpen}\n *   onMobileMenuChange={setIsOpen}\n * >\n *   <Header>...</Header>\n * </HeaderProvider>\n * ```\n */\nexport function HeaderProvider({\n  children,\n  mobileMenuOpen: controlledMobileMenuOpen,\n  onMobileMenuChange,\n  defaultMobileMenuOpen = false,\n}: HeaderProviderProps) {\n  const [internalMobileMenuOpen, setInternalMobileMenuOpen] = useState(\n    defaultMobileMenuOpen,\n  );\n\n  const isControlled = controlledMobileMenuOpen !== undefined;\n  const isMobileMenuOpen = isControlled\n    ? controlledMobileMenuOpen\n    : internalMobileMenuOpen;\n\n  const setMobileMenuOpen = useCallback(\n    (open: boolean) => {\n      if (!isControlled) {\n        setInternalMobileMenuOpen(open);\n      }\n      onMobileMenuChange?.(open);\n    },\n    [isControlled, onMobileMenuChange],\n  );\n\n  const toggleMobileMenu = useCallback(() => {\n    setMobileMenuOpen(!isMobileMenuOpen);\n  }, [isMobileMenuOpen, setMobileMenuOpen]);\n\n  const openMobileMenu = useCallback(() => {\n    setMobileMenuOpen(true);\n  }, [setMobileMenuOpen]);\n\n  const closeMobileMenu = useCallback(() => {\n    setMobileMenuOpen(false);\n  }, [setMobileMenuOpen]);\n\n  return (\n    <HeaderContext.Provider\n      value={{\n        isMobileMenuOpen,\n        toggleMobileMenu,\n        setMobileMenuOpen,\n        openMobileMenu,\n        closeMobileMenu,\n      }}\n    >\n      {children}\n    </HeaderContext.Provider>\n  );\n}\n\n/**\n * useHeaderContext Hook\n *\n * Hook to access Header context.\n * Must be used within HeaderProvider.\n *\n * @throws Error if used outside HeaderProvider\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const { isMobileMenuOpen, toggleMobileMenu } = useHeaderContext();\n *   return <button onClick={toggleMobileMenu}>Toggle</button>;\n * }\n * ```\n */\nexport function useHeaderContext(): HeaderContextValue {\n  const context = useContext(HeaderContext);\n  if (!context) {\n    throw new Error(\"useHeaderContext must be used within HeaderProvider\");\n  }\n  return context;\n}\n"],"names":["HeaderContext","createContext","HeaderProvider","children","controlledMobileMenuOpen","onMobileMenuChange","defaultMobileMenuOpen","internalMobileMenuOpen","setInternalMobileMenuOpen","useState","isControlled","isMobileMenuOpen","setMobileMenuOpen","useCallback","open","toggleMobileMenu","openMobileMenu","closeMobileMenu","jsx","useHeaderContext","context","useContext"],"mappings":";;;AAyDA,MAAMA,IAAgBC,EAA8C,MAAS;AAoDtE,SAASC,EAAe;AAAA,EAC7B,UAAAC;AAAA,EACA,gBAAgBC;AAAA,EAChB,oBAAAC;AAAA,EACA,uBAAAC,IAAwB;AAC1B,GAAwB;AACtB,QAAM,CAACC,GAAwBC,CAAyB,IAAIC;AAAA,IAC1DH;AAAA,EAAA,GAGII,IAAeN,MAA6B,QAC5CO,IAAmBD,IACrBN,IACAG,GAEEK,IAAoBC;AAAA,IACxB,CAACC,MAAkB;AACjB,MAAKJ,KACHF,EAA0BM,CAAI,GAEhCT,KAAA,QAAAA,EAAqBS;AAAA,IACvB;AAAA,IACA,CAACJ,GAAcL,CAAkB;AAAA,EAAA,GAG7BU,IAAmBF,EAAY,MAAM;AACzC,IAAAD,EAAkB,CAACD,CAAgB;AAAA,EACrC,GAAG,CAACA,GAAkBC,CAAiB,CAAC,GAElCI,IAAiBH,EAAY,MAAM;AACvC,IAAAD,EAAkB,EAAI;AAAA,EACxB,GAAG,CAACA,CAAiB,CAAC,GAEhBK,IAAkBJ,EAAY,MAAM;AACxC,IAAAD,EAAkB,EAAK;AAAA,EACzB,GAAG,CAACA,CAAiB,CAAC;AAEtB,SACE,gBAAAM;AAAA,IAAClB,EAAc;AAAA,IAAd;AAAA,MACC,OAAO;AAAA,QACL,kBAAAW;AAAA,QACA,kBAAAI;AAAA,QACA,mBAAAH;AAAA,QACA,gBAAAI;AAAA,QACA,iBAAAC;AAAA,MAAA;AAAA,MAGD,UAAAd;AAAA,IAAA;AAAA,EAAA;AAGP;AAkBO,SAASgB,IAAuC;AACrD,QAAMC,IAAUC,EAAWrB,CAAa;AACxC,MAAI,CAACoB;AACH,UAAM,IAAI,MAAM,qDAAqD;AAEvE,SAAOA;AACT;"}

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

@@ -0,0 +1,84 @@
+"use client";
+var v = Object.defineProperty, w = Object.defineProperties;
+var x = Object.getOwnPropertyDescriptors;
+var m = Object.getOwnPropertySymbols;
+var c = Object.prototype.hasOwnProperty, p = Object.prototype.propertyIsEnumerable;
+var d = (e, r, i) => r in e ? v(e, r, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[r] = i, u = (e, r) => {
+  for (var i in r || (r = {}))
+    c.call(r, i) && d(e, i, r[i]);
+  if (m)
+    for (var i of m(r))
+      p.call(r, i) && d(e, i, r[i]);
+  return e;
+}, f = (e, r) => w(e, x(r));
+var h = (e, r) => {
+  var i = {};
+  for (var a in e)
+    c.call(e, a) && r.indexOf(a) < 0 && (i[a] = e[a]);
+  if (e != null && m)
+    for (var a of m(e))
+      r.indexOf(a) < 0 && p.call(e, a) && (i[a] = e[a]);
+  return i;
+};
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { getSpacingClass as t } from "../../tokens/spacing.js";
+import { getRadiusClass as N } from "../../tokens/radius.js";
+import g from "../../primitives/Label/Label.js";
+import y from "../../primitives/Input/Input.js";
+import { Button as b } from "../../primitives/Button/Button.js";
+import { cn as S } from "../../utils/cn.js";
+function D(a) {
+  var l = a, {
+    onForgotPasswordClick: e,
+    className: r
+  } = l, i = h(l, [
+    "onForgotPasswordClick",
+    "className"
+  ]);
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: S(
+        t("base", "p"),
+        "bg-surface-muted",
+        N("md"),
+        r
+      ),
+      children: /* @__PURE__ */ s(
+        "form",
+        f(u({}, i), {
+          onSubmit: (n) => {
+            n.preventDefault(), i.onSubmit && i.onSubmit(n);
+          },
+          className: t("base", "space-y"),
+          children: [
+            /* @__PURE__ */ s("div", { className: t("sm", "space-y"), children: [
+              /* @__PURE__ */ o(g, { htmlFor: "login-email", variant: "required", children: "Your email" }),
+              /* @__PURE__ */ o(y, { id: "login-email", placeholder: "myname@email.com", type: "email" })
+            ] }),
+            /* @__PURE__ */ s("div", { className: t("sm", "space-y"), children: [
+              /* @__PURE__ */ o(g, { htmlFor: "login-password", variant: "required", children: "Your password" }),
+              /* @__PURE__ */ o(y, { id: "login-password", placeholder: "••••••••", type: "password" })
+            ] }),
+            /* @__PURE__ */ s("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ o(
+                b,
+                {
+                  variant: "secondary",
+                  type: "button",
+                  onClick: e,
+                  children: "Forgot password?"
+                }
+              ),
+              /* @__PURE__ */ o(b, { variant: "primary", type: "submit", children: "Sign in" })
+            ] })
+          ]
+        })
+      )
+    }
+  );
+}
+export {
+  D as default
+};
+//# sourceMappingURL=LoginBox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LoginBox.js","sources":["../../../../../src/ui/components/LoginBox/LoginBox.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport { Button, Input, Label } from \"../../primitives\";\nimport { cn } from \"../../utils\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { getRadiusClass } from \"../../tokens/radius\";\n\ninterface Props extends HTMLAttributes<HTMLFormElement> {\n  onForgotPasswordClick: () => void;\n}\n\nexport default function LoginBox({\n  onForgotPasswordClick,\n  className,\n  ...props\n}: Props) {\n  return (\n    <div\n      className={cn(\n        getSpacingClass(\"base\", \"p\"),\n        \"bg-surface-muted\",\n        getRadiusClass(\"md\"),\n        className,\n      )}\n    >\n      <form\n        {...props}\n        onSubmit={(e) => {\n          e.preventDefault();\n          if (props.onSubmit) props.onSubmit(e);\n        }}\n        className={getSpacingClass(\"base\", \"space-y\")}\n      >\n        <div className={getSpacingClass(\"sm\", \"space-y\")}>\n          <Label htmlFor=\"login-email\" variant=\"required\">\n            Your email\n          </Label>\n          <Input id=\"login-email\" placeholder=\"myname@email.com\" type=\"email\" />\n        </div>\n        <div className={getSpacingClass(\"sm\", \"space-y\")}>\n          <Label htmlFor=\"login-password\" variant=\"required\">\n            Your password\n          </Label>\n          <Input id=\"login-password\" placeholder=\"••••••••\" type=\"password\" />\n        </div>\n        <div className=\"flex justify-between\">\n          <Button\n            variant=\"secondary\"\n            type=\"button\"\n            onClick={onForgotPasswordClick}\n          >\n            Forgot password?\n          </Button>\n          <Button variant=\"primary\" type=\"submit\">\n            Sign in\n          </Button>\n        </div>\n      </form>\n    </div>\n  );\n}\n"],"names":["LoginBox","_a","_b","onForgotPasswordClick","className","props","__objRest","jsx","cn","getSpacingClass","getRadiusClass","jsxs","__spreadProps","__spreadValues","e","Label","Input","Button"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,SAAwBA,EAASC,GAIvB;AAJuB,MAAAC,IAAAD,GAC/B;AAAA,2BAAAE;AAAA,IACA,WAAAC;AAAA,MAF+BF,GAG5BG,IAAAC,EAH4BJ,GAG5B;AAAA,IAFH;AAAA,IACA;AAAA;AAGA,SACE,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTC,EAAgB,QAAQ,GAAG;AAAA,QAC3B;AAAA,QACAC,EAAe,IAAI;AAAA,QACnBN;AAAA,MAAA;AAAA,MAGF,UAAA,gBAAAO;AAAA,QAAC;AAAA,QAAAC,EAAAC,EAAA,IACKR,IADL;AAAA,UAEC,UAAU,CAACS,MAAM;AACf,YAAAA,EAAE,eAAA,GACET,EAAM,YAAUA,EAAM,SAASS,CAAC;AAAA,UACtC;AAAA,UACA,WAAWL,EAAgB,QAAQ,SAAS;AAAA,UAE5C,UAAA;AAAA,YAAA,gBAAAE,EAAC,OAAA,EAAI,WAAWF,EAAgB,MAAM,SAAS,GAC7C,UAAA;AAAA,cAAA,gBAAAF,EAACQ,GAAA,EAAM,SAAQ,eAAc,SAAQ,YAAW,UAAA,cAEhD;AAAA,gCACCC,GAAA,EAAM,IAAG,eAAc,aAAY,oBAAmB,MAAK,QAAA,CAAQ;AAAA,YAAA,GACtE;AAAA,8BACC,OAAA,EAAI,WAAWP,EAAgB,MAAM,SAAS,GAC7C,UAAA;AAAA,cAAA,gBAAAF,EAACQ,GAAA,EAAM,SAAQ,kBAAiB,SAAQ,YAAW,UAAA,iBAEnD;AAAA,gCACCC,GAAA,EAAM,IAAG,kBAAiB,aAAY,YAAW,MAAK,WAAA,CAAW;AAAA,YAAA,GACpE;AAAA,YACA,gBAAAL,EAAC,OAAA,EAAI,WAAU,wBACb,UAAA;AAAA,cAAA,gBAAAJ;AAAA,gBAACU;AAAA,gBAAA;AAAA,kBACC,SAAQ;AAAA,kBACR,MAAK;AAAA,kBACL,SAASd;AAAA,kBACV,UAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,gCAGAc,GAAA,EAAO,SAAQ,WAAU,MAAK,UAAS,UAAA,UAAA,CAExC;AAAA,YAAA,EAAA,CACF;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}

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

@@ -0,0 +1,45 @@
+"use client";
+import { jsx as a } from "react/jsx-runtime";
+import { useState as c } from "react";
+import { MenuProvider as M } from "./MenuContext.js";
+import I from "./MenuTrigger.js";
+import d from "./MenuContent.js";
+import v from "./MenuItem.js";
+import S from "./MenuSeparator.js";
+function t({
+  children: m,
+  open: o,
+  defaultOpen: n = !1,
+  onOpenChange: r,
+  placement: u = "bottom"
+}) {
+  const [f, l] = c(n), e = o !== void 0, p = e ? o : f, s = (i) => {
+    e || l(i), r == null || r(i);
+  };
+  return /* @__PURE__ */ a(
+    M,
+    {
+      value: {
+        isOpen: p,
+        setIsOpen: s,
+        closeMenu: () => {
+          s(!1);
+        },
+        placement: u
+      },
+      children: m
+    }
+  );
+}
+t.Trigger = I;
+t.Content = d;
+t.Item = v;
+t.Separator = S;
+export {
+  d as MenuContent,
+  v as MenuItem,
+  S as MenuSeparator,
+  I as MenuTrigger,
+  t as default
+};
+//# sourceMappingURL=Menu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.js","sources":["../../../../../src/ui/components/Menu/Menu.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, type ReactNode } from \"react\";\nimport { MenuProvider } from \"./MenuContext\";\nimport MenuTrigger from \"./MenuTrigger\";\nimport MenuContent from \"./MenuContent\";\nimport MenuItem from \"./MenuItem\";\nimport MenuSeparator from \"./MenuSeparator\";\n\nexport type MenuPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface MenuProps {\n  children: ReactNode;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  placement?: MenuPlacement;\n}\n\n/**\n * Menu Component\n *\n * A dropdown menu component with keyboard navigation and portal rendering.\n * Follows Atomic Design principles as an Atom component.\n * Uses Compound Component pattern.\n *\n * @example\n * ```tsx\n * <Menu>\n *   <MenuTrigger>\n *     <Button>Open Menu</Button>\n *   </MenuTrigger>\n *   <MenuContent>\n *     <MenuItem onClick={handleClick}>Item 1</MenuItem>\n *     <MenuItem onClick={handleClick}>Item 2</MenuItem>\n *     <MenuSeparator />\n *     <MenuItem onClick={handleClick}>Item 3</MenuItem>\n *   </MenuContent>\n * </Menu>\n * ```\n */\nexport default function Menu({\n  children,\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  placement = \"bottom\",\n}: MenuProps) {\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 closeMenu = () => {\n    setIsOpen(false);\n  };\n\n  return (\n    <MenuProvider\n      value={{\n        isOpen,\n        setIsOpen,\n        closeMenu,\n        placement,\n      }}\n    >\n      {children}\n    </MenuProvider>\n  );\n}\n\n// Export sub-components for compound pattern\nMenu.Trigger = MenuTrigger;\nMenu.Content = MenuContent;\nMenu.Item = MenuItem;\nMenu.Separator = MenuSeparator;\n\n// Also export as named exports for easier imports\nexport { MenuTrigger, MenuContent, MenuItem, MenuSeparator };\n"],"names":["Menu","children","controlledOpen","defaultOpen","onOpenChange","placement","internalOpen","setInternalOpen","useState","isControlled","isOpen","setIsOpen","newOpen","jsx","MenuProvider","MenuTrigger","MenuContent","MenuItem","MenuSeparator"],"mappings":";;;;;;;;AAyCA,SAAwBA,EAAK;AAAA,EAC3B,UAAAC;AAAA,EACA,MAAMC;AAAA,EACN,aAAAC,IAAc;AAAA,EACd,cAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAAc;AACZ,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAASL,CAAW,GAEtDM,IAAeP,MAAmB,QAClCQ,IAASD,IAAeP,IAAiBI,GAEzCK,IAAY,CAACC,MAAqB;AACtC,IAAKH,KACHF,EAAgBK,CAAO,GAEzBR,KAAA,QAAAA,EAAeQ;AAAA,EACjB;AAMA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,QAAAJ;AAAA,QACA,WAAAC;AAAA,QACA,WATY,MAAM;AACtB,UAAAA,EAAU,EAAK;AAAA,QACjB;AAAA,QAQM,WAAAN;AAAA,MAAA;AAAA,MAGD,UAAAJ;AAAA,IAAA;AAAA,EAAA;AAGP;AAGAD,EAAK,UAAUe;AACff,EAAK,UAAUgB;AACfhB,EAAK,OAAOiB;AACZjB,EAAK,YAAYkB;"}

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

@@ -0,0 +1,94 @@
+"use client";
+import { jsx as y } from "react/jsx-runtime";
+import { useRef as v, useState as R, useEffect as p } from "react";
+import { createPortal as L } from "react-dom";
+import { getRadiusClass as M } from "../../tokens/radius.js";
+import { getShadowClass as $ } from "../../tokens/shadows.js";
+import { getZIndexClass as S } from "../../tokens/z-index.js";
+import { getSpacingClass as k } from "../../tokens/spacing.js";
+import { useMenuContext as z } from "./MenuContext.js";
+function I({
+  children: E,
+  className: C = "",
+  align: i = "start"
+}) {
+  const { isOpen: s, closeMenu: a, placement: u } = z(), f = v(null), m = v(null), [w, b] = R({ top: 0, left: 0 });
+  if (p(() => {
+    if (s) {
+      const n = document.querySelector(
+        '[aria-haspopup="menu"]'
+      );
+      m.current = n;
+    }
+  }, [s]), p(() => {
+    if (s && f.current && m.current) {
+      const n = () => {
+        const e = m.current.getBoundingClientRect(), t = f.current.getBoundingClientRect(), d = window.scrollY, l = window.scrollX;
+        let o = 0, r = 0;
+        u === "bottom" ? (o = e.bottom + d + 4, i === "start" ? r = e.left + l : i === "end" ? r = e.right + l - t.width : r = e.left + l + (e.width - t.width) / 2) : u === "top" ? (o = e.top + d - t.height - 4, i === "start" ? r = e.left + l : i === "end" ? r = e.right + l - t.width : r = e.left + l + (e.width - t.width) / 2) : u === "right" ? (r = e.right + l + 4, i === "start" ? o = e.top + d : i === "end" ? o = e.bottom + d - t.height : o = e.top + d + (e.height - t.height) / 2) : u === "left" && (r = e.left + l - t.width - 4, i === "start" ? o = e.top + d : i === "end" ? o = e.bottom + d - t.height : o = e.top + d + (e.height - t.height) / 2);
+        const h = 8;
+        o = Math.max(
+          h,
+          Math.min(
+            o,
+            window.innerHeight + d - t.height - h
+          )
+        ), r = Math.max(
+          h,
+          Math.min(
+            r,
+            window.innerWidth + l - t.width - h
+          )
+        ), b({ top: o, left: r });
+      };
+      n();
+      const c = () => n(), g = () => n();
+      return window.addEventListener("resize", c), window.addEventListener("scroll", g, !0), () => {
+        window.removeEventListener("resize", c), window.removeEventListener("scroll", g, !0);
+      };
+    }
+  }, [s, u, i]), p(() => {
+    if (s) {
+      const n = (c) => {
+        c.key === "Escape" && a();
+      };
+      return document.addEventListener("keydown", n), () => document.removeEventListener("keydown", n);
+    }
+  }, [s, a]), p(() => {
+    if (s) {
+      const n = (c) => {
+        f.current && m.current && !f.current.contains(c.target) && !m.current.contains(c.target) && a();
+      };
+      return document.addEventListener("mousedown", n), () => document.removeEventListener("mousedown", n);
+    }
+  }, [s, a]), !s) return null;
+  const x = /* @__PURE__ */ y(
+    "div",
+    {
+      ref: f,
+      role: "menu",
+      className: `
+        absolute
+        ${S("popover")}
+        bg-surface-overlay
+        ${M("md")}
+        ${$("lg")}
+        border
+        border-line-default
+        min-w-40
+        ${k("xs", "py")}
+        ${C}
+      `,
+      style: {
+        top: `${w.top}px`,
+        left: `${w.left}px`
+      },
+      children: E
+    }
+  );
+  return typeof window != "undefined" ? L(x, document.body) : null;
+}
+export {
+  I as default
+};
+//# sourceMappingURL=MenuContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuContent.js","sources":["../../../../../src/ui/components/Menu/MenuContent.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, useEffect, useRef, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { getRadiusClass } from \"../../tokens/radius\";\nimport { getShadowClass } from \"../../tokens/shadows\";\nimport { getZIndexClass } from \"../../tokens/z-index\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport { useMenuContext } from \"./MenuContext\";\n\nexport interface MenuContentProps {\n  children: ReactNode;\n  className?: string;\n  align?: \"start\" | \"end\" | \"center\";\n}\n\n/**\n * MenuContent Component\n *\n * The content container for menu items.\n * Renders in a portal and positions itself relative to the trigger.\n */\nexport default function MenuContent({\n  children,\n  className = \"\",\n  align = \"start\",\n}: MenuContentProps) {\n  const { isOpen, closeMenu, placement } = useMenuContext();\n  const contentRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLElement | null>(null);\n  const [position, setPosition] = useState({ top: 0, left: 0 });\n\n  // Find trigger element\n  useEffect(() => {\n    if (isOpen) {\n      // Find the trigger by looking for element with aria-haspopup=\"menu\"\n      const trigger = document.querySelector(\n        '[aria-haspopup=\"menu\"]',\n      ) as HTMLElement;\n      triggerRef.current = trigger;\n    }\n  }, [isOpen]);\n\n  // Calculate position\n  useEffect(() => {\n    if (isOpen && contentRef.current && triggerRef.current) {\n      const updatePosition = () => {\n        const triggerRect = triggerRef.current!.getBoundingClientRect();\n        const contentRect = contentRef.current!.getBoundingClientRect();\n        const scrollY = window.scrollY;\n        const scrollX = window.scrollX;\n\n        let top = 0;\n        let left = 0;\n\n        if (placement === \"bottom\") {\n          top = triggerRect.bottom + scrollY + 4;\n          if (align === \"start\") left = triggerRect.left + scrollX;\n          else if (align === \"end\")\n            left = triggerRect.right + scrollX - contentRect.width;\n          else\n            left =\n              triggerRect.left +\n              scrollX +\n              (triggerRect.width - contentRect.width) / 2;\n        } else if (placement === \"top\") {\n          top = triggerRect.top + scrollY - contentRect.height - 4;\n          if (align === \"start\") left = triggerRect.left + scrollX;\n          else if (align === \"end\")\n            left = triggerRect.right + scrollX - contentRect.width;\n          else\n            left =\n              triggerRect.left +\n              scrollX +\n              (triggerRect.width - contentRect.width) / 2;\n        } else if (placement === \"right\") {\n          left = triggerRect.right + scrollX + 4;\n          if (align === \"start\") top = triggerRect.top + scrollY;\n          else if (align === \"end\")\n            top = triggerRect.bottom + scrollY - contentRect.height;\n          else\n            top =\n              triggerRect.top +\n              scrollY +\n              (triggerRect.height - contentRect.height) / 2;\n        } else if (placement === \"left\") {\n          left = triggerRect.left + scrollX - contentRect.width - 4;\n          if (align === \"start\") top = triggerRect.top + scrollY;\n          else if (align === \"end\")\n            top = triggerRect.bottom + scrollY - contentRect.height;\n          else\n            top =\n              triggerRect.top +\n              scrollY +\n              (triggerRect.height - contentRect.height) / 2;\n        }\n\n        // Keep within viewport\n        const padding = 8;\n        top = Math.max(\n          padding,\n          Math.min(\n            top,\n            window.innerHeight + scrollY - contentRect.height - padding,\n          ),\n        );\n        left = Math.max(\n          padding,\n          Math.min(\n            left,\n            window.innerWidth + scrollX - contentRect.width - padding,\n          ),\n        );\n\n        setPosition({ top, left });\n      };\n\n      updatePosition();\n      const handleResize = () => updatePosition();\n      const handleScroll = () => updatePosition();\n      window.addEventListener(\"resize\", handleResize);\n      window.addEventListener(\"scroll\", handleScroll, true);\n\n      return () => {\n        window.removeEventListener(\"resize\", handleResize);\n        window.removeEventListener(\"scroll\", handleScroll, true);\n      };\n    }\n  }, [isOpen, placement, align]);\n\n  // Close on escape\n  useEffect(() => {\n    if (isOpen) {\n      const handleEscape = (e: KeyboardEvent) => {\n        if (e.key === \"Escape\") {\n          closeMenu();\n        }\n      };\n      document.addEventListener(\"keydown\", handleEscape);\n      return () => document.removeEventListener(\"keydown\", handleEscape);\n    }\n  }, [isOpen, closeMenu]);\n\n  // Close on click outside\n  useEffect(() => {\n    if (isOpen) {\n      const handleClickOutside = (e: MouseEvent) => {\n        if (\n          contentRef.current &&\n          triggerRef.current &&\n          !contentRef.current.contains(e.target as Node) &&\n          !triggerRef.current.contains(e.target as Node)\n        ) {\n          closeMenu();\n        }\n      };\n      document.addEventListener(\"mousedown\", handleClickOutside);\n      return () =>\n        document.removeEventListener(\"mousedown\", handleClickOutside);\n    }\n  }, [isOpen, closeMenu]);\n\n  if (!isOpen) return null;\n\n  const menuContent = (\n    <div\n      ref={contentRef}\n      role=\"menu\"\n      className={`\n        absolute\n        ${getZIndexClass(\"popover\")}\n        bg-surface-overlay\n        ${getRadiusClass(\"md\")}\n        ${getShadowClass(\"lg\")}\n        border\n        border-line-default\n        min-w-40\n        ${getSpacingClass(\"xs\", \"py\")}\n        ${className}\n      `}\n      style={{\n        top: `${position.top}px`,\n        left: `${position.left}px`,\n      }}\n    >\n      {children}\n    </div>\n  );\n\n  return typeof window !== \"undefined\"\n    ? createPortal(menuContent, document.body)\n    : null;\n}\n"],"names":["MenuContent","children","className","align","isOpen","closeMenu","placement","useMenuContext","contentRef","useRef","triggerRef","position","setPosition","useState","useEffect","trigger","updatePosition","triggerRect","contentRect","scrollY","scrollX","top","left","padding","handleResize","handleScroll","handleEscape","e","handleClickOutside","menuContent","jsx","getZIndexClass","getRadiusClass","getShadowClass","getSpacingClass","createPortal"],"mappings":"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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuContext.js","sources":["../../../../../src/ui/components/Menu/MenuContext.tsx"],"sourcesContent":["\"use client\";\n\n/* eslint-disable react-refresh/only-export-components */\nimport { createContext, useContext, type ReactNode } from \"react\";\n\ninterface MenuContextValue {\n  isOpen: boolean;\n  setIsOpen: (open: boolean) => void;\n  closeMenu: () => void;\n  placement: \"top\" | \"bottom\" | \"left\" | \"right\";\n}\n\nconst MenuContext = createContext<MenuContextValue | undefined>(undefined);\n\nexport function MenuProvider({\n  children,\n  value,\n}: {\n  children: ReactNode;\n  value: MenuContextValue;\n}) {\n  return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>;\n}\n\nexport function useMenuContext() {\n  const context = useContext(MenuContext);\n  if (!context) {\n    throw new Error(\"Menu components must be used within Menu\");\n  }\n  return context;\n}\n"],"names":["MenuContext","createContext","MenuProvider","children","value","jsx","useMenuContext","context","useContext"],"mappings":";;;AAYA,MAAMA,IAAcC,EAA4C,MAAS;AAElE,SAASC,EAAa;AAAA,EAC3B,UAAAC;AAAA,EACA,OAAAC;AACF,GAGG;AACD,SAAO,gBAAAC,EAACL,EAAY,UAAZ,EAAqB,OAAAI,GAAe,UAAAD,EAAA,CAAS;AACvD;AAEO,SAASG,IAAiB;AAC/B,QAAMC,IAAUC,EAAWR,CAAW;AACtC,MAAI,CAACO;AACH,UAAM,IAAI,MAAM,0CAA0C;AAE5D,SAAOA;AACT;"}

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

@@ -0,0 +1,93 @@
+"use client";
+var D = Object.defineProperty, k = Object.defineProperties;
+var I = Object.getOwnPropertyDescriptors;
+var a = Object.getOwnPropertySymbols;
+var y = Object.prototype.hasOwnProperty, d = Object.prototype.propertyIsEnumerable;
+var h = (e, r, s) => r in e ? D(e, r, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[r] = s, x = (e, r) => {
+  for (var s in r || (r = {}))
+    y.call(r, s) && h(e, s, r[s]);
+  if (a)
+    for (var s of a(r))
+      d.call(r, s) && h(e, s, r[s]);
+  return e;
+}, g = (e, r) => k(e, I(r));
+var v = (e, r) => {
+  var s = {};
+  for (var t in e)
+    y.call(e, t) && r.indexOf(t) < 0 && (s[t] = e[t]);
+  if (e != null && a)
+    for (var t of a(e))
+      r.indexOf(t) < 0 && d.call(e, t) && (s[t] = e[t]);
+  return s;
+};
+import { jsxs as K, jsx as m } from "react/jsx-runtime";
+import { forwardRef as j } from "react";
+import { ChevronRight as R } from "lucide-react";
+import { getSpacingClass as l } from "../../tokens/spacing.js";
+import { getTypographySize as z } from "../../tokens/typography.js";
+import { useMenuContext as C } from "./MenuContext.js";
+const E = j(function(P, $) {
+  var c = P, {
+    children: r,
+    icon: s,
+    rightIcon: t,
+    disabled: o = !1,
+    onClick: f,
+    onSelect: i,
+    hasSubmenu: p = !1,
+    className: w = ""
+  } = c, N = v(c, [
+    "children",
+    "icon",
+    "rightIcon",
+    "disabled",
+    "onClick",
+    "onSelect",
+    "hasSubmenu",
+    "className"
+  ]);
+  const { closeMenu: M } = C(), u = (n) => {
+    o || (f == null || f(n), i == null || i(n), !p && !n.defaultPrevented && M());
+  };
+  return /* @__PURE__ */ K(
+    "div",
+    g(x({
+      ref: $,
+      role: "menuitem",
+      tabIndex: o ? -1 : 0,
+      "aria-disabled": o,
+      onClick: u,
+      onKeyDown: (n) => {
+        o || (n.key === "Enter" || n.key === " ") && (n.preventDefault(), u(n));
+      },
+      className: `
+          flex
+          items-center
+          ${l("sm", "gap")}
+          ${l("sm", "px")}
+          ${l("sm", "py")}
+          ${z("bodySmall")}
+          text-fg-primary
+          cursor-pointer
+          transition-colors
+          hover:bg-surface-hover
+          focus:bg-surface-hover
+          focus:outline-none
+          ${o ? "opacity-50 cursor-not-allowed" : ""}
+          ${w}
+        `
+    }, N), {
+      children: [
+        s && /* @__PURE__ */ m("span", { className: "shrink-0", children: s }),
+        /* @__PURE__ */ m("span", { className: "flex-1", children: r }),
+        p && /* @__PURE__ */ m(R, { className: "h-4 w-4 text-fg-secondary shrink-0" }),
+        t && !p && /* @__PURE__ */ m("span", { className: "shrink-0", children: t })
+      ]
+    })
+  );
+});
+E.displayName = "MenuItem";
+export {
+  E as default
+};
+//# sourceMappingURL=MenuItem.js.map

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;"}