@makolabs/ripple 0.0.1-dev.7 → 0.0.1-dev.8

package/dist/forms/DateRange.svelte

@@ -0,0 +1,493 @@
+<script lang="ts">
+	import { cn } from '../helper/cls.js';
+	import type { DateRangeProps } from '../index.js';
+
+	let {
+		startDate = $bindable(),
+		endDate = $bindable(),
+		minDate = new Date(new Date().getFullYear() - 5, 0, 1),
+		maxDate = new Date(new Date().getFullYear() + 5, 11, 31),
+		disabled = false,
+		class: className = '',
+		placeholder = 'Select date range',
+		startLabel = 'Start date',
+		endLabel = 'End date',
+		format = 'MM/dd/yyyy',
+		id,
+		name,
+		onselect
+	}: DateRangeProps = $props();
+
+	let isOpen = $state(false);
+	let hoveredDate = $state<Date | null>(null);
+	let datePickerRef = $state<HTMLDivElement | null>(null);
+
+	let viewMode = $state<'days' | 'months' | 'years'>('days');
+	let viewDate = $state(new Date());
+
+	const handleOutsideClick = (event: MouseEvent) => {
+		if (isOpen && datePickerRef && !datePickerRef.contains(event.target as Node)) {
+			isOpen = false;
+		}
+	};
+
+	function formatDate(date: Date | null): string {
+		if (!date) return '';
+		const year = date.getFullYear();
+		const month = String(date.getMonth() + 1).padStart(2, '0');
+		const day = String(date.getDate()).padStart(2, '0');
+		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;
+		isToday: boolean;
+		isSelected: boolean;
+		isInRange: boolean;
+		isDisabled: boolean;
+	}[] {
+		const year = month.getFullYear();
+		const monthIndex = month.getMonth();
+		const daysInMonth = new Date(year, monthIndex + 1, 0).getDate();
+
+		const firstDay = new Date(year, monthIndex, 1);
+
+		const firstDayOfWeek = firstDay.getDay();
+
+		const daysFromPrevMonth = firstDayOfWeek;
+
+		const prevMonth = new Date(year, monthIndex, 0);
+		const prevMonthDays = prevMonth.getDate();
+
+		const daysInCalendar = 42; // 6 rows of 7 days
+		const daysFromNextMonth = daysInCalendar - daysInMonth - daysFromPrevMonth;
+
+		const today = new Date();
+		today.setHours(0, 0, 0, 0);
+
+		const days = [];
+
+		for (let i = daysFromPrevMonth - 1; i >= 0; i--) {
+			const date = new Date(year, monthIndex - 1, prevMonthDays - i);
+			days.push({
+				date,
+				isCurrentMonth: false,
+				isToday: date.getTime() === today.getTime(),
+				isSelected: isDateSelected(date),
+				isInRange: isDateInRange(date),
+				isDisabled: isDateDisabled(date)
+			});
+		}
+
+		for (let i = 1; i <= daysInMonth; i++) {
+			const date = new Date(year, monthIndex, i);
+			days.push({
+				date,
+				isCurrentMonth: true,
+				isToday: date.getTime() === today.getTime(),
+				isSelected: isDateSelected(date),
+				isInRange: isDateInRange(date),
+				isDisabled: isDateDisabled(date)
+			});
+		}
+
+		for (let i = 1; i <= daysFromNextMonth; i++) {
+			const date = new Date(year, monthIndex + 1, i);
+			days.push({
+				date,
+				isCurrentMonth: false,
+				isToday: date.getTime() === today.getTime(),
+				isSelected: isDateSelected(date),
+				isInRange: isDateInRange(date),
+				isDisabled: isDateDisabled(date)
+			});
+		}
+
+		return days;
+	}
+
+	function isDateSelected(date: Date): boolean {
+		return Boolean(
+			(startDate && isSameDate(date, startDate)) || (endDate && isSameDate(date, endDate))
+		);
+	}
+
+	function isDateInRange(date: Date): boolean {
+		if (!startDate || !endDate) {
+			if (startDate && hoveredDate) {
+				const hoverStart = startDate < hoveredDate ? startDate : hoveredDate;
+				const hoverEnd = startDate < hoveredDate ? hoveredDate : startDate;
+				return date >= hoverStart && date <= hoverEnd;
+			}
+			return false;
+		}
+
+		return date >= startDate && date <= endDate;
+	}
+
+	function isDateDisabled(date: Date): boolean {
+		return date < minDate || date > maxDate || disabled;
+	}
+
+	function isSameDate(date1: Date, date2: Date): boolean {
+		return (
+			date1.getDate() === date2.getDate() &&
+			date1.getMonth() === date2.getMonth() &&
+			date1.getFullYear() === date2.getFullYear()
+		);
+	}
+
+	function handleDateClick(date: Date): void {
+		if (isDateDisabled(date)) return;
+
+		if (!startDate || (startDate && endDate)) {
+			startDate = date;
+			endDate = undefined;
+		} else if (startDate && !endDate) {
+			if (date < startDate) {
+				endDate = startDate;
+				startDate = date;
+			} else {
+				endDate = date;
+			}
+		}
+
+		onselect?.({ startDate, endDate });
+
+		if (startDate && endDate) {
+			isOpen = false;
+		}
+	}
+
+	function handleDateHover(date: Date): void {
+		hoveredDate = date;
+	}
+
+	function nextMonth(): void {
+		viewDate = new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 1);
+	}
+
+	function prevMonth(): void {
+		viewDate = new Date(viewDate.getFullYear(), viewDate.getMonth() - 1, 1);
+	}
+
+	function showMonths(): void {
+		viewMode = 'months';
+	}
+
+	function showYears(): void {
+		viewMode = 'years';
+	}
+
+	function selectMonth(month: number): void {
+		viewDate = new Date(viewDate.getFullYear(), month, 1);
+		viewMode = 'days';
+	}
+
+	function selectYear(year: number): void {
+		viewDate = new Date(year, viewDate.getMonth(), 1);
+		viewMode = 'months';
+	}
+
+	function getMonthName(monthIndex: number): string {
+		return new Date(2000, monthIndex, 1).toLocaleString('default', { month: 'long' });
+	}
+
+	function toggleDatepicker(): void {
+		if (disabled) return;
+		isOpen = !isOpen;
+	}
+
+	function clearDates(event: Event): void {
+		event.stopPropagation();
+		startDate = undefined;
+		endDate = undefined;
+		onselect?.({ startDate, endDate });
+	}
+
+	$effect(() => {
+		if (startDate && endDate) {
+			viewDate = new Date(startDate);
+		}
+	});
+
+	function getValue(): string {
+		return `${startDate ? formatDate(startDate) : ''}:${endDate ? formatDate(endDate) : ''}`;
+	}
+</script>
+
+<svelte:window onmousedown={handleOutsideClick} />
+
+<input type="hidden" name={`${name}[start]`} value={startDate?.toISOString()} />
+<input type="hidden" name={`${name}[end]`} value={endDate?.toISOString()} />
+<input type="hidden" name={`${name}[format]`} value={format} />
+<input type="hidden" name={`${name}`} value={getValue()} />
+
+<div class={cn('relative block w-full', className)} bind:this={datePickerRef}>
+	<div class="relative">
+		<button
+			{id}
+			type="button"
+			class={cn(
+				'flex w-full items-center justify-between rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm',
+				disabled
+					? 'cursor-not-allowed bg-gray-100 text-gray-400'
+					: 'focus:border-primary-500 focus:ring-primary-500 hover:border-gray-400 focus:ring-2'
+			)}
+			onclick={toggleDatepicker}
+			aria-haspopup="true"
+			aria-expanded={isOpen}
+			{disabled}
+		>
+			<span class={startDate && endDate ? 'text-gray-900' : 'text-gray-500'}>
+				{startDate && endDate
+					? `${formatDate(startDate)} - ${formatDate(endDate)}`
+					: startDate
+						? `${formatDate(startDate)} - Select end date`
+						: placeholder}
+			</span>
+			<svg class="h-5 w-5 text-gray-400" 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"
+					clip-rule="evenodd"
+				/>
+			</svg>
+		</button>
+
+		{#if startDate || endDate}
+			<button
+				type="button"
+				class="absolute top-1/2 right-10 -translate-y-1/2 text-gray-400 hover:text-gray-500"
+				onclick={clearDates}
+				aria-label="Clear dates"
+			>
+				<svg class="h-4 w-4" 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"
+						clip-rule="evenodd"
+					/>
+				</svg>
+			</button>
+		{/if}
+	</div>
+
+	{#if isOpen}
+		<div
+			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-black focus:outline-none"
+		>
+			<div class="mb-2 flex items-center justify-between">
+				{#if viewMode === 'days'}
+					<button
+						type="button"
+						aria-label="Previous month"
+						class="inline-flex items-center rounded-md p-1 text-sm text-gray-500 hover:bg-gray-100"
+						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="inline-flex items-center rounded-md px-2 py-1 text-sm font-medium text-gray-700 hover:bg-gray-100"
+						onclick={showMonths}
+					>
+						{getMonthName(viewDate.getMonth())}
+						{viewDate.getFullYear()}
+					</button>
+					<button
+						type="button"
+						aria-label="Next month"
+						class="inline-flex items-center rounded-md p-1 text-sm text-gray-500 hover:bg-gray-100"
+						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="inline-flex items-center rounded-md p-1 text-sm text-gray-500 hover:bg-gray-100"
+						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="inline-flex items-center rounded-md px-2 py-1 text-sm font-medium text-gray-700"
+						onclick={showYears}
+					>
+						{viewDate.getFullYear()}
+					</button>
+					<button
+						type="button"
+						aria-label="Next year"
+						class="inline-flex items-center rounded-md p-1 text-sm text-gray-500 hover:bg-gray-100"
+						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="inline-flex items-center rounded-md p-1 text-sm text-gray-500 hover:bg-gray-100"
+						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="inline-flex items-center rounded-md px-2 py-1 text-sm font-medium text-gray-700"
+					>
+						{viewDate.getFullYear() - 6} - {viewDate.getFullYear() + 5}
+					</button>
+					<button
+						type="button"
+						aria-label="Next year"
+						class="inline-flex items-center rounded-md p-1 text-sm text-gray-500 hover:bg-gray-100"
+						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="mb-1 grid grid-cols-7 gap-1 text-center text-xs font-medium text-gray-500">
+					<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 }}
+						<button
+							type="button"
+							class={cn(
+								'flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium',
+								isDisabled ? 'cursor-not-allowed text-gray-300' : 'hover:bg-gray-100',
+								isSelected ? 'bg-primary-500 hover:bg-primary-600 text-white' : '',
+								isInRange && !isSelected ? 'bg-primary-100 text-primary-800' : '',
+								!isCurrentMonth && !isSelected && !isInRange ? 'text-gray-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">
+					{#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-gray-700 hover:bg-gray-100'
+							)}
+							onclick={() => selectMonth(month)}
+						>
+							{getMonthName(month).substring(0, 3)}
+						</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-gray-700 hover:bg-gray-100'
+							)}
+							onclick={() => selectYear(year)}
+						>
+							{year}
+						</button>
+					{/each}
+				</div>
+			{/if}
+
+			{#if startDate || endDate}
+				<div class="mt-4 flex justify-between border-t border-gray-200 pt-3 text-xs text-gray-500">
+					<div>
+						{startDate ? `${startLabel}: ${formatDate(startDate)}` : ''}
+					</div>
+					<div>
+						{endDate ? `${endLabel}: ${formatDate(endDate)}` : ''}
+					</div>
+				</div>
+			{/if}
+		</div>
+	{/if}
+</div>

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

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

package/dist/forms/Form.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { setContext } from 'svelte';
+	import { cn } from '../helper/cls.js';
+	import type { FormProps } from '../index.js';
+
+	let {
+		form,
+		class: className = '',
+		method = 'POST',
+		action,
+		enctype,
+		autocomplete,
+		novalidate = false,
+		children,
+		...restProps
+	}: FormProps<any> = $props();
+
+	const { enhance, delayed } = form;
+	setContext('form', form);
+
+	const formClasses = $derived(cn('space-y-4', className));
+</script>
+
+<form
+	{method}
+	{action}
+	{enctype}
+	{autocomplete}
+	{novalidate}
+	class={formClasses}
+	use:enhance
+	{...restProps}
+>
+	{@render children?.()}
+</form>
+
+{#if $delayed}
+	<div class="fixed inset-0 bg-black/20 backdrop-blur-sm"></div>
+{/if}

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

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

package/dist/forms/Input.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+	import { cn } from '../helper/cls.js';
+	import { Size } from '../variants.js';
+	import type { InputProps } from '../index.js';
+
+	let {
+		name,
+		id = name,
+		type = 'text',
+		label,
+		placeholder,
+		disabled = false,
+		class: className = '',
+		size = Size.BASE,
+		value = $bindable(),
+		errors = [],
+		...restProps
+	}: InputProps = $props();
+
+	const BASIC_TYPES = ['text', 'email', 'password', 'number', 'tel', 'url', 'date', 'textarea'];
+	const inputClasses = $derived(
+		cn(
+			'transition-colors',
+			{
+				'border rounded-lg shadow-sm w-full bg-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus: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-red-300 focus:border-red-500 focus:ring-red-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.BASE,
+							'h-12 text-lg': size === Size.LG
+						}
+					: {}),
+				'border-gray-300 focus:border-primary-500 focus:ring-primary-500': !errors.length
+			},
+			className
+		)
+	);
+
+	const inputCommonProps = $derived({
+		id,
+		name,
+		type,
+		placeholder,
+		disabled,
+		class: inputClasses,
+		'aria-invalid': !!errors.length,
+		'aria-describedby': errors.length ? `${name}-errors` : undefined,
+		...restProps
+	});
+</script>
+
+<div class="w-full">
+	{@render Label('mb-2')}
+	{#if type === 'textarea'}
+		<textarea {...inputCommonProps} bind:value></textarea>
+	{:else}
+		<input {...inputCommonProps} bind:value />
+	{/if}
+	{#if errors.length}
+		{#each errors as error (error)}
+			<p id="{name}-errors" class="mt-1 text-sm text-red-600" role="alert">
+				{error}
+			</p>
+		{/each}
+	{/if}
+</div>
+
+{#snippet Label(extraClass = '')}
+	{#if label}
+		<label
+			for={id}
+			class={cn(
+				'block w-full text-sm font-medium',
+				{
+					'text-gray-700': !errors.length,
+					'text-red-600': errors.length
+				},
+				extraClass
+			)}>{label}</label
+		>
+	{/if}
+{/snippet}

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

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