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

package/README.md

@@ -19,30 +19,71 @@ npm install @machinemetrics/mm-react-components
 
 ## Quick Start
 
-### 1. Install Dependencies
+### 🚀 Automated Setup (Recommended)
+
+The fastest way to get started:
 
 ```bash
-npm install @machinemetrics/mm-react-components tailwindcss postcss autoprefixer
+# Install the package
+npm install @machinemetrics/mm-react-components
+
+# Run the automated setup
+npx @machinemetrics/mm-react-components/setup
 ```
 
-### 2. Configure Tailwind CSS
+This will automatically:
+
+- ✅ Copy Tailwind configuration
+- ✅ Create PostCSS configuration
+- ✅ Set up the complete theme
+- ✅ Create an example component
+- ✅ Generate all necessary files
+
+### 📋 Manual Setup
+
+If you prefer manual setup:
 
-Copy the Tailwind configuration to your project:
+#### 1. Install Dependencies
+
+```bash
+npm install @machinemetrics/mm-react-components tailwindcss postcss autoprefixer
+```
+
+#### 2. Configure Tailwind CSS
 
 ```bash
 cp node_modules/@machinemetrics/mm-react-components/tailwind.config.export.js tailwind.config.js
 ```
 
-### 3. Import Theme CSS
+Note: The exported config is the main config (no preview-only utilities). The preview app in this repo uses a separate `tailwind.preview.config.js` that imports the main config and adds preview utilities.
+
+#### 3. Import Theme (Recommended: JS imports)
+
+Use app-level JavaScript/TypeScript imports so bundlers resolve package subpaths consistently and you can toggle themes at runtime:
+
+```ts
+// In your main entry (e.g., src/main.tsx)
+import '@machinemetrics/mm-react-components/styles';
+import '@machinemetrics/mm-react-components/themes/carbide';
+document.documentElement.classList.add('carbide');
+```
+
+Alternatively, you can import the complete theme in CSS:
 
 ```css
-/* In your main CSS file */
-@import '@machinemetrics/mm-react-components/themes/base';
-@import '@machinemetrics/mm-react-components/themes/carbide';
-@import 'tailwindcss';
+@import '@machinemetrics/mm-react-components/themes/complete';
 ```
 
-### 4. Use Components
+**What's included:**
+
+- ✅ Tailwind CSS reset
+- ✅ Base theme variables (OKLCH color system)
+- ✅ Carbide industrial theme
+- ✅ All component styles
+- ✅ Dark mode support
+- ✅ Animations and utilities
+
+#### 4. Use Components
 
 ```tsx
 import { Button, Input } from '@machinemetrics/mm-react-components';
@@ -57,9 +98,11 @@ function App() {
 }
 ```
 
-### 5. Complete Setup Guide
+### 📚 Documentation
 
-For detailed setup instructions, see the [Tailwind Setup Guide](./docs/TAILWIND_SETUP.md).
+- [Getting Started Guide](./docs/GETTING_STARTED.md) - Complete setup guide
+- [Tailwind Setup Guide](./docs/TAILWIND_SETUP.md) - Detailed configuration
+- [Quick Start Template](./templates/quick-start.html) - Live demo
 
 ## Theme System
 
@@ -81,18 +124,23 @@ The component library includes a comprehensive theme system with two main themes
 
 ### Using Themes
 
-#### Option 1: Import CSS Files Directly
+#### Option 1: JS Imports (Recommended)
 
-```tsx
-// In your main.tsx or App.tsx
-import '@machinemetrics/mm-react-components/themes/base';
+```ts
+import '@machinemetrics/mm-react-components/styles';
 import '@machinemetrics/mm-react-components/themes/carbide';
-
-// Add carbide class to activate Carbide theme
 document.documentElement.classList.add('carbide');
 ```
 
-#### Option 2: Use Theme Utilities
+#### Option 2: Manual Theme Import
+
+```css
+/* Import themes separately for more control */
+@import '@machinemetrics/mm-react-components/themes/base';
+@import '@machinemetrics/mm-react-components/themes/carbide';
+```
+
+#### Option 3: Use Theme Utilities
 
 ```tsx
 import {
@@ -111,14 +159,6 @@ toggleDarkMode();
 const isCarbideActive = isCarbideThemeActive();
 ```
 
-#### Option 3: Manual CSS Import
-
-```css
-/* In your CSS file */
-@import '@machinemetrics/mm-react-components/themes/base';
-@import '@machinemetrics/mm-react-components/themes/carbide';
-```
-
 ### Theme Classes
 
 The theme system uses CSS classes for activation:
@@ -193,16 +233,33 @@ import { Input } from '@machinemetrics/mm-react-components';
 
 ## Styling
 
-The component library uses Tailwind CSS. Make sure to include the styles in your application:
+The component library uses Tailwind CSS with a complete theme system. The easiest way to get started is with the complete theme:
 
-```tsx
-import '@machinemetrics/mm-react-components/styles';
+```css
+/* Recommended: One import gets everything */
+@import '@machinemetrics/mm-react-components/themes/complete';
 ```
 
-If you're using Tailwind CSS in your project, you can also import the component styles directly:
+This includes:
+
+- Tailwind CSS reset and base styles
+- OKLCH color system with dark mode support
+- Carbide industrial theme
+- All component styles and animations
+
+### Alternative Import Methods
 
 ```css
-@import '@machinemetrics/mm-react-components/styles';
+/* Import base theme only */
+@import '@machinemetrics/mm-react-components/themes/base';
+
+/* Import Carbide theme for industrial styling */
+@import '@machinemetrics/mm-react-components/themes/carbide';
+```
+
+```tsx
+// Import in JavaScript/TypeScript
+import '@machinemetrics/mm-react-components/themes/complete';
 ```
 
 ## TypeScript Support

package/dist/App.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"AAwEA,iBAAS,GAAG,4CAmPX;AAED,eAAe,GAAG,CAAC"}
+{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"AAsEA,iBAAS,GAAG,4CAmPX;AAED,eAAe,GAAG,CAAC"}

package/dist/README.md

@@ -0,0 +1,303 @@
+# @machinemetrics/mm-react-components
+
+A comprehensive React component library designed specifically for MachineMetrics industrial and manufacturing applications.
+
+## Features
+
+- 🏭 **Industrial-Focused**: Components designed for manufacturing and industrial environments
+- 🎨 **Modern Design**: Built on shadcn/ui with Tailwind CSS for consistent, accessible UI
+- 📦 **Tree-Shakable**: ES modules with full tree-shaking support
+- 🔧 **TypeScript**: Full TypeScript support with comprehensive type definitions
+- ♿ **Accessible**: WCAG 2.1 AA compliant components
+- 🚀 **Performance**: Optimized for real-time data display and monitoring
+
+## Installation
+
+```bash
+npm install @machinemetrics/mm-react-components
+```
+
+## Quick Start
+
+### 🚀 Automated Setup (Recommended)
+
+The fastest way to get started:
+
+```bash
+# Install the package
+npm install @machinemetrics/mm-react-components
+
+# Run the automated setup
+npx @machinemetrics/mm-react-components/setup
+```
+
+This will automatically:
+
+- ✅ Copy Tailwind configuration
+- ✅ Create PostCSS configuration
+- ✅ Set up the complete theme
+- ✅ Create an example component
+- ✅ Generate all necessary files
+
+### 📋 Manual Setup
+
+If you prefer manual setup:
+
+#### 1. Install Dependencies
+
+```bash
+npm install @machinemetrics/mm-react-components tailwindcss postcss autoprefixer
+```
+
+#### 2. Configure Tailwind CSS
+
+```bash
+cp node_modules/@machinemetrics/mm-react-components/tailwind.config.export.js tailwind.config.js
+```
+
+Note: The exported config is the main config (no preview-only utilities). The preview app in this repo uses a separate `tailwind.preview.config.js` that imports the main config and adds preview utilities.
+
+#### 3. Import Theme (Recommended: JS imports)
+
+Use app-level JavaScript/TypeScript imports so bundlers resolve package subpaths consistently and you can toggle themes at runtime:
+
+```ts
+// In your main entry (e.g., src/main.tsx)
+import '@machinemetrics/mm-react-components/styles';
+import '@machinemetrics/mm-react-components/themes/carbide';
+document.documentElement.classList.add('carbide');
+```
+
+Alternatively, you can import the complete theme in CSS:
+
+```css
+@import '@machinemetrics/mm-react-components/themes/complete';
+```
+
+**What's included:**
+
+- ✅ Tailwind CSS reset
+- ✅ Base theme variables (OKLCH color system)
+- ✅ Carbide industrial theme
+- ✅ All component styles
+- ✅ Dark mode support
+- ✅ Animations and utilities
+
+#### 4. Use Components
+
+```tsx
+import { Button, Input } from '@machinemetrics/mm-react-components';
+
+function App() {
+  return (
+    <div>
+      <Button variant="primary">Start Monitoring</Button>
+      <Input placeholder="Enter machine ID..." />
+    </div>
+  );
+}
+```
+
+### 📚 Documentation
+
+- [Getting Started Guide](./docs/GETTING_STARTED.md) - Complete setup guide
+- [Tailwind Setup Guide](./docs/TAILWIND_SETUP.md) - Detailed configuration
+- [Quick Start Template](./templates/quick-start.html) - Live demo
+
+## Theme System
+
+The component library includes a comprehensive theme system with two main themes:
+
+### Base Theme (OKLCH)
+
+- Modern OKLCH color space for better perceptual uniformity
+- Professional typography with Noto Sans and Inconsolata fonts
+- Complete dark mode support
+- Chart and sidebar color systems
+
+### Carbide Theme (Industrial)
+
+- Manufacturing-appropriate color palette
+- MachineMetrics brand colors (green, grey)
+- Enhanced component styling for industrial applications
+- Complete dark mode support
+
+### Using Themes
+
+#### Option 1: JS Imports (Recommended)
+
+```ts
+import '@machinemetrics/mm-react-components/styles';
+import '@machinemetrics/mm-react-components/themes/carbide';
+document.documentElement.classList.add('carbide');
+```
+
+#### Option 2: Manual Theme Import
+
+```css
+/* Import themes separately for more control */
+@import '@machinemetrics/mm-react-components/themes/base';
+@import '@machinemetrics/mm-react-components/themes/carbide';
+```
+
+#### Option 3: Use Theme Utilities
+
+```tsx
+import {
+  activateCarbideTheme,
+  toggleDarkMode,
+  isCarbideThemeActive,
+} from '@machinemetrics/mm-react-components';
+
+// Activate Carbide theme
+activateCarbideTheme();
+
+// Toggle dark mode
+toggleDarkMode();
+
+// Check theme status
+const isCarbideActive = isCarbideThemeActive();
+```
+
+### Theme Classes
+
+The theme system uses CSS classes for activation:
+
+- **Base theme**: Active by default
+- **Carbide theme**: Add `carbide` class to `<html>` element
+- **Dark mode**: Add `dark` class to `<html>` element
+
+```html
+<!-- Base theme -->
+<html>
+  <!-- Carbide theme -->
+  <html class="carbide">
+    <!-- Carbide theme + dark mode -->
+    <html class="carbide dark"></html>
+  </html>
+</html>
+```
+
+### Available Theme Utilities
+
+```tsx
+import {
+  // Carbide theme utilities
+  activateCarbideTheme,
+  deactivateCarbideTheme,
+  toggleCarbideTheme,
+  isCarbideThemeActive,
+
+  // Dark mode utilities
+  activateDarkMode,
+  deactivateDarkMode,
+  toggleDarkMode,
+  isDarkModeActive,
+} from '@machinemetrics/mm-react-components';
+```
+
+## Components
+
+### Button
+
+A versatile button component with multiple variants for different use cases.
+
+```tsx
+import { Button } from '@machinemetrics/mm-react-components';
+
+// Basic usage
+<Button>Default</Button>
+
+// Variants
+<Button variant="primary">Primary</Button>
+<Button variant="secondary">Secondary</Button>
+<Button variant="outline">Outline</Button>
+<Button variant="destructive">Destructive</Button>
+
+// Sizes
+<Button size="sm">Small</Button>
+<Button size="lg">Large</Button>
+```
+
+### Input
+
+Form input component with built-in validation states.
+
+```tsx
+import { Input } from '@machinemetrics/mm-react-components';
+
+<Input placeholder="Enter value..." />
+<Input type="email" placeholder="Email address" />
+<Input type="password" placeholder="Password" />
+```
+
+## Styling
+
+The component library uses Tailwind CSS with a complete theme system. The easiest way to get started is with the complete theme:
+
+```css
+/* Recommended: One import gets everything */
+@import '@machinemetrics/mm-react-components/themes/complete';
+```
+
+This includes:
+
+- Tailwind CSS reset and base styles
+- OKLCH color system with dark mode support
+- Carbide industrial theme
+- All component styles and animations
+
+### Alternative Import Methods
+
+```css
+/* Import base theme only */
+@import '@machinemetrics/mm-react-components/themes/base';
+
+/* Import Carbide theme for industrial styling */
+@import '@machinemetrics/mm-react-components/themes/carbide';
+```
+
+```tsx
+// Import in JavaScript/TypeScript
+import '@machinemetrics/mm-react-components/themes/complete';
+```
+
+## TypeScript Support
+
+This library is built with TypeScript and provides full type definitions:
+
+```tsx
+import { Button, type ButtonProps } from '@machinemetrics/mm-react-components';
+
+const CustomButton: React.FC<ButtonProps> = (props) => {
+  return <Button {...props} />;
+};
+```
+
+## Requirements
+
+- React 18.0.0 or higher
+- Node.js 20.0.0 or higher
+
+## Browser Support
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+## Contributing
+
+We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
+
+## License
+
+MIT License - see [LICENSE](LICENSE) file for details.
+
+## Support
+
+For support and questions, please contact the MachineMetrics development team.
+
+---
+
+Built with ❤️ by the MachineMetrics team for industrial applications.

package/dist/components/ui/button.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {