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

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

@@ -1,29 +1,29 @@
-<script lang="ts">
-	import { cn } from '../../utils';
-	import { HtmlAtom } from '../atom';
-	import { CalendarBond } from './bond.svelte';
-	import CalendarWeekDay from './calendar-week-day.svelte';
-
-	const calendarBond = CalendarBond.get();
-	const currentMonth = $derived(calendarBond?.state.props.currentMonth);
-
-	let { class: klass = '', preset = 'calendar.header', ...restProps } = $props();
-
-	const headerProps = $derived({
-		...calendarBond?.header(),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{preset}
-	class={cn(
-		'calendar-header border-border col-span-full grid h-fit grid-cols-subgrid border-b',
-		klass
-	)}
-	{...headerProps}
->
-	{#each (currentMonth?.days ?? []).filter((d) => d.week == 1) as day}
-		<CalendarWeekDay isWeekend={day.weekend}>{day.name}</CalendarWeekDay>
-	{/each}
-</HtmlAtom>
+<script lang="ts">
+	import { cn } from '../../utils';
+	import { HtmlAtom } from '../atom';
+	import { CalendarBond } from './bond.svelte';
+	import CalendarWeekDay from './calendar-week-day.svelte';
+
+	const calendarBond = CalendarBond.get();
+	const currentMonth = $derived(calendarBond?.state.props.currentMonth);
+
+	let { class: klass = '', preset = 'calendar.header', ...restProps } = $props();
+
+	const headerProps = $derived({
+		...calendarBond?.header(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{preset}
+	class={cn(
+		'calendar-header border-border col-span-full grid h-fit grid-cols-subgrid border-b',
+		klass
+	)}
+	{...headerProps}
+>
+	{#each (currentMonth?.days ?? []).filter((d) => d.week == 1) as day}
+		<CalendarWeekDay isWeekend={day.weekend}>{day.name}</CalendarWeekDay>
+	{/each}
+</HtmlAtom>

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

@@ -1,206 +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));
-
-	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.stories.svelte

@@ -1,31 +1,26 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import { Calendar as CalendarModule } from '.';
-
-	const { Story } = defineMeta({
-		title: 'Atoms/Calendar'
-	});
-</script>
-
-<script>
-	import { Root } from '../root';
-</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>
-	{/snippet}
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { Calendar as CalendarModule } from '.';
+
+	const { Story } = defineMeta({
+		title: 'Atoms/Calendar'
+	});
+</script>
+
+<script>
+</script>
+
+<Story name="Calendar">
+	{#snippet children({ args })}
+		<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/card/card-body.svelte

@@ -26,7 +26,7 @@
 <HtmlAtom
 	{bond}
 	preset="card.content"
-	class={['card-content border-border px-4', '$preset', klass]}
+	class={['card-content border-border px-4 pb-4', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}

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

@@ -28,7 +28,7 @@
 	{as}
 	{bond}
 	preset="card.footer"
-	class={['card-footer border-border flex items-center gap-2 px-4 py-4', '$preset', klass]}
+	class={['card-footer border-border flex items-center gap-2 px-4 pb-4', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}

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

@@ -71,7 +71,7 @@
 <HtmlAtom
 	preset="card"
 	class={[
-		'card bg-card border-border flex flex-col gap-2 overflow-clip rounded-lg border shadow-sm',
+		'card bg-card border-border flex flex-col overflow-clip rounded-lg border shadow-sm',
 		disabledStyles,
 		'$preset',
 		klass