@ngneers/controls-themes 0.0.1-pre2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 NGneers
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# @ngneers/controls-themes

package/api/index.d.ts

@@ -0,0 +1,17 @@
+export * from './style/apply-theme';
+export * from './style/get-class-name';
+export * from './style/style-scope';
+export * from './style/upsert-theme-style-element';
+export * from './theme/classes';
+export * from './theme/combine-variable-variations';
+export * from './theme/combine-variations';
+export * from './theme/control-template';
+export * from './theme/css';
+export * from './theme/repeat-variables';
+export * from './theme/scoped';
+export * from './theme/template-variable';
+export * from './theme/theme';
+export * from './theme/theme-part';
+export * from './theme/variable';
+export * from './theme/variable-template';
+//# sourceMappingURL=index.d.ts.map

package/api/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/api/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oCAAoC,CAAC;AACnD,cAAc,iBAAiB,CAAC;AAChC,cAAc,qCAAqC,CAAC;AACpD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,aAAa,CAAC;AAC5B,cAAc,0BAA0B,CAAC;AACzC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC"}

package/api/index.js

@@ -0,0 +1,16 @@
+export * from './style/apply-theme';
+export * from './style/get-class-name';
+export * from './style/style-scope';
+export * from './style/upsert-theme-style-element';
+export * from './theme/classes';
+export * from './theme/combine-variable-variations';
+export * from './theme/combine-variations';
+export * from './theme/control-template';
+export * from './theme/css';
+export * from './theme/repeat-variables';
+export * from './theme/scoped';
+export * from './theme/template-variable';
+export * from './theme/theme';
+export * from './theme/theme-part';
+export * from './theme/variable';
+export * from './theme/variable-template';

package/api/style/apply-theme.d.ts

@@ -0,0 +1,33 @@
+import { type StyleScope } from './style-scope';
+import { type Theme } from '../theme/theme';
+import { type ThemePart } from '../theme/theme-part';
+export type ApplyThemeOptions = {
+    /**
+     * The document to apply the theme to. Defaults to `window.document`.
+     * This is useful for server-side rendering or when you want to apply the theme to a
+     * specific document instance.
+     * @default `window.document`
+     */
+    document: Document;
+    /**
+     * The CSS layer to apply the theme to.
+     * If not provided, the theme will be applied to the default layer.
+     * @default `undefined`
+     */
+    layer?: string;
+    /**
+     * Defines whether the theme should be applied globally or scoped to a specific element.
+     * If not provided, the theme will be applied globally.
+     * @default `undefined`
+     */
+    styleScope?: StyleScope;
+    /**
+     * A prefix to add to the class names and CSS variables of the theme parts.
+     * This is useful for avoiding name collisions in the global scope.
+     * @default `'ngn-'`
+     */
+    namePrefix: string;
+};
+export declare function applyTheme<T extends Theme>(theme: T, scopes: T['parts'][number]['scope'][], options: ApplyThemeOptions): void;
+export declare function applyGlobalStyles(globalStyles: ThemePart, options: ApplyThemeOptions): void;
+//# sourceMappingURL=apply-theme.d.ts.map

package/api/style/apply-theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"apply-theme.d.ts","sourceRoot":"","sources":["../../../../src/api/style/apply-theme.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAGrD,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;;;OAKG;IACH,QAAQ,EAAE,QAAQ,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;;OAIG;IACH,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,UAAU,CAAC,CAAC,SAAS,KAAK,EACxC,KAAK,EAAE,CAAC,EACR,MAAM,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,EAAE,EACrC,OAAO,EAAE,iBAAiB,QA0C3B;AAED,wBAAgB,iBAAiB,CAAC,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,iBAAiB,QA2BpF"}

package/api/style/apply-theme.js

@@ -0,0 +1,260 @@
+import { getClassName } from './get-class-name';
+import {} from './style-scope';
+import { upsertThemeStyleElement } from './upsert-theme-style-element';
+import {} from '../theme/theme';
+import {} from '../theme/theme-part';
+import { groupArrayUsing } from '../utils/group-array-using';
+export function applyTheme(theme, scopes, options) {
+    const opt = {
+        document: options.document ?? window.document,
+        layer: options.layer,
+        scope: options.styleScope,
+        namePrefix: options.namePrefix ?? 'ngn-',
+    };
+    const parts = groupArrayUsing(getThemePartsByScopes(theme, scopes), x => x.scope);
+    // variable style elements
+    for (const [scope, scopeParts] of parts) {
+        const css = buildVariablesCss(scopeParts, opt);
+        upsertThemeStyleElement(opt.document, {
+            kind: 'variables',
+            'theme-scope': scope,
+            'style-scope': styleScopeToIdentifier(opt.scope),
+        }, css);
+    }
+    // style element
+    const allParts = scopes.map(scope => parts.get(scope) ?? scope);
+    for (const part of allParts) {
+        if (typeof part === 'string') {
+            console.warn(`No theme parts found for scope '${part}'. Skipping style generation.`);
+            continue;
+        }
+        const css = buildStyleCss(part, opt);
+        upsertThemeStyleElement(opt.document, {
+            kind: 'styles',
+            'theme-scope': part[0]?.scope,
+            'style-scope': styleScopeToIdentifier(opt.scope),
+        }, css);
+    }
+}
+export function applyGlobalStyles(globalStyles, options) {
+    const opt = {
+        document: options.document ?? window.document,
+        layer: options.layer,
+        scope: options.styleScope,
+        namePrefix: options.namePrefix ?? 'ngn-',
+    };
+    const cssVariables = buildVariablesCss([globalStyles], opt);
+    upsertThemeStyleElement(opt.document, {
+        kind: 'variables',
+        'theme-scope': globalStyles.scope,
+        'style-scope': styleScopeToIdentifier(opt.scope),
+    }, cssVariables);
+    const cssStyles = buildStyleCss([globalStyles], opt);
+    upsertThemeStyleElement(opt.document, {
+        kind: 'styles',
+        'theme-scope': globalStyles.scope,
+        'style-scope': styleScopeToIdentifier(opt.scope),
+    }, cssStyles);
+}
+function styleScopeToIdentifier(scope) {
+    if (!scope)
+        return undefined;
+    switch (scope.kind) {
+        case 'attribute':
+            return `attr:${scope.name}${scope.value ? `:${scope.value}` : ''}`;
+        case 'class':
+            return `class:${scope.name}`;
+        case 'id':
+            return `id:${scope.name}`;
+        case 'tag':
+            return `tag:${scope.name}`;
+    }
+}
+function getThemePartsByScopes(theme, scopes) {
+    const result = new Set();
+    for (const scope of scopes) {
+        collectThemeParts(theme, scope, result);
+    }
+    return Array.from(result);
+}
+function collectThemeParts(theme, scope, result = new Set()) {
+    for (const part of theme.parts) {
+        if (part.scope !== scope || result.has(part)) {
+            continue;
+        }
+        result.add(part);
+        for (const dep of part.dependencies ?? []) {
+            collectThemeParts(theme, dep.scope, result);
+        }
+        if (part.base) {
+            for (const dep of part.base.dependencies ?? []) {
+                collectThemeParts(theme, dep.scope, result);
+            }
+        }
+    }
+    return result;
+}
+function buildVariablesCss(parts, options) {
+    const cssParts = parts.map(part => ({
+        root: variableCssFromVariableDefinition(part.root?.values, options, part.scope),
+        light: variableCssFromVariableDefinition(part.light?.values, options, part.scope),
+        dark: variableCssFromVariableDefinition(part.dark?.values, options, part.scope),
+        highContrast: variableCssFromVariableDefinition(part.highContrast?.values, options, part.scope),
+    }));
+    let css = options.layer ? `@layer ${options.layer} { ` : '';
+    css += `${getScopeSelector(options.styleScope)} { `;
+    for (const { root, dark } of cssParts) {
+        if (root) {
+            css += root;
+        }
+        if (dark) {
+            // check for special 'dark' class on body
+            css += `&.dark { ${dark} }`;
+        }
+    }
+    // TODO: light, dark and highContrast themes
+    // TODO: Special handling for @media, @container, ... for scoping
+    css += ' }';
+    if (options.layer)
+        css += ' }';
+    return css;
+}
+function variableCssFromVariableDefinition(content, options, scope) {
+    if (typeof content !== 'object')
+        return '';
+    let result = '';
+    for (const key in content) {
+        const value = content[key];
+        if (!value)
+            continue;
+        if (typeof value === 'object') {
+            result += variableCssFromVariableDefinition(value, options, `${scope}-${key}`);
+        }
+        else if (typeof value === 'string') {
+            const varName = getCssVar(options.namePrefix, `${scope}.${key}`);
+            if (value.startsWith('{') && value.endsWith('}')) {
+                result += `${varName}: var(${getCssVar(options.namePrefix, value.slice(1, -1))});`;
+            }
+            else {
+                result += `${varName}: ${value};`;
+            }
+        }
+    }
+    return result;
+}
+function buildStyleCss(parts, options, isBase = false) {
+    const varKeySelector = (key) => `var(${getCssVar(options.namePrefix, key)})`;
+    const cssParts = parts.map(part => {
+        if (!part.root?.css && !part.light?.css && !part.dark?.css && !part.highContrast?.css) {
+            return {};
+        }
+        // Create a selector for unstyled mode. To avoid specificity issues, we use a always-true selector
+        // for when unstyled mode is active.
+        const unstyledSelector = `:not(${isBase ? '.ngn-css-specificity' : '.ngn-unstyled'})`;
+        const args = {
+            v: (key) => varKeySelector(key),
+            c: (className, kind = 'class') => {
+                const prefix = kind === 'animation' ? '' : '.';
+                const unstyledSuffix = kind === 'animation' ? '' : unstyledSelector;
+                return `${prefix}${getClassName(options.namePrefix, part.scope, className)}${unstyledSuffix}`;
+            },
+            d: (scope, className) => {
+                return `.${getClassName(options.namePrefix, scope, className)}${unstyledSelector}`;
+            },
+        };
+        return {
+            root: part.root?.css?.(args),
+            light: part.light?.css?.(args),
+            dark: part.dark?.css?.(args),
+            highContrast: part.highContrast?.css?.(args),
+        };
+    });
+    let css = options.layer ? `@layer ${options.layer} { ` : '';
+    const baseCss = parts
+        .filter(p => p.base)
+        .map(part => {
+        const base = part.base;
+        return buildStyleCss([base], { ...options, layer: undefined }, true);
+    });
+    if (baseCss.length > 0) {
+        css += baseCss.join('\n');
+    }
+    css += `${getScopeSelector(options.styleScope)} { `;
+    let unscopableCss = '';
+    for (const { root, dark } of cssParts) {
+        if (root) {
+            const { unscopable, scopable } = splitScopableCss(root);
+            css += scopable;
+            unscopableCss += unscopable;
+        }
+        if (dark) {
+            const { unscopable, scopable } = splitScopableCss(dark);
+            // check for special 'dark' class on body
+            css += `&.dark { ${scopable} }`;
+            if (unscopable) {
+                console.warn('Unscopable CSS inside dark theme is not supported and will be ignored:', unscopable);
+            }
+        }
+    }
+    // TODO: light, dark and highContrast themes
+    // TODO: Special handling for @media, @container, ... for scoping
+    css += ' }';
+    css += unscopableCss;
+    if (options.layer)
+        css += ' }';
+    return css;
+}
+function getScopeSelector(scope) {
+    if (!scope) {
+        return ':root';
+    }
+    switch (scope.kind) {
+        case 'attribute':
+            return `[${scope.name}${scope.value ? `="${scope.value}"` : ''}]`;
+        case 'class':
+            return `.${scope.name}`;
+        case 'id':
+            return `#${scope.name}`;
+        case 'tag':
+            return scope.name;
+    }
+}
+function getCssVar(prefix, key) {
+    // Replace dots with dashes and convert camelCase to kebab-case
+    const varName = key
+        .replace(/\./g, '-')
+        .replace(/([a-z])([A-Z])/g, '$1-$2')
+        .toLowerCase();
+    return `--${prefix}${varName}`;
+}
+function splitScopableCss(css) {
+    let depth = 0;
+    let result = {
+        scopable: '',
+        unscopable: '',
+    };
+    let start = 0;
+    let kind = 'scopable';
+    for (let i = 0; i < css.length; i++) {
+        const char = css[i];
+        // @MaSch0212 review the `!depth` condition here, some queries are allowed inside scopable css
+        if (!depth && char === '@' && (!css[i - 1] || css[i - 1] === ' ') && kind === 'scopable') {
+            result.scopable += css.slice(start, i - 1);
+            start = i;
+            kind = 'unscopable';
+        }
+        else if (char === '{') {
+            depth++;
+        }
+        else if (char === '}') {
+            depth--;
+            if (depth === 0 && kind === 'unscopable') {
+                result.unscopable += css.slice(start, i + 1);
+                start = i + 1;
+                kind = 'scopable';
+            }
+        }
+    }
+    result[kind] += css.slice(start);
+    return result;
+}

package/api/style/get-class-name.d.ts

@@ -0,0 +1,2 @@
+export declare function getClassName(prefix: string, scope: string, className?: string, unstyled?: boolean): string;
+//# sourceMappingURL=get-class-name.d.ts.map

package/api/style/get-class-name.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-class-name.d.ts","sourceRoot":"","sources":["../../../../src/api/style/get-class-name.ts"],"names":[],"mappings":"AAAA,wBAAgB,YAAY,CAC1B,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,MAAM,EACb,SAAS,CAAC,EAAE,MAAM,EAClB,QAAQ,CAAC,EAAE,OAAO,GACjB,MAAM,CAKR"}

package/api/style/get-class-name.js

@@ -0,0 +1,8 @@
+export function getClassName(prefix, scope, className, unstyled) {
+    let result = `${prefix}${scope}`;
+    if (className)
+        result += `-${className}`;
+    if (unstyled)
+        result += ` ngn-unstyled`;
+    return result;
+}

package/api/style/style-scope.d.ts

@@ -0,0 +1,15 @@
+export type StyleScope = {
+    kind: 'attribute';
+    name: string;
+    value?: string;
+} | {
+    kind: 'class';
+    name: string;
+} | {
+    kind: 'id';
+    name: string;
+} | {
+    kind: 'tag';
+    name: string;
+};
+//# sourceMappingURL=style-scope.d.ts.map

package/api/style/style-scope.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-scope.d.ts","sourceRoot":"","sources":["../../../../src/api/style/style-scope.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAClB;IACE,IAAI,EAAE,WAAW,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GACD;IACE,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd,GACD;IACE,IAAI,EAAE,IAAI,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;CACd,GACD;IACE,IAAI,EAAE,KAAK,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd,CAAC"}

package/api/style/upsert-theme-style-element.d.ts

@@ -0,0 +1,2 @@
+export declare function upsertThemeStyleElement(document: Document, identifiers: Record<string, string | undefined>, css: string): HTMLStyleElement;
+//# sourceMappingURL=upsert-theme-style-element.d.ts.map

package/api/style/upsert-theme-style-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"upsert-theme-style-element.d.ts","sourceRoot":"","sources":["../../../../src/api/style/upsert-theme-style-element.ts"],"names":[],"mappings":"AAAA,wBAAgB,uBAAuB,CACrC,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,EAC/C,GAAG,EAAE,MAAM,GACV,gBAAgB,CAqBlB"}

package/api/style/upsert-theme-style-element.js

@@ -0,0 +1,23 @@
+export function upsertThemeStyleElement(document, identifiers, css) {
+    let selector = '';
+    for (const key in identifiers) {
+        if (identifiers[key] === undefined)
+            continue;
+        selector += `[data-${key}="${identifiers[key]}"]`;
+    }
+    if (!selector)
+        throw new Error('No identifiers provided for the style element');
+    let styleElement = document.head.querySelector(`style[ngn-style]${selector}`);
+    if (!styleElement) {
+        styleElement = document.createElement('style');
+        styleElement.setAttribute('ngn-style', '');
+        for (const key in identifiers) {
+            if (identifiers[key] === undefined)
+                continue;
+            styleElement.setAttribute(`data-${key}`, identifiers[key]);
+        }
+        document.head.appendChild(styleElement);
+    }
+    styleElement.innerHTML = css;
+    return styleElement;
+}

package/api/theme/classes.d.ts

@@ -0,0 +1,10 @@
+import type { ControlTemplate } from '@ngneers/controls-themes';
+type Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
+export type ThemeClasses<CT extends ControlTemplate> = Record<CT['classNames'][number], string> & {
+    $deps: UnionToIntersection<Prettify<CT['dependencies'][number] extends infer Dep ? Dep extends ControlTemplate<infer I> ? Record<I, ThemeClasses<Dep>> : never : never>>;
+};
+export {};
+//# sourceMappingURL=classes.d.ts.map

package/api/theme/classes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"classes.d.ts","sourceRoot":"","sources":["../../../../src/api/theme/classes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAEhE,KAAK,QAAQ,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAE,GAAG,EAAE,CAAC;AACjD,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK,IAAI,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,MAAM,CAAC,KAAK,IAAI,GAC/F,CAAC,GACD,KAAK,CAAC;AAEV,MAAM,MAAM,YAAY,CAAC,EAAE,SAAS,eAAe,IAAI,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,GAAG;IAChG,KAAK,EAAE,mBAAmB,CACxB,QAAQ,CACN,EAAE,CAAC,cAAc,CAAC,CAAC,MAAM,CAAC,SAAS,MAAM,GAAG,GACxC,GAAG,SAAS,eAAe,CAAC,MAAM,CAAC,CAAC,GAClC,MAAM,CAAC,CAAC,EAAE,YAAY,CAAC,GAAG,CAAC,CAAC,GAC5B,KAAK,GACP,KAAK,CACV,CACF,CAAC;CACH,CAAC"}

package/api/theme/combine-variable-variations.d.ts

@@ -0,0 +1,10 @@
+import { type SubKey } from '../utils/sub-key';
+type CombineVariableVariations<A extends readonly string[], B extends readonly string[], Result extends string[] = []> = A extends readonly [infer AH, ...infer AT] ? AH extends string ? AT extends readonly string[] ? [
+    ...CombineVariableVariations<AT, B, Result>,
+    ...{
+        [K in keyof B]: SubKey<[AH, B[K]]>;
+    }
+] : Result : Result : Result;
+export declare function combineVariableVariations<const A extends readonly string[], const B extends readonly string[]>(a: A, b: B): CombineVariableVariations<A, B>;
+export {};
+//# sourceMappingURL=combine-variable-variations.d.ts.map

package/api/theme/combine-variable-variations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combine-variable-variations.d.ts","sourceRoot":"","sources":["../../../../src/api/theme/combine-variable-variations.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE/C,KAAK,yBAAyB,CAC5B,CAAC,SAAS,SAAS,MAAM,EAAE,EAC3B,CAAC,SAAS,SAAS,MAAM,EAAE,EAC3B,MAAM,SAAS,MAAM,EAAE,GAAG,EAAE,IAC1B,CAAC,SAAS,SAAS,CAAC,MAAM,EAAE,EAAE,GAAG,MAAM,EAAE,CAAC,GAC1C,EAAE,SAAS,MAAM,GACf,EAAE,SAAS,SAAS,MAAM,EAAE,GAC1B;IACE,GAAG,yBAAyB,CAAC,EAAE,EAAE,CAAC,EAAE,MAAM,CAAC;IAC3C,GAAG;SACA,CAAC,IAAI,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;KACnC;CACF,GACD,MAAM,GACR,MAAM,GACR,MAAM,CAAC;AAEX,wBAAgB,yBAAyB,CACvC,KAAK,CAAC,CAAC,SAAS,SAAS,MAAM,EAAE,EACjC,KAAK,CAAC,CAAC,SAAS,SAAS,MAAM,EAAE,EACjC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,GAAG,yBAAyB,CAAC,CAAC,EAAE,CAAC,CAAC,CAQ7C"}

package/api/theme/combine-variable-variations.js

@@ -0,0 +1,10 @@
+import {} from '../utils/sub-key';
+export function combineVariableVariations(a, b) {
+    const result = [];
+    for (const itemA of a) {
+        for (const itemB of b) {
+            result.push(itemA === '' ? itemB : itemB === '' ? itemA : `${itemA}.${itemB}`);
+        }
+    }
+    return result;
+}

package/api/theme/combine-variations.d.ts

@@ -0,0 +1,9 @@
+type CombineVariations<A extends readonly string[], B extends readonly string[], Result extends string[] = []> = A extends readonly [infer AH, ...infer AT] ? AH extends string ? AT extends readonly string[] ? [
+    ...CombineVariations<AT, B, Result>,
+    ...{
+        [K in keyof B]: [AH, B[K]];
+    }
+] : Result : Result : Result;
+export declare function combineVariations<const A extends readonly string[], const B extends readonly string[]>(a: A, b: B): CombineVariations<A, B>;
+export {};
+//# sourceMappingURL=combine-variations.d.ts.map

package/api/theme/combine-variations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combine-variations.d.ts","sourceRoot":"","sources":["../../../../src/api/theme/combine-variations.ts"],"names":[],"mappings":"AAAA,KAAK,iBAAiB,CACpB,CAAC,SAAS,SAAS,MAAM,EAAE,EAC3B,CAAC,SAAS,SAAS,MAAM,EAAE,EAC3B,MAAM,SAAS,MAAM,EAAE,GAAG,EAAE,IAC1B,CAAC,SAAS,SAAS,CAAC,MAAM,EAAE,EAAE,GAAG,MAAM,EAAE,CAAC,GAC1C,EAAE,SAAS,MAAM,GACf,EAAE,SAAS,SAAS,MAAM,EAAE,GAC1B;IACE,GAAG,iBAAiB,CAAC,EAAE,EAAE,CAAC,EAAE,MAAM,CAAC;IACnC,GAAG;SACA,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;KAC3B;CACF,GACD,MAAM,GACR,MAAM,GACR,MAAM,CAAC;AAEX,wBAAgB,iBAAiB,CAC/B,KAAK,CAAC,CAAC,SAAS,SAAS,MAAM,EAAE,EACjC,KAAK,CAAC,CAAC,SAAS,SAAS,MAAM,EAAE,EACjC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,GAAG,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,CAQrC"}

package/api/theme/combine-variations.js

@@ -0,0 +1,9 @@
+export function combineVariations(a, b) {
+    const result = [];
+    for (const itemA of a) {
+        for (const itemB of b) {
+            result.push([itemA, itemB]);
+        }
+    }
+    return result;
+}

package/api/theme/control-template.d.ts

@@ -0,0 +1,14 @@
+import { type Scoped } from './scoped';
+export type ControlTemplate<S extends string = string, C extends string[] = string[], Deps extends readonly ControlTemplate[] = readonly any[]> = Scoped<S> & {
+    readonly classNames: C;
+    readonly dependencies: Deps;
+};
+type _ResolveWildcards<C extends string> = C extends `${infer Prefix}*${infer Suffix}` ? `${Prefix}${string}${Suffix}` : C;
+type ResolveWildcards<C extends readonly string[]> = C extends readonly [infer Head, ...infer Tail] ? Head extends string ? Tail extends readonly string[] ? [_ResolveWildcards<Head>, ...ResolveWildcards<Tail>] : never : never : C;
+export declare function createControlTemplate<S extends string, const C extends string[], const Deps extends readonly ControlTemplate[]>(init: {
+    scope: S;
+    classNames: C;
+    readonly dependencies?: Deps;
+}): ControlTemplate<S, ResolveWildcards<C>, Deps>;
+export {};
+//# sourceMappingURL=control-template.d.ts.map

package/api/theme/control-template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"control-template.d.ts","sourceRoot":"","sources":["../../../../src/api/theme/control-template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,UAAU,CAAC;AAEvC,MAAM,MAAM,eAAe,CACzB,CAAC,SAAS,MAAM,GAAG,MAAM,EACzB,CAAC,SAAS,MAAM,EAAE,GAAG,MAAM,EAAE,EAC7B,IAAI,SAAS,SAAS,eAAe,EAAE,GAAG,SAAS,GAAG,EAAE,IACtD,MAAM,CAAC,CAAC,CAAC,GAAG;IAAE,QAAQ,CAAC,UAAU,EAAE,CAAC,CAAC;IAAC,QAAQ,CAAC,YAAY,EAAE,IAAI,CAAA;CAAE,CAAC;AAExE,KAAK,iBAAiB,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,SAAS,GAAG,MAAM,MAAM,IAAI,MAAM,MAAM,EAAE,GAClF,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,GAC7B,CAAC,CAAC;AACN,KAAK,gBAAgB,CAAC,CAAC,SAAS,SAAS,MAAM,EAAE,IAAI,CAAC,SAAS,SAAS,CAAC,MAAM,IAAI,EAAE,GAAG,MAAM,IAAI,CAAC,GAC/F,IAAI,SAAS,MAAM,GACjB,IAAI,SAAS,SAAS,MAAM,EAAE,GAC5B,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC,GACpD,KAAK,GACP,KAAK,GACP,CAAC,CAAC;AACN,wBAAgB,qBAAqB,CACnC,CAAC,SAAS,MAAM,EAChB,KAAK,CAAC,CAAC,SAAS,MAAM,EAAE,EACxB,KAAK,CAAC,IAAI,SAAS,SAAS,eAAe,EAAE,EAC7C,IAAI,EAAE;IAAE,KAAK,EAAE,CAAC,CAAC;IAAC,UAAU,EAAE,CAAC,CAAC;IAAC,QAAQ,CAAC,YAAY,CAAC,EAAE,IAAI,CAAA;CAAE,iDAEhE"}

package/api/theme/control-template.js

@@ -0,0 +1,4 @@
+import {} from './scoped';
+export function createControlTemplate(init) {
+    return init;
+}

package/api/theme/css.d.ts

@@ -0,0 +1,4 @@
+export declare const css: (template: {
+    raw: ArrayLike<string> | readonly string[];
+}, ...substitutions: any[]) => string;
+//# sourceMappingURL=css.d.ts.map

package/api/theme/css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../../../src/api/theme/css.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,GAAG;;qCAAa,CAAC"}

package/api/theme/css.js

@@ -0,0 +1 @@
+export const css = String.raw;

package/api/theme/repeat-variables.d.ts

@@ -0,0 +1,10 @@
+import { type TemplateVariable } from './template-variable';
+import { type UnionToIntersection } from '../utils/union-to-intersection';
+type RepeatVariables<K extends string, T> = UnionToIntersection<K extends `${infer P}.${infer R}` ? {
+    [Q in P]: RepeatVariables<R, T>;
+} : K extends '' ? T : {
+    [P in K]: T;
+}>;
+export declare function repeatVariables<const TVariations extends readonly string[], TVariables extends Record<string, TemplateVariable<null>>>(variations: TVariations, variables: TVariables): RepeatVariables<TVariations[number], TVariables>;
+export {};
+//# sourceMappingURL=repeat-variables.d.ts.map

package/api/theme/repeat-variables.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"repeat-variables.d.ts","sourceRoot":"","sources":["../../../../src/api/theme/repeat-variables.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5D,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AAE1E,KAAK,eAAe,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,IAAI,mBAAmB,CAC7D,CAAC,SAAS,GAAG,MAAM,CAAC,IAAI,MAAM,CAAC,EAAE,GAC7B;KAAG,CAAC,IAAI,CAAC,GAAG,eAAe,CAAC,CAAC,EAAE,CAAC,CAAC;CAAE,GACnC,CAAC,SAAS,EAAE,GACV,CAAC,GACD;KAAG,CAAC,IAAI,CAAC,GAAG,CAAC;CAAE,CACtB,CAAC;AAEF,wBAAgB,eAAe,CAC7B,KAAK,CAAC,WAAW,SAAS,SAAS,MAAM,EAAE,EAC3C,UAAU,SAAS,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC,EAEzD,UAAU,EAAE,WAAW,EACvB,SAAS,EAAE,UAAU,GACpB,eAAe,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,CAQlD"}

package/api/theme/repeat-variables.js

@@ -0,0 +1,9 @@
+import {} from './template-variable';
+import { deepSet } from '../utils/deep-set';
+import {} from '../utils/union-to-intersection';
+export function repeatVariables(variations, variables) {
+    return variations.reduce((acc, variation) => {
+        deepSet(acc, variation, variables);
+        return acc;
+    }, {});
+}

package/api/theme/scoped.d.ts

@@ -0,0 +1,4 @@
+export type Scoped<T extends string = string> = {
+    readonly scope: T;
+};
+//# sourceMappingURL=scoped.d.ts.map

package/api/theme/scoped.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scoped.d.ts","sourceRoot":"","sources":["../../../../src/api/theme/scoped.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,MAAM,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IAAE,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAA;CAAE,CAAC"}

package/api/theme/template-variable.d.ts

@@ -0,0 +1,4 @@
+export type TemplateVariable<T> = T | {
+    readonly [subKey: string]: TemplateVariable<T>;
+};
+//# sourceMappingURL=template-variable.d.ts.map

package/api/theme/template-variable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"template-variable.d.ts","sourceRoot":"","sources":["../../../../src/api/theme/template-variable.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAAA;CAAE,CAAC"}

package/api/theme/theme-part.d.ts

@@ -0,0 +1,31 @@
+import { type ControlTemplate } from './control-template';
+import { type Scoped } from './scoped';
+import { type VariableValues } from './variable';
+import { type VariableTemplate } from './variable-template';
+type ChildrenScopes<Deps> = Deps extends readonly (infer Child)[] ? Child extends ControlTemplate ? Child['scope'] : never : never;
+type ClassnameForChildScope<Deps, Scope> = Scope extends ChildrenScopes<Deps> ? Deps extends readonly (infer Child)[] ? Child extends ControlTemplate<Scope> ? Child['classNames'][number] : never : never : never;
+type ThemePartContent<V, K, C, Deps> = {
+    readonly values?: V;
+    readonly css?: (args: {
+        v: (key: K) => string;
+        c: (className: C, kind?: 'class' | 'animation') => string;
+        d: <const Scope extends ChildrenScopes<Deps>>(scope: Scope, className: ClassnameForChildScope<Deps, Scope>) => string;
+    }) => string;
+};
+type _ThemePartContent<S extends string = string, C extends ControlTemplate = ControlTemplate<S>, V extends VariableTemplate<S>[] = VariableTemplate<S>[], D extends VariableTemplate[] = VariableTemplate[]> = ThemePartContent<VariableValues<V[number]['variables'], V[number]['__varkeys'] | D[number]['__varkeys']>, V[number]['__varkeys'] | D[number]['__varkeys'], C['classNames'][number], C['dependencies']>;
+export type ThemePart<S extends string = string, C extends ControlTemplate<S> = ControlTemplate<S>, V extends VariableTemplate<S>[] = VariableTemplate<S>[], D extends VariableTemplate[] = VariableTemplate[]> = Scoped<S> & {
+    readonly controlTemplate?: C;
+    readonly variables?: V;
+    readonly base?: ThemePart<S, C, V, VariableTemplate[]>;
+    readonly dependencies?: D;
+    readonly root?: _ThemePartContent<S, C, V, D>;
+    readonly light?: _ThemePartContent<S, C, V, D>;
+    readonly dark?: _ThemePartContent<S, C, V, D>;
+    readonly highContrast?: _ThemePartContent<S, C, V, D>;
+};
+export declare function createThemePart<C extends ControlTemplate = ControlTemplate, const V extends VariableTemplate<C['scope']>[] = VariableTemplate<C['scope']>[], const D extends VariableTemplate[] = VariableTemplate[]>(init: Omit<ThemePart<C['scope'], C, V, D>, 'scope' | 'controlTemplate'> & {
+    controlTemplate: C;
+}): ThemePart<C['scope'], C, V, D>;
+export declare function createThemePart<S extends string = string, const V extends VariableTemplate<S>[] = VariableTemplate<S>[], const D extends VariableTemplate[] = VariableTemplate[]>(init: ThemePart<S, never, V, D>): ThemePart<S, never, V, D>;
+export {};
+//# sourceMappingURL=theme-part.d.ts.map