bonkers-ui 2.0.6 → 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/UiInput/UiInputText.d.ts +2 -1
- 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/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 +21 -21
package/bonkers.css
CHANGED
|
@@ -117,11 +117,11 @@
|
|
|
117
117
|
--color-error-600: #a02323;
|
|
118
118
|
--color-error-700: #6b1818;
|
|
119
119
|
|
|
120
|
-
--color-warning-300: #
|
|
121
|
-
--color-warning-400: #
|
|
122
|
-
--color-warning-500: #
|
|
123
|
-
--color-warning-600: #
|
|
124
|
-
--color-warning-700: #
|
|
120
|
+
--color-warning-300: #F1A76E;
|
|
121
|
+
--color-warning-400: #E58F4F;
|
|
122
|
+
--color-warning-500: #D6702F;
|
|
123
|
+
--color-warning-600: #B45821;
|
|
124
|
+
--color-warning-700: #9A4D1B;
|
|
125
125
|
|
|
126
126
|
--color-accent-300: #c9c9f6;
|
|
127
127
|
--color-accent-400: #8b8bfc;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
+
import { TUiInputBaseProps } from './UiInput.base.tsx';
|
|
2
3
|
import { EInputKind } from './_types.ts';
|
|
3
4
|
type TUiInputTextProps = {
|
|
4
5
|
id: string;
|
|
@@ -7,6 +8,6 @@ type TUiInputTextProps = {
|
|
|
7
8
|
title?: React.ReactNode;
|
|
8
9
|
subtitle?: React.ReactNode;
|
|
9
10
|
infoComponent?: React.ReactNode;
|
|
10
|
-
} &
|
|
11
|
+
} & TUiInputBaseProps;
|
|
11
12
|
export declare const UiInputText: React.FC<TUiInputTextProps>;
|
|
12
13
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UiInputText.js","sources":["../../../src/components/UiInput/UiInputText.tsx"],"sourcesContent":["import React from \"react\";\nimport { UiInputBase } from \"./UiInput.base.tsx\";\nimport { UiInputTitled } from \"./UiInputTitled.tsx\";\nimport { EInputKind } from \"./_types.ts\";\nimport { EColors, ETypographySizes, UiTypography } from \"../UiTypography/index.ts\";\nimport cx from \"classnames\";\n\ntype TUiInputTextProps = {\n\tid: string;\n\tkind?: EInputKind;\n\tstatusMessage?: string | React.ReactElement;\n\ttitle?: React.ReactNode;\n\tsubtitle?: React.ReactNode;\n\tinfoComponent?: React.ReactNode;\n} &
|
|
1
|
+
{"version":3,"file":"UiInputText.js","sources":["../../../src/components/UiInput/UiInputText.tsx"],"sourcesContent":["import React from \"react\";\nimport { UiInputBase, type TUiInputBaseProps } from \"./UiInput.base.tsx\";\nimport { UiInputTitled } from \"./UiInputTitled.tsx\";\nimport { EInputKind } from \"./_types.ts\";\nimport { EColors, ETypographySizes, UiTypography } from \"../UiTypography/index.ts\";\nimport cx from \"classnames\";\n\ntype TUiInputTextProps = {\n\tid: string;\n\tkind?: EInputKind;\n\tstatusMessage?: string | React.ReactElement;\n\ttitle?: React.ReactNode;\n\tsubtitle?: React.ReactNode;\n\tinfoComponent?: React.ReactNode;\n} & TUiInputBaseProps;\n\nexport const UiInputText: React.FC<TUiInputTextProps> = ({\n\tkind,\n\ttitle,\n\tinfoComponent,\n\tsubtitle,\n\tstatusMessage,\n\t...rest\n}) => {\n\treturn (\n\t\t<UiInputTitled title={ title } subtitle={ subtitle } infoComponent={ infoComponent } >\n\t\t\t<UiInputBase kind={ kind } { ...rest }/>\n\t\t\t{ statusMessage\n\t\t\t\t? (\n\t\t\t\t\t<UiTypography\n\t\t\t\t\t\tclassName={ cx(\n\t\t\t\t\t\t\t\"transition-all duration-300 ease-in-out\",\n\t\t\t\t\t\t\t\"max-h-0 opacity-0 overflow-hidden gap-xxs mt-xxs\",\n\t\t\t\t\t\t\t\"data-[status=true]:max-h-full data-[status=true]:opacity-100\"\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tlineHeight\n\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\tkind === EInputKind.ERROR\n\t\t\t\t\t\t\t\t? EColors.ERROR\n\t\t\t\t\t\t\t\t: EColors.PRIMARY\n\t\t\t\t\t\t}\n\t\t\t\t\t\tsize={ ETypographySizes.SM }\n\t\t\t\t\t\tdata-status={ !!statusMessage }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ statusMessage }\n\t\t\t\t\t</UiTypography>\n\t\t\t\t)\n\t\t\t\t: null }\n\n\t\t</UiInputTitled>\n\t);\n};\n"],"names":["UiInputText","kind","title","infoComponent","subtitle","statusMessage","rest","jsxs","UiInputTitled","jsx","UiInputBase","UiTypography","cx","EInputKind","EColors","ETypographySizes"],"mappings":";;;;;;;;;AAgBO,MAAMA,IAA2C,CAAC;AAAA,EACxD,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC;AAAA,EACA,GAAGC;AACJ,MAEG,gBAAAC,EAAAC,GAAA,EAAc,OAAAN,GAAgB,UAAAE,GAAsB,eAAAD,GACpD,UAAA;AAAA,EAAC,gBAAAM,EAAAC,GAAA,EAAY,MAAAT,GAAgB,GAAGK,EAAM,CAAA;AAAA,EACpCD,IAEA,gBAAAI;AAAA,IAACE;AAAA,IAAA;AAAA,MACA,WAAYC;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAAA,MACA,YAAU;AAAA,MACV,OACCX,MAASY,EAAW,QACjBC,EAAQ,QACRA,EAAQ;AAAA,MAEZ,MAAOC,EAAiB;AAAA,MACxB,eAAc,CAAC,CAACV;AAAA,MAEd,UAAAA;AAAA,IAAA;AAAA,EAAA,IAGF;AAAA,GAEJ;"}
|
|
@@ -1,70 +1,81 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import '../../assets/UiInputRange.css';const
|
|
5
|
-
thumb:
|
|
6
|
-
},
|
|
1
|
+
import { jsxs as z, jsx as n } from "react/jsx-runtime";
|
|
2
|
+
import s from "react";
|
|
3
|
+
import b from "classnames";
|
|
4
|
+
import '../../assets/UiInputRange.css';const C = "_thumb_hkko1_18", F = {
|
|
5
|
+
thumb: C
|
|
6
|
+
}, O = ({
|
|
7
7
|
value: o,
|
|
8
8
|
min: a,
|
|
9
|
-
max:
|
|
10
|
-
step:
|
|
11
|
-
onChangeHandler:
|
|
12
|
-
className:
|
|
13
|
-
...
|
|
9
|
+
max: i,
|
|
10
|
+
step: f,
|
|
11
|
+
onChangeHandler: g,
|
|
12
|
+
className: x,
|
|
13
|
+
...u
|
|
14
14
|
}) => {
|
|
15
|
-
const
|
|
16
|
-
|
|
17
|
-
if (!
|
|
18
|
-
const t = parseFloat(String(o)),
|
|
19
|
-
|
|
20
|
-
|
|
15
|
+
const e = s.useRef(null), c = s.useRef(null), [p, y] = s.useState(0), l = s.useCallback(() => {
|
|
16
|
+
var h, m;
|
|
17
|
+
if (!e.current || !c.current) return;
|
|
18
|
+
const t = parseFloat(String(o)), r = parseFloat(String(a)), R = parseFloat(String(i)), N = ((h = c.current) == null ? void 0 : h.getBoundingClientRect().width) ?? 0, d = ((m = e.current) == null ? void 0 : m.getBoundingClientRect().width) ?? 0;
|
|
19
|
+
if (d === 0) return;
|
|
20
|
+
const P = (t - r) / (R - r) * 100, k = N / d * 100, w = Math.max(0, Math.min(100, P * (1 - k / 100)));
|
|
21
|
+
y(w);
|
|
22
|
+
}, [a, i, o]);
|
|
23
|
+
s.useEffect(() => {
|
|
24
|
+
l();
|
|
25
|
+
const t = new ResizeObserver(() => {
|
|
26
|
+
l();
|
|
27
|
+
});
|
|
28
|
+
return e.current && t.observe(e.current), () => {
|
|
29
|
+
t.disconnect();
|
|
30
|
+
};
|
|
31
|
+
}, [l]);
|
|
21
32
|
const v = (t) => {
|
|
22
33
|
if (t === o) return;
|
|
23
|
-
const
|
|
24
|
-
|
|
34
|
+
const r = parseFloat(t.toFixed(10));
|
|
35
|
+
g(r);
|
|
25
36
|
};
|
|
26
|
-
return /* @__PURE__ */
|
|
37
|
+
return /* @__PURE__ */ z(
|
|
27
38
|
"div",
|
|
28
39
|
{
|
|
29
|
-
className:
|
|
40
|
+
className: b(
|
|
30
41
|
"relative box-content h-xl py-xxs",
|
|
31
|
-
|
|
32
|
-
|
|
42
|
+
u.disabled && "opacity-60 cursor-default pointer-events-none",
|
|
43
|
+
x
|
|
33
44
|
),
|
|
34
45
|
children: [
|
|
35
|
-
/* @__PURE__ */
|
|
46
|
+
/* @__PURE__ */ n(
|
|
36
47
|
"input",
|
|
37
48
|
{
|
|
38
|
-
...
|
|
39
|
-
ref:
|
|
49
|
+
...u,
|
|
50
|
+
ref: e,
|
|
40
51
|
className: "absolute left-0 top-0 size-full cursor-pointer appearance-none bg-transparent",
|
|
41
52
|
style: {
|
|
42
53
|
touchAction: "none"
|
|
43
54
|
},
|
|
44
55
|
type: "range",
|
|
45
56
|
min: a,
|
|
46
|
-
max:
|
|
47
|
-
step:
|
|
57
|
+
max: i,
|
|
58
|
+
step: f,
|
|
48
59
|
value: o,
|
|
49
60
|
onChange: (t) => v(+t.target.value),
|
|
50
61
|
onTouchStart: (t) => t.stopPropagation(),
|
|
51
62
|
onTouchMove: (t) => t.stopPropagation()
|
|
52
63
|
}
|
|
53
64
|
),
|
|
54
|
-
/* @__PURE__ */
|
|
55
|
-
/* @__PURE__ */
|
|
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(
|
|
56
67
|
"div",
|
|
57
68
|
{
|
|
58
|
-
className: "pointer-events-none absolute left-0 top-1/2 h-xxs -translate-y-1/2 rounded-sm bg-primary",
|
|
69
|
+
className: "pointer-events-none absolute left-0 top-1/2 h-xxs -translate-y-1/2 rounded-sm bg-primary-600",
|
|
59
70
|
style: {
|
|
60
|
-
width: `${
|
|
71
|
+
width: `${p}%`
|
|
61
72
|
}
|
|
62
73
|
}
|
|
63
74
|
),
|
|
64
|
-
/* @__PURE__ */
|
|
75
|
+
/* @__PURE__ */ n(
|
|
65
76
|
"div",
|
|
66
77
|
{
|
|
67
|
-
className:
|
|
78
|
+
className: b(
|
|
68
79
|
F.thumb,
|
|
69
80
|
"pointer-events-none",
|
|
70
81
|
"absolute",
|
|
@@ -73,13 +84,13 @@ import '../../assets/UiInputRange.css';const W = "_thumb_hkko1_18", F = {
|
|
|
73
84
|
"-translate-y-1/2",
|
|
74
85
|
"rounded-full",
|
|
75
86
|
"bg-white",
|
|
76
|
-
"border-primary"
|
|
87
|
+
"border-primary-600"
|
|
77
88
|
),
|
|
78
|
-
ref:
|
|
89
|
+
ref: c,
|
|
79
90
|
style: {
|
|
80
|
-
left: `${
|
|
91
|
+
left: `${p}%`
|
|
81
92
|
},
|
|
82
|
-
children: /* @__PURE__ */
|
|
93
|
+
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" })
|
|
83
94
|
}
|
|
84
95
|
)
|
|
85
96
|
]
|
|
@@ -87,6 +98,6 @@ import '../../assets/UiInputRange.css';const W = "_thumb_hkko1_18", F = {
|
|
|
87
98
|
);
|
|
88
99
|
};
|
|
89
100
|
export {
|
|
90
|
-
|
|
101
|
+
O as UiInputRange
|
|
91
102
|
};
|
|
92
103
|
//# 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\
|
|
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] = React.useState(0);\n\n\tconst updatePositions = React.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}, [min, max, value]);\n\n\tReact.useEffect(() => {\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\" />\n\n\t\t\t<div\n\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\tstyle={ {\n\t\t\t\t\twidth: `${position}%`,\n\t\t\t\t} }\n\t\t\t/>\n\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","updatePositions","numValue","numMin","numMax","thumbWidth","_a","trackWidth","_b","percentage","thumbWidthPercentage","adjustedPercentage","resizeObserver","handleOnChange","newValue","preciseValue","jsxs","cx","jsx","e","styles"],"mappings":";;;;;GAaaA,IAA6C,CAAC;AAAA,EAC1D,OAAAC;AAAA,EACA,KAAAC;AAAA,EACA,KAAAC;AAAA,EACA,MAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACJ,MAAM;AACC,QAAAC,IAAQC,EAAM,OAAyB,IAAI,GAC3CC,IAAQD,EAAM,OAAuB,IAAI,GACzC,CAACE,GAAUC,CAAW,IAAIH,EAAM,SAAS,CAAC,GAE1CI,IAAkBJ,EAAM,YAAY,MAAM;;AAC/C,QAAI,CAACD,EAAM,WAAW,CAACE,EAAM,QAAS;AAEtC,UAAMI,IAAW,WAAW,OAAOb,CAAK,CAAC,GACnCc,IAAS,WAAW,OAAOb,CAAG,CAAC,GAC/Bc,IAAS,WAAW,OAAOb,CAAG,CAAC,GAE/Bc,MAAaC,IAAAR,EAAM,YAAN,gBAAAQ,EAAe,wBAAwB,UAAS,GAC7DC,MAAaC,IAAAZ,EAAM,YAAN,gBAAAY,EAAe,wBAAwB,UAAS;AAEnE,QAAID,MAAe,EAAG;AAEtB,UAAME,KAAeP,IAAWC,MAAWC,IAASD,KAAW,KACzDO,IAAwBL,IAAaE,IAAc,KAEnDI,IAAqB,KAAK,IAAI,GAAG,KAAK,IAAI,KAAKF,KAAc,IAAIC,IAAuB,IAAI,CAAC;AAEnG,IAAAV,EAAYW,CAAkB;AAAA,EAC5B,GAAA,CAACrB,GAAKC,GAAKF,CAAK,CAAC;AAEpB,EAAAQ,EAAM,UAAU,MAAM;AACL,IAAAI,EAAA;AAEV,UAAAW,IAAiB,IAAI,eAAe,MAAM;AAC/B,MAAAX,EAAA;AAAA,IAAA,CAChB;AAED,WAAIL,EAAM,WACMgB,EAAA,QAAQhB,EAAM,OAAO,GAG9B,MAAM;AACZ,MAAAgB,EAAe,WAAW;AAAA,IAC3B;AAAA,EAAA,GACE,CAACX,CAAe,CAAC;AAEd,QAAAY,IAAiB,CAACC,MAAqB;AAC5C,QAAIA,MAAazB,EAAO;AACxB,UAAM0B,IAAe,WAAWD,EAAS,QAAQ,EAAE,CAAC;AACpD,IAAArB,EAAgBsB,CAAY;AAAA,EAC7B;AAGC,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,WAAYC;AAAA,QACX;AAAA,QACAtB,EAAK,YAAY;AAAA,QACjBD;AAAA,MACD;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAwB;AAAA,UAAC;AAAA,UAAA;AAAA,YACE,GAAGvB;AAAA,YACL,KAAMC;AAAA,YACN,WAAU;AAAA,YACV,OAAQ;AAAA,cACP,aAAa;AAAA,YACd;AAAA,YACA,MAAK;AAAA,YACL,KAAAN;AAAA,YACA,KAAAC;AAAA,YACA,MAAAC;AAAA,YACA,OAAAH;AAAA,YACA,UAAW,CAAC8B,MAAMN,EAAe,CAACM,EAAE,OAAO,KAAK;AAAA,YAChD,cAAe,CAACA,MAAMA,EAAE,gBAAgB;AAAA,YACxC,aAAc,CAACA,MAAMA,EAAE,gBAAgB;AAAA,UAAA;AAAA,QACxC;AAAA,QAEA,gBAAAD,EAAC,OAAI,EAAA,WAAU,wGAAwG,CAAA;AAAA,QAEvH,gBAAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,WAAU;AAAA,YACV,OAAQ;AAAA,cACP,OAAO,GAAGnB,CAAQ;AAAA,YAAA;AAAA,UACnB;AAAA,QACD;AAAA,QAEA,gBAAAmB;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,WAAYD;AAAA,cACXG,EAAO;AAAA,cACP;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YACD;AAAA,YACA,KAAMtB;AAAA,YACN,OAAQ;AAAA,cACP,MAAM,GAAGC,CAAQ;AAAA,YAClB;AAAA,YAEA,UAAA,gBAAAmB,EAAC,OAAI,EAAA,WAAU,mGAAmG,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACnH;AAAA,IAAA;AAAA,EACD;AAEF;"}
|
|
@@ -1,90 +1,110 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as a, jsx as n } from "react/jsx-runtime";
|
|
2
2
|
import "react";
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
children:
|
|
3
|
+
import i from "classnames";
|
|
4
|
+
const v = ({
|
|
5
|
+
id: p,
|
|
6
|
+
children: s,
|
|
7
7
|
disabled: r,
|
|
8
|
-
subHeader:
|
|
9
|
-
value:
|
|
10
|
-
name:
|
|
11
|
-
checked:
|
|
12
|
-
className:
|
|
13
|
-
onChange:
|
|
14
|
-
|
|
8
|
+
subHeader: t,
|
|
9
|
+
value: o,
|
|
10
|
+
name: l,
|
|
11
|
+
checked: e = !1,
|
|
12
|
+
className: g,
|
|
13
|
+
onChange: c,
|
|
14
|
+
...m
|
|
15
|
+
}) => /* @__PURE__ */ a(
|
|
15
16
|
"label",
|
|
16
17
|
{
|
|
17
|
-
className:
|
|
18
|
-
"ui-radio
|
|
18
|
+
className: i(
|
|
19
|
+
"ui-plain-radio",
|
|
19
20
|
"relative",
|
|
21
|
+
"group",
|
|
20
22
|
{
|
|
21
23
|
"pointer-events-none opacity-50": r
|
|
22
24
|
},
|
|
23
|
-
|
|
25
|
+
g
|
|
24
26
|
),
|
|
25
|
-
htmlFor: a + e,
|
|
26
27
|
children: [
|
|
27
28
|
/* @__PURE__ */ n(
|
|
28
29
|
"input",
|
|
29
30
|
{
|
|
30
|
-
className:
|
|
31
|
+
className: i(
|
|
31
32
|
" absolute",
|
|
32
33
|
"appearance-none",
|
|
33
|
-
"peer
|
|
34
|
+
"peer"
|
|
34
35
|
),
|
|
35
|
-
id:
|
|
36
|
+
id: p || `${l}-${o}`,
|
|
36
37
|
type: "radio",
|
|
37
|
-
value:
|
|
38
|
-
checked:
|
|
39
|
-
onChange: () =>
|
|
38
|
+
value: o,
|
|
39
|
+
checked: e,
|
|
40
|
+
onChange: () => c(o),
|
|
41
|
+
...m
|
|
40
42
|
}
|
|
41
43
|
),
|
|
42
|
-
/* @__PURE__ */
|
|
44
|
+
/* @__PURE__ */ a(
|
|
43
45
|
"div",
|
|
44
46
|
{
|
|
45
|
-
className:
|
|
47
|
+
className: i(
|
|
48
|
+
"bg-white",
|
|
46
49
|
"box-border",
|
|
47
|
-
"size-full",
|
|
48
50
|
"cursor-pointer",
|
|
49
|
-
"rounded-xl",
|
|
50
|
-
"border border-secondary-alt-600",
|
|
51
|
-
"peer-checked/plain-radio:border-primary-600",
|
|
52
|
-
"peer-checked/plain-radio:outline",
|
|
53
|
-
"peer-checked/plain-radio:outline",
|
|
54
|
-
"peer-checked/plain-radio:outline-primary-600",
|
|
55
|
-
"peer-hover/plain-radio:peer-checked/plain-radio:outline-primary-700",
|
|
56
|
-
"bg-white",
|
|
57
|
-
"peer-active/plain-radio:bg-secondary-alt-200",
|
|
58
|
-
"p-sm",
|
|
59
|
-
"peer-hover/plain-radio:border-primary-700",
|
|
60
|
-
"peer-focus/plain-radio:shadow-border-primary",
|
|
61
51
|
"flex",
|
|
62
|
-
"items-center",
|
|
63
52
|
"gap-sm",
|
|
53
|
+
"items-center",
|
|
54
|
+
"p-sm",
|
|
55
|
+
"peer-active:bg-secondary-alt-200",
|
|
56
|
+
"peer-active:ring-primary-800",
|
|
57
|
+
"peer-focus-within:outline-offset-4",
|
|
58
|
+
"peer-focus:outline-2",
|
|
59
|
+
"peer-focus:peer-checked:outline-primary-600",
|
|
60
|
+
"peer-hover:ring-primary-700",
|
|
61
|
+
"rounded-xl",
|
|
62
|
+
"size-full",
|
|
64
63
|
"text-sm",
|
|
64
|
+
r ? "ring-secondary-alt-300" : "peer-checked:ring-primary-600 peer-checked:outline peer-checked:outline-primary-600",
|
|
65
|
+
e ? "ring-2" : "ring",
|
|
65
66
|
{
|
|
66
|
-
"
|
|
67
|
-
"border-primary-300": r && o,
|
|
68
|
-
"border-secondary-alt-600": !r && !o,
|
|
69
|
-
"border-primary-600": !r && o
|
|
67
|
+
"ring-secondary-alt-600 hover:ring-secondary-500": !r && !e
|
|
70
68
|
}
|
|
71
69
|
),
|
|
72
70
|
children: [
|
|
73
|
-
/* @__PURE__ */ n(
|
|
74
|
-
|
|
71
|
+
/* @__PURE__ */ n("span", { className: i(
|
|
72
|
+
"bg-white",
|
|
73
|
+
"group-active:ring-primary-800",
|
|
74
|
+
"group-hover:ring-primary-700",
|
|
75
|
+
"pointer-events-none",
|
|
76
|
+
"relative",
|
|
77
|
+
"rounded-full",
|
|
78
|
+
"size-md",
|
|
79
|
+
e ? "ring-2" : "ring",
|
|
80
|
+
r ? "ring-secondary-alt-300" : "ring-primary-600",
|
|
81
|
+
{
|
|
82
|
+
"ring-secondary-alt-600 group-hover:ring-secondary-500 group-active:ring-secondary-500": !r && !e
|
|
83
|
+
}
|
|
84
|
+
), children: /* @__PURE__ */ n(
|
|
85
|
+
"span",
|
|
75
86
|
{
|
|
76
|
-
className:
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
87
|
+
className: i(
|
|
88
|
+
"absolute",
|
|
89
|
+
"block",
|
|
90
|
+
"group-active:bg-primary-800",
|
|
91
|
+
"group-hover:bg-primary-700",
|
|
92
|
+
"left-xxs",
|
|
93
|
+
"pointer-events-none",
|
|
94
|
+
"rounded-full",
|
|
95
|
+
"size-xxs",
|
|
96
|
+
"top-xxs",
|
|
97
|
+
e ? "bg-primary-600" : "bg-white",
|
|
98
|
+
r ? "bg-secondary-alt-300" : "bg-primary-600",
|
|
99
|
+
{
|
|
100
|
+
"bg-white group-hover:bg-white group-active:bg-white": !r && !e
|
|
101
|
+
}
|
|
102
|
+
)
|
|
83
103
|
}
|
|
84
|
-
),
|
|
85
|
-
/* @__PURE__ */
|
|
86
|
-
|
|
87
|
-
/* @__PURE__ */ n("div", { className: "text-xs font-normal text-secondary-alt-400", children:
|
|
104
|
+
) }),
|
|
105
|
+
/* @__PURE__ */ a("div", { className: "flex flex-col", children: [
|
|
106
|
+
s,
|
|
107
|
+
t ? /* @__PURE__ */ n("div", { className: "text-xs font-normal text-secondary-alt-400", children: t }) : null
|
|
88
108
|
] })
|
|
89
109
|
]
|
|
90
110
|
}
|
|
@@ -93,6 +113,6 @@ const f = ({
|
|
|
93
113
|
}
|
|
94
114
|
);
|
|
95
115
|
export {
|
|
96
|
-
|
|
116
|
+
v as UiPlainRadio
|
|
97
117
|
};
|
|
98
118
|
//# sourceMappingURL=UiPlainRadio.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UiPlainRadio.js","sources":["../../../src/components/UiPlainRadio/UiPlainRadio.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\
|
|
1
|
+
{"version":3,"file":"UiPlainRadio.js","sources":["../../../src/components/UiPlainRadio/UiPlainRadio.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\n\nexport type TUiPlainRadio = {\n\tchildren?: React.ReactNode\n\tdisabled?: boolean;\n\tsubHeader?: string;\n\tvalue: string;\n\tname: string;\n\tclassName?: string\n\tchecked?: boolean\n\tonChange: (value: string) => void;\n\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"checked\" | \"value\" | \"name\">;\n\nexport const UiPlainRadio: React.FC<TUiPlainRadio> = ({\n\tid,\n\tchildren,\n\tdisabled,\n\tsubHeader,\n\tvalue,\n\tname,\n\tchecked = false,\n\tclassName,\n\tonChange,\n\t...rest\n\n}) => {\n\n\treturn (\n\t\t<label className={ cx(\n\t\t\t\"ui-plain-radio\",\n\t\t\t\"relative\",\n\t\t\t\"group\",\n\t\t\t{\n\t\t\t\t\"pointer-events-none opacity-50\": disabled\n\t\t\t},\n\t\t\tclassName\n\t\t) }\n\t\t>\n\t\t\t<input className={ cx(\n\t\t\t\t\" absolute\",\n\t\t\t\t\"appearance-none\",\n\t\t\t\t\"peer\",\n\t\t\t) }\n\t\t\tid={ id || `${name}-${value}` }\n\t\t\ttype=\"radio\"\n\t\t\tvalue={ value }\n\t\t\tchecked={ checked }\n\t\t\tonChange={ () => onChange(value) }\n\t\t\t{ ...rest }\n\t\t\t/>\n\n\t\t\t<div className={ cx(\n\t\t\t\t\"bg-white\",\n\t\t\t\t\"box-border\",\n\t\t\t\t\"cursor-pointer\",\n\t\t\t\t\"flex\",\n\t\t\t\t\"gap-sm\",\n\t\t\t\t\"items-center\",\n\t\t\t\t\"p-sm\",\n\t\t\t\t\"peer-active:bg-secondary-alt-200\",\n\t\t\t\t\"peer-active:ring-primary-800\",\n\t\t\t\t\"peer-focus-within:outline-offset-4\",\n\t\t\t\t\"peer-focus:outline-2\",\n\t\t\t\t\"peer-focus:peer-checked:outline-primary-600\",\n\t\t\t\t\"peer-hover:ring-primary-700\",\n\t\t\t\t\"rounded-xl\",\n\t\t\t\t\"size-full\",\n\t\t\t\t\"text-sm\",\n\t\t\t\tdisabled\n\t\t\t\t\t? \"ring-secondary-alt-300\"\n\t\t\t\t\t: \"peer-checked:ring-primary-600 peer-checked:outline peer-checked:outline-primary-600\",\n\t\t\t\tchecked\n\t\t\t\t\t? \"ring-2\"\n\t\t\t\t\t: \"ring\",\n\t\t\t\t{\n\t\t\t\t\t\"ring-secondary-alt-600 hover:ring-secondary-500\": !disabled && !checked,\n\t\t\t\t}\n\n\t\t\t) }\n\t\t\t>\n\n\t\t\t\t<span className={ cx(\n\t\t\t\t\t\"bg-white\",\n\t\t\t\t\t\"group-active:ring-primary-800\",\n\t\t\t\t\t\"group-hover:ring-primary-700\",\n\t\t\t\t\t\"pointer-events-none\",\n\t\t\t\t\t\"relative\",\n\t\t\t\t\t\"rounded-full\",\n\t\t\t\t\t\"size-md\",\n\t\t\t\t\tchecked\n\t\t\t\t\t\t? \"ring-2\"\n\t\t\t\t\t\t: \"ring\",\n\t\t\t\t\tdisabled\n\t\t\t\t\t\t? \"ring-secondary-alt-300\"\n\t\t\t\t\t\t: \"ring-primary-600\",\n\n\t\t\t\t\t{\n\t\t\t\t\t\t\"ring-secondary-alt-600 group-hover:ring-secondary-500 group-active:ring-secondary-500\": !disabled && !checked,\n\t\t\t\t\t}\n\n\t\t\t\t) }>\n\t\t\t\t\t<span\n\t\t\t\t\t\tclassName={ cx(\n\t\t\t\t\t\t\t\"absolute\",\n\t\t\t\t\t\t\t\"block\",\n\t\t\t\t\t\t\t\"group-active:bg-primary-800\",\n\t\t\t\t\t\t\t\"group-hover:bg-primary-700\",\n\t\t\t\t\t\t\t\"left-xxs\",\n\t\t\t\t\t\t\t\"pointer-events-none\",\n\t\t\t\t\t\t\t\"rounded-full\",\n\t\t\t\t\t\t\t\"size-xxs\",\n\t\t\t\t\t\t\t\"top-xxs\",\n\t\t\t\t\t\t\tchecked\n\t\t\t\t\t\t\t\t? \"bg-primary-600\"\n\t\t\t\t\t\t\t\t: \"bg-white\",\n\t\t\t\t\t\t\tdisabled\n\t\t\t\t\t\t\t\t? \"bg-secondary-alt-300\"\n\t\t\t\t\t\t\t\t: \"bg-primary-600\",\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\"bg-white group-hover:bg-white group-active:bg-white\": !disabled && !checked,\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t) }/>\n\n\t\t\t\t</span>\n\n\t\t\t\t<div className=\"flex flex-col\">\n\t\t\t\t\t{ children }\n\n\t\t\t\t\t{\n\t\t\t\t\t\tsubHeader\n\t\t\t\t\t\t\t? <div className=\"text-xs font-normal text-secondary-alt-400\">{ subHeader }</div>\n\t\t\t\t\t\t\t: null\n\t\t\t\t\t}\n\n\t\t\t\t</div>\n\n\t\t\t</div>\n\n\t\t</label>\n\n\t);\n};\n"],"names":["UiPlainRadio","id","children","disabled","subHeader","value","name","checked","className","onChange","rest","jsxs","cx","jsx"],"mappings":";;;AAeO,MAAMA,IAAwC,CAAC;AAAA,EACrD,IAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AAEJ,MAGE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IAAM,WAAYC;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,QACC,kCAAkCT;AAAA,MACnC;AAAA,MACAK;AAAA,IACD;AAAA,IAEC,UAAA;AAAA,MAAA,gBAAAK;AAAA,QAAC;AAAA,QAAA;AAAA,UAAM,WAAYD;AAAA,YAClB;AAAA,YACA;AAAA,YACA;AAAA,UACD;AAAA,UACA,IAAKX,KAAO,GAAGK,CAAI,IAAID,CAAK;AAAA,UAC5B,MAAK;AAAA,UACL,OAAAA;AAAA,UACA,SAAAE;AAAA,UACA,UAAW,MAAME,EAASJ,CAAK;AAAA,UAC7B,GAAGK;AAAA,QAAA;AAAA,MACL;AAAA,MAEA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UAAI,WAAYC;AAAA,YAChB;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACAT,IACG,2BACA;AAAA,YACHI,IACG,WACA;AAAA,YACH;AAAA,cACC,mDAAmD,CAACJ,KAAY,CAACI;AAAA,YAAA;AAAA,UAGnE;AAAA,UAGC,UAAA;AAAA,YAAA,gBAAAM,EAAC,UAAK,WAAYD;AAAA,cACjB;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACAL,IACG,WACA;AAAA,cACHJ,IACG,2BACA;AAAA,cAEH;AAAA,gBACC,0FAA0F,CAACA,KAAY,CAACI;AAAA,cAAA;AAAA,YAIzG,GAAA,UAAA,gBAAAM;AAAA,cAAC;AAAA,cAAA;AAAA,gBACA,WAAYD;AAAA,kBACX;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACAL,IACG,mBACA;AAAA,kBACHJ,IACG,yBACA;AAAA,kBACH;AAAA,oBACC,uDAAuD,CAACA,KAAY,CAACI;AAAA,kBAAA;AAAA,gBACtE;AAAA,cAED;AAAA,YAAA,GAEF;AAAA,YAEA,gBAAAI,EAAC,OAAI,EAAA,WAAU,iBACZ,UAAA;AAAA,cAAAT;AAAA,cAGDE,IACI,gBAAAS,EAAA,OAAA,EAAI,WAAU,8CAA+C,aAAW,IACzE;AAAA,YAAA,EAGL,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAED;AAAA,EAAA;AAED;"}
|
|
@@ -1,61 +1,62 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as b, jsx as o } from "react/jsx-runtime";
|
|
2
2
|
import "react";
|
|
3
|
-
import
|
|
3
|
+
import s from "classnames";
|
|
4
4
|
import { EJustify as e } from "../../_types/align.js";
|
|
5
|
-
import '../../assets/UiRadio.css';const
|
|
6
|
-
UiRadio__custom:
|
|
7
|
-
UiRadio__dot:
|
|
8
|
-
},
|
|
5
|
+
import '../../assets/UiRadio.css';const R = "_UiRadio__custom_wei69_1", g = "_UiRadio__dot_wei69_4", c = {
|
|
6
|
+
UiRadio__custom: R,
|
|
7
|
+
UiRadio__dot: g
|
|
8
|
+
}, h = {
|
|
9
9
|
[e.START]: "justify-start",
|
|
10
10
|
[e.END]: "justify-end",
|
|
11
11
|
[e.CENTER]: "justify-center",
|
|
12
12
|
[e.BETWEEN]: "justify-between",
|
|
13
13
|
[e.AROUND]: "justify-around",
|
|
14
14
|
[e.EVENLY]: "justify-evenly"
|
|
15
|
-
},
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
15
|
+
}, x = ({
|
|
16
|
+
id: n,
|
|
17
|
+
name: t,
|
|
18
|
+
value: a,
|
|
19
|
+
invertOrder: l = !1,
|
|
20
|
+
justify: p = e.START,
|
|
20
21
|
disabled: r = !1,
|
|
21
|
-
onChange:
|
|
22
|
-
checked:
|
|
23
|
-
children:
|
|
24
|
-
className:
|
|
25
|
-
tabIndex:
|
|
22
|
+
onChange: i,
|
|
23
|
+
checked: u = !1,
|
|
24
|
+
children: d,
|
|
25
|
+
className: m,
|
|
26
|
+
tabIndex: _
|
|
26
27
|
}) => {
|
|
27
|
-
const
|
|
28
|
-
!r &&
|
|
28
|
+
const f = (y) => {
|
|
29
|
+
!r && i && i(y.target.value);
|
|
29
30
|
};
|
|
30
|
-
return /* @__PURE__ */
|
|
31
|
+
return /* @__PURE__ */ b("label", { className: s(
|
|
31
32
|
"UiRadio",
|
|
32
33
|
"group",
|
|
33
34
|
"grid",
|
|
34
35
|
"grid-flow-col",
|
|
35
36
|
"cursor-pointer",
|
|
36
|
-
|
|
37
|
+
h[p],
|
|
37
38
|
{
|
|
38
39
|
"pointer-events-none": r,
|
|
39
|
-
"items-center gap-xxs":
|
|
40
|
+
"items-center gap-xxs": d
|
|
40
41
|
}
|
|
41
42
|
), children: [
|
|
42
43
|
/* @__PURE__ */ o(
|
|
43
44
|
"input",
|
|
44
45
|
{
|
|
45
|
-
id:
|
|
46
|
-
name:
|
|
46
|
+
id: n || `${t}-${a}`,
|
|
47
|
+
name: t.toString(),
|
|
47
48
|
type: "radio",
|
|
48
|
-
value:
|
|
49
|
+
value: a,
|
|
49
50
|
disabled: r,
|
|
50
|
-
checked:
|
|
51
|
-
onChange:
|
|
51
|
+
checked: u,
|
|
52
|
+
onChange: f,
|
|
52
53
|
className: "peer absolute appearance-none",
|
|
53
|
-
tabIndex:
|
|
54
|
+
tabIndex: _
|
|
54
55
|
}
|
|
55
56
|
),
|
|
56
|
-
/* @__PURE__ */ o("span", { className:
|
|
57
|
-
|
|
58
|
-
|
|
57
|
+
/* @__PURE__ */ o("span", { className: s(
|
|
58
|
+
c.UiRadio__custom,
|
|
59
|
+
l && "order-last",
|
|
59
60
|
"relative",
|
|
60
61
|
"block",
|
|
61
62
|
"size-md",
|
|
@@ -72,9 +73,9 @@ import '../../assets/UiRadio.css';const b = "_UiRadio__custom_wei69_1", R = "_Ui
|
|
|
72
73
|
"peer-focus:shadow-border-primary",
|
|
73
74
|
"peer-disabled:border-secondary-alt-400",
|
|
74
75
|
"peer-disabled:bg-secondary-alt-200",
|
|
75
|
-
|
|
76
|
-
), children: /* @__PURE__ */ o("span", { className:
|
|
77
|
-
|
|
76
|
+
m
|
|
77
|
+
), children: /* @__PURE__ */ o("span", { className: s(
|
|
78
|
+
c.UiRadio__dot,
|
|
78
79
|
"absolute",
|
|
79
80
|
"left-2/4",
|
|
80
81
|
"top-2/4",
|
|
@@ -83,10 +84,10 @@ import '../../assets/UiRadio.css';const b = "_UiRadio__custom_wei69_1", R = "_Ui
|
|
|
83
84
|
"rounded-full",
|
|
84
85
|
"bg-primary"
|
|
85
86
|
) }) }),
|
|
86
|
-
|
|
87
|
+
d
|
|
87
88
|
] });
|
|
88
89
|
};
|
|
89
90
|
export {
|
|
90
|
-
|
|
91
|
+
x as UiRadio
|
|
91
92
|
};
|
|
92
93
|
//# sourceMappingURL=UiRadio.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UiRadio.js","sources":["../../../src/components/UiRadio/UiRadio.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport styles from \"./UiRadio.module.css\";\nimport { EJustify } from \"../../_types/align\";\n\nexport type TUiRadioProps = {\n\tchildren?: React.ReactNode;\n\tname: string;\n\tvalue: string;\n\tinvertOrder?: boolean;\n\tjustify?: EJustify;\n\tdisabled?: boolean;\n\tchecked?: boolean;\n\tonChange: (value: string) => void;\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"checked\" | \"value\" | \"name\">;\n\nconst justificationClasses = {\n\t[EJustify.START]: \"justify-start\",\n\t[EJustify.END]: \"justify-end\",\n\t[EJustify.CENTER]: \"justify-center\",\n\t[EJustify.BETWEEN]: \"justify-between\",\n\t[EJustify.AROUND]: \"justify-around\",\n\t[EJustify.EVENLY]: \"justify-evenly\"\n};\n\nexport const UiRadio: React.FC<TUiRadioProps> = ({\n\tname,\n\tvalue,\n\tinvertOrder = false,\n\tjustify = EJustify.START,\n\tdisabled = false,\n\tonChange,\n\tchecked = false,\n\tchildren,\n\tclassName,\n\ttabIndex\n}) => {\n\n\tconst handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n\t\tif (!disabled && onChange) {\n\t\t\tonChange(event.target.value);\n\t\t}\n\t};\n\n\treturn (\n\t\t<label className={\n\t\t\tcx(\"UiRadio\",\n\t\t\t\t\"group\",\n\t\t\t\t\"grid\",\n\t\t\t\t\"grid-flow-col\",\n\t\t\t\t\"cursor-pointer\",\n\t\t\t\tjustificationClasses[justify],\n\t\t\t\t{\n\t\t\t\t\t\"pointer-events-none\": disabled,\n\t\t\t\t\t\"items-center gap-xxs\": children\n\t\t\t\t}\n\t\t\t) }>\n\t\t\t<input\n\t\t\t\tid={ value }\n\t\t\t\tname={ name.toString() }\n\t\t\t\ttype=\"radio\"\n\t\t\t\tvalue={ value }\n\t\t\t\tdisabled={ disabled }\n\t\t\t\tchecked={ checked }\n\t\t\t\tonChange={ handleChange }\n\t\t\t\tclassName=\"peer absolute appearance-none\"\n\t\t\t\ttabIndex={ tabIndex }\n\t\t\t/>\n\t\t\t<span className={ cx(\n\t\t\t\tstyles.UiRadio__custom,\n\t\t\t\tinvertOrder && \"order-last\",\n\t\t\t\t\"relative\",\n\t\t\t\t\"block\",\n\t\t\t\t\"size-md\",\n\t\t\t\t\"rounded-full\",\n\t\t\t\t\"border\",\n\t\t\t\t\"border-secondary-alt\",\n\t\t\t\t\"bg-white\",\n\t\t\t\t\"group-hover:border-secondary-alt-700\",\n\t\t\t\t\"group-focus:border-secondary-alt-700\",\n\t\t\t\t\"peer-checked:border-2\",\n\t\t\t\t\"peer-checked:border-primary\",\n\t\t\t\t\"hover:peer-checked:border-primary-600\",\n\t\t\t\t\"active:peer-checked:border-primary-800\",\n\t\t\t\t\"peer-focus:shadow-border-primary\",\n\t\t\t\t\"peer-disabled:border-secondary-alt-400\",\n\t\t\t\t\"peer-disabled:bg-secondary-alt-200\",\n\t\t\t\tclassName,\n\t\t\t) }>\n\t\t\t\t<span className={ cx(\n\t\t\t\t\tstyles.UiRadio__dot,\n\t\t\t\t\t\"absolute\",\n\t\t\t\t\t\"left-2/4\",\n\t\t\t\t\t\"top-2/4\",\n\t\t\t\t\t\"block\",\n\t\t\t\t\t\"size-xxs\",\n\t\t\t\t\t\"rounded-full\",\n\t\t\t\t\t\"bg-primary\",\n\t\t\t\t) } />\n\t\t\t</span>\n\t\t\t{ children }\n\t\t</label>\n\t);\n};\n"],"names":["justificationClasses","EJustify","UiRadio","name","value","invertOrder","justify","disabled","onChange","checked","children","className","tabIndex","handleChange","event","jsxs","cx","jsx","styles"],"mappings":";;;;;;;GAgBMA,IAAuB;AAAA,EAC5B,CAACC,EAAS,KAAK,GAAG;AAAA,EAClB,CAACA,EAAS,GAAG,GAAG;AAAA,EAChB,CAACA,EAAS,MAAM,GAAG;AAAA,EACnB,CAACA,EAAS,OAAO,GAAG;AAAA,EACpB,CAACA,EAAS,MAAM,GAAG;AAAA,EACnB,CAACA,EAAS,MAAM,GAAG;AACpB,GAEaC,IAAmC,CAAC;AAAA,EAChD,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,SAAAC,
|
|
1
|
+
{"version":3,"file":"UiRadio.js","sources":["../../../src/components/UiRadio/UiRadio.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport styles from \"./UiRadio.module.css\";\nimport { EJustify } from \"../../_types/align\";\n\nexport type TUiRadioProps = {\n\tchildren?: React.ReactNode;\n\tname: string;\n\tvalue: string;\n\tinvertOrder?: boolean;\n\tjustify?: EJustify;\n\tdisabled?: boolean;\n\tchecked?: boolean;\n\tonChange: (value: string) => void;\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"checked\" | \"value\" | \"name\">;\n\nconst justificationClasses = {\n\t[EJustify.START]: \"justify-start\",\n\t[EJustify.END]: \"justify-end\",\n\t[EJustify.CENTER]: \"justify-center\",\n\t[EJustify.BETWEEN]: \"justify-between\",\n\t[EJustify.AROUND]: \"justify-around\",\n\t[EJustify.EVENLY]: \"justify-evenly\"\n};\n\nexport const UiRadio: React.FC<TUiRadioProps> = ({\n\tid,\n\tname,\n\tvalue,\n\tinvertOrder = false,\n\tjustify = EJustify.START,\n\tdisabled = false,\n\tonChange,\n\tchecked = false,\n\tchildren,\n\tclassName,\n\ttabIndex\n}) => {\n\n\tconst handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n\t\tif (!disabled && onChange) {\n\t\t\tonChange(event.target.value);\n\t\t}\n\t};\n\n\treturn (\n\t\t<label className={\n\t\t\tcx(\"UiRadio\",\n\t\t\t\t\"group\",\n\t\t\t\t\"grid\",\n\t\t\t\t\"grid-flow-col\",\n\t\t\t\t\"cursor-pointer\",\n\t\t\t\tjustificationClasses[justify],\n\t\t\t\t{\n\t\t\t\t\t\"pointer-events-none\": disabled,\n\t\t\t\t\t\"items-center gap-xxs\": children\n\t\t\t\t}\n\t\t\t) }>\n\t\t\t<input\n\t\t\t\tid={ id || `${name}-${value}` }\n\t\t\t\tname={ name.toString() }\n\t\t\t\ttype=\"radio\"\n\t\t\t\tvalue={ value }\n\t\t\t\tdisabled={ disabled }\n\t\t\t\tchecked={ checked }\n\t\t\t\tonChange={ handleChange }\n\t\t\t\tclassName=\"peer absolute appearance-none\"\n\t\t\t\ttabIndex={ tabIndex }\n\t\t\t/>\n\t\t\t<span className={ cx(\n\t\t\t\tstyles.UiRadio__custom,\n\t\t\t\tinvertOrder && \"order-last\",\n\t\t\t\t\"relative\",\n\t\t\t\t\"block\",\n\t\t\t\t\"size-md\",\n\t\t\t\t\"rounded-full\",\n\t\t\t\t\"border\",\n\t\t\t\t\"border-secondary-alt\",\n\t\t\t\t\"bg-white\",\n\t\t\t\t\"group-hover:border-secondary-alt-700\",\n\t\t\t\t\"group-focus:border-secondary-alt-700\",\n\t\t\t\t\"peer-checked:border-2\",\n\t\t\t\t\"peer-checked:border-primary\",\n\t\t\t\t\"hover:peer-checked:border-primary-600\",\n\t\t\t\t\"active:peer-checked:border-primary-800\",\n\t\t\t\t\"peer-focus:shadow-border-primary\",\n\t\t\t\t\"peer-disabled:border-secondary-alt-400\",\n\t\t\t\t\"peer-disabled:bg-secondary-alt-200\",\n\t\t\t\tclassName,\n\t\t\t) }>\n\t\t\t\t<span className={ cx(\n\t\t\t\t\tstyles.UiRadio__dot,\n\t\t\t\t\t\"absolute\",\n\t\t\t\t\t\"left-2/4\",\n\t\t\t\t\t\"top-2/4\",\n\t\t\t\t\t\"block\",\n\t\t\t\t\t\"size-xxs\",\n\t\t\t\t\t\"rounded-full\",\n\t\t\t\t\t\"bg-primary\",\n\t\t\t\t) } />\n\t\t\t</span>\n\t\t\t{ children }\n\t\t</label>\n\t);\n};\n"],"names":["justificationClasses","EJustify","UiRadio","id","name","value","invertOrder","justify","disabled","onChange","checked","children","className","tabIndex","handleChange","event","jsxs","cx","jsx","styles"],"mappings":";;;;;;;GAgBMA,IAAuB;AAAA,EAC5B,CAACC,EAAS,KAAK,GAAG;AAAA,EAClB,CAACA,EAAS,GAAG,GAAG;AAAA,EAChB,CAACA,EAAS,MAAM,GAAG;AAAA,EACnB,CAACA,EAAS,OAAO,GAAG;AAAA,EACpB,CAACA,EAAS,MAAM,GAAG;AAAA,EACnB,CAACA,EAAS,MAAM,GAAG;AACpB,GAEaC,IAAmC,CAAC;AAAA,EAChD,IAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,SAAAC,IAAUN,EAAS;AAAA,EACnB,UAAAO,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AACD,MAAM;AAEC,QAAAC,IAAe,CAACC,MAA+C;AAChE,IAAA,CAACP,KAAYC,KACPA,EAAAM,EAAM,OAAO,KAAK;AAAA,EAE7B;AAGC,SAAA,gBAAAC,EAAC,WAAM,WACNC;AAAA,IAAG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAjB,EAAqBO,CAAO;AAAA,IAC5B;AAAA,MACC,uBAAuBC;AAAA,MACvB,wBAAwBG;AAAA,IAAA;AAAA,EAG1B,GAAA,UAAA;AAAA,IAAA,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,IAAKf,KAAM,GAAGC,CAAI,IAAIC,CAAK;AAAA,QAC3B,MAAOD,EAAK,SAAS;AAAA,QACrB,MAAK;AAAA,QACL,OAAAC;AAAA,QACA,UAAAG;AAAA,QACA,SAAAE;AAAA,QACA,UAAWI;AAAA,QACX,WAAU;AAAA,QACV,UAAAD;AAAA,MAAA;AAAA,IACD;AAAA,IACA,gBAAAK,EAAC,UAAK,WAAYD;AAAA,MACjBE,EAAO;AAAA,MACPb,KAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACAM;AAAA,IACD,GACC,UAAC,gBAAAM,EAAA,QAAA,EAAK,WAAYD;AAAA,MACjBE,EAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,OACG,EACL,CAAA;AAAA,IACER;AAAA,EAAA,GACH;AAEF;"}
|
|
@@ -12,7 +12,8 @@ interface IUiStars {
|
|
|
12
12
|
size?: EStarsSize;
|
|
13
13
|
count?: number;
|
|
14
14
|
color?: EStarColors;
|
|
15
|
+
name?: string;
|
|
15
16
|
className?: string;
|
|
16
17
|
}
|
|
17
|
-
export declare const UiStars: ({ starsFilled, size, count, className, color }: IUiStars) => React.JSX.Element;
|
|
18
|
+
export declare const UiStars: ({ starsFilled, size, count, className, color, name }: IUiStars) => React.JSX.Element;
|
|
18
19
|
export {};
|
|
@@ -2,39 +2,40 @@ import { jsx as t, jsxs as n } from "react/jsx-runtime";
|
|
|
2
2
|
import "react";
|
|
3
3
|
import m from "classnames";
|
|
4
4
|
import { EStarColors as r, EStarsSize as e } from "./_types.js";
|
|
5
|
-
const
|
|
5
|
+
const L = {
|
|
6
6
|
[r.DEFAULT]: "text-accent-alt-600",
|
|
7
7
|
[r.PRIMARY]: "text-primary",
|
|
8
8
|
[r.WHITE]: "text-white",
|
|
9
9
|
[r.BLACK]: "text-black",
|
|
10
10
|
[r.CURRENT]: "text-current"
|
|
11
|
-
},
|
|
11
|
+
}, x = {
|
|
12
12
|
[e.SM]: "w-sm h-sm",
|
|
13
13
|
[e.MD]: "w-md h-md",
|
|
14
14
|
[e.LG]: "w-lg h-lg"
|
|
15
|
-
},
|
|
15
|
+
}, v = ({
|
|
16
16
|
starsFilled: C = 0,
|
|
17
17
|
size: f = e.MD,
|
|
18
18
|
count: i = 5,
|
|
19
19
|
className: d,
|
|
20
|
-
color: h = r.DEFAULT
|
|
20
|
+
color: h = r.DEFAULT,
|
|
21
|
+
name: p = "stars"
|
|
21
22
|
}) => {
|
|
22
23
|
const s = Math.min(Math.max(C, 0), i);
|
|
23
24
|
return /* @__PURE__ */ t("div", { className: m("flex", d), children: Array.from({
|
|
24
25
|
length: i
|
|
25
|
-
}, (
|
|
26
|
+
}, (M, l) => {
|
|
26
27
|
const c = l < Math.floor(s), o = !c && l === Math.floor(s);
|
|
27
28
|
let a = 0;
|
|
28
29
|
return o && (a = s % 1 * 100), /* @__PURE__ */ t("div", { className: "relative", children: /* @__PURE__ */ n(
|
|
29
30
|
"svg",
|
|
30
31
|
{
|
|
31
32
|
className: m(
|
|
32
|
-
|
|
33
|
-
|
|
33
|
+
x[f],
|
|
34
|
+
L[h]
|
|
34
35
|
),
|
|
35
36
|
viewBox: "0 0 25 23",
|
|
36
37
|
children: [
|
|
37
|
-
o && /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ n("linearGradient", { id:
|
|
38
|
+
o && /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ n("linearGradient", { id: `${p}-star-fill-${l}`, x1: "0", x2: "1", y1: "0", y2: "0", children: [
|
|
38
39
|
/* @__PURE__ */ t("stop", { offset: `${a}%`, stopColor: "currentColor" }),
|
|
39
40
|
/* @__PURE__ */ t("stop", { offset: `${a}%`, stopColor: "transparent" })
|
|
40
41
|
] }) }),
|
|
@@ -51,7 +52,7 @@ const p = {
|
|
|
51
52
|
}) });
|
|
52
53
|
};
|
|
53
54
|
export {
|
|
54
|
-
|
|
55
|
-
|
|
55
|
+
v as UiStars,
|
|
56
|
+
L as colorClasses
|
|
56
57
|
};
|
|
57
58
|
//# sourceMappingURL=UiStars.js.map
|
|
@@ -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,45 +18,45 @@
|
|
|
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.4.
|
|
47
|
-
"eslint": "^9.
|
|
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
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
56
|
"typescript": "^5.8.3",
|
|
57
|
-
"typescript-eslint": "^8.
|
|
58
|
-
"vite": "^6.
|
|
59
|
-
"vite-plugin-dts": "^4.5.
|
|
57
|
+
"typescript-eslint": "^8.32.1",
|
|
58
|
+
"vite": "^6.3.5",
|
|
59
|
+
"vite-plugin-dts": "^4.5.4",
|
|
60
60
|
"vite-plugin-lib-inject-css": "^2.2.2"
|
|
61
61
|
},
|
|
62
62
|
"peerDependencies": {
|