@makolabs/ripple 3.4.0 → 3.5.0

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

@@ -28,7 +28,7 @@ export type CalendarProps = {
      * Day the week starts on. `0` = Sunday, `1` = Monday. @default 1
      */
     weekStartsOn?: 0 | 1;
-    /** Hide the month/year header and navigation buttons. @default false */
+    /** Hide the weekday header row above the scrolling month list. @default false */
     hideHeader?: boolean;
     /** Disable all interaction. */
     disabled?: boolean;
@@ -39,6 +39,17 @@ export type CalendarProps = {
      * oversized. `2xl` aliases `xl`. @default 'md'
      */
     size?: VariantSizes;
+    /**
+     * Distance, in months (fractional allowed), of the open-time
+     * scroll-in flourish. The scroll animation starts this far above
+     * the anchor month and eases into it. Capped against `minDate`,
+     * so dates near the lower bound get a shorter flourish (or none).
+     * Set to `0` to disable. The default is shared by embedded
+     * Calendar and Calendars-inside-popovers (DatePicker, DateRange)
+     * so the open animation feels identical across all date pickers.
+     * @default 0.5
+     */
+    scrollFlourish?: number;
     /** Wrapper class. */
     class?: ClassValue;
     /**
@@ -53,11 +64,10 @@ export type CalendarProps = {
     /**
      * Test ID prefix. When set, the component emits these selectors:
      * - `{testId}-calendar` — root wrapper
-     * - `{testId}-calendar-prev-month` — prev button
-     * - `{testId}-calendar-next-month` — next button
-     * - `{testId}-calendar-month-label` — month/year header
      * - `{testId}-calendar-day-headers` — weekday row
-     * - `{testId}-calendar-day-{dayNumber}` — each day cell
+     * - `{testId}-calendar-scroll` — scrollable month list
+     * - `{testId}-calendar-month-label-{yearMonthKey}` — sticky month/year header per month
+     * - `{testId}-calendar-day-{dayNumber}` — each day cell (repeats across months)
      */
     testId?: string;
 };

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

@@ -38,7 +38,6 @@
 
 	const display = $derived(value ? formatDate(value) : '');
 	const hasErrors = $derived(errors.length > 0);
-
 	const tokens = $derived(formSizeTokens[size]);
 
 	function clear(e: MouseEvent) {

package/dist/forms/month-picker/MonthPicker.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { tick } from 'svelte';
 	import { cn } from '../../helper/cls.js';
 	import { buildTestId } from '../../helper/testid.js';
 	import { Size } from '../../variants.js';
@@ -25,6 +26,8 @@
 
 	let open = $state(false);
 	let listEl = $state<HTMLDivElement | undefined>();
+	let topSentinelEl = $state<HTMLDivElement | undefined>();
+	let bottomSentinelEl = $state<HTMLDivElement | undefined>();
 	const tokens = $derived(formSizeTokens[size]);
 	const hasErrors = $derived(errors.length > 0);
 
@@ -60,52 +63,68 @@
 
 	const display = $derived(value ? `${MONTH_NAMES[value.getMonth()]} ${value.getFullYear()}` : '');
 
-	// Build a flat list of months spanning a range of years. Default:
-	// 5 years before → 5 years after the anchor (selected or today).
-	const RANGE_YEARS = 5;
-	type MonthEntry = { year: number; month: number; date: Date; label: string; disabled: boolean };
+	// Lazy infinite-scroll window over years. The list starts as a small
+	// pad around the anchor (selected month or today) and grows toward
+	// either edge as IntersectionObserver sentinels enter the viewport,
+	// stopping at minDate/maxDate when those are set.
+	const INITIAL_PAD = 3;
+	const EXTEND_BY = 5;
 
-	const anchor = $derived(value ?? new Date());
-	const startYear = $derived(minDate ? minDate.getFullYear() : anchor.getFullYear() - RANGE_YEARS);
-	const endYear = $derived(maxDate ? maxDate.getFullYear() : anchor.getFullYear() + RANGE_YEARS);
+	const anchorYear = $derived((value ?? new Date()).getFullYear());
+	const minYear = $derived(minDate ? minDate.getFullYear() : null);
+	const maxYear = $derived(maxDate ? maxDate.getFullYear() : null);
 
-	const months = $derived.by<MonthEntry[]>(() => {
-		const out: MonthEntry[] = [];
-		for (let y = startYear; y <= endYear; y++) {
-			for (let m = 0; m < 12; m++) {
-				const d = new Date(y, m, 1);
-				let disabled = false;
-				if (minDate && d < new Date(minDate.getFullYear(), minDate.getMonth(), 1)) disabled = true;
-				if (maxDate && d > new Date(maxDate.getFullYear(), maxDate.getMonth(), 1)) disabled = true;
-				out.push({
-					year: y,
-					month: m,
-					date: d,
-					label: MONTH_NAMES[m],
-					disabled
-				});
-			}
+	let firstYear = $state<number>(new Date().getFullYear());
+	let lastYear = $state<number>(new Date().getFullYear());
+	// `extending` guards against re-entrant extends while a previous
+	// extension is still flushing through tick().
+	let extending = false;
+
+	// Initialize / reset the visible window whenever the anchor or bounds
+	// change. We deliberately do not depend on firstYear/lastYear here so
+	// extensions don't re-trigger this effect.
+	$effect(() => {
+		const a = anchorYear;
+		const lo = minYear;
+		const hi = maxYear;
+		let f = a - INITIAL_PAD;
+		let l = a + INITIAL_PAD;
+		if (lo !== null) f = Math.max(f, lo);
+		if (hi !== null) l = Math.min(l, hi);
+		if (f > l) {
+			f = l = a;
 		}
+		firstYear = f;
+		lastYear = l;
+	});
+
+	const years = $derived.by<number[]>(() => {
+		const out: number[] = [];
+		for (let y = firstYear; y <= lastYear; y++) out.push(y);
 		return out;
 	});
 
-	// Unique sorted years and a fast lookup by year*12+month key.
-	const years = $derived([...new Set(months.map((e) => e.year))]);
-	const monthMap = $derived(new Map(months.map((e) => [e.year * 12 + e.month, e])));
+	function isMonthDisabled(year: number, month: number): boolean {
+		const d = new Date(year, month, 1);
+		if (minDate && d < new Date(minDate.getFullYear(), minDate.getMonth(), 1)) return true;
+		if (maxDate && d > new Date(maxDate.getFullYear(), maxDate.getMonth(), 1)) return true;
+		return false;
+	}
 
-	function isSelected(entry: MonthEntry): boolean {
-		return !!value && value.getFullYear() === entry.year && value.getMonth() === entry.month;
+	function isSelected(year: number, month: number): boolean {
+		return !!value && value.getFullYear() === year && value.getMonth() === month;
 	}
 
-	function isCurrent(entry: MonthEntry): boolean {
+	function isCurrent(year: number, month: number): boolean {
 		const now = new Date();
-		return entry.year === now.getFullYear() && entry.month === now.getMonth();
+		return year === now.getFullYear() && month === now.getMonth();
 	}
 
-	function pick(entry: MonthEntry) {
-		if (entry.disabled) return;
-		value = entry.date;
-		onselect?.(entry.date);
+	function pick(year: number, month: number) {
+		if (isMonthDisabled(year, month)) return;
+		const d = new Date(year, month, 1);
+		value = d;
+		onselect?.(d);
 		open = false;
 	}
 
@@ -126,6 +145,61 @@
 		open = false;
 	}
 
+	async function extendBackward() {
+		if (extending) return;
+		if (minYear !== null && firstYear <= minYear) return;
+		const el = listEl;
+		if (!el) return;
+		extending = true;
+		const prevHeight = el.scrollHeight;
+		const prevTop = el.scrollTop;
+		let next = firstYear - EXTEND_BY;
+		if (minYear !== null && next < minYear) next = minYear;
+		firstYear = next;
+		// Wait for the new year sections to render, then preserve the
+		// user's visual scroll position by adding the height delta.
+		await tick();
+		const newHeight = el.scrollHeight;
+		el.scrollTop = prevTop + (newHeight - prevHeight);
+		extending = false;
+	}
+
+	async function extendForward() {
+		if (extending) return;
+		if (maxYear !== null && lastYear >= maxYear) return;
+		extending = true;
+		let next = lastYear + EXTEND_BY;
+		if (maxYear !== null && next > maxYear) next = maxYear;
+		lastYear = next;
+		await tick();
+		extending = false;
+	}
+
+	// Wire IntersectionObserver to the sentinels while the panel is open.
+	// Skipped where IO isn't available (SSR / jsdom tests) — the initial
+	// pad still renders, just without lazy extension.
+	$effect(() => {
+		if (!open) return;
+		if (typeof IntersectionObserver === 'undefined') return;
+		const root = listEl;
+		const top = topSentinelEl;
+		const bottom = bottomSentinelEl;
+		if (!root || !top || !bottom) return;
+		const io = new IntersectionObserver(
+			(entries) => {
+				for (const entry of entries) {
+					if (!entry.isIntersecting) continue;
+					if (entry.target === top) extendBackward();
+					else if (entry.target === bottom) extendForward();
+				}
+			},
+			{ root, rootMargin: '200px 0px' }
+		);
+		io.observe(top);
+		io.observe(bottom);
+		return () => io.disconnect();
+	});
+
 	// Auto-scroll to the selected (or current) month when the panel opens.
 	$effect(() => {
 		if (!open || !listEl) return;
@@ -133,7 +207,11 @@
 			const target =
 				listEl?.querySelector('[data-selected="true"]') ??
 				listEl?.querySelector('[data-current="true"]');
-			target?.scrollIntoView({ block: 'center' });
+			// jsdom doesn't implement scrollIntoView — guard so unit tests
+			// don't surface unhandled errors.
+			if (target && typeof (target as HTMLElement).scrollIntoView === 'function') {
+				(target as HTMLElement).scrollIntoView({ block: 'center' });
+			}
 		});
 	});
 </script>
@@ -243,6 +321,7 @@
 			bind:this={listEl}
 			class="max-h-72 overflow-y-auto [scrollbar-width:none] sm:max-h-72 [&::-webkit-scrollbar]:hidden"
 		>
+			<div bind:this={topSentinelEl} aria-hidden="true" class="h-px"></div>
 			{#each years as year (year)}
 				{@const yearSelected = value?.getFullYear() === year}
 				<div
@@ -257,17 +336,16 @@
 				</div>
 				<div class="grid grid-cols-4 gap-0.5 p-1.5">
 					{#each MONTH_SHORT as monthLabel, m (m)}
-						{@const entry = monthMap.get(year * 12 + m)}
-						{@const sel = entry ? isSelected(entry) : false}
-						{@const cur = entry ? isCurrent(entry) : false}
-						{@const dis = entry?.disabled ?? true}
+						{@const sel = isSelected(year, m)}
+						{@const cur = isCurrent(year, m)}
+						{@const dis = isMonthDisabled(year, m)}
 						<button
 							type="button"
 							data-month={m}
 							data-testid={buildTestId('month-picker', 'month', testId, `${year}-${m}`)}
 							data-selected={sel || undefined}
 							data-current={cur || undefined}
-							onclick={() => entry && pick(entry)}
+							onclick={() => pick(year, m)}
 							disabled={dis}
 							class={cn(
 								'cursor-pointer rounded px-1 py-2 text-xs font-medium transition-colors sm:py-1',
@@ -284,6 +362,7 @@
 					{/each}
 				</div>
 			{/each}
+			<div bind:this={bottomSentinelEl} aria-hidden="true" class="h-px"></div>
 		</div>
 
 		<div class="border-default-200 flex items-center justify-between border-t px-3 py-2">

package/dist/index.d.ts

@@ -46,6 +46,7 @@ export type { ProgressSegment, ProgressProps } from './elements/progress/progres
 export type { SpinnerProps } from './elements/spinner/spinner-types.js';
 export type { SkeletonProps, SkeletonVariant } from './elements/skeleton/skeleton-types.js';
 export type { EmptyStateProps, EmptyStateSize } from './elements/empty-state/empty-state-types.js';
+export type { PdfViewerProps } from './elements/pdf-viewer/pdf-viewer-types.js';
 export type { TooltipProps, TooltipPlacement, TooltipSize, TooltipVariant } from './elements/tooltip/tooltip-types.js';
 export type { PopoverProps, PopoverPlacement, PopoverTrigger } from './elements/popover/popover-types.js';
 export type { CalendarProps, CalendarMode } from './forms/calendar/calendar-types.js';
@@ -99,6 +100,7 @@ export { default as Skeleton } from './elements/skeleton/Skeleton.svelte';
 export { spinner as spinnerVariants } from './elements/spinner/spinner.js';
 export { default as EmptyState } from './elements/empty-state/EmptyState.svelte';
 export { emptyState as emptyStateVariants } from './elements/empty-state/empty-state.js';
+export { default as PdfViewer } from './elements/pdf-viewer/PdfViewer.svelte';
 export { default as Tooltip } from './elements/tooltip/Tooltip.svelte';
 export { default as Popover } from './elements/popover/Popover.svelte';
 export { default as ComboBox } from './elements/combobox/ComboBox.svelte';

package/dist/index.js

@@ -76,6 +76,8 @@ export { spinner as spinnerVariants } from './elements/spinner/spinner.js';
 // Elements - EmptyState
 export { default as EmptyState } from './elements/empty-state/EmptyState.svelte';
 export { emptyState as emptyStateVariants } from './elements/empty-state/empty-state.js';
+// Elements - PdfViewer
+export { default as PdfViewer } from './elements/pdf-viewer/PdfViewer.svelte';
 // Elements - Tooltip
 export { default as Tooltip } from './elements/tooltip/Tooltip.svelte';
 // Elements - Popover

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@makolabs/ripple",
-	"version": "3.4.0",
+	"version": "3.5.0",
 	"description": "Simple Svelte 5 powered component library ✨",
 	"license": "SEE LICENSE IN LICENSE",
 	"repository": {
@@ -55,8 +55,14 @@
 	},
 	"peerDependencies": {
 		"@sveltejs/kit": "^2.0.0",
+		"pdfjs-dist": "^4.0.0 || ^5.0.0",
 		"svelte": "^5.0.0 || ^6.0.0"
 	},
+	"peerDependenciesMeta": {
+		"pdfjs-dist": {
+			"optional": true
+		}
+	},
 	"devDependencies": {
 		"@eslint/compat": "^1.4.1",
 		"@eslint/js": "^9.39.1",
@@ -81,6 +87,7 @@
 		"husky": "^9.1.7",
 		"jsdom": "^27.2.0",
 		"lint-staged": "^16.2.6",
+		"pdfjs-dist": "^5.4.394",
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.3",
 		"prettier-plugin-tailwindcss": "^0.7.1",