@machinemetrics/mm-react-components 1.0.0-rc.0 → 1.0.0-rc.1

package/agent-docs/setup-reference.md

@@ -96,14 +96,15 @@ npx create-next-app@latest my-app --typescript
 cd my-app
 ```
 
-**Required dependencies**:
+**Dependencies** (zero-config: only the library):
 
 ```bash
 npm install @machinemetrics/mm-react-components
-npm install class-variance-authority clsx tailwind-merge @radix-ui/react-slot lucide-react
 ```
 
-**Next.js configuration**:
+Add `@import '@machinemetrics/mm-react-components/styles';` to your CSS and `className="carbide"` to the root. No Tailwind or PostCSS required. If you use Next.js with Tailwind already, the library still works with just the styles import.
+
+**Next.js configuration** (for transpilation):
 
 ```javascript
 // next.config.js
@@ -124,15 +125,15 @@ npx create-react-app my-app --template typescript
 cd my-app
 ```
 
-**Required dependencies**:
+**Dependencies** (zero-config: only the library):
 
 ```bash
 npm install @machinemetrics/mm-react-components
-npm install class-variance-authority clsx tailwind-merge @radix-ui/react-slot lucide-react
-npm install -D tailwindcss autoprefixer postcss
 ```
 
-**CRA configuration**:
+Add `/styles` import and `carbide` class. No Tailwind/PostCSS required unless you already use them.
+
+**CRA configuration** (only if you use Tailwind/PostCSS in CRA):
 
 ```javascript
 // craco.config.js (if using CRACO)
@@ -183,9 +184,7 @@ function CustomButton({ className, ...props }) {
 ### Theme Application
 
 ```tsx
-// App.tsx
-import '@machinemetrics/mm-react-components/themes/carbide';
-
+// App.tsx - ensure your CSS has: @import '@machinemetrics/mm-react-components/styles';
 function App() {
   return (
     <div className="carbide">
@@ -202,8 +201,8 @@ function App() {
 | Error                                                                   | Cause                   | Solution                                          |
 | ----------------------------------------------------------------------- | ----------------------- | ------------------------------------------------- |
 | `Module not found: Can't resolve '@machinemetrics/mm-react-components'` | Package not installed   | `npm install @machinemetrics/mm-react-components` |
-| `Cannot find module 'tailwindcss'`                                      | Tailwind not installed  | `npm install -D tailwindcss`                      |
-| `PostCSS plugin tailwindcss requires Tailwind CSS`                      | Tailwind config missing | Create `tailwind.config.js`                       |
+| `Cannot find module 'tailwindcss'`                                      | Only if not using /styles | Use `@import '.../styles'` (zero-config) or install Tailwind |
+| `PostCSS plugin tailwindcss requires Tailwind CSS`                      | Only if using Tailwind   | Use `/styles` for zero-config, or add `tailwind.config.js`  |
 | `Cannot resolve dependency 'lucide-react'`                              | Icons package missing   | `npm install lucide-react`                        |
 | `Cannot find module 'clsx'`                                             | Utility missing         | `npm install clsx`                                |
 
@@ -230,19 +229,19 @@ function App() {
 ### 1. Dependency Check
 
 ```bash
-# Check if all dependencies are installed
+# Check if the library is installed (zero-config: only this + React needed)
 npm list @machinemetrics/mm-react-components
-npm list tailwindcss
-npm list lucide-react
+# tailwindcss / lucide-react only if you use them separately
 ```
 
-### 2. Configuration Check
+### 2. Configuration Check (zero-config)
 
 ```bash
-# Verify configuration files exist
-ls -la tailwind.config.js
-ls -la postcss.config.js
-ls -la src/index.css
+# Verify CSS imports the library styles
+grep -r "mm-react-components/styles" src/
+
+# Root element should have className="carbide"
+# No tailwind.config.js or postcss.config.js required when using /styles
 ```
 
 ### 3. Import Test

package/dist/README.md

@@ -44,7 +44,7 @@ npm install @machinemetrics/mm-react-components
 
 **Automated Tools:**
 
-- ✅ Init script: `npx @machinemetrics/mm-react-components init`
+- ✅ Init script: `npx @machinemetrics/mm-react-components mm-init`
 - ✅ Migration script: `npx @machinemetrics/mm-react-components chakra-to-shadcn`
 - ✅ 98% automation rate for Chakra UI conversion
 - ✅ Zero-config setup option (no build tools needed!)
@@ -55,23 +55,18 @@ npm install @machinemetrics/mm-react-components
 
 ### 🚀 Automated Setup (Recommended)
 
-The fastest way to get started:
+The fastest way to get started (from your React project root):
 
 ```bash
-# Install the package
-npm install @machinemetrics/mm-react-components
-
-# Run the automated setup
-npx @machinemetrics/mm-react-components/setup
+npx @machinemetrics/mm-react-components mm-init
 ```
 
 This will automatically:
 
-- ✅ Copy Tailwind configuration
-- ✅ Create PostCSS configuration
-- ✅ Set up the complete theme
-- ✅ Create an example component
-- ✅ Generate all necessary files
+- ✅ Install the component library
+- ✅ Add pre-compiled CSS import to your `index.css`
+- ✅ Create example components
+- ✅ Optionally install the Carbide AI skill and offer Chakra UI migration if detected
 
 ### 📋 Manual Setup
 
@@ -89,19 +84,7 @@ npm install @machinemetrics/mm-react-components
 npm install -D tailwindcss postcss autoprefixer
 ```
 
-#### 2. (Optional) Configure Tailwind CSS
-
-> 💡 Skip this step if using `/styles` - Tailwind configuration is not needed!
-
-**Only if using `/themes/carbide`:**
-
-```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 Styles
+#### 2. Import Styles
 
 Import the complete styles including Tailwind CSS, base styles, and Carbide theme:
 
@@ -120,7 +103,7 @@ document.documentElement.classList.add('carbide');
 - ✅ Dark mode support
 - ✅ Animations and utilities
 
-#### 4. Use Components
+#### 3. Use Components
 
 ```tsx
 import { Button, Input } from '@machinemetrics/mm-react-components';
@@ -146,7 +129,6 @@ function App() {
 **For Developers:**
 
 - [Getting Started Guide](./docs/GETTING_STARTED.md) - Complete setup guide
-- [Tailwind Setup Guide](./docs/TAILWIND_SETUP.md) - Detailed configuration
 - [Chakra Migration Guide](./docs/CHAKRA_MIGRATION_GUIDE.md) - Detailed migration reference
 - [Component Mapping Summary](./docs/COMPONENT_MAPPING_SUMMARY.md) - All 83 component mappings
 

package/dist/components/ui/button-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EACL,WAAW,EACX,oBAAoB,EACpB,mBAAmB,GACpB,MAAM,kCAAkC,CAAC;AAG1C,QAAA,MAAM,eAAe;;gDAWnB,CAAC;AAIH,OAAO,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EACL,WAAW,EACX,oBAAoB,EACpB,mBAAmB,GACpB,MAAM,kCAAkC,CAAC;AAG1C,QAAA,MAAM,eAAe;;gDAKnB,CAAC;AAIH,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/components/ui/card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/ui/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EACL,UAAU,EACV,UAAU,EACV,SAAS,EACT,UAAU,EACV,eAAe,EACf,WAAW,GACZ,MAAM,0BAA0B,CAAC;AAGlC,QAAA,MAAM,IAAI,kKAOR,CAAC;AAIH,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/ui/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EACL,UAAU,EACV,UAAU,EACV,SAAS,EACT,UAAU,EACV,eAAe,EACf,WAAW,GACZ,MAAM,0BAA0B,CAAC;AAGlC,QAAA,MAAM,IAAI,kKAKR,CAAC;AAIH,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/components/ui/code-preview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"code-preview.d.ts","sourceRoot":"","sources":["../../../src/components/ui/code-preview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,uBAAuB,MAAM,6BAA6B,CAAC;AA6ElE,MAAM,WAAW,gBAAgB;IAC/B;;;;;;OAMG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC,CAAC,CAAC,CAAC;IACjE;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,WAAW,yFAoQhB,CAAC;AAIF,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"code-preview.d.ts","sourceRoot":"","sources":["../../../src/components/ui/code-preview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,uBAAuB,MAAM,6BAA6B,CAAC;AA6ElE,MAAM,WAAW,gBAAgB;IAC/B;;;;;;OAMG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC,CAAC,CAAC,CAAC;IACjE;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,WAAW,yFAiQhB,CAAC;AAIF,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/ui/hover-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hover-card.d.ts","sourceRoot":"","sources":["../../../src/components/ui/hover-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAG7E,QAAA,MAAM,gBAAgB,sLAWpB,CAAC;AAIH,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"hover-card.d.ts","sourceRoot":"","sources":["../../../src/components/ui/hover-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAG7E,QAAA,MAAM,gBAAgB,sLAOpB,CAAC;AAIH,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/ui/menubar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menubar.d.ts","sourceRoot":"","sources":["../../../src/components/ui/menubar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EACL,aAAa,EACb,WAAW,EACX,cAAc,EACd,cAAc,EACd,YAAY,EACZ,gBAAgB,EAChB,YAAY,EACZ,WAAW,EACX,eAAe,EACf,mBAAmB,EACnB,iBAAiB,EACjB,gBAAgB,EAChB,UAAU,EACV,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,6BAA6B,CAAC;AAGrC,QAAA,MAAM,OAAO,0KAWX,CAAC;AAIH,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"menubar.d.ts","sourceRoot":"","sources":["../../../src/components/ui/menubar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EACL,aAAa,EACb,WAAW,EACX,cAAc,EACd,cAAc,EACd,YAAY,EACZ,gBAAgB,EAChB,YAAY,EACZ,WAAW,EACX,eAAe,EACf,mBAAmB,EACnB,iBAAiB,EACjB,gBAAgB,EAChB,UAAU,EACV,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,6BAA6B,CAAC;AAGrC,QAAA,MAAM,OAAO,0KAKX,CAAC;AAIH,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/cursor-skill/mm-carbide/SKILL.md

@@ -24,6 +24,10 @@ description: Generate UIs and widgets with Carbide and MachineMetrics React Comp
 - Widgets must be fully responsive and respect content containment (no overflow).
 - Only use data explicitly provided; never hallucinate or use placeholder data. Adapt to available data without asking for more.
 
+## Setup, init, and migration
+
+For **project setup**, **initialization** (`mm-init`), **Chakra UI migration**, or the **full documentation index**, use the package’s **agent-docs** (shipped with the package). When the package is installed: `node_modules/@machinemetrics/mm-react-components/agent-docs/`. Start with **agent-documentation-reference.md** for the index; use **ai-agent-init-guide.md** for setup and **ai-agent-guide.md** (and chakra-migration-*) for migration.
+
 ## Version check while using
 
 When using this skill, if you have terminal/tool access, you may run `npx @machinemetrics/mm-react-components mm-install-skill` once (e.g. at the start of a UI task or when the user asks about updates) to ensure the installed skill matches the package version; the command reports "Already up to date" or updates the skill. If the user is not on Cursor, they can pass `--target=copilot`, `--target=claude`, or `--target=gemini` to install for VS Code/Copilot, Claude Code, or Gemini CLI. Do not run it on every message—once per session or when relevant is enough.

package/dist/docs/GETTING_STARTED.md

@@ -7,67 +7,50 @@ This guide will help you get up and running with MM React Components in your app
 The fastest way to get started is with our automated setup:
 
 ```bash
-# Install the package
-npm install @machinemetrics/mm-react-components
-
-# Run the automated setup
-npx @machinemetrics/mm-react-components/setup
+# From your React project root, run:
+npx @machinemetrics/mm-react-components mm-init
 ```
 
 This will:
 
-- ✅ Copy the Tailwind configuration
-- ✅ Create PostCSS configuration
-- ✅ Set up the complete theme
-- ✅ Create an example component
-- ✅ Generate all necessary files
+- ✅ Install the component library
+- ✅ Add pre-compiled CSS import to your `index.css`
+- ✅ Create example components
+- ✅ Optionally install the Carbide AI skill and offer Chakra UI migration if detected
 
 ## 📋 Manual Setup
 
-If you prefer to set up manually:
+If you prefer to set up manually (no Tailwind or PostCSS required):
 
-### 1. Install Dependencies
+### 1. Install the library
 
 ```bash
-npm install @machinemetrics/mm-react-components tailwindcss postcss autoprefixer
+npm install @machinemetrics/mm-react-components
 ```
 
-### 2. Configure Tailwind CSS
+### 2. Import styles
 
-```bash
-cp node_modules/@machinemetrics/mm-react-components/tailwind.config.export.js tailwind.config.js
-```
-
-### 3. Create PostCSS Configuration
-
-```javascript
-// postcss.config.js
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};
-```
-
-### 4. Import Styles
+Add to your main CSS file (e.g. `src/index.css`):
 
 ```css
-/* src/index.css or your main CSS file */
 @import '@machinemetrics/mm-react-components/styles';
 ```
 
-**What's included (118 KB, 18 KB gzipped):**
+### 3. Activate the Carbide theme
+
+Add the `carbide` class to your root element (e.g. in `index.html` or your root component):
 
-- ✅ Tailwind CSS utilities (fully compiled for all component classes)
-- ✅ Carbide theme variables and component overrides
-- ✅ All component styles including focus states, rings, borders
-- ✅ Dark mode support
-- ✅ Custom animations
+```html
+<div class="carbide">
+  <!-- your app -->
+</div>
+```
 
-**Note:** The `/styles` export maps to `dist/lib/mm-react-components.css` in the package.
+Or in JS: `document.documentElement.classList.add('carbide');`
 
-### 5. Use Components
+**What's included in `/styles` (118 KB, 18 KB gzipped):** Tailwind utilities (compiled), Carbide theme, component styles, dark mode, animations. No Tailwind or PostCSS required.
+
+### 4. Use components
 
 ```tsx
 import { Button, Input, Badge } from '@machinemetrics/mm-react-components';
@@ -182,12 +165,8 @@ import {
 // CSS imports
 import '@machinemetrics/mm-react-components/styles';
 
-// Configuration
-import tailwindConfig from '@machinemetrics/mm-react-components/tailwind.config';
-
 // Documentation
 import '@machinemetrics/mm-react-components/README';
-import '@machinemetrics/mm-react-components/docs/tailwind-setup';
 ```
 
 ## 🎯 Common Use Cases
@@ -276,7 +255,6 @@ function MachineForm() {
 ## 📚 Additional Resources
 
 - [Complete API Reference](./API.md)
-- [Tailwind Setup Guide](./TAILWIND_SETUP.md)
 - [Component Examples](./EXAMPLES.md)
 - [Theme Customization](./THEMES.md)