sprintify-ui 0.6.39 → 0.6.41

package/dist/sprintify-ui.es.js

@@ -2305,7 +2305,7 @@ function S0() {
     }
   };
 }
-var Pt = /* @__PURE__ */ u0(S0);
+var It = /* @__PURE__ */ u0(S0);
 const _0 = ["active", "href", "aria-current", "onClick"], k0 = ["href"], A0 = {
   inheritAttrs: !1
 }, Li = /* @__PURE__ */ Se({
@@ -2317,7 +2317,7 @@ const _0 = ["active", "href", "aria-current", "onClick"], k0 = ["href"], A0 = {
   },
   emits: ["click"],
   setup(n, { emit: t }) {
-    const e = n, r = L(() => Pt(
+    const e = n, r = L(() => It(
       "block text-left",
       e.class
     )), i = wt("closeMenu", () => {
@@ -4833,7 +4833,7 @@ const mw = ["innerHTML"], Os = /* @__PURE__ */ Se({
         sm: "text-sm mb-1",
         md: "text-sm mb-1"
       }[r.value];
-      return Pt(o, a, t.class);
+      return It(o, a, t.class);
     });
     return (o, a) => (B(), K("label", {
       class: de(T(i))
@@ -4904,7 +4904,7 @@ const mw = ["innerHTML"], Os = /* @__PURE__ */ Se({
     function i(p) {
       p != null && (e.value = p);
     }
-    const o = oe(""), a = L(() => Pt(o.value, t.labelClass));
+    const o = oe(""), a = L(() => It(o.value, t.labelClass));
     function l(p) {
       p != null && (o.value = p);
     }
@@ -5320,7 +5320,7 @@ const bc = /* @__PURE__ */ new WeakMap(), _w = (n) => {
     const x = L(() => {
       const P = "inline-flex bg-white input-rounded border transition-colors duration-200", $ = m.value ? "border-red-500" : "border-slate-300", Y = r.disabled ? "cursor-not-allowed text-slate-300" : "", Z = fr[y.value];
       let pe = "";
-      return r.visibleFocus && (m.value ? pe = "focus-within:input-focus-error" : pe = "focus-within:input-focus"), Pt([
+      return r.visibleFocus && (m.value ? pe = "focus-within:input-focus-error" : pe = "focus-within:input-focus"), It([
         P,
         $,
         Y,
@@ -5791,7 +5791,7 @@ const Jw = ["value", "name", "disabled", "required"], ex = ["value"], Su = "", _
         sm: "pl-2.5 pr-8",
         md: "pl-3 pr-10"
       }[s.value];
-      return Pt([
+      return It([
         g,
         m,
         v,
@@ -6933,7 +6933,7 @@ const Ex = {
     const t = n;
     return (e, r) => (B(), K("div", {
       class: de(
-        T(Pt)(
+        T(It)(
           "relative isolate overflow-hidden rounded bg-slate-200",
           t.class
         )
@@ -7755,7 +7755,7 @@ const qx = {
     }
   },
   setup(n) {
-    const t = n, e = L(() => Pt(
+    const t = n, e = L(() => It(
       "inline-flex",
       "shrink-0",
       "items-center",
@@ -8450,7 +8450,7 @@ const fE = /* @__PURE__ */ Co(wc), Xe = fE, og = {
   red: {
     low: {
       backgroundColor: Xe.red[100],
-      textColor: Xe.red[700],
+      textColor: Xe.red[800],
       borderColor: Xe.red[300]
     },
     high: {
@@ -8462,7 +8462,7 @@ const fE = /* @__PURE__ */ Co(wc), Xe = fE, og = {
   orange: {
     low: {
       backgroundColor: Xe.orange[100],
-      textColor: Xe.orange[700],
+      textColor: Xe.orange[800],
       borderColor: Xe.orange[300]
     },
     high: {
@@ -8474,7 +8474,7 @@ const fE = /* @__PURE__ */ Co(wc), Xe = fE, og = {
   yellow: {
     low: {
       backgroundColor: Xe.yellow[100],
-      textColor: Xe.yellow[700],
+      textColor: Xe.yellow[800],
       borderColor: Xe.yellow[300]
     },
     high: {
@@ -8486,7 +8486,7 @@ const fE = /* @__PURE__ */ Co(wc), Xe = fE, og = {
   green: {
     low: {
       backgroundColor: Xe.green[100],
-      textColor: Xe.green[700],
+      textColor: Xe.green[800],
       borderColor: Xe.green[300]
     },
     high: {
@@ -8498,7 +8498,7 @@ const fE = /* @__PURE__ */ Co(wc), Xe = fE, og = {
   teal: {
     low: {
       backgroundColor: Xe.teal[100],
-      textColor: Xe.teal[700],
+      textColor: Xe.teal[800],
       borderColor: Xe.teal[300]
     },
     high: {
@@ -8510,7 +8510,7 @@ const fE = /* @__PURE__ */ Co(wc), Xe = fE, og = {
   cyan: {
     low: {
       backgroundColor: Xe.cyan[100],
-      textColor: Xe.cyan[700],
+      textColor: Xe.cyan[800],
       borderColor: Xe.cyan[300]
     },
     high: {
@@ -8522,7 +8522,7 @@ const fE = /* @__PURE__ */ Co(wc), Xe = fE, og = {
   blue: {
     low: {
       backgroundColor: Xe.blue[100],
-      textColor: Xe.blue[700],
+      textColor: Xe.blue[800],
       borderColor: Xe.blue[300]
     },
     high: {
@@ -8534,7 +8534,7 @@ const fE = /* @__PURE__ */ Co(wc), Xe = fE, og = {
   indigo: {
     low: {
       backgroundColor: Xe.indigo[100],
-      textColor: Xe.indigo[700],
+      textColor: Xe.indigo[800],
       borderColor: Xe.indigo[300]
     },
     high: {
@@ -8546,7 +8546,7 @@ const fE = /* @__PURE__ */ Co(wc), Xe = fE, og = {
   purple: {
     low: {
       backgroundColor: Xe.purple[100],
-      textColor: Xe.purple[700],
+      textColor: Xe.purple[800],
       borderColor: Xe.purple[300]
     },
     high: {
@@ -8558,7 +8558,7 @@ const fE = /* @__PURE__ */ Co(wc), Xe = fE, og = {
   pink: {
     low: {
       backgroundColor: Xe.pink[100],
-      textColor: Xe.pink[700],
+      textColor: Xe.pink[800],
       borderColor: Xe.pink[300]
     },
     high: {
@@ -8600,33 +8600,46 @@ function Ms(n, t = !1) {
   };
 }
 const Rd = /* @__PURE__ */ Se({
+  inheritAttrs: !1,
   __name: "BaseBadge",
   props: {
-    contrast: { default: "high" },
+    class: { default: void 0 },
+    contrast: { default: "low" },
     color: { default: "gray" },
-    size: { default: "base" },
+    size: { default: "md" },
     icon: { default: void 0 },
     wrap: { type: Boolean },
     bordered: { type: Boolean }
   },
   setup(n) {
-    const t = n, e = L(() => {
-      const a = Ms(t.color, t.contrast == "high"), l = {
-        backgroundColor: a.backgroundColor,
-        color: a.textColor
+    const t = n, e = ["sm", "md", "lg"], r = L(() => {
+      const l = Ms(t.color, t.contrast == "high"), s = {
+        backgroundColor: l.backgroundColor,
+        color: l.textColor
       };
-      return t.bordered && (l.borderColor = a.borderColor, l.borderWidth = "1px", l.borderStyle = "solid"), l;
-    }), r = L(() => t.wrap ? "" : "whitespace-nowrap"), i = L(() => t.size == "sm" ? "px-2 py-px text-[11px]" : t.size == "base" ? "px-2.5 py-0.5 text-xs" : t.size == "lg" ? "px-3 py-0.5 text-sm" : "px-2.5 py-0.5 text-xs"), o = L(() => t.size == "sm" ? "h-2.5 w-2.5 mr-1 -ml-px" : t.size == "base" ? "h-3 w-3 mr-1 -ml-0.5" : t.size == "lg" ? "h-4 w-4 mr-1 -ml-0.5" : "h-3 w-3 mr-1 -ml-0.5");
-    return (a, l) => (B(), K("span", {
-      class: de(["inline-flex items-center rounded-full font-medium leading-tight", [T(i), T(r)]]),
-      style: ot(T(e))
+      return t.bordered && (s.borderColor = l.borderColor, s.borderWidth = "1px", s.borderStyle = "solid"), s;
+    }), i = L(() => e.includes(t.size) ? t.size : "md"), o = L(() => {
+      const l = "inline-flex items-center rounded leading-tight", s = {
+        sm: "px-1.5 py-px text-[10px]",
+        md: "px-1.5 py-0.5 text-xs",
+        lg: "px-1.5 py-0.5 text-sm"
+      }[i.value], d = t.wrap ? "whitespace-nowrap" : "";
+      return It(l, d, s, t.class);
+    }), a = L(() => ({
+      sm: "h-2.5 w-2.5 mr-1",
+      md: "h-3 w-3 mr-1",
+      lg: "h-4 w-4 mr-1"
+    })[i.value]);
+    return (l, s) => (B(), K("span", {
+      class: de(T(o)),
+      style: ot(T(r))
     }, [
-      a.icon ? (B(), De(T(rt), {
+      l.icon ? (B(), De(T(rt), {
         key: 0,
-        icon: a.icon,
-        class: de(["shrink-0", T(o)])
+        icon: l.icon,
+        class: de(["shrink-0", T(a)])
       }, null, 8, ["icon", "class"])) : ke("", !0),
-      Pe(a.$slots, "default")
+      Pe(l.$slots, "default")
     ], 6));
   }
 }), pE = /* @__PURE__ */ Se({
@@ -9113,7 +9126,7 @@ const DE = {
       "slate-200-outline": "btn-slate-200-outline"
     }, o = L(() => t.icon && AE(e.default)), a = L(() => {
       const c = ["btn"];
-      return t.color && (t.color in i ? c.push(i[t.color]) : c.push("hover:opacity-80")), t.size && c.push(r[t.size]), o.value && c.push("p-0 aspect-1 justify-center"), Pt(c, t.class);
+      return t.color && (t.color in i ? c.push(i[t.color]) : c.push("hover:opacity-80")), t.size && c.push(r[t.size]), o.value && c.push("p-0 aspect-1 justify-center"), It(c, t.class);
     }), l = L(() => {
       if (t.color && !(t.color in i)) {
         const c = Ms(t.color);
@@ -9266,14 +9279,14 @@ const DE = {
         xs: "gap-0.5",
         sm: "gap-1",
         md: "gap-1.5"
-      }[o.value]), Pt(
+      }[o.value]), It(
         f,
         p,
         e.class
       );
     }), h = L(() => {
       const f = e.spacing ? "whitespace-nowrap" : "";
-      return Pt([
+      return It([
         f,
         e.twButton
       ]);
@@ -9343,7 +9356,7 @@ const DE = {
     class: { type: [Array, String, null, Number, Boolean], default: "" }
   },
   setup(n) {
-    const t = n, e = L(() => t.size == "xs" ? "md:p-3 p-2" : t.size == "sm" ? "md:p-4 p-3" : t.size == "lg" ? "md:p-8 p-6" : "md:p-6 px-4 py-5"), r = L(() => Pt(
+    const t = n, e = L(() => t.size == "xs" ? "md:p-3 p-2" : t.size == "sm" ? "md:p-4 p-3" : t.size == "lg" ? "md:p-8 p-6" : "md:p-6 px-4 py-5"), r = L(() => It(
       "border-t border-slate-300 first:border-t-0",
       e.value,
       t.class
@@ -10768,7 +10781,7 @@ class s_ {
     return this.func(is(t, e, r, i));
   }
 }
-function Nt(n) {
+function Pt(n) {
   return typeof n == "object" && n ? new XS(n) : typeof n == "string" ? new l_(n) : typeof n == "function" ? new s_(n) : null;
 }
 const Yh = {
@@ -10785,7 +10798,7 @@ const Yh = {
   scrollTimeReset: Boolean,
   slotMinTime: St,
   slotMaxTime: St,
-  dayPopoverFormat: Nt,
+  dayPopoverFormat: Pt,
   slotDuration: St,
   snapDuration: St,
   headerToolbar: _e,
@@ -10794,7 +10807,7 @@ const Yh = {
   titleRangeSeparator: String,
   forceEventDuration: Boolean,
   dayHeaders: Boolean,
-  dayHeaderFormat: Nt,
+  dayHeaderFormat: Pt,
   dayHeaderClassNames: _e,
   dayHeaderContent: _e,
   dayHeaderDidMount: _e,
@@ -10845,7 +10858,7 @@ const Yh = {
   height: _e,
   contentHeight: _e,
   direction: String,
-  weekNumberFormat: Nt,
+  weekNumberFormat: Pt,
   eventResizableFromStart: Boolean,
   displayEventTime: Boolean,
   displayEventEnd: Boolean,
@@ -10901,7 +10914,7 @@ const Yh = {
   allDayWillUnmount: _e,
   slotMinWidth: Number,
   navLinks: Boolean,
-  eventTimeFormat: Nt,
+  eventTimeFormat: Pt,
   rerenderDelay: Number,
   moreLinkText: _e,
   moreLinkHint: _e,
@@ -10938,7 +10951,7 @@ const Yh = {
   moreLinkContent: _e,
   moreLinkDidMount: _e,
   moreLinkWillUnmount: _e,
-  monthStartFormat: Nt,
+  monthStartFormat: Pt,
   // for connectors
   // (can't be part of plugin system b/c must be provided at runtime)
   handleCustomRendering: _e,
@@ -12434,7 +12447,7 @@ class Gt {
     i == null && (i = this._context.options.allDayMaintainDuration), this._def.allDay !== t && (r.hasEnd = i), this.mutate({ standardProps: r });
   }
   formatRange(t) {
-    let { dateEnv: e } = this._context, r = this._instance, i = Nt(t);
+    let { dateEnv: e } = this._context, r = this._instance, i = Pt(t);
     return this._def.hasEnd ? e.formatRange(r.range.start, r.range.end, i, {
       forcedStartTzo: r.forcedStartTzo,
       forcedEndTzo: r.forcedEndTzo
@@ -13032,12 +13045,12 @@ class kk {
   // -----------------------------------------------------------------------------------------------------------------
   formatDate(t, e) {
     let { dateEnv: r } = this.getCurrentData();
-    return r.format(r.createMarker(t), Nt(e));
+    return r.format(r.createMarker(t), Pt(e));
   }
   // `settings` is for formatter AND isEndExclusive
   formatRange(t, e, r) {
     let { dateEnv: i } = this.getCurrentData();
-    return i.formatRange(i.createMarker(t), i.createMarker(e), Nt(r), r);
+    return i.formatRange(i.createMarker(t), i.createMarker(e), Pt(r), r);
   }
   formatIso(t, e) {
     let { dateEnv: r } = this.getCurrentData();
@@ -13297,7 +13310,7 @@ function zs(n, t) {
   ];
   return n.isDisabled ? e.push("fc-day-disabled") : (n.isToday && (e.push("fc-day-today"), e.push(t.getClass("today"))), n.isPast && e.push("fc-day-past"), n.isFuture && e.push("fc-day-future"), n.isOther && e.push("fc-day-other")), e;
 }
-const Mk = Nt({ year: "numeric", month: "long", day: "numeric" }), Ik = Nt({ week: "long" });
+const Mk = Pt({ year: "numeric", month: "long", day: "numeric" }), Ik = Pt({ week: "long" });
 function So(n, t, e = "day", r = !0) {
   const { dateEnv: i, options: o, calendarApi: a } = n;
   let l = i.format(t, e === "week" ? Ik : Mk);
@@ -13714,7 +13727,7 @@ class Vk {
 }
 const of = {};
 function Wk(n, t) {
-  return !n || t > 10 ? Nt({ weekday: "short" }) : t > 1 ? Nt({ weekday: "short", month: "numeric", day: "numeric", omitCommas: !0 }) : Nt({ weekday: "long" });
+  return !n || t > 10 ? Pt({ weekday: "short" }) : t > 1 ? Pt({ weekday: "short", month: "numeric", day: "numeric", omitCommas: !0 }) : Pt({ weekday: "long" });
 }
 const uv = "fc-col-header-cell";
 function cv(n) {
@@ -13729,7 +13742,7 @@ class Gk extends Tt {
     ] })));
   }
 }
-const Yk = Nt({ weekday: "long" });
+const Yk = Pt({ weekday: "long" });
 class Kk extends Tt {
   render() {
     let { props: t } = this, { dateEnv: e, theme: r, viewApi: i, options: o } = this.context, a = fn(/* @__PURE__ */ new Date(2592e5), t.dow), l = {
@@ -14398,7 +14411,7 @@ const sf = (n) => te(Vr.Consumer, null, (t) => {
     view: t.viewApi
   };
   return te(Cn, Object.assign({}, n, { elTag: n.elTag || "div", renderProps: r, generatorName: "nowIndicatorContent", customGenerator: e.nowIndicatorContent, classNameGenerator: e.nowIndicatorClassNames, didMount: e.nowIndicatorDidMount, willUnmount: e.nowIndicatorWillUnmount }));
-}), pA = Nt({ day: "numeric" });
+}), pA = Pt({ day: "numeric" });
 class uf extends Tt {
   constructor() {
     super(...arguments), this.refineRenderProps = Bl(mA);
@@ -15450,7 +15463,7 @@ class wC {
 }
 function xC(n, t, e) {
   let r;
-  return /^(year|month)$/.test(n.currentRangeUnit) ? r = n.currentRange : r = n.activeRange, e.formatRange(r.start, r.end, Nt(t.titleFormat || EC(n)), {
+  return /^(year|month)$/.test(n.currentRangeUnit) ? r = n.currentRange : r = n.activeRange, e.formatRange(r.start, r.end, Pt(t.titleFormat || EC(n)), {
     isEndExclusive: n.isRangeAllDay,
     defaultSeparator: t.titleRangeSeparator
   });
@@ -16158,7 +16171,7 @@ function pp(n, t) {
       e[r] = null;
   return e;
 }
-const Pv = Nt({
+const Pv = Pt({
   hour: "numeric",
   minute: "2-digit",
   omitZeroMinute: !0,
@@ -16214,7 +16227,7 @@ function ZC(n) {
     t.push(r.seg), r.isVisible || e.push(r.seg);
   return { allSegs: t, invisibleSegs: e };
 }
-const XC = Nt({ week: "narrow" });
+const XC = Pt({ week: "narrow" });
 class JC extends Xn {
   constructor() {
     super(...arguments), this.rootElRef = yn(), this.state = {
@@ -17729,7 +17742,7 @@ class LT extends Ok {
     return t.allDay ? lk(t) ? ["timed", "allDay"] : ["allDay"] : ["timed"];
   }
 }
-const zT = Nt({
+const zT = Pt({
   hour: "numeric",
   minute: "2-digit",
   omitZeroMinute: !0,
@@ -17746,7 +17759,7 @@ function Jv(n) {
       return te("td", { className: t.join(" "), "data-time": n.isoTimeStr });
     let { dateEnv: r, options: i, viewApi: o } = e, a = (
       // TODO: fully pre-parse
-      i.slotLabelFormat == null ? zT : Array.isArray(i.slotLabelFormat) ? Nt(i.slotLabelFormat[0]) : Nt(i.slotLabelFormat)
+      i.slotLabelFormat == null ? zT : Array.isArray(i.slotLabelFormat) ? Pt(i.slotLabelFormat[0]) : Pt(i.slotLabelFormat)
     ), l = {
       level: 0,
       time: n.time,
@@ -17778,7 +17791,7 @@ class FT extends Tt {
     ));
   }
 }
-const $T = Nt({ week: "short" }), HT = 5;
+const $T = Pt({ week: "short" }), HT = 5;
 class qT extends Xn {
   constructor() {
     super(...arguments), this.allDaySplitter = new LT(), this.headerElRef = yn(), this.rootElRef = yn(), this.scrollerElRef = yn(), this.state = {
@@ -18267,7 +18280,7 @@ function i2(n, t, e, r) {
     s.push({ seg: d, rect: null });
   return { segPlacements: s, hiddenGroups: l };
 }
-const o2 = Nt({
+const o2 = Pt({
   hour: "numeric",
   minute: "2-digit",
   meridiem: !1
@@ -18668,7 +18681,7 @@ function E2(n) {
     te("a", Object.assign({ "aria-hidden": !0, className: "fc-list-day-side-text" }, n.sideNavLinkAttrs), n.sideText)
   );
 }
-const S2 = Nt({
+const S2 = Pt({
   hour: "numeric",
   minute: "2-digit",
   meridiem: "short"
@@ -18837,7 +18850,7 @@ const I2 = {
   // noEventsText is defined in base options
 };
 function wp(n) {
-  return n === !1 ? null : Nt(n);
+  return n === !1 ? null : Pt(n);
 }
 var N2 = mr({
   name: "@fullcalendar/list",
@@ -19019,12 +19032,12 @@ function z2(n, t, e, r, i) {
   }
   return s;
 }
-const j2 = Nt({ year: "numeric", month: "long" }), F2 = Nt({ month: "long" });
+const j2 = Pt({ year: "numeric", month: "long" }), F2 = Pt({ month: "long" });
 function $2(n, t) {
   return n || (t[0].currentRange.start.getUTCFullYear() !== t[t.length - 1].currentRange.start.getUTCFullYear() ? j2 : F2);
 }
 const H2 = {
-  multiMonthTitleFormat: Nt,
+  multiMonthTitleFormat: Pt,
   multiMonthMaxColumns: Number,
   multiMonthMinWidth: Number
 };
@@ -20633,7 +20646,7 @@ const fD = {
                       default: ge(() => [
                         n.modelValue ? (B(), K("div", {
                           key: 0,
-                          class: de(T(Pt)(
+                          class: de(T(It)(
                             "fixed inset-0 bg-slate-200 bg-opacity-40 transition-opacity",
                             n.twBackdrop
                           )),
@@ -23455,7 +23468,7 @@ const RO = { class: "grow" }, MO = {
                     style: ot({
                       width: `${n.width}px`
                     }),
-                    class: de(T(Pt)("rounded-md bg-white p-1 shadow-2xl outline-none ring-1 ring-black ring-opacity-10 focus:outline-none", n.twMenu))
+                    class: de(T(It)("rounded-md bg-white p-1 shadow-2xl outline-none ring-1 ring-black ring-opacity-10 focus:outline-none", n.twMenu))
                   }, {
                     default: ge(() => [
                       Pe(o.$slots, "items", { items: n.items }, () => [
@@ -23825,7 +23838,7 @@ const RO = { class: "grow" }, MO = {
                     }, {
                       default: ge(() => [
                         jn(j("div", {
-                          class: de(T(Pt)(
+                          class: de(T(It)(
                             "fixed inset-0 bg-slate-200 bg-opacity-40 transition-opacity",
                             n.twBackdrop
                           )),
@@ -26361,8 +26374,8 @@ function bM(n, t) {
       Ue.appendChild(_("flatpickr-day", new Date(V, Q, Ge), Ge, at));
     for (var kt = je + 1; kt <= 42 - fe && (e.config.showMonths === 1 || at % 7 !== 0); kt++, at++)
       Ue.appendChild(_("flatpickr-day " + yt, new Date(V, Q + 1, kt % je), kt, at));
-    var It = Dt("div", "dayContainer");
-    return It.appendChild(Ue), It;
+    var Nt = Dt("div", "dayContainer");
+    return Nt.appendChild(Ue), Nt;
   }
   function C() {
     if (e.daysContainer !== void 0) {
@@ -26638,8 +26651,8 @@ function bM(n, t) {
               return pn;
             }), kt = at.indexOf(Q);
             if (kt !== -1) {
-              var It = at[kt + (V.shiftKey ? -1 : 1)];
-              V.preventDefault(), (It || e._input).focus();
+              var Nt = at[kt + (V.shiftKey ? -1 : 1)];
+              V.preventDefault(), (Nt || e._input).focus();
             }
           } else
             !e.config.noCalendar && e.daysContainer && e.daysContainer.contains(Q) && V.shiftKey && (V.preventDefault(), e._input.focus());
@@ -26665,7 +26678,7 @@ function bM(n, t) {
         re(new Date(Ge), !0) || (st = st || Ge > je && Ge < Ue, Ge < Ae && (!Ze || Ge > Ze) ? Ze = Ge : Ge > Ae && (!yt || Ge < yt) && (yt = Ge));
       var at = Array.from(e.rContainer.querySelectorAll("*:nth-child(-n+" + e.config.showMonths + ") > ." + Q));
       at.forEach(function(kt) {
-        var It = kt.dateObj, pn = It.getTime(), Tr = Ze > 0 && pn < Ze || yt > 0 && pn > yt;
+        var Nt = kt.dateObj, pn = Nt.getTime(), Tr = Ze > 0 && pn < Ze || yt > 0 && pn > yt;
         if (Tr) {
           kt.classList.add("notAllowed"), ["inRange", "startRange", "endRange"].forEach(function(gr) {
             kt.classList.remove(gr);
@@ -26805,8 +26818,8 @@ function bM(n, t) {
         return wn + jo.offsetHeight;
       }, 0), Ae = e.calendarContainer.offsetWidth, je = e.config.position.split(" "), Ue = je[0], st = je.length > 1 ? je[1] : null, Ze = Q.getBoundingClientRect(), yt = window.innerHeight - Ze.bottom, Ge = Ue === "above" || Ue !== "below" && yt < fe && Ze.top > fe, at = window.pageYOffset + Ze.top + (Ge ? -fe - 2 : Q.offsetHeight + 2);
       if (Dn(e.calendarContainer, "arrowTop", !Ge), Dn(e.calendarContainer, "arrowBottom", Ge), !e.config.inline) {
-        var kt = window.pageXOffset + Ze.left, It = !1, pn = !1;
-        st === "center" ? (kt -= (Ae - Ze.width) / 2, It = !0) : st === "right" && (kt -= Ae - Ze.width, pn = !0), Dn(e.calendarContainer, "arrowLeft", !It && !pn), Dn(e.calendarContainer, "arrowCenter", It), Dn(e.calendarContainer, "arrowRight", pn);
+        var kt = window.pageXOffset + Ze.left, Nt = !1, pn = !1;
+        st === "center" ? (kt -= (Ae - Ze.width) / 2, Nt = !0) : st === "right" && (kt -= Ae - Ze.width, pn = !0), Dn(e.calendarContainer, "arrowLeft", !Nt && !pn), Dn(e.calendarContainer, "arrowCenter", Nt), Dn(e.calendarContainer, "arrowRight", pn);
         var Tr = window.document.body.offsetWidth - (window.pageXOffset + Ze.right), gr = kt + Ae > window.document.body.offsetWidth, Io = Tr + Ae > window.document.body.offsetWidth;
         if (Dn(e.calendarContainer, "rightMost", gr), !e.config.static)
           if (e.calendarContainer.style.top = at + "px", !gr)
@@ -27365,7 +27378,7 @@ const EM = ["disabled", "placeholder"], SM = {
         sm: "pl-[2.1rem] pr-6",
         md: "pl-10 pr-7"
       }[a.value], C = e.modelValue ? S : "pr-0";
-      return Pt(
+      return It(
         _,
         k,
         E,
@@ -27381,13 +27394,13 @@ const EM = ["disabled", "placeholder"], SM = {
         sm: "pl-2.5",
         md: "pl-3"
       }[a.value];
-      return Pt(
+      return It(
         _,
         k
       );
     }), x = L(() => {
       const _ = "", k = i.value ? "text-red-500" : "text-slate-500", E = fr[a.value];
-      return Pt(
+      return It(
         _,
         k,
         E.iconSize
@@ -29370,7 +29383,7 @@ const BM = /* @__PURE__ */ Co(PM), LM = { class: "text-xs text-slate-600" }, Yy
         sm: "min-h-control-sm gap-0.5 p-0.5",
         md: "min-h-control-md gap-1 p-1"
       }[l.value], G = v.value ? "input-focus border-blue-300" : "";
-      return Pt(F, se, ie, G, r.twContainer);
+      return It(F, se, ie, G, r.twContainer);
     }), ne = L(() => ({
       xs: "h-[calc(theme(spacing.control-xs)_-_theme(spacing[0.5])_-_theme(spacing[0.5])_-_2px)]",
       sm: "h-[calc(theme(spacing.control-sm)_-_theme(spacing[0.5])_-_theme(spacing[0.5])_-_2px)]",
@@ -29395,14 +29408,14 @@ const BM = /* @__PURE__ */ Co(PM), LM = { class: "text-xs text-slate-600" }, Yy
       let ue = "bg-slate-200 border-slate-300";
       y.value && y.value.value == F.value && (ue = "bg-red-200 border-red-300 text-red-800");
       const re = r.disabled ? "cursor-not-allowed opacity-60" : "";
-      return Pt(se, ne.value, G, ue, re, ie);
+      return It(se, ne.value, G, ue, re, ie);
     }, q = L(() => {
       const F = "flex shrink-0 appearance-none items-center justify-center border-0 bg-transparent outline-none", se = {
         xs: "pl-1 pr-2",
         sm: "pl-1 pr-2",
         md: "pl-1 pr-3"
       }[l.value], ie = r.disabled ? "cursor-not-allowed opacity-60" : "";
-      return Pt(F, se, ie);
+      return It(F, se, ie);
     });
     return t({
       focus: R,
@@ -29818,7 +29831,7 @@ const BM = /* @__PURE__ */ Co(PM), LM = { class: "text-xs text-slate-600" }, Yy
       type: Boolean
     }
   },
-  emits: ["update:modelValue"],
+  emits: ["update:modelValue", "blur", "focus"],
   setup(n, { expose: t, emit: e }) {
     const r = n, { nameInternal: i, requiredInternal: o, hasErrorInternal: a, emitUpdate: l, sizeInternal: s } = Mn({
       name: L(() => r.name),
@@ -29848,7 +29861,7 @@ const BM = /* @__PURE__ */ Co(PM), LM = { class: "text-xs text-slate-600" }, Yy
         sm: "p-2.5",
         md: "p-3"
       }[s.value];
-      return Pt(g, m, y, v, b.fontSize, u, r.class);
+      return It(g, m, y, v, b.fontSize, u, r.class);
     });
     return t({
       focus: h,
@@ -29865,7 +29878,9 @@ const BM = /* @__PURE__ */ Co(PM), LM = { class: "text-xs text-slate-600" }, Yy
       rows: n.rows,
       autocomplete: n.autocomplete ? "on" : "off",
       class: de(T(p)),
-      onInput: m[0] || (m[0] = (v) => T(l)(d(v)))
+      onInput: m[0] || (m[0] = (v) => T(l)(d(v))),
+      onBlur: m[1] || (m[1] = (v) => g.$emit("blur")),
+      onFocus: m[2] || (m[2] = (v) => g.$emit("focus"))
     }, null, 42, GM));
   }
 }), YM = ["data-name"], KM = { class: "space-y-2" }, QM = /* @__PURE__ */ Se({
@@ -30239,14 +30254,14 @@ const JM = ["disabled"], eI = ["accept", "multiple"], _f = /* @__PURE__ */ Se({
       default: ge(() => [
         T(r) ? (B(), K("div", tI, [
           j("div", {
-            class: de(T(Pt)("absolute h-full w-full bg-white", n.twBackdrop))
+            class: de(T(It)("absolute h-full w-full bg-white", n.twBackdrop))
           }, null, 2),
           n.size == "sm" ? (B(), De(Xm, {
             key: 0,
-            class: de(T(Pt)("h-10 w-10 text-blue-500", n.twIcon))
+            class: de(T(It)("h-10 w-10 text-blue-500", n.twIcon))
           }, null, 8, ["class"])) : n.size == "lg" ? (B(), De($y, {
             key: 1,
-            class: de(T(Pt)("h-10 w-10 text-blue-500", n.twIcon))
+            class: de(T(It)("h-10 w-10 text-blue-500", n.twIcon))
           }, null, 8, ["class"])) : ke("", !0)
         ])) : ke("", !0)
       ]),
@@ -30571,7 +30586,7 @@ const sI = { class: "absolute z-[1] inset-0 flex h-full w-full items-center just
           T(a) && n.showLoadingMask ? Pe(k.$slots, "loading", { key: 0 }, () => [
             j("div", sI, [
               j("div", {
-                class: de(["absolute inset-0 h-full w-full", T(Pt)("bg-white opacity-80", n.twLoadingMask)])
+                class: de(["absolute inset-0 h-full w-full", T(It)("bg-white opacity-80", n.twLoadingMask)])
               }, null, 2),
               uI
             ])
@@ -33703,7 +33718,7 @@ const Rf = /* @__PURE__ */ Se({
         "flex flex-col top-0 left-0 w-full",
         o.value
       ];
-      return r.value && g.push("overflow-y-auto"), Pt(g, t.class);
+      return r.value && g.push("overflow-y-auto"), It(g, t.class);
     }), l = oe(null), s = Yb(l), d = L(() => e.height.value - s.top.value), c = oe(!1);
     function h() {
       c.value ? p() : f();
@@ -42132,7 +42147,7 @@ ys.exports;
     return ce[O] = vt && W === void 0 ? r : W, this;
   }
   st.prototype.clear = Ze, st.prototype.delete = yt, st.prototype.get = Ge, st.prototype.has = at, st.prototype.set = kt;
-  function It(O) {
+  function Nt(O) {
     var W = -1, ce = O ? O.length : 0;
     for (this.clear(); ++W < ce; ) {
       var Re = O[W];
@@ -42160,7 +42175,7 @@ ys.exports;
     var ce = this.__data__, Re = Qi(ce, O);
     return Re < 0 ? ce.push([O, W]) : ce[Re][1] = W, this;
   }
-  It.prototype.clear = pn, It.prototype.delete = Tr, It.prototype.get = gr, It.prototype.has = Io, It.prototype.set = vi;
+  Nt.prototype.clear = pn, Nt.prototype.delete = Tr, Nt.prototype.get = gr, Nt.prototype.has = Io, Nt.prototype.set = vi;
   function cn(O) {
     var W = -1, ce = O ? O.length : 0;
     for (this.clear(); ++W < ce; ) {
@@ -42171,7 +42186,7 @@ ys.exports;
   function No() {
     this.__data__ = {
       hash: new st(),
-      map: new (Ve || It)(),
+      map: new (Ve || Nt)(),
       string: new st()
     };
   }
@@ -42189,10 +42204,10 @@ ys.exports;
   }
   cn.prototype.clear = No, cn.prototype.delete = Po, cn.prototype.get = Bo, cn.prototype.has = Lo, cn.prototype.set = zo;
   function wn(O) {
-    this.__data__ = new It(O);
+    this.__data__ = new Nt(O);
   }
   function jo() {
-    this.__data__ = new It();
+    this.__data__ = new Nt();
   }
   function Qs(O) {
     return this.__data__.delete(O);
@@ -42205,7 +42220,7 @@ ys.exports;
   }
   function Js(O, W) {
     var ce = this.__data__;
-    if (ce instanceof It) {
+    if (ce instanceof Nt) {
       var Re = ce.__data__;
       if (!Ve || Re.length < e - 1)
         return Re.push([O, W]), this;
@@ -42548,7 +42563,7 @@ bs.exports;
   }(), Ie = ee.toString, Qe = RegExp(
     "^" + U.call(ae).replace(q, "\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, "$1.*?") + "$"
   ), Ye = J ? re.Buffer : void 0, $e = re.Symbol, ct = re.Uint8Array, Le = ee.propertyIsEnumerable, Ve = I.splice, Ne = $e ? $e.toStringTag : void 0, We = Object.getOwnPropertySymbols, Ke = Ye ? Ye.isBuffer : void 0, vt = Te(Object.keys, Object), Rt = Dr(re, "DataView"), V = Dr(re, "Map"), Q = Dr(re, "Promise"), fe = Dr(re, "Set"), Ae = Dr(re, "WeakMap"), je = Dr(Object, "create"), Ue = Tn(Rt), st = Tn(V), Ze = Tn(Q), yt = Tn(fe), Ge = Tn(Ae), at = $e ? $e.prototype : void 0, kt = at ? at.valueOf : void 0;
-  function It(O) {
+  function Nt(O) {
     var W = -1, ce = O == null ? 0 : O.length;
     for (this.clear(); ++W < ce; ) {
       var Re = O[W];
@@ -42578,7 +42593,7 @@ bs.exports;
     var ce = this.__data__;
     return this.size += this.has(O) ? 0 : 1, ce[O] = je && W === void 0 ? r : W, this;
   }
-  It.prototype.clear = pn, It.prototype.delete = Tr, It.prototype.get = gr, It.prototype.has = Io, It.prototype.set = vi;
+  Nt.prototype.clear = pn, Nt.prototype.delete = Tr, Nt.prototype.get = gr, Nt.prototype.has = Io, Nt.prototype.set = vi;
   function cn(O) {
     var W = -1, ce = O == null ? 0 : O.length;
     for (this.clear(); ++W < ce; ) {
@@ -42617,9 +42632,9 @@ bs.exports;
   }
   function jo() {
     this.size = 0, this.__data__ = {
-      hash: new It(),
+      hash: new Nt(),
       map: new (V || cn)(),
-      string: new It()
+      string: new Nt()
     };
   }
   function Qs(O) {
@@ -44445,7 +44460,7 @@ const NB = /* @__PURE__ */ pi(CB, [["render", IB]]), PB = /* @__PURE__ */ j("spa
         sm: "px-2.5 py-[0.31rem] min-h-control-sm",
         md: "px-3 py-[0.43rem] min-h-control-md"
       }[s.value];
-      return Pt(
+      return It(
         b,
         u,
         x,
@@ -44722,7 +44737,7 @@ const NB = /* @__PURE__ */ pi(CB, [["render", IB]]), PB = /* @__PURE__ */ j("spa
     size: { default: "md" }
   },
   setup(n) {
-    const t = n, e = L(() => Pt(
+    const t = n, e = L(() => It(
       "sticky top-0 z-20 w-full shadow-sm || print:hidden",
       t.class
     )), r = Tb(), i = L(() => r.systemAlerts);

package/dist/types/src/components/BaseBadge.vue.d.ts

@@ -1,4 +1,8 @@
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    class: {
+        type: import("vue").PropType<string | string[]>;
+        default: undefined;
+    };
     color: {
         type: import("vue").PropType<string>;
         default: string;
@@ -11,7 +15,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: undefined;
     };
     size: {
-        type: import("vue").PropType<"base" | "sm" | "lg">;
+        type: import("vue").PropType<string>;
         default: string;
     };
     contrast: {
@@ -22,6 +26,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<boolean>;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    class: {
+        type: import("vue").PropType<string | string[]>;
+        default: undefined;
+    };
     color: {
         type: import("vue").PropType<string>;
         default: string;
@@ -34,7 +42,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: undefined;
     };
     size: {
-        type: import("vue").PropType<"base" | "sm" | "lg">;
+        type: import("vue").PropType<string>;
         default: string;
     };
     contrast: {
@@ -45,9 +53,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<boolean>;
     };
 }>>, {
+    class: string | string[];
     color: string;
     icon: string;
-    size: "base" | "sm" | "lg";
+    size: string;
     contrast: "high" | "low";
 }, {}>, {
     default?(_: {}): any;

package/dist/types/src/components/BaseTextarea.vue.d.ts

@@ -54,6 +54,8 @@ declare const _default: import("vue").DefineComponent<{
     focus: typeof focus;
     blur: typeof blur;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    blur: (...args: any[]) => void;
+    focus: (...args: any[]) => void;
     "update:modelValue": (...args: any[]) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
@@ -105,6 +107,8 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
     };
 }>> & {
+    onFocus?: ((...args: any[]) => any) | undefined;
+    onBlur?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     class: string | string[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.6.39",
+  "version": "0.6.41",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseBadge.stories.js

@@ -4,7 +4,7 @@ import { palette } from '@/utils/colors';
 
 const colors = [...Object.keys(palette), '#ff0000', '#dbeafe'];
 
-const sizes = ['sm', 'base', 'lg'];
+const sizes = ['sm', 'md', 'lg'];
 
 export default {
   title: 'Components/BaseBadge',
@@ -88,9 +88,9 @@ export const Sizes = (args) => ({
     return { args, colors, sizes };
   },
   template: `
-  <div v-for="size in sizes" :key="size">
-    <p class="text-xs text-slate-600 leading-tight mb-1">{{ size }}</p>
-    <BaseBadge v-bind="args" :size="size" icon="heroicons:beaker-20-solid">
+  <div v-for="size in sizes" :key="size" class="mb-1">
+    <p class="text-xs text-slate-600 leading-tight">{{ size }}</p>
+    <BaseBadge v-bind="args" :size="size">
       Administrator
     </BaseBadge>
   </div>

package/src/components/BaseBadge.vue

@@ -1,7 +1,6 @@
 <template>
   <span
-    class="inline-flex items-center rounded-full font-medium leading-tight"
-    :class="[sizeClasses, wrapClasses]"
+    :class="classes"
     :style="colorStyle"
   >
     <BaseIcon
@@ -17,20 +16,29 @@
 <script lang="ts" setup>
 import { getColorConfig } from '@/utils/colors';
 import { Icon as BaseIcon } from '@iconify/vue';
+import { twMerge } from 'tailwind-merge';
+
+const sizes = ['sm', 'md', 'lg'];
+
+defineOptions({
+  inheritAttrs: false,
+})
 
 const props = withDefaults(
   defineProps<{
+    class?: string | string[];
     contrast?: 'low' | 'high';
     color?: string;
-    size?: 'sm' | 'base' | 'lg';
+    size?: typeof sizes[number];
     icon?: string;
     wrap?: boolean;
     bordered?: boolean;
   }>(),
   {
-    contrast: 'high',
+    class: undefined,
+    contrast: 'low',
     color: 'gray',
-    size: 'base',
+    size: 'md',
     icon: undefined,
   }
 );
@@ -52,36 +60,34 @@ const colorStyle = computed((): Record<string, string> => {
   return styles;
 });
 
-const wrapClasses = computed(() => {
-  if (!props.wrap) {
-    return 'whitespace-nowrap';
+const sizeInternal = computed(() => {
+  if (!sizes.includes(props.size)) {
+    return 'md';
   }
-  return '';
-});
 
-const sizeClasses = computed(() => {
-  if (props.size == 'sm') {
-    return 'px-2 py-px text-[11px]';
-  }
-  if (props.size == 'base') {
-    return 'px-2.5 py-0.5 text-xs';
-  }
-  if (props.size == 'lg') {
-    return 'px-3 py-0.5 text-sm';
-  }
-  return 'px-2.5 py-0.5 text-xs';
+  return props.size;
 });
 
+const classes = computed(() => {
+  const base = 'inline-flex items-center rounded leading-tight';
+  const size = {
+    sm: 'px-1.5 py-px text-[10px]',
+    md: 'px-1.5 py-0.5 text-xs',
+    lg: 'px-1.5 py-0.5 text-sm',
+  }[sizeInternal.value];
+  const wrap = props.wrap ? 'whitespace-nowrap' : '';
+
+  return twMerge(base, wrap, size, props.class);
+})
+
 const iconSizeClasses = computed(() => {
-  if (props.size == 'sm') {
-    return 'h-2.5 w-2.5 mr-1 -ml-px';
-  }
-  if (props.size == 'base') {
-    return 'h-3 w-3 mr-1 -ml-0.5';
-  }
-  if (props.size == 'lg') {
-    return 'h-4 w-4 mr-1 -ml-0.5';
-  }
-  return 'h-3 w-3 mr-1 -ml-0.5';
+
+  const size = {
+    sm: 'h-2.5 w-2.5 mr-1',
+    md: 'h-3 w-3 mr-1',
+    lg: 'h-4 w-4 mr-1',
+  }[sizeInternal.value];
+
+  return size;
 });
 </script>

package/src/components/BaseTextarea.vue

@@ -11,6 +11,8 @@
     :autocomplete="autocomplete ? 'on' : 'off'"
     :class="classes"
     @input="emitUpdate(transformInputValue($event))"
+    @blur="$emit('blur')"
+    @focus="$emit('focus')"
   />
 </template>
 
@@ -76,7 +78,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue', 'blur', 'focus']);
 
 const { nameInternal, requiredInternal, hasErrorInternal, emitUpdate, sizeInternal } =
   useField({

package/src/utils/colors.ts

@@ -44,7 +44,7 @@ export const palette: Record<string, ColorPalette> = {
   red: {
     low: {
       backgroundColor: colors.red[100],
-      textColor: colors.red[700],
+      textColor: colors.red[800],
       borderColor: colors.red[300],
     },
     high: {
@@ -56,7 +56,7 @@ export const palette: Record<string, ColorPalette> = {
   orange: {
     low: {
       backgroundColor: colors.orange[100],
-      textColor: colors.orange[700],
+      textColor: colors.orange[800],
       borderColor: colors.orange[300],
     },
     high: {
@@ -68,7 +68,7 @@ export const palette: Record<string, ColorPalette> = {
   yellow: {
     low: {
       backgroundColor: colors.yellow[100],
-      textColor: colors.yellow[700],
+      textColor: colors.yellow[800],
       borderColor: colors.yellow[300],
     },
     high: {
@@ -80,7 +80,7 @@ export const palette: Record<string, ColorPalette> = {
   green: {
     low: {
       backgroundColor: colors.green[100],
-      textColor: colors.green[700],
+      textColor: colors.green[800],
       borderColor: colors.green[300],
     },
     high: {
@@ -92,7 +92,7 @@ export const palette: Record<string, ColorPalette> = {
   teal: {
     low: {
       backgroundColor: colors.teal[100],
-      textColor: colors.teal[700],
+      textColor: colors.teal[800],
       borderColor: colors.teal[300],
     },
     high: {
@@ -104,7 +104,7 @@ export const palette: Record<string, ColorPalette> = {
   cyan: {
     low: {
       backgroundColor: colors.cyan[100],
-      textColor: colors.cyan[700],
+      textColor: colors.cyan[800],
       borderColor: colors.cyan[300],
     },
     high: {
@@ -116,7 +116,7 @@ export const palette: Record<string, ColorPalette> = {
   blue: {
     low: {
       backgroundColor: colors.blue[100],
-      textColor: colors.blue[700],
+      textColor: colors.blue[800],
       borderColor: colors.blue[300],
     },
     high: {
@@ -128,7 +128,7 @@ export const palette: Record<string, ColorPalette> = {
   indigo: {
     low: {
       backgroundColor: colors.indigo[100],
-      textColor: colors.indigo[700],
+      textColor: colors.indigo[800],
       borderColor: colors.indigo[300],
     },
     high: {
@@ -140,7 +140,7 @@ export const palette: Record<string, ColorPalette> = {
   purple: {
     low: {
       backgroundColor: colors.purple[100],
-      textColor: colors.purple[700],
+      textColor: colors.purple[800],
       borderColor: colors.purple[300],
     },
     high: {
@@ -152,7 +152,7 @@ export const palette: Record<string, ColorPalette> = {
   pink: {
     low: {
       backgroundColor: colors.pink[100],
-      textColor: colors.pink[700],
+      textColor: colors.pink[800],
       borderColor: colors.pink[300],
     },
     high: {