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

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

@@ -1,100 +1,100 @@
-<script lang="ts">
-	import { HtmlAtom } from '../atom';
-	import { DatePickerBond } from './bond.svelte';
-	import { CalendarBond } from '../calendar/bond.svelte';
-	import { Icon } from '../icon';
-	import type { DatePickerHeaderProps } from './types';
-
-	const datePickerBond = DatePickerBond.get();
-	const calendarBond = CalendarBond.get();
-
-	let {
-		class: klass = '',
-		preset = 'datepicker.header',
-		children,
-		...restProps
-	}: DatePickerHeaderProps = $props();
-
-	const calendarBondProps = $derived(datePickerBond?.state?.props);
-
-	const pivote = $derived(calendarBondProps?.pivote ?? new Date());
-
-	// Format month and year
-	const monthName = $derived(pivote.toLocaleDateString('en-US', { month: 'long' }));
-	const year = $derived(pivote.getFullYear());
-
-	function handlePreviousMonth() {
-		calendarBond?.state?.previousMonth();
-	}
-
-	function handleNextMonth() {
-		calendarBond?.state?.nextMonth();
-	}
-
-	function handleMonthPicker() {
-		if (!datePickerBond) return;
-		datePickerBond.state.openMonthsPicker();
-	}
-</script>
-
-<HtmlAtom
-	as="nav"
-	class={['border-border flex items-center justify-between gap-2 border-b p-2', '$preset', klass]}
-	{preset}
-	{...restProps}
->
-	<!-- Previous Month 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={handlePreviousMonth}
-		aria-label="Previous month"
-	>
-		<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>
-
-	<!-- Month and Year Display -->
-	<button
-		class="text-foreground h-full flex-1 cursor-pointer text-center text-sm font-semibold"
-		onclick={handleMonthPicker}
-	>
-		{monthName}
-		{year}
-	</button>
-
-	<!-- Next Month 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={handleNextMonth}
-		aria-label="Next month"
-	>
-		<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>
-</HtmlAtom>
+<script lang="ts">
+	import { HtmlAtom } from '../atom';
+	import { DatePickerBond } from './bond.svelte';
+	import { CalendarBond } from '../calendar/bond.svelte';
+	import { Icon } from '../icon';
+	import type { DatePickerHeaderProps } from './types';
+
+	const datePickerBond = DatePickerBond.get();
+	const calendarBond = CalendarBond.get();
+
+	let {
+		class: klass = '',
+		preset = 'datepicker.header',
+		children,
+		...restProps
+	}: DatePickerHeaderProps = $props();
+
+	const calendarBondProps = $derived(datePickerBond?.state?.props);
+
+	const pivote = $derived(calendarBondProps?.pivote ?? new Date());
+
+	// Format month and year
+	const monthName = $derived(pivote.toLocaleDateString('en-US', { month: 'long' }));
+	const year = $derived(pivote.getFullYear());
+
+	function handlePreviousMonth() {
+		calendarBond?.state?.previousMonth();
+	}
+
+	function handleNextMonth() {
+		calendarBond?.state?.nextMonth();
+	}
+
+	function handleMonthPicker() {
+		if (!datePickerBond) return;
+		datePickerBond.state.openMonthsPicker();
+	}
+</script>
+
+<HtmlAtom
+	as="nav"
+	class={['border-border flex items-center justify-between gap-2 border-b p-2', '$preset', klass]}
+	{preset}
+	{...restProps}
+>
+	<!-- Previous Month 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={handlePreviousMonth}
+		aria-label="Previous month"
+	>
+		<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>
+
+	<!-- Month and Year Display -->
+	<button
+		class="text-foreground h-full flex-1 cursor-pointer text-center text-sm font-semibold"
+		onclick={handleMonthPicker}
+	>
+		{monthName}
+		{year}
+	</button>
+
+	<!-- Next Month 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={handleNextMonth}
+		aria-label="Next month"
+	>
+		<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>
+</HtmlAtom>

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

@@ -1,142 +1,142 @@
-<script lang="ts">
-	import { animate } from 'motion';
-	import { getYear, getMonth, setMonth } from 'date-fns';
-	import { cn } from '../../utils';
-	import { HtmlAtom } from '../atom';
-	import { DatePickerBond } from './bond.svelte';
-	import type { DatePickerMonthsProps } from './types';
-
-	const datePicker = DatePickerBond.get();
-
-	const pivote = $derived(datePicker?.state.props.pivote ?? new Date());
-
-	const currentYear = $derived(getYear(pivote));
-	const currentMonth = $derived(getMonth(pivote));
-
-	// Generate array of months
-	const monthsGrid = [
-		'Jan',
-		'Feb',
-		'Mar',
-		'Apr',
-		'May',
-		'Jun',
-		'Jul',
-		'Aug',
-		'Sep',
-		'Oct',
-		'Nov',
-		'Dec'
-	];
-
-	let {
-		class: klass = '',
-		preset = 'datepicker.months',
-		children,
-		...restProps
-	}: DatePickerMonthsProps = $props();
-
-	function enter(node: HTMLElement) {
-		animate(
-			node,
-			{
-				scale: [0.8, 1]
-			},
-			{ duration: 100 / 1000, ease: 'circOut' }
-		);
-		return {
-			duration: 100
-		};
-	}
-
-	function exit(node: HTMLElement) {
-		animate(
-			node,
-			{
-				scale: 0.8
-			},
-			{ duration: 100 / 1000, ease: 'circOut' }
-		);
-		return {
-			duration: 100
-		};
-	}
-
-	function handleMonthSelect(monthIndex: number) {
-		if (!datePicker?.state.props.pivote) return;
-		const current = datePicker.state.props.pivote;
-		datePicker.state.props.pivote = setMonth(current, monthIndex);
-
-		datePicker.state.closeMonthsPicker();
-	}
-
-	function handleYearPicker() {
-		if (!datePicker) return;
-		datePicker.state.openYearsPicker();
-	}
-</script>
-
-{#if datePicker.state.isMonthsPickerOpen}
-	<HtmlAtom
-		class={['absolute inset-0 z-1 flex flex-col gap-2 bg-inherit opacity-0', '$preset', klass]}
-		enter={(node) => {
-			animate(
-				node,
-				{
-					opacity: [0, 1]
-				},
-				{ duration: 100 / 1000, ease: 'anticipate' }
-			);
-			return {
-				duration: 100
-			};
-		}}
-		exit={(node) => {
-			animate(
-				node,
-				{
-					opacity: 0
-				},
-				{ duration: 100 / 1000, ease: 'anticipate' }
-			);
-			return {
-				duration: 100
-			};
-		}}
-		{preset}
-		{...restProps}
-	>
-		<HtmlAtom class="flex flex-1 flex-col gap-2" {enter} {exit}>
-			<!-- Year Display -->
-			<nav
-				class="border-border text-foreground flex h-12 items-center justify-center gap-2 border-b px-2 py-2"
-			>
-				<button
-					class="text-foreground cursor-pointer text-center text-sm font-semibold"
-					onclick={handleYearPicker}
-				>
-					{currentYear}
-				</button>
-			</nav>
-
-			<!-- Months Grid -->
-			<div class="grid flex-1 grid-cols-3 gap-1 px-2 pb-2">
-				{#each monthsGrid as month, index}
-					{@const isSelected = index === currentMonth}
-					<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'
-						)}
-						onclick={() => handleMonthSelect(index)}
-						aria-label="Select {month}"
-						aria-current={isSelected ? 'date' : undefined}
-					>
-						{month}
-					</button>
-				{/each}
-			</div>
-		</HtmlAtom>
-	</HtmlAtom>
-{/if}
+<script lang="ts">
+	import { animate } from 'motion';
+	import { getYear, getMonth, setMonth } from 'date-fns';
+	import { cn } from '../../utils';
+	import { HtmlAtom } from '../atom';
+	import { DatePickerBond } from './bond.svelte';
+	import type { DatePickerMonthsProps } from './types';
+
+	const datePicker = DatePickerBond.get();
+
+	const pivote = $derived(datePicker?.state.props.pivote ?? new Date());
+
+	const currentYear = $derived(getYear(pivote));
+	const currentMonth = $derived(getMonth(pivote));
+
+	// Generate array of months
+	const monthsGrid = [
+		'Jan',
+		'Feb',
+		'Mar',
+		'Apr',
+		'May',
+		'Jun',
+		'Jul',
+		'Aug',
+		'Sep',
+		'Oct',
+		'Nov',
+		'Dec'
+	];
+
+	let {
+		class: klass = '',
+		preset = 'datepicker.months',
+		children,
+		...restProps
+	}: DatePickerMonthsProps = $props();
+
+	function enter(node: HTMLElement) {
+		animate(
+			node,
+			{
+				scale: [0.8, 1]
+			},
+			{ duration: 100 / 1000, ease: 'circOut' }
+		);
+		return {
+			duration: 100
+		};
+	}
+
+	function exit(node: HTMLElement) {
+		animate(
+			node,
+			{
+				scale: 0.8
+			},
+			{ duration: 100 / 1000, ease: 'circOut' }
+		);
+		return {
+			duration: 100
+		};
+	}
+
+	function handleMonthSelect(monthIndex: number) {
+		if (!datePicker?.state.props.pivote) return;
+		const current = datePicker.state.props.pivote;
+		datePicker.state.props.pivote = setMonth(current, monthIndex);
+
+		datePicker.state.closeMonthsPicker();
+	}
+
+	function handleYearPicker() {
+		if (!datePicker) return;
+		datePicker.state.openYearsPicker();
+	}
+</script>
+
+{#if datePicker.state.isMonthsPickerOpen}
+	<HtmlAtom
+		class={['absolute inset-0 z-1 flex flex-col gap-2 bg-inherit opacity-0', '$preset', klass]}
+		enter={(node) => {
+			animate(
+				node,
+				{
+					opacity: [0, 1]
+				},
+				{ duration: 100 / 1000, ease: 'anticipate' }
+			);
+			return {
+				duration: 100
+			};
+		}}
+		exit={(node) => {
+			animate(
+				node,
+				{
+					opacity: 0
+				},
+				{ duration: 100 / 1000, ease: 'anticipate' }
+			);
+			return {
+				duration: 100
+			};
+		}}
+		{preset}
+		{...restProps}
+	>
+		<HtmlAtom class="flex flex-1 flex-col gap-2" {enter} {exit}>
+			<!-- Year Display -->
+			<nav
+				class="border-border text-foreground flex h-12 items-center justify-center gap-2 border-b px-2 py-2"
+			>
+				<button
+					class="text-foreground cursor-pointer text-center text-sm font-semibold"
+					onclick={handleYearPicker}
+				>
+					{currentYear}
+				</button>
+			</nav>
+
+			<!-- Months Grid -->
+			<div class="grid flex-1 grid-cols-3 gap-1 px-2 pb-2">
+				{#each monthsGrid as month, index}
+					{@const isSelected = index === currentMonth}
+					<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'
+						)}
+						onclick={() => handleMonthSelect(index)}
+						aria-label="Select {month}"
+						aria-current={isSelected ? 'date' : undefined}
+					>
+						{month}
+					</button>
+				{/each}
+			</div>
+		</HtmlAtom>
+	</HtmlAtom>
+{/if}

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

@@ -1,95 +1,95 @@
-<script lang="ts">
-	import { startOfDay } from 'date-fns';
-	import { defineProperty, defineState } from '../../utils';
-	import { Root } from '../popover/atoms';
-	import type { CalendarRange } from '../calendar/types';
-	import { DatePickerBond, DatePickerBondState, type DatePickerBondProps } from './bond.svelte';
-	import type { DatePickerRootProps } from './types';
-
-	let {
-		open = $bindable(false),
-		value = $bindable(undefined),
-		range = $bindable([undefined, undefined]),
-		pivote = $bindable(new Date()),
-		start = $bindable(startOfDay(new Date())),
-		end = $bindable(undefined),
-		min = undefined,
-		max = undefined,
-		type = 'single',
-		offset = 2,
-		factory = _factory,
-		children,
-		...restProps
-	}: DatePickerRootProps = $props();
-
-	const seed = {};
-
-	const bondProps = defineState<DatePickerBondProps>(
-		[
-			defineProperty(
-				'open',
-				() => open,
-				(v) => {
-					open = v;
-				}
-			),
-			defineProperty(
-				'range',
-				() => range,
-				(v: CalendarRange) => {
-					range = v;
-					value = v[0];
-				}
-			),
-			defineProperty(
-				'value',
-				() => range?.[0],
-				(v) => {
-					range[0] = v;
-				}
-			),
-			defineProperty(
-				'pivote',
-				() => pivote,
-				(v: Date) => (pivote = v)
-			),
-			defineProperty(
-				'start',
-				() => range[0],
-				(v: Date) => {
-					range[0] = v;
-				}
-			),
-			defineProperty(
-				'end',
-				() => range[1],
-				(v: Date | undefined) => {
-					range[1] = v;
-				}
-			),
-			defineProperty(
-				'min',
-				() => min,
-				(v: Date | undefined) => (min = v)
-			),
-			defineProperty(
-				'max',
-				() => max,
-				(v: Date | undefined) => (max = v)
-			),
-			defineProperty('type', () => type ?? 'single')
-		],
-		() => seed
-	);
-
-	const bond = factory().share();
-
-	function _factory() {
-		const bondState = new DatePickerBondState(() => bondProps);
-		return new DatePickerBond(bondState);
-	}
-</script>
-
-<Root bind:open extend={bondProps} {offset} {...restProps}>
-	{@render children?.({ datePicker: bond })}
-</Root>
+<script lang="ts">
+	import { startOfDay } from 'date-fns';
+	import { defineProperty, defineState } from '../../utils';
+	import { Root } from '../popover/atoms';
+	import type { CalendarRange } from '../calendar/types';
+	import { DatePickerBond, DatePickerBondState, type DatePickerBondProps } from './bond.svelte';
+	import type { DatePickerRootProps } from './types';
+
+	let {
+		open = $bindable(false),
+		value = $bindable(undefined),
+		range = $bindable([undefined, undefined]),
+		pivote = $bindable(new Date()),
+		start = $bindable(startOfDay(new Date())),
+		end = $bindable(undefined),
+		min = undefined,
+		max = undefined,
+		type = 'single',
+		offset = 1,
+		factory = _factory,
+		children,
+		...restProps
+	}: DatePickerRootProps = $props();
+
+	const seed = {};
+
+	const bondProps = defineState<DatePickerBondProps>(
+		[
+			defineProperty(
+				'open',
+				() => open,
+				(v) => {
+					open = v;
+				}
+			),
+			defineProperty(
+				'range',
+				() => range,
+				(v: CalendarRange) => {
+					range = v;
+					value = v[0];
+				}
+			),
+			defineProperty(
+				'value',
+				() => range?.[0],
+				(v) => {
+					range[0] = v;
+				}
+			),
+			defineProperty(
+				'pivote',
+				() => pivote,
+				(v: Date) => (pivote = v)
+			),
+			defineProperty(
+				'start',
+				() => range[0],
+				(v: Date) => {
+					range[0] = v;
+				}
+			),
+			defineProperty(
+				'end',
+				() => range[1],
+				(v: Date | undefined) => {
+					range[1] = v;
+				}
+			),
+			defineProperty(
+				'min',
+				() => min,
+				(v: Date | undefined) => (min = v)
+			),
+			defineProperty(
+				'max',
+				() => max,
+				(v: Date | undefined) => (max = v)
+			),
+			defineProperty('type', () => type ?? 'single')
+		],
+		() => seed
+	);
+
+	const bond = factory().share();
+
+	function _factory() {
+		const bondState = new DatePickerBondState(() => bondProps);
+		return new DatePickerBond(bondState);
+	}
+</script>
+
+<Root bind:open extend={bondProps} {offset} {...restProps}>
+	{@render children?.({ datePicker: bond })}
+</Root>