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

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

@@ -1,97 +1,96 @@
-<script lang="ts">
-	import { isBefore, isSameDay, isWithinInterval } from 'date-fns';
-	import { cn } from '../../utils';
-	import { CalendarBond } from './bond.svelte';
-	import type { CalendarDayProps } from './types';
-	import { HtmlAtom } from '../atom';
-
-	const calendarBond = CalendarBond.get();
-
-	const selectedDateStart = $derived(calendarBond?.state.props.start);
-	const selectedDateEnd = $derived(calendarBond?.state.props.end);
-	const isRange = $derived(Array.isArray(calendarBond?.state.props.type === 'range'));
-
-	let {
-		class: klass = '',
-		preset = 'calendar.day',
-		day,
-		as = 'button',
-		children = undefined,
-		onclick = handleClick,
-		...restProps
-	}: CalendarDayProps = $props();
-
-	const dayProps = $derived({
-		...calendarBond?.day(day),
-		...restProps
-	});
-
-	const isSelected = $derived.by(() => {
-		if (selectedDateEnd && selectedDateStart) {
-			return isWithinInterval(day.date, { end: selectedDateEnd, start: selectedDateStart });
-		}
-
-		return selectedDateStart && isSameDay(day.date, selectedDateStart);
-	});
-
-	function handleClick() {
-		if (isRange) {
-			const start = calendarBond?.state.props.start;
-			if (!start) {
-				calendarBond?.state.selectStart(new Date(day.date));
-				return;
-			}
-
-			if (isBefore(new Date(day.date), new Date(start))) {
-				calendarBond?.state.selectStart(new Date(day.date));
-				return;
-			}
-
-			calendarBond?.state.selectEnd(new Date(day.date));
-		} else {
-			calendarBond?.state.selectStart(new Date(day.date));
-		}
-	}
-</script>
-
-<HtmlAtom
-	{as}
-	{preset}
-	class={[
-		'calendar-day text-foreground border-border hover:bg-accent hover:text-accent-foreground h-12 cursor-pointer border-b border-l p-1 transition-colors',
-		day.offmonth && 'text-muted-foreground bg-muted/30',
-		day.weekend && 'bg-muted/50',
-		isSelected &&
-			'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground',
-		isSelected && day.offmonth && 'bg-primary/70',
-		day.today && !isSelected && 'border-primary border-2 font-semibold',
-		day.disabled && 'pointer-events-none opacity-50',
-		klass
-	]}
-	data-disabled={day.disabled}
-	data-prec={day.fromPreviousMonth}
-	data-next={day.fromNextMonth}
-	data-offmonth={day.offmonth}
-	data-weekend={day.weekend}
-	data-today={day.today}
-	data-selected={isSelected}
-	{onclick}
-	{...dayProps}
->
-	{#if children}
-		{@render children({
-			calendar: calendarBond!
-		})}
-	{:else}
-		<span class="value">{day.dayOfMonth}</span>
-	{/if}
-</HtmlAtom>
-
-<style>
-	:global(.calendar-day):nth-child(7n + 1) {
-		border-left: none;
-	}
-	:global(.calendar-day):nth-last-child(-n + 7) {
-		border-bottom: none;
-	}
-</style>
+<script lang="ts">
+	import { isBefore, isSameDay, isWithinInterval } from 'date-fns';
+	import { CalendarBond } from './bond.svelte';
+	import type { CalendarDayProps } from './types';
+	import { HtmlAtom } from '../atom';
+
+	const calendarBond = CalendarBond.get();
+
+	const selectedDateStart = $derived(calendarBond?.state.props.start);
+	const selectedDateEnd = $derived(calendarBond?.state.props.end);
+	const isRange = $derived(Array.isArray(calendarBond?.state.props.type === 'range'));
+
+	let {
+		class: klass = '',
+		preset = 'calendar.day',
+		day,
+		as = 'button',
+		children = undefined,
+		onclick = handleClick,
+		...restProps
+	}: CalendarDayProps = $props();
+
+	const dayProps = $derived({
+		...calendarBond?.day(day),
+		...restProps
+	});
+
+	const isSelected = $derived.by(() => {
+		if (selectedDateEnd && selectedDateStart) {
+			return isWithinInterval(day.date, { end: selectedDateEnd, start: selectedDateStart });
+		}
+
+		return selectedDateStart && isSameDay(day.date, selectedDateStart);
+	});
+
+	function handleClick() {
+		if (isRange) {
+			const start = calendarBond?.state.props.start;
+			if (!start) {
+				calendarBond?.state.selectStart(new Date(day.date));
+				return;
+			}
+
+			if (isBefore(new Date(day.date), new Date(start))) {
+				calendarBond?.state.selectStart(new Date(day.date));
+				return;
+			}
+
+			calendarBond?.state.selectEnd(new Date(day.date));
+		} else {
+			calendarBond?.state.selectStart(new Date(day.date));
+		}
+	}
+</script>
+
+<HtmlAtom
+	{as}
+	{preset}
+	class={[
+		'calendar-day text-foreground border-border hover:bg-accent hover:text-accent-foreground h-12 cursor-pointer border-b border-l p-1 transition-colors',
+		day.offmonth && 'text-muted-foreground bg-muted/30',
+		day.weekend && 'bg-muted/50',
+		isSelected &&
+			'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground',
+		isSelected && day.offmonth && 'bg-primary/70',
+		day.today && !isSelected && 'border-primary border-2 font-semibold',
+		day.disabled && 'pointer-events-none opacity-50',
+		klass
+	]}
+	data-disabled={day.disabled}
+	data-prec={day.fromPreviousMonth}
+	data-next={day.fromNextMonth}
+	data-offmonth={day.offmonth}
+	data-weekend={day.weekend}
+	data-today={day.today}
+	data-selected={isSelected}
+	{onclick}
+	{...dayProps}
+>
+	{#if children}
+		{@render children({
+			calendar: calendarBond!
+		})}
+	{:else}
+		<span class="value">{day.dayOfMonth}</span>
+	{/if}
+</HtmlAtom>
+
+<style>
+	:global(.calendar-day):nth-child(7n + 1) {
+		border-left: none;
+	}
+	:global(.calendar-day):nth-last-child(-n + 7) {
+		border-bottom: none;
+	}
+</style>

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

@@ -1,33 +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', children, ...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}
-		{#if children}
-			{@render children?.(day)}
-		{:else}
-			<CalendarWeekDay isWeekend={day.weekend}>{day.name}</CalendarWeekDay>
-		{/if}
-	{/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-header.svelte.d.ts

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