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

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

@@ -0,0 +1,110 @@
+"use client";
+import { jsxs as g, jsx as l } from "react/jsx-runtime";
+import { useState as w } from "react";
+import { Star as o } from "lucide-react";
+import { cn as c } from "../../utils/cn.js";
+import { getTypographySizeFromFontSize as T } from "../../tokens/typography.js";
+import { getSpacingClass as E } from "../../tokens/spacing.js";
+import { getAnimationClass as V } from "../../tokens/animations.js";
+function U({
+  value: N,
+  defaultValue: F = 0,
+  max: r = 5,
+  size: I = "md",
+  variant: a = "filled",
+  readOnly: e = !1,
+  allowHalf: h = !1,
+  showValue: M = !1,
+  onChange: f,
+  onHover: m,
+  className: $ = "",
+  icon: z,
+  emptyIcon: R
+}) {
+  const [j, A] = w(F), [u, b] = w(null), v = N !== void 0, n = u != null ? u : v ? N : j, D = {
+    sm: "h-4 w-4",
+    md: "h-5 w-5",
+    lg: "h-6 w-6"
+  }, C = (s) => {
+    e || (v || A(s), f == null || f(s));
+  }, L = (s) => {
+    e || (b(s), m == null || m(s));
+  }, y = () => {
+    e || b(null);
+  }, K = (s) => {
+    const t = s + 1, x = h && n >= t - 0.5 && n < t, d = n >= t, i = c(
+      D[I],
+      V("base"),
+      !e && "cursor-pointer",
+      d || x ? "text-fg-warning" : "text-fg-disabled"
+    ), k = z || /* @__PURE__ */ l(o, { className: i, fill: d ? "currentColor" : "none" }), S = R || /* @__PURE__ */ l(o, { className: i, fill: "none" });
+    return /* @__PURE__ */ l(
+      "span",
+      {
+        className: "relative inline-block",
+        onClick: () => C(t),
+        onMouseEnter: () => L(t),
+        onMouseLeave: y,
+        role: e ? void 0 : "button",
+        tabIndex: e ? void 0 : 0,
+        "aria-label": e ? void 0 : `Rate ${t} out of ${r}`,
+        onKeyDown: (p) => {
+          !e && (p.key === "Enter" || p.key === " ") && (p.preventDefault(), C(t));
+        },
+        children: x ? /* @__PURE__ */ g("span", { className: "relative inline-block", children: [
+          /* @__PURE__ */ l(
+            "span",
+            {
+              className: "absolute inset-0 overflow-hidden",
+              style: { width: "50%" },
+              children: a === "filled" ? /* @__PURE__ */ l(o, { className: i, fill: "currentColor" }) : k
+            }
+          ),
+          a === "filled" ? /* @__PURE__ */ l(o, { className: i, fill: "none" }) : S
+        ] }) : d ? a === "filled" ? /* @__PURE__ */ l(o, { className: i, fill: "currentColor" }) : k : a === "filled" ? /* @__PURE__ */ l(o, { className: i, fill: "none" }) : S
+      },
+      s
+    );
+  };
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      className: c(
+        "inline-flex",
+        "items-center",
+        E("xs", "gap"),
+        $
+      ),
+      children: [
+        /* @__PURE__ */ l(
+          "div",
+          {
+            className: c("flex", "items-center"),
+            role: e ? "img" : void 0,
+            "aria-label": e ? `Rating: ${n} out of ${r}` : void 0,
+            children: Array.from({ length: r }, (s, t) => K(t))
+          }
+        ),
+        M && /* @__PURE__ */ g(
+          "span",
+          {
+            className: c(
+              E("sm", "ml"),
+              T("sm"),
+              "text-fg-secondary"
+            ),
+            children: [
+              n.toFixed(h ? 1 : 0),
+              "/",
+              r
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  U as default
+};
+//# sourceMappingURL=Rating.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Rating.js","sources":["../../../../../src/ui/components/Rating/Rating.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, type ReactNode } from \"react\";\nimport { Star } from \"lucide-react\";\nimport { cn } from \"../../utils\";\nimport {\n  getSpacingClass,\n  getAnimationClass,\n  getTypographySizeFromFontSize,\n} from \"../../tokens\";\n\nexport type RatingSize = \"sm\" | \"md\" | \"lg\";\nexport type RatingVariant = \"filled\" | \"outlined\";\n\nexport interface RatingProps {\n  value?: number;\n  defaultValue?: number;\n  max?: number;\n  size?: RatingSize;\n  variant?: RatingVariant;\n  readOnly?: boolean;\n  allowHalf?: boolean;\n  showValue?: boolean;\n  onChange?: (value: number) => void;\n  onHover?: (value: number) => void;\n  className?: string;\n  icon?: ReactNode;\n  emptyIcon?: ReactNode;\n}\n\n/**\n * Rating Component\n *\n * A rating component for displaying and selecting ratings.\n * Supports filled and outlined variants, half ratings, and read-only mode.\n * Follows Atomic Design principles as a Molecule component.\n *\n * @example\n * ```tsx\n * <Rating value={4} max={5} onChange={(value) => console.log(value)} />\n *\n * <Rating value={3.5} readOnly showValue />\n * ```\n */\nexport default function Rating({\n  value: controlledValue,\n  defaultValue = 0,\n  max = 5,\n  size = \"md\",\n  variant = \"filled\",\n  readOnly = false,\n  allowHalf = false,\n  showValue = false,\n  onChange,\n  onHover,\n  className = \"\",\n  icon,\n  emptyIcon,\n}: RatingProps) {\n  const [internalValue, setInternalValue] = useState(defaultValue);\n  const [hoverValue, setHoverValue] = useState<number | null>(null);\n\n  const isControlled = controlledValue !== undefined;\n  const displayValue =\n    hoverValue ?? (isControlled ? controlledValue : internalValue);\n\n  const sizeConfig = {\n    sm: \"h-4 w-4\",\n    md: \"h-5 w-5\",\n    lg: \"h-6 w-6\",\n  };\n\n  const handleClick = (newValue: number) => {\n    if (readOnly) return;\n\n    if (!isControlled) {\n      setInternalValue(newValue);\n    }\n    onChange?.(newValue);\n  };\n\n  const handleMouseEnter = (newValue: number) => {\n    if (readOnly) return;\n    setHoverValue(newValue);\n    onHover?.(newValue);\n  };\n\n  const handleMouseLeave = () => {\n    if (readOnly) return;\n    setHoverValue(null);\n  };\n\n  const renderStar = (index: number) => {\n    const starValue = index + 1;\n    const isHalf =\n      allowHalf && displayValue >= starValue - 0.5 && displayValue < starValue;\n    const isFilled = displayValue >= starValue;\n\n    const starClasses = cn(\n      sizeConfig[size],\n      getAnimationClass(\"base\"),\n      !readOnly && \"cursor-pointer\",\n      isFilled || isHalf ? \"text-fg-warning\" : \"text-fg-disabled\",\n    );\n\n    const CustomIcon = icon || (\n      <Star className={starClasses} fill={isFilled ? \"currentColor\" : \"none\"} />\n    );\n    const CustomEmptyIcon = emptyIcon || (\n      <Star className={starClasses} fill=\"none\" />\n    );\n\n    return (\n      <span\n        key={index}\n        className=\"relative inline-block\"\n        onClick={() => handleClick(starValue)}\n        onMouseEnter={() => handleMouseEnter(starValue)}\n        onMouseLeave={handleMouseLeave}\n        role={readOnly ? undefined : \"button\"}\n        tabIndex={readOnly ? undefined : 0}\n        aria-label={readOnly ? undefined : `Rate ${starValue} out of ${max}`}\n        onKeyDown={(e) => {\n          if (!readOnly && (e.key === \"Enter\" || e.key === \" \")) {\n            e.preventDefault();\n            handleClick(starValue);\n          }\n        }}\n      >\n        {isHalf ? (\n          <span className=\"relative inline-block\">\n            <span\n              className=\"absolute inset-0 overflow-hidden\"\n              style={{ width: \"50%\" }}\n            >\n              {variant === \"filled\" ? (\n                <Star className={starClasses} fill=\"currentColor\" />\n              ) : (\n                CustomIcon\n              )}\n            </span>\n            {variant === \"filled\" ? (\n              <Star className={starClasses} fill=\"none\" />\n            ) : (\n              CustomEmptyIcon\n            )}\n          </span>\n        ) : isFilled ? (\n          variant === \"filled\" ? (\n            <Star className={starClasses} fill=\"currentColor\" />\n          ) : (\n            CustomIcon\n          )\n        ) : variant === \"filled\" ? (\n          <Star className={starClasses} fill=\"none\" />\n        ) : (\n          CustomEmptyIcon\n        )}\n      </span>\n    );\n  };\n\n  return (\n    <div\n      className={cn(\n        \"inline-flex\",\n        \"items-center\",\n        getSpacingClass(\"xs\", \"gap\"),\n        className,\n      )}\n    >\n      <div\n        className={cn(\"flex\", \"items-center\")}\n        role={readOnly ? \"img\" : undefined}\n        aria-label={\n          readOnly ? `Rating: ${displayValue} out of ${max}` : undefined\n        }\n      >\n        {Array.from({ length: max }, (_, i) => renderStar(i))}\n      </div>\n      {showValue && (\n        <span\n          className={cn(\n            getSpacingClass(\"sm\", \"ml\"),\n            getTypographySizeFromFontSize(\"sm\"),\n            \"text-fg-secondary\",\n          )}\n        >\n          {displayValue.toFixed(allowHalf ? 1 : 0)}/{max}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"names":["Rating","controlledValue","defaultValue","max","size","variant","readOnly","allowHalf","showValue","onChange","onHover","className","icon","emptyIcon","internalValue","setInternalValue","useState","hoverValue","setHoverValue","isControlled","displayValue","sizeConfig","handleClick","newValue","handleMouseEnter","handleMouseLeave","renderStar","index","starValue","isHalf","isFilled","starClasses","cn","getAnimationClass","CustomIcon","jsx","Star","CustomEmptyIcon","e","jsxs","getSpacingClass","_","i","getTypographySizeFromFontSize"],"mappings":"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"}

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