@facter/ds-core 1.2.0 → 1.3.1
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.d.mts +376 -3
- package/dist/index.d.ts +376 -3
- package/dist/index.js +666 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +659 -4
- package/dist/index.mjs.map +1 -1
- package/package.json +10 -10
package/dist/index.mjs
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import * as React48 from 'react';
|
|
3
|
+
import { createContext, useCallback, Children, isValidElement, useState, useMemo, useContext } from 'react';
|
|
3
4
|
import { cva } from 'class-variance-authority';
|
|
4
5
|
import { clsx } from 'clsx';
|
|
5
6
|
import { twMerge } from 'tailwind-merge';
|
|
6
7
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
7
|
-
import { ChevronDown, Check, Inbox, ChevronsLeft, ChevronLeft, ChevronRight, ChevronsRight, X, Circle, PinOff, Pin, ArrowDown, ArrowUp, ChevronsUpDown, FileText, FileSpreadsheet, Download, Rows4, Rows3, LayoutList, SlidersHorizontal, Info, AlertTriangle, XCircle, CheckCircle2, Building2, Star, ArrowRight, Search, User, LogOut, Menu, TrendingUp, TrendingDown, Sun, Moon, Bell, MoreHorizontal, Settings } from 'lucide-react';
|
|
8
|
+
import { ChevronDown, Check, Inbox, ChevronsLeft, ChevronLeft, ChevronRight, ChevronsRight, X, Circle, PinOff, Pin, ArrowDown, ArrowUp, ChevronsUpDown, FileText, FileSpreadsheet, Download, Rows4, Rows3, LayoutList, SlidersHorizontal, Info, AlertTriangle, XCircle, CheckCircle2, Building2, Star, ArrowRight, Search, User, LogOut, Menu, AlertCircle, TrendingUp, TrendingDown, Sun, Moon, Bell, MoreHorizontal, Settings } from 'lucide-react';
|
|
8
9
|
import { AnimatePresence, motion } from 'framer-motion';
|
|
9
10
|
import * as SelectPrimitive from '@radix-ui/react-select';
|
|
10
11
|
import * as TabsPrimitive from '@radix-ui/react-tabs';
|
|
@@ -14,7 +15,7 @@ import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
|
|
|
14
15
|
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
15
16
|
import { toast as toast$1, Toaster as Toaster$1 } from 'sonner';
|
|
16
17
|
import * as SwitchPrimitives from '@radix-ui/react-switch';
|
|
17
|
-
import { Controller } from 'react-hook-form';
|
|
18
|
+
import { Controller, FormProvider as FormProvider$1 } from 'react-hook-form';
|
|
18
19
|
import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
|
|
19
20
|
import * as AvatarPrimitive from '@radix-ui/react-avatar';
|
|
20
21
|
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
|
|
@@ -35,7 +36,7 @@ var buttonVariants = cva(
|
|
|
35
36
|
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
|
36
37
|
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
|
37
38
|
outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
|
|
38
|
-
secondary: "bg-
|
|
39
|
+
secondary: "bg-primary/15 text-primary hover:bg-primary/25",
|
|
39
40
|
ghost: "hover:bg-accent hover:text-accent-foreground",
|
|
40
41
|
link: "text-primary underline-offset-4 hover:underline"
|
|
41
42
|
},
|
|
@@ -6309,6 +6310,660 @@ var Kanban = {
|
|
|
6309
6310
|
Column: KanbanColumn,
|
|
6310
6311
|
Card: KanbanCard
|
|
6311
6312
|
};
|
|
6313
|
+
var WizardContext = createContext(void 0);
|
|
6314
|
+
function useWizardContext() {
|
|
6315
|
+
const context = useContext(WizardContext);
|
|
6316
|
+
if (context === void 0) {
|
|
6317
|
+
throw new Error("useWizardContext must be used within a Wizard component");
|
|
6318
|
+
}
|
|
6319
|
+
return context;
|
|
6320
|
+
}
|
|
6321
|
+
function useWizardContextOptional() {
|
|
6322
|
+
return useContext(WizardContext);
|
|
6323
|
+
}
|
|
6324
|
+
function WizardProvider({
|
|
6325
|
+
children,
|
|
6326
|
+
form,
|
|
6327
|
+
steps,
|
|
6328
|
+
initialStep = 0,
|
|
6329
|
+
onStepChange,
|
|
6330
|
+
validateOnNext = true,
|
|
6331
|
+
allowJumpToStep = false
|
|
6332
|
+
}) {
|
|
6333
|
+
const [completedSteps, setCompletedSteps] = useState(/* @__PURE__ */ new Set());
|
|
6334
|
+
const activeSteps = useMemo(() => {
|
|
6335
|
+
const formValues = form.getValues();
|
|
6336
|
+
return steps.filter((step) => {
|
|
6337
|
+
if (typeof step.isHidden === "function") {
|
|
6338
|
+
return !step.isHidden(formValues);
|
|
6339
|
+
}
|
|
6340
|
+
return !step.isHidden;
|
|
6341
|
+
});
|
|
6342
|
+
}, [steps, form]);
|
|
6343
|
+
const [currentStep, setCurrentStep] = useState(() => {
|
|
6344
|
+
return Math.min(Math.max(0, initialStep), activeSteps.length - 1);
|
|
6345
|
+
});
|
|
6346
|
+
const totalSteps = activeSteps.length;
|
|
6347
|
+
const isFirstStep = currentStep === 0;
|
|
6348
|
+
const isLastStep = currentStep === totalSteps - 1;
|
|
6349
|
+
const progress = totalSteps > 0 ? Math.round((currentStep + 1) / totalSteps * 100) : 0;
|
|
6350
|
+
const currentStepConfig = activeSteps[currentStep];
|
|
6351
|
+
const getStepConfig = useCallback(
|
|
6352
|
+
(index) => activeSteps[index],
|
|
6353
|
+
[activeSteps]
|
|
6354
|
+
);
|
|
6355
|
+
const getStepByName = useCallback(
|
|
6356
|
+
(name) => activeSteps.find((step) => step.name === name || step.id === name),
|
|
6357
|
+
[activeSteps]
|
|
6358
|
+
);
|
|
6359
|
+
const getStepIndexByName = useCallback(
|
|
6360
|
+
(name) => activeSteps.findIndex((step) => step.name === name || step.id === name),
|
|
6361
|
+
[activeSteps]
|
|
6362
|
+
);
|
|
6363
|
+
const isStepCompleted = useCallback(
|
|
6364
|
+
(index) => completedSteps.has(index),
|
|
6365
|
+
[completedSteps]
|
|
6366
|
+
);
|
|
6367
|
+
const hasStepErrors = useCallback(
|
|
6368
|
+
(index) => {
|
|
6369
|
+
const stepConfig = activeSteps[index];
|
|
6370
|
+
if (!stepConfig?.fields) return false;
|
|
6371
|
+
const errors = form.formState.errors;
|
|
6372
|
+
return stepConfig.fields.some((field) => {
|
|
6373
|
+
const fieldPath = field;
|
|
6374
|
+
return fieldPath in errors;
|
|
6375
|
+
});
|
|
6376
|
+
},
|
|
6377
|
+
[activeSteps, form.formState.errors]
|
|
6378
|
+
);
|
|
6379
|
+
const validateCurrentStep = useCallback(async () => {
|
|
6380
|
+
const stepConfig = currentStepConfig;
|
|
6381
|
+
if (!stepConfig?.validationSchema) {
|
|
6382
|
+
return true;
|
|
6383
|
+
}
|
|
6384
|
+
const formValues = form.getValues();
|
|
6385
|
+
const result = await stepConfig.validationSchema.safeParseAsync(formValues);
|
|
6386
|
+
if (!result.success) {
|
|
6387
|
+
if (stepConfig.fields) {
|
|
6388
|
+
await Promise.all(
|
|
6389
|
+
stepConfig.fields.map((field) => form.trigger(field))
|
|
6390
|
+
);
|
|
6391
|
+
}
|
|
6392
|
+
return false;
|
|
6393
|
+
}
|
|
6394
|
+
if (stepConfig.fields) {
|
|
6395
|
+
stepConfig.fields.forEach((field) => {
|
|
6396
|
+
form.clearErrors(field);
|
|
6397
|
+
});
|
|
6398
|
+
}
|
|
6399
|
+
return true;
|
|
6400
|
+
}, [currentStepConfig, form]);
|
|
6401
|
+
const goToNextStep = useCallback(async () => {
|
|
6402
|
+
if (isLastStep) {
|
|
6403
|
+
return false;
|
|
6404
|
+
}
|
|
6405
|
+
if (validateOnNext) {
|
|
6406
|
+
const isValid = await validateCurrentStep();
|
|
6407
|
+
if (!isValid) {
|
|
6408
|
+
return false;
|
|
6409
|
+
}
|
|
6410
|
+
}
|
|
6411
|
+
setCompletedSteps((prev) => /* @__PURE__ */ new Set([...prev, currentStep]));
|
|
6412
|
+
const nextStep = currentStep + 1;
|
|
6413
|
+
setCurrentStep(nextStep);
|
|
6414
|
+
onStepChange?.(nextStep, "next");
|
|
6415
|
+
return true;
|
|
6416
|
+
}, [isLastStep, validateOnNext, validateCurrentStep, currentStep, onStepChange]);
|
|
6417
|
+
const goToPrevStep = useCallback(() => {
|
|
6418
|
+
if (isFirstStep) {
|
|
6419
|
+
return;
|
|
6420
|
+
}
|
|
6421
|
+
const prevStep = currentStep - 1;
|
|
6422
|
+
setCurrentStep(prevStep);
|
|
6423
|
+
onStepChange?.(prevStep, "prev");
|
|
6424
|
+
}, [isFirstStep, currentStep, onStepChange]);
|
|
6425
|
+
const goToStep = useCallback(
|
|
6426
|
+
async (targetStep) => {
|
|
6427
|
+
if (targetStep < 0 || targetStep >= totalSteps) {
|
|
6428
|
+
return false;
|
|
6429
|
+
}
|
|
6430
|
+
if (!allowJumpToStep && targetStep > currentStep) {
|
|
6431
|
+
for (let i = currentStep; i < targetStep; i++) {
|
|
6432
|
+
if (!completedSteps.has(i)) {
|
|
6433
|
+
return false;
|
|
6434
|
+
}
|
|
6435
|
+
}
|
|
6436
|
+
}
|
|
6437
|
+
if (targetStep < currentStep) {
|
|
6438
|
+
setCurrentStep(targetStep);
|
|
6439
|
+
onStepChange?.(targetStep, "jump");
|
|
6440
|
+
return true;
|
|
6441
|
+
}
|
|
6442
|
+
if (validateOnNext && targetStep > currentStep) {
|
|
6443
|
+
const isValid = await validateCurrentStep();
|
|
6444
|
+
if (!isValid) {
|
|
6445
|
+
return false;
|
|
6446
|
+
}
|
|
6447
|
+
setCompletedSteps((prev) => /* @__PURE__ */ new Set([...prev, currentStep]));
|
|
6448
|
+
}
|
|
6449
|
+
setCurrentStep(targetStep);
|
|
6450
|
+
onStepChange?.(targetStep, "jump");
|
|
6451
|
+
return true;
|
|
6452
|
+
},
|
|
6453
|
+
[totalSteps, allowJumpToStep, currentStep, completedSteps, validateOnNext, validateCurrentStep, onStepChange]
|
|
6454
|
+
);
|
|
6455
|
+
const reset = useCallback(() => {
|
|
6456
|
+
setCurrentStep(Math.min(Math.max(0, initialStep), activeSteps.length - 1));
|
|
6457
|
+
setCompletedSteps(/* @__PURE__ */ new Set());
|
|
6458
|
+
form.reset();
|
|
6459
|
+
}, [initialStep, activeSteps.length, form]);
|
|
6460
|
+
const contextValue = useMemo(
|
|
6461
|
+
() => ({
|
|
6462
|
+
// State
|
|
6463
|
+
currentStep,
|
|
6464
|
+
totalSteps,
|
|
6465
|
+
activeSteps,
|
|
6466
|
+
allSteps: steps,
|
|
6467
|
+
// Computed
|
|
6468
|
+
isFirstStep,
|
|
6469
|
+
isLastStep,
|
|
6470
|
+
progress,
|
|
6471
|
+
// Navigation
|
|
6472
|
+
goToNextStep,
|
|
6473
|
+
goToPrevStep,
|
|
6474
|
+
goToStep,
|
|
6475
|
+
reset,
|
|
6476
|
+
// Validation
|
|
6477
|
+
validateCurrentStep,
|
|
6478
|
+
isStepCompleted,
|
|
6479
|
+
hasStepErrors,
|
|
6480
|
+
// Form
|
|
6481
|
+
form,
|
|
6482
|
+
// Step info
|
|
6483
|
+
currentStepConfig,
|
|
6484
|
+
getStepConfig,
|
|
6485
|
+
getStepByName,
|
|
6486
|
+
getStepIndexByName,
|
|
6487
|
+
// Settings
|
|
6488
|
+
allowJumpToStep
|
|
6489
|
+
}),
|
|
6490
|
+
[
|
|
6491
|
+
currentStep,
|
|
6492
|
+
totalSteps,
|
|
6493
|
+
activeSteps,
|
|
6494
|
+
steps,
|
|
6495
|
+
isFirstStep,
|
|
6496
|
+
isLastStep,
|
|
6497
|
+
progress,
|
|
6498
|
+
goToNextStep,
|
|
6499
|
+
goToPrevStep,
|
|
6500
|
+
goToStep,
|
|
6501
|
+
reset,
|
|
6502
|
+
validateCurrentStep,
|
|
6503
|
+
isStepCompleted,
|
|
6504
|
+
hasStepErrors,
|
|
6505
|
+
form,
|
|
6506
|
+
currentStepConfig,
|
|
6507
|
+
getStepConfig,
|
|
6508
|
+
getStepByName,
|
|
6509
|
+
getStepIndexByName,
|
|
6510
|
+
allowJumpToStep
|
|
6511
|
+
]
|
|
6512
|
+
);
|
|
6513
|
+
return /* @__PURE__ */ jsx(WizardContext.Provider, { value: contextValue, children });
|
|
6514
|
+
}
|
|
6515
|
+
var sizeConfig = {
|
|
6516
|
+
sm: {
|
|
6517
|
+
circle: "h-7 w-7 text-xs",
|
|
6518
|
+
icon: "h-3.5 w-3.5",
|
|
6519
|
+
label: "text-xs",
|
|
6520
|
+
description: "text-xs",
|
|
6521
|
+
gap: "gap-1.5"
|
|
6522
|
+
},
|
|
6523
|
+
md: {
|
|
6524
|
+
circle: "h-9 w-9 text-sm",
|
|
6525
|
+
icon: "h-4 w-4",
|
|
6526
|
+
label: "text-sm",
|
|
6527
|
+
description: "text-xs",
|
|
6528
|
+
gap: "gap-2"
|
|
6529
|
+
},
|
|
6530
|
+
lg: {
|
|
6531
|
+
circle: "h-11 w-11 text-base",
|
|
6532
|
+
icon: "h-5 w-5",
|
|
6533
|
+
label: "text-base",
|
|
6534
|
+
description: "text-sm",
|
|
6535
|
+
gap: "gap-2.5"
|
|
6536
|
+
}
|
|
6537
|
+
};
|
|
6538
|
+
var stateStyles = {
|
|
6539
|
+
completed: {
|
|
6540
|
+
circle: "bg-green-500 text-white border-green-500",
|
|
6541
|
+
label: "text-green-600 dark:text-green-400",
|
|
6542
|
+
description: "text-muted-foreground"
|
|
6543
|
+
},
|
|
6544
|
+
current: {
|
|
6545
|
+
circle: "bg-primary text-primary-foreground border-primary ring-4 ring-primary/20",
|
|
6546
|
+
label: "text-primary font-semibold",
|
|
6547
|
+
description: "text-muted-foreground"
|
|
6548
|
+
},
|
|
6549
|
+
pending: {
|
|
6550
|
+
circle: "bg-background text-muted-foreground border-muted-foreground/30",
|
|
6551
|
+
label: "text-muted-foreground",
|
|
6552
|
+
description: "text-muted-foreground/60"
|
|
6553
|
+
},
|
|
6554
|
+
error: {
|
|
6555
|
+
circle: "bg-destructive text-destructive-foreground border-destructive",
|
|
6556
|
+
label: "text-destructive",
|
|
6557
|
+
description: "text-destructive/60"
|
|
6558
|
+
},
|
|
6559
|
+
disabled: {
|
|
6560
|
+
circle: "bg-muted text-muted-foreground/50 border-muted cursor-not-allowed",
|
|
6561
|
+
label: "text-muted-foreground/50",
|
|
6562
|
+
description: "text-muted-foreground/30"
|
|
6563
|
+
}
|
|
6564
|
+
};
|
|
6565
|
+
function WizardStepIndicator({
|
|
6566
|
+
step,
|
|
6567
|
+
index,
|
|
6568
|
+
state,
|
|
6569
|
+
showNumber = false,
|
|
6570
|
+
showDescription = false,
|
|
6571
|
+
size = "md",
|
|
6572
|
+
isClickable = false,
|
|
6573
|
+
onClick
|
|
6574
|
+
}) {
|
|
6575
|
+
const config = sizeConfig[size];
|
|
6576
|
+
const styles = stateStyles[state];
|
|
6577
|
+
const Icon2 = step.icon;
|
|
6578
|
+
const renderCircleContent = () => {
|
|
6579
|
+
if (state === "completed") {
|
|
6580
|
+
return /* @__PURE__ */ jsx(Check, { className: config.icon, strokeWidth: 3 });
|
|
6581
|
+
}
|
|
6582
|
+
if (state === "error") {
|
|
6583
|
+
return /* @__PURE__ */ jsx(AlertCircle, { className: config.icon });
|
|
6584
|
+
}
|
|
6585
|
+
if (Icon2 && !showNumber) {
|
|
6586
|
+
return /* @__PURE__ */ jsx(Icon2, { className: config.icon });
|
|
6587
|
+
}
|
|
6588
|
+
return /* @__PURE__ */ jsx("span", { children: index + 1 });
|
|
6589
|
+
};
|
|
6590
|
+
return /* @__PURE__ */ jsxs(
|
|
6591
|
+
"div",
|
|
6592
|
+
{
|
|
6593
|
+
className: cn(
|
|
6594
|
+
"flex flex-col items-center",
|
|
6595
|
+
config.gap,
|
|
6596
|
+
isClickable && "cursor-pointer group"
|
|
6597
|
+
),
|
|
6598
|
+
onClick: isClickable ? onClick : void 0,
|
|
6599
|
+
role: isClickable ? "button" : void 0,
|
|
6600
|
+
tabIndex: isClickable ? 0 : void 0,
|
|
6601
|
+
onKeyDown: isClickable ? (e) => {
|
|
6602
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
6603
|
+
e.preventDefault();
|
|
6604
|
+
onClick?.();
|
|
6605
|
+
}
|
|
6606
|
+
} : void 0,
|
|
6607
|
+
"aria-current": state === "current" ? "step" : void 0,
|
|
6608
|
+
children: [
|
|
6609
|
+
/* @__PURE__ */ jsx(
|
|
6610
|
+
"div",
|
|
6611
|
+
{
|
|
6612
|
+
className: cn(
|
|
6613
|
+
"flex items-center justify-center rounded-full border-2 transition-all duration-200",
|
|
6614
|
+
config.circle,
|
|
6615
|
+
styles.circle,
|
|
6616
|
+
isClickable && "group-hover:ring-4 group-hover:ring-primary/10"
|
|
6617
|
+
),
|
|
6618
|
+
children: renderCircleContent()
|
|
6619
|
+
}
|
|
6620
|
+
),
|
|
6621
|
+
(step.label || showDescription) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center text-center max-w-[120px]", children: [
|
|
6622
|
+
step.label && /* @__PURE__ */ jsx(
|
|
6623
|
+
"span",
|
|
6624
|
+
{
|
|
6625
|
+
className: cn(
|
|
6626
|
+
"leading-tight transition-colors duration-200",
|
|
6627
|
+
config.label,
|
|
6628
|
+
styles.label
|
|
6629
|
+
),
|
|
6630
|
+
children: step.label
|
|
6631
|
+
}
|
|
6632
|
+
),
|
|
6633
|
+
showDescription && step.description && /* @__PURE__ */ jsx(
|
|
6634
|
+
"span",
|
|
6635
|
+
{
|
|
6636
|
+
className: cn(
|
|
6637
|
+
"leading-tight mt-0.5",
|
|
6638
|
+
config.description,
|
|
6639
|
+
styles.description
|
|
6640
|
+
),
|
|
6641
|
+
children: step.description
|
|
6642
|
+
}
|
|
6643
|
+
)
|
|
6644
|
+
] })
|
|
6645
|
+
]
|
|
6646
|
+
}
|
|
6647
|
+
);
|
|
6648
|
+
}
|
|
6649
|
+
function WizardStepConnector({
|
|
6650
|
+
isCompleted = false,
|
|
6651
|
+
variant = "horizontal",
|
|
6652
|
+
className
|
|
6653
|
+
}) {
|
|
6654
|
+
const isHorizontal = variant === "horizontal";
|
|
6655
|
+
return /* @__PURE__ */ jsx(
|
|
6656
|
+
"div",
|
|
6657
|
+
{
|
|
6658
|
+
className: cn(
|
|
6659
|
+
"transition-colors duration-300",
|
|
6660
|
+
isHorizontal ? "flex-1 h-0.5 min-w-[24px] mx-2" : "w-0.5 min-h-[24px] my-2 ml-[18px]",
|
|
6661
|
+
isCompleted ? "bg-green-500" : "bg-muted-foreground/20",
|
|
6662
|
+
className
|
|
6663
|
+
),
|
|
6664
|
+
"aria-hidden": "true"
|
|
6665
|
+
}
|
|
6666
|
+
);
|
|
6667
|
+
}
|
|
6668
|
+
function WizardSteps({
|
|
6669
|
+
variant = "horizontal",
|
|
6670
|
+
showDescription = false,
|
|
6671
|
+
showNumbers = false,
|
|
6672
|
+
size = "md",
|
|
6673
|
+
className
|
|
6674
|
+
}) {
|
|
6675
|
+
const {
|
|
6676
|
+
activeSteps,
|
|
6677
|
+
currentStep,
|
|
6678
|
+
isStepCompleted,
|
|
6679
|
+
hasStepErrors,
|
|
6680
|
+
goToStep,
|
|
6681
|
+
allowJumpToStep
|
|
6682
|
+
} = useWizardContext();
|
|
6683
|
+
const getStepState = (index) => {
|
|
6684
|
+
const step = activeSteps[index];
|
|
6685
|
+
if (step.isDisabled) {
|
|
6686
|
+
return "disabled";
|
|
6687
|
+
}
|
|
6688
|
+
if (index === currentStep) {
|
|
6689
|
+
return hasStepErrors(index) ? "error" : "current";
|
|
6690
|
+
}
|
|
6691
|
+
if (isStepCompleted(index)) {
|
|
6692
|
+
return hasStepErrors(index) ? "error" : "completed";
|
|
6693
|
+
}
|
|
6694
|
+
return "pending";
|
|
6695
|
+
};
|
|
6696
|
+
const isStepClickable = (index) => {
|
|
6697
|
+
if (index === currentStep) return false;
|
|
6698
|
+
const step = activeSteps[index];
|
|
6699
|
+
if (step.isDisabled) return false;
|
|
6700
|
+
if (index < currentStep) return true;
|
|
6701
|
+
if (allowJumpToStep && index > currentStep) {
|
|
6702
|
+
for (let i = currentStep; i < index; i++) {
|
|
6703
|
+
if (!isStepCompleted(i)) return false;
|
|
6704
|
+
}
|
|
6705
|
+
return true;
|
|
6706
|
+
}
|
|
6707
|
+
return false;
|
|
6708
|
+
};
|
|
6709
|
+
const handleStepClick = async (index) => {
|
|
6710
|
+
if (isStepClickable(index)) {
|
|
6711
|
+
await goToStep(index);
|
|
6712
|
+
}
|
|
6713
|
+
};
|
|
6714
|
+
const isHorizontal = variant === "horizontal";
|
|
6715
|
+
return /* @__PURE__ */ jsx(
|
|
6716
|
+
"nav",
|
|
6717
|
+
{
|
|
6718
|
+
"aria-label": "Progresso do formul\xE1rio",
|
|
6719
|
+
className: cn(
|
|
6720
|
+
"flex",
|
|
6721
|
+
isHorizontal ? "flex-row items-center justify-center" : "flex-col items-start",
|
|
6722
|
+
className
|
|
6723
|
+
),
|
|
6724
|
+
children: activeSteps.map((step, index) => /* @__PURE__ */ jsxs(
|
|
6725
|
+
"div",
|
|
6726
|
+
{
|
|
6727
|
+
className: cn(
|
|
6728
|
+
"flex",
|
|
6729
|
+
isHorizontal ? "flex-row items-center" : "flex-col",
|
|
6730
|
+
index !== activeSteps.length - 1 && isHorizontal && "flex-1"
|
|
6731
|
+
),
|
|
6732
|
+
children: [
|
|
6733
|
+
/* @__PURE__ */ jsx(
|
|
6734
|
+
WizardStepIndicator,
|
|
6735
|
+
{
|
|
6736
|
+
step,
|
|
6737
|
+
index,
|
|
6738
|
+
state: getStepState(index),
|
|
6739
|
+
showNumber: showNumbers,
|
|
6740
|
+
showDescription,
|
|
6741
|
+
size,
|
|
6742
|
+
isClickable: isStepClickable(index),
|
|
6743
|
+
onClick: () => handleStepClick(index)
|
|
6744
|
+
}
|
|
6745
|
+
),
|
|
6746
|
+
index !== activeSteps.length - 1 && /* @__PURE__ */ jsx(
|
|
6747
|
+
WizardStepConnector,
|
|
6748
|
+
{
|
|
6749
|
+
isCompleted: isStepCompleted(index),
|
|
6750
|
+
variant
|
|
6751
|
+
}
|
|
6752
|
+
)
|
|
6753
|
+
]
|
|
6754
|
+
},
|
|
6755
|
+
step.id
|
|
6756
|
+
))
|
|
6757
|
+
}
|
|
6758
|
+
);
|
|
6759
|
+
}
|
|
6760
|
+
function WizardContent({ children, className }) {
|
|
6761
|
+
const { currentStepConfig } = useWizardContext();
|
|
6762
|
+
let activePanel = null;
|
|
6763
|
+
Children.forEach(children, (child) => {
|
|
6764
|
+
if (!isValidElement(child)) return;
|
|
6765
|
+
const panelProps = child.props;
|
|
6766
|
+
if (panelProps.name === currentStepConfig?.name || panelProps.name === currentStepConfig?.id) {
|
|
6767
|
+
activePanel = child;
|
|
6768
|
+
}
|
|
6769
|
+
});
|
|
6770
|
+
return /* @__PURE__ */ jsx(
|
|
6771
|
+
"div",
|
|
6772
|
+
{
|
|
6773
|
+
className: cn("flex-1", className),
|
|
6774
|
+
role: "tabpanel",
|
|
6775
|
+
"aria-label": currentStepConfig?.label || currentStepConfig?.name,
|
|
6776
|
+
children: activePanel
|
|
6777
|
+
}
|
|
6778
|
+
);
|
|
6779
|
+
}
|
|
6780
|
+
function WizardPanel({ name, children, className }) {
|
|
6781
|
+
return /* @__PURE__ */ jsx("div", { className: cn("w-full", className), "data-wizard-panel": name, children });
|
|
6782
|
+
}
|
|
6783
|
+
function WizardNavigation({
|
|
6784
|
+
cancelLabel = "Cancelar",
|
|
6785
|
+
prevLabel = "Voltar",
|
|
6786
|
+
nextLabel = "Continuar",
|
|
6787
|
+
submitLabel = "Finalizar",
|
|
6788
|
+
loadingLabel = "Processando...",
|
|
6789
|
+
onCancel,
|
|
6790
|
+
showCancel,
|
|
6791
|
+
submitDisabled = false,
|
|
6792
|
+
className
|
|
6793
|
+
}) {
|
|
6794
|
+
const {
|
|
6795
|
+
isFirstStep,
|
|
6796
|
+
isLastStep,
|
|
6797
|
+
goToNextStep,
|
|
6798
|
+
goToPrevStep,
|
|
6799
|
+
form
|
|
6800
|
+
} = useWizardContext();
|
|
6801
|
+
const isSubmitting = form.formState.isSubmitting;
|
|
6802
|
+
const shouldShowCancel = showCancel ?? isFirstStep;
|
|
6803
|
+
const handleNext = useCallback(async () => {
|
|
6804
|
+
await goToNextStep();
|
|
6805
|
+
}, [goToNextStep]);
|
|
6806
|
+
const handlePrev = useCallback(() => {
|
|
6807
|
+
goToPrevStep();
|
|
6808
|
+
}, [goToPrevStep]);
|
|
6809
|
+
const handleCancel = useCallback(() => {
|
|
6810
|
+
onCancel?.();
|
|
6811
|
+
}, [onCancel]);
|
|
6812
|
+
return /* @__PURE__ */ jsxs(
|
|
6813
|
+
"div",
|
|
6814
|
+
{
|
|
6815
|
+
className: cn(
|
|
6816
|
+
"flex items-center justify-between gap-3 pt-4 border-t border-border",
|
|
6817
|
+
className
|
|
6818
|
+
),
|
|
6819
|
+
children: [
|
|
6820
|
+
/* @__PURE__ */ jsx("div", { className: "flex-1", children: shouldShowCancel && onCancel ? /* @__PURE__ */ jsx(
|
|
6821
|
+
Button,
|
|
6822
|
+
{
|
|
6823
|
+
type: "button",
|
|
6824
|
+
variant: "outline",
|
|
6825
|
+
onClick: handleCancel,
|
|
6826
|
+
disabled: isSubmitting,
|
|
6827
|
+
className: "w-full sm:w-auto",
|
|
6828
|
+
children: cancelLabel
|
|
6829
|
+
}
|
|
6830
|
+
) : !isFirstStep ? /* @__PURE__ */ jsx(
|
|
6831
|
+
Button,
|
|
6832
|
+
{
|
|
6833
|
+
type: "button",
|
|
6834
|
+
variant: "outline",
|
|
6835
|
+
onClick: handlePrev,
|
|
6836
|
+
disabled: isSubmitting,
|
|
6837
|
+
className: "w-full sm:w-auto",
|
|
6838
|
+
children: prevLabel
|
|
6839
|
+
}
|
|
6840
|
+
) : /* @__PURE__ */ jsx("div", {}) }),
|
|
6841
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
6842
|
+
!isFirstStep && shouldShowCancel && /* @__PURE__ */ jsx(
|
|
6843
|
+
Button,
|
|
6844
|
+
{
|
|
6845
|
+
type: "button",
|
|
6846
|
+
variant: "outline",
|
|
6847
|
+
onClick: handlePrev,
|
|
6848
|
+
disabled: isSubmitting,
|
|
6849
|
+
children: prevLabel
|
|
6850
|
+
}
|
|
6851
|
+
),
|
|
6852
|
+
isLastStep ? /* @__PURE__ */ jsx(
|
|
6853
|
+
Button,
|
|
6854
|
+
{
|
|
6855
|
+
type: "submit",
|
|
6856
|
+
disabled: submitDisabled || isSubmitting,
|
|
6857
|
+
className: "min-w-[120px]",
|
|
6858
|
+
children: isSubmitting ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
|
|
6859
|
+
/* @__PURE__ */ jsx(Loader, { variant: "spinner" }),
|
|
6860
|
+
loadingLabel
|
|
6861
|
+
] }) : submitLabel
|
|
6862
|
+
}
|
|
6863
|
+
) : /* @__PURE__ */ jsx(
|
|
6864
|
+
Button,
|
|
6865
|
+
{
|
|
6866
|
+
type: "button",
|
|
6867
|
+
onClick: handleNext,
|
|
6868
|
+
disabled: isSubmitting,
|
|
6869
|
+
className: "min-w-[120px]",
|
|
6870
|
+
children: nextLabel
|
|
6871
|
+
}
|
|
6872
|
+
)
|
|
6873
|
+
] })
|
|
6874
|
+
]
|
|
6875
|
+
}
|
|
6876
|
+
);
|
|
6877
|
+
}
|
|
6878
|
+
function WizardProgress({
|
|
6879
|
+
showPercentage = false,
|
|
6880
|
+
showStepCount = false,
|
|
6881
|
+
className
|
|
6882
|
+
}) {
|
|
6883
|
+
const { progress, currentStep, totalSteps } = useWizardContext();
|
|
6884
|
+
return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), children: [
|
|
6885
|
+
(showPercentage || showStepCount) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2 text-sm text-muted-foreground", children: [
|
|
6886
|
+
showStepCount && /* @__PURE__ */ jsxs("span", { children: [
|
|
6887
|
+
"Etapa ",
|
|
6888
|
+
currentStep + 1,
|
|
6889
|
+
" de ",
|
|
6890
|
+
totalSteps
|
|
6891
|
+
] }),
|
|
6892
|
+
showPercentage && /* @__PURE__ */ jsxs("span", { className: !showStepCount ? "ml-auto" : "", children: [
|
|
6893
|
+
progress,
|
|
6894
|
+
"%"
|
|
6895
|
+
] })
|
|
6896
|
+
] }),
|
|
6897
|
+
/* @__PURE__ */ jsx(
|
|
6898
|
+
"div",
|
|
6899
|
+
{
|
|
6900
|
+
className: "h-2 w-full bg-muted rounded-full overflow-hidden",
|
|
6901
|
+
role: "progressbar",
|
|
6902
|
+
"aria-valuenow": progress,
|
|
6903
|
+
"aria-valuemin": 0,
|
|
6904
|
+
"aria-valuemax": 100,
|
|
6905
|
+
"aria-label": `Progresso: ${progress}%`,
|
|
6906
|
+
children: /* @__PURE__ */ jsx(
|
|
6907
|
+
"div",
|
|
6908
|
+
{
|
|
6909
|
+
className: "h-full bg-primary transition-all duration-300 ease-out rounded-full",
|
|
6910
|
+
style: { width: `${progress}%` }
|
|
6911
|
+
}
|
|
6912
|
+
)
|
|
6913
|
+
}
|
|
6914
|
+
)
|
|
6915
|
+
] });
|
|
6916
|
+
}
|
|
6917
|
+
function WizardRoot({
|
|
6918
|
+
children,
|
|
6919
|
+
form,
|
|
6920
|
+
steps,
|
|
6921
|
+
initialStep,
|
|
6922
|
+
onStepChange,
|
|
6923
|
+
onComplete,
|
|
6924
|
+
validateOnNext = true,
|
|
6925
|
+
allowJumpToStep = false,
|
|
6926
|
+
className
|
|
6927
|
+
}) {
|
|
6928
|
+
const handleSubmit = async (data) => {
|
|
6929
|
+
if (onComplete) {
|
|
6930
|
+
await onComplete(data);
|
|
6931
|
+
}
|
|
6932
|
+
};
|
|
6933
|
+
return /* @__PURE__ */ jsx(
|
|
6934
|
+
WizardProvider,
|
|
6935
|
+
{
|
|
6936
|
+
form,
|
|
6937
|
+
steps,
|
|
6938
|
+
initialStep,
|
|
6939
|
+
onStepChange,
|
|
6940
|
+
onComplete,
|
|
6941
|
+
validateOnNext,
|
|
6942
|
+
allowJumpToStep,
|
|
6943
|
+
children: /* @__PURE__ */ jsx(FormProvider$1, { ...form, children: /* @__PURE__ */ jsx(
|
|
6944
|
+
"form",
|
|
6945
|
+
{
|
|
6946
|
+
onSubmit: form.handleSubmit(handleSubmit),
|
|
6947
|
+
className: cn("flex flex-col", className),
|
|
6948
|
+
noValidate: true,
|
|
6949
|
+
children
|
|
6950
|
+
}
|
|
6951
|
+
) })
|
|
6952
|
+
}
|
|
6953
|
+
);
|
|
6954
|
+
}
|
|
6955
|
+
var Wizard = Object.assign(WizardRoot, {
|
|
6956
|
+
/** Visual step indicators */
|
|
6957
|
+
Steps: WizardSteps,
|
|
6958
|
+
/** Container for step panels */
|
|
6959
|
+
Content: WizardContent,
|
|
6960
|
+
/** Individual step content panel */
|
|
6961
|
+
Panel: WizardPanel,
|
|
6962
|
+
/** Navigation buttons (prev, next, submit) */
|
|
6963
|
+
Navigation: WizardNavigation,
|
|
6964
|
+
/** Progress bar indicator */
|
|
6965
|
+
Progress: WizardProgress
|
|
6966
|
+
});
|
|
6312
6967
|
function Logo({
|
|
6313
6968
|
width = 100,
|
|
6314
6969
|
color = "currentColor",
|
|
@@ -6451,6 +7106,6 @@ var THEME_INFO = {
|
|
|
6451
7106
|
}
|
|
6452
7107
|
};
|
|
6453
7108
|
|
|
6454
|
-
export { AuthLayout, Avatar, AvatarFallback, AvatarImage, Badge, BigNumberCard, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, DENSITY_CONFIG, DashboardLayout, DataTable, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DialogWrapper, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FACTER_THEMES, Form, FormCheckbox, FormDescription, FormError, FormFieldProvider, FormFieldWrapper, FormInput, FormLabel, FormProvider, FormRadioGroup, FormSelect, FormSwitch, FormTextarea, GlobalLoaderController, Input, Kanban, Loader, LoaderProvider, Logo, MobileNav, MobileNavItem, Navbar, NavbarCompanyProfile, NavbarNotification, NavbarUserMenu, Popover, PopoverContent, PopoverTrigger, RippleBackground, RippleEffect, RippleWrapper, ScrollArea, ScrollBar, SectionHeader, SectionHeaderActions, SectionHeaderBadge, SectionHeaderContent, SectionHeaderIcon, SectionHeaderRoot, SectionHeaderSubtitle, SectionHeaderTitle, Select, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectionLayout, Separator3 as Separator, Sidebar, Skeleton, Sparkline, Switch, THEME_INFO, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeProvider, ThemeToggle, Toaster, cn, loader, toast, useDashboardLayout, useDataTable, useDataTableColumnVisibility, useDataTableDensity, useDataTableEmpty, useDataTableInstance, useDataTableLoading, useDataTableMeta, useDataTablePagination, useDataTableSelection, useDataTableSorting, useDataTableState, useDebounce, useDebouncedCallback, useFormContext, useFormFieldContext, useKanban, useKanbanOptional, useLoader, useMediaQuery2 as useMediaQuery, useSidebar, useSidebarOptional, useTheme };
|
|
7109
|
+
export { AuthLayout, Avatar, AvatarFallback, AvatarImage, Badge, BigNumberCard, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, DENSITY_CONFIG, DashboardLayout, DataTable, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DialogWrapper, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FACTER_THEMES, Form, FormCheckbox, FormDescription, FormError, FormFieldProvider, FormFieldWrapper, FormInput, FormLabel, FormProvider, FormRadioGroup, FormSelect, FormSwitch, FormTextarea, GlobalLoaderController, Input, Kanban, Loader, LoaderProvider, Logo, MobileNav, MobileNavItem, Navbar, NavbarCompanyProfile, NavbarNotification, NavbarUserMenu, Popover, PopoverContent, PopoverTrigger, RippleBackground, RippleEffect, RippleWrapper, ScrollArea, ScrollBar, SectionHeader, SectionHeaderActions, SectionHeaderBadge, SectionHeaderContent, SectionHeaderIcon, SectionHeaderRoot, SectionHeaderSubtitle, SectionHeaderTitle, Select, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectionLayout, Separator3 as Separator, Sidebar, Skeleton, Sparkline, Switch, THEME_INFO, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeProvider, ThemeToggle, Toaster, Wizard, WizardContent, WizardNavigation, WizardPanel, WizardProgress, WizardProvider, WizardStepConnector, WizardStepIndicator, WizardSteps, cn, loader, toast, useDashboardLayout, useDataTable, useDataTableColumnVisibility, useDataTableDensity, useDataTableEmpty, useDataTableInstance, useDataTableLoading, useDataTableMeta, useDataTablePagination, useDataTableSelection, useDataTableSorting, useDataTableState, useDebounce, useDebouncedCallback, useFormContext, useFormFieldContext, useKanban, useKanbanOptional, useLoader, useMediaQuery2 as useMediaQuery, useSidebar, useSidebarOptional, useTheme, useWizardContext, useWizardContextOptional };
|
|
6455
7110
|
//# sourceMappingURL=index.mjs.map
|
|
6456
7111
|
//# sourceMappingURL=index.mjs.map
|