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

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 +1 @@
1
- {"version":3,"file":"CheckboxPreview.d.ts","sourceRoot":"","sources":["../../src/preview/CheckboxPreview.tsx"],"names":[],"mappings":"AAIA,MAAM,CAAC,OAAO,UAAU,eAAe,4CAgEtC"}
1
+ {"version":3,"file":"CheckboxPreview.d.ts","sourceRoot":"","sources":["../../src/preview/CheckboxPreview.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,OAAO,UAAU,eAAe,4CAgEtC"}
@@ -1 +1 @@
1
- {"version":3,"file":"DataTablePreview.d.ts","sourceRoot":"","sources":["../../src/preview/DataTablePreview.tsx"],"names":[],"mappings":"AAqKA,MAAM,MAAM,OAAO,GAAG,OAAO,GAAG,eAAe,CAAC;AAEhD,KAAK,qBAAqB,GAAG;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,OAAO,EAAE,iBAAiB,EAC1B,eAAuB,EACvB,aAAqB,GACtB,EAAE,qBAAqB,2CAoJvB"}
1
+ {"version":3,"file":"DataTablePreview.d.ts","sourceRoot":"","sources":["../../src/preview/DataTablePreview.tsx"],"names":[],"mappings":"AAmKA,MAAM,MAAM,OAAO,GAAG,OAAO,GAAG,eAAe,CAAC;AAEhD,KAAK,qBAAqB,GAAG;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,OAAO,EAAE,iBAAiB,EAC1B,eAAuB,EACvB,aAAqB,GACtB,EAAE,qBAAqB,2CAoJvB"}
@@ -1 +1 @@
1
- {"version":3,"file":"InputPreview.d.ts","sourceRoot":"","sources":["../../src/preview/InputPreview.tsx"],"names":[],"mappings":"AAKA,MAAM,CAAC,OAAO,UAAU,YAAY,4CAmDnC"}
1
+ {"version":3,"file":"InputPreview.d.ts","sourceRoot":"","sources":["../../src/preview/InputPreview.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,OAAO,UAAU,YAAY,4CAmDnC"}
@@ -1 +1 @@
1
- {"version":3,"file":"LabelPreview.d.ts","sourceRoot":"","sources":["../../src/preview/LabelPreview.tsx"],"names":[],"mappings":"AAKA,MAAM,CAAC,OAAO,UAAU,YAAY,4CAwDnC"}
1
+ {"version":3,"file":"LabelPreview.d.ts","sourceRoot":"","sources":["../../src/preview/LabelPreview.tsx"],"names":[],"mappings":"AAQA,MAAM,CAAC,OAAO,UAAU,YAAY,4CAwDnC"}
@@ -1 +1 @@
1
- {"version":3,"file":"RadioGroupPreview.d.ts","sourceRoot":"","sources":["../../src/preview/RadioGroupPreview.tsx"],"names":[],"mappings":"AAIA,MAAM,CAAC,OAAO,UAAU,iBAAiB,4CAqFxC"}
1
+ {"version":3,"file":"RadioGroupPreview.d.ts","sourceRoot":"","sources":["../../src/preview/RadioGroupPreview.tsx"],"names":[],"mappings":"AAOA,MAAM,CAAC,OAAO,UAAU,iBAAiB,4CAqFxC"}
@@ -1 +1 @@
1
- {"version":3,"file":"TabsPreview.d.ts","sourceRoot":"","sources":["../../src/preview/TabsPreview.tsx"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,UAAU,WAAW,4CAiIlC"}
1
+ {"version":3,"file":"TabsPreview.d.ts","sourceRoot":"","sources":["../../src/preview/TabsPreview.tsx"],"names":[],"mappings":"AAOA,MAAM,CAAC,OAAO,UAAU,WAAW,4CAiIlC"}
@@ -13,6 +13,6 @@ export type ManufacturingAsset = {
13
13
  };
14
14
  lastMaintenance: string;
15
15
  };
16
- export declare const manufacturingColumnRegistry: import("@/components/ui/data-table").ColumnRegistry<ManufacturingAsset, unknown>;
16
+ export declare const manufacturingColumnRegistry: import("@machinemetrics/mm-react-components").ColumnRegistry<ManufacturingAsset, unknown>;
17
17
  export declare const manufacturingColumns: ColumnDef<ManufacturingAsset>[];
18
18
  //# sourceMappingURL=data-table-preview_column-content.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"data-table-preview_column-content.d.ts","sourceRoot":"","sources":["../../../src/preview/data-table/data-table-preview_column-content.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAavD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IACpC,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,KAAK,GAAG,MAAM,GAAG,QAAQ,CAAC;IAChC,KAAK,EAAE;QAAE,SAAS,EAAE,IAAI,GAAG,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IACnD,eAAe,EAAE,MAAM,CAAC;CACzB,CAAC;AAmOF,eAAO,MAAM,2BAA2B,kFAMrC,CAAC;AAEJ,eAAO,MAAM,oBAAoB,EAAE,SAAS,CAAC,kBAAkB,CAAC,EAGT,CAAC"}
1
+ {"version":3,"file":"data-table-preview_column-content.d.ts","sourceRoot":"","sources":["../../../src/preview/data-table/data-table-preview_column-content.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAavD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IACpC,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,KAAK,GAAG,MAAM,GAAG,QAAQ,CAAC;IAChC,KAAK,EAAE;QAAE,SAAS,EAAE,IAAI,GAAG,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IACnD,eAAe,EAAE,MAAM,CAAC;CACzB,CAAC;AAmOF,eAAO,MAAM,2BAA2B,2FAMrC,CAAC;AAEJ,eAAO,MAAM,oBAAoB,EAAE,SAAS,CAAC,kBAAkB,CAAC,EAGT,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"PageHeaderPreview.d.ts","sourceRoot":"","sources":["../../../src/preview/page-header/PageHeaderPreview.tsx"],"names":[],"mappings":"AAWA,OAAO,2BAA2B,CAAC;AAQnC,MAAM,CAAC,OAAO,UAAU,iBAAiB,4CAiSxC"}
1
+ {"version":3,"file":"PageHeaderPreview.d.ts","sourceRoot":"","sources":["../../../src/preview/page-header/PageHeaderPreview.tsx"],"names":[],"mappings":"AAcA,OAAO,2BAA2B,CAAC;AAQnC,MAAM,CAAC,OAAO,UAAU,iBAAiB,4CAiSxC"}
@@ -0,0 +1,536 @@
1
+ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700&display=swap');
2
+ @import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;600;700&display=swap');
3
+ @import 'tailwindcss';
4
+ @import 'tw-animate-css';
5
+
6
+ [data-slot='progress'] {
7
+ /* Disabled/unknown visual base aligns with inputs/buttons disabled look */
8
+ }
9
+
10
+ .mmc-progress[data-unknown='true'] {
11
+ opacity: 0.6;
12
+ }
13
+
14
+ .mmc-progress[data-unknown='true'] [data-slot='progress-indicator'] {
15
+ filter: grayscale(0.2) brightness(0.9);
16
+ }
17
+
18
+ /* Shimmer overlay for active progress state */
19
+ @keyframes mm-progress-shimmer {
20
+ 0% {
21
+ transform: translateX(-100%);
22
+ opacity: 0;
23
+ }
24
+ 10% {
25
+ opacity: 0.15;
26
+ }
27
+ 50% {
28
+ opacity: 0.25;
29
+ }
30
+ 100% {
31
+ transform: translateX(100%);
32
+ opacity: 0;
33
+ }
34
+ }
35
+
36
+ [data-slot='progress-indicator']::before {
37
+ content: '';
38
+ position: absolute;
39
+ inset: 0;
40
+ background: linear-gradient(
41
+ 90deg,
42
+ transparent 0%,
43
+ rgba(255, 255, 255, 0.15) 50%,
44
+ transparent 100%
45
+ );
46
+ transform: translateX(-100%);
47
+ pointer-events: none;
48
+ animation: mm-progress-shimmer 2.4s ease-in-out infinite;
49
+ }
50
+
51
+ @custom-variant dark (&:is(.dark *));
52
+
53
+ @theme inline {
54
+ --radius-sm: calc(var(--radius) - 4px);
55
+ --radius-md: calc(var(--radius) - 2px);
56
+ --radius-lg: var(--radius);
57
+ --radius-xl: calc(var(--radius) + 4px);
58
+ --color-background: var(--background);
59
+ --color-foreground: var(--foreground);
60
+ --color-card: var(--card);
61
+ --color-card-foreground: var(--card-foreground);
62
+ --color-popover: var(--popover);
63
+ --color-popover-foreground: var(--popover-foreground);
64
+ --color-primary: var(--primary);
65
+ --color-primary-foreground: var(--primary-foreground);
66
+ --color-secondary: var(--secondary);
67
+ --color-secondary-foreground: var(--secondary-foreground);
68
+ --color-muted: var(--muted);
69
+ --color-muted-foreground: var(--muted-foreground);
70
+ --color-accent: var(--accent);
71
+ --color-accent-foreground: var(--accent-foreground);
72
+ --color-destructive: var(--destructive);
73
+ --color-border: var(--border);
74
+ --color-input: var(--input);
75
+ --color-ring: var(--ring);
76
+ --color-chart-1: var(--chart-1);
77
+ --color-chart-2: var(--chart-2);
78
+ --color-chart-3: var(--chart-3);
79
+ --color-chart-4: var(--chart-4);
80
+ --color-chart-5: var(--chart-5);
81
+ --color-sidebar: var(--sidebar);
82
+ --color-sidebar-foreground: var(--sidebar-foreground);
83
+ --color-sidebar-primary: var(--sidebar-primary);
84
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
85
+ --color-sidebar-accent: var(--sidebar-accent);
86
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
87
+ --color-sidebar-border: var(--sidebar-border);
88
+ --color-sidebar-ring: var(--sidebar-ring);
89
+ }
90
+
91
+ :root {
92
+ --radius: 0.5rem;
93
+ --radius-sm: 4px;
94
+ --radius-md: calc(var(--radius) - 2px);
95
+ --radius-lg: var(--radius);
96
+ --radius-xl: calc(var(--radius) + 4px);
97
+ --background: oklch(1 0 0);
98
+ --foreground: oklch(0.145 0 0);
99
+ --card: oklch(1 0 0);
100
+ --card-foreground: oklch(0.145 0 0);
101
+ --popover: oklch(1 0 0);
102
+ --popover-foreground: oklch(0.145 0 0);
103
+ --primary: oklch(0.205 0 0);
104
+ --primary-foreground: oklch(0.985 0 0);
105
+ --secondary: oklch(0.97 0 0);
106
+ --secondary-foreground: oklch(0.205 0 0);
107
+ --muted: oklch(0.97 0 0);
108
+ --muted-foreground: oklch(0.556 0 0);
109
+ --accent: oklch(0.97 0 0);
110
+ --accent-foreground: oklch(0.205 0 0);
111
+ --destructive: oklch(0.577 0.245 27.325);
112
+ --border: oklch(0.922 0 0);
113
+ --input: oklch(0.922 0 0);
114
+ --ring: oklch(0.708 0 0);
115
+ --chart-1: oklch(0.646 0.222 41.116);
116
+ --chart-2: oklch(0.6 0.118 184.704);
117
+ --chart-3: oklch(0.398 0.07 227.392);
118
+ --chart-4: oklch(0.828 0.189 84.429);
119
+ --chart-5: oklch(0.769 0.188 70.08);
120
+ --sidebar: oklch(0.985 0 0);
121
+ --sidebar-foreground: oklch(0.145 0 0);
122
+ --sidebar-primary: oklch(0.205 0 0);
123
+ --sidebar-primary-foreground: oklch(0.985 0 0);
124
+ --sidebar-accent: oklch(0.97 0 0);
125
+ --sidebar-accent-foreground: oklch(0.205 0 0);
126
+ --sidebar-border: oklch(0.922 0 0);
127
+ --sidebar-ring: oklch(0.708 0 0);
128
+
129
+ /* Overlay token (base) */
130
+ --overlay-bg: rgba(0, 0, 0, 0.8);
131
+
132
+ /* --- Typography tokens (shadcn/ui reference) --- */
133
+ --font-sans:
134
+ ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
135
+ Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
136
+ 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
137
+ --font-mono:
138
+ ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
139
+ 'Courier New', monospace;
140
+ --font-heading: var(--font-sans);
141
+ --font-body: var(--font-sans);
142
+
143
+ --text-base-size: 1rem; /* 16px */
144
+ --text-sm-size: 0.875rem; /* 14px */
145
+ --text-lg-size: 1.125rem; /* 18px */
146
+
147
+ --font-weight-normal: 400;
148
+ --font-weight-medium: 500;
149
+ --font-weight-bold: 700;
150
+
151
+ --leading-tight: 1.25;
152
+ --leading-normal: 1.5;
153
+
154
+ --tracking-tight: -0.015em;
155
+ --tracking-normal: 0;
156
+ }
157
+
158
+ .dark {
159
+ --background: oklch(0.145 0 0);
160
+ --foreground: oklch(0.985 0 0);
161
+ --card: oklch(0.205 0 0);
162
+ --card-foreground: oklch(0.985 0 0);
163
+ --popover: oklch(0.205 0 0);
164
+ --popover-foreground: oklch(0.985 0 0);
165
+ --primary: oklch(0.922 0 0);
166
+ --primary-foreground: oklch(0.205 0 0);
167
+ --secondary: oklch(0.269 0 0);
168
+ --secondary-foreground: oklch(0.985 0 0);
169
+ --muted: oklch(0.269 0 0);
170
+ --muted-foreground: oklch(0.708 0 0);
171
+ --accent: oklch(0.269 0 0);
172
+ --accent-foreground: oklch(0.985 0 0);
173
+ --destructive: oklch(0.704 0.191 22.216);
174
+ --border: oklch(1 0 0 / 10%);
175
+ --input: oklch(1 0 0 / 15%);
176
+ --ring: oklch(0.556 0 0);
177
+ --chart-1: oklch(0.488 0.243 264.376);
178
+ --chart-2: oklch(0.696 0.17 162.48);
179
+ --chart-3: oklch(0.769 0.188 70.08);
180
+ --chart-4: oklch(0.627 0.265 303.9);
181
+ --chart-5: oklch(0.645 0.246 16.439);
182
+ --sidebar: oklch(0.205 0 0);
183
+ --sidebar-foreground: oklch(0.985 0 0);
184
+ --sidebar-primary: oklch(0.488 0.243 264.376);
185
+ --sidebar-primary-foreground: oklch(0.985 0 0);
186
+ --sidebar-accent: oklch(0.269 0 0);
187
+ --sidebar-accent-foreground: oklch(0.985 0 0);
188
+ --sidebar-border: oklch(1 0 0 / 10%);
189
+ --sidebar-ring: oklch(0.556 0 0);
190
+ }
191
+
192
+ @layer base {
193
+ * {
194
+ @apply border-border outline-ring/50;
195
+ }
196
+ body {
197
+ @apply bg-background text-foreground;
198
+ }
199
+ .lead {
200
+ @apply text-xl text-muted-foreground;
201
+ }
202
+ .large {
203
+ @apply text-lg font-semibold;
204
+ }
205
+ .small {
206
+ @apply text-sm font-medium leading-none;
207
+ }
208
+ .muted {
209
+ @apply text-sm text-muted-foreground;
210
+ }
211
+ :root {
212
+ --sidebar-background: 0 0% 98%;
213
+ --sidebar-foreground: 240 5.3% 26.1%;
214
+ --sidebar-primary: 240 5.9% 10%;
215
+ --sidebar-primary-foreground: 0 0% 98%;
216
+ --sidebar-accent: 240 4.8% 95.9%;
217
+ --sidebar-accent-foreground: 240 5.9% 10%;
218
+ --sidebar-border: 220 13% 91%;
219
+ --sidebar-ring: 217.2 91.2% 59.8%;
220
+ }
221
+
222
+ .dark {
223
+ --sidebar-background: 240 5.9% 10%;
224
+ --sidebar-foreground: 240 4.8% 95.9%;
225
+ --sidebar-primary: 224.3 76.3% 48%;
226
+ --sidebar-primary-foreground: 0 0% 100%;
227
+ --sidebar-accent: 240 3.7% 15.9%;
228
+ --sidebar-accent-foreground: 240 4.8% 95.9%;
229
+ --sidebar-border: 240 3.7% 15.9%;
230
+ --sidebar-ring: 217.2 91.2% 59.8%;
231
+ }
232
+
233
+ /* Centralized overlay class to keep overlays consistent */
234
+ .mmc-overlay {
235
+ background-color: var(--overlay-bg);
236
+ -webkit-backdrop-filter: blur(4px);
237
+ backdrop-filter: blur(4px);
238
+ }
239
+
240
+ /* Universal Carbide hover for input-like controls */
241
+ .carbide
242
+ :is(
243
+ input:not([type]),
244
+ input[type='text'],
245
+ input[type='email'],
246
+ input[type='password'],
247
+ input[type='search'],
248
+ input[type='number'],
249
+ input[type='url'],
250
+ input[type='tel'],
251
+ textarea,
252
+ [data-slot='checkbox'],
253
+ [data-slot='radio-group-item'],
254
+ [data-slot='toggle'],
255
+ [data-slot='filter-section-trigger']
256
+ ) {
257
+ @apply transition-[background-color,box-shadow];
258
+ }
259
+
260
+ .carbide
261
+ :is(
262
+ input:not([type]),
263
+ input[type='text'],
264
+ input[type='email'],
265
+ input[type='password'],
266
+ input[type='search'],
267
+ input[type='number'],
268
+ input[type='url'],
269
+ input[type='tel'],
270
+ textarea,
271
+ [data-slot='checkbox'],
272
+ [data-slot='radio-group-item'],
273
+ [data-slot='toggle'],
274
+ [data-slot='filter-section-trigger']
275
+ ):where(:not(:disabled)):hover {
276
+ background-color: var(--accent);
277
+ }
278
+
279
+ .carbide.dark
280
+ :is(
281
+ input:not([type]),
282
+ input[type='text'],
283
+ input[type='email'],
284
+ input[type='password'],
285
+ input[type='search'],
286
+ input[type='number'],
287
+ input[type='url'],
288
+ input[type='tel'],
289
+ textarea,
290
+ [data-slot='checkbox'],
291
+ [data-slot='radio-group-item'],
292
+ [data-slot='toggle'],
293
+ [data-slot='filter-section-trigger']
294
+ ):where(:not(:disabled)):hover {
295
+ background-color: var(--input-surface-hover-bg);
296
+ }
297
+
298
+ /* Ensure elements styled via the bg-input utility also receive hover */
299
+ .carbide .bg-input:where(:not(:disabled)):hover {
300
+ background-color: var(--accent);
301
+ }
302
+ .carbide.dark .bg-input:where(:not(:disabled)):hover {
303
+ background-color: var(--input-surface-hover-bg);
304
+ }
305
+
306
+ /* Table row hover vs action trigger hover contrast (base declaration) */
307
+ .mmc-data-table-preview
308
+ .mmc-table-action-trigger:where(:not(:disabled)):hover {
309
+ background-color: color-mix(in oklab, var(--accent) 92%, black 8%);
310
+ }
311
+ .carbide.dark
312
+ .mmc-data-table-preview
313
+ .mmc-table-action-trigger:where(:not(:disabled)):hover {
314
+ background-color: color-mix(
315
+ in oklab,
316
+ var(--input-surface-hover-bg) 90%,
317
+ white 10%
318
+ );
319
+ }
320
+
321
+ /* Put higher-precedence overrides in utilities layer to beat Tailwind utilities */
322
+ @layer utilities {
323
+ /* Animated ellipsis for in-progress labels */
324
+ @keyframes mm-ellipsis {
325
+ 0% {
326
+ content: '';
327
+ }
328
+ 33% {
329
+ content: '.';
330
+ }
331
+ 66% {
332
+ content: '..';
333
+ }
334
+ 100% {
335
+ content: '...';
336
+ }
337
+ }
338
+ .mmc-animated-ellipsis::after {
339
+ display: inline-block;
340
+ width: 16px;
341
+ text-align: left;
342
+ content: '';
343
+ animation: mm-ellipsis 1.5s steps(3, end) infinite;
344
+ }
345
+
346
+ /* In-progress status colors */
347
+ .mmc-khub-status--in-progress .mmc-khub-status__label {
348
+ color: var(--foreground);
349
+ }
350
+ .carbide.dark .mmc-khub-status--in-progress .mmc-khub-status__label {
351
+ color: var(--foreground);
352
+ }
353
+ /* Consistent KHUB status layout */
354
+ .mmc-khub {
355
+ --khub-progress-width: 80px;
356
+ --khub-status-gutter: 88px;
357
+ }
358
+ .mmc-khub-status {
359
+ min-width: 0;
360
+ }
361
+ .mmc-khub-status__gutter {
362
+ width: var(--khub-status-gutter);
363
+ flex: 0 0 var(--khub-status-gutter);
364
+ display: inline-flex;
365
+ align-items: center;
366
+ }
367
+ .mmc-khub-status__label {
368
+ display: inline-block;
369
+ max-width: 100%;
370
+ }
371
+ .mmc-khub-status__progress {
372
+ width: var(--khub-progress-width);
373
+ flex: 0 0 var(--khub-progress-width);
374
+ }
375
+
376
+ /* Match in-progress text styling to badges */
377
+ .mmc-khub-status--in-progress .mmc-khub-status__label {
378
+ font-size: 0.75rem;
379
+ line-height: 1rem;
380
+ font-weight: 400;
381
+ color: var(--grey-700) !important;
382
+ }
383
+ .carbide.dark .mmc-khub-status--in-progress .mmc-khub-status__label {
384
+ color: var(--grey-200) !important;
385
+ }
386
+
387
+ /* Remove fade overflow mask for KHUB status cells */
388
+ .mmc-table-cell__content:has(> .mmc-khub-status) {
389
+ -webkit-mask-image: none !important;
390
+ mask-image: none !important;
391
+ }
392
+ /* Elevate action trigger hover contrast above Tailwind utilities */
393
+ .mmc-data-table-preview .mmc-table-action-trigger:hover {
394
+ background-color: var(--table-action-hover-bg) !important;
395
+ }
396
+ .carbide.dark .mmc-data-table-preview .mmc-table-action-trigger:hover {
397
+ background-color: var(--table-action-hover-bg) !important;
398
+ }
399
+ }
400
+
401
+ /* Universal single-line overflow wrapper for table cell contents */
402
+ .mmc-table-cell__content {
403
+ display: block;
404
+ width: 100%;
405
+ white-space: nowrap;
406
+ overflow: hidden;
407
+ --fade-edge: 16px;
408
+ }
409
+ /* Apply masks ONLY when overflow is detected via JS-added modifier classes */
410
+ .mmc-table-cell__content--fade-right {
411
+ -webkit-mask-image: linear-gradient(
412
+ to right,
413
+ rgba(0, 0, 0, 1) calc(100% - var(--fade-edge)),
414
+ rgba(0, 0, 0, 0) 100%
415
+ );
416
+ mask-image: linear-gradient(
417
+ to right,
418
+ rgba(0, 0, 0, 1) calc(100% - var(--fade-edge)),
419
+ rgba(0, 0, 0, 0) 100%
420
+ );
421
+ }
422
+ .mmc-table-cell__content--fade-left {
423
+ -webkit-mask-image: linear-gradient(
424
+ to left,
425
+ rgba(0, 0, 0, 1) calc(100% - var(--fade-edge)),
426
+ rgba(0, 0, 0, 0) 100%
427
+ );
428
+ mask-image: linear-gradient(
429
+ to left,
430
+ rgba(0, 0, 0, 1) calc(100% - var(--fade-edge)),
431
+ rgba(0, 0, 0, 0) 100%
432
+ );
433
+ }
434
+ .mmc-table-cell__content--fade-both {
435
+ -webkit-mask-image: linear-gradient(
436
+ to right,
437
+ transparent 0,
438
+ rgba(0, 0, 0, 1) var(--fade-edge),
439
+ rgba(0, 0, 0, 1) calc(100% - var(--fade-edge)),
440
+ transparent 100%
441
+ );
442
+ mask-image: linear-gradient(
443
+ to right,
444
+ transparent 0,
445
+ rgba(0, 0, 0, 1) var(--fade-edge),
446
+ rgba(0, 0, 0, 1) calc(100% - var(--fade-edge)),
447
+ transparent 100%
448
+ );
449
+ }
450
+ }
451
+
452
+ /* Collapsible animations using Radix-provided height variable */
453
+ @keyframes mm-collapsible-down {
454
+ from {
455
+ height: 0;
456
+ opacity: 0;
457
+ }
458
+ to {
459
+ height: var(--radix-collapsible-content-height);
460
+ opacity: 1;
461
+ }
462
+ }
463
+
464
+ @keyframes mm-collapsible-up {
465
+ from {
466
+ height: var(--radix-collapsible-content-height);
467
+ opacity: 1;
468
+ }
469
+ to {
470
+ height: 0;
471
+ opacity: 0;
472
+ }
473
+ }
474
+
475
+ /* JS-driven height animation now handles height. Keep only overflow hidden. */
476
+ [data-slot='collapsible-content'] {
477
+ overflow: hidden;
478
+ }
479
+ /* Radix sets hidden on closed when forceMount is used; override to enable CSS animation */
480
+ [data-slot='collapsible-content'][hidden] {
481
+ display: block !important;
482
+ }
483
+ /* JS controls height now; avoid conflicting state heights */
484
+
485
+ /* Progress micro-interactions */
486
+ @keyframes mm-progress-head-flash {
487
+ 0% {
488
+ opacity: 0;
489
+ transform: translateX(0);
490
+ }
491
+ 30% {
492
+ opacity: 0.6;
493
+ }
494
+ 100% {
495
+ opacity: 0;
496
+ transform: translateX(8px);
497
+ }
498
+ }
499
+
500
+ @keyframes mm-progress-breathe {
501
+ 0%,
502
+ 100% {
503
+ filter: brightness(1);
504
+ opacity: 1;
505
+ }
506
+ 50% {
507
+ filter: brightness(1.35);
508
+ opacity: 0.8;
509
+ }
510
+ }
511
+
512
+ [data-slot='progress'] [data-slot='progress-indicator']::after {
513
+ content: '';
514
+ position: absolute;
515
+ right: -2px;
516
+ top: 0;
517
+ bottom: 0;
518
+ width: 12px;
519
+ pointer-events: none;
520
+ /* Avoid color-mix/oklch for broader browser support; use simple alpha gradient */
521
+ background: radial-gradient(
522
+ 12px 12px at 100% 50%,
523
+ rgba(255, 255, 255, 0.6),
524
+ transparent 70%
525
+ );
526
+ opacity: 0;
527
+ }
528
+
529
+ .mmc-progress[data-animating='true'] [data-slot='progress-indicator']::after {
530
+ animation: mm-progress-head-flash 600ms ease-out 1;
531
+ }
532
+
533
+ /* Always-on pulse for the fill, regardless of state */
534
+ [data-slot='progress-indicator'] {
535
+ animation: mm-progress-breathe 1.65s ease-in-out infinite;
536
+ }
@@ -2,7 +2,7 @@
2
2
  /* This file imports everything needed without duplicating styles */
3
3
 
4
4
  /* Import base theme (includes Tailwind reset, base variables, and component styles) */
5
- @import '../index.css';
5
+ @import url('./base.css');
6
6
 
7
7
  /* Import Carbide theme (includes industrial styling overrides) */
8
- @import './carbide.css';
8
+ @import url('./carbide.css');
package/package.json CHANGED
@@ -1,6 +1,23 @@
1
1
  {
2
2
  "name": "@machinemetrics/mm-react-components",
3
- "version": "0.2.3-1",
3
+ "version": "0.2.3-2",
4
+ "description": "Industrial-grade React components for manufacturing applications",
5
+ "keywords": [
6
+ "react",
7
+ "components",
8
+ "industrial",
9
+ "manufacturing",
10
+ "tailwind",
11
+ "shadcn"
12
+ ],
13
+ "homepage": "https://github.com/machinemetrics/mm-react-components#readme",
14
+ "repository": {
15
+ "type": "git",
16
+ "url": "https://github.com/machinemetrics/mm-react-components.git"
17
+ },
18
+ "bugs": {
19
+ "url": "https://github.com/machinemetrics/mm-react-components/issues"
20
+ },
4
21
  "license": "MIT",
5
22
  "type": "module",
6
23
  "main": "dist/mm-react-components.umd.js",
@@ -16,8 +33,9 @@
16
33
  "./themes/base": "./dist/index.css",
17
34
  "./themes/carbide": "./dist/themes/carbide.css",
18
35
  "./themes/complete": "./dist/themes/complete.css",
19
- "./tailwind.config": "./tailwind.config.export.js",
36
+ "./tailwind.config": "./tailwind.base.config.js",
20
37
  "./docs/tailwind-setup": "./docs/TAILWIND_SETUP.md",
38
+ "./docs/getting-started": "./dist/docs/GETTING_STARTED.md",
21
39
  "./README": "./dist/README.md"
22
40
  },
23
41
  "engines": {
@@ -74,6 +92,7 @@
74
92
  "@radix-ui/react-progress": "^1.1.7",
75
93
  "@radix-ui/react-radio-group": "^1.3.8",
76
94
  "@radix-ui/react-select": "^2.2.6",
95
+ "@radix-ui/react-separator": "^1.1.7",
77
96
  "@radix-ui/react-slider": "^1.3.6",
78
97
  "@radix-ui/react-slot": "^1.2.3",
79
98
  "@radix-ui/react-switch": "^1.2.6",