qaema-ui 0.0.41 → 0.0.43

package/dist/_virtual/index3.js

@@ -1,7 +1,4 @@
-import { getDefaultExportFromCjs as r } from "./_commonjsHelpers.js";
-import { __require as t } from "../node_modules/react-helmet-async/node_modules/react-fast-compare/index.js";
-var a = t();
-const m = /* @__PURE__ */ r(a);
+var s = { exports: {} };
 export {
-  m as default
+  s as __module
 };

package/dist/_virtual/index4.js

@@ -1,7 +1,4 @@
-import { getDefaultExportFromCjs as r } from "./_commonjsHelpers.js";
-import { __require as o } from "../node_modules/shallowequal/index.js";
-var a = o();
-const t = /* @__PURE__ */ r(a);
+var p = { exports: {} };
 export {
-  t as default
+  p as __module
 };

package/dist/_virtual/index5.js

@@ -1,4 +1,7 @@
-var s = { exports: {} };
+import { getDefaultExportFromCjs as r } from "./_commonjsHelpers.js";
+import { __require as t } from "../node_modules/react-helmet-async/node_modules/react-fast-compare/index.js";
+var a = t();
+const m = /* @__PURE__ */ r(a);
 export {
-  s as __module
+  m as default
 };

package/dist/_virtual/index6.js

@@ -1,4 +1,7 @@
-var p = { exports: {} };
+import { getDefaultExportFromCjs as r } from "./_commonjsHelpers.js";
+import { __require as o } from "../node_modules/shallowequal/index.js";
+var a = o();
+const t = /* @__PURE__ */ r(a);
 export {
-  p as __module
+  t as default
 };

package/dist/components/AmountItem.d.ts

@@ -4,6 +4,7 @@ type AmountItemProps = {
     data: AmountCellData;
     type?: CellType;
     width?: string;
+    height?: string;
     numberOptions?: TypographyProps;
     decimalOptions?: TypographyProps;
 };

package/dist/components/AmountItem.js

@@ -2,15 +2,15 @@ import { j as t } from "../_virtual/jsx-runtime.js";
 import r from "styled-components";
 import l from "../assets/svg/Riyal.svg.js";
 import o from "./Typography.js";
-const b = r.div`
+const S = r.div`
   display: flex;
   justify-content: center;
   align-items: center;
   overflow: hidden;
   flex-direction: ${({ theme: e }) => e.dir == "rtl" && "row-reverse"};
-`, S = r.div`
+`, A = r.div`
   width: ${({ $width: e = "12.18rem" }) => e};
-  height: 3.5rem;
+  height: ${({ $height: e = "3.5rem" }) => e};
   display: flex;
   align-items: center;
   gap: 2px;
@@ -20,24 +20,24 @@ const b = r.div`
   whiteSpace: "nowrap",
   overflow: "hidden",
   textOverflow: "ellipsis"
-}, A = r.img`
+}, C = r.img`
   width: ${({ $width: e = ".75rem" }) => e};
   height: 0.75rem;
   object-fit: contain;
   flex-shrink: 0;
   margin-right: 2px;
-`, C = {
+`, $ = {
   SAR: l
-}, T = ({ data: e, width: c, numberOptions: a, decimalOptions: m }) => {
+}, W = ({ data: e, width: c, height: a, numberOptions: m, decimalOptions: h }) => {
   var n;
-  const i = e.value ?? "", [h, d = "00"] = i.split("."), p = Number(h.replace(/,/g, "")).toLocaleString(), g = ((n = e.currencyCode) == null ? void 0 : n.trim()) ?? "SAR", u = C[g] || l, { variant: x = "smText", weight: y = "bold", ...f } = a || {}, { variant: v = "smText", weight: w, ...j } = m || {};
-  return /* @__PURE__ */ t.jsx(S, { $width: c, children: i.length > 0 && /* @__PURE__ */ t.jsxs(b, { children: [
-    /* @__PURE__ */ t.jsx(A, { src: u, alt: e.value }),
-    /* @__PURE__ */ t.jsx(o, { variant: x, weight: y, style: s, ...f, children: p }),
+  const i = e.value ?? "", [d, g = "00"] = i.split("."), p = Number(d.replace(/,/g, "")).toLocaleString(), u = ((n = e.currencyCode) == null ? void 0 : n.trim()) ?? "SAR", x = $[u] || l, { variant: y = "smText", weight: f = "bold", ...v } = m || {}, { variant: w = "smText", weight: j, ...b } = h || {};
+  return /* @__PURE__ */ t.jsx(A, { $width: c, $height: a, children: i.length > 0 && /* @__PURE__ */ t.jsxs(S, { children: [
+    /* @__PURE__ */ t.jsx(C, { src: x, alt: e.value }),
+    /* @__PURE__ */ t.jsx(o, { variant: y, weight: f, style: s, ...v, children: p }),
     ".",
-    /* @__PURE__ */ t.jsx(o, { variant: v, weight: w, style: s, ...j, children: d })
+    /* @__PURE__ */ t.jsx(o, { variant: w, weight: j, style: s, ...b, children: g })
   ] }) });
 };
 export {
-  T as default
+  W as default
 };

package/dist/components/RadioInput.d.ts

@@ -19,6 +19,7 @@ export type RadioInputProps = {
     optional?: boolean;
     error?: string;
     badge?: BadgeConfig;
+    optionsVariant?: string;
 };
 declare const RadioInput: React.FC<RadioInputProps>;
 export default RadioInput;

package/dist/components/RadioInput.js

@@ -1,20 +1,20 @@
-import { j as l } from "../_virtual/jsx-runtime.js";
-import { TbSparkles as y } from "../node_modules/react-icons/tb/index.js";
-import o from "styled-components";
-import { useQaemaCoreTranslation as m } from "../i18n/i18n.js";
-import w from "./Hint.js";
-import { Optional as $ } from "./InputField.js";
-import j from "./Radio.js";
-const b = o.div`
+import { j as i } from "../_virtual/jsx-runtime.js";
+import { TbSparkles as $ } from "../node_modules/react-icons/tb/index.js";
+import a, { css as p } from "styled-components";
+import { useQaemaCoreTranslation as w } from "../i18n/i18n.js";
+import j from "./Hint.js";
+import { Optional as v } from "./InputField.js";
+import b from "./Radio.js";
+const F = a.div`
   display: flex;
   align-items: center;
   gap: ${({ theme: e }) => e.spacing.xs};
-`, v = o.div`
+`, z = a.div`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   gap: ${({ theme: e }) => e.spacing.xs};
-`, F = o.div`
+`, R = a.div`
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -30,7 +30,7 @@ const b = o.div`
     line-height: ${({ theme: e }) => e.typography.lineHeights.xs};
     color: ${({ theme: e }) => e.colors.grey.n350};
   }
-`, z = o.span`
+`, I = a.span`
   display: inline-flex;
   align-items: center;
   height: 20px;
@@ -38,52 +38,62 @@ const b = o.div`
   gap: 8px;
   border-radius: 4px;
   background: ${({ theme: e }) => {
-  var n, i, s;
-  return ((s = (i = (n = e.colors) == null ? void 0 : n.primary) == null ? void 0 : i.purple) == null ? void 0 : s.n100) || "#F1EEFF";
+  var n, l, t;
+  return ((t = (l = (n = e.colors) == null ? void 0 : n.primary) == null ? void 0 : l.purple) == null ? void 0 : t.n100) || "#F1EEFF";
 }};
   color: ${({ theme: e }) => {
-  var n, i, s;
-  return ((s = (i = (n = e.colors) == null ? void 0 : n.primary) == null ? void 0 : i.purple) == null ? void 0 : s.n450) || "#7259FF";
+  var n, l, t;
+  return ((t = (l = (n = e.colors) == null ? void 0 : n.primary) == null ? void 0 : l.purple) == null ? void 0 : t.n450) || "#7259FF";
 }};
   font-size: ${({ theme: e }) => e.typography.sizes.s2 || "10px"};
   line-height: ${({ theme: e }) => e.typography.lineHeights.m};
   font-weight: 400;
-`, R = o(y)`
+`, O = a($)`
   width: 12px;
   height: 12px;
   flex: 0 0 auto;
-`, E = (e) => {
-  const { name: n, label: i = "", options: s, value: p, disabled: h, optional: c = !1, onChange: g, error: a, badge: r } = e, { t: d } = m();
-  if (!(s != null && s.length)) return null;
-  const x = (t) => r != null && r.showFor ? typeof r.showFor == "function" ? !!r.showFor(t) : r.showFor === t.value : !1, f = (r == null ? void 0 : r.label) ?? "Recommended";
-  return /* @__PURE__ */ l.jsxs(v, { children: [
-    i && /* @__PURE__ */ l.jsxs(F, { children: [
-      /* @__PURE__ */ l.jsx("label", { children: i }),
-      c && /* @__PURE__ */ l.jsx($, { children: d("OPTIONAL") })
+`, S = a.div`
+  display: flex;
+  width: 100%;
+  flex-direction: ${({ $variant: e }) => e};
+  ${({ $variant: e, theme: n }) => e === "row" ? p`
+          justify-content: space-between;
+          align-items: center;
+        ` : p`
+          gap: ${n.spacing.xs};
+        `}
+`, A = (e) => {
+  const { name: n, label: l = "", options: t, value: c, disabled: h, optional: d = !1, onChange: g, error: o, badge: s, optionsVariant: x = "column" } = e, { t: f } = w();
+  if (!(t != null && t.length)) return null;
+  const u = (r) => s != null && s.showFor ? typeof s.showFor == "function" ? !!s.showFor(r) : s.showFor === r.value : !1, y = (s == null ? void 0 : s.label) ?? "Recommended";
+  return /* @__PURE__ */ i.jsxs(z, { children: [
+    l && /* @__PURE__ */ i.jsxs(R, { children: [
+      /* @__PURE__ */ i.jsx("label", { children: l }),
+      d && /* @__PURE__ */ i.jsx(v, { children: f("OPTIONAL") })
     ] }),
-    s.map((t) => {
-      const u = x(t);
-      return /* @__PURE__ */ l.jsxs(b, { children: [
-        /* @__PURE__ */ l.jsx(
-          j,
+    /* @__PURE__ */ i.jsx(S, { $variant: x, children: t.map((r) => {
+      const m = u(r);
+      return /* @__PURE__ */ i.jsxs(F, { children: [
+        /* @__PURE__ */ i.jsx(
+          b,
           {
             name: n,
-            label: t.label,
-            value: t.value,
-            $selected: p === (t == null ? void 0 : t.value),
+            label: r.label,
+            value: r.value,
+            $selected: c === (r == null ? void 0 : r.value),
             onChange: g,
             $disabled: h
           }
         ),
-        u && /* @__PURE__ */ l.jsxs(z, { children: [
-          (r == null ? void 0 : r.showIcon) !== !1 && /* @__PURE__ */ l.jsx(R, {}),
-          f
+        m && /* @__PURE__ */ i.jsxs(I, { children: [
+          (s == null ? void 0 : s.showIcon) !== !1 && /* @__PURE__ */ i.jsx(O, {}),
+          y
         ] })
-      ] }, t.value);
-    }),
-    a && /* @__PURE__ */ l.jsx(w, { variant: "error", title: a })
+      ] }, r.value);
+    }) }),
+    o && /* @__PURE__ */ i.jsx(j, { variant: "error", title: o })
   ] });
 };
 export {
-  E as default
+  A as default
 };

package/dist/components/SummaryCard.js

@@ -44,13 +44,13 @@ const S = i.div`
     const n = l;
     t = /* @__PURE__ */ e.jsx(w, { ...n });
   } else if (r === "trend") {
-    const n = typeof l == "object" && l !== null ? l : { value: l }, c = n.direction ?? "neutral", a = x.colors.state.success.n450, s = x.colors.state.error.n450, u = c === "up" ? a : c === "down" ? s : p;
+    const n = typeof l == "object" && l !== null ? l : { value: l }, a = n.direction ?? "neutral", c = x.colors.state.success.n450, s = x.colors.state.error.n450, u = a === "up" ? c : a === "down" ? s : p;
     t = /* @__PURE__ */ e.jsx(d, { variant: "smText", color: u, children: typeof n.value == "number" ? n.value.toString() : n.value });
   } else if (r === "component")
     t = l;
   else if (r === "amount") {
-    const c = { value: l };
-    t = /* @__PURE__ */ e.jsx(v, { data: c, width: "auto" });
+    const a = { value: l };
+    t = /* @__PURE__ */ e.jsx(v, { data: a, width: "auto", height: "auto" });
   } else {
     const n = l;
     t = /* @__PURE__ */ e.jsx(d, { variant: "smText", color: p, children: typeof n == "number" ? n.toString() : n });
@@ -68,10 +68,10 @@ function z({
   btnLabel: x,
   btnConfig: t,
   trailingActionsConfig: n,
-  callout: c
+  callout: a
 }) {
-  const a = y();
-  return /* @__PURE__ */ e.jsxs($, { padding: "2rem", shadowVariant: "none", hoverEffect: !1, border: `1px solid ${a.colors.grey.n100}`, children: [
+  const c = y();
+  return /* @__PURE__ */ e.jsxs($, { padding: "2rem", shadowVariant: "none", hoverEffect: !1, border: `1px solid ${c.colors.grey.n100}`, children: [
     /* @__PURE__ */ e.jsxs(S, { children: [
       /* @__PURE__ */ e.jsxs(B, { children: [
         /* @__PURE__ */ e.jsx(d, { variant: "h6", weight: "semiBold", children: l }),
@@ -80,19 +80,19 @@ function z({
           " "
         ] })
       ] }),
-      /* @__PURE__ */ e.jsx(d, { variant: "caption", color: a.colors.grey.n400, children: p })
+      /* @__PURE__ */ e.jsx(d, { variant: "caption", color: c.colors.grey.n400, children: p })
     ] }),
     /* @__PURE__ */ e.jsxs(R, { children: [
       r.map((s, h) => {
         var u;
         return ((u = s == null ? void 0 : s.items) == null ? void 0 : u.length) === 0 ? null : /* @__PURE__ */ e.jsxs(V, { children: [
-          /* @__PURE__ */ e.jsx(d, { variant: "span", weight: "regular", color: a.colors.grey.n400, children: s.title }),
-          s.items.map((m, g) => /* @__PURE__ */ e.jsx(b, { children: /* @__PURE__ */ e.jsx(f, { variant: m == null ? void 0 : m.variant, label: m.label, value: m.value, color: a.colors.grey.n400 }) }, `${h}-${g}`))
+          /* @__PURE__ */ e.jsx(d, { variant: "span", weight: "regular", color: c.colors.grey.n400, children: s.title }),
+          s.items.map((m, g) => /* @__PURE__ */ e.jsx(b, { children: /* @__PURE__ */ e.jsx(f, { variant: m == null ? void 0 : m.variant, label: m.label, value: m.value, color: c.colors.grey.n400 }) }, `${h}-${g}`))
         ] }, s.title);
       }),
-      o && /* @__PURE__ */ e.jsx(E, { children: /* @__PURE__ */ e.jsx(f, { variant: o == null ? void 0 : o.variant, label: (o == null ? void 0 : o.label) ?? "", value: (o == null ? void 0 : o.value) ?? "", color: a.colors.grey.n400 }) }),
+      o && /* @__PURE__ */ e.jsx(E, { children: /* @__PURE__ */ e.jsx(f, { variant: o == null ? void 0 : o.variant, label: (o == null ? void 0 : o.label) ?? "", value: (o == null ? void 0 : o.value) ?? "", color: c.colors.grey.n400 }) }),
       n && (n == null ? void 0 : n.length) > 0 && n.map((s) => /* @__PURE__ */ e.jsx(j, { ...s == null ? void 0 : s.btnConfig, children: (s == null ? void 0 : s.label) ?? "" })),
-      c && /* @__PURE__ */ e.jsx(T, { callout: c })
+      a && /* @__PURE__ */ e.jsx(T, { callout: a })
     ] })
   ] });
 }

package/dist/node_modules/classnames/index.js

@@ -1,4 +1,4 @@
-import { __module as s } from "../../_virtual/index5.js";
+import { __module as s } from "../../_virtual/index3.js";
 /*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see

package/dist/node_modules/prop-types/index.js

@@ -1,4 +1,4 @@
-import { __module as r } from "../../_virtual/index6.js";
+import { __module as r } from "../../_virtual/index4.js";
 import { __require as s } from "../react-is/index.js";
 import { __require as t } from "./factoryWithTypeCheckers.js";
 import { __require as p } from "./factoryWithThrowingShims.js";

package/dist/node_modules/react-helmet-async/lib/index.esm.js

@@ -2,9 +2,9 @@ var Q = Object.defineProperty;
 var X = (e, t, r) => t in e ? Q(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
 var h = (e, t, r) => X(e, typeof t != "symbol" ? t + "" : t, r);
 import y, { Component as R } from "react";
-import ee from "../../../_virtual/index3.js";
+import ee from "../../../_virtual/index5.js";
 import F from "../../../_virtual/browser.js";
-import te from "../../../_virtual/index4.js";
+import te from "../../../_virtual/index6.js";
 var Y = /* @__PURE__ */ ((e) => (e.BASE = "base", e.BODY = "body", e.HEAD = "head", e.HTML = "html", e.LINK = "link", e.META = "meta", e.NOSCRIPT = "noscript", e.SCRIPT = "script", e.STYLE = "style", e.TITLE = "title", e.FRAGMENT = "Symbol(react.fragment)", e))(Y || {}), $ = {
   link: { rel: ["amphtml", "canonical", "alternate"] },
   script: { type: ["application/ld+json"] },

package/package.json

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