@kb-labs/studio-ui-kit 2.118.2 → 2.119.0-canary.cee505c72

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 (6) hide show
  1. package/README.md +3 -3
  2. package/dist/index.css +63 -63
  3. package/dist/index.css.map +1 -1
  4. package/dist/index.js +42 -27
  5. package/dist/index.js.map +1 -1
  6. package/package.json +2 -1
package/README.md CHANGED
@@ -47,7 +47,7 @@ function MyComponent() {
47
47
  ## 📊 Component Stats
48
48
 
49
49
  - **Total Components:** 52
50
- - **With Tests:** 4/52 (8%)
50
+ - **With Tests:** 6/52 (12%)
51
51
 
52
52
  **By Category:**
53
53
 
@@ -87,7 +87,7 @@ Essential UI components
87
87
  | **UICopyButton** | UICopyButton — one-click copy with built-in visual feedback. | ❌ |
88
88
  | **UIIcon** | UIIcon component - Icon wrapper with proper theming | ❌ |
89
89
  | **UIShimmerText** | UIShimmerText - Animated gradient shimmer on text | ❌ |
90
- | **UITag** | UITag component - Label/category tag with semantic colors | ❌ |
90
+ | **UITag** | UITag component - Label/category tag with semantic colors | ✅ |
91
91
  | **UITitle** | UITitle component - Page/section titles with hierarchy | ❌ |
92
92
 
93
93
  ### Layout
@@ -153,7 +153,7 @@ Feedback and notification components
153
153
  | **UIEmptyState** | UIEmptyState component - Empty state placeholder | ❌ |
154
154
  | **UIErrorState** | UIErrorState component - Error state display | ❌ |
155
155
  | **UIResult** | UIResult component - Result page | ❌ |
156
- | **UISkeleton** | UISkeleton component - Loading skeleton | ❌ |
156
+ | **UISkeleton** | UISkeleton component - Loading skeleton | ✅ |
157
157
  | **UISpin** | UISpin component - Loading spinner | ❌ |
158
158
 
159
159
  ### Overlay
package/dist/index.css CHANGED
@@ -1,74 +1,74 @@
1
- /* src/core/UIButton.module.css */
2
- .uiButton {
1
+ /* kb-css-modules-css:/Users/kirillbaranov/Desktop/work/kb-labs-workspace/studio/ui-kit/src/core/UIButton.module.css?kb-css-modules-css */
2
+ .uiButton_3Yg7B {
3
3
  }
4
- .uiButton svg {
4
+ .uiButton_3Yg7B svg {
5
5
  color: inherit !important;
6
6
  stroke: currentColor !important;
7
7
  fill: currentColor !important;
8
8
  }
9
- .uiButton:disabled svg,
10
- .uiButton.ant-btn-disabled svg {
9
+ .uiButton_3Yg7B:disabled svg,
10
+ .uiButton_3Yg7B.ant-btn-disabled svg {
11
11
  opacity: 0.4;
12
12
  }
13
- .uiButton.ant-btn-sm svg {
13
+ .uiButton_3Yg7B.ant-btn-sm svg {
14
14
  width: 14px;
15
15
  height: 14px;
16
16
  }
17
- .uiButton svg {
17
+ .uiButton_3Yg7B svg {
18
18
  width: 16px;
19
19
  height: 16px;
20
20
  }
21
- .uiButton.ant-btn-lg svg {
21
+ .uiButton_3Yg7B.ant-btn-lg svg {
22
22
  width: 18px;
23
23
  height: 18px;
24
24
  }
25
- .uiButton .ant-btn-icon {
25
+ .uiButton_3Yg7B .ant-btn-icon {
26
26
  color: inherit !important;
27
27
  display: inline-flex;
28
28
  align-items: center;
29
29
  justify-content: center;
30
30
  }
31
- .uiButton .ant-btn-icon svg {
31
+ .uiButton_3Yg7B .ant-btn-icon svg {
32
32
  vertical-align: middle;
33
33
  display: block;
34
34
  }
35
- .uiButton {
35
+ .uiButton_3Yg7B {
36
36
  transition:
37
37
  transform 100ms ease,
38
38
  box-shadow 150ms ease,
39
39
  opacity 100ms ease;
40
40
  }
41
- .uiButton:active:not(:disabled):not(.ant-btn-disabled) {
41
+ .uiButton_3Yg7B:active:not(:disabled):not(.ant-btn-disabled) {
42
42
  transform: scale(0.96);
43
43
  transition: transform 60ms ease;
44
44
  }
45
- .uiButton.ant-btn-primary {
45
+ .uiButton_3Yg7B.ant-btn-primary {
46
46
  transition: transform 150ms ease, box-shadow 150ms ease;
47
47
  }
48
- .uiButton.ant-btn-primary:hover:not(:disabled):not(.ant-btn-disabled) {
48
+ .uiButton_3Yg7B.ant-btn-primary:hover:not(:disabled):not(.ant-btn-disabled) {
49
49
  transform: translateY(-1px);
50
50
  box-shadow: 0 4px 12px rgba(12, 102, 255, 0.3);
51
51
  }
52
- .uiButton.ant-btn-primary:active:not(:disabled):not(.ant-btn-disabled) {
52
+ .uiButton_3Yg7B.ant-btn-primary:active:not(:disabled):not(.ant-btn-disabled) {
53
53
  transform: scale(0.97);
54
54
  box-shadow: none;
55
55
  transition: transform 60ms ease;
56
56
  }
57
- .uiButton.ant-btn-default:active:not(:disabled):not(.ant-btn-disabled),
58
- .uiButton.ant-btn-dashed:active:not(:disabled):not(.ant-btn-disabled) {
57
+ .uiButton_3Yg7B.ant-btn-default:active:not(:disabled):not(.ant-btn-disabled),
58
+ .uiButton_3Yg7B.ant-btn-dashed:active:not(:disabled):not(.ant-btn-disabled) {
59
59
  opacity: 0.75;
60
60
  }
61
- .uiButton.ant-btn-text:active:not(:disabled):not(.ant-btn-disabled),
62
- .uiButton.ant-btn-link:active:not(:disabled):not(.ant-btn-disabled) {
61
+ .uiButton_3Yg7B.ant-btn-text:active:not(:disabled):not(.ant-btn-disabled),
62
+ .uiButton_3Yg7B.ant-btn-link:active:not(:disabled):not(.ant-btn-disabled) {
63
63
  background: rgba(0, 0, 0, 0.06) !important;
64
64
  transform: scale(0.95);
65
65
  }
66
- [dir=rtl] .uiButton .ant-btn-icon {
66
+ [dir=rtl] .uiButton_3Yg7B .ant-btn-icon {
67
67
  transform: scaleX(-1);
68
68
  }
69
69
 
70
- /* src/core/UICard.module.css */
71
- .card {
70
+ /* kb-css-modules-css:/Users/kirillbaranov/Desktop/work/kb-labs-workspace/studio/ui-kit/src/core/UICard.module.css?kb-css-modules-css */
71
+ .card_0vX7- {
72
72
  --card-accent: var(--border-primary);
73
73
  box-shadow: 0 1px 2px var(--shadow);
74
74
  transition:
@@ -77,7 +77,7 @@
77
77
  border-color 200ms ease;
78
78
  position: relative;
79
79
  }
80
- .card::before {
80
+ .card_0vX7-::before {
81
81
  content: "";
82
82
  position: absolute;
83
83
  top: 0;
@@ -89,17 +89,17 @@
89
89
  opacity: 0;
90
90
  transition: opacity 200ms ease;
91
91
  }
92
- .card.accented::before {
92
+ .card_0vX7-.accented_yICrq::before {
93
93
  opacity: 1;
94
94
  }
95
- .card.hoverable:hover {
95
+ .card_0vX7-.hoverable_NBVEA:hover {
96
96
  box-shadow: 0 8px 20px -4px var(--shadow-hover);
97
97
  border-color: var(--border-secondary);
98
98
  transform: translateY(-1px);
99
99
  }
100
100
 
101
- /* src/core/UITag.module.css */
102
- .kb-ui-tag {
101
+ /* kb-css-modules-css:/Users/kirillbaranov/Desktop/work/kb-labs-workspace/studio/ui-kit/src/core/UITag.module.css?kb-css-modules-css */
102
+ .kb-ui-tag_D2ji0 {
103
103
  transition:
104
104
  opacity 100ms ease,
105
105
  transform 100ms ease,
@@ -108,105 +108,105 @@
108
108
  background-color 150ms ease,
109
109
  filter 150ms ease;
110
110
  }
111
- .kb-ui-tag:not([disabled]):hover {
111
+ .kb-ui-tag_D2ji0:not([disabled]):hover {
112
112
  filter: brightness(1.06);
113
113
  }
114
- .kb-ui-tag--clickable {
114
+ .kb-ui-tag--clickable_FGDC8 {
115
115
  cursor: pointer;
116
116
  }
117
- .kb-ui-tag--clickable:not([disabled]):hover {
117
+ .kb-ui-tag--clickable_FGDC8:not([disabled]):hover {
118
118
  transform: translateY(-1px);
119
119
  box-shadow: 0 2px 8px var(--shadow-hover, rgba(0, 0, 0, 0.1));
120
120
  border-color: var(--border-secondary);
121
121
  }
122
- .kb-ui-tag--clickable:not([disabled]):active {
122
+ .kb-ui-tag--clickable_FGDC8:not([disabled]):active {
123
123
  opacity: 0.7;
124
124
  transform: scale(0.94);
125
125
  box-shadow: none;
126
126
  transition: opacity 50ms ease, transform 50ms ease;
127
127
  }
128
128
 
129
- /* src/core/UIIcon.module.css */
130
- .uiIcon {
129
+ /* kb-css-modules-css:/Users/kirillbaranov/Desktop/work/kb-labs-workspace/studio/ui-kit/src/core/UIIcon.module.css?kb-css-modules-css */
130
+ .uiIcon_k0ec4 {
131
131
  display: inline-flex;
132
132
  align-items: center;
133
133
  justify-content: center;
134
134
  vertical-align: middle;
135
135
  }
136
- .uiIcon svg {
136
+ .uiIcon_k0ec4 svg {
137
137
  color: currentColor;
138
138
  stroke: currentColor;
139
139
  fill: none;
140
140
  display: block;
141
141
  }
142
- .uiIcon .anticon {
142
+ .uiIcon_k0ec4 .anticon {
143
143
  color: currentColor;
144
144
  }
145
- .uiIcon.clickable {
145
+ .uiIcon_k0ec4.clickable_OssZj {
146
146
  cursor: pointer;
147
147
  transition: opacity 0.2s ease, transform 0.1s ease;
148
148
  }
149
- .uiIcon.clickable:hover {
149
+ .uiIcon_k0ec4.clickable_OssZj:hover {
150
150
  opacity: 0.8;
151
151
  }
152
- .uiIcon.clickable:active {
152
+ .uiIcon_k0ec4.clickable_OssZj:active {
153
153
  transform: scale(0.95);
154
154
  }
155
- .uiIcon.size-xs {
155
+ .uiIcon_k0ec4.size-xs_M79Cj {
156
156
  font-size: 12px;
157
157
  width: 12px;
158
158
  height: 12px;
159
159
  }
160
- .uiIcon.size-sm {
160
+ .uiIcon_k0ec4.size-sm_10jDl {
161
161
  font-size: 14px;
162
162
  width: 14px;
163
163
  height: 14px;
164
164
  }
165
- .uiIcon.size-base {
165
+ .uiIcon_k0ec4.size-base_h9Lkp {
166
166
  font-size: 16px;
167
167
  width: 16px;
168
168
  height: 16px;
169
169
  }
170
- .uiIcon.size-lg {
170
+ .uiIcon_k0ec4.size-lg_O0C5x {
171
171
  font-size: 20px;
172
172
  width: 20px;
173
173
  height: 20px;
174
174
  }
175
- .uiIcon.size-xl {
175
+ .uiIcon_k0ec4.size-xl_WXfPC {
176
176
  font-size: 24px;
177
177
  width: 24px;
178
178
  height: 24px;
179
179
  }
180
- .uiIcon.size-2xl {
180
+ .uiIcon_k0ec4.size-2xl_32DCm {
181
181
  font-size: 32px;
182
182
  width: 32px;
183
183
  height: 32px;
184
184
  }
185
- .uiIcon.color-primary {
185
+ .uiIcon_k0ec4.color-primary_h3CLu {
186
186
  color: var(--link, #2563EB);
187
187
  }
188
- .uiIcon.color-secondary {
188
+ .uiIcon_k0ec4.color-secondary_4pb5w {
189
189
  color: var(--text-secondary, #6B7280);
190
190
  }
191
- .uiIcon.color-success {
191
+ .uiIcon_k0ec4.color-success_O8h6- {
192
192
  color: var(--success, #16A34A);
193
193
  }
194
- .uiIcon.color-warning {
194
+ .uiIcon_k0ec4.color-warning_dYWdv {
195
195
  color: var(--warning, #F59E0B);
196
196
  }
197
- .uiIcon.color-error {
197
+ .uiIcon_k0ec4.color-error_adjhG {
198
198
  color: var(--error, #DC2626);
199
199
  }
200
- .uiIcon.color-info {
200
+ .uiIcon_k0ec4.color-info_TwzBK {
201
201
  color: var(--info, #0EA5E9);
202
202
  }
203
- .uiIcon.color-inherit {
203
+ .uiIcon_k0ec4.color-inherit_YCf-Z {
204
204
  color: inherit;
205
205
  }
206
- .uiIcon.spin {
207
- animation: uiIconSpin 1s linear infinite;
206
+ .uiIcon_k0ec4.spin_rwV9G {
207
+ animation: uiIconSpin_JA9h9 1s linear infinite;
208
208
  }
209
- @keyframes uiIconSpin {
209
+ @keyframes uiIconSpin_JA9h9 {
210
210
  from {
211
211
  transform: rotate(0deg);
212
212
  }
@@ -214,14 +214,14 @@
214
214
  transform: rotate(360deg);
215
215
  }
216
216
  }
217
- .uiIcon.disabled {
217
+ .uiIcon_k0ec4.disabled_sSgts {
218
218
  opacity: 0.4;
219
219
  cursor: not-allowed;
220
220
  pointer-events: none;
221
221
  }
222
222
 
223
- /* src/core/UIShimmerText.module.css */
224
- .shimmer {
223
+ /* kb-css-modules-css:/Users/kirillbaranov/Desktop/work/kb-labs-workspace/studio/ui-kit/src/core/UIShimmerText.module.css?kb-css-modules-css */
224
+ .shimmer_Vu6DO {
225
225
  background:
226
226
  linear-gradient(
227
227
  90deg,
@@ -235,10 +235,10 @@
235
235
  background-clip: text;
236
236
  -webkit-text-fill-color: transparent;
237
237
  color: transparent;
238
- animation: shimmerMove var(--shimmer-duration, 2s) linear infinite;
238
+ animation: shimmerMove_64hFq var(--shimmer-duration, 2s) linear infinite;
239
239
  display: inline-block;
240
240
  }
241
- @keyframes shimmerMove {
241
+ @keyframes shimmerMove_64hFq {
242
242
  0% {
243
243
  background-position: 100% 0;
244
244
  }
@@ -247,8 +247,8 @@
247
247
  }
248
248
  }
249
249
 
250
- /* src/feedback/UISkeleton.module.css */
251
- @keyframes skeletonLoading {
250
+ /* kb-css-modules-css:/Users/kirillbaranov/Desktop/work/kb-labs-workspace/studio/ui-kit/src/feedback/UISkeleton.module.css?kb-css-modules-css */
251
+ @keyframes skeletonLoading_Cb6ey {
252
252
  0% {
253
253
  background-position: 100% 50%;
254
254
  }
@@ -256,7 +256,7 @@
256
256
  background-position: 0% 50%;
257
257
  }
258
258
  }
259
- .skeletonText {
260
- animation: skeletonLoading 1.4s ease infinite;
259
+ .skeletonText_D4KLj {
260
+ animation: skeletonLoading_Cb6ey 1.4s ease infinite;
261
261
  }
262
262
  /*# sourceMappingURL=index.css.map */
package/dist/index.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/core/UIButton.module.css","../src/core/UICard.module.css","../src/core/UITag.module.css","../src/core/UIIcon.module.css","../src/core/UIShimmerText.module.css","../src/feedback/UISkeleton.module.css"],"sourcesContent":["/**\n * UIButton styles - Proper SVG icon theming\n *\n * This ensures all SVG icons (lucide-react, etc.) inherit colors from CSS variables\n * and work correctly in both light and dark themes.\n */\n\n.uiButton {\n /* Button inherits theme colors from Ant Design tokens */\n}\n\n/*\n * CRITICAL: SVG icon color inheritance\n *\n * Force all SVG icons to inherit button text color automatically\n * Works for lucide-react, heroicons, and any other icon libraries\n */\n.uiButton svg {\n color: inherit !important;\n stroke: currentColor !important;\n fill: currentColor !important;\n}\n\n/*\n * Disabled state - reduce opacity\n */\n.uiButton:disabled svg,\n.uiButton.ant-btn-disabled svg {\n opacity: 0.4;\n}\n\n/*\n * Size variants - ensure SVG scales properly\n */\n.uiButton.ant-btn-sm svg {\n /* Small button icons */\n width: 14px;\n height: 14px;\n}\n\n.uiButton svg {\n /* Default (middle) button icons */\n width: 16px;\n height: 16px;\n}\n\n.uiButton.ant-btn-lg svg {\n /* Large button icons */\n width: 18px;\n height: 18px;\n}\n\n/*\n * Icon positioning within button\n * Ensures proper spacing between icon and text\n */\n.uiButton .ant-btn-icon {\n /* Icon wrapper - CRITICAL: must inherit color for SVG to get correct color */\n color: inherit !important;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.uiButton .ant-btn-icon svg {\n /* SVG inside icon wrapper */\n vertical-align: middle;\n display: block; /* Remove inline spacing */\n}\n\n/*\n * All buttons — base transition and press feedback\n */\n.uiButton {\n transition: transform 100ms ease, box-shadow 150ms ease, opacity 100ms ease;\n}\n\n.uiButton:active:not(:disabled):not(.ant-btn-disabled) {\n transform: scale(0.96);\n transition: transform 60ms ease;\n}\n\n/*\n * Primary button — subtle lift on hover, snap back on press\n */\n.uiButton.ant-btn-primary {\n transition: transform 150ms ease, box-shadow 150ms ease;\n}\n\n.uiButton.ant-btn-primary:hover:not(:disabled):not(.ant-btn-disabled) {\n transform: translateY(-1px);\n box-shadow: 0 4px 12px rgba(12, 102, 255, 0.3);\n}\n\n.uiButton.ant-btn-primary:active:not(:disabled):not(.ant-btn-disabled) {\n transform: scale(0.97);\n box-shadow: none;\n transition: transform 60ms ease;\n}\n\n/*\n * Default / dashed — dim on press\n */\n.uiButton.ant-btn-default:active:not(:disabled):not(.ant-btn-disabled),\n.uiButton.ant-btn-dashed:active:not(:disabled):not(.ant-btn-disabled) {\n opacity: 0.75;\n}\n\n/*\n * Text / link — background flash on press for clear tactile signal\n */\n.uiButton.ant-btn-text:active:not(:disabled):not(.ant-btn-disabled),\n.uiButton.ant-btn-link:active:not(:disabled):not(.ant-btn-disabled) {\n background: rgba(0, 0, 0, 0.06) !important;\n transform: scale(0.95);\n}\n\n/*\n * RTL (Right-to-Left) support\n */\n[dir='rtl'] .uiButton .ant-btn-icon {\n /* Mirror icon position in RTL */\n transform: scaleX(-1);\n}\n",".card {\n --card-accent: var(--border-primary);\n box-shadow: 0 1px 2px var(--shadow);\n transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease;\n position: relative;\n}\n\n.card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 16px;\n right: 16px;\n height: 2px;\n border-radius: 0 0 2px 2px;\n background: var(--card-accent);\n opacity: 0;\n transition: opacity 200ms ease;\n}\n\n.card.accented::before {\n opacity: 1;\n}\n\n.card.hoverable:hover {\n box-shadow: 0 8px 20px -4px var(--shadow-hover);\n border-color: var(--border-secondary);\n transform: translateY(-1px);\n}\n","/*\n * UITag styles — interactive feedback for clickable tags\n *\n * Class name is hardcoded ('kb-ui-tag') because tsup doesn't map\n * CSS module class names in the dist bundle — styles.className is always {}.\n */\n\n.kb-ui-tag {\n transition: opacity 100ms ease, transform 100ms ease, box-shadow 150ms ease, border-color 150ms ease, background-color 150ms ease, filter 150ms ease;\n}\n\n/*\n * All tags, even plain informational ones (e.g. capability badges on a\n * card), get a subtle brightness lift on hover so the whole UI feels alive.\n */\n.kb-ui-tag:not([disabled]):hover {\n filter: brightness(1.06);\n}\n\n/* Tags with an onClick additionally get lift/press feedback — they're pressable. */\n.kb-ui-tag--clickable {\n cursor: pointer;\n}\n\n.kb-ui-tag--clickable:not([disabled]):hover {\n transform: translateY(-1px);\n box-shadow: 0 2px 8px var(--shadow-hover, rgba(0, 0, 0, 0.1));\n border-color: var(--border-secondary);\n}\n\n.kb-ui-tag--clickable:not([disabled]):active {\n opacity: 0.7;\n transform: scale(0.94);\n box-shadow: none;\n transition: opacity 50ms ease, transform 50ms ease;\n}\n","/**\n * UIIcon styles - Proper SVG and icon font theming\n *\n * Ensures all icons (Ant Design icons, lucide-react, custom SVG)\n * inherit colors from CSS variables and work in both light and dark themes.\n */\n\n.uiIcon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n vertical-align: middle;\n}\n\n/*\n * SVG icons (lucide-react, custom SVG)\n * Use currentColor to inherit from parent color\n */\n.uiIcon svg {\n color: currentColor;\n stroke: currentColor;\n fill: none; /* Most icon libraries use stroke, not fill */\n display: block; /* Remove inline spacing */\n}\n\n/*\n * Ant Design icons (icon fonts)\n * Already use currentColor by default, but ensure it's explicit\n */\n.uiIcon .anticon {\n color: currentColor;\n}\n\n/*\n * Clickable icons (icon buttons)\n */\n.uiIcon.clickable {\n cursor: pointer;\n transition: opacity 0.2s ease, transform 0.1s ease;\n}\n\n.uiIcon.clickable:hover {\n opacity: 0.8;\n}\n\n.uiIcon.clickable:active {\n transform: scale(0.95);\n}\n\n/*\n * Size variants\n */\n.uiIcon.size-xs {\n font-size: 12px;\n width: 12px;\n height: 12px;\n}\n\n.uiIcon.size-sm {\n font-size: 14px;\n width: 14px;\n height: 14px;\n}\n\n.uiIcon.size-base {\n font-size: 16px;\n width: 16px;\n height: 16px;\n}\n\n.uiIcon.size-lg {\n font-size: 20px;\n width: 20px;\n height: 20px;\n}\n\n.uiIcon.size-xl {\n font-size: 24px;\n width: 24px;\n height: 24px;\n}\n\n.uiIcon.size-2xl {\n font-size: 32px;\n width: 32px;\n height: 32px;\n}\n\n/*\n * Color variants using CSS variables\n */\n.uiIcon.color-primary {\n color: var(--link, #2563EB);\n}\n\n.uiIcon.color-secondary {\n color: var(--text-secondary, #6B7280);\n}\n\n.uiIcon.color-success {\n color: var(--success, #16A34A);\n}\n\n.uiIcon.color-warning {\n color: var(--warning, #F59E0B);\n}\n\n.uiIcon.color-error {\n color: var(--error, #DC2626);\n}\n\n.uiIcon.color-info {\n color: var(--info, #0EA5E9);\n}\n\n.uiIcon.color-inherit {\n color: inherit;\n}\n\n/*\n * Spin animation\n */\n.uiIcon.spin {\n animation: uiIconSpin 1s linear infinite;\n}\n\n@keyframes uiIconSpin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n/*\n * Disabled state\n */\n.uiIcon.disabled {\n opacity: 0.4;\n cursor: not-allowed;\n pointer-events: none;\n}\n","/**\n * UIShimmerText - Animated gradient shimmer on text\n * Classic \"Cursor / ClickUp\" loading text effect.\n */\n\n.shimmer {\n background: linear-gradient(\n 90deg,\n var(--shimmer-color-1, #888) 0%,\n var(--shimmer-color-2, #888) 25%,\n var(--shimmer-highlight, #fff) 50%,\n var(--shimmer-color-2, #888) 75%,\n var(--shimmer-color-1, #888) 100%\n );\n background-size: 200% 100%;\n -webkit-background-clip: text;\n background-clip: text;\n -webkit-text-fill-color: transparent;\n color: transparent;\n animation: shimmerMove var(--shimmer-duration, 2s) linear infinite;\n display: inline-block;\n}\n\n@keyframes shimmerMove {\n 0% { background-position: 100% 0; }\n 100% { background-position: -100% 0; }\n}\n","@keyframes skeletonLoading {\n 0% { background-position: 100% 50%; }\n 100% { background-position: 0% 50%; }\n}\n\n.skeletonText {\n animation: skeletonLoading 1.4s ease infinite;\n}\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["kb-css-modules-css:/Users/kirillbaranov/Desktop/work/kb-labs-workspace/studio/ui-kit/src/core/UIButton.module.css?kb-css-modules-css","kb-css-modules-css:/Users/kirillbaranov/Desktop/work/kb-labs-workspace/studio/ui-kit/src/core/UICard.module.css?kb-css-modules-css","kb-css-modules-css:/Users/kirillbaranov/Desktop/work/kb-labs-workspace/studio/ui-kit/src/core/UITag.module.css?kb-css-modules-css","kb-css-modules-css:/Users/kirillbaranov/Desktop/work/kb-labs-workspace/studio/ui-kit/src/core/UIIcon.module.css?kb-css-modules-css","kb-css-modules-css:/Users/kirillbaranov/Desktop/work/kb-labs-workspace/studio/ui-kit/src/core/UIShimmerText.module.css?kb-css-modules-css","kb-css-modules-css:/Users/kirillbaranov/Desktop/work/kb-labs-workspace/studio/ui-kit/src/feedback/UISkeleton.module.css?kb-css-modules-css"],"sourcesContent":["/**\n * UIButton styles - Proper SVG icon theming\n *\n * This ensures all SVG icons (lucide-react, etc.) inherit colors from CSS variables\n * and work correctly in both light and dark themes.\n *\n * `.ant-btn-*` / `.ant-btn-icon` are Ant Design's own (unscoped) classes on the\n * rendered DOM — wrapped in :global() so CSS Modules doesn't hash them away\n * from under the real selectors.\n */\n\n.uiButton_3Yg7B {\n /* Button inherits theme colors from Ant Design tokens */\n}\n\n/*\n * CRITICAL: SVG icon color inheritance\n *\n * Force all SVG icons to inherit button text color automatically\n * Works for lucide-react, heroicons, and any other icon libraries\n */\n.uiButton_3Yg7B svg {\n color: inherit !important;\n stroke: currentColor !important;\n fill: currentColor !important;\n}\n\n/*\n * Disabled state - reduce opacity\n */\n.uiButton_3Yg7B:disabled svg,\n.uiButton_3Yg7B.ant-btn-disabled svg {\n opacity: 0.4;\n}\n\n/*\n * Size variants - ensure SVG scales properly\n */\n.uiButton_3Yg7B.ant-btn-sm svg {\n /* Small button icons */\n width: 14px;\n height: 14px;\n}\n\n.uiButton_3Yg7B svg {\n /* Default (middle) button icons */\n width: 16px;\n height: 16px;\n}\n\n.uiButton_3Yg7B.ant-btn-lg svg {\n /* Large button icons */\n width: 18px;\n height: 18px;\n}\n\n/*\n * Icon positioning within button\n * Ensures proper spacing between icon and text\n */\n.uiButton_3Yg7B .ant-btn-icon {\n /* Icon wrapper - CRITICAL: must inherit color for SVG to get correct color */\n color: inherit !important;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.uiButton_3Yg7B .ant-btn-icon svg {\n /* SVG inside icon wrapper */\n vertical-align: middle;\n display: block; /* Remove inline spacing */\n}\n\n/*\n * All buttons — base transition and press feedback\n */\n.uiButton_3Yg7B {\n transition: transform 100ms ease, box-shadow 150ms ease, opacity 100ms ease;\n}\n\n.uiButton_3Yg7B:active:not(:disabled):not(.ant-btn-disabled) {\n transform: scale(0.96);\n transition: transform 60ms ease;\n}\n\n/*\n * Primary button — subtle lift on hover, snap back on press\n */\n.uiButton_3Yg7B.ant-btn-primary {\n transition: transform 150ms ease, box-shadow 150ms ease;\n}\n\n.uiButton_3Yg7B.ant-btn-primary:hover:not(:disabled):not(.ant-btn-disabled) {\n transform: translateY(-1px);\n box-shadow: 0 4px 12px rgba(12, 102, 255, 0.3);\n}\n\n.uiButton_3Yg7B.ant-btn-primary:active:not(:disabled):not(.ant-btn-disabled) {\n transform: scale(0.97);\n box-shadow: none;\n transition: transform 60ms ease;\n}\n\n/*\n * Default / dashed — dim on press\n */\n.uiButton_3Yg7B.ant-btn-default:active:not(:disabled):not(.ant-btn-disabled),\n.uiButton_3Yg7B.ant-btn-dashed:active:not(:disabled):not(.ant-btn-disabled) {\n opacity: 0.75;\n}\n\n/*\n * Text / link — background flash on press for clear tactile signal\n */\n.uiButton_3Yg7B.ant-btn-text:active:not(:disabled):not(.ant-btn-disabled),\n.uiButton_3Yg7B.ant-btn-link:active:not(:disabled):not(.ant-btn-disabled) {\n background: rgba(0, 0, 0, 0.06) !important;\n transform: scale(0.95);\n}\n\n/*\n * RTL (Right-to-Left) support\n */\n[dir='rtl'] .uiButton_3Yg7B .ant-btn-icon {\n /* Mirror icon position in RTL */\n transform: scaleX(-1);\n}\n",".card_0vX7- {\n --card-accent: var(--border-primary);\n box-shadow: 0 1px 2px var(--shadow);\n transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease;\n position: relative;\n}\n\n.card_0vX7-::before {\n content: '';\n position: absolute;\n top: 0;\n left: 16px;\n right: 16px;\n height: 2px;\n border-radius: 0 0 2px 2px;\n background: var(--card-accent);\n opacity: 0;\n transition: opacity 200ms ease;\n}\n\n.card_0vX7-.accented_yICrq::before {\n opacity: 1;\n}\n\n.card_0vX7-.hoverable_NBVEA:hover {\n box-shadow: 0 8px 20px -4px var(--shadow-hover);\n border-color: var(--border-secondary);\n transform: translateY(-1px);\n}\n","/*\n * UITag styles — interactive feedback for clickable tags\n */\n\n.kb-ui-tag_D2ji0 {\n transition: opacity 100ms ease, transform 100ms ease, box-shadow 150ms ease, border-color 150ms ease, background-color 150ms ease, filter 150ms ease;\n}\n\n/*\n * All tags, even plain informational ones (e.g. capability badges on a\n * card), get a subtle brightness lift on hover so the whole UI feels alive.\n */\n.kb-ui-tag_D2ji0:not([disabled]):hover {\n filter: brightness(1.06);\n}\n\n/* Tags with an onClick additionally get lift/press feedback — they're pressable. */\n.kb-ui-tag--clickable_FGDC8 {\n cursor: pointer;\n}\n\n.kb-ui-tag--clickable_FGDC8:not([disabled]):hover {\n transform: translateY(-1px);\n box-shadow: 0 2px 8px var(--shadow-hover, rgba(0, 0, 0, 0.1));\n border-color: var(--border-secondary);\n}\n\n.kb-ui-tag--clickable_FGDC8:not([disabled]):active {\n opacity: 0.7;\n transform: scale(0.94);\n box-shadow: none;\n transition: opacity 50ms ease, transform 50ms ease;\n}\n","/**\n * UIIcon styles - Proper SVG and icon font theming\n *\n * Ensures all icons (Ant Design icons, lucide-react, custom SVG)\n * inherit colors from CSS variables and work in both light and dark themes.\n */\n\n.uiIcon_k0ec4 {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n vertical-align: middle;\n}\n\n/*\n * SVG icons (lucide-react, custom SVG)\n * Use currentColor to inherit from parent color\n */\n.uiIcon_k0ec4 svg {\n color: currentColor;\n stroke: currentColor;\n fill: none; /* Most icon libraries use stroke, not fill */\n display: block; /* Remove inline spacing */\n}\n\n/*\n * Ant Design icons (icon fonts)\n * Already use currentColor by default, but ensure it's explicit\n * `.anticon` is Ant Design's own (unscoped) class — wrapped in :global()\n * so CSS Modules doesn't hash it away from the real DOM class.\n */\n.uiIcon_k0ec4 .anticon {\n color: currentColor;\n}\n\n/*\n * Clickable icons (icon buttons)\n */\n.uiIcon_k0ec4.clickable_OssZj {\n cursor: pointer;\n transition: opacity 0.2s ease, transform 0.1s ease;\n}\n\n.uiIcon_k0ec4.clickable_OssZj:hover {\n opacity: 0.8;\n}\n\n.uiIcon_k0ec4.clickable_OssZj:active {\n transform: scale(0.95);\n}\n\n/*\n * Size variants\n */\n.uiIcon_k0ec4.size-xs_M79Cj {\n font-size: 12px;\n width: 12px;\n height: 12px;\n}\n\n.uiIcon_k0ec4.size-sm_10jDl {\n font-size: 14px;\n width: 14px;\n height: 14px;\n}\n\n.uiIcon_k0ec4.size-base_h9Lkp {\n font-size: 16px;\n width: 16px;\n height: 16px;\n}\n\n.uiIcon_k0ec4.size-lg_O0C5x {\n font-size: 20px;\n width: 20px;\n height: 20px;\n}\n\n.uiIcon_k0ec4.size-xl_WXfPC {\n font-size: 24px;\n width: 24px;\n height: 24px;\n}\n\n.uiIcon_k0ec4.size-2xl_32DCm {\n font-size: 32px;\n width: 32px;\n height: 32px;\n}\n\n/*\n * Color variants using CSS variables\n */\n.uiIcon_k0ec4.color-primary_h3CLu {\n color: var(--link, #2563EB);\n}\n\n.uiIcon_k0ec4.color-secondary_4pb5w {\n color: var(--text-secondary, #6B7280);\n}\n\n.uiIcon_k0ec4.color-success_O8h6- {\n color: var(--success, #16A34A);\n}\n\n.uiIcon_k0ec4.color-warning_dYWdv {\n color: var(--warning, #F59E0B);\n}\n\n.uiIcon_k0ec4.color-error_adjhG {\n color: var(--error, #DC2626);\n}\n\n.uiIcon_k0ec4.color-info_TwzBK {\n color: var(--info, #0EA5E9);\n}\n\n.uiIcon_k0ec4.color-inherit_YCf-Z {\n color: inherit;\n}\n\n/*\n * Spin animation\n */\n.uiIcon_k0ec4.spin_rwV9G {\n animation: uiIconSpin_JA9h9 1s linear infinite;\n}\n\n@keyframes uiIconSpin_JA9h9 {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n/*\n * Disabled state\n */\n.uiIcon_k0ec4.disabled_sSgts {\n opacity: 0.4;\n cursor: not-allowed;\n pointer-events: none;\n}\n","/**\n * UIShimmerText - Animated gradient shimmer on text\n * Classic \"Cursor / ClickUp\" loading text effect.\n */\n\n.shimmer_Vu6DO {\n background: linear-gradient(\n 90deg,\n var(--shimmer-color-1, #888) 0%,\n var(--shimmer-color-2, #888) 25%,\n var(--shimmer-highlight, #fff) 50%,\n var(--shimmer-color-2, #888) 75%,\n var(--shimmer-color-1, #888) 100%\n );\n background-size: 200% 100%;\n -webkit-background-clip: text;\n background-clip: text;\n -webkit-text-fill-color: transparent;\n color: transparent;\n animation: shimmerMove_64hFq var(--shimmer-duration, 2s) linear infinite;\n display: inline-block;\n}\n\n@keyframes shimmerMove_64hFq {\n 0% { background-position: 100% 0; }\n 100% { background-position: -100% 0; }\n}\n","@keyframes skeletonLoading_Cb6ey {\n 0% { background-position: 100% 50%; }\n 100% { background-position: 0% 50%; }\n}\n\n.skeletonText_D4KLj {\n animation: skeletonLoading_Cb6ey 1.4s ease infinite;\n}\n"],"mappings":"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","names":[]}
package/dist/index.js CHANGED
@@ -3,6 +3,7 @@ import { typography, spacing } from '@kb-labs/studio-ui-core';
3
3
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
4
4
  import * as React4 from 'react';
5
5
  import { useMemo } from 'react';
6
+ import clsx from 'clsx';
6
7
  import { Line, Column, Area, Pie, Bar } from '@ant-design/charts';
7
8
  import dayjs from 'dayjs';
8
9
  import { useNavigate, useSearchParams, useParams } from 'react-router-dom';
@@ -187,11 +188,11 @@ function UIBadge({ variant = "default", children, ...props }) {
187
188
  );
188
189
  }
189
190
 
190
- // src/core/UIButton.module.css
191
- var UIButton_default = {};
191
+ // kb-css-modules-tokens:/Users/kirillbaranov/Desktop/work/kb-labs-workspace/studio/ui-kit/src/core/UIButton.module.css?kb-css-modules-tokens
192
+ var UIButton_module_default = { "uiButton": "uiButton_3Yg7B" };
192
193
  var UIButton = React4.forwardRef(
193
194
  function UIButton2({ variant = "default", className, ...rest }, ref) {
194
- const combinedClassName = [UIButton_default.uiButton, className].filter(Boolean).join(" ");
195
+ const combinedClassName = [UIButton_module_default.uiButton, className].filter(Boolean).join(" ");
195
196
  return /* @__PURE__ */ jsx(
196
197
  Button,
197
198
  {
@@ -204,8 +205,8 @@ var UIButton = React4.forwardRef(
204
205
  }
205
206
  );
206
207
 
207
- // src/core/UICard.module.css
208
- var UICard_default = {};
208
+ // kb-css-modules-tokens:/Users/kirillbaranov/Desktop/work/kb-labs-workspace/studio/ui-kit/src/core/UICard.module.css?kb-css-modules-tokens
209
+ var UICard_module_default = { "card": "card_0vX7-", "accented": "accented_yICrq", "hoverable": "hoverable_NBVEA" };
209
210
  var { useToken: useToken3 } = theme;
210
211
  var variantTokens = {
211
212
  default: { accent: "var(--border-primary)" },
@@ -243,12 +244,12 @@ function UICard({
243
244
  hoverable: false,
244
245
  loading,
245
246
  ...rest,
246
- className: [
247
- UICard_default.card,
248
- hoverable && UICard_default.hoverable,
249
- status !== "default" && UICard_default.accented,
247
+ className: clsx(
248
+ UICard_module_default.card,
249
+ hoverable && UICard_module_default.hoverable,
250
+ status !== "default" && UICard_module_default.accented,
250
251
  rest.className
251
- ].filter(Boolean).join(" "),
252
+ ),
252
253
  style: {
253
254
  borderColor: token.colorBorder,
254
255
  overflow: "hidden",
@@ -262,6 +263,9 @@ function UICard({
262
263
  }
263
264
  );
264
265
  }
266
+
267
+ // kb-css-modules-tokens:/Users/kirillbaranov/Desktop/work/kb-labs-workspace/studio/ui-kit/src/core/UITag.module.css?kb-css-modules-tokens
268
+ var UITag_module_default = { "kb-ui-tag": "kb-ui-tag_D2ji0", "kb-ui-tag--clickable": "kb-ui-tag--clickable_FGDC8" };
265
269
  function UITag({
266
270
  variant = "default",
267
271
  color,
@@ -281,7 +285,11 @@ function UITag({
281
285
  default: void 0,
282
286
  neutral: void 0
283
287
  };
284
- const combinedClassName = ["kb-ui-tag", onClick && "kb-ui-tag--clickable", className].filter(Boolean).join(" ");
288
+ const combinedClassName = clsx(
289
+ UITag_module_default["kb-ui-tag"],
290
+ onClick && UITag_module_default["kb-ui-tag--clickable"],
291
+ className
292
+ );
285
293
  return /* @__PURE__ */ jsx(
286
294
  Tag,
287
295
  {
@@ -324,8 +332,8 @@ function UITitle({
324
332
  return /* @__PURE__ */ jsx(AntTitle, { level, className, style: { marginBottom: spacing[3], ...style }, children });
325
333
  }
326
334
 
327
- // src/core/UIIcon.module.css
328
- var UIIcon_default = {};
335
+ // kb-css-modules-tokens:/Users/kirillbaranov/Desktop/work/kb-labs-workspace/studio/ui-kit/src/core/UIIcon.module.css?kb-css-modules-tokens
336
+ var UIIcon_module_default = { "uiIcon": "uiIcon_k0ec4", "clickable": "clickable_OssZj", "size-xs": "size-xs_M79Cj", "size-sm": "size-sm_10jDl", "size-base": "size-base_h9Lkp", "size-lg": "size-lg_O0C5x", "size-xl": "size-xl_WXfPC", "size-2xl": "size-2xl_32DCm", "color-primary": "color-primary_h3CLu", "color-secondary": "color-secondary_4pb5w", "color-success": "color-success_O8h6-", "color-warning": "color-warning_dYWdv", "color-error": "color-error_adjhG", "color-info": "color-info_TwzBK", "color-inherit": "color-inherit_YCf-Z", "spin": "spin_rwV9G", "uiIconSpin": "uiIconSpin_JA9h9", "disabled": "disabled_sSgts" };
329
337
  var _iconRenderer = null;
330
338
  function registerIconRenderer(renderer) {
331
339
  _iconRenderer = renderer;
@@ -340,15 +348,15 @@ function UIIcon({
340
348
  className,
341
349
  style: customStyle
342
350
  }) {
343
- const classes = [
344
- UIIcon_default.uiIcon,
351
+ const classes = clsx(
352
+ UIIcon_module_default.uiIcon,
345
353
  "anticon",
346
- UIIcon_default[`size-${size}`],
347
- UIIcon_default[`color-${color}`],
348
- spin && UIIcon_default.spin,
349
- onClick && UIIcon_default.clickable,
354
+ UIIcon_module_default[`size-${size}`],
355
+ UIIcon_module_default[`color-${color}`],
356
+ spin && UIIcon_module_default.spin,
357
+ onClick && UIIcon_module_default.clickable,
350
358
  className
351
- ].filter(Boolean).join(" ");
359
+ );
352
360
  let iconElement = null;
353
361
  const iconName = name || (typeof icon === "string" ? icon : null);
354
362
  if (iconName) {
@@ -412,8 +420,8 @@ function useUITheme() {
412
420
  return result;
413
421
  }
414
422
 
415
- // src/core/UIShimmerText.module.css
416
- var UIShimmerText_default = {};
423
+ // kb-css-modules-tokens:/Users/kirillbaranov/Desktop/work/kb-labs-workspace/studio/ui-kit/src/core/UIShimmerText.module.css?kb-css-modules-tokens
424
+ var UIShimmerText_module_default = { "shimmer": "shimmer_Vu6DO"};
417
425
  function UIShimmerText({
418
426
  children,
419
427
  color = "var(--text-secondary, #9CA3AF)",
@@ -425,7 +433,7 @@ function UIShimmerText({
425
433
  return /* @__PURE__ */ jsx(
426
434
  "span",
427
435
  {
428
- className: [UIShimmerText_default.shimmer, className].filter(Boolean).join(" "),
436
+ className: clsx(UIShimmerText_module_default.shimmer, className),
429
437
  style: {
430
438
  "--shimmer-color-1": color,
431
439
  "--shimmer-color-2": color,
@@ -1719,8 +1727,8 @@ function UIErrorState({
1719
1727
  ] }) });
1720
1728
  }
1721
1729
 
1722
- // src/feedback/UISkeleton.module.css
1723
- var UISkeleton_default = {};
1730
+ // kb-css-modules-tokens:/Users/kirillbaranov/Desktop/work/kb-labs-workspace/studio/ui-kit/src/feedback/UISkeleton.module.css?kb-css-modules-tokens
1731
+ var UISkeleton_module_default = { "skeletonText": "skeletonText_D4KLj"};
1724
1732
  function UISkeleton({
1725
1733
  loading = true,
1726
1734
  children,
@@ -1777,7 +1785,7 @@ function UISkeletonText({
1777
1785
  children: widths.map((w, i) => /* @__PURE__ */ jsx(
1778
1786
  "span",
1779
1787
  {
1780
- className: UISkeleton_default.skeletonText,
1788
+ className: clsx(UISkeleton_module_default.skeletonText),
1781
1789
  style: {
1782
1790
  display: "block",
1783
1791
  width: isArray ? typeof w === "number" ? `${w}px` : w : "100%",
@@ -1892,6 +1900,8 @@ function UIMarkdownViewer({ content, className, style: customStyle }) {
1892
1900
  const { token } = useToken16();
1893
1901
  const css = `
1894
1902
  .kb-md { font-size: ${token.fontSize}px; line-height: 1.6; color: ${token.colorText}; font-family: ${token.fontFamily}; }
1903
+ .kb-md > *:first-child { margin-top: 0; }
1904
+ .kb-md > *:last-child { margin-bottom: 0; }
1895
1905
  .kb-md h1,.kb-md h2,.kb-md h3,.kb-md h4,.kb-md h5,.kb-md h6 { font-weight:600; line-height:1.3; margin:1.2em 0 0.4em; color:${token.colorTextHeading}; }
1896
1906
  .kb-md h1:first-child,.kb-md h2:first-child,.kb-md h3:first-child { margin-top:0; }
1897
1907
  .kb-md h1 { font-size:1.5em; padding-bottom:0.3em; border-bottom:1px solid ${token.colorBorderSecondary}; }
@@ -1905,7 +1915,12 @@ function UIMarkdownViewer({ content, className, style: customStyle }) {
1905
1915
  .kb-md pre { background:${token.colorFillQuaternary}; border:1px solid ${token.colorBorderSecondary}; border-radius:${token.borderRadius}px; padding:12px 16px; overflow-x:auto; margin:0.75em 0; }
1906
1916
  .kb-md pre code { background:none; padding:0; font-size:0.85em; color:${token.colorText}; }
1907
1917
  .kb-md ul,.kb-md ol { padding-left:1.5em; margin:0.6em 0; }
1908
- .kb-md li { margin:0.2em 0; }
1918
+ .kb-md ul { list-style: disc; }
1919
+ .kb-md ol { list-style: decimal; }
1920
+ .kb-md ul ul { list-style: circle; }
1921
+ .kb-md ol ol, .kb-md ul ol { list-style: decimal; }
1922
+ .kb-md li { margin:0.2em 0; list-style: inherit; }
1923
+ .kb-md li::marker { color:${token.colorTextTertiary}; }
1909
1924
  .kb-md blockquote { margin:0.75em 0; padding:0.4em 1em; border-left:4px solid ${token.colorPrimaryBorder}; background:${token.colorFillQuaternary}; color:${token.colorTextSecondary}; border-radius:0 ${token.borderRadiusSM}px ${token.borderRadiusSM}px 0; }
1910
1925
  .kb-md blockquote p { margin:0; }
1911
1926
  .kb-md hr { border:none; border-top:1px solid ${token.colorBorderSecondary}; margin:1.2em 0; }