lapikit 0.0.0-insiders.f325e60 → 0.0.0-insiders.f352010

package/dist/internal/core/formatter/component.js

@@ -12,49 +12,46 @@ export async function componentFormatter({ breakpoints }) {
             const absolutePath = path.join(directory, File);
             if (fs.statSync(absolutePath).isDirectory())
                 return loadSvelteFiles(absolutePath);
-            else if (absolutePath.endsWith('.svelte') && !absolutePath.includes('/_')) {
-                console.log(absolutePath);
-                const fileContent = fs.readFileSync(absolutePath, 'utf8');
-                const styleRegex = /<style[^>]*>([\s\S]*?)<\/style>/gi;
-                const styleMatch = styleRegex.exec(fileContent);
-                if (styleMatch) {
-                    const originalStyleContent = styleMatch[1];
-                    const content = parserCSSBreakpoints(originalStyleContent);
-                    let css = '';
-                    for (const property in breakpoints) {
-                        if (property !== 'base') {
-                            const name = `.${/^\d/.test(property) ? `\\3${property}` : property}\\:`;
-                            const value = typeof breakpoints[property] === 'number'
-                                ? `${breakpoints[property]}px`
-                                : breakpoints[property];
-                            if (content.base !== '' || content.minmax !== '' || content.min !== '') {
-                                css += `@media screen and (min-width: ${value}) {\n`;
-                                if (content.base !== '')
-                                    css += content.base.replaceAll('[breakpoint]', name);
-                                if (content.minmax !== '')
-                                    css += content.minmax.replaceAll('[breakpoint]', name);
-                                if (content.min !== '')
-                                    css += content.min.replaceAll('[breakpoint]', name);
-                                css += `}\n`;
-                            }
-                            if (content.max !== '' || content.all !== '') {
-                                css += `@media screen and (max-width: ${value}) {\n`;
-                                if (content.max !== '')
-                                    css += content.max.replaceAll('[breakpoint]', name);
-                                if (content.all !== '')
-                                    css += content.all.replaceAll('[breakpoint]', name);
-                                css += `}\n`;
-                            }
+            else if (absolutePath.endsWith('.css') && !absolutePath.includes('/_')) {
+                const fileCSS = fs.readFileSync(absolutePath, 'utf8');
+                const content = parserCSSBreakpoints(fileCSS);
+                let css = `${content.cleaned}\n`;
+                for (const property in breakpoints) {
+                    if (property !== 'base') {
+                        const name = `.${/^\d/.test(property) ? `\\3${property}` : property}\\:`;
+                        const value = typeof breakpoints[property] === 'number'
+                            ? `${breakpoints[property]}px`
+                            : breakpoints[property];
+                        if (content.base !== '' || content.minmax !== '' || content.min !== '') {
+                            css += `\n@media screen and (min-width: ${value}) {\n`;
+                            if (content.base !== '')
+                                css += content.base.replaceAll('[breakpoint]', name);
+                            if (content.minmax !== '')
+                                css += content.minmax.replaceAll('[breakpoint]', name);
+                            if (content.min !== '')
+                                css += content.min.replaceAll('[breakpoint]', name);
+                            css += `\n}\n`;
                         }
-                        else {
-                            css += content.all.replaceAll('[breakpoint]', '.');
+                        if (content.max !== '' || content.minmax !== '') {
+                            css += `\n@media screen and (max-width: ${value}) {\n`;
+                            if (content.max !== '')
+                                css += content.max.replaceAll('[breakpoint]', `max\\:${name}`);
+                            if (content.minmax !== '')
+                                css += content.all.replaceAll('[breakpoint]', `max\\:${name}`);
+                            css += `\n}\n`;
                         }
                     }
-                    let formattedCSS = css;
-                    formattedCSS = formattedCSS.trim().replace(/\n{3,}/g, '\n\n');
-                    console.log(formattedCSS);
-                    const updatedFileContent = fileContent.replace(styleRegex, `<style>${formattedCSS}</style>`);
-                    fs.writeFileSync(absolutePath, updatedFileContent, 'utf8');
+                    else {
+                        css += `${content.base.replaceAll('[breakpoint]', '.')}\n`;
+                    }
+                }
+                const baseName = path.basename(absolutePath, '.css');
+                const svelteFilePath = path.join(path.dirname(absolutePath), `${baseName}.svelte`);
+                if (fs.existsSync(svelteFilePath)) {
+                    let svelteContent = fs.readFileSync(svelteFilePath, 'utf8');
+                    svelteContent = svelteContent.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, '');
+                    svelteContent += `<style>\n${css}</style>`;
+                    fs.writeFileSync(svelteFilePath, svelteContent, 'utf8');
                 }
             }
         });

package/dist/internal/core/formatter/device.js

@@ -8,56 +8,57 @@ export async function devicesFormatter({ devices }) {
     });
     sortedDevices.forEach(([deviceName, breakpoint], index) => {
         const value = parserValues(breakpoint);
-        css += `.${deviceName} {\n`;
-        css += `  display: none;\n`;
-        css += `}\n\n`;
         if (index === 0) {
+            // the largest device
+            css += `@media (max-width: ${value}) {\n`;
+            css += ` .kit-device--d-${deviceName} {\n`;
+            css += `   display: none !important;\n`;
+            css += ` }\n`;
+            css += `}\n\n`;
             css += `@media (min-width: ${value}) {\n`;
-            css += `  .${deviceName} {\n`;
-            css += `    display: block;\n`;
-            css += `  }\n`;
+            css += ` .kit-device--h-${deviceName} {\n`;
+            css += `   display: none !important;\n`;
+            css += ` }\n`;
             css += `}\n\n`;
         }
         else if (index === sortedDevices.length - 1) {
-            css += `@media (max-width: ${value}) {\n`;
-            css += `  .${deviceName} {\n`;
-            css += `    display: block;\n`;
-            css += `  }\n`;
+            const prevDevice = sortedDevices[index - 1];
+            const prevValue = parserValues(prevDevice[1]);
+            // the smallest device
+            css += `@media (min-width: ${prevValue}) {\n`;
+            css += ` .kit-device--d-${deviceName} {\n`;
+            css += `   display: none !important;\n`;
+            css += ` }\n`;
             css += `}\n\n`;
-        }
-        else {
-            const nextDevice = sortedDevices[index + 1];
-            const nextValue = parserValues(nextDevice[1]);
-            css += `@media (min-width: ${nextValue}) and (max-width: ${value}) {\n`;
-            css += `  .${deviceName} {\n`;
-            css += `    display: block;\n`;
-            css += `  }\n`;
+            css += `@media (max-width: ${prevValue}) {\n`;
+            css += ` .kit-device--h-${deviceName} {\n`;
+            css += `   display: none !important;\n`;
+            css += ` }\n`;
             css += `}\n\n`;
-        }
-        css += `.hide-${deviceName} {\n`;
-        css += `  display: block;\n`;
-        css += `}\n\n`;
-        if (index === 0) {
             css += `@media (min-width: ${value}) {\n`;
-            css += `  .hide-${deviceName} {\n`;
-            css += `    display: none;\n`;
-            css += `  }\n`;
+            css += ` .kit-device--od-${deviceName} {\n`;
+            css += `   display: none !important;\n`;
+            css += ` }\n`;
             css += `}\n\n`;
-        }
-        else if (index === sortedDevices.length - 1) {
             css += `@media (max-width: ${value}) {\n`;
-            css += `  .hide-${deviceName} {\n`;
-            css += `    display: none;\n`;
-            css += `  }\n`;
+            css += ` .kit-device--oh-${deviceName} {\n`;
+            css += `   display: none !important;\n`;
+            css += ` }\n`;
             css += `}\n\n`;
         }
         else {
-            const nextDevice = sortedDevices[index + 1];
+            //intermediate devices
+            const nextDevice = sortedDevices[index - 1];
             const nextValue = parserValues(nextDevice[1]);
-            css += `@media (min-width: ${nextValue}) and (max-width: ${value}) {\n`;
-            css += `  .hide-${deviceName} {\n`;
-            css += `    display: none;\n`;
-            css += `  }\n`;
+            css += `@media (max-width: ${value}) {\n`;
+            css += ` .kit-device--d-${deviceName} {\n`;
+            css += `   display: none !important;\n`;
+            css += ` }\n`;
+            css += `}\n\n`;
+            css += `@media (min-width: ${nextValue}) {\n`;
+            css += ` .kit-device--h-${deviceName} {\n`;
+            css += `   display: none !important;\n`;
+            css += ` }\n`;
             css += `}\n\n`;
         }
     });

package/dist/internal/core/formatter/index.d.ts

@@ -1,5 +1,5 @@
 import type { DevConfiguration } from '../../types/index.js';
-export declare function css(config: DevConfiguration): Promise<{
+export declare function liliRabbit(config: DevConfiguration): Promise<{
     themes: string;
     typography: string;
     styles: string;

package/dist/internal/core/formatter/index.js

@@ -1,11 +1,11 @@
 import { preset } from '../../config/presets.js';
-import { deepMerge } from '../../deepMerge.js';
+import { deepMerge } from '../../helpers/deep-merge.js';
 import { componentFormatter } from './component.js';
 import { devicesFormatter } from './device.js';
 import { stylesFormatter } from './style.js';
 import { themesFormatter } from './theme.js';
 import { typographyFormatter } from './typography.js';
-export async function css(config) {
+export async function liliRabbit(config) {
     // states
     const defaultTheme = config?.theme?.defaultTheme || preset.theme.defaultTheme;
     const defaultTypography = config?.typography?.defaultTypography || preset.typography.defaultTypography;

package/dist/internal/core/formatter/theme.js

@@ -1,25 +1,41 @@
 import { preset } from '../../config/presets.js';
-import { deepMerge } from '../../deepMerge.js';
+import { formatColor } from '../../helpers/colors.js';
+import { deepMerge } from '../../helpers/deep-merge.js';
 import { parserValues } from '../../helpers/parser.js';
 export async function themesFormatter({ themes, defaultTheme = 'light' }) {
     let css = '';
     for (const [name, values] of Object.entries(themes)) {
         const ref = values?.dark ? preset.theme.themes.dark : preset.theme.themes.light;
-        let cssTheme = defaultTheme === name ? `:root,\n.l-theme-${name} {\n` : `.l-theme-${name} {\n`;
+        let cssTheme = defaultTheme === name ? `:root,\n.kit-theme--${name} {\n` : `.kit-theme--${name} {\n`;
+        function flattenColors(obj, prefix = '') {
+            const result = {};
+            for (const [key, value] of Object.entries(obj)) {
+                const newPrefix = prefix ? `${prefix}-${key}` : key;
+                if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+                    Object.assign(result, flattenColors(value, newPrefix));
+                }
+                else {
+                    result[newPrefix] = value;
+                }
+            }
+            return result;
+        }
         // colors
         cssTheme += `  color-scheme: ${values?.dark ? 'dark' : 'light'};\n`;
-        for (const [varName, varValue] of Object.entries(deepMerge(ref.colors, values?.colors) || {})) {
-            cssTheme += `  --system-${varName}: ${varValue};\n`;
+        const mergedColors = deepMerge(ref.colors, values?.colors) || {};
+        const flatColors = flattenColors(mergedColors);
+        for (const [varName, varValue] of Object.entries(flatColors)) {
+            cssTheme += `  --kit-${varName}: ${formatColor(varValue)};\n`;
         }
         // variables
         for (const [name, varValue] of Object.entries(deepMerge(ref.variables, values?.variables) || {})) {
             if (varValue && typeof varValue === 'object') {
                 for (const [variableName, variableValue] of Object.entries(varValue || {})) {
-                    cssTheme += `  --l-theme-${name}-${variableName}: ${parserValues(variableValue)};\n`;
+                    cssTheme += `  --kit-${name}-${variableName}: ${formatColor(parserValues(variableValue))};\n`;
                 }
             }
             else {
-                cssTheme += `  --l-theme-${name}: ${parserValues(varValue)};\n`;
+                cssTheme += `  --kit-${name}: ${formatColor(parserValues(varValue))};\n`;
             }
         }
         css += cssTheme + '}\n';

package/dist/internal/core/formatter/typography.js

@@ -4,7 +4,7 @@ export async function typographyFormatter({ typography, defaultTypography = 'def
     for (const [name, values] of Object.entries(typography)) {
         let cssTypo = defaultTypography === name ? `:root {\n` : `.${name} {\n`;
         for (const [fontName, fontValue] of Object.entries(values || {})) {
-            cssTypo += `  --kit-font-${fontName}: ${parserValues(fontValue)};\n`;
+            cssTypo += `  --kit-font-${fontName}: ${parserValues(fontValue).replaceAll('"', '')};\n`;
         }
         css += cssTypo + '}\n';
     }

package/dist/internal/core/standard-colors.d.ts

@@ -0,0 +1,75 @@
+export declare const standardColors: {
+    red: {
+        light: string;
+        dark: string;
+    };
+    orange: {
+        light: string;
+        dark: string;
+    };
+    yellow: {
+        light: string;
+        dark: string;
+    };
+    green: {
+        light: string;
+        dark: string;
+    };
+    mint: {
+        light: string;
+        dark: string;
+    };
+    teal: {
+        light: string;
+        dark: string;
+    };
+    cyan: {
+        light: string;
+        dark: string;
+    };
+    blue: {
+        light: string;
+        dark: string;
+    };
+    indigo: {
+        light: string;
+        dark: string;
+    };
+    purple: {
+        light: string;
+        dark: string;
+    };
+    pink: {
+        light: string;
+        dark: string;
+    };
+    brown: {
+        light: string;
+        dark: string;
+    };
+    gray: {
+        light: string;
+        dark: string;
+    };
+    gray2: {
+        light: string;
+        dark: string;
+    };
+    gray3: {
+        light: string;
+        dark: string;
+    };
+    gray4: {
+        light: string;
+        dark: string;
+    };
+    gray5: {
+        light: string;
+        dark: string;
+    };
+    gray6: {
+        light: string;
+        dark: string;
+    };
+};
+export default standardColors;

package/dist/internal/core/standard-colors.js

@@ -0,0 +1,75 @@
+export const standardColors = {
+    red: {
+        light: '#FF3B30',
+        dark: '#FF453A'
+    },
+    orange: {
+        light: '#FF9500',
+        dark: '#FF9F0A'
+    },
+    yellow: {
+        light: '#FFCC00',
+        dark: '#FFD60A'
+    },
+    green: {
+        light: '#34C759',
+        dark: '#30D158'
+    },
+    mint: {
+        light: '#00C7BE',
+        dark: '#66D4CF'
+    },
+    teal: {
+        light: '#30B0C7',
+        dark: '#40CBE0'
+    },
+    cyan: {
+        light: '#32ADE6',
+        dark: '#64D2FF'
+    },
+    blue: {
+        light: '#007AFF',
+        dark: '#0A84FF'
+    },
+    indigo: {
+        light: '#5856D6',
+        dark: '#5E5CE6'
+    },
+    purple: {
+        light: '#AF52DE',
+        dark: '#BF5AF2'
+    },
+    pink: {
+        light: '#FF2D55',
+        dark: '#FF375F'
+    },
+    brown: {
+        light: '#A2845E',
+        dark: '#AC8E68'
+    },
+    gray: {
+        light: '#8E8E93',
+        dark: '#8E8E93'
+    },
+    gray2: {
+        light: '#AEAEB2',
+        dark: '#636366'
+    },
+    gray3: {
+        light: '#C7C7CC',
+        dark: '#48484A'
+    },
+    gray4: {
+        light: '#D1D1D6',
+        dark: '#3A3A3C'
+    },
+    gray5: {
+        light: '#E5E5EA',
+        dark: '#2C2C2E'
+    },
+    gray6: {
+        light: '#F2F2F7',
+        dark: '#1C1C1E'
+    }
+};
+export default standardColors;

package/dist/internal/helpers/colors.d.ts

@@ -0,0 +1 @@
+export declare const formatColor: (input: string) => string;

package/dist/internal/{colors.js → helpers/colors.js}

@@ -1,5 +1,5 @@
-import { x11Colors } from '../utils/x11.js';
-export const parseColor = (input) => {
+import { x11Colors } from '../core/x11-colors.js';
+export const formatColor = (input) => {
     input = input.trim();
     if (input.startsWith('#')) {
         const rgb = hexToRgb(input);

package/dist/internal/helpers/parser.js

@@ -1,6 +1,6 @@
 import path from 'path';
 import fs from 'fs';
-import { terminal } from '../terminal.js';
+import { terminal } from '../core/bin/terminal.js';
 export const parserValues = (value) => {
     if (typeof value === 'number')
         return `${value}px`;
@@ -9,6 +9,7 @@ export const parserValues = (value) => {
     return value;
 };
 export const parserCSSBreakpoints = (css) => {
+    css = css.replace(/\/\*[\s\S]*?\*\//g, ''); // clean comments
     const regex = /([^{]+)\{([^}]+)\}/g;
     let match;
     const matchesToRemove = [];

package/dist/internal/plugins/vite.js

@@ -1,12 +1,13 @@
 import { fileURLToPath } from 'url';
 import { dirname } from 'path';
-import { terminal } from '../terminal.js';
-import { css } from '../core/formatter/index.js';
+import { terminal } from '../core/bin/terminal.js';
+import { liliRabbit } from '../core/formatter/index.js';
 import { parserConfigLapikit } from '../helpers/parser.js';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 import fsPromises from 'fs/promises';
 import path from 'path';
+import { processImportStyles } from '../core/css.js';
 const app = process.cwd();
 export async function lapikit({ config } = {}) {
     return {
@@ -15,15 +16,16 @@ export async function lapikit({ config } = {}) {
             if (config) {
                 const configuration = await parserConfigLapikit(app, config);
                 // generate styles
-                const styles = await css(configuration);
-                fsPromises.writeFile(path.resolve(__dirname, '../../labs.css'), styles?.themes +
+                const basicStyles = await processImportStyles();
+                fsPromises.writeFile(path.resolve(__dirname, '../../styles.css'), basicStyles || '');
+                const styles = await liliRabbit(configuration);
+                fsPromises.writeFile(path.resolve(__dirname, '../../themes.css'), styles?.devices +
                     '\n\n' +
                     styles?.typography +
                     '\n\n' +
                     styles?.styles +
                     '\n\n' +
-                    styles?.devices || '');
-                console.log('styles', styles, __dirname);
+                    styles?.themes || '');
             }
             terminal('info', 'lapikit is up!');
         }

package/dist/internal/types/components.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+type IdElementType = string | undefined;
+type ClassNameType = string | string[] | undefined;
+type StylePropertiesType = string | undefined;
+export interface Base {
+    id?: IdElementType;
+    class?: ClassNameType;
+    style?: StylePropertiesType;
+    [key: string]: any;
+}
+export interface Component extends Base {
+    children?: Snippet;
+}
+export {};

package/dist/internal/types/configuration.d.ts

@@ -1,3 +1,23 @@
+export interface LapikitConfiguration {
+    breakpoints?: {
+        devices?: {
+            [key: string]: number | string;
+        };
+        thresholds?: {
+            [key: string]: number | string;
+        };
+    };
+    theme?: {
+        defaultTheme?: string;
+        colorScheme?: boolean;
+        themes?: FragThemes;
+    };
+    typography?: {
+        defaultTypography?: string;
+        fonts?: FragTypography;
+    };
+    styles?: FragStyles;
+}
 export interface DevConfiguration {
     breakpoints?: {
         devices?: {
@@ -9,6 +29,7 @@ export interface DevConfiguration {
     };
     theme?: {
         defaultTheme?: string;
+        colorScheme?: boolean;
         themes?: FragThemes;
     };
     typography?: {
@@ -21,7 +42,9 @@ export interface FragThemes {
     [key: string]: {
         dark?: boolean;
         colors?: {
-            [key: string]: string;
+            [key: string]: {
+                [key: string]: string;
+            } | string;
         };
         variables?: {
             [key: string]: string | number;

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

@@ -1 +1,2 @@
 export * from './configuration.js';
+export * from './components.js';

package/dist/internal/types/index.js

@@ -1 +1,2 @@
 export * from './configuration.js';
+export * from './components.js';

package/dist/stores/components.js

@@ -1,4 +1,4 @@
-import { disabledScroll } from '../internal/scroll.js';
+import { disabledScroll } from '../internal/helpers/scroll.js';
 import { writable } from 'svelte/store';
 // presets
 const refModal = false;

package/dist/stores/index.d.ts

@@ -2,3 +2,4 @@ export * from './breakpoints.js';
 export * from './devices.js';
 export * from './themes.js';
 export * from './components.js';
+export * from './viewport.js';

package/dist/stores/index.js

@@ -2,3 +2,4 @@ export * from './breakpoints.js';
 export * from './devices.js';
 export * from './themes.js';
 export * from './components.js';
+export * from './viewport.js';

package/dist/stores/themes.d.ts

@@ -1,8 +1,2 @@
 import { type Writable } from 'svelte/store';
-type PreferColorScheme = 'system' | 'dark' | 'light';
-export declare const colorScheme: Writable<PreferColorScheme>;
-export declare const colorSchemeSystem: Writable<'dark' | 'light'>;
 export declare const theme: Writable<string>;
-export declare function useColorScheme(scheme: PreferColorScheme, key?: string): void;
-export declare function useTheme(name: string, key?: string): void;
-export {};

package/dist/stores/themes.js

@@ -1,34 +1,4 @@
 import { writable } from 'svelte/store';
 // presets
-const colorSchemeRef = 'system';
-const themeRef = 'lapikit';
-// states
-const isBrowser = typeof window !== 'undefined';
-export const colorScheme = writable(colorSchemeRef);
-export const colorSchemeSystem = writable('light');
+const themeRef = 'light';
 export const theme = writable(themeRef);
-export function useColorScheme(scheme, key = '@lapikit/color-scheme') {
-    colorScheme.update(() => {
-        if (isBrowser) {
-            const ref = document.documentElement.classList;
-            if (scheme === 'system')
-                ref.remove('light', 'dark');
-            else {
-                ref.remove(scheme === 'dark' ? 'light' : 'dark');
-                ref.add(scheme === 'dark' ? 'dark' : 'light');
-            }
-            localStorage.setItem(key, scheme);
-        }
-        return scheme;
-    });
-}
-export function useTheme(name, key = '@lapikit/theme') {
-    theme.update(() => {
-        if (isBrowser) {
-            const html = document.documentElement;
-            html.setAttribute('data-theme', name);
-            localStorage.setItem(key, name);
-        }
-        return name;
-    });
-}

package/dist/stores/viewport.d.ts

@@ -0,0 +1,7 @@
+export type Viewport = {
+    innerWidth: number;
+    outerWidth: number;
+    innerHeight: number;
+    outerHeight: number;
+};
+export declare const viewport: import("svelte/store").Writable<Viewport>;

package/dist/stores/viewport.js

@@ -0,0 +1,7 @@
+import { writable } from 'svelte/store';
+export const viewport = writable({
+    innerWidth: 0,
+    outerWidth: 0,
+    innerHeight: 0,
+    outerHeight: 0
+});