@makolabs/ripple 1.2.3 → 1.2.8

package/dist/forms/DateRange.svelte

@@ -44,21 +44,6 @@
 		return format.replace('yyyy', String(year)).replace('MM', month).replace('dd', day);
 	}
 
-	function parseDate(dateStr: string): Date | null {
-		if (!dateStr) return null;
-
-		const parts = dateStr.split('/');
-		if (parts.length !== 3) return null;
-
-		const month = parseInt(parts[0], 10) - 1;
-		const day = parseInt(parts[1], 10);
-		const year = parseInt(parts[2], 10);
-
-		if (isNaN(month) || isNaN(day) || isNaN(year)) return null;
-
-		return new Date(year, month, day);
-	}
-
 	function getDaysInMonth(month: Date): {
 		date: Date;
 		isCurrentMonth: boolean;
@@ -83,6 +68,7 @@
 		const daysInCalendar = 42; // 6 rows of 7 days
 		const daysFromNextMonth = daysInCalendar - daysInMonth - daysFromPrevMonth;
 
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity
 		const today = new Date();
 		today.setHours(0, 0, 0, 0);
 
@@ -298,205 +284,207 @@
 		<Portal target={datePickerRef}>
 			<div
 				bind:this={calendarRef}
-				class="ring-opacity-5 absolute z-10 mt-1 w-full origin-top-left rounded-md bg-white p-4 shadow-lg ring-1 ring-default-300 focus:outline-none"
+				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"
 			>
-			<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 }}
+				<div class="mb-2 flex items-center justify-between">
+					{#if viewMode === 'days'}
 						<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}
+							aria-label="Previous month"
+							class="text-default-500 hover:bg-default-100 inline-flex items-center rounded-md p-1 text-sm"
+							onclick={prevMonth}
 						>
-							{date.getDate()}
+							<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>
-					{/each}
-				</div>
-			{:else if viewMode === 'months'}
-				<div class="grid grid-cols-3 gap-2">
-					{#each Array(12).fill(0) as _, 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)}
+							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(month).substring(0, 3)}
+							{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>
-					{/each}
-				</div>
-			{:else if viewMode === 'years'}
-				<div class="grid grid-cols-3 gap-2">
-					{#each Array(12).fill(0) as _, 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)}
+							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))}
 						>
-							{year}
+							<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>
-					{/each}
+					{/if}
 				</div>
-			{/if}
-
-			{#if startDate || endDate}
-				<div
-					class="border-default-200 text-default-500 mt-4 flex justify-between border-t pt-3 text-xs"
-				>
-					<div>
-						{startDate ? `${startLabel}: ${formatDate(startDate)}` : ''}
+
+				{#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>
-						{endDate ? `${endLabel}: ${formatDate(endDate)}` : ''}
+					<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>
-				</div>
-			{/if}
+				{: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 justify-between border-t pt-3 text-xs"
+					>
+						<div>
+							{startDate ? `${startLabel}: ${formatDate(startDate)}` : ''}
+						</div>
+						<div>
+							{endDate ? `${endLabel}: ${formatDate(endDate)}` : ''}
+						</div>
+					</div>
+				{/if}
 			</div>
 		</Portal>
 	{/if}

package/dist/forms/Form.svelte

@@ -13,6 +13,7 @@
 		novalidate = false,
 		children,
 		...restProps
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	}: FormProps<any> = $props();
 
 	const { enhance, delayed } = form;

package/dist/forms/Input.svelte

@@ -40,15 +40,24 @@
 		)
 	);
 
-	const inputCommonProps = $derived({
+	const commonProps = $derived({
 		id,
 		name,
-		type,
 		placeholder,
 		disabled,
 		class: inputClasses,
 		'aria-invalid': !!errors.length,
-		'aria-describedby': errors.length ? `${name}-errors` : undefined,
+		'aria-describedby': errors.length ? `${name}-errors` : undefined
+	});
+
+	const inputProps = $derived({
+		...commonProps,
+		type,
+		...restProps
+	});
+
+	const textareaProps = $derived({
+		...commonProps,
 		...restProps
 	});
 </script>
@@ -56,9 +65,9 @@
 <div class="w-full">
 	{@render Label('mb-2')}
 	{#if type === 'textarea'}
-		<textarea {...inputCommonProps} bind:value></textarea>
+		<textarea {...textareaProps as unknown as Record<string, unknown>} bind:value></textarea>
 	{:else}
-		<input {...inputCommonProps} bind:value />
+		<input {...inputProps} bind:value />
 	{/if}
 	{#if errors.length}
 		{#each errors as error (error)}

package/dist/forms/InputTestWrapper.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import Input from './Input.svelte';
+	import type { InputProps } from '../index.js';
+
+	let { ...inputProps }: InputProps = $props();
+</script>
+
+<Input {...inputProps} />

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

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

package/dist/forms/NumberInput.svelte

@@ -131,7 +131,7 @@
 
 		{#if showUnitDropdown}
 			<div class={dropdownClass}>
-				{#each units as unitOption}
+				{#each units as unitOption (unitOption.value)}
 					<button
 						type="button"
 						class="hover:bg-default-100 w-full px-3 py-1.5 text-left text-sm"
@@ -152,7 +152,7 @@
 	</div>
 
 	{#if errors?.length}
-		{#each errors as error}
+		{#each errors as error (error)}
 			<p class="text-danger-600 text-sm">{error}</p>
 		{/each}
 	{/if}

package/dist/forms/RadioInputs.svelte

@@ -35,7 +35,7 @@
 		<label class={labelClass} for={`${name}-${value || options[0].value}`}>{label}</label>
 	{/if}
 	<div class="space-y-2">
-		{#each options as option}
+		{#each options as option (option.value)}
 			<div class="flex items-center gap-2">
 				<input
 					type="radio"

package/dist/forms/RadioPill.svelte

@@ -38,7 +38,7 @@
 		>
 	{/if}
 	<div class="inline-flex flex-wrap gap-2">
-		{#each options as option}
+		{#each options as option (option.value)}
 			<button
 				id={option.value}
 				type="button"

package/dist/forms/Slider.svelte

@@ -311,7 +311,7 @@
 				onkeydown={handleKeydown}
 				onmousedown={(e) => handleThumbMouseDown(e, 'single')}
 			></div>
-			{#each options as option, i}
+			{#each options as option, i (option.value)}
 				<div class={markClass} style="left: {(i / (options.length - 1)) * 100}%">
 					{option.label}
 				</div>
@@ -333,7 +333,7 @@
 	</div>
 
 	{#if errors.length}
-		{#each errors as error}
+		{#each errors as error (error)}
 			<p class="mt-2.5 text-sm text-red-600" role="alert">
 				{error}
 			</p>

package/dist/forms/Tags.svelte

@@ -133,7 +133,7 @@
 		<label for={name} class="text-default-700 block text-sm font-medium">{label}</label>
 	{/if}
 	<div class={containerClass} onfocusout={handleFocusOut}>
-		{#each value as tag}
+		{#each value as tag (tag)}
 			<Badge {size} color="info" onclose={() => handleTagRemoval(tag)} class="shadow-xs">
 				{tag}
 			</Badge>
@@ -157,7 +157,7 @@
 
 		{#if showSuggestions && filteredSuggestions.length > 0}
 			<div class={suggestionClass}>
-				{#each filteredSuggestions as suggestion, i}
+				{#each filteredSuggestions as suggestion, i (suggestion)}
 					<button
 						type="button"
 						class={suggestionItemClass(i === highlightedIndex)}
@@ -174,7 +174,7 @@
 	</div>
 
 	{#if errors?.length}
-		{#each errors as error}
+		{#each errors as error (error)}
 			<p class="text-sm text-red-600">{error}</p>
 		{/each}
 	{/if}

package/dist/forms/ToggleTestWrapper.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import Toggle from './Toggle.svelte';
+	import type { ToggleProps } from '../index.js';
+
+	let { label = '', ...toggleProps }: ToggleProps & { label?: string } = $props();
+</script>
+
+<Toggle {label} {...toggleProps} />

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

@@ -0,0 +1,7 @@
+import type { ToggleProps } from '../index.js';
+type $$ComponentProps = ToggleProps & {
+    label?: string;
+};
+declare const ToggleTestWrapper: import("svelte").Component<$$ComponentProps, {}, "">;
+type ToggleTestWrapper = ReturnType<typeof ToggleTestWrapper>;
+export default ToggleTestWrapper;

package/dist/forms/slider.js

@@ -1,5 +1,5 @@
 import { tv } from 'tailwind-variants';
-import { Color, Size } from '../variants.js';
+import { Size } from '../variants.js';
 export const slider = tv({
     slots: {
         base: 'relative w-full',

package/dist/header/PageHeader.svelte

@@ -18,6 +18,7 @@
 
 	const hasBreadcrumbs = $derived(breadcrumbs && breadcrumbs.length > 0);
 	const titleClasses = $derived(cn(defaultTitleClasses, titleClassName));
+	const containerClass = $derived(cn('space-y-4', className as string));
 </script>
 
 <div class="pb-4">
@@ -45,7 +46,7 @@
 		</div>
 	{:else}
 		<!-- Vertical layout - title/subtitle unit first, children unit below -->
-		<div class={className}>
+		<div class={containerClass}>
 			<!-- Title and subtitle grouped together -->
 			<div class="min-w-0 gap-4">
 				{#if hasBreadcrumbs}