bonkers-ui 2.0.10 → 2.0.11
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.
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { jsx as m, jsxs as
|
|
1
|
+
import { jsx as m, jsxs as E } from "react/jsx-runtime";
|
|
2
2
|
import { useEffect as w } from "react";
|
|
3
3
|
import n from "classnames";
|
|
4
4
|
import { ENavStepStatus as e } from "./_types.js";
|
|
5
|
-
import { UiTypography as
|
|
6
|
-
import { ETypographySizes as
|
|
7
|
-
import { u as
|
|
8
|
-
function
|
|
5
|
+
import { UiTypography as g } from "../UiTypography/UiTypography.js";
|
|
6
|
+
import { ETypographySizes as h, ETextWeight as I } from "../UiTypography/_types.js";
|
|
7
|
+
import { u as $, s as S } from "../../UiNavigationSteps-N3juxg3H.js";
|
|
8
|
+
function z(r, a) {
|
|
9
9
|
return n(
|
|
10
10
|
`
|
|
11
11
|
flex
|
|
@@ -16,7 +16,7 @@ function M(s, a) {
|
|
|
16
16
|
border
|
|
17
17
|
text-secondary-400
|
|
18
18
|
transition-all
|
|
19
|
-
duration-
|
|
19
|
+
duration-100
|
|
20
20
|
ease-in-out
|
|
21
21
|
md:h-xl
|
|
22
22
|
md:w-full
|
|
@@ -26,30 +26,30 @@ function M(s, a) {
|
|
|
26
26
|
`,
|
|
27
27
|
!a && "bg-secondary-400",
|
|
28
28
|
a && "cursor-pointer",
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
29
|
+
r === e.COMPLETE && "size-sm border-secondary-400 bg-secondary-400 p-xs text-white",
|
|
30
|
+
r === e.ACTIVE && "border-secondary-400 bg-secondary-alt-200 px-xs py-xxs text-secondary-400",
|
|
31
|
+
r === e.INACTIVE && "size-sm border-secondary-alt-500 bg-white p-xs text-secondary-alt-500"
|
|
32
32
|
);
|
|
33
33
|
}
|
|
34
|
-
const
|
|
35
|
-
id:
|
|
34
|
+
const R = ({
|
|
35
|
+
id: r,
|
|
36
36
|
name: a,
|
|
37
|
-
subSteps:
|
|
37
|
+
subSteps: s = [],
|
|
38
38
|
className: T = "",
|
|
39
|
-
onClick:
|
|
40
|
-
order:
|
|
41
|
-
totalSteps:
|
|
42
|
-
isActive:
|
|
39
|
+
onClick: y,
|
|
40
|
+
order: l = 1,
|
|
41
|
+
totalSteps: u = 1,
|
|
42
|
+
isActive: C = !1,
|
|
43
43
|
isComplete: c = !1,
|
|
44
|
-
icon:
|
|
44
|
+
icon: A
|
|
45
45
|
}) => {
|
|
46
|
-
const { currentStepId:
|
|
46
|
+
const { currentStepId: i, updateSubstepProgress: p, registerStep: N } = $(), f = s.some((x) => x.id === i), o = s.length > 0;
|
|
47
47
|
w(() => {
|
|
48
|
-
|
|
49
|
-
}, [
|
|
50
|
-
const t = !c && (
|
|
51
|
-
t !== e.INACTIVE &&
|
|
52
|
-
}, b = () =>
|
|
48
|
+
N(r, o), o && p(r, i, s);
|
|
49
|
+
}, [r, o, s, i, p]);
|
|
50
|
+
const t = !c && (C || f) ? e.ACTIVE : c ? e.COMPLETE : e.INACTIVE, V = () => {
|
|
51
|
+
t !== e.INACTIVE && y?.();
|
|
52
|
+
}, b = () => l / u * 100, d = t !== e.INACTIVE, v = o ? c ? ` ${s.length}/${s.length}` : f ? ` ${s.findIndex((x) => x.id === i) + 1}/${s.length}` : ` ${l}/${s.length}` : null;
|
|
53
53
|
return /* @__PURE__ */ m(
|
|
54
54
|
"div",
|
|
55
55
|
{
|
|
@@ -59,7 +59,7 @@ const W = ({
|
|
|
59
59
|
className: n(
|
|
60
60
|
"flex flex-col gap-xxs md:flex-row md:items-center",
|
|
61
61
|
{
|
|
62
|
-
[
|
|
62
|
+
[S.active]: t === e.ACTIVE
|
|
63
63
|
}
|
|
64
64
|
),
|
|
65
65
|
children: /* @__PURE__ */ m(
|
|
@@ -69,27 +69,27 @@ const W = ({
|
|
|
69
69
|
"aria-current": t === e.ACTIVE ? "step" : void 0,
|
|
70
70
|
"aria-disabled": !d,
|
|
71
71
|
disabled: !d,
|
|
72
|
-
className: n(
|
|
73
|
-
children: /* @__PURE__ */
|
|
74
|
-
|
|
72
|
+
className: n(z(t, d), T),
|
|
73
|
+
children: /* @__PURE__ */ E(
|
|
74
|
+
g,
|
|
75
75
|
{
|
|
76
76
|
className: "flex place-items-center gap-xxs",
|
|
77
|
-
weight: t === e.ACTIVE ?
|
|
77
|
+
weight: t === e.ACTIVE ? I.SEMI_BOLD : I.REGULAR,
|
|
78
78
|
lineHeight: !0,
|
|
79
|
-
size:
|
|
79
|
+
size: h.XS,
|
|
80
80
|
children: [
|
|
81
|
-
t === e.COMPLETE ?
|
|
82
|
-
|
|
81
|
+
t === e.COMPLETE ? A : /* @__PURE__ */ m(
|
|
82
|
+
g,
|
|
83
83
|
{
|
|
84
84
|
className: n({
|
|
85
85
|
"font-semibold md:font-medium": t === e.INACTIVE
|
|
86
86
|
}),
|
|
87
87
|
tag: "span",
|
|
88
|
-
size:
|
|
89
|
-
children:
|
|
88
|
+
size: h.SM,
|
|
89
|
+
children: l
|
|
90
90
|
}
|
|
91
91
|
),
|
|
92
|
-
/* @__PURE__ */
|
|
92
|
+
/* @__PURE__ */ E(
|
|
93
93
|
"span",
|
|
94
94
|
{
|
|
95
95
|
className: n("text-xxs text-nowrap md:text-xs", {
|
|
@@ -110,6 +110,6 @@ const W = ({
|
|
|
110
110
|
);
|
|
111
111
|
};
|
|
112
112
|
export {
|
|
113
|
-
|
|
113
|
+
R as UiNavigationStep
|
|
114
114
|
};
|
|
115
115
|
//# sourceMappingURL=UiNavigationStep.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UiNavigationStep.js","sources":["../../../src/components/UiNavigationSteps/UiNavigationStep.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport cx from \"classnames\";\nimport { ENavStepStatus, type INavStepProps } from \"./_types\";\nimport { ETextWeight, ETypographySizes, UiTypography } from \"../UiTypography\";\nimport { useStepNav } from \"./UiNavigationSteps\";\nimport styles from \"./UiNavigationSteps.module.css\";\n\nfunction getStepClasses(status: ENavStepStatus, isClickable: boolean) {\n\treturn cx(\n\t\t`\n\t\t\tflex\n\t\t\ttransform\n\t\t\titems-center\n\t\t\tjustify-center\n\t\t\trounded-full\n\t\t\tborder\n\t\t\ttext-secondary-400\n\t\t\ttransition-all\n\t\t\tduration-
|
|
1
|
+
{"version":3,"file":"UiNavigationStep.js","sources":["../../../src/components/UiNavigationSteps/UiNavigationStep.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport cx from \"classnames\";\nimport { ENavStepStatus, type INavStepProps } from \"./_types\";\nimport { ETextWeight, ETypographySizes, UiTypography } from \"../UiTypography\";\nimport { useStepNav } from \"./UiNavigationSteps\";\nimport styles from \"./UiNavigationSteps.module.css\";\n\nfunction getStepClasses(status: ENavStepStatus, isClickable: boolean) {\n\treturn cx(\n\t\t`\n\t\t\tflex\n\t\t\ttransform\n\t\t\titems-center\n\t\t\tjustify-center\n\t\t\trounded-full\n\t\t\tborder\n\t\t\ttext-secondary-400\n\t\t\ttransition-all\n\t\t\tduration-100\n\t\t\tease-in-out\n\t\t\tmd:h-xl\n\t\t\tmd:w-full\n\t\t\tmd:px-xs\n\t\t\tmd:py-xxs\n\t\t\tlg:px-sm\n\t\t`,\n\t\t!isClickable && \"bg-secondary-400\",\n\t\tisClickable && \"cursor-pointer\",\n\t\tstatus === ENavStepStatus.COMPLETE\n\t\t&& \"size-sm border-secondary-400 bg-secondary-400 p-xs text-white\",\n\t\tstatus === ENavStepStatus.ACTIVE\n\t\t&& \"border-secondary-400 bg-secondary-alt-200 px-xs py-xxs text-secondary-400\",\n\t\tstatus === ENavStepStatus.INACTIVE\n\t\t&& \"size-sm border-secondary-alt-500 bg-white p-xs text-secondary-alt-500\",\n\t);\n}\n\nexport const UiNavigationStep: React.FC<INavStepProps> = ({\n\tid,\n\tname,\n\tsubSteps = [],\n\tclassName = \"\",\n\tonClick,\n\torder = 1,\n\ttotalSteps = 1,\n\tisActive = false,\n\tisComplete = false,\n\ticon\n}) => {\n\tconst { currentStepId, updateSubstepProgress, registerStep } = useStepNav();\n\tconst isSubstepActive = subSteps.some((subStep) => subStep.id === currentStepId);\n\tconst hasSubsteps = subSteps.length > 0;\n\n\tuseEffect(() => {\n\t\tregisterStep(id, hasSubsteps);\n\n\t\tif (hasSubsteps) {\n\t\t\tupdateSubstepProgress(id, currentStepId, subSteps);\n\t\t}\n\t}, [id, hasSubsteps, subSteps, currentStepId, updateSubstepProgress]);\n\n\tconst status = !isComplete && (isActive || isSubstepActive)\n\t\t? ENavStepStatus.ACTIVE\n\t\t: isComplete\n\t\t\t? ENavStepStatus.COMPLETE\n\t\t\t: ENavStepStatus.INACTIVE;\n\n\tconst handleClick = () => {\n\t\tif (status !== ENavStepStatus.INACTIVE) {\n\t\t\tonClick?.();\n\t\t}\n\t};\n\n\tconst calculateWidth = () => (order / totalSteps) * 100;\n\n\tconst isClickable = status !== ENavStepStatus.INACTIVE;\n\n\tconst progressText = hasSubsteps\n\t\t? isComplete\n\t\t\t? ` ${subSteps.length}/${subSteps.length}`\n\t\t\t: isSubstepActive\n\t\t\t\t? ` ${subSteps.findIndex((step) => step.id === currentStepId) + 1}/${subSteps.length}`\n\t\t\t\t: ` ${order}/${subSteps.length}`\n\t\t: null;\n\n\treturn (\n\t\t<div\n\t\t\tstyle={ status === ENavStepStatus.ACTIVE\n\t\t\t\t? ({\n\t\t\t\t\t\"--step-width\": `${calculateWidth()}%`\n\t\t\t\t} as React.CSSProperties)\n\t\t\t\t: {} }\n\t\t\tclassName={ cx(\"flex flex-col gap-xxs md:flex-row md:items-center\", {\n\t\t\t\t[styles.active]: status === ENavStepStatus.ACTIVE,\n\t\t\t},\n\t\t\t) }\n\t\t>\n\t\t\t<button\n\t\t\t\tonClick={ handleClick }\n\t\t\t\taria-current={ status === ENavStepStatus.ACTIVE\n\t\t\t\t\t? \"step\"\n\t\t\t\t\t: undefined }\n\t\t\t\taria-disabled={ !isClickable }\n\t\t\t\tdisabled={ !isClickable }\n\t\t\t\tclassName={ cx(getStepClasses(status, isClickable), className) }\n\t\t\t>\n\t\t\t\t<UiTypography\n\t\t\t\t\tclassName=\"flex place-items-center gap-xxs\"\n\t\t\t\t\tweight={ status === ENavStepStatus.ACTIVE\n\t\t\t\t\t\t? ETextWeight.SEMI_BOLD\n\t\t\t\t\t\t: ETextWeight.REGULAR }\n\t\t\t\t\tlineHeight\n\t\t\t\t\tsize={ ETypographySizes.XS }\n\t\t\t\t>\n\t\t\t\t\t{ status === ENavStepStatus.COMPLETE\n\t\t\t\t\t\t? icon\n\t\t\t\t\t\t: (\n\t\t\t\t\t\t\t<UiTypography\n\t\t\t\t\t\t\t\tclassName={ cx({\n\t\t\t\t\t\t\t\t\t\"font-semibold md:font-medium\": status === ENavStepStatus.INACTIVE,\n\t\t\t\t\t\t\t\t}) }\n\t\t\t\t\t\t\t\ttag=\"span\"\n\t\t\t\t\t\t\t\tsize={ ETypographySizes.SM }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ order }\n\t\t\t\t\t\t\t</UiTypography>\n\t\t\t\t\t\t) }\n\t\t\t\t\t{\n\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclassName={ cx(\"text-xxs text-nowrap md:text-xs\", {\n\t\t\t\t\t\t\t\t\"hidden md:inline\": status !== ENavStepStatus.ACTIVE,\n\t\t\t\t\t\t\t}) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ name }\n\t\t\t\t\t\t\t{ progressText }\n\t\t\t\t\t\t</span>\n\n\t\t\t\t\t}\n\t\t\t\t</UiTypography>\n\n\t\t\t</button>\n\t\t</div>\n\t);\n};\n"],"names":["getStepClasses","status","isClickable","cx","ENavStepStatus","UiNavigationStep","id","name","subSteps","className","onClick","order","totalSteps","isActive","isComplete","icon","currentStepId","updateSubstepProgress","registerStep","useStepNav","isSubstepActive","subStep","hasSubsteps","useEffect","handleClick","calculateWidth","progressText","step","jsx","styles","jsxs","UiTypography","ETextWeight","ETypographySizes"],"mappings":"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"}
|
package/index.d.ts
CHANGED