lapikit 0.0.0-insiders.fd1a829 → 0.0.0-insiders.fd9617d

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

@@ -0,0 +1,27 @@
+import type { Component } from '../../internal/types/index.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

@@ -0,0 +1,116 @@
+.kit-tooltip {
+	inset: 0px auto auto 0px;
+	margin: 0px;
+	position: fixed;
+	z-index: 2000;
+}
+
+.kit-tooltip-content {
+	background-color: var(--tooltip-background, var(--kit-background-grouped-primary));
+	color: var(--tooltip-color, var(--kit-label-primary));
+	border-radius: var(--tooltip-shape, var(--system-shape-md));
+	border: 1px solid var(--tooltip-background, var(--kit-background-grouped-primary));
+	font-size: 0.875rem;
+	display: inline-block;
+	width: auto;
+	pointer-events: none;
+	overflow-wrap: break-word;
+	box-shadow: 0px 16px 29px -10px color-mix(in oklab, var(--kit-state-shadow) 60%, transparent);
+}
+
+/* density */
+.kit-tooltip-content[breakpoint]kit-tooltip-content--density-default {
+	padding: 0.15rem 0.625rem;
+}
+
+.kit-tooltip-content[breakpoint]kit-tooltip-content--density-compact {
+	padding: 0.125rem 0.5rem;
+}
+
+.kit-tooltip-content[breakpoint]kit-tooltip-content--density-comfortable {
+	padding: 0.35rem 0.75rem;
+}
+
+.kit-tooltip-content--arrow::after {
+	content: ' ';
+	position: absolute;
+	border-style: solid;
+}
+
+.kit-tooltip-content--arrow.kit-tooltip-content--bottom::after,
+.kit-tooltip-content--arrow.kit-tooltip-content--top::after {
+	left: 50%;
+	margin-left: -0.35rem;
+	border-width: 0.35rem;
+}
+
+.kit-tooltip-content--arrow.kit-tooltip-content--bottom::after {
+	bottom: 100%;
+	border-color: transparent transparent var(--tooltip-background) transparent;
+}
+
+.kit-tooltip-content--arrow.kit-tooltip-content--top::after {
+	top: 100%;
+	border-color: var(--tooltip-background) transparent transparent transparent;
+}
+
+.kit-tooltip-content--arrow.kit-tooltip-content--left::after,
+.kit-tooltip-content--arrow.kit-tooltip-content--right::after {
+	top: 50%;
+	margin-top: -0.35rem;
+	border-width: 0.35rem;
+}
+
+.kit-tooltip-content--arrow.kit-tooltip-content--right::after {
+	right: 100%;
+	border-color: transparent var(--tooltip-background) transparent transparent;
+}
+
+.kit-tooltip-content--arrow.kit-tooltip-content--left::after {
+	left: 100%;
+	border-color: transparent transparent transparent var(--tooltip-background);
+}
+
+.kit-tooltip-content--top,
+.kit-tooltip-content--bottom,
+.kit-tooltip-content--right,
+.kit-tooltip-content--left {
+	animation-duration: 150ms;
+	animation-name: enter;
+}
+
+.kit-tooltip-content--top {
+	--animate-enter-pos1: 0;
+	--animate-enter-pos2: 0.5rem;
+	--animate-enter-pos3: 0;
+}
+
+.kit-tooltip-content--bottom {
+	--animate-enter-pos1: 0;
+	--animate-enter-pos2: -0.5rem;
+	--animate-enter-pos3: 0;
+}
+
+.kit-tooltip-content--right {
+	--animate-enter-pos1: -0.5rem;
+	--animate-enter-pos2: 0;
+	--animate-enter-pos3: 0;
+}
+
+.kit-tooltip-content--left {
+	--animate-enter-pos1: 0.5rem;
+	--animate-enter-pos2: 0;
+	--animate-enter-pos3: 0;
+}
+
+@keyframes enter {
+	0% {
+		opacity: 0;
+		transform: translate3d(
+				var(--animate-enter-pos1),
+				var(--animate-enter-pos2),
+				var(--animate-enter-pos3)
+			)
+			scale3d(0.95, 0.95, 0.95) rotate(0);
+	}
+}

package/dist/components/tooltip/tooltip.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+	import { getAssets } from '../../internal/core/actions/assets.svelte.js';
+	import { getPositionsTooltip } from '../../internal/core/actions/tooltip.svelte.js';
+	import type { PositionElement, TooltipProps } from './types.js';
+
+	let {
+		children,
+		tooltip,
+		open = $bindable(),
+		label,
+		dark,
+		light,
+		rounded,
+		color,
+		background,
+		location = 'bottom',
+		delayDuration = 850,
+		density = 'default',
+		variant,
+		disabled,
+		avoidCollisions = true,
+		forceMount,
+		...rest
+	}: TooltipProps = $props();
+
+	const positionAxis = getPositionsTooltip();
+	const assets = getAssets();
+
+	let ref: HTMLElement | null = $state(null);
+	let refTooltip: HTMLElement | null = $state(null);
+	let timer: ReturnType<typeof setTimeout> | null = $state(null);
+	let axis: PositionElement = $state({ x: 0, y: 0, location: null });
+	let innerHeight = $state(0);
+	let innerWidth = $state(0);
+	let scrollX = $state(0);
+	let scrollY = $state(0);
+
+	axis = positionAxis?.values;
+
+	$effect(() => {
+		if (
+			open &&
+			ref &&
+			refTooltip &&
+			(scrollX > 0 || scrollY > 0 || innerHeight > 0 || innerWidth > 0)
+		) {
+			positionAxis.update(ref, refTooltip, location, true, avoidCollisions);
+		}
+	});
+
+	$effect(() => {
+		if (tooltip) forceMount = true;
+	});
+
+	const handleMouse = (state: string) => {
+		if (disabled) return (open = false);
+		if (state === 'enter') {
+			timer = setTimeout(() => {
+				open = true;
+			}, delayDuration);
+		} else if (state === 'leave') {
+			if (timer) {
+				clearTimeout(timer);
+				timer = null;
+			}
+			open = false;
+		}
+	};
+</script>
+
+<svelte:window bind:innerHeight bind:innerWidth bind:scrollX bind:scrollY />
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<span
+	bind:this={ref}
+	onmouseenter={() => handleMouse('enter')}
+	onmouseleave={() => handleMouse('leave')}
+	style:display="inline-flex"
+>
+	{@render children?.()}
+</span>
+
+{#if open || forceMount}
+	<div
+		bind:this={refTooltip}
+		class={['kit-tooltip']}
+		role="tooltip"
+		aria-label={label}
+		style={`transform: translate(${axis.x}px, ${axis.y}px);display: ${open ? 'initial' : 'none'}`}
+	>
+		<div
+			class={[
+				'kit-tooltip-content animate-in',
+				light && 'light',
+				dark && 'dark',
+				rounded && assets.shape(rounded),
+				axis?.location && `kit-tooltip-content--${axis?.location}`,
+				variant && `kit-tooltip-content--${variant}`,
+				density && assets.className('tooltip-content', 'density', density),
+				rest.class
+			]}
+			style:--tooltip-background={assets.color(background)}
+			style:--tooltip-color={assets.color(color)}
+			style:--tooltip-shape={assets.shape(rounded)}
+		>
+			{#if tooltip}
+				{@render tooltip?.()}
+			{:else}
+				{label}
+			{/if}
+		</div>
+	</div>
+{/if}

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

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

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

@@ -0,0 +1,23 @@
+import type { Component } from '../../internal/types/index.js';
+import type { Snippet } from 'svelte';
+export interface TooltipProps extends Component {
+    open?: boolean;
+    dark?: boolean;
+    light?: boolean;
+    rounded?: string;
+    label?: string;
+    location?: 'top' | 'bottom' | 'left' | 'right';
+    color?: string;
+    background?: string;
+    delayDuration?: number;
+    variant?: 'arrow';
+    density?: 'compact' | 'comfortable' | 'default';
+    disabled?: boolean;
+    avoidCollisions?: boolean;
+    tooltip?: Snippet;
+}
+export type PositionElement = {
+    x: number;
+    y: number;
+    location: string | null;
+};

package/dist/components/tooltip/types.js

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

package/dist/entry-bundler.d.ts

@@ -0,0 +1,12 @@
+type LapikitPreprocessOptions = {
+    plugins?: string[];
+};
+declare function lapikitPreprocess(options?: LapikitPreprocessOptions): {
+    markup({ content }: {
+        content: string;
+        filename?: string;
+    }): {
+        code: string;
+    } | undefined;
+};
+export { lapikitPreprocess };

package/dist/entry-bundler.js

@@ -0,0 +1,107 @@
+const components = ['btn'];
+function componentName(shortName) {
+    return 'Kit' + shortName.charAt(0).toUpperCase() + shortName.slice(1);
+}
+// plugins lapikit
+const lapikitPlugins = {
+    repl: {
+        components: ['repl'],
+        ref: '@lapikit/repl'
+    }
+};
+function lapikitPreprocess(options) {
+    return {
+        markup({ content }) {
+            const allComponents = [...components];
+            const componentToRef = new Map();
+            components.forEach((comp) => {
+                componentToRef.set(comp, 'lapikit/labs/components');
+            });
+            // plugins
+            if (options?.plugins) {
+                options.plugins.forEach((pluginKey) => {
+                    const plugin = lapikitPlugins[pluginKey];
+                    if (plugin) {
+                        plugin.components.forEach((comp) => {
+                            if (!allComponents.includes(comp)) {
+                                allComponents.push(comp);
+                            }
+                            componentToRef.set(comp, plugin.ref);
+                        });
+                    }
+                });
+            }
+            const hasComponent = allComponents.some((comp) => content.includes(`<kit:${comp}`));
+            if (!hasComponent)
+                return;
+            let processedContent = content;
+            const importedComponents = new Map();
+            let hasChanges = true;
+            while (hasChanges) {
+                hasChanges = false;
+                for (const shortName of allComponents) {
+                    const componentNameStr = componentName(shortName);
+                    const attrPattern = `(?:[^>"']|"[^"]*"|'[^']*')*?`;
+                    const selfClosingRegex = new RegExp(`<kit:${shortName}(${attrPattern})\\s*/>`, 'g');
+                    const pairRegex = new RegExp(`<kit:${shortName}(${attrPattern})>([\\s\\S]*?)<\\/kit:${shortName}\\s*>`, 'g');
+                    let newContent = processedContent.replace(selfClosingRegex, (fullMatch, attrs) => {
+                        hasChanges = true;
+                        const ref = componentToRef.get(shortName) || 'lapikit/labs/components';
+                        importedComponents.set(componentNameStr, ref);
+                        return `<${componentNameStr}${attrs} />`;
+                    });
+                    newContent = newContent.replace(pairRegex, (fullMatch, attrs, children) => {
+                        hasChanges = true;
+                        const ref = componentToRef.get(shortName) || 'lapikit/labs/components';
+                        importedComponents.set(componentNameStr, ref);
+                        return `<${componentNameStr}${attrs}>${children}</${componentNameStr}>`;
+                    });
+                    if (newContent !== processedContent) {
+                        processedContent = newContent;
+                    }
+                }
+            }
+            if (processedContent === content)
+                return;
+            if (importedComponents.size > 0) {
+                const importsByRef = new Map();
+                importedComponents.forEach((ref, component) => {
+                    if (!importsByRef.has(ref)) {
+                        importsByRef.set(ref, []);
+                    }
+                    importsByRef.get(ref).push(component);
+                });
+                const importLines = Array.from(importsByRef.entries())
+                    .map(([ref, components]) => {
+                    const imports = components.join(', ');
+                    return `\n\timport { ${imports} } from '${ref}';`;
+                })
+                    .join('');
+                const scriptRegex = /<script(?![^>]*\bmodule\b)([^>]*)>/;
+                const scriptMatch = processedContent.match(scriptRegex);
+                if (scriptMatch && scriptMatch.index !== undefined) {
+                    const insertPos = scriptMatch.index + scriptMatch[0].length;
+                    processedContent =
+                        processedContent.slice(0, insertPos) + importLines + processedContent.slice(insertPos);
+                }
+                else {
+                    const moduleScriptMatch = processedContent.match(/<script[^>]*\bmodule\b[^>]*>/);
+                    if (moduleScriptMatch && moduleScriptMatch.index !== undefined) {
+                        const moduleScriptEnd = processedContent.indexOf('</script>', moduleScriptMatch.index) + '</script>'.length;
+                        processedContent =
+                            processedContent.slice(0, moduleScriptEnd) +
+                                `\n\n<script>${importLines}\n</script>` +
+                                processedContent.slice(moduleScriptEnd);
+                    }
+                    else {
+                        processedContent = `<script>${importLines}\n</script>\n\n` + processedContent;
+                    }
+                }
+            }
+            return {
+                code: processedContent
+            };
+        }
+    };
+}
+export { lapikitPreprocess };

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;
+        };
+    };
+};