lapikit 0.4.11 → 0.4.13

package/dist/labs/components/index.js

@@ -1,11 +1,19 @@
 // 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 KitDropdown } from './dropdown/dropdown.svelte';
+export { default as KitPopover } from './popover/popover.svelte';
+export { default as KitTooltip } from './tooltip/tooltip.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';

package/dist/labs/components/list/list.svelte

@@ -0,0 +1,190 @@
+<script lang="ts">
+	import { makeComponentProps } from '../../compiler/mapped-code.js';
+	import { useClassName, useStyles } from '../../utils/index.js';
+	import type { ListDensity, ListProps, ListVariant } from './list.types.js';
+
+	function resolveVariant(value: ListVariant | undefined): ListVariant {
+		return value === 'filled' || value === 'outline' || value === 'text' ? value : 'filled';
+	}
+
+	function resolveDensity(value: ListDensity | undefined): ListDensity {
+		return value === 'compact' || value === 'comfortable' || value === 'default'
+			? value
+			: 'default';
+	}
+
+	let {
+		ref = $bindable(),
+		is = 'div',
+		children = undefined,
+		class: className = '',
+		style: styleAttr = '',
+		's-class': sClass,
+		's-style': sStyle,
+		size = 'md',
+		variant = 'filled',
+		density = 'default',
+		rounded = 'md',
+		nav = false,
+		color = undefined,
+		background = undefined,
+		...rest
+	}: ListProps = $props();
+
+	let { classProps, styleProps, restProps } = $derived(
+		makeComponentProps(rest as Record<string, unknown>)
+	);
+
+	let componentClass = $derived(
+		useClassName({
+			baseClass: 'kit-list',
+			className: `${className ?? ''}`.trim(),
+			sClass,
+			classProps
+		})
+	);
+
+	let componentStyle = $derived(
+		useStyles({
+			styleAttr,
+			sStyle,
+			styleProps
+		})
+	);
+
+	let safeVariant = $derived(resolveVariant(variant));
+	let safeDensity = $derived(resolveDensity(density));
+	let safeSize = $derived(
+		size === 'default'
+			? 'md'
+			: size === 'xs' || size === 'sm' || size === 'md' || size === 'lg' || size === 'xl'
+				? size
+				: 'md'
+	);
+	let mergedStyle = $derived(
+		[
+			componentStyle,
+			color ? `--kit-list-fg:${color}` : '',
+			background ? `--kit-list-bg:${background}` : ''
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
+</script>
+
+<svelte:element
+	this={is}
+	bind:this={ref}
+	class={componentClass}
+	style={mergedStyle}
+	data-size={safeSize}
+	data-variant={safeVariant}
+	data-density={safeDensity}
+	data-rounded={rounded}
+	data-nav={nav}
+	role={nav ? 'navigation' : is === 'ul' ? undefined : 'list'}
+	{...restProps}
+>
+	{@render children?.()}
+</svelte:element>
+
+<style>
+	.kit-list {
+		--kit-list-bg: var(--kit-surface-1);
+		--kit-list-fg: var(--kit-fg);
+		--kit-list-bd: var(--kit-border);
+		--kit-list-radius: 10px;
+		--kit-list-item-h: 2.75rem;
+		--kit-list-item-px: 0.875rem;
+		--kit-list-item-gap: 0.625rem;
+		--kit-list-item-font: 0.9375rem;
+
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		padding: 0.25rem;
+		gap: 0.125rem;
+		color: var(--kit-list-fg);
+		background: transparent;
+		border-radius: var(--kit-list-radius);
+	}
+
+	.kit-list[data-nav='true'] {
+		padding: 0.5rem;
+	}
+
+	.kit-list[data-size='xs'] {
+		--kit-list-item-h: 2.125rem;
+		--kit-list-item-px: 0.625rem;
+		--kit-list-item-gap: 0.5rem;
+		--kit-list-item-font: 0.75rem;
+	}
+
+	.kit-list[data-size='sm'] {
+		--kit-list-item-h: 2.375rem;
+		--kit-list-item-px: 0.75rem;
+		--kit-list-item-gap: 0.5rem;
+		--kit-list-item-font: 0.875rem;
+	}
+
+	.kit-list[data-size='md'] {
+		--kit-list-item-h: 2.75rem;
+		--kit-list-item-px: 0.875rem;
+		--kit-list-item-gap: 0.625rem;
+		--kit-list-item-font: 0.9375rem;
+	}
+
+	.kit-list[data-size='lg'] {
+		--kit-list-item-h: 3.125rem;
+		--kit-list-item-px: 1rem;
+		--kit-list-item-gap: 0.75rem;
+		--kit-list-item-font: 1rem;
+	}
+
+	.kit-list[data-size='xl'] {
+		--kit-list-item-h: 3.5rem;
+		--kit-list-item-px: 1.125rem;
+		--kit-list-item-gap: 0.875rem;
+		--kit-list-item-font: 1.0625rem;
+	}
+
+	.kit-list[data-density='compact'] {
+		--kit-list-item-h: calc(var(--kit-list-item-h) - 0.25rem);
+	}
+
+	.kit-list[data-density='comfortable'] {
+		--kit-list-item-h: calc(var(--kit-list-item-h) + 0.25rem);
+	}
+
+	.kit-list[data-rounded='0'] {
+		--kit-list-radius: 0;
+	}
+
+	.kit-list[data-rounded='xs'] {
+		--kit-list-radius: 2px;
+	}
+
+	.kit-list[data-rounded='sm'] {
+		--kit-list-radius: 6px;
+	}
+
+	.kit-list[data-rounded='md'] {
+		--kit-list-radius: 10px;
+	}
+
+	.kit-list[data-rounded='lg'] {
+		--kit-list-radius: 16px;
+	}
+
+	.kit-list[data-rounded='xl'] {
+		--kit-list-radius: 9999px;
+	}
+
+	.kit-list[data-variant='filled'] {
+		background: color-mix(in oklab, var(--kit-list-bg), transparent 12%);
+	}
+
+	.kit-list[data-variant='outline'] {
+		border: 1px solid var(--kit-list-bd);
+	}
+</style>

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

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

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

@@ -0,0 +1,30 @@
+import type { Snippet } from 'svelte';
+import type { Component, RoundedType, SizeType } from '../../utils/types/index.js';
+export type ListVariant = 'filled' | 'outline' | 'text';
+export type ListDensity = 'compact' | 'comfortable' | 'default';
+export type ListElement = 'div' | 'nav' | 'ul';
+export type ListItemElement = 'div' | 'a' | 'button' | 'li';
+export interface ListProps extends Component {
+    ref?: HTMLElement | null;
+    is?: ListElement;
+    size?: SizeType;
+    variant?: ListVariant;
+    density?: ListDensity;
+    rounded?: RoundedType;
+    nav?: boolean;
+    color?: string;
+    background?: string;
+}
+export interface ListItemProps extends Component {
+    ref?: HTMLElement | null;
+    is?: ListItemElement;
+    href?: string;
+    append?: Snippet;
+    prepend?: Snippet;
+    color?: string;
+    background?: string;
+    rounded?: RoundedType;
+    active?: boolean;
+    disabled?: boolean;
+    noRipple?: boolean;
+}

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

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

package/dist/labs/components/list/modules/list-item.svelte

@@ -0,0 +1,195 @@
+<script lang="ts">
+	import { ripple } from '../../../animations/index.js';
+	import { makeComponentProps } from '../../../compiler/mapped-code.js';
+	import { useClassName, useStyles } from '../../../utils/index.js';
+	import type { ListItemProps } from '../list.types.js';
+
+	let {
+		ref = $bindable(),
+		is = 'div',
+		children = undefined,
+		class: className = '',
+		style: styleAttr = '',
+		's-class': sClass,
+		's-style': sStyle,
+		append = undefined,
+		prepend = undefined,
+		href = undefined,
+		color = undefined,
+		background = undefined,
+		rounded = 'sm',
+		active = false,
+		disabled = false,
+		noRipple = false,
+		...rest
+	}: ListItemProps = $props();
+
+	let { classProps, styleProps, restProps } = $derived(
+		makeComponentProps(rest as Record<string, unknown>)
+	);
+
+	let tag = $derived(href ? 'a' : is === 'div' && restProps.onclick ? 'button' : is);
+	let isInteractive = $derived(tag !== 'div' && tag !== 'li' && !disabled);
+
+	let componentClass = $derived(
+		useClassName({
+			baseClass: 'kit-list-item',
+			className: `${className ?? ''}`.trim(),
+			sClass,
+			classProps
+		})
+	);
+
+	let componentStyle = $derived(
+		useStyles({
+			styleAttr,
+			sStyle,
+			styleProps
+		})
+	);
+
+	let mergedStyle = $derived(
+		[
+			componentStyle,
+			color ? `--kit-list-item-fg:${color}` : '',
+			background ? `--kit-list-item-bg:${background}` : ''
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
+</script>
+
+<svelte:element
+	this={tag}
+	bind:this={ref}
+	class={componentClass}
+	style={mergedStyle}
+	href={href && !disabled ? href : undefined}
+	data-active={active}
+	data-disabled={disabled}
+	data-rounded={rounded}
+	aria-disabled={disabled || undefined}
+	disabled={tag === 'button' ? disabled : undefined}
+	tabindex={href && disabled ? -1 : undefined}
+	role={tag === 'div' ? 'listitem' : undefined}
+	use:ripple={{
+		component: 'list-item',
+		disabled: noRipple || !isInteractive
+	}}
+	{...restProps}
+>
+	{#if prepend}
+		<span class="kit-list-item__prepend">
+			{@render prepend?.()}
+		</span>
+	{/if}
+
+	<span class="kit-list-item__content">
+		{@render children?.()}
+	</span>
+
+	{#if append}
+		<span class="kit-list-item__append">
+			{@render append?.()}
+		</span>
+	{/if}
+</svelte:element>
+
+<style>
+	.kit-list-item {
+		--kit-list-item-bg: transparent;
+		--kit-list-item-fg: inherit;
+		--list-item-shape: 8px;
+
+		position: relative;
+		display: grid;
+		grid-template-columns: auto minmax(0, 1fr) auto;
+		align-items: center;
+		gap: var(--kit-list-item-gap, 0.625rem);
+		min-height: var(--kit-list-item-h, 2.75rem);
+		padding-inline: var(--kit-list-item-px, 0.875rem);
+		border: 0;
+		border-radius: var(--list-item-shape);
+		background: var(--kit-list-item-bg);
+		color: var(--kit-list-item-fg);
+		text-decoration: none;
+		font: inherit;
+		font-size: var(--kit-list-item-font, 0.9375rem);
+		text-align: left;
+	}
+
+	.kit-list-item[data-rounded='0'] {
+		--list-item-shape: 0;
+	}
+
+	.kit-list-item[data-rounded='xs'] {
+		--list-item-shape: 2px;
+	}
+
+	.kit-list-item[data-rounded='sm'] {
+		--list-item-shape: 8px;
+	}
+
+	.kit-list-item[data-rounded='md'] {
+		--list-item-shape: 12px;
+	}
+
+	.kit-list-item[data-rounded='lg'] {
+		--list-item-shape: 16px;
+	}
+
+	.kit-list-item[data-rounded='xl'] {
+		--list-item-shape: 9999px;
+	}
+
+	.kit-list[data-variant='filled'] .kit-list-item {
+		background: var(--kit-list-item-bg, transparent);
+	}
+
+	.kit-list[data-variant='outline'] .kit-list-item::before {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border: 1px solid color-mix(in oklab, currentColor 16%, transparent);
+		border-radius: inherit;
+		pointer-events: none;
+	}
+
+	.kit-list-item[data-active='true'] {
+		background: color-mix(in oklab, currentColor 12%, transparent);
+	}
+
+	.kit-list-item[data-disabled='true'] {
+		opacity: 0.45;
+		pointer-events: none;
+	}
+
+	.kit-list-item:is(button, a) {
+		cursor: pointer;
+	}
+
+	.kit-list-item__prepend,
+	.kit-list-item__append,
+	.kit-list-item__content {
+		display: inline-flex;
+		align-items: center;
+		min-width: 0;
+	}
+
+	.kit-list-item__content {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.kit-list-item:is(button, a):hover::after,
+	.kit-list-item:is(button, a):focus-visible::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		background: currentColor;
+		opacity: 0.06;
+		pointer-events: none;
+	}
+</style>

package/dist/labs/components/list/modules/list-item.svelte.d.ts

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

package/dist/labs/components/popover/popover.svelte

@@ -0,0 +1,188 @@
+<script lang="ts">
+	import { useClassName, useStyles, clickOutside } from '../../utils/index.js';
+	import { makeComponentProps } from '../../compiler/mapped-code.js';
+	import { getPositions } from './popover.svelte.js';
+	import type { ModelPopoverProps, PopoverProps } from './popover.types.js';
+
+	let {
+		ref = $bindable(),
+		open = $bindable(false),
+		children,
+		activator,
+		dark = false,
+		light = false,
+		rounded,
+		position = 'bottom',
+		color,
+		background,
+		class: className = '',
+		style: styleAttr = '',
+		's-class': sClass,
+		's-style': sStyle,
+		...rest
+	}: PopoverProps = $props();
+
+	let safePosition = $derived(
+		position === 'top' || position === 'bottom' || position === 'left' || position === 'right'
+			? position
+			: 'bottom'
+	);
+
+	let { classProps, styleProps, restProps } = $derived(
+		makeComponentProps(rest as Record<string, unknown>)
+	);
+
+	let componentClass = $derived(
+		useClassName({
+			baseClass: 'kit-popover-content',
+			className: `${className ?? ''}`.trim(),
+			sClass,
+			classProps
+		})
+	);
+
+	let componentStyle = $derived(
+		useStyles({
+			styleAttr,
+			sStyle,
+			styleProps
+		})
+	);
+
+	let mergedStyle = $derived(
+		[
+			componentStyle,
+			background ? `--kit-popover-background:${background}` : '',
+			color ? `--kit-popover-color:${color}` : '',
+			typeof rounded === 'string' && rounded.includes('px') ? `--kit-popover-radius:${rounded}` : ''
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
+
+	const positioner = getPositions();
+
+	let contentRef = $state<HTMLElement | null>(null);
+	let activatorRef = $state<HTMLElement | null>(null);
+	let axis = $state(positioner.values);
+	let innerHeight = $state(0);
+	let innerWidth = $state(0);
+	let scrollX = $state(0);
+	let scrollY = $state(0);
+
+	const handleToggle = (element: HTMLElement | null) => {
+		if (element === null) return;
+		activatorRef = element;
+		open = !open;
+	};
+
+	let model: ModelPopoverProps = {
+		toggle: (element) => handleToggle(element)
+	};
+
+	const updatePosition = () => {
+		if (!contentRef || !activatorRef) return;
+		positioner.update(activatorRef, contentRef, safePosition, false, true);
+		axis = positioner.values;
+	};
+
+	$effect(() => {
+		if (open && contentRef && activatorRef) {
+			updatePosition();
+		}
+	});
+
+	$effect(() => {
+		if (
+			open &&
+			contentRef &&
+			activatorRef &&
+			(scrollX > 0 || scrollY > 0 || innerHeight > 0 || innerWidth > 0)
+		) {
+			updatePosition();
+		}
+	});
+
+	$effect(() => {
+		if (scrollX || scrollY) open = false;
+	});
+
+	$effect(() => {
+		ref = contentRef;
+	});
+</script>
+
+<svelte:window bind:innerHeight bind:innerWidth bind:scrollX bind:scrollY />
+
+{@render activator?.(model)}
+
+{#if open}
+	<div
+		bind:this={contentRef}
+		class={componentClass}
+		style={`left:${axis.x}px; top:${axis.y}px; ${mergedStyle}`}
+		role="dialog"
+		data-light={light || undefined}
+		data-dark={dark || undefined}
+		data-rounded={rounded}
+		data-position={axis.location ?? safePosition}
+		use:clickOutside={{ exclude: [contentRef, activatorRef], onClose: () => (open = false) }}
+		{...restProps}
+	>
+		{@render children?.()}
+	</div>
+{/if}
+
+<style>
+	.kit-popover-content {
+		--kit-popover-background: var(--kit-surface-1);
+		--kit-popover-color: var(--kit-fg);
+		--kit-popover-radius: 12px;
+		--kit-popover-border: color-mix(in oklab, var(--kit-fg), transparent 88%);
+		--kit-popover-shadow: 0 18px 40px -18px color-mix(in oklab, black 24%, transparent);
+
+		position: fixed;
+		z-index: 1900;
+		display: inline-block;
+		width: auto;
+		max-width: min(28rem, calc(100vw - 1rem));
+		padding: 1rem;
+		border: 1px solid var(--kit-popover-border);
+		border-radius: var(--kit-popover-radius);
+		background: var(--kit-popover-background);
+		color: var(--kit-popover-color);
+		box-shadow: var(--kit-popover-shadow);
+		opacity: 1;
+		transition: opacity 140ms ease;
+	}
+
+	.kit-popover-content[data-light='true'] {
+		--kit-popover-background: color-mix(in oklab, white 94%, var(--kit-surface-1));
+		--kit-popover-color: var(--kit-fg);
+	}
+
+	.kit-popover-content[data-dark='true'] {
+		--kit-popover-background: color-mix(in oklab, black 78%, var(--kit-surface-3));
+		--kit-popover-color: white;
+		--kit-popover-border: color-mix(in oklab, white, transparent 80%);
+	}
+
+	.kit-popover-content[data-rounded='0'] {
+		--kit-popover-radius: 0;
+	}
+	.kit-popover-content[data-rounded='xs'] {
+		--kit-popover-radius: 2px;
+	}
+	.kit-popover-content[data-rounded='sm'] {
+		--kit-popover-radius: 4px;
+	}
+	.kit-popover-content[data-rounded='md'] {
+		--kit-popover-radius: 8px;
+	}
+	.kit-popover-content[data-rounded='lg'] {
+		--kit-popover-radius: 16px;
+	}
+	.kit-popover-content[data-rounded='xl'] {
+		--kit-popover-radius: 99999px;
+	}
+</style>

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

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