@base-framework/ui 1.0.98 → 1.0.99

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-VG86HlGW.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-B8pX3aIp.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-VG86HlGW.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-B8pX3aIp.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";

package/dist/{tooltip-VG86HlGW.js → tooltip-B8pX3aIp.js}

@@ -1,7 +1,7 @@
 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 { Atom as s, Data as p, Html as h } from "@base-framework/base";
 import { a as u } from "./veil-D4dRxILB.js";
-import { f as h, e as y, g as k } from "./inputs-nzivW9Dr.js";
+import { f as y, e as k, g as w } from "./inputs-nzivW9Dr.js";
 const a = {
   gray: {
     backgroundColor: "bg-gray-50",
@@ -78,32 +78,41 @@ const a = {
     textColor: "text-primary",
     ringColor: "ring-background"
   }
-}, w = (t) => a[t] || a.gray, $ = (t) => {
-  const { backgroundColor: e, textColor: r, ringColor: o } = w(t);
+}, $ = (t) => a[t] || a.gray, v = (t) => {
+  const { backgroundColor: e, textColor: r, ringColor: o } = $(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);
+}, L = s((t, e) => {
+  const r = v(t == null ? void 0 : t.type);
   return c({ ...t, class: r }, e);
-}), L = s((t, e) => {
+}), I = 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] ${r} ${o} ${t.class || ""}`
   }, e);
-}), v = s((t, e) => b({
+}), P = s((t, e) => b({
   ...t,
   class: ` font-medium bg-background -mt-4 -mx-1 px-2 py-2 ${t.class || ""}`
-}, e)), I = s((t, e) => {
+}, e)), D = s((t, e) => {
   const r = t.border === "full" ? "border rounded-md" : "border-t";
   return f({
     ...t,
     class: `p-6 ${r} ${t.class || ""}`
   }, [
-    t.legend && v(t.legend),
+    t.legend && P(t.legend),
     l({ class: "flex flex-auto flex-col space-y-6" }, e)
   ]);
 }), G = u(
   {
+    /**
+     * This will set the data for the RangeSlider component.
+     *
+     * @return {Data}
+     */
+    setData() {
+      const t = this.data || new p({ fillPercentage: 0 });
+      return t.fillPercentage = this.getFillPercentage(this.value ?? 0), t;
+    },
     /**
      * This will create the initial state of the RangeSlider.
      *
@@ -113,8 +122,7 @@ const a = {
       return {
         value: this.value ?? 0,
         min: this.min ?? 0,
-        max: this.max ?? 100,
-        filledPercentage: this.getFillPercentage(this.value)
+        max: this.max ?? 100
       };
     },
     /**
@@ -139,7 +147,7 @@ const a = {
           // Filled Track
           (l({
             class: "absolute h-2 bg-primary rounded-full",
-            style: ["width: [[filledPercentage]]%", t]
+            style: "width: [[filledPercentage]]%"
           }), // Thumb
           l({
             class: `
@@ -148,7 +156,7 @@ const a = {
 						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]]%"
           }), // Hidden Range Input
           C({
             type: "range",
@@ -158,14 +166,14 @@ const a = {
             // Incorporate your new classes here
             class: `
 						absolute w-full h-full opacity-0 cursor-pointer
-						${h}
 						${y}
+						${k}
 						${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);
+              this.state.value = r, this.data.filledPercentage = this.getFillPercentage(r), typeof this.change == "function" && this.change(r);
             }
           }))
         ))
@@ -175,11 +183,11 @@ const a = {
 ), R = s((t) => ({
   tag: "select",
   ...t,
-  class: `${k} ${t.class || ""}`.trim(),
+  class: `${w} ${t.class || ""}`.trim(),
   onCreated(e) {
-    t.options && p.setupSelectOptions(e, t.options);
+    t.options && h.setupSelectOptions(e, t.options);
   }
-})), P = (t) => !t || isNaN(t) ? null : t, i = (t, e) => {
+})), S = (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 -->
@@ -228,10 +236,10 @@ const a = {
     class: "circle-graph-wrap",
     onSet: [
       t.prop,
-      (n) => (n = P(n), n ? i(n, r) : o)
+      (n) => (n = S(n), n ? i(n, r) : o)
     ]
   }, [o]);
-}), S = () => l({
+}), E = () => l({
   class: "absolute h-full rounded-full bg-primary transition-all duration-300",
   style: "width: [[progress]]%;"
 }), V = u(
@@ -243,7 +251,7 @@ const a = {
      */
     render() {
       return l({ class: "relative w-full h-4 rounded-full bg-muted" }, [
-        S()
+        E()
       ]);
     },
     /**
@@ -286,7 +294,7 @@ const a = {
       t < 0 && (t = 0), t > 100 && (t = 100), this.state.progress = t;
     }
   }
-), D = ({ class: t, shape: e = "rectangle", width: r = "w-full", height: o = "h-4" }) => l({
+), M = ({ 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",
@@ -297,8 +305,8 @@ 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, M = s(({ position: t = "top", content: e }, r) => {
-  const o = E(t);
+}, B = (t) => g[t] || g.top, _ = s(({ position: t = "top", content: e }, r) => {
+  const o = B(t);
   return Array.isArray(r) === !1 && (r = [r]), l({ class: "relative group inline-block" }, [
     ...r,
     // Tooltip box
@@ -311,14 +319,14 @@ const a = {
   ]);
 });
 export {
-  T as B,
-  L as C,
-  I as F,
-  v as L,
+  L as B,
+  I as C,
+  D as F,
+  P as L,
   V as P,
   G as R,
   R as S,
-  M as T,
+  _ as T,
   O as a,
-  D as b
+  M as b
 };

package/package.json

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