@brycks/core-front 0.2.7 → 0.2.9

package/dist/components/navigation/Dropdown/Dropdown.js

@@ -0,0 +1,259 @@
+import { jsx as u, jsxs as T, Fragment as G } from "react/jsx-runtime";
+import { forwardRef as v, useState as k, useRef as q, useEffect as g, useCallback as P, cloneElement as J, createContext as Q, useContext as V } from "react";
+import { createPortal as Z } from "react-dom";
+import { cx as h } from "../../../utils/styles.js";
+const B = Q(null);
+function _() {
+  const m = V(B);
+  if (!m)
+    throw new Error("Dropdown components must be used within a Dropdown");
+  return m;
+}
+const $ = v(function({
+  trigger: r,
+  isOpen: a,
+  defaultOpen: l = !1,
+  onOpenChange: i,
+  placement: s = "bottom-start",
+  offset: p = 4,
+  closeOnSelect: D = !0,
+  className: x,
+  style: C,
+  children: E,
+  testId: S,
+  ...I
+}, L) {
+  const [N, W] = k(l), [t, O] = k({ top: 0, left: 0 }), [f, y] = k(-1), [z, K] = k(!1), b = q(null), w = q(null), o = a ?? N;
+  g(() => (K(!0), () => K(!1)), []);
+  const c = P(
+    (e) => {
+      a === void 0 && W(e), i?.(e), e || y(-1);
+    },
+    [a, i]
+  ), X = P(() => c(!1), [c]);
+  g(() => {
+    if (!o || !b.current || !z) return;
+    const e = () => {
+      const n = b.current;
+      if (!n) return;
+      const d = n.getBoundingClientRect(), M = window.scrollX, j = window.scrollY;
+      let R = 0, A = 0;
+      s.startsWith("bottom") ? R = d.bottom + j + p : R = d.top + j - p, s.endsWith("start") ? A = d.left + M : A = d.right + M, O({ top: R, left: A });
+    };
+    return e(), window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), () => {
+      window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0);
+    };
+  }, [o, s, p, z]), g(() => {
+    if (!o) return;
+    const e = (n) => {
+      b.current?.contains(n.target) || w.current?.contains(n.target) || c(!1);
+    };
+    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+  }, [o, c]);
+  const Y = P(
+    (e) => {
+      if (!o) {
+        (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), c(!0));
+        return;
+      }
+      const n = w.current?.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])');
+      if (n?.length)
+        switch (e.key) {
+          case "ArrowDown":
+            e.preventDefault(), y((d) => (d + 1) % n.length);
+            break;
+          case "ArrowUp":
+            e.preventDefault(), y((d) => (d - 1 + n.length) % n.length);
+            break;
+          case "Home":
+            e.preventDefault(), y(0);
+            break;
+          case "End":
+            e.preventDefault(), y(n.length - 1);
+            break;
+          case "Escape":
+            e.preventDefault(), c(!1), b.current?.focus();
+            break;
+          case "Enter":
+          case " ":
+            e.preventDefault(), f >= 0 && n[f]?.click();
+            break;
+        }
+    },
+    [o, f, c]
+  );
+  g(() => {
+    if (!o || f < 0) return;
+    w.current?.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])')?.[f]?.focus();
+  }, [o, f]);
+  const F = r.props, H = J(r, {
+    ref: b,
+    "aria-haspopup": "menu",
+    "aria-expanded": o,
+    onClick: (e) => {
+      F.onClick?.(e), c(!o);
+    },
+    onKeyDown: (e) => {
+      F.onKeyDown?.(e), Y(e);
+    }
+  }), U = {
+    position: "absolute",
+    top: t.top,
+    left: s.endsWith("end") ? "auto" : t.left,
+    right: s.endsWith("end") ? window.innerWidth - t.left : "auto",
+    zIndex: "var(--brycks-z-dropdown)",
+    minWidth: b.current?.offsetWidth ?? 160,
+    backgroundColor: "var(--brycks-background-elevated)",
+    border: "1px solid var(--brycks-border-default)",
+    borderRadius: "var(--brycks-radius-lg)",
+    boxShadow: "var(--brycks-shadow-lg)",
+    padding: 4,
+    animation: "brycks-dropdown-in 150ms ease-out",
+    outline: "none",
+    ...C
+  };
+  return /* @__PURE__ */ u(B.Provider, { value: { isOpen: o, close: D ? X : () => {
+  }, activeIndex: f, setActiveIndex: y }, children: /* @__PURE__ */ T(
+    "div",
+    {
+      ref: L,
+      className: h("brycks-dropdown", x),
+      style: { display: "inline-block" },
+      "data-testid": S,
+      ...I,
+      children: [
+        H,
+        o && z && Z(
+          /* @__PURE__ */ T(G, { children: [
+            /* @__PURE__ */ u("style", { children: `
+                @keyframes brycks-dropdown-in {
+                  from { opacity: 0; transform: translateY(-4px); }
+                  to { opacity: 1; transform: translateY(0); }
+                }
+              ` }),
+            /* @__PURE__ */ u(
+              "div",
+              {
+                ref: w,
+                role: "menu",
+                style: U,
+                onKeyDown: Y,
+                tabIndex: -1,
+                children: E
+              }
+            )
+          ] }),
+          document.body
+        )
+      ]
+    }
+  ) });
+});
+$.displayName = "Dropdown";
+const ee = v(function({ disabled: r = !1, icon: a, shortcut: l, destructive: i = !1, className: s, style: p, children: D, onClick: x, ...C }, E) {
+  const { close: S } = _(), I = (t) => {
+    r || (x?.(t), S());
+  }, L = {
+    display: "flex",
+    alignItems: "center",
+    gap: 10,
+    padding: "8px 12px",
+    fontSize: 14,
+    color: r ? "var(--brycks-foreground-disabled)" : i ? "var(--brycks-error-default)" : "var(--brycks-foreground-default)",
+    backgroundColor: "transparent",
+    borderRadius: "var(--brycks-radius-md)",
+    cursor: r ? "not-allowed" : "pointer",
+    transition: "background-color 100ms ease-out",
+    outline: "none",
+    ...p
+  }, N = {
+    width: 16,
+    height: 16,
+    color: r ? "var(--brycks-foreground-disabled)" : i ? "var(--brycks-error-default)" : "var(--brycks-foreground-muted)",
+    flexShrink: 0
+  }, W = {
+    marginLeft: "auto",
+    fontSize: 12,
+    color: "var(--brycks-foreground-muted)",
+    fontFamily: "var(--brycks-font-mono)"
+  };
+  return /* @__PURE__ */ T(
+    "div",
+    {
+      ref: E,
+      role: "menuitem",
+      "aria-disabled": r,
+      tabIndex: r ? -1 : 0,
+      className: h("brycks-dropdown-item", r && "brycks-dropdown-item--disabled", s),
+      style: L,
+      onClick: I,
+      onMouseEnter: (t) => {
+        r || (t.currentTarget.style.backgroundColor = "var(--brycks-background-muted)");
+      },
+      onMouseLeave: (t) => {
+        t.currentTarget.style.backgroundColor = "transparent";
+      },
+      onFocus: (t) => {
+        t.currentTarget.style.backgroundColor = "var(--brycks-background-muted)";
+      },
+      onBlur: (t) => {
+        t.currentTarget.style.backgroundColor = "transparent";
+      },
+      ...C,
+      children: [
+        a && /* @__PURE__ */ u("span", { style: N, children: a }),
+        /* @__PURE__ */ u("span", { style: { flex: 1 }, children: D }),
+        l && /* @__PURE__ */ u("span", { style: W, children: l })
+      ]
+    }
+  );
+});
+ee.displayName = "DropdownItem";
+const re = v(function({ className: r, style: a, ...l }, i) {
+  const s = {
+    height: 1,
+    backgroundColor: "var(--brycks-border-muted)",
+    margin: "4px 0",
+    ...a
+  };
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      ref: i,
+      role: "separator",
+      className: h("brycks-dropdown-divider", r),
+      style: s,
+      ...l
+    }
+  );
+});
+re.displayName = "DropdownDivider";
+const te = v(function({ className: r, style: a, children: l, ...i }, s) {
+  const p = {
+    padding: "8px 12px 4px 12px",
+    fontSize: 11,
+    fontWeight: 600,
+    color: "var(--brycks-foreground-muted)",
+    textTransform: "uppercase",
+    letterSpacing: "0.05em",
+    ...a
+  };
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      ref: s,
+      className: h("brycks-dropdown-label", r),
+      style: p,
+      ...i,
+      children: l
+    }
+  );
+});
+te.displayName = "DropdownLabel";
+export {
+  $ as Dropdown,
+  re as DropdownDivider,
+  ee as DropdownItem,
+  te as DropdownLabel
+};
+//# sourceMappingURL=Dropdown.js.map

package/dist/components/navigation/Dropdown/Dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.js","sources":["../../../../src/components/navigation/Dropdown/Dropdown.tsx"],"sourcesContent":["/**\n * Dropdown Component\n *\n * A dropdown menu with keyboard navigation support.\n * Can be used for actions, navigation, or selection.\n */\n\nimport {\n  forwardRef,\n  useState,\n  useCallback,\n  useRef,\n  useEffect,\n  cloneElement,\n  createContext,\n  useContext,\n  type CSSProperties,\n  type ReactNode,\n  type ReactElement,\n  type HTMLAttributes,\n  type KeyboardEvent,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport { cx } from '../../../utils/styles'\n\nexport type DropdownPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end'\n\ninterface DropdownContextValue {\n  isOpen: boolean\n  close: () => void\n  activeIndex: number\n  setActiveIndex: (index: number) => void\n}\n\nconst DropdownContext = createContext<DropdownContextValue | null>(null)\n\nfunction useDropdownContext() {\n  const context = useContext(DropdownContext)\n  if (!context) {\n    throw new Error('Dropdown components must be used within a Dropdown')\n  }\n  return context\n}\n\nexport interface DropdownProps extends HTMLAttributes<HTMLDivElement> {\n  /** Trigger element */\n  trigger: ReactElement\n  /** Whether the dropdown is open (controlled) */\n  isOpen?: boolean\n  /** Default open state (uncontrolled) */\n  defaultOpen?: boolean\n  /** Callback when open state changes */\n  onOpenChange?: (isOpen: boolean) => void\n  /** Dropdown placement */\n  placement?: DropdownPlacement\n  /** Offset from trigger */\n  offset?: number\n  /** Whether to close on item select */\n  closeOnSelect?: boolean\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nexport const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(function Dropdown(\n  {\n    trigger,\n    isOpen: controlledIsOpen,\n    defaultOpen = false,\n    onOpenChange,\n    placement = 'bottom-start',\n    offset = 4,\n    closeOnSelect = true,\n    className,\n    style,\n    children,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const [internalIsOpen, setInternalIsOpen] = useState(defaultOpen)\n  const [position, setPosition] = useState({ top: 0, left: 0 })\n  const [activeIndex, setActiveIndex] = useState(-1)\n  const [mounted, setMounted] = useState(false)\n  const triggerRef = useRef<HTMLElement>(null)\n  const menuRef = useRef<HTMLDivElement>(null)\n\n  const isOpen = controlledIsOpen ?? internalIsOpen\n\n  useEffect(() => {\n    setMounted(true)\n    return () => setMounted(false)\n  }, [])\n\n  const setIsOpen = useCallback(\n    (open: boolean) => {\n      if (controlledIsOpen === undefined) {\n        setInternalIsOpen(open)\n      }\n      onOpenChange?.(open)\n      if (!open) {\n        setActiveIndex(-1)\n      }\n    },\n    [controlledIsOpen, onOpenChange]\n  )\n\n  const close = useCallback(() => setIsOpen(false), [setIsOpen])\n\n  // Calculate position\n  useEffect(() => {\n    if (!isOpen || !triggerRef.current || !mounted) return\n\n    const updatePosition = () => {\n      const trigger = triggerRef.current\n      if (!trigger) return\n\n      const rect = trigger.getBoundingClientRect()\n      const scrollX = window.scrollX\n      const scrollY = window.scrollY\n\n      let top = 0\n      let left = 0\n\n      if (placement.startsWith('bottom')) {\n        top = rect.bottom + scrollY + offset\n      } else {\n        top = rect.top + scrollY - offset\n      }\n\n      if (placement.endsWith('start')) {\n        left = rect.left + scrollX\n      } else {\n        left = rect.right + scrollX\n      }\n\n      setPosition({ top, left })\n    }\n\n    updatePosition()\n    window.addEventListener('resize', updatePosition)\n    window.addEventListener('scroll', updatePosition, true)\n\n    return () => {\n      window.removeEventListener('resize', updatePosition)\n      window.removeEventListener('scroll', updatePosition, true)\n    }\n  }, [isOpen, placement, offset, mounted])\n\n  // Close on outside click\n  useEffect(() => {\n    if (!isOpen) return\n\n    const handleClick = (e: MouseEvent) => {\n      if (\n        triggerRef.current?.contains(e.target as Node) ||\n        menuRef.current?.contains(e.target as Node)\n      ) {\n        return\n      }\n      setIsOpen(false)\n    }\n\n    document.addEventListener('mousedown', handleClick)\n    return () => document.removeEventListener('mousedown', handleClick)\n  }, [isOpen, setIsOpen])\n\n  // Keyboard navigation\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (!isOpen) {\n        if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {\n          e.preventDefault()\n          setIsOpen(true)\n        }\n        return\n      }\n\n      const items = menuRef.current?.querySelectorAll<HTMLElement>('[role=\"menuitem\"]:not([aria-disabled=\"true\"])')\n      if (!items?.length) return\n\n      switch (e.key) {\n        case 'ArrowDown':\n          e.preventDefault()\n          setActiveIndex((prev) => (prev + 1) % items.length)\n          break\n        case 'ArrowUp':\n          e.preventDefault()\n          setActiveIndex((prev) => (prev - 1 + items.length) % items.length)\n          break\n        case 'Home':\n          e.preventDefault()\n          setActiveIndex(0)\n          break\n        case 'End':\n          e.preventDefault()\n          setActiveIndex(items.length - 1)\n          break\n        case 'Escape':\n          e.preventDefault()\n          setIsOpen(false)\n          triggerRef.current?.focus()\n          break\n        case 'Enter':\n        case ' ':\n          e.preventDefault()\n          if (activeIndex >= 0) {\n            items[activeIndex]?.click()\n          }\n          break\n      }\n    },\n    [isOpen, activeIndex, setIsOpen]\n  )\n\n  // Focus active item\n  useEffect(() => {\n    if (!isOpen || activeIndex < 0) return\n    const items = menuRef.current?.querySelectorAll<HTMLElement>('[role=\"menuitem\"]:not([aria-disabled=\"true\"])')\n    items?.[activeIndex]?.focus()\n  }, [isOpen, activeIndex])\n\n  const triggerProps = trigger.props as Record<string, unknown>\n  const triggerElement = cloneElement(trigger as ReactElement<Record<string, unknown>>, {\n    ref: triggerRef,\n    'aria-haspopup': 'menu',\n    'aria-expanded': isOpen,\n    onClick: (e: React.MouseEvent) => {\n      (triggerProps.onClick as ((e: React.MouseEvent) => void) | undefined)?.(e)\n      setIsOpen(!isOpen)\n    },\n    onKeyDown: (e: KeyboardEvent) => {\n      (triggerProps.onKeyDown as ((e: KeyboardEvent) => void) | undefined)?.(e)\n      handleKeyDown(e)\n    },\n  })\n\n  const menuStyle: CSSProperties = {\n    position: 'absolute',\n    top: position.top,\n    left: placement.endsWith('end') ? 'auto' : position.left,\n    right: placement.endsWith('end') ? window.innerWidth - position.left : 'auto',\n    zIndex: 'var(--brycks-z-dropdown)' as unknown as number,\n    minWidth: triggerRef.current?.offsetWidth ?? 160,\n    backgroundColor: 'var(--brycks-background-elevated)',\n    border: '1px solid var(--brycks-border-default)',\n    borderRadius: 'var(--brycks-radius-lg)',\n    boxShadow: 'var(--brycks-shadow-lg)',\n    padding: 4,\n    animation: 'brycks-dropdown-in 150ms ease-out',\n    outline: 'none',\n    ...style,\n  }\n\n  return (\n    <DropdownContext.Provider value={{ isOpen, close: closeOnSelect ? close : () => {}, activeIndex, setActiveIndex }}>\n      <div\n        ref={ref}\n        className={cx('brycks-dropdown', className)}\n        style={{ display: 'inline-block' }}\n        data-testid={testId}\n        {...props}\n      >\n        {triggerElement}\n        {isOpen && mounted && createPortal(\n          <>\n            <style>\n              {`\n                @keyframes brycks-dropdown-in {\n                  from { opacity: 0; transform: translateY(-4px); }\n                  to { opacity: 1; transform: translateY(0); }\n                }\n              `}\n            </style>\n            <div\n              ref={menuRef}\n              role=\"menu\"\n              style={menuStyle}\n              onKeyDown={handleKeyDown}\n              tabIndex={-1}\n            >\n              {children}\n            </div>\n          </>,\n          document.body\n        )}\n      </div>\n    </DropdownContext.Provider>\n  )\n})\n\nDropdown.displayName = 'Dropdown'\n\n// DropdownItem\nexport interface DropdownItemProps extends HTMLAttributes<HTMLDivElement> {\n  /** Whether the item is disabled */\n  disabled?: boolean\n  /** Icon before the label */\n  icon?: ReactNode\n  /** Shortcut text */\n  shortcut?: string\n  /** Whether the item is destructive */\n  destructive?: boolean\n  /** Custom class name */\n  className?: string\n}\n\nexport const DropdownItem = forwardRef<HTMLDivElement, DropdownItemProps>(function DropdownItem(\n  { disabled = false, icon, shortcut, destructive = false, className, style, children, onClick, ...props },\n  ref\n) {\n  const { close } = useDropdownContext()\n\n  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (disabled) return\n    onClick?.(e)\n    close()\n  }\n\n  const itemStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    gap: 10,\n    padding: '8px 12px',\n    fontSize: 14,\n    color: disabled\n      ? 'var(--brycks-foreground-disabled)'\n      : destructive\n      ? 'var(--brycks-error-default)'\n      : 'var(--brycks-foreground-default)',\n    backgroundColor: 'transparent',\n    borderRadius: 'var(--brycks-radius-md)',\n    cursor: disabled ? 'not-allowed' : 'pointer',\n    transition: 'background-color 100ms ease-out',\n    outline: 'none',\n    ...style,\n  }\n\n  const iconStyle: CSSProperties = {\n    width: 16,\n    height: 16,\n    color: disabled\n      ? 'var(--brycks-foreground-disabled)'\n      : destructive\n      ? 'var(--brycks-error-default)'\n      : 'var(--brycks-foreground-muted)',\n    flexShrink: 0,\n  }\n\n  const shortcutStyle: CSSProperties = {\n    marginLeft: 'auto',\n    fontSize: 12,\n    color: 'var(--brycks-foreground-muted)',\n    fontFamily: 'var(--brycks-font-mono)',\n  }\n\n  return (\n    <div\n      ref={ref}\n      role=\"menuitem\"\n      aria-disabled={disabled}\n      tabIndex={disabled ? -1 : 0}\n      className={cx('brycks-dropdown-item', disabled && 'brycks-dropdown-item--disabled', className)}\n      style={itemStyle}\n      onClick={handleClick}\n      onMouseEnter={(e) => {\n        if (!disabled) {\n          e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n        }\n      }}\n      onMouseLeave={(e) => {\n        e.currentTarget.style.backgroundColor = 'transparent'\n      }}\n      onFocus={(e) => {\n        e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n      }}\n      onBlur={(e) => {\n        e.currentTarget.style.backgroundColor = 'transparent'\n      }}\n      {...props}\n    >\n      {icon && <span style={iconStyle}>{icon}</span>}\n      <span style={{ flex: 1 }}>{children}</span>\n      {shortcut && <span style={shortcutStyle}>{shortcut}</span>}\n    </div>\n  )\n})\n\nDropdownItem.displayName = 'DropdownItem'\n\n// DropdownDivider\nexport interface DropdownDividerProps extends HTMLAttributes<HTMLDivElement> {\n  /** Custom class name */\n  className?: string\n}\n\nexport const DropdownDivider = forwardRef<HTMLDivElement, DropdownDividerProps>(function DropdownDivider(\n  { className, style, ...props },\n  ref\n) {\n  const dividerStyle: CSSProperties = {\n    height: 1,\n    backgroundColor: 'var(--brycks-border-muted)',\n    margin: '4px 0',\n    ...style,\n  }\n\n  return (\n    <div\n      ref={ref}\n      role=\"separator\"\n      className={cx('brycks-dropdown-divider', className)}\n      style={dividerStyle}\n      {...props}\n    />\n  )\n})\n\nDropdownDivider.displayName = 'DropdownDivider'\n\n// DropdownLabel\nexport interface DropdownLabelProps extends HTMLAttributes<HTMLDivElement> {\n  /** Custom class name */\n  className?: string\n}\n\nexport const DropdownLabel = forwardRef<HTMLDivElement, DropdownLabelProps>(function DropdownLabel(\n  { className, style, children, ...props },\n  ref\n) {\n  const labelStyle: CSSProperties = {\n    padding: '8px 12px 4px 12px',\n    fontSize: 11,\n    fontWeight: 600,\n    color: 'var(--brycks-foreground-muted)',\n    textTransform: 'uppercase',\n    letterSpacing: '0.05em',\n    ...style,\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={cx('brycks-dropdown-label', className)}\n      style={labelStyle}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n})\n\nDropdownLabel.displayName = 'DropdownLabel'\n"],"names":["DropdownContext","createContext","useDropdownContext","context","useContext","Dropdown","forwardRef","trigger","controlledIsOpen","defaultOpen","onOpenChange","placement","offset","closeOnSelect","className","style","children","testId","props","ref","internalIsOpen","setInternalIsOpen","useState","position","setPosition","activeIndex","setActiveIndex","mounted","setMounted","triggerRef","useRef","menuRef","isOpen","useEffect","setIsOpen","useCallback","open","close","updatePosition","rect","scrollX","scrollY","top","left","handleClick","e","handleKeyDown","items","prev","triggerProps","triggerElement","cloneElement","menuStyle","jsx","jsxs","cx","createPortal","Fragment","DropdownItem","disabled","icon","shortcut","destructive","onClick","itemStyle","iconStyle","shortcutStyle","DropdownDivider","dividerStyle","DropdownLabel","labelStyle"],"mappings":"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"}

package/dist/components/navigation/Menu/Menu.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),u=require("react"),y=require("../../../utils/styles.cjs"),S=u.createContext(null);function k(){const l=u.useContext(S);if(!l)throw new Error("Menu components must be used within a Menu");return l}const M=u.forwardRef(function({activeItem:e,onChange:o,size:n="md",collapsed:t=!1,className:c,style:m,children:f,testId:d,...p},g){const[x,v]=u.useState(null),h=e!==void 0?e:x,a=r=>{e===void 0&&v(r),o?.(r)},s={display:"flex",flexDirection:"column",gap:2,padding:8,...m};return i.jsx(S.Provider,{value:{size:n,activeItem:h,setActiveItem:a,collapsed:t},children:i.jsx("nav",{ref:g,className:y.cx("brycks-menu",`brycks-menu--${n}`,t&&"brycks-menu--collapsed",c),style:s,"data-testid":d,...p,children:f})})});M.displayName="Menu";const D={sm:{height:32,fontSize:13,iconSize:16,padding:10},md:{height:40,fontSize:14,iconSize:18,padding:12},lg:{height:48,fontSize:16,iconSize:20,padding:14}},j=u.forwardRef(function({value:e,icon:o,badge:n,disabled:t=!1,onClick:c,className:m,style:f,children:d,...p},g){const{size:x,activeItem:v,setActiveItem:h,collapsed:a}=k(),s=v===e,r=D[x],I=()=>{t||(h(e),c?.(e))},w={display:"flex",alignItems:"center",gap:10,width:"100%",minHeight:r.height,padding:a?r.padding:`0 ${r.padding}px`,fontSize:r.fontSize,fontWeight:s?600:500,color:t?"var(--brycks-foreground-disabled)":s?"var(--brycks-primary-default)":"var(--brycks-foreground-default)",backgroundColor:s?"var(--brycks-primary-50)":"transparent",border:"none",borderRadius:"var(--brycks-radius-md)",cursor:t?"not-allowed":"pointer",transition:"all 150ms ease-out",textAlign:"left",outline:"none",justifyContent:a?"center":"flex-start",...f},N={width:r.iconSize,height:r.iconSize,flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center"},R={marginLeft:"auto"};return i.jsxs("button",{ref:g,type:"button",disabled:t,className:y.cx("brycks-menu-item",s&&"brycks-menu-item--active",m),style:w,onClick:I,onMouseEnter:b=>{!t&&!s&&(b.currentTarget.style.backgroundColor="var(--brycks-background-muted)")},onMouseLeave:b=>{s||(b.currentTarget.style.backgroundColor="transparent")},title:a?String(d):void 0,...p,children:[o&&i.jsx("span",{style:N,children:o}),!a&&i.jsx("span",{style:{flex:1},children:d}),!a&&n&&i.jsx("span",{style:R,children:n})]})});j.displayName="MenuItem";const C=u.forwardRef(function({label:e,className:o,style:n,children:t,...c},m){const{collapsed:f}=k(),d={display:"flex",flexDirection:"column",gap:2,...n},p={padding:"12px 12px 6px 12px",fontSize:11,fontWeight:600,color:"var(--brycks-foreground-muted)",textTransform:"uppercase",letterSpacing:"0.05em"};return i.jsxs("div",{ref:m,className:y.cx("brycks-menu-group",o),style:d,...c,children:[e&&!f&&i.jsx("div",{style:p,children:e}),t]})});C.displayName="MenuGroup";const z=u.forwardRef(function({className:e,style:o,...n},t){const c={height:1,backgroundColor:"var(--brycks-border-muted)",margin:"8px 0",...o};return i.jsx("div",{ref:t,role:"separator",className:y.cx("brycks-menu-divider",e),style:c,...n})});z.displayName="MenuDivider";exports.Menu=M;exports.MenuDivider=z;exports.MenuGroup=C;exports.MenuItem=j;
+//# sourceMappingURL=Menu.cjs.map

package/dist/components/navigation/Menu/Menu.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.cjs","sources":["../../../../src/components/navigation/Menu/Menu.tsx"],"sourcesContent":["/**\n * Menu Component\n *\n * A vertical navigation menu with support for nested items.\n * Suitable for sidebars and navigation panels.\n */\n\nimport {\n  forwardRef,\n  useState,\n  createContext,\n  useContext,\n  type CSSProperties,\n  type ReactNode,\n  type HTMLAttributes,\n} from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type MenuSize = 'sm' | 'md' | 'lg'\n\ninterface MenuContextValue {\n  size: MenuSize\n  activeItem: string | null\n  setActiveItem: (value: string | null) => void\n  collapsed: boolean\n}\n\nconst MenuContext = createContext<MenuContextValue | null>(null)\n\nfunction useMenuContext() {\n  const context = useContext(MenuContext)\n  if (!context) {\n    throw new Error('Menu components must be used within a Menu')\n  }\n  return context\n}\n\nexport interface MenuProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {\n  /** Currently active item */\n  activeItem?: string | null\n  /** Callback when active item changes */\n  onChange?: (value: string | null) => void\n  /** Menu size */\n  size?: MenuSize\n  /** Whether the menu is collapsed (icons only) */\n  collapsed?: boolean\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nexport const Menu = forwardRef<HTMLElement, MenuProps>(function Menu(\n  {\n    activeItem: controlledActiveItem,\n    onChange,\n    size = 'md',\n    collapsed = false,\n    className,\n    style,\n    children,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const [internalActiveItem, setInternalActiveItem] = useState<string | null>(null)\n  const activeItem = controlledActiveItem !== undefined ? controlledActiveItem : internalActiveItem\n\n  const setActiveItem = (value: string | null) => {\n    if (controlledActiveItem === undefined) {\n      setInternalActiveItem(value)\n    }\n    onChange?.(value)\n  }\n\n  const menuStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 2,\n    padding: 8,\n    ...style,\n  }\n\n  return (\n    <MenuContext.Provider value={{ size, activeItem, setActiveItem, collapsed }}>\n      <nav\n        ref={ref}\n        className={cx('brycks-menu', `brycks-menu--${size}`, collapsed && 'brycks-menu--collapsed', className)}\n        style={menuStyle}\n        data-testid={testId}\n        {...props}\n      >\n        {children}\n      </nav>\n    </MenuContext.Provider>\n  )\n})\n\nMenu.displayName = 'Menu'\n\n// MenuItem\nexport interface MenuItemProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'onClick'> {\n  /** Item value (unique identifier) */\n  value: string\n  /** Icon before the label */\n  icon?: ReactNode\n  /** Badge/count after the label */\n  badge?: ReactNode\n  /** Whether the item is disabled */\n  disabled?: boolean\n  /** Callback when clicked */\n  onClick?: (value: string) => void\n  /** Custom class name */\n  className?: string\n}\n\nconst sizeConfig: Record<MenuSize, { height: number; fontSize: number; iconSize: number; padding: number }> = {\n  sm: { height: 32, fontSize: 13, iconSize: 16, padding: 10 },\n  md: { height: 40, fontSize: 14, iconSize: 18, padding: 12 },\n  lg: { height: 48, fontSize: 16, iconSize: 20, padding: 14 },\n}\n\nexport const MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(function MenuItem(\n  { value, icon, badge, disabled = false, onClick, className, style, children, ...props },\n  ref\n) {\n  const { size, activeItem, setActiveItem, collapsed } = useMenuContext()\n  const isActive = activeItem === value\n  const config = sizeConfig[size]\n\n  const handleClick = () => {\n    if (disabled) return\n    setActiveItem(value)\n    onClick?.(value)\n  }\n\n  const itemStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    gap: 10,\n    width: '100%',\n    minHeight: config.height,\n    padding: collapsed ? config.padding : `0 ${config.padding}px`,\n    fontSize: config.fontSize,\n    fontWeight: isActive ? 600 : 500,\n    color: disabled\n      ? 'var(--brycks-foreground-disabled)'\n      : isActive\n      ? 'var(--brycks-primary-default)'\n      : 'var(--brycks-foreground-default)',\n    backgroundColor: isActive ? 'var(--brycks-primary-50)' : 'transparent',\n    border: 'none',\n    borderRadius: 'var(--brycks-radius-md)',\n    cursor: disabled ? 'not-allowed' : 'pointer',\n    transition: 'all 150ms ease-out',\n    textAlign: 'left',\n    outline: 'none',\n    justifyContent: collapsed ? 'center' : 'flex-start',\n    ...style,\n  }\n\n  const iconStyle: CSSProperties = {\n    width: config.iconSize,\n    height: config.iconSize,\n    flexShrink: 0,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n  }\n\n  const badgeStyle: CSSProperties = {\n    marginLeft: 'auto',\n  }\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      disabled={disabled}\n      className={cx('brycks-menu-item', isActive && 'brycks-menu-item--active', className)}\n      style={itemStyle}\n      onClick={handleClick}\n      onMouseEnter={(e) => {\n        if (!disabled && !isActive) {\n          e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n        }\n      }}\n      onMouseLeave={(e) => {\n        if (!isActive) {\n          e.currentTarget.style.backgroundColor = 'transparent'\n        }\n      }}\n      title={collapsed ? String(children) : undefined}\n      {...props}\n    >\n      {icon && <span style={iconStyle}>{icon}</span>}\n      {!collapsed && <span style={{ flex: 1 }}>{children}</span>}\n      {!collapsed && badge && <span style={badgeStyle}>{badge}</span>}\n    </button>\n  )\n})\n\nMenuItem.displayName = 'MenuItem'\n\n// MenuGroup\nexport interface MenuGroupProps extends HTMLAttributes<HTMLDivElement> {\n  /** Group label */\n  label?: string\n  /** Custom class name */\n  className?: string\n}\n\nexport const MenuGroup = forwardRef<HTMLDivElement, MenuGroupProps>(function MenuGroup(\n  { label, className, style, children, ...props },\n  ref\n) {\n  const { collapsed } = useMenuContext()\n\n  const groupStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 2,\n    ...style,\n  }\n\n  const labelStyle: CSSProperties = {\n    padding: '12px 12px 6px 12px',\n    fontSize: 11,\n    fontWeight: 600,\n    color: 'var(--brycks-foreground-muted)',\n    textTransform: 'uppercase',\n    letterSpacing: '0.05em',\n  }\n\n  return (\n    <div ref={ref} className={cx('brycks-menu-group', className)} style={groupStyle} {...props}>\n      {label && !collapsed && <div style={labelStyle}>{label}</div>}\n      {children}\n    </div>\n  )\n})\n\nMenuGroup.displayName = 'MenuGroup'\n\n// MenuDivider\nexport interface MenuDividerProps extends HTMLAttributes<HTMLDivElement> {\n  /** Custom class name */\n  className?: string\n}\n\nexport const MenuDivider = forwardRef<HTMLDivElement, MenuDividerProps>(function MenuDivider(\n  { className, style, ...props },\n  ref\n) {\n  const dividerStyle: CSSProperties = {\n    height: 1,\n    backgroundColor: 'var(--brycks-border-muted)',\n    margin: '8px 0',\n    ...style,\n  }\n\n  return (\n    <div\n      ref={ref}\n      role=\"separator\"\n      className={cx('brycks-menu-divider', className)}\n      style={dividerStyle}\n      {...props}\n    />\n  )\n})\n\nMenuDivider.displayName = 'MenuDivider'\n"],"names":["MenuContext","createContext","useMenuContext","context","useContext","Menu","forwardRef","controlledActiveItem","onChange","size","collapsed","className","style","children","testId","props","ref","internalActiveItem","setInternalActiveItem","useState","activeItem","setActiveItem","value","menuStyle","jsx","cx","sizeConfig","MenuItem","icon","badge","disabled","onClick","isActive","config","handleClick","itemStyle","iconStyle","badgeStyle","jsxs","e","MenuGroup","label","groupStyle","labelStyle","MenuDivider","dividerStyle"],"mappings":"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"}

package/dist/components/navigation/Menu/Menu.js

@@ -0,0 +1,151 @@
+import { jsx as a, jsxs as k } from "react/jsx-runtime";
+import { forwardRef as f, useState as w, createContext as D, useContext as j } from "react";
+import { cx as y } from "../../../utils/styles.js";
+const S = D(null);
+function M() {
+  const u = j(S);
+  if (!u)
+    throw new Error("Menu components must be used within a Menu");
+  return u;
+}
+const A = f(function({
+  activeItem: e,
+  onChange: i,
+  size: n = "md",
+  collapsed: t = !1,
+  className: s,
+  style: d,
+  children: m,
+  testId: l,
+  ...p
+}, g) {
+  const [v, h] = w(null), x = e !== void 0 ? e : v, c = (r) => {
+    e === void 0 && h(r), i?.(r);
+  }, o = {
+    display: "flex",
+    flexDirection: "column",
+    gap: 2,
+    padding: 8,
+    ...d
+  };
+  return /* @__PURE__ */ a(S.Provider, { value: { size: n, activeItem: x, setActiveItem: c, collapsed: t }, children: /* @__PURE__ */ a(
+    "nav",
+    {
+      ref: g,
+      className: y("brycks-menu", `brycks-menu--${n}`, t && "brycks-menu--collapsed", s),
+      style: o,
+      "data-testid": l,
+      ...p,
+      children: m
+    }
+  ) });
+});
+A.displayName = "Menu";
+const G = {
+  sm: { height: 32, fontSize: 13, iconSize: 16, padding: 10 },
+  md: { height: 40, fontSize: 14, iconSize: 18, padding: 12 },
+  lg: { height: 48, fontSize: 16, iconSize: 20, padding: 14 }
+}, T = f(function({ value: e, icon: i, badge: n, disabled: t = !1, onClick: s, className: d, style: m, children: l, ...p }, g) {
+  const { size: v, activeItem: h, setActiveItem: x, collapsed: c } = M(), o = h === e, r = G[v], C = () => {
+    t || (x(e), s?.(e));
+  }, z = {
+    display: "flex",
+    alignItems: "center",
+    gap: 10,
+    width: "100%",
+    minHeight: r.height,
+    padding: c ? r.padding : `0 ${r.padding}px`,
+    fontSize: r.fontSize,
+    fontWeight: o ? 600 : 500,
+    color: t ? "var(--brycks-foreground-disabled)" : o ? "var(--brycks-primary-default)" : "var(--brycks-foreground-default)",
+    backgroundColor: o ? "var(--brycks-primary-50)" : "transparent",
+    border: "none",
+    borderRadius: "var(--brycks-radius-md)",
+    cursor: t ? "not-allowed" : "pointer",
+    transition: "all 150ms ease-out",
+    textAlign: "left",
+    outline: "none",
+    justifyContent: c ? "center" : "flex-start",
+    ...m
+  }, I = {
+    width: r.iconSize,
+    height: r.iconSize,
+    flexShrink: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  }, N = {
+    marginLeft: "auto"
+  };
+  return /* @__PURE__ */ k(
+    "button",
+    {
+      ref: g,
+      type: "button",
+      disabled: t,
+      className: y("brycks-menu-item", o && "brycks-menu-item--active", d),
+      style: z,
+      onClick: C,
+      onMouseEnter: (b) => {
+        !t && !o && (b.currentTarget.style.backgroundColor = "var(--brycks-background-muted)");
+      },
+      onMouseLeave: (b) => {
+        o || (b.currentTarget.style.backgroundColor = "transparent");
+      },
+      title: c ? String(l) : void 0,
+      ...p,
+      children: [
+        i && /* @__PURE__ */ a("span", { style: I, children: i }),
+        !c && /* @__PURE__ */ a("span", { style: { flex: 1 }, children: l }),
+        !c && n && /* @__PURE__ */ a("span", { style: N, children: n })
+      ]
+    }
+  );
+});
+T.displayName = "MenuItem";
+const E = f(function({ label: e, className: i, style: n, children: t, ...s }, d) {
+  const { collapsed: m } = M(), l = {
+    display: "flex",
+    flexDirection: "column",
+    gap: 2,
+    ...n
+  }, p = {
+    padding: "12px 12px 6px 12px",
+    fontSize: 11,
+    fontWeight: 600,
+    color: "var(--brycks-foreground-muted)",
+    textTransform: "uppercase",
+    letterSpacing: "0.05em"
+  };
+  return /* @__PURE__ */ k("div", { ref: d, className: y("brycks-menu-group", i), style: l, ...s, children: [
+    e && !m && /* @__PURE__ */ a("div", { style: p, children: e }),
+    t
+  ] });
+});
+E.displayName = "MenuGroup";
+const L = f(function({ className: e, style: i, ...n }, t) {
+  const s = {
+    height: 1,
+    backgroundColor: "var(--brycks-border-muted)",
+    margin: "8px 0",
+    ...i
+  };
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      ref: t,
+      role: "separator",
+      className: y("brycks-menu-divider", e),
+      style: s,
+      ...n
+    }
+  );
+});
+L.displayName = "MenuDivider";
+export {
+  A as Menu,
+  L as MenuDivider,
+  E as MenuGroup,
+  T as MenuItem
+};
+//# sourceMappingURL=Menu.js.map

package/dist/components/navigation/Menu/Menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.js","sources":["../../../../src/components/navigation/Menu/Menu.tsx"],"sourcesContent":["/**\n * Menu Component\n *\n * A vertical navigation menu with support for nested items.\n * Suitable for sidebars and navigation panels.\n */\n\nimport {\n  forwardRef,\n  useState,\n  createContext,\n  useContext,\n  type CSSProperties,\n  type ReactNode,\n  type HTMLAttributes,\n} from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type MenuSize = 'sm' | 'md' | 'lg'\n\ninterface MenuContextValue {\n  size: MenuSize\n  activeItem: string | null\n  setActiveItem: (value: string | null) => void\n  collapsed: boolean\n}\n\nconst MenuContext = createContext<MenuContextValue | null>(null)\n\nfunction useMenuContext() {\n  const context = useContext(MenuContext)\n  if (!context) {\n    throw new Error('Menu components must be used within a Menu')\n  }\n  return context\n}\n\nexport interface MenuProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {\n  /** Currently active item */\n  activeItem?: string | null\n  /** Callback when active item changes */\n  onChange?: (value: string | null) => void\n  /** Menu size */\n  size?: MenuSize\n  /** Whether the menu is collapsed (icons only) */\n  collapsed?: boolean\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nexport const Menu = forwardRef<HTMLElement, MenuProps>(function Menu(\n  {\n    activeItem: controlledActiveItem,\n    onChange,\n    size = 'md',\n    collapsed = false,\n    className,\n    style,\n    children,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const [internalActiveItem, setInternalActiveItem] = useState<string | null>(null)\n  const activeItem = controlledActiveItem !== undefined ? controlledActiveItem : internalActiveItem\n\n  const setActiveItem = (value: string | null) => {\n    if (controlledActiveItem === undefined) {\n      setInternalActiveItem(value)\n    }\n    onChange?.(value)\n  }\n\n  const menuStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 2,\n    padding: 8,\n    ...style,\n  }\n\n  return (\n    <MenuContext.Provider value={{ size, activeItem, setActiveItem, collapsed }}>\n      <nav\n        ref={ref}\n        className={cx('brycks-menu', `brycks-menu--${size}`, collapsed && 'brycks-menu--collapsed', className)}\n        style={menuStyle}\n        data-testid={testId}\n        {...props}\n      >\n        {children}\n      </nav>\n    </MenuContext.Provider>\n  )\n})\n\nMenu.displayName = 'Menu'\n\n// MenuItem\nexport interface MenuItemProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'onClick'> {\n  /** Item value (unique identifier) */\n  value: string\n  /** Icon before the label */\n  icon?: ReactNode\n  /** Badge/count after the label */\n  badge?: ReactNode\n  /** Whether the item is disabled */\n  disabled?: boolean\n  /** Callback when clicked */\n  onClick?: (value: string) => void\n  /** Custom class name */\n  className?: string\n}\n\nconst sizeConfig: Record<MenuSize, { height: number; fontSize: number; iconSize: number; padding: number }> = {\n  sm: { height: 32, fontSize: 13, iconSize: 16, padding: 10 },\n  md: { height: 40, fontSize: 14, iconSize: 18, padding: 12 },\n  lg: { height: 48, fontSize: 16, iconSize: 20, padding: 14 },\n}\n\nexport const MenuItem = forwardRef<HTMLButtonElement, MenuItemProps>(function MenuItem(\n  { value, icon, badge, disabled = false, onClick, className, style, children, ...props },\n  ref\n) {\n  const { size, activeItem, setActiveItem, collapsed } = useMenuContext()\n  const isActive = activeItem === value\n  const config = sizeConfig[size]\n\n  const handleClick = () => {\n    if (disabled) return\n    setActiveItem(value)\n    onClick?.(value)\n  }\n\n  const itemStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    gap: 10,\n    width: '100%',\n    minHeight: config.height,\n    padding: collapsed ? config.padding : `0 ${config.padding}px`,\n    fontSize: config.fontSize,\n    fontWeight: isActive ? 600 : 500,\n    color: disabled\n      ? 'var(--brycks-foreground-disabled)'\n      : isActive\n      ? 'var(--brycks-primary-default)'\n      : 'var(--brycks-foreground-default)',\n    backgroundColor: isActive ? 'var(--brycks-primary-50)' : 'transparent',\n    border: 'none',\n    borderRadius: 'var(--brycks-radius-md)',\n    cursor: disabled ? 'not-allowed' : 'pointer',\n    transition: 'all 150ms ease-out',\n    textAlign: 'left',\n    outline: 'none',\n    justifyContent: collapsed ? 'center' : 'flex-start',\n    ...style,\n  }\n\n  const iconStyle: CSSProperties = {\n    width: config.iconSize,\n    height: config.iconSize,\n    flexShrink: 0,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n  }\n\n  const badgeStyle: CSSProperties = {\n    marginLeft: 'auto',\n  }\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      disabled={disabled}\n      className={cx('brycks-menu-item', isActive && 'brycks-menu-item--active', className)}\n      style={itemStyle}\n      onClick={handleClick}\n      onMouseEnter={(e) => {\n        if (!disabled && !isActive) {\n          e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n        }\n      }}\n      onMouseLeave={(e) => {\n        if (!isActive) {\n          e.currentTarget.style.backgroundColor = 'transparent'\n        }\n      }}\n      title={collapsed ? String(children) : undefined}\n      {...props}\n    >\n      {icon && <span style={iconStyle}>{icon}</span>}\n      {!collapsed && <span style={{ flex: 1 }}>{children}</span>}\n      {!collapsed && badge && <span style={badgeStyle}>{badge}</span>}\n    </button>\n  )\n})\n\nMenuItem.displayName = 'MenuItem'\n\n// MenuGroup\nexport interface MenuGroupProps extends HTMLAttributes<HTMLDivElement> {\n  /** Group label */\n  label?: string\n  /** Custom class name */\n  className?: string\n}\n\nexport const MenuGroup = forwardRef<HTMLDivElement, MenuGroupProps>(function MenuGroup(\n  { label, className, style, children, ...props },\n  ref\n) {\n  const { collapsed } = useMenuContext()\n\n  const groupStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 2,\n    ...style,\n  }\n\n  const labelStyle: CSSProperties = {\n    padding: '12px 12px 6px 12px',\n    fontSize: 11,\n    fontWeight: 600,\n    color: 'var(--brycks-foreground-muted)',\n    textTransform: 'uppercase',\n    letterSpacing: '0.05em',\n  }\n\n  return (\n    <div ref={ref} className={cx('brycks-menu-group', className)} style={groupStyle} {...props}>\n      {label && !collapsed && <div style={labelStyle}>{label}</div>}\n      {children}\n    </div>\n  )\n})\n\nMenuGroup.displayName = 'MenuGroup'\n\n// MenuDivider\nexport interface MenuDividerProps extends HTMLAttributes<HTMLDivElement> {\n  /** Custom class name */\n  className?: string\n}\n\nexport const MenuDivider = forwardRef<HTMLDivElement, MenuDividerProps>(function MenuDivider(\n  { className, style, ...props },\n  ref\n) {\n  const dividerStyle: CSSProperties = {\n    height: 1,\n    backgroundColor: 'var(--brycks-border-muted)',\n    margin: '8px 0',\n    ...style,\n  }\n\n  return (\n    <div\n      ref={ref}\n      role=\"separator\"\n      className={cx('brycks-menu-divider', className)}\n      style={dividerStyle}\n      {...props}\n    />\n  )\n})\n\nMenuDivider.displayName = 'MenuDivider'\n"],"names":["MenuContext","createContext","useMenuContext","context","useContext","Menu","forwardRef","controlledActiveItem","onChange","size","collapsed","className","style","children","testId","props","ref","internalActiveItem","setInternalActiveItem","useState","activeItem","setActiveItem","value","menuStyle","jsx","cx","sizeConfig","MenuItem","icon","badge","disabled","onClick","isActive","config","handleClick","itemStyle","iconStyle","badgeStyle","jsxs","e","MenuGroup","label","groupStyle","labelStyle","MenuDivider","dividerStyle"],"mappings":"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"}

package/dist/components/navigation/Pagination/Pagination.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),g=require("react"),z=require("../../../utils/styles.cjs"),w={sm:{height:28,fontSize:12,gap:4,minWidth:28},md:{height:36,fontSize:14,gap:6,minWidth:36},lg:{height:44,fontSize:16,gap:8,minWidth:44}};function E(){return e.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:e.jsx("path",{d:"M10 12L6 8l4-4",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}function I(){return e.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:e.jsx("path",{d:"M6 4l4 4-4 4",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}function R(){return e.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:e.jsx("path",{d:"M11 12l-4-4 4-4M7 12l-4-4 4-4",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}function B(){return e.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:e.jsx("path",{d:"M5 4l4 4-4 4M9 4l4 4-4 4",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}const p=g.forwardRef(function({page:r,totalPages:t,onChange:b,size:f="md",variant:l="default",siblingCount:a=1,showFirstLast:y=!0,showPrevNext:k=!0,disabled:o=!1,className:x,style:j,testId:C,...v},M){const s=w[f],L=g.useMemo(()=>{if(l==="minimal"||l==="simple")return[];const n=[],u=Math.max(r-a,1),c=Math.min(r+a,t),$=u>2,m=c<t-1;if($)if(m){n.push(1),n.push("ellipsis");for(let i=u;i<=c;i++)n.push(i);n.push("ellipsis"),n.push(t)}else{n.push(1),n.push("ellipsis");for(let i=Math.max(t-2-a,1);i<=t;i++)n.push(i)}else{for(let i=1;i<=Math.min(3+a,t);i++)n.push(i);m&&(n.push("ellipsis"),n.push(t))}return n},[r,t,a,l]),S={display:"flex",alignItems:"center",gap:s.gap,...j},h=(n,u)=>({display:"inline-flex",alignItems:"center",justifyContent:"center",minWidth:s.minWidth,height:s.height,padding:`0 ${s.gap+4}px`,fontSize:s.fontSize,fontWeight:n?600:500,color:u?"var(--brycks-foreground-disabled)":n?"var(--brycks-primary-default)":"var(--brycks-foreground-default)",backgroundColor:n?"var(--brycks-primary-50)":"transparent",border:"none",borderRadius:"var(--brycks-radius-md)",cursor:u?"not-allowed":"pointer",transition:"all 150ms ease-out",outline:"none"}),W={display:"flex",alignItems:"center",justifyContent:"center",minWidth:s.minWidth,height:s.height,color:"var(--brycks-foreground-muted)",fontSize:s.fontSize},T={fontSize:s.fontSize,color:"var(--brycks-foreground-muted)",padding:`0 ${s.gap}px`},d=n=>{n>=1&&n<=t&&n!==r&&!o&&b(n)};return e.jsxs("nav",{ref:M,role:"navigation","aria-label":"Pagination",className:z.cx("brycks-pagination",`brycks-pagination--${f}`,`brycks-pagination--${l}`,x),style:S,"data-testid":C,...v,children:[y&&l!=="minimal"&&e.jsx("button",{type:"button","aria-label":"First page",disabled:r===1||o,style:h(!1,r===1||o),onClick:()=>d(1),onMouseEnter:n=>{r!==1&&!o&&(n.currentTarget.style.backgroundColor="var(--brycks-background-muted)")},onMouseLeave:n=>{n.currentTarget.style.backgroundColor="transparent"},children:e.jsx(R,{})}),k&&e.jsx("button",{type:"button","aria-label":"Previous page",disabled:r===1||o,style:h(!1,r===1||o),onClick:()=>d(r-1),onMouseEnter:n=>{r!==1&&!o&&(n.currentTarget.style.backgroundColor="var(--brycks-background-muted)")},onMouseLeave:n=>{n.currentTarget.style.backgroundColor="transparent"},children:e.jsx(E,{})}),l==="simple"||l==="minimal"?e.jsx("span",{style:T,children:l==="minimal"?`${r} / ${t}`:`Page ${r} of ${t}`}):L.map((n,u)=>n==="ellipsis"?e.jsx("span",{style:W,children:"..."},`ellipsis-${u}`):e.jsx("button",{type:"button","aria-label":`Page ${n}`,"aria-current":n===r?"page":void 0,disabled:o,style:h(n===r,o),onClick:()=>d(n),onMouseEnter:c=>{n!==r&&!o&&(c.currentTarget.style.backgroundColor="var(--brycks-background-muted)")},onMouseLeave:c=>{n!==r&&(c.currentTarget.style.backgroundColor="transparent")},children:n},n)),k&&e.jsx("button",{type:"button","aria-label":"Next page",disabled:r===t||o,style:h(!1,r===t||o),onClick:()=>d(r+1),onMouseEnter:n=>{r!==t&&!o&&(n.currentTarget.style.backgroundColor="var(--brycks-background-muted)")},onMouseLeave:n=>{n.currentTarget.style.backgroundColor="transparent"},children:e.jsx(I,{})}),y&&l!=="minimal"&&e.jsx("button",{type:"button","aria-label":"Last page",disabled:r===t||o,style:h(!1,r===t||o),onClick:()=>d(t),onMouseEnter:n=>{r!==t&&!o&&(n.currentTarget.style.backgroundColor="var(--brycks-background-muted)")},onMouseLeave:n=>{n.currentTarget.style.backgroundColor="transparent"},children:e.jsx(B,{})})]})});p.displayName="Pagination";exports.Pagination=p;
+//# sourceMappingURL=Pagination.cjs.map

package/dist/components/navigation/Pagination/Pagination.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.cjs","sources":["../../../../src/components/navigation/Pagination/Pagination.tsx"],"sourcesContent":["/**\n * Pagination Component\n *\n * A pagination control for navigating through pages.\n * Supports different sizes and display modes.\n */\n\nimport { forwardRef, useMemo, type CSSProperties, type HTMLAttributes } from 'react'\nimport { cx } from '../../../utils/styles'\n\nexport type PaginationSize = 'sm' | 'md' | 'lg'\nexport type PaginationVariant = 'default' | 'simple' | 'minimal'\n\nexport interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {\n  /** Current page (1-indexed) */\n  page: number\n  /** Total number of pages */\n  totalPages: number\n  /** Callback when page changes */\n  onChange: (page: number) => void\n  /** Pagination size */\n  size?: PaginationSize\n  /** Pagination variant */\n  variant?: PaginationVariant\n  /** Number of sibling pages to show on each side */\n  siblingCount?: number\n  /** Whether to show first/last buttons */\n  showFirstLast?: boolean\n  /** Whether to show prev/next buttons */\n  showPrevNext?: boolean\n  /** Whether the component is disabled */\n  disabled?: boolean\n  /** Custom class name */\n  className?: string\n  /** Test ID */\n  testId?: string\n}\n\nconst sizeConfig: Record<PaginationSize, { height: number; fontSize: number; gap: number; minWidth: number }> = {\n  sm: { height: 28, fontSize: 12, gap: 4, minWidth: 28 },\n  md: { height: 36, fontSize: 14, gap: 6, minWidth: 36 },\n  lg: { height: 44, fontSize: 16, gap: 8, minWidth: 44 },\n}\n\nfunction ChevronLeftIcon() {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n      <path d=\"M10 12L6 8l4-4\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  )\n}\n\nfunction ChevronRightIcon() {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n      <path d=\"M6 4l4 4-4 4\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  )\n}\n\nfunction ChevronsLeftIcon() {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n      <path d=\"M11 12l-4-4 4-4M7 12l-4-4 4-4\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  )\n}\n\nfunction ChevronsRightIcon() {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n      <path d=\"M5 4l4 4-4 4M9 4l4 4-4 4\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  )\n}\n\nexport const Pagination = forwardRef<HTMLElement, PaginationProps>(function Pagination(\n  {\n    page,\n    totalPages,\n    onChange,\n    size = 'md',\n    variant = 'default',\n    siblingCount = 1,\n    showFirstLast = true,\n    showPrevNext = true,\n    disabled = false,\n    className,\n    style,\n    testId,\n    ...props\n  },\n  ref\n) {\n  const config = sizeConfig[size]\n\n  // Generate page numbers to display\n  const pages = useMemo(() => {\n    if (variant === 'minimal' || variant === 'simple') {\n      return []\n    }\n\n    const range: (number | 'ellipsis')[] = []\n    const leftSibling = Math.max(page - siblingCount, 1)\n    const rightSibling = Math.min(page + siblingCount, totalPages)\n\n    const showLeftEllipsis = leftSibling > 2\n    const showRightEllipsis = rightSibling < totalPages - 1\n\n    if (!showLeftEllipsis) {\n      for (let i = 1; i <= Math.min(3 + siblingCount, totalPages); i++) {\n        range.push(i)\n      }\n      if (showRightEllipsis) {\n        range.push('ellipsis')\n        range.push(totalPages)\n      }\n    } else if (!showRightEllipsis) {\n      range.push(1)\n      range.push('ellipsis')\n      for (let i = Math.max(totalPages - 2 - siblingCount, 1); i <= totalPages; i++) {\n        range.push(i)\n      }\n    } else {\n      range.push(1)\n      range.push('ellipsis')\n      for (let i = leftSibling; i <= rightSibling; i++) {\n        range.push(i)\n      }\n      range.push('ellipsis')\n      range.push(totalPages)\n    }\n\n    return range\n  }, [page, totalPages, siblingCount, variant])\n\n  const containerStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    gap: config.gap,\n    ...style,\n  }\n\n  const getButtonStyle = (isActive: boolean, isDisabled: boolean): CSSProperties => ({\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    minWidth: config.minWidth,\n    height: config.height,\n    padding: `0 ${config.gap + 4}px`,\n    fontSize: config.fontSize,\n    fontWeight: isActive ? 600 : 500,\n    color: isDisabled\n      ? 'var(--brycks-foreground-disabled)'\n      : isActive\n      ? 'var(--brycks-primary-default)'\n      : 'var(--brycks-foreground-default)',\n    backgroundColor: isActive ? 'var(--brycks-primary-50)' : 'transparent',\n    border: 'none',\n    borderRadius: 'var(--brycks-radius-md)',\n    cursor: isDisabled ? 'not-allowed' : 'pointer',\n    transition: 'all 150ms ease-out',\n    outline: 'none',\n  })\n\n  const ellipsisStyle: CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    minWidth: config.minWidth,\n    height: config.height,\n    color: 'var(--brycks-foreground-muted)',\n    fontSize: config.fontSize,\n  }\n\n  const infoStyle: CSSProperties = {\n    fontSize: config.fontSize,\n    color: 'var(--brycks-foreground-muted)',\n    padding: `0 ${config.gap}px`,\n  }\n\n  const handlePageChange = (newPage: number) => {\n    if (newPage >= 1 && newPage <= totalPages && newPage !== page && !disabled) {\n      onChange(newPage)\n    }\n  }\n\n  return (\n    <nav\n      ref={ref}\n      role=\"navigation\"\n      aria-label=\"Pagination\"\n      className={cx('brycks-pagination', `brycks-pagination--${size}`, `brycks-pagination--${variant}`, className)}\n      style={containerStyle}\n      data-testid={testId}\n      {...props}\n    >\n      {showFirstLast && variant !== 'minimal' && (\n        <button\n          type=\"button\"\n          aria-label=\"First page\"\n          disabled={page === 1 || disabled}\n          style={getButtonStyle(false, page === 1 || disabled)}\n          onClick={() => handlePageChange(1)}\n          onMouseEnter={(e) => {\n            if (page !== 1 && !disabled) {\n              e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n            }\n          }}\n          onMouseLeave={(e) => {\n            e.currentTarget.style.backgroundColor = 'transparent'\n          }}\n        >\n          <ChevronsLeftIcon />\n        </button>\n      )}\n\n      {showPrevNext && (\n        <button\n          type=\"button\"\n          aria-label=\"Previous page\"\n          disabled={page === 1 || disabled}\n          style={getButtonStyle(false, page === 1 || disabled)}\n          onClick={() => handlePageChange(page - 1)}\n          onMouseEnter={(e) => {\n            if (page !== 1 && !disabled) {\n              e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n            }\n          }}\n          onMouseLeave={(e) => {\n            e.currentTarget.style.backgroundColor = 'transparent'\n          }}\n        >\n          <ChevronLeftIcon />\n        </button>\n      )}\n\n      {variant === 'simple' || variant === 'minimal' ? (\n        <span style={infoStyle}>\n          {variant === 'minimal' ? `${page} / ${totalPages}` : `Page ${page} of ${totalPages}`}\n        </span>\n      ) : (\n        pages.map((p, index) =>\n          p === 'ellipsis' ? (\n            <span key={`ellipsis-${index}`} style={ellipsisStyle}>\n              ...\n            </span>\n          ) : (\n            <button\n              key={p}\n              type=\"button\"\n              aria-label={`Page ${p}`}\n              aria-current={p === page ? 'page' : undefined}\n              disabled={disabled}\n              style={getButtonStyle(p === page, disabled)}\n              onClick={() => handlePageChange(p)}\n              onMouseEnter={(e) => {\n                if (p !== page && !disabled) {\n                  e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n                }\n              }}\n              onMouseLeave={(e) => {\n                if (p !== page) {\n                  e.currentTarget.style.backgroundColor = 'transparent'\n                }\n              }}\n            >\n              {p}\n            </button>\n          )\n        )\n      )}\n\n      {showPrevNext && (\n        <button\n          type=\"button\"\n          aria-label=\"Next page\"\n          disabled={page === totalPages || disabled}\n          style={getButtonStyle(false, page === totalPages || disabled)}\n          onClick={() => handlePageChange(page + 1)}\n          onMouseEnter={(e) => {\n            if (page !== totalPages && !disabled) {\n              e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n            }\n          }}\n          onMouseLeave={(e) => {\n            e.currentTarget.style.backgroundColor = 'transparent'\n          }}\n        >\n          <ChevronRightIcon />\n        </button>\n      )}\n\n      {showFirstLast && variant !== 'minimal' && (\n        <button\n          type=\"button\"\n          aria-label=\"Last page\"\n          disabled={page === totalPages || disabled}\n          style={getButtonStyle(false, page === totalPages || disabled)}\n          onClick={() => handlePageChange(totalPages)}\n          onMouseEnter={(e) => {\n            if (page !== totalPages && !disabled) {\n              e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\n            }\n          }}\n          onMouseLeave={(e) => {\n            e.currentTarget.style.backgroundColor = 'transparent'\n          }}\n        >\n          <ChevronsRightIcon />\n        </button>\n      )}\n    </nav>\n  )\n})\n\nPagination.displayName = 'Pagination'\n"],"names":["sizeConfig","ChevronLeftIcon","jsx","ChevronRightIcon","ChevronsLeftIcon","ChevronsRightIcon","Pagination","forwardRef","page","totalPages","onChange","size","variant","siblingCount","showFirstLast","showPrevNext","disabled","className","style","testId","props","ref","config","pages","useMemo","range","leftSibling","rightSibling","showLeftEllipsis","showRightEllipsis","containerStyle","getButtonStyle","isActive","isDisabled","ellipsisStyle","infoStyle","handlePageChange","newPage","jsxs","cx","e","p","index"],"mappings":"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"}