qaema-ui 0.0.34 → 0.0.36

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.
@@ -0,0 +1,36 @@
1
+ import React from 'react';
2
+ export type PriceCardVariant = 'transparent' | 'purple';
3
+ export type FeatureVariant = 'included' | 'excluded';
4
+ export type PriceCardBadge = {
5
+ label: string;
6
+ bgColor: string;
7
+ color: string;
8
+ };
9
+ export type PriceCardFeature = {
10
+ label: string;
11
+ variant?: FeatureVariant;
12
+ };
13
+ export type PriceCardPrice = {
14
+ amount: string;
15
+ period?: string;
16
+ color?: string;
17
+ periodColor?: string;
18
+ };
19
+ export type PriceCardPrimaryAction = {
20
+ label: string;
21
+ onClick: () => void;
22
+ variant?: 'primary' | 'light-primary';
23
+ };
24
+ export type PriceCardProps = {
25
+ title: string;
26
+ price: PriceCardPrice;
27
+ description: string;
28
+ features: PriceCardFeature[];
29
+ variant?: PriceCardVariant;
30
+ badges?: PriceCardBadge[];
31
+ primaryAction?: PriceCardPrimaryAction;
32
+ featuresTitle?: string;
33
+ featuresDescription?: string;
34
+ };
35
+ declare const PriceCard: React.FC<PriceCardProps>;
36
+ export default PriceCard;
@@ -0,0 +1,201 @@
1
+ import { j as r } from "../_virtual/jsx-runtime.js";
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`
12
+ background: rgba(255, 255, 255, 0.72);
13
+ border: 1px solid ${({ theme: e }) => e.colors.grey.n200};
14
+ box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
15
+ `,
16
+ purple: l`
17
+ background: linear-gradient(360deg, #ffffff 63.12%, #f1eeff 100%);
18
+ border: 1px solid #e3deff;
19
+ box-shadow:
20
+ 0px 4px 6px -2px #10182808,
21
+ 0px 12px 16px -4px #10182814;
22
+ `
23
+ }, v = i.div`
24
+ width: 100%;
25
+ max-width: 28.458rem;
26
+ border-radius: ${({ theme: e }) => e.borderRadius.xl};
27
+ overflow: hidden;
28
+ display: flex;
29
+ flex-direction: column;
30
+ ${({ $variant: e }) => j[e]};
31
+ `, z = i.div`
32
+ padding: 2rem;
33
+ display: flex;
34
+ flex-direction: column;
35
+ gap: ${({ theme: e }) => e.spacing.sm};
36
+ border-bottom: 1px solid ${({ theme: e }) => e.colors.grey.n200};
37
+ `, F = i.div`
38
+ display: flex;
39
+ align-items: center;
40
+ justify-content: space-between;
41
+ gap: ${({ theme: e }) => e.spacing.m};
42
+ flex-wrap: wrap;
43
+ `, k = i(s)`
44
+ font-family: ${({ theme: e }) => e.fonts.arabic};
45
+ font-weight: 600;
46
+ font-size: ${({ theme: e }) => {
47
+ var o;
48
+ return (o = e.typography.sizes) == null ? void 0 : o.s5;
49
+ }};
50
+ line-height: 1.75rem;
51
+ color: ${({ theme: e }) => e.colors.grey.n400};
52
+ `, C = i.div`
53
+ display: flex;
54
+ flex-direction: column;
55
+ gap: 0.85rem;
56
+ `, B = i.div`
57
+ display: flex;
58
+ align-items: center;
59
+ gap: ${({ theme: e }) => e.spacing.xs};
60
+ flex-wrap: wrap;
61
+ `, R = i.div`
62
+ display: flex;
63
+ align-items: baseline;
64
+ gap: ${({ theme: e }) => e.spacing.xxs};
65
+ `, T = i.span`
66
+ font-family: ${({ theme: e }) => e.fonts.english};
67
+ font-weight: ${({ theme: e }) => e.typography.weights.semiBold};
68
+ font-size: 2.706rem;
69
+ line-height: 3.158rem;
70
+ color: ${({ $color: e, theme: o }) => e ?? o.colors.grey.n800};
71
+ `, P = i.span`
72
+ font-family: ${({ theme: e }) => e.fonts.arabic};
73
+ font-weight: ${({ theme: e }) => e.typography.weights.regular};
74
+ font-size: ${({ theme: e }) => {
75
+ var o;
76
+ return (o = e.typography.sizes) == null ? void 0 : o.s5;
77
+ }};
78
+ line-height: 1.804rem;
79
+ color: ${({ $color: e, theme: o }) => e ?? o.colors.grey.n800};
80
+ `, E = i(s)`
81
+ font-family: ${({ theme: e }) => e.fonts.arabic};
82
+ font-weight: ${({ theme: e }) => e.typography.weights.regular};
83
+ font-size: ${({ theme: e }) => {
84
+ var o;
85
+ return (o = e.typography.sizes) == null ? void 0 : o.s4;
86
+ }};
87
+ line-height: ${({ theme: e }) => e.typography.lineHeights.m};
88
+ color: ${({ theme: e }) => e.colors.grey.n400};
89
+ `, H = i.div`
90
+ padding: 2rem 2rem 2.5rem 2rem;
91
+ display: flex;
92
+ flex-direction: column;
93
+ gap: ${({ theme: e }) => e.spacing.m};
94
+ `, S = i(s)`
95
+ font-family: ${({ theme: e }) => e.fonts.arabic};
96
+ font-weight: ${({ theme: e }) => e.typography.weights.semiBold};
97
+ font-size: ${({ theme: e }) => {
98
+ var o;
99
+ return (o = e.typography.sizes) == null ? void 0 : o.s4;
100
+ }};
101
+ line-height: 0.7rem;
102
+ color: ${({ theme: e }) => e.colors.grey.n650};
103
+ text-transform: uppercase;
104
+ `, D = i(s)`
105
+ font-family: ${({ theme: e }) => e.fonts.arabic};
106
+ font-weight: 500;
107
+ font-size: ${({ theme: e }) => {
108
+ var o;
109
+ return (o = e.typography.sizes) == null ? void 0 : o.s4;
110
+ }};
111
+ line-height: ${({ theme: e }) => e.typography.lineHeights.m};
112
+ color: ${({ theme: e }) => e.colors.grey.n400};
113
+ `, I = i.ul`
114
+ list-style: none;
115
+ margin: 0;
116
+ padding: 0;
117
+ display: flex;
118
+ flex-direction: column;
119
+ gap: ${({ theme: e }) => e.spacing.s};
120
+ `, V = i.li`
121
+ display: flex;
122
+ align-items: center;
123
+ gap: ${({ theme: e }) => e.spacing.xs};
124
+ `, W = i.span`
125
+ width: 1rem;
126
+ height: 1rem;
127
+ border-radius: 50%;
128
+ display: inline-flex;
129
+ align-items: center;
130
+ justify-content: center;
131
+ flex-shrink: 0;
132
+
133
+ svg {
134
+ width: 0.7rem;
135
+ height: 0.7rem;
136
+ }
137
+
138
+ ${({ theme: e, $variant: o }) => o === "included" ? l`
139
+ border: 1px solid ${e.colors.secondary.green.n450};
140
+ color: ${e.colors.secondary.green.n450};
141
+ ` : l`
142
+ border: 1px solid ${e.colors.secondary.pink.n450};
143
+ color: ${e.colors.secondary.pink.n450};
144
+ `}
145
+ `, L = i(s)`
146
+ font-family: ${({ theme: e }) => e.fonts.arabic};
147
+ font-weight: 400;
148
+ font-size: ${({ theme: e }) => {
149
+ var o;
150
+ return (o = e.typography.sizes) == null ? void 0 : o.s3;
151
+ }};
152
+ line-height: ${({ theme: e }) => e.typography.lineHeights.m};
153
+ color: ${({ theme: e }) => e.colors.grey.n400};
154
+ `, M = i.div`
155
+ width: 100%;
156
+ margin-top: 1rem;
157
+
158
+ button {
159
+ width: 100%;
160
+ }
161
+ `, Y = ({
162
+ title: e,
163
+ price: o,
164
+ description: d,
165
+ features: g,
166
+ variant: f = "transparent",
167
+ 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}`)) })
176
+ ] }),
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" })
181
+ ] }),
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 }) })
184
+ ] }),
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 })
189
+ ] }),
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}`);
196
+ }) })
197
+ ] })
198
+ ] });
199
+ export {
200
+ Y as default
201
+ };
@@ -153,3 +153,5 @@ export { default as TotalsSummary } from './TotalsSummary';
153
153
  export type { TotalsSummaryProps, TotalsSummaryItem } from './TotalsSummary';
154
154
  export { default as NextActionBox } from './NextActionBox';
155
155
  export type { NextActionBoxProps, NextActionItem } from './NextActionBox';
156
+ export { default as PriceCard } from './PriceCard';
157
+ export type { PriceCardProps, PriceCardFeature, PriceCardBadge } from './PriceCard';
package/dist/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { default as o } from "./components/Button.js";
2
- import { default as a } from "./components/InputField.js";
2
+ import { default as t } from "./components/InputField.js";
3
3
  import { default as d } from "./components/TextArea.js";
4
4
  import { default as u } from "./components/Typography.js";
5
5
  import { default as l } from "./components/DropDown.js";
@@ -26,7 +26,7 @@ import { default as X } from "./components/Stepper.js";
26
26
  import { default as _ } from "./components/ProgressBar.js";
27
27
  import { default as ee } from "./components/InfoItem.js";
28
28
  import { default as oe } from "./components/AmountItem.js";
29
- import { default as ae } from "./components/Layout.js";
29
+ import { default as te } from "./components/Layout.js";
30
30
  import { default as de } from "./components/DatePicker.js";
31
31
  import { default as ue } from "./components/PasswordInputField.js";
32
32
  import { default as le } from "./components/ToastNotification.js";
@@ -53,7 +53,7 @@ import { default as Xe } from "./components/Divider.js";
53
53
  import { default as _e } from "./components/Badge.js";
54
54
  import { default as er } from "./components/Banner.js";
55
55
  import { default as or } from "./components/AddOnCardInput.js";
56
- import { default as ar } from "./components/ConfirmationPopup.js";
56
+ import { default as tr } from "./components/ConfirmationPopup.js";
57
57
  import { default as dr } from "./components/BulletItem.js";
58
58
  import { default as ur } from "./components/CardsList.js";
59
59
  import { default as lr } from "./components/StatCard.js";
@@ -78,16 +78,17 @@ import { default as Jr } from "./components/ModalWithRequestCard.js";
78
78
  import { default as Ur } from "./components/DropDownWithTable/DropDownWithTable.js";
79
79
  import { default as Yr } from "./components/TotalsSummary.js";
80
80
  import { default as $r } from "./components/NextActionBox.js";
81
- import { default as ro } from "./hooks/useFormikInput.js";
82
- import { default as to } from "./hooks/useZIndex.js";
83
- import { default as fo } from "./hooks/useBreakpointCheck.js";
84
- import { FeatureCard as uo } from "./components/FeatureCard.js";
85
- import { ProductCard as lo } from "./components/ProductCard.js";
86
- import { OptionSelectGroup as xo } from "./components/OptionCardGroup.js";
87
- import { defaultTheme as io } from "./theme/theme.js";
88
- import { darkColors as co, lightColors as go } from "./theme/colors.js";
89
- import { setQaemaCoreLanguage as Po } from "./i18n/i18n.js";
90
- import { breakPoints as So, device as To } from "./constants/breakPoints.constant.js";
81
+ import { default as ro } from "./components/PriceCard.js";
82
+ import { default as ao } from "./hooks/useFormikInput.js";
83
+ import { default as fo } from "./hooks/useZIndex.js";
84
+ import { default as uo } from "./hooks/useBreakpointCheck.js";
85
+ import { FeatureCard as lo } from "./components/FeatureCard.js";
86
+ import { ProductCard as xo } from "./components/ProductCard.js";
87
+ import { OptionSelectGroup as io } from "./components/OptionCardGroup.js";
88
+ import { defaultTheme as co } from "./theme/theme.js";
89
+ import { darkColors as Io, lightColors as Po } from "./theme/colors.js";
90
+ import { setQaemaCoreLanguage as So } from "./i18n/i18n.js";
91
+ import { breakPoints as ho, device as bo } from "./constants/breakPoints.constant.js";
91
92
  export {
92
93
  Fr as AccordionCard,
93
94
  Fe as ActionInput,
@@ -105,13 +106,13 @@ export {
105
106
  O as Checkbox,
106
107
  ce as CollapsableCard,
107
108
  Mr as ConfigList,
108
- ar as ConfirmationPopup,
109
+ tr as ConfirmationPopup,
109
110
  de as DatePicker,
110
111
  Xe as Divider,
111
112
  B as Draggable,
112
113
  l as DropDown,
113
114
  Ur as DropDownWithTable,
114
- uo as FeatureCard,
115
+ lo as FeatureCard,
115
116
  Rr as FileDownloadCard,
116
117
  Q as Header,
117
118
  wr as HelpCard,
@@ -121,8 +122,8 @@ export {
121
122
  L as Image,
122
123
  k as InfoCard,
123
124
  ee as InfoItem,
124
- a as InputField,
125
- ae as Layout,
125
+ t as InputField,
126
+ te as Layout,
126
127
  be as Legend,
127
128
  Z as Link,
128
129
  xr as ListToolbar,
@@ -133,7 +134,7 @@ export {
133
134
  Ir as NavigationPanel,
134
135
  $r as NextActionBox,
135
136
  ie as NumberInput,
136
- xo as OptionSelectGroup,
137
+ io as OptionSelectGroup,
137
138
  xe as OtpInput,
138
139
  b as PackageCard,
139
140
  Ze as PageHeader,
@@ -143,7 +144,8 @@ export {
143
144
  jr as PaymentTooltip,
144
145
  Qe as PhoneInputField,
145
146
  E as PriceAmount,
146
- lo as ProductCard,
147
+ ro as PriceCard,
148
+ xo as ProductCard,
147
149
  _ as ProgressBar,
148
150
  br as QuickActionItem,
149
151
  Ke as QuickStartCard,
@@ -173,13 +175,13 @@ export {
173
175
  Yr as TotalsSummary,
174
176
  u as Typography,
175
177
  cr as ViewItem,
176
- So as breakPoints,
177
- co as darkColors,
178
- io as defaultTheme,
179
- To as device,
180
- go as lightColors,
181
- Po as setQaemaCoreLanguage,
182
- fo as useBreakpointCheck,
183
- ro as useFormikInput,
184
- to as useZIndex
178
+ ho as breakPoints,
179
+ Io as darkColors,
180
+ co as defaultTheme,
181
+ bo as device,
182
+ Po as lightColors,
183
+ So as setQaemaCoreLanguage,
184
+ uo as useBreakpointCheck,
185
+ ao as useFormikInput,
186
+ fo as useZIndex
185
187
  };
@@ -1,28 +1,36 @@
1
- import { GenIcon as t } from "../lib/iconBase.js";
1
+ import { GenIcon as r } from "../lib/iconBase.js";
2
2
  import "../lib/iconContext.js";
3
- function i(r) {
4
- return t({ attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "polyline", attr: { points: "6 9 12 15 18 9" }, child: [] }] })(r);
3
+ function i(t) {
4
+ return r({ attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "polyline", attr: { points: "20 6 9 17 4 12" }, child: [] }] })(t);
5
5
  }
6
- function e(r) {
7
- return t({ attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "polyline", attr: { points: "9 18 15 12 9 6" }, child: [] }] })(r);
6
+ function e(t) {
7
+ return r({ attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "polyline", attr: { points: "6 9 12 15 18 9" }, child: [] }] })(t);
8
8
  }
9
- function l(r) {
10
- return t({ attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "path", attr: { d: "M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" }, child: [] }] })(r);
9
+ function l(t) {
10
+ return r({ attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "polyline", attr: { points: "9 18 15 12 9 6" }, child: [] }] })(t);
11
11
  }
12
- function c(r) {
13
- return t({ attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "line", attr: { x1: "5", y1: "12", x2: "19", y2: "12" }, child: [] }] })(r);
12
+ function c(t) {
13
+ return r({ attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "path", attr: { d: "M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" }, child: [] }] })(t);
14
14
  }
15
- function a(r) {
16
- return t({ attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "circle", attr: { cx: "12", cy: "12", r: "1" }, child: [] }, { tag: "circle", attr: { cx: "19", cy: "12", r: "1" }, child: [] }, { tag: "circle", attr: { cx: "5", cy: "12", r: "1" }, child: [] }] })(r);
15
+ function a(t) {
16
+ return r({ attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "line", attr: { x1: "5", y1: "12", x2: "19", y2: "12" }, child: [] }] })(t);
17
17
  }
18
- function d(r) {
19
- return t({ attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "line", attr: { x1: "12", y1: "5", x2: "12", y2: "19" }, child: [] }, { tag: "line", attr: { x1: "5", y1: "12", x2: "19", y2: "12" }, child: [] }] })(r);
18
+ function d(t) {
19
+ return r({ attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "circle", attr: { cx: "12", cy: "12", r: "1" }, child: [] }, { tag: "circle", attr: { cx: "19", cy: "12", r: "1" }, child: [] }, { tag: "circle", attr: { cx: "5", cy: "12", r: "1" }, child: [] }] })(t);
20
+ }
21
+ function u(t) {
22
+ return r({ attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "line", attr: { x1: "12", y1: "5", x2: "12", y2: "19" }, child: [] }, { tag: "line", attr: { x1: "5", y1: "12", x2: "19", y2: "12" }, child: [] }] })(t);
23
+ }
24
+ function s(t) {
25
+ return r({ attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "line", attr: { x1: "18", y1: "6", x2: "6", y2: "18" }, child: [] }, { tag: "line", attr: { x1: "6", y1: "6", x2: "18", y2: "18" }, child: [] }] })(t);
20
26
  }
21
27
  export {
22
- i as FiChevronDown,
23
- e as FiChevronRight,
24
- l as FiFolder,
25
- c as FiMinus,
26
- a as FiMoreHorizontal,
27
- d as FiPlus
28
+ i as FiCheck,
29
+ e as FiChevronDown,
30
+ l as FiChevronRight,
31
+ c as FiFolder,
32
+ a as FiMinus,
33
+ d as FiMoreHorizontal,
34
+ u as FiPlus,
35
+ s as FiX
28
36
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "qaema-ui",
3
3
  "private": false,
4
- "version": "0.0.34",
4
+ "version": "0.0.36",
5
5
  "type": "module",
6
6
  "publishConfig": {
7
7
  "access": "public"