lapikit 0.2.3 → 0.2.4

package/dist/style/parser/color.js

@@ -1,88 +0,0 @@
-import { parseColor } from '../../internal/colors.js';
-export const colors = (config) => {
-    const schemes = {
-        light: {},
-        dark: {}
-    };
-    for (const [property, values] of Object.entries(config.theme.colors)) {
-        if (typeof values === 'string') {
-            // for all color scheme
-            const _refColor = parseColor(values);
-            schemes['light'][property] = _refColor;
-            schemes['dark'][property] = _refColor;
-        }
-        else {
-            // with specification
-            if ('light' in values && 'dark' in values) {
-                schemes['light'][property] = parseColor(values.light);
-                schemes['dark'][property] = parseColor(values.dark);
-            }
-            else {
-                const _refColor = 'dark' in values ? parseColor(values['dark']) : parseColor(values['light']);
-                schemes['light'][property] = _refColor;
-                schemes['dark'][property] = _refColor;
-            }
-        }
-    }
-    // css variables
-    let cssVariables = '';
-    if (config.theme.colorScheme === 'auto') {
-        for (const [themeName, colors] of Object.entries(schemes)) {
-            const used = themeName;
-            const inversed = used === 'light' ? 'dark' : 'light';
-            cssVariables += `@media (prefers-color-scheme: ${used}) {\n`;
-            cssVariables += `:root, .${used} {\n`;
-            cssVariables += `color-scheme: ${used};\n`;
-            for (const [colorName, colorValue] of Object.entries(colors)) {
-                cssVariables += `--kit-${colorName}: ${colorValue};\n`;
-            }
-            cssVariables += `}\n`;
-            cssVariables += `.${inversed} {\n`;
-            cssVariables += `color-scheme: ${inversed};\n`;
-            for (const [colorName, colorValue] of Object.entries(schemes[inversed])) {
-                cssVariables += `--kit-${colorName}: ${colorValue};\n`;
-            }
-            cssVariables += `}\n`;
-            cssVariables += `}\n`;
-        }
-    }
-    else {
-        const used = config.theme.colorScheme;
-        const inversed = config.theme.colorScheme === 'light' ? 'dark' : 'light';
-        cssVariables += `:root, .${used} {\n`;
-        cssVariables += `color-scheme: ${used};\n`;
-        for (const [colorName, colorValue] of Object.entries(schemes[used])) {
-            cssVariables += `--kit-${colorName}: ${colorValue};\n`;
-        }
-        cssVariables += `}\n`;
-        cssVariables += `.${inversed} {\n`;
-        cssVariables += `color-scheme: ${inversed};\n`;
-        for (const [colorName, colorValue] of Object.entries(schemes[inversed])) {
-            cssVariables += `--kit-${colorName}: ${colorValue};\n`;
-        }
-        cssVariables += `}\n`;
-    }
-    // class
-    let classStyles = '';
-    for (const [property] of Object.entries(schemes.light)) {
-        // classStyles += `.${property}:not([class*='--variant-']) {\n`;
-        // classStyles += `--background-color: var(--kit-${property});\n`;
-        // classStyles += `--color: var(--kit-on-${property}, var(--kit-${property}));\n`;
-        // classStyles += `}\n`;
-        // classStyles += `.${property}[class*='--variant-'] {\n`;
-        // classStyles += `--color: var(--kit-${property});\n`;
-        // classStyles += `}\n`;
-        classStyles += `.${property} {\n`;
-        classStyles += `--base: var(--kit-${property});\n`;
-        classStyles += `--on: var(--kit-on-${property}, var(--kit-${property}));\n`;
-        classStyles += `}\n`;
-        // classStyles += `.${property}:not([class*='kit-']) {\n`;
-        // classStyles += `background-color: var(--kit-${property});\n`;
-        // classStyles += `color: var(--kit-on-${property}, var(--kit-${property}));\n`;
-        // classStyles += `}\n`;
-    }
-    return {
-        root: cssVariables,
-        className: classStyles
-    };
-};

package/dist/style/parser/component.d.ts

@@ -1,2 +0,0 @@
-import type { Lapikit } from '../../internal/types.js';
-export declare const component: (config: Lapikit) => string;

package/dist/style/parser/component.js

@@ -1,115 +0,0 @@
-import { fileURLToPath } from 'url';
-import { dirname } from 'path';
-import fs from 'fs';
-import path from 'path';
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-export const component = (config) => {
-    let css = ``;
-    const tresholds = {
-        _default: '',
-        static: '',
-        min: '',
-        max: '',
-        all: ''
-    };
-    function loadComponentCSS(directory) {
-        fs.readdirSync(directory).forEach((File) => {
-            const absolutePath = path.join(directory, File);
-            if (fs.statSync(absolutePath).isDirectory())
-                return loadComponentCSS(absolutePath);
-            else if (absolutePath.endsWith('.css') && !absolutePath.includes('/_')) {
-                const content = parser(fs.readFileSync(absolutePath, 'utf-8'));
-                tresholds._default += content.allExtracted
-                    .replaceAll('[breakpoint|min]', '[breakpoint]')
-                    .replaceAll('[breakpoint|max]', '[breakpoint]')
-                    .replaceAll('[breakpoint|all]', '[breakpoint]');
-                tresholds.static += content.defaultExtracted;
-                tresholds.min += content.minExtracted.replaceAll('[breakpoint|min]', '[breakpoint]');
-                tresholds.max += content.maxExtracted.replaceAll('[breakpoint|max]', '[breakpoint]');
-                tresholds.all += content.allModifierExtracted.replaceAll('[breakpoint|all]', '[breakpoint]');
-                return (css += `${content.cleaned}\n`);
-            }
-        });
-    }
-    loadComponentCSS(path.resolve(__dirname, '../../components'));
-    for (const property in config.breakpoints.thresholds) {
-        if (property !== '_default') {
-            const name = `.${/^\d/.test(property) ? `\\3${property}` : property}\\:`;
-            const value = typeof config.breakpoints.thresholds[property] === 'number'
-                ? `${config.breakpoints.thresholds[property]}px`
-                : config.breakpoints.thresholds[property];
-            if (tresholds.static !== '' || tresholds.all !== '' || tresholds.min !== '') {
-                css += `@media screen and (min-width: ${value}) {\n`;
-                if (tresholds.static !== '')
-                    css += tresholds.static.replaceAll('[breakpoint]', name);
-                if (tresholds.all !== '')
-                    css += tresholds.all.replaceAll('[breakpoint]', name);
-                if (tresholds.min !== '')
-                    css += tresholds.min.replaceAll('[breakpoint]', name);
-                css += `}\n`;
-            }
-            if (tresholds.max !== '' || tresholds.all !== '') {
-                css += `@media screen and (max-width: ${value}) {\n`;
-                if (tresholds.max !== '')
-                    css += tresholds.max.replaceAll('[breakpoint]', name);
-                if (tresholds.all !== '')
-                    css += tresholds.all.replaceAll('[breakpoint]', name);
-                css += `}\n`;
-            }
-        }
-        else {
-            css += tresholds._default.replaceAll('[breakpoint]', '.');
-        }
-    }
-    return css;
-};
-const parser = (css) => {
-    const regex = /([^{]+)\{([^}]+)\}/g;
-    let match;
-    const matchesToRemove = [];
-    const extractedByType = {
-        allExtracted: [],
-        defaultExtracted: [],
-        minExtracted: [],
-        maxExtracted: [],
-        allModifierExtracted: []
-    };
-    while ((match = regex.exec(css)) !== null) {
-        const fullMatch = match[0];
-        const selectors = match[1].trim();
-        const body = match[2].trim();
-        const selectorsArray = selectors.split(',').map((sel) => sel.trim());
-        let matchedType = null;
-        if (selectorsArray.some((sel) => sel.includes('[breakpoint|min]'))) {
-            matchedType = 'minExtracted';
-        }
-        else if (selectorsArray.some((sel) => sel.includes('[breakpoint|max]'))) {
-            matchedType = 'maxExtracted';
-        }
-        else if (selectorsArray.some((sel) => sel.includes('[breakpoint|all]'))) {
-            matchedType = 'allModifierExtracted';
-        }
-        else if (selectorsArray.some((sel) => sel.includes('[breakpoint]'))) {
-            matchedType = 'defaultExtracted';
-        }
-        if (matchedType) {
-            const rule = `${selectors} {\n${body}\n}`;
-            extractedByType.allExtracted.push(rule);
-            extractedByType[matchedType].push(rule);
-            matchesToRemove.push(fullMatch);
-        }
-    }
-    let cleaned = css;
-    for (const rule of matchesToRemove) {
-        cleaned = cleaned.replace(rule, '').replace(/\n{2,}/g, '\n\n');
-    }
-    return {
-        allExtracted: extractedByType.allExtracted.join('\n\n').trim(),
-        defaultExtracted: extractedByType.defaultExtracted.join('\n\n').trim(),
-        minExtracted: extractedByType.minExtracted.join('\n\n').trim(),
-        maxExtracted: extractedByType.maxExtracted.join('\n\n').trim(),
-        allModifierExtracted: extractedByType.allModifierExtracted.join('\n\n').trim(),
-        cleaned: cleaned.trim()
-    };
-};

package/dist/style/parser/device.d.ts

@@ -1,2 +0,0 @@
-import type { Lapikit } from '../../internal/types.js';
-export declare const devices: (config: Lapikit) => string;

package/dist/style/parser/device.js

@@ -1,40 +0,0 @@
-import { setUnit } from '../../internal/unit.js';
-export const devices = (config) => {
-    let css = ``;
-    const list = {
-        mobile: config.breakpoints.mobileBreakpoint,
-        tablet: config.breakpoints.tabletBreakpoint,
-        laptop: config.breakpoints.laptopBreakpoint
-    };
-    css += `@media screen and (max-width: ${setUnit(config.breakpoints.thresholds[list.mobile])}) {\n`;
-    css += `.hidden-mobile {\n`;
-    css += `display: none !important;\n`;
-    css += `}\n`;
-    css += `}\n`;
-    css += `@media screen and (min-width: ${setUnit(config.breakpoints.thresholds[list.mobile])}) {\n`;
-    css += `.display-mobile {\n`;
-    css += `display: none !important;\n`;
-    css += `}\n`;
-    css += `}\n`;
-    css += `@media screen and (min-width: ${setUnit(config.breakpoints.thresholds[list.tablet])}) and (max-width: ${setUnit(config.breakpoints.thresholds[list.laptop])})  {\n`;
-    css += `.hidden-tablet {\n`;
-    css += `display: none !important;\n`;
-    css += `}\n`;
-    css += `}\n`;
-    css += `@media screen and (max-width: ${setUnit(config.breakpoints.thresholds[list.tablet])}) and (min-width: ${setUnit(config.breakpoints.thresholds[list.laptop])}){\n`;
-    css += `.display-tablet {\n`;
-    css += `display: none !important;\n`;
-    css += `}\n`;
-    css += `}\n`;
-    css += `@media screen and (min-width: ${setUnit(config.breakpoints.thresholds[list.laptop])})  {\n`;
-    css += `.hidden-laptop {\n`;
-    css += `display: none !important;\n`;
-    css += `}\n`;
-    css += `}\n`;
-    css += `@media screen and (max-width: ${setUnit(config.breakpoints.thresholds[list.laptop])}) {\n`;
-    css += `.display-laptop {\n`;
-    css += `display: none !important;\n`;
-    css += `}\n`;
-    css += `}\n`;
-    return css;
-};

package/dist/style/parser/index.d.ts

@@ -1,4 +0,0 @@
-export * from './color.js';
-export * from './component.js';
-export * from './device.js';
-export * from './variable.js';

package/dist/style/parser/index.js

@@ -1,4 +0,0 @@
-export * from './color.js';
-export * from './component.js';
-export * from './device.js';
-export * from './variable.js';

package/dist/style/parser/variable.d.ts

@@ -1,2 +0,0 @@
-import type { Lapikit } from '../../internal/types.js';
-export declare const variables: (config?: Lapikit) => string;

package/dist/style/parser/variable.js

@@ -1,25 +0,0 @@
-export const variables = (config) => {
-    if (!config)
-        return '';
-    const { styles } = config;
-    let css = ``;
-    css += `:root {\n`;
-    css += `\t--kit-spacing: ${parser(styles.spacing)};\n`;
-    if (styles.corner.active) {
-        for (const [key, value] of Object.entries(styles.corner.radius)) {
-            css += `\t--kit-radius-${key}: ${typeof value === 'number' ? value + 'px' : value};\n`;
-        }
-    }
-    for (const [key, value] of Object.entries(styles.font)) {
-        css += `\t--kit-font-family-${key}: ${parser(value)};\n`;
-    }
-    css += `}\n`;
-    return css;
-};
-const parser = (value) => {
-    if (typeof value === 'number')
-        return `${value}px`;
-    if (Array.isArray(value))
-        return value.join(', ');
-    return value;
-};

package/dist/style/variable.css

@@ -1,12 +0,0 @@
-:root {
-	--kit-dialog-size-xs: 18.75rem;
-	--kit-dialog-size-sm: 25rem;
-	--kit-dialog-size-md: 37.5rem;
-	--kit-dialog-size-lg: 53.125rem;
-	--kit-dialog-size-xl: 75rem;
-	--kit-modal-size-xs: 18.75rem;
-	--kit-modal-size-sm: 25rem;
-	--kit-modal-size-md: 37.5rem;
-	--kit-modal-size-lg: 53.125rem;
-	--kit-modal-size-xl: 75rem;
-}