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

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

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as o } from "react/jsx-runtime";
+import { X as l, Menu as u } from "lucide-react";
+import { Button as d } from "../../../primitives/Button/Button.js";
+import { useHeaderContext as p } from "../contexts/HeaderContext.js";
+import { cn as f } from "../../../utils/cn.js";
+function C({
+  className: n,
+  icon: r,
+  closeIcon: m,
+  variant: t = "ghost",
+  size: s = "md"
+}) {
+  const { isMobileMenuOpen: e, toggleMobileMenu: a } = p(), i = r || /* @__PURE__ */ o(u, { className: "h-5 w-5" }), c = m || /* @__PURE__ */ o(l, { className: "h-5 w-5" });
+  return /* @__PURE__ */ o(
+    d,
+    {
+      variant: t,
+      size: s,
+      onClick: a,
+      className: f("md:hidden", n),
+      "aria-label": e ? "Close menu" : "Open menu",
+      "aria-expanded": e,
+      children: e ? c : i
+    }
+  );
+}
+export {
+  C as HeaderHamburger
+};
+//# sourceMappingURL=HeaderHamburger.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderHamburger.js","sources":["../../../../../../src/ui/components/Header/components/HeaderHamburger.tsx"],"sourcesContent":["/**\n * HeaderHamburger Component\n *\n * Hamburger button for toggling mobile menu.\n *\n * @see EPIC-002: Header Component (Molecule)\n * @see TASK-027: Hamburger Button\n */\n\n\"use client\";\n\nimport React from \"react\";\nimport { Menu, X } from \"lucide-react\";\nimport { Button } from \"../../../primitives/Button/Button\";\nimport { useHeaderContext } from \"../contexts/HeaderContext\";\nimport { cn } from \"../../../utils\";\n\nexport interface HeaderHamburgerProps {\n  /**\n   * Additional CSS classes\n   */\n  className?: string;\n\n  /**\n   * Custom icon component\n   */\n  icon?: React.ReactNode;\n\n  /**\n   * Custom close icon component\n   */\n  closeIcon?: React.ReactNode;\n\n  /**\n   * Button variant\n   * @default 'ghost'\n   */\n  variant?: \"ghost\" | \"outline\";\n\n  /**\n   * Button size\n   * @default 'md'\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n}\n\n/**\n * HeaderHamburger Component\n *\n * Hamburger button that toggles the mobile menu.\n * Only visible on mobile devices.\n *\n * @example\n * ```tsx\n * <Header>\n *   <Header.Hamburger />\n *   <Header.Logo href=\"/\">MyApp</Header.Logo>\n * </Header>\n * ```\n */\nexport function HeaderHamburger({\n  className,\n  icon,\n  closeIcon,\n  variant = \"ghost\",\n  size = \"md\",\n}: HeaderHamburgerProps) {\n  const { isMobileMenuOpen, toggleMobileMenu } = useHeaderContext();\n\n  const MenuIcon = icon || <Menu className=\"h-5 w-5\" />;\n  const CloseIcon = closeIcon || <X className=\"h-5 w-5\" />;\n\n  return (\n    <Button\n      variant={variant}\n      size={size}\n      onClick={toggleMobileMenu}\n      className={cn(\"md:hidden\", className)}\n      aria-label={isMobileMenuOpen ? \"Close menu\" : \"Open menu\"}\n      aria-expanded={isMobileMenuOpen}\n    >\n      {isMobileMenuOpen ? CloseIcon : MenuIcon}\n    </Button>\n  );\n}\n"],"names":["HeaderHamburger","className","icon","closeIcon","variant","size","isMobileMenuOpen","toggleMobileMenu","useHeaderContext","MenuIcon","jsx","Menu","CloseIcon","X","Button","cn"],"mappings":";;;;;;AA4DO,SAASA,EAAgB;AAAA,EAC9B,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AACT,GAAyB;AACvB,QAAM,EAAE,kBAAAC,GAAkB,kBAAAC,EAAA,IAAqBC,EAAA,GAEzCC,IAAWP,KAAQ,gBAAAQ,EAACC,GAAA,EAAK,WAAU,WAAU,GAC7CC,IAAYT,KAAa,gBAAAO,EAACG,GAAA,EAAE,WAAU,WAAU;AAEtD,SACE,gBAAAH;AAAA,IAACI;AAAA,IAAA;AAAA,MACC,SAAAV;AAAA,MACA,MAAAC;AAAA,MACA,SAASE;AAAA,MACT,WAAWQ,EAAG,aAAad,CAAS;AAAA,MACpC,cAAYK,IAAmB,eAAe;AAAA,MAC9C,iBAAeA;AAAA,MAEd,cAAmBM,IAAYH;AAAA,IAAA;AAAA,EAAA;AAGtC;"}

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

@@ -0,0 +1,50 @@
+"use client";
+var x = Object.defineProperty, p = Object.defineProperties;
+var u = Object.getOwnPropertyDescriptors;
+var o = Object.getOwnPropertySymbols;
+var a = Object.prototype.hasOwnProperty, f = Object.prototype.propertyIsEnumerable;
+var m = (e, r, t) => r in e ? x(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t, l = (e, r) => {
+  for (var t in r || (r = {}))
+    a.call(r, t) && m(e, t, r[t]);
+  if (o)
+    for (var t of o(r))
+      f.call(r, t) && m(e, t, r[t]);
+  return e;
+}, s = (e, r) => p(e, u(r));
+var c = (e, r) => {
+  var t = {};
+  for (var i in e)
+    a.call(e, i) && r.indexOf(i) < 0 && (t[i] = e[i]);
+  if (e != null && o)
+    for (var i of o(e))
+      r.indexOf(i) < 0 && f.call(e, i) && (t[i] = e[i]);
+  return t;
+};
+import { jsx as d } from "react/jsx-runtime";
+import { NavLink as h } from "../../../primitives/NavLink/NavLink.js";
+import { cn as v } from "../../../utils/cn.js";
+function j(N) {
+  var n = N, {
+    children: e,
+    className: r,
+    href: t
+  } = n, i = c(n, [
+    "children",
+    "className",
+    "href"
+  ]);
+  return /* @__PURE__ */ d("div", { className: "flex-shrink-0", children: /* @__PURE__ */ d(
+    h,
+    s(l({
+      href: t || "/",
+      variant: "default",
+      className: v("flex items-center font-semibold text-lg", r)
+    }, i), {
+      children: e
+    })
+  ) });
+}
+export {
+  j as HeaderLogo
+};
+//# sourceMappingURL=HeaderLogo.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderLogo.js","sources":["../../../../../../src/ui/components/Header/components/HeaderLogo.tsx"],"sourcesContent":["/**\n * HeaderLogo Component\n *\n * Logo 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 type { NavLinkProps } from \"../../../primitives/NavLink\";\nimport { NavLink } from \"../../../primitives/NavLink\";\n\nexport interface HeaderLogoProps extends Omit<NavLinkProps, \"children\"> {\n  /**\n   * Logo content (text, image, or component)\n   */\n  children: ReactNode;\n\n  /**\n   * Additional CSS classes\n   */\n  className?: string;\n}\n\n/**\n * HeaderLogo Component\n *\n * Logo slot for Header. Renders as a NavLink by default.\n *\n * @example\n * ```tsx\n * <Header.Logo href=\"/\">MyApp</Header.Logo>\n * <Header.Logo href=\"/\">\n *   <img src=\"/logo.png\" alt=\"Logo\" />\n * </Header.Logo>\n * ```\n */\nexport function HeaderLogo({\n  children,\n  className,\n  href,\n  ...props\n}: HeaderLogoProps) {\n  return (\n    <div className=\"flex-shrink-0\">\n      <NavLink\n        href={href || \"/\"}\n        variant=\"default\"\n        className={cn(\"flex items-center font-semibold text-lg\", className)}\n        {...props}\n      >\n        {children}\n      </NavLink>\n    </div>\n  );\n}\n"],"names":["HeaderLogo","_a","_b","children","className","href","props","__objRest","jsx","NavLink","__spreadProps","__spreadValues","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAyCO,SAASA,EAAWC,GAKP;AALO,MAAAC,IAAAD,GACzB;AAAA,cAAAE;AAAA,IACA,WAAAC;AAAA,IACA,MAAAC;AAAA,MAHyBH,GAItBI,IAAAC,EAJsBL,GAItB;AAAA,IAHH;AAAA,IACA;AAAA,IACA;AAAA;AAGA,SACE,gBAAAM,EAAC,OAAA,EAAI,WAAU,iBACb,UAAA,gBAAAA;AAAA,IAACC;AAAA,IAAAC,EAAAC,EAAA;AAAA,MACC,MAAMN,KAAQ;AAAA,MACd,SAAQ;AAAA,MACR,WAAWO,EAAG,2CAA2CR,CAAS;AAAA,OAC9DE,IAJL;AAAA,MAME,UAAAH;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;"}

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

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as e } from "react/jsx-runtime";
+import { useHeaderContext as t } from "../contexts/HeaderContext.js";
+import { getSpacingClass as o } from "../../../tokens/spacing.js";
+import s from "../../Drawer/Drawer.js";
+import m from "../../Drawer/DrawerContent.js";
+import { cn as c } from "../../../utils/cn.js";
+function x({
+  children: r,
+  className: n
+}) {
+  const { isMobileMenuOpen: i, closeMobileMenu: a } = t();
+  return /* @__PURE__ */ e(
+    s,
+    {
+      open: i,
+      onOpenChange: (l) => {
+        l || a();
+      },
+      position: "left",
+      size: "sm",
+      closeOnOverlayClick: !0,
+      closeOnEscape: !0,
+      children: /* @__PURE__ */ e(m, { className: c(o("base", "p"), n), children: /* @__PURE__ */ e(
+        "nav",
+        {
+          className: `flex flex-col ${o("sm", "gap")}`,
+          "aria-label": "Mobile navigation",
+          children: r
+        }
+      ) })
+    }
+  );
+}
+export {
+  x as HeaderMobileMenu
+};
+//# sourceMappingURL=HeaderMobileMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderMobileMenu.js","sources":["../../../../../../src/ui/components/Header/components/HeaderMobileMenu.tsx"],"sourcesContent":["/**\n * HeaderMobileMenu Component\n *\n * Mobile menu drawer for Header navigation.\n *\n * @see EPIC-002: Header Component (Molecule)\n * @see TASK-028: Mobile Menu (Drawer)\n */\n\n\"use client\";\n\nimport React from \"react\";\nimport { Drawer, DrawerContent } from \"../../Drawer\";\nimport { useHeaderContext } from \"../contexts/HeaderContext\";\nimport { cn } from \"../../../utils\";\nimport { getSpacingClass } from \"../../../tokens/spacing\";\n\nexport interface HeaderMobileMenuProps {\n  /**\n   * Menu content (typically navigation links)\n   */\n  children: React.ReactNode;\n\n  /**\n   * Additional CSS classes\n   */\n  className?: string;\n}\n\n/**\n * HeaderMobileMenu Component\n *\n * Mobile menu drawer that slides in from the side.\n * Uses Drawer component from design system.\n *\n * @example\n * ```tsx\n * <Header>\n *   <Header.MobileMenu>\n *     <NavLink href=\"/home\">Home</NavLink>\n *     <NavLink href=\"/about\">About</NavLink>\n *   </Header.MobileMenu>\n * </Header>\n * ```\n */\nexport function HeaderMobileMenu({\n  children,\n  className,\n}: HeaderMobileMenuProps) {\n  const { isMobileMenuOpen, closeMobileMenu } = useHeaderContext();\n\n  return (\n    <Drawer\n      open={isMobileMenuOpen}\n      onOpenChange={(open) => {\n        if (!open) {\n          closeMobileMenu();\n        }\n      }}\n      position=\"left\"\n      size=\"sm\"\n      closeOnOverlayClick\n      closeOnEscape\n    >\n      <DrawerContent className={cn(getSpacingClass(\"base\", \"p\"), className)}>\n        <nav\n          className={`flex flex-col ${getSpacingClass(\"sm\", \"gap\")}`}\n          aria-label=\"Mobile navigation\"\n        >\n          {children}\n        </nav>\n      </DrawerContent>\n    </Drawer>\n  );\n}\n"],"names":["HeaderMobileMenu","children","className","isMobileMenuOpen","closeMobileMenu","useHeaderContext","jsx","Drawer","open","DrawerContent","cn","getSpacingClass"],"mappings":";;;;;;;AA6CO,SAASA,EAAiB;AAAA,EAC/B,UAAAC;AAAA,EACA,WAAAC;AACF,GAA0B;AACxB,QAAM,EAAE,kBAAAC,GAAkB,iBAAAC,EAAA,IAAoBC,EAAA;AAE9C,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAMJ;AAAA,MACN,cAAc,CAACK,MAAS;AACtB,QAAKA,KACHJ,EAAA;AAAA,MAEJ;AAAA,MACA,UAAS;AAAA,MACT,MAAK;AAAA,MACL,qBAAmB;AAAA,MACnB,eAAa;AAAA,MAEb,UAAA,gBAAAE,EAACG,KAAc,WAAWC,EAAGC,EAAgB,QAAQ,GAAG,GAAGT,CAAS,GAClE,UAAA,gBAAAI;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,iBAAiBK,EAAgB,MAAM,KAAK,CAAC;AAAA,UACxD,cAAW;AAAA,UAEV,UAAAV;AAAA,QAAA;AAAA,MAAA,EACH,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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