qaema-ui 0.0.37 → 0.0.38

package/dist/components/PriceCard.d.ts

@@ -24,9 +24,18 @@ export type PriceCardProps = {
     variant?: PriceCardVariant;
     badges?: PriceCardBadge[];
     showPrimaryAction?: boolean;
-    primaryActionLabel?: string;
-    onPrimaryActionClick?: () => void;
+    primaryAction?: {
+        label: string;
+        variant?: 'primary' | 'secondary' | 'light-primary' | 'light-secondary' | 'outline-primary' | 'outline-secondary';
+        onPrimaryActionClick?: () => void;
+    };
     showSecondaryAction?: boolean;
+    secondaryAction?: {
+        label: string;
+        variant?: 'primary' | 'secondary' | 'light-primary' | 'light-secondary' | 'outline-primary' | 'outline-secondary';
+        onSecondaryActionClick?: () => void;
+    };
+    showFeatures?: boolean;
     featuresTitle?: string;
     featuresDescription?: string;
 };

package/dist/components/PriceCard.js

@@ -1,46 +1,46 @@
 import { j as o } from "../_virtual/jsx-runtime.js";
-import { useState as b } from "react";
-import { FiCheck as v, FiX as z } from "../node_modules/react-icons/fi/index.js";
-import i, { css as t } from "styled-components";
-import { CurrencyContainer as F } from "../styles/Currency.styles.js";
-import k from "../assets/svg/Riyal.svg.js";
-import C from "./Badge.js";
-import d from "./Button.js";
-import s from "./Typography.js";
-const B = {
-  transparent: t`
+import "react";
+import { FiCheck as j, FiX as w } from "../node_modules/react-icons/fi/index.js";
+import i, { css as a } from "styled-components";
+import { CurrencyContainer as v } from "../styles/Currency.styles.js";
+import z from "../assets/svg/Riyal.svg.js";
+import k from "./Badge.js";
+import g from "./Button.js";
+import t from "./Typography.js";
+const C = {
+  transparent: a`
     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: t`
+  purple: a`
     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;
   `
-}, R = i.div`
+}, F = i.div`
   width: 100%;
   max-width: 28.458rem;
   border-radius: ${({ theme: e }) => e.borderRadius.xl};
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  ${({ $variant: e }) => B[e]};
-`, T = i.div`
+  ${({ $variant: e }) => C[e]};
+`, B = i.div`
   padding: 2rem;
   display: flex;
   flex-direction: column;
   gap: ${({ theme: e }) => e.spacing.sm};
   border-bottom: 1px solid ${({ theme: e }) => e.colors.grey.n200};
-`, S = i.div`
+`, R = i.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: ${({ theme: e }) => e.spacing.m};
   flex-wrap: wrap;
-`, H = i(s)`
+`, T = i(t)`
   font-family: ${({ theme: e }) => e.fonts.arabic};
   font-weight: 600;
   font-size: ${({ theme: e }) => {
@@ -58,17 +58,17 @@ const B = {
   align-items: center;
   gap: ${({ theme: e }) => e.spacing.xs};
   flex-wrap: wrap;
-`, D = i.div`
+`, H = i.div`
   display: flex;
   align-items: baseline;
   gap: ${({ theme: e }) => e.spacing.xxs};
-`, I = i.span`
+`, S = i.span`
   font-family: ${({ theme: e }) => e.fonts.english};
   font-weight: ${({ theme: e }) => e.typography.weights.semiBold};
   font-size: 2.706rem;
   line-height: 3.158rem;
   color: ${({ $color: e, theme: r }) => e ?? r.colors.grey.n800};
-`, V = i.span`
+`, D = i.span`
   font-family: ${({ theme: e }) => e.fonts.arabic};
   font-weight: ${({ theme: e }) => e.typography.weights.regular};
   font-size: ${({ theme: e }) => {
@@ -77,7 +77,7 @@ const B = {
 }};
   line-height: 1.804rem;
   color: ${({ $color: e, theme: r }) => e ?? r.colors.grey.n800};
-`, W = i(s)`
+`, I = i(t)`
   font-family: ${({ theme: e }) => e.fonts.arabic};
   font-weight: ${({ theme: e }) => e.typography.weights.regular};
   font-size: ${({ theme: e }) => {
@@ -86,12 +86,12 @@ const B = {
 }};
   line-height: ${({ theme: e }) => e.typography.lineHeights.m};
   color: ${({ theme: e }) => e.colors.grey.n400};
-`, A = i.div`
+`, V = i.div`
   padding: 2rem 2rem 2.5rem 2rem;
   display: flex;
   flex-direction: column;
   gap: ${({ theme: e }) => e.spacing.m};
-`, L = i(s)`
+`, W = i(t)`
   font-family: ${({ theme: e }) => e.fonts.arabic};
   font-weight: ${({ theme: e }) => e.typography.weights.semiBold};
   font-size: ${({ theme: e }) => {
@@ -101,7 +101,7 @@ const B = {
   line-height: 0.7rem;
   color: ${({ theme: e }) => e.colors.grey.n650};
   text-transform: uppercase;
-`, M = i(s)`
+`, L = i(t)`
   font-family: ${({ theme: e }) => e.fonts.arabic};
   font-weight: 500;
   font-size: ${({ theme: e }) => {
@@ -110,18 +110,18 @@ const B = {
 }};
   line-height: ${({ theme: e }) => e.typography.lineHeights.m};
   color: ${({ theme: e }) => e.colors.grey.n400};
-`, U = i.ul`
+`, M = i.ul`
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: ${({ theme: e }) => e.spacing.s};
-`, X = i.li`
+`, U = i.li`
   display: flex;
   align-items: center;
   gap: ${({ theme: e }) => e.spacing.xs};
-`, q = i.span`
+`, X = i.span`
   width: 1rem;
   height: 1rem;
   border-radius: 50%;
@@ -135,14 +135,14 @@ const B = {
     height: 0.7rem;
   }
 
-  ${({ theme: e, $variant: r }) => r === "included" ? t`
+  ${({ theme: e, $variant: r }) => r === "included" ? a`
           border: 1px solid ${e.colors.secondary.green.n450};
           color: ${e.colors.secondary.green.n450};
-        ` : t`
+        ` : a`
           border: 1px solid ${e.colors.secondary.pink.n450};
           color: ${e.colors.secondary.pink.n450};
         `}
-`, G = i(s)`
+`, q = i(t)`
   font-family: ${({ theme: e }) => e.fonts.arabic};
   font-weight: 400;
   font-size: ${({ theme: e }) => {
@@ -151,7 +151,7 @@ const B = {
 }};
   line-height: ${({ theme: e }) => e.typography.lineHeights.m};
   color: ${({ theme: e }) => e.colors.grey.n400};
-`, J = i.div`
+`, G = i.div`
   width: 100%;
   margin-top: 1rem;
   display: flex;
@@ -161,53 +161,51 @@ const B = {
   button {
     width: 100%;
   }
-`, oe = ({
+`, ee = ({
   title: e,
   price: r,
-  description: g,
-  features: f,
-  variant: h = "transparent",
-  badges: a = [],
-  showPrimaryAction: x = !1,
-  primaryActionLabel: m,
-  onPrimaryActionClick: y,
+  description: f,
+  features: h,
+  variant: x = "transparent",
+  badges: c = [],
+  showPrimaryAction: m = !1,
+  primaryAction: s,
   showSecondaryAction: $ = !1,
+  secondaryAction: l,
+  showFeatures: y = !0,
   featuresTitle: u = "FEATURES",
-  featuresDescription: w = "Everything in our free plan plus....."
-}) => {
-  const [c, j] = b(!1);
-  return /* @__PURE__ */ o.jsxs(R, { $variant: h, children: [
-    /* @__PURE__ */ o.jsxs(T, { children: [
-      /* @__PURE__ */ o.jsxs(S, { children: [
-        /* @__PURE__ */ o.jsx(H, { children: e }),
-        a.length > 0 && /* @__PURE__ */ o.jsx(E, { children: a.map((n, l) => /* @__PURE__ */ o.jsx(C, { label: n.label, bgColor: n.bgColor, color: n.color }, `${n.label}-${l}`)) })
-      ] }),
-      /* @__PURE__ */ o.jsxs(D, { children: [
-        /* @__PURE__ */ o.jsx(F, { src: k, alt: "Riyal" }),
-        /* @__PURE__ */ o.jsx(I, { $color: r.color, children: r.amount }),
-        /* @__PURE__ */ o.jsx(V, { $color: r.periodColor, children: r.period ?? "/ Month" })
-      ] }),
-      /* @__PURE__ */ o.jsx(W, { children: g }),
-      /* @__PURE__ */ o.jsxs(J, { children: [
-        x && /* @__PURE__ */ o.jsx(d, { variant: "primary", onClick: y, children: m }),
-        $ && /* @__PURE__ */ o.jsx(d, { variant: "light-primary", onClick: () => j((n) => !n), children: c ? "Hide" : "Show" })
-      ] })
+  featuresDescription: b = "Everything in our free plan plus....."
+}) => /* @__PURE__ */ o.jsxs(F, { $variant: x, children: [
+  /* @__PURE__ */ o.jsxs(B, { children: [
+    /* @__PURE__ */ o.jsxs(R, { children: [
+      /* @__PURE__ */ o.jsx(T, { children: e }),
+      c.length > 0 && /* @__PURE__ */ o.jsx(E, { children: c.map((n, p) => /* @__PURE__ */ o.jsx(k, { label: n.label, bgColor: n.bgColor, color: n.color }, `${n.label}-${p}`)) })
     ] }),
-    c && /* @__PURE__ */ o.jsxs(A, { children: [
-      /* @__PURE__ */ o.jsxs(P, { children: [
-        /* @__PURE__ */ o.jsx(L, { children: u }),
-        /* @__PURE__ */ o.jsx(M, { children: w })
-      ] }),
-      /* @__PURE__ */ o.jsx(U, { children: f.map((n, l) => {
-        const p = n.variant ?? "included";
-        return /* @__PURE__ */ o.jsxs(X, { children: [
-          /* @__PURE__ */ o.jsx(q, { $variant: p, children: p === "included" ? /* @__PURE__ */ o.jsx(v, {}) : /* @__PURE__ */ o.jsx(z, {}) }),
-          /* @__PURE__ */ o.jsx(G, { children: n.label })
-        ] }, `${n.label}-${l}`);
-      }) })
+    /* @__PURE__ */ o.jsxs(H, { children: [
+      /* @__PURE__ */ o.jsx(v, { src: z, alt: "Riyal" }),
+      /* @__PURE__ */ o.jsx(S, { $color: r.color, children: r.amount }),
+      /* @__PURE__ */ o.jsx(D, { $color: r.periodColor, children: r.period ?? "/ Month" })
+    ] }),
+    /* @__PURE__ */ o.jsx(I, { children: f }),
+    /* @__PURE__ */ o.jsxs(G, { children: [
+      m && /* @__PURE__ */ o.jsx(g, { variant: (s == null ? void 0 : s.variant) ?? "primary", onClick: s == null ? void 0 : s.onPrimaryActionClick, children: s == null ? void 0 : s.label }),
+      $ && /* @__PURE__ */ o.jsx(g, { variant: (l == null ? void 0 : l.variant) ?? "light-primary", onClick: l == null ? void 0 : l.onSecondaryActionClick, children: l == null ? void 0 : l.label })
     ] })
-  ] });
-};
+  ] }),
+  y && /* @__PURE__ */ o.jsxs(V, { children: [
+    /* @__PURE__ */ o.jsxs(P, { children: [
+      /* @__PURE__ */ o.jsx(W, { children: u }),
+      /* @__PURE__ */ o.jsx(L, { children: b })
+    ] }),
+    /* @__PURE__ */ o.jsx(M, { children: h.map((n, p) => {
+      const d = n.variant ?? "included";
+      return /* @__PURE__ */ o.jsxs(U, { children: [
+        /* @__PURE__ */ o.jsx(X, { $variant: d, children: d === "included" ? /* @__PURE__ */ o.jsx(j, {}) : /* @__PURE__ */ o.jsx(w, {}) }),
+        /* @__PURE__ */ o.jsx(q, { children: n.label })
+      ] }, `${n.label}-${p}`);
+    }) })
+  ] })
+] });
 export {
-  oe as default
+  ee as default
 };

package/package.json

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