@beweco/aurora-ui 0.6.1 → 0.6.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/css/styles.css +1 -1
- package/dist/index.cjs.js +264 -49
- package/dist/index.esm.js +264 -49
- package/dist/types/components/row-steps/RowSteps.d.ts +0 -1
- package/dist/types/components/row-steps/RowSteps.d.ts.map +1 -1
- package/dist/types/components/vertical-steps/VerticalSteps.d.ts +0 -1
- package/dist/types/components/vertical-steps/VerticalSteps.d.ts.map +1 -1
- package/dist/types/contexts/theme/theme-context.type.d.ts +1 -1
- package/dist/types/contexts/theme/theme-context.type.d.ts.map +1 -1
- package/dist/types/index.d.ts +0 -2
- package/dist/types/index.d.ts.map +1 -1
- package/dist/types/providers/theme/hex-to-theme-color.d.ts.map +1 -1
- package/dist/types/styles/colors.default.d.ts +154 -0
- package/dist/types/styles/colors.default.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
|
@@ -5,8 +5,8 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
5
5
|
var react$1 = require('@iconify/react');
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var recharts = require('recharts');
|
|
8
|
-
var framerMotion = require('framer-motion');
|
|
9
8
|
var reactDom = require('react-dom');
|
|
9
|
+
var framerMotion = require('framer-motion');
|
|
10
10
|
var useTheme = require('@heroui/use-theme');
|
|
11
11
|
|
|
12
12
|
/******************************************************************************
|
|
@@ -1322,6 +1322,160 @@ var themeColors = {
|
|
|
1322
1322
|
overlay: "#ffffff",
|
|
1323
1323
|
},
|
|
1324
1324
|
},
|
|
1325
|
+
"skyBlue-light": {
|
|
1326
|
+
extend: "light",
|
|
1327
|
+
colors: {
|
|
1328
|
+
primary: {
|
|
1329
|
+
"50": "#C4DDFD",
|
|
1330
|
+
"100": "#B1D2FC",
|
|
1331
|
+
"200": "#9DC7FB",
|
|
1332
|
+
"300": "#88BCFB",
|
|
1333
|
+
"400": "#74B1FB",
|
|
1334
|
+
"500": "#60A5FA",
|
|
1335
|
+
"600": "#4D9BF9",
|
|
1336
|
+
"700": "#398FF9",
|
|
1337
|
+
"800": "#2584F8",
|
|
1338
|
+
"900": "#1279F8",
|
|
1339
|
+
foreground: "#fff",
|
|
1340
|
+
DEFAULT: "#60A5FA",
|
|
1341
|
+
},
|
|
1342
|
+
secondary: {
|
|
1343
|
+
"50": "#FFFFFF",
|
|
1344
|
+
"100": "#FEF6EC",
|
|
1345
|
+
"200": "#FDECD8",
|
|
1346
|
+
"300": "#FCE3C5",
|
|
1347
|
+
"400": "#FBDAB1",
|
|
1348
|
+
"500": "#FAD19E",
|
|
1349
|
+
"600": "#F9C78B",
|
|
1350
|
+
"700": "#F8BE77",
|
|
1351
|
+
"800": "#F7B564",
|
|
1352
|
+
"900": "#F6AB51",
|
|
1353
|
+
foreground: "#000",
|
|
1354
|
+
DEFAULT: "#FAD19E",
|
|
1355
|
+
},
|
|
1356
|
+
success: {
|
|
1357
|
+
"50": "#A9EFC3",
|
|
1358
|
+
"100": "#98ECB7",
|
|
1359
|
+
"200": "#86E9AA",
|
|
1360
|
+
"300": "#75E69E",
|
|
1361
|
+
"400": "#64E392",
|
|
1362
|
+
"500": "#4ADE80",
|
|
1363
|
+
"600": "#41DC7A",
|
|
1364
|
+
"700": "#30D96E",
|
|
1365
|
+
"800": "#26CF64",
|
|
1366
|
+
"900": "#23BE5C",
|
|
1367
|
+
foreground: "#000",
|
|
1368
|
+
DEFAULT: "#4ADE80",
|
|
1369
|
+
},
|
|
1370
|
+
warning: {
|
|
1371
|
+
"50": "#FCB888",
|
|
1372
|
+
"100": "#FBAC74",
|
|
1373
|
+
"200": "#FBA060",
|
|
1374
|
+
"300": "#FA954C",
|
|
1375
|
+
"400": "#FA8938",
|
|
1376
|
+
"500": "#F97316",
|
|
1377
|
+
"600": "#EF6706",
|
|
1378
|
+
"700": "#DB5E06",
|
|
1379
|
+
"800": "#C75605",
|
|
1380
|
+
"900": "#B34D05",
|
|
1381
|
+
foreground: "#000",
|
|
1382
|
+
DEFAULT: "#F97316",
|
|
1383
|
+
},
|
|
1384
|
+
danger: {
|
|
1385
|
+
"50": "#F7A1A1",
|
|
1386
|
+
"100": "#F58E8E",
|
|
1387
|
+
"200": "#F47C7C",
|
|
1388
|
+
"300": "#F26969",
|
|
1389
|
+
"400": "#F05656",
|
|
1390
|
+
"500": "#EF4444",
|
|
1391
|
+
"600": "#ED3131",
|
|
1392
|
+
"700": "#EB1E1E",
|
|
1393
|
+
"800": "#E11414",
|
|
1394
|
+
"900": "#CE1212",
|
|
1395
|
+
foreground: "#000",
|
|
1396
|
+
DEFAULT: "#EF4444",
|
|
1397
|
+
},
|
|
1398
|
+
focus: "#60A5FA",
|
|
1399
|
+
overlay: "#ffffff",
|
|
1400
|
+
},
|
|
1401
|
+
},
|
|
1402
|
+
"skyBlue-dark": {
|
|
1403
|
+
extend: "dark",
|
|
1404
|
+
colors: {
|
|
1405
|
+
primary: {
|
|
1406
|
+
"50": "#1279F8",
|
|
1407
|
+
"100": "#2584F8",
|
|
1408
|
+
"200": "#398FF9",
|
|
1409
|
+
"300": "#4D9BF9",
|
|
1410
|
+
"400": "#60A5FA",
|
|
1411
|
+
"500": "#74B1FB",
|
|
1412
|
+
"600": "#88BCFB",
|
|
1413
|
+
"700": "#9DC7FB",
|
|
1414
|
+
"800": "#B1D2FC",
|
|
1415
|
+
"900": "#C4DDFD",
|
|
1416
|
+
foreground: "#fff",
|
|
1417
|
+
DEFAULT: "#60A5FA",
|
|
1418
|
+
},
|
|
1419
|
+
secondary: {
|
|
1420
|
+
"50": "#F6AB51",
|
|
1421
|
+
"100": "#F7B564",
|
|
1422
|
+
"200": "#F8BE77",
|
|
1423
|
+
"300": "#F9C78B",
|
|
1424
|
+
"400": "#FAD19E",
|
|
1425
|
+
"500": "#FBDAB1",
|
|
1426
|
+
"600": "#FCE3C5",
|
|
1427
|
+
"700": "#FDECD8",
|
|
1428
|
+
"800": "#FEF6EC",
|
|
1429
|
+
"900": "#FFFFFF",
|
|
1430
|
+
foreground: "#000",
|
|
1431
|
+
DEFAULT: "#FAD19E",
|
|
1432
|
+
},
|
|
1433
|
+
success: {
|
|
1434
|
+
"50": "#23BE5C",
|
|
1435
|
+
"100": "#26CF64",
|
|
1436
|
+
"200": "#30D96E",
|
|
1437
|
+
"300": "#41DC7A",
|
|
1438
|
+
"400": "#4ADE80",
|
|
1439
|
+
"500": "#64E392",
|
|
1440
|
+
"600": "#75E69E",
|
|
1441
|
+
"700": "#86E9AA",
|
|
1442
|
+
"800": "#98ECB7",
|
|
1443
|
+
"900": "#A9EFC3",
|
|
1444
|
+
foreground: "#000",
|
|
1445
|
+
DEFAULT: "#64E392",
|
|
1446
|
+
},
|
|
1447
|
+
warning: {
|
|
1448
|
+
"50": "#B34D05",
|
|
1449
|
+
"100": "#C75605",
|
|
1450
|
+
"200": "#DB5E06",
|
|
1451
|
+
"300": "#EF6706",
|
|
1452
|
+
"400": "#F97316",
|
|
1453
|
+
"500": "#FA8938",
|
|
1454
|
+
"600": "#FA954C",
|
|
1455
|
+
"700": "#FBA060",
|
|
1456
|
+
"800": "#FBAC74",
|
|
1457
|
+
"900": "#FCB888",
|
|
1458
|
+
foreground: "#000",
|
|
1459
|
+
DEFAULT: "#FA8938",
|
|
1460
|
+
},
|
|
1461
|
+
danger: {
|
|
1462
|
+
"50": "#CE1212",
|
|
1463
|
+
"100": "#E11414",
|
|
1464
|
+
"200": "#EB1E1E",
|
|
1465
|
+
"300": "#ED3131",
|
|
1466
|
+
"400": "#EF4444",
|
|
1467
|
+
"500": "#F05656",
|
|
1468
|
+
"600": "#F26969",
|
|
1469
|
+
"700": "#F47C7C",
|
|
1470
|
+
"800": "#F58E8E",
|
|
1471
|
+
"900": "#F7A1A1",
|
|
1472
|
+
foreground: "#000",
|
|
1473
|
+
DEFAULT: "#F05656",
|
|
1474
|
+
},
|
|
1475
|
+
focus: "#60A5FA",
|
|
1476
|
+
overlay: "#000000",
|
|
1477
|
+
},
|
|
1478
|
+
},
|
|
1325
1479
|
};
|
|
1326
1480
|
|
|
1327
1481
|
var ColorSelector = function (_a) {
|
|
@@ -2501,6 +2655,45 @@ var VALID_STEP_COLORS$1 = [
|
|
|
2501
2655
|
var defaultTranslations$7 = {
|
|
2502
2656
|
checkIconTitle: "Check",
|
|
2503
2657
|
};
|
|
2658
|
+
function getContainerCSSVars$1(color) {
|
|
2659
|
+
var baseColor = "hsl(var(--heroui-".concat(color, "))");
|
|
2660
|
+
var fgColor = "hsl(var(--heroui-".concat(color, "-foreground))");
|
|
2661
|
+
var inactiveColor = "hsl(var(--heroui-default-300))";
|
|
2662
|
+
return {
|
|
2663
|
+
"--step-color": baseColor,
|
|
2664
|
+
"--step-fg-color": fgColor,
|
|
2665
|
+
"--active-fg-color": fgColor,
|
|
2666
|
+
"--active-border-color": baseColor,
|
|
2667
|
+
"--active-color": baseColor,
|
|
2668
|
+
"--complete-background-color": baseColor,
|
|
2669
|
+
"--complete-border-color": baseColor,
|
|
2670
|
+
"--inactive-border-color": inactiveColor,
|
|
2671
|
+
"--inactive-color": inactiveColor,
|
|
2672
|
+
"--inactive-bar-color": inactiveColor,
|
|
2673
|
+
};
|
|
2674
|
+
}
|
|
2675
|
+
function getCircleStyle$1(status) {
|
|
2676
|
+
switch (status) {
|
|
2677
|
+
case "complete":
|
|
2678
|
+
return {
|
|
2679
|
+
backgroundColor: "var(--complete-background-color)",
|
|
2680
|
+
borderColor: "var(--complete-border-color)",
|
|
2681
|
+
color: "var(--active-fg-color)",
|
|
2682
|
+
};
|
|
2683
|
+
case "active":
|
|
2684
|
+
return {
|
|
2685
|
+
backgroundColor: "transparent",
|
|
2686
|
+
borderColor: "var(--active-border-color)",
|
|
2687
|
+
color: "var(--active-color)",
|
|
2688
|
+
};
|
|
2689
|
+
default:
|
|
2690
|
+
return {
|
|
2691
|
+
backgroundColor: "transparent",
|
|
2692
|
+
borderColor: "var(--inactive-border-color)",
|
|
2693
|
+
color: "var(--inactive-color)",
|
|
2694
|
+
};
|
|
2695
|
+
}
|
|
2696
|
+
}
|
|
2504
2697
|
var VerticalSteps = React.forwardRef(function (_a, ref) {
|
|
2505
2698
|
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"]);
|
|
2506
2699
|
var _g = $458b0a5536c1a7cf$export$40bfa8c7b0832715(currentStepProp, defaultStep, onStepChange), currentStep = _g[0], setCurrentStep = _g[1];
|
|
@@ -2514,10 +2707,11 @@ var VerticalSteps = React.forwardRef(function (_a, ref) {
|
|
|
2514
2707
|
var stepColor = VALID_STEP_COLORS$1.includes(color)
|
|
2515
2708
|
? color
|
|
2516
2709
|
: "primary";
|
|
2517
|
-
|
|
2710
|
+
var containerVars = React.useMemo(function () { return getContainerCSSVars$1(stepColor); }, [stepColor]);
|
|
2711
|
+
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), style: containerVars, children: steps === null || steps === void 0 ? void 0 : steps.map(function (step, stepIdx) {
|
|
2518
2712
|
var status = currentStep === stepIdx
|
|
2519
2713
|
? "active"
|
|
2520
|
-
: step.isCompleted
|
|
2714
|
+
: stepIdx < currentStep || step.isCompleted
|
|
2521
2715
|
? "complete"
|
|
2522
2716
|
: "inactive";
|
|
2523
2717
|
var isDisabled = status === "inactive";
|
|
@@ -2525,35 +2719,25 @@ var VerticalSteps = React.forwardRef(function (_a, ref) {
|
|
|
2525
2719
|
// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
|
|
2526
2720
|
jsxRuntime.jsxs("li", { className: "relative", children: [jsxRuntime.jsx("div", { className: "flex w-full max-w-full items-center", children: jsxRuntime.jsxs("button", __assign({ type: "button", ref: ref, "aria-current": status === "active" ? "step" : undefined, className: react.cn("group rounded-large flex w-full cursor-pointer items-center justify-center gap-4 px-3 py-2.5", stepClassName, {
|
|
2527
2721
|
"cursor-not-allowed": isDisabled,
|
|
2528
|
-
}), onClick: function () { return setCurrentStep(stepIdx); }, disabled: isDisabled }, props, { children: [jsxRuntime.jsx("div", { className: "flex h-full items-center", children: jsxRuntime.jsx(
|
|
2529
|
-
|
|
2530
|
-
|
|
2531
|
-
|
|
2532
|
-
|
|
2533
|
-
|
|
2534
|
-
|
|
2535
|
-
},
|
|
2536
|
-
active: {
|
|
2537
|
-
backgroundColor: "transparent",
|
|
2538
|
-
borderColor: "var(--active-border-color)",
|
|
2539
|
-
color: "var(--active-color)",
|
|
2540
|
-
},
|
|
2541
|
-
complete: {
|
|
2542
|
-
backgroundColor: "var(--complete-background-color)",
|
|
2543
|
-
borderColor: "var(--complete-border-color)",
|
|
2544
|
-
},
|
|
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", {
|
|
2546
|
-
"text-default-300": status === "inactive",
|
|
2722
|
+
}), onClick: function () { return setCurrentStep(stepIdx); }, disabled: isDisabled }, props, { children: [jsxRuntime.jsx("div", { className: "flex h-full items-center", children: jsxRuntime.jsx("div", { className: "relative", children: jsxRuntime.jsx("div", { className: react.cn("border-medium text-large relative flex h-[34px] w-[34px] items-center justify-center rounded-full font-semibold", "transition-[background-color,border-color,color,box-shadow] duration-300", {
|
|
2723
|
+
"shadow-lg": status === "complete",
|
|
2724
|
+
}), "data-status": status, style: getCircleStyle$1(status), children: jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: status === "complete" ? (jsxRuntime.jsx(IconComponent, { className: "font-bold", style: {
|
|
2725
|
+
color: "var(--active-fg-color)",
|
|
2726
|
+
}, 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", {
|
|
2727
|
+
"text-default-300": status ===
|
|
2728
|
+
"inactive",
|
|
2547
2729
|
}), children: step.title }), (!hideInactiveDescriptions ||
|
|
2548
2730
|
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", {
|
|
2549
|
-
"text-default-300": status ===
|
|
2550
|
-
|
|
2731
|
+
"text-default-300": status ===
|
|
2732
|
+
"inactive",
|
|
2733
|
+
}), children: step.description }))] }) })] }), stepIdx) }), stepIdx < steps.length - 1 &&
|
|
2734
|
+
!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", {
|
|
2551
2735
|
"h-1/4": stepIdx === currentStep,
|
|
2552
2736
|
}), style: {
|
|
2553
|
-
// @ts-ignore
|
|
2554
2737
|
"--idx": stepIdx,
|
|
2555
2738
|
}, 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 <
|
|
2739
|
+
"after:h-full": stepIdx <
|
|
2740
|
+
currentStep,
|
|
2557
2741
|
}) }) }))] }, stepIdx));
|
|
2558
2742
|
}) }) }));
|
|
2559
2743
|
});
|
|
@@ -3237,6 +3421,45 @@ var VALID_STEP_COLORS = [
|
|
|
3237
3421
|
"danger",
|
|
3238
3422
|
"default",
|
|
3239
3423
|
];
|
|
3424
|
+
function getContainerCSSVars(color) {
|
|
3425
|
+
var baseColor = "hsl(var(--heroui-".concat(color, "))");
|
|
3426
|
+
var fgColor = "hsl(var(--heroui-".concat(color, "-foreground))");
|
|
3427
|
+
var inactiveColor = "hsl(var(--heroui-default-300))";
|
|
3428
|
+
return {
|
|
3429
|
+
"--step-color": baseColor,
|
|
3430
|
+
"--step-fg-color": fgColor,
|
|
3431
|
+
"--active-fg-color": fgColor,
|
|
3432
|
+
"--active-border-color": baseColor,
|
|
3433
|
+
"--active-color": baseColor,
|
|
3434
|
+
"--complete-background-color": baseColor,
|
|
3435
|
+
"--complete-border-color": baseColor,
|
|
3436
|
+
"--inactive-border-color": inactiveColor,
|
|
3437
|
+
"--inactive-color": inactiveColor,
|
|
3438
|
+
"--inactive-bar-color": inactiveColor,
|
|
3439
|
+
};
|
|
3440
|
+
}
|
|
3441
|
+
function getCircleStyle(status) {
|
|
3442
|
+
switch (status) {
|
|
3443
|
+
case "complete":
|
|
3444
|
+
return {
|
|
3445
|
+
backgroundColor: "var(--complete-background-color)",
|
|
3446
|
+
borderColor: "var(--complete-border-color)",
|
|
3447
|
+
color: "var(--active-fg-color)",
|
|
3448
|
+
};
|
|
3449
|
+
case "active":
|
|
3450
|
+
return {
|
|
3451
|
+
backgroundColor: "transparent",
|
|
3452
|
+
borderColor: "var(--active-border-color)",
|
|
3453
|
+
color: "var(--active-color)",
|
|
3454
|
+
};
|
|
3455
|
+
default:
|
|
3456
|
+
return {
|
|
3457
|
+
backgroundColor: "transparent",
|
|
3458
|
+
borderColor: "var(--inactive-border-color)",
|
|
3459
|
+
color: "var(--inactive-color)",
|
|
3460
|
+
};
|
|
3461
|
+
}
|
|
3462
|
+
}
|
|
3240
3463
|
var RowSteps = React.forwardRef(function (_a, ref) {
|
|
3241
3464
|
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"]);
|
|
3242
3465
|
var _f = $458b0a5536c1a7cf$export$40bfa8c7b0832715(currentStepProp, defaultStep, onStepChange), currentStep = _f[0], setCurrentStep = _f[1];
|
|
@@ -3249,36 +3472,27 @@ var RowSteps = React.forwardRef(function (_a, ref) {
|
|
|
3249
3472
|
var stepColor = VALID_STEP_COLORS.includes(color)
|
|
3250
3473
|
? color
|
|
3251
3474
|
: "primary";
|
|
3252
|
-
|
|
3475
|
+
var containerVars = React.useMemo(function () { return getContainerCSSVars(stepColor); }, [stepColor]);
|
|
3476
|
+
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), style: containerVars, children: steps === null || steps === void 0 ? void 0 : steps.map(function (step, stepIdx) {
|
|
3253
3477
|
var status = currentStep === stepIdx
|
|
3254
3478
|
? "active"
|
|
3255
3479
|
: currentStep < stepIdx
|
|
3256
3480
|
? "inactive"
|
|
3257
3481
|
: "complete";
|
|
3258
|
-
return (jsxRuntime.jsx("li", { className: "relative flex w-full items-center pr-12 last:pr-0", children: jsxRuntime.jsxs("button", __assign({ type: "button", ref: ref, "aria-current": status === "active" ? "step" : undefined, className: react.cn("group rounded-large flex w-full cursor-pointer flex-row items-center justify-center gap-x-3 py-2.5", stepClassName), onClick: function () { return setCurrentStep(stepIdx); } }, props, { children: [jsxRuntime.jsx("div", { className: "h-ful relative flex items-center", children: jsxRuntime.jsx(
|
|
3259
|
-
|
|
3260
|
-
|
|
3261
|
-
|
|
3262
|
-
|
|
3263
|
-
|
|
3264
|
-
|
|
3265
|
-
|
|
3266
|
-
|
|
3267
|
-
|
|
3268
|
-
borderColor: "var(--active-border-color)",
|
|
3269
|
-
color: "var(--active-color)",
|
|
3270
|
-
},
|
|
3271
|
-
complete: {
|
|
3272
|
-
backgroundColor: "var(--complete-background-color)",
|
|
3273
|
-
borderColor: "var(--complete-border-color)",
|
|
3274
|
-
},
|
|
3275
|
-
}, 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" })) : (jsxRuntime.jsx("span", { children: stepIdx + 1 })) }) }) }) }) }), step.title && (jsxRuntime.jsx("div", { className: "max-w-full flex-1 text-start", children: jsxRuntime.jsx("div", { className: react.cn("text-small text-default-600 lg:text-medium font-medium transition-[color,opacity] duration-300 group-active:opacity-80", {
|
|
3276
|
-
"text-default-300": status === "inactive",
|
|
3277
|
-
}), children: step.title }) })), stepIdx < steps.length - 1 && !hideProgressBars && (jsxRuntime.jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute right-0 w-10 flex-none items-center", style: {
|
|
3278
|
-
// @ts-ignore
|
|
3482
|
+
return (jsxRuntime.jsx("li", { className: "relative flex w-full items-center pr-12 last:pr-0", children: jsxRuntime.jsxs("button", __assign({ type: "button", ref: ref, "aria-current": status === "active" ? "step" : undefined, className: react.cn("group rounded-large flex w-full cursor-pointer flex-row items-center justify-center gap-x-3 py-2.5", stepClassName), onClick: function () { return setCurrentStep(stepIdx); } }, props, { children: [jsxRuntime.jsx("div", { className: "h-ful relative flex items-center", children: jsxRuntime.jsx("div", { className: "relative", children: jsxRuntime.jsx("div", { className: react.cn("border-medium text-large relative flex h-[34px] w-[34px] items-center justify-center rounded-full font-semibold", "transition-[background-color,border-color,color,box-shadow] duration-300", {
|
|
3483
|
+
"shadow-lg": status ===
|
|
3484
|
+
"complete",
|
|
3485
|
+
}), "data-status": status, style: getCircleStyle(status), children: jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: status === "complete" ? (jsxRuntime.jsx(IconComponent, { className: "font-bold", style: {
|
|
3486
|
+
color: "var(--active-fg-color)",
|
|
3487
|
+
}, icon: "material-symbols:check-rounded" })) : (jsxRuntime.jsx("span", { children: stepIdx + 1 })) }) }) }) }), step.title && (jsxRuntime.jsx("div", { className: "max-w-full flex-1 text-start", children: jsxRuntime.jsx("div", { className: react.cn("text-small text-default-600 lg:text-medium font-medium transition-[color,opacity] duration-300 group-active:opacity-80", {
|
|
3488
|
+
"text-default-300": status ===
|
|
3489
|
+
"inactive",
|
|
3490
|
+
}), children: step.title }) })), stepIdx < steps.length - 1 &&
|
|
3491
|
+
!hideProgressBars && (jsxRuntime.jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute right-0 w-10 flex-none items-center", style: {
|
|
3279
3492
|
"--idx": stepIdx,
|
|
3280
3493
|
}, children: jsxRuntime.jsx("div", { className: react.cn("relative h-0.5 w-full bg-[var(--inactive-bar-color)] transition-colors duration-300", "after:absolute after:block after:h-full after:w-0 after:bg-[var(--active-border-color)] after:transition-[width] after:duration-300 after:content-['']", {
|
|
3281
|
-
"after:w-full": stepIdx <
|
|
3494
|
+
"after:w-full": stepIdx <
|
|
3495
|
+
currentStep,
|
|
3282
3496
|
}) }) }))] }), stepIdx) }, stepIdx));
|
|
3283
3497
|
}) }) }));
|
|
3284
3498
|
});
|
|
@@ -6307,6 +6521,7 @@ var THEME_COLOR_HEX_MAP = {
|
|
|
6307
6521
|
yellow: "#ffd505",
|
|
6308
6522
|
green: "#16c964",
|
|
6309
6523
|
coral: "#ff4f4f",
|
|
6524
|
+
skyBlue: "#60A5FA",
|
|
6310
6525
|
};
|
|
6311
6526
|
function hexToRgb$1(hex) {
|
|
6312
6527
|
var clean = hex.replace("#", "");
|