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

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

@@ -0,0 +1,67 @@
+import { PopoverBond, PopoverState, type PopoverDomElements, type PopoverStateProps } from '../popover/bond.svelte';
+import type { CalendarBond, CalendarBondProps } from '../calendar/bond.svelte';
+export type DatePickerBondProps = PopoverStateProps & CalendarBondProps & {
+    format?: string;
+    placeholder?: string;
+};
+export type DatePickerBondElements = PopoverDomElements & {
+    trigger: HTMLInputElement;
+    root: HTMLElement;
+    content: HTMLElement;
+    clearButton: HTMLElement;
+};
+export declare class DatePickerBond<Props extends DatePickerBondProps = DatePickerBondProps, State extends DatePickerBondState<Props> = DatePickerBondState<Props>> extends PopoverBond<Props, State, DatePickerBondElements> {
+    #private;
+    static CONTEXT_KEY: string;
+    constructor(state: State);
+    get calendar(): CalendarBond<CalendarBondProps, import("..").CalendarBondState<CalendarBondProps>> | undefined;
+    setCalendar(calendar: CalendarBond): void;
+    share(): this;
+    trigger(): {
+        [x: symbol]: (node: HTMLInputElement) => void;
+        id: string;
+        role: string;
+        'aria-expanded': boolean;
+        'aria-controls': string;
+        'aria-label': string;
+        'aria-disabled': boolean;
+        placeholder: string;
+        disabled: boolean;
+        readonly: boolean;
+        tabindex: number;
+    };
+    content(): {
+        [x: symbol]: (node: HTMLElement) => void;
+        id: string;
+        role: string;
+        'aria-label': string;
+    };
+    clearButton(props?: Record<string, unknown>): {
+        onclick: (ev: Event) => void;
+        id: string;
+        type: string;
+        'aria-label': string;
+        tabindex: number;
+    };
+    static get(): DatePickerBond;
+    static set(bond: DatePickerBond): DatePickerBond;
+}
+export declare class DatePickerBondState<Props extends DatePickerBondProps> extends PopoverState<Props> {
+    #private;
+    constructor(props: () => Props);
+    get formattedValue(): string;
+    get hasValue(): boolean;
+    get isYearsPickerOpen(): boolean;
+    get isMonthsPickerOpen(): boolean;
+    selectDate(date: Date): void;
+    selectStart(date: Date): void;
+    selectEnd(date: Date): void;
+    clear(): void;
+    private formatDate;
+    openYearsPicker(): void;
+    closeYearsPicker(): void;
+    toggleYearsPicker(): void;
+    openMonthsPicker(): void;
+    closeMonthsPicker(): void;
+    toggleMonthsPicker(): void;
+}

package/dist/components/date-picker/bond.svelte.js

@@ -0,0 +1,174 @@
+import { PopoverBond, PopoverState } from '../popover/bond.svelte';
+import { getContext, setContext } from 'svelte';
+import { createAttachmentKey } from 'svelte/attachments';
+export class DatePickerBond extends PopoverBond {
+    static CONTEXT_KEY = '@atoms/context/date-picker';
+    #calendarBond;
+    constructor(state) {
+        super(state);
+    }
+    get calendar() {
+        return this.#calendarBond;
+    }
+    setCalendar(calendar) {
+        this.#calendarBond = calendar;
+    }
+    share() {
+        return DatePickerBond.set(this);
+    }
+    trigger() {
+        const isDisabled = this.state.props.disabled ?? false;
+        const placeholder = this.state.props.placeholder ?? 'Select a date';
+        return {
+            id: `date-picker-input-${this.id}`,
+            role: 'combobox',
+            'aria-expanded': this.state.props.open ?? false,
+            'aria-controls': `date-picker-calendar-${this.id}`,
+            'aria-label': 'Date picker',
+            'aria-disabled': isDisabled,
+            placeholder,
+            disabled: isDisabled,
+            readonly: true,
+            tabindex: isDisabled ? -1 : 0,
+            [createAttachmentKey()]: (node) => {
+                this.elements.trigger = node;
+            }
+        };
+    }
+    content() {
+        return {
+            id: `date-picker-calendar-${this.id}`,
+            role: 'dialog',
+            'aria-label': 'Choose date',
+            [createAttachmentKey()]: (node) => {
+                this.elements.content = node;
+            }
+        };
+    }
+    clearButton(props = {}) {
+        const hasValue = this.state.hasValue;
+        return {
+            id: `date-picker-clear-${this.id}`,
+            type: 'button',
+            'aria-label': 'Clear date',
+            tabindex: hasValue ? 0 : -1,
+            ...props,
+            onclick: (ev) => {
+                ev.preventDefault();
+                ev.stopPropagation();
+                this.state.clear();
+            },
+            [createAttachmentKey()]: (node) => {
+                this.elements.clearButton = node;
+            }
+        };
+    }
+    static get() {
+        return getContext(this.CONTEXT_KEY);
+    }
+    static set(bond) {
+        return setContext(this.CONTEXT_KEY, bond);
+    }
+}
+export class DatePickerBondState extends PopoverState {
+    #isYearsPickerOpen = $state(false);
+    #isMonthsPickerOpen = $state(false);
+    constructor(props) {
+        super(props);
+    }
+    get formattedValue() {
+        if (this.props.range) {
+            if (!this.props.start)
+                return '';
+            if (!this.props.end)
+                return this.formatDate(this.props.start);
+            return `${this.formatDate(this.props.start)} - ${this.formatDate(this.props.end)}`;
+        }
+        return this.props.value ? this.formatDate(this.props.value) : '';
+    }
+    get hasValue() {
+        if (this.props.range) {
+            return !!(this.props.start || this.props.end);
+        }
+        return !!this.props.value;
+    }
+    get isYearsPickerOpen() {
+        return this.#isYearsPickerOpen;
+    }
+    get isMonthsPickerOpen() {
+        return this.#isMonthsPickerOpen;
+    }
+    selectDate(date) {
+        if (this.props.range) {
+            if (!this.props.start) {
+                this.props.start = date;
+            }
+            else if (!this.props.end) {
+                this.props.end = date;
+                this.close(); // Close after selecting range
+            }
+            else {
+                this.props.start = date;
+                this.props.end = undefined;
+            }
+        }
+        else {
+            this.props.value = date;
+            this.close(); // Close after selecting single date
+        }
+    }
+    selectStart(date) {
+        this.props.start = date;
+    }
+    selectEnd(date) {
+        this.props.end = date;
+        this.close();
+    }
+    clear() {
+        this.props.value = undefined;
+        this.props.start = undefined;
+        this.props.end = undefined;
+    }
+    formatDate(date) {
+        const format = this.props.format ?? 'MM/dd/yyyy';
+        // Basic formatting - can be enhanced with date-fns format later
+        if (format === 'MM/dd/yyyy') {
+            const month = String(date.getMonth() + 1).padStart(2, '0');
+            const day = String(date.getDate()).padStart(2, '0');
+            const year = date.getFullYear();
+            return `${month}/${day}/${year}`;
+        }
+        if (format === 'dd/MM/yyyy') {
+            const month = String(date.getMonth() + 1).padStart(2, '0');
+            const day = String(date.getDate()).padStart(2, '0');
+            const year = date.getFullYear();
+            return `${day}/${month}/${year}`;
+        }
+        if (format === 'yyyy-MM-dd') {
+            const month = String(date.getMonth() + 1).padStart(2, '0');
+            const day = String(date.getDate()).padStart(2, '0');
+            const year = date.getFullYear();
+            return `${year}-${month}-${day}`;
+        }
+        // Default fallback
+        return date.toLocaleDateString();
+    }
+    openYearsPicker() {
+        this.#isYearsPickerOpen = true;
+    }
+    closeYearsPicker() {
+        this.#isYearsPickerOpen = false;
+    }
+    toggleYearsPicker() {
+        this.#isYearsPickerOpen = !this.#isYearsPickerOpen;
+    }
+    openMonthsPicker() {
+        this.#isMonthsPickerOpen = true;
+    }
+    closeMonthsPicker() {
+        this.#isMonthsPickerOpen = false;
+    }
+    toggleMonthsPicker() {
+        this.#isMonthsPickerOpen = !this.#isMonthsPickerOpen;
+    }
+}

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

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { Content } from '../popover/atoms';
+	import { Root } from '../calendar/atoms';
+	import { DatePickerBond } from './bond.svelte';
+
+	const datePickerBond = DatePickerBond.get();
+	const datePickerBondProps = $derived(datePickerBond?.state.props);
+
+	let {
+		class: klass = '',
+		preset = 'datepicker.calendar',
+		children: datePickerChildren,
+		...restProps
+	} = $props();
+
+	const calendarProps = $derived({
+		...datePickerBond?.content(),
+		...datePickerBondProps,
+		...restProps
+	});
+
+	function handleChange(ev: CustomEvent, { range, pivote }) {
+		if (!datePickerBond) return;
+
+		datePickerBond.state.props.range = range;
+		datePickerBond.state.props.pivote = pivote;
+	}
+</script>
+
+<Content
+	class={['relative overflow-hidden p-0', klass]}
+	base={Root}
+	onchange={handleChange}
+	{preset}
+	{...calendarProps}
+>
+	{#snippet children({ calendar })}
+		{@render datePickerChildren?.({
+			datePicker: datePickerBond
+		})}
+	{/snippet}
+</Content>

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

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

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

@@ -0,0 +1,105 @@
+<script lang="ts">
+	import { HtmlAtom } from '../atom';
+	import { DatePickerBond } from './bond.svelte';
+	import { CalendarBond } from '../calendar/bond.svelte';
+	import { Icon } from '../icon';
+
+	const datePickerBond = DatePickerBond.get();
+	const calendarBond = CalendarBond.get();
+
+	let { class: klass = '', preset = 'datepicker.header', children, ...restProps } = $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}
+>
+	{#if children}
+		{@render children?.({
+			datePicker: datePickerBond,
+			calendar: calendarBond,
+			monthName,
+			year,
+			onPrevious: handlePreviousMonth,
+			onNext: handleNextMonth
+		})}
+	{:else}
+		<!-- 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>
+	{/if}
+</HtmlAtom>

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

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

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

@@ -0,0 +1,150 @@
+<script lang="ts">
+	import { HtmlAtom } from '../atom';
+	import { PopoverBond } from '../popover';
+	import { DatePickerBond } from './bond.svelte';
+	import { getYear, getMonth, setMonth } 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());
+
+	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 } = $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}>
+			{#if children}
+				{@render children?.({
+					calendar,
+					popover,
+					currentYear,
+					currentMonth,
+					monthsGrid,
+					onMonthSelect: handleMonthSelect
+				})}
+			{:else}
+				<!-- 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>
+			{/if}
+		</HtmlAtom>
+	</HtmlAtom>
+{/if}

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

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

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

@@ -0,0 +1,94 @@
+<script lang="ts">
+	import { defineProperty, defineState } from '../../utils';
+	import { startOfDay } from 'date-fns';
+	import { Root } from '../popover/atoms';
+	import type { CalendarRange } from '../calendar/types';
+	import { DatePickerBond, DatePickerBondState, type DatePickerBondProps } from './bond.svelte';
+
+	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
+	} = $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,17 @@
+import { DatePickerBond, DatePickerBondState, type DatePickerBondProps } from './bond.svelte';
+declare const DatePickerRoot: import("svelte").Component<{
+    open?: boolean;
+    value?: any;
+    range?: any[];
+    pivote?: any;
+    start?: any;
+    end?: any;
+    min?: any;
+    max?: any;
+    type?: string;
+    offset?: number;
+    factory?: () => DatePickerBond<DatePickerBondProps, DatePickerBondState<DatePickerBondProps>>;
+    children: any;
+} & Record<string, any>, {}, "value" | "end" | "range" | "open" | "start" | "pivote">;
+type DatePickerRoot = ReturnType<typeof DatePickerRoot>;
+export default DatePickerRoot;