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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,141 @@
+"use client";
+var W = Object.defineProperty, y = Object.defineProperties;
+var A = Object.getOwnPropertyDescriptors;
+var o = Object.getOwnPropertySymbols;
+var g = Object.prototype.hasOwnProperty, b = Object.prototype.propertyIsEnumerable;
+var p = (a, t, n) => t in a ? W(a, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : a[t] = n, s = (a, t) => {
+  for (var n in t || (t = {}))
+    g.call(t, n) && p(a, n, t[n]);
+  if (o)
+    for (var n of o(t))
+      b.call(t, n) && p(a, n, t[n]);
+  return a;
+}, l = (a, t) => y(a, A(t));
+var x = (a, t) => {
+  var n = {};
+  for (var r in a)
+    g.call(a, r) && t.indexOf(r) < 0 && (n[r] = a[r]);
+  if (a != null && o)
+    for (var r of o(a))
+      t.indexOf(r) < 0 && b.call(a, r) && (n[r] = a[r]);
+  return n;
+};
+import { jsx as i, Fragment as L, jsxs as M } from "react/jsx-runtime";
+import { useMemo as C } from "react";
+import { getSpacingClass as w } from "../../tokens/spacing.js";
+import { NavLink as F } from "../../primitives/NavLink/NavLink.js";
+import { cn as f } from "../../utils/cn.js";
+import { cva as S } from "../../utils/cva.js";
+const N = S(
+  // Base classes
+  f("flex", "items-center", w("sm", "gap")),
+  {
+    variants: {
+      orientation: {
+        horizontal: "flex-row",
+        vertical: "flex-col"
+      },
+      variant: {
+        default: "",
+        pills: "",
+        tabs: ""
+      }
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+      variant: "default"
+    },
+    compoundVariants: [
+      {
+        orientation: "vertical",
+        variant: "default",
+        class: "items-stretch"
+      },
+      {
+        orientation: "vertical",
+        variant: "pills",
+        class: "items-stretch"
+      },
+      {
+        orientation: "vertical",
+        variant: "tabs",
+        class: "items-stretch"
+      }
+    ]
+  }
+);
+function $(q) {
+  var v = q, {
+    items: a,
+    orientation: t = "horizontal",
+    variant: n = "default",
+    className: r,
+    "aria-label": k = "Main navigation",
+    bare: V = !1,
+    pathname: u
+  } = v, d = x(v, [
+    "items",
+    "orientation",
+    "variant",
+    "className",
+    "aria-label",
+    "bare",
+    "pathname"
+  ]);
+  const c = u != null ? u : typeof window != "undefined" ? window.location.pathname : void 0, j = C(() => a.map((e) => {
+    if (e.active !== void 0)
+      return e;
+    if (c) {
+      const h = c === e.href || e.href !== "/" && c.startsWith(`${e.href}/`);
+      return l(s({}, e), { active: h });
+    }
+    return l(s({}, e), { active: !1 });
+  }), [a, c]), m = /* @__PURE__ */ i(L, { children: j.map((e, h) => {
+    const z = n === "pills" ? "background" : n === "tabs" ? "underline" : "default";
+    return /* @__PURE__ */ M(
+      F,
+      {
+        href: e.href,
+        active: e.active,
+        disabled: e.disabled,
+        variant: z,
+        className: f(
+          "flex items-center",
+          w("sm", "gap"),
+          t === "vertical" && "w-full justify-start",
+          e.className
+        ),
+        children: [
+          e.icon && /* @__PURE__ */ i("span", { className: "flex-shrink-0", "aria-hidden": "true", children: e.icon }),
+          /* @__PURE__ */ i("span", { children: e.label }),
+          e.badge && /* @__PURE__ */ i("span", { className: "ml-auto", children: e.badge })
+        ]
+      },
+      e.href || h
+    );
+  }) });
+  return V ? /* @__PURE__ */ i(
+    "div",
+    l(s({
+      className: f(N({ orientation: t, variant: n }), r)
+    }, d), {
+      children: m
+    })
+  ) : /* @__PURE__ */ i(
+    "nav",
+    l(s({
+      className: f(N({ orientation: t, variant: n }), r),
+      "aria-label": k
+    }, d), {
+      children: m
+    })
+  );
+}
+function K(a) {
+  return /* @__PURE__ */ i($, l(s({}, a), { pathname: a.pathname }));
+}
+export {
+  K as Navigation,
+  K as default
+};
+//# sourceMappingURL=Navigation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation.js","sources":["../../../../../src/ui/components/Navigation/Navigation.tsx"],"sourcesContent":["/**\n * Navigation Component\n *\n * Horizontal or vertical navigation component using NavLink internally.\n *\n * @see EPIC-003: Navigation Component (Molecule)\n * @see RFC-005: Navigation Composition Pattern (APPROVED)\n */\n\n\"use client\";\n\nimport { useMemo } from \"react\";\nimport { NavLink } from \"../../primitives/NavLink\";\nimport type { NavigationProps } from \"./types\";\nimport { cn, cva } from \"../../utils\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\n\n/**\n * Navigation Variants using CVA\n * Type-safe variant system for Navigation component\n */\nconst navigationVariants = cva(\n  // Base classes\n  cn(\"flex\", \"items-center\", getSpacingClass(\"sm\", \"gap\")),\n  {\n    variants: {\n      orientation: {\n        horizontal: \"flex-row\",\n        vertical: \"flex-col\",\n      },\n      variant: {\n        default: \"\",\n        pills: \"\",\n        tabs: \"\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n      variant: \"default\",\n    },\n    compoundVariants: [\n      {\n        orientation: \"vertical\",\n        variant: \"default\",\n        class: \"items-stretch\",\n      },\n      {\n        orientation: \"vertical\",\n        variant: \"pills\",\n        class: \"items-stretch\",\n      },\n      {\n        orientation: \"vertical\",\n        variant: \"tabs\",\n        class: \"items-stretch\",\n      },\n    ],\n  },\n);\n\n/**\n * Navigation Component\n *\n * Navigation component that uses NavLink internally.\n * Supports horizontal and vertical orientations, variants, and icons.\n *\n * @example\n * ```tsx\n * <Navigation\n *   items={[\n *     { href: '/home', label: 'Home', active: true },\n *     { href: '/about', label: 'About' },\n *   ]}\n *   orientation=\"horizontal\"\n *   variant=\"default\"\n * />\n * ```\n */\n/**\n * Navigation Component (Internal with pathname detection)\n *\n * Internal component that can use Next.js usePathname hook.\n */\nfunction NavigationWithPathname({\n  items,\n  orientation = \"horizontal\",\n  variant = \"default\",\n  className,\n  \"aria-label\": ariaLabel = \"Main navigation\",\n  bare = false,\n  pathname: providedPathname,\n  ...props\n}: NavigationProps & { pathname?: string }) {\n  // Pathname channel: explicit prop wins. Falls back to\n  // window.location.pathname so a non-Next.js app still gets initial\n  // active-state highlighting. Note: window.location does not re-render\n  // on client-side navigation — Next.js apps should pass\n  // `pathname={usePathname()}` explicitly for reactive updates.\n  const currentPathname: string | undefined =\n    providedPathname ??\n    (typeof window !== \"undefined\" ? window.location.pathname : undefined);\n\n  // Calculate active state for items\n  const itemsWithActive = useMemo(() => {\n    return items.map((item) => {\n      // Manual active prop has priority\n      if (item.active !== undefined) {\n        return item;\n      }\n\n      // Auto-detect if pathname is available\n      if (currentPathname) {\n        const isActive =\n          currentPathname === item.href ||\n          (item.href !== \"/\" && currentPathname.startsWith(`${item.href}/`));\n        return { ...item, active: isActive };\n      }\n\n      // Default to false\n      return { ...item, active: false };\n    });\n  }, [items, currentPathname]);\n\n  const content = (\n    <>\n      {itemsWithActive.map((item, index) => {\n        // Map Navigation variants to NavLink variants\n        const navLinkVariant =\n          variant === \"pills\"\n            ? \"background\"\n            : variant === \"tabs\"\n              ? \"underline\"\n              : \"default\";\n\n        return (\n          <NavLink\n            key={item.href || index}\n            href={item.href}\n            active={item.active}\n            disabled={item.disabled}\n            variant={navLinkVariant}\n            className={cn(\n              \"flex items-center\",\n              getSpacingClass(\"sm\", \"gap\"),\n              orientation === \"vertical\" && \"w-full justify-start\",\n              item.className,\n            )}\n          >\n            {item.icon && (\n              <span className=\"flex-shrink-0\" aria-hidden=\"true\">\n                {item.icon}\n              </span>\n            )}\n            <span>{item.label}</span>\n            {item.badge && <span className=\"ml-auto\">{item.badge}</span>}\n          </NavLink>\n        );\n      })}\n    </>\n  );\n\n  // Bare mode: Just render content without nav wrapper\n  // Useful when used inside Header.Navigation which provides the nav wrapper\n  if (bare) {\n    return (\n      <div\n        className={cn(navigationVariants({ orientation, variant }), className)}\n        {...props}\n      >\n        {content}\n      </div>\n    );\n  }\n\n  // Normal mode: Create nav element\n  return (\n    <nav\n      className={cn(navigationVariants({ orientation, variant }), className)}\n      aria-label={ariaLabel}\n      {...props}\n    >\n      {content}\n    </nav>\n  );\n}\n\n/**\n * Navigation Component (Public API)\n *\n * Wrapper that handles Next.js integration safely.\n * Always uses NavigationWithPathname which will try to auto-detect pathname.\n */\nexport function Navigation(props: NavigationProps) {\n  return <NavigationWithPathname {...props} pathname={props.pathname} />;\n}\n\nexport default Navigation;\n"],"names":["navigationVariants","cva","cn","getSpacingClass","NavigationWithPathname","_a","_b","items","orientation","variant","className","ariaLabel","bare","providedPathname","props","__objRest","currentPathname","itemsWithActive","useMemo","item","isActive","__spreadProps","__spreadValues","content","jsx","Fragment","index","navLinkVariant","jsxs","NavLink","Navigation"],"mappings":"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"}