@svelte-atoms/core 1.0.0-alpha.28 → 1.0.0-alpha.29

package/dist/components/date-picker/date-picker-years.svelte

@@ -1,33 +1,36 @@
 <script lang="ts">
-	import { HtmlAtom } from '../atom';
-	import { PopoverBond } from '../popover';
-	import { Icon } from '../icon';
-	import { DatePickerBond } from './bond.svelte';
+	import { animate } from 'motion';
 	import { getYear, setYear } from 'date-fns';
 	import { cn } from '../../utils';
-	import { animate } from 'motion';
+	import { DatePickerBond } from './bond.svelte';
+	import type { DatePickerYearsProps } from './types';
+	import { HtmlAtom } from '../atom';
+	import { Icon } from '../icon';
 
-	const popover = PopoverBond.get();
 	const datePicker = DatePickerBond.get();
-	const calendar = datePicker.calendar;
 
 	const pivote = $derived(datePicker?.state.props.pivote ?? new Date());
 
-	let yearPivote = $state(pivote.getFullYear());
+	let pivoteYear = $derived(pivote.getFullYear());
 
 	const currentYear = $derived(getYear(pivote));
 
 	// Generate array of years to display (12 years: current ±5)
 	const yearsGrid = $derived.by(() => {
 		const years = [];
-		const startYear = yearPivote - 5;
+		const startYear = pivoteYear - 5;
 		for (let i = 0; i < 12; i++) {
 			years.push(startYear + i);
 		}
 		return years;
 	});
 
-	let { class: klass = '', preset = 'datepicker.years', children, ...restProps } = $props();
+	let {
+		class: klass = '',
+		preset = 'datepicker.years',
+		children,
+		...restProps
+	}: DatePickerYearsProps = $props();
 
 	let scrollTimeout: NodeJS.Timeout | undefined = undefined;
 
@@ -58,11 +61,11 @@
 	}
 
 	function handlePreviousYear() {
-		yearPivote = yearPivote - 1;
+		pivoteYear = pivoteYear - 1;
 	}
 
 	function handleNextYear() {
-		yearPivote = yearPivote + 1;
+		pivoteYear = pivoteYear + 1;
 	}
 
 	function handleYearSelect(year: number) {
@@ -84,7 +87,7 @@
 		// Debounce the scroll event to avoid rapid year changes
 		scrollTimeout = setTimeout(() => {
 			const direction = event.deltaY > 0 ? 1 : -1; // Positive = scroll down = next year
-			yearPivote = yearPivote + direction;
+			pivoteYear = pivoteYear + direction;
 		}, 50);
 	}
 </script>
@@ -120,95 +123,83 @@
 		{preset}
 		{...restProps}
 	>
-		{#if children}
-			{@render children?.({
-				calendar,
-				popover,
-				currentYear,
-				yearsGrid,
-				onPrevious: handlePreviousYear,
-				onNext: handleNextYear,
-				onYearSelect: handleYearSelect
-			})}
-		{:else}
-			<HtmlAtom class="flex flex-1 flex-col" {enter} {exit}>
-				<!-- Navigation Bar -->
-				<nav
-					class="border-border text-foreground flex h-12 items-center justify-between gap-2 border-b px-2 py-2"
+		<HtmlAtom class="flex flex-1 flex-col" {enter} {exit}>
+			<!-- Navigation Bar -->
+			<nav
+				class="border-border text-foreground flex h-12 items-center justify-between gap-2 border-b px-2 py-2"
+			>
+				<!-- Previous Year Button -->
+				<button
+					type="button"
+					class="hover:bg-foreground/10 active:bg-foreground/20 flex size-8 cursor-pointer items-center justify-center rounded-md transition-colors"
+					onclick={handlePreviousYear}
+					aria-label="Previous year"
 				>
-					<!-- Previous Year Button -->
-					<button
-						type="button"
-						class="hover:bg-foreground/10 active:bg-foreground/20 flex size-8 cursor-pointer items-center justify-center rounded-md transition-colors"
-						onclick={handlePreviousYear}
-						aria-label="Previous year"
-					>
-						<Icon class="size-5">
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="size-full"
-								viewBox="0 0 24 24"
-								fill="none"
-								stroke="currentColor"
-								stroke-width="2"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-							>
-								<path d="M15 18l-6-6 6-6" />
-							</svg>
-						</Icon>
-					</button>
-
-					<!-- Year Display -->
-					<div class="text-foreground flex-1 text-center text-sm font-semibold">
-						{currentYear}
-					</div>
+					<Icon class="size-5">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="size-full"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						>
+							<path d="M15 18l-6-6 6-6" />
+						</svg>
+					</Icon>
+				</button>
+
+				<!-- Year Display -->
+				<div class="flex-1">
+					<!-- {currentYear} -->
+				</div>
 
-					<!-- Next Year Button -->
+				<!-- Next Year Button -->
+				<button
+					type="button"
+					class="hover:bg-foreground/10 active:bg-foreground/20 flex size-8 cursor-pointer items-center justify-center rounded-md transition-colors"
+					onclick={handleNextYear}
+					aria-label="Next year"
+				>
+					<Icon class="size-5">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="size-full"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						>
+							<path d="M9 18l6-6-6-6" />
+						</svg>
+					</Icon>
+				</button>
+			</nav>
+
+			<!-- Years Grid -->
+			<div class="grid flex-1 grid-cols-4 gap-1 px-2 py-2">
+				{#each yearsGrid as year}
+					{@const isSelected = year === pivote.getFullYear()}
+					{@const isCurrent = year === currentYear}
 					<button
 						type="button"
-						class="hover:bg-foreground/10 active:bg-foreground/20 flex size-8 cursor-pointer items-center justify-center rounded-md transition-colors"
-						onclick={handleNextYear}
-						aria-label="Next year"
+						class={cn(
+							'hover:bg-foreground/10 active:bg-foreground/20 rounded-md px-3 py-2 text-sm transition-colors',
+							isSelected && 'bg-primary text-primary-foreground hover:bg-primary/90',
+							isCurrent && !isSelected && 'ring-foreground/20 ring-1'
+						)}
+						onclick={() => handleYearSelect(year)}
+						aria-label="Select year {year}"
+						aria-current={isSelected ? 'date' : undefined}
 					>
-						<Icon class="size-5">
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="size-full"
-								viewBox="0 0 24 24"
-								fill="none"
-								stroke="currentColor"
-								stroke-width="2"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-							>
-								<path d="M9 18l6-6-6-6" />
-							</svg>
-						</Icon>
+						{year}
 					</button>
-				</nav>
-
-				<!-- Years Grid -->
-				<div class="grid flex-1 grid-cols-4 gap-1 px-2 py-2">
-					{#each yearsGrid as year}
-						{@const isSelected = year === pivote.getFullYear()}
-						{@const isCurrent = year === currentYear}
-						<button
-							type="button"
-							class={cn(
-								'hover:bg-foreground/10 active:bg-foreground/20 rounded-md px-3 py-2 text-sm transition-colors',
-								isSelected && 'bg-primary text-primary-foreground hover:bg-primary/90',
-								isCurrent && !isSelected && 'ring-foreground/20 ring-1'
-							)}
-							onclick={() => handleYearSelect(year)}
-							aria-label="Select year {year}"
-							aria-current={isSelected ? 'date' : undefined}
-						>
-							{year}
-						</button>
-					{/each}
-				</div>
-			</HtmlAtom>
-		{/if}
+				{/each}
+			</div>
+		</HtmlAtom>
 	</HtmlAtom>
 {/if}

package/dist/components/date-picker/date-picker-years.svelte.d.ts

@@ -1,7 +1,4 @@
-declare const DatePickerYears: import("svelte").Component<{
-    class?: string;
-    preset?: string;
-    children: any;
-} & Record<string, any>, {}, "">;
+import type { DatePickerYearsProps } from './types';
+declare const DatePickerYears: import("svelte").Component<DatePickerYearsProps, {}, "">;
 type DatePickerYears = ReturnType<typeof DatePickerYears>;
 export default DatePickerYears;

package/dist/components/date-picker/date-picker.stories.svelte

@@ -10,10 +10,12 @@
 	import { Root } from '../root';
 	import { DatePicker as ADatePicker } from '.';
 	import { Button } from '../button';
-	import { addDays, set, subDays } from 'date-fns';
-	import { date } from 'zod';
+	import { addDays, subDays } from 'date-fns';
 
 	let value: Date | undefined = $state(undefined);
+
+	let min = $state(subDays(new Date(), 5));
+	let max = $state(addDays(new Date(), 15));
 </script>
 
 <Story name="Date Picker">
@@ -21,7 +23,7 @@
 		<Root>
 			{#snippet children({})}
 				<div class="flex h-fit items-center justify-center">
-					<ADatePicker.Root bind:value min={subDays(new Date(), 5)} max={addDays(new Date(), 15)}>
+					<ADatePicker.Root bind:value {min} {max}>
 						<ADatePicker.Trigger base={Button} class="w-sm gap-4">
 							{#if value}
 								<div>{value.toDateString()}</div>
@@ -31,18 +33,7 @@
 
 							<ADatePicker.Indicator class="ml-auto" />
 						</ADatePicker.Trigger>
-						<ADatePicker.Calendar>
-							<ADatePicker.Header class="col-span-full"></ADatePicker.Header>
-							<ADatePicker.WeekDays></ADatePicker.WeekDays>
-							<ADatePicker.Body>
-								{#snippet children({ day })}
-									<ADatePicker.Day {day} class=""></ADatePicker.Day>
-								{/snippet}
-							</ADatePicker.Body>
-
-							<ADatePicker.Years></ADatePicker.Years>
-							<ADatePicker.Months></ADatePicker.Months>
-						</ADatePicker.Calendar>
+						<ADatePicker.Calendar />
 					</ADatePicker.Root>
 				</div>
 			{/snippet}

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

@@ -1 +1,53 @@
-export {};
+import type { Component, Snippet } from 'svelte';
+import type { Day, CalendarRange } from '../calendar/types';
+import type { DatePickerBond } from './bond.svelte';
+import type { Factory } from '../../types';
+export interface DatePickerCalendarProps {
+    class?: string;
+    preset?: string;
+    children?: Snippet<[{
+        day: Day;
+    }]>;
+    Header?: Component;
+    Weekdays?: Component;
+    Body?: Component;
+    Day?: Component;
+    Months?: Component;
+    Years?: Component;
+    [key: string]: unknown;
+}
+export interface DatePickerHeaderProps {
+    class?: string;
+    preset?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+}
+export interface DatePickerMonthsProps {
+    class?: string;
+    preset?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+}
+export interface DatePickerYearsProps {
+    class?: string;
+    preset?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+}
+export interface DatePickerRootProps {
+    open?: boolean;
+    value?: Date;
+    range?: CalendarRange;
+    pivote?: Date;
+    start?: Date;
+    end?: Date;
+    min?: Date;
+    max?: Date;
+    type?: 'range' | 'single';
+    offset?: number;
+    factory?: Factory<DatePickerBond>;
+    children?: Snippet<[{
+        datePicker: DatePickerBond;
+    }]>;
+    [key: string]: unknown;
+}

package/dist/components/dialog/dialog-content.svelte

@@ -1,62 +1,62 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { animate as motion } from 'motion';
-	import { DURATION } from '../../shared';
-	import { HtmlAtom, type Base } from '../atom';
-	import { DialogBond } from './bond.svelte';
-	import type { DialogContentProps } from './types';
-
-	const bond = DialogBond.get();
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = _animate,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: DialogContentProps<E, B> = $props();
-
-	const dialogProps = $derived({
-		...bond?.content({}),
-		...restProps
-	});
-
-	const open = $derived(bond?.state?.props?.open ?? false);
-
-	function _animate(node: HTMLElement) {
-		if (open) {
-			bond?.elements.root?.show?.();
-		}
-
-		motion(
-			node,
-			{ scale: 0.9 + 0.1 * +open, opacity: +open },
-			{
-				duration: DURATION.normal / 1000,
-				ease: 'anticipate'
-			}
-		);
-	}
-</script>
-
-<HtmlAtom
-	preset="dialog.content"
-	class={[
-		'bg-card text-foreground border-border flex h-fit w-full max-w-[90svw] flex-col rounded-md border py-4 shadow-sm md:min-w-sm lg:max-w-xl lg:min-w-md',
-		'$preset',
-		klass
-	]}
-	{bond}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	{...dialogProps}
->
-	{@render children?.({ dialog: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { animate as motion } from 'motion';
+	import { DURATION } from '../../shared';
+	import { HtmlAtom, type Base } from '../atom';
+	import { DialogBond } from './bond.svelte';
+	import type { DialogContentProps } from './types';
+
+	const bond = DialogBond.get();
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = _animate,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: DialogContentProps<E, B> = $props();
+
+	const dialogProps = $derived({
+		...bond?.content({}),
+		...restProps
+	});
+
+	const open = $derived(bond?.state?.props?.open ?? false);
+
+	function _animate(node: HTMLElement) {
+		if (open) {
+			bond?.elements.root?.show?.();
+		}
+
+		motion(
+			node,
+			{ scale: 0.9 + 0.1 * +open, opacity: +open },
+			{
+				duration: DURATION.normal / 1000,
+				ease: 'anticipate'
+			}
+		);
+	}
+</script>
+
+<HtmlAtom
+	preset="dialog.content"
+	class={[
+		'bg-card text-foreground border-border flex h-fit w-full max-w-[90svw] flex-col rounded-md border py-4 shadow-sm',
+		'$preset',
+		klass
+	]}
+	{bond}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	{...dialogProps}
+>
+	{@render children?.({ dialog: bond })}
+</HtmlAtom>

package/dist/components/element/html-element.svelte

@@ -1,85 +1,85 @@
-<script lang="ts" generics="T extends HtmlElementTagName">
-	import { untrack } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { createAttachmentKey } from 'svelte/attachments';
-	import { cn, toClassValue } from '../../utils';
-	import type { ElementType, HtmlElementProps, HtmlElementTagName } from './types';
-
-	type Element = ElementType<T>;
-
-	let {
-		class: klass = '',
-		as = 'div' as T,
-		global = true,
-		initial = undefined,
-		enter = undefined,
-		exit = undefined,
-		animate = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		children = undefined,
-		...restProps
-	}: HtmlElementProps<T> & Omit<HTMLAttributes<Element>, keyof HtmlElementProps<T>> = $props();
-
-	let node = $state<Element>();
-
-	let skipFirstAnimate = $state(!!enter);
-
-	$effect(() => {
-		if (!node) return;
-
-		const unmount = untrack(() => onmount?.(node!));
-
-		return () => {
-			if (typeof unmount === 'function') unmount(node!);
-			ondestroy?.(node!);
-		};
-	});
-
-	$effect(() => {
-		const fn = animate;
-
-		if (!node) return;
-		const shouldSkip = untrack(() => skipFirstAnimate);
-
-		if (shouldSkip) {
-			skipFirstAnimate = false;
-			return;
-		}
-
-		fn?.(node);
-	});
-
-	const elementProps = $derived({
-		[createAttachmentKey()]: (n: Element) => {
-			node = n;
-		},
-		class: cn(toClassValue(klass)),
-		...restProps
-	});
-
-	function _enter(node: Element) {
-		initial?.(node);
-		return () => {
-			const { duration = 0, delay = 0, easing = undefined } = enter?.(node) ?? {};
-			return { duration, delay, easing };
-		};
-	}
-
-	function _exit(node: Element) {
-		return () => {
-			const { duration = 0, delay = 0, easing = undefined } = exit?.(node) ?? {};
-			return { duration, delay, easing };
-		};
-	}
-</script>
-
-{#if global}
-	<svelte:element this={as} in:_enter|global out:_exit|global {...elementProps}>
-		{@render children?.()}
-	</svelte:element>
-{:else}
-	<svelte:element this={as} in:_enter out:_exit {...elementProps}>
-		{@render children?.()}
-	</svelte:element>
-{/if}
+<script lang="ts" generics="T extends HtmlElementTagName">
+	import { untrack } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { createAttachmentKey } from 'svelte/attachments';
+	import { cn, toClassValue } from '../../utils';
+	import type { ElementType, HtmlElementProps, HtmlElementTagName } from './types';
+
+	type Element = ElementType<T>;
+
+	let {
+		class: klass = '',
+		as = 'div' as T,
+		global = true,
+		initial = undefined,
+		enter = undefined,
+		exit = undefined,
+		animate = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		children = undefined,
+		...restProps
+	}: HtmlElementProps<T> & Omit<HTMLAttributes<Element>, keyof HtmlElementProps<T>> = $props();
+
+	let node = $state<Element>();
+
+	let skipFirstAnimate = $state(!!enter);
+
+	$effect(() => {
+		if (!node) return;
+
+		const unmount = untrack(() => onmount?.(node!));
+
+		return () => {
+			if (typeof unmount === 'function') unmount(node!);
+			ondestroy?.(node!);
+		};
+	});
+
+	$effect(() => {
+		const fn = animate;
+
+		if (!node) return;
+		const shouldSkip = untrack(() => skipFirstAnimate);
+
+		if (shouldSkip) {
+			skipFirstAnimate = false;
+			return;
+		}
+
+		fn?.(node);
+	});
+
+	const elementProps = $derived({
+		[createAttachmentKey()]: (n: Element) => {
+			node = n;
+		},
+		class: cn(toClassValue(klass)),
+		...restProps
+	});
+
+	function _enter(node: Element) {
+		initial?.(node);
+		return () => {
+			const { duration = 0, delay = 0, easing = undefined } = enter?.(node) ?? {};
+			return { duration, delay, easing };
+		};
+	}
+
+	function _exit(node: Element) {
+		return () => {
+			const { duration = 0, delay = 0, easing = undefined } = exit?.(node) ?? {};
+			return { duration, delay, easing };
+		};
+	}
+</script>
+
+{#if global}
+	<svelte:element this={as} in:_enter|global out:_exit|global {...elementProps}>
+		{@render children?.()}
+	</svelte:element>
+{:else}
+	<svelte:element this={as} in:_enter out:_exit {...elementProps}>
+		{@render children?.()}
+	</svelte:element>
+{/if}

package/dist/components/element/types.d.ts

@@ -12,7 +12,7 @@ export interface ElementProps<T extends ElementTagName> extends Record<string, u
     animate?: NodeFunction<T>;
     onmount?: NodeFunction<T>;
     ondestroy?: NodeFunction<T>;
-    children?: Snippet;
+    children?: Snippet<unknown[]>;
     [key: string]: unknown;
 }
 export type HtmlElementTagName = keyof HTMLElementTagNameMap;

package/dist/components/index.d.ts

@@ -38,3 +38,4 @@ export * from './container';
 export * from './calendar';
 export * from './date-picker';
 export * from './qr-code';
+export * from './lazy';

package/dist/components/index.js

@@ -38,3 +38,4 @@ export * from './container';
 export * from './calendar';
 export * from './date-picker';
 export * from './qr-code';
+export * from './lazy';

package/dist/components/lazy/index.d.ts

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

package/dist/components/lazy/index.js

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