lapikit 0.4.13 → 0.4.14

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

@@ -1,262 +0,0 @@
-<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/tooltip/tooltip.svelte

@@ -1,372 +0,0 @@
-<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/utils/index.d.ts

@@ -1,2 +0,0 @@
-export * from './components.js';
-export * from './outside.js';

package/dist/labs/utils/index.js

@@ -1,2 +0,0 @@
-export * from './components.js';
-export * from './outside.js';