@makolabs/ripple 2.5.9 → 3.0.0

package/dist/filters/sync-filters-to-url.svelte.js

@@ -0,0 +1,114 @@
+function isDateRange(v) {
+    return !!v && typeof v === 'object' && !Array.isArray(v);
+}
+/**
+ * Sync a reactive `selections` object to/from URL query params.
+ *
+ * - On first call: reads current URL params into the setter.
+ * - On every subsequent change to `getter()`: writes back to the URL.
+ *
+ * Designed for use inside a Svelte 5 component with `$effect` semantics — call
+ * it at the top level of `<script>` and it will register its own `$effect`.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { CompactFilters, syncFiltersToUrl } from '@makolabs/ripple';
+ *   let selections = $state({ status: 'all' });
+ *   syncFiltersToUrl(() => selections, (v) => (selections = v));
+ * </script>
+ *
+ * <CompactFilters {filterGroups} bind:selections />
+ * ```
+ *
+ * Environment:
+ * - Uses `window.location` and `history.replaceState` — no-ops on the server.
+ * - Multi-select values (`string[]`) are serialized as comma-joined strings.
+ * - Removes a key from the URL when its value is empty / empty array.
+ * - Leaves unrelated URL params untouched.
+ */
+export function syncFiltersToUrl(getter, setter, options = {}) {
+    if (typeof window === 'undefined')
+        return;
+    const { keys, debounceMs = 150, arrayKeys = [], dateRangeKeys = [] } = options;
+    // Initial read from URL — plain imperative parse, no reactivity needed.
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    const params = new URLSearchParams(window.location.search);
+    const initial = {};
+    const managedKeys = keys ?? Object.keys(getter());
+    let hasAny = false;
+    for (const key of managedKeys) {
+        if (dateRangeKeys.includes(key)) {
+            const from = params.get(`${key}_from`);
+            const to = params.get(`${key}_to`);
+            if (from && to) {
+                const preset = params.get(`${key}_preset`) ?? undefined;
+                initial[key] = preset ? { from, to, preset } : { from, to };
+                hasAny = true;
+            }
+            continue;
+        }
+        const raw = params.get(key);
+        if (raw !== null) {
+            initial[key] = arrayKeys.includes(key) ? raw.split(',').filter(Boolean) : raw;
+            hasAny = true;
+        }
+    }
+    if (hasAny) {
+        setter({ ...getter(), ...initial });
+    }
+    // Write on change
+    let timer;
+    $effect(() => {
+        const current = getter();
+        // Touch each managed value to register reactive deps
+        for (const key of keys ?? Object.keys(current)) {
+            void current[key];
+        }
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+            // eslint-disable-next-line svelte/prefer-svelte-reactivity
+            const url = new URL(window.location.href);
+            const managed = keys ?? Object.keys(current);
+            for (const key of managed) {
+                const value = current[key];
+                if (dateRangeKeys.includes(key)) {
+                    url.searchParams.delete(`${key}_from`);
+                    url.searchParams.delete(`${key}_to`);
+                    url.searchParams.delete(`${key}_preset`);
+                    if (isDateRange(value)) {
+                        url.searchParams.set(`${key}_from`, value.from);
+                        url.searchParams.set(`${key}_to`, value.to);
+                        if (value.preset)
+                            url.searchParams.set(`${key}_preset`, value.preset);
+                    }
+                    continue;
+                }
+                if (value === undefined ||
+                    value === null ||
+                    value === '' ||
+                    (Array.isArray(value) && value.length === 0)) {
+                    url.searchParams.delete(key);
+                }
+                else if (Array.isArray(value)) {
+                    url.searchParams.set(key, value.join(','));
+                }
+                else if (typeof value === 'string') {
+                    url.searchParams.set(key, value);
+                }
+            }
+            const next = url.pathname + (url.search ? url.search : '') + url.hash;
+            const currentPath = window.location.pathname + window.location.search + window.location.hash;
+            if (next !== currentPath) {
+                // Use SvelteKit's replaceState so the router stays in sync. Fall
+                // back to history.replaceState for non-SvelteKit consumers.
+                import('$app/navigation')
+                    .then(({ replaceState }) => replaceState(next, {}))
+                    .catch(() => {
+                    window.history.replaceState({}, '', next);
+                });
+            }
+        }, debounceMs);
+        return () => clearTimeout(timer);
+    });
+}

package/dist/forms/DateRange.svelte

@@ -2,6 +2,8 @@
 	import { cn } from '../helper/cls.js';
 	import type { DateRangeProps } from '../index.js';
 	import Portal from '../utils/Portal.svelte';
+	import { fly } from 'svelte/transition';
+	import { quintOut } from 'svelte/easing';
 
 	let {
 		startDate = $bindable(),
@@ -247,7 +249,6 @@
 			onclick={toggleDatepicker}
 			aria-haspopup="true"
 			aria-expanded={isOpen}
-			aria-invalid={errors?.length ? 'true' : undefined}
 			aria-describedby={errors?.length ? `${id}-errors` : undefined}
 			{disabled}
 		>
@@ -298,6 +299,7 @@
 			<div
 				bind:this={calendarRef}
 				class="ring-opacity-5 ring-default-300 absolute z-10 mt-1 w-full origin-top-left rounded-md bg-white p-4 shadow-lg ring-1 focus:outline-none"
+				transition:fly={{ y: -8, duration: 300, easing: quintOut }}
 			>
 				<div class="mb-2 flex items-center justify-between">
 					{#if viewMode === 'days'}
@@ -488,7 +490,7 @@
 
 				{#if startDate || endDate}
 					<div
-						class="border-default-200 text-default-500 mt-4 flex justify-between border-t pt-3 text-xs"
+						class="border-default-200 text-default-500 mt-4 flex flex-wrap justify-between gap-x-4 gap-y-1 border-t pt-3 text-xs"
 					>
 						<div>
 							{startDate ? `${startLabel}: ${formatDate(startDate)}` : ''}

package/dist/forms/Input.svelte

@@ -12,7 +12,7 @@
 		placeholder,
 		disabled = false,
 		class: className = '',
-		size = Size.BASE,
+		size = Size.MD,
 		value = $bindable(),
 		errors = [],
 		testId,
@@ -33,7 +33,7 @@
 				...(BASIC_TYPES.includes(type)
 					? {
 							'h-8 text-sm': size === Size.SM,
-							'h-10 text-base': size === Size.BASE,
+							'h-10 text-base': size === Size.MD,
 							'h-12 text-lg': size === Size.LG
 						}
 					: {}),

package/dist/forms/MarketSelector.svelte

@@ -15,24 +15,29 @@
 		showFlags = true,
 		label = '',
 		appearance = 'surface',
-		orientation = 'horizontal',
+		orientation = 'auto',
 		labelLayout = 'inline',
 		labelClass = undefined,
 		color = Color.PRIMARY,
 		size = Size.SM,
 		compact = false,
+		flagsOnly = false,
 		disabled = false,
 		class: className = '',
 		onchange = undefined,
 		testId
 	}: MarketSelectorProps = $props();
 
+	// flagsOnly implies showFlags + compact (which sr-onlys the label)
+	const effectiveShowFlags = $derived(showFlags || flagsOnly);
+	const effectiveCompact = $derived(compact || flagsOnly);
+
 	const options = $derived.by((): SegmentedOption[] => {
 		return markets.map((code) => ({
 			value: code,
 			label: code,
 			title: COUNTRY_NAMES[code],
-			prefix: showFlags ? countryCodeToFlagEmoji(code) : undefined
+			prefix: effectiveShowFlags ? countryCodeToFlagEmoji(code) : undefined
 		}));
 	});
 
@@ -63,7 +68,7 @@
 		{labelClass}
 		{color}
 		{size}
-		{compact}
+		compact={effectiveCompact}
 		{disabled}
 		{testId}
 		onchange={handleChange}

package/dist/forms/NumberInput.svelte

@@ -10,12 +10,12 @@
 		name,
 		label,
 		placeholder = 'Enter a number',
-		size = Size.BASE,
+		size = Size.MD,
 		class: className = '',
 		units = [],
 		errors,
 		disabled = false,
-		dropdownicon: DropdownIcon,
+		dropdownIcon: DropdownIcon,
 		onunitchange: onUnitChange,
 		testId,
 		...restProps
@@ -35,7 +35,7 @@
 			},
 			{
 				'h-8': size === Size.SM,
-				'h-10': size === Size.BASE,
+				'h-10': size === Size.MD,
 				'h-12': size === Size.LG
 			},
 			'border-default-300 focus-within:border-primary-500 focus-within:ring-2 focus-within:ring-primary-500 focus-within:ring-offset-2',
@@ -48,7 +48,7 @@
 			'w-full bg-transparent outline-none disabled:cursor-not-allowed px-3 placeholder:text-default-400',
 			{
 				'text-sm': size === Size.SM,
-				'text-base': size === Size.BASE,
+				'text-base': size === Size.MD,
 				'text-lg': size === Size.LG
 			}
 		)

package/dist/forms/RadioGroup.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+	import { cn } from '../helper/cls.js';
+	import { buildTestId } from '../helper/testid.js';
+	import { Color, Size } from '../variants.js';
+	import type { RadioGroupProps } from '../index.js';
+
+	let {
+		name,
+		label,
+		options,
+		value = $bindable<string | undefined>(undefined),
+		disabled = false,
+		required = false,
+		orientation = 'vertical',
+		size = Size.MD,
+		color = Color.PRIMARY,
+		errors = [],
+		class: className = '',
+		onchange,
+		testId
+	}: RadioGroupProps = $props();
+
+	const hasErrors = $derived(errors.length > 0);
+
+	const dotSize = $derived(
+		{
+			[Size.XS]: 'size-3',
+			[Size.SM]: 'size-3.5',
+			[Size.MD]: 'size-4',
+			[Size.LG]: 'size-5',
+			[Size.XL]: 'size-6',
+			[Size.XXL]: 'size-7'
+		}[size]
+	);
+
+	const accentBg = $derived(
+		{
+			[Color.DEFAULT]: 'bg-default-600',
+			[Color.PRIMARY]: 'bg-primary-500',
+			[Color.SECONDARY]: 'bg-secondary-500',
+			[Color.INFO]: 'bg-info-500',
+			[Color.SUCCESS]: 'bg-success-500',
+			[Color.WARNING]: 'bg-warning-500',
+			[Color.DANGER]: 'bg-danger-500'
+		}[color]
+	);
+
+	function handlePick(next: string, optionDisabled: boolean) {
+		if (disabled || optionDisabled) return;
+		value = next;
+		onchange?.(next);
+	}
+</script>
+
+<fieldset
+	class={cn('w-full', className)}
+	{disabled}
+	aria-invalid={hasErrors}
+	data-testid={buildTestId('radio-group', undefined, testId)}
+>
+	{#if label}
+		<legend class="text-default-700 mb-2 block text-sm font-medium">
+			{label}
+			{#if required}<span class="text-danger-500" aria-hidden="true">*</span>{/if}
+		</legend>
+	{/if}
+
+	<div
+		class={cn('flex gap-3', orientation === 'vertical' ? 'flex-col' : 'flex-wrap items-center')}
+		role="radiogroup"
+		aria-label={label}
+	>
+		{#each options as option (option.value)}
+			{@const checked = value === option.value}
+			{@const optionDisabled = disabled || option.disabled === true}
+			<label
+				class={cn(
+					'group inline-flex cursor-pointer items-start gap-2 select-none',
+					optionDisabled && 'cursor-not-allowed opacity-60'
+				)}
+			>
+				<input
+					type="radio"
+					{name}
+					value={option.value}
+					{checked}
+					disabled={optionDisabled}
+					required={required && !value}
+					onchange={() => handlePick(option.value, optionDisabled)}
+					class="sr-only"
+					data-testid={buildTestId('radio-group', option.value, testId)}
+				/>
+				<span
+					aria-hidden="true"
+					class={cn(
+						'relative mt-0.5 flex shrink-0 items-center justify-center rounded-full border transition-colors',
+						dotSize,
+						checked ? `${accentBg} border-transparent` : 'border-default-300 bg-white',
+						hasErrors && !checked && 'border-danger-300'
+					)}
+				>
+					{#if checked}
+						<span class="size-1/3 rounded-full bg-white"></span>
+					{/if}
+				</span>
+				<span class="flex flex-col">
+					<span class="text-default-800 text-sm">{option.label}</span>
+					{#if option.description}
+						<span class="text-default-500 text-xs">{option.description}</span>
+					{/if}
+				</span>
+			</label>
+		{/each}
+	</div>
+
+	{#if hasErrors}
+		<ul class="mt-2 space-y-0.5" role="alert">
+			{#each errors as error (error)}
+				<li class="text-danger-600 text-xs">{error}</li>
+			{/each}
+		</ul>
+	{/if}
+</fieldset>

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

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

package/dist/forms/SegmentedControl.svelte

@@ -17,7 +17,7 @@
 		appearance = 'surface',
 		orientation = 'horizontal',
 		color = Color.PRIMARY,
-		size = Size.BASE,
+		size = Size.MD,
 		compact = false,
 		labelLayout = 'above',
 		labelClass = '',
@@ -41,8 +41,11 @@
 
 	const rootClass = $derived(
 		cn(
-			'w-fit',
+			orientation === 'auto' ? '@container w-full' : 'w-fit',
 			labelLayout === 'inline' ? 'flex flex-row items-center gap-2' : 'flex flex-col gap-2',
+			orientation === 'auto' &&
+				labelLayout === 'inline' &&
+				'@max-[250px]:flex-col @max-[250px]:items-stretch',
 			className
 		)
 	);
@@ -84,8 +87,12 @@
 	}
 
 	function handleSegmentKeydown(e: KeyboardEvent, index: number) {
-		const forward = orientation === 'horizontal' ? e.key === 'ArrowRight' : e.key === 'ArrowDown';
-		const backward = orientation === 'horizontal' ? e.key === 'ArrowLeft' : e.key === 'ArrowUp';
+		// `'auto'` defaults to horizontal layout (flex-row) and only flips
+		// to vertical via a container query below 250px — treat it as
+		// horizontal for keyboard nav since that matches the default render.
+		const isHorizontal = orientation === 'horizontal' || orientation === 'auto';
+		const forward = isHorizontal ? e.key === 'ArrowRight' : e.key === 'ArrowDown';
+		const backward = isHorizontal ? e.key === 'ArrowLeft' : e.key === 'ArrowUp';
 		if (forward) {
 			e.preventDefault();
 			moveSelection(index, 1);

package/dist/forms/Slider.svelte

@@ -4,7 +4,7 @@
 	import { buildTestId } from '../helper/testid.js';
 	import { slider } from './slider.js';
 	import { Size } from '../variants.js';
-	import type { SliderProps } from '../index.js';
+	import type { SliderProps, SliderTick } from '../index.js';
 
 	interface EnumOption {
 		value: string | number;
@@ -20,7 +20,7 @@
 		label,
 		mode = 'single' as SliderMode,
 		disabled = false,
-		size = Size.BASE,
+		size = Size.MD,
 		errors = [],
 		class: className = '',
 		min = 0,
@@ -38,9 +38,45 @@
 			maximumFractionDigits: 1,
 			minimumFractionDigits: 0
 		},
+		tickInterval,
+		ticks,
 		testId
 	}: SliderProps = $props();
 
+	/**
+	 * Resolved tick list for single/range modes. Explicit `ticks` wins;
+	 * otherwise generated from `tickInterval`. Empty for enum mode.
+	 */
+	const resolvedTicks = $derived.by<SliderTick[]>(() => {
+		if (mode === 'enum') return [];
+		if (ticks && ticks.length > 0) {
+			return ticks
+				.map((t) => (typeof t === 'number' ? { value: t } : t))
+				.filter((t) => t.value >= min && t.value <= max);
+		}
+		if (tickInterval && tickInterval > 0) {
+			const out: SliderTick[] = [];
+			for (let v = min; v <= max; v += tickInterval) {
+				out.push({ value: v });
+			}
+			// Include max if rounding left it out
+			if (out[out.length - 1]?.value !== max) out.push({ value: max });
+			return out;
+		}
+		return [];
+	});
+
+	function getTickPosition(tickValue: number): string {
+		return `${((tickValue - min) / (max - min)) * 100}%`;
+	}
+
+	function isTickInRange(tickValue: number): boolean {
+		if (mode === 'range') return tickValue >= valueStart && tickValue <= valueEnd;
+		if (mode === 'single' && typeof value === 'number')
+			return tickValue >= min && tickValue <= value;
+		return false;
+	}
+
 	$effect(() => {
 		if (mode === 'enum' && options.length > 0 && value === min) {
 			value = options[0].value;
@@ -63,7 +99,17 @@
 		})
 	);
 
-	const baseClass = $derived(cn(base(), { 'mb-12': mode === 'enum' }, className));
+	const hasTickLabels = $derived(resolvedTicks.some((t) => t.label !== undefined));
+	const baseClass = $derived(
+		cn(
+			base(),
+			{
+				'mb-12': mode === 'enum' || hasTickLabels,
+				'mb-6': !hasTickLabels && resolvedTicks.length > 0 && mode !== 'enum'
+			},
+			className
+		)
+	);
 	const trackClass = $derived(cn(track()));
 	const rangeClass = $derived(cn(range()));
 	const thumbClass = $derived(cn(thumb()));
@@ -274,6 +320,29 @@
 		aria-label={label}
 		onclick={handleTrackClick}
 	>
+		{#each resolvedTicks as tick (tick.value)}
+			<div
+				class={cn(
+					'absolute top-1/2 h-2 w-px -translate-x-1/2 -translate-y-1/2',
+					isTickInRange(tick.value) ? 'bg-primary-400' : 'bg-default-300'
+				)}
+				style="left: {getTickPosition(tick.value)}"
+				aria-hidden="true"
+			></div>
+			{#if tick.label !== undefined}
+				<div
+					class={cn(
+						markClass,
+						'text-default-500 pointer-events-none top-4 text-[10px] whitespace-nowrap'
+					)}
+					style="left: {getTickPosition(tick.value)}"
+					aria-hidden="true"
+				>
+					{tick.label}
+				</div>
+			{/if}
+		{/each}
+
 		{#if mode === 'range'}
 			<div class={rangeClass} style="width: {getRangeWidth()}; left: {getRangeLeft()}"></div>
 			<div

package/dist/forms/Tags.svelte

@@ -2,6 +2,9 @@
 	import Badge from '../elements/badge/Badge.svelte';
 	import { Size } from '../variants.js';
 	import { cn } from '../helper/cls.js';
+	import { fade } from 'svelte/transition';
+	import { flip } from 'svelte/animate';
+	import { quintOut } from 'svelte/easing';
 	import type { TagsProps } from '../index.js';
 
 	let {
@@ -10,7 +13,7 @@
 		label,
 		errors,
 		placeholder = 'Type and press enter to add tags...',
-		size = Size.BASE,
+		size = Size.MD,
 		class: className = '',
 		suggestions = [],
 		onaddtag: onAddTag,
@@ -135,9 +138,15 @@
 	{/if}
 	<div class={containerClass} onfocusout={handleFocusOut}>
 		{#each value as tag (tag)}
-			<Badge {size} color="info" onclose={() => handleTagRemoval(tag)} class="shadow-xs">
-				{tag}
-			</Badge>
+			<div
+				class="inline-flex"
+				transition:fade={{ duration: 250, easing: quintOut }}
+				animate:flip={{ duration: 300, easing: quintOut }}
+			>
+				<Badge {size} color="info" onclose={() => handleTagRemoval(tag)} class="shadow-xs">
+					{tag}
+				</Badge>
+			</div>
 		{/each}
 		<input
 			bind:this={inputRef}
@@ -147,7 +156,7 @@
 			{placeholder}
 			class={cn('placeholder:text-default-400 min-w-[120px] flex-1 bg-transparent outline-none', {
 				'text-sm': size === Size.SM,
-				'text-base': size === Size.BASE,
+				'text-base': size === Size.MD,
 				'text-lg': size === Size.LG
 			})}
 			type="text"

package/dist/forms/Textarea.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">
+	import { cn } from '../helper/cls.js';
+	import { buildTestId } from '../helper/testid.js';
+	import { Size } from '../variants.js';
+	import type { TextareaProps } from '../index.js';
+
+	let {
+		name,
+		id = name,
+		label,
+		placeholder,
+		value = $bindable(''),
+		disabled = false,
+		readonly = false,
+		rows = 3,
+		autoGrow = false,
+		maxRows = 10,
+		maxLength,
+		showCount = false,
+		size = Size.MD,
+		errors = [],
+		class: className = '',
+		oninput,
+		onblur,
+		testId
+	}: TextareaProps = $props();
+
+	let el = $state<HTMLTextAreaElement | undefined>();
+
+	const sizeClass = $derived(
+		{
+			[Size.XS]: 'text-xs',
+			[Size.SM]: 'text-sm',
+			[Size.MD]: 'text-sm',
+			[Size.LG]: 'text-base',
+			[Size.XL]: 'text-lg',
+			[Size.XXL]: 'text-lg'
+		}[size]
+	);
+
+	const hasErrors = $derived(errors.length > 0);
+
+	const textareaClasses = $derived(
+		cn(
+			'w-full rounded-lg border bg-white px-3 py-2 shadow-xs transition-colors',
+			'placeholder:text-default-400',
+			'focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2',
+			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 && 'opacity-50 cursor-not-allowed',
+			autoGrow ? 'resize-none overflow-hidden' : 'resize-y',
+			className
+		)
+	);
+
+	/**
+	 * When autoGrow is on, measure scrollHeight and clamp to maxRows.
+	 * Runs after value changes so the textarea expands/shrinks with content.
+	 */
+	function resize() {
+		if (!autoGrow || !el) return;
+		el.style.height = 'auto';
+		const lineHeight = parseFloat(getComputedStyle(el).lineHeight || '20');
+		const padding =
+			parseFloat(getComputedStyle(el).paddingTop) + parseFloat(getComputedStyle(el).paddingBottom);
+		const maxHeight = lineHeight * maxRows + padding;
+		el.style.height = `${Math.min(el.scrollHeight, maxHeight)}px`;
+		el.style.overflowY = el.scrollHeight > maxHeight ? 'auto' : 'hidden';
+	}
+
+	$effect(() => {
+		void value;
+		resize();
+	});
+
+	function handleInput(e: Event) {
+		const v = (e.currentTarget as HTMLTextAreaElement).value;
+		value = v;
+		oninput?.(v);
+	}
+
+	function handleBlur(e: FocusEvent) {
+		onblur?.((e.currentTarget as HTMLTextAreaElement).value);
+	}
+</script>
+
+<div class="w-full" data-testid={buildTestId('textarea', 'wrapper', testId)}>
+	{#if label}
+		<label for={id} class="text-default-700 mb-1 block text-sm font-medium">
+			{label}
+		</label>
+	{/if}
+	<textarea
+		bind:this={el}
+		{id}
+		{name}
+		{placeholder}
+		{disabled}
+		{readonly}
+		{rows}
+		maxlength={maxLength}
+		class={textareaClasses}
+		aria-invalid={hasErrors}
+		aria-describedby={hasErrors ? `${name}-error` : undefined}
+		data-testid={buildTestId('textarea', undefined, testId)}
+		{value}
+		oninput={handleInput}
+		onblur={handleBlur}
+	></textarea>
+
+	{#if showCount && maxLength !== undefined}
+		<div class="text-default-400 mt-1 text-right text-xs">
+			{value?.length ?? 0} / {maxLength}
+		</div>
+	{/if}
+
+	{#if hasErrors}
+		<ul id="{name}-error" 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>