@adaptive-ds/solid-ui 0.12.2 → 0.13.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/interactive/button/buttonCva.d.ts +13 -9
- package/dist/interactive/button/buttonCva.d.ts.map +1 -1
- package/dist/interactive/button/buttonCva.js +75 -43
- package/dist/interactive/button/buttonCva.js.map +1 -1
- package/dist/interactive/button/buttonIconCva.d.ts +1 -1
- package/dist/interactive/button/buttonIconCva.d.ts.map +1 -1
- package/dist/interactive/button/buttonIconCva.js +14 -15
- package/dist/interactive/button/buttonIconCva.js.map +1 -1
- package/dist/interactive/button/classesButtonDisabled.d.ts +2 -0
- package/dist/interactive/button/classesButtonDisabled.d.ts.map +1 -0
- package/dist/interactive/button/classesButtonDisabled.js +5 -0
- package/dist/interactive/button/classesButtonDisabled.js.map +1 -0
- package/dist/interactive/theme/ThemeButton.d.ts +1 -1
- package/dist/interactive/theme/ThemeButton.d.ts.map +1 -1
- package/dist/interactive/theme/ThemeButton.js +4 -4
- package/dist/interactive/theme/ThemeButton.js.map +1 -1
- package/dist/interactive/theme/themeSignal.d.ts.map +1 -1
- package/dist/interactive/theme/themeSignal.js +2 -0
- package/dist/interactive/theme/themeSignal.js.map +1 -1
- package/dist/node_modules/@floating-ui/core/dist/floating-ui.core.js +17 -16
- package/dist/node_modules/@floating-ui/core/dist/floating-ui.core.js.map +1 -1
- package/dist/node_modules/@floating-ui/dom/dist/floating-ui.dom.js +23 -19
- package/dist/node_modules/@floating-ui/dom/dist/floating-ui.dom.js.map +1 -1
- package/dist/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.js +24 -21
- package/dist/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.js.map +1 -1
- package/dist/node_modules/@floating-ui/utils/dist/floating-ui.utils.js +5 -8
- package/dist/node_modules/@floating-ui/utils/dist/floating-ui.utils.js.map +1 -1
- package/dist/static/lists/BlackBulletPoints.d.ts +8 -0
- package/dist/static/lists/BlackBulletPoints.d.ts.map +1 -0
- package/dist/static/lists/BlackBulletPoints.js +35 -0
- package/dist/static/lists/BlackBulletPoints.js.map +1 -0
- package/dist/static/lists/BlueBulletPoints.d.ts +3 -0
- package/dist/static/lists/BlueBulletPoints.d.ts.map +1 -0
- package/dist/static/lists/BlueBulletPoints.js +11 -0
- package/dist/static/lists/BlueBulletPoints.js.map +1 -0
- package/dist/static/lists/CheckPoints.d.ts +8 -0
- package/dist/static/lists/CheckPoints.d.ts.map +1 -0
- package/dist/static/lists/CheckPoints.js +35 -0
- package/dist/static/lists/CheckPoints.js.map +1 -0
- package/dist/static/lists/TextOrLink.d.ts +6 -0
- package/dist/static/lists/TextOrLink.d.ts.map +1 -0
- package/dist/static/lists/TextOrLink.js +35 -0
- package/dist/static/lists/TextOrLink.js.map +1 -0
- package/dist/static/styles/stylesBgDottedSparse.d.ts +6 -0
- package/dist/static/styles/stylesBgDottedSparse.d.ts.map +1 -0
- package/dist/static/styles/stylesBgDottedSparse.js +9 -0
- package/dist/static/styles/stylesBgDottedSparse.js.map +1 -0
- package/package.json +1 -1
- package/dist/generate_image_list/generateImageList.d.ts +0 -3
- package/dist/generate_image_list/generateImageList.d.ts.map +0 -1
- package/dist/generate_image_list/generateImageList.js +0 -106
- package/dist/generate_image_list/generateImageList.js.map +0 -1
- package/dist/interactive/layout/SidebarLayout.d.ts +0 -14
- package/dist/interactive/layout/SidebarLayout.d.ts.map +0 -1
- package/dist/interactive/layout/SidebarLayout.js +0 -47
- package/dist/interactive/layout/SidebarLayout.js.map +0 -1
- package/dist/node_modules/image-size/dist/index.js +0 -942
- package/dist/node_modules/image-size/dist/index.js.map +0 -1
|
@@ -1,17 +1,21 @@
|
|
|
1
1
|
export type ButtonVariant = keyof typeof buttonVariant;
|
|
2
2
|
export declare const buttonVariant: {
|
|
3
|
+
readonly none: "none";
|
|
3
4
|
readonly outline: "outline";
|
|
4
5
|
readonly ghost: "ghost";
|
|
5
6
|
readonly link: "link";
|
|
6
7
|
readonly filled: "filled";
|
|
7
8
|
readonly subtle: "subtle";
|
|
8
|
-
readonly
|
|
9
|
-
readonly
|
|
10
|
-
readonly
|
|
11
|
-
readonly
|
|
12
|
-
readonly
|
|
13
|
-
readonly
|
|
14
|
-
readonly
|
|
9
|
+
readonly contrast: "contrast";
|
|
10
|
+
readonly filledYellow: "filledYellow";
|
|
11
|
+
readonly filledAmber: "filledAmber";
|
|
12
|
+
readonly filledOrange: "filledOrange";
|
|
13
|
+
readonly filledRed: "filledRed";
|
|
14
|
+
readonly filledGreen: "filledGreen";
|
|
15
|
+
readonly filledSky: "filledSky";
|
|
16
|
+
readonly filledBlue: "filledBlue";
|
|
17
|
+
readonly filledIndigo: "filledIndigo";
|
|
18
|
+
readonly outlineRed: "outlineRed";
|
|
15
19
|
};
|
|
16
20
|
export type ButtonSize = keyof typeof buttonSize;
|
|
17
21
|
export declare const buttonSize: {
|
|
@@ -25,7 +29,7 @@ export type ButtonCvaProps = {
|
|
|
25
29
|
variant?: ButtonVariant;
|
|
26
30
|
size?: ButtonSize;
|
|
27
31
|
};
|
|
28
|
-
export declare function buttonCva1(variant
|
|
29
|
-
export declare function buttonCva2(variant?: ButtonVariant
|
|
32
|
+
export declare function buttonCva1(variant: ButtonVariant, ...customClasses: (string | boolean | undefined | null | 0)[]): string;
|
|
33
|
+
export declare function buttonCva2(variant?: ButtonVariant, size?: ButtonSize | null, ...customClasses: (string | boolean | undefined | null | 0)[]): string;
|
|
30
34
|
export declare function buttonCvaIconOnly(variant: ButtonVariant | undefined, isLoading: boolean | undefined, isDisabled: boolean | undefined, ...customClasses: (string | boolean | undefined | null | 0)[]): string;
|
|
31
35
|
//# sourceMappingURL=buttonCva.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"buttonCva.d.ts","sourceRoot":"","sources":["../../../lib/interactive/button/buttonCva.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"buttonCva.d.ts","sourceRoot":"","sources":["../../../lib/interactive/button/buttonCva.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,aAAa,CAAA;AACtD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;CAqBhB,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,UAAU,CAAA;AAChD,eAAO,MAAM,UAAU;;;;;;CAMb,CAAA;AAEV,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB,CAAA;AA6HD,wBAAgB,UAAU,CAAC,OAAO,EAAE,aAAa,EAAE,GAAG,aAAa,EAAE,CAAC,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,IAAI,GAAG,CAAC,CAAC,EAAE,UAE/G;AAED,wBAAgB,UAAU,CACxB,OAAO,GAAE,aAAmC,EAC5C,IAAI,GAAE,UAAU,GAAG,IAAkB,EACrC,GAAG,aAAa,EAAE,CAAC,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,IAAI,GAAG,CAAC,CAAC,EAAE,UAK9D;AAWD,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,aAAa,YAAsB,EAC5C,SAAS,EAAE,OAAO,GAAG,SAAS,EAC9B,UAAU,EAAE,OAAO,GAAG,SAAS,EAC/B,GAAG,aAAa,EAAE,CAAC,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,IAAI,GAAG,CAAC,CAAC,EAAE,UAW9D"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { classesDisabledDirectly } from "../../classes/classesDisabledDirectly.js";
|
|
2
|
-
import { classesDisabledModifier } from "../../classes/classesDisabledModifier.js";
|
|
3
1
|
import { classesButtonClickAnimation } from "./classesButtonClickAnimation.js";
|
|
2
|
+
import { classesButtonDisabled } from "./classesButtonDisabled.js";
|
|
4
3
|
import { classArr } from "../../utils/classArr.js";
|
|
5
4
|
import { classMerge } from "../../utils/classMerge.js";
|
|
6
5
|
const buttonVariant = {
|
|
6
|
+
none: "none",
|
|
7
7
|
// transparent bg
|
|
8
8
|
outline: "outline",
|
|
9
9
|
ghost: "ghost",
|
|
@@ -11,15 +11,18 @@ const buttonVariant = {
|
|
|
11
11
|
// filled black/white/gray
|
|
12
12
|
filled: "filled",
|
|
13
13
|
subtle: "subtle",
|
|
14
|
-
|
|
14
|
+
contrast: "contrast",
|
|
15
15
|
// filled colors
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
16
|
+
filledYellow: "filledYellow",
|
|
17
|
+
filledAmber: "filledAmber",
|
|
18
|
+
filledOrange: "filledOrange",
|
|
19
|
+
filledRed: "filledRed",
|
|
20
|
+
filledGreen: "filledGreen",
|
|
21
|
+
filledSky: "filledSky",
|
|
22
|
+
filledBlue: "filledBlue",
|
|
23
|
+
filledIndigo: "filledIndigo",
|
|
21
24
|
// outlined colors
|
|
22
|
-
|
|
25
|
+
outlineRed: "outlineRed"
|
|
23
26
|
};
|
|
24
27
|
const buttonSize = {
|
|
25
28
|
none: "none",
|
|
@@ -42,20 +45,20 @@ const baseClasses = classArr(
|
|
|
42
45
|
"transition-colors",
|
|
43
46
|
// animation
|
|
44
47
|
"group",
|
|
45
|
-
"cursor-pointer"
|
|
46
|
-
classesDisabledModifier
|
|
48
|
+
"cursor-pointer"
|
|
47
49
|
);
|
|
48
50
|
const variantClasses = {
|
|
49
51
|
//
|
|
50
52
|
// transparent bg
|
|
51
53
|
//
|
|
54
|
+
none: "",
|
|
52
55
|
outline: classArr(
|
|
53
56
|
"bg-transparent dark:bg-transparent",
|
|
54
57
|
"dark:text-slate-100",
|
|
55
58
|
// text
|
|
56
|
-
"hover:bg-slate-100
|
|
59
|
+
"hover:bg-slate-100",
|
|
57
60
|
// bg hover
|
|
58
|
-
"border border-slate-200 dark:border-
|
|
61
|
+
"border border-slate-200 dark:border-slate-700 dark:hover:bg-slate-900"
|
|
59
62
|
// border
|
|
60
63
|
),
|
|
61
64
|
ghost: classArr(
|
|
@@ -65,7 +68,7 @@ const variantClasses = {
|
|
|
65
68
|
// bg
|
|
66
69
|
"data-[state=open]:bg-transparent dark:data-[state=open]:bg-transparent",
|
|
67
70
|
// bg data
|
|
68
|
-
"hover:bg-slate-100 dark:hover:bg-
|
|
71
|
+
"hover:bg-slate-100 dark:hover:bg-slate-800"
|
|
69
72
|
// bg hover
|
|
70
73
|
),
|
|
71
74
|
link: classArr(
|
|
@@ -84,9 +87,9 @@ const variantClasses = {
|
|
|
84
87
|
filled: classArr(
|
|
85
88
|
"dark:text-slate-100",
|
|
86
89
|
// text
|
|
87
|
-
"bg-white dark:bg-
|
|
90
|
+
"bg-white dark:bg-black",
|
|
88
91
|
// bg
|
|
89
|
-
"hover:bg-slate-50 dark:hover:bg-slate-
|
|
92
|
+
"hover:bg-slate-50 dark:hover:bg-slate-900"
|
|
90
93
|
// bg hover
|
|
91
94
|
),
|
|
92
95
|
subtle: classArr(
|
|
@@ -97,7 +100,7 @@ const variantClasses = {
|
|
|
97
100
|
"hover:bg-slate-200 dark:hover:bg-slate-600"
|
|
98
101
|
// bg hover
|
|
99
102
|
),
|
|
100
|
-
|
|
103
|
+
contrast: classArr(
|
|
101
104
|
"text-white dark:text-slate-900 dark:hover:text-slate-900",
|
|
102
105
|
// text
|
|
103
106
|
"bg-slate-900 dark:bg-slate-50",
|
|
@@ -108,37 +111,47 @@ const variantClasses = {
|
|
|
108
111
|
//
|
|
109
112
|
// filled colors
|
|
110
113
|
//
|
|
111
|
-
|
|
112
|
-
"text-white
|
|
114
|
+
filledYellow: classArr(
|
|
115
|
+
"text-white",
|
|
113
116
|
// text
|
|
114
|
-
"bg-
|
|
117
|
+
"bg-yellow-500 dark:bg-yellow-800 ",
|
|
115
118
|
// bg
|
|
116
|
-
"hover:bg-
|
|
119
|
+
"hover:bg-yellow-700 dark:hover:bg-yellow-600",
|
|
117
120
|
// bg hover
|
|
118
|
-
"focus:ring-
|
|
121
|
+
"focus:ring-yellow-400 dark:focus:ring-yellow-400"
|
|
119
122
|
// focus
|
|
120
123
|
),
|
|
121
|
-
|
|
124
|
+
filledAmber: classArr(
|
|
122
125
|
"text-white",
|
|
123
126
|
// text
|
|
124
|
-
"bg-
|
|
127
|
+
"bg-amber-500 dark:bg-amber-800 ",
|
|
125
128
|
// bg
|
|
126
|
-
"hover:bg-
|
|
129
|
+
"hover:bg-amber-700 dark:hover:bg-amber-600",
|
|
127
130
|
// bg hover
|
|
128
|
-
"focus:ring-
|
|
131
|
+
"focus:ring-amber-400 dark:focus:ring-amber-400"
|
|
129
132
|
// focus
|
|
130
133
|
),
|
|
131
|
-
|
|
132
|
-
"text-white
|
|
134
|
+
filledOrange: classArr(
|
|
135
|
+
"text-white",
|
|
133
136
|
// text
|
|
134
|
-
"bg-
|
|
137
|
+
"bg-orange-500 dark:bg-orange-800 ",
|
|
135
138
|
// bg
|
|
136
|
-
"hover:bg-
|
|
139
|
+
"hover:bg-orange-700 dark:hover:bg-orange-600",
|
|
137
140
|
// bg hover
|
|
138
|
-
"focus:ring-
|
|
141
|
+
"focus:ring-orange-400 dark:focus:ring-orange-400"
|
|
139
142
|
// focus
|
|
140
143
|
),
|
|
141
|
-
|
|
144
|
+
filledRed: classArr(
|
|
145
|
+
"text-white",
|
|
146
|
+
// text
|
|
147
|
+
"bg-red-500 dark:bg-red-700",
|
|
148
|
+
// bg
|
|
149
|
+
"hover:bg-red-600 dark:hover:bg-red-600",
|
|
150
|
+
// bg hover
|
|
151
|
+
"focus:ring-red-400 dark:focus:ring-red-400"
|
|
152
|
+
// focus
|
|
153
|
+
),
|
|
154
|
+
filledGreen: classArr(
|
|
142
155
|
"text-white",
|
|
143
156
|
// text
|
|
144
157
|
"bg-green-500 hover:bg-green-700 dark:hover:bg-green-700",
|
|
@@ -146,7 +159,7 @@ const variantClasses = {
|
|
|
146
159
|
"focus:ring-green-400 dark:focus:ring-green-400"
|
|
147
160
|
// focus
|
|
148
161
|
),
|
|
149
|
-
|
|
162
|
+
filledSky: classArr(
|
|
150
163
|
"text-white",
|
|
151
164
|
// text
|
|
152
165
|
"bg-sky-500 hover:bg-sky-700 dark:hover:bg-sky-700",
|
|
@@ -154,11 +167,31 @@ const variantClasses = {
|
|
|
154
167
|
"focus:ring-sky-400 dark:focus:ring-sky-400"
|
|
155
168
|
// focus
|
|
156
169
|
),
|
|
170
|
+
filledIndigo: classArr(
|
|
171
|
+
"text-white",
|
|
172
|
+
// text
|
|
173
|
+
"bg-indigo-500 dark:bg-indigo-800 ",
|
|
174
|
+
// bg
|
|
175
|
+
"hover:bg-indigo-700 dark:hover:bg-indigo-600",
|
|
176
|
+
// bg hover
|
|
177
|
+
"focus:ring-indigo-400 dark:focus:ring-indigo-400"
|
|
178
|
+
// focus
|
|
179
|
+
),
|
|
180
|
+
filledBlue: classArr(
|
|
181
|
+
"text-white",
|
|
182
|
+
// text
|
|
183
|
+
"bg-blue-500 dark:bg-blue-800 ",
|
|
184
|
+
// bg
|
|
185
|
+
"hover:bg-blue-700 dark:hover:bg-blue-600",
|
|
186
|
+
// bg hover
|
|
187
|
+
"focus:ring-blue-400 dark:focus:ring-blue-400"
|
|
188
|
+
// focus
|
|
189
|
+
),
|
|
157
190
|
//
|
|
158
191
|
// outline toast colors
|
|
159
192
|
//
|
|
160
|
-
|
|
161
|
-
"text-
|
|
193
|
+
outlineRed: classArr(
|
|
194
|
+
"text-red-500 dark:text-red-500",
|
|
162
195
|
// text
|
|
163
196
|
"border border-red-200 dark:border-red-700",
|
|
164
197
|
// border
|
|
@@ -177,30 +210,29 @@ const sizeClasses = {
|
|
|
177
210
|
default: "py-2 px-3",
|
|
178
211
|
lg: "px-8 py-4 text-lg"
|
|
179
212
|
};
|
|
180
|
-
const defaultVariant = buttonVariant.default;
|
|
181
213
|
const defaultSize = buttonSize.default;
|
|
182
|
-
function buttonCva1(variant
|
|
214
|
+
function buttonCva1(variant, ...customClasses) {
|
|
183
215
|
return buttonCva2(variant, null, ...customClasses);
|
|
184
216
|
}
|
|
185
|
-
function buttonCva2(variant =
|
|
186
|
-
const v = variant
|
|
217
|
+
function buttonCva2(variant = buttonVariant.ghost, size = defaultSize, ...customClasses) {
|
|
218
|
+
const v = variant;
|
|
187
219
|
const s = size ?? defaultSize;
|
|
188
220
|
return classMerge(baseClasses, variantClasses[v], sizeClasses[s], combinedClasses(v, s), customClasses);
|
|
189
221
|
}
|
|
190
222
|
function combinedClasses(variant, size) {
|
|
191
|
-
const variantGroup1 = variant === buttonVariant.outline || variant === buttonVariant.
|
|
223
|
+
const variantGroup1 = variant === buttonVariant.outline || variant === buttonVariant.filledYellow || variant === buttonVariant.outlineRed;
|
|
192
224
|
if (variantGroup1 && size === buttonSize.lg) {
|
|
193
225
|
return "border-2";
|
|
194
226
|
}
|
|
195
227
|
return null;
|
|
196
228
|
}
|
|
197
|
-
function buttonCvaIconOnly(variant, isLoading, isDisabled, ...customClasses) {
|
|
229
|
+
function buttonCvaIconOnly(variant = buttonVariant.ghost, isLoading, isDisabled, ...customClasses) {
|
|
198
230
|
const classes = buttonCva2(
|
|
199
231
|
variant,
|
|
200
232
|
buttonSize.none,
|
|
201
233
|
classesButtonClickAnimation,
|
|
202
|
-
"rounded-full p-2",
|
|
203
|
-
(isDisabled || isLoading) &&
|
|
234
|
+
"rounded-full p-2.5",
|
|
235
|
+
(isDisabled || isLoading) && classesButtonDisabled,
|
|
204
236
|
...customClasses
|
|
205
237
|
);
|
|
206
238
|
return classes;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"buttonCva.js","sources":["../../../lib/interactive/button/buttonCva.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"buttonCva.js","sources":["../../../lib/interactive/button/buttonCva.ts"],"sourcesContent":["import { classesButtonClickAnimation } from \"~ui/interactive/button/classesButtonClickAnimation\"\nimport { classesButtonDisabled } from \"~ui/interactive/button/classesButtonDisabled\"\nimport { classArr } from \"~ui/utils/classArr\"\nimport { classMerge } from \"~ui/utils/classMerge\"\n\nexport type ButtonVariant = keyof typeof buttonVariant\nexport const buttonVariant = {\n none: \"none\",\n // transparent bg\n outline: \"outline\",\n ghost: \"ghost\",\n link: \"link\",\n // filled black/white/gray\n filled: \"filled\",\n subtle: \"subtle\",\n contrast: \"contrast\",\n // filled colors\n filledYellow: \"filledYellow\",\n filledAmber: \"filledAmber\",\n filledOrange: \"filledOrange\",\n filledRed: \"filledRed\",\n filledGreen: \"filledGreen\",\n filledSky: \"filledSky\",\n filledBlue: \"filledBlue\",\n filledIndigo: \"filledIndigo\",\n // outlined colors\n outlineRed: \"outlineRed\",\n} as const\n\nexport type ButtonSize = keyof typeof buttonSize\nexport const buttonSize = {\n none: \"none\",\n minimal: \"minimal\",\n sm: \"sm\",\n default: \"default\",\n lg: \"lg\",\n} as const\n\nexport type ButtonCvaProps = {\n variant?: ButtonVariant\n size?: ButtonSize\n}\n\nconst baseClasses = classArr(\n \"inline-flex\", // layout\n \"font-medium\", // text\n \"items-center justify-center\", // layout children\n \"rounded-md ring-offset-background\", // rounded, rings\n \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\", // focus\n \"transition-colors\", // animation\n \"group\",\n \"cursor-pointer\",\n)\n\nconst variantClasses = {\n //\n // transparent bg\n //\n none: \"\",\n outline: classArr(\n \"bg-transparent dark:bg-transparent\",\n \"dark:text-slate-100\", // text\n \"hover:bg-slate-100\", // bg hover\n \"border border-slate-200 dark:border-slate-700 dark:hover:bg-slate-900\", // border\n ),\n ghost: classArr(\n \"dark:text-slate-100 dark:hover:text-slate-100\", // text\n \"bg-transparent dark:bg-transparent\", // bg\n \"data-[state=open]:bg-transparent dark:data-[state=open]:bg-transparent\", // bg data\n \"hover:bg-slate-100 dark:hover:bg-slate-800\", // bg hover\n ),\n link: classArr(\n \"text-slate-900 dark:text-slate-100\", // text\n \"underline-offset-4 hover:underline \", // underline\n \"bg-transparent dark:bg-transparent\", // bg\n \"hover:bg-transparent dark:hover:bg-transparent\", // bg hover\n ),\n //\n // filled grayscale\n //\n filled: classArr(\n \"dark:text-slate-100\", // text\n \"bg-white dark:bg-black\", // bg\n \"hover:bg-slate-50 dark:hover:bg-slate-900\", // bg hover\n ),\n subtle: classArr(\n \"text-slate-900 dark:text-slate-100\", // text\n \"bg-slate-100 dark:bg-slate-700\", // bg\n \"hover:bg-slate-200 dark:hover:bg-slate-600\", // bg hover\n ),\n contrast: classArr(\n \"text-white dark:text-slate-900 dark:hover:text-slate-900\", // text\n \"bg-slate-900 dark:bg-slate-50\", // bg\n \"hover:bg-slate-700 dark:hover:bg-slate-300\", // bg hover\n ),\n //\n // filled colors\n //\n filledYellow: classArr(\n \"text-white\", // text\n \"bg-yellow-500 dark:bg-yellow-800 \", // bg\n \"hover:bg-yellow-700 dark:hover:bg-yellow-600\", // bg hover\n \"focus:ring-yellow-400 dark:focus:ring-yellow-400\", // focus\n ),\n filledAmber: classArr(\n \"text-white\", // text\n \"bg-amber-500 dark:bg-amber-800 \", // bg\n \"hover:bg-amber-700 dark:hover:bg-amber-600\", // bg hover\n \"focus:ring-amber-400 dark:focus:ring-amber-400\", // focus\n ),\n filledOrange: classArr(\n \"text-white\", // text\n \"bg-orange-500 dark:bg-orange-800 \", // bg\n \"hover:bg-orange-700 dark:hover:bg-orange-600\", // bg hover\n \"focus:ring-orange-400 dark:focus:ring-orange-400\", // focus\n ),\n filledRed: classArr(\n \"text-white\", // text\n \"bg-red-500 dark:bg-red-700\", // bg\n \"hover:bg-red-600 dark:hover:bg-red-600\", // bg hover\n \"focus:ring-red-400 dark:focus:ring-red-400\", // focus\n ),\n filledGreen: classArr(\n \"text-white\", // text\n \"bg-green-500 hover:bg-green-700 dark:hover:bg-green-700\", // bg\n \"focus:ring-green-400 dark:focus:ring-green-400\", // focus\n ),\n filledSky: classArr(\n \"text-white\", // text\n \"bg-sky-500 hover:bg-sky-700 dark:hover:bg-sky-700\", // bg\n \"focus:ring-sky-400 dark:focus:ring-sky-400\", // focus\n ),\n filledIndigo: classArr(\n \"text-white\", // text\n \"bg-indigo-500 dark:bg-indigo-800 \", // bg\n \"hover:bg-indigo-700 dark:hover:bg-indigo-600\", // bg hover\n \"focus:ring-indigo-400 dark:focus:ring-indigo-400\", // focus\n ),\n filledBlue: classArr(\n \"text-white\", // text\n \"bg-blue-500 dark:bg-blue-800 \", // bg\n \"hover:bg-blue-700 dark:hover:bg-blue-600\", // bg hover\n \"focus:ring-blue-400 dark:focus:ring-blue-400\", // focus\n ),\n //\n // outline toast colors\n //\n outlineRed: classArr(\n \"text-red-500 dark:text-red-500\", // text\n \"border border-red-200 dark:border-red-700\", // border\n \"bg-transparent\", // bg\n \"hover:bg-red-100 dark:hover:bg-red-950\", // bg hover\n \"focus:ring-red-400 dark:focus:ring-red-400\", // focus\n ),\n} as const satisfies Record<ButtonVariant, string>\n\nconst sizeClasses = {\n none: \"\",\n minimal: \"rounded-none\",\n sm: \"px-3\",\n default: \"py-2 px-3\",\n lg: \"px-8 py-4 text-lg\",\n} as const satisfies Record<ButtonSize, string>\n\nconst defaultSize = buttonSize.default\n\nexport function buttonCva1(variant: ButtonVariant, ...customClasses: (string | boolean | undefined | null | 0)[]) {\n return buttonCva2(variant, null, ...customClasses)\n}\n\nexport function buttonCva2(\n variant: ButtonVariant = buttonVariant.ghost,\n size: ButtonSize | null = defaultSize,\n ...customClasses: (string | boolean | undefined | null | 0)[]\n) {\n const v = variant\n const s = size ?? defaultSize\n return classMerge(baseClasses, variantClasses[v], sizeClasses[s], combinedClasses(v, s), customClasses)\n}\n\nfunction combinedClasses(variant: ButtonVariant, size: ButtonSize) {\n const variantGroup1 =\n variant === buttonVariant.outline || variant === buttonVariant.filledYellow || variant === buttonVariant.outlineRed\n if (variantGroup1 && size === buttonSize.lg) {\n return \"border-2\"\n }\n return null\n}\n\nexport function buttonCvaIconOnly(\n variant: ButtonVariant = buttonVariant.ghost,\n isLoading: boolean | undefined,\n isDisabled: boolean | undefined,\n ...customClasses: (string | boolean | undefined | null | 0)[]\n) {\n const classes = buttonCva2(\n variant,\n buttonSize.none,\n classesButtonClickAnimation,\n \"rounded-full p-2.5\",\n (isDisabled || isLoading) && classesButtonDisabled,\n ...customClasses,\n )\n return classes\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { ButtonVariant } from './buttonCva';
|
|
2
|
-
export declare function buttonIconCva(variant?: ButtonVariant
|
|
2
|
+
export declare function buttonIconCva(variant?: ButtonVariant, ...customClasses: (string | boolean | undefined | null | 0 | 0n)[]): string;
|
|
3
3
|
//# sourceMappingURL=buttonIconCva.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"buttonIconCva.d.ts","sourceRoot":"","sources":["../../../lib/interactive/button/buttonIconCva.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,aAAa,EAAE,MAAM,kCAAkC,CAAA;
|
|
1
|
+
{"version":3,"file":"buttonIconCva.d.ts","sourceRoot":"","sources":["../../../lib/interactive/button/buttonIconCva.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,aAAa,EAAE,MAAM,kCAAkC,CAAA;AAgDpF,wBAAgB,aAAa,CAC3B,OAAO,GAAE,aAAmC,EAC5C,GAAG,aAAa,EAAE,CAAC,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,CAAC,EAAE,UAGnE"}
|
|
@@ -22,6 +22,7 @@ const baseClasses = classArr(
|
|
|
22
22
|
// size
|
|
23
23
|
);
|
|
24
24
|
const buttonIconClasses = {
|
|
25
|
+
none: "",
|
|
25
26
|
// transparent bg
|
|
26
27
|
outline: classesBlackWhite,
|
|
27
28
|
ghost: classesBlackWhite,
|
|
@@ -29,24 +30,22 @@ const buttonIconClasses = {
|
|
|
29
30
|
// filled grayscale
|
|
30
31
|
filled: classesBlackWhite,
|
|
31
32
|
subtle: classesBlackWhite,
|
|
32
|
-
|
|
33
|
+
contrast: classArr(classesTextFillWhite, "dark:text-black dark:fill-black"),
|
|
33
34
|
// filled colors
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
35
|
+
filledYellow: classArr(classesTextFillWhite, "dark:text-yellow-100 dark:fill-yellow-100"),
|
|
36
|
+
filledOrange: classArr(classesTextFillWhite, "dark:text-orange-100 dark:fill-orange-100"),
|
|
37
|
+
filledAmber: classArr(classesTextFillWhite, "dark:text-amber-100 dark:fill-amber-100"),
|
|
38
|
+
filledRed: classArr(classesTextFillWhite, "dark:text-red-100 dark:fill-red-100"),
|
|
39
|
+
filledGreen: classesWhiteWhite,
|
|
40
|
+
filledBlue: classArr(classesTextFillWhite, "dark:text-blue-100 dark:fill-blue-100"),
|
|
41
|
+
filledIndigo: classArr(classesTextFillWhite, "dark:text-indigo-100 dark:fill-indigo-100"),
|
|
42
|
+
// outlineRed: classesWhiteWhite,
|
|
43
|
+
filledSky: classesWhiteWhite,
|
|
39
44
|
// outlined colors
|
|
40
|
-
|
|
41
|
-
"text-destructive dark:text-red-700",
|
|
42
|
-
// text
|
|
43
|
-
"fill-destructive dark:fill-red-700"
|
|
44
|
-
// fill
|
|
45
|
-
)
|
|
45
|
+
outlineRed: classArr("text-red-500 fill-red-500 dark:text-red-700 dark:fill-red-700")
|
|
46
46
|
};
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
return classMerge(baseClasses, buttonIconClasses[variant ?? defaultVariant], customClasses);
|
|
47
|
+
function buttonIconCva(variant = buttonVariant.ghost, ...customClasses) {
|
|
48
|
+
return classMerge(baseClasses, buttonIconClasses[variant], customClasses);
|
|
50
49
|
}
|
|
51
50
|
export {
|
|
52
51
|
buttonIconCva
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"buttonIconCva.js","sources":["../../../lib/interactive/button/buttonIconCva.ts"],"sourcesContent":["import { buttonVariant, type ButtonVariant } from \"~ui/interactive/button/buttonCva\"\nimport { classArr } from \"~ui/utils/classArr\"\nimport { classMerge } from \"~ui/utils/classMerge\"\n\nconst classesTextFillBlack = \"text-black fill-black\"\nconst classesTextFillWhite = \"text-white fill-white\"\n\nconst classesBlackWhite = classArr(\n classesTextFillBlack,\n \"dark:text-white\", // dark text\n \"dark:fill-white\", // dark fill\n)\n\nconst classesWhiteWhite = classArr(\n classesTextFillWhite,\n \"dark:text-white\", // dark text\n \"dark:fill-white\", // dark fill\n)\n\nconst baseClasses = classArr(\n \"size-6\", // size\n)\n\nconst buttonIconClasses = {\n // transparent bg\n outline: classesBlackWhite,\n ghost: classesBlackWhite,\n link: classesBlackWhite,\n // filled grayscale\n filled: classesBlackWhite,\n subtle: classesBlackWhite,\n
|
|
1
|
+
{"version":3,"file":"buttonIconCva.js","sources":["../../../lib/interactive/button/buttonIconCva.ts"],"sourcesContent":["import { buttonVariant, type ButtonVariant } from \"~ui/interactive/button/buttonCva\"\nimport { classArr } from \"~ui/utils/classArr\"\nimport { classMerge } from \"~ui/utils/classMerge\"\n\nconst classesTextFillBlack = \"text-black fill-black\"\nconst classesTextFillWhite = \"text-white fill-white\"\n\nconst classesBlackWhite = classArr(\n classesTextFillBlack,\n \"dark:text-white\", // dark text\n \"dark:fill-white\", // dark fill\n)\n\nconst classesWhiteWhite = classArr(\n classesTextFillWhite,\n \"dark:text-white\", // dark text\n \"dark:fill-white\", // dark fill\n)\n\nconst baseClasses = classArr(\n \"size-6\", // size\n)\n\nconst buttonIconClasses = {\n none: \"\",\n // transparent bg\n outline: classesBlackWhite,\n ghost: classesBlackWhite,\n link: classesBlackWhite,\n // filled grayscale\n filled: classesBlackWhite,\n subtle: classesBlackWhite,\n contrast: classArr(classesTextFillWhite, \"dark:text-black dark:fill-black\"),\n // filled colors\n filledYellow: classArr(classesTextFillWhite, \"dark:text-yellow-100 dark:fill-yellow-100\"),\n filledOrange: classArr(classesTextFillWhite, \"dark:text-orange-100 dark:fill-orange-100\"),\n filledAmber: classArr(classesTextFillWhite, \"dark:text-amber-100 dark:fill-amber-100\"),\n filledRed: classArr(classesTextFillWhite, \"dark:text-red-100 dark:fill-red-100\"),\n\n filledGreen: classesWhiteWhite,\n filledBlue: classArr(classesTextFillWhite, \"dark:text-blue-100 dark:fill-blue-100\"),\n filledIndigo: classArr(classesTextFillWhite, \"dark:text-indigo-100 dark:fill-indigo-100\"),\n // outlineRed: classesWhiteWhite,\n filledSky: classesWhiteWhite,\n // outlined colors\n outlineRed: classArr(\"text-red-500 fill-red-500 dark:text-red-700 dark:fill-red-700\"),\n} as const satisfies Record<ButtonVariant, string>\n\nexport function buttonIconCva(\n variant: ButtonVariant = buttonVariant.ghost,\n ...customClasses: (string | boolean | undefined | null | 0 | 0n)[]\n) {\n return classMerge(baseClasses, buttonIconClasses[variant], customClasses)\n}\n"],"names":[],"mappings":";;;AAIA,MAAM,uBAAuB;AAC7B,MAAM,uBAAuB;AAE7B,MAAM,oBAAoB;AAAA,EACxB;AAAA,EACA;AAAA;AAAA,EACA;AAAA;AACF;AAEA,MAAM,oBAAoB;AAAA,EACxB;AAAA,EACA;AAAA;AAAA,EACA;AAAA;AACF;AAEA,MAAM,cAAc;AAAA,EAClB;AAAA;AACF;AAEA,MAAM,oBAAoB;AAAA,EACxB,MAAM;AAAA;AAAA,EAEN,SAAS;AAAA,EACT,OAAO;AAAA,EACP,MAAM;AAAA;AAAA,EAEN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,UAAU,SAAS,sBAAsB,iCAAiC;AAAA;AAAA,EAE1E,cAAc,SAAS,sBAAsB,2CAA2C;AAAA,EACxF,cAAc,SAAS,sBAAsB,2CAA2C;AAAA,EACxF,aAAa,SAAS,sBAAsB,yCAAyC;AAAA,EACrF,WAAW,SAAS,sBAAsB,qCAAqC;AAAA,EAE/E,aAAa;AAAA,EACb,YAAY,SAAS,sBAAsB,uCAAuC;AAAA,EAClF,cAAc,SAAS,sBAAsB,2CAA2C;AAAA;AAAA,EAExF,WAAW;AAAA;AAAA,EAEX,YAAY,SAAS,+DAA+D;AACtF;AAEO,SAAS,cACd,UAAyB,cAAc,UACpC,eACH;AACA,SAAO,WAAW,aAAa,kBAAkB,OAAO,GAAG,aAAa;AAC1E;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"classesButtonDisabled.d.ts","sourceRoot":"","sources":["../../../lib/interactive/button/classesButtonDisabled.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,qBAAqB,kCAAkC,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"classesButtonDisabled.js","sources":["../../../lib/interactive/button/classesButtonDisabled.ts"],"sourcesContent":["export const classesButtonDisabled = \"cursor-not-allowed opacity-70\"\n"],"names":[],"mappings":"AAAO,MAAM,wBAAwB;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { MayHaveClass } from '../../utils/MayHaveClass';
|
|
2
1
|
import { ThemeButtonText } from './ThemeButtonText';
|
|
2
|
+
import { MayHaveClass } from '../../utils/MayHaveClass';
|
|
3
3
|
export interface ThemeButtonProps extends MayHaveClass {
|
|
4
4
|
showText?: boolean;
|
|
5
5
|
texts?: ThemeButtonText;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeButton.d.ts","sourceRoot":"","sources":["../../../lib/interactive/theme/ThemeButton.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ThemeButton.d.ts","sourceRoot":"","sources":["../../../lib/interactive/theme/ThemeButton.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAA;AAK5E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AAE1D,MAAM,WAAW,gBAAiB,SAAQ,YAAY;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,eAAe,CAAA;CACxB;AAED,wBAAgB,WAAW,CAAC,CAAC,EAAE,gBAAgB,kCA0B9C"}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import { createComponent } from "solid-js/web";
|
|
2
|
-
import {
|
|
2
|
+
import { onMount, onCleanup } from "solid-js";
|
|
3
3
|
import { buttonVariant } from "../button/buttonCva.js";
|
|
4
4
|
import { ButtonIconOnly } from "../button/ButtonIconOnly.js";
|
|
5
|
+
import { themeButtonTextDefault } from "./ThemeButtonText.js";
|
|
5
6
|
import { themeInit, themeSignal, themeRotate } from "./themeSignal.js";
|
|
6
7
|
import { themeIcon } from "./themeVariant.js";
|
|
7
8
|
import { classMerge } from "../../utils/classMerge.js";
|
|
8
|
-
import { themeButtonTextDefault } from "./ThemeButtonText.js";
|
|
9
9
|
function ThemeButton(p) {
|
|
10
|
-
createEffect(themeInit);
|
|
11
10
|
const handleGlobalKeyDown = createGlobalKeyHandler();
|
|
12
11
|
const texts = p.texts ?? themeButtonTextDefault;
|
|
13
|
-
|
|
12
|
+
onMount(() => {
|
|
13
|
+
themeInit();
|
|
14
14
|
window.addEventListener("keydown", handleGlobalKeyDown);
|
|
15
15
|
onCleanup(() => window.removeEventListener("keydown", handleGlobalKeyDown));
|
|
16
16
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeButton.js","sources":["../../../lib/interactive/theme/ThemeButton.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"ThemeButton.js","sources":["../../../lib/interactive/theme/ThemeButton.tsx"],"sourcesContent":["import { onCleanup, onMount } from \"solid-js\"\nimport { buttonVariant } from \"~ui/interactive/button/buttonCva\"\nimport { ButtonIconOnly } from \"~ui/interactive/button/ButtonIconOnly\"\nimport type { ThemeButtonText } from \"~ui/interactive/theme/ThemeButtonText\"\nimport { themeButtonTextDefault } from \"~ui/interactive/theme/ThemeButtonText\"\nimport { themeInit, themeRotate, themeSignal } from \"~ui/interactive/theme/themeSignal\"\nimport { themeIcon } from \"~ui/interactive/theme/themeVariant\"\nimport { classMerge } from \"~ui/utils/classMerge\"\nimport type { MayHaveClass } from \"~ui/utils/MayHaveClass\"\n\nexport interface ThemeButtonProps extends MayHaveClass {\n showText?: boolean\n texts?: ThemeButtonText\n}\n\nexport function ThemeButton(p: ThemeButtonProps) {\n const navigate = (to: string) => {}\n const handleGlobalKeyDown = createGlobalKeyHandler(navigate)\n\n const texts = p.texts ?? themeButtonTextDefault\n\n onMount(() => {\n themeInit()\n window.addEventListener(\"keydown\", handleGlobalKeyDown)\n onCleanup(() => window.removeEventListener(\"keydown\", handleGlobalKeyDown))\n })\n\n const currentTheme = themeSignal.get()\n const themeName = texts[currentTheme]\n\n return (\n <ButtonIconOnly\n title={texts.currentTheme(themeName)}\n icon={themeIcon(currentTheme)}\n variant={buttonVariant.ghost}\n class={classMerge(p.class)}\n onClick={themeRotate}\n >\n {p.showText && themeName}\n </ButtonIconOnly>\n )\n}\n\nfunction createGlobalKeyHandler(navigate: (to: string) => void) {\n return (e: KeyboardEvent) => {\n if (e.key === \"s\" && e.altKey) {\n e.preventDefault()\n themeRotate()\n } else if (e.key === \"d\" && e.altKey) {\n e.preventDefault()\n navigate(\"/demos\")\n }\n }\n}\n"],"names":["ThemeButton","p","handleGlobalKeyDown","createGlobalKeyHandler","texts","themeButtonTextDefault","onMount","themeInit","window","addEventListener","onCleanup","removeEventListener","currentTheme","themeSignal","get","themeName","_$createComponent","ButtonIconOnly","title","icon","themeIcon","variant","buttonVariant","ghost","classMerge","class","onClick","themeRotate","children","showText","navigate","e","key","altKey","preventDefault"],"mappings":";;;;;;;;AAeO,SAASA,YAAYC,GAAqB;AAE/C,QAAMC,sBAAsBC,uBAA+B;AAE3D,QAAMC,QAAQH,EAAEG,SAASC;AAEzBC,UAAQ,MAAM;AACZC,cAAAA;AACAC,WAAOC,iBAAiB,WAAWP,mBAAmB;AACtDQ,cAAU,MAAMF,OAAOG,oBAAoB,WAAWT,mBAAmB,CAAC;AAAA,EAC5E,CAAC;AAED,QAAMU,eAAeC,YAAYC,IAAAA;AACjC,QAAMC,YAAYX,MAAMQ,YAAY;AAEpC,SAAAI,gBACGC,gBAAc;AAAA,IAAA,IACbC,QAAK;AAAA,aAAEd,MAAMQ,aAAaG,SAAS;AAAA,IAAC;AAAA,IAAA,IACpCI,OAAI;AAAA,aAAEC,UAAUR,YAAY;AAAA,IAAC;AAAA,IAAA,IAC7BS,UAAO;AAAA,aAAEC,cAAcC;AAAAA,IAAK;AAAA,IAAA,KAAA,OAAA,IAAA;AAAA,aACrBC,WAAWvB,EAAEwB,KAAK;AAAA,IAAC;AAAA,IAC1BC,SAASC;AAAAA,IAAW,IAAAC,WAAA;AAAA,aAEnB3B,EAAE4B,YAAYd;AAAAA,IAAS;AAAA,EAAA,CAAA;AAG9B;AAEA,SAASZ,uBAAuB2B,UAAgC;AAC9D,SAAO,CAACC,MAAqB;AAC3B,QAAIA,EAAEC,QAAQ,OAAOD,EAAEE,QAAQ;AAC7BF,QAAEG,eAAAA;AACFP,kBAAAA;AAAAA,IACF,WAAWI,EAAEC,QAAQ,OAAOD,EAAEE,QAAQ;AACpCF,QAAEG,eAAAA;AAAAA,IAEJ;AAAA,EACF;AACF;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"themeSignal.d.ts","sourceRoot":"","sources":["../../../lib/interactive/theme/themeSignal.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"themeSignal.d.ts","sourceRoot":"","sources":["../../../lib/interactive/theme/themeSignal.ts"],"names":[],"mappings":"AAGA,OAAO,EAOL,KAAK,YAAY,EAElB,MAAM,oCAAoC,CAAA;AAK3C,eAAO,MAAM,WAAW,8EAAoD,CAAA;AAE5E,wBAAgB,SAAS,SAKxB;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,OAAO,QAKnE;AAmBD,wBAAgB,WAAW,SAS1B"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { isServer } from "solid-js/web";
|
|
1
2
|
import * as v from "valibot";
|
|
2
3
|
import { themeButtonTextDefault } from "./ThemeButtonText.js";
|
|
3
4
|
import { themeVariant, getThemeFromStorageOrBrowserPref, nextTheme2, themeIcon, setThemeToBrowser, themeLocalStorageKey, themeSchema } from "./themeVariant.js";
|
|
@@ -6,6 +7,7 @@ import { toastVariant } from "../toast/toastVariant.js";
|
|
|
6
7
|
import { createSignalObject } from "../../utils/createSignalObject.js";
|
|
7
8
|
const themeSignal = createSignalObject(themeVariant.os);
|
|
8
9
|
function themeInit() {
|
|
10
|
+
if (isServer) return;
|
|
9
11
|
const theme = getThemeFromStorageOrBrowserPref();
|
|
10
12
|
themeSet(theme, false);
|
|
11
13
|
themeRegisterStorageListener();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"themeSignal.js","sources":["../../../lib/interactive/theme/themeSignal.ts"],"sourcesContent":["import * as v from \"valibot\"\nimport { themeButtonTextDefault } from \"~ui/interactive/theme/ThemeButtonText\"\nimport {\n getThemeFromStorageOrBrowserPref,\n nextTheme2,\n setThemeToBrowser,\n themeIcon,\n themeLocalStorageKey,\n themeSchema,\n type ThemeVariant,\n themeVariant,\n} from \"~ui/interactive/theme/themeVariant\"\nimport { toastAdd } from \"~ui/interactive/toast/toastAdd\"\nimport { toastVariant } from \"~ui/interactive/toast/toastVariant\"\nimport { createSignalObject } from \"~ui/utils/createSignalObject\"\n\nexport const themeSignal = createSignalObject<ThemeVariant>(themeVariant.os)\n\nexport function themeInit() {\n const theme = getThemeFromStorageOrBrowserPref()\n themeSet(theme, false)\n themeRegisterStorageListener()\n}\n\nexport function themeSet(theme: ThemeVariant, saveToStorage: boolean) {\n themeSignal.set(theme)\n setThemeToBrowser(theme)\n if (!saveToStorage) return\n localStorage.setItem(themeLocalStorageKey, theme)\n}\n\nfunction themeRegisterStorageListener() {\n const onStorage = (e: StorageEvent) => {\n if (e.key !== themeLocalStorageKey) return\n const themeString = e.newValue\n const result = v.safeParse(themeSchema, themeString)\n if (!result.success) {\n console.log(\"failed to parse storage event\")\n return\n }\n themeSet(result.output, false)\n }\n window.addEventListener(\"storage\", onStorage)\n return () => {\n window.removeEventListener(\"storage\", onStorage)\n }\n}\n\nexport function themeRotate() {\n const currentTheme = themeSignal.get()\n const newTheme = nextTheme2(currentTheme)\n\n const themeText = themeButtonTextDefault[newTheme]\n const title = themeButtonTextDefault.setTheme(themeText)\n const icon = themeIcon(newTheme)\n toastAdd({ title, icon, variant: toastVariant.default })\n themeSet(newTheme, true)\n}\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"themeSignal.js","sources":["../../../lib/interactive/theme/themeSignal.ts"],"sourcesContent":["import { isServer } from \"solid-js/web\"\nimport * as v from \"valibot\"\nimport { themeButtonTextDefault } from \"~ui/interactive/theme/ThemeButtonText\"\nimport {\n getThemeFromStorageOrBrowserPref,\n nextTheme2,\n setThemeToBrowser,\n themeIcon,\n themeLocalStorageKey,\n themeSchema,\n type ThemeVariant,\n themeVariant,\n} from \"~ui/interactive/theme/themeVariant\"\nimport { toastAdd } from \"~ui/interactive/toast/toastAdd\"\nimport { toastVariant } from \"~ui/interactive/toast/toastVariant\"\nimport { createSignalObject } from \"~ui/utils/createSignalObject\"\n\nexport const themeSignal = createSignalObject<ThemeVariant>(themeVariant.os)\n\nexport function themeInit() {\n if (isServer) return // Skip during SSR\n const theme = getThemeFromStorageOrBrowserPref()\n themeSet(theme, false)\n themeRegisterStorageListener()\n}\n\nexport function themeSet(theme: ThemeVariant, saveToStorage: boolean) {\n themeSignal.set(theme)\n setThemeToBrowser(theme)\n if (!saveToStorage) return\n localStorage.setItem(themeLocalStorageKey, theme)\n}\n\nfunction themeRegisterStorageListener() {\n const onStorage = (e: StorageEvent) => {\n if (e.key !== themeLocalStorageKey) return\n const themeString = e.newValue\n const result = v.safeParse(themeSchema, themeString)\n if (!result.success) {\n console.log(\"failed to parse storage event\")\n return\n }\n themeSet(result.output, false)\n }\n window.addEventListener(\"storage\", onStorage)\n return () => {\n window.removeEventListener(\"storage\", onStorage)\n }\n}\n\nexport function themeRotate() {\n const currentTheme = themeSignal.get()\n const newTheme = nextTheme2(currentTheme)\n\n const themeText = themeButtonTextDefault[newTheme]\n const title = themeButtonTextDefault.setTheme(themeText)\n const icon = themeIcon(newTheme)\n toastAdd({ title, icon, variant: toastVariant.default })\n themeSet(newTheme, true)\n}\n"],"names":[],"mappings":";;;;;;;AAiBO,MAAM,cAAc,mBAAiC,aAAa,EAAE;AAEpE,SAAS,YAAY;AAC1B,MAAI,SAAU;AACd,QAAM,QAAQ,iCAAA;AACd,WAAS,OAAO,KAAK;AACrB,+BAAA;AACF;AAEO,SAAS,SAAS,OAAqB,eAAwB;AACpE,cAAY,IAAI,KAAK;AACrB,oBAAkB,KAAK;AACvB,MAAI,CAAC,cAAe;AACpB,eAAa,QAAQ,sBAAsB,KAAK;AAClD;AAEA,SAAS,+BAA+B;AACtC,QAAM,YAAY,CAAC,MAAoB;AACrC,QAAI,EAAE,QAAQ,qBAAsB;AACpC,UAAM,cAAc,EAAE;AACtB,UAAM,SAAS,EAAE,UAAU,aAAa,WAAW;AACnD,QAAI,CAAC,OAAO,SAAS;AACnB,cAAQ,IAAI,+BAA+B;AAC3C;AAAA,IACF;AACA,aAAS,OAAO,QAAQ,KAAK;AAAA,EAC/B;AACA,SAAO,iBAAiB,WAAW,SAAS;AAC5C,SAAO,MAAM;AACX,WAAO,oBAAoB,WAAW,SAAS;AAAA,EACjD;AACF;AAEO,SAAS,cAAc;AAC5B,QAAM,eAAe,YAAY,IAAA;AACjC,QAAM,WAAW,WAAW,YAAY;AAExC,QAAM,YAAY,uBAAuB,QAAQ;AACjD,QAAM,QAAQ,uBAAuB,SAAS,SAAS;AACvD,QAAM,OAAO,UAAU,QAAQ;AAC/B,WAAS,EAAE,OAAO,MAAM,SAAS,aAAa,SAAS;AACvD,WAAS,UAAU,IAAI;AACzB;"}
|
|
@@ -110,6 +110,7 @@ async function detectOverflow(state, options) {
|
|
|
110
110
|
right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
|
|
111
111
|
};
|
|
112
112
|
}
|
|
113
|
+
const MAX_RESET_COUNT = 50;
|
|
113
114
|
const computePosition = async (reference, floating, config) => {
|
|
114
115
|
const {
|
|
115
116
|
placement = "bottom",
|
|
@@ -117,7 +118,10 @@ const computePosition = async (reference, floating, config) => {
|
|
|
117
118
|
middleware = [],
|
|
118
119
|
platform
|
|
119
120
|
} = config;
|
|
120
|
-
const
|
|
121
|
+
const platformWithDetectOverflow = platform.detectOverflow ? platform : {
|
|
122
|
+
...platform,
|
|
123
|
+
detectOverflow
|
|
124
|
+
};
|
|
121
125
|
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
|
|
122
126
|
let rects = await platform.getElementRects({
|
|
123
127
|
reference,
|
|
@@ -129,14 +133,17 @@ const computePosition = async (reference, floating, config) => {
|
|
|
129
133
|
y
|
|
130
134
|
} = computeCoordsFromPlacement(rects, placement, rtl);
|
|
131
135
|
let statefulPlacement = placement;
|
|
132
|
-
let middlewareData = {};
|
|
133
136
|
let resetCount = 0;
|
|
134
|
-
|
|
135
|
-
|
|
137
|
+
const middlewareData = {};
|
|
138
|
+
for (let i = 0; i < middleware.length; i++) {
|
|
139
|
+
const currentMiddleware = middleware[i];
|
|
140
|
+
if (!currentMiddleware) {
|
|
141
|
+
continue;
|
|
142
|
+
}
|
|
136
143
|
const {
|
|
137
144
|
name,
|
|
138
145
|
fn
|
|
139
|
-
} =
|
|
146
|
+
} = currentMiddleware;
|
|
140
147
|
const {
|
|
141
148
|
x: nextX,
|
|
142
149
|
y: nextY,
|
|
@@ -150,10 +157,7 @@ const computePosition = async (reference, floating, config) => {
|
|
|
150
157
|
strategy,
|
|
151
158
|
middlewareData,
|
|
152
159
|
rects,
|
|
153
|
-
platform:
|
|
154
|
-
...platform,
|
|
155
|
-
detectOverflow: (_platform$detectOverf = platform.detectOverflow) != null ? _platform$detectOverf : detectOverflow
|
|
156
|
-
},
|
|
160
|
+
platform: platformWithDetectOverflow,
|
|
157
161
|
elements: {
|
|
158
162
|
reference,
|
|
159
163
|
floating
|
|
@@ -161,14 +165,11 @@ const computePosition = async (reference, floating, config) => {
|
|
|
161
165
|
});
|
|
162
166
|
x = nextX != null ? nextX : x;
|
|
163
167
|
y = nextY != null ? nextY : y;
|
|
164
|
-
middlewareData = {
|
|
165
|
-
...middlewareData,
|
|
166
|
-
|
|
167
|
-
...middlewareData[name],
|
|
168
|
-
...data
|
|
169
|
-
}
|
|
168
|
+
middlewareData[name] = {
|
|
169
|
+
...middlewareData[name],
|
|
170
|
+
...data
|
|
170
171
|
};
|
|
171
|
-
if (reset && resetCount
|
|
172
|
+
if (reset && resetCount < MAX_RESET_COUNT) {
|
|
172
173
|
resetCount++;
|
|
173
174
|
if (typeof reset === "object") {
|
|
174
175
|
if (reset.placement) {
|