lapikit 0.4.12 → 0.4.13

package/dist/labs/compiler/components.js

@@ -4,6 +4,9 @@ const lapikitComponents = [
     'btn',
     'icon',
     'avatar',
+    'dropdown',
+    'popover',
+    'tooltip',
     'textfield',
     'appbar',
     'btn',

package/dist/labs/components/dropdown/dropdown.svelte

@@ -0,0 +1,249 @@
+<script lang="ts">
+	import { onDestroy } from 'svelte';
+	import { useClassName, useStyles, clickOutside } from '../../utils/index.js';
+	import { makeComponentProps } from '../../compiler/mapped-code.js';
+	import { getPositions } from './dropdown.svelte.js';
+	import type { DropdownProps, ModelDropdownProps } from './dropdown.types.js';
+
+	let {
+		ref = $bindable(),
+		children,
+		activator,
+		dark = false,
+		light = false,
+		rounded,
+		position = 'bottom',
+		closeOnClick = false,
+		openOnHover = false,
+		color,
+		background,
+		class: className = '',
+		style: styleAttr = '',
+		's-class': sClass,
+		's-style': sStyle,
+		...rest
+	}: DropdownProps = $props();
+
+	let safePosition = $derived(
+		position === 'top' || position === 'bottom' || position === 'left' || position === 'right'
+			? position
+			: 'bottom'
+	);
+
+	let { classProps, styleProps, restProps } = $derived(
+		makeComponentProps(rest as Record<string, unknown>)
+	);
+
+	let componentClass = $derived(
+		useClassName({
+			baseClass: 'kit-dropdown-content',
+			className: `${className ?? ''}`.trim(),
+			sClass,
+			classProps
+		})
+	);
+
+	let componentStyle = $derived(
+		useStyles({
+			styleAttr,
+			sStyle,
+			styleProps
+		})
+	);
+
+	let mergedStyle = $derived(
+		[
+			componentStyle,
+			background ? `--kit-dropdown-background:${background}` : '',
+			color ? `--kit-dropdown-color:${color}` : '',
+			typeof rounded === 'string' && rounded.includes('px')
+				? `--kit-dropdown-radius:${rounded}`
+				: ''
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
+
+	const positioner = getPositions();
+
+	let contentRef = $state<HTMLElement | null>(null);
+	let activatorRef = $state<HTMLElement | PointerEvent | null>(null);
+	let open = $state(false);
+	let axis = $state(positioner.values);
+	let innerHeight = $state(0);
+	let innerWidth = $state(0);
+	let scrollX = $state(0);
+	let scrollY = $state(0);
+	let timeoutId = $state<ReturnType<typeof setTimeout> | null>(null);
+
+	const clearHoverTimeout = () => {
+		if (timeoutId) {
+			clearTimeout(timeoutId);
+			timeoutId = null;
+		}
+	};
+
+	const updatePosition = () => {
+		if (!contentRef || !activatorRef) return;
+		positioner.update(activatorRef, contentRef, safePosition, false, true);
+		axis = positioner.values;
+	};
+
+	const handleToggle = (element: HTMLElement | PointerEvent | null) => {
+		if (element === null) return;
+		activatorRef = element;
+		open = !open;
+	};
+
+	const handleClose = () => {
+		clearHoverTimeout();
+		open = false;
+	};
+
+	const handleContentClick = () => {
+		if (closeOnClick && open) open = false;
+	};
+
+	const handleMouseEvent = (
+		state: 'open' | 'close',
+		element: HTMLElement | PointerEvent | null
+	) => {
+		if (!openOnHover) return;
+
+		if (state === 'open') {
+			clearHoverTimeout();
+			if (element) activatorRef = element;
+			open = true;
+			return;
+		}
+
+		timeoutId = setTimeout(() => {
+			open = false;
+			timeoutId = null;
+		}, 150);
+	};
+
+	let model: ModelDropdownProps = {
+		get open() {
+			return open;
+		},
+		close: () => handleClose(),
+		toggle: (element) => handleToggle(element)
+	};
+
+	$effect(() => {
+		if (open && contentRef && activatorRef) {
+			updatePosition();
+		}
+	});
+
+	$effect(() => {
+		if (
+			open &&
+			contentRef &&
+			activatorRef &&
+			(scrollX > 0 || scrollY > 0 || innerHeight > 0 || innerWidth > 0)
+		) {
+			updatePosition();
+		}
+	});
+
+	$effect(() => {
+		if (scrollX || scrollY) open = false;
+	});
+
+	$effect(() => {
+		ref = contentRef;
+	});
+
+	onDestroy(() => {
+		clearHoverTimeout();
+	});
+</script>
+
+<svelte:window bind:innerHeight bind:innerWidth bind:scrollX bind:scrollY />
+
+{@render activator?.(model, (state, element) => handleMouseEvent(state, element))}
+
+{#if open}
+	<div
+		bind:this={contentRef}
+		class={componentClass}
+		style={`left:${axis.x}px; top:${axis.y}px; ${mergedStyle}`}
+		role="menu"
+		data-light={light || undefined}
+		data-dark={dark || undefined}
+		data-rounded={rounded}
+		data-position={axis.location ?? safePosition}
+		onmouseover={() => handleMouseEvent('open', activatorRef)}
+		onmouseleave={() => handleMouseEvent('close', activatorRef)}
+		onclick={(event) => {
+			event.stopPropagation();
+			handleContentClick();
+		}}
+		use:clickOutside={{ exclude: [contentRef, activatorRef], onClose: handleClose }}
+		{...restProps}
+	>
+		{@render children?.()}
+	</div>
+{/if}
+
+<style>
+	.kit-dropdown-content {
+		--kit-dropdown-background: var(--kit-surface-1);
+		--kit-dropdown-color: var(--kit-fg);
+		--kit-dropdown-radius: 12px;
+		--kit-dropdown-border: color-mix(in oklab, var(--kit-fg), transparent 88%);
+		--kit-dropdown-shadow: 0 18px 40px -18px color-mix(in oklab, black 24%, transparent);
+
+		position: fixed;
+		z-index: 1800;
+		min-width: 12rem;
+		max-width: min(22rem, calc(100vw - 1rem));
+		padding: 0.375rem;
+		border: 1px solid var(--kit-dropdown-border);
+		border-radius: var(--kit-dropdown-radius);
+		background: var(--kit-dropdown-background);
+		color: var(--kit-dropdown-color);
+		box-shadow: var(--kit-dropdown-shadow);
+		transform-origin: top left;
+		animation: kit-dropdown-enter 140ms ease;
+	}
+
+	.kit-dropdown-content[data-light='true'] {
+		--kit-dropdown-background: color-mix(in oklab, white 94%, var(--kit-surface-1));
+		--kit-dropdown-color: var(--kit-fg);
+	}
+
+	.kit-dropdown-content[data-dark='true'] {
+		--kit-dropdown-background: color-mix(in oklab, black 78%, var(--kit-surface-3));
+		--kit-dropdown-color: white;
+		--kit-dropdown-border: color-mix(in oklab, white, transparent 80%);
+	}
+
+	.kit-dropdown-content[data-rounded='0'] {
+		--kit-dropdown-radius: 0;
+	}
+	.kit-dropdown-content[data-rounded='xs'] {
+		--kit-dropdown-radius: 2px;
+	}
+	.kit-dropdown-content[data-rounded='sm'] {
+		--kit-dropdown-radius: 4px;
+	}
+	.kit-dropdown-content[data-rounded='md'] {
+		--kit-dropdown-radius: 8px;
+	}
+	.kit-dropdown-content[data-rounded='lg'] {
+		--kit-dropdown-radius: 16px;
+	}
+	.kit-dropdown-content[data-rounded='xl'] {
+		--kit-dropdown-radius: 99999px;
+	}
+
+	@keyframes kit-dropdown-enter {
+		from {
+			opacity: 0;
+			scale: 0.98;
+		}
+	}
+</style>

package/dist/labs/components/dropdown/dropdown.svelte.d.ts

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

package/dist/labs/components/dropdown/dropdown.svelte.js

@@ -0,0 +1,148 @@
+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/labs/components/dropdown/dropdown.types.d.ts

@@ -0,0 +1,28 @@
+import type { Component, PropValue, RoundedType } from '../../utils/types/index.js';
+import type { Snippet } from 'svelte';
+export type PositionElement = {
+    x: number;
+    y: number;
+    location: 'top' | 'bottom' | 'left' | 'right' | null;
+};
+export type ModelDropdownProps = {
+    open: boolean;
+    close: () => void;
+    toggle: (element: HTMLElement | PointerEvent | null) => void;
+};
+export interface DropdownProps extends Component {
+    ref?: HTMLElement | null;
+    dark?: boolean;
+    light?: boolean;
+    rounded?: RoundedType | string;
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    openOnHover?: boolean;
+    closeOnClick?: boolean;
+    color?: string;
+    background?: string;
+    activator?: Snippet<[
+        ModelDropdownProps,
+        (state: 'open' | 'close', element: HTMLElement | PointerEvent | null) => void
+    ]>;
+    [key: string]: PropValue | Record<string, PropValue> | unknown;
+}

package/dist/labs/components/dropdown/dropdown.types.js

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

package/dist/labs/components/index.d.ts

@@ -6,6 +6,9 @@ export { default as KitIcon } from './icon/icon.svelte';
 export { default as KitCard } from './card/card.svelte';
 export { default as KitChip } from './chip/chip.svelte';
 export { default as KitAvatar } from './avatar/avatar.svelte';
+export { default as KitDropdown } from './dropdown/dropdown.svelte';
+export { default as KitPopover } from './popover/popover.svelte';
+export { default as KitTooltip } from './tooltip/tooltip.svelte';
 export { default as KitTextfield } from './textfield/textfield.svelte';
 export { default as KitToolbar } from './toolbar/toolbar.svelte';
 export { default as KitList } from './list/list.svelte';

package/dist/labs/components/index.js

@@ -7,6 +7,9 @@ export { default as KitIcon } from './icon/icon.svelte';
 export { default as KitCard } from './card/card.svelte';
 export { default as KitChip } from './chip/chip.svelte';
 export { default as KitAvatar } from './avatar/avatar.svelte';
+export { default as KitDropdown } from './dropdown/dropdown.svelte';
+export { default as KitPopover } from './popover/popover.svelte';
+export { default as KitTooltip } from './tooltip/tooltip.svelte';
 export { default as KitTextfield } from './textfield/textfield.svelte';
 export { default as KitToolbar } from './toolbar/toolbar.svelte';
 export { default as KitList } from './list/list.svelte';

package/dist/labs/components/popover/popover.svelte

@@ -0,0 +1,188 @@
+<script lang="ts">
+	import { useClassName, useStyles, clickOutside } from '../../utils/index.js';
+	import { makeComponentProps } from '../../compiler/mapped-code.js';
+	import { getPositions } from './popover.svelte.js';
+	import type { ModelPopoverProps, PopoverProps } from './popover.types.js';
+
+	let {
+		ref = $bindable(),
+		open = $bindable(false),
+		children,
+		activator,
+		dark = false,
+		light = false,
+		rounded,
+		position = 'bottom',
+		color,
+		background,
+		class: className = '',
+		style: styleAttr = '',
+		's-class': sClass,
+		's-style': sStyle,
+		...rest
+	}: PopoverProps = $props();
+
+	let safePosition = $derived(
+		position === 'top' || position === 'bottom' || position === 'left' || position === 'right'
+			? position
+			: 'bottom'
+	);
+
+	let { classProps, styleProps, restProps } = $derived(
+		makeComponentProps(rest as Record<string, unknown>)
+	);
+
+	let componentClass = $derived(
+		useClassName({
+			baseClass: 'kit-popover-content',
+			className: `${className ?? ''}`.trim(),
+			sClass,
+			classProps
+		})
+	);
+
+	let componentStyle = $derived(
+		useStyles({
+			styleAttr,
+			sStyle,
+			styleProps
+		})
+	);
+
+	let mergedStyle = $derived(
+		[
+			componentStyle,
+			background ? `--kit-popover-background:${background}` : '',
+			color ? `--kit-popover-color:${color}` : '',
+			typeof rounded === 'string' && rounded.includes('px') ? `--kit-popover-radius:${rounded}` : ''
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
+
+	const positioner = getPositions();
+
+	let contentRef = $state<HTMLElement | null>(null);
+	let activatorRef = $state<HTMLElement | null>(null);
+	let axis = $state(positioner.values);
+	let innerHeight = $state(0);
+	let innerWidth = $state(0);
+	let scrollX = $state(0);
+	let scrollY = $state(0);
+
+	const handleToggle = (element: HTMLElement | null) => {
+		if (element === null) return;
+		activatorRef = element;
+		open = !open;
+	};
+
+	let model: ModelPopoverProps = {
+		toggle: (element) => handleToggle(element)
+	};
+
+	const updatePosition = () => {
+		if (!contentRef || !activatorRef) return;
+		positioner.update(activatorRef, contentRef, safePosition, false, true);
+		axis = positioner.values;
+	};
+
+	$effect(() => {
+		if (open && contentRef && activatorRef) {
+			updatePosition();
+		}
+	});
+
+	$effect(() => {
+		if (
+			open &&
+			contentRef &&
+			activatorRef &&
+			(scrollX > 0 || scrollY > 0 || innerHeight > 0 || innerWidth > 0)
+		) {
+			updatePosition();
+		}
+	});
+
+	$effect(() => {
+		if (scrollX || scrollY) open = false;
+	});
+
+	$effect(() => {
+		ref = contentRef;
+	});
+</script>
+
+<svelte:window bind:innerHeight bind:innerWidth bind:scrollX bind:scrollY />
+
+{@render activator?.(model)}
+
+{#if open}
+	<div
+		bind:this={contentRef}
+		class={componentClass}
+		style={`left:${axis.x}px; top:${axis.y}px; ${mergedStyle}`}
+		role="dialog"
+		data-light={light || undefined}
+		data-dark={dark || undefined}
+		data-rounded={rounded}
+		data-position={axis.location ?? safePosition}
+		use:clickOutside={{ exclude: [contentRef, activatorRef], onClose: () => (open = false) }}
+		{...restProps}
+	>
+		{@render children?.()}
+	</div>
+{/if}
+
+<style>
+	.kit-popover-content {
+		--kit-popover-background: var(--kit-surface-1);
+		--kit-popover-color: var(--kit-fg);
+		--kit-popover-radius: 12px;
+		--kit-popover-border: color-mix(in oklab, var(--kit-fg), transparent 88%);
+		--kit-popover-shadow: 0 18px 40px -18px color-mix(in oklab, black 24%, transparent);
+
+		position: fixed;
+		z-index: 1900;
+		display: inline-block;
+		width: auto;
+		max-width: min(28rem, calc(100vw - 1rem));
+		padding: 1rem;
+		border: 1px solid var(--kit-popover-border);
+		border-radius: var(--kit-popover-radius);
+		background: var(--kit-popover-background);
+		color: var(--kit-popover-color);
+		box-shadow: var(--kit-popover-shadow);
+		opacity: 1;
+		transition: opacity 140ms ease;
+	}
+
+	.kit-popover-content[data-light='true'] {
+		--kit-popover-background: color-mix(in oklab, white 94%, var(--kit-surface-1));
+		--kit-popover-color: var(--kit-fg);
+	}
+
+	.kit-popover-content[data-dark='true'] {
+		--kit-popover-background: color-mix(in oklab, black 78%, var(--kit-surface-3));
+		--kit-popover-color: white;
+		--kit-popover-border: color-mix(in oklab, white, transparent 80%);
+	}
+
+	.kit-popover-content[data-rounded='0'] {
+		--kit-popover-radius: 0;
+	}
+	.kit-popover-content[data-rounded='xs'] {
+		--kit-popover-radius: 2px;
+	}
+	.kit-popover-content[data-rounded='sm'] {
+		--kit-popover-radius: 4px;
+	}
+	.kit-popover-content[data-rounded='md'] {
+		--kit-popover-radius: 8px;
+	}
+	.kit-popover-content[data-rounded='lg'] {
+		--kit-popover-radius: 16px;
+	}
+	.kit-popover-content[data-rounded='xl'] {
+		--kit-popover-radius: 99999px;
+	}
+</style>

package/dist/labs/components/popover/popover.svelte.d.ts

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