lapikit 0.0.0-insiders.de81aed → 0.0.0-insiders.df15d32

package/dist/components/toolbar/toolbar.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ToolbarProps } from './types.js';
+declare const Toolbar: import("svelte").Component<ToolbarProps, {}, "ref">;
+type Toolbar = ReturnType<typeof Toolbar>;
+export default Toolbar;

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

@@ -0,0 +1,27 @@
+import type { Component } from '../../internal/types.js';
+type Variant = 'outline' | 'text' | 'dash';
+type Density = 'compact' | 'comfortable' | 'default';
+type Orientation = 'horizontal' | 'vertical';
+type Location = 'top' | 'bottom';
+export interface ToolbarProps extends Component {
+    is?: 'div' | 'header' | 'nav';
+    variant?: Variant | {
+        [key: string]: Variant;
+    };
+    rounded?: string;
+    density?: Density | {
+        [key: string]: Density;
+    };
+    dark?: boolean;
+    light?: boolean;
+    color?: string;
+    orientation?: Orientation | {
+        [key: string]: Orientation;
+    };
+    background?: string;
+    location?: Location | {
+        [key: string]: Location;
+    };
+    classContent?: string | string[] | undefined;
+}
+export {};

package/dist/components/toolbar/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/tooltip/tooltip.css

@@ -6,8 +6,8 @@
 }
 
 .kit-tooltip-content {
-	--tooltip-color: var(--on, var(--kit-on-neutral));
-	--tooltip-background: var(--base, var(--kit-neutral));
+	--tooltip-color: var(--on, var(--kit-on-surface));
+	--tooltip-background: var(--base, var(--kit-surface));
 	--tooltip-radius: var(--shape, var(--kit-radius-md));
 
 	background-color: var(--tooltip-background);
@@ -19,10 +19,10 @@
 	width: auto;
 	pointer-events: none;
 	overflow-wrap: break-word;
-	transition:
+	/* transition:
 		color 0.5s,
 		border-color 0.5s,
-		background-color 0.5s;
+		background-color 0.5s; */
 	box-shadow: 0px 16px 29px -10px color-mix(in oklab, var(--kit-scrim) 60%, transparent);
 }
 

package/dist/index.d.ts

@@ -1 +1,27 @@
-export declare function helloWorld(): void;
+interface Lapikit {
+    adapterCSS: string;
+    breakpoints: {
+        devices: {
+            [key: string]: string;
+        };
+        thresholds: {
+            [key: string]: number | string;
+        };
+    };
+    theme: {
+        defaultTheme: string;
+        themes: {
+            [key: string]: {
+                dark: boolean;
+                colors: {
+                    [key: string]: string;
+                };
+                variables: {
+                    [key: string]: string;
+                };
+            };
+        };
+    };
+}
+declare function createLapikit(lapikit: Lapikit): void;
+export default createLapikit;

package/dist/index.js

@@ -1,4 +1,28 @@
-// Reexport your entry components here
-export function helloWorld() {
-    console.log('Hello world, this is lapikit!');
+import { deepMerge } from './internal/deepMerge.js';
+import { breakpoints } from './stores/breakpoints.js';
+import { get } from 'svelte/store';
+import { valueToPx } from './utils/convert.js';
+import { devices } from './stores/devices.js';
+function createLapikit(lapikit) {
+    console.log('Creating a new Lapikit instance...');
+    console.log('Options loaded:', 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);
+        console.log('Breakpoints found:', 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);
+        console.log('Devices found:', formattedDevices);
+    }
 }
+export default createLapikit;

package/dist/internal/assets.svelte.js

@@ -34,6 +34,8 @@ export function getAssets() {
                     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})`;
             }
         },

package/dist/internal/deepMerge.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Recursively merges two objects together.
+ * Properties from the source object override those from the target object.
+ * Nested objects are merged recursively.
+ *
+ * @param target - The base object
+ * @param source - The source object to merge (can be null or undefined)
+ * @returns A new object containing the merge of both objects
+ *
+ * @example
+ * ```typescript
+ * const obj1 = { primary: { light: 'pink', medium: 'purple' } };
+ * const obj2 = { primary: { dark: 'red' } };
+ * const result = deepMerge(obj1, obj2);
+ * // Result: { primary: { light: 'pink', medium: 'purple', dark: 'red' } }
+ *
+ * // Works with null/undefined source
+ * const result2 = deepMerge(obj1, null);
+ * // Result: { primary: { light: 'pink', medium: 'purple' } }
+ * ```
+ */
+export declare function deepMerge<T extends Record<string, unknown>, U extends Record<string, unknown>>(target: T, source: U | null | undefined): T & U;
+/**
+ * Merges multiple objects together recursively.
+ *
+ * @param objects - The objects to merge (null and undefined values are ignored)
+ * @returns A new object containing the merge of all objects
+ *
+ * @example
+ * ```typescript
+ * const result = deepMergeMultiple(
+ *   { primary: { light: 'pink' } },
+ *   null,
+ *   { primary: { dark: 'red' } },
+ *   undefined,
+ *   { secondary: { light: 'blue' } }
+ * );
+ * // Result: {
+ * //   primary: { light: 'pink', dark: 'red' },
+ * //   secondary: { light: 'blue' }
+ * // }
+ * ```
+ */
+export declare function deepMergeMultiple(...objects: (Record<string, unknown> | null | undefined)[]): Record<string, unknown>;

package/dist/internal/deepMerge.js

@@ -0,0 +1,80 @@
+/**
+ * Checks if a value is a plain object (object literal)
+ */
+function isPlainObject(value) {
+    return (value !== null &&
+        typeof value === 'object' &&
+        Object.prototype.toString.call(value) === '[object Object]');
+}
+/**
+ * Recursively merges two objects together.
+ * Properties from the source object override those from the target object.
+ * Nested objects are merged recursively.
+ *
+ * @param target - The base object
+ * @param source - The source object to merge (can be null or undefined)
+ * @returns A new object containing the merge of both objects
+ *
+ * @example
+ * ```typescript
+ * const obj1 = { primary: { light: 'pink', medium: 'purple' } };
+ * const obj2 = { primary: { dark: 'red' } };
+ * const result = deepMerge(obj1, obj2);
+ * // Result: { primary: { light: 'pink', medium: 'purple', dark: 'red' } }
+ *
+ * // Works with null/undefined source
+ * const result2 = deepMerge(obj1, null);
+ * // Result: { primary: { light: 'pink', medium: 'purple' } }
+ * ```
+ */
+export function deepMerge(target, source) {
+    // If source is null or undefined, return a copy of target
+    if (source == null) {
+        return { ...target };
+    }
+    // Create a copy of the target object to avoid mutations
+    const result = { ...target };
+    for (const key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+            const sourceValue = source[key];
+            const targetValue = result[key];
+            // If both values are plain objects, merge them recursively
+            if (isPlainObject(targetValue) && isPlainObject(sourceValue)) {
+                result[key] = deepMerge(targetValue, sourceValue);
+            }
+            else {
+                // Otherwise, the source value overrides the target value
+                result[key] = sourceValue;
+            }
+        }
+    }
+    return result;
+}
+/**
+ * Merges multiple objects together recursively.
+ *
+ * @param objects - The objects to merge (null and undefined values are ignored)
+ * @returns A new object containing the merge of all objects
+ *
+ * @example
+ * ```typescript
+ * const result = deepMergeMultiple(
+ *   { primary: { light: 'pink' } },
+ *   null,
+ *   { primary: { dark: 'red' } },
+ *   undefined,
+ *   { secondary: { light: 'blue' } }
+ * );
+ * // Result: {
+ * //   primary: { light: 'pink', dark: 'red' },
+ * //   secondary: { light: 'blue' }
+ * // }
+ * ```
+ */
+export function deepMergeMultiple(...objects) {
+    return objects
+        .filter((obj) => obj != null)
+        .reduce((acc, obj) => {
+        return deepMerge(acc, obj);
+    }, {});
+}

package/dist/internal/ripple.d.ts

@@ -0,0 +1,12 @@
+interface RippleOptions {
+    component?: string;
+    center?: boolean;
+    color?: string;
+    duration?: number;
+    disabled?: boolean;
+}
+export declare function ripple(el: HTMLElement, options?: RippleOptions): {
+    destroy(): void;
+    update(newOptions: RippleOptions): void;
+};
+export {};

package/dist/internal/ripple.js

@@ -0,0 +1,93 @@
+const triggerEvents = ['pointerdown', 'touchstart', 'keydown'];
+const cancelEvents = ['mouseleave', 'dragleave', 'touchmove', 'touchcancel', 'pointerup', 'keyup'];
+export function ripple(el, options = {}) {
+    const rippleContainer = document.createElement('div');
+    addClasses();
+    setOptions(options);
+    function addClasses(center) {
+        const shouldBeCentered = center || options.center;
+        if (!rippleContainer.classList.contains('kit-ripple--effect')) {
+            rippleContainer.classList.add('kit-ripple--effect');
+        }
+        if (!shouldBeCentered && rippleContainer.classList.contains('kit-ripple--center')) {
+            rippleContainer.classList.remove('kit-ripple--center');
+        }
+        if (shouldBeCentered) {
+            rippleContainer.classList.add('kit-ripple--center');
+        }
+    }
+    function setOptions(options) {
+        if (options.disabled || el.hasAttribute('aria-disabled')) {
+            rippleContainer.remove();
+        }
+        else {
+            el.appendChild(rippleContainer);
+        }
+        if (options.duration && options.duration < 0) {
+            options.duration = undefined;
+        }
+        if (options.component) {
+            rippleContainer.style.setProperty('--ripple-radius', `var(--${options.component}-radius)`);
+        }
+        if (options.color) {
+            rippleContainer.style.setProperty('--ripple-color', options.color);
+        }
+        if (options.duration) {
+            rippleContainer.style.setProperty('--ripple-duration', `${options.duration}ms`);
+        }
+    }
+    function createRipple(e, center) {
+        if (options.disabled || el.hasAttribute('aria-disabled')) {
+            return;
+        }
+        if (e instanceof KeyboardEvent) {
+            if (!['Enter', 'Space'].includes(e.code) || e.repeat) {
+                return;
+            }
+            e.preventDefault();
+            const click = new PointerEvent('pointerdown');
+            createRipple(click, true);
+            return;
+        }
+        addClasses(center);
+        const rect = el.getBoundingClientRect();
+        const clientX = window.TouchEvent && e instanceof TouchEvent
+            ? e.touches[0].clientX
+            : e.clientX;
+        const clientY = window.TouchEvent && e instanceof TouchEvent
+            ? e.touches[0].clientY
+            : e.clientY;
+        const x = clientX - rect.left > el.offsetWidth / 2 ? 0 : el.offsetWidth;
+        const y = clientY - rect.top > el.offsetHeight / 2 ? 0 : el.offsetHeight;
+        const radius = Math.hypot(x - (clientX - rect.left), y - (clientY - rect.top));
+        const ripple = document.createElement('div');
+        ripple.classList.add('kit-ripple');
+        ripple.style.left = `${clientX - rect.left - radius}px`;
+        ripple.style.top = `${clientY - rect.top - radius}px`;
+        ripple.style.width = ripple.style.height = `${radius * 2}px`;
+        rippleContainer.appendChild(ripple);
+        function removeRipple() {
+            if (ripple === null) {
+                return;
+            }
+            ripple.style.opacity = '0';
+            setTimeout(() => {
+                ripple.remove();
+            }, options.duration || 1000);
+            cancelEvents.forEach((event) => el.removeEventListener(event, removeRipple));
+        }
+        cancelEvents.forEach((event) => el.addEventListener(event, removeRipple, { passive: true }));
+    }
+    triggerEvents.forEach((event) => el.addEventListener(event, createRipple, { passive: event === 'touchstart' }));
+    return {
+        destroy() {
+            triggerEvents.forEach((event) => {
+                el.removeEventListener(event, createRipple);
+            });
+        },
+        update(newOptions) {
+            options = newOptions;
+            setOptions(newOptions);
+        }
+    };
+}

package/dist/internal/unit.d.ts

@@ -0,0 +1 @@
+export declare const setUnit: (value: string | number) => string;

package/dist/internal/unit.js

@@ -0,0 +1,11 @@
+export const setUnit = (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/plugin/css.d.ts

@@ -0,0 +1 @@
+export declare function css(configuration: any): void;

package/dist/plugin/css.js

@@ -0,0 +1,56 @@
+import { deepMerge } from '../internal/deepMerge.js';
+import { preset } from './preset-v2.js';
+import { fileURLToPath } from 'url';
+import { dirname } from 'path';
+import fsPromises from 'fs/promises';
+import path from 'path';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function css(configuration) {
+    // states
+    const defaultTheme = configuration?.theme?.defaultTheme || preset.theme.defaultTheme;
+    const themesMerged = deepMerge(configuration?.theme?.themes || {}, preset.theme.themes);
+    let response = '';
+    for (const [name, values] of Object.entries(themesMerged)) {
+        let css = defaultTheme === name ? `:root,\n.${name} {\n` : `.${name} {\n`;
+        // ref
+        const ref = values?.dark ? preset.theme.themes.dark : preset.theme.themes.light;
+        // colors
+        css += `  color-scheme: ${values?.dark ? 'dark' : 'light'};\n`;
+        for (const [varName, varValue] of Object.entries(deepMerge(values?.colors, ref.colors) || {})) {
+            css += `  --system-${varName}: ${varValue};\n`;
+        }
+        console.log('VALUE', values, deepMerge(values?.variables, ref.variables));
+        // variables
+        for (const [name, varValue] of Object.entries(deepMerge(values?.variables, ref.variables) || {})) {
+            css += `  --kit-${name}: ${varValue};\n`;
+        }
+        css += '}\n';
+        console.log(`Themes colors (${name}):`, css);
+        response += css;
+    }
+    console.log('All themes CSS:', response);
+    // typography
+    // states
+    const defaultTypography = configuration?.typography?.defaultTypography || preset.typography.defaultTypography;
+    const fontsMerged = deepMerge(configuration?.typography?.fonts || {}, preset.typography.fonts);
+    for (const [name, values] of Object.entries(fontsMerged)) {
+        let css = '';
+        css += defaultTypography === name ? `:root,\n.${name} {\n` : `.${name} {\n`;
+        // fonts
+        for (const [fontName, fontValue] of Object.entries(values?.font || {})) {
+            css += `  --kit-font-${fontName}: ${parser(fontValue)};\n`;
+        }
+        css += '}\n';
+        response += css;
+    }
+    fsPromises.writeFile(path.resolve(__dirname, '../colors.css'), response);
+}
+const parser = (value) => {
+    if (typeof value === 'number')
+        return `${value}px`;
+    if (Array.isArray(value))
+        return value.join(', ');
+    return value;
+};

package/dist/plugin/preset-v2.d.ts

@@ -0,0 +1,96 @@
+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;
+        themes: {
+            light: {
+                dark: boolean;
+                colors: {
+                    blue: string;
+                    green: string;
+                    red: string;
+                    yellow: string;
+                    orange: string;
+                    purple: string;
+                    pink: string;
+                    indigo: string;
+                    cyan: string;
+                    gray: string;
+                    'gray-2': string;
+                    'gray-3': string;
+                    'gray-4': string;
+                    'gray-5': string;
+                    'gray-6': string;
+                    background: string;
+                    'secondary-background': string;
+                    'tertiary-background': string;
+                    label: string;
+                    'secondary-label': string;
+                };
+                variables: {
+                    info: string;
+                    success: string;
+                    error: string;
+                    warning: string;
+                };
+            };
+            dark: {
+                dark: boolean;
+                colors: {
+                    blue: string;
+                    green: string;
+                    red: string;
+                    yellow: string;
+                    orange: string;
+                    purple: string;
+                    pink: string;
+                    indigo: string;
+                    cyan: string;
+                    gray: string;
+                    'gray-2': string;
+                    'gray-3': string;
+                    'gray-4': string;
+                    'gray-5': string;
+                    'gray-6': string;
+                    background: string;
+                    'secondary-background': string;
+                    'tertiary-background': string;
+                    label: string;
+                    'secondary-label': string;
+                };
+                variables: {
+                    info: string;
+                    success: string;
+                    error: string;
+                    warning: string;
+                };
+            };
+        };
+    };
+    typography: {
+        defaultTypography: string;
+        fonts: {
+            default: {
+                sans: string[];
+                mono: string[];
+                serif: string[];
+            };
+        };
+    };
+};

package/dist/plugin/preset-v2.js

@@ -0,0 +1,114 @@
+const variables = {
+    info: 'var(--system-blue)',
+    success: 'var(--system-green)',
+    error: 'var(--system-red)',
+    warning: 'var(--system-yellow)'
+};
+export const preset = {
+    breakpoints: {
+        devices: {
+            desktop: 1024, //64rem (lg)
+            tablet: 768, //48rem (md)
+            mobile: 375 //28rem (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',
+        themes: {
+            light: {
+                dark: false,
+                colors: {
+                    blue: '#007AFF',
+                    green: '#34C759',
+                    red: '#FF3B30',
+                    yellow: '#FFCC00',
+                    orange: '#FF9500',
+                    purple: '#AF52DE',
+                    pink: '#FF2D55',
+                    indigo: '#5856D6',
+                    cyan: '#5AC8FA',
+                    gray: '#8E8E93',
+                    'gray-2': '#AEAEB2',
+                    'gray-3': '#C7C7CC',
+                    'gray-4': '#D1D1D6',
+                    'gray-5': '#E5E5EA',
+                    'gray-6': '#F2F2F7',
+                    background: '#FFFFFF',
+                    'secondary-background': '#F2F2F7',
+                    'tertiary-background': '#EFEFF4',
+                    label: '#000000',
+                    'secondary-label': 'rgba(60,60,67,0.6)'
+                },
+                variables: variables
+            },
+            dark: {
+                dark: true,
+                colors: {
+                    blue: '#0A84FF',
+                    green: '#30D158',
+                    red: '#FF453A',
+                    yellow: '#FFD60A',
+                    orange: '#FF9F0A',
+                    purple: '#BF5AF2',
+                    pink: '#FF375F',
+                    indigo: '#5E5CE6',
+                    cyan: '#64D2FF',
+                    gray: '#8E8E93',
+                    'gray-2': '#636366',
+                    'gray-3': '#48484A',
+                    'gray-4': '#3A3A3C',
+                    'gray-5': '#2C2C2E',
+                    'gray-6': '#1C1C1E',
+                    background: '#000000',
+                    'secondary-background': '#1C1C1E',
+                    'tertiary-background': '#2C2C2E',
+                    label: '#FFFFFF',
+                    'secondary-label': 'rgba(235,235,245,0.6)'
+                },
+                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']
+            }
+        }
+    }
+};

package/dist/plugin/vitejs.d.ts

@@ -1,6 +1,10 @@
 import type { ViteDevServer } from 'vite';
-export declare function lapikit(): Promise<{
+type Lapikit = {
+    config?: string;
+};
+export declare function lapikit({ config }?: Lapikit): Promise<{
     name: string;
     configResolved(): Promise<void>;
     configureServer(server: ViteDevServer): Promise<void>;
 }>;
+export {};