qaema-ui 0.0.76 → 0.0.78

package/dist/components/DropDownWithTable/Table/Table.js

@@ -1,22 +1,22 @@
 import { j as t } from "../../../_virtual/jsx-runtime.js";
-import { useState as b, useId as X, useEffect as O, useMemo as Y } from "react";
+import { useState as b, useId as X, useEffect as z, useMemo as Y } from "react";
 import { useTranslation as H } from "react-i18next";
 import { Tooltip as D } from "../../../node_modules/react-tooltip/dist/react-tooltip.min.js";
 import k from "../../Spinner.js";
 import F from "../../Pagination.js";
 import R from "../../Typography.js";
-import z, { CheckboxCell as w } from "./components/CellComponents.js";
-import W from "./components/TableHead.js";
-import { TableContainer as ee, LoadingOverlay as te, TablesWrapper as ne, DataScrollBox as se, StyledTable as re, TableBody as y, EmptyState as le, TableRow as N, TableCellContainer as C, ActionsTable as ie, TableFooter as ce } from "./Table.styles.js";
-function ge({
+import L, { CheckboxCell as w } from "./components/CellComponents.js";
+import O from "./components/TableHead.js";
+import { TableContainer as ee, LoadingOverlay as te, TablesWrapper as ne, DataScrollBox as se, StyledTable as re, TableBody as W, EmptyState as le, TableRow as N, TableCellContainer as C, ActionsTable as ie, TableFooter as ce } from "./Table.styles.js";
+function $e({
   columns: S,
   data: n,
   keyField: i,
   selectable: p = !1,
   onRowSelect: x,
-  rowActions: u,
+  rowActions: f,
   stickyHeader: T = !1,
-  loading: f = !1,
+  loading: u = !1,
   emptyStateMessage: K,
   pagination: l,
   onRowClick: j,
@@ -26,40 +26,40 @@ function ge({
   alignHeader: B = "start",
   // Dropdown related props
   isTableHeadVisible: M = !1,
-  isRowSelected: A,
+  isRowSelected: I,
   getRowTooltip: m
 }) {
-  const [h, $] = b([]), [E, g] = b(_), [V, I] = b(null), { t: Z } = H(), L = X();
-  O(() => {
+  const [h, g] = b([]), [A, $] = b(_), [V, E] = b(null), { t: Z } = H(), y = X();
+  z(() => {
     const e = () => {
-      I(null);
+      E(null);
     };
     return document.addEventListener("click", e), () => {
       document.removeEventListener("click", e);
     };
-  }, []), O(() => {
+  }, []), z(() => {
     const e = () => {
       const s = window.innerWidth;
-      s < 576 ? g("sm") : s < 992 ? g("md") : g("lg");
+      s < 576 ? $("sm") : s < 992 ? $("md") : $("lg");
     };
     return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
   }, []);
-  const v = Y(() => S.filter((e) => typeof e.hidden == "function" ? !e.hidden(E) : !e.hidden), [S, E]), q = () => {
-    h.length === n.length ? $([]) : $([...n]), x && x(h.length === n.length ? [] : [...n]);
+  const v = Y(() => S.filter((e) => typeof e.hidden == "function" ? !e.hidden(A) : !e.hidden), [S, A]), q = () => {
+    h.length === n.length ? g([]) : g([...n]), x && x(h.length === n.length ? [] : [...n]);
   }, G = (e) => {
     const s = h.filter((r) => e[i] === r[i]);
     return s && s.length > 0;
   }, J = (e) => {
     const s = h.some((d) => d[i] === e[i]);
     let r;
-    s ? r = h.filter((d) => d[i] !== e[i]) : r = [...h, e], $(r), x && x(r);
+    s ? r = h.filter((d) => d[i] !== e[i]) : r = [...h, e], g(r), x && x(r);
   };
   return /* @__PURE__ */ t.jsxs(ee, { children: [
-    f && /* @__PURE__ */ t.jsx(te, { children: /* @__PURE__ */ t.jsx(k, { size: "3rem" }) }),
+    u && /* @__PURE__ */ t.jsx(te, { children: /* @__PURE__ */ t.jsx(k, { size: "3rem" }) }),
     /* @__PURE__ */ t.jsxs(ne, { children: [
       /* @__PURE__ */ t.jsx(se, { children: /* @__PURE__ */ t.jsxs(re, { children: [
         M && /* @__PURE__ */ t.jsx(
-          W,
+          O,
           {
             data: n,
             handleSelectAll: q,
@@ -69,11 +69,11 @@ function ge({
             rowActions: void 0,
             stickyHeader: T,
             selectable: p,
-            loading: f
+            loading: u
           }
         ),
-        /* @__PURE__ */ t.jsx(y, { children: n.length === 0 ? /* @__PURE__ */ t.jsx("tr", { children: /* @__PURE__ */ t.jsx("td", { colSpan: (p ? 1 : 0) + v.length, children: /* @__PURE__ */ t.jsx(le, { children: /* @__PURE__ */ t.jsx(R, { variant: "mdText", children: K ?? Z("NO_DATA_AVAILABLE") }) }) }) }) : n == null ? void 0 : n.map((e, s) => {
-          const r = (o == null ? void 0 : o(e)) ?? !1, d = A ? A(e) : h.some((c) => c[i] === e[i]), P = e[i], Q = (a == null ? void 0 : a(e, s)) ?? "", U = (m == null ? void 0 : m(e)) ? `${L}-${String(P)}` : void 0;
+        /* @__PURE__ */ t.jsx(W, { children: n.length === 0 ? /* @__PURE__ */ t.jsx("tr", { children: /* @__PURE__ */ t.jsx("td", { colSpan: (p ? 1 : 0) + v.length, children: /* @__PURE__ */ t.jsx(le, { children: /* @__PURE__ */ t.jsx(R, { variant: "mdText", children: K ?? Z("NO_DATA_AVAILABLE") }) }) }) }) : n == null ? void 0 : n.map((e, s) => {
+          const r = (o == null ? void 0 : o(e)) ?? !1, d = I ? I(e) : h.some((c) => c[i] === e[i]), P = e[i], Q = (a == null ? void 0 : a(e, s)) ?? "", U = (m == null ? void 0 : m(e)) ? `${y}-${String(P)}` : void 0;
           return /* @__PURE__ */ t.jsxs(
             N,
             {
@@ -97,7 +97,7 @@ function ge({
                   }
                 ) }),
                 v.map((c) => /* @__PURE__ */ t.jsx(C, { $align: c.align, children: /* @__PURE__ */ t.jsx(
-                  z,
+                  L,
                   {
                     column: c,
                     row: e,
@@ -115,9 +115,9 @@ function ge({
           );
         }) })
       ] }) }),
-      u && u.length > 0 && /* @__PURE__ */ t.jsxs(ie, { children: [
+      f && f.length > 0 && /* @__PURE__ */ t.jsxs(ie, { children: [
         /* @__PURE__ */ t.jsx(
-          W,
+          O,
           {
             data: n,
             handleSelectAll: () => {
@@ -125,24 +125,24 @@ function ge({
             selectedRows: h,
             visibleColumns: [],
             alignHeader: B,
-            rowActions: u,
+            rowActions: f,
             stickyHeader: T,
             selectable: !1,
-            loading: f
+            loading: u
           }
         ),
-        /* @__PURE__ */ t.jsx(y, { children: n.length === 0 ? /* @__PURE__ */ t.jsx("tr", { children: /* @__PURE__ */ t.jsx("td", { children: /* @__PURE__ */ t.jsx("div", { style: { height: "3.5rem" } }) }) }) : n == null ? void 0 : n.map((e) => {
+        /* @__PURE__ */ t.jsx(W, { children: n.length === 0 ? /* @__PURE__ */ t.jsx("tr", { children: /* @__PURE__ */ t.jsx("td", { children: /* @__PURE__ */ t.jsx("div", { style: { height: "3.5rem" } }) }) }) : n == null ? void 0 : n.map((e) => {
           const s = (o == null ? void 0 : o(e)) ?? !1;
           return /* @__PURE__ */ t.jsx(N, { $disabled: s, children: /* @__PURE__ */ t.jsx(C, { $align: "center", $isActionCell: !0, children: /* @__PURE__ */ t.jsx(
-            z,
+            L,
             {
               row: e,
               type: "icon",
               iconOptions: {
                 keyField: i,
-                rowActions: u,
+                rowActions: f,
                 activeDropdown: V,
-                setActiveDropdown: I
+                setActiveDropdown: E
               }
             }
           ) }) }, `action-${e[i]}`);
@@ -152,8 +152,8 @@ function ge({
     m && n.map((e) => {
       const s = m(e);
       if (!s) return null;
-      const r = e[i], d = `${L}-${String(r)}`;
-      return /* @__PURE__ */ t.jsx(D, { id: d, content: s }, d);
+      const r = e[i], d = `${y}-${String(r)}`;
+      return /* @__PURE__ */ t.jsx(D, { id: d, content: s, positionStrategy: "fixed", style: { zIndex: 9999 } }, d);
     }),
     l && l.enabled && /* @__PURE__ */ t.jsx(ce, { children: /* @__PURE__ */ t.jsx(
       F,
@@ -161,7 +161,7 @@ function ge({
         currentPage: l.currentPage,
         totalPages: l.totalPages,
         onChange: l.onPageChange,
-        disabled: f,
+        disabled: u,
         hidePrevButton: l.hidePrevButton,
         hideNextButton: l.hideNextButton,
         siblingCount: l.siblingCount,
@@ -175,5 +175,5 @@ function ge({
   ] });
 }
 export {
-  ge as default
+  $e as default
 };

package/dist/components/PriceCard.js

@@ -1,27 +1,27 @@
 import { j as i } from "../_virtual/jsx-runtime.js";
 import "react";
-import t, { css as u } from "styled-components";
+import o, { css as b } from "styled-components";
 import x from "../assets/icons/RiyalIcon.js";
 import { CurrencyContainer as W } from "../styles/Currency.styles.js";
 import L from "../assets/svg/Riyal.svg.js";
 import M from "./Badge.js";
-import b from "./Button.js";
+import u from "./Button.js";
 import P from "./FeaturesList.js";
-import h from "./Typography.js";
-const N = {
-  transparent: u`
+import g from "./Typography.js";
+const q = {
+  transparent: b`
     background: rgba(255, 255, 255, 0.72);
     border: 1px solid ${({ theme: e }) => e.colors.grey.n200};
     box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
   `,
-  purple: u`
+  purple: b`
     background: linear-gradient(360deg, #ffffff 63.12%, #f1eeff 100%);
     border: 1px solid #e3deff;
     box-shadow:
       0px 4px 6px -2px #10182808,
       0px 12px 16px -4px #10182814;
   `
-}, O = t.div`
+}, N = o.div`
   position: relative;
   width: 100%;
   max-width: 28.458rem;
@@ -30,51 +30,59 @@ const N = {
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  ${({ $variant: e }) => N[e]};
-`, U = t.div`
+  ${({ $variant: e }) => q[e]};
+`, O = o.div`
   padding: 25px;
   display: flex;
   flex-direction: column;
   gap: ${({ theme: e }) => e.spacing.sm};
   border-bottom: 1px solid ${({ theme: e }) => e.colors.grey.n200};
-`, V = t.div`
+`, U = o.div`
   display: flex;
   align-items: center;
   justify-content: ${({ $hasMultipleBadges: e }) => e ? "flex-start" : "space-between"};
   gap: ${({ theme: e }) => e.spacing.s};
   flex-wrap: wrap;
-  padding-inline-end: ${({ $hasRibbon: e }) => e ? "8rem" : "0"};
-`, q = t(h)`
+  min-width: 0;
+  /* The ribbon is absolutely positioned at the top inline-end corner, so push
+     the whole header below it instead of squeezing the content beside it. */
+  padding-block-start: ${({ $hasRibbon: e }) => e ? "2rem" : "0"};
+`, V = o(g)`
   font-family: ${({ theme: e }) => e.fonts.arabic};
   font-weight: 600;
   font-size: ${({ theme: e }) => {
-  var o;
-  return (o = e.typography.sizes) == null ? void 0 : o.s3;
+  var t;
+  return (t = e.typography.sizes) == null ? void 0 : t.s3;
 }};
   line-height: 1.75rem;
   color: ${({ theme: e }) => e.colors.grey.n400};
-  white-space: nowrap;
-`, G = t.div`
+  min-width: 0;
+  overflow-wrap: anywhere;
+`, G = o.div`
   display: flex;
   flex-direction: column;
   gap: 0.85rem;
-`, J = t.div`
+`, J = o.div`
   display: flex;
   align-items: center;
   gap: ${({ theme: e }) => e.spacing.xs};
-  flex-wrap: nowrap;
+  flex-wrap: wrap;
+  min-width: 0;
   span {
     font-size: ${({ theme: e }) => {
-  var o;
-  return (o = e.typography.sizes) == null ? void 0 : o.s2;
+  var t;
+  return (t = e.typography.sizes) == null ? void 0 : t.s2;
 }};
     line-height: ${({ theme: e }) => e.typography.lineHeights.xs};
+    white-space: nowrap;
   }
-`, K = t.div`
+`, K = o.div`
   position: absolute;
   top: 0;
   inset-inline-end: 0;
-  width: 141px;
+  z-index: 1;
+  min-width: 141px;
+  max-width: 70%;
   height: 48px;
   padding: 0 ${({ theme: e }) => e.spacing.m};
   display: flex;
@@ -88,101 +96,101 @@ const N = {
   font-size: ${({ theme: e }) => e.typography.sizes.s4};
   line-height: ${({ theme: e }) => e.typography.lineHeights.m};
   white-space: nowrap;
-`, Q = t.div`
+`, Q = o.div`
   display: flex;
   align-items: baseline;
   gap: ${({ theme: e }) => e.spacing.xxs};
-`, w = t(x).attrs(({ theme: e }) => ({
+`, w = o(x).attrs(({ theme: e }) => ({
   color: e.colors.grey.n350,
   width: "18",
   height: "20"
-}))``, X = t.span`
+}))``, X = o.span`
   font-family: ${({ theme: e }) => e.fonts.english};
   font-weight: ${({ theme: e }) => e.typography.weights.semiBold};
   font-size: 2.25rem;
   line-height: 2.5rem;
-  color: ${({ $color: e, theme: o }) => e ?? o.colors.grey.n800};
-`, Y = t.span`
+  color: ${({ $color: e, theme: t }) => e ?? t.colors.grey.n800};
+`, Y = o.span`
   font-family: ${({ theme: e }) => e.fonts.arabic};
   font-weight: ${({ theme: e }) => e.typography.weights.regular};
   font-size: ${({ theme: e }) => {
-  var o;
-  return (o = e.typography.sizes) == null ? void 0 : o.s5;
+  var t;
+  return (t = e.typography.sizes) == null ? void 0 : t.s5;
 }};
   line-height: 1.804rem;
-  color: ${({ $color: e, theme: o }) => e ?? o.colors.grey.n800};
-`, Z = t(h)`
+  color: ${({ $color: e, theme: t }) => e ?? t.colors.grey.n800};
+`, Z = o(g)`
   font-family: ${({ theme: e }) => e.fonts.arabic};
   font-weight: ${({ theme: e }) => e.typography.weights.regular};
   font-size: ${({ theme: e }) => {
-  var o;
-  return (o = e.typography.sizes) == null ? void 0 : o.s2;
+  var t;
+  return (t = e.typography.sizes) == null ? void 0 : t.s2;
 }};
   line-height: ${({ theme: e }) => e.typography.lineHeights.m};
   color: ${({ theme: e }) => e.colors.grey.n400};
-`, _ = t.div`
+`, _ = o.div`
   padding: 2rem 2rem 2.5rem 2rem;
   display: flex;
   flex-direction: column;
   gap: ${({ theme: e }) => e.spacing.s};
-`, A = t(h)`
+`, A = o(g)`
   font-family: ${({ theme: e }) => e.fonts.arabic};
   font-weight: ${({ theme: e }) => e.typography.weights.semiBold};
   font-size: ${({ theme: e }) => {
-  var o;
-  return (o = e.typography.sizes) == null ? void 0 : o.s3;
+  var t;
+  return (t = e.typography.sizes) == null ? void 0 : t.s3;
 }};
   line-height: 0.7rem;
   color: ${({ theme: e }) => e.colors.grey.n650};
   text-transform: uppercase;
-`, ee = t(h)`
+`, ee = o(g)`
   font-family: ${({ theme: e }) => e.fonts.arabic};
   font-weight: 500;
   font-size: ${({ theme: e }) => {
-  var o;
-  return (o = e.typography.sizes) == null ? void 0 : o.s2;
+  var t;
+  return (t = e.typography.sizes) == null ? void 0 : t.s2;
 }};
   line-height: ${({ theme: e }) => e.typography.lineHeights.m};
   color: ${({ theme: e }) => e.colors.grey.n400};
-`, ie = t.div`
+`, ie = o.div`
   display: flex;
   align-items: center;
   gap: ${({ theme: e }) => e.spacing.xs};
-`, d = t.span`
+`, d = o.span`
   font-family: ${({ theme: e }) => e.fonts.arabic};
   font-weight: ${({ theme: e }) => e.typography.weights.bold};
-  font-size: ${({ $isDiscounted: e, theme: o }) => e ? "1.50rem" : o.typography.sizes.s9};
+  font-size: ${({ $isDiscounted: e, theme: t }) => e ? "1.50rem" : t.typography.sizes.s9};
   line-height: ${({ theme: e }) => e.typography.lineHeights.xl};
   letter-spacing: ${({ theme: e }) => e.typography.letterSpacings.balancedNarrow};
   color: ${({ theme: e }) => e.colors.grey.n350};
-`, oe = t(d)`
+`, te = o(d)`
   text-decoration: line-through !important;
   font-size: 1.5rem;
-`, te = t.span`
+`, oe = o.span`
   font-family: ${({ theme: e }) => e.fonts.arabic};
   font-weight: ${({ theme: e }) => e.typography.weights.regular};
   font-size: ${({ theme: e }) => e.typography.sizes.s4};
   line-height: ${({ theme: e }) => e.typography.lineHeights.m};
   color: ${({ theme: e }) => e.colors.grey.n350};
-`, j = t.span`
+`, j = o.span`
   font-family: ${({ theme: e }) => e.fonts.arabic};
   font-weight: ${({ theme: e }) => e.typography.weights.semiBold};
   font-size: ${({ theme: e }) => e.typography.sizes.s4};
   line-height: ${({ theme: e }) => e.typography.lineHeights.m};
   color: #17954f;
-`, ne = t.div`
+`, ne = o.div`
   display: flex;
   align-items: center;
   gap: 5px;
   font-size: 16px;
-`, re = t(d)`
+`, re = o(d)`
   color: #17954f;
   font-size: 16px;
-`, se = t(x).attrs({
+`, se = o(x).attrs({
   color: "#17954f",
   width: "16",
   height: "18"
-})``, le = t.div`
+})``, le = o.div`
   width: 100%;
   margin-top: 1rem;
   display: flex;
@@ -194,11 +202,11 @@ const N = {
   }
 `, $e = ({
   title: e,
-  price: o,
+  price: t,
   description: z,
   hintComponent: v,
   secondaryPrice: l,
-  discount: g,
+  discount: h,
   discountLabel: m,
   features: C,
   variant: R = "transparent",
@@ -220,11 +228,11 @@ const N = {
   mobileHintComponent: I
 }) => {
   const p = f.find((n) => n.ribbon), $ = f.filter((n) => !n.ribbon);
-  return /* @__PURE__ */ i.jsxs(O, { $variant: R, children: [
+  return /* @__PURE__ */ i.jsxs(N, { $variant: R, children: [
     p && /* @__PURE__ */ i.jsx(K, { $bgColor: p.bgColor, $color: p.color, children: p.label }),
-    /* @__PURE__ */ i.jsxs(U, { children: [
-      /* @__PURE__ */ i.jsxs(V, { $hasRibbon: !!p, $hasMultipleBadges: f.length > 1, children: [
-        /* @__PURE__ */ i.jsx(q, { children: e }),
+    /* @__PURE__ */ i.jsxs(O, { children: [
+      /* @__PURE__ */ i.jsxs(U, { $hasRibbon: !!p, $hasMultipleBadges: f.length > 1, children: [
+        /* @__PURE__ */ i.jsx(V, { children: e }),
         $.length > 0 && /* @__PURE__ */ i.jsx(J, { children: $.map((n, a) => /* @__PURE__ */ i.jsx(
           M,
           {
@@ -240,25 +248,25 @@ const N = {
       ] }),
       /* @__PURE__ */ i.jsxs(Q, { children: [
         /* @__PURE__ */ i.jsx(W, { src: L, alt: "Riyal" }),
-        /* @__PURE__ */ i.jsx(X, { $color: o.color, children: o.amount }),
-        /* @__PURE__ */ i.jsx(Y, { $color: o.periodColor, children: o.period ?? "/ Month" })
+        /* @__PURE__ */ i.jsx(X, { $color: t.color, children: t.amount }),
+        /* @__PURE__ */ i.jsx(Y, { $color: t.periodColor, children: t.period ?? "/ Month" })
       ] }),
       l && /* @__PURE__ */ i.jsxs(ie, { children: [
         l.originalAmount && /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
           /* @__PURE__ */ i.jsx(w, {}),
-          /* @__PURE__ */ i.jsxs(oe, { children: [
+          /* @__PURE__ */ i.jsxs(te, { children: [
             l.originalAmount,
             " "
           ] })
         ] }),
         /* @__PURE__ */ i.jsx(w, {}),
-        /* @__PURE__ */ i.jsx(d, { $isDiscounted: !!(g && l.originalAmount), children: l.amount }),
-        /* @__PURE__ */ i.jsx(te, { children: l.label })
+        /* @__PURE__ */ i.jsx(d, { $isDiscounted: !!(h && l.originalAmount), children: l.amount }),
+        /* @__PURE__ */ i.jsx(oe, { children: l.label })
       ] }),
-      g ? /* @__PURE__ */ i.jsxs(ne, { children: [
-        /* @__PURE__ */ i.jsx(j, { children: g.label }),
+      h ? /* @__PURE__ */ i.jsxs(ne, { children: [
+        /* @__PURE__ */ i.jsx(j, { children: h.label }),
         /* @__PURE__ */ i.jsx(se, { style: { width: "14px", height: "16px" } }),
-        /* @__PURE__ */ i.jsx(re, { children: g.amount })
+        /* @__PURE__ */ i.jsx(re, { children: h.amount })
       ] }) : m && /* @__PURE__ */ i.jsx(j, { children: m }),
       /* @__PURE__ */ i.jsx(Z, { children: z }),
       D && y.length > 0 && /* @__PURE__ */ i.jsx("div", { style: { marginTop: "0.50rem" }, children: /* @__PURE__ */ i.jsx(
@@ -329,8 +337,8 @@ const N = {
       ) }),
       I,
       /* @__PURE__ */ i.jsxs(le, { children: [
-        B && /* @__PURE__ */ i.jsx(b, { variant: (r == null ? void 0 : r.variant) ?? "primary", onClick: r == null ? void 0 : r.onPrimaryActionClick, children: r == null ? void 0 : r.label }),
-        k && /* @__PURE__ */ i.jsx(b, { variant: (s == null ? void 0 : s.variant) ?? "light-primary", onClick: s == null ? void 0 : s.onSecondaryActionClick, children: s == null ? void 0 : s.label })
+        B && /* @__PURE__ */ i.jsx(u, { variant: (r == null ? void 0 : r.variant) ?? "primary", onClick: r == null ? void 0 : r.onPrimaryActionClick, children: r == null ? void 0 : r.label }),
+        k && /* @__PURE__ */ i.jsx(u, { variant: (s == null ? void 0 : s.variant) ?? "light-primary", onClick: s == null ? void 0 : s.onSecondaryActionClick, children: s == null ? void 0 : s.label })
       ] })
     ] }),
     S && /* @__PURE__ */ i.jsxs(_, { children: [

package/package.json

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