lapikit 0.0.0-insiders.f81b991 → 0.0.0-insiders.fb12c48

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

@@ -1,4 +1,4 @@
-import type { Component } from '../../internal/types.js';
+import type { Component } from '../../internal/types/index.js';
 import type { Snippet } from 'svelte';
 export interface TooltipProps extends Component {
     open?: boolean;

package/dist/index.d.ts

@@ -1 +1,3 @@
-export declare function helloWorld(): void;
+import type { LapikitConfiguration } from './internal/types/configuration.js';
+declare function createLapikit(lapikit: LapikitConfiguration): void;
+export default createLapikit;

package/dist/index.js

@@ -1,4 +1,24 @@
-// Reexport your entry components here
-export function helloWorld() {
-    console.log('Hello world, this is lapikit!');
+import { deepMerge } from './internal/helpers/deep-merge.js';
+import { breakpoints } from './stores/breakpoints.js';
+import { get } from 'svelte/store';
+import { devices } from './stores/devices.js';
+import { valueToPx } from './internal/helpers/convert.js';
+function createLapikit(lapikit) {
+    if (lapikit?.breakpoints?.thresholds) {
+        const currentBreakpoints = get(breakpoints);
+        const breakpointMerged = deepMerge(currentBreakpoints, lapikit.breakpoints.thresholds);
+        const formattedBreakpoints = Object.fromEntries(Object.entries(breakpointMerged).map(([key, value]) => [key, valueToPx(value)]));
+        breakpoints.set(formattedBreakpoints);
+    }
+    if (lapikit?.breakpoints?.devices) {
+        const currentDevices = get(devices);
+        const currentBreakpoints = get(breakpoints);
+        const deviceMerged = deepMerge(currentDevices, lapikit.breakpoints.devices);
+        const formattedDevices = Object.fromEntries(Object.entries(deviceMerged).map(([key, deviceKey]) => {
+            const breakpointValue = currentBreakpoints[deviceKey];
+            return [key, valueToPx(breakpointValue)];
+        }));
+        devices.set(formattedDevices);
+    }
 }
+export default createLapikit;

package/dist/internal/config/presets.d.ts

@@ -0,0 +1,149 @@
+export declare const preset: {
+    breakpoints: {
+        devices: {
+            desktop: number;
+            tablet: number;
+            mobile: number;
+        };
+        thresholds: {
+            base: number;
+            xs: number;
+            sm: number;
+            md: number;
+            lg: number;
+            xl: number;
+            '2xl': number;
+            '3xl': number;
+        };
+    };
+    theme: {
+        defaultTheme: string;
+        colorScheme: boolean;
+        themes: {
+            light: {
+                dark: boolean;
+                colors: {
+                    label: {
+                        primary: string;
+                        secondary: string;
+                        tertiary: string;
+                        quaternary: string;
+                    };
+                    accent: {
+                        primary: string;
+                        success: string;
+                        warning: string;
+                        destructive: string;
+                        info: string;
+                    };
+                    separator: {
+                        default: string;
+                        opaque: string;
+                    };
+                    state: {
+                        placeholder: string;
+                        disabled: string;
+                        link: string;
+                        highlight: string;
+                        shadow: string;
+                    };
+                    background: {
+                        primary: string;
+                        secondary: string;
+                        tertiary: string;
+                        grouped: {
+                            primary: string;
+                            secondary: string;
+                            tertiary: string;
+                        };
+                    };
+                };
+                variables: {
+                    'test-variable': string;
+                };
+            };
+            dark: {
+                dark: boolean;
+                colors: {
+                    pink: string;
+                    label: {
+                        primary: string;
+                        secondary: string;
+                        tertiary: string;
+                        quaternary: string;
+                    };
+                    accent: {
+                        primary: string;
+                        success: string;
+                        warning: string;
+                        destructive: string;
+                        info: string;
+                    };
+                    separator: {
+                        default: string;
+                        opaque: string;
+                    };
+                    state: {
+                        placeholder: string;
+                        disabled: string;
+                        link: string;
+                        highlight: string;
+                        shadow: string;
+                    };
+                    background: {
+                        primary: string;
+                        secondary: string;
+                        tertiary: string;
+                        grouped: {
+                            primary: string;
+                            secondary: string;
+                            tertiary: string;
+                        };
+                    };
+                };
+                variables: {
+                    'test-variable': string;
+                };
+            };
+        };
+    };
+    typography: {
+        defaultTypography: string;
+        fonts: {
+            default: {
+                sans: string[];
+                mono: string[];
+                serif: string[];
+            };
+        };
+    };
+    styles: {
+        spacing: string;
+        shape: {
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+            '3xl': string;
+            full: string;
+        };
+        dialog: {
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+        };
+        modal: {
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+        };
+        animation: {
+            'ripple-duration': string;
+        };
+    };
+};

package/dist/internal/config/presets.js

@@ -0,0 +1,169 @@
+import { variables } from './variables.js';
+import standardColors from '../core/standard-colors.js';
+export const preset = {
+    breakpoints: {
+        devices: {
+            desktop: 1024, //64rem (lg)
+            tablet: 768, //48rem (md)
+            mobile: 640 //40rem (sm)
+        },
+        thresholds: {
+            base: 0, // 0px
+            xs: 448, //28rem
+            sm: 640, //40rem
+            md: 768, //48rem
+            lg: 1024, //64rem
+            xl: 1280, //80rem
+            '2xl': 1536, //96rem
+            '3xl': 1792 //112rem
+        }
+    },
+    theme: {
+        defaultTheme: 'light',
+        colorScheme: true,
+        themes: {
+            light: {
+                dark: false,
+                colors: {
+                    label: {
+                        primary: '#000000',
+                        secondary: standardColors.gray.light,
+                        tertiary: standardColors.gray2.light,
+                        quaternary: standardColors.gray3.light
+                    },
+                    accent: {
+                        primary: standardColors.blue.light,
+                        success: standardColors.green.light,
+                        warning: standardColors.orange.light,
+                        destructive: standardColors.red.light,
+                        info: standardColors.cyan.light
+                    },
+                    separator: {
+                        default: standardColors.gray3.light,
+                        opaque: standardColors.gray4.light
+                    },
+                    state: {
+                        placeholder: standardColors.gray3.light,
+                        disabled: standardColors.gray2.light,
+                        link: standardColors.blue.light,
+                        highlight: standardColors.gray5.light,
+                        shadow: '#00000033'
+                    },
+                    background: {
+                        primary: '#FFFFFF',
+                        secondary: standardColors.gray6.light,
+                        tertiary: standardColors.gray5.light,
+                        grouped: {
+                            primary: standardColors.gray6.light,
+                            secondary: '#FFFFFF',
+                            tertiary: standardColors.gray6.light
+                        }
+                    }
+                },
+                variables: variables
+            },
+            dark: {
+                dark: true,
+                colors: {
+                    pink: 'pink',
+                    label: {
+                        primary: '#FFFFFF',
+                        secondary: standardColors.gray2.dark,
+                        tertiary: standardColors.gray3.dark,
+                        quaternary: standardColors.gray4.dark
+                    },
+                    accent: {
+                        primary: standardColors.blue.dark,
+                        success: standardColors.green.dark,
+                        warning: standardColors.orange.dark,
+                        destructive: standardColors.red.dark,
+                        info: standardColors.cyan.dark
+                    },
+                    separator: {
+                        default: standardColors.gray3.dark,
+                        opaque: standardColors.gray4.dark
+                    },
+                    state: {
+                        placeholder: standardColors.gray3.dark,
+                        disabled: standardColors.gray4.dark,
+                        link: standardColors.blue.dark,
+                        highlight: standardColors.gray5.dark,
+                        shadow: '#00000066'
+                    },
+                    background: {
+                        primary: '#000000',
+                        secondary: standardColors.gray6.dark,
+                        tertiary: standardColors.gray5.dark,
+                        grouped: {
+                            primary: standardColors.gray6.dark,
+                            secondary: standardColors.gray5.dark,
+                            tertiary: standardColors.gray4.dark
+                        }
+                    }
+                },
+                variables: variables
+            }
+        }
+    },
+    typography: {
+        defaultTypography: 'default',
+        fonts: {
+            default: {
+                sans: [
+                    'system-ui',
+                    '-apple-system',
+                    'BlinkMacSystemFont',
+                    'Segoe UI',
+                    'Roboto',
+                    'Helvetica Neue',
+                    'Arial',
+                    'sans-serif',
+                    'Apple Color Emoji',
+                    'Segoe UI Emoji',
+                    'Segoe UI Symbol'
+                ],
+                mono: [
+                    'SFMono-Regular',
+                    'ui-monospace',
+                    'SF Mono',
+                    'Menlo',
+                    'Monaco',
+                    'Consolas',
+                    'Liberation Mono',
+                    'Courier New',
+                    'monospace'
+                ],
+                serif: ['Merriweather', 'Georgia', 'Cambria', 'Times New Roman', 'Times', 'serif']
+            }
+        }
+    },
+    styles: {
+        spacing: '0.125rem', // 2px
+        shape: {
+            sm: '0.125rem', // 2px
+            md: '0.25rem', // 4px
+            lg: '0.5rem', // 8px
+            xl: '0.75rem', // 12px
+            '2xl': '1rem', // 16px
+            '3xl': '1.5rem', // 24px
+            full: '9999px' // 9999px
+        },
+        dialog: {
+            xs: '18.75rem', // 300px
+            sm: '25rem', // 400px
+            md: '37.5rem', // 600px
+            lg: '53.125rem', // 850px
+            xl: '75rem' // 1200px
+        },
+        modal: {
+            xs: '18.75rem', // 300px
+            sm: '25rem', // 400px
+            md: '37.5rem', // 600px
+            lg: '53.125rem', // 850px
+            xl: '75rem' // 1200px
+        },
+        animation: {
+            'ripple-duration': '0.4s'
+        }
+    }
+};

package/dist/internal/config/variables.d.ts

@@ -0,0 +1,3 @@
+export declare const variables: {
+    'test-variable': string;
+};

package/dist/internal/config/variables.js

@@ -0,0 +1,3 @@
+export const variables = {
+    'test-variable': '1rem'
+};

package/dist/internal/{assets.svelte.js → core/actions/assets.svelte.js}

@@ -1,11 +1,11 @@
-import { x11ColorNames } from '../utils/x11.js';
+import { x11ColorNames } from '../x11-colors.js';
 export function getAssets() {
     return {
         shape(params) {
             if (params) {
                 if (params === 'none' || params == '0')
                     return '0';
-                return `var(--kit-radius-${params})`;
+                return `var(--system-shape-${params})`;
             }
         },
         className(key, type, value) {
@@ -16,12 +16,12 @@ export function getAssets() {
             else if (typeof value === 'object') {
                 if (Array.isArray(value)) {
                     return value
-                        .map((media) => `${media === '_default' ? '' : `${media}:`}kit--${type}`)
+                        .map((media) => `${media === 'base' ? '' : `${media}:`}kit--${type}`)
                         .join(' ');
                 }
                 else {
                     return Object.entries(value)
-                        .map(([media, value]) => `${media === '_default' ? '' : `${media}:`}kit-${key}--${type}-${value}`)
+                        .map(([media, value]) => `${media === 'base' ? '' : `${media}:`}kit-${key}--${type}-${value}`)
                         .join(' ');
                 }
             }

package/dist/internal/core/actions/dropdown.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { PositionElement } from '../../../components/dropdown/types.js';
+type Location = 'top' | 'bottom' | 'left' | 'right';
+export declare function getPositions(): {
+    readonly values: PositionElement;
+    update(activator: HTMLElement | PointerEvent, element: HTMLElement, location?: Location, centered?: boolean, avoidCollisions?: boolean): void;
+};
+export {};

package/dist/internal/core/actions/popover.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { PositionElement } from '../../../components/popover/types.js';
+type Location = 'top' | 'bottom' | 'left' | 'right';
+export declare function getPositions(): {
+    readonly values: PositionElement;
+    update(activator: HTMLElement, element: HTMLElement, location?: Location, centered?: boolean, avoidCollisions?: boolean): void;
+};
+export {};

package/dist/internal/core/actions/tooltip.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { PositionElement } from '../../../components/tooltip/types.js';
+type Location = 'top' | 'bottom' | 'left' | 'right';
+export declare function getPositionsTooltip(): {
+    readonly values: PositionElement;
+    update(activator: HTMLElement, element: HTMLElement, location?: Location, centered?: boolean, avoidCollisions?: boolean): void;
+};
+export {};

package/dist/internal/{ripple.js → core/animations/ripple.js}

@@ -27,13 +27,13 @@ export function ripple(el, options = {}) {
             options.duration = undefined;
         }
         if (options.component) {
-            rippleContainer.style.setProperty('--ripple-radius', `var(--${options.component}-radius)`);
+            rippleContainer.style.setProperty('--system-ripple-radius', `var(--${options.component}-radius)`);
         }
         if (options.color) {
-            rippleContainer.style.setProperty('--ripple-color', options.color);
+            rippleContainer.style.setProperty('--system-ripple-color', options.color);
         }
         if (options.duration) {
-            rippleContainer.style.setProperty('--ripple-duration', `${options.duration}ms`);
+            rippleContainer.style.setProperty('--system-animation-ripple-duration', `${options.duration}ms`);
         }
     }
     function createRipple(e, center) {

package/dist/internal/core/css.d.ts

@@ -0,0 +1 @@
+export declare const processImportStyles: () => Promise<string>;

package/dist/internal/core/css.js

@@ -0,0 +1,16 @@
+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 processImportStyles = async () => {
+    const _reset = fs.readFileSync(path.resolve(__dirname, './../../styles/reset.css'), 'utf-8');
+    const _animation = fs.readFileSync(path.resolve(__dirname, './../../styles/animation.css'), 'utf-8');
+    const _keyframes = fs.readFileSync(path.resolve(__dirname, './../../styles/keyframes.css'), 'utf-8');
+    let styles = ``;
+    styles += `${_reset}\n`;
+    styles += `${_animation}\n`;
+    styles += `${_keyframes}\n`;
+    return styles;
+};

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

@@ -0,0 +1,5 @@
+export declare function componentFormatter({ breakpoints }: {
+    breakpoints: {
+        [key: string]: number | string;
+    };
+}): Promise<void>;

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

@@ -0,0 +1,60 @@
+import { fileURLToPath } from 'url';
+import { dirname } from 'path';
+import fs from 'fs';
+import path from 'path';
+import { parserCSSBreakpoints } from '../../helpers/parser.js';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+export async function componentFormatter({ breakpoints }) {
+    // load svelte component files (includes on components folders)
+    function loadSvelteFiles(directory) {
+        fs.readdirSync(directory).forEach((File) => {
+            const absolutePath = path.join(directory, File);
+            if (fs.statSync(absolutePath).isDirectory())
+                return loadSvelteFiles(absolutePath);
+            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`;
+                        }
+                        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`;
+                        }
+                    }
+                    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');
+                }
+            }
+        });
+    }
+    loadSvelteFiles(path.resolve(__dirname, '../../../components'));
+}

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

@@ -0,0 +1,5 @@
+export declare function devicesFormatter({ devices }: {
+    devices: {
+        [key: string]: number | string;
+    };
+}): Promise<string>;

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

@@ -0,0 +1,66 @@
+import { parserValues } from '../../helpers/parser.js';
+export async function devicesFormatter({ devices }) {
+    let css = ``;
+    const sortedDevices = Object.entries(devices).sort(([, a], [, b]) => {
+        const valueA = typeof a === 'string' ? parseInt(a) : a;
+        const valueB = typeof b === 'string' ? parseInt(b) : b;
+        return valueB - valueA;
+    });
+    sortedDevices.forEach(([deviceName, breakpoint], index) => {
+        const value = parserValues(breakpoint);
+        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 += ` .kit-device--h-${deviceName} {\n`;
+            css += `   display: none !important;\n`;
+            css += ` }\n`;
+            css += `}\n\n`;
+        }
+        else if (index === sortedDevices.length - 1) {
+            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`;
+            css += `@media (max-width: ${prevValue}) {\n`;
+            css += ` .kit-device--h-${deviceName} {\n`;
+            css += `   display: none !important;\n`;
+            css += ` }\n`;
+            css += `}\n\n`;
+            css += `@media (min-width: ${value}) {\n`;
+            css += ` .kit-device--od-${deviceName} {\n`;
+            css += `   display: none !important;\n`;
+            css += ` }\n`;
+            css += `}\n\n`;
+            css += `@media (max-width: ${value}) {\n`;
+            css += ` .kit-device--oh-${deviceName} {\n`;
+            css += `   display: none !important;\n`;
+            css += ` }\n`;
+            css += `}\n\n`;
+        }
+        else {
+            //intermediate devices
+            const nextDevice = sortedDevices[index - 1];
+            const nextValue = parserValues(nextDevice[1]);
+            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`;
+        }
+    });
+    return css.trim();
+}

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

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

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

@@ -0,0 +1,35 @@
+import { preset } from '../../config/presets.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 liliRabbit(config) {
+    // states
+    const defaultTheme = config?.theme?.defaultTheme || preset.theme.defaultTheme;
+    const defaultTypography = config?.typography?.defaultTypography || preset.typography.defaultTypography;
+    // formatter
+    const themes = await themesFormatter({
+        themes: deepMerge(preset.theme.themes, config?.theme?.themes || {}),
+        defaultTheme
+    });
+    const typography = await typographyFormatter({
+        typography: deepMerge(preset.typography.fonts, config?.typography?.fonts || {}),
+        defaultTypography
+    });
+    const styles = await stylesFormatter({ styles: deepMerge(preset.styles, config?.styles || {}) });
+    const devices = await devicesFormatter({
+        devices: deepMerge(preset.breakpoints.devices, config?.breakpoints?.devices || {})
+    });
+    // components
+    await componentFormatter({
+        breakpoints: deepMerge(preset.breakpoints.thresholds, config?.breakpoints?.thresholds || {})
+    });
+    return {
+        themes: themes,
+        typography: typography,
+        styles: styles,
+        devices: devices
+    };
+}

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

@@ -0,0 +1,4 @@
+import type { FragStyles } from '../../types/configuration.js';
+export declare function stylesFormatter({ styles }: {
+    styles: FragStyles;
+}): Promise<string>;