@base-framework/ui 1.0.207 → 1.0.209

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/calendar-BFwF3fNk.js

@@ -0,0 +1,501 @@
+import { Div as i, Img as j, Span as P, Button as I, OnState as W } from "@base-framework/atoms";
+import { Component as N, Data as Y, Atom as z, DateTime as B } from "@base-framework/base";
+import { B as m } from "./buttons-Cm9etaEG.js";
+import { Icons as S } from "./icons.es.js";
+const H = (e, t) => {
+  const n = e ? e.getBoundingClientRect() : { top: 0, bottom: 0, left: 0 }, s = t.getBoundingClientRect(), a = 10, r = globalThis.scrollX, l = globalThis.scrollY;
+  let c = n.left + r, g = n.bottom + l;
+  const d = globalThis.innerHeight - n.bottom, h = n.top;
+  return c + s.width > globalThis.innerWidth && (c = globalThis.innerWidth - s.width - a), d < s.height && h > d ? g = n.top + l - s.height - a : d < s.height && (g = n.bottom + l - (s.height - d) - a), { x: c, y: g };
+};
+class ht extends N {
+  /**
+   * This will set up the data.
+   *
+   * @returns {object}
+   */
+  setData() {
+    const t = this.parent.data || new Y();
+    return t.set({
+      position: { x: 0, y: 0 }
+    }), t;
+  }
+  /**
+   * This will get the class size.
+   *
+   * @returns {string}
+   */
+  getSize() {
+    switch (this.size || "lg") {
+      // @ts-ignore
+      case "sm":
+        return "w-48";
+      // @ts-ignore
+      case "md":
+        return "w-64";
+      case "lg":
+        return "w-[250px]";
+      // @ts-ignore
+      case "xl":
+        return "w-96";
+      // @ts-ignore
+      case "2xl":
+        return "w-[400px]";
+      // @ts-ignore
+      case "fit":
+        return "w-fit";
+      // @ts-ignore
+      case "full":
+        return "w-full";
+    }
+  }
+  /**
+   * This will render the modal component.
+   *
+   * @returns {object}
+   */
+  render() {
+    const t = this.getSize();
+    return i({
+      class: `absolute inset-auto fadeIn mt-2 rounded-md p-0 shadow-lg bg-popover min-h-12 backdrop:bg-transparent text-inherit r z-30 ${t}`,
+      popover: "manual",
+      toggle: (n, { state: s }) => n.newState === "closed" ? s.open = !1 : null,
+      style: "top: [[position.y]]px; left: [[position.x]]px"
+    }, this.children);
+  }
+  /**
+   * This will setup the states.
+   *
+   * @returns {object}
+   */
+  setupStates() {
+    return {
+      open: {
+        id: this.parent.getId(),
+        callBack: (s) => {
+          this.state.open === !1 && this.destroy();
+        }
+      }
+    };
+  }
+  /**
+   * Updates the dropdown position.
+   *
+   * @returns {void}
+   */
+  updatePosition() {
+    const t = this.button ?? null, n = this.panel, s = H(t, n);
+    this.data.position = s;
+  }
+  /**
+   * This will run after the setup.
+   *
+   * @returns {void}
+   */
+  afterSetup() {
+    this.panel.showPopover(), this.updatePosition();
+  }
+  /**
+   * This will check if the element clicked was in the
+   * component of the button.
+   *
+   * @param {object} element
+   * @returns {boolean}
+   */
+  isOutsideClick(t) {
+    return !this.panel.contains(t) && this.button && !this.button.contains(t);
+  }
+  /**
+   * This will set up the events.
+   *
+   * @returns {array}
+   */
+  setupEvents() {
+    return [
+      ["click", document, (t) => {
+        this.isOutsideClick(t.target) && (this.state.open = !1);
+      }],
+      ["resize", globalThis, (t) => this.updatePosition()],
+      ["scroll", document, (t) => this.updatePosition()]
+    ];
+  }
+  /**
+   * This will override the set up to use the app shell.
+   *
+   * @param {object} container
+   */
+  setContainer(t) {
+    this.container = app.root;
+  }
+  /**
+   * This will hide the popover before destroying.
+   *
+   * @returns {void}
+   */
+  beforeDestroy() {
+    this.panel.hidePopover();
+  }
+}
+const R = z(({ src: e, alt: t }) => e ? j({
+  class: "absolute w-full h-full rounded-full object-cover fadeIn",
+  src: e,
+  alt: t,
+  /**
+   * If there's an error loading the image, hide it.
+   */
+  error: (n) => n.target.style.display = "none"
+}) : null), X = (e) => e && (Array.isArray(e) && (e = e.join(" ")), typeof e != "string" && (e = String(e)), e.split(" ").map((t) => t.charAt(0)).join("").toUpperCase()), O = (e) => !e || e.length < 2 ? e : X(e), E = (e) => P([e, (t, n) => {
+  n.textContent = O(t);
+}]), T = {
+  xs: "h-6 w-6",
+  sm: "h-8 w-8",
+  md: "h-12 w-12",
+  lg: "h-16 w-16",
+  xl: "h-24 w-24",
+  "2xl": "h-32 w-32",
+  "3xl": "h-48 w-48",
+  "4xl": "h-64 w-64",
+  default: "h-12 w-12"
+}, k = {
+  xs: "text-[7px]",
+  sm: "text-xs",
+  md: "text-base",
+  lg: "text-xl",
+  xl: "text-2xl",
+  "2xl": "text-3xl",
+  "3xl": "text-4xl",
+  "4xl": "text-5xl",
+  default: "text-base"
+}, G = (e) => T[e] || T.default, L = (e) => k[e] || k.default, U = (e, t = null, n = "md") => {
+  const s = O(e), a = L(n);
+  return i(
+    {
+      class: `
+			flex items-center justify-center w-full h-full rounded-full
+			bg-muted text-muted-foreground font-medium
+			${a}
+		`
+    },
+    [
+      t ? E(t) : P({ class: "uppercase" }, s)
+    ]
+  );
+}, dt = z(({ src: e, alt: t, fallbackText: n, watcherFallback: s, size: a }) => {
+  const r = G(a);
+  return i(
+    {
+      class: `relative flex items-center justify-center ${r}`
+    },
+    [
+      R({ src: e, alt: t }),
+      U(n, s, a)
+    ]
+  );
+}), _ = ({ currentYear: e, onSelect: t }) => i(
+  { class: "grid grid-cols-3 gap-2" },
+  B.monthNames.map(
+    (n, s) => m(
+      {
+        click: () => t(s),
+        variant: "ghost",
+        "aria-label": `Select ${n} ${e}`
+      },
+      n
+    )
+  )
+), D = (e) => (e *= 1, e < 10 ? `0${e}` : String(e)), q = (e) => (e.indexOf("T") === -1 && e.indexOf(" ") === -1 && (e += "T00:00:01"), e.replace(" ", "T"), e), x = (e, t, n) => `${e}-${D(t + 1)}-${D(n)}`, J = (e) => e ? "bg-accent text-primary" : "", K = (e) => e ? "text-muted-foreground opacity-50" : "", Q = (e, t) => e === t, V = (e, t) => Q(e, t) ? "bg-primary text-primary-foreground" : "", Z = (e, t, n, s) => {
+  const a = V(t, s);
+  return a || (e ? J(e) : n ? K(n) : "text-foreground");
+}, C = (e) => {
+  const {
+    day: t,
+    currentDate: n,
+    date: s,
+    isToday: a,
+    isOutsideMonth: r,
+    select: l,
+    disabled: c
+  } = e;
+  return I(
+    {
+      class: `
+				flex items-center justify-center h-9 w-auto p-0 font-normal text-sm rounded-md
+				${Z(a, n, r, s)}
+				hover:bg-muted/50 hover:text-muted-foreground focus:z-10
+                disabled:pointer-events-none disabled:opacity-50
+			`,
+      disabled: c || t === null,
+      "aria-label": t ? `Day ${t}` : null,
+      // Only call select if it's not disabled.
+      click: () => !c && l(s)
+    },
+    t.toString()
+  );
+}, M = (e, t, n, s) => e === s.date && t === s.month && n === s.year, tt = (e, t, n, s = !1) => {
+  const { year: a, month: r } = e, l = x(a, r, e.date), c = new Date(a, r, 1).getDay(), g = new Date(a, r + 1, 0).getDate(), d = new Date(a, r, 0).getDate(), h = [], y = r === 0 ? 11 : r - 1, w = r === 0 ? a - 1 : a;
+  for (let o = c - 1; o >= 0; o--) {
+    const u = d - o, f = M(u, y, w, t), p = new Date(w, y, u) < new Date(t.year, t.month, t.date), F = s && p;
+    h.push(
+      C({
+        day: u,
+        currentDate: l,
+        date: x(w, y, u),
+        isToday: f,
+        isOutsideMonth: !0,
+        select: n,
+        disabled: F
+      })
+    );
+  }
+  for (let o = 1; o <= g; o++) {
+    const u = M(o, r, a, t), f = new Date(a, r, o) < new Date(t.year, t.month, t.date), p = s && f;
+    h.push(
+      C({
+        day: o,
+        currentDate: l,
+        date: x(a, r, o),
+        isToday: u,
+        isOutsideMonth: !1,
+        select: n,
+        disabled: p
+      })
+    );
+  }
+  const v = r === 11 ? 0 : r + 1, b = r === 11 ? a + 1 : a, A = (7 - h.length % 7) % 7;
+  for (let o = 1; o <= A; o++) {
+    const u = M(o, v, b, t), f = new Date(b, v, o) < new Date(t.year, t.month, t.date), p = s && f;
+    h.push(
+      C({
+        day: o,
+        currentDate: l,
+        date: x(b, v, o),
+        isToday: u,
+        isOutsideMonth: !0,
+        select: n,
+        disabled: p
+      })
+    );
+  }
+  return h;
+}, $ = ({ label: e, click: t }) => m(
+  {
+    class: `
+			inline-flex items-center justify-center h-7 w-7 bg-transparent p-0
+			opacity-50 hover:opacity-100 text-muted-foreground absolute
+			${e === "Previous" ? "left-1" : "right-1"}
+			focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
+		  `,
+    click: t,
+    "aria-label": `${e} month`,
+    variant: "icon",
+    icon: e === "Previous" ? S.chevron.single.left : S.chevron.single.right
+  }
+), et = ({ onMonthClick: e, onYearClick: t, next: n, previous: s }) => i({ class: "flex items-center justify-center space-x-2 relative min-h-12 text-sm font-medium" }, [
+  m({ click: e, variant: "ghost", "aria-label": "Select month" }, "[[monthName]]"),
+  m({ click: t, variant: "ghost", "aria-label": "Select year" }, "[[current.year]]"),
+  $({ label: "Previous", click: s }),
+  $({ label: "Next", click: n })
+]), nt = (e) => i(
+  { class: "flex items-center justify-center h-9 w-auto text-[0.8rem] font-normal text-muted-foreground" },
+  e
+), st = () => ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(nt), at = (e) => i({ class: "rdp w-full space-y-1" }, [
+  et({
+    onMonthClick: e.onMonthClick,
+    onYearClick: e.onYearClick,
+    next: e.next,
+    previous: e.previous
+  }),
+  i({
+    class: "flex flex-auto flex-col w-full",
+    onSet: [
+      "currentDate",
+      () => [
+        i({ class: "grid grid-cols-7" }, st()),
+        i(
+          { class: "grid grid-cols-7" },
+          tt(
+            e.current,
+            e.today,
+            e.select,
+            e.blockPriorDates
+          )
+        )
+      ]
+    ]
+  })
+]), rt = ({ currentMonth: e, currentYear: t, onSelect: n }) => {
+  const s = t - 50, a = Array.from({ length: 101 }, (r, l) => s + l);
+  return i(
+    { class: "grid grid-cols-5 gap-2" },
+    a.map(
+      (r) => m(
+        {
+          click: () => n(r),
+          variant: "ghost",
+          "aria-label": `Select ${r}`
+        },
+        r.toString()
+      )
+    )
+  );
+};
+class gt extends N {
+  /**
+   * This will declare the props for the compiler.
+   *
+   * @returns {void}
+   */
+  declareProps() {
+    this.selectedDate = null, this.selectedCallBack = null, this.blockPriorDates = !1;
+  }
+  /**
+   * This will get the selected data.
+   *
+   * @param {object} today
+   * @returns {Date}
+   */
+  getSelectedDate(t) {
+    const n = this.selectedDate ? new Date(q(this.selectedDate)) : t;
+    return new Date(n.getFullYear(), n.getMonth(), n.getDate());
+  }
+  /**
+   * This will set up the data for the calendar.
+   *
+   * @returns {Data}
+   */
+  setData() {
+    const t = /* @__PURE__ */ new Date(), n = this.getSelectedDate(t), s = n.getMonth();
+    return new Y({
+      monthName: this.getMonthName(s),
+      currentDate: `${n.getFullYear()}-${s + 1}-${n.getDate()}`,
+      current: {
+        date: n.getDate(),
+        year: n.getFullYear(),
+        month: s
+      },
+      today: {
+        date: t.getDate(),
+        month: t.getMonth(),
+        year: t.getFullYear()
+      }
+    });
+  }
+  /**
+   * This will set up the states for the calendar.
+   *
+   * @return {object}
+   */
+  setupStates() {
+    return {
+      view: "calendar"
+      // 'calendar' | 'months' | 'years'
+    };
+  }
+  /**
+   * This will get the name of the month.
+   *
+   * @param {number} month
+   * @returns {string}
+   */
+  getMonthName(t) {
+    return B.monthNames[t];
+  }
+  /**
+   * This will go to the previous month.
+   *
+   * @returns {void}
+   */
+  goToPreviousMonth() {
+    const t = this.data;
+    let n = t.current.month, s = t.current.year;
+    n === 0 ? (n = 11, s--) : n--, this.setCurrentDate(n, s);
+  }
+  /**
+   * This will go to the next month.
+   *
+   * @returns {void}
+   */
+  goToNextMonth() {
+    const t = this.data;
+    let n = t.current.month, s = t.current.year;
+    n === 11 ? (n = 0, s++) : n++, this.setCurrentDate(n, s);
+  }
+  /**
+   * This will set the current month and year.
+   *
+   * @param {number} month
+   * @param {number} year
+   * @param {number} [date=null]
+   * @returns {void}
+   */
+  setCurrentDate(t, n, s = null) {
+    const a = this.data;
+    a.current.month = t, a.current.year = n, typeof s == "number" && (a.current.date = D(s)), a.currentDate = `${n}-${D(t + 1)}-${a.current.date}`, a.monthName = this.getMonthName(t);
+  }
+  /**
+   * This will select a date.
+   *
+   * @param {string} date
+   * @returns {void}
+   */
+  selectDate(t) {
+    const n = /* @__PURE__ */ new Date(t + "T00:00:00");
+    this.setCurrentDate(n.getMonth(), n.getFullYear(), n.getDate()), typeof this.selectedCallBack == "function" && this.selectedCallBack(this.data.currentDate);
+  }
+  /**
+   * This will render the calendar.
+   *
+   * @returns {object}
+   */
+  render() {
+    return i({ class: "calendar-container p-3 rounded-md border min-w-80" }, [
+      W("view", (t) => {
+        switch (t) {
+          case "months":
+            return _(
+              {
+                currentYear: this.data.current.year,
+                onSelect: (n) => {
+                  this.setCurrentDate(n, this.data.current.year), this.state.view = "calendar";
+                }
+              }
+            );
+          case "years":
+            return rt(
+              {
+                currentMonth: this.data.current.month,
+                currentYear: this.data.current.year,
+                onSelect: (n) => {
+                  this.setCurrentDate(this.data.current.month, n), this.state.view = "calendar";
+                }
+              }
+            );
+          default:
+            at({
+              current: this.data.current,
+              today: this.data.today,
+              select: (n) => this.selectDate(n),
+              next: () => this.goToNextMonth(),
+              previous: () => this.goToPreviousMonth(),
+              blockPriorDates: this.blockPriorDates || !1,
+              onMonthClick: () => this.state.view = "months",
+              onYearClick: () => this.state.view = "years"
+            });
+        }
+      })
+    ]);
+  }
+}
+export {
+  dt as A,
+  tt as C,
+  C as D,
+  x as F,
+  at as M,
+  ht as P,
+  nt as a,
+  gt as b,
+  q as c,
+  H as g,
+  D as p
+};

package/dist/{empty-state-CWXZVNA5.js → empty-state-DtwDM0rz.js}

@@ -1,6 +1,6 @@
 import { Div as n, H5 as R, P as g, I as b, Li as O, Span as a, Ul as V, Button as m, OnState as v, Label as W, Form as G, H2 as C, Header as k, Footer as M, A as Y, H3 as J, Checkbox as K, Nav as Q, Input as S, UseParent as X, Time as Z, Dialog as ee } from "@base-framework/atoms";
 import { Atom as c, Component as x, Html as L, Dom as te, base as se, Data as D, Builder as H, Jot as I, DateTime as B } from "@base-framework/base";
-import { P as T, b as oe } from "./calendar-DQXME-2u.js";
+import { P as T, b as oe } from "./calendar-BFwF3fNk.js";
 import { B as h, I as p } from "./buttons-Cm9etaEG.js";
 import { Icons as u } from "./icons.es.js";
 import { Timer as ne, List as le, DynamicTime as re } from "@base-framework/organisms";

package/dist/index.es.js

@@ -1,11 +1,11 @@
-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";
 import { Icons as E } from "./icons.es.js";
-import { A as O, B as V, C as j, t as q, E as z, v as J, w as _, x as K, D as Q, j as X, k as Y, H as Z, G as $, s as aa, c as sa, a as ea, b as oa, I as ta, i as ra, g as na, e as la, h as ia, F as pa, d as ua, f as ma, u as da, M as ca, l as ga, N as Ca, P as Ta, p as ba, q as Da, S as Ia, n as Sa, o as Ba, T as Pa, y as Fa, z as Ma, m as ka, r as Na } from "./empty-state-CWXZVNA5.js";
-import { A as va, b as xa, C as ya, D as ha, a as Wa, F as Ha, M as La, P as Aa, c as wa, g as Ua, p as Ra } from "./calendar-DQXME-2u.js";
-import { B as Ga, p as Oa, C as Va, j as ja, D as qa, m as za, k as Ja, H as _a, I as Ka, N as Qa, O as Xa, P as Ya, S as Za, n as $a, o as as, t as ss, s as es, q as os, r as ts, T as rs, l as ns, U as ls, W as is, f as ps, h as us, i as ms, c as ds, d as cs, b as gs, e as Cs, a as Ts, g as bs } from "./signature-panel-CJVWNEzI.js";
+import { A as O, B as V, C as j, t as q, E as z, v as J, w as _, x as K, D as Q, j as X, k as Y, H as Z, G as $, s as aa, c as sa, a as ea, b as oa, I as ta, i as ra, g as na, e as la, h as ia, F as pa, d as ua, f as ma, u as da, M as ca, l as ga, N as Ca, P as Ta, p as ba, q as Da, S as Ia, n as Sa, o as Ba, T as Pa, y as Fa, z as Ma, m as ka, r as Na } from "./empty-state-DtwDM0rz.js";
+import { A as va, b as xa, C as ya, D as ha, a as Wa, F as Ha, M as La, P as Aa, c as wa, g as Ua, p as Ra } from "./calendar-BFwF3fNk.js";
+import { B as Ga, p as Oa, C as Va, j as ja, D as qa, m as za, k as Ja, H as _a, I as Ka, N as Qa, O as Xa, P as Ya, S as Za, n as $a, o as as, t as ss, s as es, q as os, r as ts, T as rs, l as ns, U as ls, W as is, f as ps, h as us, i as ms, c as ds, d as cs, b as gs, e as Cs, a as Ts, g as bs } from "./signature-panel-zN-__8ci.js";
 import { B as Is, I as Ss, M as Bs, d as Ps, e as Fs, g as Ms, N as ks, b as Ns, a as fs, f as vs, P as xs, c as ys, S as hs, T as Ws } from "./mobile-nav-wrapper-Dj67Pb8l.js";
 import { B as Ls, a as As, C as ws, F as Us, b as Rs, c as Es, M as Gs, P as Os, S as Vs } from "./sidebar-menu-page-BVryQj2Z.js";
 import { A as qs, F as zs, M as Js, a as _s, T as Ks } from "./aside-template-McEj_Gxc.js";

package/dist/molecules.es.js

@@ -1,5 +1,5 @@
-import { A as o, B as t, C as e, t as i, E as r, v as n, w as m, x as l, D as S, j as u, k as D, H as c, G as p, s as C, c as d, a as g, b as F, I as T, i as A, g as P, e as f, h as w, F as I, d as b, f as y, u as B, M, l as x, N as k, P as v, p as E, q as N, S as h, n as L, o as R, T as U, y as j, z as q, m as z, r as G } from "./empty-state-CWXZVNA5.js";
-import { A as O, P as _, g as J } from "./calendar-DQXME-2u.js";
+import { A as o, B as t, C as e, t as i, E as r, v as n, w as m, x as l, D as S, j as u, k as D, H as c, G as p, s as C, c as d, a as g, b as F, I as T, i as A, g as P, e as f, h as w, F as I, d as b, f as y, u as B, M, l as x, N as k, P as v, p as E, q as N, S as h, n as L, o as R, T as U, y as j, z as q, m as z, r as G } from "./empty-state-DtwDM0rz.js";
+import { A as O, P as _, g as J } from "./calendar-BFwF3fNk.js";
 export {
   o as Alert,
   O as Avatar,

package/dist/organisms.es.js

@@ -1,5 +1,5 @@
-import { B as s, p as t, C as o, j as r, D as n, m as l, k as i, H as b, I as d, N as p, O as u, P as v, S as D, n as g, o as N, t as k, s as c, q as C, r as T, T as M, l as m, U as y, W as B, f as W, h, i as S, c as H, d as P, b as I, e as f, a as x, g as L } from "./signature-panel-CJVWNEzI.js";
-import { b as F, C as U, D as G, a as j, F as q, M as w, c as z, p as A } from "./calendar-DQXME-2u.js";
+import { B as s, p as t, C as o, j as r, D as n, m as l, k as i, H as b, I as d, N as p, O as u, P as v, S as D, n as g, o as N, t as k, s as c, q as C, r as T, T as M, l as m, U as y, W as B, f as W, h, i as S, c as H, d as P, b as I, e as f, a as x, g as L } from "./signature-panel-zN-__8ci.js";
+import { b as F, C as U, D as G, a as j, F as q, M as w, c as z, p as A } from "./calendar-BFwF3fNk.js";
 import { B as J, I as K, M as Q, d as R, e as V, g as X, N as Y, b as Z, a as _, f as $, P as aa, c as ea, S as sa, T as ta } from "./mobile-nav-wrapper-Dj67Pb8l.js";
 export {
   s as BackButton,

package/dist/{signature-panel-CJVWNEzI.js → signature-panel-zN-__8ci.js}

@@ -4,7 +4,7 @@ import { B as T, I as _ } from "./buttons-Cm9etaEG.js";
 import { Icons as x } from "./icons.es.js";
 import { TableBody as J, DataTableBody as Z, ScrollableTableBody as ee, List as te, IntervalTimer as se } from "@base-framework/organisms";
 import { C as ae, I as ie, H as ne } from "./inputs-CMjx5-IX.js";
-import { A as oe, P as le } from "./calendar-DQXME-2u.js";
+import { A as oe, P as le } from "./calendar-BFwF3fNk.js";
 d((t, e) => ({
   class: "flex items-center px-4 py-2",
   ...t,

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/dist/types/components/organisms/calendar/calendar.d.ts

@@ -38,6 +38,12 @@ export class Calendar extends Component {
      * @returns {Data}
      */
     setData(): Data;
+    /**
+     * This will set up the states for the calendar.
+     *
+     * @return {object}
+     */
+    setupStates(): object;
     /**
      * This will get the name of the month.
      *

package/dist/types/components/organisms/calendar/month/calendar-header.d.ts

@@ -0,0 +1,7 @@
+export function CalendarHeader({ onMonthClick, onYearClick, next, previous }: {
+    onMonthClick: Function;
+    onYearClick: Function;
+    next: Function;
+    previous: Function;
+}): object;
+export default CalendarHeader;

package/dist/types/components/organisms/calendar/month-selector.d.ts

@@ -0,0 +1,4 @@
+export function MonthSelector({ currentYear, onSelect }: {
+    currentYear: number;
+    onSelect: Function;
+}): object;

package/dist/types/components/organisms/calendar/year-selector.d.ts

@@ -0,0 +1,5 @@
+export function YearSelector({ currentMonth, currentYear, onSelect }: {
+    currentMonth: number;
+    currentYear: number;
+    onSelect: Function;
+}): object;

package/package.json

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

package/dist/calendar-DQXME-2u.js

@@ -1,440 +0,0 @@
-import { Div as i, Img as F, Span as M, Button as j } from "@base-framework/atoms";
-import { Component as N, Data as z, Atom as k, DateTime as I } from "@base-framework/base";
-import { B as Y } from "./buttons-Cm9etaEG.js";
-import { Icons as T } from "./icons.es.js";
-const W = (e, t) => {
-  const s = e ? e.getBoundingClientRect() : { top: 0, bottom: 0, left: 0 }, n = t.getBoundingClientRect(), o = 10, r = globalThis.scrollX, l = globalThis.scrollY;
-  let c = s.left + r, f = s.bottom + l;
-  const h = globalThis.innerHeight - s.bottom, d = s.top;
-  return c + n.width > globalThis.innerWidth && (c = globalThis.innerWidth - n.width - o), h < n.height && d > h ? f = s.top + l - n.height - o : h < n.height && (f = s.bottom + l - (n.height - h) - o), { x: c, y: f };
-};
-class lt extends N {
-  /**
-   * This will set up the data.
-   *
-   * @returns {object}
-   */
-  setData() {
-    const t = this.parent.data || new z();
-    return t.set({
-      position: { x: 0, y: 0 }
-    }), t;
-  }
-  /**
-   * This will get the class size.
-   *
-   * @returns {string}
-   */
-  getSize() {
-    switch (this.size || "lg") {
-      // @ts-ignore
-      case "sm":
-        return "w-48";
-      // @ts-ignore
-      case "md":
-        return "w-64";
-      case "lg":
-        return "w-[250px]";
-      // @ts-ignore
-      case "xl":
-        return "w-96";
-      // @ts-ignore
-      case "2xl":
-        return "w-[400px]";
-      // @ts-ignore
-      case "fit":
-        return "w-fit";
-      // @ts-ignore
-      case "full":
-        return "w-full";
-    }
-  }
-  /**
-   * This will render the modal component.
-   *
-   * @returns {object}
-   */
-  render() {
-    const t = this.getSize();
-    return i({
-      class: `absolute inset-auto fadeIn mt-2 rounded-md p-0 shadow-lg bg-popover min-h-12 backdrop:bg-transparent text-inherit r z-30 ${t}`,
-      popover: "manual",
-      toggle: (s, { state: n }) => s.newState === "closed" ? n.open = !1 : null,
-      style: "top: [[position.y]]px; left: [[position.x]]px"
-    }, this.children);
-  }
-  /**
-   * This will setup the states.
-   *
-   * @returns {object}
-   */
-  setupStates() {
-    return {
-      open: {
-        id: this.parent.getId(),
-        callBack: (n) => {
-          this.state.open === !1 && this.destroy();
-        }
-      }
-    };
-  }
-  /**
-   * Updates the dropdown position.
-   *
-   * @returns {void}
-   */
-  updatePosition() {
-    const t = this.button ?? null, s = this.panel, n = W(t, s);
-    this.data.position = n;
-  }
-  /**
-   * This will run after the setup.
-   *
-   * @returns {void}
-   */
-  afterSetup() {
-    this.panel.showPopover(), this.updatePosition();
-  }
-  /**
-   * This will check if the element clicked was in the
-   * component of the button.
-   *
-   * @param {object} element
-   * @returns {boolean}
-   */
-  isOutsideClick(t) {
-    return !this.panel.contains(t) && this.button && !this.button.contains(t);
-  }
-  /**
-   * This will set up the events.
-   *
-   * @returns {array}
-   */
-  setupEvents() {
-    return [
-      ["click", document, (t) => {
-        this.isOutsideClick(t.target) && (this.state.open = !1);
-      }],
-      ["resize", globalThis, (t) => this.updatePosition()],
-      ["scroll", document, (t) => this.updatePosition()]
-    ];
-  }
-  /**
-   * This will override the set up to use the app shell.
-   *
-   * @param {object} container
-   */
-  setContainer(t) {
-    this.container = app.root;
-  }
-  /**
-   * This will hide the popover before destroying.
-   *
-   * @returns {void}
-   */
-  beforeDestroy() {
-    this.panel.hidePopover();
-  }
-}
-const H = k(({ src: e, alt: t }) => e ? F({
-  class: "absolute w-full h-full rounded-full object-cover fadeIn",
-  src: e,
-  alt: t,
-  /**
-   * If there's an error loading the image, hide it.
-   */
-  error: (s) => s.target.style.display = "none"
-}) : null), R = (e) => e && (Array.isArray(e) && (e = e.join(" ")), typeof e != "string" && (e = String(e)), e.split(" ").map((t) => t.charAt(0)).join("").toUpperCase()), B = (e) => !e || e.length < 2 ? e : R(e), X = (e) => M([e, (t, s) => {
-  s.textContent = B(t);
-}]), S = {
-  xs: "h-6 w-6",
-  sm: "h-8 w-8",
-  md: "h-12 w-12",
-  lg: "h-16 w-16",
-  xl: "h-24 w-24",
-  "2xl": "h-32 w-32",
-  "3xl": "h-48 w-48",
-  "4xl": "h-64 w-64",
-  default: "h-12 w-12"
-}, P = {
-  xs: "text-[7px]",
-  sm: "text-xs",
-  md: "text-base",
-  lg: "text-xl",
-  xl: "text-2xl",
-  "2xl": "text-3xl",
-  "3xl": "text-4xl",
-  "4xl": "text-5xl",
-  default: "text-base"
-}, E = (e) => S[e] || S.default, G = (e) => P[e] || P.default, L = (e, t = null, s = "md") => {
-  const n = B(e), o = G(s);
-  return i(
-    {
-      class: `
-			flex items-center justify-center w-full h-full rounded-full
-			bg-muted text-muted-foreground font-medium
-			${o}
-		`
-    },
-    [
-      t ? X(t) : M({ class: "uppercase" }, n)
-    ]
-  );
-}, ct = k(({ src: e, alt: t, fallbackText: s, watcherFallback: n, size: o }) => {
-  const r = E(o);
-  return i(
-    {
-      class: `relative flex items-center justify-center ${r}`
-    },
-    [
-      H({ src: e, alt: t }),
-      L(s, n, o)
-    ]
-  );
-}), x = (e) => (e *= 1, e < 10 ? `0${e}` : String(e)), U = (e) => (e.indexOf("T") === -1 && e.indexOf(" ") === -1 && (e += "T00:00:01"), e.replace(" ", "T"), e), m = (e, t, s) => `${e}-${x(t + 1)}-${x(s)}`, q = (e) => e ? "bg-accent text-primary" : "", J = (e) => e ? "text-muted-foreground opacity-50" : "", K = (e, t) => e === t, Q = (e, t) => K(e, t) ? "bg-primary text-primary-foreground" : "", V = (e, t, s, n) => {
-  const o = Q(t, n);
-  return o || (e ? q(e) : s ? J(s) : "text-foreground");
-}, v = (e) => {
-  const {
-    day: t,
-    currentDate: s,
-    date: n,
-    isToday: o,
-    isOutsideMonth: r,
-    select: l,
-    disabled: c
-  } = e;
-  return j(
-    {
-      class: `
-				flex items-center justify-center h-9 w-auto p-0 font-normal text-sm rounded-md
-				${V(o, s, r, n)}
-				hover:bg-muted/50 hover:text-muted-foreground focus:z-10
-                disabled:pointer-events-none disabled:opacity-50
-			`,
-      disabled: c || t === null,
-      "aria-label": t ? `Day ${t}` : null,
-      // Only call select if it's not disabled.
-      click: () => !c && l(n)
-    },
-    t.toString()
-  );
-}, C = (e, t, s, n) => e === n.date && t === n.month && s === n.year, Z = (e, t, s, n = !1) => {
-  const { year: o, month: r } = e, l = m(o, r, e.date), c = new Date(o, r, 1).getDay(), f = new Date(o, r + 1, 0).getDate(), h = new Date(o, r, 0).getDate(), d = [], D = r === 0 ? 11 : r - 1, y = r === 0 ? o - 1 : o;
-  for (let a = c - 1; a >= 0; a--) {
-    const u = h - a, g = C(u, D, y, t), p = new Date(y, D, u) < new Date(t.year, t.month, t.date), A = n && p;
-    d.push(
-      v({
-        day: u,
-        currentDate: l,
-        date: m(y, D, u),
-        isToday: g,
-        isOutsideMonth: !0,
-        select: s,
-        disabled: A
-      })
-    );
-  }
-  for (let a = 1; a <= f; a++) {
-    const u = C(a, r, o, t), g = new Date(o, r, a) < new Date(t.year, t.month, t.date), p = n && g;
-    d.push(
-      v({
-        day: a,
-        currentDate: l,
-        date: m(o, r, a),
-        isToday: u,
-        isOutsideMonth: !1,
-        select: s,
-        disabled: p
-      })
-    );
-  }
-  const w = r === 11 ? 0 : r + 1, b = r === 11 ? o + 1 : o, O = (7 - d.length % 7) % 7;
-  for (let a = 1; a <= O; a++) {
-    const u = C(a, w, b, t), g = new Date(b, w, a) < new Date(t.year, t.month, t.date), p = n && g;
-    d.push(
-      v({
-        day: a,
-        currentDate: l,
-        date: m(b, w, a),
-        isToday: u,
-        isOutsideMonth: !0,
-        select: s,
-        disabled: p
-      })
-    );
-  }
-  return d;
-}, _ = (e) => i(
-  { class: "flex items-center justify-center h-9 w-auto text-[0.8rem] font-normal text-muted-foreground" },
-  e
-), $ = ({ label: e, click: t }) => Y(
-  {
-    class: `
-			inline-flex items-center justify-center h-7 w-7 bg-transparent p-0
-			opacity-50 hover:opacity-100 text-muted-foreground absolute
-			${e === "Previous" ? "left-1" : "right-1"}
-			focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
-		  `,
-    click: t,
-    "aria-label": `${e} month`,
-    variant: "icon",
-    icon: e === "Previous" ? T.chevron.single.left : T.chevron.single.right
-  }
-), tt = ({ next: e, previous: t }) => i({ class: "flex flex-auto min-h-12 text-sm font-medium relative justify-center items-center" }, [
-  M("[[monthName]] [[current.year]]"),
-  $({
-    label: "Previous",
-    click: t
-  }),
-  $({
-    label: "Next",
-    click: e
-  })
-]), et = () => ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(_), st = (e) => i({ class: "rdp w-full space-y-1" }, [
-  tt({
-    next: e.next,
-    previous: e.previous
-  }),
-  i({
-    class: "flex flex-auto flex-col w-full",
-    onSet: [
-      "currentDate",
-      () => [
-        i({ class: "grid grid-cols-7" }, et()),
-        i(
-          { class: "grid grid-cols-7" },
-          Z(
-            e.current,
-            e.today,
-            e.select,
-            e.blockPriorDates
-          )
-        )
-      ]
-    ]
-  })
-]);
-class ut extends N {
-  /**
-   * This will declare the props for the compiler.
-   *
-   * @returns {void}
-   */
-  declareProps() {
-    this.selectedDate = null, this.selectedCallBack = null, this.blockPriorDates = !1;
-  }
-  /**
-   * This will get the selected data.
-   *
-   * @param {object} today
-   * @returns {Date}
-   */
-  getSelectedDate(t) {
-    const s = this.selectedDate ? new Date(U(this.selectedDate)) : t;
-    return new Date(s.getFullYear(), s.getMonth(), s.getDate());
-  }
-  /**
-   * This will set up the data for the calendar.
-   *
-   * @returns {Data}
-   */
-  setData() {
-    const t = /* @__PURE__ */ new Date(), s = this.getSelectedDate(t), n = s.getMonth();
-    return new z({
-      monthName: this.getMonthName(n),
-      currentDate: `${s.getFullYear()}-${n + 1}-${s.getDate()}`,
-      current: {
-        date: s.getDate(),
-        year: s.getFullYear(),
-        month: n
-      },
-      today: {
-        date: t.getDate(),
-        month: t.getMonth(),
-        year: t.getFullYear()
-      }
-    });
-  }
-  /**
-   * This will get the name of the month.
-   *
-   * @param {number} month
-   * @returns {string}
-   */
-  getMonthName(t) {
-    return I.monthNames[t];
-  }
-  /**
-   * This will go to the previous month.
-   *
-   * @returns {void}
-   */
-  goToPreviousMonth() {
-    const t = this.data;
-    let s = t.current.month, n = t.current.year;
-    s === 0 ? (s = 11, n--) : s--, this.setCurrentDate(s, n);
-  }
-  /**
-   * This will go to the next month.
-   *
-   * @returns {void}
-   */
-  goToNextMonth() {
-    const t = this.data;
-    let s = t.current.month, n = t.current.year;
-    s === 11 ? (s = 0, n++) : s++, this.setCurrentDate(s, n);
-  }
-  /**
-   * This will set the current month and year.
-   *
-   * @param {number} month
-   * @param {number} year
-   * @param {number} [date=null]
-   * @returns {void}
-   */
-  setCurrentDate(t, s, n = null) {
-    const o = this.data;
-    o.current.month = t, o.current.year = s, typeof n == "number" && (o.current.date = x(n)), o.currentDate = `${s}-${x(t + 1)}-${o.current.date}`, o.monthName = this.getMonthName(t);
-  }
-  /**
-   * This will select a date.
-   *
-   * @param {string} date
-   * @returns {void}
-   */
-  selectDate(t) {
-    const s = /* @__PURE__ */ new Date(t + "T00:00:00");
-    this.setCurrentDate(s.getMonth(), s.getFullYear(), s.getDate()), typeof this.selectedCallBack == "function" && this.selectedCallBack(this.data.currentDate);
-  }
-  /**
-   * This will render the calendar.
-   *
-   * @returns {object}
-   */
-  render() {
-    return i({ class: "calendar-container p-3 rounded-md border min-w-80" }, [
-      st({
-        current: this.data.current,
-        today: this.data.today,
-        select: (t) => this.selectDate(t),
-        next: () => this.goToNextMonth(),
-        previous: () => this.goToPreviousMonth(),
-        blockPriorDates: this.blockPriorDates || !1
-      })
-    ]);
-  }
-}
-export {
-  ct as A,
-  Z as C,
-  v as D,
-  m as F,
-  st as M,
-  lt as P,
-  _ as a,
-  ut as b,
-  U as c,
-  W as g,
-  x as p
-};