@twintag/twintag-form 1.6.0 → 1.6.2-beta.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.
Files changed (71) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/README.md +59 -22
  3. package/dev/index.css +32 -32
  4. package/dev/main.tsx +1 -0
  5. package/lib/common/button.tsx +6 -6
  6. package/lib/common/calendar.tsx +10 -9
  7. package/lib/common/checkbox.tsx +3 -3
  8. package/lib/common/form.tsx +3 -3
  9. package/lib/common/icon.tsx +1 -1
  10. package/lib/common/input.tsx +4 -4
  11. package/lib/common/label.tsx +1 -1
  12. package/lib/common/popover.tsx +1 -1
  13. package/lib/common/radiogroup.tsx +2 -2
  14. package/lib/common/slider.tsx +3 -3
  15. package/lib/common/switch.tsx +3 -3
  16. package/lib/common/textarea.tsx +3 -3
  17. package/lib/components/containers/category.tsx +1 -1
  18. package/lib/components/fields/checkbox.tsx +1 -1
  19. package/lib/components/fields/date-picker.tsx +5 -5
  20. package/lib/components/fields/file.tsx +4 -3
  21. package/lib/components/fields/input.tsx +2 -2
  22. package/lib/components/fields/radiogroup.tsx +1 -1
  23. package/lib/components/fields/textarea.tsx +6 -2
  24. package/lib/components/fields/toggle.tsx +1 -1
  25. package/lib/components/fields/tri-toggle.tsx +4 -4
  26. package/lib/components/provider.tsx +4 -5
  27. package/lib/index.tsx +7 -3
  28. package/lib/types/index.ts +26 -6
  29. package/package.json +1 -1
  30. package/tailwind.config.ts +21 -26
  31. package/.turbo/turbo-build.log +0 -22
  32. package/dist/common/accordion.d.ts +0 -7
  33. package/dist/common/button.d.ts +0 -71
  34. package/dist/common/calendar.d.ts +0 -139
  35. package/dist/common/checkbox.d.ts +0 -4
  36. package/dist/common/form.d.ts +0 -86
  37. package/dist/common/icon.d.ts +0 -8
  38. package/dist/common/input.d.ts +0 -133
  39. package/dist/common/label.d.ts +0 -21
  40. package/dist/common/popover.d.ts +0 -6
  41. package/dist/common/radiogroup.d.ts +0 -5
  42. package/dist/common/slider.d.ts +0 -4
  43. package/dist/common/switch.d.ts +0 -4
  44. package/dist/common/textarea.d.ts +0 -68
  45. package/dist/components/config.d.ts +0 -6
  46. package/dist/components/containers/accordion.d.ts +0 -7
  47. package/dist/components/containers/category.d.ts +0 -8
  48. package/dist/components/fields/checkbox.d.ts +0 -5
  49. package/dist/components/fields/date-picker.d.ts +0 -4
  50. package/dist/components/fields/file.d.ts +0 -5
  51. package/dist/components/fields/input.d.ts +0 -5
  52. package/dist/components/fields/radiogroup.d.ts +0 -7
  53. package/dist/components/fields/submit.d.ts +0 -4
  54. package/dist/components/fields/textarea.d.ts +0 -5
  55. package/dist/components/fields/toggle.d.ts +0 -5
  56. package/dist/components/fields/tri-toggle.d.ts +0 -5
  57. package/dist/components/form.d.ts +0 -9
  58. package/dist/components/input.d.ts +0 -4
  59. package/dist/components/label.d.ts +0 -4
  60. package/dist/components/provider.d.ts +0 -19
  61. package/dist/components/renderer.d.ts +0 -1
  62. package/dist/index.cjs +0 -1
  63. package/dist/index.d.ts +0 -16
  64. package/dist/index.js +0 -4456
  65. package/dist/types/index.d.ts +0 -58
  66. package/dist/utils/data.d.ts +0 -7
  67. package/dist/utils/string.d.ts +0 -3
  68. package/dist/utils/style.d.ts +0 -3
  69. package/dist/webcomponent.cjs +0 -1
  70. package/dist/webcomponent.d.ts +0 -1
  71. package/dist/webcomponent.js +0 -1170
@@ -1,1170 +0,0 @@
1
- import l from "@r2wc/react-to-web-component";
2
- import m from "@twind/with-web-components";
3
- import { Form as c } from "./index.js";
4
- import { defineConfig as d } from "@twind/core";
5
- import g from "@twind/preset-autoprefix";
6
- import u from "@twind/preset-tailwind";
7
- var s = {}, p = {};
8
- (function(e) {
9
- Object.defineProperty(e, "__esModule", {
10
- value: !0
11
- }), Object.defineProperty(e, "cloneDeep", {
12
- enumerable: !0,
13
- get: function() {
14
- return r;
15
- }
16
- });
17
- function r(t) {
18
- return Array.isArray(t) ? t.map((n) => r(n)) : typeof t == "object" && t !== null ? Object.fromEntries(Object.entries(t).map(([n, o]) => [
19
- n,
20
- r(o)
21
- ])) : t;
22
- }
23
- })(p);
24
- var x = {
25
- content: [],
26
- presets: [],
27
- darkMode: "media",
28
- // or 'class'
29
- theme: {
30
- accentColor: ({ theme: e }) => ({
31
- ...e("colors"),
32
- auto: "auto"
33
- }),
34
- animation: {
35
- none: "none",
36
- spin: "spin 1s linear infinite",
37
- ping: "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite",
38
- pulse: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
39
- bounce: "bounce 1s infinite"
40
- },
41
- aria: {
42
- busy: 'busy="true"',
43
- checked: 'checked="true"',
44
- disabled: 'disabled="true"',
45
- expanded: 'expanded="true"',
46
- hidden: 'hidden="true"',
47
- pressed: 'pressed="true"',
48
- readonly: 'readonly="true"',
49
- required: 'required="true"',
50
- selected: 'selected="true"'
51
- },
52
- aspectRatio: {
53
- auto: "auto",
54
- square: "1 / 1",
55
- video: "16 / 9"
56
- },
57
- backdropBlur: ({ theme: e }) => e("blur"),
58
- backdropBrightness: ({ theme: e }) => e("brightness"),
59
- backdropContrast: ({ theme: e }) => e("contrast"),
60
- backdropGrayscale: ({ theme: e }) => e("grayscale"),
61
- backdropHueRotate: ({ theme: e }) => e("hueRotate"),
62
- backdropInvert: ({ theme: e }) => e("invert"),
63
- backdropOpacity: ({ theme: e }) => e("opacity"),
64
- backdropSaturate: ({ theme: e }) => e("saturate"),
65
- backdropSepia: ({ theme: e }) => e("sepia"),
66
- backgroundColor: ({ theme: e }) => e("colors"),
67
- backgroundImage: {
68
- none: "none",
69
- "gradient-to-t": "linear-gradient(to top, var(--tw-gradient-stops))",
70
- "gradient-to-tr": "linear-gradient(to top right, var(--tw-gradient-stops))",
71
- "gradient-to-r": "linear-gradient(to right, var(--tw-gradient-stops))",
72
- "gradient-to-br": "linear-gradient(to bottom right, var(--tw-gradient-stops))",
73
- "gradient-to-b": "linear-gradient(to bottom, var(--tw-gradient-stops))",
74
- "gradient-to-bl": "linear-gradient(to bottom left, var(--tw-gradient-stops))",
75
- "gradient-to-l": "linear-gradient(to left, var(--tw-gradient-stops))",
76
- "gradient-to-tl": "linear-gradient(to top left, var(--tw-gradient-stops))"
77
- },
78
- backgroundOpacity: ({ theme: e }) => e("opacity"),
79
- backgroundPosition: {
80
- bottom: "bottom",
81
- center: "center",
82
- left: "left",
83
- "left-bottom": "left bottom",
84
- "left-top": "left top",
85
- right: "right",
86
- "right-bottom": "right bottom",
87
- "right-top": "right top",
88
- top: "top"
89
- },
90
- backgroundSize: {
91
- auto: "auto",
92
- cover: "cover",
93
- contain: "contain"
94
- },
95
- blur: {
96
- 0: "0",
97
- none: "",
98
- sm: "4px",
99
- DEFAULT: "8px",
100
- md: "12px",
101
- lg: "16px",
102
- xl: "24px",
103
- "2xl": "40px",
104
- "3xl": "64px"
105
- },
106
- borderColor: ({ theme: e }) => ({
107
- ...e("colors"),
108
- DEFAULT: e("colors.gray.200", "currentColor")
109
- }),
110
- borderOpacity: ({ theme: e }) => e("opacity"),
111
- borderRadius: {
112
- none: "0px",
113
- sm: "0.125rem",
114
- DEFAULT: "0.25rem",
115
- md: "0.375rem",
116
- lg: "0.5rem",
117
- xl: "0.75rem",
118
- "2xl": "1rem",
119
- "3xl": "1.5rem",
120
- full: "9999px"
121
- },
122
- borderSpacing: ({ theme: e }) => ({
123
- ...e("spacing")
124
- }),
125
- borderWidth: {
126
- DEFAULT: "1px",
127
- 0: "0px",
128
- 2: "2px",
129
- 4: "4px",
130
- 8: "8px"
131
- },
132
- boxShadow: {
133
- sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
134
- DEFAULT: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
135
- md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
136
- lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
137
- xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
138
- "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
139
- inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
140
- none: "none"
141
- },
142
- boxShadowColor: ({ theme: e }) => e("colors"),
143
- brightness: {
144
- 0: "0",
145
- 50: ".5",
146
- 75: ".75",
147
- 90: ".9",
148
- 95: ".95",
149
- 100: "1",
150
- 105: "1.05",
151
- 110: "1.1",
152
- 125: "1.25",
153
- 150: "1.5",
154
- 200: "2"
155
- },
156
- caretColor: ({ theme: e }) => e("colors"),
157
- colors: ({ colors: e }) => ({
158
- inherit: e.inherit,
159
- current: e.current,
160
- transparent: e.transparent,
161
- black: e.black,
162
- white: e.white,
163
- slate: e.slate,
164
- gray: e.gray,
165
- zinc: e.zinc,
166
- neutral: e.neutral,
167
- stone: e.stone,
168
- red: e.red,
169
- orange: e.orange,
170
- amber: e.amber,
171
- yellow: e.yellow,
172
- lime: e.lime,
173
- green: e.green,
174
- emerald: e.emerald,
175
- teal: e.teal,
176
- cyan: e.cyan,
177
- sky: e.sky,
178
- blue: e.blue,
179
- indigo: e.indigo,
180
- violet: e.violet,
181
- purple: e.purple,
182
- fuchsia: e.fuchsia,
183
- pink: e.pink,
184
- rose: e.rose
185
- }),
186
- columns: {
187
- auto: "auto",
188
- 1: "1",
189
- 2: "2",
190
- 3: "3",
191
- 4: "4",
192
- 5: "5",
193
- 6: "6",
194
- 7: "7",
195
- 8: "8",
196
- 9: "9",
197
- 10: "10",
198
- 11: "11",
199
- 12: "12",
200
- "3xs": "16rem",
201
- "2xs": "18rem",
202
- xs: "20rem",
203
- sm: "24rem",
204
- md: "28rem",
205
- lg: "32rem",
206
- xl: "36rem",
207
- "2xl": "42rem",
208
- "3xl": "48rem",
209
- "4xl": "56rem",
210
- "5xl": "64rem",
211
- "6xl": "72rem",
212
- "7xl": "80rem"
213
- },
214
- container: {},
215
- content: {
216
- none: "none"
217
- },
218
- contrast: {
219
- 0: "0",
220
- 50: ".5",
221
- 75: ".75",
222
- 100: "1",
223
- 125: "1.25",
224
- 150: "1.5",
225
- 200: "2"
226
- },
227
- cursor: {
228
- auto: "auto",
229
- default: "default",
230
- pointer: "pointer",
231
- wait: "wait",
232
- text: "text",
233
- move: "move",
234
- help: "help",
235
- "not-allowed": "not-allowed",
236
- none: "none",
237
- "context-menu": "context-menu",
238
- progress: "progress",
239
- cell: "cell",
240
- crosshair: "crosshair",
241
- "vertical-text": "vertical-text",
242
- alias: "alias",
243
- copy: "copy",
244
- "no-drop": "no-drop",
245
- grab: "grab",
246
- grabbing: "grabbing",
247
- "all-scroll": "all-scroll",
248
- "col-resize": "col-resize",
249
- "row-resize": "row-resize",
250
- "n-resize": "n-resize",
251
- "e-resize": "e-resize",
252
- "s-resize": "s-resize",
253
- "w-resize": "w-resize",
254
- "ne-resize": "ne-resize",
255
- "nw-resize": "nw-resize",
256
- "se-resize": "se-resize",
257
- "sw-resize": "sw-resize",
258
- "ew-resize": "ew-resize",
259
- "ns-resize": "ns-resize",
260
- "nesw-resize": "nesw-resize",
261
- "nwse-resize": "nwse-resize",
262
- "zoom-in": "zoom-in",
263
- "zoom-out": "zoom-out"
264
- },
265
- divideColor: ({ theme: e }) => e("borderColor"),
266
- divideOpacity: ({ theme: e }) => e("borderOpacity"),
267
- divideWidth: ({ theme: e }) => e("borderWidth"),
268
- dropShadow: {
269
- sm: "0 1px 1px rgb(0 0 0 / 0.05)",
270
- DEFAULT: ["0 1px 2px rgb(0 0 0 / 0.1)", "0 1px 1px rgb(0 0 0 / 0.06)"],
271
- md: ["0 4px 3px rgb(0 0 0 / 0.07)", "0 2px 2px rgb(0 0 0 / 0.06)"],
272
- lg: ["0 10px 8px rgb(0 0 0 / 0.04)", "0 4px 3px rgb(0 0 0 / 0.1)"],
273
- xl: ["0 20px 13px rgb(0 0 0 / 0.03)", "0 8px 5px rgb(0 0 0 / 0.08)"],
274
- "2xl": "0 25px 25px rgb(0 0 0 / 0.15)",
275
- none: "0 0 #0000"
276
- },
277
- fill: ({ theme: e }) => ({
278
- none: "none",
279
- ...e("colors")
280
- }),
281
- flex: {
282
- 1: "1 1 0%",
283
- auto: "1 1 auto",
284
- initial: "0 1 auto",
285
- none: "none"
286
- },
287
- flexBasis: ({ theme: e }) => ({
288
- auto: "auto",
289
- ...e("spacing"),
290
- "1/2": "50%",
291
- "1/3": "33.333333%",
292
- "2/3": "66.666667%",
293
- "1/4": "25%",
294
- "2/4": "50%",
295
- "3/4": "75%",
296
- "1/5": "20%",
297
- "2/5": "40%",
298
- "3/5": "60%",
299
- "4/5": "80%",
300
- "1/6": "16.666667%",
301
- "2/6": "33.333333%",
302
- "3/6": "50%",
303
- "4/6": "66.666667%",
304
- "5/6": "83.333333%",
305
- "1/12": "8.333333%",
306
- "2/12": "16.666667%",
307
- "3/12": "25%",
308
- "4/12": "33.333333%",
309
- "5/12": "41.666667%",
310
- "6/12": "50%",
311
- "7/12": "58.333333%",
312
- "8/12": "66.666667%",
313
- "9/12": "75%",
314
- "10/12": "83.333333%",
315
- "11/12": "91.666667%",
316
- full: "100%"
317
- }),
318
- flexGrow: {
319
- 0: "0",
320
- DEFAULT: "1"
321
- },
322
- flexShrink: {
323
- 0: "0",
324
- DEFAULT: "1"
325
- },
326
- fontFamily: {
327
- sans: [
328
- "ui-sans-serif",
329
- "system-ui",
330
- "sans-serif",
331
- '"Apple Color Emoji"',
332
- '"Segoe UI Emoji"',
333
- '"Segoe UI Symbol"',
334
- '"Noto Color Emoji"'
335
- ],
336
- serif: ["ui-serif", "Georgia", "Cambria", '"Times New Roman"', "Times", "serif"],
337
- mono: [
338
- "ui-monospace",
339
- "SFMono-Regular",
340
- "Menlo",
341
- "Monaco",
342
- "Consolas",
343
- '"Liberation Mono"',
344
- '"Courier New"',
345
- "monospace"
346
- ]
347
- },
348
- fontSize: {
349
- xs: ["0.75rem", { lineHeight: "1rem" }],
350
- sm: ["0.875rem", { lineHeight: "1.25rem" }],
351
- base: ["1rem", { lineHeight: "1.5rem" }],
352
- lg: ["1.125rem", { lineHeight: "1.75rem" }],
353
- xl: ["1.25rem", { lineHeight: "1.75rem" }],
354
- "2xl": ["1.5rem", { lineHeight: "2rem" }],
355
- "3xl": ["1.875rem", { lineHeight: "2.25rem" }],
356
- "4xl": ["2.25rem", { lineHeight: "2.5rem" }],
357
- "5xl": ["3rem", { lineHeight: "1" }],
358
- "6xl": ["3.75rem", { lineHeight: "1" }],
359
- "7xl": ["4.5rem", { lineHeight: "1" }],
360
- "8xl": ["6rem", { lineHeight: "1" }],
361
- "9xl": ["8rem", { lineHeight: "1" }]
362
- },
363
- fontWeight: {
364
- thin: "100",
365
- extralight: "200",
366
- light: "300",
367
- normal: "400",
368
- medium: "500",
369
- semibold: "600",
370
- bold: "700",
371
- extrabold: "800",
372
- black: "900"
373
- },
374
- gap: ({ theme: e }) => e("spacing"),
375
- gradientColorStops: ({ theme: e }) => e("colors"),
376
- gradientColorStopPositions: {
377
- "0%": "0%",
378
- "5%": "5%",
379
- "10%": "10%",
380
- "15%": "15%",
381
- "20%": "20%",
382
- "25%": "25%",
383
- "30%": "30%",
384
- "35%": "35%",
385
- "40%": "40%",
386
- "45%": "45%",
387
- "50%": "50%",
388
- "55%": "55%",
389
- "60%": "60%",
390
- "65%": "65%",
391
- "70%": "70%",
392
- "75%": "75%",
393
- "80%": "80%",
394
- "85%": "85%",
395
- "90%": "90%",
396
- "95%": "95%",
397
- "100%": "100%"
398
- },
399
- grayscale: {
400
- 0: "0",
401
- DEFAULT: "100%"
402
- },
403
- gridAutoColumns: {
404
- auto: "auto",
405
- min: "min-content",
406
- max: "max-content",
407
- fr: "minmax(0, 1fr)"
408
- },
409
- gridAutoRows: {
410
- auto: "auto",
411
- min: "min-content",
412
- max: "max-content",
413
- fr: "minmax(0, 1fr)"
414
- },
415
- gridColumn: {
416
- auto: "auto",
417
- "span-1": "span 1 / span 1",
418
- "span-2": "span 2 / span 2",
419
- "span-3": "span 3 / span 3",
420
- "span-4": "span 4 / span 4",
421
- "span-5": "span 5 / span 5",
422
- "span-6": "span 6 / span 6",
423
- "span-7": "span 7 / span 7",
424
- "span-8": "span 8 / span 8",
425
- "span-9": "span 9 / span 9",
426
- "span-10": "span 10 / span 10",
427
- "span-11": "span 11 / span 11",
428
- "span-12": "span 12 / span 12",
429
- "span-full": "1 / -1"
430
- },
431
- gridColumnEnd: {
432
- auto: "auto",
433
- 1: "1",
434
- 2: "2",
435
- 3: "3",
436
- 4: "4",
437
- 5: "5",
438
- 6: "6",
439
- 7: "7",
440
- 8: "8",
441
- 9: "9",
442
- 10: "10",
443
- 11: "11",
444
- 12: "12",
445
- 13: "13"
446
- },
447
- gridColumnStart: {
448
- auto: "auto",
449
- 1: "1",
450
- 2: "2",
451
- 3: "3",
452
- 4: "4",
453
- 5: "5",
454
- 6: "6",
455
- 7: "7",
456
- 8: "8",
457
- 9: "9",
458
- 10: "10",
459
- 11: "11",
460
- 12: "12",
461
- 13: "13"
462
- },
463
- gridRow: {
464
- auto: "auto",
465
- "span-1": "span 1 / span 1",
466
- "span-2": "span 2 / span 2",
467
- "span-3": "span 3 / span 3",
468
- "span-4": "span 4 / span 4",
469
- "span-5": "span 5 / span 5",
470
- "span-6": "span 6 / span 6",
471
- "span-7": "span 7 / span 7",
472
- "span-8": "span 8 / span 8",
473
- "span-9": "span 9 / span 9",
474
- "span-10": "span 10 / span 10",
475
- "span-11": "span 11 / span 11",
476
- "span-12": "span 12 / span 12",
477
- "span-full": "1 / -1"
478
- },
479
- gridRowEnd: {
480
- auto: "auto",
481
- 1: "1",
482
- 2: "2",
483
- 3: "3",
484
- 4: "4",
485
- 5: "5",
486
- 6: "6",
487
- 7: "7",
488
- 8: "8",
489
- 9: "9",
490
- 10: "10",
491
- 11: "11",
492
- 12: "12",
493
- 13: "13"
494
- },
495
- gridRowStart: {
496
- auto: "auto",
497
- 1: "1",
498
- 2: "2",
499
- 3: "3",
500
- 4: "4",
501
- 5: "5",
502
- 6: "6",
503
- 7: "7",
504
- 8: "8",
505
- 9: "9",
506
- 10: "10",
507
- 11: "11",
508
- 12: "12",
509
- 13: "13"
510
- },
511
- gridTemplateColumns: {
512
- none: "none",
513
- subgrid: "subgrid",
514
- 1: "repeat(1, minmax(0, 1fr))",
515
- 2: "repeat(2, minmax(0, 1fr))",
516
- 3: "repeat(3, minmax(0, 1fr))",
517
- 4: "repeat(4, minmax(0, 1fr))",
518
- 5: "repeat(5, minmax(0, 1fr))",
519
- 6: "repeat(6, minmax(0, 1fr))",
520
- 7: "repeat(7, minmax(0, 1fr))",
521
- 8: "repeat(8, minmax(0, 1fr))",
522
- 9: "repeat(9, minmax(0, 1fr))",
523
- 10: "repeat(10, minmax(0, 1fr))",
524
- 11: "repeat(11, minmax(0, 1fr))",
525
- 12: "repeat(12, minmax(0, 1fr))"
526
- },
527
- gridTemplateRows: {
528
- none: "none",
529
- subgrid: "subgrid",
530
- 1: "repeat(1, minmax(0, 1fr))",
531
- 2: "repeat(2, minmax(0, 1fr))",
532
- 3: "repeat(3, minmax(0, 1fr))",
533
- 4: "repeat(4, minmax(0, 1fr))",
534
- 5: "repeat(5, minmax(0, 1fr))",
535
- 6: "repeat(6, minmax(0, 1fr))",
536
- 7: "repeat(7, minmax(0, 1fr))",
537
- 8: "repeat(8, minmax(0, 1fr))",
538
- 9: "repeat(9, minmax(0, 1fr))",
539
- 10: "repeat(10, minmax(0, 1fr))",
540
- 11: "repeat(11, minmax(0, 1fr))",
541
- 12: "repeat(12, minmax(0, 1fr))"
542
- },
543
- height: ({ theme: e }) => ({
544
- auto: "auto",
545
- ...e("spacing"),
546
- "1/2": "50%",
547
- "1/3": "33.333333%",
548
- "2/3": "66.666667%",
549
- "1/4": "25%",
550
- "2/4": "50%",
551
- "3/4": "75%",
552
- "1/5": "20%",
553
- "2/5": "40%",
554
- "3/5": "60%",
555
- "4/5": "80%",
556
- "1/6": "16.666667%",
557
- "2/6": "33.333333%",
558
- "3/6": "50%",
559
- "4/6": "66.666667%",
560
- "5/6": "83.333333%",
561
- full: "100%",
562
- screen: "100vh",
563
- svh: "100svh",
564
- lvh: "100lvh",
565
- dvh: "100dvh",
566
- min: "min-content",
567
- max: "max-content",
568
- fit: "fit-content"
569
- }),
570
- hueRotate: {
571
- 0: "0deg",
572
- 15: "15deg",
573
- 30: "30deg",
574
- 60: "60deg",
575
- 90: "90deg",
576
- 180: "180deg"
577
- },
578
- inset: ({ theme: e }) => ({
579
- auto: "auto",
580
- ...e("spacing"),
581
- "1/2": "50%",
582
- "1/3": "33.333333%",
583
- "2/3": "66.666667%",
584
- "1/4": "25%",
585
- "2/4": "50%",
586
- "3/4": "75%",
587
- full: "100%"
588
- }),
589
- invert: {
590
- 0: "0",
591
- DEFAULT: "100%"
592
- },
593
- keyframes: {
594
- spin: {
595
- to: {
596
- transform: "rotate(360deg)"
597
- }
598
- },
599
- ping: {
600
- "75%, 100%": {
601
- transform: "scale(2)",
602
- opacity: "0"
603
- }
604
- },
605
- pulse: {
606
- "50%": {
607
- opacity: ".5"
608
- }
609
- },
610
- bounce: {
611
- "0%, 100%": {
612
- transform: "translateY(-25%)",
613
- animationTimingFunction: "cubic-bezier(0.8,0,1,1)"
614
- },
615
- "50%": {
616
- transform: "none",
617
- animationTimingFunction: "cubic-bezier(0,0,0.2,1)"
618
- }
619
- }
620
- },
621
- letterSpacing: {
622
- tighter: "-0.05em",
623
- tight: "-0.025em",
624
- normal: "0em",
625
- wide: "0.025em",
626
- wider: "0.05em",
627
- widest: "0.1em"
628
- },
629
- lineHeight: {
630
- none: "1",
631
- tight: "1.25",
632
- snug: "1.375",
633
- normal: "1.5",
634
- relaxed: "1.625",
635
- loose: "2",
636
- 3: ".75rem",
637
- 4: "1rem",
638
- 5: "1.25rem",
639
- 6: "1.5rem",
640
- 7: "1.75rem",
641
- 8: "2rem",
642
- 9: "2.25rem",
643
- 10: "2.5rem"
644
- },
645
- listStyleType: {
646
- none: "none",
647
- disc: "disc",
648
- decimal: "decimal"
649
- },
650
- listStyleImage: {
651
- none: "none"
652
- },
653
- margin: ({ theme: e }) => ({
654
- auto: "auto",
655
- ...e("spacing")
656
- }),
657
- lineClamp: {
658
- 1: "1",
659
- 2: "2",
660
- 3: "3",
661
- 4: "4",
662
- 5: "5",
663
- 6: "6"
664
- },
665
- maxHeight: ({ theme: e }) => ({
666
- ...e("spacing"),
667
- none: "none",
668
- full: "100%",
669
- screen: "100vh",
670
- svh: "100svh",
671
- lvh: "100lvh",
672
- dvh: "100dvh",
673
- min: "min-content",
674
- max: "max-content",
675
- fit: "fit-content"
676
- }),
677
- maxWidth: ({ theme: e, breakpoints: r }) => ({
678
- ...e("spacing"),
679
- none: "none",
680
- xs: "20rem",
681
- sm: "24rem",
682
- md: "28rem",
683
- lg: "32rem",
684
- xl: "36rem",
685
- "2xl": "42rem",
686
- "3xl": "48rem",
687
- "4xl": "56rem",
688
- "5xl": "64rem",
689
- "6xl": "72rem",
690
- "7xl": "80rem",
691
- full: "100%",
692
- min: "min-content",
693
- max: "max-content",
694
- fit: "fit-content",
695
- prose: "65ch",
696
- ...r(e("screens"))
697
- }),
698
- minHeight: ({ theme: e }) => ({
699
- ...e("spacing"),
700
- full: "100%",
701
- screen: "100vh",
702
- svh: "100svh",
703
- lvh: "100lvh",
704
- dvh: "100dvh",
705
- min: "min-content",
706
- max: "max-content",
707
- fit: "fit-content"
708
- }),
709
- minWidth: ({ theme: e }) => ({
710
- ...e("spacing"),
711
- full: "100%",
712
- min: "min-content",
713
- max: "max-content",
714
- fit: "fit-content"
715
- }),
716
- objectPosition: {
717
- bottom: "bottom",
718
- center: "center",
719
- left: "left",
720
- "left-bottom": "left bottom",
721
- "left-top": "left top",
722
- right: "right",
723
- "right-bottom": "right bottom",
724
- "right-top": "right top",
725
- top: "top"
726
- },
727
- opacity: {
728
- 0: "0",
729
- 5: "0.05",
730
- 10: "0.1",
731
- 15: "0.15",
732
- 20: "0.2",
733
- 25: "0.25",
734
- 30: "0.3",
735
- 35: "0.35",
736
- 40: "0.4",
737
- 45: "0.45",
738
- 50: "0.5",
739
- 55: "0.55",
740
- 60: "0.6",
741
- 65: "0.65",
742
- 70: "0.7",
743
- 75: "0.75",
744
- 80: "0.8",
745
- 85: "0.85",
746
- 90: "0.9",
747
- 95: "0.95",
748
- 100: "1"
749
- },
750
- order: {
751
- first: "-9999",
752
- last: "9999",
753
- none: "0",
754
- 1: "1",
755
- 2: "2",
756
- 3: "3",
757
- 4: "4",
758
- 5: "5",
759
- 6: "6",
760
- 7: "7",
761
- 8: "8",
762
- 9: "9",
763
- 10: "10",
764
- 11: "11",
765
- 12: "12"
766
- },
767
- outlineColor: ({ theme: e }) => e("colors"),
768
- outlineOffset: {
769
- 0: "0px",
770
- 1: "1px",
771
- 2: "2px",
772
- 4: "4px",
773
- 8: "8px"
774
- },
775
- outlineWidth: {
776
- 0: "0px",
777
- 1: "1px",
778
- 2: "2px",
779
- 4: "4px",
780
- 8: "8px"
781
- },
782
- padding: ({ theme: e }) => e("spacing"),
783
- placeholderColor: ({ theme: e }) => e("colors"),
784
- placeholderOpacity: ({ theme: e }) => e("opacity"),
785
- ringColor: ({ theme: e }) => ({
786
- DEFAULT: e("colors.blue.500", "#3b82f6"),
787
- ...e("colors")
788
- }),
789
- ringOffsetColor: ({ theme: e }) => e("colors"),
790
- ringOffsetWidth: {
791
- 0: "0px",
792
- 1: "1px",
793
- 2: "2px",
794
- 4: "4px",
795
- 8: "8px"
796
- },
797
- ringOpacity: ({ theme: e }) => ({
798
- DEFAULT: "0.5",
799
- ...e("opacity")
800
- }),
801
- ringWidth: {
802
- DEFAULT: "3px",
803
- 0: "0px",
804
- 1: "1px",
805
- 2: "2px",
806
- 4: "4px",
807
- 8: "8px"
808
- },
809
- rotate: {
810
- 0: "0deg",
811
- 1: "1deg",
812
- 2: "2deg",
813
- 3: "3deg",
814
- 6: "6deg",
815
- 12: "12deg",
816
- 45: "45deg",
817
- 90: "90deg",
818
- 180: "180deg"
819
- },
820
- saturate: {
821
- 0: "0",
822
- 50: ".5",
823
- 100: "1",
824
- 150: "1.5",
825
- 200: "2"
826
- },
827
- scale: {
828
- 0: "0",
829
- 50: ".5",
830
- 75: ".75",
831
- 90: ".9",
832
- 95: ".95",
833
- 100: "1",
834
- 105: "1.05",
835
- 110: "1.1",
836
- 125: "1.25",
837
- 150: "1.5"
838
- },
839
- screens: {
840
- sm: "640px",
841
- md: "768px",
842
- lg: "1024px",
843
- xl: "1280px",
844
- "2xl": "1536px"
845
- },
846
- scrollMargin: ({ theme: e }) => ({
847
- ...e("spacing")
848
- }),
849
- scrollPadding: ({ theme: e }) => e("spacing"),
850
- sepia: {
851
- 0: "0",
852
- DEFAULT: "100%"
853
- },
854
- skew: {
855
- 0: "0deg",
856
- 1: "1deg",
857
- 2: "2deg",
858
- 3: "3deg",
859
- 6: "6deg",
860
- 12: "12deg"
861
- },
862
- space: ({ theme: e }) => ({
863
- ...e("spacing")
864
- }),
865
- spacing: {
866
- px: "1px",
867
- 0: "0px",
868
- 0.5: "0.125rem",
869
- 1: "0.25rem",
870
- 1.5: "0.375rem",
871
- 2: "0.5rem",
872
- 2.5: "0.625rem",
873
- 3: "0.75rem",
874
- 3.5: "0.875rem",
875
- 4: "1rem",
876
- 5: "1.25rem",
877
- 6: "1.5rem",
878
- 7: "1.75rem",
879
- 8: "2rem",
880
- 9: "2.25rem",
881
- 10: "2.5rem",
882
- 11: "2.75rem",
883
- 12: "3rem",
884
- 14: "3.5rem",
885
- 16: "4rem",
886
- 20: "5rem",
887
- 24: "6rem",
888
- 28: "7rem",
889
- 32: "8rem",
890
- 36: "9rem",
891
- 40: "10rem",
892
- 44: "11rem",
893
- 48: "12rem",
894
- 52: "13rem",
895
- 56: "14rem",
896
- 60: "15rem",
897
- 64: "16rem",
898
- 72: "18rem",
899
- 80: "20rem",
900
- 96: "24rem"
901
- },
902
- stroke: ({ theme: e }) => ({
903
- none: "none",
904
- ...e("colors")
905
- }),
906
- strokeWidth: {
907
- 0: "0",
908
- 1: "1",
909
- 2: "2"
910
- },
911
- supports: {},
912
- data: {},
913
- textColor: ({ theme: e }) => e("colors"),
914
- textDecorationColor: ({ theme: e }) => e("colors"),
915
- textDecorationThickness: {
916
- auto: "auto",
917
- "from-font": "from-font",
918
- 0: "0px",
919
- 1: "1px",
920
- 2: "2px",
921
- 4: "4px",
922
- 8: "8px"
923
- },
924
- textIndent: ({ theme: e }) => ({
925
- ...e("spacing")
926
- }),
927
- textOpacity: ({ theme: e }) => e("opacity"),
928
- textUnderlineOffset: {
929
- auto: "auto",
930
- 0: "0px",
931
- 1: "1px",
932
- 2: "2px",
933
- 4: "4px",
934
- 8: "8px"
935
- },
936
- transformOrigin: {
937
- center: "center",
938
- top: "top",
939
- "top-right": "top right",
940
- right: "right",
941
- "bottom-right": "bottom right",
942
- bottom: "bottom",
943
- "bottom-left": "bottom left",
944
- left: "left",
945
- "top-left": "top left"
946
- },
947
- transitionDelay: {
948
- 0: "0s",
949
- 75: "75ms",
950
- 100: "100ms",
951
- 150: "150ms",
952
- 200: "200ms",
953
- 300: "300ms",
954
- 500: "500ms",
955
- 700: "700ms",
956
- 1e3: "1000ms"
957
- },
958
- transitionDuration: {
959
- DEFAULT: "150ms",
960
- 0: "0s",
961
- 75: "75ms",
962
- 100: "100ms",
963
- 150: "150ms",
964
- 200: "200ms",
965
- 300: "300ms",
966
- 500: "500ms",
967
- 700: "700ms",
968
- 1e3: "1000ms"
969
- },
970
- transitionProperty: {
971
- none: "none",
972
- all: "all",
973
- DEFAULT: "color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",
974
- colors: "color, background-color, border-color, text-decoration-color, fill, stroke",
975
- opacity: "opacity",
976
- shadow: "box-shadow",
977
- transform: "transform"
978
- },
979
- transitionTimingFunction: {
980
- DEFAULT: "cubic-bezier(0.4, 0, 0.2, 1)",
981
- linear: "linear",
982
- in: "cubic-bezier(0.4, 0, 1, 1)",
983
- out: "cubic-bezier(0, 0, 0.2, 1)",
984
- "in-out": "cubic-bezier(0.4, 0, 0.2, 1)"
985
- },
986
- translate: ({ theme: e }) => ({
987
- ...e("spacing"),
988
- "1/2": "50%",
989
- "1/3": "33.333333%",
990
- "2/3": "66.666667%",
991
- "1/4": "25%",
992
- "2/4": "50%",
993
- "3/4": "75%",
994
- full: "100%"
995
- }),
996
- size: ({ theme: e }) => ({
997
- auto: "auto",
998
- ...e("spacing"),
999
- "1/2": "50%",
1000
- "1/3": "33.333333%",
1001
- "2/3": "66.666667%",
1002
- "1/4": "25%",
1003
- "2/4": "50%",
1004
- "3/4": "75%",
1005
- "1/5": "20%",
1006
- "2/5": "40%",
1007
- "3/5": "60%",
1008
- "4/5": "80%",
1009
- "1/6": "16.666667%",
1010
- "2/6": "33.333333%",
1011
- "3/6": "50%",
1012
- "4/6": "66.666667%",
1013
- "5/6": "83.333333%",
1014
- "1/12": "8.333333%",
1015
- "2/12": "16.666667%",
1016
- "3/12": "25%",
1017
- "4/12": "33.333333%",
1018
- "5/12": "41.666667%",
1019
- "6/12": "50%",
1020
- "7/12": "58.333333%",
1021
- "8/12": "66.666667%",
1022
- "9/12": "75%",
1023
- "10/12": "83.333333%",
1024
- "11/12": "91.666667%",
1025
- full: "100%",
1026
- min: "min-content",
1027
- max: "max-content",
1028
- fit: "fit-content"
1029
- }),
1030
- width: ({ theme: e }) => ({
1031
- auto: "auto",
1032
- ...e("spacing"),
1033
- "1/2": "50%",
1034
- "1/3": "33.333333%",
1035
- "2/3": "66.666667%",
1036
- "1/4": "25%",
1037
- "2/4": "50%",
1038
- "3/4": "75%",
1039
- "1/5": "20%",
1040
- "2/5": "40%",
1041
- "3/5": "60%",
1042
- "4/5": "80%",
1043
- "1/6": "16.666667%",
1044
- "2/6": "33.333333%",
1045
- "3/6": "50%",
1046
- "4/6": "66.666667%",
1047
- "5/6": "83.333333%",
1048
- "1/12": "8.333333%",
1049
- "2/12": "16.666667%",
1050
- "3/12": "25%",
1051
- "4/12": "33.333333%",
1052
- "5/12": "41.666667%",
1053
- "6/12": "50%",
1054
- "7/12": "58.333333%",
1055
- "8/12": "66.666667%",
1056
- "9/12": "75%",
1057
- "10/12": "83.333333%",
1058
- "11/12": "91.666667%",
1059
- full: "100%",
1060
- screen: "100vw",
1061
- svw: "100svw",
1062
- lvw: "100lvw",
1063
- dvw: "100dvw",
1064
- min: "min-content",
1065
- max: "max-content",
1066
- fit: "fit-content"
1067
- }),
1068
- willChange: {
1069
- auto: "auto",
1070
- scroll: "scroll-position",
1071
- contents: "contents",
1072
- transform: "transform"
1073
- },
1074
- zIndex: {
1075
- auto: "auto",
1076
- 0: "0",
1077
- 10: "10",
1078
- 20: "20",
1079
- 30: "30",
1080
- 40: "40",
1081
- 50: "50"
1082
- }
1083
- },
1084
- plugins: []
1085
- };
1086
- (function(e) {
1087
- Object.defineProperty(e, "__esModule", {
1088
- value: !0
1089
- }), Object.defineProperty(e, "default", {
1090
- enumerable: !0,
1091
- get: function() {
1092
- return o;
1093
- }
1094
- });
1095
- const r = p, t = /* @__PURE__ */ n(x);
1096
- function n(a) {
1097
- return a && a.__esModule ? a : {
1098
- default: a
1099
- };
1100
- }
1101
- const o = (0, r.cloneDeep)(t.default.theme);
1102
- })(s);
1103
- let i = s;
1104
- var f = (i.__esModule ? i : { default: i }).default;
1105
- const h = {
1106
- theme: {
1107
- extend: {
1108
- colors: {
1109
- category: "hsl(var(--tf-category) / <alpha-value>)",
1110
- label: "hsl(var(--tf-label) / <alpha-value>)",
1111
- background: "hsl(var(--tf-background) / <alpha-value>)",
1112
- foreground: "hsl(var(--tf-foreground) / <alpha-value>)",
1113
- primary: {
1114
- DEFAULT: "hsl(var(--tf-primary) / <alpha-value>)",
1115
- foreground: "hsl(var(--tf-primary-foreground) / <alpha-value>)"
1116
- },
1117
- accent: {
1118
- DEFAULT: "hsl(var(--tf-accent) / <alpha-value>)",
1119
- foreground: "hsl(var(--tf-accent-foreground) / <alpha-value>)"
1120
- },
1121
- destructive: {
1122
- DEFAULT: "hsl(var(--tf-destructive) / <alpha-value>)",
1123
- foreground: "hsl(var(--tf-destructive-foreground) / <alpha-value>)"
1124
- },
1125
- muted: {
1126
- DEFAULT: "hsl(var(--tf-muted) / <alpha-value>)",
1127
- foreground: "hsl(var(--tf-muted-foreground) / <alpha-value>)"
1128
- },
1129
- input: "hsl(var(--tf-input) / <alpha-value>)",
1130
- ring: "hsl(var(--tf-ring) / <alpha-value>)"
1131
- },
1132
- borderRadius: {
1133
- lg: "var(--tf-radius)",
1134
- md: "calc(var(--tf-radius) - 2px)",
1135
- sm: "calc(var(--tf-radius) - 4px)"
1136
- },
1137
- fontFamily: {
1138
- "tf-font": ["var(--tf-font)", ...f.fontFamily.sans]
1139
- },
1140
- keyframes: {
1141
- "accordion-down": {
1142
- from: { height: "0" },
1143
- to: { height: "var(--radix-accordion-content-height)" }
1144
- },
1145
- "accordion-up": {
1146
- from: { height: "var(--radix-accordion-content-height)" },
1147
- to: { height: "0" }
1148
- }
1149
- },
1150
- animation: {
1151
- "accordion-down": "accordion-down 0.2s ease-out",
1152
- "accordion-up": "accordion-up 0.2s ease-out"
1153
- }
1154
- }
1155
- }
1156
- }, b = d({
1157
- theme: {
1158
- extend: h.theme.extend
1159
- },
1160
- presets: [g(), u()]
1161
- }), v = m(b), w = l(c, {
1162
- props: {
1163
- config: "json",
1164
- options: "json"
1165
- },
1166
- shadow: "open"
1167
- });
1168
- class y extends v(w) {
1169
- }
1170
- customElements.define("twintag-form", y);