qaema-ui 0.0.66 → 0.0.70

package/dist/components/PriceCard.d.ts

@@ -8,6 +8,7 @@ export type PriceCardBadge = {
     label: string;
     bgColor: string;
     color: string;
+    ribbon?: boolean;
     weight?: FontWeight;
     variant?: BadgeVariant;
     children?: ReactNode;
@@ -21,6 +22,11 @@ export type PriceCardFeature = {
 export type SecondaryPrice = {
     amount: string;
     label: string;
+    originalAmount?: string;
+};
+export type PriceCardDiscount = {
+    label: string;
+    amount: string;
 };
 export type PriceCardPrice = {
     amount: string;
@@ -38,6 +44,8 @@ export type PriceCardProps = {
     title: string;
     price: PriceCardPrice;
     secondaryPrice?: SecondaryPrice;
+    discount?: PriceCardDiscount;
+    discountLabel?: string;
     description: string;
     hintComponent?: React.ReactNode;
     features: PriceCardFeature[];

package/dist/components/PriceCard.js

@@ -1,27 +1,28 @@
 import { j as i } from "../_virtual/jsx-runtime.js";
 import "react";
-import o, { css as x } from "styled-components";
-import d from "../assets/icons/RiyalIcon.js";
-import { CurrencyContainer as T } from "../styles/Currency.styles.js";
-import B from "../assets/svg/Riyal.svg.js";
-import H from "./Badge.js";
-import c from "./Button.js";
-import F from "./FeaturesList.js";
-import a from "./Typography.js";
-const E = {
-  transparent: x`
+import t, { css as u } 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 P from "./FeaturesList.js";
+import h from "./Typography.js";
+const N = {
+  transparent: u`
     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: x`
+  purple: u`
     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;
   `
-}, P = o.div`
+}, O = t.div`
+  position: relative;
   width: 100%;
   max-width: 28.458rem;
 
@@ -29,119 +30,159 @@ const E = {
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  ${({ $variant: e }) => E[e]};
-`, W = o.div`
+  ${({ $variant: e }) => N[e]};
+`, U = t.div`
   padding: 25px;
   display: flex;
   flex-direction: column;
   gap: ${({ theme: e }) => e.spacing.sm};
   border-bottom: 1px solid ${({ theme: e }) => e.colors.grey.n200};
-`, I = o.div`
+`, V = t.div`
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: ${({ $hasMultipleBadges: e }) => e ? "flex-start" : "space-between"};
   gap: ${({ theme: e }) => e.spacing.s};
   flex-wrap: wrap;
-`, D = o(a)`
+  padding-right: ${({ $hasRibbon: e }) => e ? "8rem" : "0"};
+`, q = t(h)`
   font-family: ${({ theme: e }) => e.fonts.arabic};
   font-weight: 600;
   font-size: ${({ theme: e }) => {
-  var r;
-  return (r = e.typography.sizes) == null ? void 0 : r.s3;
+  var o;
+  return (o = e.typography.sizes) == null ? void 0 : o.s3;
 }};
   line-height: 1.75rem;
   color: ${({ theme: e }) => e.colors.grey.n400};
   white-space: nowrap;
-`, L = o.div`
+`, G = t.div`
   display: flex;
   flex-direction: column;
   gap: 0.85rem;
-`, M = o.div`
+`, J = t.div`
   display: flex;
   align-items: center;
   gap: ${({ theme: e }) => e.spacing.xs};
   flex-wrap: nowrap;
   span {
     font-size: ${({ theme: e }) => {
-  var r;
-  return (r = e.typography.sizes) == null ? void 0 : r.s2;
+  var o;
+  return (o = e.typography.sizes) == null ? void 0 : o.s2;
 }};
     line-height: ${({ theme: e }) => e.typography.lineHeights.xs};
   }
-`, N = o.div`
+`, K = t.div`
+  position: absolute;
+  top: 0;
+  right: 0;
+  min-width: 9.5rem;
+  height: 4rem;
+  padding: 0 ${({ theme: e }) => e.spacing.m};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-bottom-left-radius: ${({ theme: e }) => e.borderRadius.xl};
+  background-color: ${({ $bgColor: e }) => e};
+  color: ${({ $color: e }) => e};
+  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};
+  white-space: nowrap;
+`, Q = t.div`
   display: flex;
   align-items: baseline;
   gap: ${({ theme: e }) => e.spacing.xxs};
-`, U = o(d).attrs(({ theme: e }) => ({
+`, w = t(x).attrs(({ theme: e }) => ({
   color: e.colors.grey.n350,
   width: "18",
   height: "20"
-}))``, V = o.span`
+}))``, X = t.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: r }) => e ?? r.colors.grey.n800};
-`, q = o.span`
+  color: ${({ $color: e, theme: o }) => e ?? o.colors.grey.n800};
+`, Y = t.span`
   font-family: ${({ theme: e }) => e.fonts.arabic};
   font-weight: ${({ theme: e }) => e.typography.weights.regular};
   font-size: ${({ theme: e }) => {
-  var r;
-  return (r = e.typography.sizes) == null ? void 0 : r.s5;
+  var o;
+  return (o = e.typography.sizes) == null ? void 0 : o.s5;
 }};
   line-height: 1.804rem;
-  color: ${({ $color: e, theme: r }) => e ?? r.colors.grey.n800};
-`, G = o(a)`
+  color: ${({ $color: e, theme: o }) => e ?? o.colors.grey.n800};
+`, Z = t(h)`
   font-family: ${({ theme: e }) => e.fonts.arabic};
   font-weight: ${({ theme: e }) => e.typography.weights.regular};
   font-size: ${({ theme: e }) => {
-  var r;
-  return (r = e.typography.sizes) == null ? void 0 : r.s2;
+  var o;
+  return (o = e.typography.sizes) == null ? void 0 : o.s2;
 }};
   line-height: ${({ theme: e }) => e.typography.lineHeights.m};
   color: ${({ theme: e }) => e.colors.grey.n400};
-`, J = o.div`
+`, _ = t.div`
   padding: 2rem 2rem 2.5rem 2rem;
   display: flex;
   flex-direction: column;
   gap: ${({ theme: e }) => e.spacing.s};
-`, K = o(a)`
+`, A = t(h)`
   font-family: ${({ theme: e }) => e.fonts.arabic};
   font-weight: ${({ theme: e }) => e.typography.weights.semiBold};
   font-size: ${({ theme: e }) => {
-  var r;
-  return (r = e.typography.sizes) == null ? void 0 : r.s3;
+  var o;
+  return (o = e.typography.sizes) == null ? void 0 : o.s3;
 }};
   line-height: 0.7rem;
   color: ${({ theme: e }) => e.colors.grey.n650};
   text-transform: uppercase;
-`, Q = o(a)`
+`, ee = t(h)`
   font-family: ${({ theme: e }) => e.fonts.arabic};
   font-weight: 500;
   font-size: ${({ theme: e }) => {
-  var r;
-  return (r = e.typography.sizes) == null ? void 0 : r.s2;
+  var o;
+  return (o = e.typography.sizes) == null ? void 0 : o.s2;
 }};
   line-height: ${({ theme: e }) => e.typography.lineHeights.m};
   color: ${({ theme: e }) => e.colors.grey.n400};
-`, X = o.div`
+`, ie = t.div`
   display: flex;
   align-items: center;
   gap: ${({ theme: e }) => e.spacing.xs};
-`, Y = o.span`
+`, d = t.span`
   font-family: ${({ theme: e }) => e.fonts.arabic};
   font-weight: ${({ theme: e }) => e.typography.weights.bold};
-  font-size: ${({ theme: e }) => e.typography.sizes.s9};
+  font-size: ${({ $isDiscounted: e, theme: o }) => e ? "1.50rem" : o.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};
-`, Z = o.span`
+`, oe = t(d)`
+  text-decoration: line-through;
+  font-size: 1.5rem;
+`, te = t.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};
-`, _ = o.div`
+`, j = t.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;
+`, re = t.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 16px;
+`, ne = t(d)`
+  color: #17954f;
+  font-size: 16px;
+`, se = t(x).attrs({
+  color: "#17954f",
+  width: "16",
+  height: "18"
+})``, le = t.div`
   width: 100%;
   margin-top: 1rem;
   display: flex;
@@ -151,139 +192,157 @@ const E = {
   button {
     width: 100%;
   }
-`, ae = ({
+`, $e = ({
   title: e,
-  price: r,
-  description: m,
-  hintComponent: y,
-  secondaryPrice: p,
-  features: $,
-  variant: u = "transparent",
-  badges: h = [],
-  showPrimaryAction: b = !1,
-  primaryAction: s,
-  showSecondaryAction: w = !1,
-  secondaryAction: l,
-  showFeatures: j = !0,
-  featuresTitle: v = "FEATURES",
-  featuresDescription: z = "Everything in our free plan plus.....",
-  showAddons: C = !1,
-  selectedAddon: R = "Without",
-  setSelectedAddon: g,
-  addOnsData: f = [],
+  price: o,
+  description: z,
+  hintComponent: v,
+  secondaryPrice: l,
+  discount: g,
+  discountLabel: m,
+  features: C,
+  variant: R = "transparent",
+  badges: f = [],
+  showPrimaryAction: B = !1,
+  primaryAction: n,
+  showSecondaryAction: k = !1,
+  secondaryAction: s,
+  showFeatures: S = !0,
+  featuresTitle: H = "FEATURES",
+  featuresDescription: T = "Everything in our free plan plus.....",
+  showAddons: D = !1,
+  selectedAddon: F = "Without",
+  setSelectedAddon: c,
+  addOnsData: y = [],
   // addonsTitle = 'Personal Accountant',
   // addonsOptionalLabel = 'optional',
-  addonsMonthlyLabel: k = "monthly",
-  mobileHintComponent: S
-}) => /* @__PURE__ */ i.jsxs(P, { $variant: u, children: [
-  /* @__PURE__ */ i.jsxs(W, { children: [
-    /* @__PURE__ */ i.jsxs(I, { children: [
-      /* @__PURE__ */ i.jsx(D, { children: e }),
-      h.length > 0 && /* @__PURE__ */ i.jsx(M, { children: h.map((t, n) => /* @__PURE__ */ i.jsx(
-        H,
+  addonsMonthlyLabel: E = "monthly",
+  mobileHintComponent: I
+}) => {
+  const p = f.find((r) => r.ribbon), $ = f.filter((r) => !r.ribbon);
+  return /* @__PURE__ */ i.jsxs(O, { $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 }),
+        $.length > 0 && /* @__PURE__ */ i.jsx(J, { children: $.map((r, a) => /* @__PURE__ */ i.jsx(
+          M,
+          {
+            label: r.label,
+            bgColor: r.bgColor,
+            color: r.color,
+            image: r.image ?? "",
+            weight: r.weight,
+            variant: r.variant
+          },
+          `${r.label}-${a}`
+        )) })
+      ] }),
+      /* @__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" })
+      ] }),
+      l && /* @__PURE__ */ i.jsxs(ie, { children: [
+        l.originalAmount && /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+          /* @__PURE__ */ i.jsx(w, {}),
+          /* @__PURE__ */ i.jsxs(oe, { 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 })
+      ] }),
+      g ? /* @__PURE__ */ i.jsxs(re, { children: [
+        /* @__PURE__ */ i.jsx(j, { children: g.label }),
+        /* @__PURE__ */ i.jsx(se, {}),
+        /* @__PURE__ */ i.jsx(ne, { children: g.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(
+        "div",
         {
-          label: t.label,
-          bgColor: t.bgColor,
-          color: t.color,
-          image: t.image ?? "",
-          weight: t.weight,
-          variant: t.variant
-        },
-        `${t.label}-${n}`
-      )) })
-    ] }),
-    /* @__PURE__ */ i.jsxs(N, { children: [
-      /* @__PURE__ */ i.jsx(T, { src: B, alt: "Riyal" }),
-      /* @__PURE__ */ i.jsx(V, { $color: r.color, children: r.amount }),
-      /* @__PURE__ */ i.jsx(q, { $color: r.periodColor, children: r.period ?? "/ Month" })
-    ] }),
-    p && /* @__PURE__ */ i.jsxs(X, { children: [
-      /* @__PURE__ */ i.jsx(U, {}),
-      /* @__PURE__ */ i.jsx(Y, { children: p.amount }),
-      /* @__PURE__ */ i.jsx(Z, { children: p.label })
-    ] }),
-    /* @__PURE__ */ i.jsx(G, { children: m }),
-    C && f.length > 0 && /* @__PURE__ */ i.jsx("div", { style: { marginTop: "0.50rem" }, children: /* @__PURE__ */ i.jsx(
-      "div",
-      {
-        style: {
-          backgroundColor: "#f5f7fb",
-          borderRadius: "9px",
-          padding: "4px",
-          display: "grid",
-          gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
-          gap: "4px"
-        },
-        children: f.map((t) => {
-          const n = R === t.id;
-          return /* @__PURE__ */ i.jsxs(
-            "button",
-            {
-              type: "button",
-              onClick: () => g == null ? void 0 : g(t.id),
-              style: {
-                padding: "8px 6px 7px",
-                border: n ? "1px solid #e4e7ec" : "1px solid transparent",
-                backgroundColor: n ? "#ffffff" : "transparent",
-                color: n ? "#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: n ? "0 1px 2px rgba(16, 24, 40, 0.08)" : "none"
+          style: {
+            backgroundColor: "#f5f7fb",
+            borderRadius: "9px",
+            padding: "4px",
+            display: "grid",
+            gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+            gap: "4px"
+          },
+          children: y.map((r) => {
+            const a = F === r.id;
+            return /* @__PURE__ */ i.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => c == null ? void 0 : c(r.id),
+                style: {
+                  padding: "8px 6px 7px",
+                  border: a ? "1px solid #e4e7ec" : "1px solid transparent",
+                  backgroundColor: a ? "#ffffff" : "transparent",
+                  color: a ? "#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: a ? "0 1px 2px rgba(16, 24, 40, 0.08)" : "none"
+                },
+                children: [
+                  /* @__PURE__ */ i.jsx("span", { children: r.titleEn }),
+                  /* @__PURE__ */ i.jsxs(
+                    "span",
+                    {
+                      style: {
+                        fontSize: "11px",
+                        marginTop: "2px",
+                        color: "#16181c",
+                        fontWeight: 600,
+                        display: "inline-flex",
+                        alignItems: "center",
+                        gap: "2px"
+                      },
+                      children: [
+                        /* @__PURE__ */ i.jsx(x, { width: "9", height: "9", color: "#16181c" }),
+                        r.baseFare,
+                        " ",
+                        E
+                      ]
+                    }
+                  )
+                ]
               },
-              children: [
-                /* @__PURE__ */ i.jsx("span", { children: t.titleEn }),
-                /* @__PURE__ */ i.jsxs(
-                  "span",
-                  {
-                    style: {
-                      fontSize: "11px",
-                      marginTop: "2px",
-                      color: "#16181c",
-                      fontWeight: 600,
-                      display: "inline-flex",
-                      alignItems: "center",
-                      gap: "2px"
-                    },
-                    children: [
-                      /* @__PURE__ */ i.jsx(d, { width: "9", height: "9", color: "#16181c" }),
-                      t.baseFare,
-                      " ",
-                      k
-                    ]
-                  }
-                )
-              ]
-            },
-            t.id
-          );
-        })
-      }
-    ) }),
-    S,
-    /* @__PURE__ */ i.jsxs(_, { children: [
-      b && /* @__PURE__ */ i.jsx(c, { variant: (s == null ? void 0 : s.variant) ?? "primary", onClick: s == null ? void 0 : s.onPrimaryActionClick, children: s == null ? void 0 : s.label }),
-      w && /* @__PURE__ */ i.jsx(c, { variant: (l == null ? void 0 : l.variant) ?? "light-primary", onClick: l == null ? void 0 : l.onSecondaryActionClick, children: l == null ? void 0 : l.label })
-    ] })
-  ] }),
-  j && /* @__PURE__ */ i.jsxs(J, { children: [
-    /* @__PURE__ */ i.jsxs(L, { children: [
-      /* @__PURE__ */ i.jsx(K, { children: v }),
-      /* @__PURE__ */ i.jsx(Q, { children: z })
+              r.id
+            );
+          })
+        }
+      ) }),
+      I,
+      /* @__PURE__ */ i.jsxs(le, { children: [
+        B && /* @__PURE__ */ i.jsx(b, { variant: (n == null ? void 0 : n.variant) ?? "primary", onClick: n == null ? void 0 : n.onPrimaryActionClick, children: n == null ? void 0 : n.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 })
+      ] })
     ] }),
-    y,
-    /* @__PURE__ */ i.jsx(F, { features: $ })
-  ] })
-] });
+    S && /* @__PURE__ */ i.jsxs(_, { children: [
+      /* @__PURE__ */ i.jsxs(G, { children: [
+        /* @__PURE__ */ i.jsx(A, { children: H }),
+        /* @__PURE__ */ i.jsx(ee, { children: T })
+      ] }),
+      v,
+      /* @__PURE__ */ i.jsx(P, { features: C })
+    ] })
+  ] });
+};
 export {
-  ae as default
+  $e as default
 };

package/package.json

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