lapikit 0.4.13 → 0.4.15

package/dist/labs/components/index.js

@@ -1,24 +0,0 @@
-// components
-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';

package/dist/labs/components/list/list.svelte

@@ -1,190 +0,0 @@
-<script lang="ts">
-	import { makeComponentProps } from '../../compiler/mapped-code.js';
-	import { useClassName, useStyles } from '../../utils/index.js';
-	import type { ListDensity, ListProps, ListVariant } from './list.types.js';
-
-	function resolveVariant(value: ListVariant | undefined): ListVariant {
-		return value === 'filled' || value === 'outline' || value === 'text' ? value : 'filled';
-	}
-
-	function resolveDensity(value: ListDensity | undefined): ListDensity {
-		return value === 'compact' || value === 'comfortable' || value === 'default'
-			? value
-			: 'default';
-	}
-
-	let {
-		ref = $bindable(),
-		is = 'div',
-		children = undefined,
-		class: className = '',
-		style: styleAttr = '',
-		's-class': sClass,
-		's-style': sStyle,
-		size = 'md',
-		variant = 'filled',
-		density = 'default',
-		rounded = 'md',
-		nav = false,
-		color = undefined,
-		background = undefined,
-		...rest
-	}: ListProps = $props();
-
-	let { classProps, styleProps, restProps } = $derived(
-		makeComponentProps(rest as Record<string, unknown>)
-	);
-
-	let componentClass = $derived(
-		useClassName({
-			baseClass: 'kit-list',
-			className: `${className ?? ''}`.trim(),
-			sClass,
-			classProps
-		})
-	);
-
-	let componentStyle = $derived(
-		useStyles({
-			styleAttr,
-			sStyle,
-			styleProps
-		})
-	);
-
-	let safeVariant = $derived(resolveVariant(variant));
-	let safeDensity = $derived(resolveDensity(density));
-	let safeSize = $derived(
-		size === 'default'
-			? 'md'
-			: size === 'xs' || size === 'sm' || size === 'md' || size === 'lg' || size === 'xl'
-				? size
-				: 'md'
-	);
-	let mergedStyle = $derived(
-		[
-			componentStyle,
-			color ? `--kit-list-fg:${color}` : '',
-			background ? `--kit-list-bg:${background}` : ''
-		]
-			.filter(Boolean)
-			.join('; ')
-	);
-</script>
-
-<svelte:element
-	this={is}
-	bind:this={ref}
-	class={componentClass}
-	style={mergedStyle}
-	data-size={safeSize}
-	data-variant={safeVariant}
-	data-density={safeDensity}
-	data-rounded={rounded}
-	data-nav={nav}
-	role={nav ? 'navigation' : is === 'ul' ? undefined : 'list'}
-	{...restProps}
->
-	{@render children?.()}
-</svelte:element>
-
-<style>
-	.kit-list {
-		--kit-list-bg: var(--kit-surface-1);
-		--kit-list-fg: var(--kit-fg);
-		--kit-list-bd: var(--kit-border);
-		--kit-list-radius: 10px;
-		--kit-list-item-h: 2.75rem;
-		--kit-list-item-px: 0.875rem;
-		--kit-list-item-gap: 0.625rem;
-		--kit-list-item-font: 0.9375rem;
-
-		display: flex;
-		flex-direction: column;
-		width: 100%;
-		padding: 0.25rem;
-		gap: 0.125rem;
-		color: var(--kit-list-fg);
-		background: transparent;
-		border-radius: var(--kit-list-radius);
-	}
-
-	.kit-list[data-nav='true'] {
-		padding: 0.5rem;
-	}
-
-	.kit-list[data-size='xs'] {
-		--kit-list-item-h: 2.125rem;
-		--kit-list-item-px: 0.625rem;
-		--kit-list-item-gap: 0.5rem;
-		--kit-list-item-font: 0.75rem;
-	}
-
-	.kit-list[data-size='sm'] {
-		--kit-list-item-h: 2.375rem;
-		--kit-list-item-px: 0.75rem;
-		--kit-list-item-gap: 0.5rem;
-		--kit-list-item-font: 0.875rem;
-	}
-
-	.kit-list[data-size='md'] {
-		--kit-list-item-h: 2.75rem;
-		--kit-list-item-px: 0.875rem;
-		--kit-list-item-gap: 0.625rem;
-		--kit-list-item-font: 0.9375rem;
-	}
-
-	.kit-list[data-size='lg'] {
-		--kit-list-item-h: 3.125rem;
-		--kit-list-item-px: 1rem;
-		--kit-list-item-gap: 0.75rem;
-		--kit-list-item-font: 1rem;
-	}
-
-	.kit-list[data-size='xl'] {
-		--kit-list-item-h: 3.5rem;
-		--kit-list-item-px: 1.125rem;
-		--kit-list-item-gap: 0.875rem;
-		--kit-list-item-font: 1.0625rem;
-	}
-
-	.kit-list[data-density='compact'] {
-		--kit-list-item-h: calc(var(--kit-list-item-h) - 0.25rem);
-	}
-
-	.kit-list[data-density='comfortable'] {
-		--kit-list-item-h: calc(var(--kit-list-item-h) + 0.25rem);
-	}
-
-	.kit-list[data-rounded='0'] {
-		--kit-list-radius: 0;
-	}
-
-	.kit-list[data-rounded='xs'] {
-		--kit-list-radius: 2px;
-	}
-
-	.kit-list[data-rounded='sm'] {
-		--kit-list-radius: 6px;
-	}
-
-	.kit-list[data-rounded='md'] {
-		--kit-list-radius: 10px;
-	}
-
-	.kit-list[data-rounded='lg'] {
-		--kit-list-radius: 16px;
-	}
-
-	.kit-list[data-rounded='xl'] {
-		--kit-list-radius: 9999px;
-	}
-
-	.kit-list[data-variant='filled'] {
-		background: color-mix(in oklab, var(--kit-list-bg), transparent 12%);
-	}
-
-	.kit-list[data-variant='outline'] {
-		border: 1px solid var(--kit-list-bd);
-	}
-</style>

package/dist/labs/components/list/modules/list-item.svelte

@@ -1,195 +0,0 @@
-<script lang="ts">
-	import { ripple } from '../../../animations/index.js';
-	import { makeComponentProps } from '../../../compiler/mapped-code.js';
-	import { useClassName, useStyles } from '../../../utils/index.js';
-	import type { ListItemProps } from '../list.types.js';
-
-	let {
-		ref = $bindable(),
-		is = 'div',
-		children = undefined,
-		class: className = '',
-		style: styleAttr = '',
-		's-class': sClass,
-		's-style': sStyle,
-		append = undefined,
-		prepend = undefined,
-		href = undefined,
-		color = undefined,
-		background = undefined,
-		rounded = 'sm',
-		active = false,
-		disabled = false,
-		noRipple = false,
-		...rest
-	}: ListItemProps = $props();
-
-	let { classProps, styleProps, restProps } = $derived(
-		makeComponentProps(rest as Record<string, unknown>)
-	);
-
-	let tag = $derived(href ? 'a' : is === 'div' && restProps.onclick ? 'button' : is);
-	let isInteractive = $derived(tag !== 'div' && tag !== 'li' && !disabled);
-
-	let componentClass = $derived(
-		useClassName({
-			baseClass: 'kit-list-item',
-			className: `${className ?? ''}`.trim(),
-			sClass,
-			classProps
-		})
-	);
-
-	let componentStyle = $derived(
-		useStyles({
-			styleAttr,
-			sStyle,
-			styleProps
-		})
-	);
-
-	let mergedStyle = $derived(
-		[
-			componentStyle,
-			color ? `--kit-list-item-fg:${color}` : '',
-			background ? `--kit-list-item-bg:${background}` : ''
-		]
-			.filter(Boolean)
-			.join('; ')
-	);
-</script>
-
-<svelte:element
-	this={tag}
-	bind:this={ref}
-	class={componentClass}
-	style={mergedStyle}
-	href={href && !disabled ? href : undefined}
-	data-active={active}
-	data-disabled={disabled}
-	data-rounded={rounded}
-	aria-disabled={disabled || undefined}
-	disabled={tag === 'button' ? disabled : undefined}
-	tabindex={href && disabled ? -1 : undefined}
-	role={tag === 'div' ? 'listitem' : undefined}
-	use:ripple={{
-		component: 'list-item',
-		disabled: noRipple || !isInteractive
-	}}
-	{...restProps}
->
-	{#if prepend}
-		<span class="kit-list-item__prepend">
-			{@render prepend?.()}
-		</span>
-	{/if}
-
-	<span class="kit-list-item__content">
-		{@render children?.()}
-	</span>
-
-	{#if append}
-		<span class="kit-list-item__append">
-			{@render append?.()}
-		</span>
-	{/if}
-</svelte:element>
-
-<style>
-	.kit-list-item {
-		--kit-list-item-bg: transparent;
-		--kit-list-item-fg: inherit;
-		--list-item-shape: 8px;
-
-		position: relative;
-		display: grid;
-		grid-template-columns: auto minmax(0, 1fr) auto;
-		align-items: center;
-		gap: var(--kit-list-item-gap, 0.625rem);
-		min-height: var(--kit-list-item-h, 2.75rem);
-		padding-inline: var(--kit-list-item-px, 0.875rem);
-		border: 0;
-		border-radius: var(--list-item-shape);
-		background: var(--kit-list-item-bg);
-		color: var(--kit-list-item-fg);
-		text-decoration: none;
-		font: inherit;
-		font-size: var(--kit-list-item-font, 0.9375rem);
-		text-align: left;
-	}
-
-	.kit-list-item[data-rounded='0'] {
-		--list-item-shape: 0;
-	}
-
-	.kit-list-item[data-rounded='xs'] {
-		--list-item-shape: 2px;
-	}
-
-	.kit-list-item[data-rounded='sm'] {
-		--list-item-shape: 8px;
-	}
-
-	.kit-list-item[data-rounded='md'] {
-		--list-item-shape: 12px;
-	}
-
-	.kit-list-item[data-rounded='lg'] {
-		--list-item-shape: 16px;
-	}
-
-	.kit-list-item[data-rounded='xl'] {
-		--list-item-shape: 9999px;
-	}
-
-	.kit-list[data-variant='filled'] .kit-list-item {
-		background: var(--kit-list-item-bg, transparent);
-	}
-
-	.kit-list[data-variant='outline'] .kit-list-item::before {
-		content: '';
-		position: absolute;
-		inset: 0;
-		border: 1px solid color-mix(in oklab, currentColor 16%, transparent);
-		border-radius: inherit;
-		pointer-events: none;
-	}
-
-	.kit-list-item[data-active='true'] {
-		background: color-mix(in oklab, currentColor 12%, transparent);
-	}
-
-	.kit-list-item[data-disabled='true'] {
-		opacity: 0.45;
-		pointer-events: none;
-	}
-
-	.kit-list-item:is(button, a) {
-		cursor: pointer;
-	}
-
-	.kit-list-item__prepend,
-	.kit-list-item__append,
-	.kit-list-item__content {
-		display: inline-flex;
-		align-items: center;
-		min-width: 0;
-	}
-
-	.kit-list-item__content {
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-
-	.kit-list-item:is(button, a):hover::after,
-	.kit-list-item:is(button, a):focus-visible::after {
-		content: '';
-		position: absolute;
-		inset: 0;
-		border-radius: inherit;
-		background: currentColor;
-		opacity: 0.06;
-		pointer-events: none;
-	}
-</style>

package/dist/labs/components/modal/modal.svelte

@@ -1,317 +0,0 @@
-<script lang="ts">
-	import { onDestroy } from 'svelte';
-	import { get } from 'svelte/store';
-	import { makeComponentProps } from '../../compiler/mapped-code.js';
-	import { useClassName, useStyles } from '../../utils/index.js';
-	import { modalOpen, modalStack, popModal, pushModal, setOpenModal } from '../../../stores/index.js';
-	import type { ModalDensity, ModalPosition, ModalProps, ModalSize } from './modal.types.js';
-
-	function resolveSize(value: ModalSize | undefined): ModalSize {
-		return value === 'xs' ||
-			value === 'sm' ||
-			value === 'md' ||
-			value === 'lg' ||
-			value === 'xl' ||
-			value === 'full'
-			? value
-			: 'md';
-	}
-
-	function resolvePosition(value: ModalPosition | undefined): ModalPosition {
-		return value === 'top' || value === 'center' || value === 'bottom' ? value : 'center';
-	}
-
-	function resolveDensity(value: ModalDensity | undefined): ModalDensity {
-		return value === 'compact' || value === 'comfortable' || value === 'default'
-			? value
-			: 'default';
-	}
-
-	const modalId = crypto.randomUUID();
-	let wasPushed = $state(false);
-
-	let {
-		ref = $bindable(),
-		children = undefined,
-		class: className = '',
-		style: styleAttr = '',
-		's-class': sClass,
-		's-style': sStyle,
-		open = $bindable(false),
-		contain = false,
-		size = 'md',
-		persistent = false,
-		position = 'center',
-		rounded = 'md',
-		density = 'default',
-		classContent = '',
-		color = undefined,
-		background = undefined,
-		closeWithEsc = true,
-		...rest
-	}: ModalProps = $props();
-
-	let { classProps, styleProps, restProps } = $derived(
-		makeComponentProps(rest as Record<string, unknown>)
-	);
-
-	let componentClass = $derived(
-		useClassName({
-			baseClass: 'kit-modal',
-			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-modal-fg:${color}` : '',
-			background ? `--kit-modal-bg:${background}` : ''
-		]
-			.filter(Boolean)
-			.join('; ')
-	);
-
-	$effect(() => {
-		if (open && !wasPushed) {
-			pushModal(modalId);
-			wasPushed = true;
-		} else if (!open && wasPushed) {
-			popModal(modalId);
-			wasPushed = false;
-		}
-	});
-
-	$effect(() => {
-		if (open !== undefined && !contain) {
-			setOpenModal(open ? (persistent ? 'persistent' : true) : false);
-		}
-	});
-
-	$effect(() => {
-		if ($modalOpen === false && !contain) {
-			open = false;
-		}
-	});
-
-	$effect(() => {
-		if (!open || !closeWithEsc || persistent) return;
-
-		const onKeyDown = (event: KeyboardEvent) => {
-			const stack = get(modalStack);
-			const isTop = stack[stack.length - 1] === modalId;
-
-			if (event.key === 'Escape' && isTop) {
-				event.preventDefault();
-				open = false;
-			}
-		};
-
-		document.addEventListener('keydown', onKeyDown);
-		return () => {
-			document.removeEventListener('keydown', onKeyDown);
-		};
-	});
-
-	onDestroy(() => {
-		if (wasPushed) popModal(modalId);
-	});
-
-	function handleClose() {
-		if (!persistent) open = false;
-	}
-</script>
-
-{#if open}
-	<div
-		bind:this={ref}
-		class={componentClass}
-		style={mergedStyle}
-		role="dialog"
-		aria-modal={!contain}
-		data-contain={contain}
-	>
-		{#if contain}
-			<!-- svelte-ignore a11y_click_events_have_key_events -->
-			<div class="kit-modal__overlay" onclick={handleClose}></div>
-		{/if}
-
-		<div
-			{...restProps}
-			class={['kit-modal__content', contentClass]}
-			data-size={safeSize}
-			data-position={safePosition}
-			data-density={safeDensity}
-			data-rounded={rounded}
-			onclick={(event: MouseEvent) => event.stopPropagation()}
-		>
-			{@render children?.()}
-		</div>
-	</div>
-{/if}
-
-<style>
-	.kit-modal {
-		--kit-modal-bg: var(--kit-surface-1);
-		--kit-modal-fg: var(--kit-fg);
-		--kit-modal-bd: var(--kit-border);
-		--kit-modal-radius: 12px;
-		--kit-modal-px: 1rem;
-		--kit-modal-py: 1rem;
-		--kit-modal-max: min(32rem, calc(100vw - 2rem));
-		--kit-modal-top: 50%;
-		--kit-modal-bottom: auto;
-		--kit-modal-translate-y: -50%;
-
-		position: fixed;
-		inset: 0;
-		z-index: 9100;
-		pointer-events: none;
-	}
-
-	.kit-modal[data-contain='true'] {
-		position: absolute;
-	}
-
-	.kit-modal__overlay {
-		position: absolute;
-		inset: 0;
-		background: rgb(15 23 42 / 0.42);
-		backdrop-filter: blur(2px);
-		pointer-events: auto;
-	}
-
-	.kit-modal__content {
-		position: fixed;
-		left: 50%;
-		top: var(--kit-modal-top);
-		bottom: var(--kit-modal-bottom);
-		translate: -50% var(--kit-modal-translate-y);
-		box-sizing: border-box;
-		width: min(calc(100vw - 2rem), var(--kit-modal-max));
-		max-height: calc(100dvh - 2rem);
-		overflow: auto;
-		padding: var(--kit-modal-py) var(--kit-modal-px);
-		border: 1px solid var(--kit-modal-bd);
-		border-radius: var(--kit-modal-radius);
-		background: var(--kit-modal-bg);
-		color: var(--kit-modal-fg);
-		box-shadow:
-			0 20px 50px rgb(15 23 42 / 0.18),
-			0 4px 16px rgb(15 23 42 / 0.1);
-		pointer-events: auto;
-	}
-
-	.kit-modal[data-contain='true'] .kit-modal__content {
-		position: absolute;
-	}
-
-	.kit-modal__content[data-size='xs'] {
-		--kit-modal-max: min(20rem, calc(100vw - 2rem));
-	}
-
-	.kit-modal__content[data-size='sm'] {
-		--kit-modal-max: min(24rem, calc(100vw - 2rem));
-	}
-
-	.kit-modal__content[data-size='md'] {
-		--kit-modal-max: min(32rem, calc(100vw - 2rem));
-	}
-
-	.kit-modal__content[data-size='lg'] {
-		--kit-modal-max: min(42rem, calc(100vw - 2rem));
-	}
-
-	.kit-modal__content[data-size='xl'] {
-		--kit-modal-max: min(56rem, calc(100vw - 2rem));
-	}
-
-	.kit-modal__content[data-size='full'] {
-		top: auto;
-		bottom: 0;
-		left: 0;
-		translate: 0 0;
-		width: 100%;
-		max-width: 100%;
-		max-height: 100dvh;
-		height: min(100dvh, 100%);
-		border-bottom-left-radius: 0;
-		border-bottom-right-radius: 0;
-	}
-
-	.kit-modal__content[data-position='top'] {
-		--kit-modal-top: 1rem;
-		--kit-modal-bottom: auto;
-		--kit-modal-translate-y: 0;
-	}
-
-	.kit-modal__content[data-position='center'] {
-		--kit-modal-top: 50%;
-		--kit-modal-bottom: auto;
-		--kit-modal-translate-y: -50%;
-	}
-
-	.kit-modal__content[data-position='bottom'] {
-		--kit-modal-top: auto;
-		--kit-modal-bottom: 1rem;
-		--kit-modal-translate-y: 0;
-	}
-
-	.kit-modal__content[data-density='compact'] {
-		--kit-modal-px: 0.75rem;
-		--kit-modal-py: 0.75rem;
-	}
-
-	.kit-modal__content[data-density='default'] {
-		--kit-modal-px: 1rem;
-		--kit-modal-py: 1rem;
-	}
-
-	.kit-modal__content[data-density='comfortable'] {
-		--kit-modal-px: 1.25rem;
-		--kit-modal-py: 1.25rem;
-	}
-
-	.kit-modal__content[data-rounded='0'] {
-		--kit-modal-radius: 0;
-	}
-
-	.kit-modal__content[data-rounded='xs'] {
-		--kit-modal-radius: 2px;
-	}
-
-	.kit-modal__content[data-rounded='sm'] {
-		--kit-modal-radius: 6px;
-	}
-
-	.kit-modal__content[data-rounded='md'] {
-		--kit-modal-radius: 12px;
-	}
-
-	.kit-modal__content[data-rounded='lg'] {
-		--kit-modal-radius: 18px;
-	}
-
-	.kit-modal__content[data-rounded='xl'] {
-		--kit-modal-radius: 9999px;
-	}
-</style>