@makolabs/ripple 2.2.0 → 2.3.0

package/dist/elements/combobox/Combobox.svelte

@@ -1,274 +0,0 @@
-<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

@@ -1,25 +0,0 @@
-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

@@ -1,38 +0,0 @@
-<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

@@ -1,4 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

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

package/dist/forms/RadioInputs.svelte

@@ -1,73 +0,0 @@
-<script lang="ts">
-	import { cn } from '../helper/cls.js';
-	import { buildTestId } from '../helper/testid.js';
-	import type { RadioInputsProps } from '../index.js';
-
-	let {
-		name,
-		label,
-		options,
-		value = $bindable(),
-		disabled = false,
-		class: className = '',
-		errors = [],
-		required = false,
-		testId
-	}: RadioInputsProps = $props();
-
-	const containerClass = $derived(cn('space-y-2', className));
-
-	const radioClass = $derived(
-		cn('w-4 h-4 text-primary-600 border-default-300 focus:ring-primary-500', {
-			'opacity-50 cursor-not-allowed': disabled,
-			'border-danger-300 focus:ring-danger-500': errors.length
-		})
-	);
-
-	const labelClass = $derived(
-		cn('block text-sm font-medium', {
-			'text-default-700': !errors.length,
-			'text-danger-600': errors.length
-		})
-	);
-</script>
-
-<div class={containerClass}>
-	{#if label}
-		<label class={labelClass} for={`${name}-${value || options[0].value}`}>{label}</label>
-	{/if}
-	<div class="space-y-2">
-		{#each options as option, index (option.value)}
-			<div class="flex items-center gap-2">
-				<input
-					type="radio"
-					{name}
-					id={`${name}-${option.value}`}
-					value={option.value}
-					bind:group={value}
-					class={radioClass}
-					{disabled}
-					{required}
-					aria-describedby={errors.length
-						? errors.map((_, i) => `${name}-error-${i}`).join(' ')
-						: undefined}
-					data-testid={buildTestId('radio', 'option', testId, index)}
-				/>
-				<label
-					for={`${name}-${option.value}`}
-					class="text-default-700 text-sm"
-					data-testid={buildTestId('radio', 'label', testId, index)}
-				>
-					{option.label}
-				</label>
-			</div>
-		{/each}
-	</div>
-	{#if errors.length}
-		{#each errors as error, i (i)}
-			<p id={`${name}-error-${i}`} class="text-danger-600 mt-1 text-sm" role="alert">
-				{error}
-			</p>
-		{/each}
-	{/if}
-</div>

package/dist/forms/RadioInputs.svelte.d.ts

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

package/dist/forms/RadioPill.svelte

@@ -1,66 +0,0 @@
-<script lang="ts">
-	import { cn } from '../helper/cls.js';
-	import type { RadioPillProps } from '../index.js';
-
-	let {
-		options = [],
-		value = $bindable(options.length > 0 ? options[0].value : ''),
-		name = '',
-		class: className = '',
-		errors = [],
-		onchange = undefined,
-		label = ''
-	}: RadioPillProps = $props();
-
-	function handleSelect(optionValue: string) {
-		value = optionValue;
-		if (onchange) onchange(optionValue);
-	}
-
-	let pillDivRef: HTMLDivElement;
-	const hasError = $derived(errors && errors.length > 0);
-
-	$effect(() => {
-		if (errors.length) {
-			pillDivRef.scrollIntoView({ behavior: 'smooth', block: 'center' });
-		}
-	});
-</script>
-
-<div class={cn('flex flex-col space-y-2', className)} bind:this={pillDivRef}>
-	{#if hasError}
-		<div class="text-danger-500 text-sm">{errors[0]}</div>
-	{/if}
-	{#if label}
-		<label
-			class={cn('text-sm font-medium', hasError ? 'text-danger-500' : 'text-default-700')}
-			for={value}>{label}</label
-		>
-	{/if}
-	<div class="inline-flex flex-wrap gap-2">
-		{#each options as option (option.value)}
-			<button
-				id={option.value}
-				type="button"
-				onclick={() => handleSelect(option.value)}
-				class={cn(
-					'border-default-200 cursor-pointer rounded-lg border px-4 py-2 text-sm font-medium transition-all',
-					{
-						'border-info-600 bg-info-600 text-white': value === option.value && !hasError,
-						'border-danger-500 bg-danger-500 text-white': value === option.value && hasError,
-						'text-default-800 hover:border-default-300 bg-white':
-							value !== option.value && !hasError,
-						'border-danger-500 text-danger-500 hover:bg-danger-50':
-							value !== option.value && hasError,
-						'text-default-400': value !== option.value && option.value === '128' && !hasError
-					}
-				)}
-				aria-pressed={value === option.value}
-			>
-				{option.label}
-			</button>
-		{/each}
-	</div>
-</div>
-
-<input type="hidden" {name} {value} />

package/dist/forms/RadioPill.svelte.d.ts

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