@base-framework/ui 1.0.203 → 1.0.205

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-Dn8TxE9o.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-9MdaFacr.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-Dn8TxE9o.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-9MdaFacr.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-Dn8TxE9o.js → tooltip-9MdaFacr.js}

@@ -1,7 +1,7 @@
-import { Span as g, Div as o, Legend as b, Fieldset as x, UseParent as u, Input as C } from "@base-framework/atoms";
-import { Atom as s, Html as h } from "@base-framework/base";
+import { Span as g, Div as o, Legend as b, 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 { a as d } from "./veil-D4dRxILB.js";
-import { f as y, e as p, g as k } from "./inputs-CMjx5-IX.js";
+import { f as k, e as w, g as $ } from "./inputs-CMjx5-IX.js";
 const a = {
   gray: {
     backgroundColor: "bg-gray-50",
@@ -78,52 +78,47 @@ const a = {
     textColor: "text-primary",
     ringColor: "ring-background"
   }
-}, w = (t) => a[t] || a.gray, $ = (t) => {
-  const { backgroundColor: r, textColor: e, ringColor: l } = w(t);
+}, v = (t) => a[t] || a.gray, P = (t) => {
+  const { backgroundColor: r, textColor: e, ringColor: l } = v(t);
   return `inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors ${r} ${e} ${l}`;
-}, T = s((t, r) => {
-  const e = $(t == null ? void 0 : t.type);
+}, G = s((t, r) => {
+  const e = P(t == null ? void 0 : t.type);
   return g({ ...t, class: e }, r);
-}), L = s((t, r) => {
+}), I = s((t, r) => {
   const e = t.margin ?? "my-5 mx-5", l = t.padding ?? "p-4";
   return t.hover && (t.class += " hover:shadow-lg hover:bg-muted/50"), o({
     ...t,
     class: `rounded-lg border bg-card text-card-foreground shadow-md min-w-[120px] min-h-[80px] ${e} ${l} ${t.class || ""}`
   }, r);
-}), v = s((t, r) => b({
+}), S = s((t, r) => b({
   ...t,
   class: ` font-medium bg-background -mt-4 -mx-1 px-2 py-2 ${t.class || ""}`
-}, r)), G = s((t, r) => {
+}, r)), R = s((t, r) => {
   const e = t.border === "full" ? "border rounded-md" : "border-t";
   return x({
     ...t,
     class: `p-6 ${e} ${t.class || ""}`
   }, [
-    t.legend && v(t.legend),
+    t.legend && S(t.legend),
     o({ class: "flex flex-auto flex-col space-y-6" }, r)
   ]);
-}), I = s((t, r) => {
+}), O = s((t, r) => {
   var e;
   return o({
     ...t,
-    class: `flex flex-col
-			sm:flex-row sm:items-center
-			${t.class || ""}`
+    class: `flex flex-col sm:flex-row ${t.class || ""}`
   }, [
-    // Label container: 1/4 width on sm+, full-width on mobile
     t.label && o({
       ...t.labelProps,
-      class: `w-full
-				sm:w-1/4
-				text-sm font-medium
-				${((e = t.labelProps) == null ? void 0 : e.class) || ""}`
-    }, [t.label]),
+      class: `w-full sm:w-1/3 space-y-2 ${((e = t.labelProps) == null ? void 0 : e.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
-    o({
-      class: "w-full sm:flex-1 flex flex-col space-y-4"
-    }, r)
+    o({ class: "w-full sm:flex-1 flex flex-col space-y-4" }, r)
   ]);
-}), R = d(
+}), V = d(
   {
     /**
      * This will create the initial state of the RangeSlider.
@@ -173,7 +168,7 @@ const a = {
             style: ["left: [[filledPercentage]]%", t]
           }),
           // Hidden Range Input
-          C({
+          y({
             type: "range",
             min: ["[[min]]", t],
             max: ["[[max]]", t],
@@ -181,8 +176,8 @@ const a = {
             // Incorporate your new classes here
             class: `
 						absolute w-full h-full opacity-0 cursor-pointer
-						${y}
-						${p}
+						${k}
+						${w}
 						${this.class || ""}
 					`.trim(),
             bind: this.bind,
@@ -195,14 +190,14 @@ const a = {
       ]);
     }
   }
-), O = s((t) => ({
+), D = s((t) => ({
   tag: "select",
   onCreated(r) {
-    t.options && h.setupSelectOptions(r, t.options);
+    t.options && p.setupSelectOptions(r, t.options);
   },
   ...t,
-  class: `${k} ${t.class || ""}`.trim()
-})), P = (t) => !t || isNaN(t) ? null : t, i = (t, r) => {
+  class: `${$} ${t.class || ""}`.trim()
+})), E = (t) => !t || isNaN(t) ? null : t, i = (t, r) => {
   const e = t, l = 16, n = 2 * Math.PI * l, m = e / 100 * n, f = `
 	<svg class="w-40 h-40 mx-auto" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
 		<!-- Background Circle -->
@@ -245,19 +240,19 @@ const a = {
     class: "circle-graph text-inherit",
     html: f
   });
-}, V = s((t) => {
+}, H = s((t) => {
   const r = t.progress || 0, e = t.class || "", l = i(r, e);
   return o({
     class: "circle-graph-wrap",
     onSet: [
       t.prop,
-      (n) => (n = P(n), n ? i(n, e) : l)
+      (n) => (n = E(n), n ? i(n, e) : l)
     ]
   }, [l]);
-}), S = () => u(({ state: t }) => o({
+}), B = () => u(({ state: t }) => o({
   class: "absolute h-full rounded-full bg-primary transition-all duration-300",
   style: ["width: [[progress]]%;", t]
-})), D = d(
+})), M = d(
   {
     /**
      * This will render the progress bar component.
@@ -266,7 +261,7 @@ const a = {
      */
     render() {
       return o({ class: "relative w-full h-4 rounded-full bg-muted" }, [
-        S()
+        B()
       ]);
     },
     /**
@@ -309,7 +304,7 @@ const a = {
       t < 0 && (t = 0), t > 100 && (t = 100), this.state.progress = t;
     }
   }
-), M = ({ class: t, shape: r = "rectangle", width: e = "w-full", height: l = "h-4" }) => o({
+), _ = ({ class: t, shape: r = "rectangle", width: e = "w-full", height: l = "h-4" }) => o({
   class: `bg-muted animate-pulse ${e} ${l} ${r === "circle" ? "rounded-full" : "rounded-md"} ${t || ""}`
 }), c = {
   top: "bottom-full left-1/2 transform -translate-x-1/2 mb-2",
@@ -320,8 +315,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) => c[t] || c.top, _ = s(({ position: t = "top", content: r }, e) => {
-  const l = E(t);
+}, F = (t) => c[t] || c.top, z = s(({ position: t = "top", content: r }, e) => {
+  const l = F(t);
   return Array.isArray(e) === !1 && (e = [e]), o({ class: "relative group inline-block" }, [
     ...e,
     // Tooltip box
@@ -334,15 +329,15 @@ const a = {
   ]);
 });
 export {
-  T as B,
-  L as C,
-  G as F,
-  v as L,
-  D as P,
-  R,
-  O as S,
-  _ as T,
-  I as a,
-  V as b,
-  M as c
+  G as B,
+  I as C,
+  R as F,
+  S as L,
+  M as P,
+  V as R,
+  D as S,
+  z as T,
+  O as a,
+  H as b,
+  _ as c
 };

package/package.json

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