@makolabs/ripple 2.5.9 → 3.0.1

package/dist/forms/calendar/Calendar.svelte

@@ -0,0 +1,315 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+	import { buildTestId } from '../../helper/testid.js';
+	import { Size } from '../../variants.js';
+	import type { VariantSizes } from '../../index.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,
+		size = Size.MD,
+		class: className = '',
+		onselect,
+		testId
+	}: CalendarProps = $props();
+
+	// Calendar dimensions don't map cleanly onto form-size tokens — a
+	// date grid's "size" means cell + panel width, not input height. So
+	// we maintain a dedicated ladder here, tuned so a Calendar at the
+	// same `size` as its enclosing DatePicker feels proportional.
+	type CalendarDensity = {
+		panel: string;
+		padding: string;
+		cell: string;
+		navBtn: string;
+		navIcon: string;
+		monthText: string;
+		dayHeaderText: string;
+		cellText: string;
+	};
+	const calendarSize: Record<VariantSizes, CalendarDensity> = {
+		[Size.XS]: {
+			panel: 'w-48',
+			padding: 'p-2',
+			cell: 'size-6',
+			navBtn: 'size-5',
+			navIcon: 'size-3',
+			monthText: 'text-xs',
+			dayHeaderText: 'text-[9px]',
+			cellText: 'text-[10px]'
+		},
+		[Size.SM]: {
+			panel: 'w-56',
+			padding: 'p-2.5',
+			cell: 'size-7',
+			navBtn: 'size-6',
+			navIcon: 'size-3.5',
+			monthText: 'text-xs',
+			dayHeaderText: 'text-[10px]',
+			cellText: 'text-xs'
+		},
+		[Size.MD]: {
+			panel: 'w-64',
+			padding: 'p-3',
+			cell: 'size-8',
+			navBtn: 'size-7',
+			navIcon: 'size-4',
+			monthText: 'text-sm',
+			dayHeaderText: 'text-[10px]',
+			cellText: 'text-xs'
+		},
+		[Size.LG]: {
+			panel: 'w-72',
+			padding: 'p-3.5',
+			cell: 'size-9',
+			navBtn: 'size-8',
+			navIcon: 'size-4',
+			monthText: 'text-base',
+			dayHeaderText: 'text-xs',
+			cellText: 'text-sm'
+		},
+		[Size.XL]: {
+			panel: 'w-80',
+			padding: 'p-4',
+			cell: 'size-10',
+			navBtn: 'size-9',
+			navIcon: 'size-5',
+			monthText: 'text-lg',
+			dayHeaderText: 'text-xs',
+			cellText: 'text-sm'
+		},
+		// Form controls cap at xl — see `form-size.ts`.
+		[Size.XXL]: {
+			panel: 'w-80',
+			padding: 'p-4',
+			cell: 'size-10',
+			navBtn: 'size-9',
+			navIcon: 'size-5',
+			monthText: 'text-lg',
+			dayHeaderText: 'text-xs',
+			cellText: 'text-sm'
+		}
+	};
+	const density = $derived(calendarSize[size]);
+
+	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 rounded-lg border bg-white shadow-xs select-none',
+		density.panel,
+		density.padding,
+		className
+	)}
+	data-testid={buildTestId('calendar', undefined, testId)}
+>
+	{#if !hideHeader}
+		<div class="mb-2 flex items-center justify-between">
+			<button
+				type="button"
+				onclick={prevMonth}
+				class={cn(
+					'text-default-500 hover:bg-default-100 hover:text-default-800 flex cursor-pointer items-center justify-center rounded',
+					density.navBtn
+				)}
+				aria-label="Previous month"
+				{disabled}
+			>
+				<svg class={density.navIcon} 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={cn('text-default-800 font-semibold', density.monthText)}>{monthLabel}</span>
+			<button
+				type="button"
+				onclick={nextMonth}
+				class={cn(
+					'text-default-500 hover:bg-default-100 hover:text-default-800 flex cursor-pointer items-center justify-center rounded',
+					density.navBtn
+				)}
+				aria-label="Next month"
+				{disabled}
+			>
+				<svg class={density.navIcon} 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={cn(
+			'text-default-400 mb-1 grid grid-cols-7 gap-0.5 text-center font-medium',
+			density.dayHeaderText
+		)}
+	>
+		{#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 items-center justify-center rounded transition-colors',
+					density.cell,
+					density.cellText,
+					!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,54 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { VariantSizes } from '../../index.js';
+/**
+ * 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;
+    /**
+     * Density preset. Scales day cells, headers, and overall panel width
+     * to match the tight form-size ladder so a `size="sm"` Calendar fits
+     * inside a `size="sm"` DatePicker / DateRange popover without feeling
+     * oversized. `2xl` aliases `xl`. @default 'md'
+     */
+    size?: VariantSizes;
+    /** 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,141 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+	import { buildTestId } from '../../helper/testid.js';
+	import { Size } from '../../variants.js';
+	import { formSizeTokens } from '../form-size.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 tokens = $derived(formSizeTokens[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 border bg-white transition-colors',
+				'focus-within:ring-2 focus-within:ring-offset-2 focus-within:outline-none',
+				tokens.height,
+				tokens.padX,
+				tokens.text,
+				tokens.gap,
+				tokens.radius,
+				tokens.shadow,
+				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={cn('text-default-400', tokens.iconSize)}
+					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} {size} 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 {};

package/dist/forms/form-size.d.ts

@@ -0,0 +1,37 @@
+import type { VariantSizes } from '../index.js';
+/**
+ * Canonical size tokens used by every form control — `Input`, `Textarea`,
+ * `NumberInput`, `Tags`, `Checkbox`, and the select-based controls.
+ *
+ * The goal is that a form using `size="sm"` across mixed controls looks
+ * vertically aligned and typographically coordinated. Before this map,
+ * each component had its own inline size map that disagreed with the
+ * others (e.g. `Input` only supported SM/MD/LG while `Textarea` supported
+ * all six, and `MD` meant `text-base` in `Input` but `text-sm` in
+ * `Textarea`).
+ *
+ * Multi-line controls (Textarea) read only `padX` / `padY` / `text` —
+ * height is content-driven. Single-line controls also read `height`.
+ */
+export type FormSizeTokens = {
+    /** Control height for single-line inputs (e.g. `h-10`). */
+    height: string;
+    /** Horizontal padding token (e.g. `px-3`). */
+    padX: string;
+    /** Vertical padding, used by multi-line controls and chip rows. */
+    padY: string;
+    /** Font size token (e.g. `text-base`). */
+    text: string;
+    /** Inline gap between leading icon and text (e.g. `gap-2`). */
+    gap: string;
+    /** Inline icon dimension (e.g. `size-4`). */
+    iconSize: string;
+    /** Rounded corner radius that scales with the control (e.g. `rounded-lg`). */
+    radius: string;
+    /**
+     * Drop shadow. `shadow-none` at the smallest sizes so `xs` / inline
+     * table cells don't stand out against their container.
+     */
+    shadow: string;
+};
+export declare const formSizeTokens: Record<VariantSizes, FormSizeTokens>;

package/dist/forms/form-size.js

@@ -0,0 +1,67 @@
+import { Size } from '../variants.js';
+// Tight ladder by design — we prefer compact, focused form controls
+// over bulky ones. `md` (the default) sits at `h-7` / `text-xs` so a
+// stock form reads dense; consumers who want roomier controls opt up to
+// `lg` / `xl`. `xs` is unmistakably inline-text-in-a-table-cell — 20px
+// tall, no shadow, barely-there rounded corners.
+//
+// `2xl` (`Size.XXL`) intentionally aliases `xl` for form controls: form
+// fields don't need a sixth, jumbo tier — anything larger reads as a
+// display element rather than an input. We still accept the token (the
+// `Size` enum exposes it library-wide) and quietly fall back to `xl`
+// rather than requiring every component to exclude it from its size type.
+const xl = {
+    height: 'h-11',
+    padX: 'px-3.5',
+    padY: 'py-2.5',
+    text: 'text-base',
+    gap: 'gap-2.5',
+    iconSize: 'size-5',
+    radius: 'rounded-lg',
+    shadow: 'shadow-xs'
+};
+export const formSizeTokens = {
+    [Size.XS]: {
+        height: 'h-5',
+        padX: 'px-1',
+        padY: 'py-0',
+        text: 'text-xs',
+        gap: 'gap-1',
+        iconSize: 'size-3',
+        radius: 'rounded-sm',
+        shadow: 'shadow-none'
+    },
+    [Size.SM]: {
+        height: 'h-6',
+        padX: 'px-1.5',
+        padY: 'py-0.5',
+        text: 'text-xs',
+        gap: 'gap-1',
+        iconSize: 'size-3',
+        radius: 'rounded',
+        shadow: 'shadow-xs'
+    },
+    [Size.MD]: {
+        height: 'h-7',
+        padX: 'px-2',
+        padY: 'py-1',
+        text: 'text-xs',
+        gap: 'gap-1.5',
+        iconSize: 'size-3.5',
+        radius: 'rounded-md',
+        shadow: 'shadow-xs'
+    },
+    [Size.LG]: {
+        height: 'h-9',
+        padX: 'px-2.5',
+        padY: 'py-1.5',
+        text: 'text-sm',
+        gap: 'gap-2',
+        iconSize: 'size-4',
+        radius: 'rounded-md',
+        shadow: 'shadow-xs'
+    },
+    [Size.XL]: xl,
+    // Form controls cap at xl visually — see comment above.
+    [Size.XXL]: xl
+};