lapikit 0.4.13 → 0.4.14

package/dist/labs/components/popover/popover.svelte

@@ -1,188 +0,0 @@
-<script lang="ts">
-	import { useClassName, useStyles, clickOutside } from '../../utils/index.js';
-	import { makeComponentProps } from '../../compiler/mapped-code.js';
-	import { getPositions } from './popover.svelte.js';
-	import type { ModelPopoverProps, PopoverProps } from './popover.types.js';
-
-	let {
-		ref = $bindable(),
-		open = $bindable(false),
-		children,
-		activator,
-		dark = false,
-		light = false,
-		rounded,
-		position = 'bottom',
-		color,
-		background,
-		class: className = '',
-		style: styleAttr = '',
-		's-class': sClass,
-		's-style': sStyle,
-		...rest
-	}: PopoverProps = $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-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);
-
-	const handleToggle = (element: HTMLElement | null) => {
-		if (element === null) return;
-		activatorRef = element;
-		open = !open;
-	};
-
-	let model: ModelPopoverProps = {
-		toggle: (element) => handleToggle(element)
-	};
-
-	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 &&
-			contentRef &&
-			activatorRef &&
-			(scrollX > 0 || scrollY > 0 || innerHeight > 0 || innerWidth > 0)
-		) {
-			updatePosition();
-		}
-	});
-
-	$effect(() => {
-		if (scrollX || scrollY) open = false;
-	});
-
-	$effect(() => {
-		ref = contentRef;
-	});
-</script>
-
-<svelte:window bind:innerHeight bind:innerWidth bind:scrollX bind:scrollY />
-
-{@render activator?.(model)}
-
-{#if open}
-	<div
-		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/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>