@beweco/aurora-ui 0.4.0 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/assets/css/styles.css +1 -1
  2. package/dist/index.cjs.js +88 -63
  3. package/dist/index.esm.js +88 -63
  4. package/dist/types/components/multi-step-wizard/_internal/MultiStepSidebar.d.ts.map +1 -1
  5. package/dist/types/components/vertical-steps/VerticalSteps.d.ts.map +1 -1
  6. package/dist/types/components/vertical-steps/VerticalSteps.types.d.ts +17 -0
  7. package/dist/types/components/vertical-steps/VerticalSteps.types.d.ts.map +1 -1
  8. package/dist/types/components/vertical-steps/index.d.ts +1 -1
  9. package/dist/types/components/vertical-steps/index.d.ts.map +1 -1
  10. package/package.json +1 -1
package/dist/index.cjs.js CHANGED
@@ -2493,8 +2493,34 @@ function $458b0a5536c1a7cf$export$40bfa8c7b0832715(value, defaultValue, onChange
2493
2493
  var defaultTranslations$7 = {
2494
2494
  checkIconTitle: "Check",
2495
2495
  };
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
+ };
2496
2522
  var VerticalSteps = React.forwardRef(function (_a, ref) {
2497
- 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"]);
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"]);
2498
2524
  var _g = $458b0a5536c1a7cf$export$40bfa8c7b0832715(currentStepProp, defaultStep, onStepChange), currentStep = _g[0], setCurrentStep = _g[1];
2499
2525
  var t = __assign(__assign({}, defaultTranslations$7), translations);
2500
2526
  var steps = React.useMemo(function () {
@@ -2503,56 +2529,23 @@ var VerticalSteps = React.forwardRef(function (_a, ref) {
2503
2529
  }
2504
2530
  return stepsProp;
2505
2531
  }, [stepsProp]);
2506
- var colors = React.useMemo(function () {
2507
- var _a;
2508
- var colorMappings = {
2509
- primary: [
2510
- "[--step-color:hsl(var(--heroui-primary))]",
2511
- "[--step-fg-color:hsl(var(--heroui-primary-foreground))]",
2512
- ],
2513
- secondary: [
2514
- "[--step-color:hsl(var(--heroui-secondary))]",
2515
- "[--step-fg-color:hsl(var(--heroui-secondary-foreground))]",
2516
- ],
2517
- success: [
2518
- "[--step-color:hsl(var(--heroui-success))]",
2519
- "[--step-fg-color:hsl(var(--heroui-success-foreground))]",
2520
- ],
2521
- warning: [
2522
- "[--step-color:hsl(var(--heroui-warning))]",
2523
- "[--step-fg-color:hsl(var(--heroui-warning-foreground))]",
2524
- ],
2525
- danger: [
2526
- "[--step-color:hsl(var(--heroui-danger))]",
2527
- "[--step-fg-color:hsl(var(--heroui-danger-foreground))]",
2528
- ],
2529
- default: [
2530
- "[--step-color:hsl(var(--heroui-default))]",
2531
- "[--step-fg-color:hsl(var(--heroui-default-foreground))]",
2532
- ],
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))",
2533
2546
  };
2534
- var _b = (_a = colorMappings[color]) !== null && _a !== void 0 ? _a : colorMappings.primary, userColor = _b[0], fgColor = _b[1];
2535
- var colorsVars = [
2536
- "[--active-fg-color:var(--step-fg-color)]",
2537
- "[--active-border-color:var(--step-color)]",
2538
- "[--active-color:var(--step-color)]",
2539
- "[--complete-background-color:var(--step-color)]",
2540
- "[--complete-border-color:var(--step-color)]",
2541
- "[--inactive-border-color:hsl(var(--heroui-default-300))]",
2542
- "[--inactive-color:hsl(var(--heroui-default-300))]",
2543
- ];
2544
- if (!(className === null || className === void 0 ? void 0 : className.includes("--step-fg-color"))) {
2545
- colorsVars.unshift(fgColor);
2546
- }
2547
- if (!(className === null || className === void 0 ? void 0 : className.includes("--step-color"))) {
2548
- colorsVars.unshift(userColor);
2549
- }
2550
- if (!(className === null || className === void 0 ? void 0 : className.includes("--inactive-bar-color"))) {
2551
- colorsVars.push("[--inactive-bar-color:hsl(var(--heroui-default-300))]");
2552
- }
2553
- return colorsVars;
2554
- }, [color, className]);
2555
- return (jsxRuntime.jsx("nav", { "aria-label": "Progress", className: "max-w-fit", children: jsxRuntime.jsx("ol", { className: react.cn("flex flex-col gap-y-3", colors, className), children: steps === null || steps === void 0 ? void 0 : steps.map(function (step, stepIdx) {
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) {
2556
2549
  var status = currentStep === stepIdx
2557
2550
  ? "active"
2558
2551
  : step.isCompleted
@@ -2580,36 +2573,68 @@ var VerticalSteps = React.forwardRef(function (_a, ref) {
2580
2573
  backgroundColor: "var(--complete-background-color)",
2581
2574
  borderColor: "var(--complete-border-color)",
2582
2575
  },
2583
- }, 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", {
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", {
2584
2577
  "text-default-300": status === "inactive",
2585
2578
  }), children: step.title }), (!hideInactiveDescriptions ||
2586
2579
  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", {
2587
2580
  "text-default-300": status === "inactive",
2588
- }), 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", {
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", {
2589
2582
  "h-1/4": stepIdx === currentStep,
2590
2583
  }), style: {
2591
- // @ts-ignore
2592
- "--idx": stepIdx,
2593
- }, 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-['']", {
2594
- "after:h-full": stepIdx < currentStep,
2595
- }) }) }))] }, stepIdx));
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));
2596
2591
  }) }) }));
2597
2592
  });
2598
2593
  VerticalSteps.displayName = "VerticalSteps";
2599
2594
 
2600
- var stepperClasses = react.cn(
2601
- // light
2602
- "[--step-color:hsl(var(--heroui-primary-400))]", "[--active-color:hsl(var(--heroui-primary-400))]", "[--inactive-border-color:hsl(var(--heroui-primary-200))]", "[--inactive-bar-color:hsl(var(--heroui-primary-200))]", "[--inactive-color:hsl(var(--heroui-primary-300))]",
2603
- // dark
2604
- "dark:[--step-color:rgba(255,255,255,0.1)]", "dark:[--active-color:hsl(var(--heroui-foreground-600))]", "dark:[--active-border-color:rgba(255,255,255,0.5)]", "dark:[--inactive-border-color:rgba(255,255,255,0.1)]", "dark:[--inactive-bar-color:rgba(255,255,255,0.1)]", "dark:[--inactive-color:rgba(255,255,255,0.2)]");
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
+ };
2605
2628
  var MultiStepSidebar = React.forwardRef(function (_a, ref) {
2606
2629
  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;
2607
2632
  var handleOverlayClick = function (e) {
2608
2633
  if (e.target === e.currentTarget) {
2609
2634
  onClose === null || onClose === void 0 ? void 0 : onClose();
2610
2635
  }
2611
2636
  };
2612
- 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: stepperClasses, 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: react.cn(stepperClasses), 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 })] })] })) }));
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 })] })] })) }));
2613
2638
  });
2614
2639
  MultiStepSidebar.displayName = "MultiStepSidebar";
2615
2640
 
package/dist/index.esm.js CHANGED
@@ -2494,8 +2494,34 @@ function $458b0a5536c1a7cf$export$40bfa8c7b0832715(value, defaultValue, onChange
2494
2494
  var defaultTranslations$7 = {
2495
2495
  checkIconTitle: "Check",
2496
2496
  };
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
+ };
2497
2523
  var VerticalSteps = React.forwardRef(function (_a, ref) {
2498
- 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
+ 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"]);
2499
2525
  var _g = $458b0a5536c1a7cf$export$40bfa8c7b0832715(currentStepProp, defaultStep, onStepChange), currentStep = _g[0], setCurrentStep = _g[1];
2500
2526
  var t = __assign(__assign({}, defaultTranslations$7), translations);
2501
2527
  var steps = React.useMemo(function () {
@@ -2504,56 +2530,23 @@ var VerticalSteps = React.forwardRef(function (_a, ref) {
2504
2530
  }
2505
2531
  return stepsProp;
2506
2532
  }, [stepsProp]);
2507
- var colors = React.useMemo(function () {
2508
- var _a;
2509
- var colorMappings = {
2510
- primary: [
2511
- "[--step-color:hsl(var(--heroui-primary))]",
2512
- "[--step-fg-color:hsl(var(--heroui-primary-foreground))]",
2513
- ],
2514
- secondary: [
2515
- "[--step-color:hsl(var(--heroui-secondary))]",
2516
- "[--step-fg-color:hsl(var(--heroui-secondary-foreground))]",
2517
- ],
2518
- success: [
2519
- "[--step-color:hsl(var(--heroui-success))]",
2520
- "[--step-fg-color:hsl(var(--heroui-success-foreground))]",
2521
- ],
2522
- warning: [
2523
- "[--step-color:hsl(var(--heroui-warning))]",
2524
- "[--step-fg-color:hsl(var(--heroui-warning-foreground))]",
2525
- ],
2526
- danger: [
2527
- "[--step-color:hsl(var(--heroui-danger))]",
2528
- "[--step-fg-color:hsl(var(--heroui-danger-foreground))]",
2529
- ],
2530
- default: [
2531
- "[--step-color:hsl(var(--heroui-default))]",
2532
- "[--step-fg-color:hsl(var(--heroui-default-foreground))]",
2533
- ],
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))",
2534
2547
  };
2535
- var _b = (_a = colorMappings[color]) !== null && _a !== void 0 ? _a : colorMappings.primary, userColor = _b[0], fgColor = _b[1];
2536
- var colorsVars = [
2537
- "[--active-fg-color:var(--step-fg-color)]",
2538
- "[--active-border-color:var(--step-color)]",
2539
- "[--active-color:var(--step-color)]",
2540
- "[--complete-background-color:var(--step-color)]",
2541
- "[--complete-border-color:var(--step-color)]",
2542
- "[--inactive-border-color:hsl(var(--heroui-default-300))]",
2543
- "[--inactive-color:hsl(var(--heroui-default-300))]",
2544
- ];
2545
- if (!(className === null || className === void 0 ? void 0 : className.includes("--step-fg-color"))) {
2546
- colorsVars.unshift(fgColor);
2547
- }
2548
- if (!(className === null || className === void 0 ? void 0 : className.includes("--step-color"))) {
2549
- colorsVars.unshift(userColor);
2550
- }
2551
- if (!(className === null || className === void 0 ? void 0 : className.includes("--inactive-bar-color"))) {
2552
- colorsVars.push("[--inactive-bar-color:hsl(var(--heroui-default-300))]");
2553
- }
2554
- return colorsVars;
2555
- }, [color, className]);
2556
- return (jsx("nav", { "aria-label": "Progress", className: "max-w-fit", children: jsx("ol", { className: cn("flex flex-col gap-y-3", colors, className), children: steps === null || steps === void 0 ? void 0 : steps.map(function (step, stepIdx) {
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) {
2557
2550
  var status = currentStep === stepIdx
2558
2551
  ? "active"
2559
2552
  : step.isCompleted
@@ -2581,36 +2574,68 @@ var VerticalSteps = React.forwardRef(function (_a, ref) {
2581
2574
  backgroundColor: "var(--complete-background-color)",
2582
2575
  borderColor: "var(--complete-border-color)",
2583
2576
  },
2584
- }, 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", {
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", {
2585
2578
  "text-default-300": status === "inactive",
2586
2579
  }), children: step.title }), (!hideInactiveDescriptions ||
2587
2580
  status === "active") && (jsx("div", { className: cn("text-tiny text-default-600 lg:text-small transition-[color,opacity] duration-300 group-active:opacity-70", {
2588
2581
  "text-default-300": status === "inactive",
2589
- }), 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", {
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", {
2590
2583
  "h-1/4": stepIdx === currentStep,
2591
2584
  }), style: {
2592
- // @ts-ignore
2593
- "--idx": stepIdx,
2594
- }, 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-['']", {
2595
- "after:h-full": stepIdx < currentStep,
2596
- }) }) }))] }, stepIdx));
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));
2597
2592
  }) }) }));
2598
2593
  });
2599
2594
  VerticalSteps.displayName = "VerticalSteps";
2600
2595
 
2601
- var stepperClasses = cn(
2602
- // light
2603
- "[--step-color:hsl(var(--heroui-primary-400))]", "[--active-color:hsl(var(--heroui-primary-400))]", "[--inactive-border-color:hsl(var(--heroui-primary-200))]", "[--inactive-bar-color:hsl(var(--heroui-primary-200))]", "[--inactive-color:hsl(var(--heroui-primary-300))]",
2604
- // dark
2605
- "dark:[--step-color:rgba(255,255,255,0.1)]", "dark:[--active-color:hsl(var(--heroui-foreground-600))]", "dark:[--active-border-color:rgba(255,255,255,0.5)]", "dark:[--inactive-border-color:rgba(255,255,255,0.1)]", "dark:[--inactive-bar-color:rgba(255,255,255,0.1)]", "dark:[--inactive-color:rgba(255,255,255,0.2)]");
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
+ };
2606
2629
  var MultiStepSidebar = React.forwardRef(function (_a, ref) {
2607
2630
  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;
2608
2633
  var handleOverlayClick = function (e) {
2609
2634
  if (e.target === e.currentTarget) {
2610
2635
  onClose === null || onClose === void 0 ? void 0 : onClose();
2611
2636
  }
2612
2637
  };
2613
- 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: stepperClasses, 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: cn(stepperClasses), 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 })] })] })) }));
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 })] })] })) }));
2614
2639
  });
2615
2640
  MultiStepSidebar.displayName = "MultiStepSidebar";
2616
2641
 
package/dist/types/components/multi-step-wizard/_internal/MultiStepSidebar.d.ts.map CHANGED
@@ -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;AAG1B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAmBtE,eAAO,MAAM,gBAAgB,8FAyF5B,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;AAI1B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAwCtE,eAAO,MAAM,gBAAgB,8FA0F5B,CAAC"}
package/dist/types/components/vertical-steps/VerticalSteps.d.ts.map CHANGED
@@ -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;AAM/B,eAAO,MAAM,aAAa,8FA0OzB,CAAC"}
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"}
package/dist/types/components/vertical-steps/VerticalSteps.types.d.ts CHANGED
@@ -10,6 +10,18 @@ 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
+ }
13
25
  export interface VerticalStepsProps extends React.HTMLAttributes<HTMLButtonElement> {
14
26
  /**
15
27
  * The steps to display. It can be a number or an array of steps.
@@ -62,5 +74,10 @@ export interface VerticalStepsProps extends React.HTMLAttributes<HTMLButtonEleme
62
74
  * The translations for the component.
63
75
  */
64
76
  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;
65
82
  }
66
83
  //# sourceMappingURL=VerticalSteps.types.d.ts.map
package/dist/types/components/vertical-steps/VerticalSteps.types.d.ts.map CHANGED
@@ -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,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
+ {"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"}
package/dist/types/components/vertical-steps/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  export { VerticalSteps } from "./VerticalSteps";
2
- export type { VerticalStepsProps } from "./VerticalSteps.types";
2
+ export type { VerticalStepColorVars, VerticalStepsProps } from "./VerticalSteps.types";
3
3
  //# sourceMappingURL=index.d.ts.map
package/dist/types/components/vertical-steps/index.d.ts.map CHANGED
@@ -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,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,qBAAqB,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@beweco/aurora-ui",
3
- "version": "0.4.0",
3
+ "version": "0.6.0",
4
4
  "description": "Bewe Aurora UI Component Library",
5
5
  "main": "./dist/index.cjs.js",
6
6
  "module": "./dist/index.esm.js",