lapikit 0.4.12 → 0.4.14

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>

package/dist/labs/components/separator/separator.svelte

@@ -1,133 +0,0 @@
-<script lang="ts">
-	import { useClassName, useStyles } from '../../utils/index.js';
-	import { makeComponentProps } from '../../compiler/mapped-code.js';
-	import type { SeparatorProps } from './separator.types.js';
-
-	let {
-		ref = $bindable(),
-		is = 'hr',
-		light = false,
-		dark = false,
-		inset = false,
-		thickness,
-		orientation = 'horizontal',
-		opacity,
-		color,
-		class: className = '',
-		style: styleAttr = '',
-		's-class': sClass,
-		's-style': sStyle,
-		...rest
-	}: SeparatorProps = $props();
-
-	let safeOrientation = $derived(
-		typeof orientation === 'string' && (orientation === 'horizontal' || orientation === 'vertical')
-			? orientation
-			: 'horizontal'
-	);
-
-	let { classProps, styleProps, restProps } = $derived(
-		makeComponentProps(rest as Record<string, unknown>)
-	);
-
-	let componentClass = $derived(
-		useClassName({
-			baseClass: 'kit-separator',
-			className: `${className ?? ''}`.trim(),
-			sClass,
-			classProps
-		})
-	);
-
-	let componentStyle = $derived(
-		useStyles({
-			styleAttr,
-			sStyle,
-			styleProps
-		})
-	);
-
-	let mergedStyle = $derived(
-		[
-			componentStyle,
-			color ? `--kit-separator-color:${color}` : '',
-			opacity !== undefined ? `--kit-separator-opacity:${opacity}` : '',
-			thickness !== undefined && safeOrientation === 'horizontal'
-				? `--kit-separator-top-width:${typeof thickness === 'number' ? `${thickness}px` : thickness}`
-				: '',
-			thickness !== undefined && safeOrientation === 'vertical'
-				? `--kit-separator-right-width:${typeof thickness === 'number' ? `${thickness}px` : thickness}`
-				: ''
-		]
-			.filter(Boolean)
-			.join('; ')
-	);
-</script>
-
-<svelte:element
-	this={is}
-	bind:this={ref}
-	{...restProps}
-	class={componentClass}
-	style={mergedStyle}
-	role="separator"
-	aria-orientation={safeOrientation}
-	data-light={light || undefined}
-	data-dark={dark || undefined}
-	data-inset={inset || undefined}
-	data-orientation={safeOrientation}
-/>
-
-<style>
-	.kit-separator {
-		--kit-separator-color: var(--kit-fg);
-		--kit-separator-opacity: 0.12;
-		--kit-separator-top-width: thin;
-		--kit-separator-right-width: thin;
-		--kit-separator-vertical-min-size: 1.5rem;
-
-		display: block;
-		flex: 1 1 100%;
-		height: 0;
-		max-height: 0;
-		opacity: var(--kit-separator-opacity);
-		border-color: var(--kit-separator-color);
-		border-style: solid;
-		transition: inherit;
-	}
-
-	.kit-separator[data-light='true'] {
-		--kit-separator-color: color-mix(in oklab, var(--kit-fg), white 40%);
-	}
-
-	.kit-separator[data-dark='true'] {
-		--kit-separator-color: color-mix(in oklab, white, transparent 18%);
-	}
-
-	.kit-separator[data-inset]:not([data-orientation='vertical']) {
-		max-width: calc(100% - 4.5rem);
-		margin-inline-start: 4.5rem;
-	}
-
-	.kit-separator[data-inset][data-orientation='vertical'] {
-		margin-block: 0.5rem;
-		max-height: calc(100% - 1rem);
-	}
-
-	.kit-separator:not([data-orientation='vertical']) {
-		width: 100%;
-		border-width: var(--kit-separator-top-width) 0 0 0;
-	}
-
-	.kit-separator[data-orientation='vertical'] {
-		align-self: stretch;
-		display: inline-flex;
-		width: 0;
-		height: auto;
-		min-height: var(--kit-separator-vertical-min-size);
-		max-width: 0;
-		max-height: none;
-		vertical-align: text-bottom;
-		border-width: 0 var(--kit-separator-right-width) 0 0;
-	}
-</style>

package/dist/labs/components/spacer/spacer.svelte

@@ -1,44 +0,0 @@
-<script lang="ts">
-	import { makeComponentProps } from '../../compiler/mapped-code.js';
-	import { useClassName, useStyles } from '../../utils/index.js';
-	import type { SpacerProps } from './spacer.types.js';
-
-	let {
-		is = 'div',
-		class: className = '',
-		style: styleAttr = '',
-		's-class': sClass,
-		's-style': sStyle,
-		...rest
-	}: SpacerProps = $props();
-
-	let { classProps, styleProps, restProps } = $derived(
-		makeComponentProps(rest as Record<string, unknown>)
-	);
-
-	let componentClass = $derived(
-		useClassName({
-			baseClass: 'kit-spacer',
-			className: `${className ?? ''}`.trim(),
-			sClass,
-			classProps
-		})
-	);
-
-	let componentStyle = $derived(
-		useStyles({
-			styleAttr,
-			sStyle,
-			styleProps
-		})
-	);
-</script>
-
-<svelte:element this={is} class={componentClass} style={componentStyle} {...restProps}>
-</svelte:element>
-
-<style>
-	.kit-spacer {
-		flex-grow: 1;
-	}
-</style>