lapikit 0.4.12 → 0.4.14

package/dist/labs/components/alert/alert.svelte

@@ -1,286 +0,0 @@
-<script lang="ts">
-	import { useClassName, useStyles } from '../../utils/index.js';
-	import { makeComponentProps } from '../../compiler/mapped-code.js';
-	import type { AlertDensity, AlertProps, AlertTone, AlertVariant } from './alert.types.js';
-
-	function resolveVariant(value: AlertVariant | undefined): AlertVariant {
-		return value === 'filled' || value === 'outline' || value === 'text' ? value : 'filled';
-	}
-
-	function resolveDensity(value: AlertDensity | undefined): AlertDensity {
-		return value === 'compact' || value === 'comfortable' || value === 'default'
-			? value
-			: 'default';
-	}
-
-	function resolveTone({
-		tone,
-		info,
-		success,
-		warning,
-		error
-	}: {
-		tone?: AlertTone;
-		info?: boolean;
-		success?: boolean;
-		warning?: boolean;
-		error?: boolean;
-	}): AlertTone {
-		if (tone && ['default', 'info', 'success', 'warning', 'error'].includes(tone)) return tone;
-		if (error) return 'error';
-		if (warning) return 'warning';
-		if (success) return 'success';
-		if (info) return 'info';
-		return 'default';
-	}
-
-	let {
-		ref = $bindable(),
-		is = 'div',
-		children = undefined,
-		class: className = '',
-		style: styleAttr = '',
-		's-class': sClass,
-		's-style': sStyle,
-		open = $bindable(true),
-		closable = false,
-		variant = 'filled',
-		density = 'default',
-		rounded = 'md',
-		tone = 'default',
-		info = false,
-		success = false,
-		warning = false,
-		error = false,
-		color = undefined,
-		background = undefined,
-		prepend = undefined,
-		append = undefined,
-		close = undefined,
-		...rest
-	}: AlertProps = $props();
-
-	let { classProps, styleProps, restProps } = $derived(
-		makeComponentProps(rest as Record<string, unknown>)
-	);
-
-	let componentClass = $derived(
-		useClassName({
-			baseClass: 'kit-alert',
-			className: `${className ?? ''}`.trim(),
-			sClass,
-			classProps
-		})
-	);
-
-	let baseStyle = $derived(
-		useStyles({
-			styleAttr,
-			sStyle,
-			styleProps
-		})
-	);
-
-	let safeVariant = $derived(resolveVariant(variant));
-	let safeDensity = $derived(resolveDensity(density));
-	let safeTone = $derived(resolveTone({ tone, info, success, warning, error }));
-	let mergedStyle = $derived(
-		[
-			baseStyle,
-			color ? `--kit-alert-fg:${color}` : '',
-			background ? `--kit-alert-bg:${background}` : ''
-		]
-			.filter(Boolean)
-			.join('; ')
-	);
-</script>
-
-{#if !closable || (closable && open)}
-	<svelte:element
-		this={is}
-		bind:this={ref}
-		class={componentClass}
-		style={mergedStyle}
-		role="alert"
-		data-variant={safeVariant}
-		data-density={safeDensity}
-		data-rounded={rounded}
-		data-tone={safeTone}
-		{...restProps}
-	>
-		{#if safeVariant === 'outline'}
-			<span class="outline"></span>
-		{/if}
-
-		{#if prepend}
-			<span class="kit-alert__prepend">
-				{@render prepend?.()}
-			</span>
-		{/if}
-
-		<div class="kit-alert__content">
-			{@render children?.()}
-		</div>
-
-		{#if append}
-			<span class="kit-alert__append">
-				{@render append?.()}
-			</span>
-		{/if}
-
-		{#if closable}
-			<button
-				class="kit-alert__close"
-				type="button"
-				aria-label="close"
-				onclick={() => (open = false)}
-			>
-				{#if close}
-					{@render close?.()}
-				{:else}
-					<span aria-hidden="true">×</span>
-				{/if}
-			</button>
-		{/if}
-	</svelte:element>
-{/if}
-
-<style>
-	.kit-alert {
-		--kit-alert-bg: hsl(220 20% 96%);
-		--kit-alert-fg: hsl(222 20% 16%);
-		--kit-alert-bd: hsl(220 16% 85%);
-		--kit-alert-radius: 8px;
-		--kit-alert-py: 0.75rem;
-		--kit-alert-px: 0.875rem;
-		--kit-alert-gap: 0.625rem;
-		--outline-color: var(--kit-alert-bd);
-		--btn-radius: var(--kit-alert-radius);
-
-		position: relative;
-		display: grid;
-		grid-template-columns: auto minmax(0, 1fr) auto auto;
-		gap: var(--kit-alert-gap);
-		align-items: start;
-		padding: var(--kit-alert-py) var(--kit-alert-px);
-		border-radius: var(--kit-alert-radius);
-		color: var(--kit-alert-fg);
-		background: var(--kit-alert-bg);
-		border: 1px solid var(--kit-alert-bd);
-	}
-
-	.kit-alert[data-variant='filled'] {
-		background: var(--kit-alert-bg);
-		color: var(--kit-alert-fg);
-		border-color: var(--kit-alert-bd);
-	}
-
-	.kit-alert[data-variant='outline'] {
-		background: transparent;
-		color: var(--kit-alert-fg);
-		border-color: transparent;
-	}
-
-	.kit-alert[data-variant='text'] {
-		background: transparent;
-		color: var(--kit-alert-fg);
-		border-color: transparent;
-	}
-
-	.kit-alert .outline {
-		pointer-events: none;
-	}
-
-	.kit-alert[data-tone='info'] {
-		--kit-alert-bg: hsl(var(--kit-h-info, 205) 90% 95%);
-		--kit-alert-fg: hsl(var(--kit-h-info, 205) 36% 24%);
-		--kit-alert-bd: hsl(var(--kit-h-info, 205) 45% 78%);
-	}
-
-	.kit-alert[data-tone='success'] {
-		--kit-alert-bg: hsl(var(--kit-h-success, 145) 58% 93%);
-		--kit-alert-fg: hsl(var(--kit-h-success, 145) 38% 23%);
-		--kit-alert-bd: hsl(var(--kit-h-success, 145) 30% 75%);
-	}
-
-	.kit-alert[data-tone='warning'] {
-		--kit-alert-bg: hsl(var(--kit-h-warning, 35) 95% 92%);
-		--kit-alert-fg: hsl(var(--kit-h-warning, 35) 55% 24%);
-		--kit-alert-bd: hsl(var(--kit-h-warning, 35) 55% 72%);
-	}
-
-	.kit-alert[data-tone='error'] {
-		--kit-alert-bg: hsl(var(--kit-h-danger, 5) 90% 94%);
-		--kit-alert-fg: hsl(var(--kit-h-danger, 5) 48% 28%);
-		--kit-alert-bd: hsl(var(--kit-h-danger, 5) 55% 78%);
-	}
-
-	.kit-alert[data-density='compact'] {
-		--kit-alert-py: 0.5rem;
-		--kit-alert-px: 0.75rem;
-		--kit-alert-gap: 0.5rem;
-	}
-
-	.kit-alert[data-density='default'] {
-		--kit-alert-py: 0.75rem;
-		--kit-alert-px: 0.875rem;
-		--kit-alert-gap: 0.625rem;
-	}
-
-	.kit-alert[data-density='comfortable'] {
-		--kit-alert-py: 0.95rem;
-		--kit-alert-px: 1rem;
-		--kit-alert-gap: 0.75rem;
-	}
-
-	.kit-alert[data-rounded='0'] {
-		--kit-alert-radius: 0;
-	}
-	.kit-alert[data-rounded='xs'] {
-		--kit-alert-radius: 2px;
-	}
-	.kit-alert[data-rounded='sm'] {
-		--kit-alert-radius: 4px;
-	}
-	.kit-alert[data-rounded='md'] {
-		--kit-alert-radius: 8px;
-	}
-	.kit-alert[data-rounded='lg'] {
-		--kit-alert-radius: 16px;
-	}
-	.kit-alert[data-rounded='xl'] {
-		--kit-alert-radius: 99999px;
-	}
-
-	.kit-alert__prepend,
-	.kit-alert__append {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		line-height: 1;
-	}
-
-	.kit-alert__content {
-		min-width: 0;
-		line-height: 1.4;
-	}
-
-	.kit-alert__close {
-		appearance: none;
-		border: 0;
-		background: transparent;
-		color: inherit;
-		padding: 0;
-		width: 1.25rem;
-		height: 1.25rem;
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		cursor: pointer;
-		border-radius: 6px;
-	}
-
-	.kit-alert__close:hover {
-		background: color-mix(in oklab, currentColor 10%, transparent);
-	}
-</style>

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>