qaema-ui 0.0.1

package/dist/components/Sidemenu.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+import { NavItemType } from './NavItem';
+export type CategoryItem = {
+    title: string;
+    navItems: Array<NavItemType>;
+};
+export type SidemenuProps = {
+    logoSrc: string;
+    searchPlaceHolder?: string;
+    categories: Array<CategoryItem>;
+    linkComponent: React.ElementType;
+    open: boolean;
+    setOpen: (value: boolean) => void;
+    currentPath: string;
+    extraSideMenuItems: Array<NavItemType>;
+};
+declare const Sidemenu: React.FC<SidemenuProps>;
+export default Sidemenu;
+//# sourceMappingURL=Sidemenu.d.ts.map

package/dist/components/Sidemenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidemenu.d.ts","sourceRoot":"","sources":["../../src/lib/components/Sidemenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AA2H7C,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;CAC9B,CAAC;AACF,MAAM,MAAM,aAAa,GAAG;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IAChC,aAAa,EAAE,KAAK,CAAC,WAAW,CAAC;IACjC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAClC,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;CACxC,CAAC;AAEF,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAmFrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/Sidemenu.js

@@ -0,0 +1,165 @@
+import { j as n } from "../_virtual/jsx-runtime.js";
+import { useState as m } from "react";
+import { FaTimesCircle as F, FaSearch as H } from "../node_modules/react-icons/fa/index.js";
+import s, { useTheme as P } from "styled-components";
+import { device as w } from "../constants/breakPoints.constant.js";
+import X from "../hooks/useZIndex.js";
+import D from "./Image.js";
+import j from "./Link.js";
+import b from "./NavItem.js";
+import K from "./Typography.js";
+import R from "../node_modules/react-bootstrap/esm/Button.js";
+import V from "../node_modules/react-bootstrap/esm/Form.js";
+const W = s.div`
+  direction: ${({ theme: r }) => r == null ? void 0 : r.dir};
+  position: fixed;
+  top: 0;
+  z-index: ${({ $zIndex: r }) => r};
+  width: 20rem;
+  height: 100%;
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+  padding-left: ${({ theme: r }) => r.spacing.xs};
+  overflow: hidden;
+  border-right: ${({ theme: r }) => `1px solid ${r.colors.grey.n150}`};
+  background-color: ${({ theme: r }) => r.colors.grey.n50};
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  @media ${w.tablet} {
+    transform: ${({ theme: r }) => r.dir === "ltr" ? "translateX(-100%)" : "translateX(100%)"}; /* Hide menu off-screen */
+    margin-left: 0;
+
+    /* When menu is active (typically via JavaScript adding this class) */
+    &.active {
+      transform: translateX(0); /* Slide menu in */
+      box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
+      z-index: 950;
+    }
+  }
+  ${({ theme: r }) => {
+  if ((r == null ? void 0 : r.dir) === "rtl") return `padding-left: 0 !important;padding-right: ${r.spacing.xs};`;
+}}
+`, Z = s.div`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  justify-content: space-between;
+`, J = s.div`
+  padding-right: ${({ theme: r }) => r.spacing.sm};
+  padding-left: ${({ theme: r }) => r.spacing.sm};
+`, N = s.div`
+  display: none;
+
+  @media ${w.tablet} {
+    display: unset;
+    padding-right: ${({ theme: r }) => r.spacing.s};
+    padding-left: ${({ theme: r }) => r.spacing.s};
+    svg {
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+  }
+`, O = s.div`
+  padding-right: ${({ theme: r }) => r.spacing.s};
+  padding-left: ${({ theme: r }) => r.spacing.s};
+`, q = s.div`
+  justify-content: space-between;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`, v = s.div`
+  display: flex;
+  flex-direction: row;
+  gap: ${({ theme: r }) => r.spacing.xxs};
+  padding: ${({ theme: r }) => r.spacing.xs};
+  background-color: ${({ theme: r }) => r.colors.grey.n100};
+  border: 1px solid transparent;
+  border-radius: ${({ theme: r }) => r.borderRadius.lg};
+`, A = s(R)`
+  border: none;
+  padding: 0;
+  margin-top: ${({ theme: r }) => r.spacing.xxs};
+  background-color: ${({ theme: r }) => r.colors.grey.n100};
+  font-family: ${({ theme: r }) => r.dir === "rtl" ? r.fonts.arabic : r.fonts.english} !important;
+  direction: ${({ theme: r }) => r.dir} !important;
+  svg {
+    background-color: ${({ theme: r }) => r.colors.grey.n100};
+  }
+`, G = s(V.Control)`
+  padding: ${({ theme: r }) => r.spacing.xxs};
+  border: none;
+  background-color: ${({ theme: r }) => r.colors.grey.n100};
+
+  &:focus-visible {
+    outline: none;
+  }
+`, S = s.div`
+  padding-right: ${({ theme: r }) => r.spacing.s};
+  button {
+    width: 100%;
+    border-radius: ${({ theme: r }) => r.spacing.xxs};
+  }
+  ${({ theme: r }) => {
+  if ((r == null ? void 0 : r.dir) === "rtl") return `padding-right: 0 !important;padding-left: ${r.spacing.s};`;
+}}
+`, Q = s(K)`
+  padding-right: ${({ theme: r }) => r.spacing.s};
+  padding-left: ${({ theme: r }) => r.spacing.s};
+  margin-top: 0;
+  margin-bottom: ${({ theme: r }) => r.spacing.xs};
+`, lr = (r) => {
+  const { logoSrc: C, searchPlaceHolder: k, categories: l, linkComponent: x, open: B, setOpen: T, currentPath: h, extraSideMenuItems: a } = r, p = P(), E = X("sidemenu"), [c, L] = m(""), [d, M] = m(l), f = (i) => {
+    const t = [];
+    l == null || l.forEach((e) => {
+      var u;
+      const o = (u = e == null ? void 0 : e.navItems) == null ? void 0 : u.filter((g) => {
+        var $, y;
+        return (y = ($ = g == null ? void 0 : g.title) == null ? void 0 : $.toLowerCase()) == null ? void 0 : y.includes(i == null ? void 0 : i.toLowerCase());
+      });
+      (o == null ? void 0 : o.length) > 0 && t.push({ ...e, navItems: o });
+    }), M(t);
+  }, z = (i) => {
+    i.key === "Enter" && f(c);
+  };
+  return /* @__PURE__ */ n.jsxs(W, { className: B ? "active" : "", $zIndex: E, children: [
+    /* @__PURE__ */ n.jsxs(Z, { children: [
+      /* @__PURE__ */ n.jsx(J, { children: /* @__PURE__ */ n.jsx(D, { src: C, width: "6.336rem", height: "2rem" }) }),
+      /* @__PURE__ */ n.jsx(N, { onClick: () => T(!1), children: /* @__PURE__ */ n.jsx(F, { color: p.colors.primary.purple.n450 }) })
+    ] }),
+    /* @__PURE__ */ n.jsx(O, { children: /* @__PURE__ */ n.jsxs(v, { children: [
+      /* @__PURE__ */ n.jsx(
+        A,
+        {
+          onClick: () => {
+            f(c);
+          },
+          children: /* @__PURE__ */ n.jsx(H, { color: p.colors.grey.n400 })
+        }
+      ),
+      /* @__PURE__ */ n.jsx(
+        G,
+        {
+          placeholder: k ?? "Search",
+          value: c,
+          onChange: (i) => L(i.target.value),
+          onKeyDown: z
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ n.jsxs(q, { children: [
+      /* @__PURE__ */ n.jsx("div", { children: (d == null ? void 0 : d.length) > 0 && (d == null ? void 0 : d.map((i) => {
+        var t, e;
+        return ((t = i == null ? void 0 : i.navItems) == null ? void 0 : t.length) === 0 ? null : /* @__PURE__ */ n.jsxs(S, { children: [
+          /* @__PURE__ */ n.jsx(Q, { variant: "xsText", color: p.colors.grey.n300, children: i == null ? void 0 : i.title }),
+          (e = i == null ? void 0 : i.navItems) == null ? void 0 : e.map((o) => /* @__PURE__ */ n.jsx(j, { to: (o == null ? void 0 : o.path) ?? "/", component: x, wrapper: !0, children: /* @__PURE__ */ n.jsx(b, { item: { variant: "normal", active: h === o.path, ...o } }) }, o == null ? void 0 : o.path))
+        ] }, i == null ? void 0 : i.title);
+      })) }),
+      /* @__PURE__ */ n.jsx(S, { children: a == null ? void 0 : a.map((i) => /* @__PURE__ */ n.jsx(j, { to: (i == null ? void 0 : i.path) ?? "/", component: x, wrapper: !0, children: /* @__PURE__ */ n.jsx(b, { item: { variant: "normal", active: h === i.path, ...i } }) }, i == null ? void 0 : i.path)) })
+    ] })
+  ] });
+};
+export {
+  lr as default
+};

package/dist/components/Spinner.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+type SpinnerType = 'dots' | 'circle';
+interface SpinnerProps {
+    type?: SpinnerType;
+    size?: string;
+    color?: string;
+}
+declare const Spinner: React.FC<SpinnerProps>;
+export default Spinner;
+//# sourceMappingURL=Spinner.d.ts.map

package/dist/components/Spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/lib/components/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,KAAK,WAAW,GAAG,MAAM,GAAG,QAAQ,CAAC;AAErC,UAAU,YAAY;IACpB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA4DD,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAgBnC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/Spinner.js

@@ -0,0 +1,62 @@
+import { j as e } from "../_virtual/jsx-runtime.js";
+import "react";
+import o, { useTheme as c, keyframes as n } from "styled-components";
+const l = o.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`, d = n`
+  0%, 80%, 100% {
+    transform: scale(0);
+    opacity: 0.6;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+`, m = n`
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+`, p = o.div`
+  display: flex;
+  gap: calc(${(i) => i.size} / 2);
+
+  div {
+    width: ${(i) => `calc(${i.size} / 2)`};
+    height: ${(i) => `calc(${i.size} / 2)`};
+    background-color: ${(i) => i.color};
+    border-radius: 50%;
+    animation: ${d} 1.4s infinite ease-in-out both;
+
+    &:nth-child(1) {
+      animation-delay: -0.32s;
+    }
+    &:nth-child(2) {
+      animation-delay: -0.16s;
+    }
+    &:nth-child(3) {
+      animation-delay: 0s;
+    }
+  }
+`, h = o.div`
+  width: ${(i) => i.size};
+  height: ${(i) => i.size};
+  border: calc(${(i) => i.size} / 8) solid ${(i) => i.color};
+  border-top: calc(${(i) => i.size} / 8) solid transparent;
+  border-radius: 50%;
+  animation: ${m} 0.9s linear infinite;
+`, x = ({ type: i = "dots", size: t = "1rem", color: s }) => {
+  const a = c(), r = s ?? a.colors.primary.purple.n450;
+  return /* @__PURE__ */ e.jsx(l, { children: i === "dots" ? /* @__PURE__ */ e.jsxs(p, { color: r, size: t, children: [
+    /* @__PURE__ */ e.jsx("div", {}),
+    /* @__PURE__ */ e.jsx("div", {}),
+    /* @__PURE__ */ e.jsx("div", {})
+  ] }) : /* @__PURE__ */ e.jsx(h, { color: r, size: t }) });
+};
+export {
+  x as default
+};

package/dist/components/StatCard.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+type IndicatorState = 'positive' | 'negative';
+interface IndicatorOptions {
+    arrow?: boolean;
+    sign?: boolean;
+    percentage?: boolean;
+}
+type StatCardVariant = 'currency' | 'icon';
+interface StatCardProps {
+    title: string;
+    amount: string;
+    decimal?: string;
+    percentage: number;
+    state: IndicatorState;
+    indicators?: IndicatorOptions;
+    variant?: StatCardVariant;
+    icon?: ReactNode;
+}
+interface StatCardGroupProps {
+    data: StatCardProps[];
+}
+declare const StatCardGroup: React.FC<StatCardGroupProps>;
+export default StatCardGroup;
+export type { StatCardProps, StatCardGroupProps, StatCardVariant };
+//# sourceMappingURL=StatCard.d.ts.map

package/dist/components/StatCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatCard.d.ts","sourceRoot":"","sources":["../../src/lib/components/StatCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASvC,KAAK,cAAc,GAAG,UAAU,GAAG,UAAU,CAAC;AAC9C,UAAU,gBAAgB;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,KAAK,eAAe,GAAG,UAAU,GAAG,MAAM,CAAC;AAE3C,UAAU,aAAa;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,cAAc,CAAC;IACtB,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAuKD,UAAU,kBAAkB;IAC1B,IAAI,EAAE,aAAa,EAAE,CAAC;CACvB;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAQ/C,CAAC;AAEF,eAAe,aAAa,CAAC;AAC7B,YAAY,EAAE,aAAa,EAAE,kBAAkB,EAAE,eAAe,EAAE,CAAC"}

package/dist/components/StatCard.js

@@ -0,0 +1,134 @@
+import { j as o } from "../_virtual/jsx-runtime.js";
+import { FiPlus as y, FiMinus as m } from "../node_modules/react-icons/fi/index.js";
+import { IoMdArrowDropup as f, IoMdArrowDropdown as $ } from "../node_modules/react-icons/io/index.js";
+import e from "styled-components";
+import { device as t } from "../constants/breakPoints.constant.js";
+import u from "../assets/svg/Riyal.svg.js";
+const j = e.div`
+  display: flex;
+  width: 100%;
+  height: 4rem;
+  border-radius: ${({ theme: r }) => r.borderRadius.md};
+  border: 1px solid ${({ theme: r }) => r.colors.grey.n100};
+  overflow: hidden;
+  background-color: ${({ theme: r }) => r.colors.grey.n50};
+`, w = e.div`
+  border: 1px solid ${({ theme: r }) => r.colors.grey.n150};
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0.625rem ${({ theme: r }) => r.spacing.s};
+  gap: ${({ theme: r }) => r.spacing.xxs};
+  background-color: ${({ theme: r }) => r.colors.grey.n50};
+  @media ${t.tablet} {
+    padding: ${({ theme: r }) => r.spacing.xxs} ${({ theme: r }) => r.spacing.xs};
+  }
+`, v = e.div`
+  display: flex;
+  align-items: center;
+  font-size: ${({ theme: r }) => r.typography.sizes.s3};
+  color: ${({ theme: r }) => r.colors.grey.n400};
+  gap: ${({ theme: r }) => r.spacing.xxs};
+  @media ${t.tablet} {
+    font-size: ${({ theme: r }) => r.typography.sizes.s1};
+  }
+`, b = e.div`
+  width: 2.0625rem;
+  height: 0.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  font-family: 'Noto Sans Display', sans-serif;
+  font-weight: 600;
+  font-size: ${({ theme: r }) => r.typography.sizes.s1};
+  line-height: 0.8125rem;
+  color: ${({ theme: r, state: s }) => s === "negative" ? r.colors.state.error.n450 : r.colors.grey.n650};
+  svg {
+    color: ${({ theme: r, state: s }) => s === "negative" ? r.colors.state.error.n450 : r.colors.grey.n650};
+    flex-shrink: 0;
+  }
+`, p = e.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  svg {
+    width: 0.875rem;
+    height: 0.875rem;
+    color: ${({ theme: r, state: s }) => s === "positive" ? r.colors.state.success.n450 : r.colors.state.error.n450};
+  }
+`, z = e.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: r }) => r.spacing.xxs};
+`, I = e.div`
+  font-size: ${({ theme: r }) => r.typography.sizes.s6};
+  font-weight: bold;
+  color: ${({ theme: r }) => r.colors.grey.n800};
+  direction: ltr;
+  @media ${t.tablet} {
+    font-size: ${({ theme: r }) => r.typography.sizes.s3};
+  }
+`, A = e.span`
+  font-size: ${({ theme: r }) => r.typography.sizes.s3};
+  color: ${({ theme: r }) => r.colors.grey.n400};
+  @media ${t.tablet} {
+    font-size: ${({ theme: r }) => r.typography.sizes.s1};
+  }
+`, R = e.img`
+  width: ${({ $width: r = "1rem" }) => r};
+  height: 1rem;
+  object-fit: contain;
+  flex-shrink: 0;
+`, k = e.div`
+  width: 1.5rem;
+  height: 1.5rem;
+  border: none;
+  background: ${({ theme: r }) => r.colors.grey.n50};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  svg {
+    width: 1rem;
+    height: 1rem;
+    color: ${({ theme: r }) => r.colors.grey.n400};
+  }
+`, C = ({
+  title: r,
+  amount: s,
+  decimal: i = "00",
+  percentage: d,
+  state: n,
+  indicators: h,
+  variant: g = "currency",
+  icon: x
+}) => {
+  const { arrow: c = !0, sign: l = !0, percentage: a = !0 } = h || {};
+  return /* @__PURE__ */ o.jsxs(w, { children: [
+    /* @__PURE__ */ o.jsxs(v, { children: [
+      /* @__PURE__ */ o.jsx("span", { children: r }),
+      (c || l || a) && /* @__PURE__ */ o.jsx(b, { state: n, children: n === "positive" ? /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+        l && /* @__PURE__ */ o.jsx(y, {}),
+        a && `${d}%`,
+        c && /* @__PURE__ */ o.jsx(p, { state: n, children: /* @__PURE__ */ o.jsx(f, {}) })
+      ] }) : /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+        c && /* @__PURE__ */ o.jsx(p, { state: n, children: /* @__PURE__ */ o.jsx($, {}) }),
+        l && /* @__PURE__ */ o.jsx(m, {}),
+        a && `${d}%`
+      ] }) })
+    ] }),
+    /* @__PURE__ */ o.jsxs(z, { children: [
+      g === "icon" ? /* @__PURE__ */ o.jsx(k, { children: x }) : /* @__PURE__ */ o.jsx(R, { src: u, alt: "Riyal" }),
+      /* @__PURE__ */ o.jsxs(I, { children: [
+        s,
+        g !== "icon" && i && /* @__PURE__ */ o.jsxs(A, { children: [
+          ".",
+          i
+        ] })
+      ] })
+    ] })
+  ] });
+}, B = ({ data: r }) => /* @__PURE__ */ o.jsx(j, { children: r.map((s, i) => /* @__PURE__ */ o.jsx(C, { ...s }, i)) });
+export {
+  B as default
+};

package/dist/components/StatIndicator.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+type Direction = 'up' | 'down' | 'default';
+export type StatIndicatorProps = {
+    value: number | string;
+    delta?: number;
+    direction?: Direction;
+    formatValue?: (v: number | string) => string;
+    positiveColor?: string;
+    negativeColor?: string;
+    className?: string;
+    style?: React.CSSProperties;
+};
+declare const StatIndicator: React.FC<StatIndicatorProps>;
+export default StatIndicator;
+//# sourceMappingURL=StatIndicator.d.ts.map

package/dist/components/StatIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatIndicator.d.ts","sourceRoot":"","sources":["../../src/lib/components/StatIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,KAAK,SAAS,GAAG,IAAI,GAAG,MAAM,GAAG,SAAS,CAAC;AAE3C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,KAAK,MAAM,CAAC;IAC7C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAmDF,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA2C/C,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/StatIndicator.js

@@ -0,0 +1,69 @@
+import { j as r } from "../_virtual/jsx-runtime.js";
+import "react";
+import { LuArrowUp as $, LuArrowDown as b } from "../node_modules/react-icons/lu/index.js";
+import o, { useTheme as R } from "styled-components";
+import S from "../assets/svg/greenRial.svg.js";
+import z from "../assets/svg/redRial.svg.js";
+const D = o.div`
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+`, F = o.div`
+  display: inline-flex;
+  align-items: baseline;
+  gap: ${({ theme: t }) => t.spacing.xxs};
+`, I = o.img`
+  order: 0;
+  width: 12px;
+  height: 12px;
+  opacity: 1;
+  flex: 0 0 auto;
+`, A = o.span`
+  order: 1;
+  font-size: ${({ theme: t }) => t.typography.sizes.s3};
+  font-weight: ${({ theme: t }) => t.typography.weights.bold};
+`, C = o.span`
+  order: 2;
+  font-size: ${({ theme: t }) => t.typography.sizes.s3};
+  font-weight: ${({ theme: t }) => t.typography.weights.regular};
+  font-family: ${({ theme: t }) => t.dir === "rtl" ? t.fonts.arabic : t.fonts.english};
+`, L = o.span`
+  order: 3;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  color: ${({ $color: t }) => t};
+
+  & > svg {
+    width: 0.8rem;
+    height: 0.7rem;
+    stroke-width: 2.5;
+  }
+`, N = ({
+  value: t,
+  delta: l,
+  direction: f,
+  formatValue: c,
+  positiveColor: g,
+  negativeColor: h,
+  className: x,
+  style: u
+}) => {
+  const a = R(), y = g ?? a.colors.state.success.n450, w = h ?? a.colors.state.error.n450, i = f ?? (typeof l == "number" && l > 0 ? "up" : "down"), p = i === "up" ? y : w, e = c ? c(t) : typeof t == "number" ? new Intl.NumberFormat("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(t) : String(t), s = e.includes(".") ? "." : e.includes(",") ? "," : null;
+  let m = e, n = "";
+  if (s) {
+    const [j, d = ""] = e.split(s);
+    m = j, n = d ? `${s}${d}` : "";
+  }
+  return /* @__PURE__ */ r.jsx(D, { className: x, style: u, children: /* @__PURE__ */ r.jsxs(F, { style: { color: p }, children: [
+    /* @__PURE__ */ r.jsx(I, { src: i === "up" ? S : z, alt: "Riyal" }),
+    /* @__PURE__ */ r.jsx(A, { children: m }),
+    n && /* @__PURE__ */ r.jsx(C, { children: n }),
+    /* @__PURE__ */ r.jsx(L, { $color: p, children: i === "up" ? /* @__PURE__ */ r.jsx($, {}) : /* @__PURE__ */ r.jsx(b, {}) })
+  ] }) });
+};
+export {
+  N as default
+};

package/dist/components/StatusFeedback.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { StepVariant } from './StepperProcess';
+export type StatusFeedbackProps = {
+    children?: React.ReactNode;
+    status: StepVariant;
+    title?: string;
+    subtitle?: string;
+};
+declare const StatusFeedback: React.FC<StatusFeedbackProps>;
+export default StatusFeedback;
+//# sourceMappingURL=StatusFeedback.d.ts.map

package/dist/components/StatusFeedback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusFeedback.d.ts","sourceRoot":"","sources":["../../src/lib/components/StatusFeedback.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAGpD,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,EAAE,WAAW,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA8BjD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/StatusFeedback.js

@@ -0,0 +1,31 @@
+import { j as e } from "../_virtual/jsx-runtime.js";
+import "react";
+import { useTheme as i } from "styled-components";
+import { useQaemaCoreTranslation as l } from "../i18n/i18n.js";
+import { FullPageContainer as u, EmptyContent as p, FeedbackHeader as d, TextContainer as x, ImageContainer as h } from "../styles/StatusFeedback.styles.js";
+import f from "../assets/svg/failed.svg.js";
+import j from "../assets/svg/success.svg.js";
+import C from "./Image.js";
+import c from "./Typography.js";
+const v = ({
+  children: t,
+  status: r,
+  title: n,
+  subtitle: m = r === "success" ? "Your Transfer Has Been Successfully Processed" : "The request service could not be work"
+}) => {
+  const a = r === "success" ? j : f, o = i(), { t: s } = l();
+  return /* @__PURE__ */ e.jsxs(u, { children: [
+    /* @__PURE__ */ e.jsx(p, {}),
+    /* @__PURE__ */ e.jsxs(d, { $status: r, children: [
+      /* @__PURE__ */ e.jsxs(x, { children: [
+        /* @__PURE__ */ e.jsx(c, { variant: "h1", color: o.colors.grey.n50, children: n ?? s(r === "success" ? "ACTION_SUCCESS" : "ACTION_FAILED") }),
+        /* @__PURE__ */ e.jsx(c, { variant: "mdText", component: "p", color: o.colors.grey.n50, children: m })
+      ] }),
+      /* @__PURE__ */ e.jsx(h, { $status: r, children: /* @__PURE__ */ e.jsx(C, { ratio: r === "success" ? "2:1" : "16:9", src: a, alt: r === "success" ? "Success" : "Error" }) })
+    ] }),
+    t
+  ] });
+};
+export {
+  v as default
+};

package/dist/components/Stepper.d.ts

@@ -0,0 +1,15 @@
+export type StepItem = {
+    number: number;
+    title: string;
+    description?: string;
+};
+export type StepperProps = {
+    stepLabel?: string;
+    steps?: StepItem[];
+    currentStep: StepItem;
+    filledPercentage: number;
+    children?: React.ReactNode;
+};
+declare const Stepper: React.FC<StepperProps>;
+export default Stepper;
+//# sourceMappingURL=Stepper.d.ts.map

package/dist/components/Stepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../src/lib/components/Stepper.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,QAAQ,GAAG;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;IACnB,WAAW,EAAE,QAAQ,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AA6BF,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA2BnC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/Stepper.js

@@ -0,0 +1,44 @@
+import { j as r } from "../_virtual/jsx-runtime.js";
+import { useTranslation as d } from "react-i18next";
+import l, { useTheme as x } from "styled-components";
+import c from "./ProgressBar.js";
+import o from "./Typography.js";
+const g = l.div`
+  width: 100%;
+  padding-top: 0.25rem;
+  padding-left: 16px;
+  padding-right: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`, m = l.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1;
+  gap: 4px;
+  padding-right: ${({ theme: e }) => e.dir === "rtl" ? "0" : "8px"};
+  padding-left: ${({ theme: e }) => e.dir === "rtl" ? "8px" : "0"};
+`, f = l.div`
+  display: flex;
+  align-items: flex-start;
+  flex: 1;
+  gap: 4px;
+`, u = ({ stepLabel: e, currentStep: i, filledPercentage: n, children: s, ...p }) => {
+  const t = x(), { t: a } = d();
+  return /* @__PURE__ */ r.jsxs(g, { ...p, children: [
+    /* @__PURE__ */ r.jsxs(m, { children: [
+      /* @__PURE__ */ r.jsxs(f, { children: [
+        /* @__PURE__ */ r.jsx(o, { variant: "smText", weight: "regular", color: t.colors.grey.n600, children: e ?? a("STEP") }),
+        /* @__PURE__ */ r.jsx(o, { variant: "smText", weight: "regular", color: t.colors.grey.n600, children: i.number }),
+        /* @__PURE__ */ r.jsx(o, { variant: "smText", weight: "bold", color: t.colors.grey.n600, children: i.title })
+      ] }),
+      i.description && /* @__PURE__ */ r.jsx(o, { variant: "caption", color: t.colors.grey.n400, children: i.description })
+    ] }),
+    /* @__PURE__ */ r.jsx(c, { $filledPercentage: n }),
+    s && /* @__PURE__ */ r.jsx("div", { children: s })
+  ] });
+};
+export {
+  u as default
+};