qaema-ui 0.0.36 → 0.0.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/components/PriceCard.d.ts +13 -6
  2. package/dist/components/PriceCard.js +86 -76
  3. package/package.json +1 -1
package/dist/components/PriceCard.d.ts CHANGED
@@ -16,11 +16,6 @@ export type PriceCardPrice = {
16
16
  color?: string;
17
17
  periodColor?: string;
18
18
  };
19
- export type PriceCardPrimaryAction = {
20
- label: string;
21
- onClick: () => void;
22
- variant?: 'primary' | 'light-primary';
23
- };
24
19
  export type PriceCardProps = {
25
20
  title: string;
26
21
  price: PriceCardPrice;
@@ -28,7 +23,19 @@ export type PriceCardProps = {
28
23
  features: PriceCardFeature[];
29
24
  variant?: PriceCardVariant;
30
25
  badges?: PriceCardBadge[];
31
- primaryAction?: PriceCardPrimaryAction;
26
+ showPrimaryAction?: boolean;
27
+ primaryAction?: {
28
+ label: string;
29
+ variant?: 'primary' | 'secondary' | 'light-primary' | 'light-secondary' | 'outline-primary' | 'outline-secondary';
30
+ onPrimaryActionClick?: () => void;
31
+ };
32
+ showSecondaryAction?: boolean;
33
+ secondaryAction?: {
34
+ label: string;
35
+ variant?: 'primary' | 'secondary' | 'light-primary' | 'light-secondary' | 'outline-primary' | 'outline-secondary';
36
+ onSecondaryActionClick?: () => void;
37
+ };
38
+ showFeatures?: boolean;
32
39
  featuresTitle?: string;
33
40
  featuresDescription?: string;
34
41
  };
package/dist/components/PriceCard.js CHANGED
@@ -1,127 +1,127 @@
1
- import { j as r } from "../_virtual/jsx-runtime.js";
1
+ import { j as o } from "../_virtual/jsx-runtime.js";
2
2
  import "react";
3
- import { FiCheck as m, FiX as y } from "../node_modules/react-icons/fi/index.js";
4
- import i, { css as l } from "styled-components";
5
- import { CurrencyContainer as $ } from "../styles/Currency.styles.js";
6
- import u from "../assets/svg/Riyal.svg.js";
7
- import b from "./Badge.js";
8
- import w from "./Button.js";
9
- import s from "./Typography.js";
10
- const j = {
11
- transparent: l`
3
+ import { FiCheck as j, FiX as w } from "../node_modules/react-icons/fi/index.js";
4
+ import i, { css as a } from "styled-components";
5
+ import { CurrencyContainer as v } from "../styles/Currency.styles.js";
6
+ import z from "../assets/svg/Riyal.svg.js";
7
+ import k from "./Badge.js";
8
+ import g from "./Button.js";
9
+ import t from "./Typography.js";
10
+ const C = {
11
+ transparent: a`
12
12
  background: rgba(255, 255, 255, 0.72);
13
13
  border: 1px solid ${({ theme: e }) => e.colors.grey.n200};
14
14
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
15
15
  `,
16
- purple: l`
16
+ purple: a`
17
17
  background: linear-gradient(360deg, #ffffff 63.12%, #f1eeff 100%);
18
18
  border: 1px solid #e3deff;
19
19
  box-shadow:
20
20
  0px 4px 6px -2px #10182808,
21
21
  0px 12px 16px -4px #10182814;
22
22
  `
23
- }, v = i.div`
23
+ }, F = i.div`
24
24
  width: 100%;
25
25
  max-width: 28.458rem;
26
26
  border-radius: ${({ theme: e }) => e.borderRadius.xl};
27
27
  overflow: hidden;
28
28
  display: flex;
29
29
  flex-direction: column;
30
- ${({ $variant: e }) => j[e]};
31
- `, z = i.div`
30
+ ${({ $variant: e }) => C[e]};
31
+ `, B = i.div`
32
32
  padding: 2rem;
33
33
  display: flex;
34
34
  flex-direction: column;
35
35
  gap: ${({ theme: e }) => e.spacing.sm};
36
36
  border-bottom: 1px solid ${({ theme: e }) => e.colors.grey.n200};
37
- `, F = i.div`
37
+ `, R = i.div`
38
38
  display: flex;
39
39
  align-items: center;
40
40
  justify-content: space-between;
41
41
  gap: ${({ theme: e }) => e.spacing.m};
42
42
  flex-wrap: wrap;
43
- `, k = i(s)`
43
+ `, T = i(t)`
44
44
  font-family: ${({ theme: e }) => e.fonts.arabic};
45
45
  font-weight: 600;
46
46
  font-size: ${({ theme: e }) => {
47
- var o;
48
- return (o = e.typography.sizes) == null ? void 0 : o.s5;
47
+ var r;
48
+ return (r = e.typography.sizes) == null ? void 0 : r.s5;
49
49
  }};
50
50
  line-height: 1.75rem;
51
51
  color: ${({ theme: e }) => e.colors.grey.n400};
52
- `, C = i.div`
52
+ `, P = i.div`
53
53
  display: flex;
54
54
  flex-direction: column;
55
55
  gap: 0.85rem;
56
- `, B = i.div`
56
+ `, E = i.div`
57
57
  display: flex;
58
58
  align-items: center;
59
59
  gap: ${({ theme: e }) => e.spacing.xs};
60
60
  flex-wrap: wrap;
61
- `, R = i.div`
61
+ `, H = i.div`
62
62
  display: flex;
63
63
  align-items: baseline;
64
64
  gap: ${({ theme: e }) => e.spacing.xxs};
65
- `, T = i.span`
65
+ `, S = i.span`
66
66
  font-family: ${({ theme: e }) => e.fonts.english};
67
67
  font-weight: ${({ theme: e }) => e.typography.weights.semiBold};
68
68
  font-size: 2.706rem;
69
69
  line-height: 3.158rem;
70
- color: ${({ $color: e, theme: o }) => e ?? o.colors.grey.n800};
71
- `, P = i.span`
70
+ color: ${({ $color: e, theme: r }) => e ?? r.colors.grey.n800};
71
+ `, D = i.span`
72
72
  font-family: ${({ theme: e }) => e.fonts.arabic};
73
73
  font-weight: ${({ theme: e }) => e.typography.weights.regular};
74
74
  font-size: ${({ theme: e }) => {
75
- var o;
76
- return (o = e.typography.sizes) == null ? void 0 : o.s5;
75
+ var r;
76
+ return (r = e.typography.sizes) == null ? void 0 : r.s5;
77
77
  }};
78
78
  line-height: 1.804rem;
79
- color: ${({ $color: e, theme: o }) => e ?? o.colors.grey.n800};
80
- `, E = i(s)`
79
+ color: ${({ $color: e, theme: r }) => e ?? r.colors.grey.n800};
80
+ `, I = i(t)`
81
81
  font-family: ${({ theme: e }) => e.fonts.arabic};
82
82
  font-weight: ${({ theme: e }) => e.typography.weights.regular};
83
83
  font-size: ${({ theme: e }) => {
84
- var o;
85
- return (o = e.typography.sizes) == null ? void 0 : o.s4;
84
+ var r;
85
+ return (r = e.typography.sizes) == null ? void 0 : r.s4;
86
86
  }};
87
87
  line-height: ${({ theme: e }) => e.typography.lineHeights.m};
88
88
  color: ${({ theme: e }) => e.colors.grey.n400};
89
- `, H = i.div`
89
+ `, V = i.div`
90
90
  padding: 2rem 2rem 2.5rem 2rem;
91
91
  display: flex;
92
92
  flex-direction: column;
93
93
  gap: ${({ theme: e }) => e.spacing.m};
94
- `, S = i(s)`
94
+ `, W = i(t)`
95
95
  font-family: ${({ theme: e }) => e.fonts.arabic};
96
96
  font-weight: ${({ theme: e }) => e.typography.weights.semiBold};
97
97
  font-size: ${({ theme: e }) => {
98
- var o;
99
- return (o = e.typography.sizes) == null ? void 0 : o.s4;
98
+ var r;
99
+ return (r = e.typography.sizes) == null ? void 0 : r.s4;
100
100
  }};
101
101
  line-height: 0.7rem;
102
102
  color: ${({ theme: e }) => e.colors.grey.n650};
103
103
  text-transform: uppercase;
104
- `, D = i(s)`
104
+ `, L = i(t)`
105
105
  font-family: ${({ theme: e }) => e.fonts.arabic};
106
106
  font-weight: 500;
107
107
  font-size: ${({ theme: e }) => {
108
- var o;
109
- return (o = e.typography.sizes) == null ? void 0 : o.s4;
108
+ var r;
109
+ return (r = e.typography.sizes) == null ? void 0 : r.s4;
110
110
  }};
111
111
  line-height: ${({ theme: e }) => e.typography.lineHeights.m};
112
112
  color: ${({ theme: e }) => e.colors.grey.n400};
113
- `, I = i.ul`
113
+ `, M = i.ul`
114
114
  list-style: none;
115
115
  margin: 0;
116
116
  padding: 0;
117
117
  display: flex;
118
118
  flex-direction: column;
119
119
  gap: ${({ theme: e }) => e.spacing.s};
120
- `, V = i.li`
120
+ `, U = i.li`
121
121
  display: flex;
122
122
  align-items: center;
123
123
  gap: ${({ theme: e }) => e.spacing.xs};
124
- `, W = i.span`
124
+ `, X = i.span`
125
125
  width: 1rem;
126
126
  height: 1rem;
127
127
  border-radius: 50%;
@@ -135,67 +135,77 @@ const j = {
135
135
  height: 0.7rem;
136
136
  }
137
137
 
138
- ${({ theme: e, $variant: o }) => o === "included" ? l`
138
+ ${({ theme: e, $variant: r }) => r === "included" ? a`
139
139
  border: 1px solid ${e.colors.secondary.green.n450};
140
140
  color: ${e.colors.secondary.green.n450};
141
- ` : l`
141
+ ` : a`
142
142
  border: 1px solid ${e.colors.secondary.pink.n450};
143
143
  color: ${e.colors.secondary.pink.n450};
144
144
  `}
145
- `, L = i(s)`
145
+ `, q = i(t)`
146
146
  font-family: ${({ theme: e }) => e.fonts.arabic};
147
147
  font-weight: 400;
148
148
  font-size: ${({ theme: e }) => {
149
- var o;
150
- return (o = e.typography.sizes) == null ? void 0 : o.s3;
149
+ var r;
150
+ return (r = e.typography.sizes) == null ? void 0 : r.s3;
151
151
  }};
152
152
  line-height: ${({ theme: e }) => e.typography.lineHeights.m};
153
153
  color: ${({ theme: e }) => e.colors.grey.n400};
154
- `, M = i.div`
154
+ `, G = i.div`
155
155
  width: 100%;
156
156
  margin-top: 1rem;
157
+ display: flex;
158
+ flex-direction: column;
159
+ gap: 0.75rem;
157
160
 
158
161
  button {
159
162
  width: 100%;
160
163
  }
161
- `, Y = ({
164
+ `, ee = ({
162
165
  title: e,
163
- price: o,
164
- description: d,
165
- features: g,
166
- variant: f = "transparent",
166
+ price: r,
167
+ description: f,
168
+ features: h,
169
+ variant: x = "transparent",
167
170
  badges: c = [],
168
- primaryAction: t,
169
- featuresTitle: h = "FEATURES",
170
- featuresDescription: x = "Everything in our free plan plus....."
171
- }) => /* @__PURE__ */ r.jsxs(v, { $variant: f, children: [
172
- /* @__PURE__ */ r.jsxs(z, { children: [
173
- /* @__PURE__ */ r.jsxs(F, { children: [
174
- /* @__PURE__ */ r.jsx(k, { children: e }),
175
- c.length > 0 && /* @__PURE__ */ r.jsx(B, { children: c.map((n, a) => /* @__PURE__ */ r.jsx(b, { label: n.label, bgColor: n.bgColor, color: n.color }, `${n.label}-${a}`)) })
171
+ showPrimaryAction: m = !1,
172
+ primaryAction: s,
173
+ showSecondaryAction: $ = !1,
174
+ secondaryAction: l,
175
+ showFeatures: y = !0,
176
+ featuresTitle: u = "FEATURES",
177
+ featuresDescription: b = "Everything in our free plan plus....."
178
+ }) => /* @__PURE__ */ o.jsxs(F, { $variant: x, children: [
179
+ /* @__PURE__ */ o.jsxs(B, { children: [
180
+ /* @__PURE__ */ o.jsxs(R, { children: [
181
+ /* @__PURE__ */ o.jsx(T, { children: e }),
182
+ 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}`)) })
176
183
  ] }),
177
- /* @__PURE__ */ r.jsxs(R, { children: [
178
- /* @__PURE__ */ r.jsx($, { src: u, alt: "Riyal" }),
179
- /* @__PURE__ */ r.jsx(T, { $color: o.color, children: o.amount }),
180
- /* @__PURE__ */ r.jsx(P, { $color: o.periodColor, children: o.period ?? "/ Month" })
184
+ /* @__PURE__ */ o.jsxs(H, { children: [
185
+ /* @__PURE__ */ o.jsx(v, { src: z, alt: "Riyal" }),
186
+ /* @__PURE__ */ o.jsx(S, { $color: r.color, children: r.amount }),
187
+ /* @__PURE__ */ o.jsx(D, { $color: r.periodColor, children: r.period ?? "/ Month" })
181
188
  ] }),
182
- /* @__PURE__ */ r.jsx(E, { children: d }),
183
- /* @__PURE__ */ r.jsx(M, { children: t && /* @__PURE__ */ r.jsx(w, { variant: t.variant ?? "primary", onClick: t.onClick, children: t.label }) })
189
+ /* @__PURE__ */ o.jsx(I, { children: f }),
190
+ /* @__PURE__ */ o.jsxs(G, { children: [
191
+ 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 }),
192
+ $ && /* @__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 })
193
+ ] })
184
194
  ] }),
185
- /* @__PURE__ */ r.jsxs(H, { children: [
186
- /* @__PURE__ */ r.jsxs(C, { children: [
187
- /* @__PURE__ */ r.jsx(S, { children: h }),
188
- /* @__PURE__ */ r.jsx(D, { children: x })
195
+ y && /* @__PURE__ */ o.jsxs(V, { children: [
196
+ /* @__PURE__ */ o.jsxs(P, { children: [
197
+ /* @__PURE__ */ o.jsx(W, { children: u }),
198
+ /* @__PURE__ */ o.jsx(L, { children: b })
189
199
  ] }),
190
- /* @__PURE__ */ r.jsx(I, { children: g.map((n, a) => {
191
- const p = n.variant ?? "included";
192
- return /* @__PURE__ */ r.jsxs(V, { children: [
193
- /* @__PURE__ */ r.jsx(W, { $variant: p, children: p === "included" ? /* @__PURE__ */ r.jsx(m, {}) : /* @__PURE__ */ r.jsx(y, {}) }),
194
- /* @__PURE__ */ r.jsx(L, { children: n.label })
195
- ] }, `${n.label}-${a}`);
200
+ /* @__PURE__ */ o.jsx(M, { children: h.map((n, p) => {
201
+ const d = n.variant ?? "included";
202
+ return /* @__PURE__ */ o.jsxs(U, { children: [
203
+ /* @__PURE__ */ o.jsx(X, { $variant: d, children: d === "included" ? /* @__PURE__ */ o.jsx(j, {}) : /* @__PURE__ */ o.jsx(w, {}) }),
204
+ /* @__PURE__ */ o.jsx(q, { children: n.label })
205
+ ] }, `${n.label}-${p}`);
196
206
  }) })
197
207
  ] })
198
208
  ] });
199
209
  export {
200
- Y as default
210
+ ee as default
201
211
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "qaema-ui",
3
3
  "private": false,
4
- "version": "0.0.36",
4
+ "version": "0.0.38",
5
5
  "type": "module",
6
6
  "publishConfig": {
7
7
  "access": "public"