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

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

@@ -0,0 +1,120 @@
+"use client";
+var I = Object.defineProperty, O = Object.defineProperties;
+var Q = Object.getOwnPropertyDescriptors;
+var v = Object.getOwnPropertySymbols;
+var q = Object.prototype.hasOwnProperty, z = Object.prototype.propertyIsEnumerable;
+var f = (i, e, t) => e in i ? I(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t, x = (i, e) => {
+  for (var t in e || (e = {}))
+    q.call(e, t) && f(i, t, e[t]);
+  if (v)
+    for (var t of v(e))
+      z.call(e, t) && f(i, t, e[t]);
+  return i;
+}, S = (i, e) => O(i, Q(e));
+import { jsx as l, jsxs as s } from "react/jsx-runtime";
+import { useState as b, useMemo as B } from "react";
+import { Container as L } from "../../layouts/Container/Container.js";
+import { Stack as y } from "../../layouts/Stack/Stack.js";
+import { getSpacingClass as o } from "../../tokens/spacing.js";
+import C from "../Card/Card.js";
+import M from "../SearchInput/SearchInput.js";
+import N from "../../primitives/Text/Text.js";
+import { Button as P } from "../../primitives/Button/Button.js";
+function R({
+  items: i,
+  searchFn: e,
+  filterFn: t,
+  renderItem: $,
+  filters: h = [],
+  searchPlaceholder: j = "Search...",
+  emptyMessage: k = "No results found",
+  showResultsCount: A = !0
+}) {
+  const [d, g] = b(""), [c, p] = b(
+    {}
+  ), m = B(() => {
+    let r = i;
+    if (d.trim() && e) {
+      const a = d.toLowerCase();
+      r = r.filter((n) => e(a, n));
+    }
+    return t && Object.keys(c).length > 0 && (r = r.filter((a) => t(c, a))), r;
+  }, [i, d, c, e, t]), w = (r, a) => {
+    p((n) => S(x({}, n), {
+      [r]: a
+    }));
+  }, F = () => {
+    p({}), g("");
+  }, u = d.trim().length > 0 || Object.keys(c).length > 0;
+  return /* @__PURE__ */ l(L, { maxWidth: "full", paddingX: "base", paddingY: "base", children: /* @__PURE__ */ s(y, { spacing: "md", children: [
+    /* @__PURE__ */ l(C, { padding: "medium", children: /* @__PURE__ */ s(y, { spacing: "md", children: [
+      /* @__PURE__ */ l("div", { children: /* @__PURE__ */ l(
+        M,
+        {
+          placeholder: j,
+          value: d,
+          onSearch: g
+        }
+      ) }),
+      h.length > 0 && /* @__PURE__ */ l("div", { className: `flex flex-wrap ${o("sm", "gap")}`, children: h.map((r) => {
+        var a;
+        return /* @__PURE__ */ s(
+          "div",
+          {
+            className: `flex items-center ${o("sm", "gap")}`,
+            children: [
+              /* @__PURE__ */ s(N, { className: "text-fg-secondary text-sm", children: [
+                r.label,
+                ":"
+              ] }),
+              /* @__PURE__ */ s(
+                "select",
+                {
+                  className: `${o("md", "px")} ${o("xs", "py")} border rounded text-sm`,
+                  "aria-label": r.label,
+                  value: String(c[r.id] || ""),
+                  onChange: (n) => w(
+                    r.id,
+                    n.target.value || void 0
+                  ),
+                  children: [
+                    /* @__PURE__ */ l("option", { value: "", children: "All" }),
+                    (a = r.options) == null ? void 0 : a.map((n) => /* @__PURE__ */ l(
+                      "option",
+                      {
+                        value: String(n.value || ""),
+                        children: n.label
+                      },
+                      n.id
+                    ))
+                  ]
+                }
+              )
+            ]
+          },
+          r.id
+        );
+      }) }),
+      u && /* @__PURE__ */ l("div", { children: /* @__PURE__ */ l(P, { variant: "outline", size: "sm", onClick: F, children: "Clear Filters" }) })
+    ] }) }),
+    A && /* @__PURE__ */ s("div", { className: "text-sm text-fg-secondary", children: [
+      "Showing ",
+      m.length,
+      " of ",
+      i.length,
+      " results",
+      u && " (filtered)"
+    ] }),
+    m.length === 0 ? /* @__PURE__ */ l(C, { padding: "large", children: /* @__PURE__ */ l("div", { className: "text-center text-fg-secondary", children: /* @__PURE__ */ l(N, { children: k }) }) }) : /* @__PURE__ */ l(
+      "div",
+      {
+        className: `grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 ${o("base", "gap")}`,
+        children: m.map((r, a) => /* @__PURE__ */ l("div", { children: $(r, a) }, a))
+      }
+    )
+  ] }) });
+}
+export {
+  R as SearchAndFilterPattern
+};
+//# sourceMappingURL=SearchAndFilterPattern.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchAndFilterPattern.js","sources":["../../../../../src/ui/components/SearchAndFilterPattern/SearchAndFilterPattern.tsx"],"sourcesContent":["import React, { useState, useMemo } from \"react\";\nimport { SearchInput, Card } from \"../../components\";\nimport { Button, Text } from \"../../primitives\";\nimport { Container } from \"../../layouts/Container/Container\";\nimport { Stack } from \"../../layouts/Stack/Stack\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\n\nexport interface FilterOption {\n  id: string;\n  label: string;\n  value: unknown;\n}\n\nexport interface FilterConfig {\n  id: string;\n  label: string;\n  type: \"select\" | \"multiselect\" | \"date\" | \"range\";\n  options?: FilterOption[];\n  placeholder?: string;\n}\n\nexport interface SearchAndFilterPatternProps<T = unknown> {\n  /**\n   * Items to search and filter\n   */\n  items: T[];\n  /**\n   * Search function - receives search query and item, returns boolean\n   */\n  searchFn?: (query: string, item: T) => boolean;\n  /**\n   * Filter function - receives filter config and item, returns boolean\n   */\n  filterFn?: (filters: Record<string, unknown>, item: T) => boolean;\n  /**\n   * Render function for each item\n   */\n  renderItem: (item: T, index: number) => React.ReactNode;\n  /**\n   * Filter configurations\n   */\n  filters?: FilterConfig[];\n  /**\n   * Search placeholder\n   * @default \"Search...\"\n   */\n  searchPlaceholder?: string;\n  /**\n   * Empty state message\n   */\n  emptyMessage?: string;\n  /**\n   * Show results count\n   * @default true\n   */\n  showResultsCount?: boolean;\n}\n\n/**\n * SearchAndFilterPattern - A complete search and filter pattern\n *\n * This pattern solves the common UX problem of searching and filtering lists of items.\n * It combines SearchInput with filter controls and results display.\n *\n * @example\n * ```tsx\n * <SearchAndFilterPattern\n *   items={products}\n *   searchFn={(query, item) => item.name.includes(query)}\n *   renderItem={(item) => <ProductCard product={item} />}\n * />\n * ```\n */\nexport function SearchAndFilterPattern<T = unknown>({\n  items,\n  searchFn,\n  filterFn,\n  renderItem,\n  filters = [],\n  searchPlaceholder = \"Search...\",\n  emptyMessage = \"No results found\",\n  showResultsCount = true,\n}: SearchAndFilterPatternProps<T>) {\n  const [searchQuery, setSearchQuery] = useState(\"\");\n  const [activeFilters, setActiveFilters] = useState<Record<string, unknown>>(\n    {},\n  );\n\n  // Filter items based on search and filters\n  const filteredItems = useMemo(() => {\n    let result = items;\n\n    // Apply search\n    if (searchQuery.trim() && searchFn) {\n      const query = searchQuery.toLowerCase();\n      result = result.filter((item) => searchFn(query, item));\n    }\n\n    // Apply filters\n    if (filterFn && Object.keys(activeFilters).length > 0) {\n      result = result.filter((item) => filterFn(activeFilters, item));\n    }\n\n    return result;\n  }, [items, searchQuery, activeFilters, searchFn, filterFn]);\n\n  const handleFilterChange = (filterId: string, value: unknown) => {\n    setActiveFilters((prev) => ({\n      ...prev,\n      [filterId]: value,\n    }));\n  };\n\n  const clearFilters = () => {\n    setActiveFilters({});\n    setSearchQuery(\"\");\n  };\n\n  const hasActiveFilters =\n    searchQuery.trim().length > 0 || Object.keys(activeFilters).length > 0;\n\n  return (\n    <Container maxWidth=\"full\" paddingX=\"base\" paddingY=\"base\">\n      <Stack spacing=\"md\">\n        {/* Search and Filters */}\n        <Card padding=\"medium\">\n          <Stack spacing=\"md\">\n            {/* Search */}\n            <div>\n              <SearchInput\n                placeholder={searchPlaceholder}\n                value={searchQuery}\n                onSearch={setSearchQuery}\n              />\n            </div>\n\n            {/* Filters */}\n            {filters.length > 0 && (\n              <div className={`flex flex-wrap ${getSpacingClass(\"sm\", \"gap\")}`}>\n                {filters.map((filter) => (\n                  <div\n                    key={filter.id}\n                    className={`flex items-center ${getSpacingClass(\"sm\", \"gap\")}`}\n                  >\n                    <Text className=\"text-fg-secondary text-sm\">\n                      {filter.label}:\n                    </Text>\n                    <select\n                      className={`${getSpacingClass(\"md\", \"px\")} ${getSpacingClass(\"xs\", \"py\")} border rounded text-sm`}\n                      // Accessible name comes from the `filter.label` prop\n                      // (the same string the adjacent `<Text>` displays as\n                      // a visible legend). Without aria-label the raw\n                      // `<select>` has no programmatic name and axe\n                      // `select-name` (critical) flags every filter\n                      // instance — 8 nodes across 5 stories at the\n                      // a11y-baseline-of-record measurement.\n                      //\n                      // The adjacent `<Text>` is prose, not a `<label>`\n                      // with `htmlFor`; pairing them properly would\n                      // require an id round-trip and a refactor. The\n                      // aria-label here closes the rule without changing\n                      // the markup shape — Phase 7 doctrine: name by\n                      // function (\"Status, combobox\"), not by tag type.\n                      //\n                      // Architecturally the raw `<select>` here is a\n                      // code-smell — the DS owns a `Select` primitive\n                      // that exposes a typed label API used by\n                      // `TablePagination`. Migrating this pattern to\n                      // the primitive is a separate uniformization PR\n                      // (registered in BACKLOG); the a11y fix doesn't\n                      // wait on that refactor.\n                      aria-label={filter.label}\n                      value={String(activeFilters[filter.id] || \"\")}\n                      onChange={(e) =>\n                        handleFilterChange(\n                          filter.id,\n                          e.target.value || undefined,\n                        )\n                      }\n                    >\n                      <option value=\"\">All</option>\n                      {filter.options?.map((option) => (\n                        <option\n                          key={option.id}\n                          value={String(option.value || \"\")}\n                        >\n                          {option.label}\n                        </option>\n                      ))}\n                    </select>\n                  </div>\n                ))}\n              </div>\n            )}\n\n            {/* Clear Filters */}\n            {hasActiveFilters && (\n              <div>\n                <Button variant=\"outline\" size=\"sm\" onClick={clearFilters}>\n                  Clear Filters\n                </Button>\n              </div>\n            )}\n          </Stack>\n        </Card>\n\n        {/* Results Count */}\n        {showResultsCount && (\n          <div className=\"text-sm text-fg-secondary\">\n            Showing {filteredItems.length} of {items.length} results\n            {hasActiveFilters && \" (filtered)\"}\n          </div>\n        )}\n\n        {/* Results */}\n        {filteredItems.length === 0 ? (\n          <Card padding=\"large\">\n            <div className=\"text-center text-fg-secondary\">\n              <Text>{emptyMessage}</Text>\n            </div>\n          </Card>\n        ) : (\n          <div\n            className={`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 ${getSpacingClass(\"base\", \"gap\")}`}\n          >\n            {filteredItems.map((item, index) => (\n              <div key={index}>{renderItem(item, index)}</div>\n            ))}\n          </div>\n        )}\n      </Stack>\n    </Container>\n  );\n}\n"],"names":["SearchAndFilterPattern","items","searchFn","filterFn","renderItem","filters","searchPlaceholder","emptyMessage","showResultsCount","searchQuery","setSearchQuery","useState","activeFilters","setActiveFilters","filteredItems","useMemo","result","query","item","handleFilterChange","filterId","value","prev","__spreadProps","__spreadValues","clearFilters","hasActiveFilters","jsx","Container","jsxs","Stack","Card","SearchInput","getSpacingClass","filter","Text","e","_a","option","Button","index"],"mappings":"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"}

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

@@ -0,0 +1,103 @@
+"use client";
+var F = Object.defineProperty, G = Object.defineProperties;
+var H = Object.getOwnPropertyDescriptors;
+var u = Object.getOwnPropertySymbols;
+var N = Object.prototype.hasOwnProperty, I = Object.prototype.propertyIsEnumerable;
+var y = (e, t, s) => t in e ? F(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s, T = (e, t) => {
+  for (var s in t || (t = {}))
+    N.call(t, s) && y(e, s, t[s]);
+  if (u)
+    for (var s of u(t))
+      I.call(t, s) && y(e, s, t[s]);
+  return e;
+}, g = (e, t) => G(e, H(t));
+var D = (e, t) => {
+  var s = {};
+  for (var i in e)
+    N.call(e, i) && t.indexOf(i) < 0 && (s[i] = e[i]);
+  if (e != null && u)
+    for (var i of u(e))
+      t.indexOf(i) < 0 && I.call(e, i) && (s[i] = e[i]);
+  return s;
+};
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as J, useState as b } from "react";
+import { X as L, Search as h } from "lucide-react";
+import M from "../../primitives/Input/Input.js";
+import { Button as O } from "../../primitives/Button/Button.js";
+import { cn as x } from "../../utils/cn.js";
+import { getSpacingClass as K } from "../../tokens/spacing.js";
+const P = J(
+  function(Q, j) {
+    var v = Q, {
+      onSearch: t,
+      onClear: s,
+      loading: i = !1,
+      showClearButton: V = !0,
+      debounceMs: k = 300,
+      value: f,
+      defaultValue: d,
+      onChange: r,
+      className: E = ""
+    } = v, n = D(v, [
+      "onSearch",
+      "onClear",
+      "loading",
+      "showClearButton",
+      "debounceMs",
+      "value",
+      "defaultValue",
+      "onChange",
+      "className"
+    ]);
+    const [z, p] = b(
+      typeof d == "string" ? d : ""
+    ), [w, B] = b(null), o = f !== void 0, c = o ? f : z, R = c != null && String(c).length > 0, X = (l) => {
+      const m = l.target.value;
+      o || p(m), r == null || r(l), w && clearTimeout(w);
+      const A = setTimeout(() => {
+        t == null || t(m);
+      }, k);
+      B(A);
+    }, $ = () => {
+      o || p("");
+      const l = {
+        target: { value: "" },
+        currentTarget: { value: "" }
+      };
+      r == null || r(l), s == null || s(), t == null || t("");
+    }, q = (l) => {
+      var m;
+      l.key === "Enter" && t && t(String(c || "")), (m = n.onKeyDown) == null || m.call(n, l);
+    };
+    return /* @__PURE__ */ a("div", { className: x("relative", E), children: /* @__PURE__ */ a(
+      M,
+      g(T({
+        ref: j
+      }, n), {
+        type: "search",
+        value: c,
+        onChange: X,
+        onKeyDown: q,
+        leftIcon: i ? /* @__PURE__ */ a("div", { className: "animate-spin", children: /* @__PURE__ */ a(h, { className: "h-4 w-4" }) }) : /* @__PURE__ */ a(h, { className: "h-4 w-4" }),
+        rightIcon: V && R && !i ? /* @__PURE__ */ a(
+          O,
+          {
+            variant: "ghost",
+            size: "sm",
+            onClick: $,
+            className: `h-auto ${K("xs", "p")}`,
+            "aria-label": "Clear search",
+            children: /* @__PURE__ */ a(L, { className: "h-4 w-4" })
+          }
+        ) : void 0,
+        className: x(K("lg", "pr"))
+      })
+    ) });
+  }
+);
+P.displayName = "SearchInput";
+export {
+  P as default
+};
+//# sourceMappingURL=SearchInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.js","sources":["../../../../../src/ui/components/SearchInput/SearchInput.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, forwardRef } from \"react\";\nimport type { InputHTMLAttributes } from \"react\";\nimport { Search, X } from \"lucide-react\";\nimport Input from \"../../primitives/Input/Input\";\nimport Button from \"../../primitives/Button/Button\";\nimport { cn } from \"../../utils\";\nimport { getSpacingClass } from \"../../tokens\";\n\nexport interface SearchInputProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"size\"\n> {\n  onSearch?: (value: string) => void;\n  onClear?: () => void;\n  loading?: boolean;\n  showClearButton?: boolean;\n  debounceMs?: number;\n}\n\n/**\n * SearchInput Component\n *\n * A search input component with icon, clear button, and loading state.\n * Follows Atomic Design principles as a Molecule component.\n *\n * @example\n * ```tsx\n * <SearchInput\n *   placeholder=\"Search...\"\n *   onSearch={(value) => console.log(value)}\n * />\n * ```\n */\nconst SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(\n  function SearchInput(\n    {\n      onSearch,\n      onClear,\n      loading = false,\n      showClearButton = true,\n      debounceMs = 300,\n      value: controlledValue,\n      defaultValue,\n      onChange,\n      className = \"\",\n      ...props\n    },\n    ref,\n  ) {\n    const [internalValue, setInternalValue] = useState<string>(\n      typeof defaultValue === \"string\" ? defaultValue : \"\",\n    );\n    const [debounceTimer, setDebounceTimer] = useState<ReturnType<\n      typeof setTimeout\n    > | null>(null);\n\n    const isControlled = controlledValue !== undefined;\n    const currentValue = isControlled ? controlledValue : internalValue;\n    const hasValue =\n      currentValue !== undefined &&\n      currentValue !== null &&\n      String(currentValue).length > 0;\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      const newValue = e.target.value;\n\n      if (!isControlled) {\n        setInternalValue(newValue);\n      }\n\n      onChange?.(e);\n\n      // Debounce search\n      if (debounceTimer) {\n        clearTimeout(debounceTimer);\n      }\n\n      const timer = setTimeout(() => {\n        onSearch?.(newValue);\n      }, debounceMs);\n\n      setDebounceTimer(timer);\n    };\n\n    const handleClear = () => {\n      if (!isControlled) {\n        setInternalValue(\"\");\n      }\n\n      // Create synthetic event for onChange\n      const syntheticEvent = {\n        target: { value: \"\" },\n        currentTarget: { value: \"\" },\n      } as React.ChangeEvent<HTMLInputElement>;\n      onChange?.(syntheticEvent);\n\n      onClear?.();\n      onSearch?.(\"\");\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === \"Enter\" && onSearch) {\n        onSearch(String(currentValue || \"\"));\n      }\n      props.onKeyDown?.(e);\n    };\n\n    return (\n      <div className={cn(\"relative\", className)}>\n        <Input\n          ref={ref}\n          {...props}\n          type=\"search\"\n          value={currentValue}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          leftIcon={\n            loading ? (\n              <div className=\"animate-spin\">\n                <Search className=\"h-4 w-4\" />\n              </div>\n            ) : (\n              <Search className=\"h-4 w-4\" />\n            )\n          }\n          rightIcon={\n            showClearButton && hasValue && !loading ? (\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                onClick={handleClear}\n                className={`h-auto ${getSpacingClass(\"xs\", \"p\")}`}\n                aria-label=\"Clear search\"\n              >\n                <X className=\"h-4 w-4\" />\n              </Button>\n            ) : undefined\n          }\n          className={cn(getSpacingClass(\"lg\", \"pr\"))}\n        />\n      </div>\n    );\n  },\n);\n\nSearchInput.displayName = \"SearchInput\";\n\nexport default SearchInput;\n"],"names":["SearchInput","forwardRef","_a","ref","_b","onSearch","onClear","loading","showClearButton","debounceMs","controlledValue","defaultValue","onChange","className","props","__objRest","internalValue","setInternalValue","useState","debounceTimer","setDebounceTimer","isControlled","currentValue","hasValue","handleChange","e","newValue","timer","handleClear","syntheticEvent","handleKeyDown","cn","jsx","Input","__spreadProps","__spreadValues","Search","Button","getSpacingClass","X"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,MAAMA,IAAcC;AAAA,EAClB,SACEC,GAYAC,GACA;AAbA,QAAAC,IAAAF,GACE;AAAA,gBAAAG;AAAA,MACA,SAAAC;AAAA,MACA,SAAAC,IAAU;AAAA,MACV,iBAAAC,IAAkB;AAAA,MAClB,YAAAC,IAAa;AAAA,MACb,OAAOC;AAAA,MACP,cAAAC;AAAA,MACA,UAAAC;AAAA,MACA,WAAAC,IAAY;AAAA,QATdT,GAUKU,IAAAC,EAVLX,GAUK;AAAA,MATH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,CAACY,GAAeC,CAAgB,IAAIC;AAAA,MACxC,OAAOP,KAAiB,WAAWA,IAAe;AAAA,IAAA,GAE9C,CAACQ,GAAeC,CAAgB,IAAIF,EAEhC,IAAI,GAERG,IAAeX,MAAoB,QACnCY,IAAeD,IAAeX,IAAkBM,GAChDO,IAEJD,KAAiB,QACjB,OAAOA,CAAY,EAAE,SAAS,GAE1BE,IAAe,CAACC,MAA2C;AAC/D,YAAMC,IAAWD,EAAE,OAAO;AAE1B,MAAKJ,KACHJ,EAAiBS,CAAQ,GAG3Bd,KAAA,QAAAA,EAAWa,IAGPN,KACF,aAAaA,CAAa;AAG5B,YAAMQ,IAAQ,WAAW,MAAM;AAC7B,QAAAtB,KAAA,QAAAA,EAAWqB;AAAA,MACb,GAAGjB,CAAU;AAEb,MAAAW,EAAiBO,CAAK;AAAA,IACxB,GAEMC,IAAc,MAAM;AACxB,MAAKP,KACHJ,EAAiB,EAAE;AAIrB,YAAMY,IAAiB;AAAA,QACrB,QAAQ,EAAE,OAAO,GAAA;AAAA,QACjB,eAAe,EAAE,OAAO,GAAA;AAAA,MAAG;AAE7B,MAAAjB,KAAA,QAAAA,EAAWiB,IAEXvB,KAAA,QAAAA,KACAD,KAAA,QAAAA,EAAW;AAAA,IACb,GAEMyB,IAAgB,CAACL,MAA6C;;AAClE,MAAIA,EAAE,QAAQ,WAAWpB,KACvBA,EAAS,OAAOiB,KAAgB,EAAE,CAAC,IAErCpB,IAAAY,EAAM,cAAN,QAAAZ,EAAA,KAAAY,GAAkBW;AAAA,IACpB;AAEA,6BACG,OAAA,EAAI,WAAWM,EAAG,YAAYlB,CAAS,GACtC,UAAA,gBAAAmB;AAAA,MAACC;AAAA,MAAAC,EAAAC,EAAA;AAAA,QACC,KAAAhC;AAAA,SACIW,IAFL;AAAA,QAGC,MAAK;AAAA,QACL,OAAOQ;AAAA,QACP,UAAUE;AAAA,QACV,WAAWM;AAAA,QACX,UACEvB,IACE,gBAAAyB,EAAC,OAAA,EAAI,WAAU,gBACb,UAAA,gBAAAA,EAACI,GAAA,EAAO,WAAU,WAAU,GAC9B,IAEA,gBAAAJ,EAACI,GAAA,EAAO,WAAU,WAAU;AAAA,QAGhC,WACE5B,KAAmBe,KAAY,CAAChB,IAC9B,gBAAAyB;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,SAAST;AAAA,YACT,WAAW,UAAUU,EAAgB,MAAM,GAAG,CAAC;AAAA,YAC/C,cAAW;AAAA,YAEX,UAAA,gBAAAN,EAACO,GAAA,EAAE,WAAU,UAAA,CAAU;AAAA,UAAA;AAAA,QAAA,IAEvB;AAAA,QAEN,WAAWR,EAAGO,EAAgB,MAAM,IAAI,CAAC;AAAA,MAAA;AAAA,IAAA,GAE7C;AAAA,EAEJ;AACF;AAEAtC,EAAY,cAAc;"}

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

@@ -0,0 +1,143 @@
+"use client";
+var A = Object.defineProperty, D = Object.defineProperties;
+var E = Object.getOwnPropertyDescriptors;
+var t = Object.getOwnPropertySymbols;
+var p = Object.prototype.hasOwnProperty, n = Object.prototype.propertyIsEnumerable;
+var v = (r, e, o) => e in r ? A(r, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : r[e] = o, S = (r, e) => {
+  for (var o in e || (e = {}))
+    p.call(e, o) && v(r, o, e[o]);
+  if (t)
+    for (var o of t(e))
+      n.call(e, o) && v(r, o, e[o]);
+  return r;
+}, b = (r, e) => D(r, E(e));
+var s = (r, e) => {
+  var o = {};
+  for (var i in r)
+    p.call(r, i) && e.indexOf(i) < 0 && (o[i] = r[i]);
+  if (r != null && t)
+    for (var i of t(r))
+      e.indexOf(i) < 0 && n.call(r, i) && (o[i] = r[i]);
+  return o;
+};
+import { jsx as d } from "react/jsx-runtime";
+import { useMemo as F } from "react";
+import { SideNavbarProvider as N } from "./providers/SideNavbarProvider.js";
+import { SideNavbarThemeProvider as G } from "./providers/SideNavbarThemeProvider.js";
+import { SideNavbarConfigProvider as I } from "./providers/SideNavbarConfigProvider.js";
+import { SideNavbarStateProvider as J } from "./providers/SideNavbarStateProvider.js";
+import { SidebarSlotProvider as K } from "./providers/SidebarSlotProvider.js";
+import { SideNavbarToggleContext as L } from "./contexts/SideNavbarToggleContext.js";
+import O from "./components/SideNavbarRoot.js";
+import Q from "./components/SideNavbarToggle.js";
+import U from "./components/SideNavbarResizeHandle.js";
+import X from "./components/SideNavbarBackdrop.js";
+import Y from "./components/Navbar/Navbar.js";
+import Z from "./components/Sidebar/Sidebar.js";
+function a(_) {
+  var l = _, {
+    mode: r = "full",
+    variant: e = "default",
+    navigationWidth: o = "56px",
+    width: i = "320px",
+    animationDuration: g = 300,
+    resizable: u = !1,
+    minWidth: P,
+    maxWidth: c,
+    snapPoints: x,
+    responsive: T = !1,
+    mobileBreakpoint: h = 768,
+    mobileVariant: C = "collapse",
+    overlayBackdrop: R = !0,
+    storageKey: k,
+    persistWidth: z = !1,
+    defaultCollapsed: B = !1,
+    collapsed: H,
+    onCollapseChange: M,
+    onWidthChange: j,
+    onMobileChange: V,
+    exclusiveGroups: W = !1,
+    showToggle: m = !0,
+    togglePosition: f = "floating",
+    children: q
+  } = l, w = s(l, [
+    // Mode
+    "mode",
+    // Theme
+    "variant",
+    "navigationWidth",
+    "width",
+    "animationDuration",
+    // Config
+    "resizable",
+    "minWidth",
+    "maxWidth",
+    "snapPoints",
+    "responsive",
+    "mobileBreakpoint",
+    "mobileVariant",
+    "overlayBackdrop",
+    "storageKey",
+    "persistWidth",
+    // State
+    "defaultCollapsed",
+    "collapsed",
+    "onCollapseChange",
+    "onWidthChange",
+    "onMobileChange",
+    "exclusiveGroups",
+    // Toggle
+    "showToggle",
+    "togglePosition",
+    // Rest
+    "children"
+  ]);
+  const y = F(
+    () => ({
+      showMainToggle: m,
+      mainTogglePosition: f
+    }),
+    [m, f]
+  );
+  return /* @__PURE__ */ d(L.Provider, { value: y, children: /* @__PURE__ */ d(
+    N,
+    {
+      variant: e,
+      navigationWidth: o,
+      contentWidth: i,
+      animationDuration: g,
+      mode: r,
+      resizable: u,
+      minWidth: P,
+      maxWidth: c,
+      snapPoints: x,
+      responsive: T,
+      mobileBreakpoint: h,
+      mobileVariant: C,
+      overlayBackdrop: R,
+      storageKey: k,
+      persistWidth: z,
+      defaultCollapsed: B,
+      collapsed: H,
+      onCollapseChange: M,
+      onWidthChange: j,
+      onMobileChange: V,
+      exclusiveGroups: W,
+      children: /* @__PURE__ */ d(O, b(S({}, w), { children: q }))
+    }
+  ) });
+}
+a.Navbar = Y;
+a.Sidebar = Z;
+a.Toggle = Q;
+a.ResizeHandle = U;
+a.Backdrop = X;
+a.Provider = N;
+a.ThemeProvider = G;
+a.ConfigProvider = I;
+a.StateProvider = J;
+a.SlotProvider = K;
+export {
+  a as default
+};
+//# sourceMappingURL=SideNavbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavbar.js","sources":["../../../../../src/ui/components/SideNavbar/SideNavbar.tsx"],"sourcesContent":["\"use client\";\n\nimport { useMemo } from \"react\";\nimport { SideNavbarProvider } from \"./providers/SideNavbarProvider\";\nimport { SideNavbarThemeProvider } from \"./providers/SideNavbarThemeProvider\";\nimport { SideNavbarConfigProvider } from \"./providers/SideNavbarConfigProvider\";\nimport { SideNavbarStateProvider } from \"./providers/SideNavbarStateProvider\";\nimport { SidebarSlotProvider } from \"./providers/SidebarSlotProvider\";\nimport { SideNavbarToggleContext } from \"./contexts/SideNavbarToggleContext\";\nimport SideNavbarRoot from \"./components/SideNavbarRoot\";\nimport SideNavbarToggle from \"./components/SideNavbarToggle\";\nimport SideNavbarResizeHandle from \"./components/SideNavbarResizeHandle\";\nimport SideNavbarBackdrop from \"./components/SideNavbarBackdrop\";\n// Subcomponents with their own contexts\nimport { Navbar } from \"./components/Navbar\";\nimport { Sidebar } from \"./components/Sidebar\";\nimport type { SideNavbarProps } from \"./types\";\n\n/**\n * SideNavbar Component\n *\n * A flexible, compound sidebar component with layered context architecture.\n * Supports multiple modes, resizing, responsive behavior, and content groups.\n *\n * ## Architecture\n *\n * Uses hierarchical context system:\n * - **Root Contexts** (3 layers): Theme, Config, State\n * - **Subcomponent Contexts**: Navbar, Sidebar (inherit from root)\n *\n * ## Modes\n *\n * - `full`: Navigation + Content (default) - Full sidebar with collapsible content\n * - `navigation`: Navigation only - Just the icon bar, no collapsible content\n * - `minimal`: Navigation with hover expand (future)\n *\n * ## Subcomponents (with own contexts)\n *\n * - `SideNavbar.Navbar` - Icon navigation column with its own NavbarContext\n *   - Main toggle button is rendered at top-right of navbar by default\n *   - `SideNavbar.Navbar.Item` - Navigation item with icon\n *   - `SideNavbar.Navbar.Toggle` - Internal toggle button (optional, inside navbar)\n *   - `SideNavbar.Navbar.Separator` - Visual separator\n *\n * - `SideNavbar.Sidebar` - Expandable content area with its own SidebarContext\n *   - `SideNavbar.Sidebar.Header` - Header section\n *   - `SideNavbar.Sidebar.Content` - Scrollable content area\n *   - `SideNavbar.Sidebar.Footer` - Footer section\n *   - `SideNavbar.Sidebar.Group` - Collapsible groups\n *   - `SideNavbar.Sidebar.Slot` - Content slot (exclusive to Sidebar, not Navbar)\n *   - `SideNavbar.Sidebar.SlotContent` - Renders active slot content\n *\n * ## Utility Components\n *\n * - `SideNavbar.Toggle` - Toggle button component (rendered in Navbar by default)\n * - `SideNavbar.ResizeHandle` - Resize handle for resizable sidebars\n * - `SideNavbar.Backdrop` - Mobile overlay backdrop\n *\n * ## Providers (for advanced usage)\n *\n * - `SideNavbar.Provider` - Combined provider\n * - `SideNavbar.ThemeProvider`, `SideNavbar.ConfigProvider`, `SideNavbar.StateProvider`\n * - `SideNavbar.SlotProvider` - Slot system provider (exclusive to Sidebar content)\n *\n * ## Slot System (Sidebar Only)\n *\n * The slot system allows dynamic content switching within the Sidebar.\n * **Important: Slots only work within the Sidebar component, not the Navbar.**\n * Use `SidebarSlotProvider` to wrap Sidebar content, then use `SidebarSlot` and\n * `SidebarSlotContent` to manage dynamic content.\n *\n * @example\n * ```tsx\n * @example\n * ```tsx\n * <SideNavbar mode=\"full\" variant=\"elevated\">\n *   <SideNavbar.Navbar showToggle togglePosition=\"bottom\">\n *     <SideNavbar.Navbar.Item icon={<Home />} label=\"Home\" />\n *     <SideNavbar.Navbar.Item icon={<Settings />} label=\"Settings\" />\n *   </SideNavbar.Navbar>\n *\n *   <SideNavbar.Sidebar>\n *     <SideNavbar.Sidebar.Header title=\"Dashboard\" />\n *     <SideNavbar.Sidebar.Content>\n *       <SideNavbar.Sidebar.Group id=\"stats\" title=\"Statistics\">\n *         <StatsList />\n *       </SideNavbar.Sidebar.Group>\n *     </SideNavbar.Sidebar.Content>\n *     <SideNavbar.Sidebar.Footer>\n *       <Button>Apply</Button>\n *     </SideNavbar.Sidebar.Footer>\n *   </SideNavbar.Sidebar>\n * </SideNavbar>\n * ```\n * ```\n */\nfunction SideNavbar({\n  // Mode\n  mode = \"full\",\n\n  // Theme\n  variant = \"default\",\n  navigationWidth = \"56px\",\n  width = \"320px\",\n  animationDuration = 300,\n\n  // Config\n  resizable = false,\n  minWidth,\n  maxWidth,\n  snapPoints,\n  responsive = false,\n  mobileBreakpoint = 768,\n  mobileVariant = \"collapse\",\n  overlayBackdrop = true,\n  storageKey,\n  persistWidth = false,\n\n  // State\n  defaultCollapsed = false,\n  collapsed,\n  onCollapseChange,\n  onWidthChange,\n  onMobileChange,\n  exclusiveGroups = false,\n\n  // Toggle\n  showToggle = true,\n  togglePosition = \"floating\",\n\n  // Rest\n  children,\n  ...rootProps\n}: SideNavbarProps) {\n  // Memoize toggle context value to prevent unnecessary re-renders\n  const toggleContextValue = useMemo(\n    () => ({\n      showMainToggle: showToggle,\n      mainTogglePosition: togglePosition,\n    }),\n    [showToggle, togglePosition],\n  );\n\n  return (\n    <SideNavbarToggleContext.Provider value={toggleContextValue}>\n      <SideNavbarProvider\n        // Theme\n        variant={variant}\n        navigationWidth={navigationWidth}\n        contentWidth={width}\n        animationDuration={animationDuration}\n        // Config\n        mode={mode}\n        resizable={resizable}\n        minWidth={minWidth}\n        maxWidth={maxWidth}\n        snapPoints={snapPoints}\n        responsive={responsive}\n        mobileBreakpoint={mobileBreakpoint}\n        mobileVariant={mobileVariant}\n        overlayBackdrop={overlayBackdrop}\n        storageKey={storageKey}\n        persistWidth={persistWidth}\n        // State\n        defaultCollapsed={defaultCollapsed}\n        collapsed={collapsed}\n        onCollapseChange={onCollapseChange}\n        onWidthChange={onWidthChange}\n        onMobileChange={onMobileChange}\n        exclusiveGroups={exclusiveGroups}\n      >\n        <SideNavbarRoot {...rootProps}>{children}</SideNavbarRoot>\n      </SideNavbarProvider>\n    </SideNavbarToggleContext.Provider>\n  );\n}\n\n// ============================================================================\n// Subcomponents (with their own contexts)\n// ============================================================================\nSideNavbar.Navbar = Navbar;\nSideNavbar.Sidebar = Sidebar;\n\n// ============================================================================\n// Utility Components\n// ============================================================================\nSideNavbar.Toggle = SideNavbarToggle;\nSideNavbar.ResizeHandle = SideNavbarResizeHandle;\nSideNavbar.Backdrop = SideNavbarBackdrop;\n\n// ============================================================================\n// Providers (for advanced usage)\n// ============================================================================\nSideNavbar.Provider = SideNavbarProvider;\nSideNavbar.ThemeProvider = SideNavbarThemeProvider;\nSideNavbar.ConfigProvider = SideNavbarConfigProvider;\nSideNavbar.StateProvider = SideNavbarStateProvider;\nSideNavbar.SlotProvider = SidebarSlotProvider;\n\nexport default SideNavbar;\n"],"names":["SideNavbar","_a","_b","mode","variant","navigationWidth","width","animationDuration","resizable","minWidth","maxWidth","snapPoints","responsive","mobileBreakpoint","mobileVariant","overlayBackdrop","storageKey","persistWidth","defaultCollapsed","collapsed","onCollapseChange","onWidthChange","onMobileChange","exclusiveGroups","showToggle","togglePosition","children","rootProps","__objRest","toggleContextValue","useMemo","jsx","SideNavbarToggleContext","SideNavbarProvider","SideNavbarRoot","__spreadProps","__spreadValues","Navbar","Sidebar","SideNavbarToggle","SideNavbarResizeHandle","SideNavbarBackdrop","SideNavbarThemeProvider","SideNavbarConfigProvider","SideNavbarStateProvider","SidebarSlotProvider"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgGA,SAASA,EAAWC,GAqCA;AArCA,MAAAC,IAAAD,GAElB;AAAA,UAAAE,IAAO;AAAA,IAGP,SAAAC,IAAU;AAAA,IACV,iBAAAC,IAAkB;AAAA,IAClB,OAAAC,IAAQ;AAAA,IACR,mBAAAC,IAAoB;AAAA,IAGpB,WAAAC,IAAY;AAAA,IACZ,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,kBAAAC,IAAmB;AAAA,IACnB,eAAAC,IAAgB;AAAA,IAChB,iBAAAC,IAAkB;AAAA,IAClB,YAAAC;AAAA,IACA,cAAAC,IAAe;AAAA,IAGf,kBAAAC,IAAmB;AAAA,IACnB,WAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,iBAAAC,IAAkB;AAAA,IAGlB,YAAAC,IAAa;AAAA,IACb,gBAAAC,IAAiB;AAAA,IAGjB,UAAAC;AAAA,MAnCkBxB,GAoCfyB,IAAAC,EApCe1B,GAoCf;AAAA;AAAA,IAlCH;AAAA;AAAA,IAGA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA;AAAA,IAGA;AAAA;AAIA,QAAM2B,IAAqBC;AAAA,IACzB,OAAO;AAAA,MACL,gBAAgBN;AAAA,MAChB,oBAAoBC;AAAA,IAAA;AAAA,IAEtB,CAACD,GAAYC,CAAc;AAAA,EAAA;AAG7B,SACE,gBAAAM,EAACC,EAAwB,UAAxB,EAAiC,OAAOH,GACvC,UAAA,gBAAAE;AAAA,IAACE;AAAA,IAAA;AAAA,MAEC,SAAA7B;AAAA,MACA,iBAAAC;AAAA,MACA,cAAcC;AAAA,MACd,mBAAAC;AAAA,MAEA,MAAAJ;AAAA,MACA,WAAAK;AAAA,MACA,UAAAC;AAAA,MACA,UAAAC;AAAA,MACA,YAAAC;AAAA,MACA,YAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,eAAAC;AAAA,MACA,iBAAAC;AAAA,MACA,YAAAC;AAAA,MACA,cAAAC;AAAA,MAEA,kBAAAC;AAAA,MACA,WAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,eAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,iBAAAC;AAAA,MAEA,UAAA,gBAAAQ,EAACG,GAAAC,EAAAC,EAAA,IAAmBT,IAAnB,EAA+B,UAAAD,EAAA,EAAS;AAAA,IAAA;AAAA,EAAA,GAE7C;AAEJ;AAKA1B,EAAW,SAASqC;AACpBrC,EAAW,UAAUsC;AAKrBtC,EAAW,SAASuC;AACpBvC,EAAW,eAAewC;AAC1BxC,EAAW,WAAWyC;AAKtBzC,EAAW,WAAWiC;AACtBjC,EAAW,gBAAgB0C;AAC3B1C,EAAW,iBAAiB2C;AAC5B3C,EAAW,gBAAgB4C;AAC3B5C,EAAW,eAAe6C;"}

package/dist/granular/ui/components/SideNavbar/components/Navbar/Navbar.js

@@ -0,0 +1,173 @@
+"use client";
+var C = Object.defineProperty, M = Object.defineProperties;
+var q = Object.getOwnPropertyDescriptors;
+var n = Object.getOwnPropertySymbols;
+var y = Object.prototype.hasOwnProperty, I = Object.prototype.propertyIsEnumerable;
+var S = (e, o, t) => o in e ? C(e, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[o] = t, v = (e, o) => {
+  for (var t in o || (o = {}))
+    y.call(o, t) && S(e, t, o[t]);
+  if (n)
+    for (var t of n(o))
+      I.call(o, t) && S(e, t, o[t]);
+  return e;
+}, T = (e, o) => M(e, q(o));
+var _ = (e, o) => {
+  var t = {};
+  for (var r in e)
+    y.call(e, r) && o.indexOf(r) < 0 && (t[r] = e[r]);
+  if (e != null && n)
+    for (var r of n(e))
+      o.indexOf(r) < 0 && I.call(e, r) && (t[r] = e[r]);
+  return t;
+};
+import { jsx as a, jsxs as B } from "react/jsx-runtime";
+import { useRef as G, useState as w, useMemo as H } from "react";
+import { NavbarContext as V } from "../../contexts/NavbarContext.js";
+import { useSideNavbarStateRequired as z } from "../../contexts/SideNavbarStateContext.js";
+import { useSideNavbarThemeRequired as F } from "../../contexts/SideNavbarThemeContext.js";
+import { getSpacingClass as m } from "../../../../tokens/spacing.js";
+import d from "./NavbarToggle.js";
+import K from "./NavbarItem.js";
+import L from "./NavbarSeparator.js";
+import { NavbarGroup as P } from "./NavbarGroup.js";
+import { cn as R } from "../../../../utils/cn.js";
+function i(J) {
+  var b = J, {
+    children: e,
+    showMainToggle: o,
+    mainTogglePosition: t,
+    showToggle: r = !1,
+    togglePosition: s = "bottom",
+    labelMode: c = "tooltip",
+    expandedWidth: f = 200,
+    className: k = "",
+    style: D
+  } = b, E = _(b, [
+    "children",
+    // showMainToggle and mainTogglePosition are read by SideNavbarRoot
+    // via children inspection (render-driven override resolution — see
+    // resolveNavbarOverride in SideNavbarRoot.tsx). They're declared in
+    // the destructure so TS6133 doesn't flag the unused names, and so
+    // that consumers passing them as JSX attributes remain in the
+    // public NavbarProps signature. The Navbar function body itself
+    // does not consume them. Same pattern as `_multiSort` / `_reorderable`
+    // in DataGrid.
+    "showMainToggle",
+    "mainTogglePosition",
+    "showToggle",
+    "togglePosition",
+    "labelMode",
+    "expandedWidth",
+    "className",
+    "style"
+  ]);
+  const l = z(), p = F(), x = G(null), [g, $] = w(null), [h, N] = w(!1), u = c === "inline" && !l.collapsed, j = u ? typeof f == "number" ? `${f}px` : f : p.navigationWidth, A = H(
+    () => ({
+      // Inherited from root
+      collapsed: l.collapsed,
+      toggle: l.toggle,
+      // Navbar-specific
+      navbarRef: x,
+      activeItem: g,
+      setActiveItem: $,
+      isHovered: h,
+      showInternalToggle: r,
+      togglePosition: s,
+      labelMode: c
+    }),
+    [
+      l.collapsed,
+      l.toggle,
+      g,
+      h,
+      r,
+      s,
+      c
+    ]
+  );
+  return /* @__PURE__ */ a(V.Provider, { value: A, children: /* @__PURE__ */ B(
+    "nav",
+    T(v({
+      ref: x,
+      className: R(
+        "relative",
+        "flex-shrink-0",
+        "flex",
+        "flex-col",
+        "h-full",
+        u ? "items-stretch" : "items-center",
+        k
+      ),
+      style: v({
+        position: "relative",
+        // Ensure relative positioning for absolute children (toggle)
+        backgroundColor: "var(--color-surface-raised)",
+        borderRight: "1px solid var(--color-line-default)",
+        width: j,
+        transitionProperty: "width",
+        transitionDuration: `${p.animationDuration}ms`,
+        transitionTimingFunction: p.animationEasing
+      }, D),
+      onMouseEnter: () => N(!0),
+      onMouseLeave: () => N(!1),
+      "aria-label": "Side navigation"
+    }, E), {
+      children: [
+        r && s === "top" && /* @__PURE__ */ a(
+          "div",
+          {
+            className: `flex-shrink-0 ${m("sm", "p")}`,
+            style: { borderBottom: "1px solid var(--color-line-default)" },
+            children: /* @__PURE__ */ a(d, {})
+          }
+        ),
+        /* @__PURE__ */ a(
+          "div",
+          {
+            className: R(
+              "relative",
+              // Create new stacking context
+              "flex-1",
+              "flex",
+              "flex-col",
+              "overflow-y-auto",
+              "overflow-x-hidden",
+              m("sm", "p"),
+              // 0.5rem (8px)
+              m("sm", "gap"),
+              // 0.5rem (8px) between items
+              "w-full",
+              "min-w-0",
+              // Prevent flex items from overflowing
+              u ? "items-stretch" : "items-center",
+              "justify-start"
+            ),
+            style: {
+              // micro-z: navbar content above toggle within parent container
+              zIndex: 1
+            },
+            children: e
+          }
+        ),
+        r && s === "bottom" && /* @__PURE__ */ a(
+          "div",
+          {
+            className: `flex-shrink-0 ${m("sm", "p")}`,
+            style: { borderTop: "1px solid var(--color-line-default)" },
+            children: /* @__PURE__ */ a(d, {})
+          }
+        )
+      ]
+    })
+  ) });
+}
+i.Toggle = d;
+i.Item = K;
+i.Separator = L;
+i.Group = P;
+i.displayName = "Navbar";
+i.__SIDENAVBAR_KIND__ = "navbar";
+export {
+  i as default
+};
+//# sourceMappingURL=Navbar.js.map

package/dist/granular/ui/components/SideNavbar/components/Navbar/Navbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navbar.js","sources":["../../../../../../../src/ui/components/SideNavbar/components/Navbar/Navbar.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, useRef, useMemo } from \"react\";\nimport { NavbarContext } from \"../../contexts/NavbarContext\";\nimport { useSideNavbarStateRequired } from \"../../contexts/SideNavbarStateContext\";\nimport { useSideNavbarThemeRequired } from \"../../contexts/SideNavbarThemeContext\";\nimport { cn } from \"../../../../utils\";\nimport { getSpacingClass } from \"../../../../tokens/spacing\";\nimport type { NavbarProps, NavbarContextValue } from \"../../types\";\nimport NavbarToggle from \"./NavbarToggle\";\nimport NavbarItem from \"./NavbarItem\";\nimport NavbarSeparator from \"./NavbarSeparator\";\nimport { NavbarGroup } from \"./NavbarGroup\";\n\n/**\n * Navbar subcomponent for SideNavbar\n *\n * Provides its own context that inherits from the root SideNavbar context.\n * Contains the icon navigation column with optional internal toggle.\n *\n * @example\n * ```tsx\n * <SideNavbar.Navbar showToggle togglePosition=\"bottom\">\n *   <SideNavbar.Navbar.Item icon={<Home />} label=\"Home\" />\n *   <SideNavbar.Navbar.Item icon={<Settings />} label=\"Settings\" />\n * </SideNavbar.Navbar>\n * ```\n */\nfunction Navbar({\n  children,\n  // showMainToggle and mainTogglePosition are read by SideNavbarRoot\n  // via children inspection (render-driven override resolution — see\n  // resolveNavbarOverride in SideNavbarRoot.tsx). They're declared in\n  // the destructure so TS6133 doesn't flag the unused names, and so\n  // that consumers passing them as JSX attributes remain in the\n  // public NavbarProps signature. The Navbar function body itself\n  // does not consume them. Same pattern as `_multiSort` / `_reorderable`\n  // in DataGrid.\n  showMainToggle: _showMainToggle,\n  mainTogglePosition: _mainTogglePosition,\n  showToggle = false,\n  togglePosition = \"bottom\",\n  labelMode = \"tooltip\",\n  expandedWidth = 200,\n  className = \"\",\n  style,\n  ...props\n}: NavbarProps) {\n  const rootState = useSideNavbarStateRequired();\n  const rootTheme = useSideNavbarThemeRequired();\n  const navbarRef = useRef<HTMLElement>(null);\n  const [activeItem, setActiveItem] = useState<string | null>(null);\n  const [isHovered, setIsHovered] = useState(false);\n\n  // When labelMode is 'inline', navbar should expand\n  const shouldExpand = labelMode === \"inline\" && !rootState.collapsed;\n  const navbarWidth = shouldExpand\n    ? typeof expandedWidth === \"number\"\n      ? `${expandedWidth}px`\n      : expandedWidth\n    : rootTheme.navigationWidth;\n\n  const contextValue: NavbarContextValue = useMemo(\n    () => ({\n      // Inherited from root\n      collapsed: rootState.collapsed,\n      toggle: rootState.toggle,\n      // Navbar-specific\n      navbarRef,\n      activeItem,\n      setActiveItem,\n      isHovered,\n      showInternalToggle: showToggle,\n      togglePosition,\n      labelMode,\n    }),\n    [\n      rootState.collapsed,\n      rootState.toggle,\n      activeItem,\n      isHovered,\n      showToggle,\n      togglePosition,\n      labelMode,\n    ],\n  );\n\n  return (\n    <NavbarContext.Provider value={contextValue}>\n      <nav\n        ref={navbarRef}\n        className={cn(\n          \"relative\",\n          \"flex-shrink-0\",\n          \"flex\",\n          \"flex-col\",\n          \"h-full\",\n          shouldExpand ? \"items-stretch\" : \"items-center\",\n          className,\n        )}\n        style={{\n          position: \"relative\", // Ensure relative positioning for absolute children (toggle)\n          backgroundColor: \"var(--color-surface-raised)\",\n          borderRight: \"1px solid var(--color-line-default)\",\n          width: navbarWidth,\n          transitionProperty: \"width\",\n          transitionDuration: `${rootTheme.animationDuration}ms`,\n          transitionTimingFunction: rootTheme.animationEasing,\n          ...style,\n        }}\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n        aria-label=\"Side navigation\"\n        {...props}\n      >\n        {/* Top toggle position (internal) */}\n        {showToggle && togglePosition === \"top\" && (\n          <div\n            className={`flex-shrink-0 ${getSpacingClass(\"sm\", \"p\")}`}\n            style={{ borderBottom: \"1px solid var(--color-line-default)\" }}\n          >\n            <NavbarToggle />\n          </div>\n        )}\n\n        {/* Navigation items - vertical layout */}\n        <div\n          className={cn(\n            \"relative\", // Create new stacking context\n            \"flex-1\",\n            \"flex\",\n            \"flex-col\",\n            \"overflow-y-auto\",\n            \"overflow-x-hidden\",\n            getSpacingClass(\"sm\", \"p\"), // 0.5rem (8px)\n            getSpacingClass(\"sm\", \"gap\"), // 0.5rem (8px) between items\n            \"w-full\",\n            \"min-w-0\", // Prevent flex items from overflowing\n            shouldExpand ? \"items-stretch\" : \"items-center\",\n            \"justify-start\",\n          )}\n          style={{\n            // micro-z: navbar content above toggle within parent container\n            zIndex: 1,\n          }}\n        >\n          {children}\n        </div>\n\n        {/* Bottom toggle position (internal) */}\n        {showToggle && togglePosition === \"bottom\" && (\n          <div\n            className={`flex-shrink-0 ${getSpacingClass(\"sm\", \"p\")}`}\n            style={{ borderTop: \"1px solid var(--color-line-default)\" }}\n          >\n            <NavbarToggle />\n          </div>\n        )}\n      </nav>\n    </NavbarContext.Provider>\n  );\n}\n\n// Attach compound components\nNavbar.Toggle = NavbarToggle;\nNavbar.Item = NavbarItem;\nNavbar.Separator = NavbarSeparator;\nNavbar.Group = NavbarGroup;\n\n// Add displayName for easier identification in cloneElement\nNavbar.displayName = \"Navbar\";\n\n// Stable tag SideNavbarRoot uses to identify Navbar children during\n// render-driven override resolution. A static-string marker survives\n// React DevTools displayName mutations and avoids the brittle\n// `element.type === Navbar` reference comparison that breaks under\n// HOC wrapping. Today this works because Navbar is a plain function;\n// if it's ever wrapped in `memo` / `forwardRef` (or any HOC that\n// produces a new wrapper object), MOVE this marker assignment onto\n// the wrapper that gets exported, not the inner function — otherwise\n// Root won't find it.\nNavbar.__SIDENAVBAR_KIND__ = \"navbar\" as const;\n\nexport default Navbar;\n"],"names":["Navbar","_a","_b","children","_showMainToggle","_mainTogglePosition","showToggle","togglePosition","labelMode","expandedWidth","className","style","props","__objRest","rootState","useSideNavbarStateRequired","rootTheme","useSideNavbarThemeRequired","navbarRef","useRef","activeItem","setActiveItem","useState","isHovered","setIsHovered","shouldExpand","navbarWidth","contextValue","useMemo","jsx","NavbarContext","jsxs","__spreadProps","__spreadValues","cn","getSpacingClass","NavbarToggle","NavbarItem","NavbarSeparator","NavbarGroup"],"mappings":"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"}