@makolabs/ripple 1.12.0 → 1.13.1

package/dist/elements/collapsible/Collapsible.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+	import { buildTestId } from '../../helper/testid.js';
+	import type { CollapsibleProps } from '../../index.js';
+
+	let {
+		open = $bindable(false),
+		title,
+		header,
+		children,
+		class: className = '',
+		headerClass = '',
+		contentClass = '',
+		disabled = false,
+		ontoggle,
+		testId
+	}: CollapsibleProps = $props();
+
+	function toggle() {
+		if (disabled) return;
+		open = !open;
+		ontoggle?.(open);
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Enter' || event.key === ' ') {
+			event.preventDefault();
+			toggle();
+		}
+	}
+</script>
+
+<div
+	class={cn('border-default-200 overflow-hidden rounded-md border', className)}
+	data-testid={buildTestId('collapsible', undefined, testId)}
+	data-open={open ? 'true' : 'false'}
+>
+	<button
+		type="button"
+		class={cn(
+			'flex w-full cursor-pointer items-center justify-between gap-2 px-4 py-3 text-left transition-colors',
+			'hover:bg-default-50 focus-visible:ring-primary-500 focus-visible:ring-2 focus-visible:outline-none',
+			disabled && 'cursor-not-allowed opacity-50',
+			headerClass
+		)}
+		aria-expanded={open}
+		aria-disabled={disabled ? 'true' : undefined}
+		{disabled}
+		onclick={toggle}
+		onkeydown={handleKeydown}
+	>
+		{#if header}
+			{@render header({ open })}
+		{:else}
+			<span class="text-default-800 font-medium">{title}</span>
+		{/if}
+		<svg
+			class={cn(
+				'text-default-500 h-4 w-4 shrink-0 transition-transform duration-200',
+				open && 'rotate-180'
+			)}
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 20 20"
+			fill="currentColor"
+			aria-hidden="true"
+		>
+			<path
+				fill-rule="evenodd"
+				d="M5.23 7.21a.75.75 0 011.06.02L10 11.06l3.71-3.83a.75.75 0 111.08 1.04l-4.25 4.39a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z"
+				clip-rule="evenodd"
+			/>
+		</svg>
+	</button>
+	{#if open}
+		<div class={cn('border-default-200 border-t px-4 py-3', contentClass)}>
+			{@render children()}
+		</div>
+	{/if}
+</div>

package/dist/elements/collapsible/Collapsible.svelte.d.ts

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

package/dist/elements/collapsible/CollapsibleTestWrapper.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import Collapsible from './Collapsible.svelte';
+	import type { CollapsibleProps } from '../../index.js';
+
+	type Props = Omit<CollapsibleProps, 'children' | 'header'> & {
+		bodyText?: string;
+		headerText?: string;
+	};
+
+	let { bodyText = '', headerText, ...rest }: Props = $props();
+</script>
+
+{#snippet body()}
+	<span data-testid="wrapper-body">{bodyText}</span>
+{/snippet}
+
+{#snippet customHeader({ open }: { open: boolean })}
+	<span data-testid="wrapper-header">{headerText} [{open ? 'open' : 'closed'}]</span>
+{/snippet}
+
+<Collapsible {...rest} header={headerText ? customHeader : undefined}>
+	{@render body()}
+</Collapsible>

package/dist/elements/collapsible/CollapsibleTestWrapper.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { CollapsibleProps } from '../../index.js';
+type Props = Omit<CollapsibleProps, 'children' | 'header'> & {
+    bodyText?: string;
+    headerText?: string;
+};
+declare const CollapsibleTestWrapper: import("svelte").Component<Props, {}, "">;
+type CollapsibleTestWrapper = ReturnType<typeof CollapsibleTestWrapper>;
+export default CollapsibleTestWrapper;

package/dist/elements/collapsible/collapsible-types.d.ts

@@ -0,0 +1,16 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { Snippet } from 'svelte';
+export type CollapsibleProps = {
+    open?: boolean;
+    title?: string;
+    header?: Snippet<[{
+        open: boolean;
+    }]>;
+    children: Snippet;
+    class?: ClassValue;
+    headerClass?: ClassValue;
+    contentClass?: ClassValue;
+    disabled?: boolean;
+    ontoggle?: (open: boolean) => void;
+    testId?: string;
+};

package/dist/elements/collapsible/collapsible-types.js

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

package/dist/elements/combobox/Combobox.svelte

@@ -0,0 +1,274 @@
+<script lang="ts" generics="T extends ComboboxItem">
+	import { cn } from '../../helper/cls.js';
+	import { buildTestId } from '../../helper/testid.js';
+	import type { ComboboxItem, ComboboxProps } from '../../index.js';
+
+	let {
+		items,
+		onsearch,
+		value = null,
+		onselect,
+		placeholder = 'Search...',
+		emptyText = 'No results',
+		loadingText = 'Loading...',
+		debounceMs = 200,
+		minSearchLength = 0,
+		disabled = false,
+		class: className = '',
+		inputClass = '',
+		listClass = '',
+		itemSnippet,
+		testId
+	}: ComboboxProps<T> = $props();
+
+	let inputValue = $state(value?.label ?? '');
+	let isOpen = $state(false);
+	let highlightedIndex = $state(0);
+	let asyncResults = $state<T[]>([]);
+	let loading = $state(false);
+	let hasSearched = $state(false);
+	let rootEl: HTMLDivElement | undefined = $state();
+	let debounceTimer: ReturnType<typeof setTimeout> | undefined;
+	let searchSeq = 0;
+
+	function normalizeFilter(q: string): string {
+		return q.trim().toLowerCase();
+	}
+
+	function filterStatic(query: string, list: T[]): T[] {
+		const q = normalizeFilter(query);
+		if (!q) return list;
+		return list.filter(
+			(item) =>
+				item.label.toLowerCase().includes(q) || (item.description ?? '').toLowerCase().includes(q)
+		);
+	}
+
+	// Static filtering is pure and runs every render — no side effects needed.
+	const results = $derived.by<T[]>(() => {
+		if (items !== undefined) return filterStatic(inputValue, items);
+		return asyncResults;
+	});
+
+	// Async search: only triggered after user has interacted (hasSearched flag).
+	// Mount alone never fires onsearch, so static-mode tests and first-render
+	// async-mode tests don't see a spurious onsearch('') call.
+	$effect(() => {
+		if (items !== undefined) return;
+		if (!onsearch) return;
+		if (!hasSearched) return;
+
+		const query = inputValue;
+		clearTimeout(debounceTimer);
+
+		if (query.length < minSearchLength) {
+			asyncResults = [] as T[];
+			loading = false;
+			return;
+		}
+
+		debounceTimer = setTimeout(async () => {
+			const currentSeq = ++searchSeq;
+			loading = true;
+			try {
+				const fetched = await onsearch(query);
+				if (currentSeq !== searchSeq) return;
+				asyncResults = fetched as T[];
+			} finally {
+				if (currentSeq === searchSeq) loading = false;
+			}
+		}, debounceMs);
+
+		return () => {
+			clearTimeout(debounceTimer);
+		};
+	});
+
+	// Group results, preserving order of first appearance.
+	// Uses a plain object as the lookup (local to derivation, no reactivity needed).
+	const groupedResults = $derived.by(() => {
+		const groups: Array<{ label: string | null; items: T[] }> = [];
+		const indexByGroup: Record<string, number> = {};
+		let nullGroupIdx = -1;
+		for (const item of results) {
+			const key = item.group;
+			let idx: number;
+			if (key === undefined || key === null) {
+				if (nullGroupIdx === -1) {
+					nullGroupIdx = groups.length;
+					groups.push({ label: null, items: [] });
+				}
+				idx = nullGroupIdx;
+			} else {
+				idx = indexByGroup[key] ?? -1;
+				if (idx === -1) {
+					idx = groups.length;
+					indexByGroup[key] = idx;
+					groups.push({ label: key, items: [] });
+				}
+			}
+			groups[idx].items.push(item);
+		}
+		return groups;
+	});
+
+	// Flat enabled index for keyboard nav
+	const flatEnabled = $derived(results.filter((i) => !i.disabled));
+
+	function open() {
+		if (disabled) return;
+		isOpen = true;
+		highlightedIndex = 0;
+	}
+
+	function close() {
+		isOpen = false;
+	}
+
+	function selectItem(item: T) {
+		if (item.disabled) return;
+		onselect?.(item);
+		inputValue = item.label;
+		close();
+	}
+
+	function handleInput(event: Event) {
+		const target = event.target as HTMLInputElement;
+		inputValue = target.value;
+		hasSearched = true;
+		if (!isOpen) open();
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (disabled) return;
+		if (event.key === 'ArrowDown') {
+			event.preventDefault();
+			if (!isOpen) open();
+			highlightedIndex = Math.min(highlightedIndex + 1, Math.max(flatEnabled.length - 1, 0));
+		} else if (event.key === 'ArrowUp') {
+			event.preventDefault();
+			highlightedIndex = Math.max(highlightedIndex - 1, 0);
+		} else if (event.key === 'Enter') {
+			if (isOpen && flatEnabled.length > 0) {
+				event.preventDefault();
+				selectItem(flatEnabled[highlightedIndex]);
+			}
+		} else if (event.key === 'Escape') {
+			close();
+		}
+	}
+
+	// Click-outside handling
+	$effect(() => {
+		if (!isOpen) return;
+		function onDocClick(e: MouseEvent) {
+			if (rootEl && !rootEl.contains(e.target as Node)) {
+				close();
+			}
+		}
+		document.addEventListener('mousedown', onDocClick);
+		return () => document.removeEventListener('mousedown', onDocClick);
+	});
+
+	function isHighlighted(item: T): boolean {
+		const idx = flatEnabled.indexOf(item);
+		return idx !== -1 && idx === highlightedIndex;
+	}
+
+	function isSelected(item: T): boolean {
+		return value != null && value.id === item.id;
+	}
+</script>
+
+<div
+	bind:this={rootEl}
+	class={cn('relative inline-flex w-full flex-col', className)}
+	data-testid={buildTestId('combobox', undefined, testId)}
+>
+	<input
+		type="text"
+		role="combobox"
+		aria-expanded={isOpen}
+		aria-controls="combobox-listbox"
+		aria-autocomplete="list"
+		aria-disabled={disabled ? 'true' : undefined}
+		{disabled}
+		value={inputValue}
+		{placeholder}
+		class={cn(
+			'border-default-300 w-full rounded-md border bg-white px-3 py-2 text-sm',
+			'focus:border-primary-500 focus:ring-primary-500 focus:ring-1 focus:outline-none',
+			disabled && 'cursor-not-allowed opacity-50',
+			inputClass
+		)}
+		oninput={handleInput}
+		onfocus={open}
+		onkeydown={handleKeydown}
+	/>
+
+	{#if isOpen}
+		<ul
+			id="combobox-listbox"
+			role="listbox"
+			data-combobox-listbox=""
+			class={cn(
+				'border-default-200 absolute top-full left-0 z-50 mt-1 max-h-64 w-full overflow-y-auto rounded-md border bg-white shadow-lg',
+				listClass
+			)}
+		>
+			{#if loading}
+				<li class="text-default-500 px-3 py-2 text-sm" data-combobox-loading="">
+					{loadingText}
+				</li>
+			{:else if results.length === 0}
+				<li class="text-default-500 px-3 py-2 text-sm" data-combobox-empty="">
+					{emptyText}
+				</li>
+			{:else}
+				{#each groupedResults as group, groupIdx (group.label ?? `__null__${groupIdx}`)}
+					{#if group.label !== null}
+						<li
+							class="text-default-500 bg-default-50 px-3 py-1.5 text-xs font-semibold tracking-wide uppercase"
+							data-combobox-group={group.label}
+							role="presentation"
+						>
+							{group.label}
+						</li>
+					{/if}
+					{#each group.items as item (item.id)}
+						{@const highlighted = isHighlighted(item)}
+						{@const selected = isSelected(item)}
+						<li
+							role="option"
+							aria-selected={selected}
+							aria-disabled={item.disabled ? 'true' : undefined}
+							data-combobox-item=""
+							data-combobox-item-id={item.id}
+							class={cn(
+								'cursor-pointer px-3 py-2 text-sm',
+								highlighted && 'bg-primary-50',
+								selected && 'font-semibold',
+								item.disabled && 'cursor-not-allowed opacity-50'
+							)}
+							onclick={() => selectItem(item)}
+							onkeydown={() => {}}
+							onmouseenter={() => {
+								const idx = flatEnabled.indexOf(item);
+								if (idx !== -1) highlightedIndex = idx;
+							}}
+						>
+							{#if itemSnippet}
+								{@render itemSnippet(item, { highlighted, selected })}
+							{:else}
+								<div class="text-default-800 font-medium">{item.label}</div>
+								{#if item.description}
+									<div class="text-default-500 text-xs">{item.description}</div>
+								{/if}
+							{/if}
+						</li>
+					{/each}
+				{/each}
+			{/if}
+		</ul>
+	{/if}
+</div>

package/dist/elements/combobox/Combobox.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { ComboboxItem, ComboboxProps } from '../../index.js';
+declare function $$render<T extends ComboboxItem>(): {
+    props: ComboboxProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends ComboboxItem> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends ComboboxItem>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends ComboboxItem>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Combobox: $$IsomorphicComponent;
+type Combobox<T extends ComboboxItem> = InstanceType<typeof Combobox<T>>;
+export default Combobox;

package/dist/elements/combobox/ComboboxTestWrapper.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import Combobox from './Combobox.svelte';
+	import type { ComboboxItem, ComboboxProps } from '../../index.js';
+
+	let {
+		items,
+		onsearch,
+		value,
+		onselect,
+		placeholder,
+		emptyText,
+		loadingText,
+		debounceMs,
+		minSearchLength,
+		disabled,
+		class: className,
+		inputClass,
+		listClass,
+		testId
+	}: ComboboxProps<ComboboxItem> = $props();
+</script>
+
+<Combobox
+	{items}
+	{onsearch}
+	{value}
+	{onselect}
+	{placeholder}
+	{emptyText}
+	{loadingText}
+	{debounceMs}
+	{minSearchLength}
+	{disabled}
+	class={className}
+	{inputClass}
+	{listClass}
+	{testId}
+/>

package/dist/elements/combobox/ComboboxTestWrapper.svelte.d.ts

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

package/dist/elements/combobox/combobox-types.d.ts

@@ -0,0 +1,39 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { Snippet } from 'svelte';
+export type ComboboxItem = {
+    id: string | number;
+    label: string;
+    description?: string;
+    group?: string;
+    disabled?: boolean;
+};
+export type ComboboxProps<T extends ComboboxItem = ComboboxItem> = {
+    /** Static items for client-side filtering. Provide this OR `onsearch`. */
+    items?: T[];
+    /**
+     * Async/sync search callback. Called with the debounced query string.
+     * Returns the list of items to display.
+     */
+    onsearch?: (query: string) => T[] | Promise<T[]>;
+    /** Currently selected item (controlled). */
+    value?: T | null;
+    /** Fires when the user selects an item (click or Enter on highlighted). */
+    onselect?: (item: T) => void;
+    placeholder?: string;
+    emptyText?: string;
+    loadingText?: string;
+    /** Milliseconds to debounce onsearch calls (default 200). */
+    debounceMs?: number;
+    /** Minimum query length before onsearch fires (default 0). */
+    minSearchLength?: number;
+    disabled?: boolean;
+    class?: ClassValue;
+    inputClass?: ClassValue;
+    listClass?: ClassValue;
+    /** Optional snippet to override the default item rendering. */
+    itemSnippet?: Snippet<[T, {
+        highlighted: boolean;
+        selected: boolean;
+    }]>;
+    testId?: string;
+};

package/dist/elements/combobox/combobox-types.js

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

package/dist/elements/empty-state/EmptyState.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+	import { buildTestId } from '../../helper/testid.js';
+	import { emptyState } from './empty-state.js';
+	import { Size } from '../../variants.js';
+	import type { EmptyStateProps } from '../../index.js';
+
+	let {
+		title,
+		description,
+		size = Size.BASE,
+		class: className = '',
+		icon,
+		action,
+		testId
+	}: EmptyStateProps = $props();
+
+	const slots = $derived(emptyState({ size }));
+</script>
+
+<div
+	class={cn(slots.wrapper(), className)}
+	data-testid={buildTestId('empty-state', undefined, testId)}
+>
+	{#if icon}
+		<div class={slots.iconWrapper()} aria-hidden="true">
+			{@render icon()}
+		</div>
+	{/if}
+	<h3 class={slots.title()}>{title}</h3>
+	{#if description}
+		<p class={slots.description()}>{description}</p>
+	{/if}
+	{#if action}
+		<div class={slots.actionWrapper()}>
+			{@render action()}
+		</div>
+	{/if}
+</div>

package/dist/elements/empty-state/EmptyState.svelte.d.ts

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

package/dist/elements/empty-state/EmptyStateTestWrapper.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import EmptyState from './EmptyState.svelte';
+	import type { EmptyStateProps } from '../../index.js';
+
+	type Props = Omit<EmptyStateProps, 'icon' | 'action'> & {
+		iconText?: string;
+		actionText?: string;
+	};
+
+	let { iconText, actionText, ...rest }: Props = $props();
+</script>
+
+{#snippet iconSnippet()}
+	<span data-testid="wrapper-icon">{iconText}</span>
+{/snippet}
+
+{#snippet actionSnippet()}
+	<button type="button" data-testid="wrapper-action">{actionText}</button>
+{/snippet}
+
+<EmptyState
+	{...rest}
+	icon={iconText ? iconSnippet : undefined}
+	action={actionText ? actionSnippet : undefined}
+/>

package/dist/elements/empty-state/EmptyStateTestWrapper.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { EmptyStateProps } from '../../index.js';
+type Props = Omit<EmptyStateProps, 'icon' | 'action'> & {
+    iconText?: string;
+    actionText?: string;
+};
+declare const EmptyStateTestWrapper: import("svelte").Component<Props, {}, "">;
+type EmptyStateTestWrapper = ReturnType<typeof EmptyStateTestWrapper>;
+export default EmptyStateTestWrapper;

package/dist/elements/empty-state/empty-state-types.d.ts

@@ -0,0 +1,12 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { Snippet } from 'svelte';
+export type EmptyStateSize = 'sm' | 'base' | 'lg' | 'xl';
+export type EmptyStateProps = {
+    title: string;
+    description?: string;
+    size?: EmptyStateSize;
+    class?: ClassValue;
+    icon?: Snippet;
+    action?: Snippet;
+    testId?: string;
+};

package/dist/elements/empty-state/empty-state-types.js

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