qaema-ui 0.0.22 → 0.0.24

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.d.ts

@@ -26,6 +26,7 @@ export type DropDownProps = {
     isInteractive?: boolean;
     onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
     variant?: 'light-primary' | 'default';
+    endIcon?: React.ReactNode;
 };
 declare const DropDown: React.FC<DropDownProps>;
 export default DropDown;

package/dist/components/DropDown.js

@@ -1,83 +1,84 @@
 import { j as r } from "../_virtual/jsx-runtime.js";
-import { useRef as g, useState as w, useCallback as Y, useEffect as C } from "react";
-import { FaTimes as L, FaAngleDown as _ } from "../node_modules/react-icons/fa/index.js";
-import { ImCheckboxChecked as ee, ImCheckboxUnchecked as re } from "../node_modules/react-icons/im/index.js";
-import { useTheme as ne } from "styled-components";
-import le from "../hooks/useZIndex.js";
-import { useQaemaCoreTranslation as te } from "../i18n/i18n.js";
-import { StyledDropDownContainer as ae, StyledlabelContainer as se, StyledDropDown as oe, StyledDropDownToggle as ce, StyledDropDownTitle as ue, IconsContainer as de, StyledDropDownMenu as ie, SearchContainer as fe, StyledOptionsContainer as he, StyledDropItem as W, SelectedTagsContainer as ve, SelectedTag as xe } from "../styles/Dropdown.styles.js";
-import { HelperTextWrapper as je } from "./PhoneInputField.js";
-import pe from "./SearchBar.js";
-import Se from "./Spinner.js";
+import { useRef as g, useState as w, useCallback as _, useEffect as C } from "react";
+import { FaTimes as L, FaAngleDown as ee } from "../node_modules/react-icons/fa/index.js";
+import { ImCheckboxChecked as re, ImCheckboxUnchecked as ne } from "../node_modules/react-icons/im/index.js";
+import { useTheme as le } from "styled-components";
+import te from "../hooks/useZIndex.js";
+import { useQaemaCoreTranslation as ae } from "../i18n/i18n.js";
+import { StyledDropDownContainer as se, StyledlabelContainer as oe, StyledDropDown as ce, StyledDropDownToggle as ue, StyledDropDownTitle as de, IconsContainer as ie, StyledDropDownMenu as fe, SearchContainer as he, StyledOptionsContainer as ve, StyledDropItem as W, SelectedTagsContainer as xe, SelectedTag as je } from "../styles/Dropdown.styles.js";
+import { HelperTextWrapper as pe } from "./PhoneInputField.js";
+import Se from "./SearchBar.js";
+import me from "./Spinner.js";
 import z from "./Typography.js";
-const Ee = (i) => {
+const Le = (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(() => {
+    isInteractive: I = !1,
+    endIcon: Q
+  } = f, u = g(null), p = g(null), d = le(), { t: T } = ae(), U = g(null), [a, v] = w(y), [i, k] = w(!1), [Z, q] = w(0), O = N ?? /* @__PURE__ */ r.jsx(r.Fragment, {}), G = te("dropdown"), S = _(() => {
     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 && q(((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 J = (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), K = (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);
+  }, V = (e) => {
+    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 = () => {
+  }, X = () => {
     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 });
-  return /* @__PURE__ */ r.jsxs(ae, { children: [
-    b && /* @__PURE__ */ r.jsxs(se, { children: [
+  }, [i, o]);
+  const Y = () => I || (s == null ? void 0 : s.length) === 0 ? null : /* @__PURE__ */ r.jsx(pe, { error: s, children: s });
+  return /* @__PURE__ */ r.jsxs(se, { children: [
+    b && /* @__PURE__ */ r.jsxs(oe, { children: [
       /* @__PURE__ */ r.jsx("label", { children: b }),
       H && /* @__PURE__ */ r.jsx("span", { children: T("OPTIONAL") })
     ] }),
     /* @__PURE__ */ r.jsxs(
-      oe,
+      ce,
       {
-        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(ue, { disabled: x, ref: u, $valid: !s, $variant: f.variant || "default", children: /* @__PURE__ */ r.jsx(de, { $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,33 +86,34 @@ const Ee = (i) => {
                 {
                   component: "span",
                   variant: "mdText",
-                  color: G(h, a.length > 0, x, i.variant || "default"),
-                  children: V()
+                  color: J(s, a.length > 0, x, f.variant || "default"),
+                  children: X()
                 }
               )
             ] }),
-            /* @__PURE__ */ r.jsxs(de, { children: [
-              !o && a.length > 0 && !x && /* @__PURE__ */ r.jsx(
+            /* @__PURE__ */ r.jsxs(ie, { children: [
+              Q,
+              !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(_, {})
+              !x && /* @__PURE__ */ r.jsx(ee, {})
             ] })
           ] }) }) }),
-          d && /* @__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 }) }),
+          i && /* @__PURE__ */ r.jsxs(fe, { ref: p, $menuWidth: Z, $zIndex: G, children: [
+            P && /* @__PURE__ */ r.jsx(he, { children: /* @__PURE__ */ r.jsx(Se, { placeholder: A, onSearch: R }) }),
             /* @__PURE__ */ r.jsxs(
-              he,
+              ve,
               {
-                ref: Q,
+                ref: U,
                 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) => {
@@ -120,10 +122,10 @@ const Ee = (i) => {
                     return /* @__PURE__ */ r.jsxs(
                       W,
                       {
-                        onClick: () => J(e),
+                        onClick: () => K(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(re, { color: d.colors.primary.purple.n500 }) : /* @__PURE__ */ r.jsx(ne, { color: d.colors.primary.purple.n450 })),
                           " ",
                           /* @__PURE__ */ r.jsx(z, { variant: "smText", children: e == null ? void 0 : e.label })
                         ]
@@ -131,7 +133,7 @@ const Ee = (i) => {
                       typeof (e == null ? void 0 : e.value) == "object" && (e == null ? void 0 : e.value) !== null ? (t = (l = e == null ? void 0 : e.value) == null ? void 0 : l[D]) == null ? void 0 : t.toString() : (E = e == null ? void 0 : e.value) == null ? void 0 : E.toString()
                     );
                   }),
-                  B && /* @__PURE__ */ r.jsx(W, { $selected: !1, children: /* @__PURE__ */ r.jsx(Se, {}) })
+                  B && /* @__PURE__ */ r.jsx(W, { $selected: !1, children: /* @__PURE__ */ r.jsx(me, {}) })
                 ]
               }
             )
@@ -139,22 +141,22 @@ const Ee = (i) => {
         ]
       }
     ),
-    o && a.length > 0 && /* @__PURE__ */ r.jsx(ve, { children: a.map((e) => {
+    c && a.length > 0 && /* @__PURE__ */ r.jsx(xe, { children: a.map((e) => {
       var n, l, t;
       return /* @__PURE__ */ r.jsxs(
-        xe,
+        je,
         {
           children: [
             e.label,
-            /* @__PURE__ */ r.jsx(L, { onClick: () => K(e) })
+            /* @__PURE__ */ r.jsx(L, { onClick: () => V(e) })
           ]
         },
         typeof (e == null ? void 0 : e.value) == "object" ? (l = (n = e == null ? void 0 : e.value) == null ? void 0 : n[D]) == null ? void 0 : l.toString() : (t = e == null ? void 0 : e.value) == null ? void 0 : t.toString()
       );
     }) }),
-    X()
+    Y()
   ] });
 };
 export {
-  Ee as default
+  Le as default
 };

package/package.json

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