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

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

@@ -0,0 +1,214 @@
+<script lang="ts">
+	import { HtmlAtom } from '../atom';
+	import { PopoverBond } from '../popover';
+	import { Icon } from '../icon';
+	import { DatePickerBond } from './bond.svelte';
+	import { getYear, setYear } from 'date-fns';
+	import { cn } from '../../utils';
+	import { animate } from 'motion';
+
+	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());
+
+	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;
+		for (let i = 0; i < 12; i++) {
+			years.push(startYear + i);
+		}
+		return years;
+	});
+
+	let { class: klass = '', preset = 'datepicker.years', children, ...restProps } = $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() {
+		yearPivote = yearPivote - 1;
+	}
+
+	function handleNextYear() {
+		yearPivote = yearPivote + 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
+			yearPivote = yearPivote + 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}
+	>
+		{#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"
+				>
+					<!-- 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>
+
+					<!-- 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>
+		{/if}
+	</HtmlAtom>
+{/if}

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

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

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

@@ -0,0 +1,51 @@
+<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, set, subDays } from 'date-fns';
+	import { date } from 'zod';
+
+	let value: Date | undefined = $state(undefined);
+</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={subDays(new Date(), 5)} max={addDays(new Date(), 15)}>
+						<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.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.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 @@
+export {};

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

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

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

@@ -1,13 +1,7 @@
-<script module lang="ts">
-	export type DialogBodyProps<
-		E extends keyof HTMLElementTagNameMap,
-		B extends Base = Base
-	> = HtmlAtomProps<E, B>;
-</script>
-
 <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 HtmlAtomProps, type Base } from '../atom';
+	import { HtmlAtom, type Base } from '../atom';
 
 	let {
 		class: klass,

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

@@ -1,5 +1,5 @@
-export type DialogBodyProps<E extends keyof HTMLElementTagNameMap, B extends Base = Base> = HtmlAtomProps<E, B>;
-import { type HtmlAtomProps, type Base } from '../atom';
+import type { DialogBodyProps } from './types';
+import { type Base } from '../atom';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
     props: DialogBodyProps<E, B>;
     exports: {};

package/dist/components/dialog/dialog-close-button.svelte

@@ -1,15 +1,12 @@
-<script module lang="ts">
-	export type DialogCloseButtonProps<
-		E extends keyof HTMLElementTagNameMap,
-		B extends Base = Base
-	> = HtmlAtomProps<E, B>;
-</script>
-
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { DialogBond } from './bond.svelte';
+<script
+	lang="ts"
+	generics="E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base"
+>
 	import { Icon } from '../icon';
 	import Close from '../../icons/icon-close.svelte';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
+	import { HtmlAtom, type Base } from '../atom';
+	import { DialogBond } from './bond.svelte';
+	import type { DialogCloseButtonProps } from './types';
 
 	const bond = DialogBond.get();
 

package/dist/components/dialog/dialog-close-button.svelte.d.ts

@@ -1,13 +1,13 @@
-export type DialogCloseButtonProps<E extends keyof HTMLElementTagNameMap, B extends Base = Base> = HtmlAtomProps<E, B>;
-import { type HtmlAtomProps, type Base } from '../atom';
-declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
+import { type Base } from '../atom';
+import type { DialogCloseButtonProps } from './types';
+declare function $$render<E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base>(): {
     props: DialogCloseButtonProps<E, B>;
     exports: {};
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> {
+declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base> {
     props(): ReturnType<typeof $$render<E, B>>['props'];
     events(): ReturnType<typeof $$render<E, B>>['events'];
     slots(): ReturnType<typeof $$render<E, B>>['slots'];
@@ -15,12 +15,12 @@ declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'div', B
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<E, B>['props']>, ReturnType<__sveltets_Render<E, B>['events']>, ReturnType<__sveltets_Render<E, B>['slots']>> & {
+    new <E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<E, B>['props']>, ReturnType<__sveltets_Render<E, B>['events']>, ReturnType<__sveltets_Render<E, B>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<E, B>['bindings']>;
     } & ReturnType<__sveltets_Render<E, B>['exports']>;
-    <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<E, B>['props']> & {}): ReturnType<__sveltets_Render<E, B>['exports']>;
+    <E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<E, B>['props']> & {}): ReturnType<__sveltets_Render<E, B>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const DialogCloseButton: $$IsomorphicComponent;
-type DialogCloseButton<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof DialogCloseButton<E, B>>;
+type DialogCloseButton<E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base> = InstanceType<typeof DialogCloseButton<E, B>>;
 export default DialogCloseButton;

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

@@ -1,15 +1,9 @@
-<script module lang="ts">
-	export type DialogContentProps<
-		E extends keyof HTMLElementTagNameMap,
-		B extends Base = Base
-	> = HtmlAtomProps<E, B>;
-</script>
-
 <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 HtmlAtomProps, type Base } from '../atom';
+	import { HtmlAtom, type Base } from '../atom';
 	import { DialogBond } from './bond.svelte';
+	import type { DialogContentProps } from './types';
 
 	const bond = DialogBond.get();
 

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

@@ -1,5 +1,5 @@
-export type DialogContentProps<E extends keyof HTMLElementTagNameMap, B extends Base = Base> = HtmlAtomProps<E, B>;
-import { type HtmlAtomProps, type Base } from '../atom';
+import { type Base } from '../atom';
+import type { DialogContentProps } from './types';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
     props: DialogContentProps<E, B>;
     exports: {};

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

@@ -1,13 +1,7 @@
-<script module lang="ts">
-	export type DialogDescriptionProps<
-		T extends keyof HTMLElementTagNameMap,
-		B extends Base = Base
-	> = HtmlAtomProps<T, B>;
-</script>
-
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
+	import type { DialogDescriptionProps } from './types';
 	import { DialogBond } from './bond.svelte';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
 
 	let {
 		class: klass = '',

package/dist/components/dialog/dialog-description.svelte.d.ts

@@ -1,5 +1,5 @@
-export type DialogDescriptionProps<T extends keyof HTMLElementTagNameMap, B extends Base = Base> = HtmlAtomProps<T, B>;
-import { type HtmlAtomProps, type Base } from '../atom';
+import { type Base } from '../atom';
+import type { DialogDescriptionProps } from './types';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base>(): {
     props: DialogDescriptionProps<E, B>;
     exports: {};

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

@@ -1,13 +1,7 @@
-<script module lang="ts">
-	export type DialogFooterProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B>;
-</script>
-
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
 	import { DialogBond } from './bond.svelte';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
+	import type { DialogFooterProps } from './types';
 
 	let {
 		class: klass = '',

package/dist/components/dialog/dialog-footer.svelte.d.ts

@@ -1,5 +1,5 @@
-export type DialogFooterProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B>;
-import { type HtmlAtomProps, type Base } from '../atom';
+import { type Base } from '../atom';
+import type { DialogFooterProps } from './types';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
     props: DialogFooterProps<E, B>;
     exports: {};

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

@@ -1,13 +1,7 @@
-<script module lang="ts">
-	export type DialogHeaderProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B>;
-</script>
-
 <script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
+	import type { DialogHeaderProps } from './types';
 	import { DialogBond } from './bond.svelte';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
 
 	let {
 		class: klass = '',

package/dist/components/dialog/dialog-header.svelte.d.ts

@@ -1,5 +1,5 @@
-export type DialogHeaderProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B>;
-import { type HtmlAtomProps, type Base } from '../atom';
+import { type Base } from '../atom';
+import type { DialogHeaderProps } from './types';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
     props: DialogHeaderProps<E, B>;
     exports: {};