@base-framework/ui 1.1.14 → 1.1.15

package/dist/skeleton-BlY3opxG.js

@@ -0,0 +1,7 @@
+import { Div as r } from "@base-framework/atoms";
+const o = ({ class: e, shape: s = "rectangle", width: l = "w-full", height: a = "h-4" }) => r({
+  class: `bg-muted animate-pulse ${l} ${a} ${s === "circle" ? "rounded-full" : "rounded-md"} ${e || ""}`
+});
+export {
+  o as S
+};

package/dist/{tooltip-BlFbB8yL.js → tooltip-BmvjA9XQ.js}

@@ -1,7 +1,6 @@
-import { Span as c, Legend as b, Fieldset as p, Div as l, UseParent as u, Input as C } from "@base-framework/atoms";
-import { Atom as s, Html as x } from "@base-framework/base";
-import { a as d } from "./image-BB__4s0g.js";
-import { f as h, e as y, g as k } from "./inputs-CcimrM1k.js";
+import { Span as c, Div as o, Legend as f, Fieldset as x, H4 as C, P as h, UseParent as u, Input as y } from "@base-framework/atoms";
+import { Atom as s, Html as p } from "@base-framework/base";
+import { f as d, g as k, h as w, i as $ } from "./image-BhZbKYDj.js";
 const a = {
   gray: {
     backgroundColor: "bg-gray-50",
@@ -78,25 +77,47 @@ const a = {
     textColor: "text-primary",
     ringColor: "ring-background"
   }
-}, w = (t) => a[t] || a.gray, $ = (t) => {
-  const { backgroundColor: e, textColor: r, ringColor: o } = w(t);
-  return `inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors ${e} ${r} ${o}`;
-}, T = s((t, e) => {
-  const r = $(t?.type);
-  return c({ ...t, class: r }, e);
-}), v = s((t, e) => b({
-  ...t,
-  class: ` font-medium -mt-4 -mx-1 px-2 py-2 ${t.class || ""}`
-}, e)), L = s((t, e) => {
-  const r = t.border === "full" ? "border rounded-md" : "border-t";
-  return p({
-    ...t,
-    class: `p-6 ${r} ${t.class || ""}`
+}, v = (r) => a[r] || a.gray, P = (r) => {
+  const { backgroundColor: e, textColor: t, ringColor: l } = v(r);
+  return `inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors ${e} ${t} ${l}`;
+}, L = s((r, e) => {
+  const t = P(r?.type);
+  return c({ ...r, class: t }, e);
+}), G = s((r, e) => {
+  const t = r.margin ?? "my-5 mx-5", l = r.padding ?? "p-4", n = r.border ?? "border-border";
+  return r.hover && (r.class += " hover:shadow-lg hover:bg-muted/50"), o({
+    ...r,
+    class: `rounded-lg ${n} bg-card text-card-foreground shadow-md min-w-[120px] min-h-[80px] ${t} ${l} ${r.class || ""}`
+  }, e);
+}), S = s((r, e) => f({
+  ...r,
+  class: ` font-medium -mt-4 -mx-1 px-2 py-2 ${r.class || ""}`
+}, e)), I = s((r, e) => {
+  const t = r.border === "full" ? "border rounded-md" : "border-t";
+  return x({
+    ...r,
+    class: `p-6 ${t} ${r.class || ""}`
+  }, [
+    r.legend && S(r.legend),
+    o({ class: "flex flex-auto flex-col gap-y-6" }, e)
+  ]);
+}), R = s((r, e) => {
+  const t = r.border === !0 ? "border-t" : "";
+  return o({
+    ...r,
+    class: `grid grid-cols-1 gap-y-4 sm:grid-cols-[1fr_2fr] sm:gap-x-6 pt-8 ${t} ${r.class || ""}`
   }, [
-    t.legend && v(t.legend),
-    l({ class: "flex flex-auto flex-col gap-y-6" }, e)
+    r.label && o({
+      ...r.labelProps,
+      class: `flex flex-auto flex-col gap-y-1 ${r.labelProps?.class || ""}`
+    }, [
+      C({ class: "text-base" }, r.label),
+      r.description && h({ class: "text-sm text-muted-foreground" }, r.description)
+    ]),
+    // Controls container: grows to fill remaining space, spacing between items
+    o({ class: "flex flex-col gap-y-4" }, e)
   ]);
-}), I = d(
+}), O = d(
   {
     /**
      * This will create the initial state of the RangeSlider.
@@ -117,8 +138,8 @@ const a = {
      * @param {number} value
      * @returns {number}
      */
-    getFillPercentage(t) {
-      return (t - this.min) / (this.max - this.min) * 100;
+    getFillPercentage(r) {
+      return (r - this.min) / (this.max - this.min) * 100;
     },
     /**
      * This will render the RangeSlider component.
@@ -126,63 +147,63 @@ const a = {
      * @returns {object}
      */
     render() {
-      return l({ class: "relative w-full h-4 flex items-center" }, [
+      return o({ class: "relative w-full h-4 flex items-center" }, [
         // Track
-        l({ class: "absolute h-2 w-full rounded-full bg-muted" }),
-        u(({ state: t }) => [
+        o({ class: "absolute h-2 w-full rounded-full bg-muted" }),
+        u(({ state: r }) => [
           // Filled Track
-          l({
+          o({
             class: "absolute h-2 bg-primary rounded-full",
-            style: ["width: [[filledPercentage]]%", t]
+            style: ["width: [[filledPercentage]]%", r]
           }),
           // Thumb
-          l({
+          o({
             class: `
 						absolute block h-5 w-5 rounded-full border-2 border-primary bg-background
 						ring-offset-background transition-colors focus-visible:outline-none
 						focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
 						disabled:pointer-events-none disabled:opacity-50 transform -translate-x-1/2
 					`.trim(),
-            style: ["left: [[filledPercentage]]%", t]
+            style: ["left: [[filledPercentage]]%", r]
           }),
           // Hidden Range Input
-          C({
+          y({
             type: "range",
-            min: ["[[min]]", t],
-            max: ["[[max]]", t],
-            value: ["[[value]]", t],
+            min: ["[[min]]", r],
+            max: ["[[max]]", r],
+            value: ["[[value]]", r],
             // Incorporate your new classes here
             class: `
 						absolute w-full h-full opacity-0 cursor-pointer
-						${h}
-						${y}
+						${k}
+						${w}
 						${this.class || ""}
 					`.trim(),
             bind: this.bind,
             input: (e) => {
-              const r = Number(e.target.value);
-              this.state.value = r, this.state.filledPercentage = this.getFillPercentage(r), typeof this.change == "function" && this.change(r);
+              const t = Number(e.target.value);
+              this.state.value = t, this.state.filledPercentage = this.getFillPercentage(t), typeof this.change == "function" && this.change(t);
             }
           })
         ])
       ]);
     }
   }
-), G = s((t) => ({
+), V = s((r) => ({
   tag: "select",
   onCreated(e) {
-    t.options && x.setupSelectOptions(e, t.options);
+    r.options && p.setupSelectOptions(e, r.options);
   },
-  ...t,
-  class: `${k} ${t.class || ""}`.trim()
-})), P = (t) => !t || isNaN(t) ? null : t, i = (t, e) => {
-  const r = t, o = 16, n = 2 * Math.PI * o, m = r / 100 * n, f = `
+  ...r,
+  class: `${$} ${r.class || ""}`.trim()
+})), E = (r) => !r || isNaN(r) ? null : r, i = (r, e) => {
+  const t = r, l = 16, n = 2 * Math.PI * l, b = t / 100 * n, m = `
 	<svg class="w-40 h-40 mx-auto" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
 		<!-- Background Circle -->
 		<circle
 			cx="18"
 			cy="18"
-			r="${o}"
+			r="${l}"
 			fill="none"
 			stroke="currentColor"
 			stroke-width="4"
@@ -193,13 +214,13 @@ const a = {
 		<circle
 			cx="18"
 			cy="18"
-			r="${o}"
+			r="${l}"
 			fill="none"
 			stroke="currentColor"
 			stroke-width="4"
 			class="stroke-primary"
 			stroke-dasharray="${n}"
-			stroke-dashoffset="${n - m}"
+			stroke-dashoffset="${n - b}"
 			stroke-linecap="round"
 			class="${e}"
 		/>
@@ -210,27 +231,27 @@ const a = {
 			class="text-[0.25em] font-medium fill-primary"
 			text-anchor="middle"
 			dominant-baseline="middle">
-			${r}%
+			${t}%
 		</text>
 	</svg>
 	`;
-  return l({
+  return o({
     class: "circle-graph text-inherit",
-    html: f
+    html: m
   });
-}, R = s((t) => {
-  const e = t.progress || 0, r = t.class || "", o = i(e, r);
-  return l({
+}, _ = s((r) => {
+  const e = r.progress || 0, t = r.class || "", l = i(e, t);
+  return o({
     class: "circle-graph-wrap",
     onSet: [
-      t.prop,
-      (n) => (n = P(n), n ? i(n, r) : o)
+      r.prop,
+      (n) => (n = E(n), n ? i(n, t) : l)
     ]
-  }, [o]);
-}), S = () => u(({ state: t }) => l({
+  }, [l]);
+}), B = () => u(({ state: r }) => o({
   class: "absolute h-full rounded-full bg-primary transition-all duration-300",
-  style: ["width: [[progress]]%;", t]
-})), O = d(
+  style: ["width: [[progress]]%;", r]
+})), D = d(
   {
     /**
      * This will render the progress bar component.
@@ -238,8 +259,8 @@ const a = {
      * @returns {object}
      */
     render() {
-      return l({ class: "relative w-full h-4 rounded-full bg-muted" }, [
-        S()
+      return o({ class: "relative w-full h-4 rounded-full bg-muted" }, [
+        B()
       ]);
     },
     /**
@@ -266,10 +287,10 @@ const a = {
      * @param {object} evt
      * @returns {void}
      */
-    uploadProgress(t) {
-      if (t.lengthComputable) {
-        const r = Math.round(t.loaded * 100 / t.total);
-        this.set(r);
+    uploadProgress(r) {
+      if (r.lengthComputable) {
+        const t = Math.round(r.loaded * 100 / r.total);
+        this.set(t);
       }
     },
     /**
@@ -278,13 +299,11 @@ const a = {
      * @param {number} progress
      * @returns {void}
      */
-    set(t) {
-      t < 0 && (t = 0), t > 100 && (t = 100), this.state.progress = t;
+    set(r) {
+      r < 0 && (r = 0), r > 100 && (r = 100), this.state.progress = r;
     }
   }
-), V = ({ class: t, shape: e = "rectangle", width: r = "w-full", height: o = "h-4" }) => l({
-  class: `bg-muted animate-pulse ${r} ${o} ${e === "circle" ? "rounded-full" : "rounded-md"} ${t || ""}`
-}), g = {
+), g = {
   top: "bottom-full left-1/2 transform -translate-x-1/2 mb-2",
   "top-right": "bottom-full left-full transform -translate-x-1 mb-2",
   "top-left": "bottom-full right-full transform translate-x-1 mb-2",
@@ -293,27 +312,28 @@ const a = {
   "bottom-left": "top-full right-full transform translate-x-1 mt-2",
   left: "top-1/2 right-full transform -translate-y-1/2 mr-2",
   right: "top-1/2 left-full transform -translate-y-1/2 ml-2"
-}, E = (t) => g[t] || g.top, D = s(({ position: t = "top", content: e }, r) => {
-  const o = E(t);
-  return Array.isArray(r) === !1 && (r = [r]), l({ class: "relative group inline-block" }, [
-    ...r,
+}, F = (r) => g[r] || g.top, H = s(({ position: r = "top", content: e }, t) => {
+  const l = F(r);
+  return Array.isArray(t) === !1 && (t = [t]), o({ class: "relative group inline-block" }, [
+    ...t,
     // Tooltip box
     c({
       class: `
 				absolute z-20 px-2 py-1 border text-sm bg-background rounded shadow-md opacity-0 whitespace-nowrap
-				group-hover:opacity-100 transition-opacity duration-200 ${o} pointer-events-none
+				group-hover:opacity-100 transition-opacity duration-200 ${l} pointer-events-none
 			`
     }, e)
   ]);
 });
 export {
-  T as B,
-  R as C,
-  L as F,
-  v as L,
-  O as P,
-  I as R,
-  G as S,
-  D as T,
-  V as a
+  L as B,
+  G as C,
+  I as F,
+  S as L,
+  D as P,
+  O as R,
+  V as S,
+  H as T,
+  _ as a,
+  R as b
 };

package/dist/types/components/atoms/atoms.d.ts

@@ -10,8 +10,10 @@ export * from "./form/legend.js";
 export * from "./form/select.js";
 export * from "./icon.js";
 export * from "./image.js";
+export * from "./material-icon.js";
 export * from "./progress/circle-graph.js";
 export * from "./progress/progress-bar.js";
 export * from "./skeleton.js";
 export * from "./tooltip.js";
+export * from "./universal-icon.js";
 export * from "./veil.js";

package/dist/types/components/atoms/material-icon.d.ts

@@ -0,0 +1,17 @@
+/**
+ * This will create a Material Icon atom using Google's Material Symbols.
+ *
+ * Usage:
+ * ```javascript
+ * MaterialIcon({ name: 'home', size: 'md', variant: 'outlined' })
+ * MaterialIcon({ name: 'favorite', size: 'sm', variant: 'filled', class: 'text-red-500' })
+ * ```
+ *
+ * @param {object} props
+ * @param {string} props.name - The icon name (ligature) from Material Symbols
+ * @param {string} [props.size='sm'] - Icon size: xs, sm, md, lg, xl, 2xl, 3xl
+ * @param {string} [props.variant='outlined'] - Style variant: outlined, filled, rounded, sharp
+ * @param {string} [props.class] - Additional CSS classes
+ * @returns {object}
+ */
+export const MaterialIcon: Function;

package/dist/types/components/atoms/universal-icon.d.ts

@@ -0,0 +1,3 @@
+export function UniversalIcon(props: object, iconData: string | object): object | null;
+export function isMaterialIcon(iconData: string | object): boolean;
+export function isHeroicon(iconData: string | object): boolean;

package/dist/types/components/icons/icons.d.ts

@@ -8,3 +8,4 @@
  * @type {object}
  */
 export const Icons: object;
+export * from "./material-symbols.js";

package/dist/types/components/icons/material-symbols.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Material Symbols
+ *
+ * Common icon names for Google Material Symbols.
+ * These are ligature names that work with the Material Symbols font.
+ *
+ * Usage with MaterialIcon:
+ * ```javascript
+ * import { MaterialIcon } from '@base-framework/ui/atoms';
+ * import { MaterialSymbols } from '@base-framework/ui/icons';
+ *
+ * MaterialIcon({ name: MaterialSymbols.home, size: 'md' })
+ * MaterialIcon({ name: MaterialSymbols.actions.delete, variant: 'filled' })
+ * ```
+ *
+ * @link https://fonts.google.com/icons
+ * @type {object}
+ */
+export const MaterialSymbols: object;

package/dist/types/components/molecules/breadcrumb/breadcrumb.d.ts

@@ -3,8 +3,8 @@
  *
  * This will render a Breadcrumb component.
  *
- * @type {typeof Component}
+ * @type {typeof Component | null}
  */
-export const Breadcrumb: typeof Component;
+export const Breadcrumb: typeof Component | null;
 export default Breadcrumb;
 import { Component } from '@base-framework/base';

package/dist/types/components/molecules/image/image-uploader.d.ts

@@ -3,7 +3,7 @@
  *
  * Upload button for image files, styled with a dashed circular drop zone.
  *
- * @type {typeof Component}
+ * @type {typeof Component | null}
  */
-export const ImageUploader: typeof Component;
+export const ImageUploader: typeof Component | null;
 import { Component } from '@base-framework/base';

package/dist/types/components/molecules/image/logo-uploader.d.ts

@@ -3,7 +3,7 @@
  *
  * Upload button for logo images, styled with a dashed circular drop zone.
  *
- * @type {typeof Component}
+ * @type {typeof Component | null}
  */
-export const LogoUploader: typeof Component;
+export const LogoUploader: typeof Component | null;
 import { Component } from '@base-framework/base';

package/dist/types/components/organisms/navigation/mobile/nav-wrapper/title-header.d.ts

@@ -1,2 +1,2 @@
-export function NavButton(props: object): object;
+export function NavButton(): object;
 export function TitleHeader(props: object): object;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@base-framework/ui",
-	"version": "1.1.14",
+	"version": "1.1.15",
 	"description": "This is a UI package that adds components and atoms that use Tailwind CSS and a theme based on Shadcn.",
 	"main": "./dist/index.es.js",
 	"scripts": {

package/dist/buttons-Dr-bViom.js

@@ -1,77 +0,0 @@
-import { I as m, Button as l } from "@base-framework/atoms";
-import { Atom as i } from "@base-framework/base";
-import { Icons as u } from "./icons.es.js";
-const b = {
-  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 = i((n, t) => {
-  const s = b[n.size || "sm"];
-  return m({
-    ...n,
-    class: `stroke-current icon-size ${s} ${n.class || ""}`,
-    html: t[0]?.textContent
-  });
-}), c = (n) => i((t, s) => l({
-  ...n,
-  ...t,
-  class: `bttn ${n.class} ${t.class || ""}`
-}, s)), h = i(
-  (n, t) => l({
-    ...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
-  ])
-), e = (n) => i((t, s) => h({
-  ...n,
-  ...t,
-  class: `bttn ${n.class} ${t.class || ""}`
-}, s)), d = (n) => () => {
-  if (n.allowHistory === !0 && globalThis.history.length > 2) {
-    globalThis.history.back();
-    return;
-  }
-  n.backUrl && app.navigate(n.backUrl);
-}, w = (n) => i((t, s) => (t.icon = t.icon || u.arrows.left, t.click = t.click || d(t), h({
-  ...n,
-  ...t
-}, s))), k = i((n, t) => {
-  const s = n.size || "md", o = {
-    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"
-  }, g = n.backgroundClass || "bg-background/30 hover:bg-background/50";
-  return l({
-    ...n,
-    class: `circle-icon-btn inline-flex items-center justify-center rounded-full ${g} 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 ${o[s] || o.md} ${n.class || ""}`
-  }, [
-    n.icon ? a({ size: s === "xs" ? "xs" : "sm" }, n.icon) : null,
-    ...t || []
-  ]);
-}), r = {
-  primary: c({ class: "primary" }),
-  secondary: c({ class: "secondary" }),
-  destructive: c({ class: "destructive" }),
-  warning: c({ class: "warning" }),
-  outline: c({ class: "outline" }),
-  ghost: c({ class: "ghost" }),
-  link: c({ class: "link" }),
-  icon: e({ class: "icon" }),
-  withIcon: e({ class: "with-icon" }),
-  back: w({ class: "with-icon back-button" }),
-  circleIcon: k
-}, f = i((n, t) => (r[n.variant] || r.primary)(n, t)), v = i((n, t) => f({ ...n, variant: "withIcon", icon: u.loading, animation: "animate-spin" }, t));
-export {
-  f as B,
-  a as I,
-  v as L
-};

package/dist/form-group-BB7dLJir.js

@@ -1,29 +0,0 @@
-import { Div as r, H4 as s, P as c } from "@base-framework/atoms";
-import { Atom as d } from "@base-framework/base";
-const g = d((e, a) => {
-  const l = e.margin ?? "my-5 mx-5", t = e.padding ?? "p-4", o = e.border ?? "border-border";
-  return e.hover && (e.class += " hover:shadow-lg hover:bg-muted/50"), r({
-    ...e,
-    class: `rounded-lg ${o} bg-card text-card-foreground shadow-md min-w-[120px] min-h-[80px] ${l} ${t} ${e.class || ""}`
-  }, a);
-}), i = d((e, a) => {
-  const l = e.border === !0 ? "border-t" : "";
-  return r({
-    ...e,
-    class: `grid grid-cols-1 gap-y-4 sm:grid-cols-[1fr_2fr] sm:gap-x-6 pt-8 ${l} ${e.class || ""}`
-  }, [
-    e.label && r({
-      ...e.labelProps,
-      class: `flex flex-auto flex-col gap-y-1 ${e.labelProps?.class || ""}`
-    }, [
-      s({ class: "text-base" }, e.label),
-      e.description && c({ class: "text-sm text-muted-foreground" }, e.description)
-    ]),
-    // Controls container: grows to fill remaining space, spacing between items
-    r({ class: "flex flex-col gap-y-4" }, a)
-  ]);
-});
-export {
-  g as C,
-  i as F
-};

package/dist/image-BB__4s0g.js

@@ -1,31 +0,0 @@
-import { Jot as r, Component as a, Atom as o } from "@base-framework/base";
-import { Img as s } from "@base-framework/atoms";
-class u extends a {
-  /**
-   * This will set the component context.
-   *
-   * @param {object|null} context
-   * @returns {object|null}
-   */
-  setContext(i) {
-    if (this.data)
-      return null;
-    const e = this?.parent?.data ?? this?.parent?.context?.data ?? this?.parent?.state ?? null;
-    return e ? { data: e } : null;
-  }
-}
-const p = (t) => r(t, u), x = o(({ src: t, alt: i, class: e, checkPath: l = !0 }) => !t || (e = e || "", l && t.indexOf(".") === -1 && t.indexOf("[[") === -1) ? null : s({
-  class: `absolute w-full h-full object-cover fadeIn ${e}`,
-  src: t,
-  alt: i,
-  load: (n) => n.target.style.visibility = "visible",
-  /**
-   * If there's an error loading the image, hide it.
-   */
-  error: (n) => n.target.style.visibility = "hidden"
-}));
-export {
-  x as I,
-  u as V,
-  p as a
-};