lapikit 0.4.2 → 0.4.4

package/dist/internal/core/animations/ripple.js

@@ -4,6 +4,9 @@ export function ripple(el, options = {}) {
     const rippleContainer = document.createElement('div');
     addClasses();
     setOptions(options);
+    function isAriaDisabled() {
+        return el.getAttribute('aria-disabled') === 'true';
+    }
     function addClasses(center) {
         const shouldBeCentered = center || options.center;
         if (!rippleContainer.classList.contains('kit-ripple--effect')) {
@@ -17,7 +20,7 @@ export function ripple(el, options = {}) {
         }
     }
     function setOptions(options) {
-        if (options.disabled || el.hasAttribute('aria-disabled')) {
+        if (options.disabled || isAriaDisabled()) {
             rippleContainer.remove();
         }
         else {
@@ -37,7 +40,7 @@ export function ripple(el, options = {}) {
         }
     }
     function createRipple(e, center) {
-        if (options.disabled || el.hasAttribute('aria-disabled')) {
+        if (options.disabled || isAriaDisabled()) {
             return;
         }
         if (e instanceof KeyboardEvent) {

package/dist/labs/animations/index.d.ts

@@ -0,0 +1 @@
+export * from './ripple.ts';

package/dist/labs/animations/index.js

@@ -0,0 +1 @@
+export * from "./ripple.js";

package/dist/labs/animations/ripple.d.ts

@@ -0,0 +1,5 @@
+import type { RippleProps } from '../utils/types/index.ts';
+export declare function ripple(el: HTMLElement, options?: RippleProps): {
+    destroy(): void;
+    update(newOptions: RippleProps): void;
+};

package/dist/labs/animations/ripple.js

@@ -0,0 +1,96 @@
+const triggerEvents = ['pointerdown', 'touchstart', 'keydown'];
+const cancelEvents = ['mouseleave', 'dragleave', 'touchmove', 'touchcancel', 'pointerup', 'keyup'];
+export function ripple(el, options = {}) {
+    const rippleContainer = document.createElement('div');
+    addClasses();
+    setOptions(options);
+    function isAriaDisabled() {
+        return el.getAttribute('aria-disabled') === 'true';
+    }
+    function addClasses(center) {
+        const shouldBeCentered = center || options.center;
+        if (!rippleContainer.classList.contains('kit-ripple--effect')) {
+            rippleContainer.classList.add('kit-ripple--effect');
+        }
+        if (!shouldBeCentered && rippleContainer.classList.contains('kit-ripple--center')) {
+            rippleContainer.classList.remove('kit-ripple--center');
+        }
+        if (shouldBeCentered) {
+            rippleContainer.classList.add('kit-ripple--center');
+        }
+    }
+    function setOptions(options) {
+        if (options.disabled || isAriaDisabled()) {
+            rippleContainer.remove();
+        }
+        else {
+            el.appendChild(rippleContainer);
+        }
+        if (options.duration && options.duration < 0) {
+            options.duration = undefined;
+        }
+        if (options.component) {
+            rippleContainer.style.setProperty('--system-ripple-radius', `var(--${options.component}-shape)`);
+        }
+        if (options.color) {
+            rippleContainer.style.setProperty('--system-ripple-color', options.color);
+        }
+        if (options.duration) {
+            rippleContainer.style.setProperty('--system-animation-ripple-duration', `${options.duration}ms`);
+        }
+    }
+    function createRipple(e, center) {
+        if (options.disabled || isAriaDisabled()) {
+            return;
+        }
+        if (e instanceof KeyboardEvent) {
+            if (!['Enter', 'Space'].includes(e.code) || e.repeat) {
+                return;
+            }
+            e.preventDefault();
+            const click = new PointerEvent('pointerdown');
+            createRipple(click, true);
+            return;
+        }
+        addClasses(center);
+        const rect = el.getBoundingClientRect();
+        const clientX = window.TouchEvent && e instanceof TouchEvent
+            ? e.touches[0].clientX
+            : e.clientX;
+        const clientY = window.TouchEvent && e instanceof TouchEvent
+            ? e.touches[0].clientY
+            : e.clientY;
+        const x = clientX - rect.left > el.offsetWidth / 2 ? 0 : el.offsetWidth;
+        const y = clientY - rect.top > el.offsetHeight / 2 ? 0 : el.offsetHeight;
+        const radius = Math.hypot(x - (clientX - rect.left), y - (clientY - rect.top));
+        const ripple = document.createElement('div');
+        ripple.classList.add('kit-ripple');
+        ripple.style.left = `${clientX - rect.left - radius}px`;
+        ripple.style.top = `${clientY - rect.top - radius}px`;
+        ripple.style.width = ripple.style.height = `${radius * 2}px`;
+        rippleContainer.appendChild(ripple);
+        function removeRipple() {
+            if (ripple === null) {
+                return;
+            }
+            ripple.style.opacity = '0';
+            setTimeout(() => {
+                ripple.remove();
+            }, options.duration || 1000);
+            cancelEvents.forEach((event) => el.removeEventListener(event, removeRipple));
+        }
+        cancelEvents.forEach((event) => el.addEventListener(event, removeRipple, { passive: true }));
+    }
+    triggerEvents.forEach((event) => el.addEventListener(event, createRipple, { passive: event === 'touchstart' }));
+    return {
+        destroy() {
+            triggerEvents.forEach((event) => {
+                el.removeEventListener(event, createRipple);
+            });
+        },
+        update(newOptions) {
+            options = newOptions;
+            setOptions(newOptions);
+        }
+    };
+}

package/dist/labs/assets/icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-align-end-horizontal-icon lucide-align-end-horizontal"><rect width="6" height="16" x="4" y="2" rx="2"/><rect width="6" height="9" x="14" y="9" rx="2"/><path d="M22 22H2"/></svg>

package/dist/labs/compiler/components.js

@@ -1,2 +1,2 @@
-const lapikitComponents = ['sheet'];
+const lapikitComponents = ['sheet', 'app', 'btn', 'icon'];
 export default lapikitComponents;

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

@@ -0,0 +1,146 @@
+<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

@@ -0,0 +1,6 @@
+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/btn/btn.svelte

@@ -0,0 +1,538 @@
+<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 { ButtonProps } from './btn.types.js';
+
+	let {
+		ref = $bindable(),
+		is = 'button',
+		children,
+		class: className = '',
+		style: styleAttr = '',
+		's-class': sClass,
+		's-style': sStyle,
+		variant = 'filled',
+		density = 'default',
+		loading,
+		active = false,
+		size = 'default',
+		rounded,
+		disabled = false,
+		block,
+		href,
+		input,
+		type,
+		checked,
+		value,
+		label,
+		wide,
+		noRipple,
+		load,
+		append,
+		prepend,
+		icon,
+		...rest
+	}: ButtonProps = $props();
+
+	let safeVariant = $derived(
+		variant === 'filled' || variant === 'outline' || variant === 'text' || variant === 'link'
+			? variant
+			: 'filled'
+	);
+	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 { classProps, styleProps, restProps } = $derived(
+		makeComponentProps(rest as Record<string, unknown>)
+	);
+
+	let componentClass = $derived(
+		useClassName({
+			baseClass: 'kit-btn',
+			className: `${className ?? ''} kit-btn--${safeVariant}`.trim(),
+			sClass,
+			classProps
+		})
+	);
+
+	let componentStyle = $derived(
+		useStyles({
+			styleAttr,
+			sStyle,
+			styleProps
+		})
+	);
+
+	const isInput = $derived(!!input);
+	const isDisabled = $derived(!!disabled);
+	const tag = $derived((href && 'a') || (isInput && 'input') || is || 'button');
+	const inputWrapperTag = $derived(type === 'checkbox' || type === 'radio' ? 'label' : 'div');
+	const resolvedHref = $derived(isDisabled ? undefined : href);
+	const resolvedDisabled = $derived((tag === 'button' && isDisabled) || undefined);
+
+	const resolvedType = $derived(() => {
+		if (tag !== 'button') return type;
+		return type ?? 'button';
+	});
+</script>
+
+{#if isInput}
+	<svelte:element
+		this={inputWrapperTag}
+		bind:this={ref}
+		class={componentClass}
+		style={componentStyle}
+		data-size={safeSize}
+		data-variant={safeVariant}
+		data-loading={loading}
+		data-active={active}
+		data-disabled={isDisabled}
+		data-density={safeDensity}
+		data-rounded={rounded}
+		aria-busy={disabled}
+		aria-disabled={isDisabled || undefined}
+		data-block={block}
+		data-wide={wide}
+		data-icon={icon}
+		use:ripple={{
+			component: 'btn',
+			disabled: noRipple || disabled
+		}}
+	>
+		{#if safeVariant === 'outline'}
+			<span class="outline"></span>
+		{/if}
+		<input
+			{...restProps}
+			type={type || 'button'}
+			{checked}
+			{value}
+			aria-label={String(label || value)}
+			disabled={isDisabled}
+		/>
+		{#if loading}
+			<span class="spinner">...</span>
+		{/if}
+	</svelte:element>
+{:else}
+	<svelte:element
+		this={tag}
+		bind:this={ref}
+		class={componentClass}
+		style={componentStyle}
+		{...restProps}
+		type={resolvedType()}
+		href={resolvedHref}
+		data-size={safeSize}
+		data-variant={safeVariant}
+		data-loading={loading}
+		data-active={active}
+		data-disabled={isDisabled}
+		data-density={safeDensity}
+		data-rounded={rounded}
+		disabled={resolvedDisabled}
+		aria-busy={disabled}
+		aria-disabled={isDisabled || undefined}
+		data-block={block}
+		data-wide={wide}
+		data-icon={icon}
+		use:ripple={{
+			component: 'btn',
+			disabled: noRipple || disabled
+		}}
+	>
+		{#if safeVariant === 'outline'}
+			<span class="outline"></span>
+		{/if}
+
+		<span class="kit-btn__inner">
+			{#if prepend}
+				<span class="kit-btn__prepend">
+					{@render prepend?.()}
+				</span>
+			{/if}
+			<span class="kit-btn__content">
+				{@render children?.()}
+			</span>
+			{#if append}
+				<span class="kit-btn__append">
+					{@render append?.()}
+				</span>
+			{/if}
+		</span>
+
+		{#if loading}
+			<span class="spinner">
+				{#if load}
+					{@render load?.()}
+				{:else}
+					...
+				{/if}
+			</span>
+		{/if}
+	</svelte:element>
+{/if}
+
+<style>
+	input {
+		border: 0;
+		padding: 0;
+		background: transparent;
+		color: inherit;
+		cursor: pointer;
+	}
+	/* typography consistency */
+	button,
+	input,
+	select,
+	textarea {
+		font: inherit;
+		color: inherit;
+	}
+
+	/* remove native button styles */
+	button {
+		appearance: none;
+		background: none;
+		border: none;
+	}
+
+	.kit-btn {
+		--kit-btn-bg: var(--kit-surface-2);
+		--kit-btn-fg: var(--kit-fg);
+		--kit-btn-bd: var(--kit-border);
+		--kit-btn-bg--hover: color-mix(in oklab, var(--kit-btn-bg), var(--kit-fg) 6%);
+		--kit-btn-bg--active: color-mix(in oklab, var(--kit-btn-bg), var(--kit-fg) 10%);
+		--kit-btn-bd--hover: color-mix(in oklab, var(--kit-btn-bd), var(--kit-fg) 12%);
+		--kit-btn-font: var(--kit-font);
+		--kit-btn-h-xs: 28px;
+		--kit-btn-h-sm: 32px;
+		--kit-btn-h-md: 40px;
+		--kit-btn-h-lg: 48px;
+		--kit-btn-h-xl: 56px;
+		--kit-btn-px-xs: 10px;
+		--kit-btn-px-sm: 12px;
+		--kit-btn-px-md: 16px;
+		--kit-btn-px-lg: 20px;
+		--kit-btn-px-xl: 24px;
+		--btn-density-scale: 1;
+		--btn-density-height-scale: 1;
+		--btn-radius: 8px;
+		--btn-shape: var(--btn-radius);
+		--kit-btn-gap: 0.45em;
+
+		position: relative;
+		display: inline-flex;
+		box-sizing: border-box;
+		align-items: center;
+		justify-content: center;
+		font-family: var(--kit-btn-font);
+		background: var(--btn-bg);
+		color: var(--btn-fg);
+		height: max(28px, calc(var(--btn-h) * var(--btn-density-height-scale)));
+		padding-inline: calc(var(--btn-px) * var(--btn-density-scale));
+		border-radius: var(--btn-radius);
+		text-decoration: none;
+		white-space: nowrap;
+		user-select: none;
+		cursor: pointer;
+		border: 0;
+		transition:
+			background 150ms ease,
+			transform 50ms ease;
+	}
+
+	.kit-btn:hover {
+		background: var(--btn-hover-bg);
+		color: var(--btn-hover-fg);
+		text-decoration: var(--btn-decoration);
+	}
+
+	.kit-btn:has(> :is(input[type='checkbox'], input[type='radio']):checked) {
+		background: var(--btn-active-bg);
+		color: var(--btn-active-fg);
+		text-decoration: var(--btn-decoration);
+	}
+
+	.kit-btn:has(> :is(input[type='checkbox'], input[type='radio']):checked):hover {
+		background: var(--btn-hover-bg);
+		color: var(--btn-hover-fg);
+		text-decoration: var(--btn-decoration);
+	}
+
+	.kit-btn:active,
+	.kit-btn[data-active='true'] {
+		background: var(--btn-active-bg);
+		color: var(--btn-active-fg);
+		text-decoration: var(--btn-decoration);
+		transform: translateY(1px);
+	}
+
+	.kit-btn[data-active='true']:hover {
+		background: var(--btn-hover-bg);
+		color: var(--btn-hover-fg);
+		text-decoration: var(--btn-decoration);
+	}
+
+	:is(.kit-btn:focus-visible, .kit-btn:has(> input:focus-visible)) {
+		outline: 2px solid var(--kit-focus);
+		outline-offset: 2px;
+	}
+
+	.kit-btn > input:focus-visible {
+		outline: none;
+		box-shadow: none;
+	}
+
+	.kit-btn > :is(input[type='checkbox'], input[type='radio']) {
+		appearance: none;
+		margin: 0;
+		cursor: pointer;
+	}
+
+	.kit-btn > :is(input[type='checkbox'], input[type='radio']):after {
+		--btn-content: attr(aria-label);
+		content: var(--btn-content);
+		cursor: pointer;
+	}
+
+	/* variant */
+	.kit-btn[data-variant='filled'] {
+		/* default style*/
+		--btn-bg: var(--kit-accent);
+		--btn-fg: white;
+		--btn-hover-bg: color-mix(in oklab, var(--kit-accent), black 10%);
+		--btn-hover-fg: var(--btn-fg);
+		--btn-active-bg: color-mix(in oklab, var(--kit-accent), black 16%);
+		--btn-active-fg: var(--btn-fg);
+	}
+
+	.kit-btn[data-variant='outline'] {
+		--outline-color: var(--kit-accent);
+	}
+
+	.kit-btn[data-variant='outline'],
+	.kit-btn[data-variant='text'] {
+		--btn-bg: transparent;
+		--btn-fg: var(--kit-accent);
+		--btn-hover-bg: color-mix(in oklab, var(--kit-accent), transparent 80%);
+		--btn-hover-fg: var(--btn-fg);
+		--btn-active-bg: color-mix(in oklab, var(--kit-accent), transparent 92%);
+		--btn-active-fg: var(--btn-fg);
+	}
+
+	.kit-btn[data-variant='link'] {
+		--btn-bg: transparent;
+		--btn-fg: var(--kit-accent);
+		--btn-hover-fg: var(--btn-fg);
+		--btn-active-fg: var(--btn-fg);
+		--btn-decoration: underline;
+		height: inherit;
+		padding: 0;
+	}
+
+	/* size */
+	.kit-btn[data-size='xs'] {
+		--btn-h: var(--kit-btn-h-xs);
+		--btn-height: var(--kit-btn-h-xs);
+		--btn-px: var(--kit-btn-px-xs);
+		font-size: 12px;
+	}
+	.kit-btn[data-size='xs'] :global(.kit-icon:not([data-size])) {
+		--kit-icon-current-size: var(--kit-icon-size-xs);
+	}
+
+	.kit-btn[data-size='sm'] {
+		--btn-h: var(--kit-btn-h-sm);
+		--btn-height: var(--kit-btn-h-sm);
+		--btn-px: var(--kit-btn-px-sm);
+		font-size: 13px;
+	}
+	.kit-btn[data-size='sm'] :global(.kit-icon:not([data-size])) {
+		--kit-icon-current-size: var(--kit-icon-size-sm);
+	}
+
+	.kit-btn[data-size='md'] {
+		--btn-h: var(--kit-btn-h-md);
+		--btn-height: var(--kit-btn-h-md);
+		--btn-px: var(--kit-btn-px-md);
+		font-size: 14px;
+	}
+	.kit-btn[data-size='md'] :global(.kit-icon:not([data-size])) {
+		--kit-icon-current-size: var(--kit-icon-size-md);
+	}
+
+	.kit-btn[data-size='lg'] {
+		--btn-h: var(--kit-btn-h-lg);
+		--btn-height: var(--kit-btn-h-lg);
+		--btn-px: var(--kit-btn-px-lg);
+		font-size: 15px;
+	}
+	.kit-btn[data-size='lg'] :global(.kit-icon:not([data-size])) {
+		--kit-icon-current-size: var(--kit-icon-size-lg);
+	}
+
+	.kit-btn[data-size='xl'] {
+		--btn-h: var(--kit-btn-h-xl);
+		--btn-height: var(--kit-btn-h-xl);
+		--btn-px: var(--kit-btn-px-xl);
+		font-size: 16px;
+	}
+	.kit-btn[data-size='xl'] :global(.kit-icon:not([data-size])) {
+		--kit-icon-current-size: var(--kit-icon-size-xl);
+	}
+
+	/* density */
+	.kit-btn[data-density='default'] {
+		--btn-density-scale: 1;
+		--btn-density-height-scale: 1;
+	}
+
+	.kit-btn[data-density='compact'] {
+		--btn-density-scale: 0.9;
+		--btn-density-height-scale: 0.92;
+	}
+
+	.kit-btn[data-density='comfortable'] {
+		--btn-density-scale: 1.1;
+		--btn-density-height-scale: 1.08;
+	}
+
+	/* rounded */
+	.kit-btn[data-rounded='0'] {
+		--btn-radius: 0;
+	}
+
+	.kit-btn[data-rounded='xs'] {
+		--btn-radius: 2px;
+	}
+
+	.kit-btn[data-rounded='sm'] {
+		--btn-radius: 4px;
+	}
+
+	.kit-btn[data-rounded='md'] {
+		--btn-radius: 8px;
+	}
+
+	.kit-btn[data-rounded='lg'] {
+		--btn-radius: 16px;
+	}
+
+	.kit-btn[data-rounded='xl'] {
+		--btn-radius: 99999px;
+	}
+
+	.kit-btn[data-wide='true'] {
+		width: 100%;
+		max-width: 16rem;
+	}
+
+	.kit-btn .outline {
+		pointer-events: none;
+	}
+
+	.kit-btn__inner {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: var(--kit-btn-gap);
+		line-height: 1;
+	}
+
+	.kit-btn__content,
+	.kit-btn__prepend,
+	.kit-btn__append {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		line-height: 1;
+	}
+
+	.kit-btn__content :global(.kit-icon),
+	.kit-btn__prepend :global(.kit-icon),
+	.kit-btn__append :global(.kit-icon) {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		vertical-align: middle;
+	}
+
+	.kit-btn__content :global(svg),
+	.kit-btn__prepend :global(svg),
+	.kit-btn__append :global(svg),
+	.kit-btn__content :global(img),
+	.kit-btn__prepend :global(img),
+	.kit-btn__append :global(img) {
+		display: block;
+	}
+
+	.kit-btn[data-loading='true'] .kit-btn__inner,
+	.kit-btn[data-loading='true'] input {
+		opacity: 0;
+	}
+
+	.kit-btn[data-loading='true'] {
+		pointer-events: none;
+		user-select: none;
+		cursor: pointer;
+	}
+
+	.spinner {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.kit-btn[data-block='true'] {
+		display: flex;
+		width: 100%;
+	}
+
+	.kit-btn[data-icon='true'] {
+		width: max(28px, calc(var(--btn-h) * var(--btn-density-height-scale)));
+		min-width: max(28px, calc(var(--btn-h) * var(--btn-density-height-scale)));
+		padding-inline: 0;
+	}
+
+	.kit-btn[data-icon='true'] .kit-btn__inner {
+		gap: 0;
+	}
+
+	.kit-btn[data-disabled='true'] {
+		pointer-events: none;
+		background: color-mix(in oklab, var(--btn-bg), transparent 70%);
+		color: color-mix(in oklab, var(--btn-fg), transparent 45%);
+
+		user-select: none;
+		cursor: not-allowed;
+	}
+
+	.kit-btn[data-disabled='true'] :global(.kit-icon) {
+		color: color-mix(in oklab, var(--btn-fg), transparent 45%) !important;
+		--kit-icon-color: color-mix(in oklab, var(--btn-fg), transparent 45%) !important;
+	}
+
+	.kit-btn[data-disabled='true'] :global(.kit-icon img),
+	.kit-btn[data-disabled='true'] :global(.kit-icon .kit-icon__mask) {
+		opacity: 0.7;
+		filter: grayscale(0.2);
+	}
+
+	.kit-btn[data-disabled='true'] > input {
+		cursor: not-allowed;
+	}
+</style>

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

@@ -0,0 +1,4 @@
+import type { ButtonProps } from './btn.types.ts';
+declare const Btn: import("svelte").Component<ButtonProps, {}, "ref">;
+type Btn = ReturnType<typeof Btn>;
+export default Btn;

package/dist/labs/components/btn/btn.types.d.ts

@@ -0,0 +1,26 @@
+import type { Component, RoundedType, SizeType } from '../../utils/types/index.js';
+import type { Snippet } from 'svelte';
+export interface ButtonProps extends Component {
+    ref?: HTMLElement | null;
+    is?: 'button' | 'a' | 'input';
+    input?: boolean;
+    href?: string;
+    variant?: 'outline' | 'text' | 'filled' | 'link';
+    density?: 'compact' | 'comfortable' | 'default';
+    active?: boolean;
+    loading?: boolean;
+    disabled?: boolean;
+    checked?: boolean;
+    size?: SizeType;
+    rounded?: RoundedType;
+    type?: 'button' | 'submit' | 'reset' | 'checkbox' | 'radio';
+    value?: string | number | boolean;
+    label?: string;
+    block?: boolean;
+    wide?: boolean;
+    noRipple?: boolean;
+    icon?: boolean;
+    load?: Snippet;
+    append?: Snippet;
+    prepend?: Snippet;
+}

package/dist/labs/components/btn/btn.types.js

@@ -0,0 +1 @@
+export {};

package/dist/labs/components/icon/icon.svelte

@@ -0,0 +1,186 @@
+<script lang="ts">
+	import { useClassName, useStyles } from '../../utils/index.js';
+	import { makeComponentProps } from '../../compiler/mapped-code.js';
+	import type { IconProps } from './icon.types.js';
+
+	let {
+		ref = $bindable(),
+		is = 'i',
+		children = undefined,
+		class: className = '',
+		style: styleAttr = '',
+		's-class': sClass,
+		's-style': sStyle,
+		name = undefined,
+		src = undefined,
+		icon = undefined,
+		size = 'default',
+		alt = '',
+		label = undefined,
+		decorative = true,
+		loading = 'eager',
+		decoding = 'async',
+		color = undefined,
+		colorMode = 'auto',
+		imgFilter = undefined,
+		...rest
+	}: IconProps = $props();
+
+	let { classProps, styleProps, restProps } = $derived(
+		makeComponentProps(rest as Record<string, unknown>)
+	);
+
+	let componentClass = $derived(
+		useClassName({
+			baseClass: 'kit-icon',
+			className: `${className ?? ''}`.trim(),
+			sClass,
+			classProps
+		})
+	);
+
+	let componentStyle = $derived(
+		useStyles({
+			styleAttr,
+			sStyle,
+			styleProps
+		})
+	);
+
+	let safeSize = $derived(
+		size === 'default' || size === undefined
+			? undefined
+			: size === 'xs' || size === 'sm' || size === 'md' || size === 'lg' || size === 'xl'
+				? size
+				: 'md'
+	);
+
+	let resolvedSrc = $derived(src ?? (icon?.includes('/') ? icon : undefined));
+	let resolvedName = $derived(name ?? (!icon?.includes('/') ? icon : undefined));
+	let hasChildren = $derived(!!children);
+	let hasContent = $derived(hasChildren || !!resolvedSrc || !!resolvedName);
+	let classWithIconName = $derived(
+		!hasChildren && !resolvedSrc && resolvedName
+			? `${componentClass} ${resolvedName}`.trim()
+			: componentClass
+	);
+
+	let safeLoading = $derived(loading === 'lazy' || loading === 'eager' ? loading : 'eager');
+	let safeDecoding = $derived(
+		decoding === 'async' || decoding === 'sync' || decoding === 'auto' ? decoding : 'async'
+	);
+	let safeColorMode = $derived(
+		colorMode === 'auto' || colorMode === 'none' || colorMode === 'mask' || colorMode === 'filter'
+			? colorMode
+			: 'auto'
+	);
+
+	let iconRole = $derived(!decorative && (label || alt) ? 'img' : undefined);
+	let iconAriaLabel = $derived(!decorative ? label || alt || undefined : undefined);
+	let iconAriaHidden = $derived(decorative ? true : undefined);
+	let imgAlt = $derived(decorative ? '' : alt || label || '');
+	let isSvgSrc = $derived(!!resolvedSrc && /\.svg($|\?)/i.test(resolvedSrc));
+	let useMaskMode = $derived(
+		!!resolvedSrc &&
+			(color ? safeColorMode === 'mask' || (safeColorMode === 'auto' && isSvgSrc) : false)
+	);
+	let useFilterMode = $derived(
+		!!resolvedSrc && !!imgFilter && (safeColorMode === 'filter' || safeColorMode === 'auto')
+	);
+	let mergedStyle = $derived(
+		[componentStyle, color ? `color:${color}` : '', color ? `--kit-icon-color:${color}` : '']
+			.filter(Boolean)
+			.join('; ')
+	);
+</script>
+
+{#if hasContent}
+	<svelte:element
+		this={is}
+		bind:this={ref}
+		class={classWithIconName}
+		style={mergedStyle}
+		data-size={safeSize}
+		role={iconRole}
+		aria-label={iconAriaLabel}
+		aria-hidden={iconAriaHidden}
+		{...restProps}
+	>
+		{#if hasChildren}
+			{@render children?.()}
+		{:else if resolvedSrc}
+			{#if useMaskMode}
+				<span
+					class="kit-icon__mask"
+					style={`--kit-icon-mask-image: url("${resolvedSrc}")`}
+					aria-hidden="true"
+				></span>
+			{:else}
+				<img
+					src={resolvedSrc}
+					alt={imgAlt}
+					loading={safeLoading}
+					decoding={safeDecoding}
+					style={useFilterMode ? `filter:${imgFilter}` : undefined}
+				/>
+			{/if}
+		{/if}
+	</svelte:element>
+{/if}
+
+<style>
+	.kit-icon {
+		--kit-icon-size-xs: 0.875rem;
+		--kit-icon-size-sm: 1rem;
+		--kit-icon-size-md: 1.125rem;
+		--kit-icon-size-lg: 1.25rem;
+		--kit-icon-size-xl: 1.375rem;
+		--kit-icon-current-size: var(--kit-icon-size-md);
+
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		text-indent: 0;
+		line-height: 1;
+		font-size: var(--kit-icon-current-size);
+		vertical-align: middle;
+	}
+
+	.kit-icon[data-size='xs'] {
+		--kit-icon-current-size: var(--kit-icon-size-xs);
+	}
+	.kit-icon[data-size='sm'] {
+		--kit-icon-current-size: var(--kit-icon-size-sm);
+	}
+	.kit-icon[data-size='md'] {
+		--kit-icon-current-size: var(--kit-icon-size-md);
+	}
+	.kit-icon[data-size='lg'] {
+		--kit-icon-current-size: var(--kit-icon-size-lg);
+	}
+	.kit-icon[data-size='xl'] {
+		--kit-icon-current-size: var(--kit-icon-size-xl);
+	}
+
+	.kit-icon :global(svg),
+	.kit-icon img,
+	.kit-icon .kit-icon__mask {
+		width: var(--kit-icon-current-size);
+		height: var(--kit-icon-current-size);
+		flex-shrink: 0;
+		display: block;
+	}
+
+	.kit-icon .kit-icon__mask {
+		display: inline-block;
+		background-color: var(--kit-icon-color, currentColor);
+		mask-image: var(--kit-icon-mask-image);
+		mask-repeat: no-repeat;
+		mask-size: contain;
+		mask-position: center;
+		-webkit-mask-image: var(--kit-icon-mask-image);
+		-webkit-mask-repeat: no-repeat;
+		-webkit-mask-size: contain;
+		-webkit-mask-position: center;
+	}
+</style>

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

@@ -0,0 +1,4 @@
+import type { IconProps } from './icon.types.ts';
+declare const Icon: import("svelte").Component<IconProps, {}, "ref">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

package/dist/labs/components/icon/icon.types.d.ts

@@ -0,0 +1,16 @@
+import type { Component, SizeType } from '../../utils/types/index.js';
+export interface IconProps extends Component {
+    ref?: HTMLElement | null;
+    name?: string;
+    src?: string;
+    icon?: string;
+    size?: SizeType;
+    alt?: string;
+    label?: string;
+    decorative?: boolean;
+    loading?: 'eager' | 'lazy';
+    decoding?: 'sync' | 'async' | 'auto';
+    color?: string;
+    colorMode?: 'auto' | 'none' | 'mask' | 'filter';
+    imgFilter?: string;
+}

package/dist/labs/components/icon/icon.types.js

@@ -0,0 +1 @@
+export {};

package/dist/labs/components/index.d.ts

@@ -1 +1,4 @@
 export { default as KitSheet } from './sheet/sheet.svelte';
+export { default as KitApp } from './app/app.svelte';
+export { default as KitBtn } from './btn/btn.svelte';
+export { default as KitIcon } from './icon/icon.svelte';

package/dist/labs/components/index.js

@@ -1,2 +1,5 @@
 // components
 export { default as KitSheet } from './sheet/sheet.svelte';
+export { default as KitApp } from './app/app.svelte';
+export { default as KitBtn } from './btn/btn.svelte';
+export { default as KitIcon } from './icon/icon.svelte';

package/dist/labs/utils/types/index.d.ts

@@ -1,5 +1,13 @@
+import type { Snippet } from 'svelte';
 import type { SClassProp, SStyleProp } from '../../compiler/types/index.js';
+type IdElementType = string | undefined;
+type ClassNameType = string | string[] | undefined;
+type KitClassNameType = string | string[] | undefined;
+type KitStylePropertiesType = Record<string, boolean | string> | undefined;
+type StylePropertiesType = string | undefined;
 export type PropValue = string | boolean | number | null | undefined;
+export type SizeType = 'default' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type RoundedType = 0 | '0' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export interface useClassNameProps {
     baseClass?: string;
     className?: string;
@@ -11,3 +19,22 @@ export interface useStylesProps {
     sStyle?: SStyleProp;
     styleProps?: Record<string, PropValue>;
 }
+export interface Base {
+    id?: IdElementType;
+    class?: ClassNameType;
+    style?: StylePropertiesType;
+    's-class'?: KitClassNameType;
+    's-style'?: KitStylePropertiesType;
+    [key: string]: any;
+}
+export interface Component extends Base {
+    children?: Snippet;
+}
+export interface RippleProps {
+    component?: string;
+    center?: boolean;
+    color?: string;
+    duration?: number;
+    disabled?: boolean;
+}
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lapikit",
-	"version": "0.4.2",
+	"version": "0.4.4",
 	"license": "MIT",
 	"publishConfig": {
 		"access": "public"
@@ -89,10 +89,12 @@
 	"devDependencies": {
 		"@eslint/compat": "^1.2.5",
 		"@eslint/js": "^9.18.0",
+		"@mdi/js": "^7.4.47",
 		"@sveltejs/adapter-auto": "^4.0.0",
 		"@sveltejs/kit": "^2.16.0",
 		"@sveltejs/package": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^6.2.1",
+		"@tabler/icons-svelte": "^3.40.0",
 		"@testing-library/jest-dom": "^6.6.3",
 		"@testing-library/svelte": "^5.2.4",
 		"eslint": "^9.18.0",
@@ -100,6 +102,8 @@
 		"eslint-plugin-svelte": "^3.0.0",
 		"globals": "^16.0.0",
 		"jsdom": "^26.0.0",
+		"lucide-svelte": "^0.577.0",
+		"mingcute_icon": "^2.9.71",
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.3",
 		"publint": "^0.3.2",