lapikit 0.4.12 → 0.4.14

package/README.md

@@ -86,7 +86,7 @@ Be part of the next revolution in code editing by contributing to the project. T
 
 Licensed under the [MIT license](https://github.com/lapikit/lapikit/blob/main/LICENSE).
 
-Copyright © 2025 Nycolaide
+Copyright © 2025 - 2026 Nycolaide
 
 ## 🪧We support these projects
 

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

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { getAssets } from '../../internal/core/actions/assets.svelte.js';
+	import type { AccordionProps } from './types.js';
+
+	let {
+		ref = $bindable(),
+		children,
+		is = 'div',
+		dark,
+		light,
+		color,
+		background,
+		spacer,
+		hideIcon,
+		rounded,
+		...rest
+	}: AccordionProps = $props();
+
+	const assets = getAssets();
+</script>
+
+<svelte:element
+	this={is}
+	bind:this={ref}
+	{...rest}
+	class={[
+		'kit-accordion',
+		spacer && 'kit-accordion--spacer',
+		hideIcon && 'kit-accordion--hide-icon',
+		light && 'light',
+		dark && 'dark',
+		rest.class
+	]}
+	style:--accordion-shape={assets.shape(rounded)}
+	style:--accordion-background={assets.color(background)}
+	style:--accordion-color={assets.color(color)}
+>
+	{@render children?.()}
+</svelte:element>

package/dist/{labs → @legacy}/components/accordion/accordion.svelte.d.ts

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

package/dist/@legacy/components/accordion/modules/accordion-item.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+	import { getAssets } from '../../../internal/core/actions/assets.svelte.js';
+	import type { AccordionItemProps, ModelAccordionItemProps } from '../types.js';
+
+	// components
+	import Icon from '../../icon/icon.svelte';
+
+	//  assets
+	import ArrowUp from '../../../assets/icons/arrow-up.svelte';
+	import ArrowDown from '../../../assets/icons/arrow-down.svelte';
+
+	let {
+		activator,
+		children,
+		indicator,
+		ref = $bindable(),
+		text,
+		is = 'div',
+		dark,
+		light,
+		rounded,
+		color,
+		background,
+		index,
+		open,
+		toggle,
+		disabled,
+		readOnly,
+		...rest
+	}: AccordionItemProps = $props();
+
+	const assets = getAssets();
+
+	let model: ModelAccordionItemProps = {
+		get open() {
+			return open !== undefined ? open : false;
+		}
+	};
+</script>
+
+<svelte:element
+	this={is}
+	bind:this={ref}
+	{...rest}
+	class={[
+		'kit-accordion-item',
+		light && 'light',
+		dark && 'dark',
+		open && 'kit-accordion-item--active',
+		rest.class
+	]}
+	style:--accordion--item-shape={assets.shape(rounded)}
+	style:--accordion--item-background={assets.color(background)}
+	style:--accordion--item-color={assets.color(color)}
+>
+	<button
+		class={[
+			'kit-accordion-item--title',
+			disabled && 'kit-accordion-item--disabled',
+			dark && 'dark',
+			open && 'kit-accordion-item--active',
+			rest.class
+		]}
+		onclick={() => toggle && !readOnly && !disabled && toggle(index)}
+		aria-expanded={open}
+		type="button"
+		{disabled}
+	>
+		{#if activator}
+			{@render activator?.()}
+		{:else}
+			{text}
+		{/if}
+
+		<span class="kit-accordion-item--icon">
+			{#if indicator}
+				{@render indicator?.(model)}
+			{:else if open}
+				<Icon>
+					<ArrowUp />
+				</Icon>
+			{:else}
+				<Icon>
+					<ArrowDown />
+				</Icon>
+			{/if}
+		</span>
+	</button>
+	<div class="kit-accordion-item--text" style:display={!open ? 'none' : ''}>
+		<div class="kit-accordion-item--text-wrapper">
+			{@render children?.()}
+		</div>
+	</div>
+</svelte:element>

package/dist/{labs → @legacy}/components/accordion/modules/accordion-item.svelte.d.ts

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

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

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import { getAssets } from '../../internal/core/actions/assets.svelte.js';
+	import type { AlertProps } from './types.js';
+
+	// components
+	import Icon from '../icon/icon.svelte';
+
+	//  assets
+	import Close from '../../assets/icons/close-fill.svelte';
+
+	let {
+		children,
+		append,
+		prepend,
+		close,
+		ref = $bindable(),
+		open = $bindable(true),
+		is = 'div',
+		light,
+		dark,
+		variant,
+		density = 'default',
+		rounded,
+		warning,
+		info,
+		success,
+		error,
+		closable,
+		color,
+		background,
+		...rest
+	}: AlertProps = $props();
+
+	const assets = getAssets();
+</script>
+
+{#if !closable || (open && closable)}
+	<svelte:element
+		this={is}
+		{...rest}
+		class={[
+			'kit-alert',
+			light && 'light',
+			dark && 'dark',
+			variant && assets.className('alert', 'variant', variant),
+			density && assets.className('alert', 'density', density),
+			warning && 'kit-alert--warning',
+			info && 'kit-alert--info',
+			success && 'kit-alert--success',
+			error && 'kit-alert--error',
+			rest.class
+		]}
+		role="alert"
+		style:--alert-background={assets.color(background)}
+		style:--alert-color={assets.color(color)}
+		style:--alert-shape={assets.shape(rounded)}
+	>
+		{#if prepend}
+			<div class="kit-alert--prepend">
+				{@render prepend?.()}
+			</div>
+		{/if}
+		<span class="kit-alert--content">
+			{@render children?.()}
+		</span>
+		{#if append}
+			<div class="kit-alert--append">
+				{@render append?.()}
+			</div>
+		{/if}
+
+		{#if closable}
+			<button
+				class="kit-alert--close"
+				type="button"
+				aria-label="close"
+				onclick={() => (open = false)}
+			>
+				{#if close}
+					{@render close?.()}
+				{:else}
+					<Icon>
+						<Close />
+					</Icon>
+				{/if}
+			</button>
+		{/if}
+	</svelte:element>
+{/if}

package/dist/{labs → @legacy}/components/alert/alert.svelte.d.ts

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

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

@@ -0,0 +1,79 @@
+<script lang="ts">
+	const BROWSER = typeof window !== 'undefined';
+	import { useTheme } from '../../actions/use-theme.js';
+	import { modalOpen, setOpenModal } from '../../stores/components.js';
+
+	import { viewport } from '../../stores/viewport.js';
+	import type { AppProps } from './types.js';
+
+	let {
+		ref = $bindable(),
+		children,
+		themes,
+		storageKey = '@lapikit/theme',
+		light,
+		dark,
+		...rest
+	}: AppProps = $props();
+
+	$effect.pre(() => {
+		if (!BROWSER) return;
+		const colorScheme = window.matchMedia('(prefers-color-scheme: dark)').matches
+			? 'dark'
+			: 'light';
+		const localTheme = localStorage.getItem(storageKey);
+
+		if (localTheme) {
+			useTheme(localTheme);
+		} else if (colorScheme) {
+			if (typeof themes === 'string') {
+				useTheme(themes);
+			} else if (typeof themes === 'object' && Array.isArray(themes)) {
+				if (colorScheme === 'dark') useTheme(themes[1] ?? themes[0]);
+				else useTheme(themes[0]);
+			} else {
+				useTheme(colorScheme);
+			}
+		}
+
+		// Met à jour le store viewport à l'init et sur resize
+		function updateViewport() {
+			viewport.set({
+				innerWidth: window.innerWidth,
+				outerWidth: window.outerWidth,
+				innerHeight: window.innerHeight,
+				outerHeight: window.outerHeight
+			});
+		}
+		updateViewport();
+		window.addEventListener('resize', updateViewport);
+		return () => {
+			window.removeEventListener('resize', updateViewport);
+		};
+	});
+</script>
+
+<div
+	id="kit-app"
+	bind:this={ref}
+	{...rest}
+	class={[
+		'kit-application',
+		light && 'light',
+		dark && 'dark',
+		light && 'kit-theme--light',
+		dark && 'kit-theme--dark',
+		rest.class
+	]}
+>
+	{@render children?.()}
+
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	{#if $modalOpen}
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<div
+			class={['kit-overlay', $modalOpen === 'persistent' && 'kit-overlay--persistent']}
+			onclick={() => $modalOpen !== 'persistent' && setOpenModal(false)}
+		></div>
+	{/if}
+</div>

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

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

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

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { getAssets } from '../../internal/core/actions/assets.svelte.js';
+	import type { AppbarProps } from './types.js';
+
+	let {
+		children,
+		ref = $bindable(),
+		is = 'header',
+		classContent,
+		light,
+		dark,
+		rounded,
+		background,
+		color,
+		density = 'default',
+		...rest
+	}: AppbarProps = $props();
+
+	const assets = getAssets();
+</script>
+
+<svelte:element
+	this={is}
+	bind:this={ref}
+	{...rest}
+	class={[
+		'kit-appbar',
+		light && 'light',
+		dark && 'dark',
+		density && assets.className('appbar', 'density', density),
+		rest.class
+	]}
+	style:--appbar-background={assets.color(background)}
+	style:--appbar-color={assets.color(color)}
+	style:--appbar-shape={assets.shape(rounded)}
+>
+	<div class={['kit-appbar--wrapper', classContent]}>
+		{@render children?.()}
+	</div>
+</svelte:element>

package/dist/{labs → @legacy}/components/appbar/appbar.svelte.d.ts

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

package/dist/@legacy/components/aspect-ratio/aspect-ratio.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { AspectRationProps } from './types.js';
+	let { children, aspectRatio, inline, ...rest }: AspectRationProps = $props();
+
+	let paddingBottom = $state(0);
+
+	$effect.pre(() => {
+		if (aspectRatio) {
+			const [width, height] = aspectRatio.split('/').map(Number);
+			paddingBottom = (height / width) * 100;
+		}
+	});
+
+	$effect(() => {
+		if (aspectRatio) {
+			const [width, height] = aspectRatio.split('/').map(Number);
+			paddingBottom = (height / width) * 100;
+		}
+	});
+</script>
+
+<div {...rest} class={['kit-aspect-ratio', inline && 'kit-aspect-ratio--inline', rest.class]}>
+	<div class="kit-aspect-ratio--sizer" style={`padding-bottom: ${paddingBottom}%;`}></div>
+	{@render children?.()}
+</div>

package/dist/{labs → @legacy}/components/aspect-ratio/aspect-ratio.svelte.d.ts

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

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

@@ -0,0 +1,46 @@
+<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/{labs → @legacy}/components/avatar/avatar.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { AvatarProps } from './avatar.types.ts';
+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/card/card.svelte

@@ -0,0 +1,67 @@
+<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/{labs → @legacy}/components/card/card.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { CardProps } from './card.types.ts';
+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/chip/chip.svelte

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

package/dist/{labs → @legacy}/components/chip/chip.svelte.d.ts

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