@medyll/cssfabric 0.2.1-beta.3 → 0.2.1-beta.5

package/dist/cssFabric/CssFabric.d.ts

@@ -0,0 +1,20 @@
+import { CssFabricBuilder, CssFabricBuilderParams } from './CssFabricBuilder.js';
+import { CssFabricExport } from './CssFabricExport.js';
+import type { cssFabricModelType, cssFabricModelKey } from './types.js';
+export declare class CssFabric {
+    vendor: (fragment?: string) => string;
+    cssFabricModel: cssFabricModelType;
+    cssFabricBuilderParams: CssFabricBuilderParams;
+    cssFabricBuilder: CssFabricBuilder;
+    constructor();
+    private cleanModelKey;
+    setParams(params: Partial<CssFabricBuilderParams>): void;
+    createCssFabricVarsColors(...args: cssFabricModelKey[]): {
+        export: CssFabricExport['export'];
+        css: string;
+    };
+    cssFabricSheet(): {
+        export: (options: any) => void;
+        css: Record<string, any>;
+    };
+}

package/dist/cssFabric/CssFabric.js

@@ -0,0 +1,71 @@
+import { CssFabricBuilder, CssFabricBuilderParams } from './CssFabricBuilder.js';
+import { CssFabricExport } from './CssFabricExport.js';
+import { cssFabricSheet } from './cssFabricSheet.js';
+import { CSSProperties } from './cssProperties.js';
+export class CssFabric {
+    vendor = (fragment = '') => `${this.cssFabricBuilderParams.vendorName}${fragment}`;
+    cssFabricModel = {};
+    cssFabricBuilderParams;
+    cssFabricBuilder;
+    constructor() {
+        this.cssFabricBuilder = new CssFabricBuilder();
+        this.cssFabricBuilderParams = new CssFabricBuilderParams();
+    }
+    cleanModelKey(modelKey) {
+        return modelKey.replace(/'/g, '');
+    }
+    setParams(params) {
+        this.cssFabricBuilderParams = {
+            ...this.cssFabricBuilderParams,
+            ...params
+        };
+    }
+    createCssFabricVarsColors(...args) {
+        args.forEach((modelKey) => {
+            switch (this.cleanModelKey(modelKey)) {
+                case 'base':
+                    this.cssFabricModel.base = this.cssFabricBuilder.mainRule(this.cssFabricBuilderParams.config.theme, this.vendor());
+                    break;
+                case 'palette':
+                    this.cssFabricModel.palette = this.cssFabricBuilder.mainRule(this.cssFabricBuilderParams.config.palette, this.vendor('palette-'));
+                    break;
+                case 'presets':
+                    this.cssFabricModel.presets = this.cssFabricBuilder.flattenIt(['primary', 'secondary', 'tertiary', 'accent'], this.cssFabricBuilderParams.presets, this.vendor('presets-'));
+                    break;
+                case 'status':
+                    this.cssFabricModel.status = this.cssFabricBuilder.mainRule(this.cssFabricBuilderParams.config.status, this.vendor('status-'));
+                    break;
+                case 'out':
+                    // assombrir et rendre opaque  'primary', 'secondary', 'tertiary'
+                    this.cssFabricModel.out = this.cssFabricBuilder.makeDefaultVariations(['primary', 'secondary', 'tertiary'], ['lighten', 'darken', 'opacity'], this.vendor());
+                    break;
+                case 'gray':
+                    this.cssFabricModel.gray = this.cssFabricBuilder.createProgression({
+                        property: this.vendor(`color-gray`),
+                        iteratorMask: `color-mix(in srgb, ${this.vendor(`color-gray`)}  ${this.cssFabricBuilderParams.correspondances.gray} ##%);`,
+                        steps: this.cssFabricBuilderParams.defaultVariationSteps
+                    }, 'json');
+                    break;
+                case 'out2':
+                    // assombrir et rendre opaque  'primary', 'secondary', 'tertiary'
+                    this.cssFabricModel.out2 = this.cssFabricBuilder.makeDefaultVariations(['foreground', 'bg'], ['lighten', 'darken', 'opacity'], this.vendor());
+                    break;
+                default:
+                    console.log('default', modelKey);
+                    break;
+            }
+        });
+        return {
+            export: (options) => new CssFabricExport(this.cssFabricModel, options).export(options),
+            css: JSON.stringify(this.cssFabricModel)
+        };
+    }
+    cssFabricSheet() {
+        const cssP = new CSSProperties(cssFabricSheet /* , ['overflow'] */);
+        const cssF = cssP.generateCSS();
+        return {
+            export: (options) => new CssFabricExport(cssF, options).export(options),
+            css: cssF
+        };
+    }
+}

package/dist/cssFabric/CssFabricBuilder.d.ts

@@ -0,0 +1,71 @@
+import { colorConfig } from './config.js';
+import type { Ease, EaseTrigger, Mask, Steps, ToMask } from './types.js';
+export declare class CssFabricBuilder {
+    cssFabricBuilderParams: CssFabricBuilderParams;
+    constructor();
+    parseModel(json: Record<string, any>, parentKey?: string): string;
+    createProgression(options: {
+        property: string;
+        steps: {
+            steps: Steps;
+            presets?: string[];
+            ease: [Ease, EaseTrigger];
+            reverseValue?: boolean;
+        };
+        iteratorMask: string;
+        propertyValue?: {
+            content: [Mask, ToMask];
+            apply: string;
+        };
+    }, format?: 'css' | 'json'): {};
+    /**
+     * Dispatches elements based on the input mask.
+     *
+     * @template M - The type of the mask key.
+     * @template E - The type of the element.
+     * @template A - The type of the value.
+     *
+     * @param inputMask - The input mask.
+     * @param creatorFunction - The function to create the element based on the mask key.
+     * @param apply - The function to apply the value to the element.
+     */
+    dispatchHandleElements<M extends string = string, E = Element, A = any>(inputMask: any[], creatorFunction: (maskKey: M, index: number) => E, apply: (element: E, value: A) => void): void;
+    enqueue(callback: (callbackKey: string) => void, ...rest: string[][]): any;
+    flattenIt(arr1: string[], arr2: string[], scope?: string): Record<string, any>;
+    makeVariation(themeColor: string, variation: string): any;
+    makeDefaultVariations(arr1: string[], arr2: string[], prefix: string, vendor?: string): Record<string, any>;
+    mainRule(vars: Record<string, any>, prefix: string): Record<string, any>;
+}
+export declare class CssFabricBuilderParams {
+    vendorName: string;
+    variations: {
+        readonly none: "var({#vendor}-color-##);";
+        readonly light: "color-mix(in srgb, var({#vendor}-color-##) white ##%);";
+        readonly lighter: "color-mix(in srgb, var({#vendor}-color-##) white ##%);";
+        readonly dark: "color-mix(in srgb, var({#vendor}-color-##) black ##%);";
+        readonly darker: "color-mix(in srgb, var({#vendor}-color-##) black ##%);";
+        readonly complement: "color-mix(in srgb, var({#vendor}-color-##) black ##%);";
+        readonly invert: "color-mix(in srgb, var({#vendor}-color-##) black ##%);";
+        readonly 'alpha-low': "color-mix(in srgb, var({#vendor}-color-##) transparent ##%);";
+        readonly alpha: "color-mix(in srgb, var({#vendor}-color-##) transparent ##%);";
+        readonly 'alpha-high': "color-mix(in srgb, var({#vendor}-color-##) transparent ##%);";
+    };
+    defaultVariationSteps: {
+        readonly steps: readonly [0, 100, 10];
+        readonly ease: readonly [2, 20];
+    };
+    correspondances: Record<string, any>;
+    baseColors: {
+        primary: string;
+        secondary: string;
+        accent: string;
+        neutral: string;
+        error: string;
+    };
+    presets: string[];
+    config: typeof colorConfig;
+    constructor();
+    setVariations(variations: typeof CssFabricBuilderParams.prototype.variations): void;
+    setDefaultVariationSteps(variationSteps: typeof CssFabricBuilderParams.prototype.defaultVariationSteps): void;
+    private deepMerge;
+}

package/dist/cssFabric/CssFabricBuilder.js

@@ -0,0 +1,210 @@
+import { harmony } from 'simpler-color';
+import { colorConfig } from './config.js';
+export class CssFabricBuilder {
+    // defaultVariationSteps
+    cssFabricBuilderParams;
+    constructor() {
+        this.cssFabricBuilderParams = new CssFabricBuilderParams();
+    }
+    parseModel(json, parentKey = '') {
+        let css = parse(json, parentKey);
+        return `:root{\n${css}}`;
+        function parse(json, parentKey = '', titre = '') {
+            let css = '';
+            for (const key in json) {
+                if (typeof json[key] === 'object') {
+                    css += `\n/* ${key} */ `;
+                    //titre += `/* ----${key}--- */ `;
+                    css += parse(json[key], '', titre);
+                }
+                else {
+                    css += titre;
+                    css += `\n${parentKey}${key}: ${json[key]}`;
+                    titre = '';
+                }
+            }
+            return css;
+        }
+    }
+    createProgression(options, format = 'css') {
+        const { property, iteratorMask, propertyValue } = options;
+        const { presets } = options.steps ?? this.cssFabricBuilderParams.defaultVariationSteps;
+        let [from, to, increment] = options.steps.steps;
+        const [ease, trigger] = options.steps.ease;
+        if (presets) {
+            //sizeof prests becomes steps.
+            // cancels ease
+            if (presets) {
+                increment = to / presets.length;
+                options.steps.steps = [from, to, to / presets.length];
+            }
+        }
+        let css = '';
+        let cssKey = {};
+        for (let i = from; i <= to; i += i < trigger || i >= to - trigger ? increment / ease : increment) {
+            const iteratorTo = options.steps.reverseValue ? to - i : i;
+            const prop = `${property}-${i}`;
+            const content = propertyValue?.content[0]
+                ? `${propertyValue?.content[0].replace('##', propertyValue.content[1])} ${propertyValue?.apply}`
+                : '';
+            const newVal = `${iteratorMask.replace('##', iteratorTo.toString())}`;
+            css += `${prop}-${i}: ${content} ${newVal};\rn`;
+            cssKey[`${prop}`] = `${content} ${newVal}`;
+        }
+        return format === 'css' ? css : cssKey;
+    }
+    /**
+     * Dispatches elements based on the input mask.
+     *
+     * @template M - The type of the mask key.
+     * @template E - The type of the element.
+     * @template A - The type of the value.
+     *
+     * @param inputMask - The input mask.
+     * @param creatorFunction - The function to create the element based on the mask key.
+     * @param apply - The function to apply the value to the element.
+     */
+    dispatchHandleElements(inputMask, creatorFunction, apply) {
+        inputMask.forEach((maskKey, index) => {
+            const element = creatorFunction(inputMask[index], maskKey);
+            apply(element, inputMask[index]);
+        });
+    }
+    enqueue(callback, ...rest) {
+        const buildObject = (rootKeys, distributionKeys, index = 0) => {
+            if (index >= distributionKeys.length) {
+                return rootKeys.reduce((acc, key) => ({ ...acc, [key]: callback(key) }), {});
+            }
+            const currentDistribution = distributionKeys[index];
+            return rootKeys.reduce((acc, key) => {
+                const nestedObject = buildObject(currentDistribution, distributionKeys, index + 1);
+                return { ...acc, [key]: nestedObject };
+            }, {});
+        };
+        return buildObject(rest[0], rest.slice(1));
+    }
+    flattenIt(arr1, arr2, scope = 'color-') {
+        const legacy = {};
+        arr1.forEach((themeColor) => {
+            legacy[themeColor] = {};
+            arr2.forEach((props2) => {
+                if (!legacy[themeColor][props2])
+                    legacy[themeColor][props2] = {};
+                const tag = `${scope}${[themeColor, props2].join('-')}`;
+                legacy[themeColor][props2] = {
+                    [tag]: this.makeVariation(themeColor, props2)
+                        .replace('##', themeColor)
+                        .replace('{#vendor}', this.cssFabricBuilderParams.vendorName)
+                };
+            });
+        });
+        return legacy;
+    }
+    makeVariation(themeColor, variation) {
+        return this.cssFabricBuilderParams.variations?.[variation]
+            ? this.cssFabricBuilderParams.variations[variation]
+            : themeColor;
+    }
+    makeDefaultVariations(arr1, arr2, prefix, vendor = '--cssfab-') {
+        const out = {};
+        arr1.forEach((themeColor) => {
+            out[themeColor] = {};
+            arr2.forEach((props2) => {
+                out[themeColor][props2] = this.createProgression({
+                    property: `${vendor}${themeColor}-${props2}`,
+                    iteratorMask: `color-mix(in srgb, var(${prefix}${themeColor}) ${this.cssFabricBuilderParams.correspondances[props2]} ##%);`,
+                    steps: this.cssFabricBuilderParams.defaultVariationSteps
+                }, 'json');
+            });
+        });
+        return out;
+    }
+    mainRule(vars, prefix) {
+        const collect = {};
+        if (vars)
+            Object.keys(vars).forEach((key) => {
+                const val = vars[key];
+                collect[key] = { [`${prefix}${key}`]: `${val};` };
+            });
+        return collect;
+    }
+}
+export class CssFabricBuilderParams {
+    vendorName = '--cssfab-';
+    variations = {
+        none: 'var({#vendor}-color-##);',
+        light: 'color-mix(in srgb, var({#vendor}-color-##) white ##%);',
+        lighter: 'color-mix(in srgb, var({#vendor}-color-##) white ##%);',
+        dark: 'color-mix(in srgb, var({#vendor}-color-##) black ##%);',
+        darker: 'color-mix(in srgb, var({#vendor}-color-##) black ##%);',
+        complement: 'color-mix(in srgb, var({#vendor}-color-##) black ##%);',
+        invert: 'color-mix(in srgb, var({#vendor}-color-##) black ##%);',
+        'alpha-low': 'color-mix(in srgb, var({#vendor}-color-##) transparent ##%);',
+        alpha: 'color-mix(in srgb, var({#vendor}-color-##) transparent ##%);',
+        'alpha-high': 'color-mix(in srgb, var({#vendor}-color-##) transparent ##%);'
+    };
+    defaultVariationSteps = {
+        steps: [0, 100, 10],
+        ease: [2, 20]
+    };
+    correspondances = {
+        lighten: 'white',
+        light: 'white',
+        lighter: 'white',
+        darken: 'black',
+        dark: 'black',
+        darker: 'black',
+        gray: '#333',
+        opacity: 'transparent',
+        'alpha-high': 'transparent',
+        'alpha-low': 'transparent',
+        alpha: 'transparent'
+    };
+    baseColors;
+    presets = [
+        'light',
+        'lighter',
+        'dark',
+        'darker',
+        'complement',
+        'invert',
+        'alpha-low',
+        'alpha',
+        'alpha-high'
+    ];
+    config = {};
+    constructor() {
+        this.baseColors = harmony('#9e3902');
+        this.config = this.deepMerge(colorConfig, { theme: harmony('#9e3902') });
+        return this;
+    }
+    setVariations(variations) {
+        this.variations = { ...this.variations, ...variations };
+    }
+    setDefaultVariationSteps(variationSteps) {
+        this.defaultVariationSteps = { ...this.defaultVariationSteps, ...variationSteps };
+    }
+    deepMerge(...objects) {
+        function objectMerge(target, source) {
+            for (const key of Object.keys(source)) {
+                const currenttarget = target[key];
+                const currentsource = source[key];
+                if (currenttarget) {
+                    const objectsource = typeof currentsource === 'object';
+                    const objecttarget = typeof currenttarget === 'object';
+                    if (objectsource && objecttarget) {
+                        void (Array.isArray(currenttarget) && Array.isArray(currentsource)
+                            ? void (target[key] = currenttarget.concat(currentsource))
+                            : void objectMerge(currenttarget, currentsource));
+                        continue;
+                    }
+                }
+                target[key] = currentsource;
+            }
+            return target;
+        }
+        return objects.reduce(function (prev, next) {
+            return { ...prev, ...objectMerge(prev, next) };
+        }, objects[0]);
+    }
+}

package/dist/cssFabric/CssFabricExport.d.ts

@@ -0,0 +1,9 @@
+import type { cssFabricModelType } from './types.js';
+export declare class CssFabricExport {
+    private cssFabricModel;
+    exportPaths: Record<'css' | 'json', string>;
+    constructor(cssFabricModel: cssFabricModelType, exportPaths?: CssFabricExport['exportPaths']);
+    export(options: CssFabricExport['exportPaths']): void;
+    private createCssFile;
+    private createJsonModel;
+}

package/dist/cssFabric/CssFabricExport.js

@@ -0,0 +1,37 @@
+import fsExtra from 'fs-extra';
+export class CssFabricExport {
+    cssFabricModel;
+    exportPaths = {
+        css: './css-fabric.css',
+        json: './cssFabric.json'
+    };
+    constructor(cssFabricModel, exportPaths) {
+        this.cssFabricModel = cssFabricModel;
+        this.exportPaths = { ...exportPaths, ...this.exportPaths };
+        return this;
+    }
+    export(options) {
+        this.exportPaths = { ...this.exportPaths, ...options };
+        this.createCssFile();
+        this.createJsonModel();
+    }
+    createCssFile() {
+        // cssFabricBuilder.parseModel(cssCollection
+        fsExtra.writeFile(this.exportPaths.css, this.cssFabricModel.toString(), (err) => {
+            if (err) {
+                console.error(err);
+                return;
+            }
+            console.log('File created successfully.');
+        });
+    }
+    createJsonModel() {
+        fsExtra.writeFile(this.exportPaths.json, JSON.stringify(this.cssFabricModel), (err) => {
+            if (err) {
+                console.error(err);
+                return;
+            }
+            console.log('File created successfully.');
+        });
+    }
+}

package/dist/cssFabric/bin/exports.d.ts

@@ -0,0 +1,2 @@
+import { CssFabric } from '../CssFabric.js';
+export declare const cssFabric: CssFabric;

package/dist/cssFabric/bin/exports.js

@@ -0,0 +1,14 @@
+import { CssFabric } from '../CssFabric.js';
+export const cssFabric = new CssFabric();
+const styleSheet = cssFabric.cssFabricSheet();
+styleSheet.export({ css: './css-fabric-sheet.css', json: './cssFabric-sheet.json' });
+/* const model = cssFabric.createCssFabricVarsColors(
+    'base',
+    'palette',
+    'presets',
+    'status',
+    'out',
+    'gray',
+    'out2'
+);
+model.export({ css: './css-fabric.css', json: './cssFabric.json' }); */

package/dist/cssFabric/index.d.ts

@@ -1,113 +1,9 @@
-import { colorConfig } from './config.js';
-type Steps = [number, number, number];
-type Mask = string;
-type ToMask = string;
-type EaseTrigger = number;
-type Ease = number;
-declare class CssFabricExport {
-    private cssFabricModel;
-    exportPaths: Record<'css' | 'json', string>;
-    constructor(cssFabricModel: cssFabricModelType, exportPaths?: CssFabricExport['exportPaths']);
-    export(options: CssFabricExport['exportPaths']): void;
-    private createCssFile;
-    private createJsonModel;
-}
-declare class CssFabricBuilder {
-    cssFabricBuilderParams: CssFabricBuilderParams;
-    constructor();
-    parseModel(json: Record<string, any>, parentKey?: string): string;
-    createProgression(options: {
-        property: string;
-        steps: {
-            steps: Steps;
-            presets?: string[];
-            ease: [Ease, EaseTrigger];
-            reverseValue?: boolean;
-        };
-        iteratorMask: string;
-        propertyValue?: {
-            content: [Mask, ToMask];
-            apply: string;
-        };
-    }, format?: 'css' | 'json'): {};
-    /**
-     * Dispatches elements based on the input mask.
-     *
-     * @template M - The type of the mask key.
-     * @template E - The type of the element.
-     * @template A - The type of the value.
-     *
-     * @param inputMask - The input mask.
-     * @param creatorFunction - The function to create the element based on the mask key.
-     * @param apply - The function to apply the value to the element.
-     */
-    dispatchHandleElements<M extends string = string, E = Element, A = any>(inputMask: any[], creatorFunction: (maskKey: M, index: number) => E, apply: (element: E, value: A) => void): void;
-    enqueue(callback: (callbackKey: string) => void, ...rest: string[][]): any;
-    flattenIt(arr1: string[], arr2: string[], scope?: string): Record<string, any>;
-    makeVariation(themeColor: string, variation: string): any;
-    makeDefaultVariations(arr1: string[], arr2: string[], prefix: string, vendor?: string): Record<string, any>;
-    mainRule(vars: Record<string, any>, prefix: string): Record<string, any>;
-}
-declare class CssFabricBuilderParams {
-    vendorName: string;
-    variations: {
-        readonly none: "var({#vendor}-color-##);";
-        readonly light: "color-mix(in srgb, var({#vendor}-color-##) white ##%);";
-        readonly lighter: "color-mix(in srgb, var({#vendor}-color-##) white ##%);";
-        readonly dark: "color-mix(in srgb, var({#vendor}-color-##) black ##%);";
-        readonly darker: "color-mix(in srgb, var({#vendor}-color-##) black ##%);";
-        readonly complement: "color-mix(in srgb, var({#vendor}-color-##) black ##%);";
-        readonly invert: "color-mix(in srgb, var({#vendor}-color-##) black ##%);";
-        readonly 'alpha-low': "color-mix(in srgb, var({#vendor}-color-##) transparent ##%);";
-        readonly alpha: "color-mix(in srgb, var({#vendor}-color-##) transparent ##%);";
-        readonly 'alpha-high': "color-mix(in srgb, var({#vendor}-color-##) transparent ##%);";
-    };
-    defaultVariationSteps: {
-        readonly steps: readonly [0, 100, 10];
-        readonly ease: readonly [2, 20];
-    };
-    correspondances: Record<string, any>;
-    baseColors: {
-        primary: string;
-        secondary: string;
-        accent: string;
-        neutral: string;
-        error: string;
-    };
-    presets: string[];
-    config: typeof colorConfig;
-    constructor();
-    setVariations(variations: typeof CssFabricBuilderParams.prototype.variations): void;
-    setDefaultVariationSteps(variationSteps: typeof CssFabricBuilderParams.prototype.defaultVariationSteps): void;
-    private deepMerge;
-}
-declare enum ModelConfigKeys {
-    base = 0,
-    palette = 1,
-    presets = 2,
-    status = 3,
-    out = 4,
-    gray = 5,
-    out2 = 6
-}
-type cssFabricModelKey = keyof typeof ModelConfigKeys;
-type cssFabricModelType = Record<cssFabricModelKey, any>;
-declare class CssFabric {
-    vendor: (fragment?: string) => string;
-    cssFabricModel: cssFabricModelType;
-    cssFabricBuilderParams: CssFabricBuilderParams;
-    cssFabricBuilder: CssFabricBuilder;
-    constructor();
-    private cleanModelKey;
-    setParams(params: Partial<CssFabricBuilderParams>): void;
-    createCssFabricVarsColors(...args: cssFabricModelKey[]): {
-        export: CssFabricExport['export'];
-        css: string;
-    };
-    cssFabricSheet(): {
-        export: (options: any) => void;
-        css: Record<string, any>;
-    };
-}
-export declare const cssFabric: CssFabric;
-export {};
+export * from './bin/exports.js';
+export * from './config.js';
+export * from './CssFabric.js';
+export * from './CssFabricBuilder.js';
+export * from './CssFabricExport.js';
+export * from './cssFabricSheet.js';
+export * from './cssProperties.js';
+export * from './cssVariationsAi.js';
+export * from './types.js';

package/dist/cssFabric/index.js

@@ -1,341 +1,10 @@
-import fsExtra from 'fs-extra';
-import { harmony } from 'simpler-color';
-import { colorConfig } from './config.js';
-import { CSSProperties } from './cssProperties.js';
-import { cssFabricSheet } from './cssFabricSheet.js';
-class CssFabricExport {
-    cssFabricModel;
-    exportPaths = {
-        css: './css-fabric.css',
-        json: './cssFabric.json'
-    };
-    constructor(cssFabricModel, exportPaths) {
-        this.cssFabricModel = cssFabricModel;
-        this.exportPaths = { ...exportPaths, ...this.exportPaths };
-        return this;
-    }
-    export(options) {
-        this.exportPaths = { ...this.exportPaths, ...options };
-        this.createCssFile();
-        this.createJsonModel();
-    }
-    createCssFile() {
-        // cssFabricBuilder.parseModel(cssCollection
-        fsExtra.writeFile(this.exportPaths.css, this.cssFabricModel.toString(), (err) => {
-            if (err) {
-                console.error(err);
-                return;
-            }
-            console.log('File created successfully.');
-        });
-    }
-    createJsonModel() {
-        fsExtra.writeFile(this.exportPaths.json, JSON.stringify(this.cssFabricModel), (err) => {
-            if (err) {
-                console.error(err);
-                return;
-            }
-            console.log('File created successfully.');
-        });
-    }
-}
-class CssFabricBuilder {
-    // defaultVariationSteps
-    cssFabricBuilderParams;
-    constructor() {
-        this.cssFabricBuilderParams = new CssFabricBuilderParams();
-    }
-    parseModel(json, parentKey = '') {
-        let css = parse(json, parentKey);
-        return `:root{\n${css}}`;
-        function parse(json, parentKey = '', titre = '') {
-            let css = '';
-            for (const key in json) {
-                if (typeof json[key] === 'object') {
-                    css += `\n/* ${key} */ `;
-                    //titre += `/* ----${key}--- */ `;
-                    css += parse(json[key], '', titre);
-                }
-                else {
-                    css += titre;
-                    css += `\n${parentKey}${key}: ${json[key]}`;
-                    titre = '';
-                }
-            }
-            return css;
-        }
-    }
-    createProgression(options, format = 'css') {
-        const { property, iteratorMask, propertyValue } = options;
-        const { presets } = options.steps ?? this.cssFabricBuilderParams.defaultVariationSteps;
-        let [from, to, increment] = options.steps.steps;
-        const [ease, trigger] = options.steps.ease;
-        if (presets) {
-            //sizeof prests becomes steps.
-            // cancels ease
-            if (presets) {
-                increment = to / presets.length;
-                options.steps.steps = [from, to, to / presets.length];
-            }
-        }
-        let css = '';
-        let cssKey = {};
-        for (let i = from; i <= to; i += i < trigger || i >= to - trigger ? increment / ease : increment) {
-            const iteratorTo = options.steps.reverseValue ? to - i : i;
-            const prop = `${property}-${i}`;
-            const content = propertyValue?.content[0]
-                ? `${propertyValue?.content[0].replace('##', propertyValue.content[1])} ${propertyValue?.apply}`
-                : '';
-            const newVal = `${iteratorMask.replace('##', iteratorTo.toString())}`;
-            css += `${prop}-${i}: ${content} ${newVal};\rn`;
-            cssKey[`${prop}`] = `${content} ${newVal}`;
-        }
-        return format === 'css' ? css : cssKey;
-    }
-    /**
-     * Dispatches elements based on the input mask.
-     *
-     * @template M - The type of the mask key.
-     * @template E - The type of the element.
-     * @template A - The type of the value.
-     *
-     * @param inputMask - The input mask.
-     * @param creatorFunction - The function to create the element based on the mask key.
-     * @param apply - The function to apply the value to the element.
-     */
-    dispatchHandleElements(inputMask, creatorFunction, apply) {
-        inputMask.forEach((maskKey, index) => {
-            const element = creatorFunction(inputMask[index], maskKey);
-            apply(element, inputMask[index]);
-        });
-    }
-    enqueue(callback, ...rest) {
-        const buildObject = (rootKeys, distributionKeys, index = 0) => {
-            if (index >= distributionKeys.length) {
-                return rootKeys.reduce((acc, key) => ({ ...acc, [key]: callback(key) }), {});
-            }
-            const currentDistribution = distributionKeys[index];
-            return rootKeys.reduce((acc, key) => {
-                const nestedObject = buildObject(currentDistribution, distributionKeys, index + 1);
-                return { ...acc, [key]: nestedObject };
-            }, {});
-        };
-        return buildObject(rest[0], rest.slice(1));
-    }
-    flattenIt(arr1, arr2, scope = 'color-') {
-        const legacy = {};
-        arr1.forEach((themeColor) => {
-            legacy[themeColor] = {};
-            arr2.forEach((props2) => {
-                if (!legacy[themeColor][props2])
-                    legacy[themeColor][props2] = {};
-                const tag = `${scope}${[themeColor, props2].join('-')}`;
-                legacy[themeColor][props2] = {
-                    [tag]: this.makeVariation(themeColor, props2)
-                        .replace('##', themeColor)
-                        .replace('{#vendor}', this.cssFabricBuilderParams.vendorName)
-                };
-            });
-        });
-        return legacy;
-    }
-    makeVariation(themeColor, variation) {
-        return this.cssFabricBuilderParams.variations?.[variation]
-            ? this.cssFabricBuilderParams.variations[variation]
-            : themeColor;
-    }
-    makeDefaultVariations(arr1, arr2, prefix, vendor = '--cssfab-') {
-        const out = {};
-        arr1.forEach((themeColor) => {
-            out[themeColor] = {};
-            arr2.forEach((props2) => {
-                out[themeColor][props2] = this.createProgression({
-                    property: `${vendor}${themeColor}-${props2}`,
-                    iteratorMask: `color-mix(in srgb, var(${prefix}${themeColor}) ${this.cssFabricBuilderParams.correspondances[props2]} ##%);`,
-                    steps: this.cssFabricBuilderParams.defaultVariationSteps
-                }, 'json');
-            });
-        });
-        return out;
-    }
-    mainRule(vars, prefix) {
-        const collect = {};
-        if (vars)
-            Object.keys(vars).forEach((key) => {
-                const val = vars[key];
-                collect[key] = { [`${prefix}${key}`]: `${val};` };
-            });
-        return collect;
-    }
-}
-// primary.presets
-class CssFabricBuilderParams {
-    vendorName = '--cssfab-';
-    variations = {
-        none: 'var({#vendor}-color-##);',
-        light: 'color-mix(in srgb, var({#vendor}-color-##) white ##%);',
-        lighter: 'color-mix(in srgb, var({#vendor}-color-##) white ##%);',
-        dark: 'color-mix(in srgb, var({#vendor}-color-##) black ##%);',
-        darker: 'color-mix(in srgb, var({#vendor}-color-##) black ##%);',
-        complement: 'color-mix(in srgb, var({#vendor}-color-##) black ##%);',
-        invert: 'color-mix(in srgb, var({#vendor}-color-##) black ##%);',
-        'alpha-low': 'color-mix(in srgb, var({#vendor}-color-##) transparent ##%);',
-        alpha: 'color-mix(in srgb, var({#vendor}-color-##) transparent ##%);',
-        'alpha-high': 'color-mix(in srgb, var({#vendor}-color-##) transparent ##%);'
-    };
-    defaultVariationSteps = {
-        steps: [0, 100, 10],
-        ease: [2, 20]
-    };
-    correspondances = {
-        lighten: 'white',
-        light: 'white',
-        lighter: 'white',
-        darken: 'black',
-        dark: 'black',
-        darker: 'black',
-        gray: '#333',
-        opacity: 'transparent',
-        'alpha-high': 'transparent',
-        'alpha-low': 'transparent',
-        alpha: 'transparent'
-    };
-    baseColors;
-    presets = [
-        'light',
-        'lighter',
-        'dark',
-        'darker',
-        'complement',
-        'invert',
-        'alpha-low',
-        'alpha',
-        'alpha-high'
-    ];
-    config = {};
-    constructor() {
-        this.baseColors = harmony('#9e3902');
-        this.config = this.deepMerge(colorConfig, { theme: harmony('#9e3902') });
-        return this;
-    }
-    setVariations(variations) {
-        this.variations = { ...this.variations, ...variations };
-    }
-    setDefaultVariationSteps(variationSteps) {
-        this.defaultVariationSteps = { ...this.defaultVariationSteps, ...variationSteps };
-    }
-    deepMerge(...objects) {
-        function objectMerge(target, source) {
-            for (const key of Object.keys(source)) {
-                const currenttarget = target[key];
-                const currentsource = source[key];
-                if (currenttarget) {
-                    const objectsource = typeof currentsource === 'object';
-                    const objecttarget = typeof currenttarget === 'object';
-                    if (objectsource && objecttarget) {
-                        void (Array.isArray(currenttarget) && Array.isArray(currentsource)
-                            ? void (target[key] = currenttarget.concat(currentsource))
-                            : void objectMerge(currenttarget, currentsource));
-                        continue;
-                    }
-                }
-                target[key] = currentsource;
-            }
-            return target;
-        }
-        return objects.reduce(function (prev, next) {
-            return { ...prev, ...objectMerge(prev, next) };
-        }, objects[0]);
-    }
-}
-var ModelConfigKeys;
-(function (ModelConfigKeys) {
-    ModelConfigKeys[ModelConfigKeys["base"] = 0] = "base";
-    ModelConfigKeys[ModelConfigKeys["palette"] = 1] = "palette";
-    ModelConfigKeys[ModelConfigKeys["presets"] = 2] = "presets";
-    ModelConfigKeys[ModelConfigKeys["status"] = 3] = "status";
-    ModelConfigKeys[ModelConfigKeys["out"] = 4] = "out";
-    ModelConfigKeys[ModelConfigKeys["gray"] = 5] = "gray";
-    ModelConfigKeys[ModelConfigKeys["out2"] = 6] = "out2";
-})(ModelConfigKeys || (ModelConfigKeys = {}));
-class CssFabric {
-    vendor = (fragment = '') => `${this.cssFabricBuilderParams.vendorName}${fragment}`;
-    cssFabricModel = {};
-    cssFabricBuilderParams;
-    cssFabricBuilder;
-    constructor() {
-        this.cssFabricBuilder = new CssFabricBuilder();
-        this.cssFabricBuilderParams = new CssFabricBuilderParams();
-    }
-    cleanModelKey(modelKey) {
-        return modelKey.replace(/'/g, '');
-    }
-    setParams(params) {
-        this.cssFabricBuilderParams = {
-            ...this.cssFabricBuilderParams,
-            ...params
-        };
-    }
-    createCssFabricVarsColors(...args) {
-        args.forEach((modelKey) => {
-            switch (this.cleanModelKey(modelKey)) {
-                case 'base':
-                    this.cssFabricModel.base = this.cssFabricBuilder.mainRule(this.cssFabricBuilderParams.config.theme, this.vendor());
-                    break;
-                case 'palette':
-                    this.cssFabricModel.palette = this.cssFabricBuilder.mainRule(this.cssFabricBuilderParams.config.palette, this.vendor('palette-'));
-                    break;
-                case 'presets':
-                    this.cssFabricModel.presets = this.cssFabricBuilder.flattenIt(['primary', 'secondary', 'tertiary', 'accent'], this.cssFabricBuilderParams.presets, this.vendor('presets-'));
-                    break;
-                case 'status':
-                    this.cssFabricModel.status = this.cssFabricBuilder.mainRule(this.cssFabricBuilderParams.config.status, this.vendor('status-'));
-                    break;
-                case 'out':
-                    // assombrir et rendre opaque  'primary', 'secondary', 'tertiary'
-                    this.cssFabricModel.out = this.cssFabricBuilder.makeDefaultVariations(['primary', 'secondary', 'tertiary'], ['lighten', 'darken', 'opacity'], this.vendor());
-                    break;
-                case 'gray':
-                    this.cssFabricModel.gray = this.cssFabricBuilder.createProgression({
-                        property: this.vendor(`color-gray`),
-                        iteratorMask: `color-mix(in srgb, ${this.vendor(`color-gray`)}  ${this.cssFabricBuilderParams.correspondances.gray} ##%);`,
-                        steps: this.cssFabricBuilderParams.defaultVariationSteps
-                    }, 'json');
-                    break;
-                case 'out2':
-                    // assombrir et rendre opaque  'primary', 'secondary', 'tertiary'
-                    this.cssFabricModel.out2 = this.cssFabricBuilder.makeDefaultVariations(['foreground', 'bg'], ['lighten', 'darken', 'opacity'], this.vendor());
-                    break;
-                default:
-                    console.log('default', modelKey);
-                    break;
-            }
-        });
-        return {
-            export: (options) => new CssFabricExport(this.cssFabricModel, options).export(options),
-            css: JSON.stringify(this.cssFabricModel)
-        };
-    }
-    cssFabricSheet() {
-        const cssP = new CSSProperties(cssFabricSheet /* , ['overflow'] */);
-        const cssF = cssP.generateCSS();
-        return {
-            export: (options) => new CssFabricExport(cssF, options).export(options),
-            css: cssF
-        };
-    }
-}
-// overflow , text-overflow, text-decoration
-export const cssFabric = new CssFabric();
-const styleSheet = cssFabric.cssFabricSheet();
-styleSheet.export({ css: './css-fabric-sheet.css', json: './cssFabric-sheet.json' });
-/* const model = cssFabric.createCssFabricVarsColors(
-    'base',
-    'palette',
-    'presets',
-    'status',
-    'out',
-    'gray',
-    'out2'
-);
-model.export({ css: './css-fabric.css', json: './cssFabric.json' }); */
+// Reexport of entry components
+export * from './bin/exports.js';
+export * from './config.js';
+export * from './CssFabric.js';
+export * from './CssFabricBuilder.js';
+export * from './CssFabricExport.js';
+export * from './cssFabricSheet.js';
+export * from './cssProperties.js';
+export * from './cssVariationsAi.js';
+export * from './types.js';

package/dist/cssFabric/types.d.ts

@@ -0,0 +1,16 @@
+export type Steps = [number, number, number];
+export type Mask = string;
+export type ToMask = string;
+export type EaseTrigger = number;
+export type Ease = number;
+export declare enum ModelConfigKeys {
+    base = 0,
+    palette = 1,
+    presets = 2,
+    status = 3,
+    out = 4,
+    gray = 5,
+    out2 = 6
+}
+export type cssFabricModelKey = keyof typeof ModelConfigKeys;
+export type cssFabricModelType = Record<cssFabricModelKey, any>;

package/dist/cssFabric/types.js

@@ -0,0 +1,10 @@
+export var ModelConfigKeys;
+(function (ModelConfigKeys) {
+    ModelConfigKeys[ModelConfigKeys["base"] = 0] = "base";
+    ModelConfigKeys[ModelConfigKeys["palette"] = 1] = "palette";
+    ModelConfigKeys[ModelConfigKeys["presets"] = 2] = "presets";
+    ModelConfigKeys[ModelConfigKeys["status"] = 3] = "status";
+    ModelConfigKeys[ModelConfigKeys["out"] = 4] = "out";
+    ModelConfigKeys[ModelConfigKeys["gray"] = 5] = "gray";
+    ModelConfigKeys[ModelConfigKeys["out2"] = 6] = "out2";
+})(ModelConfigKeys || (ModelConfigKeys = {}));

package/dist/index.d.ts

@@ -55,11 +55,16 @@ export * from './cssf/cssfModel.js';
 export * from './cssf/cssfPlugin.js';
 export * from './cssf/cssfTransformer.js';
 export * from './cssf/index.js';
+export * from './cssFabric/bin/exports.js';
 export * from './cssFabric/config.js';
+export * from './cssFabric/CssFabric.js';
+export * from './cssFabric/CssFabricBuilder.js';
+export * from './cssFabric/CssFabricExport.js';
 export * from './cssFabric/cssFabricSheet.js';
 export * from './cssFabric/cssProperties.js';
 export * from './cssFabric/cssVariationsAi.js';
 export * from './cssFabric/index.js';
+export * from './cssFabric/types.js';
 export * from './index.js';
 export { default as NewMenu } from './NewMenu.svelte';
 export * from './scripts/cssfabric.js';

package/dist/index.js

@@ -56,11 +56,16 @@ export * from './cssf/cssfModel.js';
 export * from './cssf/cssfPlugin.js';
 export * from './cssf/cssfTransformer.js';
 export * from './cssf/index.js';
+export * from './cssFabric/bin/exports.js';
 export * from './cssFabric/config.js';
+export * from './cssFabric/CssFabric.js';
+export * from './cssFabric/CssFabricBuilder.js';
+export * from './cssFabric/CssFabricExport.js';
 export * from './cssFabric/cssFabricSheet.js';
 export * from './cssFabric/cssProperties.js';
 export * from './cssFabric/cssVariationsAi.js';
 export * from './cssFabric/index.js';
+export * from './cssFabric/types.js';
 export * from './index.js';
 export { default as NewMenu } from './NewMenu.svelte';
 export * from './scripts/cssfabric.js';

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@medyll/cssfabric",
 	"scope": "@medyll",
-	"version": "0.2.1-beta.3",
+	"version": "0.2.1-beta.5",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",