@omnikit-js/ui 0.5.1 → 0.5.4
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.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@omnikit-js/ui",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.4",
|
|
4
4
|
"description": "A SaaS billing component for Next.js with Stripe integration",
|
|
5
5
|
"main": "src/index.ts",
|
|
6
6
|
"module": "src/index.ts",
|
|
@@ -10,17 +10,22 @@
|
|
|
10
10
|
"types": "./src/index.ts",
|
|
11
11
|
"import": "./src/index.ts",
|
|
12
12
|
"require": "./src/index.ts"
|
|
13
|
-
}
|
|
13
|
+
},
|
|
14
|
+
"./dist/styles.css": "./dist/styles.css",
|
|
15
|
+
"./dist/styles.prefixed.css": "./dist/styles.prefixed.css",
|
|
16
|
+
"./dist/styles.isolated.css": "./dist/styles.isolated.css"
|
|
14
17
|
},
|
|
15
18
|
"files": [
|
|
16
19
|
"src",
|
|
17
20
|
"dist/styles.css",
|
|
18
|
-
"dist/styles.prefixed.css"
|
|
21
|
+
"dist/styles.prefixed.css",
|
|
22
|
+
"dist/styles.isolated.css"
|
|
19
23
|
],
|
|
20
24
|
"scripts": {
|
|
21
25
|
"build:css": "node postcss-build.js",
|
|
22
26
|
"build:css:prefixed": "node postcss-build-prefixed.js",
|
|
23
|
-
"build": "
|
|
27
|
+
"build:css:isolated": "node postcss-build-isolated.js",
|
|
28
|
+
"build": "rollup -c && npm run build:css && npm run build:css:prefixed && npm run build:css:isolated",
|
|
24
29
|
"dev": "rollup -c -w",
|
|
25
30
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
26
31
|
"prepublishOnly": "npm run build"
|
|
@@ -519,7 +519,7 @@ export default function BillingClient({ customerData, pricingData, paymentMethod
|
|
|
519
519
|
};
|
|
520
520
|
|
|
521
521
|
return (
|
|
522
|
-
<Card key={product.id} className={`relative overflow-hidden h-full flex flex-col ${isCurrentPlan ? "border-primary shadow-md" : "border-muted"} ${product.metadata?.popular === 'true' && !isCurrentPlan ? "border-primary/50" : ""}`}>
|
|
522
|
+
<Card key={product.id} className={`pricing-card relative overflow-hidden h-full flex flex-col ${isCurrentPlan ? "current border-primary shadow-md" : "border-muted"} ${product.metadata?.popular === 'true' && !isCurrentPlan ? "border-primary/50" : ""}`}>
|
|
523
523
|
{product.metadata?.popular === 'true' && !isCurrentPlan && (
|
|
524
524
|
<div className="absolute top-0 right-0 bg-primary text-primary-foreground text-xs font-medium px-3 py-1 rounded-bl-lg">
|
|
525
525
|
POPULAR
|
|
@@ -116,12 +116,14 @@ export default async function BillingServer({
|
|
|
116
116
|
}
|
|
117
117
|
|
|
118
118
|
return (
|
|
119
|
-
<
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
119
|
+
<div className="omnikit-billing-component">
|
|
120
|
+
<BillingClient
|
|
121
|
+
customerData={customerData}
|
|
122
|
+
pricingData={pricingData}
|
|
123
|
+
paymentMethods={paymentMethods}
|
|
124
|
+
apiUrl={apiUrl}
|
|
125
|
+
apiKey={apiKey}
|
|
126
|
+
/>
|
|
127
|
+
</div>
|
|
126
128
|
);
|
|
127
129
|
}
|
|
@@ -14,14 +14,14 @@ function Progress({
|
|
|
14
14
|
<ProgressPrimitive.Root
|
|
15
15
|
data-slot="progress"
|
|
16
16
|
className={cn(
|
|
17
|
-
"bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
|
|
17
|
+
"omnikit-progress bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
|
|
18
18
|
className
|
|
19
19
|
)}
|
|
20
20
|
{...props}
|
|
21
21
|
>
|
|
22
22
|
<ProgressPrimitive.Indicator
|
|
23
23
|
data-slot="progress-indicator"
|
|
24
|
-
className="bg-primary h-full w-full flex-1 transition-all"
|
|
24
|
+
className="omnikit-progress-fill bg-primary h-full w-full flex-1 transition-all"
|
|
25
25
|
style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
|
|
26
26
|
/>
|
|
27
27
|
</ProgressPrimitive.Root>
|
|
@@ -0,0 +1,316 @@
|
|
|
1
|
+
/* Isolated styles for @omnikit-js/ui to prevent conflicts */
|
|
2
|
+
|
|
3
|
+
/* Reset and scope all component styles */
|
|
4
|
+
.omnikit-billing-component {
|
|
5
|
+
/* Create a new stacking context */
|
|
6
|
+
isolation: isolate;
|
|
7
|
+
/* Reset inherited styles */
|
|
8
|
+
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
9
|
+
line-height: 1.5;
|
|
10
|
+
color: #111827;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
/* Progress bar specific fixes */
|
|
14
|
+
.omnikit-billing-component .omnikit-progress {
|
|
15
|
+
width: 100%;
|
|
16
|
+
height: 0.5rem;
|
|
17
|
+
background-color: #e5e7eb !important;
|
|
18
|
+
border-radius: 9999px;
|
|
19
|
+
overflow: hidden;
|
|
20
|
+
position: relative;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.omnikit-billing-component .omnikit-progress-fill {
|
|
24
|
+
height: 100%;
|
|
25
|
+
background-color: #10b981 !important; /* Green for success */
|
|
26
|
+
transition: width 0.3s ease;
|
|
27
|
+
position: relative;
|
|
28
|
+
z-index: 1;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
/* Different states for progress */
|
|
32
|
+
.omnikit-billing-component .omnikit-progress-fill.warning {
|
|
33
|
+
background-color: #f59e0b !important; /* Amber for warning */
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.omnikit-billing-component .omnikit-progress-fill.danger {
|
|
37
|
+
background-color: #ef4444 !important; /* Red for danger */
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
/* Override any conflicting progress styles */
|
|
41
|
+
.omnikit-billing-component [role="progressbar"] {
|
|
42
|
+
background-color: #e5e7eb !important;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.omnikit-billing-component [role="progressbar"] > div:first-child {
|
|
46
|
+
background-color: #10b981 !important;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/* Fix border issues */
|
|
50
|
+
.omnikit-billing-component .border {
|
|
51
|
+
border-width: 1px !important;
|
|
52
|
+
border-style: solid !important;
|
|
53
|
+
border-color: #e5e7eb !important;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.omnikit-billing-component .border-border {
|
|
57
|
+
border-color: #e5e7eb !important;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
/* Card styles - removed large borders */
|
|
61
|
+
.omnikit-billing-component .omnikit-card,
|
|
62
|
+
.omnikit-billing-component [data-slot="card"] {
|
|
63
|
+
background-color: transparent;
|
|
64
|
+
border: none !important;
|
|
65
|
+
border-radius: 0.75rem;
|
|
66
|
+
box-shadow: none !important;
|
|
67
|
+
padding: 0 !important;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
/* Pricing card specific styles */
|
|
71
|
+
.omnikit-billing-component .pricing-card {
|
|
72
|
+
background-color: rgba(255, 255, 255, 0.05);
|
|
73
|
+
border: 1px solid rgba(255, 255, 255, 0.1) !important;
|
|
74
|
+
border-radius: 0.75rem;
|
|
75
|
+
padding: 0 !important;
|
|
76
|
+
overflow: hidden;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.omnikit-billing-component .pricing-card.current {
|
|
80
|
+
border-color: #3b82f6 !important;
|
|
81
|
+
background-color: rgba(59, 130, 246, 0.1);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
/* Card content padding */
|
|
85
|
+
.omnikit-billing-component .pricing-card [data-slot="card-header"],
|
|
86
|
+
.omnikit-billing-component .pricing-card [data-slot="card-content"],
|
|
87
|
+
.omnikit-billing-component .pricing-card [data-slot="card-footer"] {
|
|
88
|
+
padding: 1.5rem !important;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
/* Text colors for dark mode */
|
|
92
|
+
.omnikit-billing-component .text-foreground {
|
|
93
|
+
color: #f9fafb !important;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.omnikit-billing-component .text-muted-foreground {
|
|
97
|
+
color: #9ca3af !important;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.omnikit-billing-component .text-gray-500 {
|
|
101
|
+
color: #9ca3af !important;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
/* Dark mode support */
|
|
105
|
+
@media (prefers-color-scheme: dark) {
|
|
106
|
+
.omnikit-billing-component {
|
|
107
|
+
color: #f9fafb;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.omnikit-billing-component .pricing-card {
|
|
111
|
+
background-color: rgba(31, 41, 55, 0.5);
|
|
112
|
+
border-color: rgba(255, 255, 255, 0.1) !important;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.omnikit-billing-component .border,
|
|
116
|
+
.omnikit-billing-component .border-border {
|
|
117
|
+
border-color: #374151 !important;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.omnikit-billing-component .omnikit-progress {
|
|
121
|
+
background-color: #374151 !important;
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
/* Layout fixes */
|
|
126
|
+
.omnikit-billing-component .flex {
|
|
127
|
+
display: flex !important;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.omnikit-billing-component .inline-flex {
|
|
131
|
+
display: inline-flex !important;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.omnikit-billing-component .flex-col {
|
|
135
|
+
flex-direction: column !important;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.omnikit-billing-component .flex-1 {
|
|
139
|
+
flex: 1 1 0% !important;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.omnikit-billing-component .items-center {
|
|
143
|
+
align-items: center !important;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.omnikit-billing-component .items-start {
|
|
147
|
+
align-items: flex-start !important;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.omnikit-billing-component .justify-center {
|
|
151
|
+
justify-content: center !important;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.omnikit-billing-component .justify-between {
|
|
155
|
+
justify-content: space-between !important;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
/* Grid layout fixes */
|
|
159
|
+
.omnikit-billing-component .grid {
|
|
160
|
+
display: grid !important;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.omnikit-billing-component .gap-1 {
|
|
164
|
+
gap: 0.25rem !important;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.omnikit-billing-component .gap-2 {
|
|
168
|
+
gap: 0.5rem !important;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.omnikit-billing-component .gap-3 {
|
|
172
|
+
gap: 0.75rem !important;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.omnikit-billing-component .gap-4 {
|
|
176
|
+
gap: 1rem !important;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.omnikit-billing-component .gap-6 {
|
|
180
|
+
gap: 1.5rem !important;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
/* Space utilities */
|
|
184
|
+
.omnikit-billing-component .space-y-1 > * + * {
|
|
185
|
+
margin-top: 0.25rem !important;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.omnikit-billing-component .space-y-2 > * + * {
|
|
189
|
+
margin-top: 0.5rem !important;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.omnikit-billing-component .space-y-3 > * + * {
|
|
193
|
+
margin-top: 0.75rem !important;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
.omnikit-billing-component .space-y-4 > * + * {
|
|
197
|
+
margin-top: 1rem !important;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
.omnikit-billing-component .space-x-2 > * + * {
|
|
201
|
+
margin-left: 0.5rem !important;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.omnikit-billing-component .space-x-4 > * + * {
|
|
205
|
+
margin-left: 1rem !important;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
/* Responsive grid */
|
|
209
|
+
@media (min-width: 768px) {
|
|
210
|
+
.omnikit-billing-component .md\:grid-cols-2 {
|
|
211
|
+
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
.omnikit-billing-component .md\:grid-cols-3 {
|
|
215
|
+
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
@media (min-width: 1024px) {
|
|
220
|
+
.omnikit-billing-component .lg\:grid-cols-3 {
|
|
221
|
+
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
/* Tab styles */
|
|
226
|
+
.omnikit-billing-component [data-slot="tabs"] {
|
|
227
|
+
display: flex !important;
|
|
228
|
+
flex-direction: column !important;
|
|
229
|
+
gap: 0.5rem !important;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.omnikit-billing-component [data-slot="tabs-list"] {
|
|
233
|
+
display: inline-flex !important;
|
|
234
|
+
align-items: center !important;
|
|
235
|
+
justify-content: center !important;
|
|
236
|
+
border-radius: 0.375rem !important;
|
|
237
|
+
background-color: rgba(255, 255, 255, 0.05) !important;
|
|
238
|
+
padding: 0.25rem !important;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.omnikit-billing-component [data-slot="tabs-trigger"] {
|
|
242
|
+
padding: 0.375rem 0.75rem !important;
|
|
243
|
+
font-size: 0.875rem !important;
|
|
244
|
+
font-weight: 500 !important;
|
|
245
|
+
color: rgba(255, 255, 255, 0.6) !important;
|
|
246
|
+
transition: all 0.2s !important;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.omnikit-billing-component [data-slot="tabs-trigger"][data-state="active"] {
|
|
250
|
+
background-color: rgba(255, 255, 255, 0.1) !important;
|
|
251
|
+
color: white !important;
|
|
252
|
+
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
/* Section background override */
|
|
256
|
+
.omnikit-billing-component > div {
|
|
257
|
+
background-color: transparent !important;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
/* Button styles */
|
|
261
|
+
.omnikit-billing-component button {
|
|
262
|
+
font-weight: 500 !important;
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
.omnikit-billing-component button[data-variant="secondary"],
|
|
266
|
+
.omnikit-billing-component .bg-secondary {
|
|
267
|
+
background-color: rgba(255, 255, 255, 0.1) !important;
|
|
268
|
+
color: #f9fafb !important;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
.omnikit-billing-component button[data-variant="secondary"]:hover,
|
|
272
|
+
.omnikit-billing-component .bg-secondary:hover {
|
|
273
|
+
background-color: rgba(255, 255, 255, 0.15) !important;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
/* Badge styles */
|
|
277
|
+
.omnikit-billing-component [data-slot="badge"] {
|
|
278
|
+
background-color: rgba(255, 255, 255, 0.1) !important;
|
|
279
|
+
color: #f9fafb !important;
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
/* Import base Tailwind styles */
|
|
283
|
+
@import "tailwindcss";
|
|
284
|
+
|
|
285
|
+
/* Component-specific overrides that need higher specificity */
|
|
286
|
+
.omnikit-billing-component .shadow-xs {
|
|
287
|
+
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
.omnikit-billing-component .shadow-sm {
|
|
291
|
+
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
.omnikit-billing-component .shadow-md {
|
|
295
|
+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
.omnikit-billing-component .rounded-xs {
|
|
299
|
+
border-radius: 0.125rem !important;
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
.omnikit-billing-component .rounded-sm {
|
|
303
|
+
border-radius: 0.25rem !important;
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
.omnikit-billing-component .rounded-md {
|
|
307
|
+
border-radius: 0.375rem !important;
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
.omnikit-billing-component .rounded-lg {
|
|
311
|
+
border-radius: 0.5rem !important;
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
.omnikit-billing-component .rounded-xl {
|
|
315
|
+
border-radius: 0.75rem !important;
|
|
316
|
+
}
|