@avento-space/ts-ui 1.2.5 → 1.2.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/README.md +1 -1
  2. package/dist/{card.wc-83Ws3o27.d.ts → card.wc-CLzyZAbJ.d.ts} +1 -1
  3. package/dist/{chunk-FPZL7HOP.js → chunk-2FE7DEDS.js} +4 -4
  4. package/dist/{chunk-FPZL7HOP.js.map → chunk-2FE7DEDS.js.map} +1 -1
  5. package/dist/{chunk-Q4KFLERV.js → chunk-C4GTD5ZH.js} +3 -3
  6. package/dist/{chunk-Q4KFLERV.js.map → chunk-C4GTD5ZH.js.map} +1 -1
  7. package/dist/{chunk-47AXL5HN.js → chunk-EDV6KYRZ.js} +3 -3
  8. package/dist/{chunk-47AXL5HN.js.map → chunk-EDV6KYRZ.js.map} +1 -1
  9. package/dist/{chunk-6Y6GA2QS.js → chunk-XN2J666Y.js} +26 -4
  10. package/dist/chunk-XN2J666Y.js.map +1 -0
  11. package/dist/components/index.d.ts +2 -10
  12. package/dist/components/index.js +2 -2
  13. package/dist/define.js +4 -4
  14. package/dist/icons/index.js +2 -2
  15. package/dist/index-DaqSE01_.d.ts +19 -0
  16. package/dist/index.d.ts +2 -2
  17. package/dist/index.js +4 -4
  18. package/dist/react/index.d.ts +1 -1
  19. package/package.json +8 -14
  20. package/tailwind-theme.css +293 -0
  21. package/dist/chunk-6Y6GA2QS.js.map +0 -1
  22. package/dist/slot.wc-BvIJg5UJ.d.ts +0 -11
  23. package/tailwind-plugin.cjs +0 -236
package/tailwind-plugin.cjs DELETED
@@ -1,236 +0,0 @@
1
- /**
2
- * @avento-space/ts-ui — Tailwind CSS Plugin
3
- * ==========================================
4
- *
5
- * Maps every `--u-*` design token to a corresponding Tailwind utility class so
6
- * that developers get autocomplete, consistent naming, and Tailwind‑native
7
- * syntax when styling Avento components.
8
- *
9
- * IMPORTANT — Shadow DOM caveat
10
- * ------------------------------
11
- * These utilities reference `var(--u-*)` under the hood. They are designed to
12
- * be used INSIDE `::part()` selectors within a `@layer components` block, NOT
13
- * as `className` props passed directly to React wrapper components.
14
- *
15
- * ✅ Correct — inside a stylesheet:
16
- * @layer components {
17
- * u-button::part(button) {
18
- * @apply bg-primary text-white rounded-md font-bold;
19
- * }
20
- * }
21
- *
22
- * ❌ Wrong — does NOT penetrate the shadow root:
23
- * <Button className="bg-primary text-white" />
24
- *
25
- * See docs/theming.md §7 (Optional Tailwind Plugin) for full details.
26
- *
27
- * Usage
28
- * -----
29
- * // tailwind.config.js
30
- * module.exports = {
31
- * plugins: [
32
- * require('@avento-space/ts-ui/tailwind-plugin'),
33
- * ],
34
- * };
35
- *
36
- * No runtime dependencies beyond tailwindcss itself.
37
- *
38
- * Dark mode
39
- * ---------
40
- * The library ships its own dark-theme engine via `--u-color-*` tokens on
41
- * `:root` with `@media (prefers-color-scheme: dark)` and a `data-theme`
42
- * attribute override. Token values switch automatically, so every
43
- * `var(--u-color-*)` reference — including those emitted by this plugin's
44
- * theme extensions — picks up the correct value in both themes without
45
- * any extra configuration.
46
- *
47
- * If you use Tailwind's own `dark:` variant, choose the **`selector`**
48
- * strategy (instead of `media`) and synchronise Tailwind's toggle class
49
- * with the library's `data-theme` attribute so they stay in lockstep:
50
- *
51
- * // tailwind.config.js
52
- * module.exports = {
53
- * darkMode: 'selector',
54
- * // ...
55
- * };
56
- *
57
- * // Then in your app, whenever you call setTheme('dark') the library
58
- * // sets data-theme="dark" on <html>. Tell Tailwind to listen for
59
- * // the same selector:
60
- * module.exports = {
61
- * darkMode: ['selector', '[data-theme="dark"]'],
62
- * plugins: [require('@avento-space/ts-ui/tailwind-plugin')],
63
- * };
64
- *
65
- * In this configuration Tailwind's `dark:*` utilities activate exactly
66
- * when the library is in dark mode, so your `::part()` styles stay in
67
- * sync with the component themes.
68
- */
69
-
70
- const plugin = require('tailwindcss/plugin');
71
-
72
- // ── Colour tokens ──────────────────────────────────────────────────────────
73
- const colors = {
74
- primary: 'var(--u-color-primary)',
75
- 'primary-hover': 'var(--u-color-primary-hover)',
76
- 'primary-text': 'var(--u-color-primary-text)',
77
- danger: 'var(--u-color-danger)',
78
- 'danger-hover': 'var(--u-color-danger-hover)',
79
- success: 'var(--u-color-success)',
80
- warning: 'var(--u-color-warning)',
81
- info: 'var(--u-color-info)',
82
- text: 'var(--u-color-text)',
83
- 'text-secondary': 'var(--u-color-text-secondary)',
84
- 'text-muted': 'var(--u-color-text-muted)',
85
- 'text-disabled': 'var(--u-color-text-disabled)',
86
- border: 'var(--u-color-border)',
87
- 'border-light': 'var(--u-color-border-light)',
88
- 'border-lighter': 'var(--u-color-border-lighter)',
89
- bg: 'var(--u-color-bg)',
90
- 'bg-muted': 'var(--u-color-bg-muted)',
91
- 'bg-hover': 'var(--u-color-bg-hover)',
92
- 'bg-hover-strong':'var(--u-color-bg-hover-strong)',
93
- 'bg-selected': 'var(--u-color-bg-selected)',
94
- focus: 'var(--u-color-focus)',
95
- overlay: 'var(--u-color-overlay)',
96
- white: 'var(--u-color-white)',
97
- 'tooltip-bg': 'var(--u-color-tooltip-bg)',
98
- 'success-bg': 'var(--u-color-success-bg)',
99
- 'success-text': 'var(--u-color-success-text)',
100
- 'warning-bg': 'var(--u-color-warning-bg)',
101
- 'warning-text': 'var(--u-color-warning-text)',
102
- 'danger-bg': 'var(--u-color-danger-bg)',
103
- 'danger-text': 'var(--u-color-danger-text)',
104
- 'info-bg': 'var(--u-color-info-bg)',
105
- 'info-text': 'var(--u-color-info-text)',
106
- };
107
-
108
- // ── Border radius tokens ───────────────────────────────────────────────────
109
- const borderRadius = {
110
- xs: 'var(--u-radius-xs)',
111
- sm: 'var(--u-radius-sm)',
112
- md: 'var(--u-radius-md)',
113
- lg: 'var(--u-radius-lg)',
114
- xl: 'var(--u-radius-xl)',
115
- '2xl': 'var(--u-radius-2xl)',
116
- full: 'var(--u-radius-full)',
117
- round: 'var(--u-radius-round)',
118
- };
119
-
120
- // ── Font-size tokens ───────────────────────────────────────────────────────
121
- const fontSize = {
122
- tiny: 'var(--u-font-tiny)',
123
- '2xs':'var(--u-font-2xs)',
124
- xs: 'var(--u-font-xs)',
125
- sm: 'var(--u-font-sm)',
126
- md: 'var(--u-font-md)',
127
- lg: 'var(--u-font-lg)',
128
- xl: 'var(--u-font-xl)',
129
- '2xl':'var(--u-font-2xl)',
130
- '3xl':'var(--u-font-3xl)',
131
- };
132
-
133
- // ── Font-weight tokens ─────────────────────────────────────────────────────
134
- const fontWeight = {
135
- normal: 'var(--u-font-weight-normal)',
136
- medium: 'var(--u-font-weight-medium)',
137
- semibold: 'var(--u-font-weight-semibold)',
138
- bold: 'var(--u-font-weight-bold)',
139
- };
140
-
141
- // ── Line-height tokens ─────────────────────────────────────────────────────
142
- const lineHeight = {
143
- none: 'var(--u-line-height-none)',
144
- tight: 'var(--u-line-height-tight)',
145
- sm: 'var(--u-line-height-sm)',
146
- md: 'var(--u-line-height-md)',
147
- lg: 'var(--u-line-height-lg)',
148
- };
149
-
150
- // ── Letter-spacing tokens ──────────────────────────────────────────────────
151
- const letterSpacing = {
152
- wide: 'var(--u-letter-spacing-wide)',
153
- };
154
-
155
- // ── Spacing tokens ─────────────────────────────────────────────────────────
156
- const spacing = {
157
- '05': 'var(--u-spacing-05)',
158
- '1': 'var(--u-spacing-1)',
159
- '2': 'var(--u-spacing-2)',
160
- '3': 'var(--u-spacing-3)',
161
- '4': 'var(--u-spacing-4)',
162
- '5': 'var(--u-spacing-5)',
163
- '6': 'var(--u-spacing-6)',
164
- '8': 'var(--u-spacing-8)',
165
- };
166
-
167
- // ── Box-shadow tokens ──────────────────────────────────────────────────────
168
- const boxShadow = {
169
- sm: 'var(--u-shadow-sm)',
170
- md: 'var(--u-shadow-md)',
171
- lg: 'var(--u-shadow-lg)',
172
- xl: 'var(--u-shadow-xl)',
173
- focus: 'var(--u-shadow-focus)',
174
- tooltip: 'var(--u-shadow-tooltip)',
175
- drawer: 'var(--u-shadow-drawer)',
176
- thumb: 'var(--u-shadow-thumb)',
177
- combobox: 'var(--u-shadow-combobox)',
178
- calendar: 'var(--u-shadow-calendar)',
179
- 'command-palette':'var(--u-shadow-command-palette)',
180
- };
181
-
182
- // ── z-index tokens ─────────────────────────────────────────────────────────
183
- const zIndex = {
184
- backdrop: 'var(--u-z-backdrop)',
185
- modal: 'var(--u-z-modal)',
186
- 'command-palette': 'var(--u-z-command-palette)',
187
- dropdown: 'var(--u-z-dropdown)',
188
- drag: 'var(--u-z-drag)',
189
- toast: 'var(--u-z-toast)',
190
- };
191
-
192
- // ── Opacity tokens ─────────────────────────────────────────────────────────
193
- const opacity = {
194
- disabled: 'var(--u-opacity-disabled)',
195
- muted: 'var(--u-opacity-muted)',
196
- fade: 'var(--u-opacity-fade)',
197
- };
198
-
199
- // ── Transition-duration tokens ─────────────────────────────────────────────
200
- const transitionDuration = {
201
- fast: 'var(--u-transition-fast)',
202
- base: 'var(--u-transition-base)',
203
- slow: 'var(--u-transition-slow)',
204
- slower: 'var(--u-transition-slower)',
205
- };
206
-
207
- // ── Blur tokens ────────────────────────────────────────────────────────────
208
- // NOTE: overrides Tailwind's default backdrop-blur (8px) with the library's
209
- // value (4px). Omit or adjust if you need the original default.
210
- const backdropBlur = {
211
- DEFAULT: 'var(--u-blur)',
212
- };
213
-
214
- module.exports = plugin(
215
- function () {
216
- // No custom utilities needed — all values are theme extensions.
217
- },
218
- {
219
- theme: {
220
- extend: {
221
- colors,
222
- borderRadius,
223
- fontSize,
224
- fontWeight,
225
- lineHeight,
226
- letterSpacing,
227
- spacing,
228
- boxShadow,
229
- zIndex,
230
- opacity,
231
- transitionDuration,
232
- backdropBlur,
233
- },
234
- },
235
- },
236
- );