lapikit 0.4.13 → 0.4.15

package/dist/components/tooltip/tooltip.svelte

@@ -1,15 +1,19 @@
 <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';
+	import { onDestroy } from 'svelte';
+	import { useClassName, useStyles } from '../../utils';
+	import { makeComponentProps } from '../../html-mapped';
+	import { getPositionsTooltip } from './tooltip.svelte.js';
+	import type { TooltipProps } from './tooltip.types.js';
 
 	let {
+		ref = $bindable(),
 		children,
 		tooltip,
-		open = $bindable(),
+		open = $bindable(false),
+		forceMount = false,
 		label,
-		dark,
-		light,
+		dark = false,
+		light = false,
 		rounded,
 		color,
 		background,
@@ -17,91 +21,193 @@
 		delayDuration = 850,
 		density = 'default',
 		variant,
-		disabled,
+		disabled = false,
 		avoidCollisions = true,
-		forceMount,
+		class: className = '',
+		style: styleAttr = '',
+		's-class': sClass,
+		's-style': sStyle,
 		...rest
 	}: TooltipProps = $props();
 
-	const positionAxis = getPositionsTooltip();
-	const assets = getAssets();
+	let safeLocation = $derived(
+		location === 'top' || location === 'bottom' || location === 'left' || location === 'right'
+			? location
+			: 'bottom'
+	);
+	let safeDensity = $derived(
+		density === 'compact' || density === 'comfortable' || density === 'default'
+			? density
+			: 'default'
+	);
+	let safeVariant = $derived(variant === 'arrow' ? 'arrow' : undefined);
 
-	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 { classProps, styleProps, restProps } = $derived(
+		makeComponentProps(rest as Record<string, unknown>)
+	);
+
+	let triggerClass = $derived(
+		useClassName({
+			baseClass: 'kit-tooltip-trigger',
+			className: '',
+			sClass,
+			classProps
+		})
+	);
+
+	let componentClass = $derived(
+		useClassName({
+			baseClass: 'kit-tooltip__content',
+			className: `${className ?? ''}`.trim()
+		})
+	);
+
+	let componentStyle = $derived(
+		useStyles({
+			styleAttr,
+			sStyle,
+			styleProps
+		})
+	);
+
+	let mergedStyle = $derived(
+		[
+			componentStyle,
+			background ? `--kit-tooltip-background:${background}` : '',
+			color ? `--kit-tooltip-color:${color}` : '',
+			typeof rounded === 'string' && rounded.includes('px') ? `--kit-tooltip-radius:${rounded}` : ''
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
+
+	const positioner = getPositionsTooltip();
+
+	let triggerRef = $state<HTMLElement | null>(null);
+	let tooltipRef = $state<HTMLElement | null>(null);
+	let axis = $state(positioner.values);
+	let timer = $state<ReturnType<typeof setTimeout> | null>(null);
 	let innerHeight = $state(0);
 	let innerWidth = $state(0);
 	let scrollX = $state(0);
 	let scrollY = $state(0);
+	const tooltipId = `kit-tooltip-${Math.random().toString(36).slice(2, 10)}`;
+
+	const clearTimer = () => {
+		if (timer) {
+			clearTimeout(timer);
+			timer = null;
+		}
+	};
+
+	const updatePosition = () => {
+		if (!triggerRef || !tooltipRef) return;
+		positioner.update(triggerRef, tooltipRef, safeLocation, true, avoidCollisions);
+		axis = positioner.values;
+	};
+
+	const handleHoverOpen = () => {
+		if (disabled) {
+			open = false;
+			return;
+		}
+
+		clearTimer();
+		timer = setTimeout(() => {
+			open = true;
+			timer = null;
+		}, delayDuration);
+	};
 
-	axis = positionAxis?.values;
+	const handleFocusOpen = () => {
+		if (disabled) {
+			open = false;
+			return;
+		}
+
+		clearTimer();
+		open = true;
+	};
+
+	const handleClose = () => {
+		clearTimer();
+		open = false;
+	};
+
+	const handleKeydown = (event: KeyboardEvent) => {
+		if (event.key === 'Escape') handleClose();
+	};
+
+	$effect(() => {
+		if (tooltip) forceMount = true;
+	});
+
+	$effect(() => {
+		if (disabled) open = false;
+	});
+
+	$effect(() => {
+		if (open && triggerRef && tooltipRef) {
+			updatePosition();
+		}
+	});
 
 	$effect(() => {
 		if (
 			open &&
-			ref &&
-			refTooltip &&
+			triggerRef &&
+			tooltipRef &&
 			(scrollX > 0 || scrollY > 0 || innerHeight > 0 || innerWidth > 0)
 		) {
-			positionAxis.update(ref, refTooltip, location, true, avoidCollisions);
+			updatePosition();
 		}
 	});
 
 	$effect(() => {
-		if (tooltip) forceMount = true;
+		ref = triggerRef;
 	});
 
-	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;
-		}
-	};
+	onDestroy(() => {
+		clearTimer();
+	});
 </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"
+	bind:this={triggerRef}
+	class={triggerClass}
+	style="display:inline-flex"
+	aria-describedby={open ? tooltipId : undefined}
+	onmouseenter={handleHoverOpen}
+	onmouseleave={handleClose}
+	onfocusin={handleFocusOpen}
+	onfocusout={handleClose}
+	onkeydown={handleKeydown}
 >
 	{@render children?.()}
 </span>
 
 {#if open || forceMount}
 	<div
-		bind:this={refTooltip}
-		class={['kit-tooltip']}
+		bind:this={tooltipRef}
+		class="kit-tooltip"
+		id={tooltipId}
 		role="tooltip"
 		aria-label={label}
-		style={`transform: translate(${axis.x}px, ${axis.y}px);display: ${open ? 'initial' : 'none'}`}
+		style={`transform: translate(${axis.x}px, ${axis.y}px); display:${open ? 'block' : '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)}
+			class={componentClass}
+			style={mergedStyle}
+			data-density={safeDensity}
+			data-location={axis.location ?? safeLocation}
+			data-variant={safeVariant}
+			data-light={light || undefined}
+			data-dark={dark || undefined}
+			data-rounded={rounded}
+			{...restProps}
 		>
 			{#if tooltip}
 				{@render tooltip?.()}
@@ -111,3 +217,156 @@
 		</div>
 	</div>
 {/if}
+
+<style>
+	.kit-tooltip-trigger {
+		display: inline-flex;
+		width: fit-content;
+		max-width: max-content;
+		justify-self: start;
+		align-self: start;
+	}
+
+	.kit-tooltip-trigger:focus-visible {
+		outline: 2px solid var(--kit-focus);
+		outline-offset: 2px;
+	}
+
+	.kit-tooltip {
+		position: fixed;
+		inset: 0 auto auto 0;
+		z-index: 2000;
+		margin: 0;
+		pointer-events: none;
+	}
+
+	.kit-tooltip__content {
+		--kit-tooltip-background: var(--kit-surface-3);
+		--kit-tooltip-color: var(--kit-fg);
+		--kit-tooltip-radius: 8px;
+		--kit-tooltip-border: color-mix(in oklab, var(--kit-tooltip-background), black 8%);
+		--kit-tooltip-py: 0.15rem;
+		--kit-tooltip-px: 0.625rem;
+
+		position: relative;
+		display: inline-block;
+		width: max-content;
+		max-width: min(20rem, calc(100vw - 1rem));
+		padding: var(--kit-tooltip-py) var(--kit-tooltip-px);
+		border: 1px solid var(--kit-tooltip-border);
+		border-radius: var(--kit-tooltip-radius);
+		background: var(--kit-tooltip-background);
+		color: var(--kit-tooltip-color);
+		font-size: 0.875rem;
+		overflow-wrap: break-word;
+		box-shadow: 0 16px 29px -10px color-mix(in oklab, black 18%, transparent);
+		animation: kit-tooltip-enter 150ms ease;
+	}
+
+	.kit-tooltip__content[data-density='compact'] {
+		--kit-tooltip-py: 0.125rem;
+		--kit-tooltip-px: 0.5rem;
+	}
+
+	.kit-tooltip__content[data-density='comfortable'] {
+		--kit-tooltip-py: 0.35rem;
+		--kit-tooltip-px: 0.75rem;
+	}
+
+	.kit-tooltip__content[data-light='true'] {
+		--kit-tooltip-background: color-mix(in oklab, white 92%, var(--kit-surface-1));
+		--kit-tooltip-color: var(--kit-fg);
+	}
+
+	.kit-tooltip__content[data-dark='true'] {
+		--kit-tooltip-background: color-mix(in oklab, black 76%, var(--kit-surface-3));
+		--kit-tooltip-color: white;
+		--kit-tooltip-border: color-mix(in oklab, white, transparent 78%);
+	}
+
+	.kit-tooltip__content[data-rounded='0'] {
+		--kit-tooltip-radius: 0;
+	}
+	.kit-tooltip__content[data-rounded='xs'] {
+		--kit-tooltip-radius: 2px;
+	}
+	.kit-tooltip__content[data-rounded='sm'] {
+		--kit-tooltip-radius: 4px;
+	}
+	.kit-tooltip__content[data-rounded='md'] {
+		--kit-tooltip-radius: 8px;
+	}
+	.kit-tooltip__content[data-rounded='lg'] {
+		--kit-tooltip-radius: 16px;
+	}
+	.kit-tooltip__content[data-rounded='xl'] {
+		--kit-tooltip-radius: 99999px;
+	}
+
+	.kit-tooltip__content[data-variant='arrow']::after {
+		content: '';
+		position: absolute;
+		border-style: solid;
+	}
+
+	.kit-tooltip__content[data-variant='arrow'][data-location='bottom']::after,
+	.kit-tooltip__content[data-variant='arrow'][data-location='top']::after {
+		left: 50%;
+		margin-left: -0.35rem;
+		border-width: 0.35rem;
+	}
+
+	.kit-tooltip__content[data-variant='arrow'][data-location='bottom']::after {
+		bottom: 100%;
+		border-color: transparent transparent var(--kit-tooltip-background) transparent;
+	}
+
+	.kit-tooltip__content[data-variant='arrow'][data-location='top']::after {
+		top: 100%;
+		border-color: var(--kit-tooltip-background) transparent transparent transparent;
+	}
+
+	.kit-tooltip__content[data-variant='arrow'][data-location='left']::after,
+	.kit-tooltip__content[data-variant='arrow'][data-location='right']::after {
+		top: 50%;
+		margin-top: -0.35rem;
+		border-width: 0.35rem;
+	}
+
+	.kit-tooltip__content[data-variant='arrow'][data-location='right']::after {
+		right: 100%;
+		border-color: transparent var(--kit-tooltip-background) transparent transparent;
+	}
+
+	.kit-tooltip__content[data-variant='arrow'][data-location='left']::after {
+		left: 100%;
+		border-color: transparent transparent transparent var(--kit-tooltip-background);
+	}
+
+	.kit-tooltip__content[data-location='top'] {
+		--kit-tooltip-enter-x: 0;
+		--kit-tooltip-enter-y: 0.5rem;
+	}
+
+	.kit-tooltip__content[data-location='bottom'] {
+		--kit-tooltip-enter-x: 0;
+		--kit-tooltip-enter-y: -0.5rem;
+	}
+
+	.kit-tooltip__content[data-location='right'] {
+		--kit-tooltip-enter-x: -0.5rem;
+		--kit-tooltip-enter-y: 0;
+	}
+
+	.kit-tooltip__content[data-location='left'] {
+		--kit-tooltip-enter-x: 0.5rem;
+		--kit-tooltip-enter-y: 0;
+	}
+
+	@keyframes kit-tooltip-enter {
+		from {
+			opacity: 0;
+			transform: translate(var(--kit-tooltip-enter-x, 0), var(--kit-tooltip-enter-y, 0)) scale(0.95);
+		}
+	}
+</style>

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

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

package/dist/{labs/components → components}/tooltip/tooltip.types.d.ts

@@ -1,4 +1,4 @@
-import type { Component, PropValue, RoundedType } from '../../utils/types/index.js';
+import type { Component, PropValue, RoundedType } from '../../@types';
 import type { Snippet } from 'svelte';
 export interface TooltipProps extends Component {
     ref?: HTMLElement | null;

package/dist/components/tooltip/tooltip.types.js

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

package/dist/constants.d.ts

@@ -0,0 +1,10 @@
+export declare const lapikitImportsRef = "lapikit/labs/components";
+export declare const lapikitImportsLabsRef = "lapikit/labs/labs/components";
+export declare const lapikitComponents: readonly string[];
+export declare const lapikitLabsComponents: readonly string[];
+export declare const lapikitPlugins: {
+    readonly repl: {
+        readonly components: readonly ["repl"];
+        readonly ref: "@lapikit/repl";
+    };
+};

package/dist/{labs/compiler/components.js → constants.js}

@@ -1,5 +1,6 @@
-const lapikitComponents = [
-    'sheet',
+export const lapikitImportsRef = 'lapikit/labs/components';
+export const lapikitImportsLabsRef = 'lapikit/labs/labs/components';
+export const lapikitComponents = [
     'app',
     'btn',
     'icon',
@@ -29,4 +30,10 @@ const lapikitComponents = [
     'chip',
     'card'
 ];
-export default lapikitComponents;
+export const lapikitLabsComponents = ['sheet'];
+export const lapikitPlugins = {
+    repl: {
+        components: ['repl'],
+        ref: '@lapikit/repl'
+    }
+};

package/dist/entry-bundler.d.ts

@@ -1,10 +1,4 @@
-import type { LapikitPreprocessOptions } from './labs/compiler/types/options.js';
-declare function lapikitPreprocess(options?: LapikitPreprocessOptions): {
-    markup({ content }: {
-        content: string;
-        filename?: string;
-    }): {
-        code: string;
-    } | undefined;
-};
+import type { LapikitPreprocessOptions } from './@types/index.js';
+import type { PreprocessorGroup } from 'svelte/compiler';
+declare function lapikitPreprocess(options?: LapikitPreprocessOptions): PreprocessorGroup;
 export { lapikitPreprocess };

package/dist/entry-bundler.js

@@ -1,4 +1,4 @@
-import { liliCore } from './labs/compiler/preprocess/index.js';
+import { liliCore } from './framework.js';
 function lapikitPreprocess(options) {
     return liliCore(options);
 }

package/dist/{labs/compiler/preprocess/decode-sourcemap.d.ts → escaping.d.ts}

@@ -1,2 +1,2 @@
-import type { ComponentInfo, KitComponentScan } from '../types/index.js';
+import type { ComponentInfo, KitComponentScan } from './@types/index.js';
 export declare const decodeSourceMap: (content: string, componentInfo: Map<string, ComponentInfo>) => KitComponentScan;

package/dist/{labs/compiler/preprocess/decode-sourcemap.js → escaping.js}

@@ -1,4 +1,3 @@
-import { findTagEnd } from './finding.js';
 export const decodeSourceMap = (content, componentInfo) => {
     const importedComponents = new Map();
     const parts = [];
@@ -104,3 +103,52 @@ export const decodeSourceMap = (content, componentInfo) => {
         importedComponents
     };
 };
+const findTagEnd = (content, start) => {
+    let inSingle = false;
+    let inDouble = false;
+    let inTemplate = false;
+    let braceDepth = 0;
+    for (let i = start; i < content.length; i++) {
+        const ch = content[i];
+        const prev = i > 0 ? content[i - 1] : '';
+        if (inSingle) {
+            if (ch === "'" && prev !== '\\')
+                inSingle = false;
+            continue;
+        }
+        if (inDouble) {
+            if (ch === '"' && prev !== '\\')
+                inDouble = false;
+            continue;
+        }
+        if (inTemplate) {
+            if (ch === '`' && prev !== '\\')
+                inTemplate = false;
+            continue;
+        }
+        if (ch === "'") {
+            inSingle = true;
+            continue;
+        }
+        if (ch === '"') {
+            inDouble = true;
+            continue;
+        }
+        if (ch === '`') {
+            inTemplate = true;
+            continue;
+        }
+        if (ch === '{') {
+            braceDepth++;
+            continue;
+        }
+        if (ch === '}' && braceDepth > 0) {
+            braceDepth--;
+            continue;
+        }
+        if (braceDepth === 0 && ch === '>') {
+            return i;
+        }
+    }
+    return -1;
+};

package/dist/framework.d.ts

@@ -0,0 +1,15 @@
+import type { LapikitPreprocessOptions } from './@types/index.js';
+/**
+ * componentName generates the component name used in imports
+ * @param shortName The short name of the component
+ * @returns The component name with "Kit" prefix and the first letter capitalized
+ */
+export declare function componentName(shortName: string): string;
+export declare function liliCore(options?: LapikitPreprocessOptions): {
+    markup({ content }: {
+        content: string;
+        filename?: string;
+    }): {
+        code: string;
+    } | undefined;
+};

package/dist/{labs/compiler/preprocess/lili.js → framework.js}

@@ -1,16 +1,24 @@
-import { componentName, lapikitImportsRef } from './source-import.js';
-import { decodeSourceMap } from './decode-sourcemap.js';
-// imports components and plugins
-import lapikitComponents from '../components.js';
-import lapikitPlugins from '../plugins.js';
+import { decodeSourceMap } from './escaping.js';
+import { lapikitImportsRef, lapikitImportsLabsRef, lapikitComponents, lapikitLabsComponents, lapikitPlugins } from './constants.js';
+/**
+ * componentName generates the component name used in imports
+ * @param shortName The short name of the component
+ * @returns The component name with "Kit" prefix and the first letter capitalized
+ */
+export function componentName(shortName) {
+    return 'Kit' + shortName.charAt(0).toUpperCase() + shortName.slice(1);
+}
 export function liliCore(options) {
     return {
         markup({ content }) {
-            const allComponents = [...lapikitComponents];
+            const allComponents = [...lapikitComponents, ...lapikitLabsComponents];
             const componentToRef = new Map();
             lapikitComponents.forEach((comp) => {
                 componentToRef.set(comp, lapikitImportsRef);
             });
+            lapikitLabsComponents.forEach((comp) => {
+                componentToRef.set(comp, lapikitImportsLabsRef);
+            });
             // plugins
             if (options?.plugins) {
                 options.plugins.forEach((pluginKey) => {

package/dist/{labs/compiler/mapped-code.d.ts → html-mapped.d.ts}

@@ -1,5 +1,4 @@
-import type { SClassProp, SStyleProp } from './types/index.js';
-import type { PropValue } from '../utils/types/index.js';
+import type { PropValue, SClassProp, SStyleProp } from './@types';
 /**
  * Computes a string of class names based on the provided sClass and classDirectiveProps.
  * @param sClass - The s-class property which can be a string, array, or object.

package/dist/labs/index.d.ts

@@ -0,0 +1 @@
+export { default as KitSheet } from './sheet/sheet.svelte';

package/dist/labs/index.js

@@ -0,0 +1,2 @@
+// components labs
+export { default as KitSheet } from './sheet/sheet.svelte';

package/dist/labs/{components/sheet → sheet}/sheet.svelte

@@ -4,8 +4,8 @@
 	 * @description A simple sheet component for experimentation for developers Lapikit. Please don't use it in production.
 	 */
 
-	import { useClassName, useStyles } from '../../utils/index.js';
-	import { makeComponentProps } from '../../compiler/mapped-code.js';
+	import { useClassName, useStyles } from '../../utils';
+	import { makeComponentProps } from '../../html-mapped';
 
 	let {
 		class: className,

package/dist/{labs/utils → utils}/components.d.ts

@@ -1,4 +1,4 @@
-import type { useClassNameProps, useStylesProps } from './types/index.js';
+import type { useClassNameProps, useStylesProps } from '../@types';
 /**
  * useClassName - Utility to compute class names for a component.
  * @param baseClass - The base class name for the component.

package/dist/{labs/utils → utils}/outside.d.ts

@@ -1,4 +1,4 @@
-import type { ClickOutsideOptions } from './types/index.ts';
+import type { ClickOutsideOptions } from '../@types';
 export declare function clickOutside(node: HTMLElement, options: ClickOutsideOptions): {
     update(newOptions: ClickOutsideOptions): void;
     destroy(): void;