@makolabs/ripple 2.5.9 → 3.0.1

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/Checkbox.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
 	import { cn } from '../helper/cls.js';
 	import { buildTestId } from '../helper/testid.js';
-	import type { CheckboxProps } from '../index.js';
+	import { Size } from '../variants.js';
+	import { formSizeTokens } from './form-size.js';
+	import type { CheckboxProps, VariantSizes } from '../index.js';
 
 	let {
 		name,
@@ -10,21 +12,34 @@
 		disabled = false,
 		errors = [],
 		required = false,
+		size = Size.MD,
 		testId
 	}: CheckboxProps = $props();
 
+	// Checkbox box dimension uses Tailwind's `size-*` shorthand, scaling
+	// from size-3 (XS) up to size-7 (XXL) so it stays visually proportional
+	// to adjacent form controls at the same size.
+	const boxSize: Record<VariantSizes, string> = {
+		[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'
+	};
+	const tokens = $derived(formSizeTokens[size]);
+
 	const checkboxClass = $derived(
-		cn('w-4 h-4 rounded text-primary-600 border-default-300 focus:ring-primary-500', {
-			'opacity-50 cursor-not-allowed': disabled,
-			'accent-danger-500': errors.length
-		})
+		cn(
+			'rounded text-primary-600 border-default-300 focus:ring-primary-500',
+			boxSize[size],
+			disabled && 'opacity-50 cursor-not-allowed',
+			errors.length && 'accent-danger-500'
+		)
 	);
 
 	const labelClass = $derived(
-		cn('text-sm font-medium', {
-			'text-default-700': !errors.length,
-			'text-danger-600': errors.length
-		})
+		cn('font-medium', tokens.text, errors.length ? 'text-danger-600' : 'text-default-700')
 	);
 </script>
 

package/dist/forms/DateRange.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
 	import { cn } from '../helper/cls.js';
+	import { Size } from '../variants.js';
+	import { formSizeTokens } from './form-size.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(),
@@ -15,11 +19,14 @@
 		endLabel = 'End date',
 		format = 'MM/dd/yyyy',
 		errors = [],
+		size = Size.MD,
 		id,
 		name,
 		onselect
 	}: DateRangeProps = $props();
 
+	const tokens = $derived(formSizeTokens[size]);
+
 	let isOpen = $state(false);
 	let hoveredDate = $state<Date | null>(null);
 	let datePickerRef = $state<HTMLDivElement | null>(null);
@@ -237,7 +244,12 @@
 			{id}
 			type="button"
 			class={cn(
-				'border-default-300 flex w-full items-center justify-between rounded-lg border bg-white px-3 py-2 text-sm shadow-xs',
+				'border-default-300 flex w-full items-center justify-between border bg-white',
+				tokens.height,
+				tokens.padX,
+				tokens.text,
+				tokens.radius,
+				tokens.shadow,
 				disabled
 					? 'bg-default-100 text-default-400 cursor-not-allowed opacity-50'
 					: errors?.length
@@ -247,7 +259,6 @@
 			onclick={toggleDatepicker}
 			aria-haspopup="true"
 			aria-expanded={isOpen}
-			aria-invalid={errors?.length ? 'true' : undefined}
 			aria-describedby={errors?.length ? `${id}-errors` : undefined}
 			{disabled}
 		>
@@ -258,7 +269,7 @@
 						? `${formatDate(startDate)} - Select end date`
 						: placeholder}
 			</span>
-			<svg class="text-default-400 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+			<svg class={cn('text-default-400', tokens.iconSize)} viewBox="0 0 20 20" fill="currentColor">
 				<path
 					fill-rule="evenodd"
 					d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
@@ -270,11 +281,16 @@
 		{#if startDate || endDate}
 			<button
 				type="button"
-				class="text-default-400 hover:text-default-500 absolute top-1/2 right-10 -translate-y-1/2"
+				class={cn(
+					'text-default-400 hover:text-default-500 absolute top-1/2 -translate-y-1/2',
+					// Sit just left of the calendar icon; use the token gap
+					// so the clear button stays visually tied to the icon.
+					'right-8'
+				)}
 				onclick={clearDates}
 				aria-label="Clear dates"
 			>
-				<svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+				<svg class={cn(tokens.iconSize)} viewBox="0 0 20 20" fill="currentColor">
 					<path
 						fill-rule="evenodd"
 						d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
@@ -298,6 +314,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 +505,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

@@ -2,6 +2,7 @@
 	import { cn } from '../helper/cls.js';
 	import { buildTestId } from '../helper/testid.js';
 	import { Size } from '../variants.js';
+	import { formSizeTokens } from './form-size.js';
 	import type { InputProps } from '../index.js';
 
 	let {
@@ -12,7 +13,7 @@
 		placeholder,
 		disabled = false,
 		class: className = '',
-		size = Size.BASE,
+		size = Size.MD,
 		value = $bindable(),
 		errors = [],
 		testId,
@@ -20,26 +21,25 @@
 	}: InputProps = $props();
 
 	const BASIC_TYPES = ['text', 'email', 'password', 'number', 'tel', 'url', 'date', 'textarea'];
+	const tokens = $derived(formSizeTokens[size]);
 	const inputClasses = $derived(
 		cn(
-			'transition-colors placeholder:text-default-400',
-			{
-				'border rounded-lg shadow-xs w-full bg-white px-3 py-2 text-sm focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2':
-					BASIC_TYPES.includes(type),
-				'w-full bg-white px-3 py-2 text-sm resize-y min-h-[100px]': type === 'textarea',
-				'border-danger-300 focus-within:border-danger-500 focus-within:ring-danger-500':
-					errors.length,
-				'opacity-50 cursor-not-allowed': disabled,
-				...(BASIC_TYPES.includes(type)
-					? {
-							'h-8 text-sm': size === Size.SM,
-							'h-10 text-base': size === Size.BASE,
-							'h-12 text-lg': size === Size.LG
-						}
-					: {}),
-				'border-default-300 focus-within:border-primary-500 focus-within:ring-primary-500':
-					!errors.length
-			},
+			'w-full bg-white transition-colors placeholder:text-default-400',
+			tokens.padX,
+			tokens.text,
+			// All basic types (including textarea) get the bordered look.
+			BASIC_TYPES.includes(type) && [
+				'border focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2',
+				tokens.radius,
+				tokens.shadow
+			],
+			// Single-line types get a fixed height; textarea is content-driven.
+			type !== 'textarea' && tokens.height,
+			type === 'textarea' && ['resize-y min-h-[100px]', tokens.padY],
+			errors.length
+				? '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',
 			className
 		)
 	);

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,
+		size = Size.MD,
 		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

@@ -2,6 +2,7 @@
 	import { cn } from '../helper/cls.js';
 	import { buildTestId } from '../helper/testid.js';
 	import { Size } from '../variants.js';
+	import { formSizeTokens } from './form-size.js';
 	import type { NumberInputProps } from '../index.js';
 
 	let {
@@ -10,12 +11,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
@@ -26,18 +27,16 @@
 
 	const selectedOption = $derived(units.find((u) => u.value === unit));
 
+	const tokens = $derived(formSizeTokens[size]);
+
 	const containerClass = $derived(
 		cn(
-			'relative flex items-center gap-1 rounded-lg border bg-white shadow-xs',
-			{
-				'border-danger-300': errors?.length,
-				'cursor-not-allowed opacity-50': disabled
-			},
-			{
-				'h-8': size === Size.SM,
-				'h-10': size === Size.BASE,
-				'h-12': size === Size.LG
-			},
+			'relative flex items-center gap-1 border bg-white',
+			tokens.radius,
+			tokens.shadow,
+			tokens.height,
+			errors?.length && 'border-danger-300',
+			disabled && 'cursor-not-allowed opacity-50',
 			'border-default-300 focus-within:border-primary-500 focus-within:ring-2 focus-within:ring-primary-500 focus-within:ring-offset-2',
 			className
 		)
@@ -45,12 +44,9 @@
 
 	const inputClass = $derived(
 		cn(
-			'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-lg': size === Size.LG
-			}
+			'w-full bg-transparent outline-none disabled:cursor-not-allowed placeholder:text-default-400',
+			tokens.padX,
+			tokens.text
 		)
 	);
 

package/dist/forms/RadioGroup.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">
+	import { cn } from '../helper/cls.js';
+	import { buildTestId } from '../helper/testid.js';
+	import { Color, Size } from '../variants.js';
+	import { formSizeTokens } from './form-size.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 tokens = $derived(formSizeTokens[size]);
+
+	// Radio circle scales with the form ladder — `size-3` at xs through
+	// `size-6` at xl. 2xl aliases xl.
+	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-6'
+		}[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={cn('text-default-800', tokens.text)}>{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);