lapikit 0.5.9 → 0.6.1

package/dist/@legacy/index.js

@@ -1,24 +0,0 @@
-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/@legacy/internal/config/presets.d.ts

@@ -1,149 +0,0 @@
-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/@legacy/internal/config/presets.js

@@ -1,169 +0,0 @@
-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/@legacy/internal/config/variables.d.ts

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

package/dist/@legacy/internal/config/variables.js

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

package/dist/@legacy/internal/core/actions/assets.svelte.d.ts

@@ -1,8 +0,0 @@
-export declare function getAssets(): {
-    shape(params?: string): string | undefined;
-    className(key: string, type: string, value: string | boolean | Array<string> | {
-        [key: string]: string;
-    }): string | undefined;
-    color(color?: string): string | undefined;
-    unit(value?: string | number): string | undefined;
-};

package/dist/@legacy/internal/core/actions/assets.svelte.js

@@ -1,54 +0,0 @@
-import { x11ColorNames } from '../x11-colors.js';
-export function getAssets() {
-    return {
-        shape(params) {
-            if (params) {
-                if (params === 'none' || params == '0')
-                    return '0';
-                return `var(--system-shape-${params})`;
-            }
-        },
-        className(key, type, value) {
-            if (typeof value === 'string')
-                return `kit-${key}--${type}-${value}`;
-            else if (typeof value === 'boolean' && value)
-                return `kit-${key}--${type}`;
-            else if (typeof value === 'object') {
-                if (Array.isArray(value)) {
-                    return value
-                        .map((media) => `${media === 'base' ? '' : `${media}:`}kit--${type}`)
-                        .join(' ');
-                }
-                else {
-                    return Object.entries(value)
-                        .map(([media, value]) => `${media === 'base' ? '' : `${media}:`}kit-${key}--${type}-${value}`)
-                        .join(' ');
-                }
-            }
-        },
-        color(color) {
-            if (color) {
-                if (color.includes('#') ||
-                    color.includes('rgb') ||
-                    color.includes('rgba') ||
-                    color.includes('oklch') ||
-                    x11ColorNames.includes(color.toLowerCase()))
-                    return color;
-                if (color.includes('transparent') || color.includes('inherit') || color.includes('initial'))
-                    return color;
-                return `var(--kit-${color})`;
-            }
-        },
-        unit(value) {
-            if (typeof value === 'number')
-                return `${value}px`;
-            if (typeof value === 'string') {
-                const cleaned = value.trim();
-                const isOnlyNumericLike = /^[\d.,]+$/.test(cleaned);
-                if (isOnlyNumericLike)
-                    return `${value}px`;
-            }
-            return value;
-        }
-    };
-}

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

@@ -1,7 +0,0 @@
-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/@legacy/internal/core/actions/dropdown.svelte.js

@@ -1,148 +0,0 @@
-import { innerWidth, innerHeight } from 'svelte/reactivity/window';
-export function getPositions() {
-    // state
-    const axis = $state({
-        x: 0,
-        y: 0,
-        location: null
-    });
-    return {
-        get values() {
-            return axis;
-        },
-        update(activator, element, location, centered, avoidCollisions) {
-            if (!activator || !element)
-                return;
-            const elementRect = element.getBoundingClientRect();
-            if (!(activator instanceof HTMLElement)) {
-                if (activator.clientX + elementRect.width > innerWidth.current) {
-                    axis.x = activator.clientX - elementRect.width;
-                }
-                else {
-                    axis.x = activator.clientX;
-                }
-                if (activator.clientY + elementRect.height > innerHeight.current) {
-                    axis.y = activator.clientY - elementRect.height;
-                }
-                else {
-                    axis.y = activator.clientY;
-                }
-            }
-            else if (activator instanceof HTMLElement) {
-                const activatorRect = activator.getBoundingClientRect();
-                const spacing = 0;
-                const _activator = activatorRect.y + activatorRect.height;
-                const _element = elementRect.height + spacing;
-                if (location === 'top' || location === 'bottom') {
-                    if (avoidCollisions) {
-                        if (location === 'top') {
-                            if (activatorRect.y - _element < 0) {
-                                axis.y = activatorRect.bottom + spacing;
-                                axis.location = 'bottom';
-                            }
-                            else {
-                                axis.y = activatorRect.top - _element;
-                                axis.location = 'top';
-                            }
-                        }
-                        else {
-                            if (_activator + _element > innerHeight.current) {
-                                axis.y = activatorRect.top - _element;
-                                axis.location = 'top';
-                            }
-                            else {
-                                axis.y = activatorRect.bottom + spacing;
-                                axis.location = 'bottom';
-                            }
-                        }
-                    }
-                    else {
-                        if (location === 'top') {
-                            axis.y = activatorRect.top - _element;
-                            axis.location = 'top';
-                        }
-                        else {
-                            axis.y = activatorRect.bottom + spacing;
-                            axis.location = 'bottom';
-                        }
-                    }
-                    if (centered &&
-                        activatorRect.left - (elementRect.width - activatorRect.width) / 2 > 0 &&
-                        activatorRect.left + elementRect.width < innerWidth.current) {
-                        axis.x = activatorRect.left - (elementRect.width - activatorRect.width) / 2;
-                    }
-                    else if (activatorRect.left + elementRect.width > innerWidth.current) {
-                        axis.x = activatorRect.left - (elementRect.width - activatorRect.width);
-                    }
-                    else {
-                        axis.x = activatorRect.left;
-                    }
-                }
-                else if (location === 'left' || location === 'right') {
-                    if (avoidCollisions) {
-                        if (location === 'left' && !(activatorRect.left - elementRect.width < 0)) {
-                            axis.x = activatorRect.left - (elementRect.width + spacing);
-                            axis.location = 'left';
-                        }
-                        else {
-                            if (activatorRect.left + activatorRect.width + elementRect.width + spacing >
-                                innerWidth.current) {
-                                axis.x = activatorRect.left - (elementRect.width + spacing);
-                                axis.location = 'left';
-                            }
-                            else {
-                                axis.x = activatorRect.left + activatorRect.width + spacing;
-                                axis.location = 'right';
-                            }
-                        }
-                    }
-                    else {
-                        if (location === 'left') {
-                            axis.x = activatorRect.left - (elementRect.width + spacing);
-                            axis.location = 'left';
-                        }
-                        else {
-                            axis.x = activatorRect.left + activatorRect.width + spacing;
-                            axis.location = 'right';
-                        }
-                    }
-                    if (centered &&
-                        activatorRect.top - (elementRect.height - activatorRect.height) / 2 > 0 &&
-                        activatorRect.top + elementRect.height < innerHeight.current) {
-                        axis.y = activatorRect.top - (elementRect.height - activatorRect.height) / 2;
-                    }
-                    else if (activatorRect.y + elementRect.height > innerHeight.current) {
-                        axis.y = activatorRect.y - elementRect.height + activatorRect.height;
-                    }
-                    else {
-                        axis.y = activatorRect.y;
-                    }
-                }
-                else {
-                    if (centered &&
-                        activatorRect.left - (elementRect.width - activatorRect.width) / 2 > 0 &&
-                        activatorRect.left + elementRect.width < innerWidth.current) {
-                        axis.x = activatorRect.left - (elementRect.width - activatorRect.width) / 2;
-                    }
-                    else if (activatorRect.left + elementRect.width > innerWidth.current) {
-                        axis.x = activatorRect.left - (elementRect.width - activatorRect.width);
-                    }
-                    else {
-                        axis.x = activatorRect.left;
-                    }
-                    if (centered &&
-                        activatorRect.top - (elementRect.height - activatorRect.height) / 2 > 0 &&
-                        activatorRect.top + elementRect.height < innerHeight.current) {
-                        axis.y = activatorRect.top - (elementRect.height - activatorRect.height) / 2;
-                    }
-                    else if (activatorRect.bottom + elementRect.height > innerHeight.current) {
-                        axis.y = activatorRect.top - elementRect.height;
-                    }
-                    else {
-                        axis.y = activatorRect.bottom;
-                    }
-                }
-            }
-        }
-    };
-}

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

@@ -1,7 +0,0 @@
-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 {};