lapikit 0.4.8 → 0.4.10

package/dist/labs/compiler/components.js

@@ -4,7 +4,13 @@ const lapikitComponents = [
     'btn',
     'icon',
     'avatar',
+    'accordion',
+    'accordionItem',
+    'alert',
+    'aspect-ratio',
     'spacer',
-    'separator'
+    'separator',
+    'chip',
+    'card'
 ];
 export default lapikitComponents;

package/dist/labs/components/accordion/accordion.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+	import { useClassName, useStyles } from '../../utils/index.js';
+	import { makeComponentProps } from '../../compiler/mapped-code.js';
+	import type { AccordionProps } from './accordion.types.js';
+
+	let {
+		ref = $bindable(),
+		is = 'div',
+		children = undefined,
+		class: className = '',
+		style: styleAttr = '',
+		's-class': sClass,
+		's-style': sStyle,
+		text = undefined,
+		dark = false,
+		light = false,
+		color = undefined,
+		background = undefined,
+		rounded = undefined,
+		spacer = false,
+		hideIcon = false,
+		...rest
+	}: AccordionProps = $props();
+
+	let { classProps, styleProps, restProps } = $derived(
+		makeComponentProps(rest as Record<string, unknown>)
+	);
+
+	let componentClass = $derived(
+		useClassName({
+			baseClass: 'kit-accordion',
+			className: `${className ?? ''}`.trim(),
+			sClass,
+			classProps
+		})
+	);
+
+	let componentStyle = $derived(
+		useStyles({
+			styleAttr,
+			sStyle,
+			styleProps
+		})
+	);
+
+	let mergedStyle = $derived(
+		[
+			componentStyle,
+			color ? `--kit-accordion-color:${color}` : '',
+			background ? `--kit-accordion-background:${background}` : ''
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
+</script>
+
+<svelte:element
+	this={is}
+	bind:this={ref}
+	class={componentClass}
+	style={mergedStyle}
+	{...restProps}
+	data-text={text ? true : undefined}
+	data-dark={dark}
+	data-light={light}
+	data-spacer={spacer}
+	data-hide-icon={hideIcon}
+	data-rounded={rounded}
+>
+	{@render children?.()}
+</svelte:element>
+
+<style>
+	.kit-accordion {
+		--kit-accordion-radius: 8px;
+		--kit-accordion-gap: 0;
+		--kit-accordion-color: var(--kit-fg);
+		--kit-accordion-background: transparent;
+
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: center;
+		width: 100%;
+		padding: 0;
+		list-style: none;
+		position: relative;
+		z-index: 1;
+		gap: var(--kit-accordion-gap);
+		color: var(--kit-accordion-color);
+		background: var(--kit-accordion-background);
+	}
+
+	.kit-accordion[data-spacer='true'] {
+		--kit-accordion-gap: 1rem;
+	}
+
+	.kit-accordion[data-rounded='0'] {
+		--kit-accordion-radius: 0;
+	}
+
+	.kit-accordion[data-rounded='xs'] {
+		--kit-accordion-radius: 2px;
+	}
+
+	.kit-accordion[data-rounded='sm'] {
+		--kit-accordion-radius: 4px;
+	}
+
+	.kit-accordion[data-rounded='md'] {
+		--kit-accordion-radius: 8px;
+	}
+
+	.kit-accordion[data-rounded='lg'] {
+		--kit-accordion-radius: 16px;
+	}
+
+	.kit-accordion[data-rounded='xl'] {
+		--kit-accordion-radius: 99999px;
+	}
+
+	.kit-accordion[data-dark='true'] {
+		--kit-accordion-background: var(--kit-surface-3);
+		--kit-accordion-color: var(--kit-fg);
+	}
+
+	.kit-accordion[data-light='true'] {
+		--kit-accordion-background: var(--kit-surface-1);
+	}
+
+	.kit-accordion[data-hide-icon='true'] :global(.kit-accordion-item__indicator) {
+		display: none;
+	}
+</style>

package/dist/labs/components/accordion/accordion.svelte.d.ts

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

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

@@ -0,0 +1,34 @@
+import type { RoundedType, Component } from '../../utils/types/index.js';
+import type { Snippet } from 'svelte';
+export interface AccordionProps extends Component {
+    ref?: HTMLElement | null;
+    is?: 'div';
+    text?: string;
+    dark?: boolean;
+    light?: boolean;
+    color?: string;
+    background?: string;
+    rounded?: RoundedType;
+    spacer?: boolean;
+    hideIcon?: boolean;
+}
+export type AccordionItemModelProps = {
+    open: boolean;
+};
+export interface AccordionItemProps extends Component {
+    ref?: HTMLElement | null;
+    is?: 'div';
+    index: number | string;
+    text?: string;
+    dark?: boolean;
+    light?: boolean;
+    rounded?: RoundedType;
+    color?: string;
+    background?: string;
+    readOnly?: boolean;
+    open?: boolean;
+    disabled?: boolean;
+    toggle?: (index: number | string) => void;
+    indicator?: Snippet<[AccordionItemModelProps]>;
+    activator?: Snippet;
+}

package/dist/labs/components/accordion/accordion.types.js

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

package/dist/labs/components/accordion/modules/accordion-item.svelte

@@ -0,0 +1,241 @@
+<script lang="ts">
+	import { useClassName, useStyles } from '../../../utils/index.js';
+	import { makeComponentProps } from '../../../compiler/mapped-code.js';
+	import type { AccordionItemModelProps, AccordionItemProps } from '../accordion.types.js';
+
+	let {
+		ref = $bindable(),
+		is = 'div',
+		children = undefined,
+		class: className = '',
+		style: styleAttr = '',
+		's-class': sClass,
+		's-style': sStyle,
+		activator = undefined,
+		indicator = undefined,
+		text = undefined,
+		dark = false,
+		light = false,
+		rounded = undefined,
+		color = undefined,
+		background = undefined,
+		index,
+		open = false,
+		toggle = undefined,
+		disabled = false,
+		readOnly = false,
+		...rest
+	}: AccordionItemProps = $props();
+
+	let { classProps, styleProps, restProps } = $derived(
+		makeComponentProps(rest as Record<string, unknown>)
+	);
+
+	let componentClass = $derived(
+		useClassName({
+			baseClass: 'kit-accordion-item',
+			className: `${className ?? ''}`.trim(),
+			sClass,
+			classProps
+		})
+	);
+
+	let componentStyle = $derived(
+		useStyles({
+			styleAttr,
+			sStyle,
+			styleProps
+		})
+	);
+
+	let mergedStyle = $derived(
+		[
+			componentStyle,
+			color ? `--kit-accordion-item-color:${color}` : '',
+			background ? `--kit-accordion-item-background:${background}` : ''
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
+
+	let safeOpen = $derived(!!open);
+	let model: AccordionItemModelProps = {
+		get open() {
+			return safeOpen;
+		}
+	};
+
+	function handleToggle() {
+		if (readOnly || disabled || !toggle) return;
+		toggle(index);
+	}
+</script>
+
+<svelte:element
+	this={is}
+	bind:this={ref}
+	class={componentClass}
+	style={mergedStyle}
+	{...restProps}
+	data-open={safeOpen}
+	data-disabled={disabled}
+	data-dark={dark}
+	data-light={light}
+	data-rounded={rounded}
+>
+	<button
+		class="kit-accordion-item__trigger"
+		type="button"
+		onclick={handleToggle}
+		aria-expanded={safeOpen}
+		aria-disabled={disabled || readOnly || undefined}
+		{disabled}
+	>
+		<span class="kit-accordion-item__title">
+			{#if activator}
+				{@render activator?.()}
+			{:else}
+				{text}
+			{/if}
+		</span>
+
+		<span class="kit-accordion-item__indicator">
+			{#if indicator}
+				{@render indicator?.(model)}
+			{:else}
+				<svg viewBox="0 0 24 24" aria-hidden="true">
+					{#if safeOpen}
+						<path d="M7.41 14.59 12 10l4.59 4.59L18 13.17l-6-6-6 6z" fill="currentColor"></path>
+					{:else}
+						<path d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z" fill="currentColor"></path>
+					{/if}
+				</svg>
+			{/if}
+		</span>
+	</button>
+
+	<div class="kit-accordion-item__content" hidden={!safeOpen}>
+		<div class="kit-accordion-item__content-inner">
+			{@render children?.()}
+		</div>
+	</div>
+</svelte:element>
+
+<style>
+	button {
+		appearance: none;
+		background: none;
+		border: none;
+		font: inherit;
+		color: inherit;
+	}
+
+	.kit-accordion-item {
+		--kit-accordion-item-radius: var(--kit-accordion-radius, 8px);
+		--kit-accordion-item-color: var(--kit-accordion-color, var(--kit-fg));
+		--kit-accordion-item-background: var(--kit-surface-2);
+		--kit-accordion-item-border: color-mix(
+			in oklab,
+			var(--kit-accordion-item-background),
+			var(--kit-fg) 12%
+		);
+		--kit-accordion-item-trigger-y: 1rem;
+		--kit-accordion-item-trigger-x: 1.25rem;
+
+		flex: 1 0 100%;
+		max-width: 100%;
+		position: relative;
+		border-radius: var(--kit-accordion-item-radius);
+		background: var(--kit-accordion-item-background);
+		color: var(--kit-accordion-item-color);
+		border: 1px solid var(--kit-accordion-item-border);
+		transition:
+			border-color 150ms ease,
+			background 150ms ease,
+			box-shadow 150ms ease;
+		overflow: clip;
+	}
+
+	.kit-accordion-item[data-rounded='0'] {
+		--kit-accordion-item-radius: 0;
+	}
+
+	.kit-accordion-item[data-rounded='xs'] {
+		--kit-accordion-item-radius: 2px;
+	}
+
+	.kit-accordion-item[data-rounded='sm'] {
+		--kit-accordion-item-radius: 4px;
+	}
+
+	.kit-accordion-item[data-rounded='md'] {
+		--kit-accordion-item-radius: 8px;
+	}
+
+	.kit-accordion-item[data-rounded='lg'] {
+		--kit-accordion-item-radius: 16px;
+	}
+
+	.kit-accordion-item[data-rounded='xl'] {
+		--kit-accordion-item-radius: 99999px;
+	}
+
+	.kit-accordion-item[data-open='true'] {
+		box-shadow: 0 10px 28px color-mix(in oklab, var(--kit-fg), transparent 90%);
+	}
+
+	.kit-accordion-item[data-dark='true'] {
+		--kit-accordion-item-background: var(--kit-surface-3);
+	}
+
+	.kit-accordion-item[data-light='true'] {
+		--kit-accordion-item-background: var(--kit-surface-1);
+	}
+
+	.kit-accordion-item__trigger {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 1rem;
+		padding: var(--kit-accordion-item-trigger-y) var(--kit-accordion-item-trigger-x);
+		cursor: pointer;
+		text-align: left;
+	}
+
+	.kit-accordion-item__trigger:disabled,
+	.kit-accordion-item[data-disabled='true'] .kit-accordion-item__trigger {
+		cursor: not-allowed;
+		opacity: 0.6;
+	}
+
+	.kit-accordion-item__title {
+		flex: 1 1 auto;
+		min-width: 0;
+	}
+
+	.kit-accordion-item__indicator {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		flex: 0 0 auto;
+	}
+
+	.kit-accordion-item__indicator svg {
+		width: 1.125rem;
+		height: 1.125rem;
+		display: block;
+	}
+
+	.kit-accordion-item__content {
+		display: block;
+	}
+
+	.kit-accordion-item__content[hidden] {
+		display: none;
+	}
+
+	.kit-accordion-item__content-inner {
+		padding: 0 1.25rem 1rem;
+	}
+</style>

package/dist/labs/components/accordion/modules/accordion-item.svelte.d.ts

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

package/dist/labs/components/alert/alert.svelte

@@ -0,0 +1,286 @@
+<script lang="ts">
+	import { useClassName, useStyles } from '../../utils/index.js';
+	import { makeComponentProps } from '../../compiler/mapped-code.js';
+	import type { AlertDensity, AlertProps, AlertTone, AlertVariant } from './alert.types.js';
+
+	function resolveVariant(value: AlertVariant | undefined): AlertVariant {
+		return value === 'filled' || value === 'outline' || value === 'text' ? value : 'filled';
+	}
+
+	function resolveDensity(value: AlertDensity | undefined): AlertDensity {
+		return value === 'compact' || value === 'comfortable' || value === 'default'
+			? value
+			: 'default';
+	}
+
+	function resolveTone({
+		tone,
+		info,
+		success,
+		warning,
+		error
+	}: {
+		tone?: AlertTone;
+		info?: boolean;
+		success?: boolean;
+		warning?: boolean;
+		error?: boolean;
+	}): AlertTone {
+		if (tone && ['default', 'info', 'success', 'warning', 'error'].includes(tone)) return tone;
+		if (error) return 'error';
+		if (warning) return 'warning';
+		if (success) return 'success';
+		if (info) return 'info';
+		return 'default';
+	}
+
+	let {
+		ref = $bindable(),
+		is = 'div',
+		children = undefined,
+		class: className = '',
+		style: styleAttr = '',
+		's-class': sClass,
+		's-style': sStyle,
+		open = $bindable(true),
+		closable = false,
+		variant = 'filled',
+		density = 'default',
+		rounded = 'md',
+		tone = 'default',
+		info = false,
+		success = false,
+		warning = false,
+		error = false,
+		color = undefined,
+		background = undefined,
+		prepend = undefined,
+		append = undefined,
+		close = undefined,
+		...rest
+	}: AlertProps = $props();
+
+	let { classProps, styleProps, restProps } = $derived(
+		makeComponentProps(rest as Record<string, unknown>)
+	);
+
+	let componentClass = $derived(
+		useClassName({
+			baseClass: 'kit-alert',
+			className: `${className ?? ''}`.trim(),
+			sClass,
+			classProps
+		})
+	);
+
+	let baseStyle = $derived(
+		useStyles({
+			styleAttr,
+			sStyle,
+			styleProps
+		})
+	);
+
+	let safeVariant = $derived(resolveVariant(variant));
+	let safeDensity = $derived(resolveDensity(density));
+	let safeTone = $derived(resolveTone({ tone, info, success, warning, error }));
+	let mergedStyle = $derived(
+		[
+			baseStyle,
+			color ? `--kit-alert-fg:${color}` : '',
+			background ? `--kit-alert-bg:${background}` : ''
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
+</script>
+
+{#if !closable || (closable && open)}
+	<svelte:element
+		this={is}
+		bind:this={ref}
+		class={componentClass}
+		style={mergedStyle}
+		role="alert"
+		data-variant={safeVariant}
+		data-density={safeDensity}
+		data-rounded={rounded}
+		data-tone={safeTone}
+		{...restProps}
+	>
+		{#if safeVariant === 'outline'}
+			<span class="outline"></span>
+		{/if}
+
+		{#if prepend}
+			<span class="kit-alert__prepend">
+				{@render prepend?.()}
+			</span>
+		{/if}
+
+		<div class="kit-alert__content">
+			{@render children?.()}
+		</div>
+
+		{#if append}
+			<span class="kit-alert__append">
+				{@render append?.()}
+			</span>
+		{/if}
+
+		{#if closable}
+			<button
+				class="kit-alert__close"
+				type="button"
+				aria-label="close"
+				onclick={() => (open = false)}
+			>
+				{#if close}
+					{@render close?.()}
+				{:else}
+					<span aria-hidden="true">×</span>
+				{/if}
+			</button>
+		{/if}
+	</svelte:element>
+{/if}
+
+<style>
+	.kit-alert {
+		--kit-alert-bg: hsl(220 20% 96%);
+		--kit-alert-fg: hsl(222 20% 16%);
+		--kit-alert-bd: hsl(220 16% 85%);
+		--kit-alert-radius: 8px;
+		--kit-alert-py: 0.75rem;
+		--kit-alert-px: 0.875rem;
+		--kit-alert-gap: 0.625rem;
+		--outline-color: var(--kit-alert-bd);
+		--btn-radius: var(--kit-alert-radius);
+
+		position: relative;
+		display: grid;
+		grid-template-columns: auto minmax(0, 1fr) auto auto;
+		gap: var(--kit-alert-gap);
+		align-items: start;
+		padding: var(--kit-alert-py) var(--kit-alert-px);
+		border-radius: var(--kit-alert-radius);
+		color: var(--kit-alert-fg);
+		background: var(--kit-alert-bg);
+		border: 1px solid var(--kit-alert-bd);
+	}
+
+	.kit-alert[data-variant='filled'] {
+		background: var(--kit-alert-bg);
+		color: var(--kit-alert-fg);
+		border-color: var(--kit-alert-bd);
+	}
+
+	.kit-alert[data-variant='outline'] {
+		background: transparent;
+		color: var(--kit-alert-fg);
+		border-color: transparent;
+	}
+
+	.kit-alert[data-variant='text'] {
+		background: transparent;
+		color: var(--kit-alert-fg);
+		border-color: transparent;
+	}
+
+	.kit-alert .outline {
+		pointer-events: none;
+	}
+
+	.kit-alert[data-tone='info'] {
+		--kit-alert-bg: hsl(var(--kit-h-info, 205) 90% 95%);
+		--kit-alert-fg: hsl(var(--kit-h-info, 205) 36% 24%);
+		--kit-alert-bd: hsl(var(--kit-h-info, 205) 45% 78%);
+	}
+
+	.kit-alert[data-tone='success'] {
+		--kit-alert-bg: hsl(var(--kit-h-success, 145) 58% 93%);
+		--kit-alert-fg: hsl(var(--kit-h-success, 145) 38% 23%);
+		--kit-alert-bd: hsl(var(--kit-h-success, 145) 30% 75%);
+	}
+
+	.kit-alert[data-tone='warning'] {
+		--kit-alert-bg: hsl(var(--kit-h-warning, 35) 95% 92%);
+		--kit-alert-fg: hsl(var(--kit-h-warning, 35) 55% 24%);
+		--kit-alert-bd: hsl(var(--kit-h-warning, 35) 55% 72%);
+	}
+
+	.kit-alert[data-tone='error'] {
+		--kit-alert-bg: hsl(var(--kit-h-danger, 5) 90% 94%);
+		--kit-alert-fg: hsl(var(--kit-h-danger, 5) 48% 28%);
+		--kit-alert-bd: hsl(var(--kit-h-danger, 5) 55% 78%);
+	}
+
+	.kit-alert[data-density='compact'] {
+		--kit-alert-py: 0.5rem;
+		--kit-alert-px: 0.75rem;
+		--kit-alert-gap: 0.5rem;
+	}
+
+	.kit-alert[data-density='default'] {
+		--kit-alert-py: 0.75rem;
+		--kit-alert-px: 0.875rem;
+		--kit-alert-gap: 0.625rem;
+	}
+
+	.kit-alert[data-density='comfortable'] {
+		--kit-alert-py: 0.95rem;
+		--kit-alert-px: 1rem;
+		--kit-alert-gap: 0.75rem;
+	}
+
+	.kit-alert[data-rounded='0'] {
+		--kit-alert-radius: 0;
+	}
+	.kit-alert[data-rounded='xs'] {
+		--kit-alert-radius: 2px;
+	}
+	.kit-alert[data-rounded='sm'] {
+		--kit-alert-radius: 4px;
+	}
+	.kit-alert[data-rounded='md'] {
+		--kit-alert-radius: 8px;
+	}
+	.kit-alert[data-rounded='lg'] {
+		--kit-alert-radius: 16px;
+	}
+	.kit-alert[data-rounded='xl'] {
+		--kit-alert-radius: 99999px;
+	}
+
+	.kit-alert__prepend,
+	.kit-alert__append {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		line-height: 1;
+	}
+
+	.kit-alert__content {
+		min-width: 0;
+		line-height: 1.4;
+	}
+
+	.kit-alert__close {
+		appearance: none;
+		border: 0;
+		background: transparent;
+		color: inherit;
+		padding: 0;
+		width: 1.25rem;
+		height: 1.25rem;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+		border-radius: 6px;
+	}
+
+	.kit-alert__close:hover {
+		background: color-mix(in oklab, currentColor 10%, transparent);
+	}
+</style>