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

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

@@ -0,0 +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}

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

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

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

@@ -0,0 +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>

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

@@ -0,0 +1,4 @@
+import type { DatePickerRootProps } from './types';
+declare const DatePickerRoot: import("svelte").Component<DatePickerRootProps, {}, "value" | "end" | "range" | "open" | "start" | "pivote">;
+type DatePickerRoot = ReturnType<typeof DatePickerRoot>;
+export default DatePickerRoot;

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

@@ -0,0 +1,205 @@
+<script lang="ts">
+	import { animate } from 'motion';
+	import { getYear, setYear } from 'date-fns';
+	import { cn } from '../../utils';
+	import { DatePickerBond } from './bond.svelte';
+	import type { DatePickerYearsProps } from './types';
+	import { HtmlAtom } from '../atom';
+	import { Icon } from '../icon';
+
+	const datePicker = DatePickerBond.get();
+
+	const pivote = $derived(datePicker?.state.props.pivote ?? new Date());
+
+	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 = pivoteYear - 5;
+		for (let i = 0; i < 12; i++) {
+			years.push(startYear + i);
+		}
+		return years;
+	});
+
+	let {
+		class: klass = '',
+		preset = 'datepicker.years',
+		children,
+		...restProps
+	}: DatePickerYearsProps = $props();
+
+	let scrollTimeout: NodeJS.Timeout | undefined = undefined;
+
+	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 handlePreviousYear() {
+		pivoteYear = pivoteYear - 1;
+	}
+
+	function handleNextYear() {
+		pivoteYear = pivoteYear + 1;
+	}
+
+	function handleYearSelect(year: number) {
+		if (!datePicker?.state.props.pivote) return;
+		const current = datePicker.state.props.pivote;
+		datePicker.state.props.pivote = setYear(current, year);
+
+		datePicker.state.closeYearsPicker();
+	}
+
+	function handleWheel(event: WheelEvent) {
+		event.preventDefault();
+
+		// Clear any existing timeout
+		if (scrollTimeout) {
+			clearTimeout(scrollTimeout);
+		}
+
+		// Debounce the scroll event to avoid rapid year changes
+		scrollTimeout = setTimeout(() => {
+			const direction = event.deltaY > 0 ? 1 : -1; // Positive = scroll down = next year
+			pivoteYear = pivoteYear + direction;
+		}, 50);
+	}
+</script>
+
+{#if datePicker.state.isYearsPickerOpen}
+	<HtmlAtom
+		class={['absolute inset-0 z-2 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
+			};
+		}}
+		onwheel={handleWheel}
+		{preset}
+		{...restProps}
+	>
+		<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"
+				>
+					<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 -->
+				<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={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>
+	</HtmlAtom>
+{/if}

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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,42 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+	const { Story } = defineMeta({
+		title: 'Atoms/Date Picker'
+	});
+</script>
+
+<script lang="ts">
+	import { Root } from '../root';
+	import { DatePicker as ADatePicker } from '.';
+	import { Button } from '../button';
+	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">
+	{#snippet children({ args })}
+		<Root>
+			{#snippet children({})}
+				<div class="flex h-fit items-center justify-center">
+					<ADatePicker.Root bind:value {min} {max}>
+						<ADatePicker.Trigger base={Button} class="w-sm gap-4">
+							{#if value}
+								<div>{value.toDateString()}</div>
+							{:else}
+								<div>Open Date Picker</div>
+							{/if}
+
+							<ADatePicker.Indicator class="ml-auto" />
+						</ADatePicker.Trigger>
+						<ADatePicker.Calendar />
+					</ADatePicker.Root>
+				</div>
+			{/snippet}
+		</Root>
+	{/snippet}
+</Story>

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

@@ -0,0 +1,3 @@
+declare const DatePicker: import("svelte").Component<Record<string, never>, {}, "">;
+type DatePicker = ReturnType<typeof DatePicker>;
+export default DatePicker;

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

@@ -0,0 +1,3 @@
+export * as DatePicker from './atoms';
+export * from './bond.svelte';
+export * from './types';

package/dist/components/date-picker/index.js

@@ -0,0 +1,3 @@
+export * as DatePicker from './atoms';
+export * from './bond.svelte';
+export * from './types';

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

@@ -0,0 +1,53 @@
+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/date-picker/types.js

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

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

@@ -1,39 +1,39 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { DialogBodyProps } from './types';
-	import { DialogBond } from './bond.svelte';
-	import { HtmlAtom, type Base } from '../atom';
-
-	let {
-		class: klass,
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: DialogBodyProps<E, B> = $props();
-
-	const bond = DialogBond.get();
-
-	const bodyProps = $derived({
-		...bond?.body({}),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="dialog.body"
-	class={['border-border px-4 py-2', '$preset', klass]}
-	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)}
-	{...bodyProps}
->
-	{@render children?.({ dialog: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import type { DialogBodyProps } from './types';
+	import { DialogBond } from './bond.svelte';
+	import { HtmlAtom, type Base } from '../atom';
+
+	let {
+		class: klass,
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: DialogBodyProps<E, B> = $props();
+
+	const bond = DialogBond.get();
+
+	const bodyProps = $derived({
+		...bond?.body({}),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="dialog.body"
+	class={['border-border px-4 py-2', '$preset', klass]}
+	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)}
+	{...bodyProps}
+>
+	{@render children?.({ dialog: bond })}
+</HtmlAtom>