@base-framework/ui 1.0.207 → 1.0.208

package/dist/atoms.es.js

@@ -1,4 +1,4 @@
-import { B as e, C as t, b as o, F as n, a as r, L as p, P as u, R as I, S as i, c as l, T as d } from "./tooltip-CvlontVf.js";
+import { B as e, C as t, b as o, F as n, a as r, L as p, P as u, R as I, S as i, c as l, T as d } from "./tooltip-Ssw4NmQM.js";
 import { B as T, I as c, L as x } from "./buttons-Cm9etaEG.js";
 import { C, d as g, D as F, c as b, E as f, F as L, H as P, I as R, M as S, N as h, P as k, R as D, T as V, a as E, b as G, U as H, W as M } from "./inputs-CMjx5-IX.js";
 import { V as U, a as W } from "./veil-D4dRxILB.js";

package/dist/index.es.js

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

package/dist/{tooltip-CvlontVf.js → tooltip-Ssw4NmQM.js}

@@ -79,45 +79,45 @@ const a = {
     ringColor: "ring-background"
   }
 }, v = (t) => a[t] || a.gray, P = (t) => {
-  const { backgroundColor: r, textColor: e, ringColor: o } = v(t);
-  return `inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors ${r} ${e} ${o}`;
-}, G = s((t, r) => {
-  const e = P(t == null ? void 0 : t.type);
-  return g({ ...t, class: e }, r);
-}), I = s((t, r) => {
-  const e = t.margin ?? "my-5 mx-5", o = t.padding ?? "p-4";
+  const { backgroundColor: e, textColor: r, ringColor: o } = v(t);
+  return `inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors ${e} ${r} ${o}`;
+}, G = s((t, e) => {
+  const r = P(t == null ? void 0 : t.type);
+  return g({ ...t, class: r }, e);
+}), I = s((t, e) => {
+  const r = t.margin ?? "my-5 mx-5", o = t.padding ?? "p-4";
   return t.hover && (t.class += " hover:shadow-lg hover:bg-muted/50"), 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 = s((t, r) => f({
+    class: `rounded-lg border bg-card text-card-foreground shadow-md min-w-[120px] min-h-[80px] ${r} ${o} ${t.class || ""}`
+  }, e);
+}), S = s((t, e) => f({
   ...t,
   class: ` font-medium bg-background -mt-4 -mx-1 px-2 py-2 ${t.class || ""}`
-}, r)), R = s((t, r) => {
-  const e = t.border === "full" ? "border rounded-md" : "border-t";
+}, e)), R = s((t, e) => {
+  const r = t.border === "full" ? "border rounded-md" : "border-t";
   return x({
     ...t,
-    class: `p-6 ${e} ${t.class || ""}`
+    class: `p-6 ${r} ${t.class || ""}`
   }, [
     t.legend && S(t.legend),
-    l({ class: "flex flex-auto flex-col space-y-6" }, r)
+    l({ class: "flex flex-auto flex-col space-y-6" }, e)
   ]);
-}), O = s((t, r) => {
+}), O = s((t, e) => {
   var o;
-  const e = t.border === !0 ? "border-t" : "";
+  const r = t.border === !0 ? "border-t" : "";
   return l({
     ...t,
-    class: `flex flex-col sm:flex-row pt-8 ${e} ${t.class || ""}`
+    class: `grid grid-cols-1 gap-y-4 sm:grid-cols-[1fr,2fr] sm:gap-x-6 pt-8 ${r} ${t.class || ""}`
   }, [
     t.label && l({
       ...t.labelProps,
-      class: `w-full sm:w-1/3 space-y-2 ${((o = t.labelProps) == null ? void 0 : o.class) || ""}`
+      class: `space-y-1 ${((o = t.labelProps) == null ? void 0 : o.class) || ""}`
     }, [
       C({ class: "text-base" }, t.label),
       t.description && h({ class: "text-sm text-muted-foreground" }, t.description)
     ]),
     // Controls container: grows to fill remaining space, spacing between items
-    l({ class: "w-full sm:flex-1 flex flex-col space-y-4" }, r)
+    l({ class: "flex flex-col space-y-4" }, e)
   ]);
 }), V = d(
   {
@@ -182,9 +182,9 @@ const a = {
 						${this.class || ""}
 					`.trim(),
             bind: this.bind,
-            input: (r) => {
-              const e = Number(r.target.value);
-              this.state.value = e, this.state.filledPercentage = this.getFillPercentage(e), typeof this.change == "function" && this.change(e);
+            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);
             }
           })
         ])
@@ -193,13 +193,13 @@ const a = {
   }
 ), D = s((t) => ({
   tag: "select",
-  onCreated(r) {
-    t.options && p.setupSelectOptions(r, t.options);
+  onCreated(e) {
+    t.options && p.setupSelectOptions(e, t.options);
   },
   ...t,
   class: `${$} ${t.class || ""}`.trim()
-})), E = (t) => !t || isNaN(t) ? null : t, i = (t, r) => {
-  const e = t, o = 16, n = 2 * Math.PI * o, m = e / 100 * n, b = `
+})), E = (t) => !t || isNaN(t) ? null : t, i = (t, e) => {
+  const r = t, o = 16, n = 2 * Math.PI * o, m = r / 100 * n, b = `
 	<svg class="w-40 h-40 mx-auto" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
 		<!-- Background Circle -->
 		<circle
@@ -224,7 +224,7 @@ const a = {
 			stroke-dasharray="${n}"
 			stroke-dashoffset="${n - m}"
 			stroke-linecap="round"
-			class="${r}"
+			class="${e}"
 		/>
 		<!-- Percentage Text -->
 		<text
@@ -233,7 +233,7 @@ const a = {
 			class="text-[0.25em] font-medium fill-primary"
 			text-anchor="middle"
 			dominant-baseline="middle">
-			${e}%
+			${r}%
 		</text>
 	</svg>
 	`;
@@ -242,12 +242,12 @@ const a = {
     html: b
   });
 }, H = s((t) => {
-  const r = t.progress || 0, e = t.class || "", o = i(r, e);
+  const e = t.progress || 0, r = t.class || "", o = i(e, r);
   return l({
     class: "circle-graph-wrap",
     onSet: [
       t.prop,
-      (n) => (n = E(n), n ? i(n, e) : o)
+      (n) => (n = E(n), n ? i(n, r) : o)
     ]
   }, [o]);
 }), B = () => u(({ state: t }) => l({
@@ -291,8 +291,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);
       }
     },
     /**
@@ -305,8 +305,8 @@ const a = {
       t < 0 && (t = 0), t > 100 && (t = 100), this.state.progress = t;
     }
   }
-), _ = ({ 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 || ""}`
+), _ = ({ 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 || ""}`
 }), c = {
   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",
@@ -316,17 +316,17 @@ 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"
-}, F = (t) => c[t] || c.top, z = s(({ position: t = "top", content: r }, e) => {
+}, F = (t) => c[t] || c.top, z = s(({ position: t = "top", content: e }, r) => {
   const o = F(t);
-  return Array.isArray(e) === !1 && (e = [e]), l({ class: "relative group inline-block" }, [
-    ...e,
+  return Array.isArray(r) === !1 && (r = [r]), l({ class: "relative group inline-block" }, [
+    ...r,
     // Tooltip box
     g({
       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 {

package/package.json

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