@svelte-atoms/core 1.0.0-alpha.41 → 1.0.0-alpha.44

package/dist/components/badge/types.d.ts

@@ -1,10 +1,7 @@
-import type { HtmlAtomProps } from '../atom';
+import type { HtmlAtomProps, SnippetProps } from '../atom';
 import type { Snippet } from 'svelte';
-/**
- * Extend this interface to add custom badge properties in your application.
- */
-export interface BadgeExtendProps {
+export interface BadgeSnippetProps extends SnippetProps {
 }
-export interface BadgeProps extends HtmlAtomProps<'span'>, BadgeExtendProps {
-    children?: Snippet<[]>;
+export type BadgeChildren = Snippet<[BadgeSnippetProps]>;
+export interface BadgeProps extends HtmlAtomProps<'span', never, BadgeChildren> {
 }

package/dist/components/button/button.svelte

@@ -1,31 +1,31 @@
-<script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import type { ButtonProps } from './types';
-	import { HtmlAtom } from '../atom';
-
-	let {
-		class: klass = '',
-		type = 'button',
-		preset = 'button',
-		children = undefined,
-		...restProps
-	}: ButtonProps & HTMLAttributes<HTMLButtonElement> = $props();
-
-	const buttonProps = $derived({
-		...restProps,
-		type
-	});
-</script>
-
-<HtmlAtom
-	{preset}
-	as="button"
-	class={[
-		'button text-primary-foreground bg-primary border-border hover:bg-primary/95 active:bg-primary/90 disabled:bg-muted disabled:text-muted-foreground w-fit cursor-pointer rounded-md px-3 py-2 transition-colors duration-200',
-		'$preset',
-		klass
-	]}
-	{...buttonProps}
->
-	{@render children?.()}
-</HtmlAtom>
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { ButtonProps } from './types';
+	import { HtmlAtom } from '../atom';
+
+	let {
+		class: klass = '',
+		type = 'button',
+		preset = 'button',
+		children = undefined,
+		...restProps
+	}: ButtonProps & HTMLAttributes<HTMLButtonElement> = $props();
+
+	const buttonProps = $derived({
+		...restProps,
+		type
+	});
+</script>
+
+<HtmlAtom
+	{preset}
+	as="button"
+	class={[
+		'button text-primary-foreground bg-primary border-border hover:bg-primary/95 active:bg-primary/90 disabled:bg-muted disabled:text-muted-foreground w-fit cursor-pointer rounded-md px-3 py-2 transition-colors duration-200',
+		'$preset',
+		klass
+	]}
+	{...buttonProps}
+>
+	{@render children?.()}
+</HtmlAtom>

package/dist/components/button/types.d.ts

@@ -1,11 +1,14 @@
 import type { HtmlAtomProps } from '../atom/types';
-import type { Snippet } from 'svelte';
 /**
- * Extend this interface to add custom button properties in your application.
+ * Button component props with extensible snippet type
+ *
+ * Override snippet children in custom implementations:
+ * ```ts
+ * interface CustomButtonProps extends ButtonProps {
+ *   children?: Snippet<[CustomButtonSnippetProps]>;
+ * }
+ * ```
  */
-export interface ButtonExtendProps {
-}
-export interface ButtonProps extends HtmlAtomProps<'button'>, ButtonExtendProps {
+export interface ButtonProps extends HtmlAtomProps<'button'> {
     type?: 'button' | 'submit' | 'reset';
-    children?: Snippet<[]>;
 }

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

@@ -98,7 +98,6 @@
 			<CalendarDay
 				{day}
 				onclick={() => {
-					console.log('day clicked', day.date);
 					calendarBond?.state.selectStart(new Date(day.date));
 				}}
 			/>

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

@@ -1,99 +1,99 @@
-<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';
-	import './calendar-day.css';
-
-	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 (day.disabled) return;
-
-		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/80 border-border box-border aspect-square cursor-pointer border-b border-l',
-		'hover:bg-accent hover:text-accent-foreground',
-		// State modifiers
-		day.weekend && 'text-primary',
-		day.today && 'font-semibold z-1',
-		day.offmonth && 'text-muted-foreground/50 bg-muted/50 hover:text-muted-foreground/70',
-		// Selected state (overrides above)
-		isSelected && [
-			'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground transition-colors duration-100',
-			day.offmonth && 'bg-primary/80',
-			day.weekend && 'bg-primary/90',
-		],
-		// Disabled state (applies opacity on top)
-		day.disabled && 'pointer-events-none opacity-25',
-		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}
-		<div class={cn("value flex items-center justify-center size-full transition-colors duration-100", day.today && ['outline-primary outline-2', isSelected && 'outline-offset-3'])}>
-			<span>{day.dayOfMonth}</span>
-		</div>
-	{/if}
-</HtmlAtom>
+<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';
+	import './calendar-day.css';
+
+	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 (day.disabled) return;
+
+		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/80 border-border box-border aspect-square cursor-pointer border-b border-l',
+		'hover:bg-accent hover:text-accent-foreground',
+		// State modifiers
+		day.weekend && 'text-primary',
+		day.today && 'font-semibold z-1',
+		day.offmonth && 'text-muted-foreground/50 bg-muted/50 hover:text-muted-foreground/70',
+		// Selected state (overrides above)
+		isSelected && [
+			'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground transition-colors duration-100',
+			day.offmonth && 'bg-primary/80',
+			day.weekend && 'bg-primary/90',
+		],
+		// Disabled state (applies opacity on top)
+		day.disabled && 'pointer-events-none opacity-25',
+		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}
+		<div class={cn("value flex items-center justify-center size-full transition-colors duration-100", day.today && ['outline-primary outline-2', isSelected && 'outline-offset-3'])}>
+			<span>{day.dayOfMonth}</span>
+		</div>
+	{/if}
+</HtmlAtom>

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

@@ -23,7 +23,7 @@
 	)}
 	{...headerProps}
 >
-	{#each (currentMonth?.days ?? []).filter((d) => d.week == 1) as day}
+	{#each (currentMonth?.days ?? []).filter((d) => d.week == 1) as day, i (i)}
 		<CalendarWeekDay isWeekend={day.weekend}>{day.name}</CalendarWeekDay>
 	{/each}
 </HtmlAtom>