@base-framework/ui 1.1.14 → 1.1.15

package/README.md

@@ -104,3 +104,47 @@ SecondaryButton({
     }
 })
 ```
+
+## Icon Systems
+
+This library supports two icon systems with **universal automatic detection**. All components automatically support both systems - just pass your icon!
+
+### Heroicons (SVG-based)
+Default icon system using SVG strings:
+```javascript
+import { Icon } from '@base-framework/ui/atoms';
+import { Icons } from '@base-framework/ui/icons';
+
+Icon({ size: 'md' }, Icons.home)
+Button({ variant: 'withIcon', icon: Icons.plus }, 'Add')
+```
+
+### Material Symbols (Font-based)
+Google's Material Symbols with 11,000+ icons in 4 style variants:
+```javascript
+import { MaterialIcon } from '@base-framework/ui/atoms';
+import { MaterialSymbols } from '@base-framework/ui/icons';
+
+MaterialIcon({ name: MaterialSymbols.home, size: 'md', variant: 'filled' })
+Button({ variant: 'withIcon', icon: MaterialSymbols.add }, 'Add')
+```
+
+### Universal Support
+
+**All components** (Button, Alert, Modal, Dialog, Navigation, etc.) automatically detect and render both icon types:
+
+```javascript
+// Both work - no configuration needed!
+Button({ variant: 'withIcon', icon: Icons.plus }, 'Add')
+Button({ variant: 'withIcon', icon: MaterialSymbols.add }, 'Add')
+Button({ variant: 'withIcon', icon: 'add' }, 'Add')  // Material Symbol name
+```
+
+**Style Variants**: `outlined` (default), `filled`, `rounded`, `sharp`
+
+See **[UNIVERSAL-ICON-GUIDE.md](./UNIVERSAL-ICON-GUIDE.md)** for complete documentation.
+See **[ui.wiki/09-Material-Symbols.md](./ui.wiki/09-Material-Symbols.md)** for Material Symbols guide.
+
+## Documentation
+
+For comprehensive documentation, see the **[ui.wiki](./ui.wiki/)** folder.

package/dist/atoms.es.js

@@ -1,41 +1,44 @@
-import { B as e, C as t, F as o, L as r, P as n, R as p, S as I, a as u, T as i } from "./tooltip-BlFbB8yL.js";
-import { B as d, I as m, L as x } from "./buttons-Dr-bViom.js";
-import { C as T, F as g } from "./form-group-BB7dLJir.js";
-import { C as F, a as c, D as f, b as L, E as P, F as R, H as S, I as b, M as h, N as k, P as D, R as V, T as E, c as G, d as H, U as M, W as N } from "./inputs-CcimrM1k.js";
-import { I as W, V as w, a as J } from "./image-BB__4s0g.js";
+import { B as e, C as t, a as o, F as n, b as r, L as p, P as I, R as i, S as u, T as l } from "./tooltip-BmvjA9XQ.js";
+import { B as m, I as c, L as T, M as g, U as x, i as B, a as C } from "./buttons-snATS4J5.js";
+import { C as F, a as M, D as S, b, E as L, F as P, H as R, I as U, c as h, M as k, N as D, P as H, R as V, T as E, d as G, e as N, U as W, V as v, f as w, W as J } from "./image-BhZbKYDj.js";
+import { S as q } from "./skeleton-BlY3opxG.js";
 export {
   e as Badge,
-  d as Button,
-  T as Card,
+  m as Button,
+  t as Card,
   F as Checkbox,
-  t as CircleGraph,
-  c as ColorInput,
-  f as DateInput,
-  L as DateTimeInput,
-  P as EmailInput,
-  o as Fieldset,
-  R as FileInput,
-  g as FormGroup,
-  S as HiddenInput,
-  m as Icon,
-  W as Image,
-  b as Input,
-  r as Legend,
-  x as LoadingButton,
-  h as MonthInput,
-  k as NumberInput,
-  D as PasswordInput,
-  n as ProgressBar,
+  o as CircleGraph,
+  M as ColorInput,
+  S as DateInput,
+  b as DateTimeInput,
+  L as EmailInput,
+  n as Fieldset,
+  P as FileInput,
+  r as FormGroup,
+  R as HiddenInput,
+  c as Icon,
+  U as Image,
+  h as Input,
+  p as Legend,
+  T as LoadingButton,
+  g as MaterialIcon,
+  k as MonthInput,
+  D as NumberInput,
+  H as PasswordInput,
+  I as ProgressBar,
   V as Radio,
-  p as RangeSlider,
-  I as Select,
-  u as Skeleton,
+  i as RangeSlider,
+  u as Select,
+  q as Skeleton,
   E as TelInput,
   G as Textarea,
-  H as TimeInput,
-  i as Tooltip,
-  M as UrlInput,
-  w as Veil,
-  J as VeilJot,
-  N as WeekInput
+  N as TimeInput,
+  l as Tooltip,
+  x as UniversalIcon,
+  W as UrlInput,
+  v as Veil,
+  w as VeilJot,
+  J as WeekInput,
+  B as isHeroicon,
+  C as isMaterialIcon
 };

package/dist/buttons-snATS4J5.js

@@ -0,0 +1,118 @@
+import { I as b, Span as w, Button as r } from "@base-framework/atoms";
+import { Atom as e } from "@base-framework/base";
+import { Icons as f } from "./icons.es.js";
+const x = {
+  xs: "w-4 h-4",
+  sm: "w-6 h-6",
+  md: "w-8 h-8",
+  lg: "w-10 h-10",
+  xl: "w-12 h-12",
+  "2xl": "w-14 h-14",
+  "3xl": "w-16 h-16"
+}, a = e((n, t) => {
+  const s = x[n.size || "sm"];
+  return b({
+    ...n,
+    class: `stroke-current icon-size ${s} ${n.class || ""}`,
+    html: t[0]?.textContent
+  });
+}), o = {
+  xs: "w-4 h-4 text-base",
+  // 16px - matches Icon
+  sm: "w-6 h-6 text-2xl",
+  // 24px - matches Icon
+  md: "w-8 h-8 text-[2rem]",
+  // 32px - matches Icon
+  lg: "w-10 h-10 text-[2.5rem]",
+  // 40px - matches Icon
+  xl: "w-12 h-12 text-5xl",
+  // 48px - matches Icon
+  "2xl": "w-14 h-14 text-[3.5rem]",
+  // 56px - matches Icon
+  "3xl": "w-16 h-16 text-[4rem]"
+  // 64px - matches Icon
+}, u = {
+  outlined: "material-symbols-outlined",
+  filled: "material-symbols-filled",
+  rounded: "material-symbols-rounded",
+  sharp: "material-symbols-sharp"
+}, m = e((n) => {
+  const t = n.size || "sm", s = n.variant || "outlined", l = o[t] || o.sm, c = u[s] || u.outlined;
+  return w({
+    ...n,
+    class: `inline-flex items-center justify-center ${c} ${l} ${n.class || ""}`,
+    // Remove props that shouldn't be passed to the DOM element
+    size: void 0,
+    variant: void 0,
+    name: void 0
+  }, n.name);
+}), y = (n = {}, t) => t ? typeof t == "string" && t.includes("<svg") ? a(n, t) : typeof t == "object" && t.name ? m({
+  ...n,
+  name: t.name,
+  variant: t.variant || n.variant || "outlined"
+}) : typeof t == "string" ? m({
+  ...n,
+  name: t
+}) : a(n, t) : null, V = (n) => n ? !!(typeof n == "object" && n.name || typeof n == "string" && !n.includes("<svg")) : !1, T = (n) => typeof n == "string" && n.includes("<svg"), i = (n) => e((t, s) => r({
+  ...n,
+  ...t,
+  class: `bttn ${n.class} ${t.class || ""}`
+}, s)), g = e(
+  (n, t) => r({
+    ...n,
+    class: n.class
+  }, [
+    n.icon && n.position !== "right" ? a({ size: "sm", class: n.animation ?? null }, n.icon) : null,
+    ...t || [],
+    n.icon && n.position === "right" ? a({ size: "sm", class: n.animation ?? null }, n.icon) : null
+  ])
+), d = (n) => e((t, s) => g({
+  ...n,
+  ...t,
+  class: `bttn ${n.class} ${t.class || ""}`
+}, s)), v = (n) => () => {
+  if (n.allowHistory === !0 && globalThis.history.length > 2) {
+    globalThis.history.back();
+    return;
+  }
+  n.backUrl && app.navigate(n.backUrl);
+}, k = (n) => e((t, s) => (t.icon = t.icon || f.arrows.left, t.click = t.click || v(t), g({
+  ...n,
+  ...t
+}, s))), z = e((n, t) => {
+  const s = n.size || "md", l = {
+    xs: "w-6 h-6",
+    sm: "w-8 h-8",
+    md: "w-10 h-10",
+    lg: "w-12 h-12",
+    xl: "w-14 h-14"
+  }, c = n.backgroundClass || "bg-background/30 hover:bg-background/50";
+  return r({
+    ...n,
+    class: `circle-icon-btn inline-flex items-center justify-center rounded-full ${c} text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ring-offset-background transition-colors disabled:pointer-events-none disabled:opacity-50 cursor-pointer ${l[s] || l.md} ${n.class || ""}`
+  }, [
+    n.icon ? y({ size: s === "xs" ? "xs" : "sm" }, n.icon) : null,
+    ...t || []
+  ]);
+}), h = {
+  primary: i({ class: "primary" }),
+  secondary: i({ class: "secondary" }),
+  destructive: i({ class: "destructive" }),
+  warning: i({ class: "warning" }),
+  outline: i({ class: "outline" }),
+  ghost: i({ class: "ghost" }),
+  link: i({ class: "link" }),
+  icon: d({ class: "icon" }),
+  withIcon: d({ class: "with-icon" }),
+  back: k({ class: "with-icon back-button" }),
+  circleIcon: z
+}, I = e((n, t) => (h[n.variant] || h.primary)(n, t)), U = e((n, t) => I({ ...n, variant: "withIcon", icon: f.loading, animation: "animate-spin" }, t));
+export {
+  I as B,
+  a as I,
+  U as L,
+  m as M,
+  y as U,
+  V as a,
+  T as i
+};