qaema-ui 0.0.22 → 0.0.23

package/dist/components/DatePicker.js

@@ -11,8 +11,8 @@ import { isAfter as z } from "../node_modules/date-fns/isAfter.js";
 import { isValid as ce } from "../node_modules/date-fns/isValid.js";
 import { arSA as de } from "../node_modules/date-fns/locale/ar-SA.js";
 import { enUS as pe } from "../node_modules/date-fns/locale/en-US.js";
-import { addMonths as me } from "../node_modules/date-fns/addMonths.js";
-import { subMonths as ge } from "../node_modules/date-fns/subMonths.js";
+import { addMonths as ge } from "../node_modules/date-fns/addMonths.js";
+import { subMonths as me } from "../node_modules/date-fns/subMonths.js";
 import { startOfWeek as fe } from "../node_modules/date-fns/startOfWeek.js";
 import { startOfMonth as ue } from "../node_modules/date-fns/startOfMonth.js";
 import { endOfWeek as he } from "../node_modules/date-fns/endOfWeek.js";
@@ -156,6 +156,7 @@ const De = i.div`
   font-size: ${({ theme: e }) => e.typography.sizes.s4};
   font-weight: 400;
   text-align: ${({ theme: e }) => e.dir === "rtl" ? "right" : "left"};
+  line-height: ${({ theme: e }) => e.typography.lineHeights.s};
 `, Ee = i.span`
   color: ${({ theme: e }) => e.colors.grey.n300};
   font-size: ${({ theme: e }) => e.typography.sizes.s2};
@@ -164,7 +165,7 @@ const De = i.div`
   justify-content: ${({ theme: e }) => e.dir === "rtl" ? "flex-end" : "flex-start"};
   text-align: ${({ theme: e }) => e.dir === "rtl" ? "right" : "left"};
 `, fr = ({ value: e, onChange: a, minDate: d, maxDate: x, label: v, optional: O, disabled: W, error: D }) => {
-  const [E, $] = f(!1), [p, m] = f(e || /* @__PURE__ */ new Date()), [w, u] = f(e || null), [I, h] = f(e ? b(e, "dd/MM/yyyy") : ""), [M, j] = f("calendar"), [T, R] = f(0), S = re(null), k = /* @__PURE__ */ new Date(), C = ie(), { t: V, i18n: H } = te(), l = (H.language || "").toLowerCase().startsWith("ar") || C.dir === "rtl", y = l ? "rtl" : "ltr", P = l ? de : pe, J = l ? ["أح", "اث", "ثل", "أر", "خم", "جم", "سب"] : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], B = l ? ["يناير", "فبراير", "مارس", "أبريل", "مايو", "يونيو", "يوليو", "أغسطس", "سبتمبر", "أكتوبر", "نوفمبر", "ديسمبر"] : ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], g = (r) => {
+  const [E, $] = f(!1), [p, g] = f(e || /* @__PURE__ */ new Date()), [w, u] = f(e || null), [I, h] = f(e ? b(e, "dd/MM/yyyy") : ""), [M, j] = f("calendar"), [T, R] = f(0), S = re(null), k = /* @__PURE__ */ new Date(), C = ie(), { t: V, i18n: H } = te(), l = (H.language || "").toLowerCase().startsWith("ar") || C.dir === "rtl", y = l ? "rtl" : "ltr", P = l ? de : pe, J = l ? ["أح", "اث", "ثل", "أر", "خم", "جم", "سب"] : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], B = l ? ["يناير", "فبراير", "مارس", "أبريل", "مايو", "يونيو", "يوليو", "أغسطس", "سبتمبر", "أكتوبر", "نوفمبر", "ديسمبر"] : ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], m = (r) => {
     const s = ["٠", "١", "٢", "٣", "٤", "٥", "٦", "٧", "٨", "٩"];
     return r.toString().replace(/\d/g, (n) => s[Number(n)]);
   }, _ = (r) => {
@@ -179,7 +180,7 @@ const De = i.div`
   }, []), A(() => {
     if (e) {
       const r = b(e, "dd/MM/yyyy");
-      u(e), m(e), h(l ? g(r) : r);
+      u(e), g(e), h(l ? m(r) : r);
     } else
       u(null), h("");
   }, [e, l]);
@@ -191,10 +192,10 @@ const De = i.div`
       return;
     }
     n.length >= 3 && (n = n.slice(0, 2) + "/" + n.slice(2)), n.length >= 6 && (n = n.slice(0, 5) + "/" + n.slice(5, 9));
-    const t = l ? g(n) : n;
+    const t = l ? m(n) : n;
     if (h(t), n.length === 10) {
       const c = le(n, "dd/MM/yyyy", /* @__PURE__ */ new Date()), ee = d && L(c, d) || x && z(c, x);
-      ce(c) && !ee && (u(c), m(c), a(c));
+      ce(c) && !ee && (u(c), g(c), a(c));
     }
   }, U = () => {
     const r = fe(ue(p), { weekStartsOn: 0 }), s = he(ye(p), { weekStartsOn: 0 }), n = [];
@@ -208,9 +209,9 @@ const De = i.div`
             disabled: c,
             selected: w ? $e(t, w) : !1,
             onClick: () => {
-              c || (u(t), h(l ? g(b(t, "dd/MM/yyyy")) : b(t, "dd/MM/yyyy")), a(t), $(!1));
+              c || (u(t), h(l ? m(b(t, "dd/MM/yyyy")) : b(t, "dd/MM/yyyy")), a(t), $(!1));
             },
-            children: l ? g(t.getDate()) : t.getDate()
+            children: l ? m(t.getDate()) : t.getDate()
           },
           t.toISOString()
         )
@@ -221,15 +222,15 @@ const De = i.div`
     const s = we(/* @__PURE__ */ new Date()) + T * 12;
     return Array.from({ length: 12 }, (n, t) => s + t);
   }, K = (r) => {
-    m(Me(p, r)), j("month");
+    g(Me(p, r)), j("month");
   }, Q = (r) => {
     const s = je(p, r);
-    m(s), j("calendar");
+    g(s), j("calendar");
   }, X = () => {
     const r = y === "rtl", s = () => {
-      M === "calendar" ? m(ge(p)) : R((t) => t - 1);
+      M === "calendar" ? g(me(p)) : R((t) => t - 1);
     }, n = () => {
-      M === "calendar" ? m(me(p, 1)) : R((t) => t + 1);
+      M === "calendar" ? g(ge(p, 1)) : R((t) => t + 1);
     };
     return /* @__PURE__ */ o.jsxs(Re, { children: [
       /* @__PURE__ */ o.jsx(
@@ -245,7 +246,7 @@ const De = i.div`
       /* @__PURE__ */ o.jsxs("div", { onClick: () => j("year"), children: [
         (() => {
           const t = b(p, "MMMM yyyy", { locale: P });
-          return l ? g(t) : t;
+          return l ? m(t) : t;
         })(),
         /* @__PURE__ */ o.jsx(ne, { color: C.colors.grey.n300, size: 12 })
       ] }),
@@ -272,7 +273,7 @@ const De = i.div`
         children: V("SET_DATE")
       }
     ) })
-  ] }) : M === "year" ? /* @__PURE__ */ o.jsx(F, { children: /* @__PURE__ */ o.jsx(Fe, { children: q().map((r) => /* @__PURE__ */ o.jsx(N, { onClick: () => K(r), children: l ? g(r) : r }, r)) }) }) : /* @__PURE__ */ o.jsx(F, { children: /* @__PURE__ */ o.jsx(Ne, { children: B.map((r, s) => /* @__PURE__ */ o.jsx(N, { onClick: () => Q(s), children: r }, `${r}-${s}`)) }) });
+  ] }) : M === "year" ? /* @__PURE__ */ o.jsx(F, { children: /* @__PURE__ */ o.jsx(Fe, { children: q().map((r) => /* @__PURE__ */ o.jsx(N, { onClick: () => K(r), children: l ? m(r) : r }, r)) }) }) : /* @__PURE__ */ o.jsx(F, { children: /* @__PURE__ */ o.jsx(Ne, { children: B.map((r, s) => /* @__PURE__ */ o.jsx(N, { onClick: () => Q(s), children: r }, `${r}-${s}`)) }) });
   return /* @__PURE__ */ o.jsxs(De, { ref: S, children: [
     v && /* @__PURE__ */ o.jsxs(We, { children: [
       v,

package/dist/components/DropDown.js

@@ -10,58 +10,58 @@ import { HelperTextWrapper as je } from "./PhoneInputField.js";
 import pe from "./SearchBar.js";
 import Se from "./Spinner.js";
 import z from "./Typography.js";
-const Ee = (i) => {
+const Ee = (f) => {
   const {
     label: b,
     options: m,
     // value,
     placeholder: F = "Select Something",
     optional: H = !1,
-    error: h = "",
+    error: s = "",
     disabled: x = !1,
     selectIdentifier: D,
-    keyIdentifier: f = "id",
+    keyIdentifier: h = "id",
     selectCallBack: j,
     showLeadIcon: M,
     icon: N,
     allowSearch: P,
     searchHandler: R,
     searchPlaceholder: A,
-    onToggle: s,
-    multiSelect: o = !1,
+    onToggle: o,
+    multiSelect: c = !1,
     isLoading: B = !1,
     currentSelectedOptions: y = [],
     isInteractive: I = !1
-  } = i, c = g(null), p = g(null), u = ne(), { t: T } = te(), Q = g(null), [a, v] = w(y), [d, k] = w(!1), [U, Z] = w(0), O = N ?? /* @__PURE__ */ r.jsx(r.Fragment, {}), q = le("dropdown"), S = Y(() => {
+  } = f, u = g(null), p = g(null), d = ne(), { t: T } = te(), Q = g(null), [a, v] = w(y), [i, k] = w(!1), [U, Z] = w(0), O = N ?? /* @__PURE__ */ r.jsx(r.Fragment, {}), q = le("dropdown"), S = Y(() => {
     var e, n;
-    (e = c == null ? void 0 : c.current) != null && e.offsetWidth && p.current && Z(((n = c.current) == null ? void 0 : n.offsetWidth) / 16);
+    (e = u == null ? void 0 : u.current) != null && e.offsetWidth && p.current && Z(((n = u.current) == null ? void 0 : n.offsetWidth) / 16);
   }, []);
-  C(() => (d && (S(), window.addEventListener("resize", S)), () => window.removeEventListener("resize", S)), [d, S]), C(() => {
+  C(() => (i && (S(), window.addEventListener("resize", S)), () => window.removeEventListener("resize", S)), [i, S]), C(() => {
     v(y);
   }, [y]);
-  const G = (e, n, l, t = "default") => l ? u.colors.grey.n400 : e ? u.colors.state.error.n450 : n ? u.colors.primary.dark.n600 : t === "light-primary" ? u.colors.primary.purple.n450 : u.colors.grey.n300, $ = (e) => a.some((n) => typeof n.value == "object" && typeof e.value == "object" ? n.value[f] === e.value[f] : n.value === e.value), J = (e) => {
-    if (o) {
+  const G = (e, n, l, t = "default") => l ? d.colors.grey.n400 : e ? d.colors.state.error.n450 : n ? d.colors.primary.dark.n600 : t === "light-primary" ? d.colors.primary.purple.n450 : d.colors.grey.n300, $ = (e) => a.some((n) => typeof n.value == "object" && typeof e.value == "object" ? n.value[h] === e.value[h] : n.value === e.value), J = (e) => {
+    if (c) {
       const n = $(e);
       let l;
-      n ? l = a.filter((t) => typeof t.value == "object" && typeof e.value == "object" ? t.value[f] !== e.value[f] : t.value !== e.value) : l = [...a, e], v(l), j(l.map((t) => t.value));
+      n ? l = a.filter((t) => typeof t.value == "object" && typeof e.value == "object" ? t.value[h] !== e.value[h] : t.value !== e.value) : l = [...a, e], v(l), j(l.map((t) => t.value));
     } else
       v([e]), j(e.value);
   }, K = (e) => {
-    const n = a.filter((l) => typeof l.value == "object" && typeof e.value == "object" ? l.value[f] !== e.value[f] : l.value !== e.value);
+    const n = a.filter((l) => typeof l.value == "object" && typeof e.value == "object" ? l.value[h] !== e.value[h] : l.value !== e.value);
     v(n), j(n.map((l) => l.value));
   }, V = () => {
     var e;
-    return a.length === 0 ? F : o ? `${a.length} ${T("SELECTED")}` : (e = a[0]) == null ? void 0 : e.label;
+    return a.length === 0 ? F : c ? `${a.length} ${T("SELECTED")}` : (e = a[0]) == null ? void 0 : e.label;
   };
   C(() => {
     const e = (n) => {
-      p.current && c.current && !p.current.contains(n.target) && !c.current.contains(n.target) && (k(!1), s == null || s(!1));
+      p.current && u.current && !p.current.contains(n.target) && !u.current.contains(n.target) && (k(!1), o == null || o(!1));
     };
-    return d && document.addEventListener("mousedown", e), () => {
+    return i && document.addEventListener("mousedown", e), () => {
       document.removeEventListener("mousedown", e);
     };
-  }, [d, s]);
-  const X = () => I ? null : /* @__PURE__ */ r.jsx(je, { error: h, children: h });
+  }, [i, o]);
+  const X = () => I || (s == null ? void 0 : s.length) === 0 ? null : /* @__PURE__ */ r.jsx(je, { error: s, children: s });
   return /* @__PURE__ */ r.jsxs(ae, { children: [
     b && /* @__PURE__ */ r.jsxs(se, { children: [
       /* @__PURE__ */ r.jsx("label", { children: b }),
@@ -70,14 +70,14 @@ const Ee = (i) => {
     /* @__PURE__ */ r.jsxs(
       oe,
       {
-        show: d,
+        show: i,
         onToggle: () => {
-          s == null || s(!d), k((e) => !e);
+          o == null || o(!i), k((e) => !e);
         },
         placement: "bottom-start",
-        autoClose: o ? "outside" : !0,
+        autoClose: c ? "outside" : !0,
         children: [
-          /* @__PURE__ */ r.jsx(ce, { disabled: x, ref: c, $valid: !h, $variant: i.variant || "default", children: /* @__PURE__ */ r.jsx(ue, { $valid: !h, $isInteractive: I, children: /* @__PURE__ */ r.jsxs("div", { className: "title-container", children: [
+          /* @__PURE__ */ r.jsx(ce, { disabled: x, ref: u, $valid: !s, $variant: f.variant || "default", children: /* @__PURE__ */ r.jsx(ue, { $valid: !s, $isInteractive: I, children: /* @__PURE__ */ r.jsxs("div", { className: "title-container", children: [
             /* @__PURE__ */ r.jsxs("div", { className: "heading-container", children: [
               M && typeof O == "function" && /* @__PURE__ */ r.jsx(O, {}),
               /* @__PURE__ */ r.jsx(
@@ -85,25 +85,25 @@ const Ee = (i) => {
                 {
                   component: "span",
                   variant: "mdText",
-                  color: G(h, a.length > 0, x, i.variant || "default"),
+                  color: G(s, a.length > 0, x, f.variant || "default"),
                   children: V()
                 }
               )
             ] }),
             /* @__PURE__ */ r.jsxs(de, { children: [
-              !o && a.length > 0 && !x && /* @__PURE__ */ r.jsx(
+              !c && a.length > 0 && !x && /* @__PURE__ */ r.jsx(
                 L,
                 {
                   style: { cursor: "pointer", marginLeft: "0.5rem" },
                   onClick: (e) => {
-                    e.stopPropagation(), v([]), j(o ? [] : "");
+                    e.stopPropagation(), v([]), j(c ? [] : "");
                   }
                 }
               ),
               !x && /* @__PURE__ */ r.jsx(_, {})
             ] })
           ] }) }) }),
-          d && /* @__PURE__ */ r.jsxs(ie, { ref: p, $menuWidth: U, $zIndex: q, children: [
+          i && /* @__PURE__ */ r.jsxs(ie, { ref: p, $menuWidth: U, $zIndex: q, children: [
             P && /* @__PURE__ */ r.jsx(fe, { children: /* @__PURE__ */ r.jsx(pe, { placeholder: A, onSearch: R }) }),
             /* @__PURE__ */ r.jsxs(
               he,
@@ -111,7 +111,7 @@ const Ee = (i) => {
                 ref: Q,
                 onScroll: (e) => {
                   var n;
-                  (n = i.onScroll) == null || n.call(i, e);
+                  (n = f.onScroll) == null || n.call(f, e);
                 },
                 children: [
                   m == null ? void 0 : m.map((e) => {
@@ -123,7 +123,7 @@ const Ee = (i) => {
                         onClick: () => J(e),
                         $selected: n,
                         children: [
-                          o && (n ? /* @__PURE__ */ r.jsx(ee, { color: u.colors.primary.purple.n500 }) : /* @__PURE__ */ r.jsx(re, { color: u.colors.primary.purple.n450 })),
+                          c && (n ? /* @__PURE__ */ r.jsx(ee, { color: d.colors.primary.purple.n500 }) : /* @__PURE__ */ r.jsx(re, { color: d.colors.primary.purple.n450 })),
                           " ",
                           /* @__PURE__ */ r.jsx(z, { variant: "smText", children: e == null ? void 0 : e.label })
                         ]
@@ -139,7 +139,7 @@ const Ee = (i) => {
         ]
       }
     ),
-    o && a.length > 0 && /* @__PURE__ */ r.jsx(ve, { children: a.map((e) => {
+    c && a.length > 0 && /* @__PURE__ */ r.jsx(ve, { children: a.map((e) => {
       var n, l, t;
       return /* @__PURE__ */ r.jsxs(
         xe,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "qaema-ui",
   "private": false,
-  "version": "0.0.22",
+  "version": "0.0.23",
   "type": "module",
   "publishConfig": {
     "access": "public"