lapikit 0.4.11 → 0.4.13

package/dist/labs/components/toolbar/toolbar.svelte

@@ -0,0 +1,262 @@
+<script lang="ts">
+	import { useClassName, useStyles } from '../../utils/index.js';
+	import { makeComponentProps } from '../../compiler/mapped-code.js';
+	import type { ToolbarProps } from './toolbar.types.js';
+
+	let {
+		ref = $bindable(),
+		is = 'div',
+		children,
+		class: className = '',
+		style: styleAttr = '',
+		's-class': sClass,
+		's-style': sStyle,
+		classContent,
+		light = false,
+		dark = false,
+		variant = 'text',
+		rounded,
+		background,
+		color,
+		density = 'default',
+		orientation = 'horizontal',
+		location,
+		...rest
+	}: ToolbarProps = $props();
+
+	let safeVariant = $derived(
+		typeof variant === 'string' &&
+			(variant === 'outline' || variant === 'text' || variant === 'dash')
+			? variant
+			: 'text'
+	);
+
+	let safeDensity = $derived(
+		typeof density === 'string' &&
+			(density === 'compact' || density === 'comfortable' || density === 'default')
+			? density
+			: 'default'
+	);
+
+	let safeOrientation = $derived(
+		typeof orientation === 'string' && (orientation === 'horizontal' || orientation === 'vertical')
+			? orientation
+			: 'horizontal'
+	);
+
+	let safeLocation = $derived(
+		typeof location === 'string' && (location === 'top' || location === 'bottom')
+			? location
+			: undefined
+	);
+
+	let { classProps, styleProps, restProps } = $derived(
+		makeComponentProps(rest as Record<string, unknown>)
+	);
+
+	let componentClass = $derived(
+		useClassName({
+			baseClass: 'kit-toolbar',
+			className: `${className ?? ''}`.trim(),
+			sClass,
+			classProps
+		})
+	);
+
+	let normalizedClassContent = $derived(
+		Array.isArray(classContent) ? classContent.filter(Boolean).join(' ') : classContent
+	);
+
+	let wrapperClass = $derived(
+		useClassName({
+			baseClass: 'kit-toolbar__wrapper',
+			className: normalizedClassContent
+		})
+	);
+
+	let componentStyle = $derived(
+		useStyles({
+			styleAttr,
+			sStyle,
+			styleProps
+		})
+	);
+
+	let mergedStyle = $derived(
+		[
+			componentStyle,
+			background ? `--kit-toolbar-background:${background}` : '',
+			color ? `--kit-toolbar-color:${color}` : '',
+			typeof rounded === 'string' && rounded.includes('px') ? `--kit-toolbar-radius:${rounded}` : ''
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
+</script>
+
+<svelte:element
+	this={is}
+	bind:this={ref}
+	class={componentClass}
+	style={mergedStyle}
+	{...restProps}
+	role="toolbar"
+	data-variant={safeVariant}
+	data-density={safeDensity}
+	data-orientation={safeOrientation}
+	data-location={safeLocation}
+	data-light={light || undefined}
+	data-dark={dark || undefined}
+	data-rounded={rounded}
+>
+	{#if safeVariant === 'outline'}
+		<span class="outline"></span>
+	{/if}
+
+	<div class={wrapperClass}>
+		{@render children?.()}
+	</div>
+</svelte:element>
+
+<style>
+	.kit-toolbar {
+		--kit-toolbar-background: var(--kit-surface-2);
+		--kit-toolbar-color: var(--kit-fg);
+		--kit-toolbar-border: color-mix(in oklab, var(--kit-toolbar-color), transparent 82%);
+		--kit-toolbar-radius: 1rem;
+		--kit-toolbar-gap: 0.5rem;
+		--kit-toolbar-padding-x: 0.75rem;
+		--kit-toolbar-padding-y: 0.5rem;
+		--kit-toolbar-size: auto;
+
+		position: relative;
+		display: inline-flex;
+		max-width: 100%;
+		box-sizing: border-box;
+		border-radius: var(--kit-toolbar-radius);
+		background: var(--kit-toolbar-background);
+		color: var(--kit-toolbar-color);
+		border: 1px solid var(--kit-toolbar-background);
+	}
+
+	.kit-toolbar[data-density='compact'] {
+		--kit-toolbar-gap: 0.375rem;
+		--kit-toolbar-padding-x: 0.625rem;
+		--kit-toolbar-padding-y: 0.375rem;
+		--kit-toolbar-size: 2.625rem;
+	}
+
+	.kit-toolbar[data-density='default'] {
+		--kit-toolbar-size: 3rem;
+	}
+
+	.kit-toolbar[data-density='comfortable'] {
+		--kit-toolbar-gap: 0.625rem;
+		--kit-toolbar-padding-x: 0.875rem;
+		--kit-toolbar-padding-y: 0.625rem;
+		--kit-toolbar-size: 3.5rem;
+	}
+
+	.kit-toolbar[data-variant='dash'] {
+		border: 1px dashed var(--kit-toolbar-border);
+	}
+
+	.kit-toolbar[data-variant='text'],
+	.kit-toolbar[data-variant='outline'],
+	.kit-toolbar[data-variant='dash'] {
+		--kit-toolbar-background: transparent;
+		--kit-toolbar-color: var(--kit-accent);
+	}
+
+	.kit-toolbar[data-light='true'] {
+		--kit-toolbar-background: color-mix(in oklab, white 88%, var(--kit-surface-1));
+		--kit-toolbar-color: var(--kit-fg);
+	}
+
+	.kit-toolbar[data-dark='true'] {
+		--kit-toolbar-background: color-mix(in oklab, black 72%, var(--kit-surface-3));
+		--kit-toolbar-color: white;
+		--kit-toolbar-border: color-mix(in oklab, white, transparent 72%);
+	}
+
+	.kit-toolbar .outline {
+		position: absolute;
+		inset: 0;
+		border: 1px solid var(--kit-toolbar-border);
+		border-radius: inherit;
+		pointer-events: none;
+	}
+
+	.kit-toolbar__wrapper {
+		position: relative;
+		z-index: 1;
+		display: inline-flex;
+		align-items: center;
+		justify-content: flex-start;
+		gap: var(--kit-toolbar-gap);
+		width: 100%;
+		padding: var(--kit-toolbar-padding-y) var(--kit-toolbar-padding-x);
+		border-radius: inherit;
+	}
+
+	.kit-toolbar[data-orientation='horizontal'] {
+		width: 100%;
+		min-height: var(--kit-toolbar-size);
+	}
+
+	.kit-toolbar[data-orientation='vertical'] .kit-toolbar__wrapper {
+		flex-direction: column;
+		align-items: stretch;
+	}
+
+	.kit-toolbar[data-orientation='vertical'] {
+		width: fit-content;
+		min-height: fit-content;
+	}
+
+	.kit-toolbar[data-orientation='horizontal'] .kit-toolbar__wrapper {
+		flex-direction: row;
+	}
+
+	.kit-toolbar[data-rounded='0'] {
+		--kit-toolbar-radius: 0;
+	}
+
+	.kit-toolbar[data-rounded='xs'] {
+		--kit-toolbar-radius: 2px;
+	}
+
+	.kit-toolbar[data-rounded='sm'] {
+		--kit-toolbar-radius: 4px;
+	}
+
+	.kit-toolbar[data-rounded='md'] {
+		--kit-toolbar-radius: 8px;
+	}
+
+	.kit-toolbar[data-rounded='lg'] {
+		--kit-toolbar-radius: 16px;
+	}
+
+	.kit-toolbar[data-rounded='xl'] {
+		--kit-toolbar-radius: 99999px;
+	}
+
+	.kit-toolbar[data-location='top'] {
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 1004;
+		width: 100%;
+		border-radius: 0;
+	}
+
+	.kit-toolbar[data-location='bottom'] {
+		position: fixed;
+		left: 0;
+		bottom: 0;
+		z-index: 1004;
+		width: 100%;
+		border-radius: 0;
+	}
+</style>

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

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

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

@@ -0,0 +1,21 @@
+import type { Component, PropValue, RoundedType } from '../../utils/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 {
+    ref?: HTMLElement | null;
+    is?: 'div' | 'header' | 'nav';
+    variant?: Variant | Record<string, Variant>;
+    rounded?: RoundedType | string;
+    density?: Density | Record<string, Density>;
+    dark?: boolean;
+    light?: boolean;
+    color?: string;
+    orientation?: Orientation | Record<string, Orientation>;
+    background?: string;
+    location?: Location | Record<string, Location>;
+    classContent?: string | string[] | undefined;
+    [key: string]: PropValue | Record<string, PropValue> | unknown;
+}
+export {};

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

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

package/dist/labs/components/tooltip/tooltip.svelte

@@ -0,0 +1,372 @@
+<script lang="ts">
+	import { onDestroy } from 'svelte';
+	import { useClassName, useStyles } from '../../utils/index.js';
+	import { makeComponentProps } from '../../compiler/mapped-code.js';
+	import { getPositionsTooltip } from './tooltip.svelte.js';
+	import type { TooltipProps } from './tooltip.types.js';
+
+	let {
+		ref = $bindable(),
+		children,
+		tooltip,
+		open = $bindable(false),
+		forceMount = false,
+		label,
+		dark = false,
+		light = false,
+		rounded,
+		color,
+		background,
+		location = 'bottom',
+		delayDuration = 850,
+		density = 'default',
+		variant,
+		disabled = false,
+		avoidCollisions = true,
+		class: className = '',
+		style: styleAttr = '',
+		's-class': sClass,
+		's-style': sStyle,
+		...rest
+	}: TooltipProps = $props();
+
+	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 { 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);
+	};
+
+	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 &&
+			triggerRef &&
+			tooltipRef &&
+			(scrollX > 0 || scrollY > 0 || innerHeight > 0 || innerWidth > 0)
+		) {
+			updatePosition();
+		}
+	});
+
+	$effect(() => {
+		ref = triggerRef;
+	});
+
+	onDestroy(() => {
+		clearTimer();
+	});
+</script>
+
+<svelte:window bind:innerHeight bind:innerWidth bind:scrollX bind:scrollY />
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<span
+	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={tooltipRef}
+		class="kit-tooltip"
+		id={tooltipId}
+		role="tooltip"
+		aria-label={label}
+		style={`transform: translate(${axis.x}px, ${axis.y}px); display:${open ? 'block' : 'none'}`}
+	>
+		<div
+			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?.()}
+			{:else}
+				{label}
+			{/if}
+		</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/labs/components/tooltip/tooltip.svelte.d.ts

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