@stachelock/ui 0.1.8 → 0.2.0

package/CUSTOMIZATION.md

@@ -0,0 +1,325 @@
+# Customizing Stachelock UI Design Tokens
+
+Stachelock UI now supports customizing design tokens (colors, spacing, typography, etc.) to match your project's design system while maintaining the `sl-` prefixed utility classes.
+
+## Overview
+
+The customization system allows you to:
+- Override default colors, spacing, shadows, and typography
+- Generate custom CSS variables and Tailwind configurations
+- Maintain the `sl-` prefix to avoid conflicts with your existing styles
+- Use both programmatic configuration and build-time generation
+
+## Quick Start
+
+### 1. Create a Custom Tokens File
+
+Create a JSON file (e.g., `my-tokens.json`) with your custom design tokens:
+
+```json
+{
+  "colors": {
+    "primary": {
+      "50": "#f0f9ff",
+      "100": "#e0f2fe",
+      "500": "#0ea5e9",
+      "600": "#0284c7",
+      "700": "#0369a1"
+    },
+    "stachelock": {
+      "600": "#dc2626",
+      "700": "#b91c1c"
+    }
+  },
+  "spacing": {
+    "18": "4.5rem",
+    "22": "5.5rem"
+  }
+}
+```
+
+### 2. Generate Custom Configuration
+
+Use the CLI tool to generate custom CSS variables and Tailwind config:
+
+```bash
+# From your project directory
+npx @stachelock/ui generate-config ./my-tokens.json ./generated/
+```
+
+This will create:
+- `stachelock-ui-variables.css` - CSS custom properties
+- `stachelock-ui-tailwind.config.js` - Tailwind configuration
+- `stachelock-ui-tokens.json` - Merged tokens for reference
+
+### 3. Import and Use
+
+In your main CSS file:
+```css
+@import "./generated/stachelock-ui-variables.css";
+@import "@stachelock/ui/style.css";
+```
+
+In your `tailwind.config.js`:
+```javascript
+const stachelockConfig = require('./generated/stachelock-ui-tailwind.config.js');
+
+module.exports = {
+  content: ["./src/**/*.{vue,js,ts,jsx,tsx}"],
+  theme: {
+    extend: {
+      ...stachelockConfig.theme.extend
+    }
+  }
+};
+```
+
+## Programmatic Configuration
+
+### Using the Vue Plugin
+
+```typescript
+import { createApp } from 'vue';
+import { StachelockUI } from '@stachelock/ui';
+import App from './App.vue';
+
+const app = createApp(App);
+
+app.use(StachelockUI, {
+  designTokens: {
+    colors: {
+      primary: {
+        600: '#0ea5e9',
+        700: '#0369a1'
+      }
+    }
+  }
+});
+
+app.mount('#app');
+```
+
+### Advanced Plugin Usage
+
+```typescript
+import { StachelockUI } from '@stachelock/ui';
+
+// Configure after installation
+StachelockUI.configure({
+  designTokens: {
+    colors: {
+      brand: {
+        500: '#ff6b6b',
+        600: '#ee5a52'
+      }
+    }
+  },
+  prefix: 'sl-', // Keep default prefix
+  injectCSS: true // Automatically inject CSS variables
+});
+
+// Get current design tokens
+const tokens = StachelockUI.getDesignTokens();
+
+// Generate custom CSS
+const css = StachelockUI.generateCSS();
+```
+
+## Design Token Structure
+
+### Colors
+```typescript
+colors: {
+  primary: {
+    50: '#f0f9ff',    // Lightest
+    100: '#e0f2fe',
+    200: '#bae6fd',
+    300: '#7dd3fc',
+    400: '#38bdf8',
+    500: '#0ea5e9',   // Base
+    600: '#0284c7',
+    700: '#0369a1',
+    800: '#075985',
+    900: '#0c4a6e'    // Darkest
+  }
+}
+```
+
+### Spacing
+```typescript
+spacing: {
+  '0': '0',
+  '1': '0.25rem',
+  '2': '0.5rem',
+  '4': '1rem',
+  '8': '2rem',
+  '16': '4rem',
+  '32': '8rem',
+  '64': '16rem'
+}
+```
+
+### Border Radius
+```typescript
+borderRadius: {
+  'none': '0',
+  'sm': '0.125rem',
+  'DEFAULT': '0.25rem',
+  'md': '0.375rem',
+  'lg': '0.5rem',
+  'xl': '0.75rem',
+  '2xl': '1rem',
+  'full': '9999px'
+}
+```
+
+### Shadows
+```typescript
+shadows: {
+  'sm': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+  'DEFAULT': '0 1px 3px 0 rgb(0 0 0 / 0.1)',
+  'md': '0 4px 6px -1px rgb(0 0 0 / 0.1)',
+  'lg': '0 10px 15px -3px rgb(0 0 0 / 0.1)',
+  'xl': '0 20px 25px -5px rgb(0 0 0 / 0.1)'
+}
+```
+
+### Typography
+```typescript
+typography: {
+  fontFamily: {
+    sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
+    display: ['Poppins', 'ui-sans-serif', 'system-ui', 'sans-serif'],
+    mono: ['JetBrains Mono', 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'monospace']
+  },
+  fontSize: {
+    'xs': '0.75rem',
+    'sm': '0.875rem',
+    'base': '1rem',
+    'lg': '1.125rem',
+    'xl': '1.25rem',
+    '2xl': '1.5rem',
+    '3xl': '1.875rem',
+    '4xl': '2.25rem'
+  }
+}
+```
+
+### Breakpoints
+```typescript
+breakpoints: {
+  'sm': '640px',
+  'md': '768px',
+  'lg': '1024px',
+  'xl': '1280px',
+  '2xl': '1536px',
+  '3xl': '1600px'
+}
+```
+
+## Generated CSS Variables
+
+The system generates CSS custom properties that you can use in your own CSS:
+
+```css
+:root {
+  --sl-color-primary-50: #f0f9ff;
+  --sl-color-primary-100: #e0f2fe;
+  --sl-color-primary-500: #0ea5e9;
+  --sl-color-primary-600: #0284c7;
+  --sl-color-primary-700: #0369a1;
+  
+  --sl-spacing-18: 4.5rem;
+  --sl-spacing-22: 5.5rem;
+  
+  --sl-border-radius-2xl: 1rem;
+  --sl-border-radius-3xl: 1.5rem;
+  
+  --sl-shadow-glow: 0 0 20px rgba(59, 130, 246, 0.5);
+  --sl-shadow-glow-lg: 0 0 40px rgba(59, 130, 246, 0.3);
+}
+```
+
+## Using Custom Tokens in Components
+
+### In Vue Templates
+```vue
+<template>
+  <div class="sl-bg-primary-500 sl-text-white sl-p-18 sl-rounded-2xl sl-shadow-glow">
+    Custom styled content
+  </div>
+</template>
+```
+
+### In CSS
+```css
+.my-custom-component {
+  background-color: var(--sl-color-primary-500);
+  padding: var(--sl-spacing-18);
+  border-radius: var(--sl-border-radius-2xl);
+  box-shadow: var(--sl-shadow-glow);
+}
+```
+
+## Migration from Previous Versions
+
+If you're upgrading from a previous version:
+
+1. **No breaking changes** - existing `sl-` classes continue to work
+2. **New customization options** - you can now override design tokens
+3. **Backward compatibility** - all existing functionality is preserved
+
+## Best Practices
+
+### 1. Token Naming
+- Use semantic names (e.g., `primary`, `secondary`, `accent`)
+- Follow the 50-900 scale for colors
+- Use consistent naming across your design system
+
+### 2. Color Selection
+- Ensure sufficient contrast for accessibility
+- Test colors in both light and dark modes
+- Consider using tools like [Coolors](https://coolors.co/) for color generation
+
+### 3. Spacing Scale
+- Use consistent spacing increments
+- Consider your design system's needs
+- Common scales: 4px (0.25rem), 8px (0.5rem), 16px (1rem)
+
+### 4. Typography
+- Choose fonts that complement your brand
+- Ensure good readability across devices
+- Consider loading performance for custom fonts
+
+## Troubleshooting
+
+### Common Issues
+
+**CSS variables not loading**
+- Check that the CSS file is imported before other styles
+- Verify the file path is correct
+- Ensure the build process completed successfully
+
+**Tailwind classes not working**
+- Verify the Tailwind config is properly merged
+- Check that content paths include your components
+- Ensure the prefix is set to `sl-`
+
+**Build errors**
+- Check that all required dependencies are installed
+- Verify the JSON syntax in your tokens file
+- Ensure the output directory is writable
+
+### Getting Help
+
+- Check the [main README](../README.md) for general usage
+- Review the [examples](../examples/) directory for sample configurations
+- Open an issue on GitHub for bugs or feature requests
+
+## Examples
+
+See the [examples](../examples/) directory for complete working examples:
+
+- `custom-tokens.json` - Sample token configuration
+- `vue-app/` - Complete Vue application with custom tokens
+- `react-app/` - Complete React application with custom tokens

package/dist/src/config/css-variables.d.ts

@@ -0,0 +1,5 @@
+import { StachelockUIDesignTokens } from './design-tokens';
+
+export declare function generateCSSVariables(tokens: StachelockUIDesignTokens): string;
+export declare function generateTailwindConfig(tokens: StachelockUIDesignTokens): string;
+//# sourceMappingURL=css-variables.d.ts.map

package/dist/src/config/css-variables.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-variables.d.ts","sourceRoot":"","sources":["../../../src/config/css-variables.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAC;AAEhE,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,wBAAwB,GAAG,MAAM,CA6E7E;AAED,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,wBAAwB,GAAG,MAAM,CA2E/E"}

package/dist/src/config/design-tokens.d.ts

@@ -0,0 +1,52 @@
+export interface StachelockUIDesignTokens {
+    colors?: {
+        primary?: {
+            50?: string;
+            100?: string;
+            200?: string;
+            300?: string;
+            400?: string;
+            500?: string;
+            600?: string;
+            700?: string;
+            800?: string;
+            900?: string;
+        };
+        stachelock?: {
+            50?: string;
+            100?: string;
+            200?: string;
+            300?: string;
+            400?: string;
+            500?: string;
+            600?: string;
+            700?: string;
+            800?: string;
+            900?: string;
+        };
+        [key: string]: any;
+    };
+    spacing?: {
+        [key: string]: string;
+    };
+    borderRadius?: {
+        [key: string]: string;
+    };
+    shadows?: {
+        [key: string]: string;
+    };
+    typography?: {
+        fontFamily?: {
+            [key: string]: string[];
+        };
+        fontSize?: {
+            [key: string]: string;
+        };
+    };
+    breakpoints?: {
+        [key: string]: string;
+    };
+}
+export declare const defaultDesignTokens: StachelockUIDesignTokens;
+export declare function mergeDesignTokens(customTokens: StachelockUIDesignTokens, defaults?: StachelockUIDesignTokens): StachelockUIDesignTokens;
+//# sourceMappingURL=design-tokens.d.ts.map

package/dist/src/config/design-tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-tokens.d.ts","sourceRoot":"","sources":["../../../src/config/design-tokens.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,wBAAwB;IACvC,MAAM,CAAC,EAAE;QACP,OAAO,CAAC,EAAE;YACR,EAAE,CAAC,EAAE,MAAM,CAAC;YACZ,GAAG,CAAC,EAAE,MAAM,CAAC;YACb,GAAG,CAAC,EAAE,MAAM,CAAC;YACb,GAAG,CAAC,EAAE,MAAM,CAAC;YACb,GAAG,CAAC,EAAE,MAAM,CAAC;YACb,GAAG,CAAC,EAAE,MAAM,CAAC;YACb,GAAG,CAAC,EAAE,MAAM,CAAC;YACb,GAAG,CAAC,EAAE,MAAM,CAAC;YACb,GAAG,CAAC,EAAE,MAAM,CAAC;YACb,GAAG,CAAC,EAAE,MAAM,CAAC;SACd,CAAC;QACF,UAAU,CAAC,EAAE;YACX,EAAE,CAAC,EAAE,MAAM,CAAC;YACZ,GAAG,CAAC,EAAE,MAAM,CAAC;YACb,GAAG,CAAC,EAAE,MAAM,CAAC;YACb,GAAG,CAAC,EAAE,MAAM,CAAC;YACb,GAAG,CAAC,EAAE,MAAM,CAAC;YACb,GAAG,CAAC,EAAE,MAAM,CAAC;YACb,GAAG,CAAC,EAAE,MAAM,CAAC;YACb,GAAG,CAAC,EAAE,MAAM,CAAC;YACb,GAAG,CAAC,EAAE,MAAM,CAAC;YACb,GAAG,CAAC,EAAE,MAAM,CAAC;SACd,CAAC;QACF,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACpB,CAAC;IACF,OAAO,CAAC,EAAE;QACR,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KACvB,CAAC;IACF,YAAY,CAAC,EAAE;QACb,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KACvB,CAAC;IACF,OAAO,CAAC,EAAE;QACR,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KACvB,CAAC;IACF,UAAU,CAAC,EAAE;QACX,UAAU,CAAC,EAAE;YACX,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;SACzB,CAAC;QACF,QAAQ,CAAC,EAAE;YACT,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;SACvB,CAAC;KACH,CAAC;IACF,WAAW,CAAC,EAAE;QACZ,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;KACvB,CAAC;CACH;AAED,eAAO,MAAM,mBAAmB,EAAE,wBAoGjC,CAAC;AAEF,wBAAgB,iBAAiB,CAC/B,YAAY,EAAE,wBAAwB,EACtC,QAAQ,GAAE,wBAA8C,GACvD,wBAAwB,CAoB1B"}

package/dist/src/config/index.d.ts

@@ -0,0 +1,3 @@
+export * from './css-variables';
+export * from './design-tokens';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/config/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/config/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC"}

package/dist/src/plugin/configure.d.ts

@@ -0,0 +1,28 @@
+import { App } from 'vue';
+import { StachelockUIDesignTokens } from '../config/design-tokens';
+
+export interface StachelockUIOptions {
+    designTokens?: StachelockUIDesignTokens;
+    prefix?: string;
+    injectCSS?: boolean;
+}
+export interface StachelockUIPlugin {
+    install: (app: App, options?: StachelockUIOptions) => void;
+    configure: (options: StachelockUIOptions) => void;
+    getDesignTokens: () => StachelockUIDesignTokens;
+    generateCSS: () => string;
+}
+declare class StachelockUIPluginImpl implements StachelockUIPlugin {
+    private designTokens;
+    private prefix;
+    private injectCSS;
+    constructor();
+    install(app: App, options?: StachelockUIOptions): void;
+    configure(options: StachelockUIOptions): void;
+    getDesignTokens(): StachelockUIDesignTokens;
+    generateCSS(): string;
+    private injectCSSVariables;
+}
+export declare const StachelockUI: StachelockUIPlugin;
+export { StachelockUIPluginImpl };
+//# sourceMappingURL=configure.d.ts.map

package/dist/src/plugin/configure.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"configure.d.ts","sourceRoot":"","sources":["../../../src/plugin/configure.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC/B,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AAIxE,MAAM,WAAW,mBAAmB;IAClC,YAAY,CAAC,EAAE,wBAAwB,CAAC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,OAAO,CAAC,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAC3D,SAAS,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAClD,eAAe,EAAE,MAAM,wBAAwB,CAAC;IAChD,WAAW,EAAE,MAAM,MAAM,CAAC;CAC3B;AAED,cAAM,sBAAuB,YAAW,kBAAkB;IACxD,OAAO,CAAC,YAAY,CAA2B;IAC/C,OAAO,CAAC,MAAM,CAAiB;IAC/B,OAAO,CAAC,SAAS,CAAiB;;IAQlC,OAAO,CAAC,GAAG,EAAE,GAAG,EAAE,OAAO,GAAE,mBAAwB;IAkBnD,SAAS,CAAC,OAAO,EAAE,mBAAmB;IActC,eAAe,IAAI,wBAAwB;IAI3C,WAAW,IAAI,MAAM;IAIrB,OAAO,CAAC,kBAAkB;CAe3B;AAGD,eAAO,MAAM,YAAY,EAAE,kBAAiD,CAAC;AAG7E,OAAO,EAAE,sBAAsB,EAAE,CAAC"}

package/dist/src/plugin/index.d.ts

@@ -0,0 +1,2 @@
+export * from './configure';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/plugin/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/plugin/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}

package/examples/custom-tokens.json

@@ -0,0 +1,70 @@
+{
+  "colors": {
+    "primary": {
+      "50": "#f0f9ff",
+      "100": "#e0f2fe",
+      "200": "#bae6fd",
+      "300": "#7dd3fc",
+      "400": "#38bdf8",
+      "500": "#0ea5e9",
+      "600": "#0284c7",
+      "700": "#0369a1",
+      "800": "#075985",
+      "900": "#0c4a6e"
+    },
+    "stachelock": {
+      "50": "#fef2f2",
+      "100": "#fee2e2",
+      "200": "#fecaca",
+      "300": "#fca5a5",
+      "400": "#f87171",
+      "500": "#ef4444",
+      "600": "#dc2626",
+      "700": "#b91c1c",
+      "800": "#991b1b",
+      "900": "#7f1d1d"
+    },
+    "accent": {
+      "50": "#fdf4ff",
+      "100": "#fae8ff",
+      "200": "#f5d0fe",
+      "300": "#f0abfc",
+      "400": "#e879f9",
+      "500": "#d946ef",
+      "600": "#c026d3",
+      "700": "#a21caf",
+      "800": "#86198f",
+      "900": "#701a75"
+    }
+  },
+  "spacing": {
+    "18": "4.5rem",
+    "22": "5.5rem",
+    "26": "6.5rem",
+    "30": "7.5rem"
+  },
+  "borderRadius": {
+    "2xl": "1rem",
+    "3xl": "1.5rem",
+    "4xl": "2rem"
+  },
+  "shadows": {
+    "glow": "0 0 20px rgba(59, 130, 246, 0.5)",
+    "glow-lg": "0 0 40px rgba(59, 130, 246, 0.3)"
+  },
+  "typography": {
+    "fontFamily": {
+      "display": ["Poppins", "ui-sans-serif", "system-ui", "sans-serif"],
+      "mono": ["JetBrains Mono", "ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "monospace"]
+    },
+    "fontSize": {
+      "2xs": "0.625rem",
+      "3xl": "1.875rem",
+      "4xl": "2.25rem"
+    }
+  },
+  "breakpoints": {
+    "3xl": "1600px",
+    "4xl": "1920px"
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stachelock/ui",
-  "version": "0.1.8",
+  "version": "0.2.0",
   "description": "A comprehensive Vue 3 UI component library built with Tailwind CSS",
   "type": "module",
   "main": "./dist/index.js",
@@ -13,6 +13,7 @@
     },
     "./style.css": "./dist/style.css",
     "./tailwind.config.js": "./dist/tailwind.config.js",
+    "./generate-config": "./scripts/generate-config.cjs",
     "./components/*": {
       "import": "./dist/components/*.js",
       "types": "./dist/components/*.d.ts"
@@ -37,8 +38,14 @@
   "files": [
     "dist",
     "tailwind.config.js",
-    "README.md"
+    "scripts",
+    "examples",
+    "README.md",
+    "CUSTOMIZATION.md"
   ],
+  "bin": {
+    "stachelock-ui": "./scripts/generate-config.cjs"
+  },
   "scripts": {
     "dev": "vite",
     "build": "vite build && npm run build:css",
@@ -57,7 +64,8 @@
     "prepack": "npm run build",
     "postpack": "rm -rf dist",
     "generate-indexes": "node scripts/generateRecursiveIndex.cjs",
-    "prebuild": "npm run generate-indexes"
+    "prebuild": "npm run generate-indexes",
+    "generate-config": "node scripts/generate-config.cjs"
   },
   "keywords": [
     "vue",

package/scripts/build-css.cjs

@@ -0,0 +1,29 @@
+const { execSync } = require('child_process');
+const fs = require('fs');
+const path = require('path');
+
+console.log('🔨 Building Tailwind CSS with sl- prefix...');
+
+try {
+  // Run Tailwind CLI to build the CSS
+  execSync('npx tailwindcss -i ./src/style.css -o ./dist/style.css --minify', { 
+    stdio: 'inherit',
+    cwd: process.cwd()
+  });
+  
+  console.log('✅ Tailwind CSS built successfully!');
+  
+  // Read the generated CSS to verify it contains the sl- prefixed utilities
+  const cssContent = fs.readFileSync('./dist/style.css', 'utf8');
+  
+  // Check if it contains some basic sl- prefixed utilities
+  if (cssContent.includes('.sl-bg-') || cssContent.includes('.sl-text-') || cssContent.includes('.sl-flex')) {
+    console.log('✅ CSS contains sl- prefixed Tailwind utilities');
+  } else {
+    console.log('⚠️  CSS may not contain expected sl- prefixed utilities');
+  }
+  
+} catch (error) {
+  console.error('❌ Error building Tailwind CSS:', error.message);
+  process.exit(1);
+}

package/scripts/generate-config.cjs

@@ -0,0 +1,83 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+
+console.log('🎨 Stachelock UI Config Generator');
+console.log('==================================\n');
+
+// Get command line arguments
+const args = process.argv.slice(2);
+const configFile = args[0];
+const outputDir = args[1] || './';
+
+if (!configFile) {
+  console.log('Usage: node generate-config.cjs <config-file> [output-dir]');
+  console.log('');
+  console.log('Example:');
+  console.log('  node generate-config.cjs ./my-tokens.json ./generated/');
+  console.log('');
+  console.log('The config file should contain design tokens in the StachelockUIDesignTokens format.');
+  console.log('See the documentation for the expected format.');
+  process.exit(1);
+}
+
+if (!fs.existsSync(configFile)) {
+  console.error(`❌ Config file not found: ${configFile}`);
+  process.exit(1);
+}
+
+try {
+  // Read and parse the config file
+  console.log(`📖 Reading config from: ${configFile}`);
+  const configContent = fs.readFileSync(configFile, 'utf8');
+  const customTokens = JSON.parse(configContent);
+  
+  // Import the required functions
+  const { mergeDesignTokens, defaultDesignTokens } = require('../dist/config/design-tokens.js');
+  const { generateCSSVariables, generateTailwindConfig } = require('../dist/config/css-variables.js');
+  
+  // Merge with default tokens
+  console.log('🔄 Merging with default design tokens...');
+  const mergedTokens = mergeDesignTokens(customTokens, defaultDesignTokens);
+  
+  // Generate CSS variables
+  console.log('🎨 Generating CSS variables...');
+  const cssVariables = generateCSSVariables(mergedTokens);
+  
+  // Generate Tailwind config
+  console.log('⚙️  Generating Tailwind config...');
+  const tailwindConfig = generateTailwindConfig(mergedTokens);
+  
+  // Ensure output directory exists
+  if (!fs.existsSync(outputDir)) {
+    fs.mkdirSync(outputDir, { recursive: true });
+  }
+  
+  // Write CSS variables file
+  const cssOutputPath = path.join(outputDir, 'stachelock-ui-variables.css');
+  fs.writeFileSync(cssOutputPath, cssVariables);
+  console.log(`✅ CSS variables written to: ${cssOutputPath}`);
+  
+  // Write Tailwind config file
+  const configOutputPath = path.join(outputDir, 'stachelock-ui-tailwind.config.js');
+  fs.writeFileSync(configOutputPath, tailwindConfig);
+  console.log(`✅ Tailwind config written to: ${configOutputPath}`);
+  
+  // Write merged tokens JSON for reference
+  const tokensOutputPath = path.join(outputDir, 'stachelock-ui-tokens.json');
+  fs.writeFileSync(tokensOutputPath, JSON.stringify(mergedTokens, null, 2));
+  console.log(`✅ Merged tokens written to: ${tokensOutputPath}`);
+  
+  console.log('\n🎉 Configuration generation complete!');
+  console.log('\nNext steps:');
+  console.log('1. Import the CSS variables in your main CSS file:');
+  console.log(`   @import "${cssOutputPath}";`);
+  console.log('2. Use the Tailwind config in your tailwind.config.js:');
+  console.log(`   const stachelockConfig = require("${configOutputPath}");`);
+  console.log('3. Merge it with your existing config as needed.');
+  
+} catch (error) {
+  console.error('❌ Error generating configuration:', error.message);
+  process.exit(1);
+}

package/scripts/generateRecursiveIndex.cjs

@@ -0,0 +1,251 @@
+/* eslint-env node */
+/* eslint-disable no-undef */
+const fs = require('fs');
+const path = require('path');
+
+// Function to convert to camelCase
+function toCamelCase(str) {
+  return str.replace(/[_-](.)/g, (_, group1) => group1.toUpperCase());
+}
+
+// Function to convert to PascalCase
+function toPascalCase(str) {
+  const camelCase = toCamelCase(str);
+  return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
+}
+
+// Function to generate export name for components
+function generateComponentExportName(fileName, directoryName) {
+  const cleanFileName = fileName.replace(/^Ui/, '').replace(/^Sl/, '');
+  const pascalFileName = toPascalCase(cleanFileName);
+  
+  // For base components, just return the clean name
+  if (directoryName === 'components') {
+    return pascalFileName;
+  }
+  
+  // For subdirectories, use a more intuitive naming
+  if (['layouts', 'inputs', 'calendars', 'forms'].includes(directoryName)) {
+    // Remove the 's' from the end and capitalize
+    const singularDirName = directoryName.slice(0, -1);
+    const pascalDirName = toPascalCase(singularDirName);
+    
+    // Special cases for better naming
+    if (singularDirName === 'layout') {
+      return pascalFileName; // Just use the component name for layouts
+    }
+    if (singularDirName === 'input') {
+      return pascalFileName; // Just use the component name for inputs
+    }
+    if (singularDirName === 'calendar') {
+      return pascalFileName; // Just use the component name for calendars
+    }
+    if (singularDirName === 'form') {
+      // Handle naming conflicts with types
+      if (fileName === 'DynamicFormField') {
+        return 'FormField'; // Avoid conflict with type
+      }
+      return pascalFileName; // Just use the component name for forms
+    }
+    
+    return `${pascalDirName}${pascalFileName}`;
+  }
+  
+  return pascalFileName;
+}
+
+// Function to generate index file for a directory
+function generateIndexFile(directoryPath, baseDirectoryPath = directoryPath) {
+  const files = fs.readdirSync(directoryPath, { withFileTypes: true });
+  let exportStatements = [];
+  let hasExports = false;
+
+  for (const file of files) {
+    if (file.isDirectory()) {
+      // Skip certain directories
+      if (['tests', 'test', '__tests__', 'node_modules', '.git'].includes(file.name.toLowerCase())) {
+        continue;
+      }
+
+      // Recursively handle subdirectories
+      const subDirectoryPath = path.join(directoryPath, file.name);
+      if (generateIndexFile(subDirectoryPath, baseDirectoryPath)) {
+        exportStatements.push(`export * from './${file.name}';`);
+        hasExports = true;
+      }
+    } else if (file.name.endsWith('.vue') && file.name !== 'index.vue') {
+      const fileName = file.name.replace('.vue', '');
+      const directoryName = path.basename(directoryPath);
+      const exportName = generateComponentExportName(fileName, directoryName);
+      
+      exportStatements.push(`export { default as ${exportName} } from './${fileName}.vue';`);
+      hasExports = true;
+    } else if (file.name.endsWith('.ts') && file.name !== 'index.ts' && !file.name.endsWith('.d.ts')) {
+      const fileName = file.name.replace('.ts', '');
+      // For types directory, export all type files
+      if (path.basename(baseDirectoryPath) === 'types') {
+        exportStatements.push(`export * from './${fileName}';`);
+      } else {
+        exportStatements.push(`export * from './${fileName}';`);
+      }
+      hasExports = true;
+    }
+  }
+
+  if (hasExports) {
+    const indexPath = path.join(directoryPath, 'index.ts');
+    const content = exportStatements.join('\n') + '\n';
+    
+    // Only write if content is different to avoid unnecessary file changes
+    if (!fs.existsSync(indexPath) || fs.readFileSync(indexPath, 'utf8') !== content) {
+      fs.writeFileSync(indexPath, content);
+      console.log(`✅ Generated index.ts for ${path.relative(baseDirectoryPath, directoryPath)}`);
+    }
+    return true;
+  }
+  
+  return false;
+}
+
+// Function to generate main index file
+function generateMainIndexFile(srcDirectoryPath) {
+  const mainIndexPath = path.join(srcDirectoryPath, 'index.ts');
+  
+  // Generate new content - clean, non-prefixed exports only
+  const exportStatements = [
+    "// Types",
+    "export * from './types';",
+    "",
+    "// Utils", 
+    "export * from './utils/id';",
+    "export * from './utils/component-registry';",
+    "",
+    "// Base UI Components",
+    "export * from './components';",
+    "",
+    "// Layout Components",
+    "export * from './components/layouts';",
+    "",
+    "// Input Components", 
+    "export * from './components/inputs';",
+    "",
+    "// Calendar Components",
+    "export * from './components/calendars';",
+    "",
+    "// Form Components",
+    "export * from './components/forms';",
+    "",
+    "// Plugin interface and Vue plugin",
+    "export { StachelockUI, type StachelockUIOptions } from './plugin';",
+    "export { StachelockUI as default } from './plugin';"
+  ];
+  
+  const newContent = exportStatements.join('\n') + '\n';
+  
+  // Always write to ensure consistency
+  fs.writeFileSync(mainIndexPath, newContent);
+  console.log(`✅ Generated main index.ts`);
+}
+
+// Function to generate plugin file
+function generatePluginFile(srcDirectoryPath) {
+  const pluginPath = path.join(srcDirectoryPath, 'plugin.ts');
+  
+  const pluginContent = `import type { App } from 'vue';
+import * as components from './components';
+import * as layouts from './components/layouts';
+import * as inputs from './components/inputs';
+import * as calendars from './components/calendars';
+import * as forms from './components/forms';
+
+// Combine all components
+const allComponents = {
+  ...components,
+  ...layouts,
+  ...inputs,
+  ...calendars,
+  ...forms,
+};
+
+// Plugin interface
+export interface StachelockUIOptions {
+  /**
+   * Component name prefix (default: 'Sl')
+   */
+  prefix?: string;
+  /**
+   * Array of component names to install globally
+   */
+  components?: string[];
+  /**
+   * Whether to install all components globally
+   */
+  installAll?: boolean;
+}
+
+// Vue plugin
+export const StachelockUI = {
+  install(app: App, options: StachelockUIOptions = {}) {
+    const { prefix = 'Sl', installAll = false, components: selectedComponents } = options;
+
+    // Register components
+    Object.entries(allComponents).forEach(([name, component]) => {
+      const shouldInstall = installAll || 
+        (selectedComponents && selectedComponents.includes(name)) ||
+        (!selectedComponents && !installAll);
+
+      if (shouldInstall) {
+        // Register non-prefixed
+        app.component(name, component);
+        // Also register prefixed alias for back-compat
+        const prefixedName = name.startsWith(prefix) ? name : \`\${prefix}\${name}\`;
+        app.component(prefixedName, component);
+      }
+    });
+  }
+};
+
+export default StachelockUI;
+`;
+
+  // Only write if content is different
+  if (!fs.existsSync(pluginPath) || fs.readFileSync(pluginPath, 'utf8') !== pluginContent) {
+    fs.writeFileSync(pluginPath, pluginContent);
+    console.log(`✅ Generated plugin.ts`);
+  }
+}
+
+// Main execution
+function main() {
+  console.log('🚀 Generating recursive index files for stachelock-ui...\n');
+  
+  const srcDirectoryPath = path.join(__dirname, '../src');
+  
+  if (!fs.existsSync(srcDirectoryPath)) {
+    console.error('❌ src directory not found!');
+    process.exit(1);
+  }
+  
+  try {
+    // Generate index files for all subdirectories
+    generateIndexFile(srcDirectoryPath);
+    
+    // Generate main index file
+    generateMainIndexFile(srcDirectoryPath);
+    
+    // Generate plugin file
+    generatePluginFile(srcDirectoryPath);
+    
+    console.log('\n✨ All index files generated successfully!');
+  } catch (error) {
+    console.error('❌ Error generating index files:', error);
+    process.exit(1);
+  }
+}
+
+// Run if called directly
+if (require.main === module) {
+  main();
+}
+
+module.exports = { generateIndexFile, generateMainIndexFile, generatePluginFile };