lapikit 0.4.13 → 0.4.14

package/dist/labs/components/app/app.svelte

@@ -1,146 +0,0 @@
-<script lang="ts">
-	let { ref = $bindable(), children, ...rest } = $props();
-</script>
-
-<div id="kit-app" bind:this={ref} {...rest} class={['kit-application', rest.class]}>
-	{@render children?.()}
-</div>
-
-<style>
-	:root {
-		color-scheme: light;
-
-		--kit-h-neutral: 220;
-		--kit-h-success: 145;
-		--kit-h-warning: 35;
-		--kit-h-danger: 5;
-		--kit-h-info: 205;
-
-		--kit-bg: hsl(0 0% 100%);
-		--kit-fg: hsl(222 20% 10%);
-		--kit-muted: hsl(220 10% 45%);
-
-		--kit-surface-1: hsl(0 0% 100%);
-		--kit-surface-2: hsl(220 20% 98%);
-		--kit-surface-3: hsl(220 18% 94%);
-
-		--kit-border: hsl(220 16% 88%);
-
-		--kit-accent: hsl(220 90% 56%);
-
-		--kit-radius-1: 8px;
-		--kit-radius-2: 12px;
-		--kit-space-1: 6px;
-		--kit-space-2: 10px;
-		--kit-space-3: 14px;
-
-		--kit-focus: hsl(35, 90%, 56%);
-
-		--kit-disabled-opacity: 0.55;
-
-		--kit-font:
-			ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-			'Segoe UI Symbol', 'Noto Color Emoji';
-	}
-
-	:root {
-		--kit-neutral-bg: color-mix(in oklab, var(--kit-neutral), var(--kit-bg) 85%);
-		--kit-neutral-bd: color-mix(in oklab, var(--kit-neutral), var(--kit-border) 70%);
-		--kit-neutral-fg: var(--kit-fg);
-
-		--kit-success-bg: color-mix(in oklab, var(--kit-success), var(--kit-bg) 85%);
-		--kit-success-bd: color-mix(in oklab, var(--kit-success), var(--kit-border) 70%);
-		--kit-success-fg: var(--kit-fg);
-
-		--kit-warning-bg: color-mix(in oklab, var(--kit-warning), var(--kit-bg) 85%);
-		--kit-warning-bd: color-mix(in oklab, var(--kit-warning), var(--kit-border) 70%);
-		--kit-warning-fg: var(--kit-fg);
-
-		--kit-danger-bg: color-mix(in oklab, var(--kit-danger), var(--kit-bg) 85%);
-		--kit-danger-bd: color-mix(in oklab, var(--kit-danger), var(--kit-border) 70%);
-		--kit-danger-fg: var(--kit-fg);
-
-		--kit-info-bg: color-mix(in oklab, var(--kit-info), var(--kit-bg) 85%);
-		--kit-info-bd: color-mix(in oklab, var(--kit-info), var(--kit-border) 70%);
-		--kit-info-fg: var(--kit-fg);
-	}
-
-	:root {
-		--kit-outline-w: 1px;
-		--btn-radius: 8px;
-
-		--kit-btn-gap: 8px;
-
-		--bg: #111827;
-		--fg: #ffffff;
-		--bg-hover: #0b1220;
-		--border: rgba(255, 255, 255, 0.08);
-		--focus: blue;
-		--font:
-			ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-			'Segoe UI Symbol', 'Noto Color Emoji';
-	}
-
-	:global(.outline) {
-		--container-shape-start-start: var(--btn-radius);
-		--container-shape-start-end: var(--btn-radius);
-		--container-shape-end-start: var(--btn-radius);
-		--container-shape-end-end: var(--btn-radius);
-
-		border-width: var(--kit-outline-w);
-		inset: 0;
-		border-style: solid;
-		position: absolute;
-		box-sizing: border-box;
-		border-color: var(--outline-color);
-		z-index: 1;
-		border-start-start-radius: var(--container-shape-start-start);
-		border-start-end-radius: var(--container-shape-start-end);
-		border-end-start-radius: var(--container-shape-end-start);
-		border-end-end-radius: var(--container-shape-end-end);
-	}
-
-	:global(.kit-ripple) {
-		background-color: currentColor;
-		opacity: 0.1;
-		position: absolute;
-		border-radius: 50%;
-		pointer-events: none;
-		-webkit-transition: 0.6s;
-		transition: 0.6s;
-		-webkit-animation: animation-l-ripple var(--system-animation-ripple-duration, 0.4s)
-			cubic-bezier(0.4, 0, 0.2, 1);
-		animation: animation-l-ripple var(--system-animation-ripple-duration, 0.4s)
-			cubic-bezier(0.4, 0, 0.2, 1);
-		border-radius: var(--system-ripple-radius);
-	}
-
-	:global(.kit-ripple--center) {
-		top: 50% !important;
-		left: 50% !important;
-		translate: -50% -50% !important;
-	}
-
-	:global(.kit-ripple--effect) {
-		position: absolute;
-		left: 0;
-		right: 0;
-		top: 0;
-		bottom: 0;
-		overflow: hidden;
-		background: none;
-		pointer-events: none;
-		z-index: 999;
-		border-radius: var(--system-ripple-radius);
-	}
-
-	@keyframes -global-animation-l-ripple {
-		from {
-			scale: 0;
-		}
-
-		to {
-			scale: 1;
-		}
-	}
-</style>

package/dist/labs/components/app/app.svelte.d.ts

@@ -1,6 +0,0 @@
-declare const App: import("svelte").Component<{
-    ref?: any;
-    children: any;
-} & Record<string, any>, {}, "ref">;
-type App = ReturnType<typeof App>;
-export default App;

package/dist/labs/components/appbar/appbar.svelte

@@ -1,196 +0,0 @@
-<script lang="ts">
-	import { useClassName, useStyles } from '../../utils/index.js';
-	import { makeComponentProps } from '../../compiler/mapped-code.js';
-	import type { AppbarProps } from './appbar.types.js';
-
-	let {
-		ref = $bindable(),
-		is = 'header',
-		children,
-		class: className = '',
-		style: styleAttr = '',
-		's-class': sClass,
-		's-style': sStyle,
-		classContent,
-		light = false,
-		dark = false,
-		variant = 'outline',
-		rounded,
-		background,
-		color,
-		density = 'default',
-		...rest
-	}: AppbarProps = $props();
-
-	let safeVariant = $derived(
-		typeof variant === 'string' && (variant === 'outline' || variant === 'text')
-			? variant
-			: 'outline'
-	);
-
-	let safeDensity = $derived(
-		typeof density === 'string' &&
-			(density === 'compact' || density === 'comfortable' || density === 'default')
-			? density
-			: 'default'
-	);
-
-	let { classProps, styleProps, restProps } = $derived(
-		makeComponentProps(rest as Record<string, unknown>)
-	);
-
-	let componentClass = $derived(
-		useClassName({
-			baseClass: 'kit-appbar',
-			className: `${className ?? ''}`.trim(),
-			sClass,
-			classProps
-		})
-	);
-
-	let normalizedClassContent = $derived(
-		Array.isArray(classContent) ? classContent.filter(Boolean).join(' ') : classContent
-	);
-
-	let wrapperClass = $derived(
-		useClassName({
-			baseClass: 'kit-appbar__wrapper',
-			className: normalizedClassContent
-		})
-	);
-
-	let componentStyle = $derived(
-		useStyles({
-			styleAttr,
-			sStyle,
-			styleProps
-		})
-	);
-
-	let mergedStyle = $derived(
-		[
-			componentStyle,
-			background ? `--kit-appbar-background:${background}` : '',
-			color ? `--kit-appbar-color:${color}` : '',
-			typeof rounded === 'string' && rounded.includes('px') ? `--kit-appbar-radius:${rounded}` : ''
-		]
-			.filter(Boolean)
-			.join('; ')
-	);
-</script>
-
-<svelte:element
-	this={is}
-	bind:this={ref}
-	class={componentClass}
-	style={mergedStyle}
-	{...restProps}
-	data-variant={safeVariant}
-	data-density={safeDensity}
-	data-light={light || undefined}
-	data-dark={dark || undefined}
-	data-rounded={rounded}
->
-	{#if safeVariant === 'outline'}
-		<span class="outline"></span>
-	{/if}
-
-	<div class={wrapperClass}>
-		{@render children?.()}
-	</div>
-</svelte:element>
-
-<style>
-	.kit-appbar {
-		--kit-appbar-background: var(--kit-surface-2);
-		--kit-appbar-color: var(--kit-fg);
-		--kit-appbar-radius: 1rem;
-		--kit-appbar-size: 4rem;
-		--kit-appbar-padding-x: 1rem;
-		--kit-appbar-padding-wrapper: 0;
-		--kit-appbar-border: color-mix(in oklab, var(--kit-appbar-color), transparent 88%);
-
-		display: flex;
-		align-items: center;
-		box-sizing: border-box;
-		position: relative;
-		width: 100%;
-		min-height: var(--kit-appbar-size);
-		padding-inline: var(--kit-appbar-padding-x);
-		border-radius: var(--kit-appbar-radius);
-		color: var(--kit-appbar-color);
-		background-color: var(--kit-appbar-background);
-		overflow: hidden;
-	}
-
-	.kit-appbar[data-variant='text'] {
-		--kit-appbar-border: transparent;
-	}
-
-	.kit-appbar[data-density='compact'] {
-		--kit-appbar-size: 3.5rem;
-		--kit-appbar-padding-x: 0.75rem;
-	}
-
-	.kit-appbar[data-density='default'] {
-		--kit-appbar-size: 4rem;
-		--kit-appbar-padding-x: 1rem;
-	}
-
-	.kit-appbar[data-density='comfortable'] {
-		--kit-appbar-size: 4.5rem;
-		--kit-appbar-padding-x: 1.5rem;
-	}
-
-	.kit-appbar[data-light='true'] {
-		--kit-appbar-background: color-mix(in oklab, white 88%, var(--kit-surface-1));
-		--kit-appbar-color: var(--kit-fg);
-	}
-
-	.kit-appbar[data-dark='true'] {
-		--kit-appbar-background: color-mix(in oklab, black 72%, var(--kit-surface-3));
-		--kit-appbar-color: white;
-		--kit-appbar-border: color-mix(in oklab, white, transparent 78%);
-	}
-
-	.kit-appbar[data-rounded='0'] {
-		--kit-appbar-radius: 0;
-	}
-
-	.kit-appbar[data-rounded='xs'] {
-		--kit-appbar-radius: 2px;
-	}
-
-	.kit-appbar[data-rounded='sm'] {
-		--kit-appbar-radius: 4px;
-	}
-
-	.kit-appbar[data-rounded='md'] {
-		--kit-appbar-radius: 8px;
-	}
-
-	.kit-appbar[data-rounded='lg'] {
-		--kit-appbar-radius: 16px;
-	}
-
-	.kit-appbar[data-rounded='xl'] {
-		--kit-appbar-radius: 99999px;
-	}
-
-	.kit-appbar__wrapper {
-		position: relative;
-		z-index: 1;
-		display: flex;
-		align-items: center;
-		flex-direction: row;
-		gap: 0.75rem;
-		width: 100%;
-		margin: 0 auto;
-	}
-
-	.kit-appbar .outline {
-		--outline-color: var(--kit-appbar-border);
-
-		pointer-events: none;
-	}
-</style>

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>