@rockshin/tao-ui 0.0.6 → 0.0.8

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.
@@ -1,48 +1,76 @@
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
+ border-radius: var(--tao-radius-md);
6
11
  border: var(--tao-line-width) solid transparent;
7
12
  white-space: nowrap;
8
13
  cursor: default;
9
14
  -webkit-user-select: none;
10
15
  user-select: none;
16
+ box-shadow: none;
11
17
  transition: background-color var(--tao-motion-duration-fast) var(--tao-motion-ease-out),
12
18
  border-color var(--tao-motion-duration-fast) var(--tao-motion-ease-out),
13
19
  color var(--tao-motion-duration-fast) var(--tao-motion-ease-out),
20
+ box-shadow var(--tao-motion-duration-fast) var(--tao-motion-ease-out),
14
21
  opacity var(--tao-motion-duration-fast) var(--tao-motion-ease-out);
22
+ justify-content: center;
15
23
  align-items: center;
16
24
  gap: 4px;
17
- padding: 3px 8px;
25
+ padding-block: 0;
26
+ padding-inline: 8px;
18
27
  line-height: 1;
19
28
  display: inline-flex;
20
29
  }
21
30
 
22
31
  [data-tao-tag-icon] {
32
+ flex: none;
33
+ justify-content: center;
23
34
  align-items: center;
24
- font-size: 14px;
35
+ font-size: 12px;
36
+ line-height: 1;
37
+ display: inline-flex;
38
+ }
39
+
40
+ [data-tao-tag-content] {
41
+ align-items: center;
42
+ gap: inherit;
43
+ line-height: 1;
25
44
  display: inline-flex;
26
45
  }
27
46
 
28
47
  [data-tao-tag-close] {
29
48
  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);
49
+ border-radius: var(--tao-radius-full);
50
+ width: 14px;
51
+ height: 14px;
52
+ color: color-mix(in oklch, currentColor 72%, transparent);
53
+ font: inherit;
54
+ transition: background-color var(--tao-motion-duration-fast) var(--tao-motion-ease-out),
55
+ color var(--tao-motion-duration-fast) var(--tao-motion-ease-out);
56
+ background: none;
57
+ border: 0;
58
+ flex: none;
59
+ justify-content: center;
34
60
  align-items: center;
35
- margin-inline: 2px -2px;
36
- padding: 1px;
61
+ margin-inline: -1px -4px;
62
+ padding: 0;
63
+ line-height: 1;
37
64
  display: inline-flex;
38
65
  }
39
66
 
40
67
  [data-tao-tag-close]:hover {
41
- opacity: 1;
68
+ background: color-mix(in oklch, currentColor 12%, transparent);
69
+ color: currentColor;
42
70
  }
43
71
 
44
72
  [data-tao-tag-close]:focus-visible {
45
- box-shadow: 0 0 0 2px var(--tao-control-outline);
73
+ box-shadow: 0 0 0 var(--tao-ring-width) var(--tao-control-outline);
46
74
  outline: none;
47
75
  }
48
76
 
@@ -52,111 +80,135 @@
52
80
  }
53
81
 
54
82
  [data-tao-tag][data-tao-color="default"][data-tao-variant="filled"] {
55
- background: var(--tao-color-fill-tertiary);
83
+ background: var(--tao-color-fill-secondary);
56
84
  color: var(--tao-color-text);
57
- border-color: #0000;
85
+ border-color: var(--tao-color-border-secondary);
86
+ box-shadow: var(--tao-box-shadow-xs);
58
87
  }
59
88
 
60
89
  [data-tao-tag][data-tao-color="primary"][data-tao-variant="filled"] {
61
- background: var(--tao-primary-bg);
90
+ background: color-mix(in oklch,
91
+ var(--tao-color-primary) 10%,
92
+ var(--tao-color-bg-base));
62
93
  color: var(--tao-primary);
63
- border-color: var(--tao-primary-border);
94
+ border-color: color-mix(in oklch,
95
+ var(--tao-color-primary) 18%,
96
+ var(--tao-color-bg-base));
64
97
  }
65
98
 
66
99
  [data-tao-tag][data-tao-color="success"][data-tao-variant="filled"] {
67
- background: var(--tao-success-bg);
100
+ background: color-mix(in oklch,
101
+ var(--tao-color-success) 10%,
102
+ var(--tao-color-bg-base));
68
103
  color: var(--tao-success);
69
- border-color: var(--tao-success-border);
104
+ border-color: color-mix(in oklch,
105
+ var(--tao-color-success) 18%,
106
+ var(--tao-color-bg-base));
70
107
  }
71
108
 
72
109
  [data-tao-tag][data-tao-color="warning"][data-tao-variant="filled"] {
73
- background: var(--tao-warning-bg);
110
+ background: color-mix(in oklch,
111
+ var(--tao-color-warning) 12%,
112
+ var(--tao-color-bg-base));
74
113
  color: var(--tao-warning);
75
- border-color: var(--tao-warning-border);
114
+ border-color: color-mix(in oklch,
115
+ var(--tao-color-warning) 22%,
116
+ var(--tao-color-bg-base));
76
117
  }
77
118
 
78
119
  [data-tao-tag][data-tao-color="error"][data-tao-variant="filled"] {
79
- background: var(--tao-error-bg);
120
+ background: color-mix(in oklch,
121
+ var(--tao-color-error) 10%,
122
+ var(--tao-color-bg-base));
80
123
  color: var(--tao-error);
81
- border-color: var(--tao-error-border);
124
+ border-color: color-mix(in oklch,
125
+ var(--tao-color-error) 18%,
126
+ var(--tao-color-bg-base));
82
127
  }
83
128
 
84
129
  [data-tao-tag][data-tao-color="default"][data-tao-variant="solid"] {
85
130
  background: var(--tao-color-text);
86
131
  color: var(--tao-color-bg-base);
132
+ box-shadow: var(--tao-box-shadow-xs);
87
133
  border-color: #0000;
88
134
  }
89
135
 
90
136
  [data-tao-tag][data-tao-color="primary"][data-tao-variant="solid"] {
91
137
  background: var(--tao-primary);
92
138
  color: var(--tao-primary-fg);
139
+ box-shadow: var(--tao-box-shadow-xs);
93
140
  border-color: #0000;
94
141
  }
95
142
 
96
143
  [data-tao-tag][data-tao-color="success"][data-tao-variant="solid"] {
97
144
  background: var(--tao-success);
98
145
  color: #fff;
146
+ box-shadow: var(--tao-box-shadow-xs);
99
147
  border-color: #0000;
100
148
  }
101
149
 
102
150
  [data-tao-tag][data-tao-color="warning"][data-tao-variant="solid"] {
103
151
  background: var(--tao-warning);
104
152
  color: #fff;
153
+ box-shadow: var(--tao-box-shadow-xs);
105
154
  border-color: #0000;
106
155
  }
107
156
 
108
157
  [data-tao-tag][data-tao-color="error"][data-tao-variant="solid"] {
109
158
  background: var(--tao-error);
110
159
  color: var(--tao-error-fg);
160
+ box-shadow: var(--tao-box-shadow-xs);
111
161
  border-color: #0000;
112
162
  }
113
163
 
114
164
  [data-tao-tag][data-tao-color="default"][data-tao-variant="outlined"] {
115
165
  color: var(--tao-color-text);
116
- border-color: var(--tao-color-border);
166
+ border-color: var(--tao-color-border-secondary);
117
167
  background: none;
118
168
  }
119
169
 
120
170
  [data-tao-tag][data-tao-color="primary"][data-tao-variant="outlined"] {
121
171
  color: var(--tao-primary);
122
- border-color: var(--tao-primary);
172
+ border-color: color-mix(in oklch, var(--tao-color-primary) 32%, transparent);
123
173
  background: none;
124
174
  }
125
175
 
126
176
  [data-tao-tag][data-tao-color="success"][data-tao-variant="outlined"] {
127
177
  color: var(--tao-success);
128
- border-color: var(--tao-success);
178
+ border-color: color-mix(in oklch, var(--tao-color-success) 36%, transparent);
129
179
  background: none;
130
180
  }
131
181
 
132
182
  [data-tao-tag][data-tao-color="warning"][data-tao-variant="outlined"] {
133
183
  color: var(--tao-warning);
134
- border-color: var(--tao-warning);
184
+ border-color: color-mix(in oklch, var(--tao-color-warning) 40%, transparent);
135
185
  background: none;
136
186
  }
137
187
 
138
188
  [data-tao-tag][data-tao-color="error"][data-tao-variant="outlined"] {
139
189
  color: var(--tao-error);
140
- border-color: var(--tao-error);
190
+ border-color: color-mix(in oklch, var(--tao-color-error) 36%, transparent);
141
191
  background: none;
142
192
  }
143
193
 
144
194
  [data-tao-tag][data-tao-checkable] {
145
195
  cursor: pointer;
146
196
  color: var(--tao-color-text-secondary);
147
- border-color: var(--tao-color-border);
197
+ border-color: var(--tao-color-border-secondary);
148
198
  background: none;
149
199
  }
150
200
 
151
201
  [data-tao-tag][data-tao-checkable]:hover {
152
- color: var(--tao-primary);
153
- border-color: var(--tao-primary);
202
+ background: var(--tao-color-fill-tertiary);
203
+ color: var(--tao-color-text);
204
+ border-color: var(--tao-color-border);
154
205
  }
155
206
 
156
207
  [data-tao-tag][data-tao-checkable][data-tao-checked] {
157
208
  background: var(--tao-primary);
158
209
  color: var(--tao-primary-fg);
159
210
  border-color: var(--tao-primary);
211
+ box-shadow: var(--tao-box-shadow-xs);
160
212
  }
161
213
 
162
214
  [data-tao-tag][data-tao-checkable][data-tao-checked]:hover {
@@ -165,7 +217,7 @@
165
217
  }
166
218
 
167
219
  [data-tao-tag][data-tao-checkable]:focus-visible {
168
- box-shadow: 0 0 0 2px var(--tao-control-outline);
220
+ box-shadow: 0 0 0 var(--tao-ring-width) var(--tao-control-outline);
169
221
  outline: none;
170
222
  }
171
223
 
@@ -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 {
@@ -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/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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rockshin/tao-ui",
3
- "version": "0.0.6",
3
+ "version": "0.0.8",
4
4
  "type": "module",
5
5
  "description": "A modern React 19 component library with semantic DOM customization and OKLCH-based theming.",
6
6
  "keywords": [
@@ -45,6 +45,7 @@
45
45
  "doc:build": "rspress build",
46
46
  "doc:preview": "rspress preview",
47
47
  "format": "biome format --write",
48
+ "release": "bun scripts/release.mjs",
48
49
  "storybook": "storybook dev",
49
50
  "test": "rstest",
50
51
  "test:watch": "rstest --watch"