qaema-ui 0.0.1

package/dist/components/PaymentLinkDetails.js

@@ -0,0 +1,235 @@
+import { j as e } from "../_virtual/jsx-runtime.js";
+import "react";
+import s, { css as T } from "styled-components";
+import { Alert as B } from "./Alert.js";
+import E from "./Button.js";
+import d from "./Divider.js";
+import L from "../assets/svg/QaemaLogo.svg.js";
+import P from "../assets/svg/Riyal.svg.js";
+const R = (i) => {
+  switch (i) {
+    case "expired":
+      return "error";
+    case "paid":
+      return "success";
+    case "unpaid":
+    default:
+      return "warning";
+  }
+}, N = s.div`
+  margin-bottom: ${({ theme: i }) => i.spacing.m};
+`, S = s.header`
+  width: 100%;
+  background: linear-gradient(90deg, #162d6b 0%, #5b2cd3 100%);
+  padding: ${({ theme: i }) => `${i.spacing.s} 0`};
+  margin-bottom: ${({ theme: i }) => i.spacing.m};
+`, H = s.div`
+  max-width: 51.25rem;
+  margin: 0 auto;
+  padding: 0 ${({ theme: i }) => i.spacing.s};
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+`, I = s.img`
+  height: 28px;
+  width: auto;
+  display: block;
+`, M = s.div`
+  font-size: ${({ theme: i }) => i.typography.sizes.s3};
+  color: ${({ theme: i }) => i.colors.grey.n400};
+  margin-bottom: ${({ theme: i }) => i.spacing.xxs};
+`, Q = s.div`
+  display: flex;
+  align-items: baseline;
+  gap: ${({ theme: i }) => i.spacing.xs};
+`, q = s.div`
+  font-size: ${({ theme: i }) => i.typography.sizes.s10};
+  font-weight: ${({ theme: i }) => i.typography.weights.bold};
+  color: ${({ theme: i }) => i.colors.grey.n800};
+`, p = s.div`
+  margin-bottom: ${({ theme: i }) => i.spacing.m};
+`, g = s.div`
+  margin-bottom: ${({ theme: i }) => i.spacing.s};
+  font-weight: ${({ theme: i }) => i.typography.weights.bold};
+  font-size: ${({ theme: i }) => i.typography.sizes.s4};
+  color: ${({ theme: i }) => i.colors.grey.n800};
+`, a = s.div`
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: ${({ theme: i }) => i.spacing.sm};
+`, c = s.div`
+  display: flex;
+  justify-content: space-between;
+  font-size: ${({ theme: i }) => i.typography.sizes.s3};
+  width: 100%;
+`, t = s.span`
+  color: ${({ theme: i }) => i.colors.grey.n600};
+  font-weight: ${({ theme: i }) => i.typography.weights.semiBold};
+`, o = s.span`
+  color: ${({ theme: i }) => i.colors.grey.n400};
+`, O = s.div`
+  margin-top: ${({ theme: i }) => i.spacing.m};
+  display: flex;
+  justify-content: space-between;
+  font-size: ${({ theme: i }) => i.typography.sizes.s3};
+  color: ${({ theme: i }) => i.colors.grey.n700};
+`, U = s.div`
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: start;
+  gap: ${({ theme: i }) => i.spacing.s};
+  margin: 0 auto ${({ theme: i }) => i.spacing.sm};
+  max-width: 820px;
+`, V = s.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme: i }) => i.spacing.xxs};
+`, W = "51.25rem", X = s.div`
+  max-width: ${W};
+  width: 100%;
+  margin: 0 auto ${({ theme: i }) => i.spacing.sm};
+`, _ = s.h1`
+  margin: 0;
+  font-weight: ${({ theme: i }) => i.typography.weights.bold};
+  font-size: ${({ theme: i }) => i.typography.sizes.s9};
+  color: ${({ theme: i }) => i.colors.grey.n625};
+  font-family: ${({ theme: i }) => i.dir === "rtl" ? i.fonts.arabic : i.fonts.english};
+  line-height: 2.25rem;
+  letter-spacing: -0.01em;
+`, G = s.img`
+  width: ${({ $width: i = "1rem" }) => i};
+  height: 1rem;
+  object-fit: contain;
+  flex-shrink: 0;
+`, J = s.span`
+  font-size: ${({ theme: i }) => i.typography.sizes.s3};
+  color: ${({ theme: i }) => i.colors.grey.n650};
+  width: 58;
+  height: 20;
+  gap: ${({ theme: i }) => i.spacing.xxs};
+  opacity: 1;
+`, K = s.span`
+  width: 103px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${({ theme: i }) => i.spacing.sm};
+  border-radius: ${({ theme: i }) => i.borderRadius.md};
+  padding: 0 16px;
+  opacity: 1;
+  transform: rotate(0deg);
+
+  ${({ $status: i }) => {
+  const r = {
+    unpaid: { bg: "#FFF2E9", fg: "#D4A342", bd: "#FFF2E9" },
+    expired: { bg: "#F8DFED", fg: "#C10C6D", bd: "#F8DFED" },
+    paid: { bg: "#EAFCFB", fg: "#21B7A9", bd: "#EAFCFB" }
+  };
+  return T`
+      background: ${r[i].bg};
+      color: ${r[i].fg};
+      border: 1px solid ${r[i].bd};
+    `;
+}}
+`, Y = s.section`
+  max-width: 630px;
+  width: 100%;
+  margin: 0 auto;
+  border-radius: ${({ theme: i }) => i.borderRadius.lg};
+  padding: ${({ theme: i }) => i.spacing.m};
+  background: ${({ theme: i }) => i.colors.grey.n50};
+  border: 1px solid ${({ theme: i }) => i.colors.grey.n150};
+  gap: ${({ theme: i }) => i.spacing.m};
+  opacity: 1;
+`, Z = s.footer`
+  display: flex;
+  justify-content: flex-end;
+  margin-top: ${({ theme: i }) => i.spacing.sm};
+`, ci = ({
+  title: i = "Payment Link Details",
+  docNumber: r = "—",
+  status: n,
+  statusText: h,
+  amount: x = "0.00",
+  customerTitle: m = "Customer Details",
+  customerLabel: y = "Customer",
+  phoneLabel: j = "Phone Number",
+  customerName: f = "-",
+  phoneNumber: $ = "-",
+  transactionTitle: u = "Transaction Details",
+  referenceLabel: b = "Reference Number",
+  expiryLabel: w = "Expiry Date",
+  referenceNumber: v = "-",
+  expiryDate: F = "-",
+  description: l,
+  payCtaText: z = "Pay",
+  onPay: D,
+  className: k,
+  style: A
+}) => {
+  const C = h ?? (n === "paid" ? "Paid" : n === "expired" ? "Expired" : "Unpaid");
+  return /* @__PURE__ */ e.jsxs("div", { className: k, style: A, children: [
+    /* @__PURE__ */ e.jsx(S, { children: /* @__PURE__ */ e.jsx(H, { children: /* @__PURE__ */ e.jsx(I, { src: L, alt: "Qaema logo" }) }) }),
+    /* @__PURE__ */ e.jsxs(U, { children: [
+      /* @__PURE__ */ e.jsxs(V, { children: [
+        /* @__PURE__ */ e.jsx(_, { children: i }),
+        /* @__PURE__ */ e.jsx(J, { children: r })
+      ] }),
+      /* @__PURE__ */ e.jsx(K, { $status: n, children: C })
+    ] }),
+    n === "expired" && /* @__PURE__ */ e.jsx(X, { children: /* @__PURE__ */ e.jsx(
+      B,
+      {
+        alertType: R(n),
+        title: "Payment link expired.",
+        description: "This payment link is no longer valid. Please request a new link or contact support.",
+        showLeadIcon: !0
+      }
+    ) }),
+    /* @__PURE__ */ e.jsxs(Y, { children: [
+      /* @__PURE__ */ e.jsxs(N, { children: [
+        /* @__PURE__ */ e.jsx(M, { children: "Amount" }),
+        /* @__PURE__ */ e.jsxs(Q, { children: [
+          /* @__PURE__ */ e.jsx(G, { src: P, alt: "Riyal", $width: "1.2rem" }),
+          /* @__PURE__ */ e.jsx(q, { children: x })
+        ] })
+      ] }),
+      /* @__PURE__ */ e.jsx(d, {}),
+      /* @__PURE__ */ e.jsxs(p, { children: [
+        /* @__PURE__ */ e.jsx(g, { children: m }),
+        /* @__PURE__ */ e.jsx(a, { children: /* @__PURE__ */ e.jsxs(c, { children: [
+          /* @__PURE__ */ e.jsx(t, { children: y }),
+          /* @__PURE__ */ e.jsx(o, { children: f })
+        ] }) }),
+        /* @__PURE__ */ e.jsx(a, { children: /* @__PURE__ */ e.jsxs(c, { children: [
+          /* @__PURE__ */ e.jsx(t, { children: j }),
+          /* @__PURE__ */ e.jsx(o, { children: $ })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ e.jsx(d, {}),
+      /* @__PURE__ */ e.jsxs(p, { children: [
+        /* @__PURE__ */ e.jsx(g, { children: u }),
+        /* @__PURE__ */ e.jsx(a, { children: /* @__PURE__ */ e.jsxs(c, { children: [
+          /* @__PURE__ */ e.jsx(t, { children: b }),
+          /* @__PURE__ */ e.jsx(o, { children: v })
+        ] }) }),
+        /* @__PURE__ */ e.jsx(a, { children: /* @__PURE__ */ e.jsxs(c, { children: [
+          /* @__PURE__ */ e.jsx(t, { children: w }),
+          /* @__PURE__ */ e.jsx(o, { children: F })
+        ] }) })
+      ] }),
+      l && /* @__PURE__ */ e.jsxs(O, { children: [
+        /* @__PURE__ */ e.jsx(t, { children: "Description" }),
+        /* @__PURE__ */ e.jsx(o, { children: l })
+      ] }),
+      n === "unpaid" && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+        /* @__PURE__ */ e.jsx(d, {}),
+        /* @__PURE__ */ e.jsx(Z, { children: /* @__PURE__ */ e.jsx(E, { variant: "primary", size: "md", onClick: D, children: z }) })
+      ] })
+    ] })
+  ] });
+};
+export {
+  ci as default
+};

package/dist/components/PaymentTooltip.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { PaymentLinkDetailsProps } from './PaymentLinkDetails';
+export type PaymentTooltipProps = {
+    title: React.ReactNode;
+    subtitle?: React.ReactNode;
+    triggerLabel?: string;
+    trigger?: React.ReactNode;
+    width?: number | string;
+    paymentProps: PaymentLinkDetailsProps;
+    className?: string;
+    style?: React.CSSProperties;
+};
+declare const PaymentTooltip: React.FC<PaymentTooltipProps>;
+export default PaymentTooltip;
+//# sourceMappingURL=PaymentTooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PaymentTooltip.d.ts","sourceRoot":"","sources":["../../src/lib/components/PaymentTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAA2B,EAAE,KAAK,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAExF,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,YAAY,EAAE,uBAAuB,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAmEF,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAsCjD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/PaymentTooltip.js

@@ -0,0 +1,91 @@
+import { j as e } from "../_virtual/jsx-runtime.js";
+import { useState as u, useRef as m, useEffect as x } from "react";
+import { AiOutlineInfoCircle as y } from "../node_modules/react-icons/ai/index.js";
+import r, { keyframes as h } from "styled-components";
+import $ from "./PaymentLinkDetails.js";
+const b = h`
+  from { opacity: 0; transform: translateY(6px); }
+  to   { opacity: 1; transform: translateY(0); }
+`, w = r.span`
+  position: relative;
+  display: inline-block;
+`, j = r.button`
+  all: unset;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: ${({ theme: o }) => o.spacing.xxs};
+  border-radius: ${({ theme: o }) => o.borderRadius.circle};
+  padding: ${({ theme: o }) => `${o.spacing.xxs} ${o.spacing.xs}`};
+
+  &:hover {
+    background: ${({ theme: o }) => `color-mix(in srgb, ${o.colors.primary.purple.n450} 8%, white)`};
+  }
+  &:focus-visible {
+    outline: 2px solid ${({ theme: o }) => o.colors.primary.purple.n450};
+    outline-offset: 2px;
+  }
+
+  & > span {
+    font-family: ${({ theme: o }) => {
+  var s;
+  return ((s = o.fonts) == null ? void 0 : s.english) || "Inter, system-ui, sans-serif";
+}};
+    font-weight: ${({ theme: o }) => o.typography.weights.semiBold};
+    font-size: ${({ theme: o }) => o.typography.sizes.s3};
+    line-height: ${({ theme: o }) => o.typography.lineHeights.s};
+    color: ${({ theme: o }) => o.colors.primary.purple.n450};
+  }
+`, k = r.div`
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  z-index: 1000;
+  width: ${({ $width: o }) => typeof o == "number" ? `${o}px` : o ?? "640px"};
+  background: ${({ theme: o }) => o.colors.grey.n50};
+  border: 1px solid ${({ theme: o }) => o.colors.grey.n150};
+  border-radius: ${({ theme: o }) => o.borderRadius.lg};
+  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.16);
+  padding: ${({ theme: o }) => o.spacing.m};
+  animation: ${b} 140ms ease-out;
+`, v = r.h3`
+  margin: 0 0 ${({ theme: o }) => o.spacing.xxs} 0;
+  font-size: ${({ theme: o }) => o.typography.sizes.s7};
+  font-weight: ${({ theme: o }) => o.typography.weights.bold};
+  color: ${({ theme: o }) => o.colors.grey.n800};
+  line-height: 1.2;
+  font-family: ${({ theme: o }) => o.dir === "rtl" ? o.fonts.arabic : o.fonts.english};
+`, z = r.p`
+  margin: 0 0 ${({ theme: o }) => o.spacing.s} 0;
+  font-size: ${({ theme: o }) => o.typography.sizes.s3};
+  color: ${({ theme: o }) => o.colors.grey.n650};
+`, I = ({
+  title: o,
+  subtitle: s,
+  triggerLabel: l = "Show me how it will look",
+  width: p,
+  paymentProps: c,
+  className: d,
+  style: f
+}) => {
+  const [a, n] = u(!1), t = m(null);
+  return x(() => {
+    const i = (g) => {
+      t.current && (t.current.contains(g.target) || n(!1));
+    };
+    return document.addEventListener("mousedown", i), () => document.removeEventListener("mousedown", i);
+  }, []), /* @__PURE__ */ e.jsxs(w, { ref: t, className: d, style: f, onMouseEnter: () => n(!0), onMouseLeave: () => n(!1), children: [
+    /* @__PURE__ */ e.jsxs(j, { "aria-haspopup": "dialog", "aria-expanded": a, onClick: () => n((i) => !i), children: [
+      /* @__PURE__ */ e.jsx(y, { size: 18, color: "#7259FF" }),
+      /* @__PURE__ */ e.jsx("span", { children: l })
+    ] }),
+    a && /* @__PURE__ */ e.jsxs(k, { role: "dialog", "aria-modal": !1, $width: p, children: [
+      /* @__PURE__ */ e.jsx($, { ...c }),
+      /* @__PURE__ */ e.jsx(v, { children: o }),
+      s ? /* @__PURE__ */ e.jsx(z, { children: s }) : null
+    ] })
+  ] });
+};
+export {
+  I as default
+};

package/dist/components/PhoneInputField.d.ts

@@ -0,0 +1,57 @@
+export type PhoneInputFieldProps = {
+    label?: string;
+    placeholder: string;
+    optional?: boolean;
+    disabled?: boolean;
+    error?: string;
+    value: string;
+    onChange: (val: string) => void;
+    name?: string;
+    maxLength?: number;
+};
+export type InputFieldProps = {
+    $variant?: 'primary' | 'secondary';
+    $size?: 'sm' | 'md' | 'lg';
+    $fullWidth?: boolean;
+    $hasError?: boolean;
+    name?: string;
+    maxLength?: number;
+};
+export type CountryDropdownProps = {
+    $variant?: 'primary' | 'secondary';
+    $size?: 'sm' | 'md' | 'lg';
+    $selectedCountry: CountryCode;
+    $error?: string;
+    $disabled?: boolean;
+    onSelect: (country: CountryCode) => void;
+    placeholder?: string;
+    onChange: (val: string) => void;
+    name?: string;
+    value?: string;
+    maxLength?: number;
+    setCurrentValue: React.Dispatch<React.SetStateAction<string>>;
+    currentValue: string;
+};
+export type CountryDropdownToggleProps = {
+    $variant?: 'primary' | 'secondary';
+    $size?: 'sm' | 'md' | 'lg';
+    $selectedCountry: CountryCode;
+    $error?: string;
+    $disabled?: boolean;
+    onSelect: (country: CountryCode) => void;
+};
+type CountryCode = {
+    code: string;
+    name: string;
+    dialCode: string;
+    flag: string;
+};
+export declare const VerticalSeparator: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $error?: string;
+}>> & string;
+export declare const HelperTextWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    error: string;
+}>> & string;
+declare const PhoneInputField: React.FC<PhoneInputFieldProps>;
+export default PhoneInputField;
+//# sourceMappingURL=PhoneInputField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneInputField.d.ts","sourceRoot":"","sources":["../../src/lib/components/PhoneInputField.tsx"],"names":[],"mappings":"AAUA,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IACnC,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IACnC,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC3B,gBAAgB,EAAE,WAAW,CAAC;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IAC9D,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IACnC,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC3B,gBAAgB,EAAE,WAAW,CAAC;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,eAAO,MAAM,iBAAiB;aAAyB,MAAM;YAG5D,CAAC;AA+LF,eAAO,MAAM,iBAAiB;WAAuB,MAAM;YAa1D,CAAC;AAEF,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAwCnD,CAAC;AAEF,eAAe,eAAe,CAAC"}