@makolabs/ripple 3.0.0 → 3.0.2

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 {
@@ -12,32 +13,63 @@
 		placeholder = 'Enter a number',
 		size = Size.MD,
 		class: className = '',
+		icon: LeadingIcon,
+		iconPreset,
 		units = [],
 		errors,
 		disabled = false,
 		dropdownIcon: DropdownIcon,
 		onunitchange: onUnitChange,
+		formatThousands = true,
+		locale = 'en-US',
 		testId,
 		...restProps
 	}: NumberInputProps = $props();
 
+	const showPresetIcon = $derived(!LeadingIcon && iconPreset);
+
 	let showUnitDropdown = $state(false);
 	let containerRef = $state<HTMLDivElement | null>(null);
+	let inputFocused = $state(false);
 
 	const selectedOption = $derived(units.find((u) => u.value === unit));
 
+	// Only render the dropdown trigger when there's something to switch
+	// between. A single-unit field looks like a static currency label
+	// rather than an editable selector — no chevron, no click target.
+	const hasMultipleUnits = $derived(units.length > 1);
+
+	// While focused, show the raw number so typing stays predictable
+	// (typed commas would otherwise fight the formatter). On blur we
+	// reformat with locale thousands separators for readability.
+	const displayValue = $derived(
+		value == null || Number.isNaN(value)
+			? ''
+			: inputFocused || !formatThousands
+				? String(value)
+				: value.toLocaleString(locale)
+	);
+
+	function handleInput(e: Event) {
+		const raw = (e.currentTarget as HTMLInputElement).value.replace(/[^0-9.-]/g, '');
+		if (raw === '' || raw === '-') {
+			value = 0;
+			return;
+		}
+		const num = Number(raw);
+		if (!Number.isNaN(num)) value = num;
+	}
+
+	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.MD,
-				'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 +77,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.MD,
-				'text-lg': size === Size.LG
-			}
+			'w-full bg-transparent outline-none disabled:cursor-not-allowed placeholder:text-default-400',
+			tokens.padX,
+			tokens.text
 		)
 	);
 
@@ -91,27 +120,27 @@
 		>
 	{/if}
 	<div class={containerClass} bind:this={containerRef}>
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			width="24"
-			height="24"
-			viewBox="0 0 24 24"
-			class="text-default-500 ml-3 size-4 flex-shrink-0"
-		>
-			<path
-				fill="none"
-				stroke="currentColor"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				stroke-width="2"
-				d="M17 9V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2m2 4h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2m7-5a2 2 0 1 1-4 0a2 2 0 0 1 4 0"
-			/>
-		</svg>
+		{#if LeadingIcon}
+			<span class={cn('text-default-500 flex shrink-0 items-center', tokens.padX)}>
+				<LeadingIcon class={tokens.iconSize} />
+			</span>
+		{:else if showPresetIcon}
+			<span
+				class={cn('text-default-500 flex shrink-0 items-center', tokens.padX)}
+				aria-hidden="true"
+			>
+				{@render presetIconSvg(iconPreset)}
+			</span>
+		{/if}
 		<input
 			{name}
 			id={name}
-			bind:value
-			type="number"
+			type="text"
+			inputmode="decimal"
+			value={displayValue}
+			oninput={handleInput}
+			onfocus={() => (inputFocused = true)}
+			onblur={() => (inputFocused = false)}
 			{placeholder}
 			{disabled}
 			class={inputClass}
@@ -119,27 +148,41 @@
 			{...restProps}
 		/>
 
-		<button
-			type="button"
-			class="hover:bg-default-100 flex items-center gap-1 rounded px-1"
-			onclick={handleUnitToggle}
-			{disabled}
-		>
-			{#if selectedOption?.icon}
-				{@const Icon = selectedOption.icon}
-				<Icon />
-			{/if}
-			<span class="text-sm">{unit}</span>
-			{#if DropdownIcon}
-				<DropdownIcon class={iconClass} />
-			{:else}
-				<svg class={iconClass} fill="none" viewBox="0 0 24 24" stroke="currentColor">
-					<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
-				</svg>
-			{/if}
-		</button>
-
-		{#if showUnitDropdown}
+		{#if hasMultipleUnits}
+			<!-- Clickable selector: renders only when there's more than one
+			     unit to pick from. Otherwise the unit is static text below. -->
+			<button
+				type="button"
+				class="hover:bg-default-100 flex items-center gap-1 rounded px-1"
+				onclick={handleUnitToggle}
+				{disabled}
+			>
+				{#if selectedOption?.icon}
+					{@const Icon = selectedOption.icon}
+					<Icon />
+				{/if}
+				<span class={cn(tokens.text)}>{unit}</span>
+				{#if DropdownIcon}
+					<DropdownIcon class={iconClass} />
+				{:else}
+					<svg class={iconClass} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+						<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
+					</svg>
+				{/if}
+			</button>
+		{:else if unit}
+			<!-- Static unit label — no chevron, not clickable. Matches the
+			     field's text size so it sits inline. -->
+			<span class={cn('text-default-500 flex items-center gap-1 pr-2', tokens.text)}>
+				{#if selectedOption?.icon}
+					{@const Icon = selectedOption.icon}
+					<Icon />
+				{/if}
+				{unit}
+			</span>
+		{/if}
+
+		{#if showUnitDropdown && hasMultipleUnits}
 			<div class={dropdownClass}>
 				{#each units as unitOption (unitOption.value)}
 					<button
@@ -167,3 +210,65 @@
 		{/each}
 	{/if}
 </div>
+
+{#snippet presetIconSvg(preset: string | undefined)}
+	{#if preset === 'currency'}
+		<svg
+			class={tokens.iconSize}
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		>
+			<path
+				d="M17 9V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2m2 4h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2m7-5a2 2 0 1 1-4 0a2 2 0 0 1 4 0"
+			/>
+		</svg>
+	{:else if preset === 'quantity'}
+		<span class={cn(tokens.iconSize, 'flex items-center justify-center font-bold')}>#</span>
+	{:else if preset === 'percentage'}
+		<svg
+			class={tokens.iconSize}
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		>
+			<path d="M19 5 5 19" /><circle cx="6.5" cy="6.5" r="2.5" /><circle
+				cx="17.5"
+				cy="17.5"
+				r="2.5"
+			/>
+		</svg>
+	{:else if preset === 'weight'}
+		<svg
+			class={tokens.iconSize}
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		>
+			<path
+				d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
+			/><path d="M3.27 6.96 12 12.01l8.73-5.05M12 22.08V12" />
+		</svg>
+	{:else if preset === 'temperature'}
+		<svg
+			class={tokens.iconSize}
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		>
+			<path d="M14 14.76V3.5a2.5 2.5 0 0 0-5 0v11.26a4.5 4.5 0 1 0 5 0z" />
+		</svg>
+	{/if}
+{/snippet}

package/dist/forms/RadioGroup.svelte

@@ -2,6 +2,7 @@
 	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 {
@@ -21,7 +22,10 @@
 	}: 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',
@@ -29,7 +33,7 @@
 			[Size.MD]: 'size-4',
 			[Size.LG]: 'size-5',
 			[Size.XL]: 'size-6',
-			[Size.XXL]: 'size-7'
+			[Size.XXL]: 'size-6'
 		}[size]
 	);
 
@@ -104,7 +108,7 @@
 					{/if}
 				</span>
 				<span class="flex flex-col">
-					<span class="text-default-800 text-sm">{option.label}</span>
+					<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}

package/dist/forms/SegmentedControl.svelte

@@ -41,7 +41,7 @@
 
 	const rootClass = $derived(
 		cn(
-			orientation === 'auto' ? '@container w-full' : 'w-fit',
+			orientation === 'auto' ? '@container w-full' : 'w-full sm:w-fit',
 			labelLayout === 'inline' ? 'flex flex-row items-center gap-2' : 'flex flex-col gap-2',
 			orientation === 'auto' &&
 				labelLayout === 'inline' &&

package/dist/forms/Tags.svelte

@@ -2,6 +2,7 @@
 	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';
@@ -34,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();
@@ -108,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
 		)
 	);
@@ -143,7 +165,7 @@
 				transition:fade={{ duration: 250, easing: quintOut }}
 				animate:flip={{ duration: 300, easing: quintOut }}
 			>
-				<Badge {size} color="info" onclose={() => handleTagRemoval(tag)} class="shadow-xs">
+				<Badge size={chipSize} color="info" onclose={() => handleTagRemoval(tag)} class="shadow-xs">
 					{tag}
 				</Badge>
 			</div>
@@ -154,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.MD,
-				'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

@@ -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 { TextareaProps } from '../index.js';
 
 	let {
@@ -27,25 +28,19 @@
 
 	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 tokens = $derived(formSizeTokens[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',
+			'w-full border bg-white transition-colors',
 			'placeholder:text-default-400',
 			'focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2',
-			sizeClass,
+			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',

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 {
@@ -35,15 +36,21 @@
 			)[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.XS]: 'w-7 h-3.5',
 				[Size.SM]: 'w-8 h-4',
 				[Size.MD]: 'w-10 h-5',
 				[Size.LG]: 'w-12 h-6',
-				[Size.XL]: 'w-12 h-6',
-				[Size.XXL]: 'w-12 h-6'
+				[Size.XL]: 'w-14 h-7',
+				[Size.XXL]: 'w-14 h-7'
 			} satisfies Record<VariantSizes, string>
 		)[size]
 	);
@@ -51,12 +58,12 @@
 	const thumbSize = $derived(
 		(
 			{
-				[Size.XS]: 'h-3 w-3',
+				[Size.XS]: 'h-2.5 w-2.5',
 				[Size.SM]: 'h-3 w-3',
 				[Size.MD]: 'h-4 w-4',
 				[Size.LG]: 'h-5 w-5',
-				[Size.XL]: 'h-5 w-5',
-				[Size.XXL]: 'h-5 w-5'
+				[Size.XL]: 'h-6 w-6',
+				[Size.XXL]: 'h-6 w-6'
 			} satisfies Record<VariantSizes, string>
 		)[size]
 	);
@@ -64,12 +71,12 @@
 	const thumbPosition = $derived(
 		(
 			{
-				[Size.XS]: value ? 'translate-x-4' : 'translate-x-0.5',
+				[Size.XS]: value ? 'translate-x-3.5' : 'translate-x-0.5',
 				[Size.SM]: value ? 'translate-x-4' : 'translate-x-0.5',
 				[Size.MD]: value ? 'translate-x-5' : 'translate-x-0.5',
 				[Size.LG]: value ? 'translate-x-6' : 'translate-x-0.5',
-				[Size.XL]: value ? 'translate-x-6' : 'translate-x-0.5',
-				[Size.XXL]: value ? 'translate-x-6' : 'translate-x-0.5'
+				[Size.XL]: value ? 'translate-x-7' : 'translate-x-0.5',
+				[Size.XXL]: value ? 'translate-x-7' : 'translate-x-0.5'
 			} satisfies Record<VariantSizes, string>
 		)[size]
 	);
@@ -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) {