@techsio/ui-kit 0.42.0 → 0.44.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 (26) hide show
  1. package/dist/molecules/cascade-select.js +508 -0
  2. package/dist/molecules/file-upload.js +369 -0
  3. package/dist/src/molecules/cascade-select.d.ts +231 -0
  4. package/dist/src/molecules/cascade-select.d.ts.map +1 -0
  5. package/dist/src/molecules/file-upload.d.ts +84 -0
  6. package/dist/src/molecules/file-upload.d.ts.map +1 -0
  7. package/dist/src/types/zag.d.ts +2 -0
  8. package/dist/src/types/zag.d.ts.map +1 -1
  9. package/dist/stories/changelog/changelog.stories.d.ts.map +1 -1
  10. package/dist/stories/molecules/cascade-select.stories.d.ts +254 -0
  11. package/dist/stories/molecules/cascade-select.stories.d.ts.map +1 -0
  12. package/dist/stories/molecules/file-upload.stories.d.ts +105 -0
  13. package/dist/stories/molecules/file-upload.stories.d.ts.map +1 -0
  14. package/dist/test/cascade-select.behavior.spec.d.ts +2 -0
  15. package/dist/test/cascade-select.behavior.spec.d.ts.map +1 -0
  16. package/package.json +3 -1
  17. package/src/tokens/components/components.css +2 -0
  18. package/src/tokens/components/molecules/_cascade-select.css +66 -0
  19. package/src/tokens/components/molecules/_file-upload.css +128 -0
  20. package/src/tokens/figma/brand-overrides.css +2 -2
  21. package/src/tokens/figma/business/variables.css +3 -2
  22. package/src/tokens/figma/dark/variables.css +1 -0
  23. package/src/tokens/figma/light/variables.css +3 -2
  24. package/src/tokens/figma/neo/variables.css +3 -2
  25. package/src/tokens/figma/neo-dark/variables.css +1 -0
  26. package/src/tokens/figma/variables.css +3 -2
package/src/tokens/components/molecules/_file-upload.css ADDED
@@ -0,0 +1,128 @@
1
+ /*
2
+ * FileUpload — supplementary runtime tokens until a File Upload collection is
3
+ * available in Figma. The visual contract intentionally has one default style
4
+ * with no public size or variant axis.
5
+ */
6
+
7
+ @theme static {
8
+ /* Reference layer */
9
+ --color-file-upload-surface: var(--color-fill-surface);
10
+ --color-file-upload-item-surface: var(--color-base);
11
+ --color-file-upload-surface-hover: var(--color-fill-hover);
12
+ --color-file-upload-accent: var(--color-primary);
13
+ --color-file-upload-accent-subtle: var(--color-primary-light);
14
+ --color-file-upload-content: var(--color-fg-primary);
15
+ --color-file-upload-outline: var(--color-border-primary);
16
+ --color-file-upload-danger: var(--color-danger);
17
+ --color-file-upload-disabled-surface: var(--color-bg-disabled);
18
+ --color-file-upload-disabled-content: var(--color-fg-disabled);
19
+ --color-file-upload-disabled-outline: var(--color-border-disabled);
20
+ --color-file-upload-focus: var(--color-ring-default);
21
+
22
+ --spacing-file-upload-comfortable: var(--spacing-250);
23
+ --spacing-file-upload-content-gap: var(--spacing-150);
24
+ --spacing-file-upload-item-preview-base: var(--spacing-450);
25
+ --spacing-file-upload-dropzone-base: var(--container-2xs);
26
+
27
+ /* Derived color layer */
28
+ --color-file-upload-dropzone-bg: var(--color-file-upload-surface);
29
+ --color-file-upload-dropzone-hover-bg: var(--color-file-upload-surface-hover);
30
+ --color-file-upload-dropzone-dragging-bg: var(
31
+ --color-file-upload-accent-subtle
32
+ );
33
+ --color-file-upload-dropzone-disabled-bg: var(
34
+ --color-file-upload-disabled-surface
35
+ );
36
+ --color-file-upload-dropzone-border: var(--color-file-upload-outline);
37
+ --color-file-upload-dropzone-dragging-border: var(--color-file-upload-accent);
38
+ --color-file-upload-dropzone-invalid-border: var(--color-file-upload-danger);
39
+ --color-file-upload-dropzone-disabled-border: var(
40
+ --color-file-upload-disabled-outline
41
+ );
42
+ --color-file-upload-label-fg: var(--color-file-upload-content);
43
+ --color-file-upload-label-disabled-fg: var(
44
+ --color-file-upload-disabled-content
45
+ );
46
+ --color-file-upload-item-bg: var(--color-file-upload-item-surface);
47
+ --color-file-upload-item-rejected-bg: var(--color-file-upload-item-surface);
48
+ --color-file-upload-item-border: var(--color-file-upload-outline);
49
+ --color-file-upload-item-rejected-border: var(--color-file-upload-danger);
50
+ --color-file-upload-item-name-fg: var(--color-file-upload-content);
51
+ --color-file-upload-item-size-fg: var(--color-file-upload-content);
52
+ --color-file-upload-item-preview-fg: var(--color-file-upload-content);
53
+ --color-file-upload-item-disabled-fg: var(
54
+ --color-file-upload-disabled-content
55
+ );
56
+ --color-file-upload-focus-border: var(--color-file-upload-focus);
57
+
58
+ /* Derived layout and typography layer */
59
+ --gap-file-upload-root: var(--spacing-file-upload-comfortable);
60
+ --gap-file-upload-dropzone: var(--spacing-file-upload-comfortable);
61
+ --gap-file-upload-item-group: var(--spacing-file-upload-content-gap);
62
+ --gap-file-upload-item: var(--spacing-file-upload-content-gap);
63
+ --padding-file-upload-dropzone: var(--spacing-file-upload-content-gap)
64
+ var(--spacing-file-upload-comfortable);
65
+ --padding-file-upload-item: var(--spacing-file-upload-content-gap);
66
+ --spacing-file-upload-dropzone-min-height: var(
67
+ --spacing-file-upload-dropzone-base
68
+ );
69
+ --spacing-file-upload-item-preview: var(
70
+ --spacing-file-upload-item-preview-base
71
+ );
72
+ --spacing-file-upload-focus-offset: var(--default-ring-offset);
73
+
74
+ --text-file-upload-label: var(--text-sm);
75
+ --text-file-upload-item: var(--text-md);
76
+ --text-file-upload-item-size: var(--text-md);
77
+ --font-weight-file-upload-label: var(--font-weight-medium);
78
+ --font-weight-file-upload-item-name: var(--font-weight-medium);
79
+
80
+ --radius-file-upload-dropzone: var(--radius-md);
81
+ --radius-file-upload-item: var(--radius-md);
82
+ --radius-file-upload-item-preview: var(--radius-sm);
83
+ --border-width-file-upload-dropzone: var(--border-width-md);
84
+ --border-width-file-upload-item: var(--border-width-sm);
85
+ --border-width-file-upload-focus: var(--default-ring-width);
86
+ }
87
+
88
+ @utility file-upload-focus {
89
+ outline: var(--border-width-file-upload-focus) var(--default-ring-style)
90
+ var(--color-file-upload-focus-border);
91
+ outline-offset: var(--spacing-file-upload-focus-offset);
92
+ }
93
+
94
+ @utility file-upload-dropzone-border-width {
95
+ border-width: var(--border-width-file-upload-dropzone);
96
+ }
97
+
98
+ @utility file-upload-item-border-width {
99
+ border-width: var(--border-width-file-upload-item);
100
+ }
101
+
102
+ @utility file-upload-dropzone-border-dashed {
103
+ border-style: dashed;
104
+ }
105
+
106
+ @utility file-upload-dropzone-border-solid {
107
+ border-style: solid;
108
+ }
109
+
110
+ @utility token-icon-file-upload-trigger {
111
+ @apply icon-[mdi--upload];
112
+ }
113
+
114
+ @utility token-icon-file-upload-preview {
115
+ @apply token-icon-file-document;
116
+ }
117
+
118
+ @utility token-icon-file-upload-image {
119
+ @apply icon-[mdi--file-image-outline];
120
+ }
121
+
122
+ @utility token-icon-file-upload-delete {
123
+ @apply token-icon-trash;
124
+ }
125
+
126
+ @utility token-icon-file-upload-clear {
127
+ @apply token-icon-close;
128
+ }
package/src/tokens/figma/brand-overrides.css CHANGED
@@ -133,8 +133,8 @@
133
133
  --color-fg-on-primary-solid-neo: var(--color-fg-reverse);
134
134
  --color-fg-primary: var(--color-slate-950);
135
135
  --color-fg-reverse: var(--color-white);
136
- --color-fg-status-error: var(--color-danger-400);
137
- --color-fg-status-success: var(--color-success-500);
136
+ --color-fg-status-error: var(--color-danger-600);
137
+ --color-fg-status-success: var(--color-success-700);
138
138
  --color-fg-status-warning: var(--color-warning-500);
139
139
  --color-fill-active: var(--color-black-15);
140
140
  --color-fill-base: var(--color-black-5);
package/src/tokens/figma/business/variables.css CHANGED
@@ -111,8 +111,8 @@
111
111
  --color-fg-primary: var(--color-slate-950);
112
112
  --color-fg-reverse: var(--color-white);
113
113
  --color-fg-secondary: oklch(0.494 0.037 261.595);
114
- --color-fg-status-error: var(--color-danger-400);
115
- --color-fg-status-success: var(--color-success-500);
114
+ --color-fg-status-error: var(--color-danger-600);
115
+ --color-fg-status-success: var(--color-success-700);
116
116
  --color-fg-status-warning: var(--color-warning-500);
117
117
  --color-fill-active: var(--color-black-15);
118
118
  --color-fill-base: var(--color-black-5);
@@ -189,6 +189,7 @@
189
189
  --color-success-300: oklch(0.871 0.136 154.449);
190
190
  --color-success-500: oklch(0.723 0.192 149.579);
191
191
  --color-success-600: oklch(0.627 0.17 149.214);
192
+ --color-success-700: oklch(0.527 0.137 150.069);
192
193
  --color-success-disabled: var(--color-bg-disabled);
193
194
  --color-tertiary: var(--color-bg-tertiary-base);
194
195
  --color-tertiary-100: oklch(0.963 0.021 301.149);
package/src/tokens/figma/dark/variables.css CHANGED
@@ -189,6 +189,7 @@
189
189
  --color-success-300: oklch(0.871 0.136 154.449);
190
190
  --color-success-500: oklch(0.723 0.192 149.579);
191
191
  --color-success-600: oklch(0.627 0.17 149.214);
192
+ --color-success-700: oklch(0.527 0.137 150.069);
192
193
  --color-success-disabled: var(--color-bg-disabled);
193
194
  --color-tertiary: var(--color-bg-tertiary-base);
194
195
  --color-tertiary-100: oklch(0.963 0.021 301.149);
package/src/tokens/figma/light/variables.css CHANGED
@@ -297,8 +297,8 @@
297
297
  --color-fg-primary: var(--color-slate-950);
298
298
  --color-fg-reverse: var(--color-white);
299
299
  --color-fg-secondary: oklch(0.494 0.037 261.595);
300
- --color-fg-status-error: var(--color-danger-400);
301
- --color-fg-status-success: var(--color-success-500);
300
+ --color-fg-status-error: var(--color-danger-600);
301
+ --color-fg-status-success: var(--color-success-700);
302
302
  --color-fg-status-warning: var(--color-warning-500);
303
303
  --color-fill-active: var(--color-black-15);
304
304
  --color-fill-base: var(--color-black-5);
@@ -732,6 +732,7 @@
732
732
  --color-success-300: oklch(0.871 0.136 154.449);
733
733
  --color-success-500: oklch(0.723 0.192 149.579);
734
734
  --color-success-600: oklch(0.627 0.17 149.214);
735
+ --color-success-700: oklch(0.527 0.137 150.069);
735
736
  --color-success-disabled: var(--color-bg-disabled);
736
737
  --color-switch-bg-base: var(--color-fill-overlay);
737
738
  --color-switch-bg-checked: var(--color-bg-success);
package/src/tokens/figma/neo/variables.css CHANGED
@@ -111,8 +111,8 @@
111
111
  --color-fg-primary: var(--color-slate-950);
112
112
  --color-fg-reverse: var(--color-white);
113
113
  --color-fg-secondary: oklch(0.494 0.037 261.595);
114
- --color-fg-status-error: var(--color-danger-400);
115
- --color-fg-status-success: var(--color-success-500);
114
+ --color-fg-status-error: var(--color-danger-600);
115
+ --color-fg-status-success: var(--color-success-700);
116
116
  --color-fg-status-warning: var(--color-warning-500);
117
117
  --color-fill-active: var(--color-black-15);
118
118
  --color-fill-base: var(--color-black-5);
@@ -189,6 +189,7 @@
189
189
  --color-success-300: oklch(0.871 0.136 154.449);
190
190
  --color-success-500: oklch(0.723 0.192 149.579);
191
191
  --color-success-600: oklch(0.627 0.17 149.214);
192
+ --color-success-700: oklch(0.527 0.137 150.069);
192
193
  --color-success-disabled: var(--color-bg-disabled);
193
194
  --color-tertiary: var(--color-bg-tertiary-base);
194
195
  --color-tertiary-100: oklch(0.963 0.021 301.149);
package/src/tokens/figma/neo-dark/variables.css CHANGED
@@ -189,6 +189,7 @@
189
189
  --color-success-300: oklch(0.871 0.136 154.449);
190
190
  --color-success-500: oklch(0.723 0.192 149.579);
191
191
  --color-success-600: oklch(0.627 0.17 149.214);
192
+ --color-success-700: oklch(0.527 0.137 150.069);
192
193
  --color-success-disabled: var(--color-bg-disabled);
193
194
  --color-tertiary: var(--color-bg-tertiary-base);
194
195
  --color-tertiary-100: oklch(0.963 0.021 301.149);
package/src/tokens/figma/variables.css CHANGED
@@ -359,8 +359,8 @@
359
359
  --color-fg-primary: light-dark(var(--color-slate-950), var(--color-white));
360
360
  --color-fg-reverse: light-dark(var(--color-white), var(--color-slate-950));
361
361
  --color-fg-secondary: oklch(0.494 0.037 261.595);
362
- --color-fg-status-error: light-dark(var(--color-danger-400), var(--color-danger-300));
363
- --color-fg-status-success: light-dark(var(--color-success-500), var(--color-success-300));
362
+ --color-fg-status-error: light-dark(var(--color-danger-600), var(--color-danger-300));
363
+ --color-fg-status-success: light-dark(var(--color-success-700), var(--color-success-300));
364
364
  --color-fg-status-warning: light-dark(var(--color-warning-500), var(--color-warning-400));
365
365
  --color-fill-active: light-dark(var(--color-black-15), var(--color-white-15));
366
366
  --color-fill-base: light-dark(var(--color-black-5), var(--color-white-5));
@@ -794,6 +794,7 @@
794
794
  --color-success-300: oklch(0.871 0.136 154.449);
795
795
  --color-success-500: oklch(0.723 0.192 149.579);
796
796
  --color-success-600: oklch(0.627 0.17 149.214);
797
+ --color-success-700: oklch(0.527 0.137 150.069);
797
798
  --color-success-disabled: var(--color-bg-disabled);
798
799
  --color-switch-bg-base: var(--color-fill-overlay);
799
800
  --color-switch-bg-checked: var(--color-bg-success);