@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/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, colorVars = _a.colorVars, props = __rest(_a, ["color", "steps", "defaultStep", "onStepChange", "currentStep", "hideProgressBars", "hideInactiveDescriptions", "stepClassName", "className", "translations", "colorVars"]);
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 colorStyle = React.useMemo(function () {
2533
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
2534
- var defaults = (_a = COLOR_DEFAULTS[color]) !== null && _a !== void 0 ? _a : COLOR_DEFAULTS.primary;
2535
- return {
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, { style: { color: "var(--active-fg-color)" }, className: "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", {
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
- top: "calc(64px * ".concat(stepIdx, " + 1px)"),
2585
- }, children: jsxRuntime.jsx("div", { className: "relative h-full w-0.5 transition-colors duration-300", style: {
2586
- backgroundColor: "var(--inactive-bar-color)",
2587
- }, children: jsxRuntime.jsx("div", { className: "absolute inset-0 w-full transition-[height] duration-300", style: {
2588
- backgroundColor: "var(--active-border-color)",
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, { colorVars: stepperColorVars, 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, { 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 })] })] })) }));
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 colors = React.useMemo(function () {
3310
- var _a;
3311
- var colorMappings = {
3312
- primary: [
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, colorVars = _a.colorVars, props = __rest(_a, ["color", "steps", "defaultStep", "onStepChange", "currentStep", "hideProgressBars", "hideInactiveDescriptions", "stepClassName", "className", "translations", "colorVars"]);
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 colorStyle = React.useMemo(function () {
2534
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
2535
- var defaults = (_a = COLOR_DEFAULTS[color]) !== null && _a !== void 0 ? _a : COLOR_DEFAULTS.primary;
2536
- return {
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, { style: { color: "var(--active-fg-color)" }, className: "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", {
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
- top: "calc(64px * ".concat(stepIdx, " + 1px)"),
2586
- }, children: jsx("div", { className: "relative h-full w-0.5 transition-colors duration-300", style: {
2587
- backgroundColor: "var(--inactive-bar-color)",
2588
- }, children: jsx("div", { className: "absolute inset-0 w-full transition-[height] duration-300", style: {
2589
- backgroundColor: "var(--active-border-color)",
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, { colorVars: stepperColorVars, 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, { 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 })] })] })) }));
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 colors = React.useMemo(function () {
3311
- var _a;
3312
- var colorMappings = {
3313
- primary: [
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,CA+C5D,CAAC"}
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;AAI1B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAwCtE,eAAO,MAAM,gBAAgB,8FA0F5B,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,3 +1,4 @@
1
+ import "../../styles/step-animations.css";
1
2
  import React from "react";
2
3
  import type { RowStepsProps } from "./RowSteps.types";
3
4
  export declare const RowSteps: React.ForwardRefExoticComponent<RowStepsProps & React.RefAttributes<HTMLButtonElement>>;
@@ -1 +1 @@
1
- {"version":3,"file":"RowSteps.d.ts","sourceRoot":"","sources":["../../../../src/components/row-steps/RowSteps.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAgB,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEpE,eAAO,MAAM,QAAQ,yFA+MpB,CAAC"}
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,3 +1,4 @@
1
+ import "../../styles/step-animations.css";
1
2
  import React from "react";
2
3
  import type { VerticalStepsProps } from "./VerticalSteps.types";
3
4
  export declare const VerticalSteps: React.ForwardRefExoticComponent<VerticalStepsProps & React.RefAttributes<HTMLButtonElement>>;
@@ -1 +1 @@
1
- {"version":3,"file":"VerticalSteps.d.ts","sourceRoot":"","sources":["../../../../src/components/vertical-steps/VerticalSteps.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAEX,kBAAkB,EAElB,MAAM,uBAAuB,CAAC;AAiC/B,eAAO,MAAM,aAAa,8FA4MzB,CAAC"}
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,qBAAqB;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,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;IACzC;;;OAGG;IACH,SAAS,CAAC,EAAE,qBAAqB,CAAC;CAClC"}
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,3 +1,3 @@
1
1
  export { VerticalSteps } from "./VerticalSteps";
2
- export type { VerticalStepColorVars, VerticalStepsProps } from "./VerticalSteps.types";
2
+ export type { VerticalStepsProps } from "./VerticalSteps.types";
3
3
  //# sourceMappingURL=index.d.ts.map
@@ -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,qBAAqB,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC"}
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"}
@@ -1,4 +1,6 @@
1
1
  import "./styles/globals.css";
2
+ import "./styles/step-animations.css";
3
+ import "./styles/dropdown-defenses.css";
2
4
  export * from "@heroui/react";
3
5
  export { Slider } from "@heroui/react";
4
6
  export * from "./components/accordion-list";