qaema-ui 0.0.61 → 0.0.63

package/dist/components/Badge.js

@@ -38,7 +38,7 @@ const u = i.div`
   const t = g(d ?? "default");
   return /* @__PURE__ */ e.jsxs(u, { bgColor: r, $variantStyles: t, children: [
     n && /* @__PURE__ */ e.jsx(f, { src: n, alt: "badge-image" }),
-    s && /* @__PURE__ */ e.jsx(m, { variant: "span", color: o ?? t.color, weight: c, children: s }),
+    s && /* @__PURE__ */ e.jsx(m, { variant: "span", color: o ?? t.color, weight: c ?? "semiBold", children: s }),
     l,
     a && /* @__PURE__ */ e.jsx(h, { onClick: a, $variantStyles: t, children: /* @__PURE__ */ e.jsx(p, { color: o ?? t.color, size: "0.75rem" }) })
   ] });

package/dist/components/PackageCard.d.ts

@@ -1,10 +1,32 @@
 export type PackageCardProps = {
     planTitle: string;
     planDescription: string;
+    variant?: PackageCardVariant;
     offerBadgLabel?: string;
     isPopular?: boolean;
+    isPersonalTier?: boolean;
     popularBadgLabel?: string;
+    recommendeBadgLabel?: string;
     bulletsList: string[];
+    features?: PackageCardFeature[];
+    showFeatures?: boolean;
+    featuresTitle?: string;
+    featuresDescription?: string;
+    hintComponent?: React.ReactNode;
+    showTabs?: boolean;
+    selectedTabId?: string;
+    tabs?: {
+        id: string;
+        label: string;
+        amount?: string;
+        period?: string;
+    }[];
+    onTabChange?: (tabId: string) => void;
+    showAddons?: boolean;
+    selectedAddon?: string;
+    setSelectedAddon?: (addonId: string) => void;
+    addOnsData?: PackageCardAddon[];
+    addonsMonthlyLabel?: string;
     primaryAction?: {
         label: string;
         onClick: () => void;
@@ -17,5 +39,17 @@ export type PackageCardProps = {
     period?: string;
     backgroundColor?: string;
 };
+export type PackageCardAddon = {
+    id: string;
+    titleEn: string;
+    baseFare: number;
+    color?: string;
+};
+export type PackageCardFeatureVariant = 'included' | 'excluded';
+export type PackageCardFeature = {
+    label: string;
+    variant?: PackageCardFeatureVariant;
+};
+export type PackageCardVariant = 'transparent' | 'purple';
 declare const PackageCard: (props: PackageCardProps) => import("react/jsx-runtime").JSX.Element;
 export default PackageCard;

package/dist/components/PackageCard.js

@@ -1,13 +1,35 @@
-import { j as e } from "../_virtual/jsx-runtime.js";
-import { LuLayoutDashboard as b } from "../node_modules/react-icons/lu/index.js";
-import o, { useTheme as C } from "styled-components";
-import m from "./Badge.js";
-import w from "./BulletItem.js";
-import p from "./Button.js";
-import { Card as k } from "./Card.js";
-import v from "./PriceAmount.js";
-import x from "./Typography.js";
-const $ = o.div`
+import { j as r } from "../_virtual/jsx-runtime.js";
+import { FiCheck as G, FiX as J } from "../node_modules/react-icons/fi/index.js";
+import { LuLayoutDashboard as K } from "../node_modules/react-icons/lu/index.js";
+import n, { useTheme as N, css as w } from "styled-components";
+import Q from "../assets/icons/RiyalIcon.js";
+import k from "./Badge.js";
+import C from "./Button.js";
+import { Card as U } from "./Card.js";
+import Y from "./PriceAmount.js";
+import s from "./Typography.js";
+const Z = {
+  transparent: w`
+    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: w`
+    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;
+  `
+}, _ = n(U)`
+  ${({ $variant: e }) => Z[e]};
+
+  ${(e) => e.$isPersonalTier && `
+      position: relative;
+
+      
+    `}
+`, ee = n.div`
   display: flex;
   align-items: center;
   gap: 1rem;
@@ -16,85 +38,287 @@ const $ = o.div`
   @media (max-width: 480px) {
     gap: 0.5rem;
   }
-`, B = o.div`
-  border: 1px solid ${(r) => r.theme.colors.grey.n300};
-  padding: ${(r) => r.theme.spacing.xs};
-  border-radius: ${(r) => r.theme.borderRadius.md};
+`, re = n.div`
+  border: 1px solid ${(e) => e.theme.colors.grey.n300};
+  padding: ${(e) => e.theme.spacing.xs};
+  border-radius: ${(e) => e.theme.borderRadius.md};
   width: 2rem;
   height: 2rem;
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-bottom: ${(r) => r.theme.spacing.s};
+  margin-bottom: ${(e) => e.theme.spacing.s};
   svg {
     width: 1.3rem;
     height: 1.3rem;
-    color: ${(r) => r.theme.colors.primary.purple.n450};
+    color: ${(e) => e.theme.colors.primary.purple.n450};
   }
-`, P = o.div`
+`, ie = n.div`
+  padding: 0.75rem 0 0 0;
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme: e }) => e.spacing.s};
+`, ne = n.div`
   display: flex;
   flex-direction: column;
-  margin-bottom: ${(r) => r.theme.spacing.sm};
   gap: 0.5rem;
-`, T = o.div`
+  align-items: center;
+  text-align: center;
+`, te = n(s)`
+  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.s4;
+}};
+  line-height: ${({ theme: e }) => e.typography.lineHeights.m};
+  color: ${({ theme: e }) => e.colors.grey.n400};
+  text-align: center;
+`, oe = n.div`
+  display: flex;
+  justify-content: center;
+`, se = n.ul`
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  gap: ${({ theme: e }) => e.spacing.s};
+
+  @media (max-width: 900px) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  @media (max-width: 560px) {
+    grid-template-columns: 1fr;
+  }
+`, ae = n.li`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: e }) => e.spacing.xs};
+  min-width: 0;
+`, le = n.span`
+  width: 1rem;
+  height: 1rem;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  svg {
+    width: 0.7rem;
+    height: 0.7rem;
+  }
+
+  ${({ theme: e, $variant: o }) => o === "included" ? `
+          border: 1px solid ${e.colors.secondary.green.n450};
+          color: ${e.colors.secondary.green.n450};
+        ` : `
+          border: 1px solid ${e.colors.secondary.pink.n450};
+          color: ${e.colors.secondary.pink.n450};
+        `}
+`, ce = n(s)`
+  color: ${({ theme: e }) => e.colors.grey.n400};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`, de = n.div`
+  margin: 0 0 ${(e) => e.theme.spacing.s} 0;
+  padding: 0.25rem;
+  background-color: ${(e) => e.theme.colors.grey.n100};
+  border-radius: ${(e) => e.theme.borderRadius.md};
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.25rem;
+`, pe = n.button`
+  border: 1px solid ${(e) => e.$isActive ? e.theme.colors.grey.n200 : "transparent"};
+  background-color: ${(e) => e.$isActive ? e.theme.colors.grey.n50 : "transparent"};
+  border-radius: ${(e) => e.theme.borderRadius.sm};
+  padding: 0.45rem 0.35rem;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.1rem;
+  box-shadow: ${(e) => e.$isActive ? "0 1px 2px rgba(16, 24, 40, 0.08)" : "none"};
+`, me = n(s)`
+  color: ${(e) => e.$isActive ? e.theme.colors.grey.n800 : e.theme.colors.grey.n400};
+  font-size: 12px;
+  font-weight: ${(e) => e.$isActive ? 600 : 400};
+  line-height: 1;
+`, he = n(s)`
+  color: ${(e) => e.$isActive ? e.theme.colors.grey.n800 : e.theme.colors.grey.n500};
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1;
+`, xe = n.div`
   display: flex;
   width: 100%;
   gap: 0.5rem;
-`, h = o.div`
+`, T = n.div`
   display: flex;
   width: 50%;
 
   button {
     width: 100%;
   }
-`, A = o.div`
+`, ge = n.div`
   display: flex;
   justify-content: flex-end;
-  margin-bottom: ${(r) => r.theme.spacing.xs};
-`, L = o(x)`
-  color: ${(r) => r.theme.colors.grey.n400};
-  margin: ${(r) => r.theme.spacing.xs} 0rem ${(r) => r.theme.spacing.s} 0;
+  margin-bottom: ${(e) => e.theme.spacing.xs};
+`, ue = n(s)`
+  color: ${(e) => e.theme.colors.grey.n400};
+  margin: ${(e) => e.theme.spacing.xs} 0rem ${(e) => e.theme.spacing.s} 0;
   display: inline-block;
   text-align: start;
 
   @media (max-width: 480px) {
     width: 100%;
   }
-`, G = (r) => {
+`, Ae = (e) => {
   const {
-    planTitle: g,
-    planDescription: s,
-    offerBadgLabel: l,
-    popularBadgLabel: c,
-    isPopular: u,
-    bulletsList: n,
-    primaryAction: t,
-    secondaryAction: a,
-    period: y,
-    amount: f,
-    backgroundColor: j = ""
-  } = r, i = C();
-  return /* @__PURE__ */ e.jsxs(k, { width: "100%", backgroundColor: u ? i.colors.primary.purple.n100 : j, children: [
-    /* @__PURE__ */ e.jsx(B, { children: /* @__PURE__ */ e.jsx(b, {}) }),
-    /* @__PURE__ */ e.jsxs("div", { children: [
-      /* @__PURE__ */ e.jsxs($, { children: [
-        /* @__PURE__ */ e.jsxs(x, { variant: "h6", weight: "bold", children: [
+    planTitle: o,
+    planDescription: u,
+    variant: A,
+    offerBadgLabel: f,
+    popularBadgLabel: y,
+    recommendeBadgLabel: b,
+    isPopular: F,
+    isPersonalTier: B,
+    bulletsList: L,
+    features: d,
+    showFeatures: S = !0,
+    featuresDescription: P = "Everything in this plan plus...",
+    hintComponent: $,
+    showTabs: R = !1,
+    selectedTabId: z,
+    tabs: p = [],
+    onTabChange: m,
+    showAddons: I = !1,
+    selectedAddon: D = "Without",
+    setSelectedAddon: h,
+    addOnsData: j = [],
+    addonsMonthlyLabel: H = "monthly",
+    primaryAction: x,
+    secondaryAction: g,
+    period: W,
+    amount: E,
+    backgroundColor: V = ""
+  } = e, c = N(), a = B ?? o.trim().toLowerCase() === "personal account", M = A ?? (a || F ? "purple" : "transparent"), O = a && S, X = a && R && p.length > 0, q = a && I && j.length > 0, v = d && d.length > 0 ? d : (L ?? []).map((i) => ({
+    label: i,
+    variant: "included"
+  }));
+  return /* @__PURE__ */ r.jsxs(_, { width: "100%", backgroundColor: V, $isPersonalTier: a, $variant: M, children: [
+    /* @__PURE__ */ r.jsx(re, { children: /* @__PURE__ */ r.jsx(K, {}) }),
+    /* @__PURE__ */ r.jsxs("div", { children: [
+      /* @__PURE__ */ r.jsxs(ee, { children: [
+        /* @__PURE__ */ r.jsxs(s, { variant: "h6", weight: "bold", children: [
           " ",
-          g
+          o
         ] }),
-        c && /* @__PURE__ */ e.jsx(m, { bgColor: i.colors.secondary.green.n100, color: i.colors.secondary.green.n550, label: c ?? "" }),
-        l && /* @__PURE__ */ e.jsx(m, { bgColor: i.colors.secondary.pink.n100, color: i.colors.secondary.pink.n450, label: l ?? "" })
+        b && /* @__PURE__ */ r.jsx("span", { children: b }),
+        y && /* @__PURE__ */ r.jsx(k, { bgColor: c.colors.secondary.green.n100, color: c.colors.secondary.green.n550, label: y ?? "" }),
+        f && /* @__PURE__ */ r.jsx(k, { bgColor: c.colors.secondary.pink.n100, color: c.colors.secondary.pink.n450, label: f ?? "" })
       ] }),
-      s && /* @__PURE__ */ e.jsx(L, { variant: "caption", children: s }),
-      n && /* @__PURE__ */ e.jsx(P, { children: n == null ? void 0 : n.map((d) => /* @__PURE__ */ e.jsx(w, { title: d }, d)) })
+      u && /* @__PURE__ */ r.jsx(ue, { variant: "caption", children: u }),
+      X && /* @__PURE__ */ r.jsx(de, { children: p.map((i) => {
+        var l;
+        const t = (z ?? ((l = p[0]) == null ? void 0 : l.id)) === i.id;
+        return /* @__PURE__ */ r.jsxs(pe, { type: "button", $isActive: t, onClick: () => m == null ? void 0 : m(i.id), children: [
+          /* @__PURE__ */ r.jsx(me, { variant: "caption", $isActive: t, children: i.label }),
+          (i.amount || i.period) && /* @__PURE__ */ r.jsxs(he, { variant: "caption", $isActive: t, children: [
+            i.amount ? `${i.amount} ` : "",
+            i.period ?? ""
+          ] })
+        ] }, i.id);
+      }) }),
+      q && /* @__PURE__ */ r.jsx("div", { style: { marginTop: "0.50rem" }, children: /* @__PURE__ */ r.jsx(
+        "div",
+        {
+          style: {
+            backgroundColor: "#f5f7fb",
+            borderRadius: "9px",
+            padding: "4px",
+            display: "grid",
+            gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+            gap: "4px"
+          },
+          children: j.map((i) => {
+            const t = D === i.id;
+            return /* @__PURE__ */ r.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => h == null ? void 0 : h(i.id),
+                style: {
+                  padding: "8px 6px 7px",
+                  border: t ? "1px solid #e4e7ec" : "1px solid transparent",
+                  backgroundColor: t ? "#ffffff" : "transparent",
+                  color: t ? "#16181c" : "#72788e",
+                  borderRadius: "6px",
+                  cursor: "pointer",
+                  fontWeight: 600,
+                  fontSize: "12.78px",
+                  lineHeight: 1.1,
+                  transition: "all 0.18s ease",
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  gap: "2px",
+                  minHeight: "42px",
+                  boxShadow: t ? "0 1px 2px rgba(16, 24, 40, 0.08)" : "none"
+                },
+                children: [
+                  /* @__PURE__ */ r.jsx("span", { children: i.titleEn }),
+                  /* @__PURE__ */ r.jsxs(
+                    "span",
+                    {
+                      style: {
+                        fontSize: "11px",
+                        marginTop: "2px",
+                        color: "#16181c",
+                        fontWeight: 600,
+                        display: "inline-flex",
+                        alignItems: "center",
+                        gap: "2px"
+                      },
+                      children: [
+                        /* @__PURE__ */ r.jsx(Q, { width: "9", height: "9", color: "#16181c" }),
+                        i.baseFare,
+                        " ",
+                        H
+                      ]
+                    }
+                  )
+                ]
+              },
+              i.id
+            );
+          })
+        }
+      ) }),
+      O && v.length > 0 && /* @__PURE__ */ r.jsxs(ie, { children: [
+        /* @__PURE__ */ r.jsx(ne, { children: /* @__PURE__ */ r.jsx(te, { children: P }) }),
+        $ && /* @__PURE__ */ r.jsx(oe, { children: $ }),
+        /* @__PURE__ */ r.jsx(se, { children: v.map((i, t) => {
+          const l = i.variant ?? "included";
+          return /* @__PURE__ */ r.jsxs(ae, { children: [
+            /* @__PURE__ */ r.jsx(le, { $variant: l, children: l === "included" ? /* @__PURE__ */ r.jsx(G, {}) : /* @__PURE__ */ r.jsx(J, {}) }),
+            /* @__PURE__ */ r.jsx(ce, { variant: "caption", children: i.label })
+          ] }, `${i.label}-${t}`);
+        }) })
+      ] })
     ] }),
-    /* @__PURE__ */ e.jsx(A, { children: /* @__PURE__ */ e.jsx(v, { amount: f, period: y }) }),
-    /* @__PURE__ */ e.jsxs(T, { children: [
-      /* @__PURE__ */ e.jsx(h, { children: t && /* @__PURE__ */ e.jsx(p, { variant: "outline-primary", onClick: t.onClick, children: t.label }) }),
-      /* @__PURE__ */ e.jsx(h, { children: a && /* @__PURE__ */ e.jsx(p, { onClick: a.onClick, children: a.label }) })
+    /* @__PURE__ */ r.jsx(ge, { children: /* @__PURE__ */ r.jsx(Y, { amount: E, period: W }) }),
+    /* @__PURE__ */ r.jsxs(xe, { children: [
+      /* @__PURE__ */ r.jsx(T, { children: x && /* @__PURE__ */ r.jsx(C, { variant: "outline-primary", onClick: x.onClick, children: x.label }) }),
+      /* @__PURE__ */ r.jsx(T, { children: g && /* @__PURE__ */ r.jsx(C, { onClick: g.onClick, children: g.label }) })
     ] })
   ] });
 };
 export {
-  G as default
+  Ae as default
 };

package/dist/components/PageHeader.js

@@ -18,21 +18,21 @@ const p = r.div`
 `, d = r.div`
   display: flex;
   align-items: center;
-`, u = ({ onHeaderBack: e, headerTitle: o, withRightIcon: s }) => {
-  const a = c().dir === "rtl", i = s;
+`, u = ({ onHeaderBack: e, headerTitle: s, withRightIcon: o }) => {
+  const a = c().dir === "rtl", i = o;
   return /* @__PURE__ */ t.jsxs(p, { children: [
     /* @__PURE__ */ t.jsxs(d, { children: [
       e && /* @__PURE__ */ t.jsx(
         n,
         {
-          icon: /* @__PURE__ */ t.jsx(m, { style: a ? { transform: "rotate(180deg)" } : {} }),
+          icon: /* @__PURE__ */ t.jsx(m, { style: a ? { transform: "rotate(180deg)" } : {}, size: 20 }),
           onClick: e,
           onlyIcon: !0,
           size: "md",
           variant: "outline-primary"
         }
       ),
-      /* @__PURE__ */ t.jsx(l, { variant: "h3", children: o })
+      /* @__PURE__ */ t.jsx(l, { variant: "h3", children: s })
     ] }),
     i && /* @__PURE__ */ t.jsx(n, { icon: /* @__PURE__ */ t.jsx(i, {}), onClick: e, onlyIcon: !0, size: "md", variant: "outline-primary" })
   ] });

package/dist/components/PriceCard.d.ts

@@ -1,10 +1,18 @@
 import React from 'react';
+import type { ReactNode } from 'react';
+import type { BadgeVariant } from '@hooks/useBadgeVariant';
+import type { FontWeight } from '@theme/theme';
 export type PriceCardVariant = 'transparent' | 'purple';
 export type FeatureVariant = 'included' | 'excluded';
 export type PriceCardBadge = {
     label: string;
     bgColor: string;
     color: string;
+    weight?: FontWeight;
+    variant?: BadgeVariant;
+    children?: ReactNode;
+    onClose?: () => void;
+    image?: string;
 };
 export type PriceCardFeature = {
     label: string;
@@ -31,6 +39,7 @@ export type PriceCardProps = {
     price: PriceCardPrice;
     secondaryPrice?: SecondaryPrice;
     description: string;
+    hintComponent?: React.ReactNode;
     features: PriceCardFeature[];
     variant?: PriceCardVariant;
     badges?: PriceCardBadge[];