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

package/dist/components/calendar/calendar-root.svelte

@@ -1,208 +1,206 @@
-<script lang="ts">
-	import { cn, defineProperty, defineState } from '../../utils';
-	import { addMonths, format, isToday, startOfDay, subMonths } from 'date-fns';
-	import type { CalendarRange, CalendarRootProps, Day, Month } from './types';
-	import { CalendarBond, CalendarBondState, type CalendarBondProps } from './bond.svelte';
-	import { HtmlAtom } from '../atom';
-
-	import './calendar.css';
-
-	let {
-		class: klass = '',
-		preset = 'calendar',
-		value = $bindable(),
-		range = $bindable([undefined, undefined]),
-		pivote = $bindable(new Date()),
-		start = $bindable(startOfDay(new Date())),
-		end = $bindable(),
-		min = undefined,
-		max = undefined,
-		type = 'single',
-		extend = {},
-		onchange = undefined,
-		factory = _factory,
-		children = undefined,
-		...restProps
-	}: CalendarRootProps = $props();
-
-	const monthCurrentDays = $derived(generator(pivote));
-
-	$inspect(min, max, monthCurrentDays);
-
-	const monthCurrent: Month = $derived.by(() => {
-		const start = monthCurrentDays.at(0) as Day;
-		const end = monthCurrentDays.at(-1) as Day;
-
-		return {
-			start: start?.date,
-			end: end?.date,
-			days: monthCurrentDays,
-			name: start ? format(start.date, 'MM') : '',
-			fullname: start ? format(start.date, 'MMM') : ''
-		};
-	});
-
-	const monthPreviousDays = $derived(generator(subMonths(pivote, 1)));
-	const monthPrevious: Month = $derived.by(() => {
-		const start = monthPreviousDays.at(0) as Day;
-		const end = monthPreviousDays.at(-1) as Day;
-
-		return {
-			start: start?.date,
-			end: end?.date,
-			days: monthPreviousDays,
-			name: start ? format(start.date, 'MM') : '',
-			fullname: start ? format(start.date, 'MMM') : ''
-		};
-	});
-
-	const monthNextDays = $derived(generator(addMonths(pivote, 1)));
-
-	const monthNext: Month = $derived.by(() => {
-		const start = monthNextDays.at(0) as Day;
-		const end = monthNextDays.at(-1) as Day;
-
-		return {
-			start: start?.date,
-			end: end?.date,
-			days: monthNextDays,
-			name: start ? format(start.date, 'MM') : '',
-			fullname: start ? format(start.date, 'MMM') : ''
-		};
-	});
-
-	function generator(pivot: Date): Day[] {
-		const firstDay = new Date(pivot.getFullYear(), pivot.getMonth(), 1).getDay();
-		const lastMonthDaysCount = monthDays(pivot.getMonth() - 1, pivot.getFullYear());
-		const sample = startOfDay(
-			new Date(pivot.getFullYear(), pivot.getMonth() - 1, lastMonthDaysCount - firstDay)
-		);
-
-		const array: Day[] = [];
-
-		for (let index = 0; index < 42; index++) {
-			sample.setDate(sample.getDate() + 1);
-
-			const prec =
-				pivot.getMonth() > sample.getMonth() || pivot.getFullYear() > sample.getFullYear();
-			const next =
-				(pivot.getMonth() < sample.getMonth() && pivot.getFullYear() === sample.getFullYear()) ||
-				(pivot.getMonth() > sample.getMonth() && pivot.getFullYear() < sample.getFullYear());
-
-			const disabled =
-				(min ? sample < startOfDay(min) : false) || (max ? sample > startOfDay(max) : false);
-
-			array.push({
-				id: sample.getTime(),
-				date: new Date(sample),
-				get offmonth() {
-					return next || prec;
-				},
-				dayOfMonth: sample.getDate(),
-				today: isToday(sample),
-				week: Math.floor(index / 7),
-				month: sample.getMonth(),
-				disabled: disabled,
-				weekend: sample.getDay() == 0,
-				name: format(sample, 'iii'),
-				fullname: format(sample, 'iiiii'),
-				get fromNextMonth() {
-					return next;
-				},
-				get fromPreviousMonth() {
-					return prec;
-				}
-			});
-		}
-
-		return array;
-	}
-
-	function monthDays(month: number, year = 2020) {
-		return new Date(year, month + 1, 0).getDate();
-	}
-
-	const bondProps = defineState<CalendarBondProps>(
-		[
-			defineProperty(
-				'range',
-				() => range,
-				(v: CalendarRange) => {
-					range = v;
-					onchange?.(new CustomEvent('change'), { range, pivote });
-				}
-			),
-			defineProperty(
-				'value',
-				() => range?.[0],
-				(v) => {
-					if (range?.[0]) {
-						range[0] = v;
-					}
-					onchange?.(new CustomEvent('change'), { range, pivote });
-				}
-			),
-			defineProperty(
-				'pivote',
-				() => pivote,
-				(v: Date) => {
-					pivote = v;
-					onchange?.(new CustomEvent('change'), { range, pivote });
-				}
-			),
-			defineProperty(
-				'start',
-				() => range?.[0],
-				(v: Date) => {
-					range[0] = v;
-					onchange?.(new CustomEvent('change'), { range, pivote });
-				}
-			),
-			defineProperty(
-				'end',
-				() => range?.[1],
-				(v: Date | undefined) => {
-					range[1] = v;
-					onchange?.(new CustomEvent('change'), { range, pivote });
-				}
-			),
-			defineProperty(
-				'min',
-				() => min,
-				(v: Date | undefined) => (min = v)
-			),
-			defineProperty(
-				'max',
-				() => max,
-				(v: Date | undefined) => (max = v)
-			),
-			defineProperty('type', () => type ?? 'single'),
-			defineProperty('nextMonth', () => monthNext),
-			defineProperty('currentMonth', () => monthCurrent),
-			defineProperty('previousMonth', () => monthPrevious)
-		],
-		() => ({ extend })
-	);
-
-	const bond = factory(bondProps).share();
-
-	const rootProps = $derived({
-		...bond.root(),
-		...restProps
-	});
-
-	function _factory(props: typeof bondProps) {
-		const popoverState = new CalendarBondState(() => props);
-		const popoverBond = new CalendarBond(popoverState);
-
-		return popoverBond;
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-<HtmlAtom {preset} class={cn('h-full w-full', klass)} data-atom="calendar-root" {...rootProps}>
-	{@render children?.({ calendar: bond })}
-</HtmlAtom>
+<script lang="ts">
+	import { cn, defineProperty, defineState } from '../../utils';
+	import { addMonths, format, isToday, startOfDay, subMonths } from 'date-fns';
+	import type { CalendarRange, CalendarRootProps, Day, Month } from './types';
+	import { CalendarBond, CalendarBondState, type CalendarBondProps } from './bond.svelte';
+	import { HtmlAtom } from '../atom';
+
+	import './calendar.css';
+
+	let {
+		class: klass = '',
+		preset = 'calendar',
+		value = $bindable(),
+		range = $bindable([undefined, undefined]),
+		pivote = $bindable(new Date()),
+		start = $bindable(startOfDay(new Date())),
+		end = $bindable(),
+		min = undefined,
+		max = undefined,
+		type = 'single',
+		extend = {},
+		onchange = undefined,
+		factory = _factory,
+		children = undefined,
+		...restProps
+	}: CalendarRootProps = $props();
+
+	const monthCurrentDays = $derived(generator(pivote));
+
+	const monthCurrent: Month = $derived.by(() => {
+		const start = monthCurrentDays.at(0) as Day;
+		const end = monthCurrentDays.at(-1) as Day;
+
+		return {
+			start: start?.date,
+			end: end?.date,
+			days: monthCurrentDays,
+			name: start ? format(start.date, 'MM') : '',
+			fullname: start ? format(start.date, 'MMM') : ''
+		};
+	});
+
+	const monthPreviousDays = $derived(generator(subMonths(pivote, 1)));
+	const monthPrevious: Month = $derived.by(() => {
+		const start = monthPreviousDays.at(0) as Day;
+		const end = monthPreviousDays.at(-1) as Day;
+
+		return {
+			start: start?.date,
+			end: end?.date,
+			days: monthPreviousDays,
+			name: start ? format(start.date, 'MM') : '',
+			fullname: start ? format(start.date, 'MMM') : ''
+		};
+	});
+
+	const monthNextDays = $derived(generator(addMonths(pivote, 1)));
+
+	const monthNext: Month = $derived.by(() => {
+		const start = monthNextDays.at(0) as Day;
+		const end = monthNextDays.at(-1) as Day;
+
+		return {
+			start: start?.date,
+			end: end?.date,
+			days: monthNextDays,
+			name: start ? format(start.date, 'MM') : '',
+			fullname: start ? format(start.date, 'MMM') : ''
+		};
+	});
+
+	function generator(pivot: Date): Day[] {
+		const firstDay = new Date(pivot.getFullYear(), pivot.getMonth(), 1).getDay();
+		const lastMonthDaysCount = monthDays(pivot.getMonth() - 1, pivot.getFullYear());
+		const sample = startOfDay(
+			new Date(pivot.getFullYear(), pivot.getMonth() - 1, lastMonthDaysCount - firstDay)
+		);
+
+		const array: Day[] = [];
+
+		for (let index = 0; index < 42; index++) {
+			sample.setDate(sample.getDate() + 1);
+
+			const prec =
+				pivot.getMonth() > sample.getMonth() || pivot.getFullYear() > sample.getFullYear();
+			const next =
+				(pivot.getMonth() < sample.getMonth() && pivot.getFullYear() === sample.getFullYear()) ||
+				(pivot.getMonth() > sample.getMonth() && pivot.getFullYear() < sample.getFullYear());
+
+			const disabled =
+				(min ? sample < startOfDay(min) : false) || (max ? sample > startOfDay(max) : false);
+
+			array.push({
+				id: sample.getTime(),
+				date: new Date(sample),
+				get offmonth() {
+					return next || prec;
+				},
+				dayOfMonth: sample.getDate(),
+				today: isToday(sample),
+				week: Math.floor(index / 7),
+				month: sample.getMonth(),
+				disabled: disabled,
+				weekend: sample.getDay() == 0,
+				name: format(sample, 'iii'),
+				fullname: format(sample, 'iiiii'),
+				get fromNextMonth() {
+					return next;
+				},
+				get fromPreviousMonth() {
+					return prec;
+				}
+			});
+		}
+
+		return array;
+	}
+
+	function monthDays(month: number, year = 2020) {
+		return new Date(year, month + 1, 0).getDate();
+	}
+
+	const bondProps = defineState<CalendarBondProps>(
+		[
+			defineProperty(
+				'range',
+				() => range,
+				(v: CalendarRange) => {
+					range = v;
+					onchange?.(new CustomEvent('change'), { range, pivote });
+				}
+			),
+			defineProperty(
+				'value',
+				() => range?.[0],
+				(v) => {
+					if (range?.[0]) {
+						range[0] = v;
+					}
+					onchange?.(new CustomEvent('change'), { range, pivote });
+				}
+			),
+			defineProperty(
+				'pivote',
+				() => pivote,
+				(v: Date) => {
+					pivote = v;
+					onchange?.(new CustomEvent('change'), { range, pivote });
+				}
+			),
+			defineProperty(
+				'start',
+				() => range?.[0],
+				(v: Date) => {
+					range[0] = v;
+					onchange?.(new CustomEvent('change'), { range, pivote });
+				}
+			),
+			defineProperty(
+				'end',
+				() => range?.[1],
+				(v: Date | undefined) => {
+					range[1] = v;
+					onchange?.(new CustomEvent('change'), { range, pivote });
+				}
+			),
+			defineProperty(
+				'min',
+				() => min,
+				(v: Date | undefined) => (min = v)
+			),
+			defineProperty(
+				'max',
+				() => max,
+				(v: Date | undefined) => (max = v)
+			),
+			defineProperty('type', () => type ?? 'single'),
+			defineProperty('nextMonth', () => monthNext),
+			defineProperty('currentMonth', () => monthCurrent),
+			defineProperty('previousMonth', () => monthPrevious)
+		],
+		() => ({ extend })
+	);
+
+	const bond = factory(bondProps).share();
+
+	const rootProps = $derived({
+		...bond.root(),
+		...restProps
+	});
+
+	function _factory(props: typeof bondProps) {
+		const popoverState = new CalendarBondState(() => props);
+		const popoverBond = new CalendarBond(popoverState);
+
+		return popoverBond;
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+<HtmlAtom {preset} class={cn('h-full w-full', klass)} data-atom="calendar-root" {...rootProps}>
+	{@render children?.({ calendar: bond })}
+</HtmlAtom>

package/dist/components/calendar/calendar-week-day.svelte

@@ -1,34 +1,34 @@
-<script lang="ts">
-	import { cn } from '../../utils';
-	import { HtmlAtom } from '../atom';
-	import { CalendarBond } from './bond.svelte';
-
-	const calendarBond = CalendarBond.get();
-
-	let {
-		class: klass = '',
-		preset = 'calendar.weekday',
-		isWeekend,
-		element = $bindable(undefined),
-		children = undefined,
-		...restProps
-	} = $props();
-
-	const weekDayProps = $derived({
-		...calendarBond?.weekDay(),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{preset}
-	class={cn(
-		'calendar-week-day h-fit px-2 py-2 text-center text-sm font-medium',
-		isWeekend ? 'text-primary' : '',
-		klass
-	)}
-	data-weekend={isWeekend}
-	{...weekDayProps}
->
-	{@render children?.()}
-</HtmlAtom>
+<script lang="ts">
+	import { cn } from '../../utils';
+	import { HtmlAtom } from '../atom';
+	import { CalendarBond } from './bond.svelte';
+
+	const calendarBond = CalendarBond.get();
+
+	let {
+		class: klass = '',
+		preset = 'calendar.weekday',
+		isWeekend,
+		element = $bindable(undefined),
+		children = undefined,
+		...restProps
+	} = $props();
+
+	const weekDayProps = $derived({
+		...calendarBond?.weekDay(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{preset}
+	class={cn(
+		'calendar-week-day h-fit px-2 py-2 text-center text-sm font-medium',
+		isWeekend ? 'text-primary' : '',
+		klass
+	)}
+	data-weekend={isWeekend}
+	{...weekDayProps}
+>
+	{@render children?.()}
+</HtmlAtom>

package/dist/components/calendar/calendar.css

@@ -1,26 +1,26 @@
-[data-atom='calendar-root'] {
-	display: grid;
-	grid-template-columns: repeat(7, 1fr);
-	grid-template-rows: auto 1fr;
-	/* 
-		--icare-root-background-color: color-mix(in srgb, black 5%, white 100%);
-		--icare-root-background-color-hover: color-mix(in srgb, black 5%, white 100%);
-		--icare-root-background-color-active: color-mix(in srgb, black 5%, white 100%);
-
-		--icare-root-text-color: black;
-
-		--icare-disabled-background-color: black;
-		--icare-disabled-text-color: black;
-
-		--icare-selected-background-color: black;
-		--icare-selected-text-color: white;
-
-		--icare-today-background-color: black;
-		--icare-today-text-color: black;
-
-		--icare-weekend-background-color: black;
-		--icare-weekend-text-color: black;
-
-		--icare-offmonth-background-color: black;
-		--icare-offmonth-text-color: black; */
-}
+[data-atom='calendar-root'] {
+	display: grid;
+	grid-template-columns: repeat(7, 1fr);
+	grid-template-rows: auto 1fr;
+	/* 
+		--icare-root-background-color: color-mix(in srgb, black 5%, white 100%);
+		--icare-root-background-color-hover: color-mix(in srgb, black 5%, white 100%);
+		--icare-root-background-color-active: color-mix(in srgb, black 5%, white 100%);
+
+		--icare-root-text-color: black;
+
+		--icare-disabled-background-color: black;
+		--icare-disabled-text-color: black;
+
+		--icare-selected-background-color: black;
+		--icare-selected-text-color: white;
+
+		--icare-today-background-color: black;
+		--icare-today-text-color: black;
+
+		--icare-weekend-background-color: black;
+		--icare-weekend-text-color: black;
+
+		--icare-offmonth-background-color: black;
+		--icare-offmonth-text-color: black; */
+}

package/dist/components/calendar/calendar.stories.svelte

@@ -8,29 +8,19 @@
 </script>
 
 <script>
-	import CalendarHeader from './calendar-header.svelte';
-	import { Root } from '../root';
-	import { Card } from '../card';
-
-	let value = $state(undefined);
-	let checked = $state(false);
 </script>
 
 <Story name="Calendar">
 	{#snippet children({ args })}
-		<Root>
-			{#snippet children({})}
-				<div class="flex h-fit items-center justify-center">
-					<CalendarModule.Root>
-						<CalendarModule.Header></CalendarModule.Header>
-						<CalendarModule.Body>
-							{#snippet children({ day })}
-								<CalendarModule.Day {day}></CalendarModule.Day>
-							{/snippet}
-						</CalendarModule.Body>
-					</CalendarModule.Root>
-				</div>
-			{/snippet}
-		</Root>
+		<div class="flex h-fit items-center justify-center">
+			<CalendarModule.Root>
+				<CalendarModule.Header></CalendarModule.Header>
+				<CalendarModule.Body>
+					{#snippet children({ day })}
+						<CalendarModule.Day {day}></CalendarModule.Day>
+					{/snippet}
+				</CalendarModule.Body>
+			</CalendarModule.Root>
+		</div>
 	{/snippet}
 </Story>

package/dist/components/calendar/calendar.stories.svelte.d.ts

@@ -1,6 +1,26 @@
 export default Calendar;
-type Calendar = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<Record<string, never>>): void;
+type Calendar = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string;
 };
-declare const Calendar: import("svelte").Component<Record<string, never>, {}, "">;
+declare const Calendar: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}