lapikit 0.4.13 → 0.4.14

package/dist/labs/components/dialog/dialog.svelte

@@ -1,262 +0,0 @@
-<script lang="ts">
-	import { disabledScroll } from '../../../internal/helpers/scroll.js';
-	import { makeComponentProps } from '../../compiler/mapped-code.js';
-	import { useClassName, useStyles } from '../../utils/index.js';
-	import type { DialogDensity, DialogPosition, DialogProps, DialogSize } from './dialog.types.js';
-
-	function resolveSize(value: DialogSize | undefined): DialogSize {
-		return value === 'xs' || value === 'sm' || value === 'md' || value === 'lg' || value === 'xl'
-			? value
-			: 'md';
-	}
-
-	function resolvePosition(value: DialogPosition | undefined): DialogPosition {
-		return value === 'top' || value === 'center' || value === 'bottom' ? value : 'center';
-	}
-
-	function resolveDensity(value: DialogDensity | undefined): DialogDensity {
-		return value === 'compact' || value === 'comfortable' || value === 'default'
-			? value
-			: 'default';
-	}
-
-	let {
-		ref = $bindable(),
-		children = undefined,
-		class: className = '',
-		style: styleAttr = '',
-		's-class': sClass,
-		's-style': sStyle,
-		open = $bindable(false),
-		persistent = false,
-		size = 'md',
-		position = 'center',
-		density = 'default',
-		rounded = 'md',
-		classContent = '',
-		color = undefined,
-		background = undefined,
-		...rest
-	}: DialogProps = $props();
-
-	let { classProps, styleProps, restProps } = $derived(
-		makeComponentProps(rest as Record<string, unknown>)
-	);
-
-	let componentClass = $derived(
-		useClassName({
-			baseClass: 'kit-dialog',
-			className: `${className ?? ''}`.trim(),
-			sClass,
-			classProps
-		})
-	);
-
-	let componentStyle = $derived(
-		useStyles({
-			styleAttr,
-			sStyle,
-			styleProps
-		})
-	);
-
-	let contentClass = $derived(
-		Array.isArray(classContent)
-			? classContent.filter(Boolean).join(' ')
-			: `${classContent ?? ''}`.trim()
-	);
-
-	let safeSize = $derived(resolveSize(size));
-	let safePosition = $derived(resolvePosition(position));
-	let safeDensity = $derived(resolveDensity(density));
-	let mergedStyle = $derived(
-		[
-			componentStyle,
-			color ? `--kit-dialog-fg:${color}` : '',
-			background ? `--kit-dialog-bg:${background}` : ''
-		]
-			.filter(Boolean)
-			.join('; ')
-	);
-
-	$effect(() => {
-		if (!ref) return;
-
-		if (open && !ref.open) {
-			ref.showModal();
-		}
-
-		if (!open && ref.open) {
-			ref.close();
-		}
-
-		disabledScroll(open);
-
-		return () => {
-			disabledScroll(false);
-		};
-	});
-
-	function handleClose() {
-		if (!persistent) {
-			open = false;
-			return;
-		}
-
-		if (ref && !ref.open && open) {
-			ref.showModal();
-		}
-	}
-
-	function handleCancel(event: Event) {
-		if (persistent) {
-			event.preventDefault();
-			return;
-		}
-
-		open = false;
-	}
-
-	function handleBackdropClick(event: MouseEvent) {
-		if (event.target !== ref || persistent) return;
-		open = false;
-	}
-</script>
-
-<dialog
-	bind:this={ref}
-	class={componentClass}
-	style={mergedStyle}
-	data-size={safeSize}
-	data-position={safePosition}
-	data-persistent={persistent}
-	onclose={handleClose}
-	oncancel={handleCancel}
-	onclick={handleBackdropClick}
->
-	<div
-		{...restProps}
-		class={['kit-dialog__content', contentClass]}
-		data-density={safeDensity}
-		data-rounded={rounded}
-		onclick={(event: MouseEvent) => event.stopPropagation()}
-	>
-		{@render children?.()}
-	</div>
-</dialog>
-
-<style>
-	.kit-dialog {
-		--kit-dialog-bg: var(--kit-surface-1);
-		--kit-dialog-fg: var(--kit-fg);
-		--kit-dialog-bd: var(--kit-border);
-		--kit-dialog-radius: 12px;
-		--kit-dialog-px: 1rem;
-		--kit-dialog-py: 1rem;
-		--kit-dialog-max: min(32rem, calc(100vw - 2rem));
-
-		border: 0;
-		padding: 0;
-		margin: auto;
-		width: 100%;
-		max-width: none;
-		background: transparent;
-		color: inherit;
-		overflow: visible;
-	}
-
-	.kit-dialog::backdrop {
-		background: rgb(15 23 42 / 0.42);
-		backdrop-filter: blur(2px);
-	}
-
-	.kit-dialog[data-position='top'] {
-		margin-top: 1rem;
-		margin-bottom: auto;
-	}
-
-	.kit-dialog[data-position='center'] {
-		margin-top: auto;
-		margin-bottom: auto;
-	}
-
-	.kit-dialog[data-position='bottom'] {
-		margin-top: auto;
-		margin-bottom: 1rem;
-	}
-
-	.kit-dialog[data-size='xs'] {
-		--kit-dialog-max: min(20rem, calc(100vw - 2rem));
-	}
-
-	.kit-dialog[data-size='sm'] {
-		--kit-dialog-max: min(24rem, calc(100vw - 2rem));
-	}
-
-	.kit-dialog[data-size='md'] {
-		--kit-dialog-max: min(32rem, calc(100vw - 2rem));
-	}
-
-	.kit-dialog[data-size='lg'] {
-		--kit-dialog-max: min(42rem, calc(100vw - 2rem));
-	}
-
-	.kit-dialog[data-size='xl'] {
-		--kit-dialog-max: min(56rem, calc(100vw - 2rem));
-	}
-
-	.kit-dialog__content {
-		box-sizing: border-box;
-		width: min(100%, var(--kit-dialog-max));
-		max-height: calc(100dvh - 2rem);
-		overflow: auto;
-		padding: var(--kit-dialog-py) var(--kit-dialog-px);
-		border: 1px solid var(--kit-dialog-bd);
-		border-radius: var(--kit-dialog-radius);
-		background: var(--kit-dialog-bg);
-		color: var(--kit-dialog-fg);
-		margin: 0 auto;
-		box-shadow:
-			0 20px 50px rgb(15 23 42 / 0.18),
-			0 4px 16px rgb(15 23 42 / 0.1);
-	}
-
-	.kit-dialog__content[data-density='compact'] {
-		--kit-dialog-px: 0.75rem;
-		--kit-dialog-py: 0.75rem;
-	}
-
-	.kit-dialog__content[data-density='default'] {
-		--kit-dialog-px: 1rem;
-		--kit-dialog-py: 1rem;
-	}
-
-	.kit-dialog__content[data-density='comfortable'] {
-		--kit-dialog-px: 1.25rem;
-		--kit-dialog-py: 1.25rem;
-	}
-
-	.kit-dialog__content[data-rounded='0'] {
-		--kit-dialog-radius: 0;
-	}
-
-	.kit-dialog__content[data-rounded='xs'] {
-		--kit-dialog-radius: 2px;
-	}
-
-	.kit-dialog__content[data-rounded='sm'] {
-		--kit-dialog-radius: 6px;
-	}
-
-	.kit-dialog__content[data-rounded='md'] {
-		--kit-dialog-radius: 12px;
-	}
-
-	.kit-dialog__content[data-rounded='lg'] {
-		--kit-dialog-radius: 18px;
-	}
-
-	.kit-dialog__content[data-rounded='xl'] {
-		--kit-dialog-radius: 9999px;
-	}
-</style>

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

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

@@ -1,186 +0,0 @@
-<script lang="ts">
-	import { useClassName, useStyles } from '../../utils/index.js';
-	import { makeComponentProps } from '../../compiler/mapped-code.js';
-	import type { IconProps } from './icon.types.js';
-
-	let {
-		ref = $bindable(),
-		is = 'i',
-		children = undefined,
-		class: className = '',
-		style: styleAttr = '',
-		's-class': sClass,
-		's-style': sStyle,
-		name = undefined,
-		src = undefined,
-		icon = undefined,
-		size = 'default',
-		alt = '',
-		label = undefined,
-		decorative = true,
-		loading = 'eager',
-		decoding = 'async',
-		color = undefined,
-		colorMode = 'auto',
-		imgFilter = undefined,
-		...rest
-	}: IconProps = $props();
-
-	let { classProps, styleProps, restProps } = $derived(
-		makeComponentProps(rest as Record<string, unknown>)
-	);
-
-	let componentClass = $derived(
-		useClassName({
-			baseClass: 'kit-icon',
-			className: `${className ?? ''}`.trim(),
-			sClass,
-			classProps
-		})
-	);
-
-	let componentStyle = $derived(
-		useStyles({
-			styleAttr,
-			sStyle,
-			styleProps
-		})
-	);
-
-	let safeSize = $derived(
-		size === 'default' || size === undefined
-			? undefined
-			: size === 'xs' || size === 'sm' || size === 'md' || size === 'lg' || size === 'xl'
-				? size
-				: 'md'
-	);
-
-	let resolvedSrc = $derived(src ?? (icon?.includes('/') ? icon : undefined));
-	let resolvedName = $derived(name ?? (!icon?.includes('/') ? icon : undefined));
-	let hasChildren = $derived(!!children);
-	let hasContent = $derived(hasChildren || !!resolvedSrc || !!resolvedName);
-	let classWithIconName = $derived(
-		!hasChildren && !resolvedSrc && resolvedName
-			? `${componentClass} ${resolvedName}`.trim()
-			: componentClass
-	);
-
-	let safeLoading = $derived(loading === 'lazy' || loading === 'eager' ? loading : 'eager');
-	let safeDecoding = $derived(
-		decoding === 'async' || decoding === 'sync' || decoding === 'auto' ? decoding : 'async'
-	);
-	let safeColorMode = $derived(
-		colorMode === 'auto' || colorMode === 'none' || colorMode === 'mask' || colorMode === 'filter'
-			? colorMode
-			: 'auto'
-	);
-
-	let iconRole = $derived(!decorative && (label || alt) ? 'img' : undefined);
-	let iconAriaLabel = $derived(!decorative ? label || alt || undefined : undefined);
-	let iconAriaHidden = $derived(decorative ? true : undefined);
-	let imgAlt = $derived(decorative ? '' : alt || label || '');
-	let isSvgSrc = $derived(!!resolvedSrc && /\.svg($|\?)/i.test(resolvedSrc));
-	let useMaskMode = $derived(
-		!!resolvedSrc &&
-			(color ? safeColorMode === 'mask' || (safeColorMode === 'auto' && isSvgSrc) : false)
-	);
-	let useFilterMode = $derived(
-		!!resolvedSrc && !!imgFilter && (safeColorMode === 'filter' || safeColorMode === 'auto')
-	);
-	let mergedStyle = $derived(
-		[componentStyle, color ? `color:${color}` : '', color ? `--kit-icon-color:${color}` : '']
-			.filter(Boolean)
-			.join('; ')
-	);
-</script>
-
-{#if hasContent}
-	<svelte:element
-		this={is}
-		bind:this={ref}
-		class={classWithIconName}
-		style={mergedStyle}
-		data-size={safeSize}
-		role={iconRole}
-		aria-label={iconAriaLabel}
-		aria-hidden={iconAriaHidden}
-		{...restProps}
-	>
-		{#if hasChildren}
-			{@render children?.()}
-		{:else if resolvedSrc}
-			{#if useMaskMode}
-				<span
-					class="kit-icon__mask"
-					style={`--kit-icon-mask-image: url("${resolvedSrc}")`}
-					aria-hidden="true"
-				></span>
-			{:else}
-				<img
-					src={resolvedSrc}
-					alt={imgAlt}
-					loading={safeLoading}
-					decoding={safeDecoding}
-					style={useFilterMode ? `filter:${imgFilter}` : undefined}
-				/>
-			{/if}
-		{/if}
-	</svelte:element>
-{/if}
-
-<style>
-	.kit-icon {
-		--kit-icon-size-xs: 0.875rem;
-		--kit-icon-size-sm: 1rem;
-		--kit-icon-size-md: 1.125rem;
-		--kit-icon-size-lg: 1.25rem;
-		--kit-icon-size-xl: 1.375rem;
-		--kit-icon-current-size: var(--kit-icon-size-md);
-
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		text-indent: 0;
-		line-height: 1;
-		font-size: var(--kit-icon-current-size);
-		vertical-align: middle;
-	}
-
-	.kit-icon[data-size='xs'] {
-		--kit-icon-current-size: var(--kit-icon-size-xs);
-	}
-	.kit-icon[data-size='sm'] {
-		--kit-icon-current-size: var(--kit-icon-size-sm);
-	}
-	.kit-icon[data-size='md'] {
-		--kit-icon-current-size: var(--kit-icon-size-md);
-	}
-	.kit-icon[data-size='lg'] {
-		--kit-icon-current-size: var(--kit-icon-size-lg);
-	}
-	.kit-icon[data-size='xl'] {
-		--kit-icon-current-size: var(--kit-icon-size-xl);
-	}
-
-	.kit-icon :global(svg),
-	.kit-icon img,
-	.kit-icon .kit-icon__mask {
-		width: var(--kit-icon-current-size);
-		height: var(--kit-icon-current-size);
-		flex-shrink: 0;
-		display: block;
-	}
-
-	.kit-icon .kit-icon__mask {
-		display: inline-block;
-		background-color: var(--kit-icon-color, currentColor);
-		mask-image: var(--kit-icon-mask-image);
-		mask-repeat: no-repeat;
-		mask-size: contain;
-		mask-position: center;
-		-webkit-mask-image: var(--kit-icon-mask-image);
-		-webkit-mask-repeat: no-repeat;
-		-webkit-mask-size: contain;
-		-webkit-mask-position: center;
-	}
-</style>

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

@@ -1,23 +0,0 @@
-export { default as KitSheet } from './sheet/sheet.svelte';
-export { default as KitApp } from './app/app.svelte';
-export { default as KitAppbar } from './appbar/appbar.svelte';
-export { default as KitBtn } from './btn/btn.svelte';
-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';
-export { default as KitListItem } from './list/modules/list-item.svelte';
-export { default as KitDialog } from './dialog/dialog.svelte';
-export { default as KitModal } from './modal/modal.svelte';
-export { default as KitAccordion } from './accordion/accordion.svelte';
-export { default as KitAccordionItem } from './accordion/modules/accordion-item.svelte';
-export { default as KitAlert } from './alert/alert.svelte';
-export { default as KitAspectRatio } from './aspect-ratio/aspect-ratio.svelte';
-export { default as KitSpacer } from './spacer/spacer.svelte';
-export { default as KitSeparator } from './separator/separator.svelte';