@machinemetrics/mm-react-components 0.2.3-18 → 0.2.3-19

package/dist/preview/DatePickerPreview.d.ts

@@ -0,0 +1,2 @@
+export default function DatePickerPreview(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DatePickerPreview.d.ts.map

package/dist/preview/DatePickerPreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerPreview.d.ts","sourceRoot":"","sources":["../../src/preview/DatePickerPreview.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,OAAO,UAAU,iBAAiB,4CA6ExC"}

package/dist/preview/SpinnerPreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpinnerPreview.d.ts","sourceRoot":"","sources":["../../src/preview/SpinnerPreview.tsx"],"names":[],"mappings":"AAIA,MAAM,CAAC,OAAO,UAAU,cAAc,4CAqFrC"}
+{"version":3,"file":"SpinnerPreview.d.ts","sourceRoot":"","sources":["../../src/preview/SpinnerPreview.tsx"],"names":[],"mappings":"AAIA,MAAM,CAAC,OAAO,UAAU,cAAc,4CAuGrC"}

package/dist/themes/carbide.css

@@ -380,6 +380,10 @@
   --button-destructive-hover-bg: var(--red-700);
   --button-outline-bg: var(--bg-input);
 
+  /* Spinner tokens (Carbide scope) */
+  --spinner-foreground: var(--indigo-600);
+  --spinner-background: var(--grey-300);
+
   /* Table action trigger hover (distinct from row hover) */
   --table-action-hover-bg: var(--grey-300);
 
@@ -405,60 +409,13 @@
 /* =============================
    KNOWLEDGE HUB STATUS BADGES
   ============================= */
-.carbide .mmc-khub [data-slot='badge'] {
-  border-radius: 9999px;
-}
-
-.carbide .mmc-khub [data-slot='badge'][data-status='Waiting'] {
-  background-color: var(--indigo-200);
-  color: var(--grey-700);
-  border-color: var(--indigo-200);
-}
-
-.carbide .mmc-khub [data-slot='badge'][data-status='Uploading'],
-.carbide .mmc-khub [data-slot='badge'][data-status='Processing'] {
-  background-color: transparent;
-  color: var(--grey-700);
-  border-color: transparent;
-  padding-inline: 0;
-}
-
-.carbide .mmc-khub [data-slot='badge'][data-status='Failed'],
-.carbide .mmc-khub [data-slot='badge'][data-status='Upload Failed'],
-.carbide .mmc-khub [data-slot='badge'][data-status='Processing Failed'] {
-  background-color: var(--red-200);
-  color: var(--grey-700);
-  border-color: var(--red-200);
-}
-
+/* Keep intentional lighter tone for Processed in Knowledge Hub */
 .carbide .mmc-khub [data-slot='badge'][data-status='Processed'] {
   background-color: var(--grey-200);
   color: var(--grey-500);
   border-color: var(--grey-200);
 }
 
-.carbide.dark .mmc-khub [data-slot='badge'][data-status='Waiting'] {
-  background-color: var(--indigo-700);
-  color: var(--grey-00);
-  border-color: var(--indigo-700);
-}
-
-.carbide.dark .mmc-khub [data-slot='badge'][data-status='Uploading'],
-.carbide.dark .mmc-khub [data-slot='badge'][data-status='Processing'] {
-  background-color: transparent;
-  color: var(--grey-200);
-  border-color: transparent;
-  padding-inline: 0;
-}
-
-.carbide.dark .mmc-khub [data-slot='badge'][data-status='Failed'],
-.carbide.dark .mmc-khub [data-slot='badge'][data-status='Upload Failed'],
-.carbide.dark .mmc-khub [data-slot='badge'][data-status='Processing Failed'] {
-  background-color: var(--red-700);
-  color: var(--grey-00);
-  border-color: var(--red-700);
-}
-
 .carbide.dark .mmc-khub [data-slot='badge'][data-status='Processed'] {
   background-color: var(--grey-750);
   color: var(--grey-300);
@@ -606,6 +563,10 @@
   --button-destructive-hover-bg: var(--red-500);
   --button-outline-bg: color-mix(in srgb, var(--bg-input) 30%, transparent);
 
+  /* Spinner tokens (Carbide scope, dark) */
+  --spinner-foreground: var(--grey-00);
+  --spinner-background: color-mix(in srgb, var(--grey-00) 25%, transparent);
+
   /* Table action trigger hover (distinct from row hover) */
   --table-action-hover-bg: var(--grey-800);
 }
@@ -1025,6 +986,50 @@
   border-color: var(--border);
 }
 
+/* Data Table: Row actions trigger visibility */
+tr td[data-col-id='actions'] .mmc-table-action-trigger,
+tr td[data-col-id='actions'] [data-slot='table-action-trigger'] {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s ease-in-out;
+}
+/* Visible when row is hovered, trigger is keyboard-focused, menu is open, or row flagged */
+tr:hover td[data-col-id='actions'] .mmc-table-action-trigger,
+tr:hover td[data-col-id='actions'] [data-slot='table-action-trigger'],
+tr td[data-col-id='actions'] .mmc-table-action-trigger:focus-visible,
+tr td[data-col-id='actions'] [data-slot='table-action-trigger']:focus-visible,
+tr td[data-col-id='actions'] .mmc-table-action-trigger[aria-expanded='true'],
+tr
+  td[data-col-id='actions']
+  [data-slot='table-action-trigger'][aria-expanded='true'],
+tr[data-action-visible='true']
+  td[data-col-id='actions']
+  .mmc-table-action-trigger,
+tr[data-action-visible='true']
+  td[data-col-id='actions']
+  [data-slot='table-action-trigger'] {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* Keep trigger visible and indicate active when menu is open */
+tr td[data-col-id='actions'] .mmc-table-action-trigger[data-state='open'],
+tr
+  td[data-col-id='actions']
+  [data-slot='table-action-trigger'][data-state='open'] {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.carbide [data-slot='table-action-trigger'][data-state='open'],
+.carbide [data-slot='table-action-trigger'][aria-expanded='true'] {
+  background-color: var(--table-action-hover-bg);
+}
+.carbide.dark [data-slot='table-action-trigger'][data-state='open'],
+.carbide.dark [data-slot='table-action-trigger'][aria-expanded='true'] {
+  background-color: var(--table-action-hover-bg);
+}
+
 /* =============================
    TABS
   ============================= */
@@ -1090,6 +1095,63 @@
   color: var(--destructive-foreground) !important;
 }
 
+/* =============================
+   SPINNER (SEMANTIC HOOK)
+  ============================= */
+.carbide [data-slot='spinner'] {
+  color: var(--spinner-foreground);
+}
+.carbide [data-slot='spinner'] circle:first-of-type {
+  /* track color */
+  stroke: var(--spinner-background);
+}
+.carbide [data-slot='spinner'] circle:last-of-type {
+  /* arc color sync with current color */
+  stroke: currentColor;
+}
+
+/* Contextual overrides when inside buttons */
+.carbide [data-slot='button'] [data-slot='spinner'] {
+  /* Default button uses primary bg → use on-dark pair for contrast */
+  --spinner-foreground: var(--primary-foreground);
+  --spinner-background: color-mix(
+    in srgb,
+    var(--primary-foreground) 25%,
+    transparent
+  );
+}
+.carbide [data-slot='button'][data-variant='outline'] [data-slot='spinner'],
+.carbide [data-slot='button'][data-variant='secondary'] [data-slot='spinner'],
+.carbide [data-slot='button'][data-variant='ghost'] [data-slot='spinner'],
+.carbide [data-slot='button'][data-variant='link'] [data-slot='spinner'] {
+  /* Light backgrounds → use on-light pair */
+  --spinner-foreground: var(--indigo-600);
+  --spinner-background: var(--grey-300);
+}
+
+/* In dark theme, outline/secondary/ghost/link often sit on dark surfaces → use on-dark pair */
+.carbide.dark
+  [data-slot='button'][data-variant='outline']
+  [data-slot='spinner'],
+.carbide.dark
+  [data-slot='button'][data-variant='secondary']
+  [data-slot='spinner'],
+.carbide.dark [data-slot='button'][data-variant='ghost'] [data-slot='spinner'],
+.carbide.dark [data-slot='button'][data-variant='link'] [data-slot='spinner'] {
+  --spinner-foreground: var(--grey-00);
+  --spinner-background: color-mix(in srgb, var(--grey-00) 25%, transparent);
+}
+
+/* Optional forcing utilities */
+.carbide .mmc-spinner--on-dark {
+  --spinner-foreground: var(--grey-00);
+  --spinner-background: color-mix(in srgb, var(--grey-00) 25%, transparent);
+}
+.carbide .mmc-spinner--on-light {
+  --spinner-foreground: var(--indigo-600);
+  --spinner-background: var(--grey-300);
+}
+
 /* Input Border Utility */
 .carbide .border-input,
 .carbide.dark .border-input {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@machinemetrics/mm-react-components",
-  "version": "0.2.3-18",
+  "version": "0.2.3-19",
   "description": "Industrial-grade React components for manufacturing applications",
   "keywords": [
     "react",