@makolabs/ripple 2.1.0 → 2.3.0

package/dist/elements/collapsible/CollapsibleTestWrapper.svelte

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

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

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

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

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/elements/timeline/Timeline.svelte

@@ -1,95 +0,0 @@
-<script lang="ts">
-	import { cn } from '../../helper/cls.js';
-	import type { TimelineItem } from '../../index.js';
-	import { formatDateTime, getRelativeTime } from '../../helper/date.js';
-	import { resolve } from '$app/paths';
-
-	let { items = [] as TimelineItem[], class: className = '' } = $props();
-</script>
-
-<div class={cn('flow-root', className)}>
-	<ul role="list" class="-mb-8">
-		{#each items as item, index (item.title + index)}
-			<li>
-				<div class="relative pb-8">
-					{#if index !== items.length - 1}
-						<span class="bg-default-200 absolute top-4 left-4 -ml-px h-full w-1" aria-hidden="true"
-						></span>
-					{/if}
-
-					{@render ItemWrap({ item })}
-				</div>
-			</li>
-		{/each}
-	</ul>
-</div>
-
-{#snippet ItemWrap({ item }: { item: TimelineItem })}
-	<div class="relative flex gap-x-3" class:items-center={!item.details}>
-		<div class="relative ml-0.5 flex-shrink-0">
-			{@render TimelineIcon(item)}
-		</div>
-		{#if item.details}
-			{@render CommentItem({ item })}
-		{:else}
-			{@render StandardItem({ item })}
-		{/if}
-	</div>
-{/snippet}
-
-{#snippet StandardItem({ item }: { item: TimelineItem })}
-	<div class="min-w-0 flex-1">
-		<div class="flex items-center justify-between">
-			<p class="text-default-500 text-sm">
-				{item.title}
-				{#if item.link}
-					<a href={resolve(item.link.url as `/`)} class="text-default-900 font-medium"
-						>{item.link.text}</a
-					>
-				{/if}
-			</p>
-			{@render TimeStamp(item.time)}
-		</div>
-	</div>
-{/snippet}
-
-{#snippet CommentItem({ item }: { item: TimelineItem })}
-	<div class="ring-default-200 w-full flex-grow rounded-md bg-white p-3 ring-1">
-		<div class="mb-1 flex justify-between gap-x-4">
-			<div class="text-default-900 text-sm font-medium">{item.title}</div>
-			{@render TimeStamp(item.time)}
-		</div>
-		<p class="text-default-500 text-sm">{item.details}</p>
-	</div>
-{/snippet}
-
-{#snippet TimeStamp(time: Date | string)}
-	<time
-		datetime={time instanceof Date ? time.toISOString() : time}
-		class="text-default-500 text-right text-sm whitespace-nowrap"
-		title={formatDateTime(time)}
-	>
-		{getRelativeTime(time)}
-	</time>
-{/snippet}
-
-{#snippet TimelineIcon(item: TimelineItem, classes = 'size-7 shrink-0')}
-	{#if item.Icon}
-		{@const Icon = item.Icon}
-		<Icon class={classes} />
-	{:else}
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			width="16"
-			height="16"
-			viewBox="0 0 16 16"
-			class={classes}
-		>
-			<circle cx="8" cy="8" r="7" fill="white" />
-			<path
-				fill="currentColor"
-				d="M1 8a7 7 0 1 1 14 0A7 7 0 0 1 1 8m9.854-1.146a.5.5 0 0 0-.708-.708L7.25 9.043L5.854 7.646a.5.5 0 1 0-.708.708l1.75 1.75a.5.5 0 0 0 .708 0z"
-			/>
-		</svg>
-	{/if}
-{/snippet}

package/dist/elements/timeline/Timeline.svelte.d.ts

@@ -1,7 +0,0 @@
-import type { TimelineItem } from '../../index.js';
-declare const Timeline: import("svelte").Component<{
-    items?: TimelineItem[];
-    class?: string;
-}, {}, "">;
-type Timeline = ReturnType<typeof Timeline>;
-export default Timeline;

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

@@ -1,11 +0,0 @@
-import type { Component } from 'svelte';
-export interface TimelineItem {
-    title: string;
-    time: Date | string;
-    link?: {
-        text: string;
-        url: string;
-    };
-    Icon?: Component;
-    details?: string;
-}

package/dist/elements/timeline/timeline-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;