@stackwright/themes 0.2.0

package/dist/ThemeProvider.d.ts

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,19 @@
+"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

@@ -0,0 +1,5 @@
+export * from './types';
+export * from './ThemeProvider';
+export * from './themeLoader';
+export type { ThemeConfig, Theme, ComponentStyle } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"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/index.js

@@ -0,0 +1,19 @@
+"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 __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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./types"), exports);
+__exportStar(require("./ThemeProvider"), exports);
+__exportStar(require("./themeLoader"), exports);

package/dist/themeLoader.d.ts

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,84 @@
+"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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,34 @@
+"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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,34 @@
+"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

@@ -0,0 +1,66 @@
+export 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;
+    };
+}
+export interface ComponentStyle {
+    base?: string;
+    primary?: string;
+    secondary?: string;
+    outline?: string;
+    shadow?: string;
+    nav?: string;
+    text?: string;
+    [key: string]: string | undefined;
+}
+export interface Theme extends ThemeConfig {
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"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

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

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@stackwright/themes",
+  "version": "0.2.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "react": "^18.0.0",
+    "js-yaml": "^4.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/js-yaml": "^4.0.0",
+    "typescript": "^5.0.0"
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch"
+  }
+}

package/src/ThemeProvider.tsx

@@ -0,0 +1,30 @@
+import React, { createContext, useContext, ReactNode } from 'react';
+import { Theme } from './types';
+
+interface ThemeContextType {
+  theme: Theme;
+  setTheme?: (theme: Theme) => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+interface ThemeProviderProps {
+  theme: Theme;
+  children: ReactNode;
+}
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({ theme, children }) => {
+  return (
+    <ThemeContext.Provider value={{ theme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export const useTheme = (): ThemeContextType => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+};

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './types';
+export * from './ThemeProvider';
+export * from './themeLoader';
+export type { ThemeConfig, Theme, ComponentStyle } from './types';

package/src/themeLoader.ts

@@ -0,0 +1,128 @@
+import * as yaml from 'js-yaml';
+import { Theme } from './types';
+
+export class ThemeLoader {
+  private static themes: Map<string, Theme> = new Map();
+
+  static loadThemeFromYaml(yamlContent: string): Theme {
+    try {
+      const theme = yaml.load(yamlContent) as Theme;
+      this.themes.set(theme.name, theme);
+      return theme;
+    } catch (error) {
+      throw new Error(`Failed to parse theme YAML: ${error}`);
+    }
+  }
+
+  static loadThemeFromFile(themeName: string): Theme {
+    // In a real implementation, this would load from the file system
+    // For now, we'll embed the themes
+    const themeData = this.getEmbeddedTheme(themeName);
+    return this.loadThemeFromYaml(themeData);
+  }
+
+  static getTheme(name: string): Theme | undefined {
+    return this.themes.get(name);
+  }
+
+  static getAllThemes(): Theme[] {
+    return Array.from(this.themes.values());
+  }
+
+  static registerCustomTheme(theme: Theme): void {
+    this.themes.set(theme.name, theme);
+    console.log(`🎨 Registered custom theme: ${theme.name}`);
+  }
+
+  static loadCustomTheme(theme: Theme): Theme {
+    this.registerCustomTheme(theme);
+    return theme;
+  }
+
+  private static getEmbeddedTheme(name: string): string {
+    const themes: Record<string, string> = {
+      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];
+  }
+}

package/src/themes/corporate.ts

@@ -0,0 +1,31 @@
+export const 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/src/themes/corporate.yaml

@@ -0,0 +1,36 @@
+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"

package/src/themes/soft.ts

@@ -0,0 +1,32 @@
+export const 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/src/themes/soft.yaml

@@ -0,0 +1,36 @@
+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"

package/src/types.ts

@@ -0,0 +1,66 @@
+export 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;
+  };
+}
+
+export interface ComponentStyle {
+  base?: string;
+  primary?: string;
+  secondary?: string;
+  outline?: string;
+  shadow?: string;
+  nav?: string;
+  text?: string;
+  [key: string]: string | undefined;
+}
+
+export interface Theme extends ThemeConfig {}

package/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "es6"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": false,
+    "jsx": "react-jsx",
+    "module": "commonjs",
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "declaration": true,
+    "declarationMap": true
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}

package/tsup.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: ['src/index.ts'],
+  format: ['cjs', 'esm'],
+  dts: false, // Disable type generation temporarily
+  splitting: false,
+  sourcemap: true,
+  clean: true,
+});