@makolabs/ripple 2.5.8 → 3.0.0

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

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

package/dist/forms/Toggle.svelte

@@ -10,18 +10,18 @@
 		label,
 		disabled = false,
 		class: className = '',
-		size = Size.BASE,
+		size = Size.MD,
 		color = Color.PRIMARY,
 		value = $bindable(false),
 		errors = [],
 		offColor = 'bg-default-200',
-		onColor,
+		activeColor,
 		testId,
 		...restProps
 	}: ToggleProps = $props();
 
-	const activeColor = $derived(
-		onColor ||
+	const resolvedActiveColor = $derived(
+		activeColor ||
 			(
 				{
 					[Color.DEFAULT]: 'bg-default-800',
@@ -40,7 +40,7 @@
 			{
 				[Size.XS]: 'w-8 h-4',
 				[Size.SM]: 'w-8 h-4',
-				[Size.BASE]: 'w-10 h-5',
+				[Size.MD]: 'w-10 h-5',
 				[Size.LG]: 'w-12 h-6',
 				[Size.XL]: 'w-12 h-6',
 				[Size.XXL]: 'w-12 h-6'
@@ -53,7 +53,7 @@
 			{
 				[Size.XS]: 'h-3 w-3',
 				[Size.SM]: 'h-3 w-3',
-				[Size.BASE]: 'h-4 w-4',
+				[Size.MD]: 'h-4 w-4',
 				[Size.LG]: 'h-5 w-5',
 				[Size.XL]: 'h-5 w-5',
 				[Size.XXL]: 'h-5 w-5'
@@ -66,7 +66,7 @@
 			{
 				[Size.XS]: value ? 'translate-x-4' : 'translate-x-0.5',
 				[Size.SM]: value ? 'translate-x-4' : 'translate-x-0.5',
-				[Size.BASE]: value ? 'translate-x-5' : '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'
@@ -92,7 +92,7 @@
 		cn(
 			'relative inline-flex items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2',
 			toggleSize,
-			value ? activeColor : offColor,
+			value ? resolvedActiveColor : offColor,
 			{
 				'opacity-50 cursor-not-allowed': disabled,
 				'cursor-pointer': !disabled,

package/dist/forms/calendar/Calendar.svelte

@@ -0,0 +1,218 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+	import { buildTestId } from '../../helper/testid.js';
+	import type { CalendarProps } from './calendar-types.js';
+
+	let {
+		mode = 'single',
+		value = $bindable<Date | null>(null),
+		valueStart = $bindable<Date | null>(null),
+		valueEnd = $bindable<Date | null>(null),
+		minDate,
+		maxDate,
+		initialMonth,
+		weekStartsOn = 1,
+		hideHeader = false,
+		disabled = false,
+		class: className = '',
+		onselect,
+		testId
+	}: CalendarProps = $props();
+
+	const anchor = $derived(initialMonth ?? value ?? valueStart ?? new Date());
+
+	let viewYear = $state(anchor.getFullYear());
+	let viewMonth = $state(anchor.getMonth());
+
+	function sameDay(a: Date | null | undefined, b: Date | null | undefined): boolean {
+		if (!a || !b) return false;
+		return (
+			a.getFullYear() === b.getFullYear() &&
+			a.getMonth() === b.getMonth() &&
+			a.getDate() === b.getDate()
+		);
+	}
+
+	function atStartOfDay(d: Date): Date {
+		// Pure function over plain Date — no reactivity needed.
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity
+		const x = new Date(d);
+		x.setHours(0, 0, 0, 0);
+		return x;
+	}
+
+	function isOutOfBounds(date: Date): boolean {
+		if (minDate && date < atStartOfDay(minDate)) return true;
+		if (maxDate && date > atStartOfDay(maxDate)) return true;
+		return false;
+	}
+
+	function isInRange(date: Date): boolean {
+		if (mode !== 'range' || !valueStart) return false;
+		if (!valueEnd) return sameDay(date, valueStart);
+		return date >= atStartOfDay(valueStart) && date <= atStartOfDay(valueEnd);
+	}
+
+	function isRangeEdge(date: Date): boolean {
+		if (mode !== 'range') return false;
+		return sameDay(date, valueStart) || sameDay(date, valueEnd);
+	}
+
+	const today = $derived(atStartOfDay(new Date()));
+
+	const dayHeaders = $derived(() => {
+		const all = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+		return weekStartsOn === 1 ? [...all.slice(1), all[0]] : all;
+	});
+
+	type Cell = {
+		date: Date;
+		inMonth: boolean;
+		disabled: boolean;
+		isToday: boolean;
+		isSelected: boolean;
+		isRangeEdge: boolean;
+		isInRange: boolean;
+	};
+
+	const cells = $derived.by<Cell[]>(() => {
+		const first = new Date(viewYear, viewMonth, 1);
+		const offset = (first.getDay() - weekStartsOn + 7) % 7;
+		const start = new Date(viewYear, viewMonth, 1 - offset);
+		const out: Cell[] = [];
+		for (let i = 0; i < 42; i++) {
+			const d = new Date(start.getFullYear(), start.getMonth(), start.getDate() + i);
+			out.push({
+				date: d,
+				inMonth: d.getMonth() === viewMonth,
+				disabled: disabled || isOutOfBounds(d),
+				isToday: sameDay(d, today),
+				isSelected: mode === 'single' ? sameDay(d, value ?? undefined) : isRangeEdge(d),
+				isRangeEdge: isRangeEdge(d),
+				isInRange: isInRange(d)
+			});
+		}
+		return out;
+	});
+
+	const monthLabel = $derived(
+		new Date(viewYear, viewMonth, 1).toLocaleDateString(undefined, {
+			month: 'long',
+			year: 'numeric'
+		})
+	);
+
+	function prevMonth() {
+		if (viewMonth === 0) {
+			viewMonth = 11;
+			viewYear -= 1;
+		} else {
+			viewMonth -= 1;
+		}
+	}
+
+	function nextMonth() {
+		if (viewMonth === 11) {
+			viewMonth = 0;
+			viewYear += 1;
+		} else {
+			viewMonth += 1;
+		}
+	}
+
+	function pick(date: Date, cellDisabled: boolean) {
+		if (cellDisabled) return;
+		if (mode === 'single') {
+			value = date;
+			onselect?.(date);
+			return;
+		}
+		// range
+		if (!valueStart || (valueStart && valueEnd)) {
+			valueStart = date;
+			valueEnd = null;
+			onselect?.({ from: date, to: null });
+		} else {
+			if (date < valueStart) {
+				valueEnd = valueStart;
+				valueStart = date;
+			} else {
+				valueEnd = date;
+			}
+			onselect?.({ from: valueStart, to: valueEnd });
+		}
+	}
+</script>
+
+<div
+	class={cn(
+		'border-default-200 inline-block w-64 rounded-lg border bg-white p-3 shadow-xs select-none',
+		className
+	)}
+	data-testid={buildTestId('calendar', undefined, testId)}
+>
+	{#if !hideHeader}
+		<div class="mb-2 flex items-center justify-between">
+			<button
+				type="button"
+				onclick={prevMonth}
+				class="text-default-500 hover:bg-default-100 hover:text-default-800 flex size-7 cursor-pointer items-center justify-center rounded"
+				aria-label="Previous month"
+				{disabled}
+			>
+				<svg class="size-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+					<path
+						fill-rule="evenodd"
+						d="M12.78 5.22a.75.75 0 0 1 0 1.06L9.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0z"
+						clip-rule="evenodd"
+					/>
+				</svg>
+			</button>
+			<span class="text-default-800 text-sm font-semibold">{monthLabel}</span>
+			<button
+				type="button"
+				onclick={nextMonth}
+				class="text-default-500 hover:bg-default-100 hover:text-default-800 flex size-7 cursor-pointer items-center justify-center rounded"
+				aria-label="Next month"
+				{disabled}
+			>
+				<svg class="size-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+					<path
+						fill-rule="evenodd"
+						d="M7.22 14.78a.75.75 0 0 1 0-1.06L10.94 10 7.22 6.28a.75.75 0 0 1 1.06-1.06l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0z"
+						clip-rule="evenodd"
+					/>
+				</svg>
+			</button>
+		</div>
+	{/if}
+
+	<div class="text-default-400 mb-1 grid grid-cols-7 gap-0.5 text-center text-[10px] font-medium">
+		{#each dayHeaders() as d (d)}
+			<div>{d}</div>
+		{/each}
+	</div>
+
+	<div class="grid grid-cols-7 gap-0.5" role="grid">
+		{#each cells as cell (cell.date.toISOString())}
+			<button
+				type="button"
+				onclick={() => pick(cell.date, cell.disabled)}
+				disabled={cell.disabled}
+				aria-pressed={cell.isSelected}
+				aria-label={cell.date.toLocaleDateString()}
+				class={cn(
+					'relative flex size-8 items-center justify-center rounded text-xs transition-colors',
+					!cell.inMonth && 'text-default-300',
+					cell.inMonth && !cell.disabled && 'text-default-700 hover:bg-default-100 cursor-pointer',
+					cell.disabled && 'text-default-200 cursor-not-allowed',
+					cell.isToday && !cell.isSelected && 'ring-default-300 font-semibold ring-1',
+					cell.isInRange && !cell.isRangeEdge && 'bg-primary-50 text-primary-700 rounded-none',
+					cell.isSelected && 'bg-primary-500 hover:bg-primary-600 text-white'
+				)}
+			>
+				{cell.date.getDate()}
+			</button>
+		{/each}
+	</div>
+</div>

package/dist/forms/calendar/Calendar.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CalendarProps } from './calendar-types.js';
+declare const Calendar: import("svelte").Component<CalendarProps, {}, "value" | "valueStart" | "valueEnd">;
+type Calendar = ReturnType<typeof Calendar>;
+export default Calendar;

package/dist/forms/calendar/calendar-types.d.ts

@@ -0,0 +1,46 @@
+import type { ClassValue } from 'tailwind-variants';
+/**
+ * Calendar selection mode.
+ * - `'single'`: one date. Bind to `value`.
+ * - `'range'`: two dates. Bind to `valueStart` and `valueEnd`.
+ */
+export type CalendarMode = 'single' | 'range';
+export type CalendarProps = {
+    /** Selection mode. @default 'single' */
+    mode?: CalendarMode;
+    /** Selected date (single mode). Bindable. */
+    value?: Date | null;
+    /** Range start (range mode). Bindable. */
+    valueStart?: Date | null;
+    /** Range end (range mode). Bindable. */
+    valueEnd?: Date | null;
+    /** Earliest selectable date (inclusive). */
+    minDate?: Date;
+    /** Latest selectable date (inclusive). */
+    maxDate?: Date;
+    /**
+     * Which month to display initially. Defaults to the month of the current
+     * selection, or today if nothing is selected.
+     */
+    initialMonth?: Date;
+    /**
+     * Day the week starts on. `0` = Sunday, `1` = Monday. @default 1
+     */
+    weekStartsOn?: 0 | 1;
+    /** Hide the month/year header and navigation buttons. @default false */
+    hideHeader?: boolean;
+    /** Disable all interaction. */
+    disabled?: boolean;
+    /** Wrapper class. */
+    class?: ClassValue;
+    /**
+     * Fires when the user picks a date. For single mode receives one Date;
+     * for range mode receives `{ from, to }` — `to` is `null` until the
+     * second click completes the range.
+     */
+    onselect?: (selection: Date | {
+        from: Date | null;
+        to: Date | null;
+    }) => void;
+    testId?: string;
+};

package/dist/forms/calendar/calendar-types.js

@@ -0,0 +1 @@
+export {};

package/dist/forms/calendar/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Calendar } from './Calendar.svelte';
+export type { CalendarProps, CalendarMode } from './calendar-types.js';

package/dist/forms/calendar/index.js

@@ -0,0 +1 @@
+export { default as Calendar } from './Calendar.svelte';

package/dist/forms/date-picker/DatePicker.svelte

@@ -0,0 +1,144 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+	import { buildTestId } from '../../helper/testid.js';
+	import { Size } from '../../variants.js';
+	import Popover from '../../elements/popover/Popover.svelte';
+	import Calendar from '../calendar/Calendar.svelte';
+	import type { DatePickerProps } from './date-picker-types.js';
+
+	let {
+		name,
+		id = name,
+		label,
+		placeholder = 'Select date',
+		value = $bindable<Date | null>(null),
+		minDate,
+		maxDate,
+		format = 'yyyy-MM-dd',
+		clearable = true,
+		disabled = false,
+		readonly = false,
+		required = false,
+		size = Size.MD,
+		errors = [],
+		class: className = '',
+		onchange,
+		testId
+	}: DatePickerProps = $props();
+
+	let open = $state(false);
+
+	function formatDate(d: Date): string {
+		const yyyy = String(d.getFullYear());
+		const MM = String(d.getMonth() + 1).padStart(2, '0');
+		const dd = String(d.getDate()).padStart(2, '0');
+		return format.replace('yyyy', yyyy).replace('MM', MM).replace('dd', dd);
+	}
+
+	const display = $derived(value ? formatDate(value) : '');
+	const hasErrors = $derived(errors.length > 0);
+
+	const sizeClass = $derived(
+		{
+			[Size.XS]: 'h-7 text-xs',
+			[Size.SM]: 'h-8 text-sm',
+			[Size.MD]: 'h-10 text-sm',
+			[Size.LG]: 'h-12 text-base',
+			[Size.XL]: 'h-14 text-lg',
+			[Size.XXL]: 'h-16 text-lg'
+		}[size]
+	);
+
+	function clear(e: MouseEvent) {
+		e.stopPropagation();
+		value = null;
+		onchange?.(null);
+	}
+
+	function handleSelect(date: Date) {
+		value = date;
+		open = false;
+		onchange?.(date);
+	}
+</script>
+
+<div class={cn('w-full', className)} data-testid={buildTestId('date-picker', 'wrapper', testId)}>
+	{#if label}
+		<label for={id} class="text-default-700 mb-1 block text-sm font-medium">
+			{label}
+			{#if required}<span class="text-danger-500" aria-hidden="true">*</span>{/if}
+		</label>
+	{/if}
+
+	<!-- Hidden input carries the ISO value for native form posts. -->
+	<input type="hidden" {name} value={value ? value.toISOString() : ''} {required} />
+
+	<Popover trigger="manual" bind:open placement="bottom" {disabled}>
+		<button
+			{id}
+			type="button"
+			{disabled}
+			onclick={() => (open = !open)}
+			aria-haspopup="dialog"
+			aria-expanded={open}
+			aria-invalid={hasErrors}
+			class={cn(
+				'flex w-full items-center justify-between gap-2 rounded-lg border bg-white px-3 transition-colors',
+				'focus-within:ring-2 focus-within:ring-offset-2 focus-within:outline-none',
+				sizeClass,
+				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',
+				disabled && 'cursor-not-allowed opacity-50',
+				!disabled && 'cursor-pointer'
+			)}
+			data-testid={buildTestId('date-picker', undefined, testId)}
+		>
+			<span class={cn('flex-1 text-left', !display && 'text-default-400')}>
+				{display || placeholder}
+			</span>
+			{#if clearable && value && !disabled && !readonly}
+				<button
+					type="button"
+					onclick={clear}
+					aria-label="Clear date"
+					class="text-default-400 hover:text-default-700 flex size-5 items-center justify-center rounded"
+				>
+					<svg class="size-3" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+						<path
+							d="M3 3l6 6M9 3l-6 6"
+							stroke="currentColor"
+							stroke-width="1.5"
+							stroke-linecap="round"
+						/>
+					</svg>
+				</button>
+			{:else}
+				<svg
+					class="text-default-400 size-4"
+					viewBox="0 0 20 20"
+					fill="currentColor"
+					aria-hidden="true"
+				>
+					<path
+						fill-rule="evenodd"
+						d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2zM4.75 5.5c-.69 0-1.25.56-1.25 1.25V8h13V6.75c0-.69-.56-1.25-1.25-1.25H4.75zM16.5 9.5h-13v5.75c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25V9.5z"
+						clip-rule="evenodd"
+					/>
+				</svg>
+			{/if}
+		</button>
+
+		{#snippet content()}
+			<Calendar {value} {minDate} {maxDate} onselect={(d) => handleSelect(d as Date)} />
+		{/snippet}
+	</Popover>
+
+	{#if hasErrors}
+		<ul class="mt-1 space-y-0.5" role="alert">
+			{#each errors as error (error)}
+				<li class="text-danger-600 text-xs">{error}</li>
+			{/each}
+		</ul>
+	{/if}
+</div>

package/dist/forms/date-picker/DatePicker.svelte.d.ts

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

package/dist/forms/date-picker/date-picker-types.d.ts

@@ -0,0 +1,29 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { VariantSizes } from '../../index.js';
+/** Very small subset of common date-format tokens supported by DatePicker. */
+export type DateFormatToken = 'yyyy' | 'MM' | 'dd';
+export type DatePickerProps = {
+    name: string;
+    id?: string;
+    label?: string;
+    placeholder?: string;
+    /** Bindable selected date. Null when cleared. */
+    value?: Date | null;
+    minDate?: Date;
+    maxDate?: Date;
+    /**
+     * Display format for the input. Supports `yyyy`, `MM`, `dd` tokens
+     * and any literal separator (`-`, `/`, `.`, etc.). @default 'yyyy-MM-dd'
+     */
+    format?: string;
+    /** Allow clearing the selection with a × button. @default true */
+    clearable?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    size?: VariantSizes;
+    errors?: string[];
+    class?: ClassValue;
+    onchange?: (date: Date | null) => void;
+    testId?: string;
+};

package/dist/forms/date-picker/date-picker-types.js

@@ -0,0 +1 @@
+export {};