@base-framework/ui 1.0.306 → 1.0.307

package/dist/index.es.js

@@ -5,7 +5,7 @@ import { C as F, d as B, D as P, c as k, E as M, F as v, H as x, I as N, M as f,
 import { Icons as G } from "./icons.es.js";
 import { A as E, B as V, C as j, w as q, J, y as z, z as K, E as Q, G as _, D as X, m as Y, n as Z, O as $, K as aa, v as ea, c as sa, a as oa, b as ta, Q as ra, l as na, g as ia, i as la, h as pa, j as da, e as ua, k as ma, F as ga, d as Ca, f as ca, L as Ta, x as ba, M as Da, o as Ia, N as Sa, P as Fa, s as Ba, t as Pa, S as ka, q as Ma, r as va, T as xa, H as Na, I as fa, p as ya, u as ha } from "./empty-state-vu_Mhyk4.js";
 import { A as Ua, b as Wa, C as Ha, D as wa, a as Aa, F as Ra, M as Ga, P as Oa, R as Ea, c as Va, g as ja, p as qa } from "./range-calendar-CnBylqhu.js";
-import { B as za, p as Ka, C as Qa, j as _a, D as Xa, m as Ya, k as Za, H as $a, I as ae, N as ee, O as se, P as oe, S as te, n as re, o as ne, x as ie, s as le, q as pe, r as de, T as ue, t as me, w as ge, u as Ce, v as ce, l as Te, U as be, W as De, f as Ie, h as Se, i as Fe, c as Be, d as Pe, b as ke, e as Me, a as ve, g as xe } from "./signature-panel-fsF3hz3L.js";
+import { B as za, p as Ka, C as Qa, j as _a, D as Xa, m as Ya, k as Za, H as $a, I as ae, N as ee, O as se, P as oe, S as te, n as re, o as ne, x as ie, s as le, q as pe, r as de, T as ue, t as me, w as ge, u as Ce, v as ce, l as Te, U as be, W as De, f as Ie, h as Se, i as Fe, c as Be, d as Pe, b as ke, e as Me, a as ve, g as xe } from "./signature-panel-DWBWqY8V.js";
 import { B as fe, I as ye, M as he, d as Le, e as Ue, g as We, N as He, b as we, a as Ae, f as Re, P as Ge, c as Oe, S as Ee, T as Ve } from "./mobile-nav-wrapper-CWqhZ0qz.js";
 import { B as qe, a as Je, C as ze, F as Ke, b as Qe, c as _e, M as Xe, P as Ye, S as Ze } from "./sidebar-menu-page-UmKsAvjb.js";
 import { A as as, F as es, M as ss, a as os, T as ts } from "./aside-template-sUm-F2f0.js";

package/dist/organisms.es.js

@@ -1,4 +1,4 @@
-import { B as s, p as n, C as t, j as o, D as r, m as l, k as i, H as d, I as b, N as u, O as v, P as g, S as p, n as T, o as D, x as N, s as k, q as C, r as c, T as B, t as M, w as m, u as y, v as W, l as h, U as S, W as H, f as P, h as U, i as x, c as I, d as f, b as L, e as O, a as F, g as G } from "./signature-panel-fsF3hz3L.js";
+import { B as s, p as n, C as t, j as o, D as r, m as l, k as i, H as d, I as b, N as u, O as v, P as g, S as p, n as T, o as D, x as N, s as k, q as C, r as c, T as B, t as M, w as m, u as y, v as W, l as h, U as S, W as H, f as P, h as U, i as x, c as I, d as f, b as L, e as O, a as F, g as G } from "./signature-panel-DWBWqY8V.js";
 import { b as R, C as j, D as q, a as z, F as A, M as E, R as J, c as K, p as Q } from "./range-calendar-CnBylqhu.js";
 import { B as X, I as Y, M as Z, d as _, e as $, g as aa, N as ea, b as sa, a as na, f as ta, P as oa, c as ra, S as la, T as ia } from "./mobile-nav-wrapper-CWqhZ0qz.js";
 export {

package/dist/{signature-panel-fsF3hz3L.js → signature-panel-DWBWqY8V.js}

@@ -1,5 +1,5 @@
-import { Button as k, Div as o, On as S, Span as I, Th as z, UseParent as F, I as E, Thead as G, Tr as Q, Table as L, P as y, Li as w, Time as X, Nav as m, Ul as g, Section as C, Canvas as q } from "@base-framework/atoms";
-import { Atom as h, Component as c, Data as B, DateTime as K, router as x, NavLink as T, DataTracker as N, Jot as V, base as R, Dom as W } from "@base-framework/base";
+import { Button as w, Div as o, On as S, Span as C, Th as z, UseParent as F, I as E, Thead as Q, Tr as G, Table as I, P as x, Li as y, Time as X, Nav as m, Ul as g, Section as L, Canvas as q } from "@base-framework/atoms";
+import { Atom as h, Component as c, Data as B, DateTime as K, router as k, NavLink as T, DataTracker as N, Jot as V, base as R, Dom as O } from "@base-framework/base";
 import { B as M, I as _ } from "./buttons-CHEs54Wl.js";
 import { Icons as D } from "./icons.es.js";
 import { TableBody as J, DataTableBody as Z, ScrollableTableBody as ee, List as te, IntervalTimer as se } from "@base-framework/organisms";
@@ -10,7 +10,7 @@ h((t, e) => ({
   ...t,
   children: e
 }));
-h(({ value: t, label: e }) => k({
+h(({ value: t, label: e }) => w({
   class: "inline-flex flex-auto items-center justify-center whitespace-nowrap rounded-md px-8 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
   onState: ["performance", { active: t }],
   dataSet: ["performance", ["state", t, "active"]],
@@ -58,7 +58,7 @@ const re = (t) => {
     { length: s },
     (i, n) => new Date(t, e - 1, a - s + n + 1)
   );
-}, he = (t, e, s) => Array.from({ length: s }, (a, i) => new Date(t, e + 1, i + 1)), O = (t, e) => {
+}, he = (t, e, s) => Array.from({ length: s }, (a, i) => new Date(t, e + 1, i + 1)), W = (t, e) => {
   const s = new Date(e, 0, 4), a = (s.getDay() + 6) % 7, i = new Date(s);
   i.setDate(s.getDate() - a);
   const n = new Date(i);
@@ -82,7 +82,7 @@ const re = (t) => {
   return a.getDate() === t && a.getMonth() === e && a.getFullYear() === s;
 }, fe = ({ day: t, month: e, year: s, weekNumber: a, selectWeek: i }) => {
   const n = ue(t, e, s);
-  return k({
+  return w({
     text: t || "",
     disabled: !t,
     class: `
@@ -115,7 +115,7 @@ const re = (t) => {
           class: "grid grid-cols-7 col-span-7 text-center text-muted-foreground items-center"
         },
         ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(
-          (r) => I({ class: "px-1 py-1", text: r })
+          (r) => C({ class: "px-1 py-1", text: r })
         )
       ),
       // Render each "week" row
@@ -168,7 +168,7 @@ const re = (t) => {
     icon: t === "Previous" ? D.chevron.single.left : D.chevron.single.right
   }
 ), pe = ({ next: t, previous: e }) => o({ class: "flex flex-auto min-h-12 text-sm font-medium relative justify-center items-center" }, [
-  I("[[monthName]] [[year]]"),
+  C("[[monthName]] [[year]]"),
   $({
     label: "Previous",
     click: e
@@ -193,7 +193,7 @@ class pt extends c {
    * @returns {Data}
    */
   setData() {
-    const e = /* @__PURE__ */ new Date(), s = this.selectedWeek || this.calculateCurrentWeek(e), a = O(s, e.getFullYear());
+    const e = /* @__PURE__ */ new Date(), s = this.selectedWeek || this.calculateCurrentWeek(e), a = W(s, e.getFullYear());
     return new B({
       monthName: this.getMonthName(a.getMonth()),
       year: a.getFullYear(),
@@ -276,7 +276,7 @@ class pt extends c {
    */
   selectWeek(e, s) {
     this.data.currentWeek = e;
-    const a = O(e, s);
+    const a = W(e, s);
     this.setDate(a.getMonth(), a.getFullYear(), a.getDate()), typeof this.selectedCallBack == "function" && this.selectedCallBack(e);
   }
   /**
@@ -299,25 +299,25 @@ class pt extends c {
 const be = (t, e) => {
   const s = t.toggleAllSelectedRows();
   e.state.checked = !s;
-}, xe = (t) => z({ class: `cursor-pointer py-3 px-4 text-base w-10 ${t.class || ""}` }, [
+}, ke = (t) => z({ class: `cursor-pointer py-3 px-4 text-base w-10 ${t.class || ""}` }, [
   F((e) => new ae({ class: "mr-2", onChange: (s, a) => be(e, a) }))
-]), ke = ({ align: t, sortable: e, key: s, label: a, sort: i, class: n }) => {
+]), we = ({ align: t, sortable: e, key: s, label: a, sort: i, class: n }) => {
   const l = t || "justify-start";
   return z({
     class: `cursor-pointer py-3 px-4 text-base ${n || ""}`,
     click: e && (() => i(s))
   }, [
     o({ class: `flex flex-auto w-full items-center ${l}` }, [
-      I(a),
+      C(a),
       e && E({ class: "ml-2", html: D.arrows.upDown })
     ])
   ]);
-}, P = (t) => G([
-  Q({
+}, P = (t) => Q([
+  G({
     class: "text-muted-foreground border-b",
     map: [
       t.headers,
-      (e) => e.label === "checkbox" ? xe({ toggle: t.toggle }) : ke({
+      (e) => e.label === "checkbox" ? ke({ toggle: t.toggle }) : we({
         align: e.align,
         sortable: e.sortable,
         key: e.key,
@@ -326,7 +326,7 @@ const be = (t, e) => {
       })
     ]
   })
-]), we = ({ key: t, rows: e, selectRow: s, rowItem: a, emptyState: i, skeleton: n, columnCount: l }) => new J({
+]), ye = ({ key: t, rows: e, selectRow: s, rowItem: a, emptyState: i, skeleton: n, columnCount: l }) => new J({
   cache: "list",
   key: t,
   items: e,
@@ -417,12 +417,12 @@ class U extends c {
     return o({ class: "w-full flex flex-auto flex-col" }, [
       S("hasItems", (a) => a === !1 && this.emptyState ? this.emptyState() : null),
       o({ class: `w-full rounded-md ${e} overflow-x-auto`, onSet: ["hasItems", { hidden: !1 }] }, [
-        L({ class: "w-full" }, [
+        I({ class: "w-full" }, [
           // @ts-ignore
           this.headers && P({ headers: this.headers, sort: (a) => this.sortRows(a) }),
           // @ts-ignore
           this.customHeader ?? null,
-          we({
+          ye({
             // @ts-ignore
             key: this.key,
             // @ts-ignore
@@ -501,7 +501,7 @@ class U extends c {
     this.data.selectedRows = [];
   }
 }
-const ye = (t) => new Z({
+const xe = (t) => new Z({
   cache: "list",
   loadMoreItems: t.loadMoreItems,
   offset: t.offset,
@@ -525,12 +525,12 @@ class ve extends U {
     return o({ class: "w-full flex flex-auto flex-col" }, [
       S("hasItems", (a) => a === !1 && this.emptyState ? this.emptyState() : null),
       o({ class: `w-full rounded-md ${e} overflow-x-auto`, onSet: ["hasItems", { hidden: !1 }] }, [
-        L({ class: "w-full" }, [
+        I({ class: "w-full" }, [
           // @ts-ignore
           this.headers && P({ headers: this.headers, sort: (a) => this.sortRows(a) }),
           // @ts-ignore
           this.customHeader ?? null,
-          ye({
+          xe({
             // @ts-ignore
             loadMoreItems: this.loadMoreItems,
             // @ts-ignore
@@ -608,7 +608,7 @@ class Se extends U {
     return o({ class: "w-full flex flex-auto flex-col" }, [
       S("hasItems", (a) => a === !1 && this.emptyState ? this.emptyState() : null),
       o({ class: `w-full rounded-md ${e} overflow-x-auto`, onSet: ["hasItems", { hidden: !1 }] }, [
-        L({ class: "w-full" }, [
+        I({ class: "w-full" }, [
           // @ts-ignore
           this.headers && P({ headers: this.headers, sort: (a) => this.sortRows(a) }),
           // @ts-ignore
@@ -651,7 +651,7 @@ class Se extends U {
     this.list.refresh();
   }
 }
-const xt = h((t) => new Se(
+const kt = h((t) => new Se(
   {
     cache: t.cache ?? "list",
     tableData: t.data,
@@ -669,45 +669,45 @@ const xt = h((t) => new Se(
     emptyState: t.emptyState,
     skeleton: t.skeleton
   }
-)), Ie = h(({ name: t, email: e }) => o({ class: "min-w-0 flex-auto" }, [
-  y({ class: "text-base font-semibold leading-6 m-0" }, t),
-  y({ class: "truncate text-sm leading-5 text-muted-foreground m-0" }, e)
-])), Ce = () => o({ class: "flex items-center gap-x-1.5" }, [
+)), Ce = h(({ name: t, email: e }) => o({ class: "min-w-0 flex-auto" }, [
+  x({ class: "text-base font-semibold leading-6 m-0" }, t),
+  x({ class: "truncate text-sm leading-5 text-muted-foreground m-0" }, e)
+])), Le = () => o({ class: "flex items-center gap-x-1.5" }, [
   o({ class: "flex-none rounded-full bg-emerald-500/20 p-1" }, [
     o({ class: "h-1.5 w-1.5 rounded-full bg-emerald-500" })
   ]),
-  y({ class: "text-xs leading-5 text-gray-500" }, "Online")
-]), Le = (t) => y({ class: "text-xs leading-5 text-muted-foreground" }, [
-  I("Last seen "),
+  x({ class: "text-xs leading-5 text-gray-500" }, "Online")
+]), Ie = (t) => x({ class: "text-xs leading-5 text-muted-foreground" }, [
+  C("Last seen "),
   X({ datetime: t }, "3h ago")
-]), Be = (t, e) => t === "online" ? Ce() : Le(e), Te = h(({ role: t, lastSeen: e, status: s }) => o({ class: "hidden shrink-0 sm:flex sm:flex-col sm:items-end" }, [
-  y({ class: "text-sm leading-6 m-0" }, t),
+]), Be = (t, e) => t === "online" ? Le() : Ie(e), Te = h(({ role: t, lastSeen: e, status: s }) => o({ class: "hidden shrink-0 sm:flex sm:flex-col sm:items-end" }, [
+  x({ class: "text-sm leading-6 m-0" }, t),
   Be(s, e)
-])), Me = (t) => t.split(" ").map((s) => s[0]).join(""), Pe = h((t) => w({ class: "fadeIn flex justify-between gap-x-6 py-4 px-4 rounded-md hover:bg-muted/50" }, [
+])), Me = (t) => t.split(" ").map((s) => s[0]).join(""), Pe = h((t) => y({ class: "fadeIn flex justify-between gap-x-6 py-4 px-4 rounded-md hover:bg-muted/50" }, [
   o({ class: "flex min-w-0 gap-x-4" }, [
     oe({ src: t.image, alt: t.name, fallbackText: Me(t.name) }),
-    Ie({ name: t.name, email: t.email })
+    Ce({ name: t.name, email: t.email })
   ]),
   Te({
     role: t.role,
     lastSeen: t.lastSeen,
     status: t.status
   })
-])), kt = h((t) => new te({
+])), wt = h((t) => new te({
   cache: "list",
   key: "name",
   items: t.users,
   role: "list",
   class: "divide-y divide-border",
   rowItem: Pe
-})), Re = (t, e) => e.includes(t), We = (t, e, s) => t.exact ? s === e : Re(e, s), Oe = ({ text: t, href: e, exact: s, hidden: a }) => new T({
+})), Re = (t, e) => e.includes(t), Oe = (t, e, s) => t.exact ? s === e : Re(e, s), We = ({ text: t, href: e, exact: s, hidden: a }) => new T({
   text: t,
   href: e,
   exact: s,
   dataSet: ["selected", ["state", !0, "active"]],
   class: `${a ? "hidden" : "inline-flex"} items-center justify-center whitespace-nowrap px-3 py-1.5 text-sm font-medium transition-all rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring focus-visible:ring-offset-background hover:bg-primary hover:text-primary-foreground disabled:opacity-50 disabled:pointer-events-none data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-sm`
 });
-class wt extends c {
+class yt extends c {
   /**
    * This will declare the props for the compiler.
    *
@@ -735,7 +735,7 @@ class wt extends c {
           class: "flex gap-x-4",
           map: [this.options, (e) => this.addLink(e)],
           watch: {
-            value: ["[[path]]", x.data],
+            value: ["[[path]]", k.data],
             callBack: this.updateLinks.bind(this)
           }
         })
@@ -748,7 +748,7 @@ class wt extends c {
    * @returns {void}
    */
   afterSetup() {
-    const e = x.data.path;
+    const e = k.data.path;
     this.updateLinks(e);
   }
   /**
@@ -763,7 +763,7 @@ class wt extends c {
     for (const a of this.links) {
       if (!a.rendered)
         continue;
-      We(a, a.getLinkPath(), e) ? (this.updateLink(a, !0), s = !0) : this.updateLink(a, !1);
+      Oe(a, a.getLinkPath(), e) ? (this.updateLink(a, !0), s = !0) : this.updateLink(a, !1);
     }
     !s && this.links[0] && this.updateLink(this.links[0], !0);
   }
@@ -793,7 +793,7 @@ class wt extends c {
    * @returns {object}
    */
   addLink({ label: e, href: s, exact: a, hidden: i }) {
-    const n = Oe({ text: e, href: s, exact: a, hidden: i });
+    const n = We({ text: e, href: s, exact: a, hidden: i });
     return this.links.push(n), n;
   }
   /**
@@ -805,7 +805,7 @@ class wt extends c {
     this.links = [];
   }
 }
-const yt = h((t) => {
+const xt = h((t) => {
   const e = t.margin || "m-4 ml-0";
   return t.allowHistory = t.allowHistory === !0, o({ class: `flex-none ${e}` }, [
     M({ variant: "back", class: "ghost", ...t })
@@ -1032,7 +1032,7 @@ class Dt extends j {
     this.container = e, this.initialize();
   }
 }
-const $e = h(({ index: t, click: e, state: s }, a) => w({
+const $e = h(({ index: t, click: e, state: s }, a) => y({
   class: "p-2 cursor-pointer hover:bg-muted/50",
   onState: [
     [s, "selectedIndex", {
@@ -1196,13 +1196,13 @@ const $e = h(({ index: t, click: e, state: s }, a) => w({
       ]);
     }
   }
-), je = (t) => w(
+), je = (t) => y(
   {
     class: "inline-flex flex-auto items-center justify-center whitespace-nowrap rounded-sm text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-sm",
     dataSet: ["selected", ["state", t.value, "active"]]
   },
   [
-    k({
+    w({
       class: "flex flex-auto justify-center items-center px-3 py-1.5 rounded-md",
       onSet: ["selected", { selected: t.value }],
       click: (e) => t.callBack(t.value)
@@ -1211,7 +1211,7 @@ const $e = h(({ index: t, click: e, state: s }, a) => w({
 ), Ae = (t, e) => (t.callBack = e, je(t)), He = (t) => m({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${t.class}` }, [
   g({ class: "flex flex-auto flex-row", map: [t.options, (e) => Ae(e, t.callBack)] })
 ]);
-class It extends c {
+class Ct extends c {
   /**
    * This will declare the props for the compiler.
    *
@@ -1233,7 +1233,7 @@ class It extends c {
         options: this.options,
         callBack: e
       }),
-      C({
+      L({
         class: "tab-content",
         onState: ["selected", this.updateContent.bind(this)]
       })
@@ -1298,13 +1298,13 @@ class It extends c {
     };
   }
 }
-const Ye = (t) => w(
+const Ye = (t) => y(
   {
     class: "inline-flex flex-auto items-center justify-center whitespace-nowrap rounded-sm text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-sm",
     dataSet: ["selected", ["state", t.value, "active"]]
   },
   [
-    k({
+    w({
       class: "flex flex-auto justify-center items-center px-3 py-1.5 rounded-md disabled:opacity-50 disabled:cursor-not-allowed",
       onSet: ["selected", { selected: t.value }],
       click: (e) => t.callBack(t.value),
@@ -1314,7 +1314,7 @@ const Ye = (t) => w(
 ), Fe = (t, e) => (t.callBack = e, Ye(t)), Ee = (t) => m({ class: `tab items-center justify-center rounded-md bg-muted p-1 text-muted-foreground ${t.class}` }, [
   g({ class: "flex flex-auto flex-row", map: [t.options, (e) => Fe(e, t.callBack)] })
 ]);
-class Ct extends c {
+class Lt extends c {
   /**
    * This will declare the props for the compiler.
    *
@@ -1356,9 +1356,9 @@ class Ct extends c {
     };
   }
 }
-const Ge = (t, e) => new RegExp(`${t}($|/|\\.).*`).test(e), Qe = (t, e) => {
+const Qe = (t, e) => new RegExp(`${t}($|/|\\.).*`).test(e), Ge = (t, e) => {
   const s = t.getLinkPath();
-  return t.exact ? e === s : Ge(s, e);
+  return t.exact ? e === s : Qe(s, e);
 }, Xe = ({ text: t, href: e, exact: s }) => new T({
   text: t,
   href: e,
@@ -1392,7 +1392,7 @@ class qe extends c {
         class: "flex flex-auto flex-row",
         map: [this.options, (e) => this.addLink(e)],
         watch: {
-          value: ["[[path]]", x.data],
+          value: ["[[path]]", k.data],
           callBack: this.updateLinks.bind(this)
         }
       })
@@ -1404,7 +1404,7 @@ class qe extends c {
    * @returns {void}
    */
   afterSetup() {
-    const e = x.data.path;
+    const e = k.data.path;
     this.updateLinks(e);
   }
   /**
@@ -1417,7 +1417,7 @@ class qe extends c {
     let s = !1, a = this.links[0];
     this.deactivateAllLinks();
     for (const i of this.links)
-      if (i.rendered !== !1 && (s = Qe(i, e), s === !0)) {
+      if (i.rendered !== !1 && (s = Ge(i, e), s === !0)) {
         this.updateLink(i, !0);
         break;
       }
@@ -1461,7 +1461,7 @@ class qe extends c {
     this.links = [];
   }
 }
-class Lt extends c {
+class It extends c {
   /**
    * This will declare the props for the compiler.
    *
@@ -1481,7 +1481,7 @@ class Lt extends c {
         class: this.class,
         options: this.options
       }),
-      C({
+      L({
         class: "tab-content",
         switch: this.addGroup()
       })
@@ -1507,13 +1507,13 @@ class Lt extends c {
     return s;
   }
 }
-const Ke = (t) => w(
+const Ke = (t) => y(
   {
     class: "relative inline-flex items-center justify-center whitespace-nowrap text-sm font-medium text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-primary after:transition-all after:duration-200 after:scale-x-0 data-[state=active]:after:scale-x-100",
     dataSet: ["selected", ["state", t.value, "active"]]
   },
   [
-    k({
+    w({
       class: "flex flex-auto justify-center items-center px-4 py-3",
       onSet: ["selected", { selected: t.value }],
       click: (e) => t.callBack(t.value)
@@ -1544,32 +1544,19 @@ class Bt extends c {
         options: this.options,
         callBack: e
       }),
-      C({
+      L({
         class: "tab-content pt-6",
-        switch: this.addGroup()
+        onState: ["selected", this.updateContent.bind(this)]
       })
     ]);
   }
   /**
-   * This will set up the component.
-   *
-   * @returns {void}
-   */
-  beforeSetup() {
-    this.selectedIndex = 0, this.setSelectedIndex();
-  }
-  /**
-   * This will set the selected index.
+   * This will get the first value.
    *
-   * @returns {void}
+   * @returns {*}
    */
-  setSelectedIndex() {
-    const e = this.options;
-    for (let s = 0, a = e.length; s < a; s++)
-      if (e[s].selected === !0) {
-        this.selectedIndex = s;
-        break;
-      }
+  getFirstValue() {
+    return this.options[0]?.value;
   }
   /**
    * This will select an option.
@@ -1578,49 +1565,48 @@ class Bt extends c {
    * @returns {void}
    */
   select(e) {
-    this.setSelected(e), this.onSelect && this.onSelect(e, this.selectedIndex);
+    this.state.selected = e;
   }
   /**
-   * This will set the selected option.
+   * This will update the content.
    *
    * @param {*} value
-   * @returns {void}
+   * @returns {object}
    */
-  setSelected(e) {
+  updateContent(e) {
     const s = this.options;
-    for (let a = 0, i = s.length; a < i; a++)
-      if (s[a].value === e) {
-        this.selectedIndex = a;
-        break;
-      }
+    if (!s || s.length < 1)
+      return;
+    const a = s[0];
+    for (const i of s)
+      if (i.value === e)
+        return i.component;
+    return a.component;
   }
   /**
-   * This will add the group.
+   * This will setup the states.
    *
-   * @returns {array}
+   * @returns {object}
    */
-  addGroup() {
-    let e;
-    const s = [], a = this.options;
-    for (let i = 0, n = a.length; i < n; i++)
-      e = a[i], s.push(
-        {
-          uri: e.value,
-          component: e.component,
-          title: e.title || null,
-          persist: !0
+  setupStates() {
+    const e = this.onSelect, s = typeof e;
+    return {
+      selected: {
+        state: this.getFirstValue(),
+        callBack(a) {
+          s === "function" && e(a);
         }
-      );
-    return s;
+      }
+    };
   }
 }
-const Je = (t) => w(
+const Je = (t) => y(
   {
     class: "relative inline-flex items-center justify-center whitespace-nowrap text-sm font-medium text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-primary after:transition-all after:duration-200 after:scale-x-0 data-[state=active]:after:scale-x-100",
     dataSet: ["selected", ["state", t.value, "active"]]
   },
   [
-    k({
+    w({
       class: "flex flex-auto justify-center items-center px-4 py-3 disabled:opacity-50 disabled:cursor-not-allowed",
       onSet: ["selected", { selected: t.value }],
       click: (e) => t.callBack(t.value),
@@ -1652,27 +1638,6 @@ class Tt extends c {
       callBack: e
     });
   }
-  /**
-   * This will set up the component.
-   *
-   * @returns {void}
-   */
-  beforeSetup() {
-    this.selectedIndex = 0, this.setSelectedIndex();
-  }
-  /**
-   * This will set the selected index.
-   *
-   * @returns {void}
-   */
-  setSelectedIndex() {
-    const e = this.options;
-    for (let s = 0, a = e.length; s < a; s++)
-      if (e[s].selected === !0) {
-        this.selectedIndex = s;
-        break;
-      }
-  }
   /**
    * This will select an option.
    *
@@ -1680,21 +1645,17 @@ class Tt extends c {
    * @returns {void}
    */
   select(e) {
-    this.setSelected(e), this.onSelect && this.onSelect(e, this.selectedIndex);
+    this.state.selected = e, typeof this.onSelect == "function" && this.onSelect(e, this.parent);
   }
   /**
-   * This will set the selected option.
+   * This will setup the states.
    *
-   * @param {*} value
-   * @returns {void}
+   * @returns {object}
    */
-  setSelected(e) {
-    const s = this.options;
-    for (let a = 0, i = s.length; a < i; a++)
-      if (s[a].value === e) {
-        this.selectedIndex = a;
-        break;
-      }
+  setupStates() {
+    return {
+      selected: this.options[0]?.value || null
+    };
   }
 }
 const tt = (t, e) => new RegExp(`${t}($|/|\\.).*`).test(e), st = (t, e) => {
@@ -1733,7 +1694,7 @@ class it extends c {
         class: "flex flex-row items-center",
         map: [this.options, (e) => this.addLink(e)],
         watch: {
-          value: ["[[path]]", x.data],
+          value: ["[[path]]", k.data],
           callBack: this.updateLinks.bind(this)
         }
       })
@@ -1745,7 +1706,7 @@ class it extends c {
    * @returns {void}
    */
   afterSetup() {
-    const e = x.data.path;
+    const e = k.data.path;
     this.updateLinks(e);
   }
   /**
@@ -1822,7 +1783,7 @@ class Mt extends c {
         class: this.class,
         options: this.options
       }),
-      C({
+      L({
         class: "tab-content pt-6",
         switch: this.addGroup()
       })
@@ -1984,7 +1945,7 @@ class nt extends c {
    * @returns {void}
    */
   noScaleResize() {
-    const e = W.getSize(container);
+    const e = O.getSize(container);
     this.width = canvas.width = e.width, this.height = canvas.height = e.height;
   }
   /**
@@ -1994,7 +1955,7 @@ class nt extends c {
    * @returns {void}
    */
   scale() {
-    const e = this.canvas, s = this.container, a = W.getSize(s), i = this.targetSize, n = i.width, l = i.height;
+    const e = this.canvas, s = this.container, a = O.getSize(s), i = this.targetSize, n = i.width, l = i.height;
     let d = n + "px", r = l + "px";
     if (this.width = e.width = n, this.height = e.height = l, a.width !== 0 && a.height !== 0) {
       const f = a.width, p = a.height, u = f / n, b = p / l, v = Math.min(u, b);
@@ -2153,20 +2114,20 @@ class Pt extends c {
   }
 }
 export {
-  yt as B,
-  xe as C,
-  we as D,
-  ke as H,
+  xt as B,
+  ke as C,
+  ye as D,
+  we as H,
   Dt as I,
-  wt as N,
+  yt as N,
   j as O,
   ft as P,
-  xt as S,
+  kt as S,
   P as T,
   Pe as U,
   pt as W,
   he as a,
-  O as b,
+  W as b,
   ce as c,
   gt as d,
   mt as e,
@@ -2176,14 +2137,14 @@ export {
   pe as i,
   U as j,
   bt as k,
-  kt as l,
+  wt as l,
   vt as m,
   St as n,
   Ne as o,
-  It as p,
-  Ct as q,
+  Ct as p,
+  Lt as q,
   qe as r,
-  Lt as s,
+  It as s,
   Bt as t,
   Tt as u,
   it as v,

package/dist/types/components/organisms/tabs/underlined-button-tab.d.ts

@@ -29,13 +29,12 @@ export class UnderlinedButtonTab extends Component {
      * @returns {object}
      */
     render(): object;
-    selectedIndex: number;
     /**
-     * This will set the selected index.
+     * This will get the first value.
      *
-     * @returns {void}
+     * @returns {*}
      */
-    setSelectedIndex(): void;
+    getFirstValue(): any;
     /**
      * This will select an option.
      *
@@ -44,18 +43,18 @@ export class UnderlinedButtonTab extends Component {
      */
     select(value: any): void;
     /**
-     * This will set the selected option.
+     * This will update the content.
      *
      * @param {*} value
-     * @returns {void}
+     * @returns {object}
      */
-    setSelected(value: any): void;
+    updateContent(value: any): object;
     /**
-     * This will add the group.
+     * This will setup the states.
      *
-     * @returns {array}
+     * @returns {object}
      */
-    addGroup(): any[];
+    setupStates(): object;
 }
 export default UnderlinedButtonTab;
 import { Component } from "@base-framework/base";

package/dist/types/components/organisms/tabs/underlined-tab-group.d.ts

@@ -30,13 +30,6 @@ export class UnderlinedTabGroup extends Component {
      * @returns {object}
      */
     render(): object;
-    selectedIndex: number;
-    /**
-     * This will set the selected index.
-     *
-     * @returns {void}
-     */
-    setSelectedIndex(): void;
     /**
      * This will select an option.
      *
@@ -45,12 +38,11 @@ export class UnderlinedTabGroup extends Component {
      */
     select(value: any): void;
     /**
-     * This will set the selected option.
+     * This will setup the states.
      *
-     * @param {*} value
-     * @returns {void}
+     * @returns {object}
      */
-    setSelected(value: any): void;
+    setupStates(): object;
 }
 export default UnderlinedTabGroup;
 import { Component } from '@base-framework/base';

package/package.json

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