@omnibase/shadcn 0.1.1 → 0.2.0
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/dist/index.cjs +258 -158
- package/dist/index.js +243 -143
- package/package.json +4 -4
package/dist/index.js
CHANGED
|
@@ -166,8 +166,105 @@ function Label({
|
|
|
166
166
|
);
|
|
167
167
|
}
|
|
168
168
|
|
|
169
|
+
// src/components/ui/messages.tsx
|
|
170
|
+
import * as React6 from "react";
|
|
171
|
+
|
|
172
|
+
// src/components/ui/alert.tsx
|
|
173
|
+
import * as React5 from "react";
|
|
174
|
+
import { cva as cva2 } from "class-variance-authority";
|
|
175
|
+
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
176
|
+
var alertVariants = cva2(
|
|
177
|
+
"relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
|
|
178
|
+
{
|
|
179
|
+
variants: {
|
|
180
|
+
variant: {
|
|
181
|
+
default: "bg-background text-foreground",
|
|
182
|
+
destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
|
|
183
|
+
warning: "border-yellow-500/50 text-yellow-700 bg-yellow-50 dark:border-yellow-500 dark:text-yellow-200 dark:bg-yellow-950/20 [&>svg]:text-yellow-600 dark:[&>svg]:text-yellow-200",
|
|
184
|
+
success: "border-green-500/50 text-green-700 bg-green-50 dark:border-green-500 dark:text-green-200 dark:bg-green-950/20 [&>svg]:text-green-600 dark:[&>svg]:text-green-200",
|
|
185
|
+
info: "border-blue-500/50 text-blue-700 bg-blue-50 dark:border-blue-500 dark:text-blue-200 dark:bg-blue-950/20 [&>svg]:text-blue-600 dark:[&>svg]:text-blue-200"
|
|
186
|
+
}
|
|
187
|
+
},
|
|
188
|
+
defaultVariants: {
|
|
189
|
+
variant: "default"
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
);
|
|
193
|
+
var Alert = React5.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx5(
|
|
194
|
+
"div",
|
|
195
|
+
{
|
|
196
|
+
ref,
|
|
197
|
+
role: "alert",
|
|
198
|
+
className: cn(alertVariants({ variant }), className),
|
|
199
|
+
...props
|
|
200
|
+
}
|
|
201
|
+
));
|
|
202
|
+
Alert.displayName = "Alert";
|
|
203
|
+
var AlertTitle = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
|
|
204
|
+
"h5",
|
|
205
|
+
{
|
|
206
|
+
ref,
|
|
207
|
+
className: cn("mb-1 font-medium leading-none tracking-tight", className),
|
|
208
|
+
...props
|
|
209
|
+
}
|
|
210
|
+
));
|
|
211
|
+
AlertTitle.displayName = "AlertTitle";
|
|
212
|
+
var AlertDescription = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
|
|
213
|
+
"div",
|
|
214
|
+
{
|
|
215
|
+
ref,
|
|
216
|
+
className: cn("text-sm [&_p]:leading-relaxed", className),
|
|
217
|
+
...props
|
|
218
|
+
}
|
|
219
|
+
));
|
|
220
|
+
AlertDescription.displayName = "AlertDescription";
|
|
221
|
+
|
|
222
|
+
// src/components/ui/messages.tsx
|
|
223
|
+
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
224
|
+
var getMessageVariant = (type) => {
|
|
225
|
+
switch (type) {
|
|
226
|
+
case "error":
|
|
227
|
+
return "destructive";
|
|
228
|
+
case "success":
|
|
229
|
+
return "success";
|
|
230
|
+
case "info":
|
|
231
|
+
return "info";
|
|
232
|
+
case "11184809":
|
|
233
|
+
return "warning";
|
|
234
|
+
default:
|
|
235
|
+
return "default";
|
|
236
|
+
}
|
|
237
|
+
};
|
|
238
|
+
var Messages = React6.forwardRef(
|
|
239
|
+
({ flow, className, ...props }, ref) => {
|
|
240
|
+
if (!flow?.ui) return null;
|
|
241
|
+
const allMessages = [];
|
|
242
|
+
if (flow.ui.messages) {
|
|
243
|
+
allMessages.push(...flow.ui.messages);
|
|
244
|
+
}
|
|
245
|
+
if (flow.ui.nodes) {
|
|
246
|
+
flow.ui.nodes.forEach((node) => {
|
|
247
|
+
if (node.messages) {
|
|
248
|
+
allMessages.push(...node.messages);
|
|
249
|
+
}
|
|
250
|
+
});
|
|
251
|
+
}
|
|
252
|
+
if (allMessages.length === 0) return null;
|
|
253
|
+
return /* @__PURE__ */ jsx6(
|
|
254
|
+
"div",
|
|
255
|
+
{
|
|
256
|
+
ref,
|
|
257
|
+
className: cn("w-full max-w-md mx-auto space-y-2 mb-4", className),
|
|
258
|
+
...props,
|
|
259
|
+
children: allMessages.map((message) => /* @__PURE__ */ jsx6(Alert, { variant: getMessageVariant(message.type), children: /* @__PURE__ */ jsx6(AlertDescription, { children: message.text }) }, message.id))
|
|
260
|
+
}
|
|
261
|
+
);
|
|
262
|
+
}
|
|
263
|
+
);
|
|
264
|
+
Messages.displayName = "Messages";
|
|
265
|
+
|
|
169
266
|
// src/form/index.tsx
|
|
170
|
-
import { jsx as
|
|
267
|
+
import { jsx as jsx7, jsxs } from "react/jsx-runtime";
|
|
171
268
|
function isUiNodeInputAttributes(attributes) {
|
|
172
269
|
return attributes && typeof attributes === "object" && "name" in attributes && "type" in attributes;
|
|
173
270
|
}
|
|
@@ -175,92 +272,95 @@ function CustomFlowForm({ flow, Header }) {
|
|
|
175
272
|
const hasSubmitButton = flow.ui.nodes.some(
|
|
176
273
|
(node) => isUiNodeInputAttributes(node.attributes) && node.attributes.type === "submit"
|
|
177
274
|
);
|
|
178
|
-
return /* @__PURE__ */
|
|
179
|
-
|
|
180
|
-
/* @__PURE__ */
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
275
|
+
return /* @__PURE__ */ jsxs("div", { children: [
|
|
276
|
+
/* @__PURE__ */ jsx7(Messages, { flow }),
|
|
277
|
+
/* @__PURE__ */ jsx7(Card, { className: "w-full max-w-md mx-auto", children: /* @__PURE__ */ jsxs("form", { action: flow.ui.action, method: flow.ui.method, children: [
|
|
278
|
+
Header && /* @__PURE__ */ jsx7(CardHeader, { children: /* @__PURE__ */ jsx7(CardTitle, { className: "text-center pb-4", children: Header }) }),
|
|
279
|
+
/* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
|
|
280
|
+
flow.ui.nodes.map((node) => {
|
|
281
|
+
if (isUiNodeInputAttributes(node.attributes)) {
|
|
282
|
+
const isSubmitButton = node.attributes.type === "submit";
|
|
283
|
+
const isHiddenField = node.attributes.type === "hidden";
|
|
284
|
+
const isVisibleField = !isHiddenField && !isSubmitButton;
|
|
285
|
+
if (isHiddenField) {
|
|
286
|
+
return /* @__PURE__ */ jsx7(
|
|
287
|
+
"input",
|
|
288
|
+
{
|
|
289
|
+
name: node.attributes.name,
|
|
290
|
+
type: "hidden",
|
|
291
|
+
value: node.attributes.value || "",
|
|
292
|
+
readOnly: true
|
|
293
|
+
},
|
|
294
|
+
node.attributes.name
|
|
295
|
+
);
|
|
296
|
+
}
|
|
297
|
+
if (isSubmitButton) {
|
|
298
|
+
return /* @__PURE__ */ jsx7(
|
|
299
|
+
Button,
|
|
300
|
+
{
|
|
301
|
+
type: "submit",
|
|
302
|
+
name: node.attributes.name,
|
|
303
|
+
value: node.attributes.value || "",
|
|
304
|
+
className: "w-full mt-2",
|
|
305
|
+
children: node.meta.label?.text || node.attributes.value || "Submit"
|
|
306
|
+
},
|
|
307
|
+
node.attributes.name
|
|
308
|
+
);
|
|
309
|
+
}
|
|
310
|
+
if (isVisibleField && [
|
|
311
|
+
"default",
|
|
312
|
+
"password",
|
|
313
|
+
"code",
|
|
314
|
+
"webauthn",
|
|
315
|
+
"passkey",
|
|
316
|
+
"totp",
|
|
317
|
+
"lookup_secret"
|
|
318
|
+
].includes(node.group)) {
|
|
319
|
+
return /* @__PURE__ */ jsxs(
|
|
320
|
+
"div",
|
|
321
|
+
{
|
|
322
|
+
className: "space-y-2",
|
|
323
|
+
children: [
|
|
324
|
+
/* @__PURE__ */ jsxs(Label, { htmlFor: node.attributes.name, children: [
|
|
325
|
+
node.meta.label?.text,
|
|
326
|
+
node.attributes.required && /* @__PURE__ */ jsx7("span", { className: "text-destructive ml-1", children: "*" })
|
|
327
|
+
] }),
|
|
328
|
+
/* @__PURE__ */ jsx7(
|
|
329
|
+
Input,
|
|
330
|
+
{
|
|
331
|
+
id: node.attributes.name,
|
|
332
|
+
name: node.attributes.name,
|
|
333
|
+
type: node.attributes.type,
|
|
334
|
+
defaultValue: node.attributes.value || "",
|
|
335
|
+
required: node.attributes.required,
|
|
336
|
+
placeholder: `Enter your ${node.meta.label?.text?.toLowerCase() || node.attributes.name}`
|
|
337
|
+
}
|
|
338
|
+
)
|
|
339
|
+
]
|
|
340
|
+
},
|
|
341
|
+
node.meta.label?.id || node.attributes.name
|
|
342
|
+
);
|
|
343
|
+
}
|
|
244
344
|
}
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
] })
|
|
250
|
-
] })
|
|
345
|
+
return null;
|
|
346
|
+
}),
|
|
347
|
+
!hasSubmitButton && /* @__PURE__ */ jsx7(Button, { type: "submit", className: "w-full", children: "Submit" })
|
|
348
|
+
] })
|
|
349
|
+
] }) })
|
|
350
|
+
] });
|
|
251
351
|
}
|
|
252
352
|
|
|
253
353
|
// src/tenant-switcher/index.tsx
|
|
254
|
-
import * as
|
|
354
|
+
import * as React8 from "react";
|
|
255
355
|
|
|
256
356
|
// src/components/ui/select.tsx
|
|
257
|
-
import * as
|
|
357
|
+
import * as React7 from "react";
|
|
258
358
|
import * as SelectPrimitive from "@radix-ui/react-select";
|
|
259
359
|
import { Check, ChevronDown, ChevronUp } from "lucide-react";
|
|
260
|
-
import { jsx as
|
|
360
|
+
import { jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
261
361
|
var Select = SelectPrimitive.Root;
|
|
262
362
|
var SelectValue = SelectPrimitive.Value;
|
|
263
|
-
var SelectTrigger =
|
|
363
|
+
var SelectTrigger = React7.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs2(
|
|
264
364
|
SelectPrimitive.Trigger,
|
|
265
365
|
{
|
|
266
366
|
ref,
|
|
@@ -271,12 +371,12 @@ var SelectTrigger = React5.forwardRef(({ className, children, ...props }, ref) =
|
|
|
271
371
|
...props,
|
|
272
372
|
children: [
|
|
273
373
|
children,
|
|
274
|
-
/* @__PURE__ */
|
|
374
|
+
/* @__PURE__ */ jsx8(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx8(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
|
|
275
375
|
]
|
|
276
376
|
}
|
|
277
377
|
));
|
|
278
378
|
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
|
|
279
|
-
var SelectScrollUpButton =
|
|
379
|
+
var SelectScrollUpButton = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
|
|
280
380
|
SelectPrimitive.ScrollUpButton,
|
|
281
381
|
{
|
|
282
382
|
ref,
|
|
@@ -285,11 +385,11 @@ var SelectScrollUpButton = React5.forwardRef(({ className, ...props }, ref) => /
|
|
|
285
385
|
className
|
|
286
386
|
),
|
|
287
387
|
...props,
|
|
288
|
-
children: /* @__PURE__ */
|
|
388
|
+
children: /* @__PURE__ */ jsx8(ChevronUp, { className: "h-4 w-4" })
|
|
289
389
|
}
|
|
290
390
|
));
|
|
291
391
|
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
|
|
292
|
-
var SelectScrollDownButton =
|
|
392
|
+
var SelectScrollDownButton = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
|
|
293
393
|
SelectPrimitive.ScrollDownButton,
|
|
294
394
|
{
|
|
295
395
|
ref,
|
|
@@ -298,11 +398,11 @@ var SelectScrollDownButton = React5.forwardRef(({ className, ...props }, ref) =>
|
|
|
298
398
|
className
|
|
299
399
|
),
|
|
300
400
|
...props,
|
|
301
|
-
children: /* @__PURE__ */
|
|
401
|
+
children: /* @__PURE__ */ jsx8(ChevronDown, { className: "h-4 w-4" })
|
|
302
402
|
}
|
|
303
403
|
));
|
|
304
404
|
SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
|
|
305
|
-
var SelectContent =
|
|
405
|
+
var SelectContent = React7.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx8(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs2(
|
|
306
406
|
SelectPrimitive.Content,
|
|
307
407
|
{
|
|
308
408
|
ref,
|
|
@@ -314,8 +414,8 @@ var SelectContent = React5.forwardRef(({ className, children, position = "popper
|
|
|
314
414
|
position,
|
|
315
415
|
...props,
|
|
316
416
|
children: [
|
|
317
|
-
/* @__PURE__ */
|
|
318
|
-
/* @__PURE__ */
|
|
417
|
+
/* @__PURE__ */ jsx8(SelectScrollUpButton, {}),
|
|
418
|
+
/* @__PURE__ */ jsx8(
|
|
319
419
|
SelectPrimitive.Viewport,
|
|
320
420
|
{
|
|
321
421
|
className: cn(
|
|
@@ -325,12 +425,12 @@ var SelectContent = React5.forwardRef(({ className, children, position = "popper
|
|
|
325
425
|
children
|
|
326
426
|
}
|
|
327
427
|
),
|
|
328
|
-
/* @__PURE__ */
|
|
428
|
+
/* @__PURE__ */ jsx8(SelectScrollDownButton, {})
|
|
329
429
|
]
|
|
330
430
|
}
|
|
331
431
|
) }));
|
|
332
432
|
SelectContent.displayName = SelectPrimitive.Content.displayName;
|
|
333
|
-
var SelectLabel =
|
|
433
|
+
var SelectLabel = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
|
|
334
434
|
SelectPrimitive.Label,
|
|
335
435
|
{
|
|
336
436
|
ref,
|
|
@@ -339,7 +439,7 @@ var SelectLabel = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE
|
|
|
339
439
|
}
|
|
340
440
|
));
|
|
341
441
|
SelectLabel.displayName = SelectPrimitive.Label.displayName;
|
|
342
|
-
var SelectItem =
|
|
442
|
+
var SelectItem = React7.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs2(
|
|
343
443
|
SelectPrimitive.Item,
|
|
344
444
|
{
|
|
345
445
|
ref,
|
|
@@ -349,13 +449,13 @@ var SelectItem = React5.forwardRef(({ className, children, ...props }, ref) => /
|
|
|
349
449
|
),
|
|
350
450
|
...props,
|
|
351
451
|
children: [
|
|
352
|
-
/* @__PURE__ */
|
|
353
|
-
/* @__PURE__ */
|
|
452
|
+
/* @__PURE__ */ jsx8("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx8(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx8(Check, { className: "h-4 w-4" }) }) }),
|
|
453
|
+
/* @__PURE__ */ jsx8(SelectPrimitive.ItemText, { children })
|
|
354
454
|
]
|
|
355
455
|
}
|
|
356
456
|
));
|
|
357
457
|
SelectItem.displayName = SelectPrimitive.Item.displayName;
|
|
358
|
-
var SelectSeparator =
|
|
458
|
+
var SelectSeparator = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
|
|
359
459
|
SelectPrimitive.Separator,
|
|
360
460
|
{
|
|
361
461
|
ref,
|
|
@@ -366,7 +466,7 @@ var SelectSeparator = React5.forwardRef(({ className, ...props }, ref) => /* @__
|
|
|
366
466
|
SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
|
|
367
467
|
|
|
368
468
|
// src/tenant-switcher/index.tsx
|
|
369
|
-
import { jsx as
|
|
469
|
+
import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
370
470
|
function SwitchActiveTenant({
|
|
371
471
|
tenants,
|
|
372
472
|
currentTenantId,
|
|
@@ -375,7 +475,7 @@ function SwitchActiveTenant({
|
|
|
375
475
|
className,
|
|
376
476
|
onTenantChange
|
|
377
477
|
}) {
|
|
378
|
-
const [isLoading, setIsLoading] =
|
|
478
|
+
const [isLoading, setIsLoading] = React8.useState(false);
|
|
379
479
|
const handleTenantChange = async (tenantId) => {
|
|
380
480
|
if (tenantId === currentTenantId) return;
|
|
381
481
|
setIsLoading(true);
|
|
@@ -400,17 +500,17 @@ function SwitchActiveTenant({
|
|
|
400
500
|
onValueChange: handleTenantChange,
|
|
401
501
|
disabled: isLoading,
|
|
402
502
|
children: [
|
|
403
|
-
/* @__PURE__ */
|
|
404
|
-
/* @__PURE__ */
|
|
503
|
+
/* @__PURE__ */ jsx9(SelectTrigger, { className: cn("max-w-64", className), children: /* @__PURE__ */ jsx9(SelectValue, { placeholder, children: currentTenant ? currentTenant.name : placeholder }) }),
|
|
504
|
+
/* @__PURE__ */ jsx9(SelectContent, { children: tenants.map((tenant) => /* @__PURE__ */ jsx9(SelectItem, { value: tenant.id, children: tenant.name }, tenant.id)) })
|
|
405
505
|
]
|
|
406
506
|
}
|
|
407
507
|
);
|
|
408
508
|
}
|
|
409
509
|
|
|
410
510
|
// src/pricing-table/index.tsx
|
|
411
|
-
import * as
|
|
511
|
+
import * as React9 from "react";
|
|
412
512
|
import { Check as Check2, Star, ChevronLeft, ChevronRight } from "lucide-react";
|
|
413
|
-
import { Fragment, jsx as
|
|
513
|
+
import { Fragment, jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
414
514
|
var getCurrencySymbol = (currency) => {
|
|
415
515
|
const symbols = {
|
|
416
516
|
USD: "$",
|
|
@@ -459,8 +559,8 @@ function PricingCard({
|
|
|
459
559
|
isHighlighted ? "relative" : ""
|
|
460
560
|
),
|
|
461
561
|
children: [
|
|
462
|
-
/* @__PURE__ */
|
|
463
|
-
ui.badge === "Most Popular" && /* @__PURE__ */
|
|
562
|
+
/* @__PURE__ */ jsx10("div", { className: "h-4 flex-shrink-0 relative", children: ui.badge && /* @__PURE__ */ jsx10("div", { className: "absolute top-0 left-1/2 transform -translate-x-1/2 z-10", children: /* @__PURE__ */ jsxs4("div", { className: "bg-primary text-primary-foreground px-3 py-1 rounded-full text-sm font-medium flex items-center gap-1 whitespace-nowrap shadow-md", children: [
|
|
563
|
+
ui.badge === "Most Popular" && /* @__PURE__ */ jsx10(Star, { className: "w-3 h-3" }),
|
|
464
564
|
ui.badge
|
|
465
565
|
] }) }) }),
|
|
466
566
|
/* @__PURE__ */ jsxs4(
|
|
@@ -473,35 +573,35 @@ function PricingCard({
|
|
|
473
573
|
),
|
|
474
574
|
children: [
|
|
475
575
|
/* @__PURE__ */ jsxs4(CardHeader, { className: "text-center", children: [
|
|
476
|
-
/* @__PURE__ */
|
|
477
|
-
ui.tagline && /* @__PURE__ */
|
|
576
|
+
/* @__PURE__ */ jsx10(CardTitle, { className: "text-xl font-bold", children: ui.display_name || product.name }),
|
|
577
|
+
ui.tagline && /* @__PURE__ */ jsx10(CardDescription, { className: "text-base", children: ui.tagline })
|
|
478
578
|
] }),
|
|
479
579
|
/* @__PURE__ */ jsxs4(CardContent, { className: "flex-1 space-y-6", children: [
|
|
480
580
|
/* @__PURE__ */ jsxs4("div", { className: "text-center", children: [
|
|
481
|
-
/* @__PURE__ */
|
|
482
|
-
/* @__PURE__ */
|
|
581
|
+
/* @__PURE__ */ jsx10("div", { className: "text-3xl font-bold", children: formatPrice(displayedPrice) }),
|
|
582
|
+
/* @__PURE__ */ jsx10("div", { className: "text-sm text-muted-foreground", children: formatBillingPeriod(displayedPrice) })
|
|
483
583
|
] }),
|
|
484
584
|
(ui.features && ui.features.length > 0 || displayedPrice.ui?.features?.length > 0 || displayedPrice.ui?.limits?.length > 0) && /* @__PURE__ */ jsxs4("div", { className: "space-y-4", children: [
|
|
485
585
|
ui.features && ui.features.length > 0 && /* @__PURE__ */ jsxs4("div", { className: "space-y-2", children: [
|
|
486
|
-
/* @__PURE__ */
|
|
487
|
-
/* @__PURE__ */
|
|
488
|
-
/* @__PURE__ */
|
|
489
|
-
/* @__PURE__ */
|
|
586
|
+
/* @__PURE__ */ jsx10("h4", { className: "font-medium text-sm text-muted-foreground uppercase tracking-wide", children: "Features" }),
|
|
587
|
+
/* @__PURE__ */ jsx10("ul", { className: "space-y-2", children: ui.features.map((feature, index) => /* @__PURE__ */ jsxs4("li", { className: "flex items-start gap-2", children: [
|
|
588
|
+
/* @__PURE__ */ jsx10(Check2, { className: "w-4 h-4 text-green-500 mt-0.5 flex-shrink-0" }),
|
|
589
|
+
/* @__PURE__ */ jsx10("span", { className: "text-sm", children: feature })
|
|
490
590
|
] }, index)) })
|
|
491
591
|
] }),
|
|
492
592
|
displayedPrice.ui?.features && displayedPrice.ui.features.length > 0 && /* @__PURE__ */ jsxs4("div", { className: "space-y-2", children: [
|
|
493
|
-
/* @__PURE__ */
|
|
494
|
-
/* @__PURE__ */
|
|
593
|
+
/* @__PURE__ */ jsx10("h4", { className: "font-medium text-sm text-muted-foreground uppercase tracking-wide", children: "This Plan" }),
|
|
594
|
+
/* @__PURE__ */ jsx10("ul", { className: "space-y-2", children: displayedPrice.ui.features.map(
|
|
495
595
|
(feature, index) => /* @__PURE__ */ jsxs4("li", { className: "flex items-start gap-2", children: [
|
|
496
|
-
/* @__PURE__ */
|
|
497
|
-
/* @__PURE__ */
|
|
596
|
+
/* @__PURE__ */ jsx10(Check2, { className: "w-4 h-4 text-blue-500 mt-0.5 flex-shrink-0" }),
|
|
597
|
+
/* @__PURE__ */ jsx10("span", { className: "text-sm", children: feature })
|
|
498
598
|
] }, index)
|
|
499
599
|
) })
|
|
500
600
|
] }),
|
|
501
601
|
displayedPrice.ui?.limits && displayedPrice.ui.limits.length > 0 && /* @__PURE__ */ jsxs4("div", { className: "space-y-2", children: [
|
|
502
|
-
/* @__PURE__ */
|
|
503
|
-
/* @__PURE__ */
|
|
504
|
-
(limit, index) => /* @__PURE__ */
|
|
602
|
+
/* @__PURE__ */ jsx10("h4", { className: "font-medium text-sm text-muted-foreground uppercase tracking-wide", children: "Usage Limits" }),
|
|
603
|
+
/* @__PURE__ */ jsx10("ul", { className: "space-y-1", children: displayedPrice.ui.limits.map(
|
|
604
|
+
(limit, index) => /* @__PURE__ */ jsx10(
|
|
505
605
|
"li",
|
|
506
606
|
{
|
|
507
607
|
className: "text-sm text-muted-foreground",
|
|
@@ -513,7 +613,7 @@ function PricingCard({
|
|
|
513
613
|
] })
|
|
514
614
|
] })
|
|
515
615
|
] }),
|
|
516
|
-
/* @__PURE__ */
|
|
616
|
+
/* @__PURE__ */ jsx10(CardFooter, { children: /* @__PURE__ */ jsx10(
|
|
517
617
|
Button,
|
|
518
618
|
{
|
|
519
619
|
className: "w-full",
|
|
@@ -540,15 +640,15 @@ function PricingTable({
|
|
|
540
640
|
showPricingToggle = false,
|
|
541
641
|
defaultInterval = "month"
|
|
542
642
|
}) {
|
|
543
|
-
const [selectedInterval, setSelectedInterval] =
|
|
544
|
-
const [carouselIndex, setCarouselIndex] =
|
|
545
|
-
const sortedProducts =
|
|
643
|
+
const [selectedInterval, setSelectedInterval] = React9.useState(defaultInterval);
|
|
644
|
+
const [carouselIndex, setCarouselIndex] = React9.useState(0);
|
|
645
|
+
const sortedProducts = React9.useMemo(
|
|
546
646
|
() => [...products].sort(
|
|
547
647
|
(a, b) => (a.ui?.sort_order ?? 999) - (b.ui?.sort_order ?? 999)
|
|
548
648
|
),
|
|
549
649
|
[products]
|
|
550
650
|
);
|
|
551
|
-
const hasMultipleIntervals =
|
|
651
|
+
const hasMultipleIntervals = React9.useMemo(
|
|
552
652
|
() => products.some(
|
|
553
653
|
(p) => new Set(p.prices.map((price) => price.interval)).size > 1
|
|
554
654
|
),
|
|
@@ -557,7 +657,7 @@ function PricingTable({
|
|
|
557
657
|
const getDisplayedPrice = (product) => product.prices.find((p) => p.interval === selectedInterval) || product.prices[0];
|
|
558
658
|
const renderCard = (product) => {
|
|
559
659
|
const displayedPrice = getDisplayedPrice(product);
|
|
560
|
-
return /* @__PURE__ */
|
|
660
|
+
return /* @__PURE__ */ jsx10(
|
|
561
661
|
PricingCard,
|
|
562
662
|
{
|
|
563
663
|
product,
|
|
@@ -568,7 +668,7 @@ function PricingTable({
|
|
|
568
668
|
);
|
|
569
669
|
};
|
|
570
670
|
const desktopCarousel = /* @__PURE__ */ jsxs4("div", { className: "relative max-w-7xl mx-auto", children: [
|
|
571
|
-
/* @__PURE__ */
|
|
671
|
+
/* @__PURE__ */ jsx10(
|
|
572
672
|
Button,
|
|
573
673
|
{
|
|
574
674
|
variant: "ghost",
|
|
@@ -576,15 +676,15 @@ function PricingTable({
|
|
|
576
676
|
className: "absolute left-0 top-1/2 transform -translate-y-1/2 -translate-x-4 z-10 bg-white shadow-lg border hover:bg-gray-50 disabled:opacity-50",
|
|
577
677
|
onClick: () => setCarouselIndex(Math.max(0, carouselIndex - 1)),
|
|
578
678
|
disabled: carouselIndex === 0,
|
|
579
|
-
children: /* @__PURE__ */
|
|
679
|
+
children: /* @__PURE__ */ jsx10(ChevronLeft, { className: "w-4 h-4" })
|
|
580
680
|
}
|
|
581
681
|
),
|
|
582
|
-
/* @__PURE__ */
|
|
682
|
+
/* @__PURE__ */ jsx10(
|
|
583
683
|
"div",
|
|
584
684
|
{
|
|
585
685
|
className: "overflow-hidden mx-auto",
|
|
586
686
|
style: { width: `${3 * CARD_WIDTH + 2 * GAP}px` },
|
|
587
|
-
children: /* @__PURE__ */
|
|
687
|
+
children: /* @__PURE__ */ jsx10(
|
|
588
688
|
"div",
|
|
589
689
|
{
|
|
590
690
|
className: "flex items-stretch transition-transform duration-300 ease-in-out",
|
|
@@ -592,7 +692,7 @@ function PricingTable({
|
|
|
592
692
|
transform: `translateX(-${carouselIndex * (CARD_WIDTH + GAP)}px)`,
|
|
593
693
|
gap: `${GAP}px`
|
|
594
694
|
},
|
|
595
|
-
children: sortedProducts.map((p) => /* @__PURE__ */
|
|
695
|
+
children: sortedProducts.map((p) => /* @__PURE__ */ jsx10(
|
|
596
696
|
"div",
|
|
597
697
|
{
|
|
598
698
|
style: { width: `${CARD_WIDTH}px` },
|
|
@@ -605,7 +705,7 @@ function PricingTable({
|
|
|
605
705
|
)
|
|
606
706
|
}
|
|
607
707
|
),
|
|
608
|
-
/* @__PURE__ */
|
|
708
|
+
/* @__PURE__ */ jsx10(
|
|
609
709
|
Button,
|
|
610
710
|
{
|
|
611
711
|
variant: "ghost",
|
|
@@ -615,12 +715,12 @@ function PricingTable({
|
|
|
615
715
|
Math.min(sortedProducts.length - 3, carouselIndex + 1)
|
|
616
716
|
),
|
|
617
717
|
disabled: carouselIndex >= sortedProducts.length - 3,
|
|
618
|
-
children: /* @__PURE__ */
|
|
718
|
+
children: /* @__PURE__ */ jsx10(ChevronRight, { className: "w-4 h-4" })
|
|
619
719
|
}
|
|
620
720
|
),
|
|
621
|
-
/* @__PURE__ */
|
|
721
|
+
/* @__PURE__ */ jsx10("div", { className: "flex justify-center mt-6 space-x-2", children: Array.from(
|
|
622
722
|
{ length: Math.max(1, sortedProducts.length - 2) },
|
|
623
|
-
(_, i) => /* @__PURE__ */
|
|
723
|
+
(_, i) => /* @__PURE__ */ jsx10(
|
|
624
724
|
"button",
|
|
625
725
|
{
|
|
626
726
|
onClick: () => setCarouselIndex(i),
|
|
@@ -634,12 +734,12 @@ function PricingTable({
|
|
|
634
734
|
)
|
|
635
735
|
) })
|
|
636
736
|
] });
|
|
637
|
-
const staticLayout = /* @__PURE__ */
|
|
737
|
+
const staticLayout = /* @__PURE__ */ jsx10(
|
|
638
738
|
"div",
|
|
639
739
|
{
|
|
640
740
|
className: "flex flex-row items-stretch justify-center",
|
|
641
741
|
style: { gap: `${GAP}px` },
|
|
642
|
-
children: sortedProducts.map((p) => /* @__PURE__ */
|
|
742
|
+
children: sortedProducts.map((p) => /* @__PURE__ */ jsx10(
|
|
643
743
|
"div",
|
|
644
744
|
{
|
|
645
745
|
style: { width: `${CARD_WIDTH}px` },
|
|
@@ -651,8 +751,8 @@ function PricingTable({
|
|
|
651
751
|
}
|
|
652
752
|
);
|
|
653
753
|
return /* @__PURE__ */ jsxs4("div", { className: cn("w-full", className), children: [
|
|
654
|
-
showPricingToggle && hasMultipleIntervals && /* @__PURE__ */
|
|
655
|
-
/* @__PURE__ */
|
|
754
|
+
showPricingToggle && hasMultipleIntervals && /* @__PURE__ */ jsx10("div", { className: "flex justify-center mb-4", children: /* @__PURE__ */ jsxs4("div", { className: "flex bg-gray-100 p-1 rounded-lg", children: [
|
|
755
|
+
/* @__PURE__ */ jsx10(
|
|
656
756
|
Button,
|
|
657
757
|
{
|
|
658
758
|
variant: selectedInterval === "month" ? "default" : "ghost",
|
|
@@ -662,7 +762,7 @@ function PricingTable({
|
|
|
662
762
|
children: "Monthly"
|
|
663
763
|
}
|
|
664
764
|
),
|
|
665
|
-
/* @__PURE__ */
|
|
765
|
+
/* @__PURE__ */ jsx10(
|
|
666
766
|
Button,
|
|
667
767
|
{
|
|
668
768
|
variant: selectedInterval === "year" ? "default" : "ghost",
|
|
@@ -674,19 +774,19 @@ function PricingTable({
|
|
|
674
774
|
)
|
|
675
775
|
] }) }),
|
|
676
776
|
/* @__PURE__ */ jsxs4("div", { className: "lg:hidden relative", children: [
|
|
677
|
-
/* @__PURE__ */
|
|
777
|
+
/* @__PURE__ */ jsx10(
|
|
678
778
|
"div",
|
|
679
779
|
{
|
|
680
780
|
className: "overflow-hidden mx-auto",
|
|
681
781
|
style: { width: `${CARD_WIDTH}px` },
|
|
682
|
-
children: /* @__PURE__ */
|
|
782
|
+
children: /* @__PURE__ */ jsx10(
|
|
683
783
|
"div",
|
|
684
784
|
{
|
|
685
785
|
className: "flex transition-transform duration-300 ease-in-out items-stretch",
|
|
686
786
|
style: {
|
|
687
787
|
transform: `translateX(-${carouselIndex * CARD_WIDTH}px)`
|
|
688
788
|
},
|
|
689
|
-
children: sortedProducts.map((product) => /* @__PURE__ */
|
|
789
|
+
children: sortedProducts.map((product) => /* @__PURE__ */ jsx10(
|
|
690
790
|
"div",
|
|
691
791
|
{
|
|
692
792
|
className: "flex-shrink-0",
|
|
@@ -700,7 +800,7 @@ function PricingTable({
|
|
|
700
800
|
}
|
|
701
801
|
),
|
|
702
802
|
sortedProducts.length > 1 && /* @__PURE__ */ jsxs4(Fragment, { children: [
|
|
703
|
-
/* @__PURE__ */
|
|
803
|
+
/* @__PURE__ */ jsx10(
|
|
704
804
|
Button,
|
|
705
805
|
{
|
|
706
806
|
variant: "ghost",
|
|
@@ -708,10 +808,10 @@ function PricingTable({
|
|
|
708
808
|
className: "absolute left-0 top-1/2 -translate-y-1/2 -translate-x-2 z-10 bg-white shadow-lg border hover:bg-gray-50 disabled:opacity-50",
|
|
709
809
|
onClick: () => setCarouselIndex((prev) => Math.max(0, prev - 1)),
|
|
710
810
|
disabled: carouselIndex === 0,
|
|
711
|
-
children: /* @__PURE__ */
|
|
811
|
+
children: /* @__PURE__ */ jsx10(ChevronLeft, { className: "w-5 h-5" })
|
|
712
812
|
}
|
|
713
813
|
),
|
|
714
|
-
/* @__PURE__ */
|
|
814
|
+
/* @__PURE__ */ jsx10(
|
|
715
815
|
Button,
|
|
716
816
|
{
|
|
717
817
|
variant: "ghost",
|
|
@@ -721,10 +821,10 @@ function PricingTable({
|
|
|
721
821
|
(prev) => Math.min(sortedProducts.length - 1, prev + 1)
|
|
722
822
|
),
|
|
723
823
|
disabled: carouselIndex >= sortedProducts.length - 1,
|
|
724
|
-
children: /* @__PURE__ */
|
|
824
|
+
children: /* @__PURE__ */ jsx10(ChevronRight, { className: "w-5 h-5" })
|
|
725
825
|
}
|
|
726
826
|
),
|
|
727
|
-
/* @__PURE__ */
|
|
827
|
+
/* @__PURE__ */ jsx10("div", { className: "flex justify-center mt-6 space-x-2", children: Array.from({ length: sortedProducts.length }, (_, i) => /* @__PURE__ */ jsx10(
|
|
728
828
|
"button",
|
|
729
829
|
{
|
|
730
830
|
onClick: () => setCarouselIndex(i),
|
|
@@ -738,7 +838,7 @@ function PricingTable({
|
|
|
738
838
|
)) })
|
|
739
839
|
] })
|
|
740
840
|
] }),
|
|
741
|
-
/* @__PURE__ */
|
|
841
|
+
/* @__PURE__ */ jsx10("div", { className: "hidden lg:block", children: sortedProducts.length <= 3 ? staticLayout : desktopCarousel })
|
|
742
842
|
] });
|
|
743
843
|
}
|
|
744
844
|
export {
|