@beweco/aurora-ui 0.6.0 → 0.6.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/assets/css/styles.css +1 -1
- package/dist/index.cjs.js +35 -141
- package/dist/index.esm.js +35 -141
- package/dist/types/components/autocomplete/AutoComplete.d.ts.map +1 -1
- package/dist/types/components/multi-step-wizard/_internal/MultiStepSidebar.d.ts.map +1 -1
- package/dist/types/components/row-steps/RowSteps.d.ts +1 -0
- package/dist/types/components/row-steps/RowSteps.d.ts.map +1 -1
- package/dist/types/components/vertical-steps/VerticalSteps.d.ts +1 -0
- package/dist/types/components/vertical-steps/VerticalSteps.d.ts.map +1 -1
- package/dist/types/components/vertical-steps/VerticalSteps.types.d.ts +0 -17
- package/dist/types/components/vertical-steps/VerticalSteps.types.d.ts.map +1 -1
- package/dist/types/components/vertical-steps/index.d.ts +1 -1
- package/dist/types/components/vertical-steps/index.d.ts.map +1 -1
- package/dist/types/index.d.ts +2 -0
- package/dist/types/index.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
|
@@ -615,7 +615,7 @@ var AuraAutocomplete = function (_a) {
|
|
|
615
615
|
var resolvedIcon = icon === undefined ? DEFAULT_ICON : icon;
|
|
616
616
|
var hasIcon = resolvedIcon != null;
|
|
617
617
|
var endContent = hasIcon ? (jsxRuntime.jsx("span", { className: ICON_WRAPPER_CLASSNAME, children: resolvedIcon })) : null;
|
|
618
|
-
return (jsxRuntime.jsxs("div", { children: [label && (jsxRuntime.jsx("label", { htmlFor: autoId, className: "block mb-2 text-tiny text-default-600", children: label })), jsxRuntime.jsx(react.Autocomplete, __assign({}, props, { id: autoId, label: undefined, labelPlacement: "outside", variant: variant, size: size, radius: radius, endContent: endContent, classNames: __assign({ base: "[&_[data-slot=input-wrapper][data-focus=true]]:!border-primary-500", popoverContent: "[&_li[data-hover=true]]:!bg-primary-50 [&_li[data-hover=true]]:!text-default-600 [&_li]:!text-default-500" }, (hasIcon && { selectorButton: "!hidden" })) }))] }));
|
|
618
|
+
return (jsxRuntime.jsxs("div", { children: [label && (jsxRuntime.jsx("label", { htmlFor: autoId, className: "block mb-2 text-tiny text-default-600", children: label })), jsxRuntime.jsx(react.Autocomplete, __assign({}, props, { id: autoId, label: undefined, labelPlacement: "outside", variant: variant, size: size, radius: radius, endContent: endContent, classNames: __assign({ base: "[&_[data-slot=input-wrapper][data-focus=true]]:!border-primary-500", popoverContent: "aura-popover-content [&_li[data-hover=true]]:!bg-primary-50 [&_li[data-hover=true]]:!text-default-600 [&_li]:!text-default-500" }, (hasIcon && { selectorButton: "!hidden" })) }))] }));
|
|
619
619
|
};
|
|
620
620
|
|
|
621
621
|
/**
|
|
@@ -2490,37 +2490,19 @@ function $458b0a5536c1a7cf$export$40bfa8c7b0832715(value, defaultValue, onChange
|
|
|
2490
2490
|
];
|
|
2491
2491
|
}
|
|
2492
2492
|
|
|
2493
|
+
var VALID_STEP_COLORS$1 = [
|
|
2494
|
+
"primary",
|
|
2495
|
+
"secondary",
|
|
2496
|
+
"success",
|
|
2497
|
+
"warning",
|
|
2498
|
+
"danger",
|
|
2499
|
+
"default",
|
|
2500
|
+
];
|
|
2493
2501
|
var defaultTranslations$7 = {
|
|
2494
2502
|
checkIconTitle: "Check",
|
|
2495
2503
|
};
|
|
2496
|
-
var COLOR_DEFAULTS = {
|
|
2497
|
-
primary: {
|
|
2498
|
-
stepColor: "hsl(var(--heroui-primary))",
|
|
2499
|
-
stepFgColor: "hsl(var(--heroui-primary-foreground))",
|
|
2500
|
-
},
|
|
2501
|
-
secondary: {
|
|
2502
|
-
stepColor: "hsl(var(--heroui-secondary))",
|
|
2503
|
-
stepFgColor: "hsl(var(--heroui-secondary-foreground))",
|
|
2504
|
-
},
|
|
2505
|
-
success: {
|
|
2506
|
-
stepColor: "hsl(var(--heroui-success))",
|
|
2507
|
-
stepFgColor: "hsl(var(--heroui-success-foreground))",
|
|
2508
|
-
},
|
|
2509
|
-
warning: {
|
|
2510
|
-
stepColor: "hsl(var(--heroui-warning))",
|
|
2511
|
-
stepFgColor: "hsl(var(--heroui-warning-foreground))",
|
|
2512
|
-
},
|
|
2513
|
-
danger: {
|
|
2514
|
-
stepColor: "hsl(var(--heroui-danger))",
|
|
2515
|
-
stepFgColor: "hsl(var(--heroui-danger-foreground))",
|
|
2516
|
-
},
|
|
2517
|
-
default: {
|
|
2518
|
-
stepColor: "hsl(var(--heroui-default))",
|
|
2519
|
-
stepFgColor: "hsl(var(--heroui-default-foreground))",
|
|
2520
|
-
},
|
|
2521
|
-
};
|
|
2522
2504
|
var VerticalSteps = React.forwardRef(function (_a, ref) {
|
|
2523
|
-
var _b = _a.color, color = _b === void 0 ? "primary" : _b, _c = _a.steps, stepsProp = _c === void 0 ? [] : _c, _d = _a.defaultStep, defaultStep = _d === void 0 ? 0 : _d, onStepChange = _a.onStepChange, currentStepProp = _a.currentStep, _e = _a.hideProgressBars, hideProgressBars = _e === void 0 ? false : _e, _f = _a.hideInactiveDescriptions, hideInactiveDescriptions = _f === void 0 ? false : _f, stepClassName = _a.stepClassName, className = _a.className, translations = _a.translations,
|
|
2505
|
+
var _b = _a.color, color = _b === void 0 ? "primary" : _b, _c = _a.steps, stepsProp = _c === void 0 ? [] : _c, _d = _a.defaultStep, defaultStep = _d === void 0 ? 0 : _d, onStepChange = _a.onStepChange, currentStepProp = _a.currentStep, _e = _a.hideProgressBars, hideProgressBars = _e === void 0 ? false : _e, _f = _a.hideInactiveDescriptions, hideInactiveDescriptions = _f === void 0 ? false : _f, stepClassName = _a.stepClassName, className = _a.className, translations = _a.translations, props = __rest(_a, ["color", "steps", "defaultStep", "onStepChange", "currentStep", "hideProgressBars", "hideInactiveDescriptions", "stepClassName", "className", "translations"]);
|
|
2524
2506
|
var _g = $458b0a5536c1a7cf$export$40bfa8c7b0832715(currentStepProp, defaultStep, onStepChange), currentStep = _g[0], setCurrentStep = _g[1];
|
|
2525
2507
|
var t = __assign(__assign({}, defaultTranslations$7), translations);
|
|
2526
2508
|
var steps = React.useMemo(function () {
|
|
@@ -2529,23 +2511,10 @@ var VerticalSteps = React.forwardRef(function (_a, ref) {
|
|
|
2529
2511
|
}
|
|
2530
2512
|
return stepsProp;
|
|
2531
2513
|
}, [stepsProp]);
|
|
2532
|
-
var
|
|
2533
|
-
|
|
2534
|
-
|
|
2535
|
-
|
|
2536
|
-
"--step-color": (_b = colorVars === null || colorVars === void 0 ? void 0 : colorVars.stepColor) !== null && _b !== void 0 ? _b : defaults.stepColor,
|
|
2537
|
-
"--step-fg-color": (_c = colorVars === null || colorVars === void 0 ? void 0 : colorVars.stepFgColor) !== null && _c !== void 0 ? _c : defaults.stepFgColor,
|
|
2538
|
-
"--active-fg-color": (_d = colorVars === null || colorVars === void 0 ? void 0 : colorVars.activeFgColor) !== null && _d !== void 0 ? _d : "var(--step-fg-color)",
|
|
2539
|
-
"--active-border-color": (_e = colorVars === null || colorVars === void 0 ? void 0 : colorVars.activeBorderColor) !== null && _e !== void 0 ? _e : "var(--step-color)",
|
|
2540
|
-
"--active-color": (_f = colorVars === null || colorVars === void 0 ? void 0 : colorVars.activeColor) !== null && _f !== void 0 ? _f : "var(--step-color)",
|
|
2541
|
-
"--complete-background-color": (_g = colorVars === null || colorVars === void 0 ? void 0 : colorVars.completeBackgroundColor) !== null && _g !== void 0 ? _g : "var(--step-color)",
|
|
2542
|
-
"--complete-border-color": (_h = colorVars === null || colorVars === void 0 ? void 0 : colorVars.completeBorderColor) !== null && _h !== void 0 ? _h : "var(--step-color)",
|
|
2543
|
-
"--inactive-border-color": (_j = colorVars === null || colorVars === void 0 ? void 0 : colorVars.inactiveBorderColor) !== null && _j !== void 0 ? _j : "hsl(var(--heroui-default-300))",
|
|
2544
|
-
"--inactive-color": (_k = colorVars === null || colorVars === void 0 ? void 0 : colorVars.inactiveColor) !== null && _k !== void 0 ? _k : "hsl(var(--heroui-default-300))",
|
|
2545
|
-
"--inactive-bar-color": (_l = colorVars === null || colorVars === void 0 ? void 0 : colorVars.inactiveBarColor) !== null && _l !== void 0 ? _l : "hsl(var(--heroui-default-300))",
|
|
2546
|
-
};
|
|
2547
|
-
}, [color, colorVars]);
|
|
2548
|
-
return (jsxRuntime.jsx("nav", { "aria-label": "Progress", className: "max-w-fit", children: jsxRuntime.jsx("ol", { className: react.cn("flex flex-col gap-y-3", className), style: colorStyle, children: steps === null || steps === void 0 ? void 0 : steps.map(function (step, stepIdx) {
|
|
2514
|
+
var stepColor = VALID_STEP_COLORS$1.includes(color)
|
|
2515
|
+
? color
|
|
2516
|
+
: "primary";
|
|
2517
|
+
return (jsxRuntime.jsx("nav", { "aria-label": "Progress", className: "max-w-fit", children: jsxRuntime.jsx("ol", { "data-step-color": stepColor, className: react.cn("flex flex-col gap-y-3", className), children: steps === null || steps === void 0 ? void 0 : steps.map(function (step, stepIdx) {
|
|
2549
2518
|
var status = currentStep === stepIdx
|
|
2550
2519
|
? "active"
|
|
2551
2520
|
: step.isCompleted
|
|
@@ -2573,68 +2542,31 @@ var VerticalSteps = React.forwardRef(function (_a, ref) {
|
|
|
2573
2542
|
backgroundColor: "var(--complete-background-color)",
|
|
2574
2543
|
borderColor: "var(--complete-border-color)",
|
|
2575
2544
|
},
|
|
2576
|
-
}, children: jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: status === "complete" ? (jsxRuntime.jsx(IconComponent, {
|
|
2545
|
+
}, children: jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: status === "complete" ? (jsxRuntime.jsx(IconComponent, { className: " text-[var(--active-fg-color)] font-bold", icon: "material-symbols:check-rounded", title: t.checkIconTitle })) : (jsxRuntime.jsx("span", { children: stepIdx + 1 })) }) }) }) }) }), jsxRuntime.jsx("div", { className: "flex-1 text-left", children: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: react.cn("text-medium text-default-600 font-medium transition-[color,opacity] duration-300 group-active:opacity-70", {
|
|
2577
2546
|
"text-default-300": status === "inactive",
|
|
2578
2547
|
}), children: step.title }), (!hideInactiveDescriptions ||
|
|
2579
2548
|
status === "active") && (jsxRuntime.jsx("div", { className: react.cn("text-tiny text-default-600 lg:text-small transition-[color,opacity] duration-300 group-active:opacity-70", {
|
|
2580
2549
|
"text-default-300": status === "inactive",
|
|
2581
|
-
}), children: step.description }))] }) })] }), stepIdx) }), stepIdx < steps.length - 1 && !hideProgressBars && (jsxRuntime.jsx("div", { "aria-hidden": "true", className: react.cn("pointer-events-none absolute left-3 flex h-1/2 -translate-y-1/3 items-center px-4", {
|
|
2550
|
+
}), children: step.description }))] }) })] }), stepIdx) }), stepIdx < steps.length - 1 && !hideProgressBars && (jsxRuntime.jsx("div", { "aria-hidden": "true", className: react.cn("pointer-events-none absolute top-[calc(64px*var(--idx)+1)] left-3 flex h-1/2 -translate-y-1/3 items-center px-4", {
|
|
2582
2551
|
"h-1/4": stepIdx === currentStep,
|
|
2583
2552
|
}), style: {
|
|
2584
|
-
|
|
2585
|
-
|
|
2586
|
-
|
|
2587
|
-
|
|
2588
|
-
|
|
2589
|
-
height: stepIdx < currentStep ? "100%" : "0",
|
|
2590
|
-
} }) }) }))] }, stepIdx));
|
|
2553
|
+
// @ts-ignore
|
|
2554
|
+
"--idx": stepIdx,
|
|
2555
|
+
}, children: jsxRuntime.jsx("div", { className: react.cn("relative h-full w-0.5 bg-[var(--inactive-bar-color)] transition-colors duration-300", "after:absolute after:block after:h-0 after:w-full after:bg-[var(--active-border-color)] after:transition-[height] after:duration-300 after:content-['']", {
|
|
2556
|
+
"after:h-full": stepIdx < currentStep,
|
|
2557
|
+
}) }) }))] }, stepIdx));
|
|
2591
2558
|
}) }) }));
|
|
2592
2559
|
});
|
|
2593
2560
|
VerticalSteps.displayName = "VerticalSteps";
|
|
2594
2561
|
|
|
2595
|
-
var LIGHT_COLOR_VARS = {
|
|
2596
|
-
stepColor: "hsl(var(--heroui-primary-400))",
|
|
2597
|
-
activeColor: "hsl(var(--heroui-primary-400))",
|
|
2598
|
-
inactiveBorderColor: "hsl(var(--heroui-primary-200))",
|
|
2599
|
-
inactiveBarColor: "hsl(var(--heroui-primary-200))",
|
|
2600
|
-
inactiveColor: "hsl(var(--heroui-primary-300))",
|
|
2601
|
-
};
|
|
2602
|
-
var DARK_COLOR_VARS = {
|
|
2603
|
-
stepColor: "rgba(255,255,255,0.1)",
|
|
2604
|
-
stepFgColor: "hsl(var(--heroui-foreground-600))",
|
|
2605
|
-
activeColor: "hsl(var(--heroui-foreground-600))",
|
|
2606
|
-
activeBorderColor: "rgba(255,255,255,0.5)",
|
|
2607
|
-
inactiveBorderColor: "rgba(255,255,255,0.1)",
|
|
2608
|
-
inactiveBarColor: "rgba(255,255,255,0.1)",
|
|
2609
|
-
inactiveColor: "rgba(255,255,255,0.2)",
|
|
2610
|
-
};
|
|
2611
|
-
var useIsDarkMode = function () {
|
|
2612
|
-
var _a = React.useState(function () {
|
|
2613
|
-
if (typeof document !== "undefined") {
|
|
2614
|
-
return document.documentElement.classList.contains("dark");
|
|
2615
|
-
}
|
|
2616
|
-
return false;
|
|
2617
|
-
}), isDark = _a[0], setIsDark = _a[1];
|
|
2618
|
-
React.useEffect(function () {
|
|
2619
|
-
var el = document.documentElement;
|
|
2620
|
-
var update = function () { return setIsDark(el.classList.contains("dark")); };
|
|
2621
|
-
var observer = new MutationObserver(update);
|
|
2622
|
-
observer.observe(el, { attributes: true, attributeFilter: ["class"] });
|
|
2623
|
-
update();
|
|
2624
|
-
return function () { return observer.disconnect(); };
|
|
2625
|
-
}, []);
|
|
2626
|
-
return isDark;
|
|
2627
|
-
};
|
|
2628
2562
|
var MultiStepSidebar = React.forwardRef(function (_a, ref) {
|
|
2629
2563
|
var children = _a.children, className = _a.className, currentPage = _a.currentPage; _a.onBack; _a.onNext; var onChangePage = _a.onChangePage, steps = _a.steps; _a.goBackTranslation; var onClose = _a.onClose, _b = _a.hideInactiveDescriptions, hideInactiveDescriptions = _b === void 0 ? false : _b, props = __rest(_a, ["children", "className", "currentPage", "onBack", "onNext", "onChangePage", "steps", "goBackTranslation", "onClose", "hideInactiveDescriptions"]);
|
|
2630
|
-
var isDark = useIsDarkMode();
|
|
2631
|
-
var stepperColorVars = isDark ? DARK_COLOR_VARS : LIGHT_COLOR_VARS;
|
|
2632
2564
|
var handleOverlayClick = function (e) {
|
|
2633
2565
|
if (e.target === e.currentTarget) {
|
|
2634
2566
|
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
2635
2567
|
}
|
|
2636
2568
|
};
|
|
2637
|
-
return (jsxRuntime.jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-content3/50 backdrop-blur-sm", onClick: handleOverlayClick, children: jsxRuntime.jsxs("div", __assign({ ref: ref, className: react.cn("relative flex h-full w-full max-w-4xl overflow-hidden rounded-lg bg-background shadow-lg lg:h-auto lg:max-h-[85vh] lg:min-h-[512px]", className) }, props, { children: [jsxRuntime.jsx("div", { className: react.cn("absolute inset-y-0 left-0 hidden w-1/3 flex-col justify-start gap-y-8 overflow-y-auto p-8 md:flex [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]"), children: jsxRuntime.jsx(VerticalSteps, {
|
|
2569
|
+
return (jsxRuntime.jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-content3/50 backdrop-blur-sm", onClick: handleOverlayClick, children: jsxRuntime.jsxs("div", __assign({ ref: ref, className: react.cn("relative flex h-full w-full max-w-4xl overflow-hidden rounded-lg bg-background shadow-lg lg:h-auto lg:max-h-[85vh] lg:min-h-[512px]", className) }, props, { children: [jsxRuntime.jsx("div", { className: react.cn("absolute inset-y-0 left-0 hidden w-1/3 flex-col justify-start gap-y-8 overflow-y-auto p-8 md:flex [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]"), children: jsxRuntime.jsx(VerticalSteps, { className: "aura-stepper-theme", color: "primary", currentStep: currentPage, steps: steps, onStepChange: onChangePage, hideInactiveDescriptions: hideInactiveDescriptions }) }), jsxRuntime.jsxs("div", { className: "relative flex w-full flex-col items-center justify-between gap-4 md:ml-[33.333333%] md:w-2/3 md:p-4 min-h-0", children: [jsxRuntime.jsx(Button, { isIconOnly: true, className: "absolute right-4 top-4", size: "sm", variant: "light", color: "default", onPress: onClose, startContent: jsxRuntime.jsx(IconComponent, { className: "text-foreground", icon: "material-symbols:close-rounded", size: "lg" }) }), jsxRuntime.jsx("div", { className: "pt-9 w-10/12 md:hidden", children: jsxRuntime.jsx("div", { className: "flex w-full justify-center", children: jsxRuntime.jsx(StepIndicator, { className: "aura-stepper-theme", currentStep: currentPage + 1, totalSteps: steps.length }) }) }), jsxRuntime.jsx("div", { className: "flex flex-col flex-1 w-full justify-between p-4 sm:max-w-md md:max-w-lg overflow-y-auto min-h-0 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]", children: children })] })] })) }));
|
|
2638
2570
|
});
|
|
2639
2571
|
MultiStepSidebar.displayName = "MultiStepSidebar";
|
|
2640
2572
|
|
|
@@ -3297,6 +3229,14 @@ var PromotionalBanner = function (_a) {
|
|
|
3297
3229
|
}, variant: "bordered", onClick: handleButtonClick }, buttonProps, { children: finalButtonText })), showCloseButton && (jsxRuntime.jsx("div", { className: "flex flex-1 justify-end", children: jsxRuntime.jsx(react.Button, { isIconOnly: true, "aria-label": t.closeButtonLabel, className: "-m-1", size: "lg", variant: "bordered", onClick: handleClose, children: jsxRuntime.jsx(IconComponent, { "aria-hidden": "true", className: "text-default-500", icon: "lucide:x", size: "md" }) }) }))] }));
|
|
3298
3230
|
};
|
|
3299
3231
|
|
|
3232
|
+
var VALID_STEP_COLORS = [
|
|
3233
|
+
"primary",
|
|
3234
|
+
"secondary",
|
|
3235
|
+
"success",
|
|
3236
|
+
"warning",
|
|
3237
|
+
"danger",
|
|
3238
|
+
"default",
|
|
3239
|
+
];
|
|
3300
3240
|
var RowSteps = React.forwardRef(function (_a, ref) {
|
|
3301
3241
|
var _b = _a.color, color = _b === void 0 ? "primary" : _b, _c = _a.steps, stepsProp = _c === void 0 ? [] : _c, _d = _a.defaultStep, defaultStep = _d === void 0 ? 0 : _d, onStepChange = _a.onStepChange, currentStepProp = _a.currentStep, _e = _a.hideProgressBars, hideProgressBars = _e === void 0 ? false : _e, stepClassName = _a.stepClassName, className = _a.className; _a.translations; var props = __rest(_a, ["color", "steps", "defaultStep", "onStepChange", "currentStep", "hideProgressBars", "stepClassName", "className", "translations"]);
|
|
3302
3242
|
var _f = $458b0a5536c1a7cf$export$40bfa8c7b0832715(currentStepProp, defaultStep, onStepChange), currentStep = _f[0], setCurrentStep = _f[1];
|
|
@@ -3306,56 +3246,10 @@ var RowSteps = React.forwardRef(function (_a, ref) {
|
|
|
3306
3246
|
}
|
|
3307
3247
|
return stepsProp;
|
|
3308
3248
|
}, [stepsProp]);
|
|
3309
|
-
var
|
|
3310
|
-
|
|
3311
|
-
|
|
3312
|
-
|
|
3313
|
-
"[--step-color:hsl(var(--heroui-primary))]",
|
|
3314
|
-
"[--step-fg-color:hsl(var(--heroui-primary-foreground))]",
|
|
3315
|
-
],
|
|
3316
|
-
secondary: [
|
|
3317
|
-
"[--step-color:hsl(var(--heroui-secondary))]",
|
|
3318
|
-
"[--step-fg-color:hsl(var(--heroui-secondary-foreground))]",
|
|
3319
|
-
],
|
|
3320
|
-
success: [
|
|
3321
|
-
"[--step-color:hsl(var(--heroui-success))]",
|
|
3322
|
-
"[--step-fg-color:hsl(var(--heroui-success-foreground))]",
|
|
3323
|
-
],
|
|
3324
|
-
warning: [
|
|
3325
|
-
"[--step-color:hsl(var(--heroui-warning))]",
|
|
3326
|
-
"[--step-fg-color:hsl(var(--heroui-warning-foreground))]",
|
|
3327
|
-
],
|
|
3328
|
-
danger: [
|
|
3329
|
-
"[--step-color:hsl(var(--heroui-danger))]",
|
|
3330
|
-
"[--step-fg-color:hsl(var(--heroui-danger-foreground))]",
|
|
3331
|
-
],
|
|
3332
|
-
default: [
|
|
3333
|
-
"[--step-color:hsl(var(--heroui-default))]",
|
|
3334
|
-
"[--step-fg-color:hsl(var(--heroui-default-foreground))]",
|
|
3335
|
-
],
|
|
3336
|
-
};
|
|
3337
|
-
var _b = (_a = colorMappings[color]) !== null && _a !== void 0 ? _a : colorMappings.primary, userColor = _b[0], fgColor = _b[1];
|
|
3338
|
-
var colorsVars = [
|
|
3339
|
-
"[--active-fg-color:var(--step-fg-color)]",
|
|
3340
|
-
"[--active-border-color:var(--step-color)]",
|
|
3341
|
-
"[--active-color:var(--step-color)]",
|
|
3342
|
-
"[--complete-background-color:var(--step-color)]",
|
|
3343
|
-
"[--complete-border-color:var(--step-color)]",
|
|
3344
|
-
"[--inactive-border-color:hsl(var(--heroui-default-300))]",
|
|
3345
|
-
"[--inactive-color:hsl(var(--heroui-default-300))]",
|
|
3346
|
-
];
|
|
3347
|
-
if (!(className === null || className === void 0 ? void 0 : className.includes("--step-fg-color"))) {
|
|
3348
|
-
colorsVars.unshift(fgColor);
|
|
3349
|
-
}
|
|
3350
|
-
if (!(className === null || className === void 0 ? void 0 : className.includes("--step-color"))) {
|
|
3351
|
-
colorsVars.unshift(userColor);
|
|
3352
|
-
}
|
|
3353
|
-
if (!(className === null || className === void 0 ? void 0 : className.includes("--inactive-bar-color"))) {
|
|
3354
|
-
colorsVars.push("[--inactive-bar-color:hsl(var(--heroui-default-300))]");
|
|
3355
|
-
}
|
|
3356
|
-
return colorsVars;
|
|
3357
|
-
}, [color, className]);
|
|
3358
|
-
return (jsxRuntime.jsx("nav", { "aria-label": "Progress", className: "-my-4 max-w-fit overflow-x-auto py-4", children: jsxRuntime.jsx("ol", { className: react.cn("flex flex-row flex-nowrap gap-x-3", colors, className), children: steps === null || steps === void 0 ? void 0 : steps.map(function (step, stepIdx) {
|
|
3249
|
+
var stepColor = VALID_STEP_COLORS.includes(color)
|
|
3250
|
+
? color
|
|
3251
|
+
: "primary";
|
|
3252
|
+
return (jsxRuntime.jsx("nav", { "aria-label": "Progress", className: "-my-4 max-w-fit overflow-x-auto py-4", children: jsxRuntime.jsx("ol", { "data-step-color": stepColor, className: react.cn("flex flex-row flex-nowrap gap-x-3", className), children: steps === null || steps === void 0 ? void 0 : steps.map(function (step, stepIdx) {
|
|
3359
3253
|
var status = currentStep === stepIdx
|
|
3360
3254
|
? "active"
|
|
3361
3255
|
: currentStep < stepIdx
|
|
@@ -3808,7 +3702,7 @@ var Select = function (_a) {
|
|
|
3808
3702
|
return (jsxRuntime.jsx("div", { className: "group", children: jsxRuntime.jsx(react.Select, __assign({}, props, { id: selectId, label: label, labelPlacement: "outside", placeholder: placeholder, variant: variant, size: size, radius: radius, classNames: {
|
|
3809
3703
|
label: "text-default-600 text-tiny group-data-[filled=true]:text-default-600",
|
|
3810
3704
|
trigger: "data-[open=true]:!border-primary-500 data-[focus=true]:!border-primary-500 data-[disabled=true]:bg-default-100",
|
|
3811
|
-
popoverContent: "[&_[data-focus-visible=true]]:!outline-none [&_[data-selectable=true]:focus]:!bg-primary-50 [&_li]:!text-default-500 [&_li[data-hover=true]]:!text-default-600",
|
|
3705
|
+
popoverContent: "aura-popover-content [&_[data-focus-visible=true]]:!outline-none [&_[data-selectable=true]:focus]:!bg-primary-50 [&_li]:!text-default-500 [&_li[data-hover=true]]:!text-default-600",
|
|
3812
3706
|
} })) }));
|
|
3813
3707
|
};
|
|
3814
3708
|
|
package/dist/index.esm.js
CHANGED
|
@@ -616,7 +616,7 @@ var AuraAutocomplete = function (_a) {
|
|
|
616
616
|
var resolvedIcon = icon === undefined ? DEFAULT_ICON : icon;
|
|
617
617
|
var hasIcon = resolvedIcon != null;
|
|
618
618
|
var endContent = hasIcon ? (jsx("span", { className: ICON_WRAPPER_CLASSNAME, children: resolvedIcon })) : null;
|
|
619
|
-
return (jsxs("div", { children: [label && (jsx("label", { htmlFor: autoId, className: "block mb-2 text-tiny text-default-600", children: label })), jsx(Autocomplete, __assign({}, props, { id: autoId, label: undefined, labelPlacement: "outside", variant: variant, size: size, radius: radius, endContent: endContent, classNames: __assign({ base: "[&_[data-slot=input-wrapper][data-focus=true]]:!border-primary-500", popoverContent: "[&_li[data-hover=true]]:!bg-primary-50 [&_li[data-hover=true]]:!text-default-600 [&_li]:!text-default-500" }, (hasIcon && { selectorButton: "!hidden" })) }))] }));
|
|
619
|
+
return (jsxs("div", { children: [label && (jsx("label", { htmlFor: autoId, className: "block mb-2 text-tiny text-default-600", children: label })), jsx(Autocomplete, __assign({}, props, { id: autoId, label: undefined, labelPlacement: "outside", variant: variant, size: size, radius: radius, endContent: endContent, classNames: __assign({ base: "[&_[data-slot=input-wrapper][data-focus=true]]:!border-primary-500", popoverContent: "aura-popover-content [&_li[data-hover=true]]:!bg-primary-50 [&_li[data-hover=true]]:!text-default-600 [&_li]:!text-default-500" }, (hasIcon && { selectorButton: "!hidden" })) }))] }));
|
|
620
620
|
};
|
|
621
621
|
|
|
622
622
|
/**
|
|
@@ -2491,37 +2491,19 @@ function $458b0a5536c1a7cf$export$40bfa8c7b0832715(value, defaultValue, onChange
|
|
|
2491
2491
|
];
|
|
2492
2492
|
}
|
|
2493
2493
|
|
|
2494
|
+
var VALID_STEP_COLORS$1 = [
|
|
2495
|
+
"primary",
|
|
2496
|
+
"secondary",
|
|
2497
|
+
"success",
|
|
2498
|
+
"warning",
|
|
2499
|
+
"danger",
|
|
2500
|
+
"default",
|
|
2501
|
+
];
|
|
2494
2502
|
var defaultTranslations$7 = {
|
|
2495
2503
|
checkIconTitle: "Check",
|
|
2496
2504
|
};
|
|
2497
|
-
var COLOR_DEFAULTS = {
|
|
2498
|
-
primary: {
|
|
2499
|
-
stepColor: "hsl(var(--heroui-primary))",
|
|
2500
|
-
stepFgColor: "hsl(var(--heroui-primary-foreground))",
|
|
2501
|
-
},
|
|
2502
|
-
secondary: {
|
|
2503
|
-
stepColor: "hsl(var(--heroui-secondary))",
|
|
2504
|
-
stepFgColor: "hsl(var(--heroui-secondary-foreground))",
|
|
2505
|
-
},
|
|
2506
|
-
success: {
|
|
2507
|
-
stepColor: "hsl(var(--heroui-success))",
|
|
2508
|
-
stepFgColor: "hsl(var(--heroui-success-foreground))",
|
|
2509
|
-
},
|
|
2510
|
-
warning: {
|
|
2511
|
-
stepColor: "hsl(var(--heroui-warning))",
|
|
2512
|
-
stepFgColor: "hsl(var(--heroui-warning-foreground))",
|
|
2513
|
-
},
|
|
2514
|
-
danger: {
|
|
2515
|
-
stepColor: "hsl(var(--heroui-danger))",
|
|
2516
|
-
stepFgColor: "hsl(var(--heroui-danger-foreground))",
|
|
2517
|
-
},
|
|
2518
|
-
default: {
|
|
2519
|
-
stepColor: "hsl(var(--heroui-default))",
|
|
2520
|
-
stepFgColor: "hsl(var(--heroui-default-foreground))",
|
|
2521
|
-
},
|
|
2522
|
-
};
|
|
2523
2505
|
var VerticalSteps = React.forwardRef(function (_a, ref) {
|
|
2524
|
-
var _b = _a.color, color = _b === void 0 ? "primary" : _b, _c = _a.steps, stepsProp = _c === void 0 ? [] : _c, _d = _a.defaultStep, defaultStep = _d === void 0 ? 0 : _d, onStepChange = _a.onStepChange, currentStepProp = _a.currentStep, _e = _a.hideProgressBars, hideProgressBars = _e === void 0 ? false : _e, _f = _a.hideInactiveDescriptions, hideInactiveDescriptions = _f === void 0 ? false : _f, stepClassName = _a.stepClassName, className = _a.className, translations = _a.translations,
|
|
2506
|
+
var _b = _a.color, color = _b === void 0 ? "primary" : _b, _c = _a.steps, stepsProp = _c === void 0 ? [] : _c, _d = _a.defaultStep, defaultStep = _d === void 0 ? 0 : _d, onStepChange = _a.onStepChange, currentStepProp = _a.currentStep, _e = _a.hideProgressBars, hideProgressBars = _e === void 0 ? false : _e, _f = _a.hideInactiveDescriptions, hideInactiveDescriptions = _f === void 0 ? false : _f, stepClassName = _a.stepClassName, className = _a.className, translations = _a.translations, props = __rest(_a, ["color", "steps", "defaultStep", "onStepChange", "currentStep", "hideProgressBars", "hideInactiveDescriptions", "stepClassName", "className", "translations"]);
|
|
2525
2507
|
var _g = $458b0a5536c1a7cf$export$40bfa8c7b0832715(currentStepProp, defaultStep, onStepChange), currentStep = _g[0], setCurrentStep = _g[1];
|
|
2526
2508
|
var t = __assign(__assign({}, defaultTranslations$7), translations);
|
|
2527
2509
|
var steps = React.useMemo(function () {
|
|
@@ -2530,23 +2512,10 @@ var VerticalSteps = React.forwardRef(function (_a, ref) {
|
|
|
2530
2512
|
}
|
|
2531
2513
|
return stepsProp;
|
|
2532
2514
|
}, [stepsProp]);
|
|
2533
|
-
var
|
|
2534
|
-
|
|
2535
|
-
|
|
2536
|
-
|
|
2537
|
-
"--step-color": (_b = colorVars === null || colorVars === void 0 ? void 0 : colorVars.stepColor) !== null && _b !== void 0 ? _b : defaults.stepColor,
|
|
2538
|
-
"--step-fg-color": (_c = colorVars === null || colorVars === void 0 ? void 0 : colorVars.stepFgColor) !== null && _c !== void 0 ? _c : defaults.stepFgColor,
|
|
2539
|
-
"--active-fg-color": (_d = colorVars === null || colorVars === void 0 ? void 0 : colorVars.activeFgColor) !== null && _d !== void 0 ? _d : "var(--step-fg-color)",
|
|
2540
|
-
"--active-border-color": (_e = colorVars === null || colorVars === void 0 ? void 0 : colorVars.activeBorderColor) !== null && _e !== void 0 ? _e : "var(--step-color)",
|
|
2541
|
-
"--active-color": (_f = colorVars === null || colorVars === void 0 ? void 0 : colorVars.activeColor) !== null && _f !== void 0 ? _f : "var(--step-color)",
|
|
2542
|
-
"--complete-background-color": (_g = colorVars === null || colorVars === void 0 ? void 0 : colorVars.completeBackgroundColor) !== null && _g !== void 0 ? _g : "var(--step-color)",
|
|
2543
|
-
"--complete-border-color": (_h = colorVars === null || colorVars === void 0 ? void 0 : colorVars.completeBorderColor) !== null && _h !== void 0 ? _h : "var(--step-color)",
|
|
2544
|
-
"--inactive-border-color": (_j = colorVars === null || colorVars === void 0 ? void 0 : colorVars.inactiveBorderColor) !== null && _j !== void 0 ? _j : "hsl(var(--heroui-default-300))",
|
|
2545
|
-
"--inactive-color": (_k = colorVars === null || colorVars === void 0 ? void 0 : colorVars.inactiveColor) !== null && _k !== void 0 ? _k : "hsl(var(--heroui-default-300))",
|
|
2546
|
-
"--inactive-bar-color": (_l = colorVars === null || colorVars === void 0 ? void 0 : colorVars.inactiveBarColor) !== null && _l !== void 0 ? _l : "hsl(var(--heroui-default-300))",
|
|
2547
|
-
};
|
|
2548
|
-
}, [color, colorVars]);
|
|
2549
|
-
return (jsx("nav", { "aria-label": "Progress", className: "max-w-fit", children: jsx("ol", { className: cn("flex flex-col gap-y-3", className), style: colorStyle, children: steps === null || steps === void 0 ? void 0 : steps.map(function (step, stepIdx) {
|
|
2515
|
+
var stepColor = VALID_STEP_COLORS$1.includes(color)
|
|
2516
|
+
? color
|
|
2517
|
+
: "primary";
|
|
2518
|
+
return (jsx("nav", { "aria-label": "Progress", className: "max-w-fit", children: jsx("ol", { "data-step-color": stepColor, className: cn("flex flex-col gap-y-3", className), children: steps === null || steps === void 0 ? void 0 : steps.map(function (step, stepIdx) {
|
|
2550
2519
|
var status = currentStep === stepIdx
|
|
2551
2520
|
? "active"
|
|
2552
2521
|
: step.isCompleted
|
|
@@ -2574,68 +2543,31 @@ var VerticalSteps = React.forwardRef(function (_a, ref) {
|
|
|
2574
2543
|
backgroundColor: "var(--complete-background-color)",
|
|
2575
2544
|
borderColor: "var(--complete-border-color)",
|
|
2576
2545
|
},
|
|
2577
|
-
}, children: jsx("div", { className: "flex items-center justify-center", children: status === "complete" ? (jsx(IconComponent, {
|
|
2546
|
+
}, children: jsx("div", { className: "flex items-center justify-center", children: status === "complete" ? (jsx(IconComponent, { className: " text-[var(--active-fg-color)] font-bold", icon: "material-symbols:check-rounded", title: t.checkIconTitle })) : (jsx("span", { children: stepIdx + 1 })) }) }) }) }) }), jsx("div", { className: "flex-1 text-left", children: jsxs("div", { children: [jsx("div", { className: cn("text-medium text-default-600 font-medium transition-[color,opacity] duration-300 group-active:opacity-70", {
|
|
2578
2547
|
"text-default-300": status === "inactive",
|
|
2579
2548
|
}), children: step.title }), (!hideInactiveDescriptions ||
|
|
2580
2549
|
status === "active") && (jsx("div", { className: cn("text-tiny text-default-600 lg:text-small transition-[color,opacity] duration-300 group-active:opacity-70", {
|
|
2581
2550
|
"text-default-300": status === "inactive",
|
|
2582
|
-
}), children: step.description }))] }) })] }), stepIdx) }), stepIdx < steps.length - 1 && !hideProgressBars && (jsx("div", { "aria-hidden": "true", className: cn("pointer-events-none absolute left-3 flex h-1/2 -translate-y-1/3 items-center px-4", {
|
|
2551
|
+
}), children: step.description }))] }) })] }), stepIdx) }), stepIdx < steps.length - 1 && !hideProgressBars && (jsx("div", { "aria-hidden": "true", className: cn("pointer-events-none absolute top-[calc(64px*var(--idx)+1)] left-3 flex h-1/2 -translate-y-1/3 items-center px-4", {
|
|
2583
2552
|
"h-1/4": stepIdx === currentStep,
|
|
2584
2553
|
}), style: {
|
|
2585
|
-
|
|
2586
|
-
|
|
2587
|
-
|
|
2588
|
-
|
|
2589
|
-
|
|
2590
|
-
height: stepIdx < currentStep ? "100%" : "0",
|
|
2591
|
-
} }) }) }))] }, stepIdx));
|
|
2554
|
+
// @ts-ignore
|
|
2555
|
+
"--idx": stepIdx,
|
|
2556
|
+
}, children: jsx("div", { className: cn("relative h-full w-0.5 bg-[var(--inactive-bar-color)] transition-colors duration-300", "after:absolute after:block after:h-0 after:w-full after:bg-[var(--active-border-color)] after:transition-[height] after:duration-300 after:content-['']", {
|
|
2557
|
+
"after:h-full": stepIdx < currentStep,
|
|
2558
|
+
}) }) }))] }, stepIdx));
|
|
2592
2559
|
}) }) }));
|
|
2593
2560
|
});
|
|
2594
2561
|
VerticalSteps.displayName = "VerticalSteps";
|
|
2595
2562
|
|
|
2596
|
-
var LIGHT_COLOR_VARS = {
|
|
2597
|
-
stepColor: "hsl(var(--heroui-primary-400))",
|
|
2598
|
-
activeColor: "hsl(var(--heroui-primary-400))",
|
|
2599
|
-
inactiveBorderColor: "hsl(var(--heroui-primary-200))",
|
|
2600
|
-
inactiveBarColor: "hsl(var(--heroui-primary-200))",
|
|
2601
|
-
inactiveColor: "hsl(var(--heroui-primary-300))",
|
|
2602
|
-
};
|
|
2603
|
-
var DARK_COLOR_VARS = {
|
|
2604
|
-
stepColor: "rgba(255,255,255,0.1)",
|
|
2605
|
-
stepFgColor: "hsl(var(--heroui-foreground-600))",
|
|
2606
|
-
activeColor: "hsl(var(--heroui-foreground-600))",
|
|
2607
|
-
activeBorderColor: "rgba(255,255,255,0.5)",
|
|
2608
|
-
inactiveBorderColor: "rgba(255,255,255,0.1)",
|
|
2609
|
-
inactiveBarColor: "rgba(255,255,255,0.1)",
|
|
2610
|
-
inactiveColor: "rgba(255,255,255,0.2)",
|
|
2611
|
-
};
|
|
2612
|
-
var useIsDarkMode = function () {
|
|
2613
|
-
var _a = React.useState(function () {
|
|
2614
|
-
if (typeof document !== "undefined") {
|
|
2615
|
-
return document.documentElement.classList.contains("dark");
|
|
2616
|
-
}
|
|
2617
|
-
return false;
|
|
2618
|
-
}), isDark = _a[0], setIsDark = _a[1];
|
|
2619
|
-
React.useEffect(function () {
|
|
2620
|
-
var el = document.documentElement;
|
|
2621
|
-
var update = function () { return setIsDark(el.classList.contains("dark")); };
|
|
2622
|
-
var observer = new MutationObserver(update);
|
|
2623
|
-
observer.observe(el, { attributes: true, attributeFilter: ["class"] });
|
|
2624
|
-
update();
|
|
2625
|
-
return function () { return observer.disconnect(); };
|
|
2626
|
-
}, []);
|
|
2627
|
-
return isDark;
|
|
2628
|
-
};
|
|
2629
2563
|
var MultiStepSidebar = React.forwardRef(function (_a, ref) {
|
|
2630
2564
|
var children = _a.children, className = _a.className, currentPage = _a.currentPage; _a.onBack; _a.onNext; var onChangePage = _a.onChangePage, steps = _a.steps; _a.goBackTranslation; var onClose = _a.onClose, _b = _a.hideInactiveDescriptions, hideInactiveDescriptions = _b === void 0 ? false : _b, props = __rest(_a, ["children", "className", "currentPage", "onBack", "onNext", "onChangePage", "steps", "goBackTranslation", "onClose", "hideInactiveDescriptions"]);
|
|
2631
|
-
var isDark = useIsDarkMode();
|
|
2632
|
-
var stepperColorVars = isDark ? DARK_COLOR_VARS : LIGHT_COLOR_VARS;
|
|
2633
2565
|
var handleOverlayClick = function (e) {
|
|
2634
2566
|
if (e.target === e.currentTarget) {
|
|
2635
2567
|
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
2636
2568
|
}
|
|
2637
2569
|
};
|
|
2638
|
-
return (jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-content3/50 backdrop-blur-sm", onClick: handleOverlayClick, children: jsxs("div", __assign({ ref: ref, className: cn("relative flex h-full w-full max-w-4xl overflow-hidden rounded-lg bg-background shadow-lg lg:h-auto lg:max-h-[85vh] lg:min-h-[512px]", className) }, props, { children: [jsx("div", { className: cn("absolute inset-y-0 left-0 hidden w-1/3 flex-col justify-start gap-y-8 overflow-y-auto p-8 md:flex [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]"), children: jsx(VerticalSteps, {
|
|
2570
|
+
return (jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-content3/50 backdrop-blur-sm", onClick: handleOverlayClick, children: jsxs("div", __assign({ ref: ref, className: cn("relative flex h-full w-full max-w-4xl overflow-hidden rounded-lg bg-background shadow-lg lg:h-auto lg:max-h-[85vh] lg:min-h-[512px]", className) }, props, { children: [jsx("div", { className: cn("absolute inset-y-0 left-0 hidden w-1/3 flex-col justify-start gap-y-8 overflow-y-auto p-8 md:flex [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]"), children: jsx(VerticalSteps, { className: "aura-stepper-theme", color: "primary", currentStep: currentPage, steps: steps, onStepChange: onChangePage, hideInactiveDescriptions: hideInactiveDescriptions }) }), jsxs("div", { className: "relative flex w-full flex-col items-center justify-between gap-4 md:ml-[33.333333%] md:w-2/3 md:p-4 min-h-0", children: [jsx(Button, { isIconOnly: true, className: "absolute right-4 top-4", size: "sm", variant: "light", color: "default", onPress: onClose, startContent: jsx(IconComponent, { className: "text-foreground", icon: "material-symbols:close-rounded", size: "lg" }) }), jsx("div", { className: "pt-9 w-10/12 md:hidden", children: jsx("div", { className: "flex w-full justify-center", children: jsx(StepIndicator, { className: "aura-stepper-theme", currentStep: currentPage + 1, totalSteps: steps.length }) }) }), jsx("div", { className: "flex flex-col flex-1 w-full justify-between p-4 sm:max-w-md md:max-w-lg overflow-y-auto min-h-0 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]", children: children })] })] })) }));
|
|
2639
2571
|
});
|
|
2640
2572
|
MultiStepSidebar.displayName = "MultiStepSidebar";
|
|
2641
2573
|
|
|
@@ -3298,6 +3230,14 @@ var PromotionalBanner = function (_a) {
|
|
|
3298
3230
|
}, variant: "bordered", onClick: handleButtonClick }, buttonProps, { children: finalButtonText })), showCloseButton && (jsx("div", { className: "flex flex-1 justify-end", children: jsx(Button$1, { isIconOnly: true, "aria-label": t.closeButtonLabel, className: "-m-1", size: "lg", variant: "bordered", onClick: handleClose, children: jsx(IconComponent, { "aria-hidden": "true", className: "text-default-500", icon: "lucide:x", size: "md" }) }) }))] }));
|
|
3299
3231
|
};
|
|
3300
3232
|
|
|
3233
|
+
var VALID_STEP_COLORS = [
|
|
3234
|
+
"primary",
|
|
3235
|
+
"secondary",
|
|
3236
|
+
"success",
|
|
3237
|
+
"warning",
|
|
3238
|
+
"danger",
|
|
3239
|
+
"default",
|
|
3240
|
+
];
|
|
3301
3241
|
var RowSteps = React.forwardRef(function (_a, ref) {
|
|
3302
3242
|
var _b = _a.color, color = _b === void 0 ? "primary" : _b, _c = _a.steps, stepsProp = _c === void 0 ? [] : _c, _d = _a.defaultStep, defaultStep = _d === void 0 ? 0 : _d, onStepChange = _a.onStepChange, currentStepProp = _a.currentStep, _e = _a.hideProgressBars, hideProgressBars = _e === void 0 ? false : _e, stepClassName = _a.stepClassName, className = _a.className; _a.translations; var props = __rest(_a, ["color", "steps", "defaultStep", "onStepChange", "currentStep", "hideProgressBars", "stepClassName", "className", "translations"]);
|
|
3303
3243
|
var _f = $458b0a5536c1a7cf$export$40bfa8c7b0832715(currentStepProp, defaultStep, onStepChange), currentStep = _f[0], setCurrentStep = _f[1];
|
|
@@ -3307,56 +3247,10 @@ var RowSteps = React.forwardRef(function (_a, ref) {
|
|
|
3307
3247
|
}
|
|
3308
3248
|
return stepsProp;
|
|
3309
3249
|
}, [stepsProp]);
|
|
3310
|
-
var
|
|
3311
|
-
|
|
3312
|
-
|
|
3313
|
-
|
|
3314
|
-
"[--step-color:hsl(var(--heroui-primary))]",
|
|
3315
|
-
"[--step-fg-color:hsl(var(--heroui-primary-foreground))]",
|
|
3316
|
-
],
|
|
3317
|
-
secondary: [
|
|
3318
|
-
"[--step-color:hsl(var(--heroui-secondary))]",
|
|
3319
|
-
"[--step-fg-color:hsl(var(--heroui-secondary-foreground))]",
|
|
3320
|
-
],
|
|
3321
|
-
success: [
|
|
3322
|
-
"[--step-color:hsl(var(--heroui-success))]",
|
|
3323
|
-
"[--step-fg-color:hsl(var(--heroui-success-foreground))]",
|
|
3324
|
-
],
|
|
3325
|
-
warning: [
|
|
3326
|
-
"[--step-color:hsl(var(--heroui-warning))]",
|
|
3327
|
-
"[--step-fg-color:hsl(var(--heroui-warning-foreground))]",
|
|
3328
|
-
],
|
|
3329
|
-
danger: [
|
|
3330
|
-
"[--step-color:hsl(var(--heroui-danger))]",
|
|
3331
|
-
"[--step-fg-color:hsl(var(--heroui-danger-foreground))]",
|
|
3332
|
-
],
|
|
3333
|
-
default: [
|
|
3334
|
-
"[--step-color:hsl(var(--heroui-default))]",
|
|
3335
|
-
"[--step-fg-color:hsl(var(--heroui-default-foreground))]",
|
|
3336
|
-
],
|
|
3337
|
-
};
|
|
3338
|
-
var _b = (_a = colorMappings[color]) !== null && _a !== void 0 ? _a : colorMappings.primary, userColor = _b[0], fgColor = _b[1];
|
|
3339
|
-
var colorsVars = [
|
|
3340
|
-
"[--active-fg-color:var(--step-fg-color)]",
|
|
3341
|
-
"[--active-border-color:var(--step-color)]",
|
|
3342
|
-
"[--active-color:var(--step-color)]",
|
|
3343
|
-
"[--complete-background-color:var(--step-color)]",
|
|
3344
|
-
"[--complete-border-color:var(--step-color)]",
|
|
3345
|
-
"[--inactive-border-color:hsl(var(--heroui-default-300))]",
|
|
3346
|
-
"[--inactive-color:hsl(var(--heroui-default-300))]",
|
|
3347
|
-
];
|
|
3348
|
-
if (!(className === null || className === void 0 ? void 0 : className.includes("--step-fg-color"))) {
|
|
3349
|
-
colorsVars.unshift(fgColor);
|
|
3350
|
-
}
|
|
3351
|
-
if (!(className === null || className === void 0 ? void 0 : className.includes("--step-color"))) {
|
|
3352
|
-
colorsVars.unshift(userColor);
|
|
3353
|
-
}
|
|
3354
|
-
if (!(className === null || className === void 0 ? void 0 : className.includes("--inactive-bar-color"))) {
|
|
3355
|
-
colorsVars.push("[--inactive-bar-color:hsl(var(--heroui-default-300))]");
|
|
3356
|
-
}
|
|
3357
|
-
return colorsVars;
|
|
3358
|
-
}, [color, className]);
|
|
3359
|
-
return (jsx("nav", { "aria-label": "Progress", className: "-my-4 max-w-fit overflow-x-auto py-4", children: jsx("ol", { className: cn("flex flex-row flex-nowrap gap-x-3", colors, className), children: steps === null || steps === void 0 ? void 0 : steps.map(function (step, stepIdx) {
|
|
3250
|
+
var stepColor = VALID_STEP_COLORS.includes(color)
|
|
3251
|
+
? color
|
|
3252
|
+
: "primary";
|
|
3253
|
+
return (jsx("nav", { "aria-label": "Progress", className: "-my-4 max-w-fit overflow-x-auto py-4", children: jsx("ol", { "data-step-color": stepColor, className: cn("flex flex-row flex-nowrap gap-x-3", className), children: steps === null || steps === void 0 ? void 0 : steps.map(function (step, stepIdx) {
|
|
3360
3254
|
var status = currentStep === stepIdx
|
|
3361
3255
|
? "active"
|
|
3362
3256
|
: currentStep < stepIdx
|
|
@@ -3809,7 +3703,7 @@ var Select = function (_a) {
|
|
|
3809
3703
|
return (jsx("div", { className: "group", children: jsx(Select$1, __assign({}, props, { id: selectId, label: label, labelPlacement: "outside", placeholder: placeholder, variant: variant, size: size, radius: radius, classNames: {
|
|
3810
3704
|
label: "text-default-600 text-tiny group-data-[filled=true]:text-default-600",
|
|
3811
3705
|
trigger: "data-[open=true]:!border-primary-500 data-[focus=true]:!border-primary-500 data-[disabled=true]:bg-default-100",
|
|
3812
|
-
popoverContent: "[&_[data-focus-visible=true]]:!outline-none [&_[data-selectable=true]:focus]:!bg-primary-50 [&_li]:!text-default-500 [&_li[data-hover=true]]:!text-default-600",
|
|
3706
|
+
popoverContent: "aura-popover-content [&_[data-focus-visible=true]]:!outline-none [&_[data-selectable=true]:focus]:!bg-primary-50 [&_li]:!text-default-500 [&_li[data-hover=true]]:!text-default-600",
|
|
3813
3707
|
} })) }));
|
|
3814
3708
|
};
|
|
3815
3709
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AutoComplete.d.ts","sourceRoot":"","sources":["../../../../src/components/autocomplete/AutoComplete.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAelE;;;;;;;;;GASG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,
|
|
1
|
+
{"version":3,"file":"AutoComplete.d.ts","sourceRoot":"","sources":["../../../../src/components/autocomplete/AutoComplete.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAelE;;;;;;;;;GASG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA8C5D,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiStepSidebar.d.ts","sourceRoot":"","sources":["../../../../../src/components/multi-step-wizard/_internal/MultiStepSidebar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"MultiStepSidebar.d.ts","sourceRoot":"","sources":["../../../../../src/components/multi-step-wizard/_internal/MultiStepSidebar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEtE,eAAO,MAAM,gBAAgB,8FAyF5B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RowSteps.d.ts","sourceRoot":"","sources":["../../../../src/components/row-steps/RowSteps.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"RowSteps.d.ts","sourceRoot":"","sources":["../../../../src/components/row-steps/RowSteps.tsx"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAC;AAI1C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAgB,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAWpE,eAAO,MAAM,QAAQ,yFA8JpB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VerticalSteps.d.ts","sourceRoot":"","sources":["../../../../src/components/vertical-steps/VerticalSteps.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"VerticalSteps.d.ts","sourceRoot":"","sources":["../../../../src/components/vertical-steps/VerticalSteps.tsx"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAC;AAI1C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAEX,kBAAkB,EAElB,MAAM,uBAAuB,CAAC;AAe/B,eAAO,MAAM,aAAa,8FA2LzB,CAAC"}
|
|
@@ -10,18 +10,6 @@ export type Step = {
|
|
|
10
10
|
isStepValid?: boolean;
|
|
11
11
|
isCompleted?: boolean;
|
|
12
12
|
};
|
|
13
|
-
export interface VerticalStepColorVars {
|
|
14
|
-
stepColor?: string;
|
|
15
|
-
stepFgColor?: string;
|
|
16
|
-
activeColor?: string;
|
|
17
|
-
activeFgColor?: string;
|
|
18
|
-
activeBorderColor?: string;
|
|
19
|
-
completeBackgroundColor?: string;
|
|
20
|
-
completeBorderColor?: string;
|
|
21
|
-
inactiveBorderColor?: string;
|
|
22
|
-
inactiveColor?: string;
|
|
23
|
-
inactiveBarColor?: string;
|
|
24
|
-
}
|
|
25
13
|
export interface VerticalStepsProps extends React.HTMLAttributes<HTMLButtonElement> {
|
|
26
14
|
/**
|
|
27
15
|
* The steps to display. It can be a number or an array of steps.
|
|
@@ -74,10 +62,5 @@ export interface VerticalStepsProps extends React.HTMLAttributes<HTMLButtonEleme
|
|
|
74
62
|
* The translations for the component.
|
|
75
63
|
*/
|
|
76
64
|
translations?: VerticalStepsTranslations;
|
|
77
|
-
/**
|
|
78
|
-
* CSS variable overrides for step colors.
|
|
79
|
-
* Applied as inline styles to avoid Tailwind purging in production builds.
|
|
80
|
-
*/
|
|
81
|
-
colorVars?: VerticalStepColorVars;
|
|
82
65
|
}
|
|
83
66
|
//# sourceMappingURL=VerticalSteps.types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VerticalSteps.types.d.ts","sourceRoot":"","sources":["../../../../src/components/vertical-steps/VerticalSteps.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,yBAAyB;IACzC,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,MAAM,IAAI,GAAG;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"VerticalSteps.types.d.ts","sourceRoot":"","sources":["../../../../src/components/vertical-steps/VerticalSteps.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,yBAAyB;IACzC,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,MAAM,IAAI,GAAG;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,kBAChB,SAAQ,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC;IAC/C;;;;OAIG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE,CAAC;IACvB;;;;OAIG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAC7B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;;OAKG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C;;OAEG;IACH,YAAY,CAAC,EAAE,yBAAyB,CAAC;CACzC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/vertical-steps/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/vertical-steps/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC"}
|
package/dist/types/index.d.ts
CHANGED