chaincss 1.13.3 → 2.0.0

package/dist/runtime/react.js

@@ -0,0 +1,270 @@
+// src/runtime/react.tsx
+import React, { useMemo, useEffect, useRef, useState } from "react";
+
+// src/runtime/injector.ts
+var StyleInjector = class {
+  styleElement = null;
+  stylesCache = /* @__PURE__ */ new Map();
+  injectedStyles = /* @__PURE__ */ new Set();
+  constructor() {
+    this.initStyleElement();
+  }
+  initStyleElement() {
+    if (typeof document === "undefined")
+      return;
+    const existing = document.getElementById("chaincss-runtime-styles");
+    if (existing) {
+      this.styleElement = existing;
+      return;
+    }
+    const style = document.createElement("style");
+    style.id = "chaincss-runtime-styles";
+    style.setAttribute("data-chaincss", "runtime");
+    document.head.appendChild(style);
+    this.styleElement = style;
+  }
+  generateClassName(styleId) {
+    let hash = 0;
+    for (let i = 0; i < styleId.length; i++) {
+      hash = (hash << 5) - hash + styleId.charCodeAt(i);
+      hash |= 0;
+    }
+    return `c_${Math.abs(hash).toString(36)}`;
+  }
+  generateCSS(style, className) {
+    let css = "";
+    const selector = `.${className}`;
+    let normalStyles = "";
+    for (const [key, value] of Object.entries(style)) {
+      if (key === "selectors" || key === "hover")
+        continue;
+      const kebabKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
+      normalStyles += `  ${kebabKey}: ${value};
+`;
+    }
+    if (normalStyles) {
+      css += `${selector} {
+${normalStyles}}
+`;
+    }
+    if (style.hover && typeof style.hover === "object") {
+      let hoverStyles = "";
+      for (const [key, value] of Object.entries(style.hover)) {
+        const kebabKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
+        hoverStyles += `  ${kebabKey}: ${value};
+`;
+      }
+      if (hoverStyles) {
+        css += `${selector}:hover {
+${hoverStyles}}
+`;
+      }
+    }
+    return css;
+  }
+  inject(styleId, style) {
+    if (this.stylesCache.has(styleId)) {
+      return this.stylesCache.get(styleId);
+    }
+    const className = this.generateClassName(styleId);
+    const css = this.generateCSS(style, className);
+    this.stylesCache.set(styleId, className);
+    if (!this.injectedStyles.has(styleId) && this.styleElement && css) {
+      this.styleElement.textContent += css;
+      this.injectedStyles.add(styleId);
+    }
+    return className;
+  }
+  injectMultiple(styles) {
+    const result = {};
+    let allCSS = "";
+    for (const [styleId, style] of Object.entries(styles)) {
+      if (this.stylesCache.has(styleId)) {
+        result[styleId] = this.stylesCache.get(styleId);
+        continue;
+      }
+      const className = this.generateClassName(styleId);
+      const css = this.generateCSS(style, className);
+      this.stylesCache.set(styleId, className);
+      result[styleId] = className;
+      allCSS += css;
+    }
+    if (allCSS && this.styleElement) {
+      this.styleElement.textContent += allCSS;
+    }
+    return result;
+  }
+  update(styleId, style) {
+    this.injectedStyles.delete(styleId);
+    const className = this.generateClassName(styleId);
+    const css = this.generateCSS(style, className);
+    this.stylesCache.set(styleId, className);
+    if (this.styleElement) {
+      let allCSS = "";
+      for (const [id, className2] of this.stylesCache) {
+      }
+      this.styleElement.textContent = allCSS;
+      this.injectedStyles.add(styleId);
+    }
+    return className;
+  }
+  remove(styleId) {
+    this.injectedStyles.delete(styleId);
+    this.stylesCache.delete(styleId);
+    if (this.styleElement) {
+      let allCSS = "";
+      for (const [id, className] of this.stylesCache) {
+      }
+      this.styleElement.textContent = allCSS;
+    }
+  }
+  getStyleElement() {
+    return this.styleElement;
+  }
+  clear() {
+    this.stylesCache.clear();
+    this.injectedStyles.clear();
+    if (this.styleElement) {
+      this.styleElement.textContent = "";
+    }
+  }
+};
+var styleInjector = new StyleInjector();
+function compileRuntime(styles) {
+  return styleInjector.injectMultiple(styles);
+}
+
+// src/runtime/react.tsx
+import { jsx } from "react/jsx-runtime";
+var styleCache = /* @__PURE__ */ new Map();
+function useChainStyles(styles, deps = [], options = {}) {
+  const { cache = true, namespace = "chain", watch = false } = options;
+  const id = useRef(`chain-${Math.random().toString(36).substr(2, 9)}`);
+  const [classNames, setClassNames] = useState({});
+  const processed = useMemo(() => {
+    const resolvedStyles = typeof styles === "function" ? styles() : styles;
+    if (!resolvedStyles || Object.keys(resolvedStyles).length === 0) {
+      return { classNames: {}, css: "" };
+    }
+    const cacheKey = JSON.stringify(resolvedStyles);
+    if (cache && styleCache.has(cacheKey)) {
+      return { classNames: styleCache.get(cacheKey), css: "" };
+    }
+    const compiledStyles = {};
+    const newClassNames = {};
+    for (const [key, styleDef] of Object.entries(resolvedStyles)) {
+      const className = `${namespace}-${key}-${id.current}`;
+      const styleObj = typeof styleDef === "function" ? styleDef() : styleDef;
+      newClassNames[key] = className;
+      compiledStyles[`${key}_${id.current}`] = {
+        selectors: [`.${className}`],
+        ...styleObj
+      };
+    }
+    const result = compileRuntime(compiledStyles);
+    if (cache) {
+      styleCache.set(cacheKey, result);
+    }
+    return { classNames: result, css: "" };
+  }, [styles, namespace, id.current, ...deps]);
+  useEffect(() => {
+    setClassNames(processed.classNames);
+    return () => {
+      if (!watch) {
+        for (const key of Object.keys(processed.classNames)) {
+          styleInjector.remove(`${namespace}-${key}-${id.current}`);
+        }
+      }
+    };
+  }, [processed.classNames, watch]);
+  return classNames;
+}
+function useDynamicChainStyles(styleFactory, deps = [], options) {
+  const styles = useMemo(() => styleFactory(), deps);
+  return useChainStyles(styles, deps, options);
+}
+function useThemeChainStyles(styles, theme, options) {
+  const themedStyles = useMemo(() => {
+    if (typeof styles === "function")
+      return styles(theme);
+    return styles;
+  }, [styles, theme]);
+  return useChainStyles(themedStyles, [], options);
+}
+function ChainCSSGlobal({ styles }) {
+  useChainStyles(styles, [], { watch: true });
+  return null;
+}
+function cx(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+var debugEnabled = false;
+function enableChainCSSDebug() {
+  if (typeof window !== "undefined") {
+    debugEnabled = true;
+    window.__CHAINCSS_DEBUG__ = true;
+    console.log("\u{1F50D} ChainCSS Debug Mode Enabled");
+  }
+}
+function disableChainCSSDebug() {
+  if (typeof window !== "undefined") {
+    debugEnabled = false;
+    window.__CHAINCSS_DEBUG__ = false;
+    console.log("\u{1F50D} ChainCSS Debug Mode Disabled");
+  }
+}
+function isDebugEnabled() {
+  return debugEnabled || typeof window !== "undefined" && window.__CHAINCSS_DEBUG__;
+}
+function withChainStyles(styles, options) {
+  return function WrappedComponent(props) {
+    const classNames = useChainStyles(
+      typeof styles === "function" ? styles(props) : styles,
+      [],
+      // ← Add empty deps array
+      options
+    );
+    const Component = props.component || props.wrappedComponent;
+    return /* @__PURE__ */ jsx(Component, { ...props, chainStyles: classNames });
+  };
+}
+function createStyledComponent(elementType, styles, options) {
+  const StyledComponent = (props) => {
+    const { className: additionalClassName, ...rest } = props;
+    const classNames = useChainStyles(styles, [], options);
+    const combinedClassName = [classNames.root, additionalClassName].filter(Boolean).join(" ");
+    return React.createElement(elementType, {
+      ...rest,
+      className: combinedClassName
+    });
+  };
+  const displayName = typeof elementType === "string" ? elementType : elementType.displayName || "Component";
+  StyledComponent.displayName = `ChainCSS.${displayName}`;
+  return StyledComponent;
+}
+function createStyledComponents(components) {
+  const result = {};
+  for (const [name, config] of Object.entries(components)) {
+    const { element = "div", styles, options } = config;
+    result[name] = createStyledComponent(element, styles, options);
+  }
+  return result;
+}
+function useComputedStyles(styles, props, deps = [], options) {
+  const computedStyles = useMemo(() => styles(props), [props, ...deps]);
+  return useChainStyles(computedStyles, deps, options);
+}
+export {
+  ChainCSSGlobal,
+  createStyledComponent,
+  createStyledComponents,
+  cx,
+  disableChainCSSDebug,
+  enableChainCSSDebug,
+  isDebugEnabled,
+  useChainStyles,
+  useComputedStyles,
+  useDynamicChainStyles,
+  useThemeChainStyles,
+  withChainStyles
+};

package/dist/runtime/types.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Runtime ChainCSS Type Definitions
+ * Only needed if using runtime mode
+ */
+export interface RuntimeStyleDefinition {
+    selectors: string[];
+    hover?: Record<string, string | number>;
+    [cssProperty: string]: any;
+}
+export interface UseChainStylesOptions {
+    /** Cache compiled styles */
+    cache?: boolean;
+    /** CSS class namespace prefix */
+    namespace?: string;
+    /** Watch for changes (development only) */
+    watch?: boolean;
+}
+export interface RuntimeCompiledResult {
+    [key: string]: string;
+}
+export interface StyleInjector {
+    inject(styleId: string, style: RuntimeStyleDefinition): string;
+    injectMultiple(styles: Record<string, RuntimeStyleDefinition>): Record<string, string>;
+    update(styleId: string, style: RuntimeStyleDefinition): string;
+    remove(styleId: string): void;
+    clear(): void;
+    getStyleElement(): HTMLStyleElement | null;
+}
+export interface UseAtomicClassesReturn {
+    classes: Record<string, string>;
+    cx: (name: string) => string;
+    cn: (...names: string[]) => string;
+}
+export interface HMRPayload {
+    file: string;
+    classes: Record<string, string>;
+    timestamp: number;
+}
+export interface ChainCSSDebugger {
+    enabled: boolean;
+    log: (...args: any[]) => void;
+    warn: (...args: any[]) => void;
+    error: (...args: any[]) => void;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/runtime/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/runtime/types.ts"],"names":[],"mappings":"AAEA;;;GAGG;AAEH,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;IACxC,CAAC,WAAW,EAAE,MAAM,GAAG,GAAG,CAAC;CAC5B;AAED,MAAM,WAAW,qBAAqB;IACpC,4BAA4B;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,qBAAqB;IACpC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,aAAa;IAC5B,MAAM,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,sBAAsB,GAAG,MAAM,CAAC;IAC/D,cAAc,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,sBAAsB,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACvF,MAAM,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,sBAAsB,GAAG,MAAM,CAAC;IAC/D,MAAM,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,KAAK,IAAI,IAAI,CAAC;IACd,eAAe,IAAI,gBAAgB,GAAG,IAAI,CAAC;CAC5C;AAGD,MAAM,WAAW,sBAAsB;IACrC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,EAAE,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7B,EAAE,EAAE,CAAC,GAAG,KAAK,EAAE,MAAM,EAAE,KAAK,MAAM,CAAC;CACpC;AAGD,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,SAAS,EAAE,MAAM,CAAC;CACnB;AAGD,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,OAAO,CAAC;IACjB,GAAG,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IAC9B,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IAC/B,KAAK,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;CACjC"}

package/dist/runtime/utils.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Runtime utility functions for ChainCSS
+ */
+/**
+ * Generate a unique ID for style injection
+ */
+export declare function generateStyleId(prefix?: string): string;
+/**
+ * Simple hash function for class name generation
+ */
+export declare function hashString(str: string): string;
+/**
+ * Convert camelCase to kebab-case
+ */
+export declare function kebabCase(str: string): string;
+/**
+ * Check if code is running in browser
+ */
+export declare const isBrowser: boolean;
+/**
+ * Check if code is running in development mode
+ */
+export declare const isDevelopment: boolean;
+/**
+ * Check if code is running in production mode
+ */
+export declare const isProduction: boolean;
+/**
+ * Debounce function for HMR updates
+ */
+export declare function debounce<T extends (...args: any[]) => any>(fn: T, delay: number): (...args: Parameters<T>) => void;
+/**
+ * Memoize function results
+ */
+export declare function memoize<T extends (...args: any[]) => any>(fn: T): T & {
+    cache: Map<string, ReturnType<T>>;
+};
+/**
+ * Safe class name joiner (like clsx)
+ */
+export declare function cn(...classes: (string | undefined | null | false)[]): string;
+/**
+ * Warn in development only
+ */
+export declare function devWarn(message: string, ...args: any[]): void;
+/**
+ * Log in development only
+ */
+export declare function devLog(message: string, ...args: any[]): void;
+/**
+ * Error logging (always)
+ */
+export declare function logError(message: string, error?: Error): void;
+/**
+ * Create a debug logger
+ */
+export declare function createDebugger(module: string): {
+    log: (...args: any[]) => void;
+    warn: (...args: any[]) => void;
+    error: (...args: any[]) => void;
+};
+//# sourceMappingURL=utils.d.ts.map

package/dist/runtime/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/runtime/utils.ts"],"names":[],"mappings":"AAEA;;GAEG;AAEH;;GAEG;AACH,wBAAgB,eAAe,CAAC,MAAM,GAAE,MAAgB,GAAG,MAAM,CAIhE;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAO9C;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAE7C;AAED;;GAEG;AACH,eAAO,MAAM,SAAS,SAAmE,CAAC;AAE1F;;GAEG;AACH,eAAO,MAAM,aAAa,SAAyC,CAAC;AAEpE;;GAEG;AACH,eAAO,MAAM,YAAY,SAAwC,CAAC;AAElE;;GAEG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,EACxD,EAAE,EAAE,CAAC,EACL,KAAK,EAAE,MAAM,GACZ,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAOlC;AAED;;GAEG;AACH,wBAAgB,OAAO,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,EACvD,EAAE,EAAE,CAAC,GACJ,CAAC,GAAG;IAAE,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAA;CAAE,CAe3C;AAED;;GAEG;AACH,wBAAgB,EAAE,CAAC,GAAG,OAAO,EAAE,CAAC,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,KAAK,CAAC,EAAE,GAAG,MAAM,CAE5E;AAED;;GAEG;AACH,wBAAgB,OAAO,CAAC,OAAO,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI,CAI7D;AAED;;GAEG;AACH,wBAAgB,MAAM,CAAC,OAAO,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI,CAI5D;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,CAE7D;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM;mBAE1B,GAAG,EAAE;oBACJ,GAAG,EAAE;qBACJ,GAAG,EAAE;EAEzB"}

package/dist/runtime/vue.d.ts

@@ -0,0 +1,52 @@
+import { Ref } from 'vue';
+export interface UseAtomicClassesOptions {
+    atomic?: boolean;
+    global?: boolean;
+}
+export declare function useAtomicClasses(styles: any, options?: UseAtomicClassesOptions): {
+    classes: import("vue").ComputedRef<Record<string, string>>;
+    cx: (name: string) => string;
+    cn: (...names: string[]) => string;
+};
+export declare const ChainCSSGlobal: {
+    name: string;
+    props: {
+        styles: {
+            type: ObjectConstructor;
+            required: boolean;
+        };
+    };
+    setup(props: any): () => null;
+};
+/**
+ * Create a styled Vue component
+ */
+export declare function createStyledComponent(styles: Record<string, any> | (() => Record<string, any>), tag?: string): {
+    name: string;
+    props: {
+        className: {
+            type: StringConstructor;
+            default: string;
+        };
+    };
+    setup(props: any, { slots, attrs }: any): () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>;
+};
+/**
+ * Create multiple styled Vue components at once
+ */
+export declare function createStyledComponents(components: Record<string, any>): Record<string, any>;
+/**
+ * CSS-in-JS with computed props (Vue)
+ */
+export declare function useComputedStyles<T extends Record<string, any>>(styles: (props: T) => Record<string, any>, props: T): {
+    classes: import("vue").ComputedRef<Record<string, string>>;
+    rootClass: import("vue").ComputedRef<string>;
+};
+/**
+ * Style provider for theme/context (Vue)
+ */
+export declare function provideStyleContext(theme: any): Ref<any, any>;
+export declare function injectStyleContext(): Ref<any, any>;
+//# sourceMappingURL=vue.d.ts.map

package/dist/runtime/vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue.d.ts","sourceRoot":"","sources":["../../src/runtime/vue.ts"],"names":[],"mappings":"AAEA,OAAO,EAA8E,GAAG,EAAE,MAAM,KAAK,CAAC;AAKtG,MAAM,WAAW,uBAAuB;IACtC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,GAAG,EACX,OAAO,GAAE,uBAA4B;;eA+BxB,MAAM;mBACF,MAAM,EAAE;EAE1B;AAGD,eAAO,MAAM,cAAc;;;;;;;;iBAQZ,GAAG;CAIjB,CAAC;AAEF;;GAEG;AACH,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,CAAC,MAAM,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,EACzD,GAAG,SAAQ;;;;;;;;iBAOI,GAAG,oBAAoB,GAAG;;;EAiB1C;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAS3F;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC7D,MAAM,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACzC,KAAK,EAAE,CAAC;;;EAST;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,GAAG,iBAI7C;AAED,wBAAgB,kBAAkB,kBAEjC"}

package/dist/runtime/vue.js

@@ -0,0 +1,232 @@
+// src/runtime/vue.ts
+import { ref, computed, inject, provide, h } from "vue";
+
+// src/runtime/injector.ts
+var StyleInjector = class {
+  styleElement = null;
+  stylesCache = /* @__PURE__ */ new Map();
+  injectedStyles = /* @__PURE__ */ new Set();
+  constructor() {
+    this.initStyleElement();
+  }
+  initStyleElement() {
+    if (typeof document === "undefined")
+      return;
+    const existing = document.getElementById("chaincss-runtime-styles");
+    if (existing) {
+      this.styleElement = existing;
+      return;
+    }
+    const style = document.createElement("style");
+    style.id = "chaincss-runtime-styles";
+    style.setAttribute("data-chaincss", "runtime");
+    document.head.appendChild(style);
+    this.styleElement = style;
+  }
+  generateClassName(styleId) {
+    let hash = 0;
+    for (let i = 0; i < styleId.length; i++) {
+      hash = (hash << 5) - hash + styleId.charCodeAt(i);
+      hash |= 0;
+    }
+    return `c_${Math.abs(hash).toString(36)}`;
+  }
+  generateCSS(style, className) {
+    let css = "";
+    const selector = `.${className}`;
+    let normalStyles = "";
+    for (const [key, value] of Object.entries(style)) {
+      if (key === "selectors" || key === "hover")
+        continue;
+      const kebabKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
+      normalStyles += `  ${kebabKey}: ${value};
+`;
+    }
+    if (normalStyles) {
+      css += `${selector} {
+${normalStyles}}
+`;
+    }
+    if (style.hover && typeof style.hover === "object") {
+      let hoverStyles = "";
+      for (const [key, value] of Object.entries(style.hover)) {
+        const kebabKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
+        hoverStyles += `  ${kebabKey}: ${value};
+`;
+      }
+      if (hoverStyles) {
+        css += `${selector}:hover {
+${hoverStyles}}
+`;
+      }
+    }
+    return css;
+  }
+  inject(styleId, style) {
+    if (this.stylesCache.has(styleId)) {
+      return this.stylesCache.get(styleId);
+    }
+    const className = this.generateClassName(styleId);
+    const css = this.generateCSS(style, className);
+    this.stylesCache.set(styleId, className);
+    if (!this.injectedStyles.has(styleId) && this.styleElement && css) {
+      this.styleElement.textContent += css;
+      this.injectedStyles.add(styleId);
+    }
+    return className;
+  }
+  injectMultiple(styles) {
+    const result = {};
+    let allCSS = "";
+    for (const [styleId, style] of Object.entries(styles)) {
+      if (this.stylesCache.has(styleId)) {
+        result[styleId] = this.stylesCache.get(styleId);
+        continue;
+      }
+      const className = this.generateClassName(styleId);
+      const css = this.generateCSS(style, className);
+      this.stylesCache.set(styleId, className);
+      result[styleId] = className;
+      allCSS += css;
+    }
+    if (allCSS && this.styleElement) {
+      this.styleElement.textContent += allCSS;
+    }
+    return result;
+  }
+  update(styleId, style) {
+    this.injectedStyles.delete(styleId);
+    const className = this.generateClassName(styleId);
+    const css = this.generateCSS(style, className);
+    this.stylesCache.set(styleId, className);
+    if (this.styleElement) {
+      let allCSS = "";
+      for (const [id, className2] of this.stylesCache) {
+      }
+      this.styleElement.textContent = allCSS;
+      this.injectedStyles.add(styleId);
+    }
+    return className;
+  }
+  remove(styleId) {
+    this.injectedStyles.delete(styleId);
+    this.stylesCache.delete(styleId);
+    if (this.styleElement) {
+      let allCSS = "";
+      for (const [id, className] of this.stylesCache) {
+      }
+      this.styleElement.textContent = allCSS;
+    }
+  }
+  getStyleElement() {
+    return this.styleElement;
+  }
+  clear() {
+    this.stylesCache.clear();
+    this.injectedStyles.clear();
+    if (this.styleElement) {
+      this.styleElement.textContent = "";
+    }
+  }
+};
+var styleInjector = new StyleInjector();
+function compileRuntime(styles) {
+  return styleInjector.injectMultiple(styles);
+}
+
+// src/runtime/vue.ts
+var CHAIN_CSS_KEY = Symbol("chaincss");
+function useAtomicClasses(styles, options = {}) {
+  const { atomic = true, global = false } = options;
+  const id = `chain-${Math.random().toString(36).substr(2, 9)}`;
+  const classes = computed(() => {
+    const resolvedStyles = typeof styles === "function" ? styles() : styles?.value || styles;
+    if (!resolvedStyles)
+      return {};
+    const compiledStyles = {};
+    const classNames = {};
+    for (const [key, styleDef] of Object.entries(resolvedStyles)) {
+      const className = `${key}-${id}`;
+      const styleObj = typeof styleDef === "function" ? styleDef() : styleDef;
+      classNames[key] = className;
+      compiledStyles[`${key}_${id}`] = {
+        selectors: [`.${className}`],
+        ...styleObj
+      };
+    }
+    return compileRuntime(compiledStyles);
+  });
+  return {
+    classes,
+    cx: (name) => classes.value[name],
+    cn: (...names) => names.map((name) => classes.value[name]).filter(Boolean).join(" ")
+  };
+}
+var ChainCSSGlobal = {
+  name: "ChainCSSGlobal",
+  props: {
+    styles: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    useAtomicClasses(props.styles);
+    return () => null;
+  }
+};
+function createStyledComponent(styles, tag = "div") {
+  return {
+    name: "ChainCSSStyledComponent",
+    props: {
+      className: { type: String, default: "" }
+    },
+    setup(props, { slots, attrs }) {
+      const resolvedStyles = typeof styles === "function" ? styles() : styles;
+      const { classes } = useAtomicClasses({ root: resolvedStyles });
+      const combinedClass = computed(() => {
+        const rootClass = classes.value?.root || "";
+        return [rootClass, props.className].filter(Boolean).join(" ");
+      });
+      return () => {
+        return h(tag, {
+          class: combinedClass.value,
+          ...attrs
+        }, slots.default?.());
+      };
+    }
+  };
+}
+function createStyledComponents(components) {
+  const result = {};
+  for (const [name, config] of Object.entries(components)) {
+    const { element = "div", styles } = config;
+    result[name] = createStyledComponent(styles, element);
+  }
+  return result;
+}
+function useComputedStyles(styles, props) {
+  const computedStyles = computed(() => ({ root: styles(props) }));
+  const { classes } = useAtomicClasses(computedStyles);
+  return {
+    classes,
+    rootClass: computed(() => classes.value?.root || "")
+  };
+}
+function provideStyleContext(theme) {
+  const themeRef = ref(theme);
+  provide(CHAIN_CSS_KEY, themeRef);
+  return themeRef;
+}
+function injectStyleContext() {
+  return inject(CHAIN_CSS_KEY, ref({}));
+}
+export {
+  ChainCSSGlobal,
+  createStyledComponent,
+  createStyledComponents,
+  injectStyleContext,
+  provideStyleContext,
+  useAtomicClasses,
+  useComputedStyles
+};