@arbiui/react 0.1.0
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/LICENSE +203 -0
- package/README.md +635 -0
- package/dist/index.d.ts +395 -0
- package/dist/index.js +627 -0
- package/package.json +65 -0
package/dist/index.js
ADDED
|
@@ -0,0 +1,627 @@
|
|
|
1
|
+
import { createElement } from "react";
|
|
2
|
+
import { clsx } from "clsx";
|
|
3
|
+
import { twMerge } from "tailwind-merge";
|
|
4
|
+
//#region src/components/shared/constants.ts
|
|
5
|
+
const classMaps = {
|
|
6
|
+
breakAfter: {
|
|
7
|
+
auto: "break-after-auto",
|
|
8
|
+
avoid: "break-after-avoid",
|
|
9
|
+
all: "break-after-all",
|
|
10
|
+
"avoid-page": "break-after-avoid-page",
|
|
11
|
+
page: "break-after-page",
|
|
12
|
+
left: "break-after-left",
|
|
13
|
+
right: "break-after-right",
|
|
14
|
+
column: "break-after-column"
|
|
15
|
+
},
|
|
16
|
+
breakBefore: {
|
|
17
|
+
auto: "break-before-auto",
|
|
18
|
+
avoid: "break-before-avoid",
|
|
19
|
+
all: "break-before-all",
|
|
20
|
+
"avoid-page": "break-before-avoid-page",
|
|
21
|
+
page: "break-before-page",
|
|
22
|
+
left: "break-before-left",
|
|
23
|
+
right: "break-before-right",
|
|
24
|
+
column: "break-before-column"
|
|
25
|
+
},
|
|
26
|
+
breakInside: {
|
|
27
|
+
auto: "break-inside-auto",
|
|
28
|
+
avoid: "break-inside-avoid",
|
|
29
|
+
"avoid-page": "break-inside-avoid-page",
|
|
30
|
+
"avoid-column": "break-inside-avoid-column"
|
|
31
|
+
},
|
|
32
|
+
boxDecoration: {
|
|
33
|
+
clone: "box-decoration-clone",
|
|
34
|
+
slice: "box-decoration-slice"
|
|
35
|
+
},
|
|
36
|
+
box: {
|
|
37
|
+
border: "box-border",
|
|
38
|
+
content: "box-content"
|
|
39
|
+
},
|
|
40
|
+
float: {
|
|
41
|
+
right: "float-right",
|
|
42
|
+
left: "float-left",
|
|
43
|
+
start: "float-start",
|
|
44
|
+
end: "float-end",
|
|
45
|
+
none: "float-none"
|
|
46
|
+
},
|
|
47
|
+
clear: {
|
|
48
|
+
left: "clear-left",
|
|
49
|
+
right: "clear-right",
|
|
50
|
+
both: "clear-both",
|
|
51
|
+
start: "clear-start",
|
|
52
|
+
end: "clear-end",
|
|
53
|
+
none: "clear-none"
|
|
54
|
+
},
|
|
55
|
+
objectFit: {
|
|
56
|
+
contain: "object-contain",
|
|
57
|
+
cover: "object-cover",
|
|
58
|
+
fill: "object-fill",
|
|
59
|
+
none: "object-none",
|
|
60
|
+
"scale-down": "object-scale-down"
|
|
61
|
+
},
|
|
62
|
+
overflow: {
|
|
63
|
+
auto: "overflow-auto",
|
|
64
|
+
hidden: "overflow-hidden",
|
|
65
|
+
clip: "overflow-clip",
|
|
66
|
+
visible: "overflow-visible",
|
|
67
|
+
scroll: "overflow-scroll"
|
|
68
|
+
},
|
|
69
|
+
overflowX: {
|
|
70
|
+
auto: "overflow-x-auto",
|
|
71
|
+
hidden: "overflow-x-hidden",
|
|
72
|
+
clip: "overflow-x-clip",
|
|
73
|
+
visible: "overflow-x-visible",
|
|
74
|
+
scroll: "overflow-x-scroll"
|
|
75
|
+
},
|
|
76
|
+
overflowY: {
|
|
77
|
+
auto: "overflow-y-auto",
|
|
78
|
+
hidden: "overflow-y-hidden",
|
|
79
|
+
clip: "overflow-y-clip",
|
|
80
|
+
visible: "overflow-y-visible",
|
|
81
|
+
scroll: "overflow-y-scroll"
|
|
82
|
+
},
|
|
83
|
+
overscroll: {
|
|
84
|
+
auto: "overscroll-auto",
|
|
85
|
+
contain: "overscroll-contain",
|
|
86
|
+
none: "overscroll-none"
|
|
87
|
+
},
|
|
88
|
+
overscrollX: {
|
|
89
|
+
auto: "overscroll-x-auto",
|
|
90
|
+
contain: "overscroll-x-contain",
|
|
91
|
+
none: "overscroll-x-none"
|
|
92
|
+
},
|
|
93
|
+
overscrollY: {
|
|
94
|
+
auto: "overscroll-y-auto",
|
|
95
|
+
contain: "overscroll-y-contain",
|
|
96
|
+
none: "overscroll-y-none"
|
|
97
|
+
},
|
|
98
|
+
flexDirection: {
|
|
99
|
+
row: "flex-row",
|
|
100
|
+
"row-reverse": "flex-row-reverse",
|
|
101
|
+
col: "flex-col",
|
|
102
|
+
"col-reverse": "flex-col-reverse"
|
|
103
|
+
},
|
|
104
|
+
wrap: {
|
|
105
|
+
nowrap: "flex-nowrap",
|
|
106
|
+
wrap: "flex-wrap",
|
|
107
|
+
"wrap-reverse": "flex-wrap-reverse"
|
|
108
|
+
},
|
|
109
|
+
gridFlow: {
|
|
110
|
+
row: "grid-flow-row",
|
|
111
|
+
col: "grid-flow-col",
|
|
112
|
+
dense: "grid-flow-dense",
|
|
113
|
+
"row-dense": "grid-flow-row-dense",
|
|
114
|
+
"col-dense": "grid-flow-col-dense"
|
|
115
|
+
},
|
|
116
|
+
listPosition: {
|
|
117
|
+
inside: "list-inside",
|
|
118
|
+
outside: "list-outside"
|
|
119
|
+
},
|
|
120
|
+
textAlign: {
|
|
121
|
+
left: "text-left",
|
|
122
|
+
center: "text-center",
|
|
123
|
+
right: "text-right",
|
|
124
|
+
justify: "text-justify",
|
|
125
|
+
start: "text-start",
|
|
126
|
+
end: "text-end"
|
|
127
|
+
},
|
|
128
|
+
self: {
|
|
129
|
+
start: "self-start",
|
|
130
|
+
end: "self-end",
|
|
131
|
+
center: "self-center",
|
|
132
|
+
stretch: "self-stretch",
|
|
133
|
+
auto: "self-auto",
|
|
134
|
+
"end-safe": "self-end-safe",
|
|
135
|
+
"center-safe": "self-center-safe",
|
|
136
|
+
baseline: "self-baseline",
|
|
137
|
+
"baseline-end": "self-baseline-end"
|
|
138
|
+
},
|
|
139
|
+
justifySelf: {
|
|
140
|
+
start: "justify-self-start",
|
|
141
|
+
end: "justify-self-end",
|
|
142
|
+
center: "justify-self-center",
|
|
143
|
+
stretch: "justify-self-stretch",
|
|
144
|
+
auto: "justify-self-auto",
|
|
145
|
+
"center-safe": "justify-self-center-safe",
|
|
146
|
+
"end-safe": "justify-self-end-safe"
|
|
147
|
+
},
|
|
148
|
+
placeSelf: {
|
|
149
|
+
start: "place-self-start",
|
|
150
|
+
end: "place-self-end",
|
|
151
|
+
center: "place-self-center",
|
|
152
|
+
stretch: "place-self-stretch",
|
|
153
|
+
auto: "place-self-auto",
|
|
154
|
+
"end-safe": "place-self-end-safe",
|
|
155
|
+
"center-safe": "place-self-center-safe"
|
|
156
|
+
},
|
|
157
|
+
items: {
|
|
158
|
+
start: "items-start",
|
|
159
|
+
end: "items-end",
|
|
160
|
+
center: "items-center",
|
|
161
|
+
stretch: "items-stretch",
|
|
162
|
+
"end-safe": "items-end-safe",
|
|
163
|
+
"center-safe": "items-center-safe",
|
|
164
|
+
baseline: "items-baseline",
|
|
165
|
+
"baseline-last": "items-baseline-last"
|
|
166
|
+
},
|
|
167
|
+
justifyItems: {
|
|
168
|
+
start: "justify-items-start",
|
|
169
|
+
end: "justify-items-end",
|
|
170
|
+
center: "justify-items-center",
|
|
171
|
+
stretch: "justify-items-stretch",
|
|
172
|
+
"end-safe": "justify-items-end-safe",
|
|
173
|
+
"center-safe": "justify-items-center-safe",
|
|
174
|
+
normal: "justify-items-normal"
|
|
175
|
+
},
|
|
176
|
+
placeItems: {
|
|
177
|
+
start: "place-items-start",
|
|
178
|
+
end: "place-items-end",
|
|
179
|
+
center: "place-items-center",
|
|
180
|
+
stretch: "place-items-stretch",
|
|
181
|
+
"end-safe": "place-items-end-safe",
|
|
182
|
+
"center-safe": "place-items-center-safe",
|
|
183
|
+
baseline: "place-items-baseline"
|
|
184
|
+
},
|
|
185
|
+
content: {
|
|
186
|
+
start: "content-start",
|
|
187
|
+
end: "content-end",
|
|
188
|
+
center: "content-center",
|
|
189
|
+
stretch: "content-stretch",
|
|
190
|
+
normal: "content-normal",
|
|
191
|
+
between: "content-between",
|
|
192
|
+
around: "content-around",
|
|
193
|
+
evenly: "content-evenly",
|
|
194
|
+
baseline: "content-baseline"
|
|
195
|
+
},
|
|
196
|
+
justify: {
|
|
197
|
+
start: "justify-start",
|
|
198
|
+
end: "justify-end",
|
|
199
|
+
center: "justify-center",
|
|
200
|
+
stretch: "justify-stretch",
|
|
201
|
+
"end-safe": "justify-end-safe",
|
|
202
|
+
"center-safe": "justify-center-safe",
|
|
203
|
+
between: "justify-between",
|
|
204
|
+
around: "justify-around",
|
|
205
|
+
evenly: "justify-evenly",
|
|
206
|
+
baseline: "justify-baseline",
|
|
207
|
+
normal: "justify-normal"
|
|
208
|
+
},
|
|
209
|
+
placeContent: {
|
|
210
|
+
start: "place-content-start",
|
|
211
|
+
end: "place-content-end",
|
|
212
|
+
center: "place-content-center",
|
|
213
|
+
stretch: "place-content-stretch",
|
|
214
|
+
"center-safe": "place-content-center-safe",
|
|
215
|
+
"end-safe": "place-content-end-safe",
|
|
216
|
+
between: "place-content-between",
|
|
217
|
+
around: "place-content-around",
|
|
218
|
+
evenly: "place-content-evenly",
|
|
219
|
+
baseline: "place-content-baseline"
|
|
220
|
+
},
|
|
221
|
+
textDecorationStyle: {
|
|
222
|
+
solid: "decoration-solid",
|
|
223
|
+
double: "decoration-double",
|
|
224
|
+
dotted: "decoration-dotted",
|
|
225
|
+
dashed: "decoration-dashed",
|
|
226
|
+
wavy: "decoration-wavy"
|
|
227
|
+
},
|
|
228
|
+
textWrap: {
|
|
229
|
+
wrap: "text-wrap",
|
|
230
|
+
nowrap: "text-nowrap",
|
|
231
|
+
balance: "text-balance",
|
|
232
|
+
pretty: "text-pretty"
|
|
233
|
+
},
|
|
234
|
+
whitespace: {
|
|
235
|
+
normal: "whitespace-normal",
|
|
236
|
+
nowrap: "whitespace-nowrap",
|
|
237
|
+
pre: "whitespace-pre",
|
|
238
|
+
"pre-line": "whitespace-pre-line",
|
|
239
|
+
"pre-wrap": "whitespace-pre-wrap",
|
|
240
|
+
"break-spaces": "whitespace-break-spaces"
|
|
241
|
+
},
|
|
242
|
+
wordbreak: {
|
|
243
|
+
normal: "break-normal",
|
|
244
|
+
all: "break-all",
|
|
245
|
+
keep: "break-keep"
|
|
246
|
+
},
|
|
247
|
+
overflowWrap: {
|
|
248
|
+
"break-word": "wrap-break-word",
|
|
249
|
+
anywhere: "wrap-anywhere",
|
|
250
|
+
normal: "wrap-normal"
|
|
251
|
+
},
|
|
252
|
+
hyphens: {
|
|
253
|
+
none: "hyphens-none",
|
|
254
|
+
manual: "hyphens-manual",
|
|
255
|
+
auto: "hyphens-auto"
|
|
256
|
+
},
|
|
257
|
+
bgAttachment: {
|
|
258
|
+
fixed: "bg-fixed",
|
|
259
|
+
local: "bg-local",
|
|
260
|
+
scroll: "bg-scroll"
|
|
261
|
+
},
|
|
262
|
+
bgClip: {
|
|
263
|
+
border: "bg-clip-border",
|
|
264
|
+
padding: "bg-clip-padding",
|
|
265
|
+
content: "bg-clip-content",
|
|
266
|
+
text: "bg-clip-text"
|
|
267
|
+
},
|
|
268
|
+
bgOrigin: {
|
|
269
|
+
border: "bg-origin-border",
|
|
270
|
+
padding: "bg-origin-padding",
|
|
271
|
+
content: "bg-origin-content"
|
|
272
|
+
},
|
|
273
|
+
bgRepeat: {
|
|
274
|
+
repeat: "bg-repeat",
|
|
275
|
+
"repeat-x": "bg-repeat-x",
|
|
276
|
+
"repeat-y": "bg-repeat-y",
|
|
277
|
+
"repeat-space": "bg-repeat-space",
|
|
278
|
+
"repeat-round": "bg-repeat-round",
|
|
279
|
+
"no-repeat": "bg-no-repeat"
|
|
280
|
+
},
|
|
281
|
+
borderStyle: {
|
|
282
|
+
solid: "border-solid",
|
|
283
|
+
dashed: "border-dashed",
|
|
284
|
+
dotted: "border-dotted",
|
|
285
|
+
double: "border-double",
|
|
286
|
+
hidden: "border-hidden",
|
|
287
|
+
none: "border-none"
|
|
288
|
+
},
|
|
289
|
+
divideStyle: {
|
|
290
|
+
solid: "divide-solid",
|
|
291
|
+
dashed: "divide-dashed",
|
|
292
|
+
dotted: "divide-dotted",
|
|
293
|
+
double: "divide-double",
|
|
294
|
+
hidden: "divide-hidden",
|
|
295
|
+
none: "divide-none"
|
|
296
|
+
},
|
|
297
|
+
outlineStyle: {
|
|
298
|
+
solid: "outline-solid",
|
|
299
|
+
dashed: "outline-dashed",
|
|
300
|
+
dotted: "outline-dotted",
|
|
301
|
+
double: "outline-double",
|
|
302
|
+
hidden: "outline-hidden",
|
|
303
|
+
none: "outline-none"
|
|
304
|
+
},
|
|
305
|
+
mixBlend: {
|
|
306
|
+
normal: "mix-blend-normal",
|
|
307
|
+
multiply: "mix-blend-multiply",
|
|
308
|
+
screen: "mix-blend-screen",
|
|
309
|
+
overlay: "mix-blend-overlay",
|
|
310
|
+
darken: "mix-blend-darken",
|
|
311
|
+
lighten: "mix-blend-lighten",
|
|
312
|
+
"color-dodge": "mix-blend-color-dodge",
|
|
313
|
+
"color-burn": "mix-blend-color-burn",
|
|
314
|
+
"hard-light": "mix-blend-hard-light",
|
|
315
|
+
"soft-light": "mix-blend-soft-light",
|
|
316
|
+
difference: "mix-blend-difference",
|
|
317
|
+
exclusion: "mix-blend-exclusion",
|
|
318
|
+
hue: "mix-blend-hue",
|
|
319
|
+
saturation: "mix-blend-saturation",
|
|
320
|
+
color: "mix-blend-color",
|
|
321
|
+
luminosity: "mix-blend-luminosity",
|
|
322
|
+
"plus-darker": "mix-blend-plus-darker",
|
|
323
|
+
"plus-lighter": "mix-blend-plus-lighter"
|
|
324
|
+
},
|
|
325
|
+
bgBlend: {
|
|
326
|
+
normal: "bg-blend-normal",
|
|
327
|
+
multiply: "bg-blend-multiply",
|
|
328
|
+
screen: "bg-blend-screen",
|
|
329
|
+
overlay: "bg-blend-overlay",
|
|
330
|
+
darken: "bg-blend-darken",
|
|
331
|
+
lighten: "bg-blend-lighten",
|
|
332
|
+
"color-dodge": "bg-blend-color-dodge",
|
|
333
|
+
"color-burn": "bg-blend-color-burn",
|
|
334
|
+
"hard-light": "bg-blend-hard-light",
|
|
335
|
+
"soft-light": "bg-blend-soft-light",
|
|
336
|
+
difference: "bg-blend-difference",
|
|
337
|
+
exclusion: "bg-blend-exclusion",
|
|
338
|
+
hue: "bg-blend-hue",
|
|
339
|
+
saturation: "bg-blend-saturation",
|
|
340
|
+
color: "bg-blend-color",
|
|
341
|
+
luminosity: "bg-blend-luminosity"
|
|
342
|
+
},
|
|
343
|
+
maskClip: {
|
|
344
|
+
border: "mask-clip-border",
|
|
345
|
+
padding: "mask-clip-padding",
|
|
346
|
+
content: "mask-clip-content",
|
|
347
|
+
fill: "mask-clip-fill",
|
|
348
|
+
stroke: "mask-clip-stroke",
|
|
349
|
+
view: "mask-clip-view",
|
|
350
|
+
"no-clip": "mask-no-clip"
|
|
351
|
+
},
|
|
352
|
+
maskComposite: {
|
|
353
|
+
add: "mask-add",
|
|
354
|
+
subtract: "mask-subtract",
|
|
355
|
+
intersect: "mask-intersect",
|
|
356
|
+
exclude: "mask-exclude"
|
|
357
|
+
},
|
|
358
|
+
maskRadialShape: {
|
|
359
|
+
circle: "mask-circle",
|
|
360
|
+
ellipse: "mask-ellipse"
|
|
361
|
+
},
|
|
362
|
+
maskRadialSpot: {
|
|
363
|
+
"closest-corner": "mask-radial-closest-corner",
|
|
364
|
+
"closest-side": "mask-radial-closest-side",
|
|
365
|
+
"farthest-corner": "mask-radial-farthest-corner",
|
|
366
|
+
"farthest-side": "mask-radial-farthest-side",
|
|
367
|
+
"at-top-left": "mask-radial-at-top-left",
|
|
368
|
+
"at-top": "mask-radial-at-top",
|
|
369
|
+
"at-top-right": "mask-radial-at-top-right",
|
|
370
|
+
"at-left": "mask-radial-at-left",
|
|
371
|
+
"at-center": "mask-radial-at-center",
|
|
372
|
+
"at-right": "mask-radial-at-right",
|
|
373
|
+
"at-bottom-left": "mask-radial-at-bottom-left",
|
|
374
|
+
"at-bottom": "mask-radial-at-bottom",
|
|
375
|
+
"at-bottom-right": "mask-radial-at-bottom-right"
|
|
376
|
+
},
|
|
377
|
+
maskMode: {
|
|
378
|
+
alpha: "mask-alpha",
|
|
379
|
+
luminance: "mask-luminance",
|
|
380
|
+
match: "mask-match"
|
|
381
|
+
},
|
|
382
|
+
maskOrigin: {
|
|
383
|
+
border: "mask-origin-border",
|
|
384
|
+
padding: "mask-origin-padding",
|
|
385
|
+
content: "mask-origin-content",
|
|
386
|
+
fill: "mask-origin-fill",
|
|
387
|
+
stroke: "mask-origin-stroke",
|
|
388
|
+
view: "mask-origin-view"
|
|
389
|
+
},
|
|
390
|
+
maskRepeat: {
|
|
391
|
+
repeat: "mask-repeat",
|
|
392
|
+
"repeat-x": "mask-repeat-x",
|
|
393
|
+
"repeat-y": "mask-repeat-y",
|
|
394
|
+
"repeat-space": "mask-repeat-space",
|
|
395
|
+
"repeat-round": "mask-repeat-round",
|
|
396
|
+
"no-repeat": "mask-no-repeat"
|
|
397
|
+
},
|
|
398
|
+
maskType: {
|
|
399
|
+
alpha: "mask-type-alpha",
|
|
400
|
+
luminance: "mask-type-luminance"
|
|
401
|
+
},
|
|
402
|
+
tableLayout: {
|
|
403
|
+
auto: "table-auto",
|
|
404
|
+
fixed: "table-fixed"
|
|
405
|
+
},
|
|
406
|
+
captionSide: {
|
|
407
|
+
top: "caption-top",
|
|
408
|
+
bottom: "caption-bottom"
|
|
409
|
+
},
|
|
410
|
+
transitionBehavior: {
|
|
411
|
+
normal: "transition-normal",
|
|
412
|
+
discrete: "transition-discrete"
|
|
413
|
+
},
|
|
414
|
+
backface: {
|
|
415
|
+
hidden: "backface-hidden",
|
|
416
|
+
visible: "backface-visible"
|
|
417
|
+
},
|
|
418
|
+
transformStyle: {
|
|
419
|
+
"3d": "transform-3d",
|
|
420
|
+
flat: "transform-flat"
|
|
421
|
+
},
|
|
422
|
+
appearance: {
|
|
423
|
+
none: "appearance-none",
|
|
424
|
+
auto: "appearance-auto"
|
|
425
|
+
},
|
|
426
|
+
colorScheme: {
|
|
427
|
+
normal: "scheme-normal",
|
|
428
|
+
dark: "scheme-dark",
|
|
429
|
+
light: "scheme-light",
|
|
430
|
+
"light-dark": "scheme-light-dark",
|
|
431
|
+
"only-dark": "scheme-only-dark",
|
|
432
|
+
"only-light": "scheme-only-light"
|
|
433
|
+
},
|
|
434
|
+
fieldSizing: {
|
|
435
|
+
fixed: "field-sizing-fixed",
|
|
436
|
+
content: "field-sizing-content"
|
|
437
|
+
},
|
|
438
|
+
pointerEvents: {
|
|
439
|
+
auto: "pointer-events-auto",
|
|
440
|
+
none: "pointer-events-none"
|
|
441
|
+
},
|
|
442
|
+
resize: {
|
|
443
|
+
both: "resize",
|
|
444
|
+
x: "resize-x",
|
|
445
|
+
y: "resize-y",
|
|
446
|
+
none: "resize-none"
|
|
447
|
+
},
|
|
448
|
+
scrollBehavior: {
|
|
449
|
+
auto: "scroll-auto",
|
|
450
|
+
smooth: "scroll-smooth"
|
|
451
|
+
},
|
|
452
|
+
scrollbarWidth: {
|
|
453
|
+
auto: "scrollbar-auto",
|
|
454
|
+
thin: "scrollbar-thin",
|
|
455
|
+
none: "scrollbar-none"
|
|
456
|
+
},
|
|
457
|
+
scrollbarGutter: {
|
|
458
|
+
auto: "scrollbar-gutter-auto",
|
|
459
|
+
stable: "scrollbar-gutter-stable",
|
|
460
|
+
both: "scrollbar-gutter-both"
|
|
461
|
+
},
|
|
462
|
+
scrollSnapAlign: {
|
|
463
|
+
start: "snap-start",
|
|
464
|
+
end: "snap-end",
|
|
465
|
+
center: "snap-center",
|
|
466
|
+
none: "snap-align-none"
|
|
467
|
+
},
|
|
468
|
+
scrollSnapStop: {
|
|
469
|
+
normal: "snap-normal",
|
|
470
|
+
always: "snap-always"
|
|
471
|
+
},
|
|
472
|
+
scrollSnapType: {
|
|
473
|
+
x: "snap-x",
|
|
474
|
+
y: "snap-y",
|
|
475
|
+
both: "snap-both",
|
|
476
|
+
mandatory: "snap-mandatory",
|
|
477
|
+
proximity: "snap-proximity",
|
|
478
|
+
none: "snap-none"
|
|
479
|
+
},
|
|
480
|
+
touchAction: {
|
|
481
|
+
auto: "touch-auto",
|
|
482
|
+
"pan-x": "touch-pan-x",
|
|
483
|
+
"pan-left": "touch-pan-left",
|
|
484
|
+
"pan-right": "touch-pan-right",
|
|
485
|
+
"pan-y": "touch-pan-y",
|
|
486
|
+
"pan-up": "touch-pan-up",
|
|
487
|
+
"pan-down": "touch-pan-down",
|
|
488
|
+
"pinch-zoom": "touch-pinch-zoom",
|
|
489
|
+
manipulation: "touch-manipulation",
|
|
490
|
+
none: "touch-none"
|
|
491
|
+
},
|
|
492
|
+
userSelect: {
|
|
493
|
+
none: "select-none",
|
|
494
|
+
text: "select-text",
|
|
495
|
+
all: "select-all",
|
|
496
|
+
auto: "select-auto"
|
|
497
|
+
},
|
|
498
|
+
forceAdjustColor: {
|
|
499
|
+
auto: "forced-color-adjust-auto",
|
|
500
|
+
none: "forced-color-adjust-none"
|
|
501
|
+
}
|
|
502
|
+
};
|
|
503
|
+
const _ = Symbol("placeholder");
|
|
504
|
+
//#endregion
|
|
505
|
+
//#region src/utils/cn.ts
|
|
506
|
+
function cn(...inputs) {
|
|
507
|
+
return twMerge(clsx(inputs));
|
|
508
|
+
}
|
|
509
|
+
//#endregion
|
|
510
|
+
//#region src/utils/resolve-prop.ts
|
|
511
|
+
function resolveProp(cssVars, key, value, twPrefix, varPrefix) {
|
|
512
|
+
if (!value) return;
|
|
513
|
+
if (value.startsWith("$") || value.startsWith("@")) {
|
|
514
|
+
const varName = `--see-${key}`;
|
|
515
|
+
const rawValue = value.slice(1);
|
|
516
|
+
cssVars[varName] = value.startsWith("@") ? `calc(var(--spacing) * ${rawValue})` : rawValue;
|
|
517
|
+
return `${twPrefix}-(${varPrefix ? `${varPrefix}:` : ""}${varName})`;
|
|
518
|
+
}
|
|
519
|
+
if (value.startsWith("-")) return `-${twPrefix}-${value.slice(1)}`;
|
|
520
|
+
return `${twPrefix}-${value}`;
|
|
521
|
+
}
|
|
522
|
+
//#endregion
|
|
523
|
+
//#region src/utils/resolve-tupled-prop.ts
|
|
524
|
+
function resolveTupledProp(preset, cssVars, key, value) {
|
|
525
|
+
if (value === void 0) return;
|
|
526
|
+
switch (preset) {
|
|
527
|
+
case "outline":
|
|
528
|
+
if (typeof value === "string") return resolveProp(cssVars, key, value, key, "length");
|
|
529
|
+
if (Array.isArray(value)) {
|
|
530
|
+
const [width, color] = value;
|
|
531
|
+
return [width === _ ? "border" : resolveProp(cssVars, key, width, key, "length"), resolveProp(cssVars, `${key}-color`, color, key)];
|
|
532
|
+
}
|
|
533
|
+
return;
|
|
534
|
+
}
|
|
535
|
+
}
|
|
536
|
+
//#endregion
|
|
537
|
+
//#region src/components/view/index.ts
|
|
538
|
+
const BG_POSITIONS = [
|
|
539
|
+
"top-left",
|
|
540
|
+
"top",
|
|
541
|
+
"top-right",
|
|
542
|
+
"left",
|
|
543
|
+
"center",
|
|
544
|
+
"right",
|
|
545
|
+
"bottom-left",
|
|
546
|
+
"bottom",
|
|
547
|
+
"bottom-right"
|
|
548
|
+
];
|
|
549
|
+
const BG_SIZES = [
|
|
550
|
+
"auto",
|
|
551
|
+
"cover",
|
|
552
|
+
"contain"
|
|
553
|
+
];
|
|
554
|
+
function View(props) {
|
|
555
|
+
const { as, className, style, aspect, columns, breakAfter, breakBefore, breakInside, boxDecoration, box, display = "flex", float, clear, isolate, autoIsolate, objectFit, object, overflow, overflowX, overflowY, overscroll, overscrollX, overscrollY, hideScrollBar, position = "relative", inset, insetX, insetY, start, end, top, right, bottom, left, visibility, z, basis, flexDirection, wrap, flex, grow, shrink, order, gridCols, gridRows, col, colSpan, colStart, colEnd, row, rowSpan, rowStart, rowEnd, gridFlow, autoCols, autoRows, gap, gapX, gapY, self, items, content, justifySelf, justifyItems, justify, placeSelf, placeItems, placeContent, p, px, py, ps, pe, pt, pr, pb, pl, m, mx, my, ms, me, mt, mr, mb, ml, spaceX, spaceY, spaceXReverse, spaceYReverse, size, w, minW, maxW, h, minH, maxH, fontFamily, fontSize, fontSmoothing, fontStyle, fontWeight, fontStretch, fontVariantNumeric, letterSpacing, lineClamp, lineHeight, listImage, listPosition, list, textAlign, text, textDecoration, textTransform, textOverflow, textWrap, textIndent, verticalAlign, whitespace, wordbreak, overflowWrap, hyphens, bgAttachment, bgClip, bgColor, bgImage, bgLinear, bgRadial, bgConic, gradient, bgOrigin, bgPosition, bgRepeat, bgSize, rounded, border, borderColor, borderStyle, divideX, divideY, divideColor, divideStyle, divideXReverse, divideYReverse, outline, outlineColor, outlineStyle, outlineOffset, shadow, shadowColor, insetShadow, insetShadowColor, ring, ringColor, insetRing, insetRingColor, textShadow, textShadowColor, opacity, mixBlend, bgBlend, maskClip, maskComposite, maskImage, maskLinear, maskLinearFrom, maskLinearTo, maskTopFrom, maskTopTo, maskRightFrom, maskRightTo, maskBottomFrom, maskBottomTo, maskLeftFrom, maskLeftTo, maskXFrom, maskXTo, maskYFrom, maskYTo, maskRadial, maskRadialFrom, maskRadialTo, maskRadialShape, maskRadialSpot, maskConic, maskConicFrom, maskConicTo, maskMode, maskOrigin, maskPosition, maskRepeat, maskSize, maskType, filter, blur, brightness, contrast, dropShadow, dropShadowColor, grayscale, hueRotate, invert, saturate, sepia, backdropFilter, backdropBlur, backdropBrightness, backdropContrast, backdropGrayscale, backdropHueRotate, backdropInvert, backdropOpacity, backdropSaturate, backdropSepia, borderCollapse, borderSeparate, borderSpacing, borderXSpacing, borderYSpacing, tableLayout, captionSide, transition, animate, backface, perspective, perspectiveOrigin, rotate, rotateX, rotateY, rotateZ, scale, scaleX, scaleY, scaleZ, skew, skewX, skewY, transform, transformOrigin, transformStyle, transformTranslate, transformTranslateX, transformTranslateY, transformTranslateZ, accentColor, appearance, caretColor, colorScheme, cursor, fieldSizing, pointerEvents, resize, scrollBehavior, scrollbar, scrollMargin, scrollMarginX, scrollMarginY, scrollMarginS, scrollMarginE, scrollMarginT, scrollMarginR, scrollMarginB, scrollMarginL, scrollPadding, scrollPaddingX, scrollPaddingY, scrollPaddingS, scrollPaddingE, scrollPaddingT, scrollPaddingR, scrollPaddingB, scrollPaddingL, scrollSnapAlign, scrollSnapStop, scrollSnapType, touchAction, userSelect, willChange, fill, strokefill, stroke, forceAdjustColor, ...rest } = props;
|
|
556
|
+
const cssVars = {};
|
|
557
|
+
const classes = cn(resolveProp(cssVars, "aspect", aspect, "aspect"), resolveProp(cssVars, "columns", columns, "columns"), breakAfter && classMaps.breakAfter[breakAfter], breakBefore && classMaps.breakBefore[breakBefore], breakInside && classMaps.breakInside[breakInside], boxDecoration && classMaps.boxDecoration[boxDecoration], box && classMaps.box[box], display, float && classMaps.float[float], clear && classMaps.clear[clear], isolate && "isolate", autoIsolate && "isolation-auto", objectFit && classMaps.objectFit[objectFit], resolveProp(cssVars, "object", object, "object"), overflow && classMaps.overflow[overflow], overflowX && classMaps.overflowX[overflowX], overflowY && classMaps.overflowY[overflowY], overscroll && classMaps.overscroll[overscroll], overscrollX && classMaps.overscrollX[overscrollX], overscrollY && classMaps.overscrollY[overscrollY], hideScrollBar && "[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]", position, resolveProp(cssVars, "inset", inset, "inset"), resolveProp(cssVars, "inset-x", insetX, "inset-x"), resolveProp(cssVars, "inset-y", insetY, "inset-y"), resolveProp(cssVars, "start", start, "start"), resolveProp(cssVars, "end", end, "end"), resolveProp(cssVars, "top", top, "top"), resolveProp(cssVars, "right", right, "right"), resolveProp(cssVars, "bottom", bottom, "bottom"), resolveProp(cssVars, "left", left, "left"), visibility, resolveProp(cssVars, "z", z, "z"), resolveProp(cssVars, "basis", basis, "basis"), flexDirection && classMaps.flexDirection[flexDirection], wrap && classMaps.wrap[wrap], resolveProp(cssVars, "flex", flex, "flex"), grow && (typeof grow === "string" ? resolveProp(cssVars, "grow", grow, "grow") : "grow"), shrink && (typeof shrink === "string" ? resolveProp(cssVars, "shrink", shrink, "shrink") : "shrink"), resolveProp(cssVars, "order", order, "order"), resolveProp(cssVars, "grid-cols", gridCols, "grid-cols"), resolveProp(cssVars, "grid-rows", gridRows, "grid-rows"), resolveProp(cssVars, "col", col, "col"), resolveProp(cssVars, "col-span", colSpan, "col-span"), resolveProp(cssVars, "col-start", colStart, "col-start"), resolveProp(cssVars, "col-end", colEnd, "col-end"), resolveProp(cssVars, "row", row, "row"), resolveProp(cssVars, "row-span", rowSpan, "row-span"), resolveProp(cssVars, "row-start", rowStart, "row-start"), resolveProp(cssVars, "row-end", rowEnd, "row-end"), gridFlow && classMaps.gridFlow[gridFlow], resolveProp(cssVars, "auto-cols", autoCols, "auto-cols"), resolveProp(cssVars, "auto-rows", autoRows, "auto-rows"), resolveProp(cssVars, "gap", gap, "gap"), resolveProp(cssVars, "gap-x", gapX, "gap-x"), resolveProp(cssVars, "gap-y", gapY, "gap-y"), self && classMaps.self[self], items && classMaps.items[items], content && classMaps.content[content], justifySelf && classMaps.justifySelf[justifySelf], justifyItems && classMaps.justifyItems[justifyItems], justify && classMaps.justify[justify], placeSelf && classMaps.placeSelf[placeSelf], placeItems && classMaps.placeItems[placeItems], placeContent && classMaps.placeContent[placeContent], resolveProp(cssVars, "p", p, "p"), resolveProp(cssVars, "px", px, "px"), resolveProp(cssVars, "py", py, "py"), resolveProp(cssVars, "ps", ps, "ps"), resolveProp(cssVars, "pe", pe, "pe"), resolveProp(cssVars, "pt", pt, "pt"), resolveProp(cssVars, "pr", pr, "pr"), resolveProp(cssVars, "pb", pb, "pb"), resolveProp(cssVars, "pl", pl, "pl"), resolveProp(cssVars, "m", m, "m"), resolveProp(cssVars, "mx", mx, "mx"), resolveProp(cssVars, "my", my, "my"), resolveProp(cssVars, "ms", ms, "ms"), resolveProp(cssVars, "me", me, "me"), resolveProp(cssVars, "mt", mt, "mt"), resolveProp(cssVars, "mr", mr, "mr"), resolveProp(cssVars, "mb", mb, "mb"), resolveProp(cssVars, "ml", ml, "ml"), resolveProp(cssVars, "space-x", spaceX, "space-x"), resolveProp(cssVars, "space-y", spaceY, "space-y"), spaceXReverse && "space-x-reverse", spaceYReverse && "space-y-reverse", resolveProp(cssVars, "size", size, "size"), resolveProp(cssVars, "w", w, "w"), resolveProp(cssVars, "min-w", minW, "min-w"), resolveProp(cssVars, "max-w", maxW, "max-w"), resolveProp(cssVars, "h", h, "h"), resolveProp(cssVars, "min-h", minH, "min-h"), resolveProp(cssVars, "max-h", maxH, "max-h"), resolveProp(cssVars, "font-family", fontFamily, "font", "family-name"), resolveProp(cssVars, "font-size", fontSize, "text", "length"), fontSmoothing, fontStyle, resolveProp(cssVars, "font-weight", fontWeight, "font"), resolveProp(cssVars, "font-stretch", fontStretch, "font-stretch"), fontVariantNumeric, resolveProp(cssVars, "letter-spacing", letterSpacing, "tracking"), resolveProp(cssVars, "line-clamp", lineClamp, "line-clamp"), resolveProp(cssVars, "line-height", lineHeight, "leading"), resolveProp(cssVars, "list-image", listImage, "list-image"), listPosition && classMaps.listPosition[listPosition], resolveProp(cssVars, "list", list, "list"), textAlign && classMaps.textAlign[textAlign], resolveProp(cssVars, "text", text, "text"), textDecoration?.line, resolveProp(cssVars, "decoration", textDecoration?.color, "decoration"), textDecoration?.style && classMaps.textDecorationStyle[textDecoration.style], resolveProp(cssVars, "decoration-thickness", textDecoration?.thickness, "decoration", "length"), resolveProp(cssVars, "underline-offset", textDecoration?.underlineOffset, "underline-offset"), textTransform, textOverflow, textWrap && classMaps.textWrap[textWrap], resolveProp(cssVars, "text-indent", textIndent, "indent"), resolveProp(cssVars, "vertical-align", verticalAlign, "align"), whitespace && classMaps.whitespace[whitespace], wordbreak && classMaps.wordbreak[wordbreak], overflowWrap && classMaps.overflowWrap[overflowWrap], hyphens && classMaps.hyphens[hyphens], bgAttachment && classMaps.bgAttachment[bgAttachment], bgClip && classMaps.bgClip[bgClip], resolveProp(cssVars, "bg-color", bgColor, "bg"), resolveProp(cssVars, "bg-image", bgImage, "bg", "image"), resolveProp(cssVars, "bg-linear", bgLinear, "bg-linear"), bgRadial && (typeof bgRadial === "string" ? resolveProp(cssVars, "bg-radial", bgRadial, "bg-radial") : "bg-radial"), resolveProp(cssVars, "bg-conic", bgConic, "bg-conic"), resolveProp(cssVars, "from", gradient?.from, "from"), resolveProp(cssVars, "via", gradient?.via, "via"), resolveProp(cssVars, "to", gradient?.to, "to"), bgOrigin && classMaps.bgOrigin[bgOrigin], bgPosition && resolveProp(cssVars, "bg-position", bgPosition, BG_POSITIONS.includes(bgPosition) ? "bg" : "bg-position"), bgRepeat && classMaps.bgRepeat[bgRepeat], bgSize && resolveProp(cssVars, "bg-size", bgSize, BG_SIZES.includes(bgSize) ? "bg" : "bg-size"), typeof rounded === "string" ? resolveProp(cssVars, "rounded", rounded, "rounded") : [
|
|
558
|
+
resolveProp(cssVars, "rounded-s", rounded?.s, "rounded-s"),
|
|
559
|
+
resolveProp(cssVars, "rounded-e", rounded?.e, "rounded-e"),
|
|
560
|
+
resolveProp(cssVars, "rounded-t", rounded?.t, "rounded-t"),
|
|
561
|
+
resolveProp(cssVars, "rounded-r", rounded?.r, "rounded-r"),
|
|
562
|
+
resolveProp(cssVars, "rounded-b", rounded?.b, "rounded-b"),
|
|
563
|
+
resolveProp(cssVars, "rounded-l", rounded?.l, "rounded-l"),
|
|
564
|
+
resolveProp(cssVars, "rounded-ss", rounded?.ss, "rounded-ss"),
|
|
565
|
+
resolveProp(cssVars, "rounded-se", rounded?.se, "rounded-se"),
|
|
566
|
+
resolveProp(cssVars, "rounded-ee", rounded?.ee, "rounded-ee"),
|
|
567
|
+
resolveProp(cssVars, "rounded-es", rounded?.es, "rounded-es"),
|
|
568
|
+
resolveProp(cssVars, "rounded-tl", rounded?.tl, "rounded-tl"),
|
|
569
|
+
resolveProp(cssVars, "rounded-tr", rounded?.tr, "rounded-tr"),
|
|
570
|
+
resolveProp(cssVars, "rounded-br", rounded?.br, "rounded-br"),
|
|
571
|
+
resolveProp(cssVars, "rounded-bl", rounded?.bl, "rounded-bl")
|
|
572
|
+
], typeof border === "boolean" ? [
|
|
573
|
+
border && "border",
|
|
574
|
+
resolveProp(cssVars, "border-color", borderColor, "border"),
|
|
575
|
+
borderStyle && classMaps.borderStyle[borderStyle]
|
|
576
|
+
] : typeof border === "string" || Array.isArray(border) ? [
|
|
577
|
+
resolveTupledProp("outline", cssVars, "border", border),
|
|
578
|
+
typeof border === "string" && resolveProp(cssVars, "border-color", borderColor, "border"),
|
|
579
|
+
borderStyle && classMaps.borderStyle[borderStyle]
|
|
580
|
+
] : [
|
|
581
|
+
border?.width ? resolveProp(cssVars, "border", border.width, "border", "length") : "border",
|
|
582
|
+
resolveProp(cssVars, "border-color", border?.color, "border"),
|
|
583
|
+
border?.style && classMaps.borderStyle[border.style],
|
|
584
|
+
resolveTupledProp("outline", cssVars, "border-x", border?.x),
|
|
585
|
+
resolveTupledProp("outline", cssVars, "border-y", border?.y),
|
|
586
|
+
resolveTupledProp("outline", cssVars, "border-s", border?.s),
|
|
587
|
+
resolveTupledProp("outline", cssVars, "border-e", border?.e),
|
|
588
|
+
resolveTupledProp("outline", cssVars, "border-t", border?.t),
|
|
589
|
+
resolveTupledProp("outline", cssVars, "border-r", border?.r),
|
|
590
|
+
resolveTupledProp("outline", cssVars, "border-b", border?.b),
|
|
591
|
+
resolveTupledProp("outline", cssVars, "border-l", border?.l)
|
|
592
|
+
], resolveProp(cssVars, "divide-x", divideX, "divide-x", "length"), resolveProp(cssVars, "divide-y", divideY, "divide-y", "length"), resolveProp(cssVars, "divide-color", divideColor, "divide"), divideStyle && classMaps.divideStyle[divideStyle], divideXReverse && "divide-x-reverse", divideYReverse && "divide-y-reverse", typeof outline === "boolean" ? [
|
|
593
|
+
outline && "outline",
|
|
594
|
+
resolveProp(cssVars, "outline-color", outlineColor, "outline"),
|
|
595
|
+
outlineStyle && classMaps.outlineStyle[outlineStyle],
|
|
596
|
+
resolveProp(cssVars, "outline-offset", outlineOffset, "outline-offset")
|
|
597
|
+
] : typeof outline === "string" || Array.isArray(outline) ? [
|
|
598
|
+
resolveTupledProp("outline", cssVars, "outline", outline),
|
|
599
|
+
typeof outline === "string" && resolveProp(cssVars, "outline-color", outlineColor, "outline"),
|
|
600
|
+
outlineStyle && classMaps.outlineStyle[outlineStyle],
|
|
601
|
+
resolveProp(cssVars, "outline-offset", outlineOffset, "outline-offset")
|
|
602
|
+
] : [
|
|
603
|
+
resolveProp(cssVars, "outline", outline?.width, "outline", "length"),
|
|
604
|
+
resolveProp(cssVars, "outline-color", outline?.color, "outline"),
|
|
605
|
+
outline?.style && classMaps.outlineStyle[outline.style],
|
|
606
|
+
resolveProp(cssVars, "outline-offset", outline?.offset, "outline-offset")
|
|
607
|
+
], resolveProp(cssVars, "shadow", shadow, "shadow"), resolveProp(cssVars, "shadow-color", shadowColor, "shadow", "color"), resolveProp(cssVars, "inset-shadow", insetShadow, "inset-shadow"), resolveProp(cssVars, "inset-shadow-color", insetShadowColor, "inset-shadow"), ring && (typeof ring === "string" ? resolveProp(cssVars, "ring", ring, "ring") : "ring"), resolveProp(cssVars, "ring-color", ringColor, "ring"), insetRing && (typeof insetRing === "string" ? resolveProp(cssVars, "inset-ring", insetRing, "inset-ring") : "inset-ring"), resolveProp(cssVars, "inset-ring-color", insetRingColor, "inset-ring"), resolveProp(cssVars, "text-shadow", textShadow, "text-shadow"), resolveProp(cssVars, "text-shadow-color", textShadowColor, "text-shadow", "color"), resolveProp(cssVars, "opacity", opacity, "opacity"), mixBlend && classMaps.mixBlend[mixBlend], bgBlend && classMaps.bgBlend[bgBlend], maskClip && classMaps.maskClip[maskClip], maskComposite && classMaps.maskComposite[maskComposite], resolveProp(cssVars, "mask-image", maskImage, "mask"), resolveProp(cssVars, "mask-linear", maskLinear, "mask-linear"), resolveProp(cssVars, "mask-linear-from", maskLinearFrom, "mask-linear-from"), resolveProp(cssVars, "mask-linear-to", maskLinearTo, "mask-linear-to"), resolveProp(cssVars, "mask-top-from", maskTopFrom, "mask-t-from"), resolveProp(cssVars, "mask-top-to", maskTopTo, "mask-t-to"), resolveProp(cssVars, "mask-right-from", maskRightFrom, "mask-r-from"), resolveProp(cssVars, "mask-right-to", maskRightTo, "mask-r-to"), resolveProp(cssVars, "mask-bottom-from", maskBottomFrom, "mask-b-from"), resolveProp(cssVars, "mask-bottom-to", maskBottomTo, "mask-b-to"), resolveProp(cssVars, "mask-left-from", maskLeftFrom, "mask-l-from"), resolveProp(cssVars, "mask-left-to", maskLeftTo, "mask-l-to"), resolveProp(cssVars, "mask-x-from", maskXFrom, "mask-x-from"), resolveProp(cssVars, "mask-x-to", maskXTo, "mask-x-to"), resolveProp(cssVars, "mask-y-from", maskYFrom, "mask-y-from"), resolveProp(cssVars, "mask-y-to", maskYTo, "mask-y-to"), resolveProp(cssVars, "mask-radial", maskRadial, "mask-radial"), resolveProp(cssVars, "mask-radial-from", maskRadialFrom, "mask-radial-from"), resolveProp(cssVars, "mask-radial-to", maskRadialTo, "mask-radial-to"), maskRadialShape && classMaps.maskRadialShape[maskRadialShape], maskRadialSpot && classMaps.maskRadialSpot[maskRadialSpot], resolveProp(cssVars, "mask-conic", maskConic, "mask-conic"), resolveProp(cssVars, "mask-conic-from", maskConicFrom, "mask-conic-from"), resolveProp(cssVars, "mask-conic-to", maskConicTo, "mask-conic-to"), maskMode && classMaps.maskMode[maskMode], maskOrigin && classMaps.maskOrigin[maskOrigin], maskPosition && resolveProp(cssVars, "mask-position", maskPosition, BG_POSITIONS.includes(maskPosition) ? "mask" : "mask-position"), maskRepeat && classMaps.maskRepeat[maskRepeat], maskSize && resolveProp(cssVars, "mask-size", maskSize, BG_SIZES.includes(maskSize) ? "mask" : "mask-size"), maskType && classMaps.maskType[maskType], resolveProp(cssVars, "filter", filter, "filter"), resolveProp(cssVars, "blur", blur, "blur"), resolveProp(cssVars, "brightness", brightness, "brightness"), resolveProp(cssVars, "contrast", contrast, "contrast"), resolveProp(cssVars, "drop-shadow", dropShadow, "drop-shadow"), resolveProp(cssVars, "drop-shadow-color", dropShadowColor, "drop-shadow", "color"), typeof grayscale === "boolean" ? grayscale && "grayscale" : resolveProp(cssVars, "grayscale", grayscale, "grayscale"), resolveProp(cssVars, "hue-rotate", hueRotate, "hue-rotate"), typeof invert === "boolean" ? invert && "invert" : resolveProp(cssVars, "invert", invert, "invert"), resolveProp(cssVars, "saturate", saturate, "saturate"), typeof sepia === "boolean" ? sepia && "sepia" : resolveProp(cssVars, "sepia", sepia, "sepia"), resolveProp(cssVars, "backdrop-filter", backdropFilter, "backdrop-filter"), resolveProp(cssVars, "backdrop-blur", backdropBlur, "backdrop-blur"), resolveProp(cssVars, "backdrop-brightness", backdropBrightness, "backdrop-brightness"), resolveProp(cssVars, "backdrop-contrast", backdropContrast, "backdrop-contrast"), typeof backdropGrayscale === "boolean" ? backdropGrayscale && "backdrop-grayscale" : resolveProp(cssVars, "backdrop-grayscale", backdropGrayscale, "backdrop-grayscale"), resolveProp(cssVars, "backdrop-hue-rotate", backdropHueRotate, "backdrop-hue-rotate"), typeof backdropInvert === "boolean" ? backdropInvert && "backdrop-invert" : resolveProp(cssVars, "backdrop-invert", backdropInvert, "backdrop-invert"), resolveProp(cssVars, "backdrop-opacity", backdropOpacity, "backdrop-opacity"), resolveProp(cssVars, "backdrop-saturate", backdropSaturate, "backdrop-saturate"), typeof backdropSepia === "boolean" ? backdropSepia && "backdrop-sepia" : resolveProp(cssVars, "backdrop-sepia", backdropSepia, "backdrop-sepia"), borderCollapse && "border-collapse", borderSeparate && "border-separate", resolveProp(cssVars, "border-spacing", borderSpacing, "border-spacing"), resolveProp(cssVars, "border-x-spacing", borderXSpacing, "border-spacing-x"), resolveProp(cssVars, "border-y-spacing", borderYSpacing, "border-spacing-y"), tableLayout && classMaps.tableLayout[tableLayout], captionSide && classMaps.captionSide[captionSide], typeof transition === "boolean" ? transition && "transition" : typeof transition === "string" ? resolveProp(cssVars, "transition", transition, "transition") : [
|
|
608
|
+
resolveProp(cssVars, "transition", transition?.property, "transition"),
|
|
609
|
+
transition?.behavior && classMaps.transitionBehavior[transition.behavior],
|
|
610
|
+
resolveProp(cssVars, "transition-duration", transition?.duration, "duration"),
|
|
611
|
+
resolveProp(cssVars, "transition-function", transition?.function, "ease"),
|
|
612
|
+
resolveProp(cssVars, "transition-delay", transition?.delay, "delay")
|
|
613
|
+
], resolveProp(cssVars, "animate", animate, "animate"), backface && classMaps.backface[backface], resolveProp(cssVars, "perspective", perspective, "perspective"), resolveProp(cssVars, "perspective-origin", perspectiveOrigin, "perspective-origin"), resolveProp(cssVars, "rotate", rotate, "rotate"), resolveProp(cssVars, "rotate-x", rotateX, "rotate-x"), resolveProp(cssVars, "rotate-y", rotateY, "rotate-y"), resolveProp(cssVars, "rotate-z", rotateZ, "rotate-z"), resolveProp(cssVars, "scale", scale, "scale"), resolveProp(cssVars, "scale-x", scaleX, "scale-x"), resolveProp(cssVars, "scale-y", scaleY, "scale-y"), resolveProp(cssVars, "scale-z", scaleZ, "scale-z"), resolveProp(cssVars, "skew", skew, "skew"), resolveProp(cssVars, "skew-x", skewX, "skew-x"), resolveProp(cssVars, "skew-y", skewY, "skew-y"), resolveProp(cssVars, "transform", transform, "transform"), resolveProp(cssVars, "transform-origin", transformOrigin, "origin"), transformStyle && classMaps.transformStyle[transformStyle], resolveProp(cssVars, "transform-translate", transformTranslate, "translate"), resolveProp(cssVars, "transform-translate-x", transformTranslateX, "translate-x"), resolveProp(cssVars, "transform-translate-y", transformTranslateY, "translate-y"), resolveProp(cssVars, "transform-translate-z", transformTranslateZ, "translate-z"), resolveProp(cssVars, "accent-color", accentColor, "accent"), appearance && classMaps.appearance[appearance], resolveProp(cssVars, "caret-color", caretColor, "caret"), colorScheme && classMaps.colorScheme[colorScheme], resolveProp(cssVars, "cursor", cursor, "cursor"), fieldSizing && classMaps.fieldSizing[fieldSizing], pointerEvents && classMaps.pointerEvents[pointerEvents], resize && classMaps.resize[resize], scrollBehavior && classMaps.scrollBehavior[scrollBehavior], resolveProp(cssVars, "scrollbar-thumb", scrollbar?.color?.thumb, "scrollbar-thumb"), resolveProp(cssVars, "scrollbar-track", scrollbar?.color?.track, "scrollbar-track"), scrollbar?.width && classMaps.scrollbarWidth[scrollbar.width], scrollbar?.gutter && classMaps.scrollbarGutter[scrollbar.gutter], resolveProp(cssVars, "scroll-margin", scrollMargin, "scroll-m"), resolveProp(cssVars, "scroll-margin-x", scrollMarginX, "scroll-mx"), resolveProp(cssVars, "scroll-margin-y", scrollMarginY, "scroll-my"), resolveProp(cssVars, "scroll-margin-s", scrollMarginS, "scroll-ms"), resolveProp(cssVars, "scroll-margin-e", scrollMarginE, "scroll-me"), resolveProp(cssVars, "scroll-margin-t", scrollMarginT, "scroll-mt"), resolveProp(cssVars, "scroll-margin-r", scrollMarginR, "scroll-mr"), resolveProp(cssVars, "scroll-margin-b", scrollMarginB, "scroll-mb"), resolveProp(cssVars, "scroll-margin-l", scrollMarginL, "scroll-ml"), resolveProp(cssVars, "scroll-padding", scrollPadding, "scroll-p"), resolveProp(cssVars, "scroll-padding-x", scrollPaddingX, "scroll-px"), resolveProp(cssVars, "scroll-padding-y", scrollPaddingY, "scroll-py"), resolveProp(cssVars, "scroll-padding-s", scrollPaddingS, "scroll-ps"), resolveProp(cssVars, "scroll-padding-e", scrollPaddingE, "scroll-pe"), resolveProp(cssVars, "scroll-padding-t", scrollPaddingT, "scroll-pt"), resolveProp(cssVars, "scroll-padding-r", scrollPaddingR, "scroll-pr"), resolveProp(cssVars, "scroll-padding-b", scrollPaddingB, "scroll-pb"), resolveProp(cssVars, "scroll-padding-l", scrollPaddingL, "scroll-pl"), scrollSnapAlign && classMaps.scrollSnapAlign[scrollSnapAlign], scrollSnapStop && classMaps.scrollSnapStop[scrollSnapStop], scrollSnapType && classMaps.scrollSnapType[scrollSnapType], touchAction && classMaps.touchAction[touchAction], userSelect && classMaps.userSelect[userSelect], resolveProp(cssVars, "will-change", willChange, "will-change"), resolveProp(cssVars, "fill", fill, "fill"), resolveProp(cssVars, "strokefill", strokefill, "stroke"), resolveProp(cssVars, "stroke", stroke, "stroke", "length"), forceAdjustColor && classMaps.forceAdjustColor[forceAdjustColor], className);
|
|
614
|
+
const styles = {
|
|
615
|
+
...style,
|
|
616
|
+
...cssVars
|
|
617
|
+
};
|
|
618
|
+
const componentType = as ?? "div";
|
|
619
|
+
const componentProps = {
|
|
620
|
+
className: classes,
|
|
621
|
+
style: styles,
|
|
622
|
+
...rest
|
|
623
|
+
};
|
|
624
|
+
return createElement(componentType, componentProps);
|
|
625
|
+
}
|
|
626
|
+
//#endregion
|
|
627
|
+
export { View, _ };
|