@machinemetrics/mm-react-components 0.2.3-0 → 0.2.3-10

package/dist/scripts/init.cjs

@@ -0,0 +1,207 @@
+#!/usr/bin/env node
+
+/**
+ * MM React Components - Zero-Config Init Script
+ *
+ * Simple initialization script for the MachineMetrics React Components library
+ * Uses the zero-config approach with pre-compiled CSS (no build tools needed)
+ */
+
+/* eslint-disable no-undef */
+
+const { execSync } = require('child_process');
+const fs = require('fs');
+const path = require('path');
+const readline = require('readline');
+
+// Colors for console output
+const colors = {
+  reset: '\x1b[0m',
+  bright: '\x1b[1m',
+  green: '\x1b[32m',
+  blue: '\x1b[34m',
+  cyan: '\x1b[36m',
+  yellow: '\x1b[33m',
+};
+
+function log(message, color = 'reset') {
+  console.log(`${colors[color]}${message}${colors.reset}`);
+}
+
+function detectChakraUI() {
+  const packageJsonPath = path.join(process.cwd(), 'package.json');
+  if (!fs.existsSync(packageJsonPath)) {
+    return false;
+  }
+
+  const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+  const deps = { ...packageJson.dependencies, ...packageJson.devDependencies };
+
+  return (
+    deps['@chakra-ui/react'] ||
+    deps['@chakra-ui/core'] ||
+    deps['@chakra-ui/system']
+  );
+}
+
+function askQuestion(question) {
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout,
+  });
+
+  return new Promise((resolve) => {
+    rl.question(question, (answer) => {
+      rl.close();
+      resolve(answer);
+    });
+  });
+}
+
+async function main() {
+  log('🚀 MM React Components - Zero-Config Setup', 'bright');
+  log(
+    'Installing MachineMetrics React Components with pre-compiled CSS...\n',
+    'blue',
+  );
+
+  try {
+    // Check for Chakra UI before installation
+    const hasChakra = detectChakraUI();
+
+    // Install the component library
+    log('📦 Installing MM React Components...', 'cyan');
+    execSync('npm install @machinemetrics/mm-react-components@beta', {
+      stdio: 'inherit',
+    });
+    log('✅ MM React Components installed', 'green');
+
+    log('\n💡 Zero-config mode: No build tools needed!', 'yellow');
+    log('   Using pre-compiled CSS (118 KB, 18 KB gzipped)\n', 'cyan');
+
+    // Create simple CSS import (zero-config approach)
+    const srcPath = path.join(process.cwd(), 'src');
+    const indexCssPath = path.join(srcPath, 'index.css');
+
+    // Ensure src directory exists
+    if (!fs.existsSync(srcPath)) {
+      fs.mkdirSync(srcPath, { recursive: true });
+      log('✅ Created src/ directory', 'green');
+    }
+
+    if (fs.existsSync(indexCssPath)) {
+      const cssContent = fs.readFileSync(indexCssPath, 'utf8');
+      if (!cssContent.includes('@machinemetrics/mm-react-components')) {
+        const newCssContent = `/* MM React Components - Pre-compiled CSS (zero-config) */
+@import '@machinemetrics/mm-react-components/styles';
+
+${cssContent}`;
+        fs.writeFileSync(indexCssPath, newCssContent);
+        log('✅ Added MM styles import to existing index.css', 'green');
+      } else {
+        log('✅ MM styles import already present in index.css', 'green');
+      }
+    } else {
+      const cssContent = `/* MM React Components - Pre-compiled CSS (zero-config) */
+@import '@machinemetrics/mm-react-components/styles';
+`;
+
+      fs.writeFileSync(indexCssPath, cssContent);
+      log('✅ Created index.css with MM styles import', 'green');
+    }
+
+    // Success message
+    log('\n🎉 Zero-Config Setup Complete!', 'green');
+    log('\n📚 Next steps:', 'bright');
+    log('  1. Add Carbide class to your root element:');
+    log('     document.documentElement.classList.add("carbide")', 'cyan');
+    log('  2. Import components:');
+    log(
+      '     import { Button, Input } from "@machinemetrics/mm-react-components"',
+      'cyan',
+    );
+    log('  3. Use components - everything is pre-styled and ready!');
+
+    log('\n✅ What you got:', 'bright');
+    log('   • Pre-compiled CSS with all Tailwind utilities');
+    log('   • Carbide industrial theme');
+    log('   • Dark mode support');
+    log('   • All component styles (focus, hover, etc.)');
+    log('   • Google Fonts included');
+
+    log('\n💡 No build tools needed!', 'yellow');
+    log('   This is a zero-config setup - everything just works!');
+
+    log('\n📖 Advanced setup (optional):', 'bright');
+    log('   Want custom Tailwind config? See docs/DEPENDENCIES.md');
+    log('   For theme-only CSS, see docs/CSS_EXPORTS.md');
+
+    // Offer Chakra migration if detected
+    if (hasChakra) {
+      log('\n🔄 Chakra UI Detected!', 'yellow');
+      log(
+        '   We can help you migrate from Chakra UI to MM React Components\n',
+        'cyan',
+      );
+
+      const answer = await askQuestion(
+        '   Would you like to run the Chakra UI migration now? (y/N): ',
+      );
+
+      if (answer.toLowerCase() === 'y' || answer.toLowerCase() === 'yes') {
+        log('\n🔄 Starting Chakra UI migration...', 'cyan');
+
+        const migrationScriptPath = path.join(
+          __dirname,
+          'chakra-to-shadcn-migrator',
+          'chakra-to-shadcn.js',
+        );
+
+        if (fs.existsSync(migrationScriptPath)) {
+          try {
+            execSync(`node "${migrationScriptPath}" --apply`, {
+              stdio: 'inherit',
+            });
+            log('\n✅ Chakra UI migration complete!', 'green');
+          } catch (error) {
+            log('\n⚠️  Migration encountered issues', 'yellow');
+            log(`   ${error.message}`, 'yellow');
+            log(
+              '   You can run it manually: node scripts/chakra-to-shadcn-migrator/chakra-to-shadcn.js',
+              'cyan',
+            );
+          }
+        } else {
+          log(
+            '\n⚠️  Migration script not found at expected location',
+            'yellow',
+          );
+          log(
+            '   Clone the repo to access migration tools: https://github.com/machinemetrics/mm-react-components',
+            'cyan',
+          );
+        }
+      } else {
+        log('\n   No problem! You can migrate later with:', 'cyan');
+        log(
+          '   node scripts/chakra-to-shadcn-migrator/chakra-to-shadcn.js --apply',
+          'cyan',
+        );
+      }
+    }
+
+    log('\n🚀 Happy coding!', 'cyan');
+  } catch (error) {
+    log(`❌ Setup failed: ${error.message}`, 'red');
+    process.exit(1);
+  }
+}
+
+if (require.main === module) {
+  main().catch((error) => {
+    log(`❌ Setup failed: ${error.message}`, 'red');
+    process.exit(1);
+  });
+}
+
+module.exports = { main };

package/dist/tailwind.base.config.js

@@ -0,0 +1,88 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: 'class',
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {
+      colors: {
+        background: 'var(--background)',
+        foreground: 'var(--foreground)',
+        card: 'var(--card)',
+        'card-foreground': 'var(--card-foreground)',
+        popover: 'var(--popover)',
+        'popover-foreground': 'var(--popover-foreground)',
+        primary: 'var(--primary)',
+        'primary-foreground': 'var(--primary-foreground)',
+        secondary: 'var(--secondary)',
+        'secondary-foreground': 'var(--secondary-foreground)',
+        muted: 'var(--muted)',
+        'muted-foreground': 'var(--muted-foreground)',
+        accent: 'var(--accent)',
+        'accent-foreground': 'var(--accent-foreground)',
+        destructive: 'var(--destructive)',
+        border: 'var(--border)',
+        input: 'var(--input)',
+        'bg-input': 'var(--bg-input)',
+        'border-input': 'var(--border-input)',
+        ring: 'var(--ring)',
+      },
+      borderRadius: {
+        sm: 'var(--radius-sm)',
+        md: 'var(--radius-md)',
+        lg: 'var(--radius-lg)',
+        xl: 'var(--radius-xl)',
+      },
+      fontFamily: {
+        sans: [
+          'Inter',
+          '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',
+        ],
+      },
+      fontWeight: {
+        normal: '400',
+        medium: '500',
+        semibold: '600',
+        bold: 'var(--font-weight-bold)',
+      },
+      keyframes: {
+        'collapsible-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-collapsible-content-height)' },
+        },
+        'collapsible-up': {
+          from: { height: 'var(--radix-collapsible-content-height)' },
+          to: { height: '0' },
+        },
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' },
+        },
+      },
+      animation: {
+        'collapsible-down':
+          'collapsible-down 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+        'collapsible-up': 'collapsible-up 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+        'accordion-down': 'accordion-down 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+        'accordion-up': 'accordion-up 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+      },
+    },
+  },
+  plugins: [],
+};

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(