@smwb/ui-react 2.4.1 → 2.5.0

package/README.md

@@ -44,6 +44,92 @@ function App() {
 In ESM builds each imported component **pulls in its own CSS automatically** (tree-shakeable) —
 nothing else to import for the default theme.
 
+## Icons
+
+`<Icon>` renders one of two icon sets under the **same name**, so switching sets never touches
+component code:
+
+- **smwb SVG set** — ~250 contour icons shipped inside the package, one ES module each.
+- **Google Material Symbols** — the webfont this library has always used (`<link>` it yourself).
+
+```tsx
+import { Icon } from "@smwb/ui-react";
+
+<Icon name="arrow_right_alt" size={24} color="primary" />;
+```
+
+Names are the canonical Material Symbols names, and lookup is forgiving: `arrow_right_alt`,
+`arrowRightAlt` and `arrow-right-alt` all resolve, as do per-icon aliases (`trash` → `delete`,
+`cog` → `settings`, `magnifier` → `search`).
+
+### Bundling only the icons you use
+
+Icons are **not** registered by default. Register the handful you render — every other icon is
+dropped by your bundler:
+
+```ts
+import { registerIcons } from "@smwb/ui-react";
+import { add, close, search } from "@smwb/ui-react/icons";
+
+registerIcons([add, close, search]);
+```
+
+Three icons in, three icons bundled (~0.4 kB). Or skip the registry entirely and pass the
+definition straight to the prop:
+
+```tsx
+import { arrowRightAlt } from "@smwb/ui-react/icons";
+
+<Icon name={arrowRightAlt} />;
+```
+
+Deep imports work too (`@smwb/ui-react/icons/arrowRightAlt`), and `@smwb/ui-react/icons/all` exports
+`registerAllIcons()` for docs sites and icon pickers — that one pulls in the whole set on purpose.
+
+### Choosing the source
+
+| `source` | Behaviour |
+| --- | --- |
+| `auto` (default) | smwb SVG when the name is registered, Material Symbols otherwise. |
+| `smwb` | Always the SVG set; an unregistered name renders an empty box and warns. |
+| `google` | Always the Material Symbols font. |
+
+Set it per icon (`<Icon source="google" …>`), per subtree, or app-wide:
+
+```tsx
+import { configureIcons, IconProvider } from "@smwb/ui-react";
+import { add, close } from "@smwb/ui-react/icons";
+
+configureIcons({ source: "smwb" });          // app-wide default
+
+<IconProvider source="smwb" icons={[add, close]}>
+  <App />
+</IconProvider>;
+```
+
+Because `auto` falls back to the font, upgrading changes nothing until you register icons.
+
+### Appearance
+
+`size` takes a pixel number or any CSS length (`size="1.5rem"`). `color` takes a semantic token
+(`primary`, `error`, …) and otherwise inherits `currentColor`. For the SVG set `weight` maps to
+the stroke width (400 → 2px, 700 → 3px); `fill` and `grade` are Material Symbols axes and are
+ignored by the contour set.
+
+### Custom and overridden icons
+
+An icon is plain data, so your own artwork registers the same way — and re-registering a shipped
+name replaces it everywhere:
+
+```ts
+registerIcons({ name: "logo", body: '<circle cx="12" cy="12" r="9"/>' });
+registerIcons({ name: "delete", body: "<path d='…'/>" }); // overrides the shipped one
+```
+
+Browse the whole set in [Storybook](https://summerweb.ru/ui-react/) under **UI/Base/Icon → All Icons** — click any
+icon to copy its name. The set is generated from `icons/data/*.json` in the repo
+(`npm run icons:generate`).
+
 ## Styles
 
 Three ways to get the CSS, pick one:

package/dist/assets/styles/less/components/icon/icon.entry.css

@@ -1 +1 @@
-.smwb-icon__wrapper{display:inline-flex;align-items:center;justify-content:center}.smwb-icon__wrapper.smwb-icon_color-primary{color:var(--smui-primaryColor)}.smwb-icon__wrapper.smwb-icon_color-secondary{color:var(--smui-secondaryColor)}.smwb-icon__wrapper.smwb-icon_color-error{color:var(--smui-errorColor)}.smwb-icon__wrapper.smwb-icon_color-success{color:var(--smui-successColor)}.smwb-icon__wrapper.smwb-icon_color-warning{color:var(--smui-warningColor)}.smwb-icon__wrapper.smwb-icon_color-info{color:var(--smui-infoColor)}.smwb-icon__wrapper.smwb-icon_color-disabled{color:var(--smui-disabledTextColor)}
+.smwb-icon__wrapper{display:inline-flex;align-items:center;justify-content:center}.smwb-icon__wrapper .smwb-icon__svg{display:block;flex-shrink:0}.smwb-icon__wrapper.smwb-icon_color-primary{color:var(--smui-primaryColor)}.smwb-icon__wrapper.smwb-icon_color-secondary{color:var(--smui-secondaryColor)}.smwb-icon__wrapper.smwb-icon_color-error{color:var(--smui-errorColor)}.smwb-icon__wrapper.smwb-icon_color-success{color:var(--smui-successColor)}.smwb-icon__wrapper.smwb-icon_color-warning{color:var(--smui-warningColor)}.smwb-icon__wrapper.smwb-icon_color-info{color:var(--smui-infoColor)}.smwb-icon__wrapper.smwb-icon_color-disabled{color:var(--smui-disabledTextColor)}

package/dist/components/base/icon/icon.d.ts

@@ -1,16 +1,32 @@
 import { HTMLAttributes } from "react";
+import type { IconDefinition, IconSource } from "../../../icons/types";
 export type IconColor = "inherit" | "primary" | "secondary" | "error" | "success" | "warning" | "info" | "disabled";
 export interface IconProps extends HTMLAttributes<HTMLSpanElement> {
     /**
-     * Icon name from https://fonts.google.com/icons
-     * Пример: name={"arrow_right_alt"}
+     * Icon name — the Google Material Symbols name, e.g. `"arrow_right_alt"`.
+     * Lookup is forgiving: `arrowRightAlt` and `arrow-right-alt` resolve too, as
+     * do an icon's aliases.
+     *
+     * An {@link IconDefinition} may be passed instead, which skips the registry
+     * entirely and is the most bundle-friendly form:
+     *
+     * ```tsx
+     * import { arrowRightAlt } from "@smwb/ui-react/icons";
+     * <Icon name={arrowRightAlt} />
+     * ```
      */
-    name: string;
+    name: string | IconDefinition;
     className?: string;
+    /**
+     * Material Symbols weight axis (100-700). For the smwb SVG set it maps to the
+     * stroke width: 400 → 2px, 700 → 3px, 100 → 1px.
+     */
     weight?: number;
+    /** Material Symbols FILL axis. Not used by the smwb SVG set (it is a contour set). */
     fill?: 0 | 1;
     /** Pixel number or any CSS length (e.g. "1.5rem"). */
     size?: number | string;
+    /** Material Symbols GRAD axis. Not used by the smwb SVG set. */
     grade?: number;
     /**
      * Semantic color token; `inherit` (default) keeps the text color.
@@ -23,6 +39,8 @@ export interface IconProps extends HTMLAttributes<HTMLSpanElement> {
      * `role="img"`; otherwise it is `aria-hidden` (decorative).
      */
     title?: string;
+    /** Overrides the icon source for this icon only. See {@link IconSource}. */
+    source?: IconSource;
 }
 export declare const Icon: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<HTMLSpanElement>>;
 export default Icon;

package/dist/components/base/icon/icon.js

@@ -1,27 +1,61 @@
-import { jsx as e } from "react/jsx-runtime";
+import { jsx as l } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/icon/icon.entry.css';/* empty css                                                   */
-import { forwardRef as p } from "react";
-import u from "clsx";
-const g = p(function({ className: s, weight: t = 400, fill: c = 0, size: o = 20, grade: d = 100, name: l, color: r = "inherit", title: n, ...i }, m) {
-  const a = n === void 0, f = r && ["primary", "secondary", "error", "success", "warning", "info", "disabled"].includes(r) ? `smwb-icon_color-${r}` : null;
-  return /* @__PURE__ */ e(
+import { forwardRef as L, useSyncExternalStore as C } from "react";
+import N from "clsx";
+import { getIcon as O } from "../../../icons/registry.js";
+import { getIconConfig as R } from "../../../icons/config.js";
+import { subscribeIcons as j } from "../../../icons/store.js";
+import { useIconSource as B } from "./iconProvider.js";
+const E = ["primary", "secondary", "error", "success", "warning", "info", "disabled"], y = /* @__PURE__ */ new Set();
+function T(r) {
+  !R().warnOnMissing || y.has(r) || (y.add(r), console.warn(
+    `[smwb] Icon "${r}" is not registered. Register it (import { ${r} } from "@smwb/ui-react/icons") or use source="auto" to fall back to Material Symbols.`
+  ));
+}
+const W = L(function({ className: S, weight: a = 400, fill: v = 0, size: n = 20, grade: I = 100, name: o, color: e = "inherit", title: i, source: _, ...u }, x) {
+  var w, b;
+  const d = B(_), g = typeof o == "string" ? o : null, m = () => {
+    var h;
+    return g === null ? null : (h = O(g)) != null ? h : null;
+  }, M = C(j, m, m), s = typeof o == "object" ? o : M, p = typeof o == "string" ? o : o.name, t = d === "google" ? "google" : s ? "smwb" : d === "smwb" ? "missing" : "google";
+  t === "missing" && T(p);
+  const f = i === void 0, $ = e && E.includes(e) ? `smwb-icon_color-${e}` : null, c = typeof n == "number" ? `${n}px` : n, k = Math.round(Math.min(3, Math.max(1, a / 200)) * 100) / 100;
+  return /* @__PURE__ */ l(
     "span",
     {
-      ...i,
-      ref: m,
+      ...u,
+      ref: x,
       "data-testid": "icon",
-      role: a ? void 0 : "img",
-      "aria-hidden": a ? !0 : void 0,
-      "aria-label": n,
-      title: n,
-      style: { ...i.style, fontVariationSettings: `'FILL' ${c}, 'wght' ${t}, 'GRAD' ${d}, 'opsz' 48` },
-      className: u("smwb-icon__wrapper", f, s),
-      children: /* @__PURE__ */ e("span", { className: "material-symbols-outlined", style: { fontSize: typeof o == "number" ? `${o}px` : o }, children: l })
+      "data-icon-source": t,
+      role: f ? void 0 : "img",
+      "aria-hidden": f ? !0 : void 0,
+      "aria-label": i,
+      title: i,
+      style: {
+        ...u.style,
+        ...t === "google" ? { fontVariationSettings: `'FILL' ${v}, 'wght' ${a}, 'GRAD' ${I}, 'opsz' 48` } : null
+      },
+      className: N("smwb-icon__wrapper", $, S),
+      children: t === "google" ? /* @__PURE__ */ l("span", { className: "material-symbols-outlined", style: { fontSize: c }, children: p }) : /* @__PURE__ */ l(
+        "svg",
+        {
+          className: "smwb-icon__svg",
+          viewBox: (w = s == null ? void 0 : s.viewBox) != null ? w : "0 0 24 24",
+          style: { width: c, height: c },
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: k,
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          "aria-hidden": "true",
+          dangerouslySetInnerHTML: { __html: (b = s == null ? void 0 : s.body) != null ? b : "" }
+        }
+      )
     }
   );
 });
 export {
-  g as Icon,
-  g as default
+  W as Icon,
+  W as default
 };
 //# sourceMappingURL=icon.js.map

package/dist/components/base/icon/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sources":["../../../../src/components/base/icon/icon.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes } from \"react\";\nimport cn from \"clsx\";\n\nexport type IconColor = \"inherit\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\" | \"disabled\";\n\nexport interface IconProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Icon name from https://fonts.google.com/icons\n   * Пример: name={\"arrow_right_alt\"}\n   */\n  name: string;\n  className?: string;\n  weight?: number;\n  fill?: 0 | 1;\n  /** Pixel number or any CSS length (e.g. \"1.5rem\"). */\n  size?: number | string;\n  grade?: number;\n  /**\n   * Semantic color token; `inherit` (default) keeps the text color.\n   * Any string is accepted for backward compatibility, but only known\n   * {@link IconColor} tokens emit a color class.\n   */\n  color?: IconColor | (string & {});\n  /**\n   * Accessible name. When provided the icon is exposed as\n   * `role=\"img\"`; otherwise it is `aria-hidden` (decorative).\n   */\n  title?: string;\n}\n\nexport const Icon = forwardRef<HTMLSpanElement, IconProps>(function Icon(\n  { className, weight = 400, fill = 0, size = 20, grade = 100, name, color = \"inherit\", title, ...props },\n  ref\n) {\n  const decorative = title === undefined;\n  const colorClass =\n    color && [\"primary\", \"secondary\", \"error\", \"success\", \"warning\", \"info\", \"disabled\"].includes(color)\n      ? `smwb-icon_color-${color}`\n      : null;\n  return (\n    <span\n      {...props}\n      ref={ref}\n      data-testid=\"icon\"\n      role={decorative ? undefined : \"img\"}\n      aria-hidden={decorative ? true : undefined}\n      aria-label={title}\n      title={title}\n      style={{ ...props.style, fontVariationSettings: `'FILL' ${fill}, 'wght' ${weight}, 'GRAD' ${grade}, 'opsz' 48` }}\n      className={cn(\"smwb-icon__wrapper\", colorClass, className)}\n    >\n      <span className=\"material-symbols-outlined\" style={{ fontSize: typeof size === \"number\" ? `${size}px` : size }}>\n        {name}\n      </span>\n    </span>\n  );\n});\n\nexport default Icon;\n"],"names":["Icon","forwardRef","className","weight","fill","size","grade","name","color","title","props","ref","decorative","colorClass","jsx","cn"],"mappings":";;;;AA+BO,MAAMA,IAAOC,EAAuC,SACzD,EAAE,WAAAC,GAAW,QAAAC,IAAS,KAAK,MAAAC,IAAO,GAAG,MAAAC,IAAO,IAAI,OAAAC,IAAQ,KAAK,MAAAC,GAAM,OAAAC,IAAQ,WAAW,OAAAC,GAAO,GAAGC,EAAA,GAChGC,GACA;AACA,QAAMC,IAAaH,MAAU,QACvBI,IACJL,KAAS,CAAC,WAAW,aAAa,SAAS,WAAW,WAAW,QAAQ,UAAU,EAAE,SAASA,CAAK,IAC/F,mBAAmBA,CAAK,KACxB;AACN,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGJ;AAAA,MACJ,KAAAC;AAAA,MACA,eAAY;AAAA,MACZ,MAAMC,IAAa,SAAY;AAAA,MAC/B,eAAaA,IAAa,KAAO;AAAA,MACjC,cAAYH;AAAA,MACZ,OAAAA;AAAA,MACA,OAAO,EAAE,GAAGC,EAAM,OAAO,uBAAuB,UAAUN,CAAI,YAAYD,CAAM,YAAYG,CAAK,cAAA;AAAA,MACjG,WAAWS,EAAG,sBAAsBF,GAAYX,CAAS;AAAA,MAEzD,UAAA,gBAAAY,EAAC,QAAA,EAAK,WAAU,6BAA4B,OAAO,EAAE,UAAU,OAAOT,KAAS,WAAW,GAAGA,CAAI,OAAOA,EAAA,GACrG,UAAAE,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"icon.js","sources":["../../../../src/components/base/icon/icon.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, useSyncExternalStore } from \"react\";\nimport cn from \"clsx\";\nimport { getIcon } from \"../../../icons/registry\";\nimport { getIconConfig } from \"../../../icons/config\";\nimport { subscribeIcons } from \"../../../icons/store\";\nimport type { IconDefinition, IconSource } from \"../../../icons/types\";\nimport { useIconSource } from \"./iconProvider\";\n\nexport type IconColor = \"inherit\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\" | \"disabled\";\n\nconst COLOR_TOKENS = [\"primary\", \"secondary\", \"error\", \"success\", \"warning\", \"info\", \"disabled\"];\n\nconst warned = new Set<string>();\n\nfunction warnMissing(name: string): void {\n  if (!getIconConfig().warnOnMissing || warned.has(name)) return;\n  warned.add(name);\n  // eslint-disable-next-line no-console -- a missing icon is silent otherwise\n  console.warn(\n    `[smwb] Icon \"${name}\" is not registered. Register it (import { ${name} } from \"@smwb/ui-react/icons\") ` +\n      `or use source=\"auto\" to fall back to Material Symbols.`\n  );\n}\n\nexport interface IconProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Icon name — the Google Material Symbols name, e.g. `\"arrow_right_alt\"`.\n   * Lookup is forgiving: `arrowRightAlt` and `arrow-right-alt` resolve too, as\n   * do an icon's aliases.\n   *\n   * An {@link IconDefinition} may be passed instead, which skips the registry\n   * entirely and is the most bundle-friendly form:\n   *\n   * ```tsx\n   * import { arrowRightAlt } from \"@smwb/ui-react/icons\";\n   * <Icon name={arrowRightAlt} />\n   * ```\n   */\n  name: string | IconDefinition;\n  className?: string;\n  /**\n   * Material Symbols weight axis (100-700). For the smwb SVG set it maps to the\n   * stroke width: 400 → 2px, 700 → 3px, 100 → 1px.\n   */\n  weight?: number;\n  /** Material Symbols FILL axis. Not used by the smwb SVG set (it is a contour set). */\n  fill?: 0 | 1;\n  /** Pixel number or any CSS length (e.g. \"1.5rem\"). */\n  size?: number | string;\n  /** Material Symbols GRAD axis. Not used by the smwb SVG set. */\n  grade?: number;\n  /**\n   * Semantic color token; `inherit` (default) keeps the text color.\n   * Any string is accepted for backward compatibility, but only known\n   * {@link IconColor} tokens emit a color class.\n   */\n  color?: IconColor | (string & {});\n  /**\n   * Accessible name. When provided the icon is exposed as\n   * `role=\"img\"`; otherwise it is `aria-hidden` (decorative).\n   */\n  title?: string;\n  /** Overrides the icon source for this icon only. See {@link IconSource}. */\n  source?: IconSource;\n}\n\nexport const Icon = forwardRef<HTMLSpanElement, IconProps>(function Icon(\n  { className, weight = 400, fill = 0, size = 20, grade = 100, name, color = \"inherit\", title, source, ...props },\n  ref\n) {\n  const resolvedSource = useIconSource(source);\n  const lookup = typeof name === \"string\" ? name : null;\n  // Subscribing keeps late registrations (lazy chunks, Storybook HMR) from\n  // leaving a mounted icon blank. getIcon returns the same object for the same\n  // registration, so the snapshot is stable.\n  const getSnapshot = () => (lookup === null ? null : (getIcon(lookup) ?? null));\n  const registered = useSyncExternalStore(subscribeIcons, getSnapshot, getSnapshot);\n  const definition = typeof name === \"object\" ? name : registered;\n  const glyph = typeof name === \"string\" ? name : name.name;\n\n  const mode =\n    resolvedSource === \"google\" ? \"google\" : definition ? \"smwb\" : resolvedSource === \"smwb\" ? \"missing\" : \"google\";\n  if (mode === \"missing\") warnMissing(glyph);\n\n  const decorative = title === undefined;\n  const colorClass = color && COLOR_TOKENS.includes(color) ? `smwb-icon_color-${color}` : null;\n  const cssSize = typeof size === \"number\" ? `${size}px` : size;\n  const strokeWidth = Math.round(Math.min(3, Math.max(1, weight / 200)) * 100) / 100;\n\n  return (\n    <span\n      {...props}\n      ref={ref}\n      data-testid=\"icon\"\n      data-icon-source={mode}\n      role={decorative ? undefined : \"img\"}\n      aria-hidden={decorative ? true : undefined}\n      aria-label={title}\n      title={title}\n      style={{\n        ...props.style,\n        ...(mode === \"google\"\n          ? { fontVariationSettings: `'FILL' ${fill}, 'wght' ${weight}, 'GRAD' ${grade}, 'opsz' 48` }\n          : null),\n      }}\n      className={cn(\"smwb-icon__wrapper\", colorClass, className)}\n    >\n      {mode === \"google\" ? (\n        <span className=\"material-symbols-outlined\" style={{ fontSize: cssSize }}>\n          {glyph}\n        </span>\n      ) : (\n        <svg\n          className=\"smwb-icon__svg\"\n          viewBox={definition?.viewBox ?? \"0 0 24 24\"}\n          style={{ width: cssSize, height: cssSize }}\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth={strokeWidth}\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          aria-hidden=\"true\"\n          dangerouslySetInnerHTML={{ __html: definition?.body ?? \"\" }}\n        />\n      )}\n    </span>\n  );\n});\n\nexport default Icon;\n"],"names":["COLOR_TOKENS","warned","warnMissing","name","getIconConfig","Icon","forwardRef","className","weight","fill","size","grade","color","title","source","props","ref","resolvedSource","useIconSource","lookup","getSnapshot","_a","getIcon","registered","useSyncExternalStore","subscribeIcons","definition","glyph","mode","decorative","colorClass","cssSize","strokeWidth","jsx","cn","_b"],"mappings":";;;;;;;;AAWA,MAAMA,IAAe,CAAC,WAAW,aAAa,SAAS,WAAW,WAAW,QAAQ,UAAU,GAEzFC,wBAAa,IAAA;AAEnB,SAASC,EAAYC,GAAoB;AACvC,EAAI,CAACC,EAAA,EAAgB,iBAAiBH,EAAO,IAAIE,CAAI,MACrDF,EAAO,IAAIE,CAAI,GAEf,QAAQ;AAAA,IACN,gBAAgBA,CAAI,8CAA8CA,CAAI;AAAA,EAAA;AAG1E;AA4CO,MAAME,IAAOC,EAAuC,SACzD,EAAE,WAAAC,GAAW,QAAAC,IAAS,KAAK,MAAAC,IAAO,GAAG,MAAAC,IAAO,IAAI,OAAAC,IAAQ,KAAK,MAAAR,GAAM,OAAAS,IAAQ,WAAW,OAAAC,GAAO,QAAAC,GAAQ,GAAGC,EAAA,GACxGC,GACA;;AACA,QAAMC,IAAiBC,EAAcJ,CAAM,GACrCK,IAAS,OAAOhB,KAAS,WAAWA,IAAO,MAI3CiB,IAAc,MAAA;;AAAO,WAAAD,MAAW,OAAO,QAAQE,IAAAC,EAAQH,CAAM,MAAd,OAAAE,IAAmB;AAAA,KAClEE,IAAaC,EAAqBC,GAAgBL,GAAaA,CAAW,GAC1EM,IAAa,OAAOvB,KAAS,WAAWA,IAAOoB,GAC/CI,IAAQ,OAAOxB,KAAS,WAAWA,IAAOA,EAAK,MAE/CyB,IACJX,MAAmB,WAAW,WAAWS,IAAa,SAAST,MAAmB,SAAS,YAAY;AACzG,EAAIW,MAAS,aAAW1B,EAAYyB,CAAK;AAEzC,QAAME,IAAahB,MAAU,QACvBiB,IAAalB,KAASZ,EAAa,SAASY,CAAK,IAAI,mBAAmBA,CAAK,KAAK,MAClFmB,IAAU,OAAOrB,KAAS,WAAW,GAAGA,CAAI,OAAOA,GACnDsB,IAAc,KAAK,MAAM,KAAK,IAAI,GAAG,KAAK,IAAI,GAAGxB,IAAS,GAAG,CAAC,IAAI,GAAG,IAAI;AAE/E,SACE,gBAAAyB;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGlB;AAAA,MACJ,KAAAC;AAAA,MACA,eAAY;AAAA,MACZ,oBAAkBY;AAAA,MAClB,MAAMC,IAAa,SAAY;AAAA,MAC/B,eAAaA,IAAa,KAAO;AAAA,MACjC,cAAYhB;AAAA,MACZ,OAAAA;AAAA,MACA,OAAO;AAAA,QACL,GAAGE,EAAM;AAAA,QACT,GAAIa,MAAS,WACT,EAAE,uBAAuB,UAAUnB,CAAI,YAAYD,CAAM,YAAYG,CAAK,cAAA,IAC1E;AAAA,MAAA;AAAA,MAEN,WAAWuB,EAAG,sBAAsBJ,GAAYvB,CAAS;AAAA,MAExD,UAAAqB,MAAS,WACR,gBAAAK,EAAC,QAAA,EAAK,WAAU,6BAA4B,OAAO,EAAE,UAAUF,EAAA,GAC5D,UAAAJ,EAAA,CACH,IAEA,gBAAAM;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,UAASZ,IAAAK,KAAA,gBAAAA,EAAY,YAAZ,OAAAL,IAAuB;AAAA,UAChC,OAAO,EAAE,OAAOU,GAAS,QAAQA,EAAA;AAAA,UACjC,MAAK;AAAA,UACL,QAAO;AAAA,UACP,aAAAC;AAAA,UACA,eAAc;AAAA,UACd,gBAAe;AAAA,UACf,eAAY;AAAA,UACZ,yBAAyB,EAAE,SAAQG,IAAAT,KAAA,gBAAAA,EAAY,SAAZ,OAAAS,IAAoB,GAAA;AAAA,QAAG;AAAA,MAAA;AAAA,IAC5D;AAAA,EAAA;AAIR,CAAC;"}

package/dist/components/base/icon/iconProvider.d.ts

@@ -0,0 +1,39 @@
+import { type ReactNode } from "react";
+import { type IconInput } from "../../../icons/registry";
+import type { IconSource } from "../../../icons/types";
+export interface IconContextValue {
+    /** Icon artwork for this subtree. Falls back to {@link configureIcons}. */
+    source?: IconSource;
+}
+export declare const IconContext: import("react").Context<IconContextValue | null>;
+export interface IconProviderProps extends IconContextValue {
+    /**
+     * Icons to make available to `<Icon name="...">` inside this subtree.
+     *
+     * ```tsx
+     * import { add, close, search } from "@smwb/ui-react/icons";
+     *
+     * <IconProvider source="smwb" icons={[add, close, search]}>
+     *   <App />
+     * </IconProvider>
+     * ```
+     *
+     * Registration is process-wide (the registry is a module singleton), so the
+     * prop is a convenience for apps that would otherwise call `registerIcons`
+     * at startup — not a scoping mechanism.
+     */
+    icons?: IconInput;
+    children?: ReactNode;
+}
+/**
+ * Sets the icon source — and optionally registers icons — for a subtree.
+ * `<Icon source>` still wins over the provider, and the provider wins over the
+ * app-wide {@link configureIcons} default.
+ */
+export declare function IconProvider({ source, icons, children }: IconProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Resolves the icon source the way `<Icon>` does: explicit prop, then the
+ * nearest {@link IconProvider}, then the app-wide config (`"auto"` by default).
+ */
+export declare function useIconSource(override?: IconSource): IconSource;
+export default IconProvider;

package/dist/components/base/icon/iconProvider.js

@@ -0,0 +1,25 @@
+import { jsx as s } from "react/jsx-runtime";
+import { createContext as f, useMemo as e, useContext as m, useSyncExternalStore as i } from "react";
+import { registerIcons as g } from "../../../icons/registry.js";
+import { getIconConfig as p } from "../../../icons/config.js";
+import { subscribeIcons as I } from "../../../icons/store.js";
+const u = f(null);
+function b({ source: t, icons: o, children: r }) {
+  e(() => {
+    o && g(o);
+  }, [o]);
+  const n = e(() => ({ source: t }), [t]);
+  return /* @__PURE__ */ s(u.Provider, { value: n, children: r });
+}
+const c = () => p().source;
+function P(t) {
+  var n;
+  const o = m(u), r = i(I, c, c);
+  return (n = t != null ? t : o == null ? void 0 : o.source) != null ? n : r;
+}
+export {
+  u as IconContext,
+  b as IconProvider,
+  P as useIconSource
+};
+//# sourceMappingURL=iconProvider.js.map

package/dist/components/base/icon/iconProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"iconProvider.js","sources":["../../../../src/components/base/icon/iconProvider.tsx"],"sourcesContent":["import { createContext, useContext, useMemo, useSyncExternalStore, type ReactNode } from \"react\";\nimport { registerIcons, type IconInput } from \"../../../icons/registry\";\nimport { getIconConfig } from \"../../../icons/config\";\nimport { subscribeIcons } from \"../../../icons/store\";\nimport type { IconSource } from \"../../../icons/types\";\n\nexport interface IconContextValue {\n  /** Icon artwork for this subtree. Falls back to {@link configureIcons}. */\n  source?: IconSource;\n}\n\nexport const IconContext = createContext<IconContextValue | null>(null);\n\nexport interface IconProviderProps extends IconContextValue {\n  /**\n   * Icons to make available to `<Icon name=\"...\">` inside this subtree.\n   *\n   * ```tsx\n   * import { add, close, search } from \"@smwb/ui-react/icons\";\n   *\n   * <IconProvider source=\"smwb\" icons={[add, close, search]}>\n   *   <App />\n   * </IconProvider>\n   * ```\n   *\n   * Registration is process-wide (the registry is a module singleton), so the\n   * prop is a convenience for apps that would otherwise call `registerIcons`\n   * at startup — not a scoping mechanism.\n   */\n  icons?: IconInput;\n  children?: ReactNode;\n}\n\n/**\n * Sets the icon source — and optionally registers icons — for a subtree.\n * `<Icon source>` still wins over the provider, and the provider wins over the\n * app-wide {@link configureIcons} default.\n */\nexport function IconProvider({ source, icons, children }: IconProviderProps) {\n  // Icons have to be in the registry before the subtree's first paint, so this\n  // cannot wait for an effect. registerIcons is idempotent, which keeps it safe\n  // under StrictMode's double render.\n  useMemo(() => {\n    if (icons) registerIcons(icons);\n  }, [icons]);\n\n  const value = useMemo<IconContextValue>(() => ({ source }), [source]);\n  return <IconContext.Provider value={value}>{children}</IconContext.Provider>;\n}\n\nconst getConfiguredSource = (): IconSource => getIconConfig().source;\n\n/**\n * Resolves the icon source the way `<Icon>` does: explicit prop, then the\n * nearest {@link IconProvider}, then the app-wide config (`\"auto\"` by default).\n */\nexport function useIconSource(override?: IconSource): IconSource {\n  const context = useContext(IconContext);\n  const configured = useSyncExternalStore(subscribeIcons, getConfiguredSource, getConfiguredSource);\n  return override ?? context?.source ?? configured;\n}\n\nexport default IconProvider;\n"],"names":["IconContext","createContext","IconProvider","source","icons","children","useMemo","value","jsx","getConfiguredSource","getIconConfig","useIconSource","override","context","useContext","configured","useSyncExternalStore","subscribeIcons","_a"],"mappings":";;;;;AAWO,MAAMA,IAAcC,EAAuC,IAAI;AA2B/D,SAASC,EAAa,EAAE,QAAAC,GAAQ,OAAAC,GAAO,UAAAC,KAA+B;AAI3E,EAAAC,EAAQ,MAAM;AACZ,IAAIF,OAAqBA,CAAK;AAAA,EAChC,GAAG,CAACA,CAAK,CAAC;AAEV,QAAMG,IAAQD,EAA0B,OAAO,EAAE,QAAAH,MAAW,CAACA,CAAM,CAAC;AACpE,SAAO,gBAAAK,EAACR,EAAY,UAAZ,EAAqB,OAAAO,GAAe,UAAAF,EAAA,CAAS;AACvD;AAEA,MAAMI,IAAsB,MAAkBC,EAAA,EAAgB;AAMvD,SAASC,EAAcC,GAAmC;;AAC/D,QAAMC,IAAUC,EAAWd,CAAW,GAChCe,IAAaC,EAAqBC,GAAgBR,GAAqBA,CAAmB;AAChG,UAAOS,IAAAN,KAAA,OAAAA,IAAYC,KAAA,gBAAAA,EAAS,WAArB,OAAAK,IAA+BH;AACxC;"}

package/dist/components/base/icon/index.d.ts

@@ -1,2 +1,4 @@
 export { default as Icon } from "./icon";
 export type { IconProps, IconColor } from "./icon";
+export { IconProvider, IconContext, useIconSource } from "./iconProvider";
+export type { IconProviderProps, IconContextValue } from "./iconProvider";

package/dist/config-BZIXwGpc.js

@@ -0,0 +1,2 @@
+"use strict";const u=new Set;let a=0;function y(n){return u.add(n),()=>{u.delete(n)}}function m(){return a}function c(){a+=1;for(const n of[...u])n()}const t=new Map,f=n=>typeof n=="object"&&n!==null&&typeof n.name=="string"&&typeof n.body=="string";function i(n){return n.trim().replace(/([a-z0-9])([A-Z])/g,"$1_$2").replace(/[\s.-]+/g,"_").toLowerCase()}function p(n){return f(n)?[n]:Array.isArray(n)?n.filter(f):typeof n=="object"&&n!==null?Object.values(n).filter(f):[]}function b(n){var o;const e=p(n);if(e.length!==0){for(const r of e){t.set(i(r.name),r);for(const I of(o=r.aliases)!=null?o:[])t.set(i(I),r)}c()}}function d(n){const e=typeof n=="string"?[n]:n;let o=!1;for(const r of e)o=t.delete(i(r))||o;o&&c()}function w(){t.size!==0&&(t.clear(),c())}function h(n){return t.get(i(n))}function C(n){return t.has(i(n))}function z(){return[...new Set([...t.values()].map(n=>n.name))].sort()}const g={source:"auto",warnOnMissing:!0};let s={...g};function l(n){const e={...s,...n};e.source===s.source&&e.warnOnMissing===s.warnOnMissing||(s=e,c())}function A(){return s}function M(){l(g)}exports.clearIcons=w;exports.configureIcons=l;exports.getIcon=h;exports.getIconConfig=A;exports.getIconVersion=m;exports.hasIcon=C;exports.listIcons=z;exports.normalizeIconName=i;exports.registerIcons=b;exports.resetIconConfig=M;exports.subscribeIcons=y;exports.unregisterIcons=d;
+//# sourceMappingURL=config-BZIXwGpc.js.map

package/dist/config-BZIXwGpc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config-BZIXwGpc.js","sources":["../src/icons/store.ts","../src/icons/registry.ts","../src/icons/config.ts"],"sourcesContent":["// Minimal observable shared by the icon registry and the icon config. Icons are\n// usually registered before the first render, but lazy chunks\n// (`import(\"...\").then(registerIcons)`) and Storybook HMR register late — this\n// lets mounted <Icon>s pick that up instead of staying blank.\n\ntype Listener = () => void;\n\nconst listeners = new Set<Listener>();\nlet version = 0;\n\n/** Subscribes to registry/config changes. Returns an unsubscribe function. */\nexport function subscribeIcons(listener: Listener): () => void {\n  listeners.add(listener);\n  return () => {\n    listeners.delete(listener);\n  };\n}\n\n/** Monotonic counter bumped on every registry or config change. */\nexport function getIconVersion(): number {\n  return version;\n}\n\nexport function notifyIconChange(): void {\n  version += 1;\n  for (const listener of [...listeners]) listener();\n}\n","import type { IconDefinition } from \"./types\";\nimport { notifyIconChange } from \"./store\";\n\n/**\n * Accepted by {@link registerIcons}: one icon, a list, or any object whose\n * values are icons — including a namespace import\n * (`import * as icons from \"@smwb/ui-react/icons\"`).\n */\nexport type IconInput = IconDefinition | readonly IconDefinition[] | Readonly<Record<string, unknown>>;\n\nconst registry = new Map<string, IconDefinition>();\n\nconst isDefinition = (value: unknown): value is IconDefinition =>\n  typeof value === \"object\" &&\n  value !== null &&\n  typeof (value as IconDefinition).name === \"string\" &&\n  typeof (value as IconDefinition).body === \"string\";\n\n/**\n * Makes lookups forgiving: `arrowRightAlt`, `arrow-right-alt`, `Arrow Right Alt`\n * and `arrow_right_alt` all resolve to the same icon, so a codebase can keep the\n * naming convention it already uses.\n */\nexport function normalizeIconName(name: string): string {\n  return name\n    .trim()\n    .replace(/([a-z0-9])([A-Z])/g, \"$1_$2\")\n    .replace(/[\\s.-]+/g, \"_\")\n    .toLowerCase();\n}\n\nfunction toDefinitions(icons: IconInput): IconDefinition[] {\n  if (isDefinition(icons)) return [icons];\n  if (Array.isArray(icons)) return icons.filter(isDefinition);\n  if (typeof icons === \"object\" && icons !== null) return Object.values(icons).filter(isDefinition);\n  return [];\n}\n\n/**\n * Adds icons to the global registry, keyed by name and by every alias.\n * Registering a name twice wins for the later call, which is how an app\n * overrides a shipped icon with its own artwork.\n */\nexport function registerIcons(icons: IconInput): void {\n  const definitions = toDefinitions(icons);\n  if (definitions.length === 0) return;\n  for (const icon of definitions) {\n    registry.set(normalizeIconName(icon.name), icon);\n    for (const alias of icon.aliases ?? []) registry.set(normalizeIconName(alias), icon);\n  }\n  notifyIconChange();\n}\n\n/** Removes icons by name or alias. */\nexport function unregisterIcons(names: string | readonly string[]): void {\n  const list = typeof names === \"string\" ? [names] : names;\n  let changed = false;\n  for (const name of list) changed = registry.delete(normalizeIconName(name)) || changed;\n  if (changed) notifyIconChange();\n}\n\n/** Empties the registry — mostly useful between tests. */\nexport function clearIcons(): void {\n  if (registry.size === 0) return;\n  registry.clear();\n  notifyIconChange();\n}\n\n/** Resolves a name or alias to its icon, or `undefined` when unregistered. */\nexport function getIcon(name: string): IconDefinition | undefined {\n  return registry.get(normalizeIconName(name));\n}\n\nexport function hasIcon(name: string): boolean {\n  return registry.has(normalizeIconName(name));\n}\n\n/** Canonical names of every registered icon, sorted; aliases are not repeated. */\nexport function listIcons(): string[] {\n  return [...new Set([...registry.values()].map((icon) => icon.name))].sort();\n}\n","import type { IconSource } from \"./types\";\nimport { notifyIconChange } from \"./store\";\n\nexport interface IconConfig {\n  /** Artwork used by every `<Icon>` that does not override it. Default `\"auto\"`. */\n  source: IconSource;\n  /**\n   * Warn (once per name, dev only) when `source: \"smwb\"` cannot resolve a name.\n   * Default `true`.\n   */\n  warnOnMissing: boolean;\n}\n\nconst DEFAULTS: IconConfig = { source: \"auto\", warnOnMissing: true };\n\nlet config: IconConfig = { ...DEFAULTS };\n\n/**\n * Sets the app-wide icon defaults. Call it once at startup — `<IconProvider>`\n * overrides it for a subtree, and the `source` prop overrides both.\n */\nexport function configureIcons(next: Partial<IconConfig>): void {\n  const merged = { ...config, ...next };\n  if (merged.source === config.source && merged.warnOnMissing === config.warnOnMissing) return;\n  config = merged;\n  notifyIconChange();\n}\n\nexport function getIconConfig(): Readonly<IconConfig> {\n  return config;\n}\n\n/** Restores the shipped defaults — mostly useful between tests. */\nexport function resetIconConfig(): void {\n  configureIcons(DEFAULTS);\n}\n"],"names":["listeners","version","subscribeIcons","listener","getIconVersion","notifyIconChange","registry","isDefinition","value","normalizeIconName","name","toDefinitions","icons","registerIcons","definitions","icon","alias","_a","unregisterIcons","names","list","changed","clearIcons","getIcon","hasIcon","listIcons","DEFAULTS","config","configureIcons","next","merged","getIconConfig","resetIconConfig"],"mappings":"aAOA,MAAMA,MAAgB,IACtB,IAAIC,EAAU,EAGP,SAASC,EAAeC,EAAgC,CAC7D,OAAAH,EAAU,IAAIG,CAAQ,EACf,IAAM,CACXH,EAAU,OAAOG,CAAQ,CAC3B,CACF,CAGO,SAASC,GAAyB,CACvC,OAAOH,CACT,CAEO,SAASI,GAAyB,CACvCJ,GAAW,EACX,UAAWE,IAAY,CAAC,GAAGH,CAAS,EAAGG,EAAA,CACzC,CChBA,MAAMG,MAAe,IAEfC,EAAgBC,GACpB,OAAOA,GAAU,UACjBA,IAAU,MACV,OAAQA,EAAyB,MAAS,UAC1C,OAAQA,EAAyB,MAAS,SAOrC,SAASC,EAAkBC,EAAsB,CACtD,OAAOA,EACJ,OACA,QAAQ,qBAAsB,OAAO,EACrC,QAAQ,WAAY,GAAG,EACvB,YAAA,CACL,CAEA,SAASC,EAAcC,EAAoC,CACzD,OAAIL,EAAaK,CAAK,EAAU,CAACA,CAAK,EAClC,MAAM,QAAQA,CAAK,EAAUA,EAAM,OAAOL,CAAY,EACtD,OAAOK,GAAU,UAAYA,IAAU,KAAa,OAAO,OAAOA,CAAK,EAAE,OAAOL,CAAY,EACzF,CAAA,CACT,CAOO,SAASM,EAAcD,EAAwB,OACpD,MAAME,EAAcH,EAAcC,CAAK,EACvC,GAAIE,EAAY,SAAW,EAC3B,WAAWC,KAAQD,EAAa,CAC9BR,EAAS,IAAIG,EAAkBM,EAAK,IAAI,EAAGA,CAAI,EAC/C,UAAWC,KAASC,EAAAF,EAAK,UAAL,KAAAE,EAAgB,CAAA,IAAa,IAAIR,EAAkBO,CAAK,EAAGD,CAAI,CACrF,CACAV,EAAA,EACF,CAGO,SAASa,EAAgBC,EAAyC,CACvE,MAAMC,EAAO,OAAOD,GAAU,SAAW,CAACA,CAAK,EAAIA,EACnD,IAAIE,EAAU,GACd,UAAWX,KAAQU,EAAMC,EAAUf,EAAS,OAAOG,EAAkBC,CAAI,CAAC,GAAKW,EAC3EA,GAAShB,EAAA,CACf,CAGO,SAASiB,GAAmB,CAC7BhB,EAAS,OAAS,IACtBA,EAAS,MAAA,EACTD,EAAA,EACF,CAGO,SAASkB,EAAQb,EAA0C,CAChE,OAAOJ,EAAS,IAAIG,EAAkBC,CAAI,CAAC,CAC7C,CAEO,SAASc,EAAQd,EAAuB,CAC7C,OAAOJ,EAAS,IAAIG,EAAkBC,CAAI,CAAC,CAC7C,CAGO,SAASe,GAAsB,CACpC,MAAO,CAAC,GAAG,IAAI,IAAI,CAAC,GAAGnB,EAAS,OAAA,CAAQ,EAAE,IAAKS,GAASA,EAAK,IAAI,CAAC,CAAC,EAAE,KAAA,CACvE,CCnEA,MAAMW,EAAuB,CAAE,OAAQ,OAAQ,cAAe,EAAA,EAE9D,IAAIC,EAAqB,CAAE,GAAGD,CAAA,EAMvB,SAASE,EAAeC,EAAiC,CAC9D,MAAMC,EAAS,CAAE,GAAGH,EAAQ,GAAGE,CAAA,EAC3BC,EAAO,SAAWH,EAAO,QAAUG,EAAO,gBAAkBH,EAAO,gBACvEA,EAASG,EACTzB,EAAA,EACF,CAEO,SAAS0B,GAAsC,CACpD,OAAOJ,CACT,CAGO,SAASK,GAAwB,CACtCJ,EAAeF,CAAQ,CACzB"}

package/dist/connects/rt/table/draggableHeader.d.ts

@@ -10,4 +10,4 @@ export declare function DraggableColumnHeader<T>({ header, table, children, onCo
 export type DraggableColumnHeaderWrapperProps<T> = DraggableColumnHeaderProps<T> & {
     draggableColumn?: boolean | null;
 };
-export declare function DraggableColumnHeaderWrapper<T>({ onColumnOrderChange, header, table, children, draggableColumn, }: DraggableColumnHeaderWrapperProps<T>): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null | undefined;
+export declare function DraggableColumnHeaderWrapper<T>({ onColumnOrderChange, header, table, children, draggableColumn, }: DraggableColumnHeaderWrapperProps<T>): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;

package/dist/headless/components/base/icon/icon.js

@@ -1,26 +1,60 @@
-import { jsx as i } from "react/jsx-runtime";
-import { forwardRef as p } from "react";
-import u from "clsx";
-const $ = p(function({ className: s, weight: t = 400, fill: c = 0, size: o = 20, grade: d = 100, name: l, color: n = "inherit", title: r, ...a }, m) {
-  const e = r === void 0, f = n && ["primary", "secondary", "error", "success", "warning", "info", "disabled"].includes(n) ? `smwb-icon_color-${n}` : null;
-  return /* @__PURE__ */ i(
+import { jsx as l } from "react/jsx-runtime";
+import { forwardRef as L, useSyncExternalStore as C } from "react";
+import N from "clsx";
+import { getIcon as O } from "../../../icons/registry.js";
+import { getIconConfig as R } from "../../../icons/config.js";
+import { subscribeIcons as j } from "../../../icons/store.js";
+import { useIconSource as B } from "./iconProvider.js";
+const E = ["primary", "secondary", "error", "success", "warning", "info", "disabled"], y = /* @__PURE__ */ new Set();
+function T(r) {
+  !R().warnOnMissing || y.has(r) || (y.add(r), console.warn(
+    `[smwb] Icon "${r}" is not registered. Register it (import { ${r} } from "@smwb/ui-react/icons") or use source="auto" to fall back to Material Symbols.`
+  ));
+}
+const V = L(function({ className: S, weight: a = 400, fill: v = 0, size: n = 20, grade: I = 100, name: o, color: e = "inherit", title: i, source: _, ...u }, x) {
+  var w, b;
+  const d = B(_), g = typeof o == "string" ? o : null, m = () => {
+    var h;
+    return g === null ? null : (h = O(g)) != null ? h : null;
+  }, M = C(j, m, m), s = typeof o == "object" ? o : M, f = typeof o == "string" ? o : o.name, t = d === "google" ? "google" : s ? "smwb" : d === "smwb" ? "missing" : "google";
+  t === "missing" && T(f);
+  const p = i === void 0, $ = e && E.includes(e) ? `smwb-icon_color-${e}` : null, c = typeof n == "number" ? `${n}px` : n, k = Math.round(Math.min(3, Math.max(1, a / 200)) * 100) / 100;
+  return /* @__PURE__ */ l(
     "span",
     {
-      ...a,
-      ref: m,
+      ...u,
+      ref: x,
       "data-testid": "icon",
-      role: e ? void 0 : "img",
-      "aria-hidden": e ? !0 : void 0,
-      "aria-label": r,
-      title: r,
-      style: { ...a.style, fontVariationSettings: `'FILL' ${c}, 'wght' ${t}, 'GRAD' ${d}, 'opsz' 48` },
-      className: u("smwb-icon__wrapper", f, s),
-      children: /* @__PURE__ */ i("span", { className: "material-symbols-outlined", style: { fontSize: typeof o == "number" ? `${o}px` : o }, children: l })
+      "data-icon-source": t,
+      role: p ? void 0 : "img",
+      "aria-hidden": p ? !0 : void 0,
+      "aria-label": i,
+      title: i,
+      style: {
+        ...u.style,
+        ...t === "google" ? { fontVariationSettings: `'FILL' ${v}, 'wght' ${a}, 'GRAD' ${I}, 'opsz' 48` } : null
+      },
+      className: N("smwb-icon__wrapper", $, S),
+      children: t === "google" ? /* @__PURE__ */ l("span", { className: "material-symbols-outlined", style: { fontSize: c }, children: f }) : /* @__PURE__ */ l(
+        "svg",
+        {
+          className: "smwb-icon__svg",
+          viewBox: (w = s == null ? void 0 : s.viewBox) != null ? w : "0 0 24 24",
+          style: { width: c, height: c },
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: k,
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          "aria-hidden": "true",
+          dangerouslySetInnerHTML: { __html: (b = s == null ? void 0 : s.body) != null ? b : "" }
+        }
+      )
     }
   );
 });
 export {
-  $ as Icon,
-  $ as default
+  V as Icon,
+  V as default
 };
 //# sourceMappingURL=icon.js.map

package/dist/headless/components/base/icon/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sources":["../../../../../src/components/base/icon/icon.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes } from \"react\";\nimport cn from \"clsx\";\n\nexport type IconColor = \"inherit\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\" | \"disabled\";\n\nexport interface IconProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Icon name from https://fonts.google.com/icons\n   * Пример: name={\"arrow_right_alt\"}\n   */\n  name: string;\n  className?: string;\n  weight?: number;\n  fill?: 0 | 1;\n  /** Pixel number or any CSS length (e.g. \"1.5rem\"). */\n  size?: number | string;\n  grade?: number;\n  /**\n   * Semantic color token; `inherit` (default) keeps the text color.\n   * Any string is accepted for backward compatibility, but only known\n   * {@link IconColor} tokens emit a color class.\n   */\n  color?: IconColor | (string & {});\n  /**\n   * Accessible name. When provided the icon is exposed as\n   * `role=\"img\"`; otherwise it is `aria-hidden` (decorative).\n   */\n  title?: string;\n}\n\nexport const Icon = forwardRef<HTMLSpanElement, IconProps>(function Icon(\n  { className, weight = 400, fill = 0, size = 20, grade = 100, name, color = \"inherit\", title, ...props },\n  ref\n) {\n  const decorative = title === undefined;\n  const colorClass =\n    color && [\"primary\", \"secondary\", \"error\", \"success\", \"warning\", \"info\", \"disabled\"].includes(color)\n      ? `smwb-icon_color-${color}`\n      : null;\n  return (\n    <span\n      {...props}\n      ref={ref}\n      data-testid=\"icon\"\n      role={decorative ? undefined : \"img\"}\n      aria-hidden={decorative ? true : undefined}\n      aria-label={title}\n      title={title}\n      style={{ ...props.style, fontVariationSettings: `'FILL' ${fill}, 'wght' ${weight}, 'GRAD' ${grade}, 'opsz' 48` }}\n      className={cn(\"smwb-icon__wrapper\", colorClass, className)}\n    >\n      <span className=\"material-symbols-outlined\" style={{ fontSize: typeof size === \"number\" ? `${size}px` : size }}>\n        {name}\n      </span>\n    </span>\n  );\n});\n\nexport default Icon;\n"],"names":["Icon","forwardRef","className","weight","fill","size","grade","name","color","title","props","ref","decorative","colorClass","jsx","cn"],"mappings":";;;AA8BO,MAAMA,IAAOC,EAAuC,SACzD,EAAE,WAAAC,GAAW,QAAAC,IAAS,KAAK,MAAAC,IAAO,GAAG,MAAAC,IAAO,IAAI,OAAAC,IAAQ,KAAK,MAAAC,GAAM,OAAAC,IAAQ,WAAW,OAAAC,GAAO,GAAGC,EAAA,GAChGC,GACA;AACA,QAAMC,IAAaH,MAAU,QACvBI,IACJL,KAAS,CAAC,WAAW,aAAa,SAAS,WAAW,WAAW,QAAQ,UAAU,EAAE,SAASA,CAAK,IAC/F,mBAAmBA,CAAK,KACxB;AACN,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGJ;AAAA,MACJ,KAAAC;AAAA,MACA,eAAY;AAAA,MACZ,MAAMC,IAAa,SAAY;AAAA,MAC/B,eAAaA,IAAa,KAAO;AAAA,MACjC,cAAYH;AAAA,MACZ,OAAAA;AAAA,MACA,OAAO,EAAE,GAAGC,EAAM,OAAO,uBAAuB,UAAUN,CAAI,YAAYD,CAAM,YAAYG,CAAK,cAAA;AAAA,MACjG,WAAWS,EAAG,sBAAsBF,GAAYX,CAAS;AAAA,MAEzD,UAAA,gBAAAY,EAAC,QAAA,EAAK,WAAU,6BAA4B,OAAO,EAAE,UAAU,OAAOT,KAAS,WAAW,GAAGA,CAAI,OAAOA,EAAA,GACrG,UAAAE,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"icon.js","sources":["../../../../../src/components/base/icon/icon.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, useSyncExternalStore } from \"react\";\nimport cn from \"clsx\";\nimport { getIcon } from \"../../../icons/registry\";\nimport { getIconConfig } from \"../../../icons/config\";\nimport { subscribeIcons } from \"../../../icons/store\";\nimport type { IconDefinition, IconSource } from \"../../../icons/types\";\nimport { useIconSource } from \"./iconProvider\";\n\nexport type IconColor = \"inherit\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\" | \"disabled\";\n\nconst COLOR_TOKENS = [\"primary\", \"secondary\", \"error\", \"success\", \"warning\", \"info\", \"disabled\"];\n\nconst warned = new Set<string>();\n\nfunction warnMissing(name: string): void {\n  if (!getIconConfig().warnOnMissing || warned.has(name)) return;\n  warned.add(name);\n  // eslint-disable-next-line no-console -- a missing icon is silent otherwise\n  console.warn(\n    `[smwb] Icon \"${name}\" is not registered. Register it (import { ${name} } from \"@smwb/ui-react/icons\") ` +\n      `or use source=\"auto\" to fall back to Material Symbols.`\n  );\n}\n\nexport interface IconProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Icon name — the Google Material Symbols name, e.g. `\"arrow_right_alt\"`.\n   * Lookup is forgiving: `arrowRightAlt` and `arrow-right-alt` resolve too, as\n   * do an icon's aliases.\n   *\n   * An {@link IconDefinition} may be passed instead, which skips the registry\n   * entirely and is the most bundle-friendly form:\n   *\n   * ```tsx\n   * import { arrowRightAlt } from \"@smwb/ui-react/icons\";\n   * <Icon name={arrowRightAlt} />\n   * ```\n   */\n  name: string | IconDefinition;\n  className?: string;\n  /**\n   * Material Symbols weight axis (100-700). For the smwb SVG set it maps to the\n   * stroke width: 400 → 2px, 700 → 3px, 100 → 1px.\n   */\n  weight?: number;\n  /** Material Symbols FILL axis. Not used by the smwb SVG set (it is a contour set). */\n  fill?: 0 | 1;\n  /** Pixel number or any CSS length (e.g. \"1.5rem\"). */\n  size?: number | string;\n  /** Material Symbols GRAD axis. Not used by the smwb SVG set. */\n  grade?: number;\n  /**\n   * Semantic color token; `inherit` (default) keeps the text color.\n   * Any string is accepted for backward compatibility, but only known\n   * {@link IconColor} tokens emit a color class.\n   */\n  color?: IconColor | (string & {});\n  /**\n   * Accessible name. When provided the icon is exposed as\n   * `role=\"img\"`; otherwise it is `aria-hidden` (decorative).\n   */\n  title?: string;\n  /** Overrides the icon source for this icon only. See {@link IconSource}. */\n  source?: IconSource;\n}\n\nexport const Icon = forwardRef<HTMLSpanElement, IconProps>(function Icon(\n  { className, weight = 400, fill = 0, size = 20, grade = 100, name, color = \"inherit\", title, source, ...props },\n  ref\n) {\n  const resolvedSource = useIconSource(source);\n  const lookup = typeof name === \"string\" ? name : null;\n  // Subscribing keeps late registrations (lazy chunks, Storybook HMR) from\n  // leaving a mounted icon blank. getIcon returns the same object for the same\n  // registration, so the snapshot is stable.\n  const getSnapshot = () => (lookup === null ? null : (getIcon(lookup) ?? null));\n  const registered = useSyncExternalStore(subscribeIcons, getSnapshot, getSnapshot);\n  const definition = typeof name === \"object\" ? name : registered;\n  const glyph = typeof name === \"string\" ? name : name.name;\n\n  const mode =\n    resolvedSource === \"google\" ? \"google\" : definition ? \"smwb\" : resolvedSource === \"smwb\" ? \"missing\" : \"google\";\n  if (mode === \"missing\") warnMissing(glyph);\n\n  const decorative = title === undefined;\n  const colorClass = color && COLOR_TOKENS.includes(color) ? `smwb-icon_color-${color}` : null;\n  const cssSize = typeof size === \"number\" ? `${size}px` : size;\n  const strokeWidth = Math.round(Math.min(3, Math.max(1, weight / 200)) * 100) / 100;\n\n  return (\n    <span\n      {...props}\n      ref={ref}\n      data-testid=\"icon\"\n      data-icon-source={mode}\n      role={decorative ? undefined : \"img\"}\n      aria-hidden={decorative ? true : undefined}\n      aria-label={title}\n      title={title}\n      style={{\n        ...props.style,\n        ...(mode === \"google\"\n          ? { fontVariationSettings: `'FILL' ${fill}, 'wght' ${weight}, 'GRAD' ${grade}, 'opsz' 48` }\n          : null),\n      }}\n      className={cn(\"smwb-icon__wrapper\", colorClass, className)}\n    >\n      {mode === \"google\" ? (\n        <span className=\"material-symbols-outlined\" style={{ fontSize: cssSize }}>\n          {glyph}\n        </span>\n      ) : (\n        <svg\n          className=\"smwb-icon__svg\"\n          viewBox={definition?.viewBox ?? \"0 0 24 24\"}\n          style={{ width: cssSize, height: cssSize }}\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth={strokeWidth}\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          aria-hidden=\"true\"\n          dangerouslySetInnerHTML={{ __html: definition?.body ?? \"\" }}\n        />\n      )}\n    </span>\n  );\n});\n\nexport default Icon;\n"],"names":["COLOR_TOKENS","warned","warnMissing","name","getIconConfig","Icon","forwardRef","className","weight","fill","size","grade","color","title","source","props","ref","resolvedSource","useIconSource","lookup","getSnapshot","_a","getIcon","registered","useSyncExternalStore","subscribeIcons","definition","glyph","mode","decorative","colorClass","cssSize","strokeWidth","jsx","cn","_b"],"mappings":";;;;;;;AAUA,MAAMA,IAAe,CAAC,WAAW,aAAa,SAAS,WAAW,WAAW,QAAQ,UAAU,GAEzFC,wBAAa,IAAA;AAEnB,SAASC,EAAYC,GAAoB;AACvC,EAAI,CAACC,EAAA,EAAgB,iBAAiBH,EAAO,IAAIE,CAAI,MACrDF,EAAO,IAAIE,CAAI,GAEf,QAAQ;AAAA,IACN,gBAAgBA,CAAI,8CAA8CA,CAAI;AAAA,EAAA;AAG1E;AA4CO,MAAME,IAAOC,EAAuC,SACzD,EAAE,WAAAC,GAAW,QAAAC,IAAS,KAAK,MAAAC,IAAO,GAAG,MAAAC,IAAO,IAAI,OAAAC,IAAQ,KAAK,MAAAR,GAAM,OAAAS,IAAQ,WAAW,OAAAC,GAAO,QAAAC,GAAQ,GAAGC,EAAA,GACxGC,GACA;;AACA,QAAMC,IAAiBC,EAAcJ,CAAM,GACrCK,IAAS,OAAOhB,KAAS,WAAWA,IAAO,MAI3CiB,IAAc,MAAA;;AAAO,WAAAD,MAAW,OAAO,QAAQE,IAAAC,EAAQH,CAAM,MAAd,OAAAE,IAAmB;AAAA,KAClEE,IAAaC,EAAqBC,GAAgBL,GAAaA,CAAW,GAC1EM,IAAa,OAAOvB,KAAS,WAAWA,IAAOoB,GAC/CI,IAAQ,OAAOxB,KAAS,WAAWA,IAAOA,EAAK,MAE/CyB,IACJX,MAAmB,WAAW,WAAWS,IAAa,SAAST,MAAmB,SAAS,YAAY;AACzG,EAAIW,MAAS,aAAW1B,EAAYyB,CAAK;AAEzC,QAAME,IAAahB,MAAU,QACvBiB,IAAalB,KAASZ,EAAa,SAASY,CAAK,IAAI,mBAAmBA,CAAK,KAAK,MAClFmB,IAAU,OAAOrB,KAAS,WAAW,GAAGA,CAAI,OAAOA,GACnDsB,IAAc,KAAK,MAAM,KAAK,IAAI,GAAG,KAAK,IAAI,GAAGxB,IAAS,GAAG,CAAC,IAAI,GAAG,IAAI;AAE/E,SACE,gBAAAyB;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGlB;AAAA,MACJ,KAAAC;AAAA,MACA,eAAY;AAAA,MACZ,oBAAkBY;AAAA,MAClB,MAAMC,IAAa,SAAY;AAAA,MAC/B,eAAaA,IAAa,KAAO;AAAA,MACjC,cAAYhB;AAAA,MACZ,OAAAA;AAAA,MACA,OAAO;AAAA,QACL,GAAGE,EAAM;AAAA,QACT,GAAIa,MAAS,WACT,EAAE,uBAAuB,UAAUnB,CAAI,YAAYD,CAAM,YAAYG,CAAK,cAAA,IAC1E;AAAA,MAAA;AAAA,MAEN,WAAWuB,EAAG,sBAAsBJ,GAAYvB,CAAS;AAAA,MAExD,UAAAqB,MAAS,WACR,gBAAAK,EAAC,QAAA,EAAK,WAAU,6BAA4B,OAAO,EAAE,UAAUF,EAAA,GAC5D,UAAAJ,EAAA,CACH,IAEA,gBAAAM;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,UAASZ,IAAAK,KAAA,gBAAAA,EAAY,YAAZ,OAAAL,IAAuB;AAAA,UAChC,OAAO,EAAE,OAAOU,GAAS,QAAQA,EAAA;AAAA,UACjC,MAAK;AAAA,UACL,QAAO;AAAA,UACP,aAAAC;AAAA,UACA,eAAc;AAAA,UACd,gBAAe;AAAA,UACf,eAAY;AAAA,UACZ,yBAAyB,EAAE,SAAQG,IAAAT,KAAA,gBAAAA,EAAY,SAAZ,OAAAS,IAAoB,GAAA;AAAA,QAAG;AAAA,MAAA;AAAA,IAC5D;AAAA,EAAA;AAIR,CAAC;"}

package/dist/headless/components/base/icon/iconProvider.js

@@ -0,0 +1,25 @@
+import { jsx as s } from "react/jsx-runtime";
+import { createContext as f, useMemo as e, useContext as m, useSyncExternalStore as i } from "react";
+import { registerIcons as g } from "../../../icons/registry.js";
+import { getIconConfig as p } from "../../../icons/config.js";
+import { subscribeIcons as I } from "../../../icons/store.js";
+const u = f(null);
+function b({ source: t, icons: o, children: r }) {
+  e(() => {
+    o && g(o);
+  }, [o]);
+  const n = e(() => ({ source: t }), [t]);
+  return /* @__PURE__ */ s(u.Provider, { value: n, children: r });
+}
+const c = () => p().source;
+function P(t) {
+  var n;
+  const o = m(u), r = i(I, c, c);
+  return (n = t != null ? t : o == null ? void 0 : o.source) != null ? n : r;
+}
+export {
+  u as IconContext,
+  b as IconProvider,
+  P as useIconSource
+};
+//# sourceMappingURL=iconProvider.js.map

package/dist/headless/components/base/icon/iconProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"iconProvider.js","sources":["../../../../../src/components/base/icon/iconProvider.tsx"],"sourcesContent":["import { createContext, useContext, useMemo, useSyncExternalStore, type ReactNode } from \"react\";\nimport { registerIcons, type IconInput } from \"../../../icons/registry\";\nimport { getIconConfig } from \"../../../icons/config\";\nimport { subscribeIcons } from \"../../../icons/store\";\nimport type { IconSource } from \"../../../icons/types\";\n\nexport interface IconContextValue {\n  /** Icon artwork for this subtree. Falls back to {@link configureIcons}. */\n  source?: IconSource;\n}\n\nexport const IconContext = createContext<IconContextValue | null>(null);\n\nexport interface IconProviderProps extends IconContextValue {\n  /**\n   * Icons to make available to `<Icon name=\"...\">` inside this subtree.\n   *\n   * ```tsx\n   * import { add, close, search } from \"@smwb/ui-react/icons\";\n   *\n   * <IconProvider source=\"smwb\" icons={[add, close, search]}>\n   *   <App />\n   * </IconProvider>\n   * ```\n   *\n   * Registration is process-wide (the registry is a module singleton), so the\n   * prop is a convenience for apps that would otherwise call `registerIcons`\n   * at startup — not a scoping mechanism.\n   */\n  icons?: IconInput;\n  children?: ReactNode;\n}\n\n/**\n * Sets the icon source — and optionally registers icons — for a subtree.\n * `<Icon source>` still wins over the provider, and the provider wins over the\n * app-wide {@link configureIcons} default.\n */\nexport function IconProvider({ source, icons, children }: IconProviderProps) {\n  // Icons have to be in the registry before the subtree's first paint, so this\n  // cannot wait for an effect. registerIcons is idempotent, which keeps it safe\n  // under StrictMode's double render.\n  useMemo(() => {\n    if (icons) registerIcons(icons);\n  }, [icons]);\n\n  const value = useMemo<IconContextValue>(() => ({ source }), [source]);\n  return <IconContext.Provider value={value}>{children}</IconContext.Provider>;\n}\n\nconst getConfiguredSource = (): IconSource => getIconConfig().source;\n\n/**\n * Resolves the icon source the way `<Icon>` does: explicit prop, then the\n * nearest {@link IconProvider}, then the app-wide config (`\"auto\"` by default).\n */\nexport function useIconSource(override?: IconSource): IconSource {\n  const context = useContext(IconContext);\n  const configured = useSyncExternalStore(subscribeIcons, getConfiguredSource, getConfiguredSource);\n  return override ?? context?.source ?? configured;\n}\n\nexport default IconProvider;\n"],"names":["IconContext","createContext","IconProvider","source","icons","children","useMemo","value","jsx","getConfiguredSource","getIconConfig","useIconSource","override","context","useContext","configured","useSyncExternalStore","subscribeIcons","_a"],"mappings":";;;;;AAWO,MAAMA,IAAcC,EAAuC,IAAI;AA2B/D,SAASC,EAAa,EAAE,QAAAC,GAAQ,OAAAC,GAAO,UAAAC,KAA+B;AAI3E,EAAAC,EAAQ,MAAM;AACZ,IAAIF,OAAqBA,CAAK;AAAA,EAChC,GAAG,CAACA,CAAK,CAAC;AAEV,QAAMG,IAAQD,EAA0B,OAAO,EAAE,QAAAH,MAAW,CAACA,CAAM,CAAC;AACpE,SAAO,gBAAAK,EAACR,EAAY,UAAZ,EAAqB,OAAAO,GAAe,UAAAF,EAAA,CAAS;AACvD;AAEA,MAAMI,IAAsB,MAAkBC,EAAA,EAAgB;AAMvD,SAASC,EAAcC,GAAmC;;AAC/D,QAAMC,IAAUC,EAAWd,CAAW,GAChCe,IAAaC,EAAqBC,GAAgBR,GAAqBA,CAAmB;AAChG,UAAOS,IAAAN,KAAA,OAAAA,IAAYC,KAAA,gBAAAA,EAAS,WAArB,OAAAK,IAA+BH;AACxC;"}

package/dist/headless/icons/all.js

@@ -0,0 +1,10 @@
+import * as r from "./svg/index.js";
+import { registerIcons as o } from "./registry.js";
+function t() {
+  o(r);
+}
+export {
+  t as default,
+  t as registerAllIcons
+};
+//# sourceMappingURL=all.js.map

package/dist/headless/icons/all.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"all.js","sources":["../../../src/icons/all.ts"],"sourcesContent":["import * as icons from \"./svg\";\nimport { registerIcons } from \"./registry\";\n\n/**\n * Registers the **entire** smwb icon set.\n *\n * Importing this module pulls every icon into the bundle — that is the point of\n * a separate entry point. Use it in Storybook, docs, an icon picker, or a small\n * internal app; in a product bundle prefer registering only what you render:\n *\n * ```ts\n * import { add, close, search } from \"@smwb/ui-react/icons\";\n * registerIcons([add, close, search]);\n * ```\n */\nexport function registerAllIcons(): void {\n  registerIcons(icons);\n}\n\nexport default registerAllIcons;\n"],"names":["registerAllIcons","registerIcons","icons"],"mappings":";;AAeO,SAASA,IAAyB;AACvC,EAAAC,EAAcC,CAAK;AACrB;"}