bonkers-ui 2.0.7 → 2.0.8
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/bonkers.css +329 -225
- package/components/UiInputRange/UiInputRange.js +45 -46
- package/components/UiInputRange/UiInputRange.js.map +1 -1
- package/components/UiSkeleton/UiSkeleton.js +130 -207
- package/components/UiSkeleton/UiSkeleton.js.map +1 -1
- package/components/UiSkeleton/index.d.ts +1 -0
- package/components/UiSkeleton/index.js +2 -0
- package/components/UiSkeleton/index.js.map +1 -1
- package/components/UiStars/UiStars.js +22 -22
- package/components/UiStars/UiStars.js.map +1 -1
- package/components/UiTabs/UiTabs.js +22 -17
- package/components/UiTabs/UiTabs.js.map +1 -1
- package/helper.d.ts +6 -14
- package/package.json +17 -24
|
@@ -1,82 +1,81 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import '../../assets/UiInputRange.css';const
|
|
5
|
-
thumb:
|
|
6
|
-
},
|
|
7
|
-
value:
|
|
8
|
-
min:
|
|
9
|
-
max:
|
|
10
|
-
step:
|
|
11
|
-
onChangeHandler:
|
|
12
|
-
className:
|
|
13
|
-
...
|
|
1
|
+
import { jsxs as M, jsx as n } from "react/jsx-runtime";
|
|
2
|
+
import m, { useState as b, useCallback as O, useEffect as S } from "react";
|
|
3
|
+
import g from "classnames";
|
|
4
|
+
import '../../assets/UiInputRange.css';const j = "_thumb_hkko1_18", T = {
|
|
5
|
+
thumb: j
|
|
6
|
+
}, $ = ({
|
|
7
|
+
value: s,
|
|
8
|
+
min: r,
|
|
9
|
+
max: a,
|
|
10
|
+
step: x,
|
|
11
|
+
onChangeHandler: y,
|
|
12
|
+
className: v,
|
|
13
|
+
...l
|
|
14
14
|
}) => {
|
|
15
|
-
const e =
|
|
16
|
-
var h,
|
|
15
|
+
const e = m.useRef(null), c = m.useRef(null), [k, R] = b(0), [w, N] = b(0), i = O(() => {
|
|
16
|
+
var h, f;
|
|
17
17
|
if (!e.current || !c.current) return;
|
|
18
|
-
const t = parseFloat(String(
|
|
19
|
-
if (
|
|
20
|
-
const
|
|
21
|
-
|
|
22
|
-
}, [
|
|
23
|
-
|
|
24
|
-
|
|
18
|
+
const t = parseFloat(String(s)), o = parseFloat(String(r)), z = parseFloat(String(a)), C = ((h = c.current) == null ? void 0 : h.getBoundingClientRect().width) ?? 0, u = ((f = e.current) == null ? void 0 : f.getBoundingClientRect().width) ?? 0;
|
|
19
|
+
if (u === 0) return;
|
|
20
|
+
const F = (t - o) / (z - o) * 100, p = C / u * 100, d = Math.max(0, Math.min(100, F * (1 - p / 100)));
|
|
21
|
+
R(d), N(d + p / 2);
|
|
22
|
+
}, [r, a, s]);
|
|
23
|
+
S(() => {
|
|
24
|
+
i();
|
|
25
25
|
const t = new ResizeObserver(() => {
|
|
26
|
-
|
|
26
|
+
i();
|
|
27
27
|
});
|
|
28
28
|
return e.current && t.observe(e.current), () => {
|
|
29
29
|
t.disconnect();
|
|
30
30
|
};
|
|
31
|
-
}, [
|
|
32
|
-
const
|
|
33
|
-
if (t ===
|
|
34
|
-
const
|
|
35
|
-
|
|
31
|
+
}, [i]);
|
|
32
|
+
const P = (t) => {
|
|
33
|
+
if (t === s) return;
|
|
34
|
+
const o = parseFloat(t.toFixed(10));
|
|
35
|
+
y(o);
|
|
36
36
|
};
|
|
37
|
-
return /* @__PURE__ */
|
|
37
|
+
return /* @__PURE__ */ M(
|
|
38
38
|
"div",
|
|
39
39
|
{
|
|
40
|
-
className:
|
|
40
|
+
className: g(
|
|
41
41
|
"relative box-content h-xl py-xxs",
|
|
42
|
-
|
|
43
|
-
|
|
42
|
+
l.disabled && "opacity-60 cursor-default pointer-events-none",
|
|
43
|
+
v
|
|
44
44
|
),
|
|
45
45
|
children: [
|
|
46
46
|
/* @__PURE__ */ n(
|
|
47
47
|
"input",
|
|
48
48
|
{
|
|
49
|
-
...
|
|
49
|
+
...l,
|
|
50
50
|
ref: e,
|
|
51
51
|
className: "absolute left-0 top-0 size-full cursor-pointer appearance-none bg-transparent",
|
|
52
52
|
style: {
|
|
53
53
|
touchAction: "none"
|
|
54
54
|
},
|
|
55
55
|
type: "range",
|
|
56
|
-
min:
|
|
57
|
-
max:
|
|
58
|
-
step:
|
|
59
|
-
value:
|
|
60
|
-
onChange: (t) =>
|
|
56
|
+
min: r,
|
|
57
|
+
max: a,
|
|
58
|
+
step: x,
|
|
59
|
+
value: s,
|
|
60
|
+
onChange: (t) => P(+t.target.value),
|
|
61
61
|
onTouchStart: (t) => t.stopPropagation(),
|
|
62
62
|
onTouchMove: (t) => t.stopPropagation()
|
|
63
63
|
}
|
|
64
64
|
),
|
|
65
|
-
/* @__PURE__ */ n("div", { className: "pointer-events-none absolute left-0 top-1/2 h-xxs w-full -translate-y-1/2 rounded-sm bg-secondary-alt"
|
|
66
|
-
/* @__PURE__ */ n(
|
|
65
|
+
/* @__PURE__ */ n("div", { className: "pointer-events-none absolute left-0 top-1/2 h-xxs w-full -translate-y-1/2 rounded-sm bg-secondary-alt overflow-clip", children: /* @__PURE__ */ n(
|
|
67
66
|
"div",
|
|
68
67
|
{
|
|
69
68
|
className: "pointer-events-none absolute left-0 top-1/2 h-xxs -translate-y-1/2 rounded-sm bg-primary-600",
|
|
70
69
|
style: {
|
|
71
|
-
width: `${
|
|
70
|
+
width: `${w}%`
|
|
72
71
|
}
|
|
73
72
|
}
|
|
74
|
-
),
|
|
73
|
+
) }),
|
|
75
74
|
/* @__PURE__ */ n(
|
|
76
75
|
"div",
|
|
77
76
|
{
|
|
78
|
-
className:
|
|
79
|
-
|
|
77
|
+
className: g(
|
|
78
|
+
T.thumb,
|
|
80
79
|
"pointer-events-none",
|
|
81
80
|
"absolute",
|
|
82
81
|
"box-content",
|
|
@@ -88,7 +87,7 @@ import '../../assets/UiInputRange.css';const C = "_thumb_hkko1_18", F = {
|
|
|
88
87
|
),
|
|
89
88
|
ref: c,
|
|
90
89
|
style: {
|
|
91
|
-
left: `${
|
|
90
|
+
left: `${k}%`
|
|
92
91
|
},
|
|
93
92
|
children: /* @__PURE__ */ n("div", { className: "absolute left-1/2 top-1/2 size-xxs -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-600" })
|
|
94
93
|
}
|
|
@@ -98,6 +97,6 @@ import '../../assets/UiInputRange.css';const C = "_thumb_hkko1_18", F = {
|
|
|
98
97
|
);
|
|
99
98
|
};
|
|
100
99
|
export {
|
|
101
|
-
|
|
100
|
+
$ as UiInputRange
|
|
102
101
|
};
|
|
103
102
|
//# sourceMappingURL=UiInputRange.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UiInputRange.js","sources":["../../../src/components/UiInputRange/UiInputRange.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport styles from \"./UiInputRange.module.css\";\n\nexport type TUiInputRangeProps = {\n\tvalue: number;\n\tmin: string | number;\n\tmax: string | number;\n\tstep: string | number;\n\tonChangeHandler: (value: number) => void;\n\tclassName?: string;\n} & React.HTMLProps<HTMLInputElement>;\n\nexport const UiInputRange: React.FC<TUiInputRangeProps> = ({\n\tvalue,\n\tmin,\n\tmax,\n\tstep,\n\tonChangeHandler,\n\tclassName,\n\t...rest\n}) => {\n\tconst track = React.useRef<HTMLInputElement>(null);\n\tconst thumb = React.useRef<HTMLDivElement>(null);\n\tconst [position, setPosition] =
|
|
1
|
+
{"version":3,"file":"UiInputRange.js","sources":["../../../src/components/UiInputRange/UiInputRange.tsx"],"sourcesContent":["import React, { useState, useEffect, useCallback } from \"react\";\nimport cx from \"classnames\";\nimport styles from \"./UiInputRange.module.css\";\n\nexport type TUiInputRangeProps = {\n\tvalue: number;\n\tmin: string | number;\n\tmax: string | number;\n\tstep: string | number;\n\tonChangeHandler: (value: number) => void;\n\tclassName?: string;\n} & React.HTMLProps<HTMLInputElement>;\n\nexport const UiInputRange: React.FC<TUiInputRangeProps> = ({\n\tvalue,\n\tmin,\n\tmax,\n\tstep,\n\tonChangeHandler,\n\tclassName,\n\t...rest\n}) => {\n\tconst track = React.useRef<HTMLInputElement>(null);\n\tconst thumb = React.useRef<HTMLDivElement>(null);\n\tconst [position, setPosition] = useState(0);\n\tconst [trackOffset, setTrackOffset] = useState(0);\n\n\tconst updatePositions = useCallback(() => {\n\t\tif (!track.current || !thumb.current) return;\n\n\t\tconst numValue = parseFloat(String(value));\n\t\tconst numMin = parseFloat(String(min));\n\t\tconst numMax = parseFloat(String(max));\n\n\t\tconst thumbWidth = thumb.current?.getBoundingClientRect().width ?? 0;\n\t\tconst trackWidth = track.current?.getBoundingClientRect().width ?? 0;\n\n\t\tif (trackWidth === 0) return;\n\n\t\tconst percentage = ((numValue - numMin) / (numMax - numMin)) * 100;\n\t\tconst thumbWidthPercentage = (thumbWidth / trackWidth) * 100;\n\n\t\tconst adjustedPercentage = Math.max(0, Math.min(100, percentage * (1 - thumbWidthPercentage / 100)));\n\n\t\tsetPosition(adjustedPercentage);\n\t\tsetTrackOffset(adjustedPercentage + (thumbWidthPercentage / 2));\n\t}, [min, max, value]);\n\n\tuseEffect(() => {\n\t\tupdatePositions();\n\n\t\tconst resizeObserver = new ResizeObserver(() => {\n\t\t\tupdatePositions();\n\t\t});\n\n\t\tif (track.current) {\n\t\t\tresizeObserver.observe(track.current);\n\t\t}\n\n\t\treturn () => {\n\t\t\tresizeObserver.disconnect();\n\t\t};\n\t}, [updatePositions]);\n\n\tconst handleOnChange = (newValue: number) => {\n\t\tif (newValue === value) return;\n\t\tconst preciseValue = parseFloat(newValue.toFixed(10));\n\t\tonChangeHandler(preciseValue);\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ cx(\n\t\t\t\t\"relative box-content h-xl py-xxs\",\n\t\t\t\trest.disabled && \"opacity-60 cursor-default pointer-events-none\",\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t<input\n\t\t\t\t{ ...rest }\n\t\t\t\tref={ track }\n\t\t\t\tclassName=\"absolute left-0 top-0 size-full cursor-pointer appearance-none bg-transparent\"\n\t\t\t\tstyle={ {\n\t\t\t\t\ttouchAction: \"none\",\n\t\t\t\t} }\n\t\t\t\ttype=\"range\"\n\t\t\t\tmin={ min }\n\t\t\t\tmax={ max }\n\t\t\t\tstep={ step }\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ (e) => handleOnChange(+e.target.value) }\n\t\t\t\tonTouchStart={ (e) => e.stopPropagation() }\n\t\t\t\tonTouchMove={ (e) => e.stopPropagation() }\n\t\t\t/>\n\n\t\t\t<div className=\"pointer-events-none absolute left-0 top-1/2 h-xxs w-full -translate-y-1/2 rounded-sm bg-secondary-alt overflow-clip\">\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"pointer-events-none absolute left-0 top-1/2 h-xxs -translate-y-1/2 rounded-sm bg-primary-600\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\twidth: `${trackOffset}%`,\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tclassName={ cx(\n\t\t\t\t\tstyles.thumb,\n\t\t\t\t\t\"pointer-events-none\",\n\t\t\t\t\t\"absolute\",\n\t\t\t\t\t\"box-content\",\n\t\t\t\t\t\"size-md\",\n\t\t\t\t\t\"-translate-y-1/2\",\n\t\t\t\t\t\"rounded-full\",\n\t\t\t\t\t\"bg-white\",\n\t\t\t\t\t\"border-primary-600\",\n\t\t\t\t) }\n\t\t\t\tref={ thumb }\n\t\t\t\tstyle={ {\n\t\t\t\t\tleft: `${position}%`,\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<div className=\"absolute left-1/2 top-1/2 size-xxs -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-600\" />\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n"],"names":["UiInputRange","value","min","max","step","onChangeHandler","className","rest","track","React","thumb","position","setPosition","useState","trackOffset","setTrackOffset","updatePositions","useCallback","numValue","numMin","numMax","thumbWidth","_a","trackWidth","_b","percentage","thumbWidthPercentage","adjustedPercentage","useEffect","resizeObserver","handleOnChange","newValue","preciseValue","jsxs","cx","jsx","e","styles"],"mappings":"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"}
|