@makolabs/ripple 3.0.1 → 3.0.3

package/dist/forms/DateRange.svelte

@@ -6,6 +6,7 @@
 	import Portal from '../utils/Portal.svelte';
 	import { fly } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
+	import { onMount } from 'svelte';
 
 	let {
 		startDate = $bindable(),
@@ -27,6 +28,16 @@
 
 	const tokens = $derived(formSizeTokens[size]);
 
+	let isMobile = $state(
+		typeof window !== 'undefined' && window.matchMedia('(max-width: 639.98px)').matches
+	);
+	onMount(() => {
+		const mql = window.matchMedia('(max-width: 639.98px)');
+		const handler = (e: MediaQueryListEvent) => (isMobile = e.matches);
+		mql.addEventListener('change', handler);
+		return () => mql.removeEventListener('change', handler);
+	});
+
 	let isOpen = $state(false);
 	let hoveredDate = $state<Date | null>(null);
 	let datePickerRef = $state<HTMLDivElement | null>(null);
@@ -309,213 +320,221 @@
 		</div>
 	{/if}
 
-	{#if isOpen}
+	{#if isOpen && !isMobile}
 		<Portal target={datePickerRef}>
 			<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'}
-						<button
-							type="button"
-							aria-label="Previous month"
-							class="text-default-500 hover:bg-default-100 inline-flex items-center rounded-md p-1 text-sm"
-							onclick={prevMonth}
-						>
-							<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-								<path
-									fill-rule="evenodd"
-									d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
-									clip-rule="evenodd"
-								/>
-							</svg>
-						</button>
-						<button
-							type="button"
-							class="text-default-700 hover:bg-default-100 inline-flex items-center rounded-md px-2 py-1 text-sm font-medium"
-							onclick={showMonths}
-						>
-							{getMonthName(viewDate.getMonth())}
-							{viewDate.getFullYear()}
-						</button>
-						<button
-							type="button"
-							aria-label="Next month"
-							class="text-default-500 hover:bg-default-100 inline-flex items-center rounded-md p-1 text-sm"
-							onclick={nextMonth}
-						>
-							<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-								<path
-									fill-rule="evenodd"
-									d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-									clip-rule="evenodd"
-								/>
-							</svg>
-						</button>
-					{:else if viewMode === 'months'}
-						<button
-							type="button"
-							aria-label="Previous year"
-							class="text-default-500 hover:bg-default-100 inline-flex items-center rounded-md p-1 text-sm"
-							onclick={() =>
-								(viewDate = new Date(viewDate.getFullYear() - 1, viewDate.getMonth(), 1))}
-						>
-							<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-								<path
-									fill-rule="evenodd"
-									d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
-									clip-rule="evenodd"
-								/>
-							</svg>
-						</button>
-						<button
-							type="button"
-							aria-label="Current year"
-							class="text-default-700 inline-flex items-center rounded-md px-2 py-1 text-sm font-medium"
-							onclick={showYears}
-						>
-							{viewDate.getFullYear()}
-						</button>
-						<button
-							type="button"
-							aria-label="Next year"
-							class="text-default-500 hover:bg-default-100 inline-flex items-center rounded-md p-1 text-sm"
-							onclick={() =>
-								(viewDate = new Date(viewDate.getFullYear() + 1, viewDate.getMonth(), 1))}
-						>
-							<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-								<path
-									fill-rule="evenodd"
-									d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-									clip-rule="evenodd"
-								/>
-							</svg>
-						</button>
-					{:else if viewMode === 'years'}
-						<button
-							type="button"
-							aria-label="Previous year"
-							class="text-default-500 hover:bg-default-100 inline-flex items-center rounded-md p-1 text-sm"
-							onclick={() =>
-								(viewDate = new Date(viewDate.getFullYear() - 12, viewDate.getMonth(), 1))}
-						>
-							<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-								<path
-									fill-rule="evenodd"
-									d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
-									clip-rule="evenodd"
-								/>
-							</svg>
-						</button>
-						<button
-							type="button"
-							aria-label="Current year range"
-							class="text-default-700 inline-flex items-center rounded-md px-2 py-1 text-sm font-medium"
-						>
-							{viewDate.getFullYear() - 6} - {viewDate.getFullYear() + 5}
-						</button>
-						<button
-							type="button"
-							aria-label="Next year"
-							class="text-default-500 hover:bg-default-100 inline-flex items-center rounded-md p-1 text-sm"
-							onclick={() =>
-								(viewDate = new Date(viewDate.getFullYear() + 12, viewDate.getMonth(), 1))}
-						>
-							<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-								<path
-									fill-rule="evenodd"
-									d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-									clip-rule="evenodd"
-								/>
-							</svg>
-						</button>
-					{/if}
-				</div>
+				{@render calendarContent()}
+			</div>
+		</Portal>
+	{/if}
 
-				{#if viewMode === 'days'}
-					<div class="text-default-500 mb-1 grid grid-cols-7 gap-1 text-center text-xs font-medium">
-						<div>Su</div>
-						<div>Mo</div>
-						<div>Tu</div>
-						<div>We</div>
-						<div>Th</div>
-						<div>Fr</div>
-						<div>Sa</div>
-					</div>
-					<div class="grid grid-cols-7 gap-1">
-						{#each getDaysInMonth(viewDate) as { date, isCurrentMonth, isToday, isSelected, isInRange, isDisabled } (date.getTime())}
-							<button
-								type="button"
-								class={cn(
-									'flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium',
-									isDisabled ? 'text-default-300 cursor-not-allowed' : 'hover:bg-default-100',
-									isSelected ? 'bg-primary-500 hover:bg-primary-600 text-white' : '',
-									isInRange && !isSelected ? 'bg-primary-100 text-primary-800' : '',
-									!isCurrentMonth && !isSelected && !isInRange ? 'text-default-400' : '',
-									isToday && !isSelected ? 'border-primary-500 border' : ''
-								)}
-								onclick={() => handleDateClick(date)}
-								onmouseenter={() => handleDateHover(date)}
-								disabled={isDisabled}
-							>
-								{date.getDate()}
-							</button>
-						{/each}
-					</div>
-				{:else if viewMode === 'months'}
-					<div class="grid grid-cols-3 gap-2">
-						<!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -->
-						{#each Array(12).fill(0) as _, month (month)}
-							<button
-								type="button"
-								class={cn(
-									'flex items-center justify-center rounded-md px-2 py-1 text-sm font-medium',
-									viewDate.getMonth() === month
-										? 'bg-primary-500 text-white'
-										: 'text-default-700 hover:bg-default-100'
-								)}
-								onclick={() => selectMonth(month)}
-							>
-								{getMonthName(month).substring(0, 3)}
-							</button>
-						{/each}
-					</div>
-				{:else if viewMode === 'years'}
-					<div class="grid grid-cols-3 gap-2">
-						<!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -->
-						{#each Array(12).fill(0) as _, i (i)}
-							{@const year = viewDate.getFullYear() - 6 + i}
-							<button
-								type="button"
-								class={cn(
-									'flex items-center justify-center rounded-md px-2 py-1 text-sm font-medium',
-									viewDate.getFullYear() === year
-										? 'bg-primary-500 text-white'
-										: 'text-default-700 hover:bg-default-100'
-								)}
-								onclick={() => selectYear(year)}
-							>
-								{year}
-							</button>
-						{/each}
-					</div>
-				{/if}
-
-				{#if startDate || endDate}
-					<div
-						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)}` : ''}
-						</div>
-						<div>
-							{endDate ? `${endLabel}: ${formatDate(endDate)}` : ''}
-						</div>
-					</div>
-				{/if}
+	{#if isOpen && isMobile}
+		<Portal target={datePickerRef}>
+			<button
+				type="button"
+				class="fixed inset-0 z-[9998] bg-black/40 backdrop-blur-sm"
+				aria-label="Close"
+				onclick={() => (isOpen = false)}
+			></button>
+			<div
+				class="fixed inset-x-0 bottom-0 z-[9999] flex max-h-[85vh] min-h-48 flex-col overflow-hidden rounded-t-2xl bg-white shadow-2xl"
+				transition:fly={{ y: 300, duration: 200, easing: quintOut }}
+				bind:this={calendarRef}
+			>
+				<div class="flex justify-center py-2">
+					<div class="bg-default-300 h-1 w-8 rounded-full"></div>
+				</div>
+				<div class="flex-1 cursor-pointer overflow-y-auto p-4">
+					{@render calendarContent()}
+				</div>
 			</div>
 		</Portal>
 	{/if}
 </div>
+
+{#snippet calendarContent()}
+	<div class="mb-2 flex items-center justify-between">
+		{#if viewMode === 'days'}
+			<button
+				type="button"
+				aria-label="Previous month"
+				class="text-default-500 hover:bg-default-100 inline-flex cursor-pointer items-center rounded-md p-1 text-sm"
+				onclick={prevMonth}
+			>
+				<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"
+					><path
+						fill-rule="evenodd"
+						d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+						clip-rule="evenodd"
+					/></svg
+				>
+			</button>
+			<button
+				type="button"
+				class="text-default-700 hover:bg-default-100 inline-flex cursor-pointer items-center rounded-md px-2 py-1 text-sm font-medium"
+				onclick={showMonths}
+			>
+				{getMonthName(viewDate.getMonth())}
+				{viewDate.getFullYear()}
+			</button>
+			<button
+				type="button"
+				aria-label="Next month"
+				class="text-default-500 hover:bg-default-100 inline-flex cursor-pointer items-center rounded-md p-1 text-sm"
+				onclick={nextMonth}
+			>
+				<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"
+					><path
+						fill-rule="evenodd"
+						d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+						clip-rule="evenodd"
+					/></svg
+				>
+			</button>
+		{:else if viewMode === 'months'}
+			<button
+				type="button"
+				aria-label="Previous year"
+				class="text-default-500 hover:bg-default-100 inline-flex cursor-pointer items-center rounded-md p-1 text-sm"
+				onclick={() => (viewDate = new Date(viewDate.getFullYear() - 1, viewDate.getMonth(), 1))}
+			>
+				<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"
+					><path
+						fill-rule="evenodd"
+						d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+						clip-rule="evenodd"
+					/></svg
+				>
+			</button>
+			<button
+				type="button"
+				class="text-default-700 inline-flex cursor-pointer items-center rounded-md px-2 py-1 text-sm font-medium"
+				onclick={showYears}>{viewDate.getFullYear()}</button
+			>
+			<button
+				type="button"
+				aria-label="Next year"
+				class="text-default-500 hover:bg-default-100 inline-flex cursor-pointer items-center rounded-md p-1 text-sm"
+				onclick={() => (viewDate = new Date(viewDate.getFullYear() + 1, viewDate.getMonth(), 1))}
+			>
+				<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"
+					><path
+						fill-rule="evenodd"
+						d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+						clip-rule="evenodd"
+					/></svg
+				>
+			</button>
+		{:else if viewMode === 'years'}
+			<button
+				type="button"
+				aria-label="Previous years"
+				class="text-default-500 hover:bg-default-100 inline-flex cursor-pointer items-center rounded-md p-1 text-sm"
+				onclick={() => (viewDate = new Date(viewDate.getFullYear() - 12, viewDate.getMonth(), 1))}
+			>
+				<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"
+					><path
+						fill-rule="evenodd"
+						d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+						clip-rule="evenodd"
+					/></svg
+				>
+			</button>
+			<button
+				type="button"
+				class="text-default-700 inline-flex items-center rounded-md px-2 py-1 text-sm font-medium"
+				>{viewDate.getFullYear() - 6} - {viewDate.getFullYear() + 5}</button
+			>
+			<button
+				type="button"
+				aria-label="Next years"
+				class="text-default-500 hover:bg-default-100 inline-flex cursor-pointer items-center rounded-md p-1 text-sm"
+				onclick={() => (viewDate = new Date(viewDate.getFullYear() + 12, viewDate.getMonth(), 1))}
+			>
+				<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"
+					><path
+						fill-rule="evenodd"
+						d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+						clip-rule="evenodd"
+					/></svg
+				>
+			</button>
+		{/if}
+	</div>
+
+	{#if viewMode === 'days'}
+		<div class="text-default-500 mb-1 grid grid-cols-7 gap-1 text-center text-xs font-medium">
+			<div>Su</div>
+			<div>Mo</div>
+			<div>Tu</div>
+			<div>We</div>
+			<div>Th</div>
+			<div>Fr</div>
+			<div>Sa</div>
+		</div>
+		<div class="grid grid-cols-7 gap-1">
+			{#each getDaysInMonth(viewDate) as { date, isCurrentMonth, isToday, isSelected, isInRange, isDisabled } (date.getTime())}
+				<button
+					type="button"
+					class={cn(
+						'flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-sm font-medium',
+						isDisabled ? 'text-default-300 cursor-not-allowed' : 'hover:bg-default-100',
+						isSelected ? 'bg-primary-500 hover:bg-primary-600 text-white' : '',
+						isInRange && !isSelected ? 'bg-primary-100 text-primary-800' : '',
+						!isCurrentMonth && !isSelected && !isInRange ? 'text-default-400' : '',
+						isToday && !isSelected ? 'border-primary-500 border' : ''
+					)}
+					onclick={() => handleDateClick(date)}
+					onmouseenter={() => handleDateHover(date)}
+					disabled={isDisabled}>{date.getDate()}</button
+				>
+			{/each}
+		</div>
+	{:else if viewMode === 'months'}
+		<div class="grid grid-cols-3 gap-2">
+			<!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -->
+			{#each Array(12).fill(0) as _, month (month)}
+				<button
+					type="button"
+					class={cn(
+						'flex cursor-pointer items-center justify-center rounded-md px-2 py-1 text-sm font-medium',
+						viewDate.getMonth() === month
+							? 'bg-primary-500 text-white'
+							: 'text-default-700 hover:bg-default-100'
+					)}
+					onclick={() => selectMonth(month)}>{getMonthName(month).substring(0, 3)}</button
+				>
+			{/each}
+		</div>
+	{:else if viewMode === 'years'}
+		<div class="grid grid-cols-3 gap-2">
+			<!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -->
+			{#each Array(12).fill(0) as _, i (i)}
+				{@const year = viewDate.getFullYear() - 6 + i}
+				<button
+					type="button"
+					class={cn(
+						'flex cursor-pointer items-center justify-center rounded-md px-2 py-1 text-sm font-medium',
+						viewDate.getFullYear() === year
+							? 'bg-primary-500 text-white'
+							: 'text-default-700 hover:bg-default-100'
+					)}
+					onclick={() => selectYear(year)}>{year}</button
+				>
+			{/each}
+		</div>
+	{/if}
+
+	{#if startDate || endDate}
+		<div
+			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)}` : ''}</div>
+			<div>{endDate ? `${endLabel}: ${formatDate(endDate)}` : ''}</div>
+		</div>
+	{/if}
+{/snippet}

package/dist/forms/NumberInput.svelte

@@ -13,20 +13,53 @@
 		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(
@@ -87,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}
@@ -115,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
@@ -163,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/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' &&