lapikit 0.4.13 → 0.4.15

package/dist/labs/components/aspect-ratio/aspect-ratio.svelte

@@ -1,130 +0,0 @@
-<script lang="ts">
-	import { useClassName, useStyles } from '../../utils/index.js';
-	import { makeComponentProps } from '../../compiler/mapped-code.js';
-	import type { AspectRatioFit, AspectRatioProps, AspectRatioValue } from './aspect-ratio.types.js';
-
-	const FALLBACK_RATIO = 16 / 9;
-	const FALLBACK_FIT: AspectRatioFit = 'cover';
-
-	function resolveRatio(value: AspectRatioValue | undefined): number {
-		if (typeof value === 'number') {
-			return Number.isFinite(value) && value > 0 ? value : FALLBACK_RATIO;
-		}
-
-		if (typeof value !== 'string') {
-			return FALLBACK_RATIO;
-		}
-
-		const normalized = value.trim();
-		if (!normalized) {
-			return FALLBACK_RATIO;
-		}
-
-		if (normalized.includes('/') || normalized.includes(':')) {
-			const separator = normalized.includes('/') ? '/' : ':';
-			const [w, h] = normalized.split(separator).map((part) => Number(part.trim()));
-
-			if (Number.isFinite(w) && Number.isFinite(h) && w > 0 && h > 0) {
-				return w / h;
-			}
-		}
-
-		const asNumber = Number(normalized);
-		return Number.isFinite(asNumber) && asNumber > 0 ? asNumber : FALLBACK_RATIO;
-	}
-
-	function resolveFit(value: AspectRatioFit | undefined): AspectRatioFit {
-		return value === 'cover' || value === 'contain' || value === 'fill' ? value : FALLBACK_FIT;
-	}
-
-	let {
-		ref = $bindable(),
-		is = 'div',
-		children = undefined,
-		class: className = '',
-		style: styleAttr = '',
-		's-class': sClass,
-		's-style': sStyle,
-		ratio = undefined,
-		aspectRatio = undefined,
-		fit = 'cover',
-		inline = false,
-		...rest
-	}: AspectRatioProps = $props();
-
-	let { classProps, styleProps, restProps } = $derived(
-		makeComponentProps(rest as Record<string, unknown>)
-	);
-
-	let componentClass = $derived(
-		useClassName({
-			baseClass: 'kit-aspect-ratio',
-			className: `${className ?? ''}`.trim(),
-			sClass,
-			classProps
-		})
-	);
-
-	let componentStyle = $derived(
-		useStyles({
-			styleAttr,
-			sStyle,
-			styleProps
-		})
-	);
-
-	let resolvedRatio = $derived(resolveRatio(ratio ?? aspectRatio));
-	let resolvedFit = $derived(resolveFit(fit));
-	let mergedStyle = $derived(
-		[componentStyle, `--kit-aspect-ratio: ${resolvedRatio}`, `--kit-aspect-fit: ${resolvedFit}`]
-			.filter(Boolean)
-			.join('; ')
-	);
-</script>
-
-<svelte:element
-	this={is}
-	bind:this={ref}
-	class={componentClass}
-	style={mergedStyle}
-	data-inline={inline}
-	{...restProps}
->
-	<div class="kit-aspect-ratio__inner">
-		{@render children?.()}
-	</div>
-</svelte:element>
-
-<style>
-	.kit-aspect-ratio {
-		display: block;
-		position: relative;
-		width: 100%;
-		max-width: 100%;
-		overflow: hidden;
-		aspect-ratio: var(--kit-aspect-ratio, 1.7777777778);
-	}
-
-	.kit-aspect-ratio[data-inline='true'] {
-		display: inline-block;
-		width: auto;
-	}
-
-	.kit-aspect-ratio__inner {
-		position: absolute;
-		inset: 0;
-		width: 100%;
-		height: 100%;
-	}
-
-	.kit-aspect-ratio :global(img),
-	.kit-aspect-ratio :global(video),
-	.kit-aspect-ratio :global(iframe),
-	.kit-aspect-ratio :global(canvas),
-	.kit-aspect-ratio :global(svg) {
-		display: block;
-		width: 100%;
-		height: 100%;
-		object-fit: var(--kit-aspect-fit, cover);
-	}
-</style>

package/dist/labs/components/avatar/avatar.svelte

@@ -1,145 +0,0 @@
-<script lang="ts">
-	import { useClassName, useStyles } from '../../utils/index.js';
-	import { makeComponentProps } from '../../compiler/mapped-code.js';
-	import type { AvatarProps } from './avatar.types.js';
-
-	let {
-		ref = $bindable(),
-		children = undefined,
-		class: className = '',
-		style: styleAttr = '',
-		's-class': sClass,
-		's-style': sStyle,
-		label = undefined,
-		size = 'md',
-		density = 'default',
-		...rest
-	}: AvatarProps = $props();
-
-	let { classProps, styleProps, restProps } = $derived(
-		makeComponentProps(rest as Record<string, unknown>)
-	);
-
-	let componentClass = $derived(
-		useClassName({
-			baseClass: 'kit-avatar',
-			className: `${className ?? ''}`.trim(),
-			sClass,
-			classProps
-		})
-	);
-
-	let componentStyle = $derived(
-		useStyles({
-			styleAttr,
-			sStyle,
-			styleProps
-		})
-	);
-
-	let safeSize = $derived(
-		size === 'default'
-			? 'md'
-			: size === 'xs' || size === 'sm' || size === 'md' || size === 'lg' || size === 'xl'
-				? size
-				: 'md'
-	);
-
-	let safeDensity = $derived(
-		density === 'compact' || density === 'comfortable' || density === 'default'
-			? density
-			: 'default'
-	);
-
-	let contentType = $derived(label && label.trim().length > 0 ? 'label' : children);
-	let displayLabel = $derived(label?.trim() ?? '');
-</script>
-
-<svelte:element
-	this={'div'}
-	bind:this={ref}
-	class={componentClass}
-	style={componentStyle}
-	{...restProps}
-	data-type={contentType}
-	data-size={contentType === 'label' ? safeSize : undefined}
-	data-density={contentType === 'label' ? safeDensity : undefined}
->
-	{#if contentType === 'label'}
-		<span class="kit-avatar__label">{displayLabel}</span>
-	{:else}
-		{@render children?.()}
-	{/if}
-</svelte:element>
-
-<style>
-	.kit-avatar {
-		--kit-avatar-size: 2.25rem;
-		--kit-avatar-font-size: 0.875rem;
-		--kit-avatar-density-scale: 1;
-
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		width: calc(var(--kit-avatar-size) * var(--kit-avatar-density-scale));
-		height: calc(var(--kit-avatar-size) * var(--kit-avatar-density-scale));
-		border-radius: 9999px;
-		overflow: hidden;
-		background: var(--kit-surface-2);
-		color: var(--kit-fg);
-		font-weight: 600;
-		line-height: 1;
-		user-select: none;
-	}
-
-	.kit-avatar[data-type='label'] {
-		font-size: var(--kit-avatar-font-size);
-		text-transform: uppercase;
-	}
-
-	.kit-avatar[data-size='xs'] {
-		--kit-avatar-size: 1.75rem;
-		--kit-avatar-font-size: 0.75rem;
-	}
-	.kit-avatar[data-size='sm'] {
-		--kit-avatar-size: 2rem;
-		--kit-avatar-font-size: 0.8125rem;
-	}
-	.kit-avatar[data-size='md'] {
-		--kit-avatar-size: 2.25rem;
-		--kit-avatar-font-size: 0.875rem;
-	}
-	.kit-avatar[data-size='lg'] {
-		--kit-avatar-size: 2.5rem;
-		--kit-avatar-font-size: 1rem;
-	}
-	.kit-avatar[data-size='xl'] {
-		--kit-avatar-size: 2.75rem;
-		--kit-avatar-font-size: 1.125rem;
-	}
-
-	.kit-avatar[data-density='compact'] {
-		--kit-avatar-density-scale: 0.9;
-	}
-	.kit-avatar[data-density='default'] {
-		--kit-avatar-density-scale: 1;
-	}
-	.kit-avatar[data-density='comfortable'] {
-		--kit-avatar-density-scale: 1.1;
-	}
-
-	.kit-avatar__label {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		max-width: 100%;
-		padding-inline: 0.25rem;
-	}
-
-	.kit-avatar :global(img) {
-		display: block;
-		width: 100%;
-		height: 100%;
-		object-fit: cover;
-	}
-</style>

package/dist/labs/components/card/card.svelte

@@ -1,287 +0,0 @@
-<script lang="ts">
-	import { useClassName, useStyles } from '../../utils/index.js';
-	import { makeComponentProps } from '../../compiler/mapped-code.js';
-	import { ripple } from '../../animations/index.js';
-	import type { CardProps } from './card.types.js';
-
-	let {
-		ref = $bindable(),
-		is = 'div',
-		children,
-		class: className = '',
-		style: styleAttr = '',
-		's-class': sClass,
-		's-style': sStyle,
-		href,
-		type,
-		variant = 'filled',
-		density = 'default',
-		rounded = 'md',
-		interactive = false,
-		active = false,
-		disabled = false,
-		noRipple,
-		...rest
-	}: CardProps = $props();
-
-	let safeVariant = $derived(
-		variant === 'filled' || variant === 'outline' || variant === 'text' ? variant : 'filled'
-	);
-
-	let safeDensity = $derived(
-		density === 'compact' || density === 'default' || density === 'comfortable'
-			? density
-			: 'default'
-	);
-
-	let safeIs = $derived(
-		is === 'div' ||
-			is === 'article' ||
-			is === 'section' ||
-			is === 'aside' ||
-			is === 'a' ||
-			is === 'button'
-			? is
-			: 'article'
-	);
-	let tag = $derived((href && 'a') || safeIs || 'article');
-	let hasEventHandler = $derived(
-		typeof rest.onclick === 'function' ||
-			typeof rest.onpointerdown === 'function' ||
-			typeof rest.onkeydown === 'function'
-	);
-	let isInteractive = $derived(interactive || tag === 'a' || tag === 'button' || hasEventHandler);
-	let isDisabled = $derived(!!disabled);
-	let resolvedHref = $derived(tag === 'a' && !isDisabled ? href : undefined);
-	let resolvedType = $derived(tag === 'button' ? (type ?? 'button') : undefined);
-	let resolvedDisabled = $derived(tag === 'button' ? isDisabled : undefined);
-	let resolvedTabIndex = $derived(tag === 'a' && isDisabled ? -1 : undefined);
-
-	let { classProps, styleProps, restProps } = $derived(
-		makeComponentProps(rest as Record<string, unknown>)
-	);
-
-	let componentClass = $derived(
-		useClassName({
-			baseClass: 'kit-card',
-			className: `${className ?? ''} kit-card--${safeVariant}`.trim(),
-			sClass,
-			classProps
-		})
-	);
-
-	let componentStyle = $derived(
-		useStyles({
-			styleAttr,
-			sStyle,
-			styleProps
-		})
-	);
-</script>
-
-<svelte:element
-	this={tag}
-	bind:this={ref}
-	class={componentClass}
-	style={componentStyle}
-	href={resolvedHref}
-	type={resolvedType}
-	disabled={resolvedDisabled}
-	tabindex={resolvedTabIndex}
-	data-density={safeDensity}
-	data-rounded={rounded}
-	data-interactive={isInteractive}
-	data-active={active}
-	data-disabled={isDisabled}
-	aria-disabled={isDisabled || undefined}
-	use:ripple={{
-		component: 'card',
-		disabled: noRipple || disabled || !isInteractive
-	}}
-	{...restProps}
->
-	{#if safeVariant === 'outline'}
-		<span class="outline"></span>
-	{/if}
-
-	{@render children?.()}
-</svelte:element>
-
-<style>
-	.kit-card {
-		--kit-card-bg: var(--kit-surface-2);
-		--kit-card-fg: var(--kit-fg);
-		--kit-card-outline-color: var(--kit-border);
-		--kit-card-radius: var(--kit-radius-2);
-		--kit-card-padding-compact: var(--kit-space-1);
-		--kit-card-padding-default: var(--kit-space-2);
-		--kit-card-padding-comfortable: var(--kit-space-3);
-
-		--card-shape: var(--kit-card-radius);
-		--card-bg: var(--kit-card-bg);
-		--card-fg: var(--kit-card-fg);
-		--card-hover-bg: color-mix(in oklab, var(--card-bg), var(--card-fg) 6%);
-		--card-active-bg: color-mix(in oklab, var(--card-bg), var(--card-fg) 10%);
-		--card-hover-fg: var(--card-fg);
-		--card-active-fg: var(--card-fg);
-
-		display: flex;
-		flex-direction: column;
-		gap: var(--kit-space-2);
-		background: var(--card-bg);
-		color: var(--card-fg);
-		border: 0;
-		border-radius: var(--kit-card-radius);
-		box-sizing: border-box;
-		position: relative;
-		transition:
-			background 140ms ease,
-			color 140ms ease,
-			box-shadow 140ms ease,
-			translate 140ms ease;
-	}
-
-	a.kit-card {
-		text-decoration: none;
-	}
-
-	button.kit-card {
-		appearance: none;
-		border: 0;
-		background: none;
-		font: inherit;
-		text-align: inherit;
-	}
-
-	.kit-card[data-rounded='0'] {
-		--kit-card-radius: 0;
-	}
-	.kit-card[data-rounded='xs'] {
-		--kit-card-radius: 4px;
-	}
-	.kit-card[data-rounded='sm'] {
-		--kit-card-radius: 6px;
-	}
-	.kit-card[data-rounded='md'] {
-		--kit-card-radius: 10px;
-	}
-	.kit-card[data-rounded='lg'] {
-		--kit-card-radius: 14px;
-	}
-	.kit-card[data-rounded='xl'] {
-		--kit-card-radius: 18px;
-	}
-
-	.kit-card[data-density='compact'] {
-		padding: var(--kit-card-padding-compact);
-	}
-	.kit-card[data-density='default'] {
-		padding: var(--kit-card-padding-default);
-	}
-	.kit-card[data-density='comfortable'] {
-		padding: var(--kit-card-padding-comfortable);
-	}
-
-	.kit-card--outline {
-		--outline-color: var(--kit-accent);
-		--card-bg: transparent;
-		--card-fg: var(--kit-accent);
-		--card-hover-bg: color-mix(in oklab, var(--kit-accent), transparent 80%);
-		--card-active-bg: color-mix(in oklab, var(--kit-accent), transparent 92%);
-		--kit-card-outline-color: var(--outline-color);
-	}
-
-	.kit-card--filled {
-		--card-bg: var(--kit-accent);
-		--card-fg: white;
-		--card-hover-bg: color-mix(in oklab, var(--kit-accent), black 10%);
-		--card-active-bg: color-mix(in oklab, var(--kit-accent), black 16%);
-	}
-
-	.kit-card--text {
-		background: transparent;
-		--card-bg: transparent;
-		--card-fg: var(--kit-accent);
-		--card-hover-bg: color-mix(in oklab, var(--kit-accent), transparent 80%);
-		--card-active-bg: color-mix(in oklab, var(--kit-accent), transparent 92%);
-	}
-
-	.kit-card[data-interactive='true'][data-disabled='false'] {
-		cursor: pointer;
-	}
-
-	.kit-card[data-interactive='true'][data-disabled='false']:hover {
-		translate: 0 -1px;
-		background: var(--card-hover-bg);
-		color: var(--card-hover-fg);
-		box-shadow: 0 10px 28px hsl(220 35% 8% / 0.12);
-	}
-
-	.kit-card--text[data-interactive='true'][data-disabled='false']:hover {
-		background: var(--card-hover-bg);
-		color: var(--card-hover-fg);
-	}
-
-	.kit-card[data-interactive='true'][data-active='true'][data-disabled='false'],
-	.kit-card[data-interactive='true'][data-disabled='false']:active {
-		translate: 0 0;
-		background: var(--card-active-bg);
-		color: var(--card-active-fg);
-		box-shadow: 0 4px 14px hsl(220 35% 8% / 0.1);
-	}
-
-	.kit-card--text[data-interactive='true'][data-active='true'][data-disabled='false'],
-	.kit-card--text[data-interactive='true'][data-disabled='false']:active {
-		background: var(--card-active-bg);
-		color: var(--card-active-fg);
-	}
-
-	.kit-card[data-interactive='true'][data-disabled='false']:focus-visible {
-		outline: 2px solid var(--kit-focus);
-		outline-offset: 2px;
-	}
-
-	.kit-card[data-disabled='true'] {
-		opacity: var(--kit-disabled-opacity, 0.55);
-		pointer-events: none;
-	}
-
-	.kit-card .outline {
-		--outline-color: var(--kit-card-outline-color);
-		--btn-radius: var(--kit-card-radius);
-		pointer-events: none;
-	}
-
-	.kit-card__media {
-		overflow: hidden;
-		border-radius: calc(var(--kit-card-radius) - 2px);
-	}
-
-	.kit-card__header {
-		font-weight: 600;
-		line-height: 1.3;
-	}
-
-	.kit-card__body {
-		display: block;
-		line-height: 1.45;
-	}
-
-	.kit-card__footer {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		gap: var(--kit-space-2);
-		flex-wrap: wrap;
-	}
-
-	.kit-card__footer-content {
-		color: var(--kit-muted);
-	}
-
-	.kit-card__actions {
-		display: inline-flex;
-		align-items: center;
-		gap: var(--kit-space-1);
-	}
-</style>