@makolabs/ripple 2.5.9 → 3.0.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,10 @@
 	import Badge from '../elements/badge/Badge.svelte';
 	import { Size } from '../variants.js';
 	import { cn } from '../helper/cls.js';
+	import { formSizeTokens } from './form-size.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 +14,7 @@
 		label,
 		errors,
 		placeholder = 'Type and press enter to add tags...',
-		size = Size.BASE,
+		size = Size.MD,
 		class: className = '',
 		suggestions = [],
 		onaddtag: onAddTag,
@@ -31,6 +35,25 @@
 		showSuggestions ? suggestions.filter(isUnselected).filter(matchesInput).slice(0, 5) : []
 	);
 
+	const tokens = $derived(formSizeTokens[size]);
+
+	// Chip size shifted one tier down from the Tags container so chip
+	// text matches the container text (e.g. Tags `md` uses `text-xs`, so
+	// Badge `sm` — which is also `text-xs` — lines up, instead of Badge
+	// `md` which jumps to `text-sm`).
+	const chipSize = $derived(
+		(
+			{
+				[Size.XS]: Size.XS,
+				[Size.SM]: Size.XS,
+				[Size.MD]: Size.SM,
+				[Size.LG]: Size.MD,
+				[Size.XL]: Size.LG,
+				[Size.XXL]: Size.LG
+			} as const
+		)[size]
+	);
+
 	function handleKeydown(event: KeyboardEvent) {
 		if (event.key === 'Enter') {
 			event.preventDefault();
@@ -105,12 +128,14 @@
 
 	const containerClass = $derived(
 		cn(
-			'relative flex flex-wrap gap-2 rounded-lg border bg-white shadow-xs px-3 py-2',
+			'relative flex flex-wrap gap-2 border bg-white',
+			tokens.radius,
+			tokens.shadow,
+			tokens.padX,
+			tokens.padY,
 			'border-default-300 focus-within:border-primary-500 focus-within:ring-2 focus-within:ring-primary-500 focus-within:ring-offset-2',
-			{
-				'border-danger-300 focus-within:border-danger-500 focus-within:ring-danger-500':
-					errors?.length
-			},
+			errors?.length &&
+				'border-danger-300 focus-within:border-danger-500 focus-within:ring-danger-500',
 			className
 		)
 	);
@@ -135,9 +160,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={chipSize} color="info" onclose={() => handleTagRemoval(tag)} class="shadow-xs">
+					{tag}
+				</Badge>
+			</div>
 		{/each}
 		<input
 			bind:this={inputRef}
@@ -145,11 +176,10 @@
 			{name}
 			id={name}
 			{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-lg': size === Size.LG
-			})}
+			class={cn(
+				'placeholder:text-default-400 min-w-[120px] flex-1 bg-transparent outline-none',
+				tokens.text
+			)}
 			type="text"
 			autocomplete="off"
 			onkeydown={handleKeydown}

package/dist/forms/Textarea.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+	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 { 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 tokens = $derived(formSizeTokens[size]);
+	const hasErrors = $derived(errors.length > 0);
+
+	const textareaClasses = $derived(
+		cn(
+			'w-full border bg-white transition-colors',
+			'placeholder:text-default-400',
+			'focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2',
+			tokens.radius,
+			tokens.shadow,
+			tokens.padX,
+			tokens.padY,
+			tokens.text,
+			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>

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

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

package/dist/forms/Toggle.svelte

@@ -2,6 +2,7 @@
 	import { cn } from '../helper/cls.js';
 	import { Color, Size } from '../variants.js';
 	import { buildTestId } from '../helper/testid.js';
+	import { formSizeTokens } from './form-size.js';
 	import type { ToggleProps, VariantColors, VariantSizes } from '../index.js';
 
 	let {
@@ -10,18 +11,18 @@
 		label,
 		disabled = false,
 		class: className = '',
-		size = Size.BASE,
+		size = Size.MD,
 		color = Color.PRIMARY,
 		value = $bindable(false),
 		errors = [],
 		offColor = 'bg-default-200',
-		onColor,
+		activeColor,
 		testId,
 		...restProps
 	}: ToggleProps = $props();
 
-	const activeColor = $derived(
-		onColor ||
+	const resolvedActiveColor = $derived(
+		activeColor ||
 			(
 				{
 					[Color.DEFAULT]: 'bg-default-800',
@@ -35,13 +36,19 @@
 			)[color]
 	);
 
+	const tokens = $derived(formSizeTokens[size]);
+
+	// Track + thumb + on-state offset ladder. Chosen to roughly match the
+	// height of an Input at the same `size` (20/24/28/36/44px) so a row
+	// with a Toggle and an Input reads evenly. 2xl aliases xl — form
+	// controls cap at xl.
 	const toggleSize = $derived(
 		(
 			{
-				[Size.XS]: 'w-8 h-4',
-				[Size.SM]: 'w-8 h-4',
-				[Size.BASE]: 'w-10 h-5',
-				[Size.LG]: 'w-12 h-6',
+				[Size.XS]: 'w-6 h-3',
+				[Size.SM]: 'w-7 h-3.5',
+				[Size.MD]: 'w-8 h-4',
+				[Size.LG]: 'w-10 h-5',
 				[Size.XL]: 'w-12 h-6',
 				[Size.XXL]: 'w-12 h-6'
 			} satisfies Record<VariantSizes, string>
@@ -51,10 +58,10 @@
 	const thumbSize = $derived(
 		(
 			{
-				[Size.XS]: 'h-3 w-3',
-				[Size.SM]: 'h-3 w-3',
-				[Size.BASE]: 'h-4 w-4',
-				[Size.LG]: 'h-5 w-5',
+				[Size.XS]: 'h-2 w-2',
+				[Size.SM]: 'h-2.5 w-2.5',
+				[Size.MD]: 'h-3 w-3',
+				[Size.LG]: 'h-4 w-4',
 				[Size.XL]: 'h-5 w-5',
 				[Size.XXL]: 'h-5 w-5'
 			} satisfies Record<VariantSizes, string>
@@ -64,10 +71,10 @@
 	const thumbPosition = $derived(
 		(
 			{
-				[Size.XS]: value ? 'translate-x-4' : 'translate-x-0.5',
-				[Size.SM]: value ? 'translate-x-4' : 'translate-x-0.5',
-				[Size.BASE]: value ? 'translate-x-5' : 'translate-x-0.5',
-				[Size.LG]: value ? 'translate-x-6' : 'translate-x-0.5',
+				[Size.XS]: value ? 'translate-x-3' : 'translate-x-0.5',
+				[Size.SM]: value ? 'translate-x-3.5' : 'translate-x-0.5',
+				[Size.MD]: value ? 'translate-x-4' : 'translate-x-0.5',
+				[Size.LG]: value ? 'translate-x-5' : 'translate-x-0.5',
 				[Size.XL]: value ? 'translate-x-6' : 'translate-x-0.5',
 				[Size.XXL]: value ? 'translate-x-6' : 'translate-x-0.5'
 			} satisfies Record<VariantSizes, string>
@@ -92,7 +99,7 @@
 		cn(
 			'relative inline-flex items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2',
 			toggleSize,
-			value ? activeColor : offColor,
+			value ? resolvedActiveColor : offColor,
 			{
 				'opacity-50 cursor-not-allowed': disabled,
 				'cursor-pointer': !disabled,
@@ -112,11 +119,12 @@
 	);
 
 	const labelClasses = $derived(
-		cn('text-sm font-medium', {
-			'text-default-700': !errors.length,
-			'text-danger-600': errors.length,
-			'opacity-50': disabled
-		})
+		cn(
+			'font-medium',
+			tokens.text,
+			errors.length ? 'text-danger-600' : 'text-default-700',
+			disabled && 'opacity-50'
+		)
 	);
 
 	function handleKeyDown(event: KeyboardEvent) {