@design-edito/tools 0.4.4 → 0.4.6

package/agnostic/css/bem/index.js

@@ -1,162 +1,137 @@
-import {
-  isValidClassName
-} from "../../../chunks/chunk-W5A2TON3.js";
-import {
-  isNonNullObject
-} from "../../../chunks/chunk-HQLRJ7XW.js";
-import {
-  isFalsy
-} from "../../../chunks/chunk-QXAJXTXV.js";
-import "../../../chunks/chunk-HC6ZOHCS.js";
-import "../../../chunks/chunk-WSFCRVEQ.js";
-
-// src/agnostic/css/bem/index.ts
-function getNamesArr(arg) {
-  const returned = [];
-  if (typeof arg === "string") {
-    arg.trim().split(/\s+/gm).forEach((name) => {
-      if (isValidClassName(name)) returned.push(name);
-    });
-  } else if (Array.isArray(arg)) {
-    arg.forEach((elt) => returned.push(...getNamesArr(elt)));
-  } else if (isNonNullObject(arg)) {
-    Object.entries(arg).forEach(([key, val]) => {
-      if (!isFalsy(val)) returned.push(...getNamesArr(key));
-    });
-  }
-  return returned;
+import { isNonNullObject } from 'agnostic/objects/is-object/index.js';
+import { isFalsy } from '../../booleans/is-falsy/index.js';
+import { isValidClassName } from '../is-valid-css-class-name/index.js';
+export function getNamesArr(arg) {
+    const returned = [];
+    if (typeof arg === 'string') {
+        arg.trim().split(/\s+/gm).forEach(name => { if (isValidClassName(name))
+            returned.push(name); });
+    }
+    else if (Array.isArray(arg)) {
+        arg.forEach(elt => returned.push(...getNamesArr(elt)));
+    }
+    else if (isNonNullObject(arg)) {
+        Object.entries(arg).forEach(([key, val]) => {
+            if (!isFalsy(val))
+                returned.push(...getNamesArr(key));
+        });
+    }
+    return returned;
+}
+export class BEM {
+    constructor() {
+        this.findBlockByName = this.findBlockByName.bind(this);
+        this.addBlock = this.addBlock.bind(this);
+        this.addElement = this.addElement.bind(this);
+        this.addModifier = this.addModifier.bind(this);
+        this.copy = this.copy.bind(this);
+        this.block = this.block.bind(this);
+        this.element = this.element.bind(this);
+        this.modifier = this.modifier.bind(this);
+        this.blk = this.blk.bind(this);
+        this.elt = this.elt.bind(this);
+        this.mod = this.mod.bind(this);
+        this.cp = this.cp.bind(this);
+        this.addSingleBlock = this.addSingleBlock.bind(this);
+        this.addSingleElement = this.addSingleElement.bind(this);
+        this.addSingleModifier = this.addSingleModifier.bind(this);
+        this.setCurrentBlockByName = this.setCurrentBlockByName.bind(this);
+        this.createBlockByName = this.createBlockByName.bind(this);
+        this.getCurrentBlock = this.getCurrentBlock.bind(this);
+    }
+    addBlock(blockNameArg) {
+        const blocksNames = getNamesArr(blockNameArg);
+        blocksNames.forEach(this.addSingleBlock.bind(this));
+        return this;
+    }
+    addElement(elementNameArg) {
+        const elementsNames = getNamesArr(elementNameArg);
+        elementsNames.forEach(this.addSingleElement.bind(this));
+        return this;
+    }
+    addModifier(modifierNameArg) {
+        const currentBlock = this.getCurrentBlock();
+        if (currentBlock === undefined)
+            return this;
+        const modifiersNames = getNamesArr(modifierNameArg);
+        modifiersNames.forEach(this.addSingleModifier.bind(this));
+        return this;
+    }
+    copy() {
+        const copy = new BEM();
+        this.blocks.forEach(block => {
+            copy.addBlock(block.name);
+            block.modifiers.forEach(copy.addModifier.bind(copy));
+        });
+        return copy;
+    }
+    block(blockNameArg) { return this.copy().addBlock(blockNameArg); }
+    element(elementNameArg) { return this.copy().addElement(elementNameArg); }
+    modifier(modifierNameArg) { return this.copy().addModifier(modifierNameArg); }
+    blk(blockNameArg) { return this.block(blockNameArg); }
+    elt(elementNameArg) { return this.element(elementNameArg); }
+    mod(modifierNameArg) { return this.modifier(modifierNameArg); }
+    cp() { return this.copy(); }
+    get value() {
+        return this.blocks.map(block => {
+            return [block.name, ...block.modifiers.map(modifier => {
+                    return `${block.name}_${modifier}`;
+                })].join(' ');
+        }).join(' ');
+    }
+    get val() { return this.value; }
+    blocks = [];
+    findBlockByName(name) {
+        return this.blocks.find(block => block.name === name);
+    }
+    addSingleBlock(blockName) {
+        if (this.findBlockByName(blockName) !== undefined) {
+            this.setCurrentBlockByName(blockName);
+        }
+        else {
+            const block = this.createBlockByName(blockName);
+            this.blocks.push(block);
+        }
+        return this;
+    }
+    addSingleElement(elementName) {
+        const currentBlock = this.getCurrentBlock();
+        if (currentBlock === undefined)
+            this.addBlock(elementName);
+        else {
+            currentBlock.name = currentBlock.name + '__' + elementName;
+        }
+        return this;
+    }
+    addSingleModifier(modifierName) {
+        const currentBlock = this.getCurrentBlock();
+        if (currentBlock !== undefined) {
+            currentBlock.modifiers.push(modifierName);
+        }
+        return this;
+    }
+    setCurrentBlockByName(blockName) {
+        const block = this.findBlockByName(blockName);
+        if (block !== undefined) {
+            const blockPos = this.blocks.indexOf(block);
+            this.blocks = [
+                ...this.blocks.slice(0, blockPos),
+                ...this.blocks.slice(blockPos + 1),
+                block
+            ];
+        }
+        return this;
+    }
+    createBlockByName(blockName) {
+        return { name: blockName, modifiers: [] };
+    }
+    getCurrentBlock() {
+        return this.blocks.slice(-1)[0];
+    }
 }
-var BEM = class _BEM {
-  constructor() {
-    this.findBlockByName = this.findBlockByName.bind(this);
-    this.addBlock = this.addBlock.bind(this);
-    this.addElement = this.addElement.bind(this);
-    this.addModifier = this.addModifier.bind(this);
-    this.copy = this.copy.bind(this);
-    this.block = this.block.bind(this);
-    this.element = this.element.bind(this);
-    this.modifier = this.modifier.bind(this);
-    this.blk = this.blk.bind(this);
-    this.elt = this.elt.bind(this);
-    this.mod = this.mod.bind(this);
-    this.cp = this.cp.bind(this);
-    this.addSingleBlock = this.addSingleBlock.bind(this);
-    this.addSingleElement = this.addSingleElement.bind(this);
-    this.addSingleModifier = this.addSingleModifier.bind(this);
-    this.setCurrentBlockByName = this.setCurrentBlockByName.bind(this);
-    this.createBlockByName = this.createBlockByName.bind(this);
-    this.getCurrentBlock = this.getCurrentBlock.bind(this);
-  }
-  addBlock(blockNameArg) {
-    const blocksNames = getNamesArr(blockNameArg);
-    blocksNames.forEach(this.addSingleBlock.bind(this));
-    return this;
-  }
-  addElement(elementNameArg) {
-    const elementsNames = getNamesArr(elementNameArg);
-    elementsNames.forEach(this.addSingleElement.bind(this));
-    return this;
-  }
-  addModifier(modifierNameArg) {
-    const currentBlock = this.getCurrentBlock();
-    if (currentBlock === void 0) return this;
-    const modifiersNames = getNamesArr(modifierNameArg);
-    modifiersNames.forEach(this.addSingleModifier.bind(this));
-    return this;
-  }
-  copy() {
-    const copy = new _BEM();
-    this.blocks.forEach((block) => {
-      copy.addBlock(block.name);
-      block.modifiers.forEach(copy.addModifier.bind(copy));
-    });
-    return copy;
-  }
-  block(blockNameArg) {
-    return this.copy().addBlock(blockNameArg);
-  }
-  element(elementNameArg) {
-    return this.copy().addElement(elementNameArg);
-  }
-  modifier(modifierNameArg) {
-    return this.copy().addModifier(modifierNameArg);
-  }
-  blk(blockNameArg) {
-    return this.block(blockNameArg);
-  }
-  elt(elementNameArg) {
-    return this.element(elementNameArg);
-  }
-  mod(modifierNameArg) {
-    return this.modifier(modifierNameArg);
-  }
-  cp() {
-    return this.copy();
-  }
-  get value() {
-    return this.blocks.map((block) => {
-      return [block.name, ...block.modifiers.map((modifier) => {
-        return `${block.name}_${modifier}`;
-      })].join(" ");
-    }).join(" ");
-  }
-  get val() {
-    return this.value;
-  }
-  blocks = [];
-  findBlockByName(name) {
-    return this.blocks.find((block) => block.name === name);
-  }
-  addSingleBlock(blockName) {
-    if (this.findBlockByName(blockName) !== void 0) {
-      this.setCurrentBlockByName(blockName);
-    } else {
-      const block = this.createBlockByName(blockName);
-      this.blocks.push(block);
-    }
-    return this;
-  }
-  addSingleElement(elementName) {
-    const currentBlock = this.getCurrentBlock();
-    if (currentBlock === void 0) this.addBlock(elementName);
-    else {
-      currentBlock.name = currentBlock.name + "__" + elementName;
-    }
-    return this;
-  }
-  addSingleModifier(modifierName) {
-    const currentBlock = this.getCurrentBlock();
-    if (currentBlock !== void 0) {
-      currentBlock.modifiers.push(modifierName);
-    }
-    return this;
-  }
-  setCurrentBlockByName(blockName) {
-    const block = this.findBlockByName(blockName);
-    if (block !== void 0) {
-      const blockPos = this.blocks.indexOf(block);
-      this.blocks = [
-        ...this.blocks.slice(0, blockPos),
-        ...this.blocks.slice(blockPos + 1),
-        block
-      ];
-    }
-    return this;
-  }
-  createBlockByName(blockName) {
-    return { name: blockName, modifiers: [] };
-  }
-  getCurrentBlock() {
-    return this.blocks.slice(-1)[0];
-  }
-};
-function bem(blockNameArg) {
-  const bem2 = new BEM();
-  if (blockNameArg instanceof BEM) return blockNameArg.copy();
-  return bem2.addBlock(blockNameArg);
+export function bem(blockNameArg) {
+    const bem = new BEM();
+    if (blockNameArg instanceof BEM)
+        return blockNameArg.copy();
+    return bem.addBlock(blockNameArg);
 }
-export {
-  BEM,
-  bem,
-  getNamesArr
-};

package/agnostic/css/clss/index.js

@@ -1,7 +1,66 @@
-import {
-  clss
-} from "../../../chunks/chunk-TRFZSKNB.js";
-import "../../../chunks/chunk-WSFCRVEQ.js";
-export {
-  clss
-};
+/**
+ * Generates a `ClssMaker` function for a block or blocks.
+ *
+ * @param blockNames - A single block name or an array of block names.
+ * @param options - Optional configuration:
+ *   - `cssModule`: Object mapping class names to their hashed equivalents (required if using CSS modules).
+ *   - `cssModuleRoot`: Optional key for the root block in the CSS module (defaults to `'root'` if not provided).
+ * @returns {ClssMaker}
+ *   A function to generate class names for elements and modifiers.
+ *
+ *   The returned function (`ClssMaker`) parameters:
+ *   - `eltNames`: Element names or `null`. Can be a string, `null`, or array of strings/null.
+ *   - `modNames`: Modifier names. Can be a string, array of strings, or object mapping modifiers to boolean (`true` modifiers are included).
+ *   - Returns a string containing all resolved public and private CSS classes, including element-specific and modifier-specific classes.
+ *
+ * @example
+ * const btnClss = clss('button', { cssModule: styles, cssModuleRoot: 'root' })
+ * const classes = btnClss('icon', { active: true, disabled: false })
+ */
+export function clss(blockNames, options) {
+    const blockNamesArr = Array.isArray(blockNames)
+        ? blockNames
+        : [blockNames];
+    return (eltNames = null, modNames = []) => {
+        // Refine input arguments
+        const eltNamesArr = Array.isArray(eltNames)
+            ? eltNames
+            : [eltNames];
+        const modNamesArr = (Array.isArray(modNames) ? modNames : [modNames])
+            .map(modName => {
+            if (typeof modName === 'string')
+                return modName;
+            const trueModNames = Object
+                .entries(modName)
+                .filter((entry) => entry[1] === true)
+                .map(([key]) => key);
+            return trueModNames;
+        }).flat();
+        // Prepare returned value
+        const outputClassesArr = [];
+        blockNamesArr.forEach(compName => {
+            eltNamesArr.forEach(eltName => {
+                // Un-modified classes
+                const targetPublicClss = eltName === null ? compName : `${compName}__${eltName}`;
+                const targetPrivateClss = eltName === null
+                    ? options?.cssModule[options.cssModuleRoot ?? 'root']
+                    : options?.cssModule[eltName];
+                outputClassesArr.push(targetPublicClss);
+                if (targetPrivateClss !== undefined)
+                    outputClassesArr.push(targetPrivateClss);
+                // Modified classes
+                modNamesArr.forEach(modName => {
+                    const targetModifiedPublicClss = `${targetPublicClss}--${modName}`;
+                    const targetModifiedPrivateClss = eltName === null
+                        ? options?.cssModule[`${options.cssModuleRoot ?? 'root'}--${modName}`]
+                        : options?.cssModule[`${eltName}--${modName}`];
+                    outputClassesArr.push(targetModifiedPublicClss);
+                    if (targetModifiedPrivateClss !== undefined)
+                        outputClassesArr.push(targetModifiedPrivateClss);
+                });
+            });
+        });
+        // Return
+        return outputClassesArr.join(' ');
+    };
+}

package/agnostic/css/clss/index.test.js

@@ -0,0 +1,60 @@
+import { describe, it, expect } from 'vitest';
+import { clss } from './index.js';
+describe('clss', () => {
+    it('returns a function', () => {
+        expect(typeof clss('block')).toBe('function');
+    });
+    it('accepts `null` for an element name', () => {
+        expect(clss('block')(null)).toEqual('block');
+        expect(clss('block')([null])).toEqual('block');
+    });
+    it('accepts multiple block names', () => {
+        expect(clss(['block-1', 'block-2'])(null)).toEqual('block-1 block-2');
+    });
+    it('handles elements correctly', () => {
+        expect(clss('block')('elt')).toEqual('block__elt');
+        expect(clss('block')(['elt-1', 'elt-2'])).toEqual('block__elt-1 block__elt-2');
+        expect(clss('block')([null, 'elt-1', 'elt-2'])).toEqual('block block__elt-1 block__elt-2');
+    });
+    it('handles modifiers on block correctly', () => {
+        expect(clss('block')(null, 'mod')).toEqual('block block--mod');
+        expect(clss('block')(null, ['mod-1', 'mod-2'])).toEqual('block block--mod-1 block--mod-2');
+        expect(clss('block')(null, {
+            'mod-1': true,
+            'mod-2': false,
+            'mod-3': true
+        })).toEqual('block block--mod-1 block--mod-3');
+    });
+    it('handles modifiers on elements correctly', () => {
+        expect(clss('block')('elt', 'mod')).toEqual('block__elt block__elt--mod');
+        expect(clss('block')('elt', ['mod-1', 'mod-2'])).toEqual('block__elt block__elt--mod-1 block__elt--mod-2');
+        expect(clss('block')('elt', {
+            'mod-1': true,
+            'mod-2': false,
+            'mod-3': true
+        })).toEqual('block__elt block__elt--mod-1 block__elt--mod-3');
+    });
+    it('handles optional css modules', () => {
+        expect(clss('block', {
+            cssModule: {
+                root: 'module-block'
+            }
+        })(null)).toEqual('block module-block');
+        expect(clss('block', {
+            cssModule: {
+                root: 'module-block',
+                elt: 'module-elt',
+                'elt--mod': 'module-elt-mod'
+            }
+        })('elt', 'mod')).toEqual('block__elt module-elt block__elt--mod module-elt-mod');
+    });
+    it('handles optional css modules alternative root name', () => {
+        expect(clss('block', {
+            cssModule: {
+                'alt-root': 'module-block',
+                'elt': 'module-elt'
+            },
+            cssModuleRoot: 'alt-root'
+        })('elt')).toEqual('block__elt module-elt');
+    });
+});

package/agnostic/css/generate-nice-color/index.js

@@ -1,75 +1,28 @@
-import "../../../chunks/chunk-WSFCRVEQ.js";
-
-// src/agnostic/css/generate-nice-color/index.ts
-var niceColors = [
-  "fuchsia",
-  "teal",
-  "aliceblue",
-  "bisque",
-  "blueviolet",
-  "burlywood",
-  "chocolate",
-  "coral",
-  "cornflowerblue",
-  "crimson",
-  "darkblue",
-  "darkgoldenrod",
-  "darkkhaki",
-  "darkmagenta",
-  "darkolivegreen",
-  "darkorange",
-  "darkorchid",
-  "darkred",
-  "darksalmon",
-  "darkslateblue",
-  "darkslategray",
-  "darkviolet",
-  "deeppink",
-  "deepskyblue",
-  "dodgerblue",
-  "firebrick",
-  "floralwhite",
-  "gainsboro",
-  "gold",
-  "hotpink",
-  "indianred",
-  "indigo",
-  "khaki",
-  "lavender",
-  "lightcoral",
-  "lightgreen",
-  "lightsalmon",
-  "lightsteelblue",
-  "limegreen",
-  "magenta",
-  "mediumseagreen",
-  "mediumspringgreen",
-  "mediumvioletred",
-  "moccasin",
-  "orangered",
-  "orchid",
-  "palegoldenrod",
-  "palevioletred",
-  "peachpuff",
-  "peru",
-  "plum",
-  "royalblue",
-  "sandybrown",
-  "springgreen",
-  "tan",
-  "thistle",
-  "tomato",
-  "violet",
-  "wheat",
-  "yellowgreen"
+// eslint-disable no-multi-spaces @typescript-eslint/comma-spacing
+/**
+ * Array of aesthetically pleasing CSS named colors.
+ */
+export const niceColors = [
+    'fuchsia', 'teal', 'aliceblue', 'bisque', 'blueviolet',
+    'burlywood', 'chocolate', 'coral', 'cornflowerblue', 'crimson',
+    'darkblue', 'darkgoldenrod', 'darkkhaki', 'darkmagenta', 'darkolivegreen',
+    'darkorange', 'darkorchid', 'darkred', 'darksalmon', 'darkslateblue',
+    'darkslategray', 'darkviolet', 'deeppink', 'deepskyblue', 'dodgerblue',
+    'firebrick', 'floralwhite', 'gainsboro', 'gold', 'hotpink',
+    'indianred', 'indigo', 'khaki', 'lavender', 'lightcoral',
+    'lightgreen', 'lightsalmon', 'lightsteelblue', 'limegreen', 'magenta',
+    'mediumseagreen', 'mediumspringgreen', 'mediumvioletred', 'moccasin', 'orangered',
+    'orchid', 'palegoldenrod', 'palevioletred', 'peachpuff', 'peru',
+    'plum', 'royalblue', 'sandybrown', 'springgreen', 'tan',
+    'thistle', 'tomato', 'violet', 'wheat', 'yellowgreen'
 ];
-var generateNiceColor = () => {
-  const pos = Math.floor(Math.random() * niceColors.length);
-  const found = niceColors[pos];
-  if (found === void 0) throw new Error("Could not generate color (should never happen)");
-  return found;
-};
-export {
-  generateNiceColor,
-  niceColors
+/**
+ * Generates a random aesthetically pleasing CSS named color.
+ */
+export const generateNiceColor = () => {
+    const pos = Math.floor(Math.random() * niceColors.length);
+    const found = niceColors[pos];
+    if (found === undefined)
+        throw new Error('Could not generate color (should never happen)');
+    return found;
 };

package/agnostic/css/generate-nice-color/index.test.js

@@ -0,0 +1,8 @@
+import { describe, it, expect } from 'vitest';
+import { generateNiceColor, niceColors } from './index.js';
+describe('generateNiceColor', () => {
+    it('returns a color from the niceColors array', () => {
+        const result = generateNiceColor();
+        expect(niceColors).toContain(result);
+    });
+});

package/agnostic/css/index.d.ts

@@ -1,6 +1,6 @@
 export * as bem from './bem/index.js'
 export * as clss from './clss/index.js'
-export * as generateNiceColor from './generate-nice-color/index.js'
 export * as isValidCssClassName from './is-valid-css-class-name/index.js'
 export * as scale from './scale/index.js'
+export * as generateNiceColor from './generate-nice-color/index.js'
 export * as stylesSet from './styles-set/index.js'

package/agnostic/css/index.js

@@ -1,6 +1,6 @@
 export * as bem from './bem/index.js'
 export * as clss from './clss/index.js'
-export * as generateNiceColor from './generate-nice-color/index.js'
 export * as isValidCssClassName from './is-valid-css-class-name/index.js'
 export * as scale from './scale/index.js'
+export * as generateNiceColor from './generate-nice-color/index.js'
 export * as stylesSet from './styles-set/index.js'

package/agnostic/css/is-valid-css-class-name/index.js

@@ -1,9 +1,15 @@
-import {
-  classNameRegex,
-  isValidClassName
-} from "../../../chunks/chunk-W5A2TON3.js";
-import "../../../chunks/chunk-WSFCRVEQ.js";
-export {
-  classNameRegex,
-  isValidClassName
-};
+/**
+ * Regular expression pattern for validating CSS class names.
+ * Matches class names that start with an optional hyphen, followed by a letter or underscore,
+ * then any combination of letters, numbers, underscores, or hyphens.
+ */
+export const classNameRegex = /^-?[_a-zA-Z]+[_a-zA-Z0-9-]*$/;
+/**
+ * Checks if a string is a valid CSS class name.
+ *
+ * @param {string} string - The string to validate.
+ * @returns {boolean} True if the string is a valid CSS class name, false otherwise.
+ */
+export function isValidClassName(string) {
+    return classNameRegex.test(string);
+}

package/agnostic/css/is-valid-css-class-name/index.test.js

@@ -0,0 +1,36 @@
+import { describe, it, expect } from 'vitest';
+import { isValidClassName } from './index.js';
+describe('isValidClassName', () => {
+    it('returns true for valid class names', () => {
+        expect(isValidClassName('my-class')).toBe(true);
+        expect(isValidClassName('myClass')).toBe(true);
+        expect(isValidClassName('_my-class')).toBe(true);
+        expect(isValidClassName('my-class-123')).toBe(true);
+        expect(isValidClassName('MyClass')).toBe(true);
+    });
+    it('returns true for class names starting with hyphen', () => {
+        expect(isValidClassName('-my-class')).toBe(true);
+        expect(isValidClassName('-myClass')).toBe(true);
+    });
+    it('returns false for class names starting with numbers', () => {
+        expect(isValidClassName('123class')).toBe(false);
+        expect(isValidClassName('0my-class')).toBe(false);
+    });
+    it('returns false for class names starting with hyphen and number', () => {
+        expect(isValidClassName('-123class')).toBe(false);
+    });
+    it('returns false for empty string', () => {
+        expect(isValidClassName('')).toBe(false);
+    });
+    it('returns false for class names with invalid characters', () => {
+        expect(isValidClassName('my class')).toBe(false);
+        expect(isValidClassName('my.class')).toBe(false);
+        expect(isValidClassName('my@class')).toBe(false);
+        expect(isValidClassName('my#class')).toBe(false);
+    });
+    it('returns true for single letter class names', () => {
+        expect(isValidClassName('a')).toBe(true);
+        expect(isValidClassName('A')).toBe(true);
+        expect(isValidClassName('_')).toBe(true);
+    });
+});