lapikit 0.4.12 → 0.4.14

package/dist/components/dropdown/dropdown.svelte.js

@@ -0,0 +1,148 @@
+import { innerWidth, innerHeight } from 'svelte/reactivity/window';
+export function getPositions() {
+    // state
+    const axis = $state({
+        x: 0,
+        y: 0,
+        location: null
+    });
+    return {
+        get values() {
+            return axis;
+        },
+        update(activator, element, location, centered, avoidCollisions) {
+            if (!activator || !element)
+                return;
+            const elementRect = element.getBoundingClientRect();
+            if (!(activator instanceof HTMLElement)) {
+                if (activator.clientX + elementRect.width > innerWidth.current) {
+                    axis.x = activator.clientX - elementRect.width;
+                }
+                else {
+                    axis.x = activator.clientX;
+                }
+                if (activator.clientY + elementRect.height > innerHeight.current) {
+                    axis.y = activator.clientY - elementRect.height;
+                }
+                else {
+                    axis.y = activator.clientY;
+                }
+            }
+            else if (activator instanceof HTMLElement) {
+                const activatorRect = activator.getBoundingClientRect();
+                const spacing = 0;
+                const _activator = activatorRect.y + activatorRect.height;
+                const _element = elementRect.height + spacing;
+                if (location === 'top' || location === 'bottom') {
+                    if (avoidCollisions) {
+                        if (location === 'top') {
+                            if (activatorRect.y - _element < 0) {
+                                axis.y = activatorRect.bottom + spacing;
+                                axis.location = 'bottom';
+                            }
+                            else {
+                                axis.y = activatorRect.top - _element;
+                                axis.location = 'top';
+                            }
+                        }
+                        else {
+                            if (_activator + _element > innerHeight.current) {
+                                axis.y = activatorRect.top - _element;
+                                axis.location = 'top';
+                            }
+                            else {
+                                axis.y = activatorRect.bottom + spacing;
+                                axis.location = 'bottom';
+                            }
+                        }
+                    }
+                    else {
+                        if (location === 'top') {
+                            axis.y = activatorRect.top - _element;
+                            axis.location = 'top';
+                        }
+                        else {
+                            axis.y = activatorRect.bottom + spacing;
+                            axis.location = 'bottom';
+                        }
+                    }
+                    if (centered &&
+                        activatorRect.left - (elementRect.width - activatorRect.width) / 2 > 0 &&
+                        activatorRect.left + elementRect.width < innerWidth.current) {
+                        axis.x = activatorRect.left - (elementRect.width - activatorRect.width) / 2;
+                    }
+                    else if (activatorRect.left + elementRect.width > innerWidth.current) {
+                        axis.x = activatorRect.left - (elementRect.width - activatorRect.width);
+                    }
+                    else {
+                        axis.x = activatorRect.left;
+                    }
+                }
+                else if (location === 'left' || location === 'right') {
+                    if (avoidCollisions) {
+                        if (location === 'left' && !(activatorRect.left - elementRect.width < 0)) {
+                            axis.x = activatorRect.left - (elementRect.width + spacing);
+                            axis.location = 'left';
+                        }
+                        else {
+                            if (activatorRect.left + activatorRect.width + elementRect.width + spacing >
+                                innerWidth.current) {
+                                axis.x = activatorRect.left - (elementRect.width + spacing);
+                                axis.location = 'left';
+                            }
+                            else {
+                                axis.x = activatorRect.left + activatorRect.width + spacing;
+                                axis.location = 'right';
+                            }
+                        }
+                    }
+                    else {
+                        if (location === 'left') {
+                            axis.x = activatorRect.left - (elementRect.width + spacing);
+                            axis.location = 'left';
+                        }
+                        else {
+                            axis.x = activatorRect.left + activatorRect.width + spacing;
+                            axis.location = 'right';
+                        }
+                    }
+                    if (centered &&
+                        activatorRect.top - (elementRect.height - activatorRect.height) / 2 > 0 &&
+                        activatorRect.top + elementRect.height < innerHeight.current) {
+                        axis.y = activatorRect.top - (elementRect.height - activatorRect.height) / 2;
+                    }
+                    else if (activatorRect.y + elementRect.height > innerHeight.current) {
+                        axis.y = activatorRect.y - elementRect.height + activatorRect.height;
+                    }
+                    else {
+                        axis.y = activatorRect.y;
+                    }
+                }
+                else {
+                    if (centered &&
+                        activatorRect.left - (elementRect.width - activatorRect.width) / 2 > 0 &&
+                        activatorRect.left + elementRect.width < innerWidth.current) {
+                        axis.x = activatorRect.left - (elementRect.width - activatorRect.width) / 2;
+                    }
+                    else if (activatorRect.left + elementRect.width > innerWidth.current) {
+                        axis.x = activatorRect.left - (elementRect.width - activatorRect.width);
+                    }
+                    else {
+                        axis.x = activatorRect.left;
+                    }
+                    if (centered &&
+                        activatorRect.top - (elementRect.height - activatorRect.height) / 2 > 0 &&
+                        activatorRect.top + elementRect.height < innerHeight.current) {
+                        axis.y = activatorRect.top - (elementRect.height - activatorRect.height) / 2;
+                    }
+                    else if (activatorRect.bottom + elementRect.height > innerHeight.current) {
+                        axis.y = activatorRect.top - elementRect.height;
+                    }
+                    else {
+                        axis.y = activatorRect.bottom;
+                    }
+                }
+            }
+        }
+    };
+}

package/dist/components/dropdown/dropdown.types.d.ts

@@ -0,0 +1,28 @@
+import type { Component, PropValue, RoundedType } from '../../utils/types/index';
+import type { Snippet } from 'svelte';
+export type PositionElement = {
+    x: number;
+    y: number;
+    location: 'top' | 'bottom' | 'left' | 'right' | null;
+};
+export type ModelDropdownProps = {
+    open: boolean;
+    close: () => void;
+    toggle: (element: HTMLElement | PointerEvent | null) => void;
+};
+export interface DropdownProps extends Component {
+    ref?: HTMLElement | null;
+    dark?: boolean;
+    light?: boolean;
+    rounded?: RoundedType | string;
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    openOnHover?: boolean;
+    closeOnClick?: boolean;
+    color?: string;
+    background?: string;
+    activator?: Snippet<[
+        ModelDropdownProps,
+        (state: 'open' | 'close', element: HTMLElement | PointerEvent | null) => void
+    ]>;
+    [key: string]: PropValue | Record<string, PropValue> | unknown;
+}

package/dist/components/icon/icon.svelte

@@ -1,49 +1,186 @@
 <script lang="ts">
-	import { getAssets } from '../../internal/core/actions/assets.svelte.js';
-	import type { IconProps } from './types.js';
+	import { useClassName, useStyles } from '../../utils';
+	import { makeComponentProps } from '../../compiler/mapped-code';
+	import type { IconProps } from './icon.types.js';
+
 	let {
-		children,
 		ref = $bindable(),
 		is = 'i',
-		light,
-		dark,
-		icon,
-		size = 'md',
-		error,
-		info,
-		success,
-		warning,
-		disabled,
-		alt,
-		color,
+		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();
 
-	const assets = getAssets();
+	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>
 
-<svelte:element
-	this={icon && icon.includes('/') ? 'div' : is}
-	bind:this={ref}
-	{...rest}
-	class={[
-		'kit-icon',
-		icon && !icon.includes('/') && icon,
-		light && 'light',
-		dark && 'dark',
-		info && 'kit-icon--info',
-		success && 'kit-icon--success',
-		warning && 'kit-icon--warning',
-		error && 'kit-icon--error',
-		disabled && 'kit-icon--disabled',
-		size && assets.className('icon', 'size', size),
-		rest.class
-	]}
-	style:--icon-color={assets.color(color)}
->
-	{#if icon && icon.includes('/')}
-		<img src={icon} {alt} />
-	{:else}
-		{@render children?.()}
-	{/if}
-</svelte:element>
+{#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/components/icon/icon.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { IconProps } from './types.js';
+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 → components}/icon/icon.types.d.ts

@@ -1,4 +1,4 @@
-import type { Component, SizeType } from '../../utils/types/index.js';
+import type { Component, SizeType } from '../../utils/types';
 export interface IconProps extends Component {
     ref?: HTMLElement | null;
     name?: string;

package/dist/components/index.d.ts

@@ -1,22 +1,23 @@
-export { default as App } from './app/app.svelte';
-export { default as Button } from './button/button.svelte';
-export { default as Icon } from './icon/icon.svelte';
-export { default as Dropdown } from './dropdown/dropdown.svelte';
-export { default as Popover } from './popover/popover.svelte';
-export { default as Tooltip } from './tooltip/tooltip.svelte';
-export { default as Dialog } from './dialog/dialog.svelte';
-export { default as Separator } from './separator/separator.svelte';
-export { default as Modal } from './modal/modal.svelte';
-export { default as List } from './list/list.svelte';
-export { default as ListItem } from './list/modules/list-item.svelte';
-export { default as Avatar } from './avatar/avatar.svelte';
-export { default as Accordion } from './accordion/accordion.svelte';
-export { default as AccordionItem } from './accordion/modules/accordion-item.svelte';
-export { default as AspectRatio } from './aspect-ratio/aspect-ratio.svelte';
-export { default as Alert } from './alert/alert.svelte';
-export { default as Chip } from './chip/chip.svelte';
-export { default as Card } from './card/card.svelte';
-export { default as Toolbar } from './toolbar/toolbar.svelte';
-export { default as Appbar } from './appbar/appbar.svelte';
-export { default as Spacer } from './spacer/spacer.svelte';
-export { default as Textfield } from './textfield/textfield.svelte';
+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';
+export { default as KitAccordionItem } from './accordion/modules/accordion-item.svelte';
+export { default as KitAlert } from './alert/alert.svelte';
+export { default as KitAspectRatio } from './aspect-ratio/aspect-ratio.svelte';
+export { default as KitSpacer } from './spacer/spacer.svelte';
+export { default as KitSeparator } from './separator/separator.svelte';

package/dist/components/index.js

@@ -1,23 +1,24 @@
 // components
-export { default as App } from './app/app.svelte';
-export { default as Button } from './button/button.svelte';
-export { default as Icon } from './icon/icon.svelte';
-export { default as Dropdown } from './dropdown/dropdown.svelte';
-export { default as Popover } from './popover/popover.svelte';
-export { default as Tooltip } from './tooltip/tooltip.svelte';
-export { default as Dialog } from './dialog/dialog.svelte';
-export { default as Separator } from './separator/separator.svelte';
-export { default as Modal } from './modal/modal.svelte';
-export { default as List } from './list/list.svelte';
-export { default as ListItem } from './list/modules/list-item.svelte';
-export { default as Avatar } from './avatar/avatar.svelte';
-export { default as Accordion } from './accordion/accordion.svelte';
-export { default as AccordionItem } from './accordion/modules/accordion-item.svelte';
-export { default as AspectRatio } from './aspect-ratio/aspect-ratio.svelte';
-export { default as Alert } from './alert/alert.svelte';
-export { default as Chip } from './chip/chip.svelte';
-export { default as Card } from './card/card.svelte';
-export { default as Toolbar } from './toolbar/toolbar.svelte';
-export { default as Appbar } from './appbar/appbar.svelte';
-export { default as Spacer } from './spacer/spacer.svelte';
-export { default as Textfield } from './textfield/textfield.svelte';
+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';
+export { default as KitAccordionItem } from './accordion/modules/accordion-item.svelte';
+export { default as KitAlert } from './alert/alert.svelte';
+export { default as KitAspectRatio } from './aspect-ratio/aspect-ratio.svelte';
+export { default as KitSpacer } from './spacer/spacer.svelte';
+export { default as KitSeparator } from './separator/separator.svelte';