lapikit 0.4.2 → 0.4.3

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/compiler/components.js

@@ -1,2 +1,2 @@
-const lapikitComponents = ['sheet'];
+const lapikitComponents = ['sheet', 'app', 'btn'];
 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,446 @@
+<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 = 'md',
+		rounded,
+		disabled = false,
+		block,
+		href,
+		input,
+		type,
+		checked,
+		value,
+		label,
+		wide,
+		noRipple,
+		...rest
+	}: ButtonProps = $props();
+
+	let safeVariant = $derived(
+		variant === 'filled' || variant === 'outline' || variant === 'text' || variant === 'link'
+			? variant
+			: 'filled'
+	);
+	let safeSize = $derived(
+		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}
+		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}
+		use:ripple={{
+			component: 'btn',
+			disabled: noRipple || disabled
+		}}
+	>
+		{#if safeVariant === 'outline'}
+			<span class="outline"></span>
+		{/if}
+
+		<span class="kit-btn__inner">
+			<span class="kit-btn__content">
+				{@render children?.()}
+			</span>
+		</span>
+
+		{#if loading}
+			<span class="spinner">...</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);
+
+		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='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='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='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='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;
+	}
+
+	/* 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: flex;
+		align-items: center;
+		gap: var(--kit-btn-gap);
+	}
+
+	.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-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'] > 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,21 @@
+import type { Component, RoundedType, SizeType } from '../../utils/types/index.js';
+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;
+}

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

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

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

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

package/dist/labs/components/index.js

@@ -1,2 +1,4 @@
 // 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';

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 = '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.3",
 	"license": "MIT",
 	"publishConfig": {
 		"access": "public"