@base-framework/ui 1.0.95 → 1.0.97

package/dist/atoms.es.js

@@ -1,4 +1,4 @@
-import { B as e, C as t, a as n, F as o, L as p, P as r, R as u, S as I, b as i, T as l } from "./tooltip-DE-UvmQt.js";
+import { B as e, C as t, a as n, F as o, L as p, P as r, R as u, S as I, b as i, T as l } from "./tooltip-z2_o9L8g.js";
 import { B as m, I as T, L as c } from "./buttons-CVEwmPAi.js";
 import { C as B, d as C, D as S, c as g, E as b, F as f, H as h, I as F, M as L, N as P, P as R, R as k, S as D, T as V, a as E, b as H, U as M, W as N } from "./inputs-nzivW9Dr.js";
 import { V as W, a as w } from "./veil-D4dRxILB.js";

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { B as e, C as o, a as t, F as r, L as n, P as i, R as l, S as p, b as u, T as m } from "./tooltip-DE-UvmQt.js";
+import { B as e, C as o, a as t, F as r, L as n, P as i, R as l, S as p, b as u, T as m } from "./tooltip-z2_o9L8g.js";
 import { B as g, I as T, L as c } from "./buttons-CVEwmPAi.js";
 import { C as b, d as D, D as S, c as I, E as B, F as P, H as F, I as M, M as k, N, P as v, R as f, S as x, T as h, a as y, b as W, U as L, W as A } from "./inputs-nzivW9Dr.js";
 import { V as w, a as U } from "./veil-D4dRxILB.js";
@@ -7,7 +7,7 @@ import { A as G, B as V, C as j, z as q, u as z, v as J, w as _, D as K, j as Q,
 import { A as Na, b as va, C as fa, D as xa, a as ha, F as ya, M as Wa, P as La, c as Aa, g as Ha, p as wa } from "./calendar-BDqm833e.js";
 import { B as Oa, n as Ra, C as Ea, j as Ga, D as Va, l as ja, H as qa, I as za, N as Ja, O as _a, P as Ka, S as Qa, m as Xa, r as Ya, q as Za, o as $a, p as as, T as ss, k as es, U as os, W as ts, f as rs, h as ns, i as is, c as ls, d as ps, b as us, e as ms, a as ds, g as gs } from "./signature-panel-BFels99c.js";
 import { B as cs, I as Cs, M as bs, d as Ds, e as Ss, g as Is, N as Bs, b as Ps, a as Fs, f as Ms, P as ks, c as Ns, S as vs, T as fs } from "./mobile-nav-wrapper-BE_hr65B.js";
-import { B as hs, a as ys, C as Ws, F as Ls, b as As, c as Hs, M as ws, P as Us, S as Os } from "./sidebar-menu-page-6DL2cQJl.js";
+import { B as hs, a as ys, C as Ws, F as Ls, b as As, c as Hs, M as ws, P as Us, S as Os } from "./sidebar-menu-page-BmD_Bi-v.js";
 import { A as Es, F as Gs, M as Vs, a as js, T as qs } from "./aside-template-McEj_Gxc.js";
 import { B as Js } from "./bside-template-Du2m3rsE.js";
 export {

package/dist/pages.es.js

@@ -1,4 +1,4 @@
-import { B as s, a as P, C as g, F as n, b as l, c as i, M as r, P as c, S as o } from "./sidebar-menu-page-6DL2cQJl.js";
+import { B as s, a as P, C as g, F as n, b as l, c as i, M as r, P as c, S as o } from "./sidebar-menu-page-BmD_Bi-v.js";
 export {
   s as BasicPage,
   P as BlankPage,

package/dist/{sidebar-menu-page-6DL2cQJl.js → sidebar-menu-page-BmD_Bi-v.js}

@@ -37,7 +37,7 @@ class S extends a {
    * @returns {object}
    */
   render() {
-    const s = this.className ? this.className : "pt-[80px] sm:pt-0";
+    const s = this.class ? this.class : "pt-[80px] sm:pt-0";
     return l([
       t({ class: `flex flex-auto flex-col ${s}` }, this.children)
     ]);
@@ -60,7 +60,7 @@ const r = i((e, s) => (e.class = "basic-page pt-[80px] sm:pt-0 flex flex-auto fl
   ...e,
   children: s
 }));
-class N extends a {
+class w extends a {
   /**
    * This will render the page.
    *
@@ -78,7 +78,7 @@ const f = i(({ title: e, description: s }) => n({ class: "sm:py-8 px-6 md:px-5 f
   d({ class: "scroll-m-20 text-3xl font-bold tracking-tight" }, e),
   s && o({ class: "text-base text-muted-foreground py-2 max-w-[700px]" }, s)
 ]));
-class w extends a {
+class F extends a {
   /**
    * This will declare the props for the compiler.
    *
@@ -102,7 +102,7 @@ class w extends a {
     ]);
   }
 }
-class F extends c {
+class B extends c {
   /**
    * This will render the page.
    *
@@ -113,7 +113,7 @@ class F extends c {
     return t({ class: `flex flex-col flex-auto ${s}` }, this.children);
   }
 }
-class B extends a {
+class M extends a {
   /**
    * This will declare the props for the compiler.
    *
@@ -207,11 +207,11 @@ class B extends a {
 export {
   a as B,
   k as C,
-  N as F,
+  w as F,
   r as M,
   c as P,
-  B as S,
+  M as S,
   S as a,
-  w as b,
-  F as c
+  F as b,
+  B as c
 };

package/dist/{tooltip-DE-UvmQt.js → tooltip-z2_o9L8g.js}

@@ -1,7 +1,7 @@
-import { Span as c, Div as l, Legend as b, Fieldset as f, Input as x } from "@base-framework/atoms";
-import { Atom as s, Html as C } from "@base-framework/base";
+import { Span as c, Div as l, Legend as b, Fieldset as f, UseParent as x, Input as C } from "@base-framework/atoms";
+import { Atom as s, Html as p } from "@base-framework/base";
 import { a as u } from "./veil-D4dRxILB.js";
-import { f as p, e as h, g as y } from "./inputs-nzivW9Dr.js";
+import { f as h, e as y, g as k } from "./inputs-nzivW9Dr.js";
 const a = {
   gray: {
     backgroundColor: "bg-gray-50",
@@ -78,31 +78,31 @@ const a = {
     textColor: "text-primary",
     ringColor: "ring-background"
   }
-}, k = (t) => a[t] || a.gray, w = (t) => {
-  const { backgroundColor: r, textColor: e, ringColor: o } = k(t);
-  return `inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors ${r} ${e} ${o}`;
-}, F = s((t, r) => {
-  const e = w(t == null ? void 0 : t.type);
-  return c({ ...t, class: e }, r);
-}), T = s((t, r) => {
-  const e = t.margin ?? "my-5 mx-5", o = t.padding ?? "p-4";
+}, 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 == null ? void 0 : t.type);
+  return c({ ...t, class: r }, e);
+}), L = s((t, e) => {
+  const r = t.margin ?? "my-5 mx-5", o = t.padding ?? "p-4";
   return l({
     ...t,
-    class: `rounded-lg border bg-card text-card-foreground shadow-md min-w-[120px] min-h-[80px] ${e} ${o} ${t.class || ""}`
-  }, r);
-}), $ = s((t, r) => b({
+    class: `rounded-lg border bg-card text-card-foreground shadow-md min-w-[120px] min-h-[80px] ${r} ${o} ${t.class || ""}`
+  }, e);
+}), v = s((t, e) => b({
   ...t,
   class: ` font-medium bg-background -mt-4 -mx-1 px-2 py-2 ${t.class || ""}`
-}, r)), L = s((t, r) => {
-  const e = t.border === "full" ? "border rounded-md" : "border-t";
+}, e)), I = s((t, e) => {
+  const r = t.border === "full" ? "border rounded-md" : "border-t";
   return f({
     ...t,
-    class: `p-6 ${e} ${t.class || ""}`
+    class: `p-6 ${r} ${t.class || ""}`
   }, [
-    t.legend && $(t.legend),
-    l({ class: "flex flex-auto flex-col space-y-6" }, r)
+    t.legend && v(t.legend),
+    l({ class: "flex flex-auto flex-col space-y-6" }, e)
   ]);
-}), I = u(
+}), G = u(
   {
     /**
      * This will create the initial state of the RangeSlider.
@@ -151,36 +151,36 @@ const a = {
           style: "left: [[filledPercentage]]%"
         }),
         // Hidden Range Input
-        x({
+        x(({ state: t }) => C({
           type: "range",
-          min: "[[min]]",
-          max: "[[max]]",
-          value: "[[value]]",
+          min: ["[[min]]", t],
+          max: ["[[max]]", t],
+          value: ["[[value]]", t],
           // Incorporate your new classes here
           class: `
-					absolute w-full h-full opacity-0 cursor-pointer
-					${p}
-					${h}
-					${this.class || ""}
-				`.trim(),
+						absolute w-full h-full opacity-0 cursor-pointer
+						${h}
+						${y}
+						${this.class || ""}
+					`.trim(),
           bind: this.bind,
-          input: (t) => {
-            const r = Number(t.target.value);
+          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);
           }
-        })
+        }))
       ]);
     }
   }
-), G = s((t) => ({
+), R = s((t) => ({
   tag: "select",
   ...t,
-  class: `${y} ${t.class || ""}`.trim(),
-  onCreated(r) {
-    t.options && C.setupSelectOptions(r, t.options);
+  class: `${k} ${t.class || ""}`.trim(),
+  onCreated(e) {
+    t.options && p.setupSelectOptions(e, t.options);
   }
-})), v = (t) => !t || isNaN(t) ? null : t, i = (t, r) => {
-  const e = t, o = 16, n = 2 * Math.PI * o, d = e / 100 * n, m = `
+})), P = (t) => !t || isNaN(t) ? null : t, i = (t, e) => {
+  const r = t, o = 16, n = 2 * Math.PI * o, d = r / 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
@@ -205,7 +205,7 @@ const a = {
 			stroke-dasharray="${n}"
 			stroke-dashoffset="${n - d}"
 			stroke-linecap="round"
-			class="${r}"
+			class="${e}"
 		/>
 		<!-- Percentage Text -->
 		<text
@@ -214,7 +214,7 @@ const a = {
 			class="text-[0.25em] font-medium fill-primary"
 			text-anchor="middle"
 			dominant-baseline="middle">
-			${e}%
+			${r}%
 		</text>
 	</svg>
 	`;
@@ -222,19 +222,19 @@ const a = {
     class: "circle-graph text-inherit",
     html: m
   });
-}, R = s((t) => {
-  const r = t.progress || 0, e = t.class || "", o = i(r, e);
+}, O = s((t) => {
+  const e = t.progress || 0, r = t.class || "", o = i(e, r);
   return l({
     class: "circle-graph-wrap",
     onSet: [
       t.prop,
-      (n) => (n = v(n), n ? i(n, e) : o)
+      (n) => (n = P(n), n ? i(n, r) : o)
     ]
   }, [o]);
-}), P = () => l({
+}), S = () => l({
   class: "absolute h-full rounded-full bg-primary transition-all duration-300",
   style: "width: [[progress]]%;"
-}), O = u(
+}), V = u(
   {
     /**
      * This will render the progress bar component.
@@ -243,7 +243,7 @@ const a = {
      */
     render() {
       return l({ class: "relative w-full h-4 rounded-full bg-muted" }, [
-        P()
+        S()
       ]);
     },
     /**
@@ -272,8 +272,8 @@ const a = {
      */
     uploadProgress(t) {
       if (t.lengthComputable) {
-        const e = Math.round(t.loaded * 100 / t.total);
-        this.set(e);
+        const r = Math.round(t.loaded * 100 / t.total);
+        this.set(r);
       }
     },
     /**
@@ -286,8 +286,8 @@ const a = {
       t < 0 && (t = 0), t > 100 && (t = 100), this.state.progress = t;
     }
   }
-), V = ({ class: t, shape: r = "rectangle", width: e = "w-full", height: o = "h-4" }) => l({
-  class: `bg-muted animate-pulse ${e} ${o} ${r === "circle" ? "rounded-full" : "rounded-md"} ${t || ""}`
+), D = ({ 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 = {
   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",
@@ -297,28 +297,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"
-}, S = (t) => g[t] || g.top, D = s(({ position: t = "top", content: r }, e) => {
-  const o = S(t);
-  return Array.isArray(e) === !1 && (e = [e]), l({ class: "relative group inline-block" }, [
-    ...e,
+}, E = (t) => g[t] || g.top, M = 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,
     // 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
 			`
-    }, r)
+    }, e)
   ]);
 });
 export {
-  F as B,
-  T as C,
-  L as F,
-  $ as L,
-  O as P,
-  I as R,
-  G as S,
-  D as T,
-  R as a,
-  V as b
+  T as B,
+  L as C,
+  I as F,
+  v as L,
+  V as P,
+  G as R,
+  R as S,
+  M as T,
+  O as a,
+  D as b
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@base-framework/ui",
-	"version": "1.0.95",
+	"version": "1.0.97",
 	"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": {