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

package/dist/themes/carbide.css

@@ -1,7 +1,162 @@
+/* Note: Font imports are now handled in src/lib/styles.css to avoid @import ordering issues */
+
+:root {
+  --radius: 0.5rem;
+  --radius-sm: 4px;
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: #5a67d8;
+  --chart-2: #319795;
+  --chart-3: #38a169;
+  --chart-4: #dd6b20;
+  --chart-5: #805ad5;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+
+  /* Overlay token (base) */
+  --overlay-bg: rgba(0, 0, 0, 0.8);
+
+  /* --- Typography tokens (shadcn/ui reference) --- */
+  --font-sans:
+    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-mono:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+    'Courier New', monospace;
+  --font-heading: var(--font-sans);
+  --font-body: var(--font-sans);
+
+  --text-base-size: 1rem; /* 16px */
+  --text-sm-size: 0.875rem; /* 14px */
+  --text-lg-size: 1.125rem; /* 18px */
+
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-bold: 700;
+
+  --leading-tight: 1.25;
+  --leading-normal: 1.5;
+
+  --tracking-tight: -0.015em;
+  --tracking-normal: 0;
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: #667eea;
+  --chart-2: #4fd1c5;
+  --chart-3: #48bb78;
+  --chart-4: #ed8936;
+  --chart-5: #9f7aea;
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+/* Collapsible animations using Radix-provided height variable */
+@keyframes mm-collapsible-down {
+  from {
+    height: 0;
+    opacity: 0;
+  }
+  to {
+    height: var(--radix-collapsible-content-height);
+    opacity: 1;
+  }
+}
+
+@keyframes mm-collapsible-up {
+  from {
+    height: var(--radix-collapsible-content-height);
+    opacity: 1;
+  }
+  to {
+    height: 0;
+    opacity: 0;
+  }
+}
+
+/* Accordion animations (core theme) */
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+@keyframes accordion-up {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+/* JS-driven height animation now handles height. Keep only overflow hidden. */
+[data-slot='collapsible-content'] {
+  overflow: hidden;
+}
+/* Radix sets hidden on closed when forceMount is used; override to enable CSS animation */
+[data-slot='collapsible-content'][hidden] {
+  display: block !important;
+}
+/* JS controls height now; avoid conflicting state heights */
+
 .carbide {
   /* =============================
-   TYPOGRAPHY
-============================= */
+     TYPOGRAPHY
+  ============================= */
 
   /* Core Fonts */
   --font-sans:
@@ -17,8 +172,8 @@
   --font-weight-bold: 600;
 
   /* =============================
-   COLORS
-============================= */
+     COLORS
+  ============================= */
 
   /* Brand */
   --brand-green: #15a500;
@@ -193,13 +348,13 @@
 
   /* =============================
      SURFACES (GENERIC)
-     ============================= */
+  ============================= */
   /* Neutral control rail/background surface used across components */
   --surface-neutral: var(--grey-300);
 
   /* =============================
      TABLIST
-     ============================= */
+  ============================= */
   --tablist-bg: var(--grey-200);
   --tablist-fg: var(--grey-700);
   --tablist-active-bg: var(--grey-00);
@@ -208,14 +363,14 @@
 
   /* =============================
      TABLE HEADER
-     ============================= */
+  ============================= */
   --tablehead-bg: var(--muted);
   --tablehead-fg: var(--foreground);
   --tablehead-border: var(--border);
 
   /* =============================
      BUTTONS
-     ============================= */
+  ============================= */
   --button-secondary-bg: transparent;
   --button-secondary-border: var(--grey-700);
   --button-secondary-hover-bg: var(--grey-150);
@@ -234,7 +389,7 @@
 
   /* =============================
      INPUT/OUTLINE/OVERLAY SURFACES
-     ============================= */
+  ============================= */
   --input-surface-bg: #202734;
   --input-surface-border: #2d3748;
   --input-surface-hover-bg: #242c3a;
@@ -242,14 +397,14 @@
 
 /* =============================
    BADGE: TYPOGRAPHY
-   ============================= */
+  ============================= */
 .carbide [data-slot='badge'] {
   font-weight: 400;
 }
 
 /* =============================
    KNOWLEDGE HUB STATUS BADGES
-   ============================= */
+  ============================= */
 .carbide .mmc-khub [data-slot='badge'] {
   border-radius: 9999px;
 }
@@ -312,7 +467,7 @@
 
 /* =============================
    BUTTON: ICON SIZE DEFAULT
-   ============================= */
+  ============================= */
 /* Default all button icons to 16px; :where() keeps specificity low so consumers can override */
 .carbide [data-slot='button'] svg {
   width: 16px;
@@ -321,7 +476,7 @@
 
 /* =============================
    BUTTON VARIANTS (LIGHT)
-   ============================= */
+  ============================= */
 .carbide [data-slot='button'][data-variant='default']:not([disabled]) {
   background-color: var(--primary);
   color: var(--primary-foreground);
@@ -457,7 +612,7 @@
 
 /* =============================
    BUTTON VARIANTS (DARK)
-   ============================= */
+  ============================= */
 .carbide.dark [data-slot='button'][data-variant='default']:not([disabled]) {
   background-color: var(--primary);
   color: var(--primary-foreground);
@@ -514,7 +669,7 @@
 
 /* =============================
    INPUT
-   ============================= */
+  ============================= */
 .carbide [data-slot='input'] {
   background-color: var(--bg-input);
   border-color: var(--border-input);
@@ -575,7 +730,7 @@
 
 /* =============================
    SELECT
-   ============================= */
+  ============================= */
 .carbide [data-slot='select-trigger'] {
   background-color: var(--bg-input);
   border-color: var(--border-input);
@@ -648,7 +803,7 @@
 
 /* =============================
    DROPDOWN MENU
-   ============================= */
+  ============================= */
 .carbide [data-slot='dropdown-menu-content'] {
   background-color: var(--popover);
   color: var(--popover-foreground);
@@ -736,7 +891,7 @@
 
 /* =============================
    TOOLTIP
-   ============================= */
+  ============================= */
 .carbide [data-slot='tooltip-content'] {
   background-color: var(--foreground);
   color: var(--background);
@@ -755,7 +910,7 @@
 
 /* =============================
    OVERLAYS & DIALOG/SHEET/DRAWER
-   ============================= */
+  ============================= */
 .carbide [data-slot='dialog-overlay'],
 .carbide [data-slot='sheet-overlay'],
 .carbide [data-slot='drawer-overlay'] {
@@ -838,7 +993,7 @@
 
 /* =============================
    TABLE
-   ============================= */
+  ============================= */
 .carbide [data-slot='table-wrapper'] {
   background-color: var(--card);
   color: var(--card-foreground);
@@ -852,7 +1007,7 @@
 
 /* =============================
    TABS
-   ============================= */
+  ============================= */
 .carbide [data-slot='tabs-list'][data-variant='default'] {
   background-color: var(--tablist-bg);
   color: var(--tablist-fg);
@@ -905,7 +1060,7 @@
 }
 /* =============================
    UTILITY OVERRIDES
-============================= */
+  ============================= */
 
 /*
   Force correct text color for destructive badges and elements using text-destructive-foreground.
@@ -932,7 +1087,7 @@
 
 /* =============================
    PROGRESS (SEMANTIC HOOK)
-   ============================= */
+  ============================= */
 .carbide [data-slot='progress'] {
   background-color: var(--surface-neutral);
 }
@@ -943,7 +1098,7 @@
 
 /* =============================
    ACCORDION
-   ============================= */
+  ============================= */
 .carbide [data-slot='accordion'] [data-slot='accordion-item'] {
   border-bottom: 1px solid var(--border);
 }
@@ -953,7 +1108,7 @@
 
 /* =============================
    POPOVER
-   ============================= */
+  ============================= */
 .carbide [data-slot='popover-content'] {
   background-color: var(--popover);
   color: var(--popover-foreground);
@@ -969,10 +1124,10 @@
 
 /* =============================
    SLIDER (SEMANTIC HOOK)
-   ============================= */
+  ============================= */
 /* =============================
    CHECKBOX (SEMANTIC HOOK)
-   ============================= */
+  ============================= */
 .carbide [data-slot='checkbox'] {
   border-color: var(--border-input) !important;
   background-color: var(--bg-input);
@@ -998,7 +1153,7 @@
 
 /* =============================
    RADIO GROUP ITEM
-   ============================= */
+  ============================= */
 .carbide [data-slot='radio-group-item'] {
   border-color: var(--border-input);
   background-color: var(--bg-input);
@@ -1023,7 +1178,7 @@
 
 /* =============================
    FORM CONTROL FOCUS + INVALID STATES
-   ============================= */
+  ============================= */
 .carbide [data-slot='checkbox']:focus-visible,
 .carbide [data-slot='radio-group-item']:focus-visible,
 .carbide [data-slot='switch']:focus-visible {
@@ -1046,7 +1201,7 @@
 
 /* =============================
    SWITCH (SEMANTIC HOOK)
-   ============================= */
+  ============================= */
 .carbide [data-slot='switch'] {
   border-color: transparent;
 }
@@ -1074,7 +1229,7 @@
 
 /* =============================
    CALENDAR (SEMANTIC HOOK)
-   ============================= */
+  ============================= */
 .carbide [data-slot='calendar'] {
   background-color: var(--card);
   color: var(--card-foreground);
@@ -1125,7 +1280,7 @@
 
 /* =============================
    DATA TABLE: ALIGNMENT BASELINE FIX
-   ============================= */
+  ============================= */
 /* Unify left-aligned body cells to the sortable-header baseline (0.25rem) */
 .carbide
   td.text-left[data-col-id]:not([data-col-id='select']):not(

package/package.json

@@ -1,6 +1,23 @@
 {
   "name": "@machinemetrics/mm-react-components",
-  "version": "0.2.3-1",
+  "version": "0.2.3-11",
+  "description": "Industrial-grade React components for manufacturing applications",
+  "keywords": [
+    "react",
+    "components",
+    "industrial",
+    "manufacturing",
+    "tailwind",
+    "shadcn"
+  ],
+  "homepage": "https://github.com/machinemetrics/mm-react-components#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/machinemetrics/mm-react-components.git"
+  },
+  "bugs": {
+    "url": "https://github.com/machinemetrics/mm-react-components/issues"
+  },
   "license": "MIT",
   "type": "module",
   "main": "dist/mm-react-components.umd.js",
@@ -12,19 +29,39 @@
       "import": "./dist/mm-react-components.es.js",
       "require": "./dist/mm-react-components.umd.js"
     },
-    "./styles": "./dist/index.css",
-    "./themes/base": "./dist/index.css",
+    "./styles": "./dist/lib/mm-react-components.css",
     "./themes/carbide": "./dist/themes/carbide.css",
-    "./themes/complete": "./dist/themes/complete.css",
-    "./tailwind.config": "./tailwind.config.export.js",
+    "./tailwind.config": "./dist/tailwind.base.config.js",
     "./docs/tailwind-setup": "./docs/TAILWIND_SETUP.md",
-    "./README": "./dist/README.md"
+    "./docs/getting-started": "./dist/docs/GETTING_STARTED.md",
+    "./README": "./dist/README.md",
+    "./migration/config": "./dist/scripts/chakra-to-shadcn-migrator/chakra-to-shadcn.config.json",
+    "./agent-docs": "./agent-docs/"
   },
   "engines": {
     "node": ">=20"
   },
+  "peerDependencies": {
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "tailwindcss": "^4.0.0",
+    "postcss": "^8.5.6",
+    "autoprefixer": "^10.0.0"
+  },
+  "peerDependenciesMeta": {
+    "tailwindcss": {
+      "optional": true
+    },
+    "postcss": {
+      "optional": true
+    },
+    "autoprefixer": {
+      "optional": true
+    }
+  },
   "bin": {
-    "chakra-to-shadcn": "scripts/chakra-to-shadcn-migrator/bin/chakra-to-shadcn.js"
+    "chakra-to-shadcn": "dist/scripts/chakra-to-shadcn-migrator/bin/chakra-to-shadcn.js",
+    "mm-init": "dist/scripts/npx-init.cjs"
   },
   "scripts": {
     "build": "vite build --mode production && tsc --project tsconfig.build.json",
@@ -64,7 +101,10 @@
     "@dnd-kit/modifiers": "9.0.0",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",
+    "@hookform/resolvers": "^5.2.2",
     "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-dialog": "^1.1.15",
@@ -74,6 +114,7 @@
     "@radix-ui/react-progress": "^1.1.7",
     "@radix-ui/react-radio-group": "^1.3.8",
     "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slider": "^1.3.6",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-switch": "^1.2.6",
@@ -86,17 +127,23 @@
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.544.0",
+    "next-themes": "^0.4.6",
     "react": "^19.1.1",
     "react-day-picker": "^9.11.0",
     "react-dom": "^19.1.1",
     "react-dropzone": "14.3.8",
+    "react-hook-form": "^7.64.0",
+    "recharts": "^2.15.4",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1",
     "tw-animate-css": "^1.3.8",
-    "vaul": "^1.1.2"
+    "vaul": "^1.1.2",
+    "zod": "^4.1.12"
   },
   "devDependencies": {
     "@eslint/js": "^9.33.0",
     "@playwright/test": "^1.55.0",
+    "@tailwindcss/postcss": "^4.1.13",
     "@tailwindcss/vite": "^4.1.13",
     "@types/node": "^24.5.0",
     "@types/react": "^19.1.10",
@@ -105,6 +152,7 @@
     "@typescript-eslint/eslint-plugin": "^8.43.0",
     "@typescript-eslint/parser": "^8.43.0",
     "@vitejs/plugin-react": "^5.0.0",
+    "autoprefixer": "^10.4.21",
     "eslint": "^9.33.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-jsx-a11y": "^6.10.2",
@@ -115,7 +163,7 @@
     "globals": "^16.3.0",
     "playwright": "^1.55.0",
     "prettier": "^3.6.2",
-    "tailwindcss": "^4.1.13",
+    "tailwindcss": "^4.1.14",
     "terser": "^5.44.0",
     "tsx": "^4.19.2",
     "typescript": "~5.8.3",
@@ -124,8 +172,8 @@
   },
   "files": [
     "dist",
+    "agent-docs",
     "src/index.css",
-    "src/themes",
     "tailwind.config.export.js",
     "docs/TAILWIND_SETUP.md",
     "README.md",