@base-framework/ui 0.0.12 → 0.0.14

package/dist/{confirmation-CYHsLIOn.js → confirmation-BqQwYCFz.js}

@@ -31,15 +31,15 @@ const P = {
     bgColor: "bg-muted/10",
     iconColor: "text-muted-foreground"
   }
-}, re = (e, t) => n({ class: `flex items-center justify-center h-6 w-6 mr-3 ${t}` }, [
+}, le = (e, t) => n({ class: `flex items-center justify-center h-6 w-6 mr-3 ${t}` }, [
   h({ html: e })
-]), le = (e) => _({ class: "font-semibold" }, e), ie = (e) => p({ class: "text-sm text-muted-foreground" }, e), ht = c(({ title: e, description: t, icon: s, type: o = "default" }) => {
-  const { borderColor: l, bgColor: r, iconColor: i } = P[o] || P.default;
-  return n({ class: `flex items-start p-4 border rounded-lg ${r} ${l}` }, [
+]), re = (e) => _({ class: "font-semibold" }, e), ie = (e) => p({ class: "text-sm text-muted-foreground" }, e), ht = c(({ title: e, description: t, icon: s, type: o = "default" }) => {
+  const { borderColor: r, bgColor: l, iconColor: i } = P[o] || P.default;
+  return n({ class: `flex items-start p-4 border rounded-lg ${l} ${r}` }, [
     // Icon and content
-    s && re(s, i),
+    s && le(s, i),
     n({ class: "flex flex-col" }, [
-      le(e),
+      re(e),
       ie(t)
     ])
   ]);
@@ -174,15 +174,15 @@ const be = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
   invalid: s,
   input: t
 } : o)), Ce = c((e, t) => {
-  const l = H(t, (r) => {
-    r.target.checkValidity() && e.setError(null);
-  }, (r) => {
-    e.setError(r.target.validationMessage);
+  const r = H(t, (l) => {
+    l.target.checkValidity() && e.setError(null);
+  }, (l) => {
+    e.setError(l.target.validationMessage);
   });
   return n({
     ...e,
     class: "w-full"
-  }, l);
+  }, r);
 }), ft = x(
   {
     /**
@@ -204,8 +204,8 @@ const be = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
      * @returns {object}
      */
     render() {
-      const e = this.name, t = this.getId(`${e}`), { label: s, description: o } = this, l = (r) => {
-        this.state.error = r, this.state.hasError = !!r;
+      const e = this.name, t = this.getId(`${e}`), { label: s, description: o } = this, r = (l) => {
+        this.state.error = l, this.state.hasError = !!l;
       };
       return n({ class: "flex flex-auto space-y-4" }, [
         be([
@@ -214,10 +214,10 @@ const be = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
             id: t,
             name: e,
             value: this.state.value,
-            setError: l
+            setError: r
           }, this.children),
           o && we({ id: this.getId("description") }, o),
-          n({ onState: ["error", (r) => r && ye(r)] })
+          n({ onState: ["error", (l) => l && ye(l)] })
         ])
       ]);
     }
@@ -232,11 +232,11 @@ const be = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
 ])), bt = (e, t) => n({ class: "flex justify-between" }, [
   a({ class: "text-muted-foreground" }, e),
   a(t)
-]), De = ({ title: e, description: t, back: s, icon: o, options: l = [] }) => M({ class: "modal-header bg-background/80 backdrop-blur-md sticky flex flex-none items-center py-4 px-6 z-10" }, [
+]), De = ({ title: e, description: t, back: s, icon: o, options: r = [] }) => M({ class: "modal-header bg-background/80 backdrop-blur-md sticky flex flex-none items-center py-4 px-6 z-10" }, [
   /**
    * Back Button
    */
-  s && u({ variant: "icon", icon: d.arrows.left, class: "mr-2 p-0 flex sm:hidden", click: (r, i) => i.close() }),
+  s && u({ variant: "icon", icon: d.arrows.left, class: "mr-2 p-0 flex sm:hidden", click: (l, i) => i.close() }),
   /**
    * Icon
    */
@@ -249,7 +249,7 @@ const be = c((e, t) => n({ ...e, class: "flex flex-auto flex-col space-y-2" }, t
       B({ class: "text-lg font-semibold m-0" }, e),
       t && n({ class: "text-sm text-muted-foreground" }, t)
     ]),
-    ...l
+    ...r
   ])
 ]), Ie = c((e, t) => n({
   popover: "manual",
@@ -271,7 +271,7 @@ class xt extends b {
    * @returns {void}
    */
   declareProps() {
-    this.title = null, this.description = null, this.size = "md", this.type = "", this.hidePrimaryButton = !1, this.icon = null, this.onSubmit = null, this.onClose = null, this.back = !1;
+    this.title = null, this.description = null, this.size = null, this.type = null, this.hidePrimaryButton = !1, this.icon = null, this.onSubmit = null, this.onClose = null, this.back = !1;
   }
   /**
    * This will render the modal component.
@@ -473,14 +473,14 @@ class Me extends ae {
    * @returns {object}
    */
   render() {
-    const { bgColor: t, borderColor: s, iconColor: o } = this.getTypeStyles(), l = this.href || null, r = this.getChildren(o);
-    return l ? Be({
-      href: l,
+    const { bgColor: t, borderColor: s, iconColor: o } = this.getTypeStyles(), r = this.href || null, l = this.getChildren(o);
+    return r ? Be({
+      href: r,
       class: `${t} ${s}`
-    }, r) : $e({
+    }, l) : $e({
       close: this.close.bind(this),
       class: `${t} ${s}`
-    }, r);
+    }, l);
   }
   /**
    * This will be called after the component is set up.
@@ -589,8 +589,8 @@ const z = window.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
   class: 'text-sm gap-1 font-medium leading-none disabled:cursor-not-allowed disabled:opacity-70 flex flex-col items-center justify-between rounded-md border-2 bg-popover p-4 hover:bg-accent hover:text-accent-foreground data-[state="active"]:border-primary [&:has([data-state="active"])]:border-primary',
   onState: ["method", { active: e }],
   dataSet: ["method", ["state", e, "active"]],
-  click: (o, { state: l }) => {
-    l.method = e, localStorage.setItem("theme", e), e === "system" && localStorage.removeItem("theme"), Pe(e);
+  click: (o, { state: r }) => {
+    r.method = e, localStorage.setItem("theme", e), e === "system" && localStorage.removeItem("theme"), Pe(e);
   }
 }, [
   D(s),
@@ -773,8 +773,8 @@ const z = window.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
       "bg-primary": e,
       "shadow-md": e
     }],
-    click: (s, { data: o, onClick: l }) => {
-      o.activeIndex = e, l && l(e);
+    click: (s, { data: o, onClick: r }) => {
+      o.activeIndex = e, r && r(e);
     }
   })
 ]), Ve = (e, t) => Array.from({ length: e }, (s, o) => Oe({
@@ -927,9 +927,9 @@ const z = window.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
 }), We = ({ bind: e, min: t, max: s, readonly: o = !1 }) => v({
   value: "[[count]]",
   bind: e,
-  blur: (l, { state: r }) => {
-    let i = parseInt(l.target.value, 10);
-    isNaN(i) && (i = t ?? 0), t !== void 0 && (i = Math.max(i, t)), s !== void 0 && (i = Math.min(i, s)), r.count = i;
+  blur: (r, { state: l }) => {
+    let i = parseInt(r.target.value, 10);
+    isNaN(i) && (i = t ?? 0), t !== void 0 && (i = Math.max(i, t)), s !== void 0 && (i = Math.min(i, s)), l.count = i;
   },
   class: "flex flex-auto text-lg font-medium bg-transparent text-center border min-w-0",
   readonly: o,
@@ -1047,8 +1047,8 @@ const z = window.matchMedia, I = c(({ value: e, label: t, icon: s }) => m({
   new ne({
     dateTime: e,
     filter: s || ((o) => {
-      const l = A.getLocalTime(o, !0, !1, t);
-      return A.getTimeFrame(l);
+      const r = A.getLocalTime(o, !0, !1, t);
+      return A.getTimeFrame(r);
     })
   })
 ]);
@@ -1075,11 +1075,11 @@ function Xe({ bind: e, required: t, toggleOpen: s }) {
     ]
   );
 }
-function T({ items: e, handleTimeSelect: t, state: s, stateValue: o, pad: l = !1 }) {
+function T({ items: e, handleTimeSelect: t, state: s, stateValue: o, pad: r = !1 }) {
   return n(
     { class: "flex flex-col max-h-[200px] overflow-y-auto" },
-    e.map((r) => {
-      let i = l ? r.toString().padStart(2, "0") : r.toString();
+    e.map((l) => {
+      let i = r ? l.toString().padStart(2, "0") : l.toString();
       return m({
         text: i,
         class: "hover:bg-muted/50 rounded-md px-2 py-1",
@@ -1111,7 +1111,7 @@ function Ze({ handleTimeSelect: e }) {
                   [
                     // Hours column
                     T({
-                      items: Array.from({ length: 12 }, (l, r) => r + 1),
+                      items: Array.from({ length: 12 }, (r, l) => l + 1),
                       handleTimeSelect: e,
                       state: o.state,
                       stateValue: "hour",
@@ -1119,7 +1119,7 @@ function Ze({ handleTimeSelect: e }) {
                     }),
                     // Minutes column
                     T({
-                      items: Array.from({ length: 60 }, (l, r) => r),
+                      items: Array.from({ length: 60 }, (r, l) => l),
                       handleTimeSelect: e,
                       state: o.state,
                       stateValue: "minute",
@@ -1148,11 +1148,11 @@ function E(e) {
   const t = /^(\d{1,2}):(\d{2})(?::(\d{2}))?\s?(AM|PM)?$/i, s = e.match(t);
   if (!s)
     return { hour: null, minute: null, meridian: null };
-  let [, o, l, , r] = s, i = parseInt(o, 10), g = parseInt(l, 10);
-  return i < 0 || i > 23 || g < 0 || g > 59 ? { hour: null, minute: null, meridian: null } : (r ? (r = r.toUpperCase(), r === "PM" && i < 12 ? i += 12 : r === "AM" && i === 12 && (i = 12)) : i === 0 ? (r = "AM", i = 12) : i < 12 ? r = "AM" : i === 12 ? r = "PM" : (r = "PM", i -= 12), {
+  let [, o, r, , l] = s, i = parseInt(o, 10), g = parseInt(r, 10);
+  return i < 0 || i > 23 || g < 0 || g > 59 ? { hour: null, minute: null, meridian: null } : (l ? (l = l.toUpperCase(), l === "PM" && i < 12 ? i += 12 : l === "AM" && i === 12 && (i = 12)) : i === 0 ? (l = "AM", i = 12) : i < 12 ? l = "AM" : i === 12 ? l = "PM" : (l = "PM", i -= 12), {
     hour: i.toString().padStart(2, "0"),
     minute: g.toString().padStart(2, "0"),
-    meridian: r
+    meridian: l
   });
 }
 const $t = x(
@@ -1194,10 +1194,10 @@ const $t = x(
      * @returns {object}
      */
     render() {
-      const e = (s, { state: o }) => o.toggle("open"), t = ({ hour: s, minute: o, meridian: l }) => {
-        if (s && (this.state.hour = s), o && (this.state.minute = o), l && (this.state.meridian = l), this.state.hour && this.state.minute && this.state.meridian) {
-          const r = `${this.state.hour}:${this.state.minute} ${this.state.meridian}`;
-          this.state.selectedTime = r, this.state.open = !1, this.input.value = r, typeof this.change == "function" && this.change(r);
+      const e = (s, { state: o }) => o.toggle("open"), t = ({ hour: s, minute: o, meridian: r }) => {
+        if (s && (this.state.hour = s), o && (this.state.minute = o), r && (this.state.meridian = r), this.state.hour && this.state.minute && this.state.meridian) {
+          const l = `${this.state.hour}:${this.state.minute} ${this.state.meridian}`;
+          this.state.selectedTime = l, this.state.open = !1, this.input.value = l, typeof this.change == "function" && this.change(l);
         }
       };
       return n(
@@ -1285,13 +1285,13 @@ class nt extends b {
   render() {
     const t = (g) => {
       g.target === this.panel && this.close();
-    }, { borderColor: s, bgColor: o, iconColor: l } = j[this.type] || j.default, r = `${this.getMainClass()} ${o} ${s}`, i = this.title || "Dialog Title";
+    }, { borderColor: s, bgColor: o, iconColor: r } = j[this.type] || j.default, l = `${this.getMainClass()} ${o} ${s}`, i = this.title || "Dialog Title";
     return st({
-      class: r,
+      class: l,
       title: i,
       click: t,
       icon: this.icon,
-      iconColor: l,
+      iconColor: r,
       description: this.description,
       buttons: this.getButtons()
     }, this.children);

package/dist/index.es.js

@@ -3,7 +3,7 @@ import { B as g, I as C, L as T } from "./icon-B9QUT2NY.js";
 import { C as D, d as I, D as b, c as S, E as B, F as P, H as F, I as M, M as k, N, P as v, R as f, S as x, T as h, a as y, b as W, U as L, W as A } from "./inputs-O_WkdbI3.js";
 import { V as w, a as U } from "./veil-DSQdR6CM.js";
 import { Icons as R } from "./icons.es.js";
-import { A as G, B as V, C as j, z as q, u as z, v as J, w as _, D as K, j as Q, k as X, G as Y, E as Z, s as $, c as aa, a as sa, b as ea, i as oa, g as ta, e as ra, h as na, F as ia, d as la, f as pa, t as ua, M as ma, l as da, N as ga, P as Ca, p as Ta, q as ca, S as Da, n as Ia, o as ba, T as Sa, x as Ba, y as Pa, m as Fa, r as Ma } from "./confirmation-CYHsLIOn.js";
+import { A as G, B as V, C as j, z as q, u as z, v as J, w as _, D as K, j as Q, k as X, G as Y, E as Z, s as $, c as aa, a as sa, b as ea, i as oa, g as ta, e as ra, h as na, F as ia, d as la, f as pa, t as ua, M as ma, l as da, N as ga, P as Ca, p as Ta, q as ca, S as Da, n as Ia, o as ba, T as Sa, x as Ba, y as Pa, m as Fa, r as Ma } from "./confirmation-BqQwYCFz.js";
 import { A as Na, b as va, C as fa, D as xa, a as ha, F as ya, M as Wa, P as La, c as Aa, g as Ha, p as wa } from "./calendar-B5TK6tLi.js";
 import { B as Oa, m as Ra, C as Ea, j as Ga, D as Va, l as ja, H as qa, I as za, N as Ja, O as _a, P as Ka, S as Qa, p as Xa, n as Ya, o as Za, T as $a, k as as, U as ss, W as es, f as os, h as ts, i as rs, c as ns, d as is, b as ls, e as ps, a as us, g as ms } from "./tab-BjiQGl_0.js";
 import { B as gs, I as Cs, M as Ts, d as cs, e as Ds, g as Is, N as bs, b as Ss, a as Bs, f as Ps, P as Fs, c as Ms, S as ks, T as Ns } from "./mobile-nav-wrapper-CguousG5.js";

package/dist/molecules.es.js

@@ -1,4 +1,4 @@
-import { A as o, B as t, C as e, z as i, u as r, v as n, w as m, D as l, j as S, k as D, G as c, E as u, s as d, c as g, a as p, b as C, i as F, g as T, e as A, h as P, F as f, d as b, f as w, t as B, M as I, l as M, N as x, P as y, p as k, q as v, S as N, n as h, o as E, T as L, x as U, y as j, m as q, r as z } from "./confirmation-CYHsLIOn.js";
+import { A as o, B as t, C as e, z as i, u as r, v as n, w as m, D as l, j as S, k as D, G as c, E as u, s as d, c as g, a as p, b as C, i as F, g as T, e as A, h as P, F as f, d as b, f as w, t as B, M as I, l as M, N as x, P as y, p as k, q as v, S as N, n as h, o as E, T as L, x as U, y as j, m as q, r as z } from "./confirmation-BqQwYCFz.js";
 import { A as O, P as R, g as _ } from "./calendar-B5TK6tLi.js";
 export {
   o as Alert,

package/dist/types/components/molecules/modals/modal.d.ts

@@ -17,18 +17,18 @@ export class Modal extends Component {
      */
     description: any;
     /**
-     * @member {string} size
-     * @default 'md'
+     * @member {string|null} size
+     * @default null
      * @values 'sm', 'md', 'lg', 'xl'
      */
-    size: string;
+    size: any;
     /**
-     * @member {string} type
-     * @default ''
+     * @member {string|null} type
+     * @default null
      * @values 'right', 'left'
      * @description This will set the type of modal.
      */
-    type: string;
+    type: any;
     /**
      * @member {boolean} hidePrimaryButton
      * @default false

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@base-framework/ui",
-	"version": "0.0.12",
+	"version": "0.0.14",
 	"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/style.css

@@ -1 +0,0 @@
-.modal{animation:popIn .2s;max-height:100vh;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);@apply shadow-xl md:rounded-md rounded-md;}.modal:after{content:"";position:fixed;top:0;left:0;right:0;bottom:0;z-index:-1}.modal.sm{max-width:425px;max-height:350px;@apply shadow-xl md:rounded-md rounded-md border;}.modal.sm .modal-body{max-height:300px}.modal.lg,.modal.xl{top:0;bottom:0;max-height:100vh}.modal .modal-header{padding-top:calc(1rem + env(safe-area-inset-top));top:calc(-0px - env(safe-area-inset-top))}.modal .modal-footer{padding-bottom:calc(1rem + env(safe-area-inset-bottom));bottom:calc(-0px - env(safe-area-inset-bottom))}@media (min-width: 1024px){.modal.md{max-height:80vh;padding:0}.modal header button.icon{@apply hidden;}}.modal.right,.modal.left{top:0;bottom:0;max-height:100vh;border-radius:0}.modal.right.md,.modal.left.md{@apply max-w-[640px];}.modal.right{margin-right:0;animation-name:pullRightIn}.modal.left{margin-left:0;animation-name:pullLeftIn}