@machinemetrics/mm-react-components 0.2.3-2 → 0.2.3-20

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 (160) hide show
  1. package/README.md +89 -30
  2. package/agent-docs/agent-documentation-reference.md +364 -0
  3. package/agent-docs/ai-agent-guide.md +558 -0
  4. package/agent-docs/ai-agent-init-guide.md +465 -0
  5. package/agent-docs/chakra-migration-readme.md +265 -0
  6. package/agent-docs/chakra-migration-troubleshooting.md +649 -0
  7. package/agent-docs/component-mapping-reference.md +466 -0
  8. package/agent-docs/init-readme.md +283 -0
  9. package/agent-docs/init-troubleshooting.md +550 -0
  10. package/agent-docs/setup-reference.md +365 -0
  11. package/dist/App.d.ts.map +1 -1
  12. package/dist/README.md +89 -30
  13. package/dist/components/ui/alert-dialog.d.ts +15 -0
  14. package/dist/components/ui/alert-dialog.d.ts.map +1 -0
  15. package/dist/components/ui/alert.d.ts +10 -0
  16. package/dist/components/ui/alert.d.ts.map +1 -0
  17. package/dist/components/ui/avatar.d.ts +7 -0
  18. package/dist/components/ui/avatar.d.ts.map +1 -0
  19. package/dist/components/ui/breadcrumb.d.ts +12 -0
  20. package/dist/components/ui/breadcrumb.d.ts.map +1 -0
  21. package/dist/components/ui/button.d.ts.map +1 -1
  22. package/dist/components/ui/card.d.ts +10 -0
  23. package/dist/components/ui/card.d.ts.map +1 -0
  24. package/dist/components/ui/chart.d.ts +41 -0
  25. package/dist/components/ui/chart.d.ts.map +1 -0
  26. package/dist/components/ui/command.d.ts +19 -0
  27. package/dist/components/ui/command.d.ts.map +1 -0
  28. package/dist/components/ui/data-table/TableView.d.ts.map +1 -1
  29. package/dist/components/ui/data-table/cards/RowCard.d.ts.map +1 -1
  30. package/dist/components/ui/data-table/index.d.ts +3 -1
  31. package/dist/components/ui/data-table/index.d.ts.map +1 -1
  32. package/dist/components/ui/data-table/parts/BatchActionsToolbar.d.ts +6 -0
  33. package/dist/components/ui/data-table/parts/BatchActionsToolbar.d.ts.map +1 -0
  34. package/dist/components/ui/data-table/parts/CellContent.d.ts +7 -0
  35. package/dist/components/ui/data-table/parts/CellContent.d.ts.map +1 -0
  36. package/dist/components/ui/data-table/parts/ColGroup.d.ts +7 -0
  37. package/dist/components/ui/data-table/parts/ColGroup.d.ts.map +1 -0
  38. package/dist/components/ui/data-table/parts/SortableHeader.d.ts +13 -0
  39. package/dist/components/ui/data-table/parts/SortableHeader.d.ts.map +1 -0
  40. package/dist/components/ui/data-table/parts/TableBody.d.ts +11 -0
  41. package/dist/components/ui/data-table/parts/TableBody.d.ts.map +1 -0
  42. package/dist/components/ui/data-table/parts/TableHeader.d.ts +15 -0
  43. package/dist/components/ui/data-table/parts/TableHeader.d.ts.map +1 -0
  44. package/dist/components/ui/data-table/toolbar/DataTableToolbar.d.ts.map +1 -1
  45. package/dist/components/ui/data-table/types.d.ts +18 -10
  46. package/dist/components/ui/data-table/types.d.ts.map +1 -1
  47. package/dist/components/ui/data-table/utils.d.ts +2 -0
  48. package/dist/components/ui/data-table/utils.d.ts.map +1 -1
  49. package/dist/components/ui/date-picker.d.ts +36 -0
  50. package/dist/components/ui/date-picker.d.ts.map +1 -0
  51. package/dist/components/ui/dropdown-menu.d.ts +1 -1
  52. package/dist/components/ui/dropdown-menu.d.ts.map +1 -1
  53. package/dist/components/ui/form.d.ts +25 -0
  54. package/dist/components/ui/form.d.ts.map +1 -0
  55. package/dist/components/ui/hero-metric-card/HeroMetricCard.d.ts +4 -0
  56. package/dist/components/ui/hero-metric-card/HeroMetricCard.d.ts.map +1 -0
  57. package/dist/components/ui/hero-metric-card/HeroMetricCardItem.d.ts +4 -0
  58. package/dist/components/ui/hero-metric-card/HeroMetricCardItem.d.ts.map +1 -0
  59. package/dist/components/ui/hero-metric-card/constants.d.ts +13 -0
  60. package/dist/components/ui/hero-metric-card/constants.d.ts.map +1 -0
  61. package/dist/components/ui/hero-metric-card/grid.d.ts +4 -0
  62. package/dist/components/ui/hero-metric-card/grid.d.ts.map +1 -0
  63. package/dist/components/ui/hero-metric-card/hooks.d.ts +6 -0
  64. package/dist/components/ui/hero-metric-card/hooks.d.ts.map +1 -0
  65. package/dist/components/ui/hero-metric-card/index.d.ts +5 -0
  66. package/dist/components/ui/hero-metric-card/index.d.ts.map +1 -0
  67. package/dist/components/ui/hero-metric-card/parsing.d.ts +11 -0
  68. package/dist/components/ui/hero-metric-card/parsing.d.ts.map +1 -0
  69. package/dist/components/ui/hero-metric-card/refs.d.ts +3 -0
  70. package/dist/components/ui/hero-metric-card/refs.d.ts.map +1 -0
  71. package/dist/components/ui/hero-metric-card/trend.d.ts +4 -0
  72. package/dist/components/ui/hero-metric-card/trend.d.ts.map +1 -0
  73. package/dist/components/ui/hero-metric-card/types.d.ts +60 -0
  74. package/dist/components/ui/hero-metric-card/types.d.ts.map +1 -0
  75. package/dist/components/ui/hero-metric-card/utils.d.ts +10 -0
  76. package/dist/components/ui/hero-metric-card/utils.d.ts.map +1 -0
  77. package/dist/components/ui/pagination.d.ts +14 -0
  78. package/dist/components/ui/pagination.d.ts.map +1 -0
  79. package/dist/components/ui/progress.d.ts +1 -0
  80. package/dist/components/ui/progress.d.ts.map +1 -1
  81. package/dist/components/ui/separator.d.ts +5 -0
  82. package/dist/components/ui/separator.d.ts.map +1 -0
  83. package/dist/components/ui/simple-pagination.d.ts +8 -0
  84. package/dist/components/ui/simple-pagination.d.ts.map +1 -0
  85. package/dist/components/ui/sonner.d.ts +4 -0
  86. package/dist/components/ui/sonner.d.ts.map +1 -0
  87. package/dist/components/ui/spinner-carbide.d.ts +5 -0
  88. package/dist/components/ui/spinner-carbide.d.ts.map +1 -0
  89. package/dist/components/ui/spinner.d.ts +4 -0
  90. package/dist/components/ui/spinner.d.ts.map +1 -0
  91. package/dist/components/ui/textarea.d.ts +4 -0
  92. package/dist/components/ui/textarea.d.ts.map +1 -0
  93. package/dist/docs/GETTING_STARTED.md +13 -5
  94. package/dist/index.d.ts +22 -0
  95. package/dist/index.d.ts.map +1 -1
  96. package/dist/lib/mm-react-components.css +1 -0
  97. package/dist/main.d.ts +1 -2
  98. package/dist/main.d.ts.map +1 -1
  99. package/dist/mm-react-components.es.js +16536 -7051
  100. package/dist/mm-react-components.es.js.map +1 -1
  101. package/dist/mm-react-components.umd.js +28 -11
  102. package/dist/mm-react-components.umd.js.map +1 -1
  103. package/dist/preview/AlertDialogPreview.d.ts +2 -0
  104. package/dist/preview/AlertDialogPreview.d.ts.map +1 -0
  105. package/dist/preview/AlertPreview.d.ts +2 -0
  106. package/dist/preview/AlertPreview.d.ts.map +1 -0
  107. package/dist/preview/AvatarPreview.d.ts +2 -0
  108. package/dist/preview/AvatarPreview.d.ts.map +1 -0
  109. package/dist/preview/BreadcrumbPreview.d.ts +2 -0
  110. package/dist/preview/BreadcrumbPreview.d.ts.map +1 -0
  111. package/dist/preview/CardPreview.d.ts +2 -0
  112. package/dist/preview/CardPreview.d.ts.map +1 -0
  113. package/dist/preview/ChartPreview.d.ts +2 -0
  114. package/dist/preview/ChartPreview.d.ts.map +1 -0
  115. package/dist/preview/ColorsPreview.d.ts +7 -0
  116. package/dist/preview/ColorsPreview.d.ts.map +1 -0
  117. package/dist/preview/CommandPreview.d.ts +2 -0
  118. package/dist/preview/CommandPreview.d.ts.map +1 -0
  119. package/dist/preview/DataTablePreview.d.ts.map +1 -1
  120. package/dist/preview/DatePickerPreview.d.ts +2 -0
  121. package/dist/preview/DatePickerPreview.d.ts.map +1 -0
  122. package/dist/preview/DateRangePickerPreview.d.ts.map +1 -1
  123. package/dist/preview/FormPreview.d.ts +2 -0
  124. package/dist/preview/FormPreview.d.ts.map +1 -0
  125. package/dist/preview/HeroMetricCardPreview.d.ts +2 -0
  126. package/dist/preview/HeroMetricCardPreview.d.ts.map +1 -0
  127. package/dist/preview/PaginationPreview.d.ts +2 -0
  128. package/dist/preview/PaginationPreview.d.ts.map +1 -0
  129. package/dist/preview/SeparatorPreview.d.ts +2 -0
  130. package/dist/preview/SeparatorPreview.d.ts.map +1 -0
  131. package/dist/preview/SonnerPreview.d.ts +2 -0
  132. package/dist/preview/SonnerPreview.d.ts.map +1 -0
  133. package/dist/preview/SpinnerPreview.d.ts +2 -0
  134. package/dist/preview/SpinnerPreview.d.ts.map +1 -0
  135. package/dist/preview/TextareaPreview.d.ts +2 -0
  136. package/dist/preview/TextareaPreview.d.ts.map +1 -0
  137. package/dist/scripts/chakra-to-shadcn-migrator/chakra-to-shadcn.config.json +577 -0
  138. package/dist/scripts/chakra-to-shadcn-migrator/lib/args.js +63 -0
  139. package/dist/scripts/chakra-to-shadcn-migrator/lib/colors.js +14 -0
  140. package/dist/scripts/chakra-to-shadcn-migrator/lib/config.js +15 -0
  141. package/dist/scripts/chakra-to-shadcn-migrator/lib/deps.js +125 -0
  142. package/dist/scripts/chakra-to-shadcn-migrator/lib/file-io.js +44 -0
  143. package/dist/scripts/chakra-to-shadcn-migrator/lib/render.js +89 -0
  144. package/dist/scripts/chakra-to-shadcn-migrator/lib/transform.js +550 -0
  145. package/dist/scripts/chakra-to-shadcn-migrator/package.json +11 -0
  146. package/dist/scripts/init.cjs +216 -0
  147. package/dist/scripts/npx-init.cjs +418 -0
  148. package/dist/tailwind.base.config.js +89 -0
  149. package/dist/themes/carbide.css +369 -91
  150. package/package.json +40 -10
  151. package/src/index.css +111 -498
  152. package/dist/index.css +0 -536
  153. package/dist/themes/base.css +0 -536
  154. package/dist/themes/complete.css +0 -8
  155. package/scripts/README.md +0 -171
  156. package/scripts/chakra-to-shadcn-migrator/README.md +0 -107
  157. package/src/themes/base.css +0 -536
  158. package/src/themes/carbide.css +0 -1257
  159. package/src/themes/complete.css +0 -8
  160. /package/{scripts → dist/scripts}/chakra-to-shadcn-migrator/bin/chakra-to-shadcn.js +0 -0
@@ -1,1257 +0,0 @@
1
- .carbide {
2
- /* =============================
3
- TYPOGRAPHY
4
- ============================= */
5
-
6
- /* Core Fonts */
7
- --font-sans:
8
- 'Noto Sans', Inter, ui-sans-serif, system-ui, -apple-system,
9
- BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
10
- 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
11
- 'Segoe UI Symbol', 'Noto Color Emoji';
12
- --font-mono:
13
- 'Inconsolata', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
14
- 'Liberation Mono', 'Courier New', monospace;
15
-
16
- /* Font Weights */
17
- --font-weight-bold: 600;
18
-
19
- /* =============================
20
- COLORS
21
- ============================= */
22
-
23
- /* Brand */
24
- --brand-green: #15a500;
25
- --brand-grey: #444444;
26
-
27
- /* Grey */
28
- --grey-00: #ffffff;
29
- --grey-50: #fcfdfe;
30
- --grey-75: #f9fbfd;
31
- --grey-100: #f7fafc;
32
- --grey-150: #f2f6fa;
33
- --grey-200: #edf2f7;
34
- --grey-300: #e2e8f0;
35
- --grey-350: #d8dfe8;
36
- --grey-400: #cbd5e0;
37
- --grey-500: #a0aec0;
38
- --grey-600: #718096;
39
- --grey-700: #4a5568;
40
- --grey-750: #3c4658;
41
- --grey-800: #2d3748;
42
- --grey-850: #242c3a;
43
- --grey-900: #1a202c;
44
- --grey-950: #11131a;
45
- --grey-1000: #000000;
46
-
47
- /* Red */
48
- --red-100: #fff5f5;
49
- --red-200: #fed7d7;
50
- --red-300: #feb2b2;
51
- --red-400: #fc8181;
52
- --red-500: #f56565;
53
- --red-600: #e53e3e;
54
- --red-700: #c53030;
55
- --red-800: #9b2c2c;
56
- --red-900: #742a2a;
57
-
58
- /* Orange */
59
- --orange-100: #fffaf0;
60
- --orange-200: #feebc8;
61
- --orange-300: #fbd38d;
62
- --orange-400: #f6ad55;
63
- --orange-500: #ed8936;
64
- --orange-600: #dd6b20;
65
- --orange-700: #c05621;
66
- --orange-800: #9c4221;
67
- --orange-900: #7b341e;
68
-
69
- /* Yellow */
70
- --yellow-50: #fffff7;
71
- --yellow-100: #fffff0;
72
- --yellow-200: #fefcbf;
73
- --yellow-300: #faf089;
74
- --yellow-400: #f6e05e;
75
- --yellow-500: #ecc94b;
76
- --yellow-600: #d69e2e;
77
- --yellow-700: #b7791f;
78
- --yellow-800: #975a16;
79
- --yellow-900: #744210;
80
-
81
- /* Green */
82
- --green-50: #f7fff9;
83
- --green-100: #f0fff4;
84
- --green-200: #c6f6d5;
85
- --green-300: #9ae6b4;
86
- --green-400: #68d391;
87
- --green-500: #48bb78;
88
- --green-600: #38a169;
89
- --green-700: #2f855a;
90
- --green-800: #276749;
91
- --green-900: #22543d;
92
-
93
- /* Teal */
94
- --teal-50: #f7fffd;
95
- --teal-75: #eefffc;
96
- --teal-100: #e6fffa;
97
- --teal-200: #b2f5ea;
98
- --teal-300: #81e6d9;
99
- --teal-400: #4fd1c5;
100
- --teal-500: #38b2ac;
101
- --teal-600: #319795;
102
- --teal-700: #2c7a7b;
103
- --teal-800: #285e61;
104
- --teal-900: #234e52;
105
-
106
- /* Blue */
107
- --blue-100: #ebf8ff;
108
- --blue-200: #bee3f8;
109
- --blue-300: #90cdf4;
110
- --blue-400: #63b3ed;
111
- --blue-500: #4299e1;
112
- --blue-600: #3182ce;
113
- --blue-700: #2b6cb0;
114
- --blue-800: #2c5282;
115
- --blue-900: #2a4365;
116
-
117
- /* Indigo */
118
- --indigo-50: #f5faff;
119
- --indigo-100: #ebf4ff;
120
- --indigo-150: #d7e7ff;
121
- --indigo-200: #c3dafe;
122
- --indigo-300: #a3bffa;
123
- --indigo-400: #7f9cf5;
124
- --indigo-500: #667eea;
125
- --indigo-600: #5a67d8;
126
- --indigo-700: #4c51bf;
127
- --indigo-800: #434190;
128
- --indigo-900: #3c366b;
129
-
130
- /* Purple */
131
- --purple-50: #fcfaff;
132
- --purple-100: #faf5ff;
133
- --purple-150: #f5ecff;
134
- --purple-200: #e9d8fd;
135
- --purple-300: #d6bcfa;
136
- --purple-400: #b794f4;
137
- --purple-500: #9f7aea;
138
- --purple-600: #805ad5;
139
- --purple-700: #6b46c1;
140
- --purple-800: #553c9a;
141
- --purple-900: #44337a;
142
-
143
- /* Pink */
144
- --pink-100: #fff5f7;
145
- --pink-200: #fed7e2;
146
- --pink-300: #fbb6ce;
147
- --pink-400: #f687b3;
148
- --pink-500: #ed64a6;
149
- --pink-600: #d53f8c;
150
- --pink-700: #b83280;
151
- --pink-800: #97266d;
152
- --pink-900: #702459;
153
-
154
- /* SHADCN OVERRIDES */
155
- --background: var(--grey-100);
156
- --foreground: var(--grey-700);
157
- --card: var(--grey-00);
158
- --card-foreground: var(--grey-700);
159
- --popover: var(--grey-00);
160
- --popover-foreground: var(--grey-700);
161
- --border: var(--grey-300);
162
- --input: var(--grey-00);
163
- --ring: var(--indigo-600);
164
- --ring-soft: var(--ring);
165
- --ring-soft: color-mix(in srgb, var(--ring) 45%, transparent);
166
- --primary: var(--indigo-600);
167
- --primary-subtle: var(--indigo-100);
168
- --primary-foreground: var(--grey-00);
169
- --secondary: var(--grey-100);
170
- --secondary-foreground: var(--grey-700);
171
- --muted: var(--grey-75);
172
- --muted-foreground: var(--grey-600);
173
- --accent: var(--grey-150);
174
- --accent-foreground: var(--grey-700);
175
- --destructive: var(--red-600);
176
- --destructive-foreground: var(--grey-00);
177
- --destructive-soft: var(--destructive);
178
- --destructive-soft: color-mix(in srgb, var(--destructive) 35%, transparent);
179
-
180
- /* Sidebar */
181
- --sidebar: var(--grey-00);
182
- --sidebar-foreground: var(--grey-700);
183
- --sidebar-primary: var(--indigo-600);
184
- --sidebar-primary-foreground: var(--grey-00);
185
- --sidebar-accent: var(--grey-200);
186
- --sidebar-accent-foreground: var(--grey-700);
187
- --sidebar-border: var(--grey-400);
188
- --sidebar-ring: var(--indigo-600);
189
-
190
- /* Input Custom Overrides */
191
- --bg-input: var(--grey-00);
192
- --border-input: var(--grey-400);
193
-
194
- /* =============================
195
- SURFACES (GENERIC)
196
- ============================= */
197
- /* Neutral control rail/background surface used across components */
198
- --surface-neutral: var(--grey-300);
199
-
200
- /* =============================
201
- TABLIST
202
- ============================= */
203
- --tablist-bg: var(--grey-200);
204
- --tablist-fg: var(--grey-700);
205
- --tablist-active-bg: var(--grey-00);
206
- --tablist-active-fg: var(--grey-700);
207
- --tab-hover-underline: var(--grey-300);
208
-
209
- /* =============================
210
- TABLE HEADER
211
- ============================= */
212
- --tablehead-bg: var(--muted);
213
- --tablehead-fg: var(--foreground);
214
- --tablehead-border: var(--border);
215
-
216
- /* =============================
217
- BUTTONS
218
- ============================= */
219
- --button-secondary-bg: transparent;
220
- --button-secondary-border: var(--grey-700);
221
- --button-secondary-hover-bg: var(--grey-150);
222
- --button-outline-border: var(--border-input);
223
- --button-outline-hover-bg: var(--accent);
224
- --button-primary-hover-bg: var(--indigo-700);
225
- --button-destructive-hover-bg: var(--red-700);
226
- --button-outline-bg: var(--bg-input);
227
-
228
- /* Table action trigger hover (distinct from row hover) */
229
- --table-action-hover-bg: var(--grey-300);
230
-
231
- /* Overlay */
232
- --overlay-bg: rgba(0, 0, 0, 0.8);
233
- --overlay-border: #353b48;
234
-
235
- /* =============================
236
- INPUT/OUTLINE/OVERLAY SURFACES
237
- ============================= */
238
- --input-surface-bg: #202734;
239
- --input-surface-border: #2d3748;
240
- --input-surface-hover-bg: #242c3a;
241
- }
242
-
243
- /* =============================
244
- BADGE: TYPOGRAPHY
245
- ============================= */
246
- .carbide [data-slot='badge'] {
247
- font-weight: 400;
248
- }
249
-
250
- /* =============================
251
- KNOWLEDGE HUB STATUS BADGES
252
- ============================= */
253
- .carbide .mmc-khub [data-slot='badge'] {
254
- border-radius: 9999px;
255
- }
256
-
257
- .carbide .mmc-khub [data-slot='badge'][data-status='Waiting'] {
258
- background-color: var(--indigo-200);
259
- color: var(--grey-700);
260
- border-color: var(--indigo-200);
261
- }
262
-
263
- .carbide .mmc-khub [data-slot='badge'][data-status='Uploading'],
264
- .carbide .mmc-khub [data-slot='badge'][data-status='Processing'] {
265
- background-color: transparent;
266
- color: var(--grey-700);
267
- border-color: transparent;
268
- padding-inline: 0;
269
- }
270
-
271
- .carbide .mmc-khub [data-slot='badge'][data-status='Failed'],
272
- .carbide .mmc-khub [data-slot='badge'][data-status='Upload Failed'],
273
- .carbide .mmc-khub [data-slot='badge'][data-status='Processing Failed'] {
274
- background-color: var(--red-200);
275
- color: var(--grey-700);
276
- border-color: var(--red-200);
277
- }
278
-
279
- .carbide .mmc-khub [data-slot='badge'][data-status='Processed'] {
280
- background-color: var(--grey-200);
281
- color: var(--grey-500);
282
- border-color: var(--grey-200);
283
- }
284
-
285
- .carbide.dark .mmc-khub [data-slot='badge'][data-status='Waiting'] {
286
- background-color: var(--indigo-700);
287
- color: var(--grey-00);
288
- border-color: var(--indigo-700);
289
- }
290
-
291
- .carbide.dark .mmc-khub [data-slot='badge'][data-status='Uploading'],
292
- .carbide.dark .mmc-khub [data-slot='badge'][data-status='Processing'] {
293
- background-color: transparent;
294
- color: var(--grey-200);
295
- border-color: transparent;
296
- padding-inline: 0;
297
- }
298
-
299
- .carbide.dark .mmc-khub [data-slot='badge'][data-status='Failed'],
300
- .carbide.dark .mmc-khub [data-slot='badge'][data-status='Upload Failed'],
301
- .carbide.dark .mmc-khub [data-slot='badge'][data-status='Processing Failed'] {
302
- background-color: var(--red-700);
303
- color: var(--grey-00);
304
- border-color: var(--red-700);
305
- }
306
-
307
- .carbide.dark .mmc-khub [data-slot='badge'][data-status='Processed'] {
308
- background-color: var(--grey-750);
309
- color: var(--grey-300);
310
- border-color: var(--grey-750);
311
- }
312
-
313
- /* =============================
314
- BUTTON: ICON SIZE DEFAULT
315
- ============================= */
316
- /* Default all button icons to 16px; :where() keeps specificity low so consumers can override */
317
- .carbide [data-slot='button'] svg {
318
- width: 16px;
319
- height: 16px;
320
- }
321
-
322
- /* =============================
323
- BUTTON VARIANTS (LIGHT)
324
- ============================= */
325
- .carbide [data-slot='button'][data-variant='default']:not([disabled]) {
326
- background-color: var(--primary);
327
- color: var(--primary-foreground);
328
- }
329
- .carbide [data-slot='button'][data-variant='default']:not([disabled]):hover {
330
- background-color: var(--button-primary-hover-bg);
331
- }
332
-
333
- .carbide [data-slot='button'][data-variant='outline']:not([disabled]) {
334
- background-color: var(--button-outline-bg);
335
- border-color: var(--button-outline-border);
336
- }
337
- .carbide [data-slot='button'][data-variant='outline']:not([disabled]):hover {
338
- background-color: var(--button-outline-hover-bg);
339
- }
340
-
341
- .carbide [data-slot='button'][data-variant='secondary']:not([disabled]) {
342
- background-color: var(--button-secondary-bg);
343
- border-color: var(--button-secondary-border);
344
- color: var(--secondary-foreground);
345
- }
346
- .carbide [data-slot='button'][data-variant='secondary']:not([disabled]):hover {
347
- background-color: var(--button-secondary-hover-bg);
348
- }
349
-
350
- .carbide [data-slot='button'][data-variant='ghost']:not([disabled]) {
351
- background-color: transparent;
352
- color: var(--foreground);
353
- }
354
- .carbide [data-slot='button'][data-variant='ghost']:not([disabled]):hover {
355
- background-color: var(--accent);
356
- color: var(--accent-foreground);
357
- }
358
-
359
- .carbide [data-slot='button'][data-variant='destructive']:not([disabled]) {
360
- background-color: var(--destructive);
361
- color: var(--destructive-foreground);
362
- }
363
- .carbide
364
- [data-slot='button'][data-variant='destructive']:not([disabled]):hover {
365
- background-color: var(--button-destructive-hover-bg);
366
- }
367
-
368
- .carbide [data-slot='button'][data-variant='link']:not([disabled]) {
369
- background-color: transparent;
370
- color: var(--primary);
371
- }
372
- .carbide [data-slot='button'][data-variant='link']:not([disabled]):hover {
373
- text-decoration: underline;
374
- }
375
-
376
- .carbide.dark {
377
- --background: var(--grey-900);
378
- --foreground: var(--grey-00);
379
- --card: var(--grey-900);
380
- --card-foreground: var(--grey-00);
381
- --popover: var(--grey-800);
382
- --popover-foreground: var(--grey-00);
383
- --border: var(--grey-700);
384
- --input: var(--grey-800);
385
- --ring: var(--indigo-600);
386
- --ring-soft: var(--ring);
387
- --ring-soft: color-mix(in srgb, var(--ring) 45%, transparent);
388
- --primary: var(--indigo-600);
389
- --primary-subtle: var(--indigo-800);
390
- --primary-foreground: var(--grey-00);
391
- --secondary: var(--grey-900);
392
- --secondary-foreground: var(--grey-00);
393
- --muted: var(--grey-850);
394
- --muted-foreground: var(--grey-600);
395
- --accent: var(--grey-700);
396
- --accent-foreground: var(--grey-00);
397
- --destructive: var(--red-600);
398
- --destructive-foreground: var(--grey-00);
399
- --destructive-soft: var(--destructive);
400
- --destructive-soft: color-mix(in srgb, var(--destructive) 35%, transparent);
401
-
402
- /* Sidebar */
403
- --sidebar: var(--grey-950);
404
- --sidebar-foreground: var(--grey-00);
405
- --sidebar-primary: var(--indigo-600);
406
- --sidebar-primary-foreground: var(--grey-00);
407
- --sidebar-accent: var(--grey-800);
408
- --sidebar-accent-foreground: var(--grey-00);
409
- --sidebar-border: var(--grey-700);
410
- --sidebar-ring: var(--indigo-600);
411
-
412
- /* Input Custom Overrides */
413
- --bg-input: var(--grey-800);
414
- --border-input: var(--grey-700);
415
-
416
- /* =============================
417
- SURFACES (GENERIC)
418
- ============================= */
419
- /* Neutral control rail/background surface used across components (dark) */
420
- --surface-neutral: var(--grey-700);
421
-
422
- /* =============================
423
- TABLIST
424
- ============================= */
425
- --tablist-bg: var(--grey-950);
426
- --tablist-fg: var(--grey-600);
427
- --tablist-active-bg: var(--grey-800);
428
- --tablist-active-fg: var(--grey-00);
429
- --tab-hover-underline: var(--grey-700);
430
-
431
- /* =============================
432
- TABLE HEADER
433
- ============================= */
434
- --tablehead-bg: var(--muted);
435
- --tablehead-fg: var(--foreground);
436
- --tablehead-border: var(--border);
437
-
438
- /* =============================
439
- BUTTONS
440
- ============================= */
441
- --button-secondary-bg: transparent;
442
- --button-secondary-border: var(--grey-400);
443
- --button-secondary-hover-bg: var(--grey-800);
444
- --button-outline-border: var(--border-input);
445
- --button-outline-hover-bg: color-mix(
446
- in srgb,
447
- var(--input-surface-hover-bg) 80%,
448
- transparent
449
- );
450
- --button-primary-hover-bg: var(--indigo-500);
451
- --button-destructive-hover-bg: var(--red-500);
452
- --button-outline-bg: color-mix(in srgb, var(--bg-input) 30%, transparent);
453
-
454
- /* Table action trigger hover (distinct from row hover) */
455
- --table-action-hover-bg: var(--grey-800);
456
- }
457
-
458
- /* =============================
459
- BUTTON VARIANTS (DARK)
460
- ============================= */
461
- .carbide.dark [data-slot='button'][data-variant='default']:not([disabled]) {
462
- background-color: var(--primary);
463
- color: var(--primary-foreground);
464
- }
465
- .carbide.dark
466
- [data-slot='button'][data-variant='default']:not([disabled]):hover {
467
- background-color: var(--button-primary-hover-bg);
468
- }
469
-
470
- .carbide.dark [data-slot='button'][data-variant='outline']:not([disabled]) {
471
- background-color: var(--button-outline-bg);
472
- border-color: var(--button-outline-border);
473
- }
474
- .carbide.dark
475
- [data-slot='button'][data-variant='outline']:not([disabled]):hover {
476
- background-color: var(--button-outline-hover-bg);
477
- }
478
-
479
- .carbide.dark [data-slot='button'][data-variant='secondary']:not([disabled]) {
480
- background-color: var(--button-secondary-bg);
481
- border-color: var(--button-secondary-border);
482
- color: var(--secondary-foreground);
483
- }
484
- .carbide.dark
485
- [data-slot='button'][data-variant='secondary']:not([disabled]):hover {
486
- background-color: var(--button-secondary-hover-bg);
487
- }
488
-
489
- .carbide.dark [data-slot='button'][data-variant='ghost']:not([disabled]) {
490
- background-color: transparent;
491
- color: var(--foreground);
492
- }
493
- .carbide.dark [data-slot='button'][data-variant='ghost']:not([disabled]):hover {
494
- background-color: var(--accent);
495
- color: var(--accent-foreground);
496
- }
497
-
498
- .carbide.dark [data-slot='button'][data-variant='destructive']:not([disabled]) {
499
- background-color: var(--destructive);
500
- color: var(--destructive-foreground);
501
- }
502
- .carbide.dark
503
- [data-slot='button'][data-variant='destructive']:not([disabled]):hover {
504
- background-color: var(--button-destructive-hover-bg);
505
- }
506
-
507
- .carbide.dark [data-slot='button'][data-variant='link']:not([disabled]) {
508
- background-color: transparent;
509
- color: var(--primary);
510
- }
511
- .carbide.dark [data-slot='button'][data-variant='link']:not([disabled]):hover {
512
- text-decoration: underline;
513
- }
514
-
515
- /* =============================
516
- INPUT
517
- ============================= */
518
- .carbide [data-slot='input'] {
519
- background-color: var(--bg-input);
520
- border-color: var(--border-input);
521
- color: var(--foreground);
522
- font-size: 1rem;
523
- line-height: 1.5;
524
- min-width: 0;
525
- box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
526
- transition:
527
- background-color 0.2s ease,
528
- box-shadow 0.2s ease,
529
- color 0.2s ease,
530
- border-color 0.2s ease;
531
- }
532
-
533
- @media (min-width: 768px) {
534
- .carbide [data-slot='input'] {
535
- font-size: 0.875rem;
536
- }
537
- }
538
-
539
- .carbide [data-slot='input']::placeholder {
540
- color: var(--muted-foreground);
541
- opacity: 1;
542
- }
543
-
544
- .carbide [data-slot='input']::selection {
545
- background-color: var(--primary);
546
- color: var(--primary-foreground);
547
- }
548
-
549
- .carbide [data-slot='input']:where(:not(:disabled)):hover {
550
- background-color: var(--accent);
551
- cursor: text;
552
- }
553
-
554
- .carbide.dark [data-slot='input'] {
555
- background-color: var(--bg-input);
556
- }
557
-
558
- .carbide.dark [data-slot='input']:where(:not(:disabled)):hover {
559
- background-color: var(--input-surface-hover-bg);
560
- }
561
-
562
- .carbide [data-slot='input']:focus-visible {
563
- outline: none;
564
- border-color: var(--ring);
565
- box-shadow: 0 0 0 3px var(--ring-soft);
566
- }
567
-
568
- .carbide [data-slot='input'][aria-invalid='true'] {
569
- border-color: var(--destructive);
570
- }
571
-
572
- .carbide [data-slot='input'][aria-invalid='true']:focus-visible {
573
- box-shadow: 0 0 0 3px var(--destructive-soft);
574
- }
575
-
576
- /* =============================
577
- SELECT
578
- ============================= */
579
- .carbide [data-slot='select-trigger'] {
580
- background-color: var(--bg-input);
581
- border-color: var(--border-input);
582
- color: var(--foreground);
583
- box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
584
- transition:
585
- background-color 0.2s ease,
586
- box-shadow 0.2s ease,
587
- color 0.2s ease,
588
- border-color 0.2s ease;
589
- }
590
- .carbide [data-slot='select-trigger'][data-placeholder] {
591
- color: var(--muted-foreground);
592
- }
593
- .carbide [data-slot='select-trigger']:where(:not(:disabled)):hover {
594
- background-color: var(--accent);
595
- cursor: pointer;
596
- }
597
- .carbide.dark [data-slot='select-trigger']:where(:not(:disabled)):hover {
598
- background-color: var(--input-surface-hover-bg);
599
- }
600
- .carbide [data-slot='select-trigger']:focus-visible {
601
- outline: none;
602
- border-color: var(--ring);
603
- box-shadow: 0 0 0 3px var(--ring-soft);
604
- }
605
- .carbide [data-slot='select-trigger'][aria-invalid='true'] {
606
- border-color: var(--destructive);
607
- }
608
- .carbide [data-slot='select-trigger'][aria-invalid='true']:focus-visible {
609
- box-shadow: 0 0 0 3px var(--destructive-soft);
610
- }
611
- .carbide [data-slot='select-trigger'] svg {
612
- width: 1rem;
613
- height: 1rem;
614
- flex-shrink: 0;
615
- pointer-events: none;
616
- color: var(--muted-foreground);
617
- }
618
- .carbide [data-slot='select-trigger'] [data-slot='select-value'] {
619
- display: inline-flex;
620
- align-items: center;
621
- gap: 0.5rem;
622
- max-width: 100%;
623
- overflow: hidden;
624
- text-overflow: ellipsis;
625
- white-space: nowrap;
626
- }
627
-
628
- .carbide [data-slot='select-item'] {
629
- color: var(--foreground);
630
- transition:
631
- background-color 0.2s ease,
632
- color 0.2s ease;
633
- }
634
- .carbide [data-slot='select-item']:focus {
635
- background-color: var(--accent);
636
- color: var(--accent-foreground);
637
- }
638
- .carbide [data-slot='select-item'] svg {
639
- width: 1rem;
640
- height: 1rem;
641
- flex-shrink: 0;
642
- pointer-events: none;
643
- color: var(--muted-foreground);
644
- }
645
- .carbide [data-slot='select-item'][data-disabled] {
646
- color: var(--muted-foreground);
647
- }
648
-
649
- /* =============================
650
- DROPDOWN MENU
651
- ============================= */
652
- .carbide [data-slot='dropdown-menu-content'] {
653
- background-color: var(--popover);
654
- color: var(--popover-foreground);
655
- border-color: var(--border);
656
- box-shadow: 0 6px 24px rgba(15, 23, 42, 0.12);
657
- }
658
- .carbide.dark [data-slot='dropdown-menu-content'] {
659
- background-color: var(--popover);
660
- color: var(--popover-foreground);
661
- border-color: var(--border);
662
- }
663
-
664
- .carbide [data-slot='dropdown-menu-item'],
665
- .carbide [data-slot='dropdown-menu-checkbox-item'],
666
- .carbide [data-slot='dropdown-menu-radio-item'] {
667
- color: var(--foreground);
668
- transition:
669
- background-color 0.2s ease,
670
- color 0.2s ease;
671
- }
672
- .carbide [data-slot='dropdown-menu-item'][data-variant='destructive'],
673
- .carbide [data-slot='dropdown-menu-checkbox-item'][data-variant='destructive'],
674
- .carbide [data-slot='dropdown-menu-radio-item'][data-variant='destructive'] {
675
- color: var(--destructive);
676
- }
677
- .carbide [data-slot='dropdown-menu-item'][data-variant='destructive'] svg,
678
- .carbide
679
- [data-slot='dropdown-menu-checkbox-item'][data-variant='destructive']
680
- svg,
681
- .carbide
682
- [data-slot='dropdown-menu-radio-item'][data-variant='destructive']
683
- svg {
684
- color: var(--destructive);
685
- }
686
- .carbide [data-slot='dropdown-menu-item']:focus,
687
- .carbide [data-slot='dropdown-menu-checkbox-item']:focus,
688
- .carbide [data-slot='dropdown-menu-radio-item']:focus {
689
- background-color: var(--accent);
690
- color: var(--accent-foreground);
691
- }
692
- .carbide [data-slot='dropdown-menu-item'][data-variant='destructive']:focus,
693
- .carbide
694
- [data-slot='dropdown-menu-checkbox-item'][data-variant='destructive']:focus,
695
- .carbide
696
- [data-slot='dropdown-menu-radio-item'][data-variant='destructive']:focus {
697
- background-color: color-mix(in srgb, var(--destructive) 15%, transparent);
698
- color: var(--destructive);
699
- }
700
- .carbide.dark
701
- [data-slot='dropdown-menu-item'][data-variant='destructive']:focus,
702
- .carbide.dark
703
- [data-slot='dropdown-menu-checkbox-item'][data-variant='destructive']:focus,
704
- .carbide.dark
705
- [data-slot='dropdown-menu-radio-item'][data-variant='destructive']:focus {
706
- background-color: color-mix(in srgb, var(--destructive) 25%, transparent);
707
- color: var(--destructive);
708
- }
709
- .carbide [data-slot='dropdown-menu-item']:focus svg,
710
- .carbide [data-slot='dropdown-menu-checkbox-item']:focus svg,
711
- .carbide [data-slot='dropdown-menu-radio-item']:focus svg {
712
- color: inherit;
713
- }
714
- .carbide [data-slot='dropdown-menu-item'] svg,
715
- .carbide [data-slot='dropdown-menu-checkbox-item'] svg,
716
- .carbide [data-slot='dropdown-menu-radio-item'] svg {
717
- width: 1rem;
718
- height: 1rem;
719
- flex-shrink: 0;
720
- pointer-events: none;
721
- color: var(--muted-foreground);
722
- }
723
- .carbide [data-slot='dropdown-menu-item'][data-disabled],
724
- .carbide [data-slot='dropdown-menu-checkbox-item'][data-disabled],
725
- .carbide [data-slot='dropdown-menu-radio-item'][data-disabled] {
726
- color: var(--muted-foreground);
727
- }
728
-
729
- .carbide [data-slot='dropdown-menu-label'] {
730
- color: var(--muted-foreground);
731
- }
732
-
733
- .carbide [data-slot='dropdown-menu-separator'] {
734
- background-color: var(--border);
735
- }
736
-
737
- /* =============================
738
- TOOLTIP
739
- ============================= */
740
- .carbide [data-slot='tooltip-content'] {
741
- background-color: var(--foreground);
742
- color: var(--background);
743
- box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25);
744
- }
745
- .carbide.dark [data-slot='tooltip-content'] {
746
- background-color: var(--foreground);
747
- color: var(--background);
748
- box-shadow: 0 8px 24px rgba(15, 23, 42, 0.45);
749
- }
750
- .carbide [data-slot='tooltip-arrow'],
751
- .carbide [data-slot='tooltip-content'] > [data-radix-tooltip-arrow] {
752
- background-color: var(--foreground);
753
- fill: var(--foreground);
754
- }
755
-
756
- /* =============================
757
- OVERLAYS & DIALOG/SHEET/DRAWER
758
- ============================= */
759
- .carbide [data-slot='dialog-overlay'],
760
- .carbide [data-slot='sheet-overlay'],
761
- .carbide [data-slot='drawer-overlay'] {
762
- background-color: color-mix(in srgb, var(--overlay-bg) 60%, transparent);
763
- backdrop-filter: blur(2px);
764
- }
765
- .carbide.dark [data-slot='dialog-overlay'],
766
- .carbide.dark [data-slot='sheet-overlay'],
767
- .carbide.dark [data-slot='drawer-overlay'] {
768
- background-color: color-mix(in srgb, var(--overlay-bg) 75%, transparent);
769
- }
770
-
771
- .carbide [data-slot='dialog-content'],
772
- .carbide [data-slot='sheet-content'],
773
- .carbide [data-slot='drawer-content'] {
774
- background-color: var(--card);
775
- color: var(--card-foreground);
776
- border-color: var(--border);
777
- box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
778
- }
779
- .carbide.dark [data-slot='dialog-content'],
780
- .carbide.dark [data-slot='sheet-content'],
781
- .carbide.dark [data-slot='drawer-content'] {
782
- box-shadow: 0 24px 48px rgba(15, 23, 42, 0.55);
783
- }
784
-
785
- .carbide [data-slot='dialog-close'],
786
- .carbide [data-slot='sheet-close'] {
787
- background-color: transparent;
788
- color: var(--muted-foreground);
789
- transition:
790
- background-color 0.2s ease,
791
- color 0.2s ease,
792
- box-shadow 0.2s ease,
793
- opacity 0.2s ease;
794
- }
795
- .carbide [data-slot='dialog-close']:hover,
796
- .carbide [data-slot='sheet-close']:hover {
797
- background-color: color-mix(in srgb, var(--accent) 40%, transparent);
798
- color: var(--accent-foreground);
799
- opacity: 1;
800
- }
801
- .carbide [data-slot='dialog-close']:focus-visible,
802
- .carbide [data-slot='sheet-close']:focus-visible {
803
- outline: none;
804
- box-shadow: 0 0 0 3px var(--ring-soft);
805
- }
806
- .carbide [data-slot='dialog-close'][data-state='open'],
807
- .carbide [data-slot='sheet-close'][data-state='open'] {
808
- background-color: var(--accent);
809
- color: var(--accent-foreground);
810
- }
811
-
812
- .carbide [data-slot='dialog-title'],
813
- .carbide [data-slot='sheet-title'],
814
- .carbide [data-slot='drawer-title'] {
815
- color: var(--card-foreground);
816
- }
817
-
818
- .carbide [data-slot='dialog-description'],
819
- .carbide [data-slot='sheet-description'],
820
- .carbide [data-slot='drawer-description'] {
821
- color: var(--muted-foreground);
822
- }
823
-
824
- .carbide [data-slot='drawer-handle'] {
825
- background-color: color-mix(
826
- in srgb,
827
- var(--muted-foreground) 30%,
828
- transparent
829
- );
830
- }
831
- .carbide.dark [data-slot='drawer-handle'] {
832
- background-color: color-mix(
833
- in srgb,
834
- var(--muted-foreground) 45%,
835
- transparent
836
- );
837
- }
838
-
839
- /* =============================
840
- TABLE
841
- ============================= */
842
- .carbide [data-slot='table-wrapper'] {
843
- background-color: var(--card);
844
- color: var(--card-foreground);
845
- border-color: var(--border);
846
- }
847
- .carbide.dark [data-slot='table-wrapper'] {
848
- background-color: var(--card);
849
- color: var(--card-foreground);
850
- border-color: var(--border);
851
- }
852
-
853
- /* =============================
854
- TABS
855
- ============================= */
856
- .carbide [data-slot='tabs-list'][data-variant='default'] {
857
- background-color: var(--tablist-bg);
858
- color: var(--tablist-fg);
859
- border-radius: 0.5rem;
860
- gap: 0.25rem;
861
- }
862
- .carbide
863
- [data-slot='tabs-list'][data-variant='default']
864
- [data-slot='tabs-trigger'] {
865
- color: var(--tablist-fg);
866
- border-radius: 0.375rem;
867
- }
868
- .carbide
869
- [data-slot='tabs-list'][data-variant='default']
870
- [data-slot='tabs-trigger']:hover {
871
- color: var(--tablist-active-fg);
872
- }
873
- .carbide
874
- [data-slot='tabs-list'][data-variant='default']
875
- [data-slot='tabs-trigger'][data-state='active'] {
876
- background-color: var(--tablist-active-bg);
877
- color: var(--tablist-active-fg);
878
- box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
879
- }
880
-
881
- .carbide [data-slot='tabs-list'][data-variant='underline'],
882
- .carbide [data-variant='underline'] > [data-slot='tabs-list'] {
883
- color: var(--muted-foreground);
884
- border-color: var(--border);
885
- }
886
- .carbide
887
- [data-slot='tabs-list'][data-variant='underline']
888
- [data-slot='tabs-trigger'] {
889
- color: var(--muted-foreground);
890
- }
891
- .carbide
892
- [data-slot='tabs-list'][data-variant='underline']
893
- [data-slot='tabs-trigger']
894
- > span {
895
- color: inherit;
896
- transition: color 0.2s ease;
897
- }
898
- .carbide
899
- [data-slot='tabs-list'][data-variant='underline']
900
- [data-slot='tabs-trigger']:hover,
901
- .carbide
902
- [data-slot='tabs-list'][data-variant='underline']
903
- [data-slot='tabs-trigger'][data-state='active'] {
904
- color: var(--foreground);
905
- }
906
- /* =============================
907
- UTILITY OVERRIDES
908
- ============================= */
909
-
910
- /*
911
- Force correct text color for destructive badges and elements using text-destructive-foreground.
912
- This ensures shadcn/ui and Carbide parity even if Tailwind config mapping is missing or overridden.
913
- */
914
- .carbide .text-destructive-foreground {
915
- color: var(--destructive-foreground) !important;
916
- }
917
-
918
- /* Input Border Utility */
919
- .carbide .border-input,
920
- .carbide.dark .border-input {
921
- border-color: var(--border-input) !important;
922
- }
923
-
924
- /* Scrollbar Utilities */
925
- .carbide .scrollbar-none {
926
- scrollbar-width: none;
927
- }
928
-
929
- .carbide .scrollbar-none::-webkit-scrollbar {
930
- display: none;
931
- }
932
-
933
- /* =============================
934
- PROGRESS (SEMANTIC HOOK)
935
- ============================= */
936
- .carbide [data-slot='progress'] {
937
- background-color: var(--surface-neutral);
938
- }
939
-
940
- .carbide [data-slot='progress'] [data-slot='progress-indicator'] {
941
- background-color: var(--primary);
942
- }
943
-
944
- /* =============================
945
- ACCORDION
946
- ============================= */
947
- .carbide [data-slot='accordion'] [data-slot='accordion-item'] {
948
- border-bottom: 1px solid var(--border);
949
- }
950
- .carbide [data-slot='accordion'] [data-slot='accordion-trigger'] {
951
- color: var(--foreground);
952
- }
953
-
954
- /* =============================
955
- POPOVER
956
- ============================= */
957
- .carbide [data-slot='popover-content'] {
958
- background-color: var(--popover);
959
- color: var(--popover-foreground);
960
- border-color: var(--border);
961
- box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
962
- }
963
- .carbide.dark [data-slot='popover-content'] {
964
- background-color: var(--popover);
965
- color: var(--popover-foreground);
966
- border-color: var(--border);
967
- box-shadow: 0 12px 32px rgba(15, 23, 42, 0.45);
968
- }
969
-
970
- /* =============================
971
- SLIDER (SEMANTIC HOOK)
972
- ============================= */
973
- /* =============================
974
- CHECKBOX (SEMANTIC HOOK)
975
- ============================= */
976
- .carbide [data-slot='checkbox'] {
977
- border-color: var(--border-input) !important;
978
- background-color: var(--bg-input);
979
- transition:
980
- background-color 0.15s ease,
981
- border-color 0.15s ease,
982
- box-shadow 0.15s ease;
983
- }
984
- .carbide [data-slot='checkbox']:where(:not(:disabled)):hover {
985
- background-color: var(--accent);
986
- border-color: var(--accent);
987
- }
988
- .carbide.dark [data-slot='checkbox']:where(:not(:disabled)):hover {
989
- background-color: var(--input-surface-hover-bg);
990
- border-color: var(--input-surface-hover-bg);
991
- }
992
- .carbide [data-slot='checkbox'][data-state='checked'],
993
- .carbide [data-slot='checkbox'][data-state='indeterminate'] {
994
- border-color: var(--primary) !important;
995
- background-color: var(--primary) !important;
996
- color: var(--primary-foreground) !important;
997
- }
998
-
999
- /* =============================
1000
- RADIO GROUP ITEM
1001
- ============================= */
1002
- .carbide [data-slot='radio-group-item'] {
1003
- border-color: var(--border-input);
1004
- background-color: var(--bg-input);
1005
- transition:
1006
- background-color 0.2s ease,
1007
- border-color 0.2s ease,
1008
- box-shadow 0.2s ease;
1009
- }
1010
- .carbide [data-slot='radio-group-item']:where(:not(:disabled)):hover {
1011
- background-color: var(--accent);
1012
- }
1013
- .carbide.dark [data-slot='radio-group-item']:where(:not(:disabled)):hover {
1014
- background-color: var(--input-surface-hover-bg);
1015
- }
1016
- .carbide [data-slot='radio-group-item'][data-state='checked'] {
1017
- border-color: var(--primary);
1018
- }
1019
- .carbide [data-slot='radio-group-indicator'] svg {
1020
- fill: var(--primary);
1021
- stroke: var(--primary);
1022
- }
1023
-
1024
- /* =============================
1025
- FORM CONTROL FOCUS + INVALID STATES
1026
- ============================= */
1027
- .carbide [data-slot='checkbox']:focus-visible,
1028
- .carbide [data-slot='radio-group-item']:focus-visible,
1029
- .carbide [data-slot='switch']:focus-visible {
1030
- outline: none;
1031
- border-color: var(--ring);
1032
- box-shadow: 0 0 0 3px var(--ring-soft);
1033
- }
1034
-
1035
- .carbide [data-slot='checkbox'][aria-invalid='true'],
1036
- .carbide [data-slot='radio-group-item'][aria-invalid='true'],
1037
- .carbide [data-slot='switch'][aria-invalid='true'] {
1038
- border-color: var(--destructive);
1039
- }
1040
-
1041
- .carbide [data-slot='checkbox'][aria-invalid='true']:focus-visible,
1042
- .carbide [data-slot='radio-group-item'][aria-invalid='true']:focus-visible,
1043
- .carbide [data-slot='switch'][aria-invalid='true']:focus-visible {
1044
- box-shadow: 0 0 0 3px var(--destructive-soft);
1045
- }
1046
-
1047
- /* =============================
1048
- SWITCH (SEMANTIC HOOK)
1049
- ============================= */
1050
- .carbide [data-slot='switch'] {
1051
- border-color: transparent;
1052
- }
1053
- .carbide [data-slot='switch'][data-state='unchecked'] {
1054
- background-color: var(--accent);
1055
- }
1056
- .carbide [data-slot='switch'][data-state='checked'] {
1057
- background-color: var(--primary);
1058
- }
1059
- .carbide.dark [data-slot='switch'][data-state='unchecked'] {
1060
- background-color: color-mix(in srgb, var(--bg-input) 80%, transparent);
1061
- }
1062
- .carbide [data-slot='switch-thumb'] {
1063
- background-color: var(--card);
1064
- transition:
1065
- background-color 0.2s ease,
1066
- transform 0.2s ease;
1067
- }
1068
- .carbide.dark [data-slot='switch-thumb'][data-state='unchecked'] {
1069
- background-color: var(--foreground);
1070
- }
1071
- .carbide.dark [data-slot='switch-thumb'][data-state='checked'] {
1072
- background-color: var(--primary-foreground);
1073
- }
1074
-
1075
- /* =============================
1076
- CALENDAR (SEMANTIC HOOK)
1077
- ============================= */
1078
- .carbide [data-slot='calendar'] {
1079
- background-color: var(--card);
1080
- color: var(--card-foreground);
1081
- box-shadow:
1082
- 0 1px 2px rgba(0, 0, 0, 0.06),
1083
- 0 2px 12px rgba(0, 0, 0, 0.08);
1084
- border-radius: 0.5rem;
1085
- }
1086
- .carbide [data-slot='slider'] [data-slot='slider-track'] {
1087
- background-color: var(--surface-neutral);
1088
- }
1089
-
1090
- .carbide [data-slot='slider'] [data-slot='slider-range'] {
1091
- background-color: var(--primary);
1092
- }
1093
- .carbide [data-slot='slider'] [data-slot='slider-thumb'] {
1094
- border-color: var(--primary);
1095
- }
1096
- .carbide.dark [data-slot='slider'] [data-slot='slider-track'] {
1097
- background-color: var(--surface-neutral);
1098
- }
1099
- .carbide.dark [data-slot='slider'] [data-slot='slider-range'] {
1100
- background-color: var(--primary);
1101
- }
1102
- .carbide.dark [data-slot='slider'] [data-slot='slider-thumb'] {
1103
- border-color: var(--primary);
1104
- }
1105
- .carbide [data-slot='accordion'] [data-slot='accordion-content'] {
1106
- color: var(--muted-foreground);
1107
- }
1108
- .carbide.dark [data-slot='accordion'] [data-slot='accordion-item'] {
1109
- border-bottom: 1px solid var(--border);
1110
- }
1111
- .carbide.dark [data-slot='accordion'] [data-slot='accordion-trigger'] {
1112
- color: var(--foreground);
1113
- }
1114
- .carbide.dark [data-slot='accordion'] [data-slot='accordion-content'] {
1115
- color: var(--muted-foreground);
1116
- }
1117
-
1118
- .carbide.dark [data-slot='progress'] {
1119
- background-color: var(--surface-neutral);
1120
- }
1121
-
1122
- .carbide.dark [data-slot='progress'] [data-slot='progress-indicator'] {
1123
- background-color: var(--primary);
1124
- }
1125
-
1126
- /* =============================
1127
- DATA TABLE: ALIGNMENT BASELINE FIX
1128
- ============================= */
1129
- /* Unify left-aligned body cells to the sortable-header baseline (0.25rem) */
1130
- .carbide
1131
- td.text-left[data-col-id]:not([data-col-id='select']):not(
1132
- [data-col-id='actions']
1133
- ) {
1134
- padding-left: 0.25rem !important;
1135
- }
1136
-
1137
- /* Normalize non-button header labels to match the ghost-button baseline */
1138
- .carbide
1139
- th[data-slot='table-head']
1140
- .inline-flex.items-center.gap-1:not(:has(button)) {
1141
- margin-left: -0.75rem; /* simulate -ml-3 */
1142
- padding-left: 0.75rem; /* simulate px-3 so text begins at the same x */
1143
- }
1144
- .carbide.dark [data-slot='switch'][data-state='unchecked'] {
1145
- background-color: var(--bg-input);
1146
- background-color: color-mix(in srgb, var(--bg-input) 80%, transparent);
1147
- }
1148
- .carbide [data-slot='calendar'] {
1149
- background-color: var(--card);
1150
- color: var(--card-foreground);
1151
- box-shadow:
1152
- 0 1px 2px rgba(15, 23, 42, 0.06),
1153
- 0 12px 32px rgba(15, 23, 42, 0.12);
1154
- border-radius: 0.75rem;
1155
- }
1156
- .carbide [data-slot='calendar'] .rdp-months {
1157
- display: flex;
1158
- gap: 1rem;
1159
- position: relative;
1160
- }
1161
- .carbide [data-slot='calendar'] .rdp-navbar {
1162
- position: absolute;
1163
- inset-inline: 0;
1164
- display: flex;
1165
- justify-content: space-between;
1166
- align-items: center;
1167
- padding-inline: 0;
1168
- }
1169
- .carbide [data-slot='calendar'] .rdp-caption_label {
1170
- font-weight: 500;
1171
- text-transform: none;
1172
- color: var(--card-foreground);
1173
- }
1174
- .carbide [data-slot='calendar'] .rdp-caption_dropdowns {
1175
- display: flex;
1176
- align-items: center;
1177
- gap: 0.5rem;
1178
- justify-content: center;
1179
- }
1180
- .carbide [data-slot='calendar'] .rdp-caption_dropdowns select {
1181
- appearance: none;
1182
- background-color: transparent;
1183
- border: 1px solid var(--border);
1184
- border-radius: 0.5rem;
1185
- padding: 0.25rem 0.5rem;
1186
- font-size: 0.875rem;
1187
- font-weight: 500;
1188
- color: var(--card-foreground);
1189
- }
1190
- .carbide [data-slot='calendar'] .rdp-weeknumber,
1191
- .carbide [data-slot='calendar'] .rdp-weeknumber_label {
1192
- color: var(--muted-foreground);
1193
- font-size: 0.75rem;
1194
- }
1195
- .carbide [data-slot='calendar'] .rdp-head_cell {
1196
- color: var(--muted-foreground);
1197
- font-size: 0.75rem;
1198
- font-weight: 500;
1199
- }
1200
- .carbide [data-slot='calendar'] .rdp-cell {
1201
- padding: 0;
1202
- }
1203
- .carbide [data-slot='calendar'] [data-slot='button'] {
1204
- width: var(--cell-size);
1205
- height: var(--cell-size);
1206
- border-radius: 0.75rem;
1207
- color: var(--card-foreground);
1208
- }
1209
- .carbide [data-slot='calendar'] [data-slot='button'][data-range-middle='true'] {
1210
- background-color: var(--accent);
1211
- color: var(--accent-foreground);
1212
- }
1213
- .carbide [data-slot='calendar'] [data-slot='button'][data-range-start='true'],
1214
- .carbide [data-slot='calendar'] [data-slot='button'][data-range-end='true'],
1215
- .carbide
1216
- [data-slot='calendar']
1217
- [data-slot='button'][data-selected-single='true'] {
1218
- background-color: var(--primary);
1219
- color: var(--primary-foreground);
1220
- }
1221
- .carbide [data-slot='calendar'] [data-slot='button'][data-range-middle='true'] {
1222
- border-radius: 0;
1223
- }
1224
- .carbide [data-slot='calendar'] [data-slot='button'][data-range-end='true'] {
1225
- border-radius: 0.75rem;
1226
- border-start-end-radius: 0.75rem;
1227
- border-end-end-radius: 0.75rem;
1228
- }
1229
- .carbide [data-slot='calendar'] [data-slot='button'][data-range-start='true'] {
1230
- border-radius: 0.75rem;
1231
- border-start-start-radius: 0.75rem;
1232
- border-end-start-radius: 0.75rem;
1233
- }
1234
- .carbide [data-slot='calendar'] [data-slot='button'][data-outside='true'] {
1235
- color: var(--muted-foreground);
1236
- }
1237
- .carbide [data-slot='calendar'] [data-slot='button'][disabled] {
1238
- color: var(--muted-foreground);
1239
- opacity: 0.5;
1240
- }
1241
- .carbide [data-slot='calendar'] [data-slot='button'][data-state='today'] {
1242
- color: var(--primary);
1243
- border: 1px solid var(--primary);
1244
- }
1245
- .carbide [data-slot='calendar'] .group\/day [data-slot='button'] {
1246
- transition:
1247
- background-color 0.2s ease,
1248
- color 0.2s ease,
1249
- box-shadow 0.2s ease;
1250
- }
1251
- .carbide
1252
- [data-slot='calendar']
1253
- .group\/day[data-focused='true']
1254
- [data-slot='button'] {
1255
- border-color: var(--ring);
1256
- box-shadow: 0 0 0 3px var(--ring-soft);
1257
- }