lapikit 0.4.13 → 0.4.14

package/dist/components/avatar/avatar.svelte

@@ -1,46 +1,145 @@
 <script lang="ts">
-	import { getAssets } from '../../internal/core/actions/assets.svelte.js';
-	import type { AvatarProps } from './types.js';
+	import { useClassName, useStyles } from '../../utils';
+	import { makeComponentProps } from '../../compiler/mapped-code';
+	import type { AvatarProps } from './avatar.types.js';
+
 	let {
-		children,
 		ref = $bindable(),
-		light,
-		dark,
+		children = undefined,
+		class: className = '',
+		style: styleAttr = '',
+		's-class': sClass,
+		's-style': sStyle,
+		label = undefined,
 		size = 'md',
-		rounded,
-		alt,
-		background,
-		color,
-		src,
-		variant,
 		density = 'default',
 		...rest
 	}: AvatarProps = $props();
 
-	const assets = getAssets();
+	let { classProps, styleProps, restProps } = $derived(
+		makeComponentProps(rest as Record<string, unknown>)
+	);
+
+	let componentClass = $derived(
+		useClassName({
+			baseClass: 'kit-avatar',
+			className: `${className ?? ''}`.trim(),
+			sClass,
+			classProps
+		})
+	);
+
+	let componentStyle = $derived(
+		useStyles({
+			styleAttr,
+			sStyle,
+			styleProps
+		})
+	);
+
+	let safeSize = $derived(
+		size === 'default'
+			? 'md'
+			: size === 'xs' || size === 'sm' || size === 'md' || size === 'lg' || size === 'xl'
+				? size
+				: 'md'
+	);
+
+	let safeDensity = $derived(
+		density === 'compact' || density === 'comfortable' || density === 'default'
+			? density
+			: 'default'
+	);
+
+	let contentType = $derived(label && label.trim().length > 0 ? 'label' : children);
+	let displayLabel = $derived(label?.trim() ?? '');
 </script>
 
 <svelte:element
 	this={'div'}
 	bind:this={ref}
-	{...rest}
-	class={[
-		'kit-avatar',
-		light && 'light',
-		dark && 'dark',
-		src && 'kit-avatar--image',
-		size && assets.className('avatar', 'size', size),
-		variant && assets.className('avatar', 'variant', variant),
-		density && assets.className('avatar', 'density', density),
-		rest.class
-	]}
-	style:--avatar-background={assets.color(background)}
-	style:--avatar-color={assets.color(color)}
-	style:--avatar-shape={assets.shape(rounded)}
+	class={componentClass}
+	style={componentStyle}
+	{...restProps}
+	data-type={contentType}
+	data-size={contentType === 'label' ? safeSize : undefined}
+	data-density={contentType === 'label' ? safeDensity : undefined}
 >
-	{#if src}
-		<img {src} {alt} />
+	{#if contentType === 'label'}
+		<span class="kit-avatar__label">{displayLabel}</span>
 	{:else}
 		{@render children?.()}
 	{/if}
 </svelte:element>
+
+<style>
+	.kit-avatar {
+		--kit-avatar-size: 2.25rem;
+		--kit-avatar-font-size: 0.875rem;
+		--kit-avatar-density-scale: 1;
+
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: calc(var(--kit-avatar-size) * var(--kit-avatar-density-scale));
+		height: calc(var(--kit-avatar-size) * var(--kit-avatar-density-scale));
+		border-radius: 9999px;
+		overflow: hidden;
+		background: var(--kit-surface-2);
+		color: var(--kit-fg);
+		font-weight: 600;
+		line-height: 1;
+		user-select: none;
+	}
+
+	.kit-avatar[data-type='label'] {
+		font-size: var(--kit-avatar-font-size);
+		text-transform: uppercase;
+	}
+
+	.kit-avatar[data-size='xs'] {
+		--kit-avatar-size: 1.75rem;
+		--kit-avatar-font-size: 0.75rem;
+	}
+	.kit-avatar[data-size='sm'] {
+		--kit-avatar-size: 2rem;
+		--kit-avatar-font-size: 0.8125rem;
+	}
+	.kit-avatar[data-size='md'] {
+		--kit-avatar-size: 2.25rem;
+		--kit-avatar-font-size: 0.875rem;
+	}
+	.kit-avatar[data-size='lg'] {
+		--kit-avatar-size: 2.5rem;
+		--kit-avatar-font-size: 1rem;
+	}
+	.kit-avatar[data-size='xl'] {
+		--kit-avatar-size: 2.75rem;
+		--kit-avatar-font-size: 1.125rem;
+	}
+
+	.kit-avatar[data-density='compact'] {
+		--kit-avatar-density-scale: 0.9;
+	}
+	.kit-avatar[data-density='default'] {
+		--kit-avatar-density-scale: 1;
+	}
+	.kit-avatar[data-density='comfortable'] {
+		--kit-avatar-density-scale: 1.1;
+	}
+
+	.kit-avatar__label {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		max-width: 100%;
+		padding-inline: 0.25rem;
+	}
+
+	.kit-avatar :global(img) {
+		display: block;
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+</style>

package/dist/components/avatar/avatar.svelte.d.ts

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

package/dist/{labs/components → components}/avatar/avatar.types.d.ts

@@ -1,4 +1,4 @@
-import type { Component } from '../../utils/types/index.js';
+import type { Component } from '../../utils/types';
 export type AvatarSize = 'default' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type AvatarDensity = 'compact' | 'comfortable' | 'default';
 export interface AvatarProps extends Component {

package/dist/{labs/components → components}/btn/btn.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { useClassName, useStyles } from '../../utils/index.js';
-	import { makeComponentProps } from '../../compiler/mapped-code.js';
-	import { ripple } from '../../animations/index.js';
+	import { useClassName, useStyles } from '../../utils';
+	import { makeComponentProps } from '../../compiler/mapped-code';
+	import { ripple } from '../../animations';
 	import type { ButtonProps } from './btn.types.js';
 
 	let {

package/dist/{labs/components → components}/btn/btn.types.d.ts

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

package/dist/components/card/card.svelte

@@ -1,67 +1,287 @@
 <script lang="ts">
-	import { getAssets } from '../../internal/core/actions/assets.svelte.js';
-	import type { CardProps } from './types.js';
-
-	// external
-	import { ripple } from '../../internal/core/animations/ripple.js';
+	import { useClassName, useStyles } from '../../utils';
+	import { makeComponentProps } from '../../compiler/mapped-code';
+	import { ripple } from '../../animations';
+	import type { CardProps } from './card.types.js';
 
 	let {
-		children,
 		ref = $bindable(),
 		is = 'div',
+		children,
+		class: className = '',
+		style: styleAttr = '',
+		's-class': sClass,
+		's-style': sStyle,
 		href,
-		dark,
-		light,
-		active,
-		density = 'default',
+		type,
 		variant = 'filled',
-		disabled,
-		rounded,
-		color,
-		background,
+		density = 'default',
+		rounded = 'md',
+		interactive = false,
+		active = false,
+		disabled = false,
 		noRipple,
-		width,
-		height,
 		...rest
 	}: CardProps = $props();
 
-	const assets = getAssets();
-	let isClickable: boolean = $state(false);
+	let safeVariant = $derived(
+		variant === 'filled' || variant === 'outline' || variant === 'text' ? variant : 'filled'
+	);
+
+	let safeDensity = $derived(
+		density === 'compact' || density === 'default' || density === 'comfortable'
+			? density
+			: 'default'
+	);
+
+	let safeIs = $derived(
+		is === 'div' ||
+			is === 'article' ||
+			is === 'section' ||
+			is === 'aside' ||
+			is === 'a' ||
+			is === 'button'
+			? is
+			: 'article'
+	);
+	let tag = $derived((href && 'a') || safeIs || 'article');
+	let hasEventHandler = $derived(
+		typeof rest.onclick === 'function' ||
+			typeof rest.onpointerdown === 'function' ||
+			typeof rest.onkeydown === 'function'
+	);
+	let isInteractive = $derived(interactive || tag === 'a' || tag === 'button' || hasEventHandler);
+	let isDisabled = $derived(!!disabled);
+	let resolvedHref = $derived(tag === 'a' && !isDisabled ? href : undefined);
+	let resolvedType = $derived(tag === 'button' ? (type ?? 'button') : undefined);
+	let resolvedDisabled = $derived(tag === 'button' ? isDisabled : undefined);
+	let resolvedTabIndex = $derived(tag === 'a' && isDisabled ? -1 : undefined);
+
+	let { classProps, styleProps, restProps } = $derived(
+		makeComponentProps(rest as Record<string, unknown>)
+	);
+
+	let componentClass = $derived(
+		useClassName({
+			baseClass: 'kit-card',
+			className: `${className ?? ''} kit-card--${safeVariant}`.trim(),
+			sClass,
+			classProps
+		})
+	);
 
-	$effect(() => {
-		const refProps = { ...rest };
-		if (href) is = 'a';
-		if (refProps?.onclick || href || is === 'a') isClickable = true;
-		else isClickable = false;
-	});
+	let componentStyle = $derived(
+		useStyles({
+			styleAttr,
+			sStyle,
+			styleProps
+		})
+	);
 </script>
 
 <svelte:element
-	this={is}
+	this={tag}
 	bind:this={ref}
-	{...rest}
-	href={href && !disabled ? href : undefined}
-	class={[
-		'kit-card',
-		light && 'light',
-		dark && 'dark',
-		variant && assets.className('card', 'variant', variant),
-		density && assets.className('card', 'density', density),
-		isClickable && 'kit-card--clickable',
-		active && 'kit-card--active',
-		disabled && 'kit-card--disabled',
-		rest.class
-	]}
-	disabled={href ? undefined : disabled}
+	class={componentClass}
+	style={componentStyle}
+	href={resolvedHref}
+	type={resolvedType}
+	disabled={resolvedDisabled}
+	tabindex={resolvedTabIndex}
+	data-density={safeDensity}
+	data-rounded={rounded}
+	data-interactive={isInteractive}
+	data-active={active}
+	data-disabled={isDisabled}
+	aria-disabled={isDisabled || undefined}
 	use:ripple={{
 		component: 'card',
-		disabled: noRipple || disabled || !isClickable
+		disabled: noRipple || disabled || !isInteractive
 	}}
-	style:--card-background={assets.color(background)}
-	style:--card-color={assets.color(color)}
-	style:--card-shape={assets.shape(rounded)}
-	style:width
-	style:height
+	{...restProps}
 >
+	{#if safeVariant === 'outline'}
+		<span class="outline"></span>
+	{/if}
+
 	{@render children?.()}
 </svelte:element>
+
+<style>
+	.kit-card {
+		--kit-card-bg: var(--kit-surface-2);
+		--kit-card-fg: var(--kit-fg);
+		--kit-card-outline-color: var(--kit-border);
+		--kit-card-radius: var(--kit-radius-2);
+		--kit-card-padding-compact: var(--kit-space-1);
+		--kit-card-padding-default: var(--kit-space-2);
+		--kit-card-padding-comfortable: var(--kit-space-3);
+
+		--card-shape: var(--kit-card-radius);
+		--card-bg: var(--kit-card-bg);
+		--card-fg: var(--kit-card-fg);
+		--card-hover-bg: color-mix(in oklab, var(--card-bg), var(--card-fg) 6%);
+		--card-active-bg: color-mix(in oklab, var(--card-bg), var(--card-fg) 10%);
+		--card-hover-fg: var(--card-fg);
+		--card-active-fg: var(--card-fg);
+
+		display: flex;
+		flex-direction: column;
+		gap: var(--kit-space-2);
+		background: var(--card-bg);
+		color: var(--card-fg);
+		border: 0;
+		border-radius: var(--kit-card-radius);
+		box-sizing: border-box;
+		position: relative;
+		transition:
+			background 140ms ease,
+			color 140ms ease,
+			box-shadow 140ms ease,
+			translate 140ms ease;
+	}
+
+	a.kit-card {
+		text-decoration: none;
+	}
+
+	button.kit-card {
+		appearance: none;
+		border: 0;
+		background: none;
+		font: inherit;
+		text-align: inherit;
+	}
+
+	.kit-card[data-rounded='0'] {
+		--kit-card-radius: 0;
+	}
+	.kit-card[data-rounded='xs'] {
+		--kit-card-radius: 4px;
+	}
+	.kit-card[data-rounded='sm'] {
+		--kit-card-radius: 6px;
+	}
+	.kit-card[data-rounded='md'] {
+		--kit-card-radius: 10px;
+	}
+	.kit-card[data-rounded='lg'] {
+		--kit-card-radius: 14px;
+	}
+	.kit-card[data-rounded='xl'] {
+		--kit-card-radius: 18px;
+	}
+
+	.kit-card[data-density='compact'] {
+		padding: var(--kit-card-padding-compact);
+	}
+	.kit-card[data-density='default'] {
+		padding: var(--kit-card-padding-default);
+	}
+	.kit-card[data-density='comfortable'] {
+		padding: var(--kit-card-padding-comfortable);
+	}
+
+	.kit-card--outline {
+		--outline-color: var(--kit-accent);
+		--card-bg: transparent;
+		--card-fg: var(--kit-accent);
+		--card-hover-bg: color-mix(in oklab, var(--kit-accent), transparent 80%);
+		--card-active-bg: color-mix(in oklab, var(--kit-accent), transparent 92%);
+		--kit-card-outline-color: var(--outline-color);
+	}
+
+	.kit-card--filled {
+		--card-bg: var(--kit-accent);
+		--card-fg: white;
+		--card-hover-bg: color-mix(in oklab, var(--kit-accent), black 10%);
+		--card-active-bg: color-mix(in oklab, var(--kit-accent), black 16%);
+	}
+
+	.kit-card--text {
+		background: transparent;
+		--card-bg: transparent;
+		--card-fg: var(--kit-accent);
+		--card-hover-bg: color-mix(in oklab, var(--kit-accent), transparent 80%);
+		--card-active-bg: color-mix(in oklab, var(--kit-accent), transparent 92%);
+	}
+
+	.kit-card[data-interactive='true'][data-disabled='false'] {
+		cursor: pointer;
+	}
+
+	.kit-card[data-interactive='true'][data-disabled='false']:hover {
+		translate: 0 -1px;
+		background: var(--card-hover-bg);
+		color: var(--card-hover-fg);
+		box-shadow: 0 10px 28px hsl(220 35% 8% / 0.12);
+	}
+
+	.kit-card--text[data-interactive='true'][data-disabled='false']:hover {
+		background: var(--card-hover-bg);
+		color: var(--card-hover-fg);
+	}
+
+	.kit-card[data-interactive='true'][data-active='true'][data-disabled='false'],
+	.kit-card[data-interactive='true'][data-disabled='false']:active {
+		translate: 0 0;
+		background: var(--card-active-bg);
+		color: var(--card-active-fg);
+		box-shadow: 0 4px 14px hsl(220 35% 8% / 0.1);
+	}
+
+	.kit-card--text[data-interactive='true'][data-active='true'][data-disabled='false'],
+	.kit-card--text[data-interactive='true'][data-disabled='false']:active {
+		background: var(--card-active-bg);
+		color: var(--card-active-fg);
+	}
+
+	.kit-card[data-interactive='true'][data-disabled='false']:focus-visible {
+		outline: 2px solid var(--kit-focus);
+		outline-offset: 2px;
+	}
+
+	.kit-card[data-disabled='true'] {
+		opacity: var(--kit-disabled-opacity, 0.55);
+		pointer-events: none;
+	}
+
+	.kit-card .outline {
+		--outline-color: var(--kit-card-outline-color);
+		--btn-radius: var(--kit-card-radius);
+		pointer-events: none;
+	}
+
+	.kit-card__media {
+		overflow: hidden;
+		border-radius: calc(var(--kit-card-radius) - 2px);
+	}
+
+	.kit-card__header {
+		font-weight: 600;
+		line-height: 1.3;
+	}
+
+	.kit-card__body {
+		display: block;
+		line-height: 1.45;
+	}
+
+	.kit-card__footer {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--kit-space-2);
+		flex-wrap: wrap;
+	}
+
+	.kit-card__footer-content {
+		color: var(--kit-muted);
+	}
+
+	.kit-card__actions {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--kit-space-1);
+	}
+</style>

package/dist/components/card/card.svelte.d.ts

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

package/dist/{labs/components → components}/card/card.types.d.ts

@@ -1,4 +1,4 @@
-import type { Component, RoundedType } from '../../utils/types/index.js';
+import type { Component, RoundedType } from '../../utils/types';
 export interface CardProps extends Component {
     ref?: HTMLElement | null;
     is?: 'div' | 'article' | 'section' | 'aside' | 'a' | 'button';