@zc-ui/theme 1.0.0

package/dist/types/__tests__/color-generator.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=color-generator.spec.d.ts.map

package/dist/types/__tests__/color-generator.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-generator.spec.d.ts","sourceRoot":"","sources":["../../../src/__tests__/color-generator.spec.ts"],"names":[],"mappings":""}

package/dist/types/__tests__/component-theme.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=component-theme.spec.d.ts.map

package/dist/types/__tests__/component-theme.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-theme.spec.d.ts","sourceRoot":"","sources":["../../../src/__tests__/component-theme.spec.ts"],"names":[],"mappings":""}

package/dist/types/__tests__/css-layers.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=css-layers.spec.d.ts.map

package/dist/types/__tests__/css-layers.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-layers.spec.d.ts","sourceRoot":"","sources":["../../../src/__tests__/css-layers.spec.ts"],"names":[],"mappings":""}

package/dist/types/__tests__/namespace.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=namespace.spec.d.ts.map

package/dist/types/__tests__/namespace.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"namespace.spec.d.ts","sourceRoot":"","sources":["../../../src/__tests__/namespace.spec.ts"],"names":[],"mappings":""}

package/dist/types/__tests__/presets.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=presets.spec.d.ts.map

package/dist/types/__tests__/presets.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"presets.spec.d.ts","sourceRoot":"","sources":["../../../src/__tests__/presets.spec.ts"],"names":[],"mappings":""}

package/dist/types/__tests__/runtime-theme.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=runtime-theme.spec.d.ts.map

package/dist/types/__tests__/runtime-theme.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"runtime-theme.spec.d.ts","sourceRoot":"","sources":["../../../src/__tests__/runtime-theme.spec.ts"],"names":[],"mappings":""}

package/dist/types/color-generator.d.ts

@@ -0,0 +1,138 @@
+import { ColorScale } from './colors';
+/** RGB triplet (0–255 each) */
+export interface RGB {
+    r: number;
+    g: number;
+    b: number;
+}
+/** HSL triplet (h: 0–360, s: 0–100, l: 0–100) */
+export interface HSL {
+    h: number;
+    s: number;
+    l: number;
+}
+/**
+ * Parse a hex color string (#RGB, #RRGGBB, or without #) into RGB.
+ */
+export declare function hexToRgb(hex: string): RGB;
+/**
+ * Convert RGB to HSL.
+ */
+export declare function rgbToHsl({ r, g, b }: RGB): HSL;
+/**
+ * Convert HSL back to RGB.
+ */
+export declare function hslToRgb({ h, s, l }: HSL): RGB;
+/**
+ * Convert RGB to hex string (#RRGGBB).
+ */
+export declare function rgbToHex({ r, g, b }: RGB): string;
+/**
+ * Convert a hex color directly to HSL.
+ */
+export declare function hexToHsl(hex: string): HSL;
+/**
+ * Convert a hex color directly to another hex by adjusting HSL.
+ */
+export declare function adjustHsl(hex: string, adjustments: Partial<HSL>): string;
+/**
+ * Generate a complete 50–950 color scale from a single base color.
+ *
+ * The base color is mapped to step 500. Lighter steps (50–400) are generated
+ * by increasing lightness, and darker steps (600–950) by decreasing it.
+ *
+ * @param baseHex The brand/base color as a hex string (e.g. '#409eff')
+ * @returns A complete ColorScale object
+ *
+ * @example
+ * ```ts
+ * const scale = generateColorScale('#409eff')
+ * console.log(scale[500]) // '#409eff'
+ * console.log(scale[100]) // light tint
+ * ```
+ */
+export declare function generateColorScale(baseHex: string): ColorScale;
+/**
+ * Input for full palette generation.
+ * Any omitted color will keep its default value.
+ */
+export interface PaletteInput {
+    /** Primary / brand color */
+    primary?: string;
+    /** Success / positive color */
+    success?: string;
+    /** Warning / caution color */
+    warning?: string;
+    /** Danger / error color */
+    danger?: string;
+    /** Info / neutral accent color */
+    info?: string;
+}
+/**
+ * A complete palette containing color scales for all semantic colors.
+ */
+export interface ColorPalette {
+    primary: ColorScale;
+    success: ColorScale;
+    warning: ColorScale;
+    danger: ColorScale;
+    info: ColorScale;
+}
+/**
+ * Generate a complete color palette from one or more brand colors.
+ *
+ * @example
+ * ```ts
+ * // Generate from a single brand color (others keep defaults)
+ * const palette = generatePalette({ primary: '#722ed1' })
+ *
+ * // Generate from all custom colors
+ * const custom = generatePalette({
+ *   primary: '#722ed1',
+ *   success: '#52c41a',
+ *   warning: '#faad14',
+ *   danger: '#ff4d4f',
+ *   info: '#8c8c8c',
+ * })
+ * ```
+ */
+export declare function generatePalette(input?: PaletteInput): ColorPalette;
+/** CSS variable prefix used by ZC UI */
+export declare const CSS_VAR_PREFIX = "--color-zc";
+/**
+ * Generate CSS custom property declarations from a color palette.
+ *
+ * @param palette The palette to convert
+ * @param prefix  CSS variable prefix (default: '--color-zc')
+ * @returns Record of CSS variable name → hex value
+ *
+ * @example
+ * ```ts
+ * const vars = paletteToCssVars(palette)
+ * // vars['--color-zc-primary-500'] = '#409eff'
+ * ```
+ */
+export declare function paletteToCssVars(palette: ColorPalette, prefix?: string): Record<string, string>;
+/**
+ * Generate a CSS string of `:root { ... }` declarations from a palette.
+ * Useful for generating theme CSS files.
+ *
+ * @param palette The palette to convert
+ * @param selector CSS selector (default: ':root')
+ * @param prefix  CSS variable prefix
+ * @returns CSS text
+ */
+export declare function paletteToCssText(palette: ColorPalette, selector?: string, prefix?: string): string;
+/**
+ * Calculate the relative luminance of a hex color (for contrast calculation).
+ */
+export declare function getLuminance(hex: string): number;
+/**
+ * Calculate the contrast ratio between two hex colors (1–21).
+ */
+export declare function getContrastRatio(hex1: string, hex2: string): number;
+/**
+ * Pick the best text color (black or white) for a given background.
+ */
+export declare function getReadableTextColor(bgHex: string): string;
+//# sourceMappingURL=color-generator.d.ts.map

package/dist/types/color-generator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-generator.d.ts","sourceRoot":"","sources":["../../src/color-generator.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAM1C,+BAA+B;AAC/B,MAAM,WAAW,GAAG;IAClB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV;AAED,iDAAiD;AACjD,MAAM,WAAW,GAAG;IAClB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAiBzC;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,GAAG,GAAG,CAkC9C;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,GAAG,GAAG,CA2B9C;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,GAAG,MAAM,CAMjD;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAEzC;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,CAAC,GAAG,CAAC,GAAG,MAAM,CAQxE;AAyBD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,MAAM,GAAG,UAAU,CAuB9D;AAMD;;;GAGG;AACH,MAAM,WAAW,YAAY;IAC3B,4BAA4B;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,2BAA2B;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,kCAAkC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,UAAU,CAAA;IACnB,OAAO,EAAE,UAAU,CAAA;IACnB,OAAO,EAAE,UAAU,CAAA;IACnB,MAAM,EAAE,UAAU,CAAA;IAClB,IAAI,EAAE,UAAU,CAAA;CACjB;AAWD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,eAAe,CAAC,KAAK,GAAE,YAAiB,GAAG,YAAY,CAUtE;AAMD,wCAAwC;AACxC,eAAO,MAAM,cAAc,eAAe,CAAA;AAE1C;;;;;;;;;;;;GAYG;AACH,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,YAAY,EACrB,MAAM,SAAiB,GACtB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAUxB;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,YAAY,EACrB,QAAQ,SAAU,EAClB,MAAM,SAAiB,GACtB,MAAM,CAOR;AAMD;;GAEG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAOhD;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAKnE;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAI1D"}

package/dist/types/colors.d.ts

@@ -0,0 +1,44 @@
+/**
+ * ZC UI Theme - Color Scales
+ *
+ * Each semantic color has a 50–950 ramp (11 steps).
+ * 500 is the base color; 50 is the lightest tint; 950 is the darkest shade.
+ *
+ * Generation method:
+ *   50–400  = base mixed with white (progressively more base color)
+ *   500     = base color
+ *   600–950 = base mixed with black (progressively more black)
+ */
+/** A 50–950 color ramp */
+export type ColorScale = {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+    950: string;
+};
+export declare const primaryScale: ColorScale;
+export declare const successScale: ColorScale;
+export declare const warningScale: ColorScale;
+export declare const dangerScale: ColorScale;
+export declare const infoScale: ColorScale;
+export declare const colorScales: {
+    readonly primary: ColorScale;
+    readonly success: ColorScale;
+    readonly warning: ColorScale;
+    readonly danger: ColorScale;
+    readonly info: ColorScale;
+};
+/** Semantic names for the five color families */
+export type ColorName = keyof typeof colorScales;
+/** light-N variant lookup (1-9) for each color */
+export declare const lightVariants: Record<ColorName, Record<number, string>>;
+/** dark-N variant lookup for each color */
+export declare const darkVariants: Record<ColorName, Record<number, string>>;
+//# sourceMappingURL=colors.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/colors.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,0BAA0B;AAC1B,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,EAAE,MAAM,CAAA;IACV,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;CACZ,CAAA;AAMD,eAAO,MAAM,YAAY,EAAE,UAY1B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,UAY1B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,UAY1B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,UAYzB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,UAYvB,CAAA;AAMD,eAAO,MAAM,WAAW;;;;;;CAMd,CAAA;AAEV,iDAAiD;AACjD,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,WAAW,CAAA;AAOhD,kDAAkD;AAClD,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAMnE,CAAA;AAED,2CAA2C;AAC3C,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAMlE,CAAA"}

package/dist/types/css-layers.d.ts

@@ -0,0 +1,72 @@
+/**
+ * ZC UI Theme - CSS Layer Definitions
+ *
+ * CSS @layer provides a way to control the cascade order of stylesheets,
+ * ensuring that ZC UI component styles have a predictable priority
+ * relative to user overrides and third-party CSS.
+ *
+ * Layer order (lowest to highest specificity):
+ *   1. zc-reset     — CSS reset / normalize (lowest)
+ *   2. zc-tokens    — Design token CSS variables
+ *   3. zc-base      — Base element styles
+ *   4. zc-components — Component styles (buttons, inputs, etc.)
+ *   5. zc-overrides — User / runtime theme overrides (highest)
+ *
+ * Usage in your CSS:
+ *   @layer zc-reset, zc-tokens, zc-base, zc-components, zc-overrides;
+ *
+ *   /* Your overrides automatically win over component styles *\/
+ *   @layer zc-overrides {
+ *     .my-button { ... }
+ *   }
+ *
+ * Programmatic usage:
+ *   import { cssLayerOrder, cssLayerStyleSheet } from '@zc-ui/theme'
+ *   // Inject layer ordering into a shadow DOM or style element
+ */
+/**
+ * The ordered list of CSS layer names used by ZC UI.
+ * Earlier layers have LOWER priority; later layers have HIGHER priority.
+ */
+export declare const cssLayerOrder: readonly ["zc-reset", "zc-tokens", "zc-base", "zc-components", "zc-overrides"];
+/** Union type of all CSS layer names */
+export type ZcCssLayer = (typeof cssLayerOrder)[number];
+/**
+ * The CSS `@layer` declaration string that establishes priority order.
+ *
+ * Place this at the very top of your CSS (before any other rules)
+ * to ensure consistent cascade behavior.
+ *
+ * @example
+ * ```css
+ * @layer zc-reset, zc-tokens, zc-base, zc-components, zc-overrides;
+ * ```
+ */
+export declare const cssLayerDeclaration: string;
+/**
+ * Generate a complete CSS string that sets up the layer order.
+ * Also includes base tokens in the zc-tokens layer.
+ *
+ * Useful for injecting into `<style>` tags or shadow DOM.
+ */
+export declare function generateCssLayerSetup(): string;
+/**
+ * Wrap a CSS string in a named layer.
+ *
+ * @example
+ * ```ts
+ * const myCss = wrapInLayer('zc-overrides', `
+ *   .my-button { background: red; }
+ * `)
+ * ```
+ */
+export declare function wrapInLayer(layer: ZcCssLayer | string, css: string): string;
+/**
+ * Create a CSSStyleSheet-like text with layer ordering for
+ * custom elements or shadow DOM.
+ *
+ * @param layers Custom layer order (default: cssLayerOrder)
+ * @returns CSS text with the @layer declaration
+ */
+export declare function createLayeredStyleSheet(layers?: readonly string[]): string;
+//# sourceMappingURL=css-layers.d.ts.map

package/dist/types/css-layers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-layers.d.ts","sourceRoot":"","sources":["../../src/css-layers.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH;;;GAGG;AACH,eAAO,MAAM,aAAa,gFAMhB,CAAA;AAEV,wCAAwC;AACxC,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAA;AAEvD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,mBAAmB,QAAwC,CAAA;AAExE;;;;;GAKG;AACH,wBAAgB,qBAAqB,IAAI,MAAM,CAW9C;AAED;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAE3E;AAED;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CACrC,MAAM,GAAE,SAAS,MAAM,EAAkB,GACxC,MAAM,CAER"}

package/dist/types/index.d.ts

@@ -0,0 +1,181 @@
+/**
+ * ZC UI Theme - Design tokens and CSS variables
+ */
+export { colorScales, primaryScale, successScale, warningScale, dangerScale, infoScale, lightVariants, darkVariants, } from './colors';
+export type { ColorScale, ColorName } from './colors';
+export { generateColorScale, generatePalette, paletteToCssVars, paletteToCssText, hexToRgb, rgbToHex, hexToHsl, rgbToHsl, hslToRgb, adjustHsl, getLuminance, getContrastRatio, getReadableTextColor, CSS_VAR_PREFIX, } from './color-generator';
+export type { PaletteInput, ColorPalette, RGB, HSL } from './color-generator';
+export { lightTheme, darkTheme, createTheme, mergeThemes, getComponentOverrides, themeToCssText, componentShorthandToCssVars, } from './presets';
+export type { ThemeVariables, ComponentThemeOverrides, ComponentShorthandOverrides, ThemePreset, CreateThemeOptions, } from './presets';
+export { applyTheme, setBrandColor, setBrandColors, setThemeVariable, removeThemeVariable, applyDarkMode, clearThemeOverrides, applyComponentOverrides, removeComponentOverrides, registerTheme, unregisterTheme, getRegisteredTheme, listRegisteredThemes, switchTheme, getCurrentThemeName, createThemeController, } from './runtime-theme';
+export type { ApplyThemeOptions } from './runtime-theme';
+export { cssLayerOrder, cssLayerDeclaration, generateCssLayerSetup, wrapInLayer, createLayeredStyleSheet, } from './css-layers';
+export type { ZcCssLayer } from './css-layers';
+export { createNamespace, applyNamespace, removeNamespace, namespaceToCssText, createVarResolver, DEFAULT_CSS_VAR_PREFIX, } from './namespace';
+export type { CssVarNamespace, CreateNamespaceOptions } from './namespace';
+/**
+ * Legacy single-value color tokens (500 = base).
+ * Kept for backward compatibility.
+ */
+export declare const colors: {
+    readonly primary: string;
+    readonly success: string;
+    readonly warning: string;
+    readonly danger: string;
+    readonly info: string;
+    readonly text: {
+        readonly primary: "#303133";
+        readonly regular: "#606266";
+        readonly secondary: "#909399";
+        readonly placeholder: "#a8abb2";
+    };
+    readonly border: {
+        readonly base: "#dcdfe6";
+        readonly light: "#e4e7ed";
+        readonly lighter: "#ebeef5";
+        readonly extraLight: "#f2f6fc";
+    };
+    readonly fill: {
+        readonly base: "#f0f2f5";
+        readonly light: "#f5f7fa";
+        readonly lighter: "#fafafa";
+    };
+};
+/**
+ * Font size design tokens
+ */
+export declare const fontSizes: {
+    readonly xs: "12px";
+    readonly sm: "13px";
+    readonly base: "14px";
+    readonly md: "16px";
+    readonly lg: "18px";
+    readonly xl: "20px";
+};
+/**
+ * Spacing design tokens
+ */
+export declare const spacing: {
+    readonly xs: "4px";
+    readonly sm: "8px";
+    readonly base: "12px";
+    readonly md: "16px";
+    readonly lg: "24px";
+    readonly xl: "32px";
+};
+/**
+ * Border radius design tokens
+ */
+export declare const borderRadius: {
+    readonly sm: "2px";
+    readonly base: "4px";
+    readonly md: "6px";
+    readonly lg: "8px";
+    readonly round: "20px";
+    readonly circle: "50%";
+};
+/**
+ * Shadow (box-shadow) design tokens.
+ * Used by cards, popovers, modals, etc.
+ */
+export declare const shadows: {
+    readonly sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
+    readonly base: "0 2px 8px 0 rgba(0, 0, 0, 0.08)";
+    readonly md: "0 4px 12px 0 rgba(0, 0, 0, 0.1)";
+    readonly lg: "0 8px 24px 0 rgba(0, 0, 0, 0.12)";
+    readonly xl: "0 16px 48px 0 rgba(0, 0, 0, 0.16)";
+    readonly dark: "0 4px 12px 0 rgba(0, 0, 0, 0.5)";
+};
+/**
+ * Transition design tokens.
+ * Unified animation duration and easing for all components.
+ */
+export declare const transitions: {
+    readonly duration: {
+        readonly fast: "0.15s";
+        readonly base: "0.25s";
+        readonly slow: "0.35s";
+    };
+    readonly timingFunction: {
+        readonly easeIn: "cubic-bezier(0.4, 0, 1, 1)";
+        readonly easeOut: "cubic-bezier(0, 0, 0.2, 1)";
+        readonly easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)";
+        readonly sharp: "cubic-bezier(0.4, 0, 0.6, 1)";
+    };
+};
+/**
+ * Z-index layer tokens.
+ * Ensures consistent stacking order across components.
+ */
+export declare const zIndex: {
+    readonly base: 1;
+    readonly dropdown: 1000;
+    readonly sticky: 1100;
+    readonly fixed: 1200;
+    readonly modal: 1300;
+    readonly popover: 1400;
+    readonly tooltip: 1500;
+    readonly message: 1600;
+};
+/**
+ * CSS variable name prefix
+ */
+export declare const cssVarPrefix = "--zc";
+/**
+ * Dark mode color overrides.
+ * Applied when the `.dark` class is present on <html>.
+ */
+export declare const darkColors: {
+    readonly text: {
+        readonly primary: "#e5eaf3";
+        readonly regular: "#cfd3dc";
+        readonly secondary: "#a3a6ad";
+        readonly placeholder: "#8d9095";
+    };
+    readonly border: {
+        readonly base: "#4c4d4f";
+        readonly light: "#414243";
+        readonly lighter: "#363637";
+        readonly extraLight: "#2b2b2c";
+    };
+    readonly fill: {
+        readonly base: "#303030";
+        readonly light: "#262727";
+        readonly lighter: "#1d1d1d";
+    };
+};
+/**
+ * Toggle dark mode on/off.
+ * Adds or removes the `dark` class on the <html> element.
+ */
+export declare function toggleDark(isDark?: boolean): boolean;
+/**
+ * Check if dark mode is currently active.
+ */
+export declare function isDarkMode(): boolean;
+/**
+ * Set the theme explicitly.
+ * @param mode 'light' or 'dark'
+ */
+export declare function setTheme(mode: 'light' | 'dark'): void;
+/**
+ * Get the current theme mode.
+ */
+export declare function getTheme(): 'light' | 'dark';
+/**
+ * Tailwind CSS v4 theme mapping reference.
+ *
+ * Note: The actual Tailwind integration is handled by `styles.css`
+ * using the CSS-first `@theme` block. This object is kept as a
+ * programmatic reference that includes the full color scale.
+ */
+export declare const tailwindTheme: {
+    readonly colors: {
+        readonly primary: import('./colors').ColorScale;
+        readonly success: import('./colors').ColorScale;
+        readonly warning: import('./colors').ColorScale;
+        readonly danger: import('./colors').ColorScale;
+        readonly info: import('./colors').ColorScale;
+    };
+};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EACL,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,SAAS,EACT,aAAa,EACb,YAAY,GACb,MAAM,UAAU,CAAA;AACjB,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAGrD,OAAO,EACL,kBAAkB,EAClB,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EAChB,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,gBAAgB,EAChB,oBAAoB,EACpB,cAAc,GACf,MAAM,mBAAmB,CAAA;AAC1B,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAG7E,OAAO,EACL,UAAU,EACV,SAAS,EACT,WAAW,EACX,WAAW,EACX,qBAAqB,EACrB,cAAc,EAChB,2BAA2B,GAC1B,MAAM,WAAW,CAAA;AAChB,YAAY,EACZ,cAAc,EACd,uBAAuB,EACvB,2BAA2B,EAC7B,WAAW,EACT,kBAAkB,GACnB,MAAM,WAAW,CAAA;AAGlB,OAAO,EACL,UAAU,EACV,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,mBAAmB,EACnB,aAAa,EACb,mBAAmB,EACnB,uBAAuB,EACvB,wBAAwB,EACxB,aAAa,EACb,eAAe,EACf,kBAAkB,EAClB,oBAAoB,EACpB,WAAW,EACX,mBAAmB,EACnB,qBAAqB,GACtB,MAAM,iBAAiB,CAAA;AACxB,YAAY,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAGxD,OAAO,EACL,aAAa,EACb,mBAAmB,EACnB,qBAAqB,EACrB,WAAW,EACX,uBAAuB,GACxB,MAAM,cAAc,CAAA;AACrB,YAAY,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAG9C,OAAO,EACL,eAAe,EACf,cAAc,EACd,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EACjB,sBAAsB,GACvB,MAAM,aAAa,CAAA;AACpB,YAAY,EAAE,eAAe,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAA;AAI1E;;;GAGG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;CA0BT,CAAA;AAEV;;GAEG;AACH,eAAO,MAAM,SAAS;;;;;;;CAOZ,CAAA;AAEV;;GAEG;AACH,eAAO,MAAM,OAAO;;;;;;;CAOV,CAAA;AAEV;;GAEG;AACH,eAAO,MAAM,YAAY;;;;;;;CAOf,CAAA;AAEV;;;GAGG;AACH,eAAO,MAAM,OAAO;;;;;;;CAOV,CAAA;AAEV;;;GAGG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;;CAYd,CAAA;AAEV;;;GAGG;AACH,eAAO,MAAM,MAAM;;;;;;;;;CAST,CAAA;AAEV;;GAEG;AACH,eAAO,MAAM,YAAY,SAAS,CAAA;AAElC;;;GAGG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;CAkBb,CAAA;AASV;;;GAGG;AACH,wBAAgB,UAAU,CAAC,MAAM,CAAC,EAAE,OAAO,GAAG,OAAO,CAKpD;AAED;;GAEG;AACH,wBAAgB,UAAU,IAAI,OAAO,CAEpC;AAED;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAOrD;AAED;;GAEG;AACH,wBAAgB,QAAQ,IAAI,OAAO,GAAG,MAAM,CAE3C;AAED;;;;;;GAMG;AACH,eAAO,MAAM,aAAa;;;;;;;;CAQhB,CAAA"}

package/dist/types/namespace.d.ts

@@ -0,0 +1,79 @@
+import { PaletteInput } from './color-generator';
+import { ThemeVariables, ThemePreset } from './presets';
+/**
+ * A CSS variable namespace definition.
+ */
+export interface CssVarNamespace {
+    /** Unique name / prefix for this namespace */
+    name: string;
+    /** CSS variables scoped to this namespace */
+    variables: ThemeVariables;
+}
+/**
+ * Options for creating a CSS variable namespace.
+ */
+export interface CreateNamespaceOptions {
+    /** Brand colors to generate scales for */
+    brandColors?: PaletteInput;
+    /** Additional CSS variables */
+    variables?: ThemeVariables;
+    /** A theme preset to use as the base */
+    preset?: ThemePreset;
+}
+/**
+ * Default ZC UI CSS variable prefix.
+ */
+export declare const DEFAULT_CSS_VAR_PREFIX = "--color-zc";
+/**
+ * Create a CSS variable namespace with a custom prefix.
+ *
+ * Variables are generated as `--color-{name}-{semanticColor}-{step}`.
+ *
+ * @example
+ * ```ts
+ * const ns = createNamespace('brand-a', {
+ *   brandColors: { primary: '#722ed1' },
+ * })
+ * // ns.variables['--color-brand-a-primary-500'] = '#...'
+ * ```
+ */
+export declare function createNamespace(name: string, options?: CreateNamespaceOptions): CssVarNamespace;
+/**
+ * Apply a namespace's CSS variables to a target element.
+ *
+ * @param element  The HTML element to apply variables to
+ * @param namespace The namespace to apply
+ *
+ * @example
+ * ```ts
+ * const ns = createNamespace('brand-a', { brandColors: { primary: '#722ed1' } })
+ * applyNamespace(document.querySelector('.brand-a-section'), ns)
+ * ```
+ */
+export declare function applyNamespace(element: HTMLElement, namespace: CssVarNamespace): void;
+/**
+ * Remove a namespace's CSS variables from a target element.
+ */
+export declare function removeNamespace(element: HTMLElement, namespace: CssVarNamespace): void;
+/**
+ * Generate a CSS text block for a namespace.
+ * Useful for creating stylesheets or `<style>` tags.
+ *
+ * @param namespace The namespace to convert
+ * @param selector CSS selector (default: ':root')
+ * @returns CSS text
+ */
+export declare function namespaceToCssText(namespace: CssVarNamespace, selector?: string): string;
+/**
+ * Create a scoped CSS variable resolver.
+ * Returns a function that converts standard ZC variable names
+ * to namespace-specific ones.
+ *
+ * @example
+ * ```ts
+ * const resolve = createVarResolver('brand-a')
+ * resolve('--color-zc-primary-500') // '--color-brand-a-primary-500'
+ * ```
+ */
+export declare function createVarResolver(namespaceName: string): (cssVar: string) => string;
+//# sourceMappingURL=namespace.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"namespace.d.ts","sourceRoot":"","sources":["../../src/namespace.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAGL,KAAK,YAAY,EAClB,MAAM,mBAAmB,CAAA;AAC1B,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAM5D;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,8CAA8C;IAC9C,IAAI,EAAE,MAAM,CAAA;IACZ,6CAA6C;IAC7C,SAAS,EAAE,cAAc,CAAA;CAC1B;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,0CAA0C;IAC1C,WAAW,CAAC,EAAE,YAAY,CAAA;IAC1B,+BAA+B;IAC/B,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,wCAAwC;IACxC,MAAM,CAAC,EAAE,WAAW,CAAA;CACrB;AAMD;;GAEG;AACH,eAAO,MAAM,sBAAsB,eAAe,CAAA;AAElD;;;;;;;;;;;;GAYG;AACH,wBAAgB,eAAe,CAC7B,IAAI,EAAE,MAAM,EACZ,OAAO,GAAE,sBAA2B,GACnC,eAAe,CAkCjB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,cAAc,CAC5B,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,eAAe,GACzB,IAAI,CAIN;AAED;;GAEG;AACH,wBAAgB,eAAe,CAC7B,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,eAAe,GACzB,IAAI,CAIN;AAED;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAChC,SAAS,EAAE,eAAe,EAC1B,QAAQ,SAAU,GACjB,MAAM,CAMR;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB,CAC/B,aAAa,EAAE,MAAM,GACpB,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAQ5B"}