lapikit 0.4.3 → 0.4.4

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', 'app', 'btn'];
+const lapikitComponents = ['sheet', 'app', 'btn', 'icon'];
 export default lapikitComponents;

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

@@ -16,7 +16,7 @@
 		density = 'default',
 		loading,
 		active = false,
-		size = 'md',
+		size = 'default',
 		rounded,
 		disabled = false,
 		block,
@@ -28,6 +28,10 @@
 		label,
 		wide,
 		noRipple,
+		load,
+		append,
+		prepend,
+		icon,
 		...rest
 	}: ButtonProps = $props();
 
@@ -37,7 +41,11 @@
 			: 'filled'
 	);
 	let safeSize = $derived(
-		size === 'xs' || size === 'sm' || size === 'md' || size === 'lg' || size === 'xl' ? size : 'md'
+		size === 'default'
+			? 'md'
+			: size === 'xs' || size === 'sm' || size === 'md' || size === 'lg' || size === 'xl'
+				? size
+				: 'md'
 	);
 	let safeDensity = $derived(
 		density === 'compact' || density === 'comfortable' || density === 'default'
@@ -96,6 +104,7 @@
 		aria-disabled={isDisabled || undefined}
 		data-block={block}
 		data-wide={wide}
+		data-icon={icon}
 		use:ripple={{
 			component: 'btn',
 			disabled: noRipple || disabled
@@ -137,6 +146,7 @@
 		aria-disabled={isDisabled || undefined}
 		data-block={block}
 		data-wide={wide}
+		data-icon={icon}
 		use:ripple={{
 			component: 'btn',
 			disabled: noRipple || disabled
@@ -147,13 +157,29 @@
 		{/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">...</span>
+			<span class="spinner">
+				{#if load}
+					{@render load?.()}
+				{:else}
+					...
+				{/if}
+			</span>
 		{/if}
 	</svelte:element>
 {/if}
@@ -204,6 +230,7 @@
 		--btn-density-height-scale: 1;
 		--btn-radius: 8px;
 		--btn-shape: var(--btn-radius);
+		--kit-btn-gap: 0.45em;
 
 		position: relative;
 		display: inline-flex;
@@ -322,6 +349,9 @@
 		--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);
@@ -329,6 +359,9 @@
 		--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);
@@ -336,6 +369,9 @@
 		--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);
@@ -343,6 +379,9 @@
 		--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);
@@ -350,6 +389,9 @@
 		--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'] {
@@ -402,9 +444,38 @@
 	}
 
 	.kit-btn__inner {
-		display: flex;
+		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,
@@ -431,6 +502,16 @@
 		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%);
@@ -440,6 +521,17 @@
 		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;
 	}

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

@@ -1,4 +1,5 @@
 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';
@@ -18,4 +19,8 @@ export interface ButtonProps extends Component {
     block?: boolean;
     wide?: boolean;
     noRipple?: boolean;
+    icon?: boolean;
+    load?: Snippet;
+    append?: Snippet;
+    prepend?: Snippet;
 }

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,3 +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

@@ -2,3 +2,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/utils/types/index.d.ts

@@ -6,7 +6,7 @@ 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 SizeType = 'default' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type RoundedType = 0 | '0' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export interface useClassNameProps {
     baseClass?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lapikit",
-	"version": "0.4.3",
+	"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",