@rockshin/tao-ui 0.0.5 → 0.0.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 (16) hide show
  1. package/dist/components/button/button.css +8 -3
  2. package/dist/components/date-picker/date-picker.css +2 -0
  3. package/dist/components/select/select.css +43 -10
  4. package/dist/components/select/select.js +26 -3
  5. package/dist/components/table/table.css +46 -6
  6. package/dist/components/table/table.d.ts +5 -3
  7. package/dist/components/table/table.js +2 -2
  8. package/dist/components/tag/tag.css +88 -33
  9. package/dist/components/tag/tag.d.ts +1 -1
  10. package/dist/components/tag/tag.js +99 -79
  11. package/dist/components/textarea/textarea.css +1 -0
  12. package/dist/index.d.ts +1 -1
  13. package/dist/provider/tao-provider.js +25 -7
  14. package/dist/theme/control.css +9 -12
  15. package/dist/theme/theme.css +13 -8
  16. package/package.json +1 -1
package/dist/components/button/button.css CHANGED
@@ -3,15 +3,17 @@ button[data-tao-variant] {
3
3
  align-items: center;
4
4
  gap: var(--tao-padding-xs);
5
5
  font-family: var(--tao-font-family);
6
- font-weight: var(--tao-font-weight-normal);
6
+ font-weight: var(--tao-font-weight-medium);
7
7
  border: var(--tao-line-width) solid transparent;
8
8
  cursor: pointer;
9
9
  -webkit-user-select: none;
10
10
  user-select: none;
11
11
  white-space: nowrap;
12
12
  transition: background-color var(--tao-motion-duration-fast) var(--tao-motion-ease-out),
13
- border-color var(--tao-motion-duration-fast) var(--tao-motion-ease-out);
13
+ border-color var(--tao-motion-duration-fast) var(--tao-motion-ease-out),
14
+ box-shadow var(--tao-motion-duration-fast) var(--tao-motion-ease-out);
14
15
  outline: none;
16
+ line-height: 1;
15
17
  display: inline-flex;
16
18
  }
17
19
 
@@ -39,6 +41,7 @@ button[data-tao-size="large"] {
39
41
  button[data-tao-variant="primary"] {
40
42
  background: var(--tao-primary);
41
43
  color: var(--tao-primary-fg);
44
+ box-shadow: var(--tao-box-shadow-xs);
42
45
  }
43
46
 
44
47
  button[data-tao-variant="primary"]:hover:not(:disabled) {
@@ -52,6 +55,7 @@ button[data-tao-variant="primary"]:active:not(:disabled) {
52
55
  button[data-tao-variant="secondary"] {
53
56
  color: var(--tao-color-text);
54
57
  border-color: var(--tao-color-border);
58
+ box-shadow: var(--tao-box-shadow-xs);
55
59
  background: none;
56
60
  }
57
61
 
@@ -81,6 +85,7 @@ button[data-tao-variant="ghost"]:active:not(:disabled) {
81
85
  button[data-tao-variant="destructive"] {
82
86
  background: var(--tao-error);
83
87
  color: var(--tao-error-fg);
88
+ box-shadow: var(--tao-box-shadow-xs);
84
89
  }
85
90
 
86
91
  button[data-tao-variant="destructive"]:hover:not(:disabled) {
@@ -97,7 +102,7 @@ button[data-tao-variant]:disabled {
97
102
  }
98
103
 
99
104
  button[data-tao-variant]:focus-visible {
100
- box-shadow: 0 0 0 2px var(--tao-control-outline);
105
+ box-shadow: 0 0 0 var(--tao-ring-width) var(--tao-control-outline);
101
106
  outline: none;
102
107
  }
103
108
 
package/dist/components/date-picker/date-picker.css CHANGED
@@ -1,6 +1,7 @@
1
1
  button[data-tao-picker-trigger] {
2
2
  align-items: center;
3
3
  gap: var(--tao-padding-xs);
4
+ width: 100%;
4
5
  font-family: var(--tao-font-family);
5
6
  cursor: pointer;
6
7
  appearance: none;
@@ -536,6 +537,7 @@ button[data-tao-picker-footer-btn][data-tao-primary]:hover {
536
537
  }
537
538
 
538
539
  button[data-tao-range-trigger] {
540
+ width: 100%;
539
541
  font-family: var(--tao-font-family);
540
542
  cursor: pointer;
541
543
  appearance: none;
package/dist/components/select/select.css CHANGED
@@ -1,7 +1,24 @@
1
1
  [data-tao-select] {
2
- align-items: center;
2
+ --tao-select-height: var(--tao-control-height);
3
+ --tao-select-font-size: var(--tao-font-size-base);
4
+ --tao-select-line-height: var(--tao-line-height);
5
+ --tao-select-padding-inline: var(--tao-padding-sm);
6
+ --tao-select-padding-block: calc((
7
+ var(--tao-select-height) -
8
+ var(--tao-select-font-size) *
9
+ var(--tao-select-line-height)
10
+ ) /
11
+ 2 -
12
+ var(--tao-line-width));
13
+ align-items: flex-start;
3
14
  gap: var(--tao-padding-xs);
15
+ width: 100%;
4
16
  font-family: var(--tao-font-family);
17
+ font-size: var(--tao-select-font-size);
18
+ line-height: var(--tao-select-line-height);
19
+ height: var(--tao-select-height);
20
+ padding-block: max(var(--tao-select-padding-block), 0px);
21
+ padding-inline: var(--tao-select-padding-inline);
5
22
  cursor: pointer;
6
23
  outline: none;
7
24
  display: flex;
@@ -17,39 +34,44 @@ button[data-tao-select] {
17
34
  white-space: nowrap;
18
35
  min-width: 0;
19
36
  color: var(--tao-color-text);
37
+ line-height: var(--tao-select-line-height);
20
38
  flex: 1;
39
+ align-self: center;
40
+ display: block;
21
41
  overflow: hidden;
22
42
  }
23
43
 
24
44
  [data-tao-select-placeholder] {
25
45
  color: var(--tao-color-text-placeholder);
46
+ line-height: var(--tao-select-line-height);
26
47
  }
27
48
 
28
49
  [data-tao-select][data-tao-size="small"] {
29
- height: var(--tao-control-height-sm);
30
- padding-inline: var(--tao-padding-xs);
31
- font-size: var(--tao-font-size-sm);
50
+ --tao-select-height: var(--tao-control-height-sm);
51
+ --tao-select-font-size: var(--tao-font-size-sm);
52
+ --tao-select-line-height: var(--tao-line-height-sm);
53
+ --tao-select-padding-inline: var(--tao-padding-xs);
32
54
  border-radius: var(--tao-radius-sm);
33
55
  }
34
56
 
35
57
  [data-tao-select][data-tao-size="medium"] {
36
- height: var(--tao-control-height);
37
- padding-inline: var(--tao-padding-sm);
38
- font-size: var(--tao-font-size-base);
39
58
  border-radius: var(--tao-radius-md);
40
59
  }
41
60
 
42
61
  [data-tao-select][data-tao-size="large"] {
43
- height: var(--tao-control-height-lg);
44
- padding-inline: var(--tao-padding-sm);
45
- font-size: var(--tao-font-size-lg);
62
+ --tao-select-height: var(--tao-control-height-lg);
63
+ --tao-select-font-size: var(--tao-font-size-lg);
64
+ --tao-select-line-height: var(--tao-line-height-lg);
46
65
  border-radius: var(--tao-radius-md);
47
66
  }
48
67
 
49
68
  [data-tao-select-prefix] {
50
69
  color: var(--tao-color-text-tertiary);
51
70
  flex-shrink: 0;
71
+ justify-content: center;
72
+ align-self: center;
52
73
  align-items: center;
74
+ line-height: 0;
53
75
  display: flex;
54
76
  }
55
77
 
@@ -57,6 +79,7 @@ button[data-tao-select] {
57
79
  border-radius: var(--tao-radius-sm);
58
80
  flex: none;
59
81
  justify-content: center;
82
+ align-self: center;
60
83
  align-items: center;
61
84
  width: 1.25rem;
62
85
  height: 1.25rem;
@@ -72,9 +95,12 @@ button[data-tao-select] {
72
95
 
73
96
  [data-tao-select-icons] {
74
97
  flex-shrink: 0;
98
+ justify-content: center;
99
+ align-self: center;
75
100
  align-items: center;
76
101
  gap: 4px;
77
102
  margin-inline-start: auto;
103
+ line-height: 0;
78
104
  display: flex;
79
105
  position: relative;
80
106
  }
@@ -166,14 +192,17 @@ button[data-tao-select] {
166
192
  [data-tao-select-search] {
167
193
  align-items: center;
168
194
  gap: var(--tao-padding-xs);
195
+ min-height: var(--tao-control-height);
169
196
  padding: var(--tao-padding-xs) var(--tao-padding-sm);
170
197
  border-block-end: var(--tao-line-width) solid
171
198
  var(--tao-color-border-secondary);
172
199
  color: var(--tao-color-text-tertiary);
200
+ line-height: 1;
173
201
  display: flex;
174
202
  }
175
203
 
176
204
  [data-tao-select-search-input] {
205
+ height: calc(var(--tao-control-height) - var(--tao-padding-xs) * 2);
177
206
  font-family: var(--tao-font-family);
178
207
  font-size: var(--tao-font-size-base);
179
208
  color: var(--tao-color-text);
@@ -182,6 +211,7 @@ button[data-tao-select] {
182
211
  outline: none;
183
212
  flex: 1;
184
213
  min-width: 0;
214
+ line-height: 1;
185
215
  }
186
216
 
187
217
  [data-tao-select-search-input]::placeholder {
@@ -220,6 +250,7 @@ button[data-tao-select] {
220
250
  var(--tao-motion-ease-out);
221
251
  outline: none;
222
252
  align-items: center;
253
+ line-height: 1;
223
254
  display: flex;
224
255
  }
225
256
 
@@ -264,7 +295,9 @@ button[data-tao-select] {
264
295
  [data-tao-select-item-main] {
265
296
  flex-direction: column;
266
297
  flex: 1;
298
+ justify-content: center;
267
299
  min-width: 0;
300
+ line-height: 1;
268
301
  display: flex;
269
302
  }
270
303
 
package/dist/components/select/select.js CHANGED
@@ -95,8 +95,7 @@ function Select(props) {
95
95
  isSearchControlled,
96
96
  onSearch
97
97
  ]);
98
- const handleClear = useCallback((e)=>{
99
- e.stopPropagation();
98
+ const clearValue = useCallback(()=>{
100
99
  if (!isValueControlled) setValueInternal(void 0);
101
100
  onChange?.('', void 0);
102
101
  onClear?.();
@@ -105,6 +104,12 @@ function Select(props) {
105
104
  onChange,
106
105
  onClear
107
106
  ]);
107
+ const handleClear = useCallback((e)=>{
108
+ e.stopPropagation();
109
+ clearValue();
110
+ }, [
111
+ clearValue
112
+ ]);
108
113
  const filteredOptions = useMemo(()=>{
109
114
  if (!showSearch || !search) return options;
110
115
  const fn = filterOption ?? defaultFilter;
@@ -141,7 +146,15 @@ function Select(props) {
141
146
  style: styles?.clear,
142
147
  onPointerDown: (e_0)=>e_0.stopPropagation(),
143
148
  onClick: handleClear,
149
+ onKeyDown: (e_1)=>{
150
+ if ('Enter' === e_1.key || ' ' === e_1.key) {
151
+ e_1.preventDefault();
152
+ e_1.stopPropagation();
153
+ clearValue();
154
+ }
155
+ },
144
156
  role: "button",
157
+ tabIndex: 0,
145
158
  "aria-label": "Clear",
146
159
  children: clearIcon
147
160
  }) : /*#__PURE__*/ jsx("span", {
@@ -293,7 +306,7 @@ function Select(props) {
293
306
  /*#__PURE__*/ jsx("input", {
294
307
  "data-tao-select-search-input": "",
295
308
  value: search,
296
- onChange: (e_1)=>handleSearchChange(e_1.target.value),
309
+ onChange: (e_2)=>handleSearchChange(e_2.target.value),
297
310
  placeholder: "Search...",
298
311
  autoFocus: true
299
312
  })
@@ -389,6 +402,8 @@ function ChevronDownIcon() {
389
402
  strokeWidth: "2",
390
403
  strokeLinecap: "round",
391
404
  strokeLinejoin: "round",
405
+ "aria-hidden": "true",
406
+ role: "presentation",
392
407
  children: /*#__PURE__*/ jsx("path", {
393
408
  d: "m6 9 6 6 6-6"
394
409
  })
@@ -432,6 +447,8 @@ function CheckIcon() {
432
447
  strokeWidth: "2.5",
433
448
  strokeLinecap: "round",
434
449
  strokeLinejoin: "round",
450
+ "aria-hidden": "true",
451
+ role: "presentation",
435
452
  children: /*#__PURE__*/ jsx("polyline", {
436
453
  points: "20 6 9 17 4 12"
437
454
  })
@@ -453,6 +470,8 @@ function CloseIcon() {
453
470
  strokeWidth: "2",
454
471
  strokeLinecap: "round",
455
472
  strokeLinejoin: "round",
473
+ "aria-hidden": "true",
474
+ role: "presentation",
456
475
  children: /*#__PURE__*/ jsx("path", {
457
476
  d: "M18 6 6 18M6 6l12 12"
458
477
  })
@@ -474,6 +493,8 @@ function SearchIcon() {
474
493
  strokeWidth: "2",
475
494
  strokeLinecap: "round",
476
495
  strokeLinejoin: "round",
496
+ "aria-hidden": "true",
497
+ role: "presentation",
477
498
  children: [
478
499
  /*#__PURE__*/ jsx("circle", {
479
500
  cx: "11",
@@ -503,6 +524,8 @@ function LoadingIcon() {
503
524
  strokeWidth: "2",
504
525
  strokeLinecap: "round",
505
526
  strokeLinejoin: "round",
527
+ "aria-hidden": "true",
528
+ role: "presentation",
506
529
  children: /*#__PURE__*/ jsx("path", {
507
530
  d: "M21 12a9 9 0 1 1-6.219-8.56"
508
531
  })
package/dist/components/table/table.css CHANGED
@@ -4,19 +4,29 @@
4
4
  --tao-table-cell-bg: transparent;
5
5
  --tao-table-header-bg: transparent;
6
6
  --tao-table-header-color: var(--tao-color-text-secondary);
7
- --tao-table-row-hover-bg: oklch(0% 0 0 / .02);
7
+ --tao-table-row-hover-bg: #fafafa;
8
8
  --tao-table-row-selected-bg: oklch(0% 0 0 / .05);
9
9
  --tao-table-row-selected-hover-bg: oklch(0% 0 0 / .07);
10
+ --tao-table-border-color: var(--tao-color-border-secondary);
11
+ --tao-table-frame-radius: var(--tao-radius-md);
10
12
  position: relative;
11
13
  }
12
14
 
13
15
  [data-tao-table-wrapper][data-tao-variant="filled"], [data-tao-table-wrapper][data-tao-variant="outlined"] {
14
16
  --tao-table-header-bg: oklch(98.5% 0 0);
15
- --tao-table-row-hover-bg: oklch(98.5% 0 0);
16
17
  --tao-table-row-selected-bg: var(--tao-primary-bg);
17
18
  --tao-table-row-selected-hover-bg: var(--tao-primary-bg-hover);
18
19
  }
19
20
 
21
+ [data-tao-table-wrapper][data-tao-variant="modern"] {
22
+ --tao-table-header-bg: var(--tao-color-bg-container);
23
+ --tao-table-header-color: var(--tao-color-text-secondary);
24
+ --tao-table-row-selected-bg: var(--tao-primary-bg);
25
+ --tao-table-row-selected-hover-bg: var(--tao-primary-bg-hover);
26
+ --tao-table-border-color: var(--tao-color-border);
27
+ --tao-table-frame-radius: var(--tao-radius-md);
28
+ }
29
+
20
30
  [data-tao-table-wrapper][data-tao-header-bg="off"] {
21
31
  --tao-table-header-bg: transparent;
22
32
  }
@@ -26,6 +36,12 @@
26
36
  overflow-x: auto;
27
37
  }
28
38
 
39
+ [data-tao-table-wrapper][data-tao-variant="modern"] [data-tao-table-scroll] {
40
+ border: var(--tao-line-width) solid var(--tao-table-border-color);
41
+ border-radius: var(--tao-table-frame-radius);
42
+ background: var(--tao-color-bg-container);
43
+ }
44
+
29
45
  [data-tao-table] {
30
46
  border-collapse: collapse;
31
47
  table-layout: auto;
@@ -39,7 +55,7 @@
39
55
  [data-tao-table-cell] {
40
56
  padding: var(--tao-padding-sm) var(--tao-padding);
41
57
  text-align: left;
42
- border-bottom: var(--tao-line-width) solid var(--tao-color-border-secondary);
58
+ border-bottom: var(--tao-line-width) solid var(--tao-table-border-color);
43
59
  background: var(--tao-table-cell-bg);
44
60
  transition: background-color var(--tao-motion-duration-fast)
45
61
  var(--tao-motion-ease-out);
@@ -66,12 +82,24 @@
66
82
  white-space: nowrap;
67
83
  }
68
84
 
85
+ [data-tao-table-wrapper][data-tao-variant="modern"] [data-tao-table-thead] [data-tao-table-cell] {
86
+ font-size: var(--tao-font-size-sm);
87
+ }
88
+
69
89
  [data-tao-table-header-content] {
70
90
  align-items: center;
71
91
  gap: var(--tao-padding-xxs);
72
92
  display: flex;
73
93
  }
74
94
 
95
+ [data-tao-table-cell][data-tao-align="center"] [data-tao-table-header-content] {
96
+ justify-content: center;
97
+ }
98
+
99
+ [data-tao-table-cell][data-tao-align="right"] [data-tao-table-header-content] {
100
+ justify-content: flex-end;
101
+ }
102
+
75
103
  [data-tao-table-header-title] {
76
104
  align-items: center;
77
105
  gap: 2px;
@@ -277,18 +305,30 @@
277
305
  }
278
306
 
279
307
  [data-tao-table-wrapper][data-tao-bordered] [data-tao-table] {
280
- border: var(--tao-line-width) solid var(--tao-color-border-secondary);
281
- border-radius: var(--tao-radius-md);
308
+ border: var(--tao-line-width) solid var(--tao-table-border-color);
309
+ border-radius: var(--tao-table-frame-radius);
282
310
  }
283
311
 
284
312
  [data-tao-table-wrapper][data-tao-bordered] [data-tao-table-cell] {
285
- border-right: var(--tao-line-width) solid var(--tao-color-border-secondary);
313
+ border-right: var(--tao-line-width) solid var(--tao-table-border-color);
286
314
  }
287
315
 
288
316
  [data-tao-table-wrapper][data-tao-bordered] tr > [data-tao-table-cell]:last-child {
289
317
  border-right: none;
290
318
  }
291
319
 
320
+ [data-tao-table-wrapper][data-tao-variant="modern"][data-tao-bordered] [data-tao-table] {
321
+ border: none;
322
+ }
323
+
324
+ [data-tao-table-wrapper][data-tao-variant="modern"][data-tao-bordered] [data-tao-table-cell] {
325
+ border-right: none;
326
+ }
327
+
328
+ [data-tao-table-wrapper][data-tao-variant="modern"] [data-tao-table-tbody] tr:last-child [data-tao-table-cell] {
329
+ border-bottom: none;
330
+ }
331
+
292
332
  [data-tao-table-wrapper][data-tao-size="small"] [data-tao-table-cell] {
293
333
  padding: var(--tao-padding-xxs) var(--tao-padding-xs);
294
334
  font-size: var(--tao-font-size-sm);
package/dist/components/table/table.d.ts CHANGED
@@ -3,6 +3,7 @@ import { type TaoSize, type TaoVariant } from '../../provider/tao-provider';
3
3
  import { type SemanticClassNames, type SemanticStyles } from '../../utils/semantic';
4
4
  import './table.css';
5
5
  export type TableSemanticPart = 'root' | 'header.cell' | 'body.row' | 'body.cell' | 'pagination';
6
+ export type TableVariant = TaoVariant | 'modern';
6
7
  export type SortOrder = 'ascend' | 'descend' | null;
7
8
  export interface TableFilterItem {
8
9
  text: ReactNode;
@@ -67,13 +68,14 @@ export interface TableProps<T = any> {
67
68
  /**
68
69
  * 表面风格。
69
70
  * - `borderless`（极简）：无表头底色、单元格透明、仅行底分隔线。
70
- * - `filled`：表头灰底（库的默认表现）。
71
+ * - `filled`：表头灰底。
71
72
  * - `outlined`：filled + 整体外框 + 列分隔线。
73
+ * - `modern`：轻外框、圆角、克制表头，更接近 shadcn 的表格视觉。
72
74
  *
73
75
  * 不传时继承 TaoProvider 的 variant；当继承到框架默认 `outlined` 时，
74
- * Table 回落为 `filled` 以保持向后兼容（裸用 `<Table>` 仍是灰底表头）。
76
+ * Table 回落为 `modern`，让裸用 `<Table>` 默认呈现现代轻外框风格。
75
77
  */
76
- variant?: TaoVariant;
78
+ variant?: TableVariant;
77
79
  /**
78
80
  * 表头灰底开关，默认 `true`。设为 `false` 关掉表头底色（极简表头），
79
81
  * 不影响外框 / 列分隔线等其它 variant 表现。
package/dist/components/table/table.js CHANGED
@@ -297,8 +297,8 @@ function Table(t0) {
297
297
  const bordered = void 0 === t4 ? false : t4;
298
298
  const ctx = useTaoConfig();
299
299
  const resolvedSize = size ?? ctx.size;
300
- const resolvedVariant = variant ?? ("outlined" === ctx.variant ? "filled" : ctx.variant);
301
- const showBorder = "outlined" === resolvedVariant || bordered && "borderless" !== resolvedVariant;
300
+ const resolvedVariant = variant ?? ("outlined" === ctx.variant ? "modern" : ctx.variant);
301
+ const showBorder = "outlined" === resolvedVariant || "modern" === resolvedVariant || bordered && "borderless" !== resolvedVariant;
302
302
  let defaultSortCol;
303
303
  let t5;
304
304
  let t6;
package/dist/components/tag/tag.css CHANGED
@@ -1,48 +1,79 @@
1
1
  [data-tao-tag] {
2
+ box-sizing: border-box;
3
+ min-height: calc(var(--tao-font-size-xs) *
4
+ var(--tao-line-height-sm) +
5
+ var(--tao-line-width) *
6
+ 2);
2
7
  font-family: var(--tao-font-family);
3
8
  font-size: var(--tao-font-size-xs);
4
- font-weight: var(--tao-font-weight-medium);
5
- border-radius: var(--tao-radius-sm);
9
+ font-weight: var(--tao-font-weight-strong);
10
+ line-height: var(--tao-line-height-sm);
11
+ border-radius: var(--tao-radius-md);
6
12
  border: var(--tao-line-width) solid transparent;
7
13
  white-space: nowrap;
8
14
  cursor: default;
9
15
  -webkit-user-select: none;
10
16
  user-select: none;
17
+ box-shadow: none;
11
18
  transition: background-color var(--tao-motion-duration-fast) var(--tao-motion-ease-out),
12
19
  border-color var(--tao-motion-duration-fast) var(--tao-motion-ease-out),
13
20
  color var(--tao-motion-duration-fast) var(--tao-motion-ease-out),
21
+ box-shadow var(--tao-motion-duration-fast) var(--tao-motion-ease-out),
14
22
  opacity var(--tao-motion-duration-fast) var(--tao-motion-ease-out);
23
+ justify-content: center;
15
24
  align-items: center;
16
- gap: 4px;
17
- padding: 3px 8px;
18
- line-height: 1;
25
+ gap: 6px;
26
+ padding-block: 0;
27
+ padding-inline: 8px;
19
28
  display: inline-flex;
20
29
  }
21
30
 
22
31
  [data-tao-tag-icon] {
32
+ flex: none;
33
+ justify-content: center;
34
+ align-items: center;
35
+ font-size: 12px;
36
+ line-height: 0;
37
+ display: inline-flex;
38
+ }
39
+
40
+ [data-tao-tag-content] {
41
+ line-height: inherit;
23
42
  align-items: center;
24
- font-size: 14px;
25
43
  display: inline-flex;
26
44
  }
27
45
 
46
+ [data-tao-tag]:not([data-tao-closable]) [data-tao-tag-content] {
47
+ transform: translateY(-.03em);
48
+ }
49
+
28
50
  [data-tao-tag-close] {
29
51
  cursor: pointer;
30
- border-radius: var(--tao-radius-xs);
31
- opacity: .6;
32
- transition: opacity var(--tao-motion-duration-fast) var(--tao-motion-ease-out),
33
- background-color var(--tao-motion-duration-fast) var(--tao-motion-ease-out);
52
+ border-radius: var(--tao-radius-full);
53
+ width: 14px;
54
+ height: 14px;
55
+ color: color-mix(in oklch, currentColor 72%, transparent);
56
+ font: inherit;
57
+ transition: background-color var(--tao-motion-duration-fast) var(--tao-motion-ease-out),
58
+ color var(--tao-motion-duration-fast) var(--tao-motion-ease-out);
59
+ background: none;
60
+ border: 0;
61
+ flex: none;
62
+ justify-content: center;
34
63
  align-items: center;
35
- margin-inline: 2px -2px;
36
- padding: 1px;
64
+ margin-inline: -1px -4px;
65
+ padding: 0;
66
+ line-height: 1;
37
67
  display: inline-flex;
38
68
  }
39
69
 
40
70
  [data-tao-tag-close]:hover {
41
- opacity: 1;
71
+ background: color-mix(in oklch, currentColor 12%, transparent);
72
+ color: currentColor;
42
73
  }
43
74
 
44
75
  [data-tao-tag-close]:focus-visible {
45
- box-shadow: 0 0 0 2px var(--tao-control-outline);
76
+ box-shadow: 0 0 0 var(--tao-ring-width) var(--tao-control-outline);
46
77
  outline: none;
47
78
  }
48
79
 
@@ -52,111 +83,135 @@
52
83
  }
53
84
 
54
85
  [data-tao-tag][data-tao-color="default"][data-tao-variant="filled"] {
55
- background: var(--tao-color-fill-tertiary);
86
+ background: var(--tao-color-fill-secondary);
56
87
  color: var(--tao-color-text);
57
- border-color: #0000;
88
+ border-color: var(--tao-color-border-secondary);
89
+ box-shadow: var(--tao-box-shadow-xs);
58
90
  }
59
91
 
60
92
  [data-tao-tag][data-tao-color="primary"][data-tao-variant="filled"] {
61
- background: var(--tao-primary-bg);
93
+ background: color-mix(in oklch,
94
+ var(--tao-color-primary) 10%,
95
+ var(--tao-color-bg-base));
62
96
  color: var(--tao-primary);
63
- border-color: var(--tao-primary-border);
97
+ border-color: color-mix(in oklch,
98
+ var(--tao-color-primary) 18%,
99
+ var(--tao-color-bg-base));
64
100
  }
65
101
 
66
102
  [data-tao-tag][data-tao-color="success"][data-tao-variant="filled"] {
67
- background: var(--tao-success-bg);
103
+ background: color-mix(in oklch,
104
+ var(--tao-color-success) 10%,
105
+ var(--tao-color-bg-base));
68
106
  color: var(--tao-success);
69
- border-color: var(--tao-success-border);
107
+ border-color: color-mix(in oklch,
108
+ var(--tao-color-success) 18%,
109
+ var(--tao-color-bg-base));
70
110
  }
71
111
 
72
112
  [data-tao-tag][data-tao-color="warning"][data-tao-variant="filled"] {
73
- background: var(--tao-warning-bg);
113
+ background: color-mix(in oklch,
114
+ var(--tao-color-warning) 12%,
115
+ var(--tao-color-bg-base));
74
116
  color: var(--tao-warning);
75
- border-color: var(--tao-warning-border);
117
+ border-color: color-mix(in oklch,
118
+ var(--tao-color-warning) 22%,
119
+ var(--tao-color-bg-base));
76
120
  }
77
121
 
78
122
  [data-tao-tag][data-tao-color="error"][data-tao-variant="filled"] {
79
- background: var(--tao-error-bg);
123
+ background: color-mix(in oklch,
124
+ var(--tao-color-error) 10%,
125
+ var(--tao-color-bg-base));
80
126
  color: var(--tao-error);
81
- border-color: var(--tao-error-border);
127
+ border-color: color-mix(in oklch,
128
+ var(--tao-color-error) 18%,
129
+ var(--tao-color-bg-base));
82
130
  }
83
131
 
84
132
  [data-tao-tag][data-tao-color="default"][data-tao-variant="solid"] {
85
133
  background: var(--tao-color-text);
86
134
  color: var(--tao-color-bg-base);
135
+ box-shadow: var(--tao-box-shadow-xs);
87
136
  border-color: #0000;
88
137
  }
89
138
 
90
139
  [data-tao-tag][data-tao-color="primary"][data-tao-variant="solid"] {
91
140
  background: var(--tao-primary);
92
141
  color: var(--tao-primary-fg);
142
+ box-shadow: var(--tao-box-shadow-xs);
93
143
  border-color: #0000;
94
144
  }
95
145
 
96
146
  [data-tao-tag][data-tao-color="success"][data-tao-variant="solid"] {
97
147
  background: var(--tao-success);
98
148
  color: #fff;
149
+ box-shadow: var(--tao-box-shadow-xs);
99
150
  border-color: #0000;
100
151
  }
101
152
 
102
153
  [data-tao-tag][data-tao-color="warning"][data-tao-variant="solid"] {
103
154
  background: var(--tao-warning);
104
155
  color: #fff;
156
+ box-shadow: var(--tao-box-shadow-xs);
105
157
  border-color: #0000;
106
158
  }
107
159
 
108
160
  [data-tao-tag][data-tao-color="error"][data-tao-variant="solid"] {
109
161
  background: var(--tao-error);
110
162
  color: var(--tao-error-fg);
163
+ box-shadow: var(--tao-box-shadow-xs);
111
164
  border-color: #0000;
112
165
  }
113
166
 
114
167
  [data-tao-tag][data-tao-color="default"][data-tao-variant="outlined"] {
115
168
  color: var(--tao-color-text);
116
- border-color: var(--tao-color-border);
169
+ border-color: var(--tao-color-border-secondary);
117
170
  background: none;
118
171
  }
119
172
 
120
173
  [data-tao-tag][data-tao-color="primary"][data-tao-variant="outlined"] {
121
174
  color: var(--tao-primary);
122
- border-color: var(--tao-primary);
175
+ border-color: color-mix(in oklch, var(--tao-color-primary) 32%, transparent);
123
176
  background: none;
124
177
  }
125
178
 
126
179
  [data-tao-tag][data-tao-color="success"][data-tao-variant="outlined"] {
127
180
  color: var(--tao-success);
128
- border-color: var(--tao-success);
181
+ border-color: color-mix(in oklch, var(--tao-color-success) 36%, transparent);
129
182
  background: none;
130
183
  }
131
184
 
132
185
  [data-tao-tag][data-tao-color="warning"][data-tao-variant="outlined"] {
133
186
  color: var(--tao-warning);
134
- border-color: var(--tao-warning);
187
+ border-color: color-mix(in oklch, var(--tao-color-warning) 40%, transparent);
135
188
  background: none;
136
189
  }
137
190
 
138
191
  [data-tao-tag][data-tao-color="error"][data-tao-variant="outlined"] {
139
192
  color: var(--tao-error);
140
- border-color: var(--tao-error);
193
+ border-color: color-mix(in oklch, var(--tao-color-error) 36%, transparent);
141
194
  background: none;
142
195
  }
143
196
 
144
197
  [data-tao-tag][data-tao-checkable] {
145
198
  cursor: pointer;
146
199
  color: var(--tao-color-text-secondary);
147
- border-color: var(--tao-color-border);
200
+ border-color: var(--tao-color-border-secondary);
148
201
  background: none;
149
202
  }
150
203
 
151
204
  [data-tao-tag][data-tao-checkable]:hover {
152
- color: var(--tao-primary);
153
- border-color: var(--tao-primary);
205
+ background: var(--tao-color-fill-tertiary);
206
+ color: var(--tao-color-text);
207
+ border-color: var(--tao-color-border);
154
208
  }
155
209
 
156
210
  [data-tao-tag][data-tao-checkable][data-tao-checked] {
157
211
  background: var(--tao-primary);
158
212
  color: var(--tao-primary-fg);
159
213
  border-color: var(--tao-primary);
214
+ box-shadow: var(--tao-box-shadow-xs);
160
215
  }
161
216
 
162
217
  [data-tao-tag][data-tao-checkable][data-tao-checked]:hover {
@@ -165,7 +220,7 @@
165
220
  }
166
221
 
167
222
  [data-tao-tag][data-tao-checkable]:focus-visible {
168
- box-shadow: 0 0 0 2px var(--tao-control-outline);
223
+ box-shadow: 0 0 0 var(--tao-ring-width) var(--tao-control-outline);
169
224
  outline: none;
170
225
  }
171
226
 
package/dist/components/tag/tag.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { type CSSProperties, type MouseEvent, type ReactNode } from 'react';
2
2
  import { type SemanticClassNames, type SemanticStyles } from '../../utils/semantic';
3
3
  import './tag.css';
4
- export type TagSemanticPart = 'root' | 'icon' | 'close';
4
+ export type TagSemanticPart = 'root' | 'icon' | 'content' | 'close';
5
5
  export type TagColor = 'default' | 'primary' | 'success' | 'warning' | 'error' | (string & {});
6
6
  export type TagVariant = 'filled' | 'solid' | 'outlined';
7
7
  export interface TagProps {
package/dist/components/tag/tag.js CHANGED
@@ -11,7 +11,8 @@ function CloseIcon() {
11
11
  height: "12",
12
12
  viewBox: "0 0 12 12",
13
13
  fill: "none",
14
- "aria-hidden": true,
14
+ "aria-hidden": "true",
15
+ role: "presentation",
15
16
  children: /*#__PURE__*/ jsx("path", {
16
17
  d: "M3 3l6 6M9 3l-6 6",
17
18
  stroke: "currentColor",
@@ -24,7 +25,7 @@ function CloseIcon() {
24
25
  return t0;
25
26
  }
26
27
  function Tag(t0) {
27
- const $ = c(35);
28
+ const $ = c(40);
28
29
  const { children, color: t1, variant: t2, icon, closeIcon, onClose, disabled: t3, className, style, classNames, styles } = t0;
29
30
  const color = void 0 === t1 ? "default" : t1;
30
31
  const variant = void 0 === t2 ? "filled" : t2;
@@ -62,11 +63,11 @@ function Tag(t0) {
62
63
  borderColor: color
63
64
  } : "outlined" === variant ? {
64
65
  color,
65
- borderColor: color
66
+ borderColor: `color-mix(in oklch, ${color} 36%, transparent)`
66
67
  } : {
67
- background: `color-mix(in oklch, ${color} 12%, var(--tao-color-bg-base))`,
68
+ background: `color-mix(in oklch, ${color} 10%, var(--tao-color-bg-base))`,
68
69
  color,
69
- borderColor: `color-mix(in oklch, ${color} 30%, var(--tao-color-bg-base))`
70
+ borderColor: `color-mix(in oklch, ${color} 18%, var(--tao-color-bg-base))`
70
71
  }
71
72
  } : void 0;
72
73
  $[4] = color;
@@ -77,30 +78,31 @@ function Tag(t0) {
77
78
  const customColorStyle = t6;
78
79
  const t7 = isPreset ? color : void 0;
79
80
  const t8 = disabled || void 0;
80
- const t9 = classNames?.root;
81
- let t10;
82
- if ($[8] !== className || $[9] !== t9) {
83
- t10 = cx(t9, className);
81
+ const t9 = showClose || void 0;
82
+ const t10 = classNames?.root;
83
+ let t11;
84
+ if ($[8] !== className || $[9] !== t10) {
85
+ t11 = cx(t10, className);
84
86
  $[8] = className;
85
- $[9] = t9;
86
- $[10] = t10;
87
- } else t10 = $[10];
88
- const t11 = styles?.root;
89
- let t12;
90
- if ($[11] !== customColorStyle || $[12] !== style || $[13] !== t11) {
91
- t12 = {
87
+ $[9] = t10;
88
+ $[10] = t11;
89
+ } else t11 = $[10];
90
+ const t12 = styles?.root;
91
+ let t13;
92
+ if ($[11] !== customColorStyle || $[12] !== style || $[13] !== t12) {
93
+ t13 = {
92
94
  ...customColorStyle,
93
- ...t11,
95
+ ...t12,
94
96
  ...style
95
97
  };
96
98
  $[11] = customColorStyle;
97
99
  $[12] = style;
98
- $[13] = t11;
99
- $[14] = t12;
100
- } else t12 = $[14];
101
- let t13;
100
+ $[13] = t12;
101
+ $[14] = t13;
102
+ } else t13 = $[14];
103
+ let t14;
102
104
  if ($[15] !== classNames?.icon || $[16] !== icon || $[17] !== styles?.icon) {
103
- t13 = null != icon && /*#__PURE__*/ jsx("span", {
105
+ t14 = null != icon && /*#__PURE__*/ jsx("span", {
104
106
  "data-tao-tag-icon": "",
105
107
  className: cx(classNames?.icon),
106
108
  style: styles?.icon,
@@ -109,63 +111,72 @@ function Tag(t0) {
109
111
  $[15] = classNames?.icon;
110
112
  $[16] = icon;
111
113
  $[17] = styles?.icon;
112
- $[18] = t13;
113
- } else t13 = $[18];
114
- let t14;
115
- if ($[19] !== classNames?.close || $[20] !== closeIcon || $[21] !== disabled || $[22] !== handleClose || $[23] !== showClose || $[24] !== styles?.close) {
116
- t14 = showClose && /*#__PURE__*/ jsx("span", {
114
+ $[18] = t14;
115
+ } else t14 = $[18];
116
+ let t15;
117
+ if ($[19] !== children || $[20] !== classNames?.content || $[21] !== styles?.content) {
118
+ t15 = null != children && /*#__PURE__*/ jsx("span", {
119
+ "data-tao-tag-content": "",
120
+ className: cx(classNames?.content),
121
+ style: styles?.content,
122
+ children: children
123
+ });
124
+ $[19] = children;
125
+ $[20] = classNames?.content;
126
+ $[21] = styles?.content;
127
+ $[22] = t15;
128
+ } else t15 = $[22];
129
+ let t16;
130
+ if ($[23] !== classNames?.close || $[24] !== closeIcon || $[25] !== disabled || $[26] !== handleClose || $[27] !== showClose || $[28] !== styles?.close) {
131
+ t16 = showClose && /*#__PURE__*/ jsx("button", {
132
+ type: "button",
117
133
  "data-tao-tag-close": "",
118
- role: "button",
119
- tabIndex: disabled ? void 0 : 0,
120
134
  "aria-label": "Close",
135
+ disabled: disabled,
121
136
  onClick: handleClose,
122
- onKeyDown: (e_0)=>{
123
- if ("Enter" === e_0.key || " " === e_0.key) {
124
- e_0.preventDefault();
125
- handleClose(e_0);
126
- }
127
- },
128
137
  className: cx(classNames?.close),
129
138
  style: styles?.close,
130
139
  children: true === closeIcon || void 0 === closeIcon ? /*#__PURE__*/ jsx(CloseIcon, {}) : closeIcon
131
140
  });
132
- $[19] = classNames?.close;
133
- $[20] = closeIcon;
134
- $[21] = disabled;
135
- $[22] = handleClose;
136
- $[23] = showClose;
137
- $[24] = styles?.close;
138
- $[25] = t14;
139
- } else t14 = $[25];
140
- let t15;
141
- if ($[26] !== children || $[27] !== t10 || $[28] !== t12 || $[29] !== t13 || $[30] !== t14 || $[31] !== t7 || $[32] !== t8 || $[33] !== variant) {
142
- t15 = /*#__PURE__*/ jsxs("span", {
141
+ $[23] = classNames?.close;
142
+ $[24] = closeIcon;
143
+ $[25] = disabled;
144
+ $[26] = handleClose;
145
+ $[27] = showClose;
146
+ $[28] = styles?.close;
147
+ $[29] = t16;
148
+ } else t16 = $[29];
149
+ let t17;
150
+ if ($[30] !== t11 || $[31] !== t13 || $[32] !== t14 || $[33] !== t15 || $[34] !== t16 || $[35] !== t7 || $[36] !== t8 || $[37] !== t9 || $[38] !== variant) {
151
+ t17 = /*#__PURE__*/ jsxs("span", {
143
152
  "data-tao-tag": "",
144
153
  "data-tao-color": t7,
145
154
  "data-tao-variant": variant,
146
155
  "data-tao-disabled": t8,
147
- className: t10,
148
- style: t12,
156
+ "data-tao-closable": t9,
157
+ className: t11,
158
+ style: t13,
149
159
  children: [
150
- t13,
151
- children,
152
- t14
160
+ t14,
161
+ t15,
162
+ t16
153
163
  ]
154
164
  });
155
- $[26] = children;
156
- $[27] = t10;
157
- $[28] = t12;
158
- $[29] = t13;
159
- $[30] = t14;
160
- $[31] = t7;
161
- $[32] = t8;
162
- $[33] = variant;
163
- $[34] = t15;
164
- } else t15 = $[34];
165
- return t15;
165
+ $[30] = t11;
166
+ $[31] = t13;
167
+ $[32] = t14;
168
+ $[33] = t15;
169
+ $[34] = t16;
170
+ $[35] = t7;
171
+ $[36] = t8;
172
+ $[37] = t9;
173
+ $[38] = variant;
174
+ $[39] = t17;
175
+ } else t17 = $[39];
176
+ return t17;
166
177
  }
167
178
  function CheckableTag(t0) {
168
- const $ = c(18);
179
+ const $ = c(20);
169
180
  const { children, checked: t1, onChange, disabled: t2, icon, className, style } = t0;
170
181
  const checked = void 0 === t1 ? false : t1;
171
182
  const disabled = void 0 === t2 ? false : t2;
@@ -201,8 +212,17 @@ function CheckableTag(t0) {
201
212
  $[6] = t8;
202
213
  } else t8 = $[6];
203
214
  let t9;
204
- if ($[7] !== checked || $[8] !== children || $[9] !== className || $[10] !== style || $[11] !== t3 || $[12] !== t4 || $[13] !== t5 || $[14] !== t6 || $[15] !== t7 || $[16] !== t8) {
205
- t9 = /*#__PURE__*/ jsxs("span", {
215
+ if ($[7] !== children) {
216
+ t9 = null != children && /*#__PURE__*/ jsx("span", {
217
+ "data-tao-tag-content": "",
218
+ children: children
219
+ });
220
+ $[7] = children;
221
+ $[8] = t9;
222
+ } else t9 = $[8];
223
+ let t10;
224
+ if ($[9] !== checked || $[10] !== className || $[11] !== style || $[12] !== t3 || $[13] !== t4 || $[14] !== t5 || $[15] !== t6 || $[16] !== t7 || $[17] !== t8 || $[18] !== t9) {
225
+ t10 = /*#__PURE__*/ jsxs("span", {
206
226
  "data-tao-tag": "",
207
227
  "data-tao-checkable": "",
208
228
  "data-tao-checked": t3,
@@ -216,22 +236,22 @@ function CheckableTag(t0) {
216
236
  onKeyDown: t7,
217
237
  children: [
218
238
  t8,
219
- children
239
+ t9
220
240
  ]
221
241
  });
222
- $[7] = checked;
223
- $[8] = children;
224
- $[9] = className;
225
- $[10] = style;
226
- $[11] = t3;
227
- $[12] = t4;
228
- $[13] = t5;
229
- $[14] = t6;
230
- $[15] = t7;
231
- $[16] = t8;
232
- $[17] = t9;
233
- } else t9 = $[17];
234
- return t9;
242
+ $[9] = checked;
243
+ $[10] = className;
244
+ $[11] = style;
245
+ $[12] = t3;
246
+ $[13] = t4;
247
+ $[14] = t5;
248
+ $[15] = t6;
249
+ $[16] = t7;
250
+ $[17] = t8;
251
+ $[18] = t9;
252
+ $[19] = t10;
253
+ } else t10 = $[19];
254
+ return t10;
235
255
  }
236
256
  Tag.CheckableTag = CheckableTag;
237
257
  export { CheckableTag, Tag };
package/dist/components/textarea/textarea.css CHANGED
@@ -1,4 +1,5 @@
1
1
  [data-tao-textarea] {
2
+ width: 100%;
2
3
  font-family: var(--tao-font-family);
3
4
  display: block;
4
5
  }
package/dist/index.d.ts CHANGED
@@ -21,7 +21,7 @@ export { ChevronsUpDownIcon, Select, type SelectOption, type SelectPlacement, ty
21
21
  export { Spinner, type SpinnerProps, type SpinnerSemanticPart, } from "./components/spinner/spinner";
22
22
  export { Splitter, type SplitterPanelProps, type SplitterProps, type SplitterSemanticPart, } from "./components/splitter/splitter";
23
23
  export { Switch, type SwitchProps, type SwitchSemanticPart, } from "./components/switch/switch";
24
- export { type SorterResult, type SortOrder, Table, type TableColumn, type TableFilterItem, type TablePagination, type TableProps, type TableRowSelection, type TableSemanticPart, } from "./components/table/table";
24
+ export { type SorterResult, type SortOrder, Table, type TableColumn, type TableFilterItem, type TablePagination, type TableProps, type TableRowSelection, type TableSemanticPart, type TableVariant, } from "./components/table/table";
25
25
  export { type TabItem, Tabs, type TabsProps, type TabsSemanticPart, } from "./components/tabs/tabs";
26
26
  export { CheckableTag, type CheckableTagProps, Tag, type TagColor, type TagProps, type TagSemanticPart, type TagVariant, } from "./components/tag/tag";
27
27
  export { type AutoSizeOptions, Textarea, type TextareaProps, type TextareaSemanticPart, } from "./components/textarea/textarea";
package/dist/provider/tao-provider.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import { c } from "react/compiler-runtime";
3
- import { createContext, useContext, useMemo } from "react";
3
+ import { createContext, useContext, useMemo, useRef } from "react";
4
4
  const TaoConfigContext = /*#__PURE__*/ createContext({
5
5
  size: 'medium',
6
6
  disabled: false,
@@ -54,9 +54,16 @@ const TOKEN_TO_VAR_PX = {
54
54
  sizeUnit: '--tao-size-unit',
55
55
  lineWidth: '--tao-line-width'
56
56
  };
57
+ function useStableTokenKey(token) {
58
+ const key = token ? JSON.stringify(token) : '';
59
+ const ref = useRef(key);
60
+ if (ref.current !== key) ref.current = key;
61
+ return ref.current;
62
+ }
57
63
  function TaoProvider({ theme, size, disabled, variant, children }) {
58
64
  const parentConfig = useContext(TaoConfigContext);
59
65
  const inherit = theme?.inherit ?? true;
66
+ const tokenKey = useStableTokenKey(theme?.token);
60
67
  const ownVars = useMemo(()=>{
61
68
  if (!theme?.token) return;
62
69
  const vars = {};
@@ -71,7 +78,7 @@ function TaoProvider({ theme, size, disabled, variant, children }) {
71
78
  }
72
79
  return vars;
73
80
  }, [
74
- theme?.token
81
+ tokenKey
75
82
  ]);
76
83
  const tokenStyle = useMemo(()=>({
77
84
  ...parentConfig.tokenStyle,
@@ -80,23 +87,34 @@ function TaoProvider({ theme, size, disabled, variant, children }) {
80
87
  parentConfig.tokenStyle,
81
88
  ownVars
82
89
  ]);
90
+ const divStyle = useMemo(()=>({
91
+ display: 'contents',
92
+ ...ownVars
93
+ }), [
94
+ ownVars
95
+ ]);
96
+ const parentSize = parentConfig.size;
97
+ const parentDisabled = parentConfig.disabled;
98
+ const parentVariant = parentConfig.variant;
83
99
  const config = useMemo(()=>({
84
- size: size ?? (inherit ? parentConfig.size : 'medium'),
85
- disabled: disabled ?? (inherit ? parentConfig.disabled : false),
86
- variant: variant ?? (inherit ? parentConfig.variant : 'outlined'),
100
+ size: size ?? (inherit ? parentSize : 'medium'),
101
+ disabled: disabled ?? (inherit ? parentDisabled : false),
102
+ variant: variant ?? (inherit ? parentVariant : 'outlined'),
87
103
  tokenStyle
88
104
  }), [
89
105
  size,
90
106
  disabled,
91
107
  variant,
92
- parentConfig,
93
108
  inherit,
109
+ parentSize,
110
+ parentDisabled,
111
+ parentVariant,
94
112
  tokenStyle
95
113
  ]);
96
114
  return /*#__PURE__*/ jsx(TaoConfigContext.Provider, {
97
115
  value: config,
98
116
  children: /*#__PURE__*/ jsx("div", {
99
- style: ownVars,
117
+ style: divStyle,
100
118
  "data-tao-provider": "",
101
119
  children: children
102
120
  })
package/dist/theme/control.css CHANGED
@@ -1,10 +1,5 @@
1
1
  [data-tao-control] {
2
2
  box-sizing: border-box;
3
- width: var(--tao-control-width);
4
- }
5
-
6
- [data-tao-control][data-tao-range-trigger] {
7
- width: var(--tao-control-range-width);
8
3
  }
9
4
 
10
5
  [data-tao-form-field] [data-tao-control] {
@@ -23,12 +18,14 @@
23
18
  }
24
19
 
25
20
  [data-tao-control][data-tao-variant="outlined"]:hover:not([data-disabled]):not(:focus-within):not([data-state="open"]) {
26
- border-color: var(--tao-primary-hover);
21
+ border-color: color-mix(in oklch,
22
+ var(--tao-color-text-base) 20%,
23
+ var(--tao-color-bg-base));
27
24
  }
28
25
 
29
26
  [data-tao-control][data-tao-variant="outlined"]:focus-within, [data-tao-control][data-tao-variant="outlined"][data-state="open"] {
30
27
  border-color: var(--tao-primary);
31
- box-shadow: 0 0 0 2px var(--tao-control-outline);
28
+ box-shadow: 0 0 0 var(--tao-ring-width) var(--tao-control-outline);
32
29
  outline: none;
33
30
  }
34
31
 
@@ -42,7 +39,7 @@
42
39
 
43
40
  [data-tao-control][data-tao-variant="outlined"][data-tao-error]:focus-within, [data-tao-control][data-tao-variant="outlined"][data-tao-error][data-state="open"] {
44
41
  border-color: var(--tao-error);
45
- box-shadow: 0 0 0 2px var(--tao-color-error-outline);
42
+ box-shadow: 0 0 0 var(--tao-ring-width) var(--tao-color-error-outline);
46
43
  }
47
44
 
48
45
  [data-tao-control][data-tao-variant="outlined"][data-tao-warning] {
@@ -55,7 +52,7 @@
55
52
 
56
53
  [data-tao-control][data-tao-variant="outlined"][data-tao-warning]:focus-within, [data-tao-control][data-tao-variant="outlined"][data-tao-warning][data-state="open"] {
57
54
  border-color: var(--tao-warning);
58
- box-shadow: 0 0 0 2px var(--tao-color-warning-outline);
55
+ box-shadow: 0 0 0 var(--tao-ring-width) var(--tao-color-warning-outline);
59
56
  }
60
57
 
61
58
  [data-tao-control][data-tao-variant="outlined"][data-disabled], [data-tao-control][data-tao-variant="outlined"]:has(input:disabled) {
@@ -78,7 +75,7 @@
78
75
  [data-tao-control][data-tao-variant="filled"]:focus-within, [data-tao-control][data-tao-variant="filled"][data-state="open"] {
79
76
  background: var(--tao-color-bg-container);
80
77
  border-color: var(--tao-primary);
81
- box-shadow: 0 0 0 2px var(--tao-control-outline);
78
+ box-shadow: 0 0 0 var(--tao-ring-width) var(--tao-control-outline);
82
79
  outline: none;
83
80
  }
84
81
 
@@ -95,7 +92,7 @@
95
92
  [data-tao-control][data-tao-variant="filled"][data-tao-error]:focus-within, [data-tao-control][data-tao-variant="filled"][data-tao-error][data-state="open"] {
96
93
  background: var(--tao-color-bg-container);
97
94
  border-color: var(--tao-error);
98
- box-shadow: 0 0 0 2px var(--tao-color-error-outline);
95
+ box-shadow: 0 0 0 var(--tao-ring-width) var(--tao-color-error-outline);
99
96
  }
100
97
 
101
98
  [data-tao-control][data-tao-variant="filled"][data-tao-warning] {
@@ -111,7 +108,7 @@
111
108
  [data-tao-control][data-tao-variant="filled"][data-tao-warning]:focus-within, [data-tao-control][data-tao-variant="filled"][data-tao-warning][data-state="open"] {
112
109
  background: var(--tao-color-bg-container);
113
110
  border-color: var(--tao-warning);
114
- box-shadow: 0 0 0 2px var(--tao-color-warning-outline);
111
+ box-shadow: 0 0 0 var(--tao-ring-width) var(--tao-color-warning-outline);
115
112
  }
116
113
 
117
114
  [data-tao-control][data-tao-variant="filled"][data-disabled], [data-tao-control][data-tao-variant="filled"]:has(input:disabled) {
package/dist/theme/theme.css CHANGED
@@ -1,24 +1,28 @@
1
1
  @layer base {
2
- :root, [data-tao-provider] {
2
+ :root {
3
3
  --tao-color-primary: oklch(20.5% .01 70);
4
4
  --tao-color-success: oklch(55.5% .14 155);
5
5
  --tao-color-warning: oklch(70% .15 70);
6
6
  --tao-color-error: oklch(57% .19 25);
7
7
  --tao-color-bg-base: oklch(98.5% .004 70);
8
8
  --tao-color-text-base: oklch(15.5% .01 70);
9
- --tao-radius: 6px;
9
+ --tao-radius: 10px;
10
10
  --tao-font-size: 14px;
11
11
  --tao-control-height: 36px;
12
12
  --tao-control-width: 200px;
13
13
  --tao-control-range-width: 360px;
14
14
  --tao-size-unit: 4px;
15
15
  --tao-line-width: 1px;
16
+ --tao-ring-width: 3px;
16
17
  --tao-font-family: "Geist Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
17
18
  --tao-font-family-code: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
18
19
  --tao-motion-unit: .1s;
19
20
  --tao-z-index-drawer: 1000;
20
21
  --tao-z-index-modal: 1000;
21
22
  --tao-z-index-popup: 1100;
23
+ }
24
+
25
+ :root, [data-tao-provider] {
22
26
  --tao-primary: var(--tao-color-primary);
23
27
  --tao-primary-hover: color-mix(in oklch,
24
28
  var(--tao-color-primary) 80%,
@@ -88,15 +92,15 @@
88
92
  --tao-color-bg-container: oklch(100% 0 0);
89
93
  --tao-color-bg-elevated: oklch(100% 0 0);
90
94
  --tao-color-border: color-mix(in oklch,
91
- var(--tao-color-text-base) 18%,
95
+ var(--tao-color-text-base) 12%,
92
96
  var(--tao-color-bg-base));
93
97
  --tao-color-border-secondary: #0000170b;
94
98
  --tao-radius-xs: 2px;
95
99
  --tao-radius-sm: calc(var(--tao-radius) - 2px);
96
100
  --tao-radius-md: var(--tao-radius);
97
101
  --tao-radius-lg: calc(var(--tao-radius) + 2px);
98
- --tao-radius-xl: calc(var(--tao-radius) * 2);
99
- --tao-radius-2xl: calc(var(--tao-radius) * 2.67);
102
+ --tao-radius-xl: calc(var(--tao-radius) + 4px);
103
+ --tao-radius-2xl: calc(var(--tao-radius) * 2);
100
104
  --tao-radius-full: 9999px;
101
105
  --tao-control-height-sm: calc(var(--tao-control-height) - 4px);
102
106
  --tao-control-height-lg: calc(var(--tao-control-height) + 4px);
@@ -124,17 +128,18 @@
124
128
  --tao-motion-ease-out: cubic-bezier(.215, .61, .355, 1);
125
129
  --tao-motion-ease-in-out: cubic-bezier(.645, .045, .355, 1);
126
130
  --tao-motion-ease-out-quint: cubic-bezier(.23, 1, .32, 1);
131
+ --tao-box-shadow-xs: 0 1px 2px 0 oklch(0% 0 0 / .05);
127
132
  --tao-box-shadow: 0 1px 2px oklch(0% 0 0 / .04), 0 0 1px oklch(0% 0 0 / .08);
128
133
  --tao-box-shadow-secondary: 0 2px 8px oklch(0% 0 0 / .06), 0 0 1px oklch(0% 0 0 / .06);
129
134
  --tao-box-shadow-tertiary: 0 1px 2px oklch(0% 0 0 / .04);
130
135
  --tao-control-outline: color-mix(in oklch,
131
- var(--tao-color-primary) 10%,
136
+ var(--tao-color-primary) 20%,
132
137
  transparent);
133
138
  --tao-color-error-outline: color-mix(in oklch,
134
- var(--tao-color-error) 10%,
139
+ var(--tao-color-error) 25%,
135
140
  transparent);
136
141
  --tao-color-warning-outline: color-mix(in oklch,
137
- var(--tao-color-warning) 10%,
142
+ var(--tao-color-warning) 25%,
138
143
  transparent);
139
144
  --tao-color-text-placeholder: var(--tao-color-text-quaternary);
140
145
  --tao-color-text-disabled: var(--tao-color-text-quaternary);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rockshin/tao-ui",
3
- "version": "0.0.5",
3
+ "version": "0.0.7",
4
4
  "type": "module",
5
5
  "description": "A modern React 19 component library with semantic DOM customization and OKLCH-based theming.",
6
6
  "keywords": [