@stackwright/themes 0.2.2 → 0.3.1-alpha.2

package/.continue/rules/CONTINUE.md

@@ -0,0 +1,222 @@
+# @stackwright/themes - Theme System
+
+## Overview
+
+The `@stackwright/themes` package provides a YAML-configurable theme system for Stackwright applications. It enables developers and content creators to define custom visual themes declaratively, supporting everything from color palettes to typography scales and component styling variants.
+
+## Key Features
+
+### YAML-Driven Theme Configuration
+Themes are defined in YAML format, making them accessible to non-developers:
+
+```yaml
+id: "custom-brand-theme"
+name: "Custom Brand Theme"
+description: "A theme for our brand identity"
+colors:
+  primary: "#1976d2"
+  secondary: "#dc004e"
+  accent: "#9c27b0"
+  background: "#ffffff"
+  text: "#212121"
+typography:
+  fontFamily:
+    primary: "Inter"
+    secondary: "Cinzel"
+spacing:
+  xs: "0.5rem"
+  sm: "0.75rem"
+  md: "1rem"
+  lg: "1.5rem"
+  xl: "2rem"
+```
+
+### Dynamic Color Resolution
+The theme system provides intelligent color resolution that supports:
+- **Hex codes**: Direct color values like `#1976d2`
+- **Theme references**: Named colors from the theme palette
+- **Fallback handling**: Graceful degradation for invalid colors
+
+```typescript
+// Color resolution example from core package
+function resolveColor(colorValue: string, themeColors: Record<string, string>): string {
+  if (colorValue.startsWith('#')) {
+    return colorValue; // Already a hex code
+  }
+  return themeColors[colorValue] || colorValue;
+}
+```
+
+### Component Integration
+Themes seamlessly integrate with React components through the `useSafeTheme()` hook:
+
+```typescript
+// Example from ThemedButton component
+const theme = useSafeTheme();
+const buttonColor = button.buttonBackground 
+  ? resolveColor(button.buttonBackground)
+  : background 
+  ? resolveColor(background)
+  : theme.colors.primary;
+```
+
+### Background Image Support
+Themes support background images with automatic transparency handling:
+
+```typescript
+// From PageLayout component
+const hasBackgroundImage = siteConfig?.customTheme?.backgroundImage?.url;
+const backgroundColor = hasBackgroundImage ? 'transparent' : theme.colors.background;
+```
+
+## Architecture
+
+### Dependencies
+- **React**: Core React hooks and components
+- **js-yaml**: YAML parsing and serialization
+- **TypeScript**: Type safety and development experience
+
+### Build Configuration
+The package uses `tsup` for building with dual format support:
+
+```typescript
+// tsup.config.ts
+export default defineConfig({
+  entry: ['src/index.ts'],
+  format: ['cjs', 'esm'],
+  dts: true,
+  target: 'es2022',
+  splitting: false,
+  sourcemap: true,
+  clean: true,
+  outExtension({ format }) {
+    return {
+      js: format === 'cjs' ? '.js' : '.mjs',
+    }
+  }
+});
+```
+
+## Development Workflow
+
+### Theme Creation Process
+1. **Define theme YAML** with colors, typography, and spacing
+2. **Add theme exports** in the themes package index
+3. **Test integration** with example applications
+4. **Validate** theme structure and color accessibility
+
+### Custom Theme Generation
+The CLI package can generate custom themes from brand specifications:
+
+```javascript
+// From CLI custom theme generation
+function generateCustomTheme(brand) {
+  const colors = mapBrandColorsToTheme(brand.colors);
+  
+  return {
+    id: `${brand.name.toLowerCase().replace(/\s+/g, '-')}-custom`,
+    name: `${brand.name} Custom`,
+    description: `Custom theme for ${brand.name}`,
+    colors,
+    typography: {
+      fontFamily: {
+        primary: brand.fonts.find(f => f.usage === 'body')?.name || 'Inter',
+        secondary: brand.fonts.find(f => f.usage === 'titles')?.name || 'Cinzel'
+      }
+    }
+  };
+}
+```
+
+## Integration Points
+
+### With Core Framework
+- **Color resolution**: Used throughout component system
+- **Theme hooks**: Provides `useSafeTheme()` for components
+- **Layout integration**: Background and styling support
+
+### With CLI Tools
+- **Theme generation**: AI-powered custom theme creation
+- **Validation**: Schema validation for theme structure
+- **Documentation**: Auto-generated theme reference
+
+### With Next.js Adapter
+- **SSR support**: Server-side theme resolution
+- **Static generation**: Build-time theme optimization
+- **Route integration**: Theme switching capabilities
+
+## Theme Structure
+
+### Core Properties
+- **`id`**: Unique theme identifier
+- **`name`**: Human-readable theme name
+- **`description`**: Theme description and usage notes
+- **`colors`**: Color palette definition
+- **`typography`**: Font family and text styling
+- **`spacing`**: Consistent spacing scale
+
+### Color Palette
+Standard color keys supported:
+- `primary`: Main brand color
+- `secondary`: Secondary brand color  
+- `accent`: Accent/highlight color
+- `background`: Page background color
+- `text`: Primary text color
+
+### Typography System
+Font family configuration:
+- `primary`: Body text font
+- `secondary`: Heading/title font
+
+### Spacing Scale
+Consistent spacing tokens:
+- `xs`, `sm`, `md`, `lg`, `xl`, `2xl`: Progressive spacing scale
+
+## Testing and Validation
+
+### Development Testing
+```bash
+# Build the themes package
+pnpm build:themes
+
+# Test with example application
+pnpm dev:example
+```
+
+### Theme Validation
+- **YAML parsing**: Ensures valid YAML structure
+- **Type checking**: TypeScript validation of theme properties
+- **Color validation**: Hex code and named color validation
+- **Integration testing**: Cross-package theme usage validation
+
+## Future Enhancements
+
+### Planned Features
+- **Theme variants**: Light/dark mode support
+- **Component theming**: Per-component style overrides
+- **Theme inheritance**: Base theme extension capabilities
+- **Advanced typography**: Font weight and size scales
+- **Animation themes**: Motion and transition definitions
+
+### Performance Optimizations
+- **Theme caching**: Runtime theme resolution caching
+- **Build-time optimization**: Static theme extraction
+- **Selective loading**: Dynamic theme loading
+
+## Contributing
+
+### Adding New Themes
+1. Create theme YAML definition
+2. Add to package exports
+3. Update documentation
+4. Test across components
+
+### Extending Theme Properties
+1. Update TypeScript types
+2. Modify parsing logic
+3. Update component integration
+4. Add CLI generation support
+
+---
+
+**Note**: The themes package is currently in active development (version 0.3.1-alpha.1). Theme structure and APIs may evolve as the framework matures.

package/CHANGELOG.md

@@ -1,10 +1,25 @@
 # @stackwright/themes
 
-## 0.2.2
+## 0.3.1-alpha.2
 
 ### Patch Changes
 
-- 63338d5: testing 122
+- 46df7ac: Documentation updates
+
+## 0.3.1-alpha.1
+
+### Patch Changes
+
+- 51dbbc9: Refactor types out of core into own package.
+
+## 0.3.1-alpha.0
+
+### Patch Changes
+
+- bd7cd6e: Internal packagename refactor.
+- ca71410: Core testing implemented
+- f195337: Adding test dependencies to all packages.
+- 5ff20a6: Fixing mixed compilation tooling (tsup/tsc) to only tsup
 
 ## 0.2.1
 

package/dist/{types.d.ts → index.d.mts}

@@ -1,4 +1,6 @@
-export interface ThemeConfig {
+import React, { ReactNode } from 'react';
+
+interface ThemeConfig {
     id: string;
     name: string;
     description: string;
@@ -51,7 +53,7 @@ export interface ThemeConfig {
         footer: ComponentStyle;
     };
 }
-export interface ComponentStyle {
+interface ComponentStyle {
     base?: string;
     primary?: string;
     secondary?: string;
@@ -61,6 +63,29 @@ export interface ComponentStyle {
     text?: string;
     [key: string]: string | undefined;
 }
-export interface Theme extends ThemeConfig {
+interface Theme extends ThemeConfig {
 }
-//# sourceMappingURL=types.d.ts.map
+
+interface ThemeContextType {
+    theme: Theme;
+    setTheme?: (theme: Theme) => void;
+}
+interface ThemeProviderProps {
+    theme: Theme;
+    children: ReactNode;
+}
+declare const ThemeProvider: React.FC<ThemeProviderProps>;
+declare const useTheme: () => ThemeContextType;
+
+declare class ThemeLoader {
+    private static themes;
+    static loadThemeFromYaml(yamlContent: string): Theme;
+    static loadThemeFromFile(themeName: string): Theme;
+    static getTheme(name: string): Theme | undefined;
+    static getAllThemes(): Theme[];
+    static registerCustomTheme(theme: Theme): void;
+    static loadCustomTheme(theme: Theme): Theme;
+    private static getEmbeddedTheme;
+}
+
+export { type ComponentStyle, type Theme, type ThemeConfig, ThemeLoader, ThemeProvider, useTheme };

package/dist/index.d.ts

@@ -1,5 +1,91 @@
-export * from './types';
-export * from './ThemeProvider';
-export * from './themeLoader';
-export type { ThemeConfig, Theme, ComponentStyle } from './types';
-//# sourceMappingURL=index.d.ts.map
+import React, { ReactNode } from 'react';
+
+interface ThemeConfig {
+    id: string;
+    name: string;
+    description: string;
+    colors: {
+        primary: string;
+        secondary: string;
+        accent: string;
+        background: string;
+        surface: string;
+        text: string;
+        textSecondary: string;
+    };
+    backgroundImage?: {
+        url: string;
+        repeat?: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat';
+        size?: 'auto' | 'cover' | 'contain' | string;
+        position?: string;
+        attachment?: 'scroll' | 'fixed' | 'local';
+        scale?: number;
+        animation?: 'drift' | 'float' | 'shimmer' | 'shimmer-float' | 'none';
+        customAnimation?: string;
+    };
+    typography: {
+        fontFamily: {
+            primary: string;
+            secondary: string;
+        };
+        scale: {
+            xs: string;
+            sm: string;
+            base: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+            '3xl': string;
+        };
+    };
+    spacing: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+    };
+    components: {
+        button: ComponentStyle;
+        card: ComponentStyle;
+        header: ComponentStyle;
+        footer: ComponentStyle;
+    };
+}
+interface ComponentStyle {
+    base?: string;
+    primary?: string;
+    secondary?: string;
+    outline?: string;
+    shadow?: string;
+    nav?: string;
+    text?: string;
+    [key: string]: string | undefined;
+}
+interface Theme extends ThemeConfig {
+}
+
+interface ThemeContextType {
+    theme: Theme;
+    setTheme?: (theme: Theme) => void;
+}
+interface ThemeProviderProps {
+    theme: Theme;
+    children: ReactNode;
+}
+declare const ThemeProvider: React.FC<ThemeProviderProps>;
+declare const useTheme: () => ThemeContextType;
+
+declare class ThemeLoader {
+    private static themes;
+    static loadThemeFromYaml(yamlContent: string): Theme;
+    static loadThemeFromFile(themeName: string): Theme;
+    static getTheme(name: string): Theme | undefined;
+    static getAllThemes(): Theme[];
+    static registerCustomTheme(theme: Theme): void;
+    static loadCustomTheme(theme: Theme): Theme;
+    private static getEmbeddedTheme;
+}
+
+export { type ComponentStyle, type Theme, type ThemeConfig, ThemeLoader, ThemeProvider, useTheme };

package/dist/index.js

@@ -1,19 +1,176 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ThemeLoader: () => ThemeLoader,
+  ThemeProvider: () => ThemeProvider,
+  useTheme: () => useTheme
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/ThemeProvider.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var ThemeContext = (0, import_react.createContext)(void 0);
+var ThemeProvider = ({ theme, children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value: { theme }, children });
+};
+var useTheme = () => {
+  const context = (0, import_react.useContext)(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+};
+
+// src/themeLoader.ts
+var yaml = __toESM(require("js-yaml"));
+var ThemeLoader = class {
+  static themes = /* @__PURE__ */ new Map();
+  static loadThemeFromYaml(yamlContent) {
+    try {
+      const theme = yaml.load(yamlContent);
+      this.themes.set(theme.name, theme);
+      return theme;
+    } catch (error) {
+      throw new Error(`Failed to parse theme YAML: ${error}`);
+    }
+  }
+  static loadThemeFromFile(themeName) {
+    const themeData = this.getEmbeddedTheme(themeName);
+    return this.loadThemeFromYaml(themeData);
+  }
+  static getTheme(name) {
+    return this.themes.get(name);
+  }
+  static getAllThemes() {
+    return Array.from(this.themes.values());
+  }
+  static registerCustomTheme(theme) {
+    this.themes.set(theme.name, theme);
+    console.log(`\u{1F3A8} Registered custom theme: ${theme.name}`);
+  }
+  static loadCustomTheme(theme) {
+    this.registerCustomTheme(theme);
+    return theme;
+  }
+  static getEmbeddedTheme(name) {
+    const themes = {
+      corporate: `
+name: "Corporate"
+colors:
+  primary:
+    50: "#fef7ee"
+    100: "#fdedd3"
+    500: "#f59e0b"
+    600: "#d97706"
+    700: "#b45309"
+  neutral:
+    50: "#f8fafc"
+    100: "#f1f5f9"
+    700: "#334155"
+    800: "#1e293b"
+    900: "#0f172a"
+  text:
+    primary: "#1f2937"
+    secondary: "#6b7280"
+    inverse: "#ffffff"
+
+spacing:
+  section: "py-20"
+  container: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
+
+typography:
+  hero: "text-4xl md:text-6xl font-bold"
+  subtitle: "text-xl md:text-2xl"
+
+components:
+  button:
+    primary: "bg-amber-600 text-white hover:bg-amber-700 px-8 py-3 rounded-lg font-semibold"
+    secondary: "text-amber-600 border border-amber-600 hover:bg-amber-50 px-8 py-3 rounded-lg font-semibold"
+  header:
+    background: "bg-white shadow-sm"
+    border: "border-b border-gray-200"
+  hero:
+    background: "bg-gradient-to-br from-slate-900 to-slate-800"
+`,
+      soft: `
+name: "Soft"
+colors:
+  primary:
+    50: "#fdf2f8"
+    100: "#fce7f3"
+    500: "#ec4899"
+    600: "#db2777"
+    700: "#be185d"
+  neutral:
+    50: "#fefefe"
+    100: "#f9fafb"
+    700: "#6b7280"
+    800: "#4b5563"
+    900: "#374151"
+  text:
+    primary: "#374151"
+    secondary: "#9ca3af"
+    inverse: "#ffffff"
+
+spacing:
+  section: "py-16"
+  container: "max-w-6xl mx-auto px-6 sm:px-8 lg:px-10"
+
+typography:
+  hero: "text-3xl md:text-5xl font-semibold"
+  subtitle: "text-lg md:text-xl"
+
+components:
+  button:
+    primary: "bg-pink-600 text-white hover:bg-pink-700 px-6 py-2 rounded-full font-medium"
+    secondary: "text-pink-600 border border-pink-600 hover:bg-pink-50 px-6 py-2 rounded-full font-medium"
+  header:
+    background: "bg-neutral-50 shadow-none"
+    border: "border-b border-neutral-200"
+  hero:
+    background: "bg-gradient-to-br from-neutral-100 to-neutral-200"
+`
+    };
+    if (!themes[name]) {
+      throw new Error(`Theme '${name}' not found`);
     }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+    return themes[name];
+  }
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./types"), exports);
-__exportStar(require("./ThemeProvider"), exports);
-__exportStar(require("./themeLoader"), exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ThemeLoader,
+  ThemeProvider,
+  useTheme
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/ThemeProvider.tsx","../src/themeLoader.ts"],"sourcesContent":["export * from './types';\nexport * from './ThemeProvider';\nexport * from './themeLoader';\nexport type { ThemeConfig, Theme, ComponentStyle } from './types';","import React, { createContext, useContext, ReactNode } from 'react';\nimport { Theme } from './types';\n\ninterface ThemeContextType {\n  theme: Theme;\n  setTheme?: (theme: Theme) => void;\n}\n\nconst ThemeContext = createContext<ThemeContextType | undefined>(undefined);\n\ninterface ThemeProviderProps {\n  theme: Theme;\n  children: ReactNode;\n}\n\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({ theme, children }) => {\n  return (\n    <ThemeContext.Provider value={{ theme }}>\n      {children}\n    </ThemeContext.Provider>\n  );\n};\n\nexport const useTheme = (): ThemeContextType => {\n  const context = useContext(ThemeContext);\n  if (!context) {\n    throw new Error('useTheme must be used within a ThemeProvider');\n  }\n  return context;\n};","import * as yaml from 'js-yaml';\nimport { Theme } from './types';\n\nexport class ThemeLoader {\n  private static themes: Map<string, Theme> = new Map();\n\n  static loadThemeFromYaml(yamlContent: string): Theme {\n    try {\n      const theme = yaml.load(yamlContent) as Theme;\n      this.themes.set(theme.name, theme);\n      return theme;\n    } catch (error) {\n      throw new Error(`Failed to parse theme YAML: ${error}`);\n    }\n  }\n\n  static loadThemeFromFile(themeName: string): Theme {\n    // In a real implementation, this would load from the file system\n    // For now, we'll embed the themes\n    const themeData = this.getEmbeddedTheme(themeName);\n    return this.loadThemeFromYaml(themeData);\n  }\n\n  static getTheme(name: string): Theme | undefined {\n    return this.themes.get(name);\n  }\n\n  static getAllThemes(): Theme[] {\n    return Array.from(this.themes.values());\n  }\n\n  static registerCustomTheme(theme: Theme): void {\n    this.themes.set(theme.name, theme);\n    console.log(`🎨 Registered custom theme: ${theme.name}`);\n  }\n\n  static loadCustomTheme(theme: Theme): Theme {\n    this.registerCustomTheme(theme);\n    return theme;\n  }\n\n  private static getEmbeddedTheme(name: string): string {\n    const themes: Record<string, string> = {\n      corporate: `\nname: \"Corporate\"\ncolors:\n  primary:\n    50: \"#fef7ee\"\n    100: \"#fdedd3\"\n    500: \"#f59e0b\"\n    600: \"#d97706\"\n    700: \"#b45309\"\n  neutral:\n    50: \"#f8fafc\"\n    100: \"#f1f5f9\"\n    700: \"#334155\"\n    800: \"#1e293b\"\n    900: \"#0f172a\"\n  text:\n    primary: \"#1f2937\"\n    secondary: \"#6b7280\"\n    inverse: \"#ffffff\"\n\nspacing:\n  section: \"py-20\"\n  container: \"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\"\n\ntypography:\n  hero: \"text-4xl md:text-6xl font-bold\"\n  subtitle: \"text-xl md:text-2xl\"\n\ncomponents:\n  button:\n    primary: \"bg-amber-600 text-white hover:bg-amber-700 px-8 py-3 rounded-lg font-semibold\"\n    secondary: \"text-amber-600 border border-amber-600 hover:bg-amber-50 px-8 py-3 rounded-lg font-semibold\"\n  header:\n    background: \"bg-white shadow-sm\"\n    border: \"border-b border-gray-200\"\n  hero:\n    background: \"bg-gradient-to-br from-slate-900 to-slate-800\"\n`,\n      soft: `\nname: \"Soft\"\ncolors:\n  primary:\n    50: \"#fdf2f8\"\n    100: \"#fce7f3\"\n    500: \"#ec4899\"\n    600: \"#db2777\"\n    700: \"#be185d\"\n  neutral:\n    50: \"#fefefe\"\n    100: \"#f9fafb\"\n    700: \"#6b7280\"\n    800: \"#4b5563\"\n    900: \"#374151\"\n  text:\n    primary: \"#374151\"\n    secondary: \"#9ca3af\"\n    inverse: \"#ffffff\"\n\nspacing:\n  section: \"py-16\"\n  container: \"max-w-6xl mx-auto px-6 sm:px-8 lg:px-10\"\n\ntypography:\n  hero: \"text-3xl md:text-5xl font-semibold\"\n  subtitle: \"text-lg md:text-xl\"\n\ncomponents:\n  button:\n    primary: \"bg-pink-600 text-white hover:bg-pink-700 px-6 py-2 rounded-full font-medium\"\n    secondary: \"text-pink-600 border border-pink-600 hover:bg-pink-50 px-6 py-2 rounded-full font-medium\"\n  header:\n    background: \"bg-neutral-50 shadow-none\"\n    border: \"border-b border-neutral-200\"\n  hero:\n    background: \"bg-gradient-to-br from-neutral-100 to-neutral-200\"\n`\n    };\n\n    if (!themes[name]) {\n      throw new Error(`Theme '${name}' not found`);\n    }\n\n    return themes[name];\n  }\n}"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAA4D;AAiBxD;AATJ,IAAM,mBAAe,4BAA4C,MAAS;AAOnE,IAAM,gBAA8C,CAAC,EAAE,OAAO,SAAS,MAAM;AAClF,SACE,4CAAC,aAAa,UAAb,EAAsB,OAAO,EAAE,MAAM,GACnC,UACH;AAEJ;AAEO,IAAM,WAAW,MAAwB;AAC9C,QAAM,cAAU,yBAAW,YAAY;AACvC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,8CAA8C;AAAA,EAChE;AACA,SAAO;AACT;;;AC7BA,WAAsB;AAGf,IAAM,cAAN,MAAkB;AAAA,EACvB,OAAe,SAA6B,oBAAI,IAAI;AAAA,EAEpD,OAAO,kBAAkB,aAA4B;AACnD,QAAI;AACF,YAAM,QAAa,UAAK,WAAW;AACnC,WAAK,OAAO,IAAI,MAAM,MAAM,KAAK;AACjC,aAAO;AAAA,IACT,SAAS,OAAO;AACd,YAAM,IAAI,MAAM,+BAA+B,KAAK,EAAE;AAAA,IACxD;AAAA,EACF;AAAA,EAEA,OAAO,kBAAkB,WAA0B;AAGjD,UAAM,YAAY,KAAK,iBAAiB,SAAS;AACjD,WAAO,KAAK,kBAAkB,SAAS;AAAA,EACzC;AAAA,EAEA,OAAO,SAAS,MAAiC;AAC/C,WAAO,KAAK,OAAO,IAAI,IAAI;AAAA,EAC7B;AAAA,EAEA,OAAO,eAAwB;AAC7B,WAAO,MAAM,KAAK,KAAK,OAAO,OAAO,CAAC;AAAA,EACxC;AAAA,EAEA,OAAO,oBAAoB,OAAoB;AAC7C,SAAK,OAAO,IAAI,MAAM,MAAM,KAAK;AACjC,YAAQ,IAAI,sCAA+B,MAAM,IAAI,EAAE;AAAA,EACzD;AAAA,EAEA,OAAO,gBAAgB,OAAqB;AAC1C,SAAK,oBAAoB,KAAK;AAC9B,WAAO;AAAA,EACT;AAAA,EAEA,OAAe,iBAAiB,MAAsB;AACpD,UAAM,SAAiC;AAAA,MACrC,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAsCX,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAsCR;AAEA,QAAI,CAAC,OAAO,IAAI,GAAG;AACjB,YAAM,IAAI,MAAM,UAAU,IAAI,aAAa;AAAA,IAC7C;AAEA,WAAO,OAAO,IAAI;AAAA,EACpB;AACF;","names":[]}

package/dist/index.mjs

@@ -0,0 +1,137 @@
+// src/ThemeProvider.tsx
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var ThemeContext = createContext(void 0);
+var ThemeProvider = ({ theme, children }) => {
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: { theme }, children });
+};
+var useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+};
+
+// src/themeLoader.ts
+import * as yaml from "js-yaml";
+var ThemeLoader = class {
+  static themes = /* @__PURE__ */ new Map();
+  static loadThemeFromYaml(yamlContent) {
+    try {
+      const theme = yaml.load(yamlContent);
+      this.themes.set(theme.name, theme);
+      return theme;
+    } catch (error) {
+      throw new Error(`Failed to parse theme YAML: ${error}`);
+    }
+  }
+  static loadThemeFromFile(themeName) {
+    const themeData = this.getEmbeddedTheme(themeName);
+    return this.loadThemeFromYaml(themeData);
+  }
+  static getTheme(name) {
+    return this.themes.get(name);
+  }
+  static getAllThemes() {
+    return Array.from(this.themes.values());
+  }
+  static registerCustomTheme(theme) {
+    this.themes.set(theme.name, theme);
+    console.log(`\u{1F3A8} Registered custom theme: ${theme.name}`);
+  }
+  static loadCustomTheme(theme) {
+    this.registerCustomTheme(theme);
+    return theme;
+  }
+  static getEmbeddedTheme(name) {
+    const themes = {
+      corporate: `
+name: "Corporate"
+colors:
+  primary:
+    50: "#fef7ee"
+    100: "#fdedd3"
+    500: "#f59e0b"
+    600: "#d97706"
+    700: "#b45309"
+  neutral:
+    50: "#f8fafc"
+    100: "#f1f5f9"
+    700: "#334155"
+    800: "#1e293b"
+    900: "#0f172a"
+  text:
+    primary: "#1f2937"
+    secondary: "#6b7280"
+    inverse: "#ffffff"
+
+spacing:
+  section: "py-20"
+  container: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
+
+typography:
+  hero: "text-4xl md:text-6xl font-bold"
+  subtitle: "text-xl md:text-2xl"
+
+components:
+  button:
+    primary: "bg-amber-600 text-white hover:bg-amber-700 px-8 py-3 rounded-lg font-semibold"
+    secondary: "text-amber-600 border border-amber-600 hover:bg-amber-50 px-8 py-3 rounded-lg font-semibold"
+  header:
+    background: "bg-white shadow-sm"
+    border: "border-b border-gray-200"
+  hero:
+    background: "bg-gradient-to-br from-slate-900 to-slate-800"
+`,
+      soft: `
+name: "Soft"
+colors:
+  primary:
+    50: "#fdf2f8"
+    100: "#fce7f3"
+    500: "#ec4899"
+    600: "#db2777"
+    700: "#be185d"
+  neutral:
+    50: "#fefefe"
+    100: "#f9fafb"
+    700: "#6b7280"
+    800: "#4b5563"
+    900: "#374151"
+  text:
+    primary: "#374151"
+    secondary: "#9ca3af"
+    inverse: "#ffffff"
+
+spacing:
+  section: "py-16"
+  container: "max-w-6xl mx-auto px-6 sm:px-8 lg:px-10"
+
+typography:
+  hero: "text-3xl md:text-5xl font-semibold"
+  subtitle: "text-lg md:text-xl"
+
+components:
+  button:
+    primary: "bg-pink-600 text-white hover:bg-pink-700 px-6 py-2 rounded-full font-medium"
+    secondary: "text-pink-600 border border-pink-600 hover:bg-pink-50 px-6 py-2 rounded-full font-medium"
+  header:
+    background: "bg-neutral-50 shadow-none"
+    border: "border-b border-neutral-200"
+  hero:
+    background: "bg-gradient-to-br from-neutral-100 to-neutral-200"
+`
+    };
+    if (!themes[name]) {
+      throw new Error(`Theme '${name}' not found`);
+    }
+    return themes[name];
+  }
+};
+export {
+  ThemeLoader,
+  ThemeProvider,
+  useTheme
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ThemeProvider.tsx","../src/themeLoader.ts"],"sourcesContent":["import React, { createContext, useContext, ReactNode } from 'react';\nimport { Theme } from './types';\n\ninterface ThemeContextType {\n  theme: Theme;\n  setTheme?: (theme: Theme) => void;\n}\n\nconst ThemeContext = createContext<ThemeContextType | undefined>(undefined);\n\ninterface ThemeProviderProps {\n  theme: Theme;\n  children: ReactNode;\n}\n\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({ theme, children }) => {\n  return (\n    <ThemeContext.Provider value={{ theme }}>\n      {children}\n    </ThemeContext.Provider>\n  );\n};\n\nexport const useTheme = (): ThemeContextType => {\n  const context = useContext(ThemeContext);\n  if (!context) {\n    throw new Error('useTheme must be used within a ThemeProvider');\n  }\n  return context;\n};","import * as yaml from 'js-yaml';\nimport { Theme } from './types';\n\nexport class ThemeLoader {\n  private static themes: Map<string, Theme> = new Map();\n\n  static loadThemeFromYaml(yamlContent: string): Theme {\n    try {\n      const theme = yaml.load(yamlContent) as Theme;\n      this.themes.set(theme.name, theme);\n      return theme;\n    } catch (error) {\n      throw new Error(`Failed to parse theme YAML: ${error}`);\n    }\n  }\n\n  static loadThemeFromFile(themeName: string): Theme {\n    // In a real implementation, this would load from the file system\n    // For now, we'll embed the themes\n    const themeData = this.getEmbeddedTheme(themeName);\n    return this.loadThemeFromYaml(themeData);\n  }\n\n  static getTheme(name: string): Theme | undefined {\n    return this.themes.get(name);\n  }\n\n  static getAllThemes(): Theme[] {\n    return Array.from(this.themes.values());\n  }\n\n  static registerCustomTheme(theme: Theme): void {\n    this.themes.set(theme.name, theme);\n    console.log(`🎨 Registered custom theme: ${theme.name}`);\n  }\n\n  static loadCustomTheme(theme: Theme): Theme {\n    this.registerCustomTheme(theme);\n    return theme;\n  }\n\n  private static getEmbeddedTheme(name: string): string {\n    const themes: Record<string, string> = {\n      corporate: `\nname: \"Corporate\"\ncolors:\n  primary:\n    50: \"#fef7ee\"\n    100: \"#fdedd3\"\n    500: \"#f59e0b\"\n    600: \"#d97706\"\n    700: \"#b45309\"\n  neutral:\n    50: \"#f8fafc\"\n    100: \"#f1f5f9\"\n    700: \"#334155\"\n    800: \"#1e293b\"\n    900: \"#0f172a\"\n  text:\n    primary: \"#1f2937\"\n    secondary: \"#6b7280\"\n    inverse: \"#ffffff\"\n\nspacing:\n  section: \"py-20\"\n  container: \"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\"\n\ntypography:\n  hero: \"text-4xl md:text-6xl font-bold\"\n  subtitle: \"text-xl md:text-2xl\"\n\ncomponents:\n  button:\n    primary: \"bg-amber-600 text-white hover:bg-amber-700 px-8 py-3 rounded-lg font-semibold\"\n    secondary: \"text-amber-600 border border-amber-600 hover:bg-amber-50 px-8 py-3 rounded-lg font-semibold\"\n  header:\n    background: \"bg-white shadow-sm\"\n    border: \"border-b border-gray-200\"\n  hero:\n    background: \"bg-gradient-to-br from-slate-900 to-slate-800\"\n`,\n      soft: `\nname: \"Soft\"\ncolors:\n  primary:\n    50: \"#fdf2f8\"\n    100: \"#fce7f3\"\n    500: \"#ec4899\"\n    600: \"#db2777\"\n    700: \"#be185d\"\n  neutral:\n    50: \"#fefefe\"\n    100: \"#f9fafb\"\n    700: \"#6b7280\"\n    800: \"#4b5563\"\n    900: \"#374151\"\n  text:\n    primary: \"#374151\"\n    secondary: \"#9ca3af\"\n    inverse: \"#ffffff\"\n\nspacing:\n  section: \"py-16\"\n  container: \"max-w-6xl mx-auto px-6 sm:px-8 lg:px-10\"\n\ntypography:\n  hero: \"text-3xl md:text-5xl font-semibold\"\n  subtitle: \"text-lg md:text-xl\"\n\ncomponents:\n  button:\n    primary: \"bg-pink-600 text-white hover:bg-pink-700 px-6 py-2 rounded-full font-medium\"\n    secondary: \"text-pink-600 border border-pink-600 hover:bg-pink-50 px-6 py-2 rounded-full font-medium\"\n  header:\n    background: \"bg-neutral-50 shadow-none\"\n    border: \"border-b border-neutral-200\"\n  hero:\n    background: \"bg-gradient-to-br from-neutral-100 to-neutral-200\"\n`\n    };\n\n    if (!themes[name]) {\n      throw new Error(`Theme '${name}' not found`);\n    }\n\n    return themes[name];\n  }\n}"],"mappings":";AAAA,SAAgB,eAAe,kBAA6B;AAiBxD;AATJ,IAAM,eAAe,cAA4C,MAAS;AAOnE,IAAM,gBAA8C,CAAC,EAAE,OAAO,SAAS,MAAM;AAClF,SACE,oBAAC,aAAa,UAAb,EAAsB,OAAO,EAAE,MAAM,GACnC,UACH;AAEJ;AAEO,IAAM,WAAW,MAAwB;AAC9C,QAAM,UAAU,WAAW,YAAY;AACvC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,8CAA8C;AAAA,EAChE;AACA,SAAO;AACT;;;AC7BA,YAAY,UAAU;AAGf,IAAM,cAAN,MAAkB;AAAA,EACvB,OAAe,SAA6B,oBAAI,IAAI;AAAA,EAEpD,OAAO,kBAAkB,aAA4B;AACnD,QAAI;AACF,YAAM,QAAa,UAAK,WAAW;AACnC,WAAK,OAAO,IAAI,MAAM,MAAM,KAAK;AACjC,aAAO;AAAA,IACT,SAAS,OAAO;AACd,YAAM,IAAI,MAAM,+BAA+B,KAAK,EAAE;AAAA,IACxD;AAAA,EACF;AAAA,EAEA,OAAO,kBAAkB,WAA0B;AAGjD,UAAM,YAAY,KAAK,iBAAiB,SAAS;AACjD,WAAO,KAAK,kBAAkB,SAAS;AAAA,EACzC;AAAA,EAEA,OAAO,SAAS,MAAiC;AAC/C,WAAO,KAAK,OAAO,IAAI,IAAI;AAAA,EAC7B;AAAA,EAEA,OAAO,eAAwB;AAC7B,WAAO,MAAM,KAAK,KAAK,OAAO,OAAO,CAAC;AAAA,EACxC;AAAA,EAEA,OAAO,oBAAoB,OAAoB;AAC7C,SAAK,OAAO,IAAI,MAAM,MAAM,KAAK;AACjC,YAAQ,IAAI,sCAA+B,MAAM,IAAI,EAAE;AAAA,EACzD;AAAA,EAEA,OAAO,gBAAgB,OAAqB;AAC1C,SAAK,oBAAoB,KAAK;AAC9B,WAAO;AAAA,EACT;AAAA,EAEA,OAAe,iBAAiB,MAAsB;AACpD,UAAM,SAAiC;AAAA,MACrC,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAsCX,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAsCR;AAEA,QAAI,CAAC,OAAO,IAAI,GAAG;AACjB,YAAM,IAAI,MAAM,UAAU,IAAI,aAAa;AAAA,IAC7C;AAEA,WAAO,OAAO,IAAI;AAAA,EACpB;AACF;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackwright/themes",
-  "version": "0.2.2",
+  "version": "0.3.1-alpha.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {
@@ -10,10 +10,12 @@
   "devDependencies": {
     "@types/react": "^18.0.0",
     "@types/js-yaml": "^4.0.0",
-    "typescript": "^5.0.0"
+    "typescript": "^5.0.0",
+    "tsup": "^8.0.0",
+    "vitest": "^3.2.4"
   },
   "scripts": {
-    "build": "tsc",
-    "dev": "tsc --watch"
+    "build": "tsup",
+    "dev": "tsup --watch"
   }
 }

package/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es2022",
     "lib": ["dom", "dom.iterable", "es6"],
     "allowJs": true,
     "skipLibCheck": true,

package/tsup.config.ts

@@ -3,8 +3,14 @@ import { defineConfig } from 'tsup';
 export default defineConfig({
   entry: ['src/index.ts'],
   format: ['cjs', 'esm'],
-  dts: false, // Disable type generation temporarily
+  dts: true,
+  target: 'es2022',
   splitting: false,
   sourcemap: true,
   clean: true,
+    outExtension({ format }) {
+    return {
+      js: format === 'cjs' ? '.js' : '.mjs',
+    }
+  }
 });

package/vitest.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['./test/setup.ts'],
+  },
+  css: {
+    postcss: {},
+  },
+})

package/dist/ThemeProvider.d.ts

@@ -1,14 +0,0 @@
-import React, { ReactNode } from 'react';
-import { Theme } from './types';
-interface ThemeContextType {
-    theme: Theme;
-    setTheme?: (theme: Theme) => void;
-}
-interface ThemeProviderProps {
-    theme: Theme;
-    children: ReactNode;
-}
-export declare const ThemeProvider: React.FC<ThemeProviderProps>;
-export declare const useTheme: () => ThemeContextType;
-export {};
-//# sourceMappingURL=ThemeProvider.d.ts.map

package/dist/ThemeProvider.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../src/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA6B,SAAS,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,UAAU,gBAAgB;IACxB,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACnC;AAID,UAAU,kBAAkB;IAC1B,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAMtD,CAAC;AAEF,eAAO,MAAM,QAAQ,QAAO,gBAM3B,CAAC"}

package/dist/ThemeProvider.js

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTheme = exports.ThemeProvider = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var ThemeContext = (0, react_1.createContext)(undefined);
-var ThemeProvider = function (_a) {
-    var theme = _a.theme, children = _a.children;
-    return ((0, jsx_runtime_1.jsx)(ThemeContext.Provider, { value: { theme: theme }, children: children }));
-};
-exports.ThemeProvider = ThemeProvider;
-var useTheme = function () {
-    var context = (0, react_1.useContext)(ThemeContext);
-    if (!context) {
-        throw new Error('useTheme must be used within a ThemeProvider');
-    }
-    return context;
-};
-exports.useTheme = useTheme;

package/dist/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,YAAY,EAAE,WAAW,EAAE,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC"}

package/dist/themeLoader.d.ts

@@ -1,12 +0,0 @@
-import { Theme } from './types';
-export declare class ThemeLoader {
-    private static themes;
-    static loadThemeFromYaml(yamlContent: string): Theme;
-    static loadThemeFromFile(themeName: string): Theme;
-    static getTheme(name: string): Theme | undefined;
-    static getAllThemes(): Theme[];
-    static registerCustomTheme(theme: Theme): void;
-    static loadCustomTheme(theme: Theme): Theme;
-    private static getEmbeddedTheme;
-}
-//# sourceMappingURL=themeLoader.d.ts.map

package/dist/themeLoader.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"themeLoader.d.ts","sourceRoot":"","sources":["../src/themeLoader.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,qBAAa,WAAW;IACtB,OAAO,CAAC,MAAM,CAAC,MAAM,CAAiC;IAEtD,MAAM,CAAC,iBAAiB,CAAC,WAAW,EAAE,MAAM,GAAG,KAAK;IAUpD,MAAM,CAAC,iBAAiB,CAAC,SAAS,EAAE,MAAM,GAAG,KAAK;IAOlD,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,KAAK,GAAG,SAAS;IAIhD,MAAM,CAAC,YAAY,IAAI,KAAK,EAAE;IAI9B,MAAM,CAAC,mBAAmB,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAK9C,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK;IAK3C,OAAO,CAAC,MAAM,CAAC,gBAAgB;CAsFhC"}

package/dist/themeLoader.js

@@ -1,84 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThemeLoader = void 0;
-var yaml = __importStar(require("js-yaml"));
-var ThemeLoader = /** @class */ (function () {
-    function ThemeLoader() {
-    }
-    ThemeLoader.loadThemeFromYaml = function (yamlContent) {
-        try {
-            var theme = yaml.load(yamlContent);
-            this.themes.set(theme.name, theme);
-            return theme;
-        }
-        catch (error) {
-            throw new Error("Failed to parse theme YAML: ".concat(error));
-        }
-    };
-    ThemeLoader.loadThemeFromFile = function (themeName) {
-        // In a real implementation, this would load from the file system
-        // For now, we'll embed the themes
-        var themeData = this.getEmbeddedTheme(themeName);
-        return this.loadThemeFromYaml(themeData);
-    };
-    ThemeLoader.getTheme = function (name) {
-        return this.themes.get(name);
-    };
-    ThemeLoader.getAllThemes = function () {
-        return Array.from(this.themes.values());
-    };
-    ThemeLoader.registerCustomTheme = function (theme) {
-        this.themes.set(theme.name, theme);
-        console.log("\uD83C\uDFA8 Registered custom theme: ".concat(theme.name));
-    };
-    ThemeLoader.loadCustomTheme = function (theme) {
-        this.registerCustomTheme(theme);
-        return theme;
-    };
-    ThemeLoader.getEmbeddedTheme = function (name) {
-        var themes = {
-            corporate: "\nname: \"Corporate\"\ncolors:\n  primary:\n    50: \"#fef7ee\"\n    100: \"#fdedd3\"\n    500: \"#f59e0b\"\n    600: \"#d97706\"\n    700: \"#b45309\"\n  neutral:\n    50: \"#f8fafc\"\n    100: \"#f1f5f9\"\n    700: \"#334155\"\n    800: \"#1e293b\"\n    900: \"#0f172a\"\n  text:\n    primary: \"#1f2937\"\n    secondary: \"#6b7280\"\n    inverse: \"#ffffff\"\n\nspacing:\n  section: \"py-20\"\n  container: \"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\"\n\ntypography:\n  hero: \"text-4xl md:text-6xl font-bold\"\n  subtitle: \"text-xl md:text-2xl\"\n\ncomponents:\n  button:\n    primary: \"bg-amber-600 text-white hover:bg-amber-700 px-8 py-3 rounded-lg font-semibold\"\n    secondary: \"text-amber-600 border border-amber-600 hover:bg-amber-50 px-8 py-3 rounded-lg font-semibold\"\n  header:\n    background: \"bg-white shadow-sm\"\n    border: \"border-b border-gray-200\"\n  hero:\n    background: \"bg-gradient-to-br from-slate-900 to-slate-800\"\n",
-            soft: "\nname: \"Soft\"\ncolors:\n  primary:\n    50: \"#fdf2f8\"\n    100: \"#fce7f3\"\n    500: \"#ec4899\"\n    600: \"#db2777\"\n    700: \"#be185d\"\n  neutral:\n    50: \"#fefefe\"\n    100: \"#f9fafb\"\n    700: \"#6b7280\"\n    800: \"#4b5563\"\n    900: \"#374151\"\n  text:\n    primary: \"#374151\"\n    secondary: \"#9ca3af\"\n    inverse: \"#ffffff\"\n\nspacing:\n  section: \"py-16\"\n  container: \"max-w-6xl mx-auto px-6 sm:px-8 lg:px-10\"\n\ntypography:\n  hero: \"text-3xl md:text-5xl font-semibold\"\n  subtitle: \"text-lg md:text-xl\"\n\ncomponents:\n  button:\n    primary: \"bg-pink-600 text-white hover:bg-pink-700 px-6 py-2 rounded-full font-medium\"\n    secondary: \"text-pink-600 border border-pink-600 hover:bg-pink-50 px-6 py-2 rounded-full font-medium\"\n  header:\n    background: \"bg-neutral-50 shadow-none\"\n    border: \"border-b border-neutral-200\"\n  hero:\n    background: \"bg-gradient-to-br from-neutral-100 to-neutral-200\"\n"
-        };
-        if (!themes[name]) {
-            throw new Error("Theme '".concat(name, "' not found"));
-        }
-        return themes[name];
-    };
-    ThemeLoader.themes = new Map();
-    return ThemeLoader;
-}());
-exports.ThemeLoader = ThemeLoader;

package/dist/themes/corporate.d.ts

@@ -1,32 +0,0 @@
-export declare const corporateTheme: {
-    colors: {
-        primary: {
-            50: string;
-            100: string;
-            500: string;
-            600: string;
-            700: string;
-        };
-        neutral: {
-            50: string;
-            100: string;
-            700: string;
-            800: string;
-            900: string;
-        };
-        text: {
-            primary: string;
-            secondary: string;
-            inverse: string;
-        };
-    };
-    spacing: {
-        section: string;
-        container: string;
-    };
-    typography: {
-        hero: string;
-        subtitle: string;
-    };
-};
-//# sourceMappingURL=corporate.d.ts.map

package/dist/themes/corporate.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"corporate.d.ts","sourceRoot":"","sources":["../../src/themes/corporate.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8B1B,CAAC"}

package/dist/themes/corporate.js

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.corporateTheme = void 0;
-exports.corporateTheme = {
-    colors: {
-        primary: {
-            50: '#fef7ee',
-            100: '#fdedd3',
-            500: '#f59e0b', // amber-500
-            600: '#d97706', // amber-600
-            700: '#b45309', // amber-700
-        },
-        neutral: {
-            50: '#f8fafc',
-            100: '#f1f5f9',
-            700: '#334155',
-            800: '#1e293b',
-            900: '#0f172a',
-        },
-        text: {
-            primary: '#1f2937',
-            secondary: '#6b7280',
-            inverse: '#ffffff',
-        }
-    },
-    spacing: {
-        section: 'py-20',
-        container: 'max-w-7xl mx-auto px-4 sm:px-6 lg:px-8',
-    },
-    typography: {
-        hero: 'text-4xl md:text-6xl font-bold',
-        subtitle: 'text-xl md:text-2xl',
-    }
-};

package/dist/themes/soft.d.ts

@@ -1,32 +0,0 @@
-export declare const softTheme: {
-    colors: {
-        primary: {
-            50: string;
-            100: string;
-            500: string;
-            600: string;
-            700: string;
-        };
-        neutral: {
-            50: string;
-            100: string;
-            700: string;
-            800: string;
-            900: string;
-        };
-        text: {
-            primary: string;
-            secondary: string;
-            inverse: string;
-        };
-    };
-    spacing: {
-        section: string;
-        container: string;
-    };
-    typography: {
-        hero: string;
-        subtitle: string;
-    };
-};
-//# sourceMappingURL=soft.d.ts.map

package/dist/themes/soft.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"soft.d.ts","sourceRoot":"","sources":["../../src/themes/soft.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BrB,CAAC"}

package/dist/themes/soft.js

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.softTheme = void 0;
-exports.softTheme = {
-    colors: {
-        primary: {
-            50: '#fdf2f8',
-            100: '#fce7f3',
-            500: '#ec4899', // pink-500
-            600: '#db2777', // pink-600
-            700: '#be185d', // pink-700
-        },
-        neutral: {
-            50: '#fefefe',
-            100: '#f9fafb',
-            700: '#6b7280',
-            800: '#4b5563',
-            900: '#374151',
-        },
-        text: {
-            primary: '#374151',
-            secondary: '#9ca3af',
-            inverse: '#ffffff',
-        }
-    },
-    spacing: {
-        section: 'py-16',
-        container: 'max-w-6xl mx-auto px-6 sm:px-8 lg:px-10',
-    },
-    typography: {
-        hero: 'text-3xl md:text-5xl font-semibold',
-        subtitle: 'text-lg md:text-xl',
-    }
-};

package/dist/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE;QACN,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,EAAE,MAAM,CAAC;QAClB,MAAM,EAAE,MAAM,CAAC;QACf,UAAU,EAAE,MAAM,CAAC;QACnB,OAAO,EAAE,MAAM,CAAC;QAChB,IAAI,EAAE,MAAM,CAAC;QACb,aAAa,EAAE,MAAM,CAAC;KACvB,CAAC;IACF,eAAe,CAAC,EAAE;QAChB,GAAG,EAAE,MAAM,CAAC;QACZ,MAAM,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,WAAW,CAAC;QAC1D,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;QAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,UAAU,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAC;QAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,SAAS,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,eAAe,GAAG,MAAM,CAAC;QACrE,eAAe,CAAC,EAAE,MAAM,CAAC;KAC1B,CAAC;IACF,UAAU,EAAE;QACV,UAAU,EAAE;YACV,OAAO,EAAE,MAAM,CAAC;YAChB,SAAS,EAAE,MAAM,CAAC;SACnB,CAAC;QACF,KAAK,EAAE;YACL,EAAE,EAAE,MAAM,CAAC;YACX,EAAE,EAAE,MAAM,CAAC;YACX,IAAI,EAAE,MAAM,CAAC;YACb,EAAE,EAAE,MAAM,CAAC;YACX,EAAE,EAAE,MAAM,CAAC;YACX,KAAK,EAAE,MAAM,CAAC;YACd,KAAK,EAAE,MAAM,CAAC;SACf,CAAC;KACH,CAAC;IACF,OAAO,EAAE;QACP,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,UAAU,EAAE;QACV,MAAM,EAAE,cAAc,CAAC;QACvB,IAAI,EAAE,cAAc,CAAC;QACrB,MAAM,EAAE,cAAc,CAAC;QACvB,MAAM,EAAE,cAAc,CAAC;KACxB,CAAC;CACH;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;CACnC;AAED,MAAM,WAAW,KAAM,SAAQ,WAAW;CAAG"}

package/dist/types.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });