bonkers-ui 2.0.5 → 2.0.7
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 +5 -5
- package/components/UiButton/UiButton.js +26 -28
- package/components/UiButton/UiButton.js.map +1 -1
- package/components/UiButton/_types.d.ts +2 -1
- package/components/UiButton/_types.js +1 -1
- package/components/UiButton/_types.js.map +1 -1
- package/components/UiInput/UiInput.base.js +17 -13
- package/components/UiInput/UiInput.base.js.map +1 -1
- package/components/UiInput/UiInputText.d.ts +3 -2
- package/components/UiInput/UiInputText.js +8 -9
- package/components/UiInput/UiInputText.js.map +1 -1
- package/components/UiInputRange/UiInputRange.js +50 -39
- package/components/UiInputRange/UiInputRange.js.map +1 -1
- package/components/UiPlainRadio/UiPlainRadio.js +76 -56
- package/components/UiPlainRadio/UiPlainRadio.js.map +1 -1
- package/components/UiRadio/UiRadio.js +36 -35
- package/components/UiRadio/UiRadio.js.map +1 -1
- package/components/UiSelect/UiSelect.d.ts +3 -0
- package/components/UiSelect/UiSelect.js +76 -53
- package/components/UiSelect/UiSelect.js.map +1 -1
- package/components/UiStars/UiStars.d.ts +2 -1
- package/components/UiStars/UiStars.js +11 -10
- package/components/UiStars/UiStars.js.map +1 -1
- package/components/UiToggle/UiToggle.d.ts +2 -0
- package/components/UiToggle/UiToggle.js +116 -112
- package/components/UiToggle/UiToggle.js.map +1 -1
- package/package.json +24 -24
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UiStars.js","sources":["../../../src/components/UiStars/UiStars.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport { EStarsSize, EStarColors } from \"./_types\";\n\nexport const colorClasses = {\n\t[EStarColors.DEFAULT]: \"text-accent-alt-600\",\n\t[EStarColors.PRIMARY]: \"text-primary\",\n\t[EStarColors.WHITE]: \"text-white\",\n\t[EStarColors.BLACK]: \"text-black\",\n\t[EStarColors.CURRENT]: \"text-current\",\n};\n\ninterface IUiStars {\n\tstarsFilled?: number\n\tsize?: EStarsSize\n\tcount?: number\n\tcolor?: EStarColors\n\tclassName?: string\n}\n\nconst sizeClasses = {\n\t[EStarsSize.SM]: \"w-sm h-sm\",\n\t[EStarsSize.MD]: \"w-md h-md\",\n\t[EStarsSize.LG]: \"w-lg h-lg\"\n};\n\nexport const UiStars = ({\n\tstarsFilled = 0,\n\tsize = EStarsSize.MD,\n\tcount = 5,\n\tclassName,\n\tcolor = EStarColors.DEFAULT\n}: IUiStars) => {\n\tconst filledStars = Math.min(Math.max(starsFilled, 0), count);\n\n\treturn (\n\t\t<div className={ cx(\"flex\", className) }>\n\t\t\t{ Array.from({\n\t\t\t\tlength: count\n\t\t\t}, (_, index) => {\n\t\t\t\tconst isCompletelyFilled = index < Math.floor(filledStars);\n\t\t\t\tconst isPartiallyFilled = !isCompletelyFilled && index === Math.floor(filledStars);\n\n\t\t\t\tlet filledPercentage = 0;\n\n\t\t\t\tif (isPartiallyFilled) {\n\t\t\t\t\tconst decimal = filledStars % 1;\n\t\t\t\t\tfilledPercentage = decimal * 100;\n\t\t\t\t}\n\n\t\t\t\treturn (\n\t\t\t\t\t<div key={ index } className=\"relative\">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tclassName={ cx(\n\t\t\t\t\t\t\t\tsizeClasses[size],\n\t\t\t\t\t\t\t\tcolorClasses[color]\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tviewBox=\"0 0 25 23\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ isPartiallyFilled && (\n\t\t\t\t\t\t\t\t<defs>\n\t\t\t\t\t\t\t\t\t<linearGradient id={
|
|
1
|
+
{"version":3,"file":"UiStars.js","sources":["../../../src/components/UiStars/UiStars.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport { EStarsSize, EStarColors } from \"./_types\";\n\nexport const colorClasses = {\n\t[EStarColors.DEFAULT]: \"text-accent-alt-600\",\n\t[EStarColors.PRIMARY]: \"text-primary\",\n\t[EStarColors.WHITE]: \"text-white\",\n\t[EStarColors.BLACK]: \"text-black\",\n\t[EStarColors.CURRENT]: \"text-current\",\n};\n\ninterface IUiStars {\n\tstarsFilled?: number\n\tsize?: EStarsSize\n\tcount?: number\n\tcolor?: EStarColors\n\tname?: string\n\tclassName?: string\n}\n\nconst sizeClasses = {\n\t[EStarsSize.SM]: \"w-sm h-sm\",\n\t[EStarsSize.MD]: \"w-md h-md\",\n\t[EStarsSize.LG]: \"w-lg h-lg\"\n};\n\nexport const UiStars = ({\n\tstarsFilled = 0,\n\tsize = EStarsSize.MD,\n\tcount = 5,\n\tclassName,\n\tcolor = EStarColors.DEFAULT,\n\tname = \"stars\"\n}: IUiStars) => {\n\tconst filledStars = Math.min(Math.max(starsFilled, 0), count);\n\n\treturn (\n\t\t<div className={ cx(\"flex\", className) }>\n\t\t\t{ Array.from({\n\t\t\t\tlength: count\n\t\t\t}, (_, index) => {\n\t\t\t\tconst isCompletelyFilled = index < Math.floor(filledStars);\n\t\t\t\tconst isPartiallyFilled = !isCompletelyFilled && index === Math.floor(filledStars);\n\n\t\t\t\tlet filledPercentage = 0;\n\n\t\t\t\tif (isPartiallyFilled) {\n\t\t\t\t\tconst decimal = filledStars % 1;\n\t\t\t\t\tfilledPercentage = decimal * 100;\n\t\t\t\t}\n\n\t\t\t\treturn (\n\t\t\t\t\t<div key={ index } className=\"relative\">\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tclassName={ cx(\n\t\t\t\t\t\t\t\tsizeClasses[size],\n\t\t\t\t\t\t\t\tcolorClasses[color]\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tviewBox=\"0 0 25 23\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ isPartiallyFilled && (\n\t\t\t\t\t\t\t\t<defs>\n\t\t\t\t\t\t\t\t\t<linearGradient id={ `${name}-star-fill-${index}` } x1=\"0\" x2=\"1\" y1=\"0\" y2=\"0\">\n\t\t\t\t\t\t\t\t\t\t<stop offset={ `${filledPercentage}%` } stopColor=\"currentColor\" />\n\t\t\t\t\t\t\t\t\t\t<stop offset={ `${filledPercentage}%` } stopColor=\"transparent\" />\n\t\t\t\t\t\t\t\t\t</linearGradient>\n\t\t\t\t\t\t\t\t</defs>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\td=\"M11.474 1.68128C11.8026 0.912241 12.8927 0.912241 13.2213 1.68128L15.5868 7.21835C15.7989 7.71478 16.2692 8.0523 16.8074 8.09431L22.8886 8.56895C23.738 8.63525 24.0774 9.69994 23.4231 10.2457L18.8377 14.0697C18.4124 14.4244 18.2263 14.9904 18.3581 15.5283L19.7672 21.2797C19.9677 22.0979 19.083 22.7529 18.3589 22.3223L13.0888 19.1884C12.632 18.9167 12.0633 18.9167 11.6065 19.1884L6.33637 22.3223C5.61231 22.7529 4.72763 22.0979 4.9281 21.2797L6.33724 15.5283C6.46904 14.9904 6.28291 14.4244 5.85758 14.0697L1.27223 10.2457C0.617879 9.69994 0.957297 8.63525 1.80676 8.56895L7.88795 8.09431C8.42615 8.0523 8.89645 7.71478 9.10853 7.21835L11.474 1.68128Z\"\n\t\t\t\t\t\t\t\tfill={ isCompletelyFilled\n\t\t\t\t\t\t\t\t\t? \"currentColor\"\n\t\t\t\t\t\t\t\t\t: (isPartiallyFilled\n\t\t\t\t\t\t\t\t\t\t? `url(#star-fill-${index})`\n\t\t\t\t\t\t\t\t\t\t: \"transparent\") }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t}) }\n\t\t</div>\n\t);\n};\n"],"names":["colorClasses","EStarColors","sizeClasses","EStarsSize","UiStars","starsFilled","size","count","className","color","name","filledStars","jsx","cx","_","index","isCompletelyFilled","isPartiallyFilled","filledPercentage","jsxs"],"mappings":";;;;AAIO,MAAMA,IAAe;AAAA,EAC3B,CAACC,EAAY,OAAO,GAAG;AAAA,EACvB,CAACA,EAAY,OAAO,GAAG;AAAA,EACvB,CAACA,EAAY,KAAK,GAAG;AAAA,EACrB,CAACA,EAAY,KAAK,GAAG;AAAA,EACrB,CAACA,EAAY,OAAO,GAAG;AACxB,GAWMC,IAAc;AAAA,EACnB,CAACC,EAAW,EAAE,GAAG;AAAA,EACjB,CAACA,EAAW,EAAE,GAAG;AAAA,EACjB,CAACA,EAAW,EAAE,GAAG;AAClB,GAEaC,IAAU,CAAC;AAAA,EACvB,aAAAC,IAAc;AAAA,EACd,MAAAC,IAAOH,EAAW;AAAA,EAClB,OAAAI,IAAQ;AAAA,EACR,WAAAC;AAAA,EACA,OAAAC,IAAQR,EAAY;AAAA,EACpB,MAAAS,IAAO;AACR,MAAgB;AACT,QAAAC,IAAc,KAAK,IAAI,KAAK,IAAIN,GAAa,CAAC,GAAGE,CAAK;AAG3D,SAAA,gBAAAK,EAAC,SAAI,WAAYC,EAAG,QAAQL,CAAS,GAClC,gBAAM,KAAK;AAAA,IACZ,QAAQD;AAAA,EAAA,GACN,CAACO,GAAGC,MAAU;AAChB,UAAMC,IAAqBD,IAAQ,KAAK,MAAMJ,CAAW,GACnDM,IAAoB,CAACD,KAAsBD,MAAU,KAAK,MAAMJ,CAAW;AAEjF,QAAIO,IAAmB;AAEvB,WAAID,MAEHC,IADgBP,IAAc,IACD,MAI7B,gBAAAC,EAAC,OAAkB,EAAA,WAAU,YAC5B,UAAA,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,WAAYN;AAAA,UACXX,EAAYI,CAAI;AAAA,UAChBN,EAAaS,CAAK;AAAA,QACnB;AAAA,QACA,SAAQ;AAAA,QAEN,UAAA;AAAA,UAAAQ,uBACA,QACA,EAAA,UAAA,gBAAAE,EAAC,kBAAe,EAAA,IAAK,GAAGT,CAAI,cAAcK,CAAK,IAAK,IAAG,KAAI,IAAG,KAAI,IAAG,KAAI,IAAG,KAC3E,UAAA;AAAA,YAAA,gBAAAH,EAAC,UAAK,QAAS,GAAGM,CAAgB,KAAM,WAAU,gBAAe;AAAA,8BAChE,QAAK,EAAA,QAAS,GAAGA,CAAgB,KAAM,WAAU,cAAc,CAAA;AAAA,UAAA,EAAA,CACjE,EACD,CAAA;AAAA,UAED,gBAAAN;AAAA,YAAC;AAAA,YAAA;AAAA,cACA,GAAE;AAAA,cACF,MAAOI,IACJ,iBACCC,IACA,kBAAkBF,CAAK,MACvB;AAAA,YAAA;AAAA,UAAA;AAAA,QACL;AAAA,MAAA;AAAA,SAvBSA,CAyBX;AAAA,EAED,CAAA,GACF;AAEF;"}
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
+
import { EJustify } from '../../_types/align';
|
|
2
3
|
type TUiToggleProps = {
|
|
3
4
|
children?: React.ReactNode;
|
|
4
5
|
disabled?: boolean;
|
|
5
6
|
invertOrder?: boolean;
|
|
7
|
+
justify?: EJustify;
|
|
6
8
|
defaultChecked?: boolean;
|
|
7
9
|
checked?: boolean;
|
|
8
10
|
value?: boolean;
|
|
@@ -1,129 +1,133 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { useState as
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
1
|
+
import { jsxs as a, jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { useState as U, useEffect as v } from "react";
|
|
3
|
+
import i from "classnames";
|
|
4
|
+
import { EJustify as t } from "../../_types/align.js";
|
|
5
|
+
import '../../assets/UiToggle.css';const w = "_UiToggle__dot_1uov6_1", k = "_UiToggle__dot_checked_1uov6_13", x = "_UiToggle__icon_1uov6_17", N = "_UiToggle__icon_checked_1uov6_26", c = {
|
|
6
|
+
UiToggle__dot: w,
|
|
7
|
+
UiToggle__dot_checked: k,
|
|
8
|
+
UiToggle__icon: x,
|
|
9
|
+
UiToggle__icon_checked: N
|
|
10
|
+
}, A = ({
|
|
11
|
+
children: d,
|
|
12
|
+
disabled: o = !1,
|
|
13
|
+
invertOrder: u = !1,
|
|
14
|
+
justify: f = t.START,
|
|
15
|
+
checked: s,
|
|
16
|
+
value: l,
|
|
15
17
|
className: m,
|
|
16
|
-
defaultChecked:
|
|
17
|
-
onChange:
|
|
18
|
-
...
|
|
18
|
+
defaultChecked: p,
|
|
19
|
+
onChange: n,
|
|
20
|
+
...T
|
|
19
21
|
}) => {
|
|
20
|
-
const [_, g] =
|
|
21
|
-
|
|
22
|
+
const [_, g] = U(p ?? !1), e = l ?? s ?? _, h = () => {
|
|
23
|
+
l === void 0 && s === void 0 && g(!_), n == null || n(!e);
|
|
22
24
|
};
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
}, [
|
|
26
|
-
|
|
25
|
+
v(() => {
|
|
26
|
+
s !== void 0 && g(s);
|
|
27
|
+
}, [s]);
|
|
28
|
+
const y = {
|
|
29
|
+
[t.START]: "justify-start",
|
|
30
|
+
[t.END]: "justify-end",
|
|
31
|
+
[t.CENTER]: "justify-center",
|
|
32
|
+
[t.BETWEEN]: "justify-between",
|
|
33
|
+
[t.AROUND]: "justify-around",
|
|
34
|
+
[t.EVENLY]: "justify-evenly"
|
|
35
|
+
};
|
|
36
|
+
return /* @__PURE__ */ a("label", { className: i(
|
|
37
|
+
"ui-toggle",
|
|
38
|
+
"flex",
|
|
39
|
+
"cursor-pointer",
|
|
40
|
+
"gap-sm",
|
|
41
|
+
"rounded-full",
|
|
42
|
+
"items-center",
|
|
43
|
+
"w-full",
|
|
44
|
+
"leading-normal",
|
|
45
|
+
"text-md",
|
|
27
46
|
{
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
47
|
+
"flex-row-reverse": u,
|
|
48
|
+
"pointer-events-none opacity-50": o
|
|
49
|
+
},
|
|
50
|
+
y[f],
|
|
51
|
+
m
|
|
52
|
+
), children: [
|
|
53
|
+
/* @__PURE__ */ a("span", { className: i(
|
|
54
|
+
"relative",
|
|
55
|
+
"block",
|
|
56
|
+
"h-md"
|
|
57
|
+
), children: [
|
|
58
|
+
/* @__PURE__ */ r(
|
|
59
|
+
"input",
|
|
60
|
+
{
|
|
61
|
+
className: i(
|
|
62
|
+
"absolute",
|
|
63
|
+
"size-0",
|
|
64
|
+
"appearance-none",
|
|
65
|
+
"border-0"
|
|
66
|
+
),
|
|
67
|
+
type: "checkbox",
|
|
68
|
+
checked: e,
|
|
69
|
+
onChange: h,
|
|
70
|
+
disabled: o,
|
|
71
|
+
value: l,
|
|
72
|
+
...T
|
|
73
|
+
}
|
|
31
74
|
),
|
|
32
|
-
|
|
33
|
-
"
|
|
34
|
-
"
|
|
35
|
-
"
|
|
75
|
+
/* @__PURE__ */ r("span", { className: i(
|
|
76
|
+
"block",
|
|
77
|
+
"h-md",
|
|
78
|
+
"w-xl",
|
|
36
79
|
"rounded-full",
|
|
37
|
-
"mt-sm",
|
|
38
|
-
"items-center",
|
|
39
|
-
"w-full",
|
|
40
|
-
"leading-normal",
|
|
41
|
-
"text-md",
|
|
42
80
|
{
|
|
43
|
-
"
|
|
44
|
-
"
|
|
81
|
+
"bg-primary-600": e && !o,
|
|
82
|
+
"bg-secondary-alt-300": !e && o,
|
|
83
|
+
"bg-secondary-alt-600": !e && !o,
|
|
84
|
+
"bg-primary-300": e && o
|
|
45
85
|
}
|
|
46
|
-
),
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
disabled: e,
|
|
65
|
-
value: i,
|
|
66
|
-
...p
|
|
67
|
-
}
|
|
68
|
-
),
|
|
69
|
-
/* @__PURE__ */ r("span", { className: t(
|
|
70
|
-
"block",
|
|
71
|
-
"h-md",
|
|
72
|
-
"w-xl",
|
|
73
|
-
"rounded-full",
|
|
74
|
-
{
|
|
75
|
-
"bg-primary-600": o && !e,
|
|
76
|
-
"bg-secondary-alt-300": !o && e,
|
|
77
|
-
"bg-secondary-alt-600": !o && !e,
|
|
78
|
-
"bg-primary-300": o && e
|
|
79
|
-
}
|
|
80
|
-
) }),
|
|
81
|
-
/* @__PURE__ */ r("span", { className: t(
|
|
86
|
+
) }),
|
|
87
|
+
/* @__PURE__ */ r("span", { className: i(
|
|
88
|
+
"absolute",
|
|
89
|
+
"top-[50%]",
|
|
90
|
+
"block",
|
|
91
|
+
"rounded-full",
|
|
92
|
+
"bg-white",
|
|
93
|
+
c.UiToggle__dot,
|
|
94
|
+
{
|
|
95
|
+
"hover:shadow-border-secondary": !e && !o,
|
|
96
|
+
"hover:shadow-border-primary": e && !o,
|
|
97
|
+
[c.UiToggle__dot_checked]: e
|
|
98
|
+
}
|
|
99
|
+
), children: /* @__PURE__ */ r(
|
|
100
|
+
"svg",
|
|
101
|
+
{
|
|
102
|
+
className: i(
|
|
103
|
+
c.UiToggle__icon,
|
|
82
104
|
"absolute",
|
|
83
|
-
"
|
|
84
|
-
"block",
|
|
85
|
-
"rounded-full",
|
|
86
|
-
"bg-white",
|
|
87
|
-
l.UiToggle__dot,
|
|
105
|
+
o ? "text-primary-300" : "text-primary-600",
|
|
88
106
|
{
|
|
89
|
-
|
|
90
|
-
"hover:shadow-border-primary": o && !e,
|
|
91
|
-
[l.UiToggle__dot_checked]: o
|
|
107
|
+
[c.UiToggle__icon_checked]: e
|
|
92
108
|
}
|
|
93
|
-
),
|
|
94
|
-
|
|
109
|
+
),
|
|
110
|
+
width: "16",
|
|
111
|
+
height: "16",
|
|
112
|
+
viewBox: "0 0 16 16",
|
|
113
|
+
fill: "none",
|
|
114
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
115
|
+
children: /* @__PURE__ */ r(
|
|
116
|
+
"path",
|
|
95
117
|
{
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
{
|
|
101
|
-
[l.UiToggle__icon_checked]: o
|
|
102
|
-
}
|
|
103
|
-
),
|
|
104
|
-
width: "16",
|
|
105
|
-
height: "16",
|
|
106
|
-
viewBox: "0 0 16 16",
|
|
107
|
-
fill: "none",
|
|
108
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
109
|
-
children: /* @__PURE__ */ r(
|
|
110
|
-
"path",
|
|
111
|
-
{
|
|
112
|
-
d: "M1 4.40106L6.60071 10.1135L15.1694 1.71245",
|
|
113
|
-
stroke: "currentColor",
|
|
114
|
-
"stroke-width": "1.6",
|
|
115
|
-
"stroke-linecap": "round"
|
|
116
|
-
}
|
|
117
|
-
)
|
|
118
|
+
d: "M1 4.40106L6.60071 10.1135L15.1694 1.71245",
|
|
119
|
+
stroke: "currentColor",
|
|
120
|
+
"stroke-width": "1.6",
|
|
121
|
+
"stroke-linecap": "round"
|
|
118
122
|
}
|
|
119
|
-
)
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
);
|
|
123
|
+
)
|
|
124
|
+
}
|
|
125
|
+
) })
|
|
126
|
+
] }),
|
|
127
|
+
d
|
|
128
|
+
] });
|
|
125
129
|
};
|
|
126
130
|
export {
|
|
127
|
-
|
|
131
|
+
A as UiToggle
|
|
128
132
|
};
|
|
129
133
|
//# sourceMappingURL=UiToggle.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UiToggle.js","sources":["../../../src/components/UiToggle/UiToggle.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport cx from \"classnames\";\nimport styles from \"./UiToggle.module.css\";\n\ntype TUiToggleProps = {\n\tchildren?: React.ReactNode\n\tdisabled?: boolean\n\tinvertOrder?: boolean\n\tdefaultChecked?: boolean\n\tchecked?: boolean\n\tvalue?: boolean\n\tonChange?: (checked: boolean) => void\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, \"onChange\">;\n\nexport const UiToggle: React.FC<TUiToggleProps> = ({\n\tchildren,\n\tdisabled = false,\n\tinvertOrder = false,\n\tchecked,\n\tvalue,\n\tclassName,\n\tdefaultChecked,\n\tonChange,\n\t...rest\n}) => {\n\n\tconst [toggled, setIsToggled] = useState<boolean>(defaultChecked ?? false);\n\n\tconst isChecked = value ?? checked ?? toggled;\n\n\tconst handleChange = () => {\n\t\tif (value === undefined && checked === undefined) {\n\t\t\tsetIsToggled(!toggled);\n\t\t}\n\n\t\tonChange?.(!isChecked);\n\t};\n\n\tuseEffect(()=>{\n\t\tif ( checked !== undefined) {\n\t\t\tsetIsToggled(checked);\n\t\t}\n\t}, [checked]);\n\n\
|
|
1
|
+
{"version":3,"file":"UiToggle.js","sources":["../../../src/components/UiToggle/UiToggle.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport cx from \"classnames\";\nimport styles from \"./UiToggle.module.css\";\nimport { EJustify } from \"../../_types/align\";\n\ntype TUiToggleProps = {\n\tchildren?: React.ReactNode\n\tdisabled?: boolean\n\tinvertOrder?: boolean\n\tjustify?: EJustify;\n\tdefaultChecked?: boolean\n\tchecked?: boolean\n\tvalue?: boolean\n\tonChange?: (checked: boolean) => void\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, \"onChange\">;\n\nexport const UiToggle: React.FC<TUiToggleProps> = ({\n\tchildren,\n\tdisabled = false,\n\tinvertOrder = false,\n\tjustify = EJustify.START,\n\tchecked,\n\tvalue,\n\tclassName,\n\tdefaultChecked,\n\tonChange,\n\t...rest\n}) => {\n\n\tconst [toggled, setIsToggled] = useState<boolean>(defaultChecked ?? false);\n\n\tconst isChecked = value ?? checked ?? toggled;\n\n\tconst handleChange = () => {\n\t\tif (value === undefined && checked === undefined) {\n\t\t\tsetIsToggled(!toggled);\n\t\t}\n\n\t\tonChange?.(!isChecked);\n\t};\n\n\tuseEffect(()=>{\n\t\tif ( checked !== undefined) {\n\t\t\tsetIsToggled(checked);\n\t\t}\n\t}, [checked]);\n\n\tconst justificationClasses = {\n\t\t[EJustify.START]: \"justify-start\",\n\t\t[EJustify.END]: \"justify-end\",\n\t\t[EJustify.CENTER]: \"justify-center\",\n\t\t[EJustify.BETWEEN]: \"justify-between\",\n\t\t[EJustify.AROUND]: \"justify-around\",\n\t\t[EJustify.EVENLY]: \"justify-evenly\"\n\t};\n\n\treturn (\n\t\t<label className={ cx(\n\t\t\t\"ui-toggle\",\n\t\t\t\"flex\",\n\t\t\t\"cursor-pointer\",\n\t\t\t\"gap-sm\",\n\t\t\t\"rounded-full\",\n\t\t\t\"items-center\",\n\t\t\t\"w-full\",\n\t\t\t\"leading-normal\",\n\t\t\t\"text-md\",\n\t\t\t{\n\t\t\t\t\"flex-row-reverse\": invertOrder,\n\t\t\t\t\"pointer-events-none opacity-50\": disabled\n\t\t\t},\n\t\t\tjustificationClasses[justify],\n\t\t\tclassName\n\t\t) }>\n\t\t\t<span className={ cx(\n\t\t\t\t\"relative\",\n\t\t\t\t\"block\",\n\t\t\t\t\"h-md\"\n\t\t\t) }>\n\n\t\t\t\t<input className={ cx(\n\t\t\t\t\t\"absolute\",\n\t\t\t\t\t\"size-0\",\n\t\t\t\t\t\"appearance-none\",\n\t\t\t\t\t\"border-0\"\n\t\t\t\t) }\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tchecked={ isChecked }\n\t\t\t\tonChange={ handleChange }\n\t\t\t\tdisabled={ disabled }\n\t\t\t\tvalue={ value }\n\t\t\t\t{ ...rest }\n\t\t\t\t>\n\t\t\t\t</input>\n\n\t\t\t\t<span className={ cx(\n\t\t\t\t\t\"block\",\n\t\t\t\t\t\"h-md\",\n\t\t\t\t\t\"w-xl\",\n\t\t\t\t\t\"rounded-full\",\n\t\t\t\t\t{\n\t\t\t\t\t\t\"bg-primary-600\": isChecked && !disabled,\n\t\t\t\t\t\t\"bg-secondary-alt-300\": !isChecked && disabled,\n\t\t\t\t\t\t\"bg-secondary-alt-600\": !isChecked && !disabled,\n\t\t\t\t\t\t\"bg-primary-300\": isChecked && disabled\n\n\t\t\t\t\t}\n\t\t\t\t) }/>\n\n\t\t\t\t<span className={ cx(\n\t\t\t\t\t\"absolute\",\n\t\t\t\t\t\"top-[50%]\",\n\t\t\t\t\t\"block\",\n\t\t\t\t\t\"rounded-full\",\n\t\t\t\t\t\"bg-white\",\n\t\t\t\t\tstyles.UiToggle__dot,\n\t\t\t\t\t{\n\t\t\t\t\t\t\"hover:shadow-border-secondary\": !isChecked && !disabled,\n\t\t\t\t\t\t\"hover:shadow-border-primary\": isChecked && !disabled,\n\t\t\t\t\t\t[styles.UiToggle__dot_checked]: isChecked\n\t\t\t\t\t},\n\n\t\t\t\t) }>\n\n\t\t\t\t\t<svg\n\t\t\t\t\t\tclassName={ cx(\n\t\t\t\t\t\t\tstyles.UiToggle__icon,\n\t\t\t\t\t\t\t\"absolute\",\n\t\t\t\t\t\t\tdisabled\n\t\t\t\t\t\t\t\t? \"text-primary-300\"\n\t\t\t\t\t\t\t\t: \"text-primary-600\",\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t[styles.UiToggle__icon_checked]: isChecked ,\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t) }\n\t\t\t\t\t\twidth=\"16\"\n\t\t\t\t\t\theight=\"16\"\n\t\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<path\n\t\t\t\t\t\t\td=\"M1 4.40106L6.60071 10.1135L15.1694 1.71245\"\n\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\tstroke-width=\"1.6\"\n\t\t\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</svg>\n\n\t\t\t\t</span>\n\t\t\t</span>\n\n\t\t\t{ children }\n\n\t\t</label>\n\n\t);\n};\n"],"names":["UiToggle","children","disabled","invertOrder","justify","EJustify","checked","value","className","defaultChecked","onChange","rest","toggled","setIsToggled","useState","isChecked","handleChange","useEffect","justificationClasses","jsxs","cx","jsx","styles"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "bonkers-ui",
|
|
3
|
-
"version": "v2.0.
|
|
3
|
+
"version": "v2.0.7",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Bonkers ui library",
|
|
6
6
|
"author": "cc6.magister@gmail.com",
|
|
@@ -18,46 +18,46 @@
|
|
|
18
18
|
"prepare": "husky"
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@tailwindcss/vite": "^4.1.
|
|
21
|
+
"@tailwindcss/vite": "^4.1.7",
|
|
22
22
|
"ajv": "^8.17.1",
|
|
23
23
|
"classnames": "^2.5.1",
|
|
24
24
|
"postcss": "^8.5.3",
|
|
25
25
|
"prettier": "^3.5.3",
|
|
26
26
|
"react": "^19.1.0",
|
|
27
27
|
"react-dom": "^19.1.0",
|
|
28
|
-
"tailwindcss": "^4.1.
|
|
28
|
+
"tailwindcss": "^4.1.7",
|
|
29
29
|
"vite-tsconfig-paths": "^5.1.4"
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
32
|
"@chromatic-com/storybook": "^3.2.6",
|
|
33
|
-
"@storybook/addon-essentials": "^8.6.
|
|
34
|
-
"@storybook/addon-interactions": "^8.6.
|
|
35
|
-
"@storybook/addon-onboarding": "^8.6.
|
|
36
|
-
"@storybook/blocks": "^8.6.
|
|
37
|
-
"@storybook/manager-api": "^8.6.
|
|
38
|
-
"@storybook/preview-api": "^8.6.
|
|
39
|
-
"@storybook/react": "^8.6.
|
|
40
|
-
"@storybook/react-vite": "^8.6.
|
|
41
|
-
"@storybook/test": "^8.6.
|
|
33
|
+
"@storybook/addon-essentials": "^8.6.14",
|
|
34
|
+
"@storybook/addon-interactions": "^8.6.14",
|
|
35
|
+
"@storybook/addon-onboarding": "^8.6.14",
|
|
36
|
+
"@storybook/blocks": "^8.6.14",
|
|
37
|
+
"@storybook/manager-api": "^8.6.14",
|
|
38
|
+
"@storybook/preview-api": "^8.6.14",
|
|
39
|
+
"@storybook/react": "^8.6.14",
|
|
40
|
+
"@storybook/react-vite": "^8.6.14",
|
|
41
|
+
"@storybook/test": "^8.6.14",
|
|
42
42
|
"@stylistic/eslint-plugin": "^4.2.0",
|
|
43
43
|
"@types/bun": "latest",
|
|
44
|
-
"@types/react": "^19.1.
|
|
45
|
-
"@types/react-dom": "^19.1.
|
|
46
|
-
"@vitejs/plugin-react": "^4.
|
|
47
|
-
"eslint": "^9.
|
|
48
|
-
"eslint-plugin-react": "^7.37.
|
|
44
|
+
"@types/react": "^19.1.5",
|
|
45
|
+
"@types/react-dom": "^19.1.5",
|
|
46
|
+
"@vitejs/plugin-react": "^4.4.1",
|
|
47
|
+
"eslint": "^9.27.0",
|
|
48
|
+
"eslint-plugin-react": "^7.37.5",
|
|
49
49
|
"eslint-plugin-storybook": "^0.12.0",
|
|
50
50
|
"eslint-plugin-tailwindcss": "^3.18.0",
|
|
51
51
|
"gh-pages": "^6.3.0",
|
|
52
52
|
"husky": "^9.1.7",
|
|
53
|
-
"lint-staged": "^
|
|
54
|
-
"storybook": "^8.6.
|
|
53
|
+
"lint-staged": "^16.0.0",
|
|
54
|
+
"storybook": "^8.6.14",
|
|
55
55
|
"storybook-dark-mode": "^4.0.2",
|
|
56
|
-
"typescript": "^5.8.
|
|
57
|
-
"typescript-eslint": "^8.
|
|
58
|
-
"vite": "^6.
|
|
59
|
-
"vite-plugin-dts": "^4.5.
|
|
60
|
-
"vite-plugin-lib-inject-css": "^2.2.
|
|
56
|
+
"typescript": "^5.8.3",
|
|
57
|
+
"typescript-eslint": "^8.32.1",
|
|
58
|
+
"vite": "^6.3.5",
|
|
59
|
+
"vite-plugin-dts": "^4.5.4",
|
|
60
|
+
"vite-plugin-lib-inject-css": "^2.2.2"
|
|
61
61
|
},
|
|
62
62
|
"peerDependencies": {
|
|
63
63
|
"@fortawesome/fontawesome-svg-core": "^6.6.0",
|