lapikit 0.5.9 → 0.6.0

package/dist/@legacy/components/avatar/avatar.svelte

@@ -1,46 +0,0 @@
-<script lang="ts">
-	import { getAssets } from '../../internal/core/actions/assets.svelte.js';
-	import type { AvatarProps } from './types.js';
-	let {
-		children,
-		ref = $bindable(),
-		light,
-		dark,
-		size = 'md',
-		rounded,
-		alt,
-		background,
-		color,
-		src,
-		variant,
-		density = 'default',
-		...rest
-	}: AvatarProps = $props();
-
-	const assets = getAssets();
-</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)}
->
-	{#if src}
-		<img {src} {alt} />
-	{:else}
-		{@render children?.()}
-	{/if}
-</svelte:element>

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

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

package/dist/@legacy/components/avatar/types.d.ts

@@ -1,22 +0,0 @@
-import type { Component } from '../../internal/types/index.js';
-type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
-type AvatarDensity = 'compact' | 'comfortable' | 'default';
-type AvatarVariant = 'outline' | 'text' | 'dash';
-export interface AvatarProps extends Component {
-    ref?: HTMLElement | null;
-    dark?: boolean;
-    light?: boolean;
-    color?: string;
-    background?: string;
-    src?: string;
-    size?: AvatarSize | {
-        [key: string]: AvatarSize;
-    };
-    variant?: AvatarVariant | {
-        [key: string]: AvatarVariant;
-    };
-    density?: AvatarDensity | {
-        [key: string]: AvatarDensity;
-    };
-}
-export {};

package/dist/@legacy/components/avatar/types.js

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

package/dist/@legacy/components/button/button.css

@@ -1,240 +0,0 @@
-.kit-button {
-	position: relative;
-	cursor: pointer;
-	border: none;
-	outline: none;
-	padding-top: var(--button-spacing-x);
-	padding-bottom: var(--button-spacing-x);
-	padding-right: var(--button-spacing-y);
-	padding-left: var(--button-spacing-y);
-	border-radius: var(--button-shape, var(--system-shape-md));
-	color: var(--button-color, var(--kit-label-primary));
-	font-weight: 500;
-	text-decoration: none;
-}
-
-.kit-button,
-.kit-button .kit-button-content,
-.kit-button .kit-button-append,
-.kit-button .kit-button-prepend,
-.kit-button .kit-button-loading {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	white-space: nowrap;
-	gap: calc(var(--system-spacing) * var(--button-multiplier-gap));
-	font-size: calc(var(--system-spacing) * var(--button-multiplier-font-size));
-}
-
-.kit-button::after {
-	content: '';
-	position: absolute;
-	inset: 0;
-	background-color: currentColor;
-	opacity: 0;
-	transition: opacity 150ms ease;
-	pointer-events: none;
-	border-radius: inherit;
-}
-.kit-button:hover::after {
-	opacity: 0.08;
-}
-.kit-button:active::after {
-	opacity: 0.12;
-}
-.kit-button:focus-visible::after {
-	opacity: 0.12;
-}
-
-/* size */
-.kit-button[breakpoint]kit-button--size-xs {
-	--button-multiplier-x: 12;
-	--button-multiplier-y: 2;
-	--button-multiplier-gap: 2;
-	--button-multiplier-font-size: 6;
-}
-.kit-button[breakpoint]kit-button--size-xs .kit-icon[class*='kit-icon--size-md'] {
-	--icon-multiplier-parent-size: 7;
-}
-
-.kit-button[breakpoint]kit-button--size-sm {
-	--button-multiplier-x: 16;
-	--button-multiplier-y: 3;
-	--button-multiplier-gap: 4;
-	--button-multiplier-font-size: 7;
-}
-.kit-button[breakpoint]kit-button--size-sm .kit-icon[class*='kit-icon--size-md'] {
-	--icon-multiplier-parent-size: 8;
-}
-
-.kit-button[breakpoint]kit-button--size-md {
-	--button-multiplier-x: 20;
-	--button-multiplier-y: 4;
-	--button-multiplier-gap: 4;
-	--button-multiplier-font-size: 8;
-}
-.kit-button[breakpoint]kit-button--size-md .kit-icon[class*='kit-icon--size-md'] {
-	--icon-multiplier-parent-size: 9;
-}
-
-.kit-button[breakpoint]kit-button--size-lg {
-	--button-multiplier-x: 24;
-	--button-multiplier-y: 5;
-	--button-multiplier-gap: 4;
-	--button-multiplier-font-size: 9;
-}
-.kit-button[breakpoint]kit-button--size-lg .kit-icon[class*='kit-icon--size-md'] {
-	--icon-multiplier-parent-size: 10;
-}
-
-.kit-button[breakpoint]kit-button--size-xl {
-	--button-multiplier-x: 28;
-	--button-multiplier-y: 6;
-	--button-multiplier-gap: 5;
-	--button-multiplier-font-size: 10;
-}
-.kit-button[breakpoint]kit-button--size-xl .kit-icon[class*='kit-icon--size-md'] {
-	--icon-multiplier-parent-size: 11;
-}
-
-/* density */
-.kit-button:not(.kit-button--icon)[breakpoint]kit-button--density-default {
-	height: calc(var(--system-spacing) * var(--button-multiplier-x));
-	--button-spacing-x: 0;
-	--button-spacing-y: calc(var(--system-spacing) * var(--button-multiplier-y));
-}
-.kit-button.kit-button--icon[breakpoint]kit-button--density-default {
-	height: calc(var(--system-spacing) * var(--button-multiplier-x));
-	width: calc(var(--system-spacing) * var(--button-multiplier-x));
-	--button-spacing-x: 0;
-	--button-spacing-y: 0;
-}
-
-.kit-button:not(.kit-button--icon)[breakpoint]kit-button--density-compact {
-	height: calc(var(--system-spacing) * var(--button-multiplier-x) - 0.25rem);
-	--button-spacing-x: 0;
-	--button-spacing-y: calc(var(--system-spacing) * var(--button-multiplier-y) - 0.25rem);
-}
-.kit-button.kit-button--icon[breakpoint]kit-button--density-compact {
-	height: calc(var(--system-spacing) * var(--button-multiplier-x) - 0.25rem);
-	width: calc(var(--system-spacing) * var(--button-multiplier-x) - 0.25rem);
-	--button-spacing-x: 0;
-	--button-spacing-y: 0;
-}
-
-.kit-button:not(.kit-button--icon)[breakpoint]kit-button--density-comfortable {
-	height: calc(var(--system-spacing) * var(--button-multiplier-x) + 0.25rem);
-	--button-spacing-x: 0;
-	--button-spacing-y: calc(var(--system-spacing) * var(--button-multiplier-y) + 0.25rem);
-}
-.kit-button.kit-button--icon[breakpoint]kit-button--density-comfortable {
-	height: calc(var(--system-spacing) * var(--button-multiplier-x) + 0.25rem);
-	width: calc(var(--system-spacing) * var(--button-multiplier-x) + 0.25rem);
-	--button-spacing-x: 0;
-	--button-spacing-y: 0;
-}
-
-/* variant */
-.kit-button[breakpoint]kit-button--variant-filled {
-	background-color: var(--button-background, var(--kit-background-grouped-primary));
-}
-
-.kit-button[breakpoint]kit-button--variant-outline {
-	--button-color: var(--on, var(--kit-label-primary));
-	background-color: var(--button-background, var(--kit-background-grouped-primary));
-}
-.kit-button[breakpoint]kit-button--variant-outline::before {
-	content: '';
-	position: absolute;
-	inset: 0;
-	border: 1px solid currentColor;
-	pointer-events: none;
-	border-radius: inherit;
-}
-
-.kit-button[breakpoint]kit-button--variant-text {
-	--button-color: var(--base, var(--kit-label-primary));
-	background-color: transparent;
-	border: none;
-}
-
-/* state */
-.kit-button.kit-button--info[class*='button--variant-filled'] {
-	--on: var(--kit-on-info);
-	--base: var(--kit-accent-info);
-}
-.kit-button.kit-button--info[class*='button--variant-']:not([class*='variant-filled']) {
-	--base: var(--kit-accent-info);
-}
-.kit-button.kit-button--success[class*='button--variant-filled'] {
-	--on: var(--kit-on-success);
-	--base: var(--kit-accent-successs);
-}
-.kit-button.kit-button--success[class*='button--variant-']:not([class*='variant-filled']) {
-	--base: var(--kit-accent-successs);
-}
-.kit-button.kit-button--warning[class*='button--variant-filled'] {
-	--on: var(--kit-on-warning);
-	--base: var(--kit-accent-warning);
-}
-.kit-button.kit-button--warning[class*='button--variant-']:not([class*='variant-filled']) {
-	--base: var(--kit-accent-warning);
-}
-.kit-button.kit-button--error[class*='button--variant-filled'] {
-	--on: var(--kit-on-error);
-	--base: var(--kit-accent-destructive);
-}
-.kit-button.kit-button--error[class*='button--variant-']:not([class*='variant-filled']) {
-	--base: var(--kit-accent-destructive);
-}
-
-/* events */
-.kit-button[class*='button--variant-filled']:active,
-.kit-button.kit-button--active[class*='button--variant-filled'] {
-	background-color: color-mix(in oklab, var(--button-background) 90%, var(--kit-state-shadow));
-}
-.kit-button.kit-button--active[class*='button--variant-']:not([class*='variant-filled']):active,
-.kit-button.kit-button--active[class*='button--variant-']:not([class*='variant-filled']) {
-	background-color: color-mix(in oklab, currentColor 15%, transparent);
-}
-
-/* icon */
-.kit-button i::before,
-.kit-button .kit-icon {
-	--base-parent: var(--button-color);
-}
-
-/* disabled */
-.kit-button.kit-button--disabled,
-.kit-button[disabled],
-.kit-button.kit-button--loading {
-	pointer-events: none;
-	user-select: none;
-	cursor: default;
-}
-.kit-button[class*='button--variant-filled'].kit-button--disabled {
-	color: color-mix(in oklab, var(--button-color) 40%, transparent) !important;
-	background-color: color-mix(in oklab, var(--button-background) 70%, transparent) !important;
-}
-.kit-button[class*='button--variant-filled'].kit-button--disabled i:before {
-	color: color-mix(in oklab, var(--button-color) 40%, transparent) !important;
-}
-.kit-button[class*='button--variant-']:not([class*='variant-filled']).kit-button--disabled,
-.kit-button[class*='button--variant-']:not([class*='variant-filled']).kit-button--disabled
-	i::before {
-	color: color-mix(in oklab, var(--button-background) 40%, transparent) !important;
-}
-
-/* loading */
-.kit-button.kit-button--loading > .kit-button-content,
-.kit-button.kit-button--loading > .kit-button-append,
-.kit-button.kit-button--loading > .kit-button-prepend {
-	visibility: hidden;
-}
-.kit-button.kit-button--loading > .kit-button-loading {
-	position: absolute;
-	min-width: fit-content;
-}
-.kit-button.kit-button--loading > .kit-button-loading .kit-icon-load {
-	animation: icon-rotate 1s ease-out infinite;
-}

package/dist/@legacy/components/button/button.svelte

@@ -1,102 +0,0 @@
-<script lang="ts">
-	import { getAssets } from '../../internal/core/actions/assets.svelte.js';
-	import type { ButtonProps } from './types.js';
-
-	// external
-	import { Icon } from '../index.js';
-	import LoadingFill from '../../assets/icons/loading-fill.svelte';
-	import { ripple } from '../../internal/core/animations/ripple.js';
-
-	let {
-		children,
-		prepend,
-		append,
-		ref = $bindable(),
-		is = 'button',
-		href,
-		dark,
-		light,
-		active,
-		variant = 'filled',
-		error,
-		info,
-		success,
-		warning,
-		density = 'default',
-		disabled,
-		size = 'md',
-		type = 'button',
-		background,
-		color,
-		loading,
-		rounded,
-		icon,
-		load,
-		noRipple,
-		...rest
-	}: ButtonProps = $props();
-
-	const assets = getAssets();
-</script>
-
-<svelte:element
-	this={href ? 'a' : is}
-	bind:this={ref}
-	{...rest}
-	href={href && !disabled ? href : undefined}
-	class={[
-		'kit-button',
-		light && 'light',
-		dark && 'dark',
-		size && assets.className('button', 'size', size),
-		variant && assets.className('button', 'variant', variant),
-		density && assets.className('button', 'density', density),
-		error && 'kit-button--error',
-		info && 'kit-button--info',
-		success && 'kit-button--success',
-		warning && 'kit-button--warning',
-		disabled && 'kit-button--disabled',
-		active && 'kit-button--active',
-		loading && 'kit-button--loading',
-		icon && 'kit-button--icon',
-		rest.class
-	]}
-	tabindex={href && disabled ? -1 : 0}
-	disabled={href ? undefined : disabled}
-	type={href ? undefined : type}
-	use:ripple={{
-		component: 'button',
-		disabled: noRipple || disabled
-	}}
-	style:--button-background={assets.color(background)}
-	style:--button-color={assets.color(color)}
-	style:--button-shape={assets.shape(rounded)}
->
-	{#if loading}
-		<div class="kit-button-loading">
-			{#if load}
-				{@render load?.()}
-			{:else}
-				<Icon class="kit-icon-load">
-					<LoadingFill />
-				</Icon>
-			{/if}
-		</div>
-	{/if}
-
-	{#if prepend}
-		<div class="kit-button-prepend">
-			{@render prepend?.()}
-		</div>
-	{/if}
-
-	<div class="kit-button-content">
-		{@render children?.()}
-	</div>
-
-	{#if append}
-		<div class="kit-button-append">
-			{@render append?.()}
-		</div>
-	{/if}
-</svelte:element>

package/dist/@legacy/components/button/button.svelte.d.ts

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

package/dist/@legacy/components/button/types.d.ts

@@ -1,29 +0,0 @@
-import type { Component } from '../../internal/types/index.js';
-import type { Snippet } from 'svelte';
-export interface ButtonProps extends Component {
-    ref?: HTMLElement | null;
-    is?: 'button' | 'a';
-    dark?: boolean;
-    light?: boolean;
-    href?: string;
-    variant?: 'outline' | 'text' | 'filled';
-    density?: 'compact' | 'comfortable' | 'default';
-    active?: boolean;
-    loading?: boolean;
-    error?: boolean;
-    info?: boolean;
-    warning?: boolean;
-    success?: boolean;
-    disabled?: boolean;
-    color?: string;
-    background?: string;
-    size?: string | {
-        [key: string]: string;
-    };
-    type?: 'button' | 'submit' | 'reset';
-    icon?: boolean;
-    load?: Snippet;
-    append?: Snippet;
-    prepend?: Snippet;
-    noRipple?: boolean;
-}

package/dist/@legacy/components/button/types.js

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

package/dist/@legacy/components/card/card.css

@@ -1,105 +0,0 @@
-.kit-card {
-	position: relative;
-	display: flex;
-	flex-direction: column;
-	text-align: start;
-	overflow: hidden;
-	padding-top: var(--card-spacing-x);
-	padding-bottom: var(--card-spacing-x);
-	padding-right: var(--card-spacing-y);
-	padding-left: var(--card-spacing-y);
-	border-radius: var(--card-shape, var(--system-shape-md));
-	font-weight: 500;
-	color: var(--card-color, var(--kit-label-primary));
-	text-decoration: none;
-}
-
-.kit-card.kit-card--clickable {
-	cursor: pointer;
-}
-
-.kit-card.kit-card--clickable::after {
-	content: '';
-	position: absolute;
-	inset: 0;
-	background-color: currentColor;
-	opacity: 0;
-	transition: opacity 150ms ease;
-	pointer-events: none;
-	border-radius: inherit;
-}
-.kit-card.kit-card--clickable:hover::after {
-	opacity: 0.08;
-}
-.kit-card.kit-card--clickable:active::after {
-	opacity: 0.12;
-}
-.kit-card.kit-card--clickable:focus-visible::after {
-	opacity: 0.12;
-}
-
-/* density */
-.kit-card[breakpoint]kit-card--density-default {
-	--card-spacing-x: calc(var(--system-spacing) * 2);
-	--card-spacing-y: calc(var(--system-spacing) * 2);
-}
-.kit-card[breakpoint]kit-card--density-compact {
-	--card-spacing-x: 0;
-	--card-spacing-y: 0;
-}
-.kit-card[breakpoint]kit-card--density-comfortable {
-	--card-spacing-x: calc(var(--system-spacing) * 4);
-	--card-spacing-y: calc(var(--system-spacing) * 4);
-}
-
-/* variant */
-.kit-card[breakpoint]kit-card--variant-filled {
-	background-color: var(--card-background, var(--kit-background-grouped-secondary));
-}
-
-.kit-card[breakpoint]kit-card--variant-outline {
-	--card-color: var(--card-background, var(--kit-label-primary));
-	background-color: transparent;
-}
-.kit-card[breakpoint]kit-card--variant-outline::before {
-	content: '';
-	position: absolute;
-	inset: 0;
-	border: 1px solid currentColor;
-	pointer-events: none;
-	border-radius: inherit;
-}
-
-.kit-card[breakpoint]kit-card--variant-text {
-	--card-color: var(--card-background, var(--kit-label-primary));
-	background-color: transparent;
-	border: none;
-}
-
-/* events */
-.kit-card[class*='card--variant-filled'].kit-card--clickable:active,
-.kit-card.kit-card--active[class*='card--variant-filled'].kit-card--clickable {
-	background-color: color-mix(in oklab, var(--card-background) 90%, var(--kit-state-shadow));
-}
-.kit-card.kit-card--active[class*='card--variant-']:not(
-		[class*='variant-filled']
-	).kit-card--clickable:active,
-.kit-card.kit-card--active[class*='card--variant-']:not(
-		[class*='variant-filled']
-	).kit-card--clickable {
-	background-color: color-mix(in oklab, currentColor 15%, transparent);
-}
-
-/* disabled */
-.kit-card.kit-card--disabled,
-.kit-card[disabled],
-.kit-card:disabled {
-	pointer-events: none;
-	user-select: none;
-	opacity: 0.6;
-}
-.kit-card.kit-card--disabled > *,
-.kit-card[disabled] > *,
-.kit-card:disabled > * {
-	opacity: 0.6;
-}

package/dist/@legacy/components/card/card.svelte

@@ -1,67 +0,0 @@
-<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';
-
-	let {
-		children,
-		ref = $bindable(),
-		is = 'div',
-		href,
-		dark,
-		light,
-		active,
-		density = 'default',
-		variant = 'filled',
-		disabled,
-		rounded,
-		color,
-		background,
-		noRipple,
-		width,
-		height,
-		...rest
-	}: CardProps = $props();
-
-	const assets = getAssets();
-	let isClickable: boolean = $state(false);
-
-	$effect(() => {
-		const refProps = { ...rest };
-		if (href) is = 'a';
-		if (refProps?.onclick || href || is === 'a') isClickable = true;
-		else isClickable = false;
-	});
-</script>
-
-<svelte:element
-	this={is}
-	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}
-	use:ripple={{
-		component: 'card',
-		disabled: noRipple || disabled || !isClickable
-	}}
-	style:--card-background={assets.color(background)}
-	style:--card-color={assets.color(color)}
-	style:--card-shape={assets.shape(rounded)}
-	style:width
-	style:height
->
-	{@render children?.()}
-</svelte:element>

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

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

package/dist/@legacy/components/card/types.d.ts

@@ -1,20 +0,0 @@
-import type { Component } from '../../internal/types/index.js';
-type Density = 'compact' | 'comfortable' | 'default';
-export interface CardProps extends Component {
-    is?: 'a' | 'button' | 'div';
-    dark?: boolean;
-    light?: boolean;
-    href?: string;
-    variant?: 'outline' | 'text' | 'filled';
-    density?: Density | {
-        [key: string]: Density;
-    };
-    active?: boolean;
-    disabled?: boolean;
-    rounded?: string;
-    color?: string;
-    background?: string;
-    width?: string | number;
-    height?: string | number;
-}
-export {};

package/dist/@legacy/components/card/types.js

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