@makolabs/ripple 3.0.0 → 3.0.2

package/dist/forms/DateRange.svelte

@@ -1,9 +1,12 @@
 <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';
+	import { onMount } from 'svelte';
 
 	let {
 		startDate = $bindable(),
@@ -17,11 +20,24 @@
 		endLabel = 'End date',
 		format = 'MM/dd/yyyy',
 		errors = [],
+		size = Size.MD,
 		id,
 		name,
 		onselect
 	}: DateRangeProps = $props();
 
+	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);
@@ -239,7 +255,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
@@ -259,7 +280,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"
@@ -271,11 +292,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"
@@ -294,213 +320,219 @@
 		</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>
-
-				{#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}
+				{@render calendarContent()}
 			</div>
 		</Portal>
 	{/if}
+
+	{#if isOpen && isMobile}
+		<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>
+	{/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/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 {
@@ -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.MD,
-							'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

@@ -19,7 +19,7 @@
 		labelLayout = 'inline',
 		labelClass = undefined,
 		color = Color.PRIMARY,
-		size = Size.SM,
+		size = Size.MD,
 		compact = false,
 		flagsOnly = false,
 		disabled = false,