@omnibase/shadcn 0.1.2 → 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 +1 -1
package/dist/index.cjs
CHANGED
|
@@ -204,8 +204,105 @@ function Label({
|
|
|
204
204
|
);
|
|
205
205
|
}
|
|
206
206
|
|
|
207
|
-
// src/
|
|
207
|
+
// src/components/ui/messages.tsx
|
|
208
|
+
var React6 = __toESM(require("react"), 1);
|
|
209
|
+
|
|
210
|
+
// src/components/ui/alert.tsx
|
|
211
|
+
var React5 = __toESM(require("react"), 1);
|
|
212
|
+
var import_class_variance_authority2 = require("class-variance-authority");
|
|
208
213
|
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
214
|
+
var alertVariants = (0, import_class_variance_authority2.cva)(
|
|
215
|
+
"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",
|
|
216
|
+
{
|
|
217
|
+
variants: {
|
|
218
|
+
variant: {
|
|
219
|
+
default: "bg-background text-foreground",
|
|
220
|
+
destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
|
|
221
|
+
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",
|
|
222
|
+
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",
|
|
223
|
+
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"
|
|
224
|
+
}
|
|
225
|
+
},
|
|
226
|
+
defaultVariants: {
|
|
227
|
+
variant: "default"
|
|
228
|
+
}
|
|
229
|
+
}
|
|
230
|
+
);
|
|
231
|
+
var Alert = React5.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
232
|
+
"div",
|
|
233
|
+
{
|
|
234
|
+
ref,
|
|
235
|
+
role: "alert",
|
|
236
|
+
className: cn(alertVariants({ variant }), className),
|
|
237
|
+
...props
|
|
238
|
+
}
|
|
239
|
+
));
|
|
240
|
+
Alert.displayName = "Alert";
|
|
241
|
+
var AlertTitle = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
242
|
+
"h5",
|
|
243
|
+
{
|
|
244
|
+
ref,
|
|
245
|
+
className: cn("mb-1 font-medium leading-none tracking-tight", className),
|
|
246
|
+
...props
|
|
247
|
+
}
|
|
248
|
+
));
|
|
249
|
+
AlertTitle.displayName = "AlertTitle";
|
|
250
|
+
var AlertDescription = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
251
|
+
"div",
|
|
252
|
+
{
|
|
253
|
+
ref,
|
|
254
|
+
className: cn("text-sm [&_p]:leading-relaxed", className),
|
|
255
|
+
...props
|
|
256
|
+
}
|
|
257
|
+
));
|
|
258
|
+
AlertDescription.displayName = "AlertDescription";
|
|
259
|
+
|
|
260
|
+
// src/components/ui/messages.tsx
|
|
261
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
262
|
+
var getMessageVariant = (type) => {
|
|
263
|
+
switch (type) {
|
|
264
|
+
case "error":
|
|
265
|
+
return "destructive";
|
|
266
|
+
case "success":
|
|
267
|
+
return "success";
|
|
268
|
+
case "info":
|
|
269
|
+
return "info";
|
|
270
|
+
case "11184809":
|
|
271
|
+
return "warning";
|
|
272
|
+
default:
|
|
273
|
+
return "default";
|
|
274
|
+
}
|
|
275
|
+
};
|
|
276
|
+
var Messages = React6.forwardRef(
|
|
277
|
+
({ flow, className, ...props }, ref) => {
|
|
278
|
+
if (!flow?.ui) return null;
|
|
279
|
+
const allMessages = [];
|
|
280
|
+
if (flow.ui.messages) {
|
|
281
|
+
allMessages.push(...flow.ui.messages);
|
|
282
|
+
}
|
|
283
|
+
if (flow.ui.nodes) {
|
|
284
|
+
flow.ui.nodes.forEach((node) => {
|
|
285
|
+
if (node.messages) {
|
|
286
|
+
allMessages.push(...node.messages);
|
|
287
|
+
}
|
|
288
|
+
});
|
|
289
|
+
}
|
|
290
|
+
if (allMessages.length === 0) return null;
|
|
291
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
292
|
+
"div",
|
|
293
|
+
{
|
|
294
|
+
ref,
|
|
295
|
+
className: cn("w-full max-w-md mx-auto space-y-2 mb-4", className),
|
|
296
|
+
...props,
|
|
297
|
+
children: allMessages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Alert, { variant: getMessageVariant(message.type), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AlertDescription, { children: message.text }) }, message.id))
|
|
298
|
+
}
|
|
299
|
+
);
|
|
300
|
+
}
|
|
301
|
+
);
|
|
302
|
+
Messages.displayName = "Messages";
|
|
303
|
+
|
|
304
|
+
// src/form/index.tsx
|
|
305
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
209
306
|
function isUiNodeInputAttributes(attributes) {
|
|
210
307
|
return attributes && typeof attributes === "object" && "name" in attributes && "type" in attributes;
|
|
211
308
|
}
|
|
@@ -213,92 +310,95 @@ function CustomFlowForm({ flow, Header }) {
|
|
|
213
310
|
const hasSubmitButton = flow.ui.nodes.some(
|
|
214
311
|
(node) => isUiNodeInputAttributes(node.attributes) && node.attributes.type === "submit"
|
|
215
312
|
);
|
|
216
|
-
return /* @__PURE__ */ (0,
|
|
217
|
-
|
|
218
|
-
/* @__PURE__ */ (0,
|
|
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
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
313
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
|
|
314
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Messages, { flow }),
|
|
315
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Card, { className: "w-full max-w-md mx-auto", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("form", { action: flow.ui.action, method: flow.ui.method, children: [
|
|
316
|
+
Header && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardTitle, { className: "text-center pb-4", children: Header }) }),
|
|
317
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(CardContent, { className: "space-y-4", children: [
|
|
318
|
+
flow.ui.nodes.map((node) => {
|
|
319
|
+
if (isUiNodeInputAttributes(node.attributes)) {
|
|
320
|
+
const isSubmitButton = node.attributes.type === "submit";
|
|
321
|
+
const isHiddenField = node.attributes.type === "hidden";
|
|
322
|
+
const isVisibleField = !isHiddenField && !isSubmitButton;
|
|
323
|
+
if (isHiddenField) {
|
|
324
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
325
|
+
"input",
|
|
326
|
+
{
|
|
327
|
+
name: node.attributes.name,
|
|
328
|
+
type: "hidden",
|
|
329
|
+
value: node.attributes.value || "",
|
|
330
|
+
readOnly: true
|
|
331
|
+
},
|
|
332
|
+
node.attributes.name
|
|
333
|
+
);
|
|
334
|
+
}
|
|
335
|
+
if (isSubmitButton) {
|
|
336
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
337
|
+
Button,
|
|
338
|
+
{
|
|
339
|
+
type: "submit",
|
|
340
|
+
name: node.attributes.name,
|
|
341
|
+
value: node.attributes.value || "",
|
|
342
|
+
className: "w-full mt-2",
|
|
343
|
+
children: node.meta.label?.text || node.attributes.value || "Submit"
|
|
344
|
+
},
|
|
345
|
+
node.attributes.name
|
|
346
|
+
);
|
|
347
|
+
}
|
|
348
|
+
if (isVisibleField && [
|
|
349
|
+
"default",
|
|
350
|
+
"password",
|
|
351
|
+
"code",
|
|
352
|
+
"webauthn",
|
|
353
|
+
"passkey",
|
|
354
|
+
"totp",
|
|
355
|
+
"lookup_secret"
|
|
356
|
+
].includes(node.group)) {
|
|
357
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
358
|
+
"div",
|
|
359
|
+
{
|
|
360
|
+
className: "space-y-2",
|
|
361
|
+
children: [
|
|
362
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Label, { htmlFor: node.attributes.name, children: [
|
|
363
|
+
node.meta.label?.text,
|
|
364
|
+
node.attributes.required && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-destructive ml-1", children: "*" })
|
|
365
|
+
] }),
|
|
366
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
367
|
+
Input,
|
|
368
|
+
{
|
|
369
|
+
id: node.attributes.name,
|
|
370
|
+
name: node.attributes.name,
|
|
371
|
+
type: node.attributes.type,
|
|
372
|
+
defaultValue: node.attributes.value || "",
|
|
373
|
+
required: node.attributes.required,
|
|
374
|
+
placeholder: `Enter your ${node.meta.label?.text?.toLowerCase() || node.attributes.name}`
|
|
375
|
+
}
|
|
376
|
+
)
|
|
377
|
+
]
|
|
378
|
+
},
|
|
379
|
+
node.meta.label?.id || node.attributes.name
|
|
380
|
+
);
|
|
381
|
+
}
|
|
282
382
|
}
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
] })
|
|
288
|
-
] })
|
|
383
|
+
return null;
|
|
384
|
+
}),
|
|
385
|
+
!hasSubmitButton && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Button, { type: "submit", className: "w-full", children: "Submit" })
|
|
386
|
+
] })
|
|
387
|
+
] }) })
|
|
388
|
+
] });
|
|
289
389
|
}
|
|
290
390
|
|
|
291
391
|
// src/tenant-switcher/index.tsx
|
|
292
|
-
var
|
|
392
|
+
var React8 = __toESM(require("react"), 1);
|
|
293
393
|
|
|
294
394
|
// src/components/ui/select.tsx
|
|
295
|
-
var
|
|
395
|
+
var React7 = __toESM(require("react"), 1);
|
|
296
396
|
var SelectPrimitive = __toESM(require("@radix-ui/react-select"), 1);
|
|
297
397
|
var import_lucide_react = require("lucide-react");
|
|
298
|
-
var
|
|
398
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
299
399
|
var Select = SelectPrimitive.Root;
|
|
300
400
|
var SelectValue = SelectPrimitive.Value;
|
|
301
|
-
var SelectTrigger =
|
|
401
|
+
var SelectTrigger = React7.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
302
402
|
SelectPrimitive.Trigger,
|
|
303
403
|
{
|
|
304
404
|
ref,
|
|
@@ -309,12 +409,12 @@ var SelectTrigger = React5.forwardRef(({ className, children, ...props }, ref) =
|
|
|
309
409
|
...props,
|
|
310
410
|
children: [
|
|
311
411
|
children,
|
|
312
|
-
/* @__PURE__ */ (0,
|
|
412
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react.ChevronDown, { className: "h-4 w-4 opacity-50" }) })
|
|
313
413
|
]
|
|
314
414
|
}
|
|
315
415
|
));
|
|
316
416
|
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
|
|
317
|
-
var SelectScrollUpButton =
|
|
417
|
+
var SelectScrollUpButton = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
318
418
|
SelectPrimitive.ScrollUpButton,
|
|
319
419
|
{
|
|
320
420
|
ref,
|
|
@@ -323,11 +423,11 @@ var SelectScrollUpButton = React5.forwardRef(({ className, ...props }, ref) => /
|
|
|
323
423
|
className
|
|
324
424
|
),
|
|
325
425
|
...props,
|
|
326
|
-
children: /* @__PURE__ */ (0,
|
|
426
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react.ChevronUp, { className: "h-4 w-4" })
|
|
327
427
|
}
|
|
328
428
|
));
|
|
329
429
|
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
|
|
330
|
-
var SelectScrollDownButton =
|
|
430
|
+
var SelectScrollDownButton = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
331
431
|
SelectPrimitive.ScrollDownButton,
|
|
332
432
|
{
|
|
333
433
|
ref,
|
|
@@ -336,11 +436,11 @@ var SelectScrollDownButton = React5.forwardRef(({ className, ...props }, ref) =>
|
|
|
336
436
|
className
|
|
337
437
|
),
|
|
338
438
|
...props,
|
|
339
|
-
children: /* @__PURE__ */ (0,
|
|
439
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react.ChevronDown, { className: "h-4 w-4" })
|
|
340
440
|
}
|
|
341
441
|
));
|
|
342
442
|
SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
|
|
343
|
-
var SelectContent =
|
|
443
|
+
var SelectContent = React7.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
344
444
|
SelectPrimitive.Content,
|
|
345
445
|
{
|
|
346
446
|
ref,
|
|
@@ -352,8 +452,8 @@ var SelectContent = React5.forwardRef(({ className, children, position = "popper
|
|
|
352
452
|
position,
|
|
353
453
|
...props,
|
|
354
454
|
children: [
|
|
355
|
-
/* @__PURE__ */ (0,
|
|
356
|
-
/* @__PURE__ */ (0,
|
|
455
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectScrollUpButton, {}),
|
|
456
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
357
457
|
SelectPrimitive.Viewport,
|
|
358
458
|
{
|
|
359
459
|
className: cn(
|
|
@@ -363,12 +463,12 @@ var SelectContent = React5.forwardRef(({ className, children, position = "popper
|
|
|
363
463
|
children
|
|
364
464
|
}
|
|
365
465
|
),
|
|
366
|
-
/* @__PURE__ */ (0,
|
|
466
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectScrollDownButton, {})
|
|
367
467
|
]
|
|
368
468
|
}
|
|
369
469
|
) }));
|
|
370
470
|
SelectContent.displayName = SelectPrimitive.Content.displayName;
|
|
371
|
-
var SelectLabel =
|
|
471
|
+
var SelectLabel = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
372
472
|
SelectPrimitive.Label,
|
|
373
473
|
{
|
|
374
474
|
ref,
|
|
@@ -377,7 +477,7 @@ var SelectLabel = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE
|
|
|
377
477
|
}
|
|
378
478
|
));
|
|
379
479
|
SelectLabel.displayName = SelectPrimitive.Label.displayName;
|
|
380
|
-
var SelectItem =
|
|
480
|
+
var SelectItem = React7.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
381
481
|
SelectPrimitive.Item,
|
|
382
482
|
{
|
|
383
483
|
ref,
|
|
@@ -387,13 +487,13 @@ var SelectItem = React5.forwardRef(({ className, children, ...props }, ref) => /
|
|
|
387
487
|
),
|
|
388
488
|
...props,
|
|
389
489
|
children: [
|
|
390
|
-
/* @__PURE__ */ (0,
|
|
391
|
-
/* @__PURE__ */ (0,
|
|
490
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react.Check, { className: "h-4 w-4" }) }) }),
|
|
491
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectPrimitive.ItemText, { children })
|
|
392
492
|
]
|
|
393
493
|
}
|
|
394
494
|
));
|
|
395
495
|
SelectItem.displayName = SelectPrimitive.Item.displayName;
|
|
396
|
-
var SelectSeparator =
|
|
496
|
+
var SelectSeparator = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
397
497
|
SelectPrimitive.Separator,
|
|
398
498
|
{
|
|
399
499
|
ref,
|
|
@@ -404,7 +504,7 @@ var SelectSeparator = React5.forwardRef(({ className, ...props }, ref) => /* @__
|
|
|
404
504
|
SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
|
|
405
505
|
|
|
406
506
|
// src/tenant-switcher/index.tsx
|
|
407
|
-
var
|
|
507
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
408
508
|
function SwitchActiveTenant({
|
|
409
509
|
tenants,
|
|
410
510
|
currentTenantId,
|
|
@@ -413,7 +513,7 @@ function SwitchActiveTenant({
|
|
|
413
513
|
className,
|
|
414
514
|
onTenantChange
|
|
415
515
|
}) {
|
|
416
|
-
const [isLoading, setIsLoading] =
|
|
516
|
+
const [isLoading, setIsLoading] = React8.useState(false);
|
|
417
517
|
const handleTenantChange = async (tenantId) => {
|
|
418
518
|
if (tenantId === currentTenantId) return;
|
|
419
519
|
setIsLoading(true);
|
|
@@ -431,24 +531,24 @@ function SwitchActiveTenant({
|
|
|
431
531
|
}
|
|
432
532
|
};
|
|
433
533
|
const currentTenant = tenants.find((tenant) => tenant.id === currentTenantId);
|
|
434
|
-
return /* @__PURE__ */ (0,
|
|
534
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
435
535
|
Select,
|
|
436
536
|
{
|
|
437
537
|
value: currentTenantId,
|
|
438
538
|
onValueChange: handleTenantChange,
|
|
439
539
|
disabled: isLoading,
|
|
440
540
|
children: [
|
|
441
|
-
/* @__PURE__ */ (0,
|
|
442
|
-
/* @__PURE__ */ (0,
|
|
541
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectTrigger, { className: cn("max-w-64", className), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectValue, { placeholder, children: currentTenant ? currentTenant.name : placeholder }) }),
|
|
542
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectContent, { children: tenants.map((tenant) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectItem, { value: tenant.id, children: tenant.name }, tenant.id)) })
|
|
443
543
|
]
|
|
444
544
|
}
|
|
445
545
|
);
|
|
446
546
|
}
|
|
447
547
|
|
|
448
548
|
// src/pricing-table/index.tsx
|
|
449
|
-
var
|
|
549
|
+
var React9 = __toESM(require("react"), 1);
|
|
450
550
|
var import_lucide_react2 = require("lucide-react");
|
|
451
|
-
var
|
|
551
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
452
552
|
var getCurrencySymbol = (currency) => {
|
|
453
553
|
const symbols = {
|
|
454
554
|
USD: "$",
|
|
@@ -489,7 +589,7 @@ function PricingCard({
|
|
|
489
589
|
}) {
|
|
490
590
|
const ui = product.ui || {};
|
|
491
591
|
const isHighlighted = ui.highlighted;
|
|
492
|
-
return /* @__PURE__ */ (0,
|
|
592
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
493
593
|
"div",
|
|
494
594
|
{
|
|
495
595
|
className: cn(
|
|
@@ -497,11 +597,11 @@ function PricingCard({
|
|
|
497
597
|
isHighlighted ? "relative" : ""
|
|
498
598
|
),
|
|
499
599
|
children: [
|
|
500
|
-
/* @__PURE__ */ (0,
|
|
501
|
-
ui.badge === "Most Popular" && /* @__PURE__ */ (0,
|
|
600
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-4 flex-shrink-0 relative", children: ui.badge && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "absolute top-0 left-1/2 transform -translate-x-1/2 z-10", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("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: [
|
|
601
|
+
ui.badge === "Most Popular" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react2.Star, { className: "w-3 h-3" }),
|
|
502
602
|
ui.badge
|
|
503
603
|
] }) }) }),
|
|
504
|
-
/* @__PURE__ */ (0,
|
|
604
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
505
605
|
Card,
|
|
506
606
|
{
|
|
507
607
|
className: cn(
|
|
@@ -510,36 +610,36 @@ function PricingCard({
|
|
|
510
610
|
isSelected && "ring-2 ring-primary"
|
|
511
611
|
),
|
|
512
612
|
children: [
|
|
513
|
-
/* @__PURE__ */ (0,
|
|
514
|
-
/* @__PURE__ */ (0,
|
|
515
|
-
ui.tagline && /* @__PURE__ */ (0,
|
|
613
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(CardHeader, { className: "text-center", children: [
|
|
614
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CardTitle, { className: "text-xl font-bold", children: ui.display_name || product.name }),
|
|
615
|
+
ui.tagline && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CardDescription, { className: "text-base", children: ui.tagline })
|
|
516
616
|
] }),
|
|
517
|
-
/* @__PURE__ */ (0,
|
|
518
|
-
/* @__PURE__ */ (0,
|
|
519
|
-
/* @__PURE__ */ (0,
|
|
520
|
-
/* @__PURE__ */ (0,
|
|
617
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(CardContent, { className: "flex-1 space-y-6", children: [
|
|
618
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "text-center", children: [
|
|
619
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-3xl font-bold", children: formatPrice(displayedPrice) }),
|
|
620
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-sm text-muted-foreground", children: formatBillingPeriod(displayedPrice) })
|
|
521
621
|
] }),
|
|
522
|
-
(ui.features && ui.features.length > 0 || displayedPrice.ui?.features?.length > 0 || displayedPrice.ui?.limits?.length > 0) && /* @__PURE__ */ (0,
|
|
523
|
-
ui.features && ui.features.length > 0 && /* @__PURE__ */ (0,
|
|
524
|
-
/* @__PURE__ */ (0,
|
|
525
|
-
/* @__PURE__ */ (0,
|
|
526
|
-
/* @__PURE__ */ (0,
|
|
527
|
-
/* @__PURE__ */ (0,
|
|
622
|
+
(ui.features && ui.features.length > 0 || displayedPrice.ui?.features?.length > 0 || displayedPrice.ui?.limits?.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-4", children: [
|
|
623
|
+
ui.features && ui.features.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-2", children: [
|
|
624
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h4", { className: "font-medium text-sm text-muted-foreground uppercase tracking-wide", children: "Features" }),
|
|
625
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("ul", { className: "space-y-2", children: ui.features.map((feature, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("li", { className: "flex items-start gap-2", children: [
|
|
626
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react2.Check, { className: "w-4 h-4 text-green-500 mt-0.5 flex-shrink-0" }),
|
|
627
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-sm", children: feature })
|
|
528
628
|
] }, index)) })
|
|
529
629
|
] }),
|
|
530
|
-
displayedPrice.ui?.features && displayedPrice.ui.features.length > 0 && /* @__PURE__ */ (0,
|
|
531
|
-
/* @__PURE__ */ (0,
|
|
532
|
-
/* @__PURE__ */ (0,
|
|
533
|
-
(feature, index) => /* @__PURE__ */ (0,
|
|
534
|
-
/* @__PURE__ */ (0,
|
|
535
|
-
/* @__PURE__ */ (0,
|
|
630
|
+
displayedPrice.ui?.features && displayedPrice.ui.features.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-2", children: [
|
|
631
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h4", { className: "font-medium text-sm text-muted-foreground uppercase tracking-wide", children: "This Plan" }),
|
|
632
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("ul", { className: "space-y-2", children: displayedPrice.ui.features.map(
|
|
633
|
+
(feature, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("li", { className: "flex items-start gap-2", children: [
|
|
634
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react2.Check, { className: "w-4 h-4 text-blue-500 mt-0.5 flex-shrink-0" }),
|
|
635
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-sm", children: feature })
|
|
536
636
|
] }, index)
|
|
537
637
|
) })
|
|
538
638
|
] }),
|
|
539
|
-
displayedPrice.ui?.limits && displayedPrice.ui.limits.length > 0 && /* @__PURE__ */ (0,
|
|
540
|
-
/* @__PURE__ */ (0,
|
|
541
|
-
/* @__PURE__ */ (0,
|
|
542
|
-
(limit, index) => /* @__PURE__ */ (0,
|
|
639
|
+
displayedPrice.ui?.limits && displayedPrice.ui.limits.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-2", children: [
|
|
640
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h4", { className: "font-medium text-sm text-muted-foreground uppercase tracking-wide", children: "Usage Limits" }),
|
|
641
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("ul", { className: "space-y-1", children: displayedPrice.ui.limits.map(
|
|
642
|
+
(limit, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
543
643
|
"li",
|
|
544
644
|
{
|
|
545
645
|
className: "text-sm text-muted-foreground",
|
|
@@ -551,7 +651,7 @@ function PricingCard({
|
|
|
551
651
|
] })
|
|
552
652
|
] })
|
|
553
653
|
] }),
|
|
554
|
-
/* @__PURE__ */ (0,
|
|
654
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CardFooter, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
555
655
|
Button,
|
|
556
656
|
{
|
|
557
657
|
className: "w-full",
|
|
@@ -578,15 +678,15 @@ function PricingTable({
|
|
|
578
678
|
showPricingToggle = false,
|
|
579
679
|
defaultInterval = "month"
|
|
580
680
|
}) {
|
|
581
|
-
const [selectedInterval, setSelectedInterval] =
|
|
582
|
-
const [carouselIndex, setCarouselIndex] =
|
|
583
|
-
const sortedProducts =
|
|
681
|
+
const [selectedInterval, setSelectedInterval] = React9.useState(defaultInterval);
|
|
682
|
+
const [carouselIndex, setCarouselIndex] = React9.useState(0);
|
|
683
|
+
const sortedProducts = React9.useMemo(
|
|
584
684
|
() => [...products].sort(
|
|
585
685
|
(a, b) => (a.ui?.sort_order ?? 999) - (b.ui?.sort_order ?? 999)
|
|
586
686
|
),
|
|
587
687
|
[products]
|
|
588
688
|
);
|
|
589
|
-
const hasMultipleIntervals =
|
|
689
|
+
const hasMultipleIntervals = React9.useMemo(
|
|
590
690
|
() => products.some(
|
|
591
691
|
(p) => new Set(p.prices.map((price) => price.interval)).size > 1
|
|
592
692
|
),
|
|
@@ -595,7 +695,7 @@ function PricingTable({
|
|
|
595
695
|
const getDisplayedPrice = (product) => product.prices.find((p) => p.interval === selectedInterval) || product.prices[0];
|
|
596
696
|
const renderCard = (product) => {
|
|
597
697
|
const displayedPrice = getDisplayedPrice(product);
|
|
598
|
-
return /* @__PURE__ */ (0,
|
|
698
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
599
699
|
PricingCard,
|
|
600
700
|
{
|
|
601
701
|
product,
|
|
@@ -605,8 +705,8 @@ function PricingTable({
|
|
|
605
705
|
}
|
|
606
706
|
);
|
|
607
707
|
};
|
|
608
|
-
const desktopCarousel = /* @__PURE__ */ (0,
|
|
609
|
-
/* @__PURE__ */ (0,
|
|
708
|
+
const desktopCarousel = /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "relative max-w-7xl mx-auto", children: [
|
|
709
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
610
710
|
Button,
|
|
611
711
|
{
|
|
612
712
|
variant: "ghost",
|
|
@@ -614,15 +714,15 @@ function PricingTable({
|
|
|
614
714
|
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",
|
|
615
715
|
onClick: () => setCarouselIndex(Math.max(0, carouselIndex - 1)),
|
|
616
716
|
disabled: carouselIndex === 0,
|
|
617
|
-
children: /* @__PURE__ */ (0,
|
|
717
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react2.ChevronLeft, { className: "w-4 h-4" })
|
|
618
718
|
}
|
|
619
719
|
),
|
|
620
|
-
/* @__PURE__ */ (0,
|
|
720
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
621
721
|
"div",
|
|
622
722
|
{
|
|
623
723
|
className: "overflow-hidden mx-auto",
|
|
624
724
|
style: { width: `${3 * CARD_WIDTH + 2 * GAP}px` },
|
|
625
|
-
children: /* @__PURE__ */ (0,
|
|
725
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
626
726
|
"div",
|
|
627
727
|
{
|
|
628
728
|
className: "flex items-stretch transition-transform duration-300 ease-in-out",
|
|
@@ -630,7 +730,7 @@ function PricingTable({
|
|
|
630
730
|
transform: `translateX(-${carouselIndex * (CARD_WIDTH + GAP)}px)`,
|
|
631
731
|
gap: `${GAP}px`
|
|
632
732
|
},
|
|
633
|
-
children: sortedProducts.map((p) => /* @__PURE__ */ (0,
|
|
733
|
+
children: sortedProducts.map((p) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
634
734
|
"div",
|
|
635
735
|
{
|
|
636
736
|
style: { width: `${CARD_WIDTH}px` },
|
|
@@ -643,7 +743,7 @@ function PricingTable({
|
|
|
643
743
|
)
|
|
644
744
|
}
|
|
645
745
|
),
|
|
646
|
-
/* @__PURE__ */ (0,
|
|
746
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
647
747
|
Button,
|
|
648
748
|
{
|
|
649
749
|
variant: "ghost",
|
|
@@ -653,12 +753,12 @@ function PricingTable({
|
|
|
653
753
|
Math.min(sortedProducts.length - 3, carouselIndex + 1)
|
|
654
754
|
),
|
|
655
755
|
disabled: carouselIndex >= sortedProducts.length - 3,
|
|
656
|
-
children: /* @__PURE__ */ (0,
|
|
756
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react2.ChevronRight, { className: "w-4 h-4" })
|
|
657
757
|
}
|
|
658
758
|
),
|
|
659
|
-
/* @__PURE__ */ (0,
|
|
759
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex justify-center mt-6 space-x-2", children: Array.from(
|
|
660
760
|
{ length: Math.max(1, sortedProducts.length - 2) },
|
|
661
|
-
(_, i) => /* @__PURE__ */ (0,
|
|
761
|
+
(_, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
662
762
|
"button",
|
|
663
763
|
{
|
|
664
764
|
onClick: () => setCarouselIndex(i),
|
|
@@ -672,12 +772,12 @@ function PricingTable({
|
|
|
672
772
|
)
|
|
673
773
|
) })
|
|
674
774
|
] });
|
|
675
|
-
const staticLayout = /* @__PURE__ */ (0,
|
|
775
|
+
const staticLayout = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
676
776
|
"div",
|
|
677
777
|
{
|
|
678
778
|
className: "flex flex-row items-stretch justify-center",
|
|
679
779
|
style: { gap: `${GAP}px` },
|
|
680
|
-
children: sortedProducts.map((p) => /* @__PURE__ */ (0,
|
|
780
|
+
children: sortedProducts.map((p) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
681
781
|
"div",
|
|
682
782
|
{
|
|
683
783
|
style: { width: `${CARD_WIDTH}px` },
|
|
@@ -688,9 +788,9 @@ function PricingTable({
|
|
|
688
788
|
))
|
|
689
789
|
}
|
|
690
790
|
);
|
|
691
|
-
return /* @__PURE__ */ (0,
|
|
692
|
-
showPricingToggle && hasMultipleIntervals && /* @__PURE__ */ (0,
|
|
693
|
-
/* @__PURE__ */ (0,
|
|
791
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: cn("w-full", className), children: [
|
|
792
|
+
showPricingToggle && hasMultipleIntervals && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex justify-center mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex bg-gray-100 p-1 rounded-lg", children: [
|
|
793
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
694
794
|
Button,
|
|
695
795
|
{
|
|
696
796
|
variant: selectedInterval === "month" ? "default" : "ghost",
|
|
@@ -700,7 +800,7 @@ function PricingTable({
|
|
|
700
800
|
children: "Monthly"
|
|
701
801
|
}
|
|
702
802
|
),
|
|
703
|
-
/* @__PURE__ */ (0,
|
|
803
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
704
804
|
Button,
|
|
705
805
|
{
|
|
706
806
|
variant: selectedInterval === "year" ? "default" : "ghost",
|
|
@@ -711,20 +811,20 @@ function PricingTable({
|
|
|
711
811
|
}
|
|
712
812
|
)
|
|
713
813
|
] }) }),
|
|
714
|
-
/* @__PURE__ */ (0,
|
|
715
|
-
/* @__PURE__ */ (0,
|
|
814
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "lg:hidden relative", children: [
|
|
815
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
716
816
|
"div",
|
|
717
817
|
{
|
|
718
818
|
className: "overflow-hidden mx-auto",
|
|
719
819
|
style: { width: `${CARD_WIDTH}px` },
|
|
720
|
-
children: /* @__PURE__ */ (0,
|
|
820
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
721
821
|
"div",
|
|
722
822
|
{
|
|
723
823
|
className: "flex transition-transform duration-300 ease-in-out items-stretch",
|
|
724
824
|
style: {
|
|
725
825
|
transform: `translateX(-${carouselIndex * CARD_WIDTH}px)`
|
|
726
826
|
},
|
|
727
|
-
children: sortedProducts.map((product) => /* @__PURE__ */ (0,
|
|
827
|
+
children: sortedProducts.map((product) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
728
828
|
"div",
|
|
729
829
|
{
|
|
730
830
|
className: "flex-shrink-0",
|
|
@@ -737,8 +837,8 @@ function PricingTable({
|
|
|
737
837
|
)
|
|
738
838
|
}
|
|
739
839
|
),
|
|
740
|
-
sortedProducts.length > 1 && /* @__PURE__ */ (0,
|
|
741
|
-
/* @__PURE__ */ (0,
|
|
840
|
+
sortedProducts.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
|
|
841
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
742
842
|
Button,
|
|
743
843
|
{
|
|
744
844
|
variant: "ghost",
|
|
@@ -746,10 +846,10 @@ function PricingTable({
|
|
|
746
846
|
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",
|
|
747
847
|
onClick: () => setCarouselIndex((prev) => Math.max(0, prev - 1)),
|
|
748
848
|
disabled: carouselIndex === 0,
|
|
749
|
-
children: /* @__PURE__ */ (0,
|
|
849
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react2.ChevronLeft, { className: "w-5 h-5" })
|
|
750
850
|
}
|
|
751
851
|
),
|
|
752
|
-
/* @__PURE__ */ (0,
|
|
852
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
753
853
|
Button,
|
|
754
854
|
{
|
|
755
855
|
variant: "ghost",
|
|
@@ -759,10 +859,10 @@ function PricingTable({
|
|
|
759
859
|
(prev) => Math.min(sortedProducts.length - 1, prev + 1)
|
|
760
860
|
),
|
|
761
861
|
disabled: carouselIndex >= sortedProducts.length - 1,
|
|
762
|
-
children: /* @__PURE__ */ (0,
|
|
862
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react2.ChevronRight, { className: "w-5 h-5" })
|
|
763
863
|
}
|
|
764
864
|
),
|
|
765
|
-
/* @__PURE__ */ (0,
|
|
865
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex justify-center mt-6 space-x-2", children: Array.from({ length: sortedProducts.length }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
766
866
|
"button",
|
|
767
867
|
{
|
|
768
868
|
onClick: () => setCarouselIndex(i),
|
|
@@ -776,7 +876,7 @@ function PricingTable({
|
|
|
776
876
|
)) })
|
|
777
877
|
] })
|
|
778
878
|
] }),
|
|
779
|
-
/* @__PURE__ */ (0,
|
|
879
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "hidden lg:block", children: sortedProducts.length <= 3 ? staticLayout : desktopCarousel })
|
|
780
880
|
] });
|
|
781
881
|
}
|
|
782
882
|
// Annotate the CommonJS export names for ESM import in node:
|