lapikit 0.0.0-insiders.c501032 → 0.0.0-insiders.de81aed

package/dist/components/tooltip/tooltip.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+	import { getAssets } from '../../internal/assets.svelte.js';
+	import { getPositionsTooltip } from './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:--base={assets.color(background)}
+			style:--on={assets.color(color)}
+			style:--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/tooltip.svelte.js

@@ -0,0 +1,131 @@
+import { innerWidth, innerHeight } from 'svelte/reactivity/window';
+export function getPositionsTooltip() {
+    // 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();
+            const activatorRect = activator.getBoundingClientRect();
+            const spacing = 6;
+            if (location === 'top' || location === 'bottom') {
+                if (avoidCollisions) {
+                    if (location === 'top') {
+                        if (activatorRect.y - (elementRect.height + spacing) < 0) {
+                            axis.y = activatorRect.bottom + spacing;
+                            axis.location = 'bottom';
+                        }
+                        else {
+                            axis.y = activatorRect.top - (elementRect.height + spacing);
+                            axis.location = 'top';
+                        }
+                    }
+                    else {
+                        if (activatorRect.y + activatorRect.height + (elementRect.height + spacing) >
+                            innerHeight.current) {
+                            axis.y = activatorRect.top - (elementRect.height + spacing);
+                            axis.location = 'top';
+                        }
+                        else {
+                            axis.y = activatorRect.bottom + spacing;
+                            axis.location = 'bottom';
+                        }
+                    }
+                }
+                else {
+                    if (location === 'top') {
+                        axis.y = activatorRect.top - (elementRect.height + spacing);
+                        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/components/tooltip/types.d.ts

@@ -0,0 +1,23 @@
+import type { Component } from '../../internal/types.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/internal/assets.svelte.d.ts

@@ -0,0 +1,8 @@
+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/internal/assets.svelte.js

@@ -0,0 +1,52 @@
+import { x11ColorNames } from '../utils/x11.js';
+export function getAssets() {
+    return {
+        shape(params) {
+            if (params) {
+                if (params === 'none' || params == '0')
+                    return '0';
+                return `var(--kit-radius-${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 === '_default' ? '' : `${media}:`}kit--${type}`)
+                        .join(' ');
+                }
+                else {
+                    return Object.entries(value)
+                        .map(([media, value]) => `${media === '_default' ? '' : `${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;
+                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/internal/clickOutside.d.ts

@@ -0,0 +1,9 @@
+type ClickOutsideOptions = {
+    exclude?: (HTMLElement | PointerEvent | null)[];
+    onClose: () => void;
+};
+export declare function clickOutside(node: HTMLElement, options: ClickOutsideOptions): {
+    update(newOptions: ClickOutsideOptions): void;
+    destroy(): void;
+};
+export {};

package/dist/internal/clickOutside.js

@@ -0,0 +1,34 @@
+export function clickOutside(node, options) {
+    let { exclude = [], onClose } = options;
+    function isTargetExcluded(target) {
+        return exclude.some((ex) => {
+            if (!ex)
+                return false;
+            if (ex instanceof HTMLElement) {
+                return ex.contains(target);
+            }
+            if (ex instanceof PointerEvent && ex.target instanceof Node) {
+                return ex.target.contains(target);
+            }
+            return false;
+        });
+    }
+    const handleClick = (event) => {
+        const target = event.target;
+        const isExcluded = isTargetExcluded(target);
+        const isInside = node.contains(target);
+        if (!isInside && !isExcluded) {
+            onClose();
+        }
+    };
+    document.addEventListener('click', handleClick, true);
+    return {
+        update(newOptions) {
+            exclude = newOptions.exclude || [];
+            onClose = newOptions.onClose;
+        },
+        destroy() {
+            document.removeEventListener('click', handleClick, true);
+        }
+    };
+}

package/dist/internal/index.d.ts

@@ -1,2 +1,4 @@
 export * from './terminal.js';
 export * from './ansi.js';
+export * from './assets.svelte.js';
+export * from './scroll.js';

package/dist/internal/index.js

@@ -1,2 +1,4 @@
 export * from './terminal.js';
 export * from './ansi.js';
+export * from './assets.svelte.js';
+export * from './scroll.js';

package/dist/internal/scroll.d.ts

@@ -0,0 +1 @@
+export declare function disabledScroll(state: boolean): void;

package/dist/internal/scroll.js

@@ -0,0 +1,6 @@
+import { BROWSER } from 'esm-env';
+export function disabledScroll(state) {
+    if (BROWSER) {
+        document.body.style.overflow = state ? 'hidden' : '';
+    }
+}

package/dist/internal/types.d.ts

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

package/dist/preset.js

@@ -7,17 +7,29 @@ export const config = {
         colorScheme: 'dark', // 'light' | 'dark' | 'auto'
         colors: {
             primary: { light: 'oklch(45% 0.24 277.023)', dark: 'oklch(45% 0.24 277.023)' },
+            'on-primary': { light: 'oklch(14% 0.005 285.823)', dark: 'oklch(14% 0.005 285.823)' },
             secondary: { light: 'oklch(65% 0.241 354.308)', dark: 'oklch(65% 0.241 354.308)' },
+            'on-secondary': { light: 'oklch(14% 0.005 285.823)', dark: 'oklch(14% 0.005 285.823)' },
             tertiary: { light: 'oklch(77% 0.152 181.912)', dark: 'oklch(77% 0.152 181.912)' },
+            'on-tertiary': { light: 'oklch(14% 0.005 285.823)', dark: 'oklch(14% 0.005 285.823)' },
             neutral: { light: 'oklch(14% 0.005 285.823)', dark: 'oklch(14% 0.005 285.823)' },
+            'on-neutral': { light: 'oklch(100% 0 0)', dark: 'oklch(100% 0 0)' },
             info: { light: 'oklch(74% 0.16 232.661)', dark: 'oklch(74% 0.16 232.661)' },
+            'on-info': { light: 'oklch(14% 0.005 285.823)', dark: 'oklch(14% 0.005 285.823)' },
             success: { light: 'oklch(76% 0.177 163.223)', dark: 'oklch(76% 0.177 163.223)' },
+            'on-success': { light: 'oklch(14% 0.005 285.823)', dark: 'oklch(14% 0.005 285.823)' },
             warning: { light: 'oklch(82% 0.189 84.429)', dark: 'oklch(82% 0.189 84.429)' },
+            'on-warning': { light: 'oklch(14% 0.005 285.823)', dark: 'oklch(14% 0.005 285.823)' },
             error: { light: 'oklch(71% 0.194 13.428)', dark: 'oklch(71% 0.194 13.428)' },
+            'on-error': { light: 'oklch(14% 0.005 285.823)', dark: 'oklch(14% 0.005 285.823)' },
             base: { light: 'oklch(100% 0 0)', dark: 'oklch(25.33% 0.016 252.42)' },
+            'on-base': { light: 'oklch(14% 0.005 285.823)', dark: 'oklch(100% 0 0)' },
             surface: { light: 'oklch(98% 0 0)', dark: 'oklch(23.26% 0.014 253.1)' },
+            'on-surface': { light: 'oklch(14% 0.005 285.823)', dark: 'oklch(100% 0 0)' },
             container: { light: 'oklch(95% 0 0)', dark: 'oklch(21.15% 0.012 254.09)' },
-            shadow: 'black'
+            'on-container': { light: 'oklch(14% 0.005 285.823)', dark: 'oklch(100% 0 0)' },
+            shadow: 'black',
+            scrim: 'oklch(0.00% 0.000 0)'
         }
     },
     breakpoints: {
@@ -25,7 +37,7 @@ export const config = {
         tabletBreakpoint: 'md',
         laptopBreakpoint: 'xl',
         thresholds: {
-            none: 0, // 0px
+            _default: 0, // 0px
             xs: '28rem', //448px
             sm: '40rem', //640px
             md: '48rem', //768px

package/dist/stores/index.d.ts

@@ -0,0 +1,4 @@
+import { type Writable } from 'svelte/store';
+export declare const colorScheme: Writable<'auto' | 'dark' | 'light'>;
+export declare function updateThemeStore(update: 'auto' | 'dark' | 'light'): void;
+export declare function setColorScheme(scheme: 'auto' | 'dark' | 'light'): void;

package/dist/stores/index.js

@@ -0,0 +1,23 @@
+import { writable } from 'svelte/store';
+// states
+const _default = 'light';
+const isBrowser = typeof window !== 'undefined';
+export const colorScheme = writable(_default);
+export function updateThemeStore(update) {
+    colorScheme.update(() => {
+        if (isBrowser) {
+            const ref = document.documentElement.classList;
+            if (update === 'auto')
+                ref.remove('light', 'dark');
+            else {
+                ref.remove(update === 'dark' ? 'light' : 'dark');
+                ref.add(update === 'dark' ? 'dark' : 'light');
+            }
+            localStorage.setItem('@lapikit/theme', update);
+        }
+        return update;
+    });
+}
+export function setColorScheme(scheme) {
+    updateThemeStore(scheme);
+}

package/dist/style/animation.css

@@ -0,0 +1,20 @@
+@keyframes button-click {
+	0% {
+		transform: scale(0.98);
+	}
+	40% {
+		transform: scale(1.02);
+	}
+	100% {
+		transform: scale(1);
+	}
+}
+
+@keyframes icon-rotate {
+	0% {
+		transform: rotate(10deg);
+	}
+	100% {
+		transform: rotate(380deg);
+	}
+}

package/dist/style/css.js

@@ -8,9 +8,10 @@ import { colors, component, devices, variables } from './parser/index.js';
 import { terminal } from '../internal/terminal.js';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
-const __components = path.resolve('src/components');
 export const processCSS = async (config) => {
     const _normalize = fs.readFileSync(path.resolve(__dirname, './normalize.css'), 'utf-8');
+    const _animation = fs.readFileSync(path.resolve(__dirname, './animation.css'), 'utf-8');
+    const _variables = fs.readFileSync(path.resolve(__dirname, './variable.css'), 'utf-8');
     let styles = ``;
     if (config.options.normalize)
         styles += `${_normalize}\n`;
@@ -19,10 +20,12 @@ export const processCSS = async (config) => {
     const variablesStyles = variables(config);
     styles += `${colorScheme.root}\n`;
     styles += `${variablesStyles}\n`;
+    styles += `${variablesStyles}\n`;
+    styles += `${_variables}\n`;
     styles += `${colorScheme.className}\n`;
     styles += `${deviceDisplay}\n`;
-    if (fs.existsSync(__components) && fs.statSync(__components).isDirectory())
-        styles += component(config);
+    styles += component(config);
+    styles += `${_animation}\n`;
     if (config.options.minify) {
         styles = minify(styles);
         terminal('success', 'css minified');

package/dist/style/parser/color.js

@@ -65,10 +65,21 @@ export const colors = (config) => {
     // class
     let classStyles = '';
     for (const [property] of Object.entries(schemes.light)) {
+        // classStyles += `.${property}:not([class*='--variant-']) {\n`;
+        // classStyles += `--background-color: var(--kit-${property});\n`;
+        // classStyles += `--color: var(--kit-on-${property}, var(--kit-${property}));\n`;
+        // classStyles += `}\n`;
+        // classStyles += `.${property}[class*='--variant-'] {\n`;
+        // classStyles += `--color: var(--kit-${property});\n`;
+        // classStyles += `}\n`;
         classStyles += `.${property} {\n`;
-        classStyles += `--background-color: var(--kit-${property});\n`;
-        classStyles += `--color: var(--kit-${property});\n`;
+        classStyles += `--base: var(--kit-${property});\n`;
+        classStyles += `--on: var(--kit-on-${property}, var(--kit-${property}));\n`;
         classStyles += `}\n`;
+        // classStyles += `.${property}:not([class*='kit-']) {\n`;
+        // classStyles += `background-color: var(--kit-${property});\n`;
+        // classStyles += `color: var(--kit-on-${property}, var(--kit-${property}));\n`;
+        // classStyles += `}\n`;
     }
     return {
         root: cssVariables,

package/dist/style/variable.css

@@ -0,0 +1,7 @@
+:root {
+	--kit-dialog-size-xs: 18.75rem;
+	--kit-dialog-size-sm: 25rem;
+	--kit-dialog-size-md: 37.5rem;
+	--kit-dialog-size-lg: 53.125rem;
+	--kit-dialog-size-xl: 75rem;
+}

package/dist/utils/x11.d.ts

@@ -1,4 +1,4 @@
 export declare const x11Colors: {
     [key: string]: string;
 };
-export declare const x11ColorNames: string[];
+export declare const x11ColorNames: Array<string>;

package/package.json

@@ -1,6 +1,7 @@
 {
 	"name": "lapikit",
-	"version": "0.0.0-insiders.c501032",
+	"version": "0.0.0-insiders.de81aed",
+	"license": "MIT",
 	"publishConfig": {
 		"access": "public"
 	},
@@ -25,6 +26,8 @@
 	"files": [
 		"bin",
 		"dist",
+		"README.md",
+		"LICENSE",
 		"!dist/**/*.test.*",
 		"!dist/**/*.spec.*"
 	],
@@ -39,12 +42,18 @@
 	"type": "module",
 	"exports": {
 		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js"
+			"types": "./dist/index.d.ts"
+		},
+		"./components": {
+			"svelte": "./dist/components/index.js",
+			"default": "./dist/components/index.js"
 		},
 		"./vite": {
 			"default": "./dist/plugin/vitejs.js"
 		},
+		"./stores": {
+			"default": "./dist/stores/index.js"
+		},
 		"./css": "./dist/styles.css"
 	},
 	"peerDependencies": {