lapikit 0.4.12 → 0.4.14

package/dist/components/modal/modal.svelte

@@ -1,33 +1,95 @@
 <script lang="ts">
-	import { getAssets } from '../../internal/core/actions/assets.svelte.js';
-	import { modalOpen, modalStack, popModal, pushModal, setOpenModal } from '../../stores/index.js';
 	import { onDestroy } from 'svelte';
-	import type { ModalProps } from './types.js';
 	import { get } from 'svelte/store';
+	import { makeComponentProps } from '../../compiler/mapped-code';
+	import { useClassName, useStyles } from '../../utils';
+	import { modalOpen, modalStack, popModal, pushModal, setOpenModal } from '../../@legacy/stores';
+	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 {
-		children,
 		ref = $bindable(),
-		open = $bindable(),
-		contain,
+		children = undefined,
+		class: className = '',
+		style: styleAttr = '',
+		's-class': sClass,
+		's-style': sStyle,
+		open = $bindable(false),
+		contain = false,
 		size = 'md',
-		persistent,
-		dark,
-		light,
-		classContent,
-		color,
-		background,
+		persistent = false,
 		position = 'center',
-		rounded,
+		rounded = 'md',
 		density = 'default',
-		closeWithEsc,
+		classContent = '',
+		color = undefined,
+		background = undefined,
+		closeWithEsc = true,
 		...rest
 	}: ModalProps = $props();
 
-	const assets = getAssets();
+	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) {
@@ -39,21 +101,20 @@
 		}
 	});
 
-	onDestroy(() => {
-		if (wasPushed) popModal(modalId);
-	});
-
 	$effect(() => {
-		if (open !== undefined && !contain)
-			setOpenModal(open ? (persistent ? 'persistent' : open) : open);
+		if (open !== undefined && !contain) {
+			setOpenModal(open ? (persistent ? 'persistent' : true) : false);
+		}
 	});
 
 	$effect(() => {
-		if ($modalOpen === false && !contain) open = false;
+		if ($modalOpen === false && !contain) {
+			open = false;
+		}
 	});
 
 	$effect(() => {
-		if (!closeWithEsc || persistent || !open) return;
+		if (!open || !closeWithEsc || persistent) return;
 
 		const onKeyDown = (event: KeyboardEvent) => {
 			const stack = get(modalStack);
@@ -71,42 +132,186 @@
 		};
 	});
 
-	const handleClose = () => {
+	onDestroy(() => {
+		if (wasPushed) popModal(modalId);
+	});
+
+	function handleClose() {
 		if (!persistent) open = false;
-	};
+	}
 </script>
 
 {#if open}
 	<div
 		bind:this={ref}
-		{...rest}
-		class={['kit-modal', contain && 'kit-modal--contain', rest.class]}
+		class={componentClass}
+		style={mergedStyle}
 		role="dialog"
+		aria-modal={!contain}
+		data-contain={contain}
 	>
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		{#if contain}
 			<!-- svelte-ignore a11y_click_events_have_key_events -->
-			<div
-				class={['kit-overlay', persistent && 'kit-overlay--persistent']}
-				onclick={() => handleClose()}
-			></div>
+			<div class="kit-modal__overlay" onclick={handleClose}></div>
 		{/if}
 
 		<div
-			class={[
-				'kit-modal-container',
-				classContent,
-				light && 'light',
-				dark && 'dark',
-				size && assets.className('modal-container', 'size', size),
-				density && assets.className('modal-container', 'density', density),
-				position && assets.className('modal-container', 'position', position)
-			]}
-			style:--modal-background={assets.color(background)}
-			style:--modal-color={assets.color(color)}
-			style:--modal-shape={assets.shape(rounded)}
+			{...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/components/modal/modal.svelte.d.ts

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

package/dist/{labs/components → components}/modal/modal.types.d.ts

@@ -1,4 +1,4 @@
-import type { Component, RoundedType } from '../../utils/types/index.js';
+import type { Component, RoundedType } from '../../utils/types';
 export type ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
 export type ModalPosition = 'top' | 'center' | 'bottom';
 export type ModalDensity = 'compact' | 'comfortable' | 'default';

package/dist/components/popover/popover.svelte

@@ -1,55 +1,115 @@
 <script lang="ts">
-	import { getAssets } from '../../internal/core/actions/assets.svelte.js';
-	import { clickOutside } from '../../internal/helpers/outside.js';
-	import { getPositions } from '../../internal/core/actions/popover.svelte.js';
-	import type { PopoverProps, ModelPopoverProps } from './types.js';
+	import { useClassName, useStyles, clickOutside } from '../../utils';
+	import { makeComponentProps } from '../../compiler/mapped-code';
+	import { getPositions } from './popover.svelte.js';
+	import type { ModelPopoverProps, PopoverProps } from './popover.types.js';
 
 	let {
-		open = $bindable(),
+		ref = $bindable(),
+		open = $bindable(false),
 		children,
 		activator,
-		dark,
-		light,
+		dark = false,
+		light = false,
 		rounded,
-		position,
+		position = 'bottom',
 		color,
 		background,
+		class: className = '',
+		style: styleAttr = '',
+		's-class': sClass,
+		's-style': sStyle,
 		...rest
 	}: PopoverProps = $props();
 
-	const positionAxis = getPositions();
-	const assets = getAssets();
+	let safePosition = $derived(
+		position === 'top' || position === 'bottom' || position === 'left' || position === 'right'
+			? position
+			: 'bottom'
+	);
 
-	let ref: HTMLElement | null = $state(null);
-	let refActivator: HTMLElement | null = $state(null);
-	let axis = $state({ x: 0, y: 0 });
+	let { classProps, styleProps, restProps } = $derived(
+		makeComponentProps(rest as Record<string, unknown>)
+	);
+
+	let componentClass = $derived(
+		useClassName({
+			baseClass: 'kit-popover-content',
+			className: `${className ?? ''}`.trim(),
+			sClass,
+			classProps
+		})
+	);
+
+	let componentStyle = $derived(
+		useStyles({
+			styleAttr,
+			sStyle,
+			styleProps
+		})
+	);
+
+	let mergedStyle = $derived(
+		[
+			componentStyle,
+			background ? `--kit-popover-background:${background}` : '',
+			color ? `--kit-popover-color:${color}` : '',
+			typeof rounded === 'string' && rounded.includes('px') ? `--kit-popover-radius:${rounded}` : ''
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
+
+	const positioner = getPositions();
+
+	let contentRef = $state<HTMLElement | null>(null);
+	let activatorRef = $state<HTMLElement | null>(null);
+	let axis = $state(positioner.values);
 	let innerHeight = $state(0);
 	let innerWidth = $state(0);
 	let scrollX = $state(0);
 	let scrollY = $state(0);
 
-	axis = positionAxis?.values;
+	const handleToggle = (element: HTMLElement | null) => {
+		if (element === null) return;
+		activatorRef = element;
+		open = !open;
+	};
 
 	let model: ModelPopoverProps = {
 		toggle: (element) => handleToggle(element)
 	};
 
-	const handleToggle = (element: HTMLElement | null) => {
-		if (element === null) return;
-		refActivator = element;
-		open = !open;
+	const updatePosition = () => {
+		if (!contentRef || !activatorRef) return;
+		positioner.update(activatorRef, contentRef, safePosition, false, true);
+		axis = positioner.values;
 	};
 
+	$effect(() => {
+		if (open && contentRef && activatorRef) {
+			updatePosition();
+		}
+	});
+
 	$effect(() => {
 		if (
 			open &&
-			ref &&
-			refActivator &&
+			contentRef &&
+			activatorRef &&
 			(scrollX > 0 || scrollY > 0 || innerHeight > 0 || innerWidth > 0)
 		) {
-			positionAxis.update(refActivator, ref, position);
+			updatePosition();
 		}
 	});
+
+	$effect(() => {
+		if (scrollX || scrollY) open = false;
+	});
+
+	$effect(() => {
+		ref = contentRef;
+	});
 </script>
 
 <svelte:window bind:innerHeight bind:innerWidth bind:scrollX bind:scrollY />
@@ -58,16 +118,71 @@
 
 {#if open}
 	<div
-		bind:this={ref}
-		{...rest}
-		role="menu"
-		class={['kit-popover-content', light && 'light', dark && 'dark', rest.class]}
-		style={`transform: translate(${axis.x}px, ${axis.y}px);`}
-		style:--popover-background={assets.color(background)}
-		style:--popover-color={assets.color(color)}
-		style:--popover-shape={assets.shape(rounded)}
-		use:clickOutside={{ exclude: [ref, refActivator], onClose: () => (open = false) }}
+		bind:this={contentRef}
+		class={componentClass}
+		style={`left:${axis.x}px; top:${axis.y}px; ${mergedStyle}`}
+		role="dialog"
+		data-light={light || undefined}
+		data-dark={dark || undefined}
+		data-rounded={rounded}
+		data-position={axis.location ?? safePosition}
+		use:clickOutside={{ exclude: [contentRef, activatorRef], onClose: () => (open = false) }}
+		{...restProps}
 	>
 		{@render children?.()}
 	</div>
 {/if}
+
+<style>
+	.kit-popover-content {
+		--kit-popover-background: var(--kit-surface-1);
+		--kit-popover-color: var(--kit-fg);
+		--kit-popover-radius: 12px;
+		--kit-popover-border: color-mix(in oklab, var(--kit-fg), transparent 88%);
+		--kit-popover-shadow: 0 18px 40px -18px color-mix(in oklab, black 24%, transparent);
+
+		position: fixed;
+		z-index: 1900;
+		display: inline-block;
+		width: auto;
+		max-width: min(28rem, calc(100vw - 1rem));
+		padding: 1rem;
+		border: 1px solid var(--kit-popover-border);
+		border-radius: var(--kit-popover-radius);
+		background: var(--kit-popover-background);
+		color: var(--kit-popover-color);
+		box-shadow: var(--kit-popover-shadow);
+		opacity: 1;
+		transition: opacity 140ms ease;
+	}
+
+	.kit-popover-content[data-light='true'] {
+		--kit-popover-background: color-mix(in oklab, white 94%, var(--kit-surface-1));
+		--kit-popover-color: var(--kit-fg);
+	}
+
+	.kit-popover-content[data-dark='true'] {
+		--kit-popover-background: color-mix(in oklab, black 78%, var(--kit-surface-3));
+		--kit-popover-color: white;
+		--kit-popover-border: color-mix(in oklab, white, transparent 80%);
+	}
+
+	.kit-popover-content[data-rounded='0'] {
+		--kit-popover-radius: 0;
+	}
+	.kit-popover-content[data-rounded='xs'] {
+		--kit-popover-radius: 2px;
+	}
+	.kit-popover-content[data-rounded='sm'] {
+		--kit-popover-radius: 4px;
+	}
+	.kit-popover-content[data-rounded='md'] {
+		--kit-popover-radius: 8px;
+	}
+	.kit-popover-content[data-rounded='lg'] {
+		--kit-popover-radius: 16px;
+	}
+	.kit-popover-content[data-rounded='xl'] {
+		--kit-popover-radius: 99999px;
+	}
+</style>

package/dist/components/popover/popover.svelte.d.ts

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