lapikit 0.4.10 → 0.4.12

package/dist/labs/compiler/components.js

@@ -4,6 +4,19 @@ const lapikitComponents = [
     'btn',
     'icon',
     'avatar',
+    'textfield',
+    'appbar',
+    'btn',
+    'icon',
+    'avatar',
+    'toolbar',
+    'btn',
+    'icon',
+    'avatar',
+    'list',
+    'list-item',
+    'dialog',
+    'modal',
     'accordion',
     'accordionItem',
     'alert',

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

@@ -0,0 +1,196 @@
+<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/appbar/appbar.svelte.d.ts

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

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

@@ -0,0 +1,16 @@
+import type { Component, RoundedType } from '../../utils/types/index.js';
+type Density = 'compact' | 'comfortable' | 'default';
+type Variant = 'outline' | 'text';
+export interface AppbarProps extends Component {
+    ref?: HTMLElement | null;
+    is?: 'div' | 'header' | 'nav';
+    variant?: Variant;
+    rounded?: RoundedType | string;
+    density?: Density | Record<string, Density>;
+    dark?: boolean;
+    light?: boolean;
+    color?: string;
+    background?: string;
+    classContent?: string | string[] | undefined;
+}
+export {};

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

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

package/dist/labs/components/dialog/dialog.svelte

@@ -0,0 +1,262 @@
+<script lang="ts">
+	import { disabledScroll } from '../../../internal/helpers/scroll.js';
+	import { makeComponentProps } from '../../compiler/mapped-code.js';
+	import { useClassName, useStyles } from '../../utils/index.js';
+	import type { DialogDensity, DialogPosition, DialogProps, DialogSize } from './dialog.types.js';
+
+	function resolveSize(value: DialogSize | undefined): DialogSize {
+		return value === 'xs' || value === 'sm' || value === 'md' || value === 'lg' || value === 'xl'
+			? value
+			: 'md';
+	}
+
+	function resolvePosition(value: DialogPosition | undefined): DialogPosition {
+		return value === 'top' || value === 'center' || value === 'bottom' ? value : 'center';
+	}
+
+	function resolveDensity(value: DialogDensity | undefined): DialogDensity {
+		return value === 'compact' || value === 'comfortable' || value === 'default'
+			? value
+			: 'default';
+	}
+
+	let {
+		ref = $bindable(),
+		children = undefined,
+		class: className = '',
+		style: styleAttr = '',
+		's-class': sClass,
+		's-style': sStyle,
+		open = $bindable(false),
+		persistent = false,
+		size = 'md',
+		position = 'center',
+		density = 'default',
+		rounded = 'md',
+		classContent = '',
+		color = undefined,
+		background = undefined,
+		...rest
+	}: DialogProps = $props();
+
+	let { classProps, styleProps, restProps } = $derived(
+		makeComponentProps(rest as Record<string, unknown>)
+	);
+
+	let componentClass = $derived(
+		useClassName({
+			baseClass: 'kit-dialog',
+			className: `${className ?? ''}`.trim(),
+			sClass,
+			classProps
+		})
+	);
+
+	let componentStyle = $derived(
+		useStyles({
+			styleAttr,
+			sStyle,
+			styleProps
+		})
+	);
+
+	let contentClass = $derived(
+		Array.isArray(classContent)
+			? classContent.filter(Boolean).join(' ')
+			: `${classContent ?? ''}`.trim()
+	);
+
+	let safeSize = $derived(resolveSize(size));
+	let safePosition = $derived(resolvePosition(position));
+	let safeDensity = $derived(resolveDensity(density));
+	let mergedStyle = $derived(
+		[
+			componentStyle,
+			color ? `--kit-dialog-fg:${color}` : '',
+			background ? `--kit-dialog-bg:${background}` : ''
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
+
+	$effect(() => {
+		if (!ref) return;
+
+		if (open && !ref.open) {
+			ref.showModal();
+		}
+
+		if (!open && ref.open) {
+			ref.close();
+		}
+
+		disabledScroll(open);
+
+		return () => {
+			disabledScroll(false);
+		};
+	});
+
+	function handleClose() {
+		if (!persistent) {
+			open = false;
+			return;
+		}
+
+		if (ref && !ref.open && open) {
+			ref.showModal();
+		}
+	}
+
+	function handleCancel(event: Event) {
+		if (persistent) {
+			event.preventDefault();
+			return;
+		}
+
+		open = false;
+	}
+
+	function handleBackdropClick(event: MouseEvent) {
+		if (event.target !== ref || persistent) return;
+		open = false;
+	}
+</script>
+
+<dialog
+	bind:this={ref}
+	class={componentClass}
+	style={mergedStyle}
+	data-size={safeSize}
+	data-position={safePosition}
+	data-persistent={persistent}
+	onclose={handleClose}
+	oncancel={handleCancel}
+	onclick={handleBackdropClick}
+>
+	<div
+		{...restProps}
+		class={['kit-dialog__content', contentClass]}
+		data-density={safeDensity}
+		data-rounded={rounded}
+		onclick={(event: MouseEvent) => event.stopPropagation()}
+	>
+		{@render children?.()}
+	</div>
+</dialog>
+
+<style>
+	.kit-dialog {
+		--kit-dialog-bg: var(--kit-surface-1);
+		--kit-dialog-fg: var(--kit-fg);
+		--kit-dialog-bd: var(--kit-border);
+		--kit-dialog-radius: 12px;
+		--kit-dialog-px: 1rem;
+		--kit-dialog-py: 1rem;
+		--kit-dialog-max: min(32rem, calc(100vw - 2rem));
+
+		border: 0;
+		padding: 0;
+		margin: auto;
+		width: 100%;
+		max-width: none;
+		background: transparent;
+		color: inherit;
+		overflow: visible;
+	}
+
+	.kit-dialog::backdrop {
+		background: rgb(15 23 42 / 0.42);
+		backdrop-filter: blur(2px);
+	}
+
+	.kit-dialog[data-position='top'] {
+		margin-top: 1rem;
+		margin-bottom: auto;
+	}
+
+	.kit-dialog[data-position='center'] {
+		margin-top: auto;
+		margin-bottom: auto;
+	}
+
+	.kit-dialog[data-position='bottom'] {
+		margin-top: auto;
+		margin-bottom: 1rem;
+	}
+
+	.kit-dialog[data-size='xs'] {
+		--kit-dialog-max: min(20rem, calc(100vw - 2rem));
+	}
+
+	.kit-dialog[data-size='sm'] {
+		--kit-dialog-max: min(24rem, calc(100vw - 2rem));
+	}
+
+	.kit-dialog[data-size='md'] {
+		--kit-dialog-max: min(32rem, calc(100vw - 2rem));
+	}
+
+	.kit-dialog[data-size='lg'] {
+		--kit-dialog-max: min(42rem, calc(100vw - 2rem));
+	}
+
+	.kit-dialog[data-size='xl'] {
+		--kit-dialog-max: min(56rem, calc(100vw - 2rem));
+	}
+
+	.kit-dialog__content {
+		box-sizing: border-box;
+		width: min(100%, var(--kit-dialog-max));
+		max-height: calc(100dvh - 2rem);
+		overflow: auto;
+		padding: var(--kit-dialog-py) var(--kit-dialog-px);
+		border: 1px solid var(--kit-dialog-bd);
+		border-radius: var(--kit-dialog-radius);
+		background: var(--kit-dialog-bg);
+		color: var(--kit-dialog-fg);
+		margin: 0 auto;
+		box-shadow:
+			0 20px 50px rgb(15 23 42 / 0.18),
+			0 4px 16px rgb(15 23 42 / 0.1);
+	}
+
+	.kit-dialog__content[data-density='compact'] {
+		--kit-dialog-px: 0.75rem;
+		--kit-dialog-py: 0.75rem;
+	}
+
+	.kit-dialog__content[data-density='default'] {
+		--kit-dialog-px: 1rem;
+		--kit-dialog-py: 1rem;
+	}
+
+	.kit-dialog__content[data-density='comfortable'] {
+		--kit-dialog-px: 1.25rem;
+		--kit-dialog-py: 1.25rem;
+	}
+
+	.kit-dialog__content[data-rounded='0'] {
+		--kit-dialog-radius: 0;
+	}
+
+	.kit-dialog__content[data-rounded='xs'] {
+		--kit-dialog-radius: 2px;
+	}
+
+	.kit-dialog__content[data-rounded='sm'] {
+		--kit-dialog-radius: 6px;
+	}
+
+	.kit-dialog__content[data-rounded='md'] {
+		--kit-dialog-radius: 12px;
+	}
+
+	.kit-dialog__content[data-rounded='lg'] {
+		--kit-dialog-radius: 18px;
+	}
+
+	.kit-dialog__content[data-rounded='xl'] {
+		--kit-dialog-radius: 9999px;
+	}
+</style>

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

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

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

@@ -0,0 +1,16 @@
+import type { Component, RoundedType } from '../../utils/types/index.js';
+export type DialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type DialogPosition = 'top' | 'center' | 'bottom';
+export type DialogDensity = 'compact' | 'comfortable' | 'default';
+export interface DialogProps extends Component {
+    ref?: HTMLDialogElement | null;
+    open?: boolean;
+    persistent?: boolean;
+    size?: DialogSize;
+    position?: DialogPosition;
+    density?: DialogDensity;
+    rounded?: RoundedType;
+    classContent?: string | string[] | undefined;
+    color?: string;
+    background?: string;
+}

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

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

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

@@ -1,10 +1,17 @@
 export { default as KitSheet } from './sheet/sheet.svelte';
 export { default as KitApp } from './app/app.svelte';
+export { default as KitAppbar } from './appbar/appbar.svelte';
 export { default as KitBtn } from './btn/btn.svelte';
 export { default as KitIcon } from './icon/icon.svelte';
 export { default as KitCard } from './card/card.svelte';
 export { default as KitChip } from './chip/chip.svelte';
 export { default as KitAvatar } from './avatar/avatar.svelte';
+export { default as KitTextfield } from './textfield/textfield.svelte';
+export { default as KitToolbar } from './toolbar/toolbar.svelte';
+export { default as KitList } from './list/list.svelte';
+export { default as KitListItem } from './list/modules/list-item.svelte';
+export { default as KitDialog } from './dialog/dialog.svelte';
+export { default as KitModal } from './modal/modal.svelte';
 export { default as KitAccordion } from './accordion/accordion.svelte';
 export { default as KitAccordionItem } from './accordion/modules/accordion-item.svelte';
 export { default as KitAlert } from './alert/alert.svelte';

package/dist/labs/components/index.js

@@ -1,11 +1,18 @@
 // components
 export { default as KitSheet } from './sheet/sheet.svelte';
 export { default as KitApp } from './app/app.svelte';
+export { default as KitAppbar } from './appbar/appbar.svelte';
 export { default as KitBtn } from './btn/btn.svelte';
 export { default as KitIcon } from './icon/icon.svelte';
 export { default as KitCard } from './card/card.svelte';
 export { default as KitChip } from './chip/chip.svelte';
 export { default as KitAvatar } from './avatar/avatar.svelte';
+export { default as KitTextfield } from './textfield/textfield.svelte';
+export { default as KitToolbar } from './toolbar/toolbar.svelte';
+export { default as KitList } from './list/list.svelte';
+export { default as KitListItem } from './list/modules/list-item.svelte';
+export { default as KitDialog } from './dialog/dialog.svelte';
+export { default as KitModal } from './modal/modal.svelte';
 export { default as KitAccordion } from './accordion/accordion.svelte';
 export { default as KitAccordionItem } from './accordion/modules/accordion-item.svelte';
 export { default as KitAlert } from './alert/alert.svelte';