@makolabs/ripple 2.5.9 → 3.0.0

package/dist/elements/combobox/ComboBox.svelte

@@ -0,0 +1,247 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+	import { buildTestId } from '../../helper/testid.js';
+	import { Size } from '../../variants.js';
+	import Popover from '../popover/Popover.svelte';
+	import type { ComboBoxProps, ComboBoxItem } from './combobox-types.js';
+
+	let {
+		name,
+		id = name,
+		label,
+		placeholder = 'Start typing…',
+		value = $bindable<string | null>(null),
+		items,
+		filter,
+		onsearch,
+		emptyLabel = 'No results',
+		clearable = true,
+		disabled = false,
+		required = false,
+		size = Size.MD,
+		errors = [],
+		class: className = '',
+		onchange,
+		testId
+	}: ComboBoxProps = $props();
+
+	let open = $state(false);
+	let query = $state('');
+	let highlightedIndex = $state(0);
+	let inputEl = $state<HTMLInputElement | undefined>();
+
+	const selectedItem = $derived(items.find((i) => i.value === value) ?? null);
+	const hasErrors = $derived(errors.length > 0);
+
+	/**
+	 * When the field isn't open for editing, the text reflects the current
+	 * selection. When open, the user's query takes over so they can narrow
+	 * the list. Blur without selection reverts to the saved selection.
+	 */
+	const displayValue = $derived(open ? query : (selectedItem?.label ?? ''));
+
+	const defaultFilter = (item: ComboBoxItem, q: string) => {
+		if (!q) return true;
+		return item.label.toLowerCase().includes(q.toLowerCase());
+	};
+
+	const filteredItems = $derived(
+		onsearch
+			? items // when server-side, parent controls the filtered list
+			: items.filter((item) => (filter ?? defaultFilter)(item, query))
+	);
+
+	// Reset highlight when list shrinks
+	$effect(() => {
+		void filteredItems;
+		if (highlightedIndex >= filteredItems.length) highlightedIndex = 0;
+	});
+
+	const sizeClass = $derived(
+		{
+			[Size.XS]: 'h-7 text-xs',
+			[Size.SM]: 'h-8 text-sm',
+			[Size.MD]: 'h-10 text-sm',
+			[Size.LG]: 'h-12 text-base',
+			[Size.XL]: 'h-14 text-lg',
+			[Size.XXL]: 'h-16 text-lg'
+		}[size]
+	);
+
+	function openMenu() {
+		if (disabled) return;
+		open = true;
+		query = '';
+	}
+
+	function closeMenu() {
+		open = false;
+		query = '';
+	}
+
+	function pick(item: ComboBoxItem) {
+		if (item.disabled) return;
+		value = item.value;
+		onchange?.(item.value);
+		closeMenu();
+	}
+
+	function clear(e: MouseEvent) {
+		e.stopPropagation();
+		value = null;
+		onchange?.(null);
+		inputEl?.focus();
+	}
+
+	function handleInput(e: Event) {
+		const v = (e.currentTarget as HTMLInputElement).value;
+		query = v;
+		open = true;
+		highlightedIndex = 0;
+		onsearch?.(v);
+	}
+
+	function handleKey(e: KeyboardEvent) {
+		if (disabled) return;
+		if (e.key === 'ArrowDown') {
+			e.preventDefault();
+			if (!open) {
+				openMenu();
+				return;
+			}
+			highlightedIndex = Math.min(highlightedIndex + 1, filteredItems.length - 1);
+		} else if (e.key === 'ArrowUp') {
+			e.preventDefault();
+			highlightedIndex = Math.max(highlightedIndex - 1, 0);
+		} else if (e.key === 'Enter') {
+			e.preventDefault();
+			const item = filteredItems[highlightedIndex];
+			if (item) pick(item);
+		} else if (e.key === 'Escape') {
+			if (open) {
+				e.preventDefault();
+				closeMenu();
+			}
+		}
+	}
+</script>
+
+<div class={cn('w-full', className)} data-testid={buildTestId('combobox', 'wrapper', testId)}>
+	{#if label}
+		<label for={id} class="text-default-700 mb-1 block text-sm font-medium">
+			{label}
+			{#if required}<span class="text-danger-500" aria-hidden="true">*</span>{/if}
+		</label>
+	{/if}
+
+	<input type="hidden" {name} value={value ?? ''} {required} />
+
+	<Popover trigger="manual" bind:open panelClass="w-[var(--cbx-w,20rem)] p-0">
+		<div
+			class={cn(
+				'flex w-full items-center gap-2 rounded-lg border bg-white px-3 transition-colors',
+				'focus-within:ring-2 focus-within:ring-offset-2 focus-within:outline-none',
+				sizeClass,
+				hasErrors
+					? 'border-danger-300 focus-within:border-danger-500 focus-within:ring-danger-500'
+					: 'border-default-300 focus-within:border-primary-500 focus-within:ring-primary-500',
+				disabled && 'cursor-not-allowed opacity-50'
+			)}
+		>
+			<input
+				{id}
+				bind:this={inputEl}
+				type="text"
+				role="combobox"
+				aria-expanded={open}
+				aria-controls="{id}-listbox"
+				aria-autocomplete="list"
+				aria-invalid={hasErrors}
+				autocomplete="off"
+				{placeholder}
+				{disabled}
+				value={displayValue}
+				oninput={handleInput}
+				onfocus={openMenu}
+				onkeydown={handleKey}
+				class="flex-1 bg-transparent outline-none"
+				data-testid={buildTestId('combobox', undefined, testId)}
+			/>
+			{#if clearable && value && !disabled}
+				<button
+					type="button"
+					onclick={clear}
+					aria-label="Clear selection"
+					class="text-default-400 hover:text-default-700 flex size-5 items-center justify-center rounded"
+				>
+					<svg class="size-3" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+						<path
+							d="M3 3l6 6M9 3l-6 6"
+							stroke="currentColor"
+							stroke-width="1.5"
+							stroke-linecap="round"
+						/>
+					</svg>
+				</button>
+			{/if}
+			<svg
+				class={cn('text-default-400 size-4 transition-transform', open && 'rotate-180')}
+				viewBox="0 0 20 20"
+				fill="currentColor"
+				aria-hidden="true"
+			>
+				<path
+					fill-rule="evenodd"
+					d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06z"
+					clip-rule="evenodd"
+				/>
+			</svg>
+		</div>
+
+		{#snippet content()}
+			<ul
+				id="{id}-listbox"
+				role="listbox"
+				class="max-h-64 overflow-auto py-1"
+				data-testid={buildTestId('combobox', 'listbox', testId)}
+			>
+				{#each filteredItems as item, i (item.value)}
+					{@const selected = item.value === value}
+					{@const highlighted = i === highlightedIndex}
+					<li>
+						<button
+							type="button"
+							role="option"
+							aria-selected={selected}
+							disabled={item.disabled}
+							onmouseenter={() => (highlightedIndex = i)}
+							onclick={() => pick(item)}
+							class={cn(
+								'flex w-full flex-col items-start gap-0.5 px-3 py-1.5 text-left text-sm',
+								highlighted && 'bg-primary-50 text-primary-700',
+								selected && !highlighted && 'text-primary-600 font-medium',
+								item.disabled && 'text-default-300 cursor-not-allowed',
+								!item.disabled && !highlighted && 'text-default-700 hover:bg-default-50'
+							)}
+						>
+							<span>{item.label}</span>
+							{#if item.description}
+								<span class="text-default-500 text-xs">{item.description}</span>
+							{/if}
+						</button>
+					</li>
+				{:else}
+					<li class="text-default-400 px-3 py-2 text-sm">{emptyLabel}</li>
+				{/each}
+			</ul>
+		{/snippet}
+	</Popover>
+
+	{#if hasErrors}
+		<ul class="mt-1 space-y-0.5" role="alert">
+			{#each errors as error (error)}
+				<li class="text-danger-600 text-xs">{error}</li>
+			{/each}
+		</ul>
+	{/if}
+</div>

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

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

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

@@ -0,0 +1,41 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { VariantSizes } from '../../index.js';
+export type ComboBoxItem = {
+    value: string;
+    label: string;
+    /** Optional helper text shown below the label in the dropdown. */
+    description?: string;
+    disabled?: boolean;
+};
+export type ComboBoxProps = {
+    name: string;
+    id?: string;
+    label?: string;
+    placeholder?: string;
+    /** Bindable selected value. `null` when unset. */
+    value?: string | null;
+    /** Full list of options. Filtered locally by the typed query. */
+    items: ComboBoxItem[];
+    /**
+     * Custom filter. If provided, replaces the default case-insensitive
+     * label substring match. Return true to include the item in the list.
+     */
+    filter?: (item: ComboBoxItem, query: string) => boolean;
+    /**
+     * Called on every keystroke with the current query. Use this to fetch
+     * items from a server (set `items` from the parent based on the query).
+     * When present, the local `filter` is bypassed for the fetched set.
+     */
+    onsearch?: (query: string) => void;
+    /** Message shown when filtering leaves no matches. @default 'No results' */
+    emptyLabel?: string;
+    /** Show a clear × when something is selected. @default true */
+    clearable?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    size?: VariantSizes;
+    errors?: string[];
+    class?: ClassValue;
+    onchange?: (value: string | null) => void;
+    testId?: string;
+};

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

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

package/dist/elements/context-menu/ContextMenu.svelte

@@ -0,0 +1,137 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+	import { buildTestId } from '../../helper/testid.js';
+	import { fly } from 'svelte/transition';
+	import { quintOut } from 'svelte/easing';
+	import { Color } from '../../variants.js';
+	import type { ContextMenuProps, ContextMenuItem } from './context-menu-types.js';
+
+	let {
+		items,
+		children,
+		trigger = 'rightclick',
+		class: className = '',
+		menuClass = '',
+		testId
+	}: ContextMenuProps = $props();
+
+	let open = $state(false);
+	let x = $state(0);
+	let y = $state(0);
+	let menuRef = $state<HTMLDivElement | undefined>();
+	let longPressTimer: ReturnType<typeof setTimeout> | undefined;
+
+	function openAt(clientX: number, clientY: number) {
+		x = clientX;
+		y = clientY;
+		open = true;
+	}
+
+	function close() {
+		open = false;
+	}
+
+	function handleContextMenu(e: MouseEvent) {
+		if (trigger !== 'rightclick') return;
+		e.preventDefault();
+		openAt(e.clientX, e.clientY);
+	}
+
+	function handleTouchStart(e: TouchEvent) {
+		if (trigger !== 'longpress') return;
+		const t = e.touches[0];
+		longPressTimer = setTimeout(() => openAt(t.clientX, t.clientY), 600);
+	}
+
+	function handleTouchEnd() {
+		clearTimeout(longPressTimer);
+	}
+
+	function handleWindowClick(e: MouseEvent) {
+		if (!open) return;
+		if (menuRef && !menuRef.contains(e.target as Node)) close();
+	}
+
+	function handleKey(e: KeyboardEvent) {
+		if (open && e.key === 'Escape') close();
+	}
+
+	function handleItem(item: Exclude<ContextMenuItem, 'separator'>) {
+		if (item.disabled) return;
+		item.onclick?.();
+		close();
+	}
+
+	function itemColorClass(color?: string): string {
+		if (color === Color.DANGER) return 'text-danger-600 hover:bg-danger-50';
+		return 'text-default-700 hover:bg-default-50';
+	}
+
+	// Clamp x/y into viewport after mount so the menu doesn't overflow
+	$effect(() => {
+		if (!open || !menuRef) return;
+		const rect = menuRef.getBoundingClientRect();
+		const maxX = window.innerWidth - rect.width - 4;
+		const maxY = window.innerHeight - rect.height - 4;
+		if (x > maxX) x = Math.max(4, maxX);
+		if (y > maxY) y = Math.max(4, maxY);
+	});
+</script>
+
+<svelte:window onmousedown={handleWindowClick} onkeydown={handleKey} />
+
+<div
+	class={cn('inline-block', className)}
+	oncontextmenu={handleContextMenu}
+	ontouchstart={handleTouchStart}
+	ontouchend={handleTouchEnd}
+	ontouchcancel={handleTouchEnd}
+	role="presentation"
+	data-testid={buildTestId('context-menu', undefined, testId)}
+>
+	{@render children()}
+</div>
+
+{#if open}
+	<div
+		bind:this={menuRef}
+		role="menu"
+		transition:fly={{ y: -4, duration: 140, easing: quintOut }}
+		class={cn(
+			'border-default-200 fixed z-50 min-w-[11rem] rounded-lg border bg-white py-1 shadow-lg',
+			menuClass
+		)}
+		style="left: {x}px; top: {y}px;"
+		data-testid={buildTestId('context-menu', 'menu', testId)}
+	>
+		{#each items as item, i (i)}
+			{#if item === 'separator'}
+				<div class="bg-default-100 my-1 h-px" aria-hidden="true"></div>
+			{:else}
+				<button
+					type="button"
+					role="menuitem"
+					disabled={item.disabled}
+					onclick={() => handleItem(item)}
+					class={cn(
+						'flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm',
+						item.disabled
+							? 'text-default-300 cursor-not-allowed'
+							: `cursor-pointer ${itemColorClass(item.color)}`
+					)}
+				>
+					{#if item.icon}
+						{@const Icon = item.icon}
+						<span class="flex size-4 shrink-0 items-center justify-center">
+							<Icon />
+						</span>
+					{/if}
+					<span class="flex-1">{item.label}</span>
+					{#if item.shortcut}
+						<span class="text-default-400 ml-4 text-xs">{item.shortcut}</span>
+					{/if}
+				</button>
+			{/if}
+		{/each}
+	</div>
+{/if}

package/dist/elements/context-menu/ContextMenu.svelte.d.ts

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

package/dist/elements/context-menu/context-menu-types.d.ts

@@ -0,0 +1,40 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { Component, Snippet } from 'svelte';
+import type { VariantColors } from '../../index.js';
+/**
+ * Single entry in a ContextMenu. A `'separator'` value renders a
+ * horizontal divider.
+ */
+export type ContextMenuItem = {
+    label: string;
+    icon?: Component;
+    disabled?: boolean;
+    /**
+     * Semantic color for the item. `'danger'` is the conventional choice
+     * for destructive actions (Delete, Remove) and tints both the icon
+     * and the label.
+     */
+    color?: VariantColors;
+    /** Short text shown right-aligned (e.g. keyboard shortcut). */
+    shortcut?: string;
+    onclick?: () => void;
+} | 'separator';
+export type ContextMenuProps = {
+    /** Ordered list of items or `'separator'` strings. */
+    items: ContextMenuItem[];
+    /**
+     * Wrap this trigger in a right-click handler. Any child markup works —
+     * the consumer's interactive elements inside still receive their own
+     * events.
+     */
+    children: Snippet;
+    /**
+     * Alternative trigger gesture. `'rightclick'` is the web-standard
+     * `contextmenu` event. `'longpress'` is touch-friendly (600ms).
+     * @default 'rightclick'
+     */
+    trigger?: 'rightclick' | 'longpress';
+    class?: ClassValue;
+    menuClass?: ClassValue;
+    testId?: string;
+};

package/dist/elements/context-menu/context-menu-types.js

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

package/dist/elements/dropdown/Dropdown.svelte

@@ -16,7 +16,7 @@
 		containerClass = '',
 		itemClass = '',
 		class: className = '',
-		size = Size.BASE,
+		size = Size.MD,
 		disabled = false,
 		position = 'bottom-left',
 		width = 'w-56',

package/dist/elements/dropdown/Select.svelte

@@ -3,6 +3,8 @@
 	import { cn } from '../../helper/cls.js';
 	import { buildTestId } from '../../helper/testid.js';
 	import { selectTV } from './select.js';
+	import { fly } from 'svelte/transition';
+	import { quintOut } from 'svelte/easing';
 	import type { SelectItem, SelectProps } from '../../index.js';
 	import Badge from '../badge/Badge.svelte';
 	import { Size } from '../../variants.js';
@@ -15,7 +17,7 @@
 		placeholder = 'Select an option',
 		searchable = false,
 		disabled = false,
-		size = Size.BASE,
+		size = Size.MD,
 		class: className = '',
 		containerClass = '',
 		listClass = '',
@@ -407,6 +409,7 @@
 			role="listbox"
 			aria-labelledby="{selectId}-label"
 			data-testid={buildTestId('select', 'list', testId)}
+			transition:fly={{ y: -8, duration: 300, easing: quintOut }}
 		>
 			{#if isSearchable}
 				<div class={searchInputClass_}>