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

package/dist/components/atom/html-atom.svelte

@@ -21,9 +21,9 @@
 		preset: presetKey = undefined,
 		bond = undefined,
 		variants = undefined,
-		children = undefined,
+		children: childrenProp = undefined,
 		...restProps
-	}: HtmlAtomProps<E, B> & HTMLAttributes<Element> = $props();
+	}: HtmlAtomProps<E, B> & Omit<HTMLAttributes<Element>, 'children'> = $props();
 
 	const preset = $derived(
 		presetKey ? getPreset(presetKey as PresetModuleName)?.apply?.(bond, [bond]) : undefined
@@ -122,7 +122,7 @@
 		if (isSnippet)
 			return {
 				component: SnippetRenderer,
-				props: { snippet: snippet, class: _klass, as: _as, children, ..._restProps }
+				props: { snippet: snippet, class: _klass, as: _as, children: childrenProp, ..._restProps }
 			};
 
 		return {
@@ -201,5 +201,7 @@
 </script>
 
 <renderer.component {...renderer.props}>
-	{@render children?.()}
+	{#snippet children(args)}
+		{@render childrenProp?.(args)}
+	{/snippet}
 </renderer.component>

package/dist/components/atom/html-atom.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { HTMLAttributes } from 'svelte/elements';
 import type { Base, HtmlAtomProps } from './types';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
-    props: HtmlAtomProps<E, B> & HTMLAttributes<HTMLElementTagNameMap[E]>;
+    props: HtmlAtomProps<E, B> & Omit<HTMLAttributes<HTMLElementTagNameMap[E]>, "children">;
     exports: {};
     bindings: "";
     slots: {};

package/dist/components/atom/snippet-renderer.svelte

@@ -1,5 +1,5 @@
-<script lang="ts">
-	let { snippet, ...restProps } = $props();
-</script>
-
-{@render snippet?.({ ...restProps })}
+<script lang="ts">
+	let { snippet, ...restProps } = $props();
+</script>
+
+{@render snippet?.({ ...restProps })}

package/dist/components/button/button.stories.svelte

@@ -1,60 +1,60 @@
-<script module>
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Root from '../root/root.svelte';
-	import ButtonCmp from './button.svelte';
-	import { defineVariants } from '../../utils/variant';
-
-	const { Story } = defineMeta({
-		title: 'ATOMS/Button',
-		argTypes: {
-			variant: {
-				control: 'select',
-				options: ['primary', 'secondary', 'destructive', 'outline', 'ghost'],
-				description: 'Button variant style',
-				table: {
-					defaultValue: { summary: 'primary' }
-				}
-			}
-		}
-	});
-</script>
-
-<script lang="ts">
-	const variants = defineVariants((bond) => ({
-		variants: {
-			variant: {
-				primary: {
-					class: 'bg-primary text-primary-foreground hover:bg-primary/80 active:bg-primary/90'
-				},
-				secondary: {
-					class:
-						'bg-secondary text-secondary-foreground hover:bg-secondary/80 active:bg-secondary/90'
-				},
-				destructive: {
-					class:
-						'bg-destructive text-destructive-foreground hover:bg-destructive/80 active:bg-destructive/90'
-				},
-				outline: {
-					class:
-						'bg-transparent hover:bg-foreground/5 active:bg-foreground/10 border border-border text-foreground'
-				},
-				ghost: {
-					class:
-						'bg-transparent text-foreground hover:bg-foreground/5 active:bg-foreground/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2'
-				}
-			}
-		},
-		compounds: [],
-		defaults: {
-			variant: 'destructive'
-		}
-	}));
-</script>
-
-<Story name="Button">
-	{#snippet template(args)}
-		<Root class="p-4">
-			<ButtonCmp {variants} {...args}>Clicke me</ButtonCmp>
-		</Root>
-	{/snippet}
-</Story>
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Root from '../root/root.svelte';
+	import ButtonCmp from './button.svelte';
+	import { defineVariants } from '../../utils/variant';
+
+	const { Story } = defineMeta({
+		title: 'ATOMS/Button',
+		argTypes: {
+			variant: {
+				control: 'select',
+				options: ['primary', 'secondary', 'destructive', 'outline', 'ghost'],
+				description: 'Button variant style',
+				table: {
+					defaultValue: { summary: 'primary' }
+				}
+			}
+		}
+	});
+</script>
+
+<script lang="ts">
+	const variants = defineVariants((bond) => ({
+		variants: {
+			variant: {
+				primary: {
+					class: 'bg-primary text-primary-foreground hover:bg-primary/80 active:bg-primary/90'
+				},
+				secondary: {
+					class:
+						'bg-secondary text-secondary-foreground hover:bg-secondary/80 active:bg-secondary/90'
+				},
+				destructive: {
+					class:
+						'bg-destructive text-destructive-foreground hover:bg-destructive/80 active:bg-destructive/90'
+				},
+				outline: {
+					class:
+						'bg-transparent hover:bg-foreground/5 active:bg-foreground/10 border border-border text-foreground'
+				},
+				ghost: {
+					class:
+						'bg-transparent text-foreground hover:bg-foreground/5 active:bg-foreground/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2'
+				}
+			}
+		},
+		compounds: [],
+		defaults: {
+			variant: 'destructive'
+		}
+	}));
+</script>
+
+<Story name="Button">
+	{#snippet template(args)}
+		<Root class="p-4">
+			<ButtonCmp {variants} {...args}>Clicke me</ButtonCmp>
+		</Root>
+	{/snippet}
+</Story>

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

@@ -1,107 +1,107 @@
-<script lang="ts">
-	import { backInOut } from 'svelte/easing';
-	import CalendarDay from './calendar-day.svelte';
-	import { CalendarBond } from './bond.svelte';
-	import { cn } from '../../utils';
-	import { HtmlAtom } from '../atom';
-
-	const calendarBond = CalendarBond.get();
-
-	const currentMonth = $derived(calendarBond?.state.props.currentMonth);
-
-	let {
-		class: klass = '',
-		weekday,
-		preset = 'calendar.body',
-		children = undefined,
-		...restProps
-	} = $props();
-
-	const bodyProps = $derived({
-		...calendarBond?.body(),
-		...restProps
-	});
-
-	// const generator = function (pivot: Date, start: Date, end?: Date) {
-	// 	const firstDay = new Date(pivot.getFullYear(), pivot.getMonth(), 1).getDay();
-	// 	const lastMonthDaysCount = monthDays(pivot.getMonth() - 1, pivot.getFullYear());
-	// 	const sample = new Date(
-	// 		pivot.getFullYear(),
-	// 		pivot.getMonth() - 1,
-	// 		lastMonthDaysCount - firstDay
-	// 	);
-
-	// 	const array = [];
-	// 	let next = false,
-	// 		prec = false;
-
-	// 	for (let index = 0; index < 42; index++) {
-	// 		sample.setDate(sample.getDate() + 1);
-
-	// 		prec = pivot.getMonth() > sample.getMonth() || pivot.getFullYear() > sample.getFullYear();
-	// 		next =
-	// 			(pivot.getMonth() < sample.getMonth() && pivot.getFullYear() === sample.getFullYear()) ||
-	// 			(pivot.getMonth() > sample.getMonth() && pivot.getFullYear() < sample.getFullYear());
-
-	// 		array.push({
-	// 			id: sample.getTime(),
-	// 			date: sample.getDate(),
-	// 			offmonth: next || prec,
-	// 			next,
-	// 			prec,
-	// 			today: isToday(sample),
-	// 			week: Math.floor(index / 7),
-	// 			month: sample.getMonth(),
-	// 			disabled: false,
-	// 			weekend: sample.getDay() == 0,
-	// 			name: format(sample, 'iiiii'),
-	// 			selected: start?.getTime() === sample.getTime()
-	// 		});
-	// 	}
-
-	// 	return array;
-	// };
-
-	// const days = $derived(
-	// 	generator(
-	// 		context_calendar.derived.data.pivote,
-	// 		context_calendar.derived.data.start ?? new Date(),
-	// 		context_calendar.derived.data.end
-	// 	)
-	// );
-
-	function monthDays(month: number, year = 2020) {
-		return new Date(year, month + 1, 0).getDate();
-	}
-
-	function scle(node: HTMLElement, { delay = 0, duration = 400, easing = backInOut }) {
-		return {
-			delay,
-			duration,
-			easing,
-			css: (_, u) => {
-				return `transform: scale(${u})`;
-			}
-		};
-	}
-</script>
-
-<HtmlAtom
-	class={cn('col-span-full grid h-full w-full grid-cols-subgrid', klass)}
-	{preset}
-	{...bodyProps}
->
-	{#each currentMonth?.days ?? [] as day (day.id)}
-		{#if children}
-			{@render children?.({ day })}
-		{:else}
-			<CalendarDay
-				{day}
-				onclick={() => {
-					console.log('day clicked', day.date);
-					calendarBond?.state.selectStart(new Date(day.date));
-				}}
-			/>
-		{/if}
-	{/each}
-</HtmlAtom>
+<script lang="ts">
+	import { backInOut } from 'svelte/easing';
+	import CalendarDay from './calendar-day.svelte';
+	import { CalendarBond } from './bond.svelte';
+	import { cn } from '../../utils';
+	import { HtmlAtom } from '../atom';
+
+	const calendarBond = CalendarBond.get();
+
+	const currentMonth = $derived(calendarBond?.state.props.currentMonth);
+
+	let {
+		class: klass = '',
+		weekday,
+		preset = 'calendar.body',
+		children = undefined,
+		...restProps
+	} = $props();
+
+	const bodyProps = $derived({
+		...calendarBond?.body(),
+		...restProps
+	});
+
+	// const generator = function (pivot: Date, start: Date, end?: Date) {
+	// 	const firstDay = new Date(pivot.getFullYear(), pivot.getMonth(), 1).getDay();
+	// 	const lastMonthDaysCount = monthDays(pivot.getMonth() - 1, pivot.getFullYear());
+	// 	const sample = new Date(
+	// 		pivot.getFullYear(),
+	// 		pivot.getMonth() - 1,
+	// 		lastMonthDaysCount - firstDay
+	// 	);
+
+	// 	const array = [];
+	// 	let next = false,
+	// 		prec = false;
+
+	// 	for (let index = 0; index < 42; index++) {
+	// 		sample.setDate(sample.getDate() + 1);
+
+	// 		prec = pivot.getMonth() > sample.getMonth() || pivot.getFullYear() > sample.getFullYear();
+	// 		next =
+	// 			(pivot.getMonth() < sample.getMonth() && pivot.getFullYear() === sample.getFullYear()) ||
+	// 			(pivot.getMonth() > sample.getMonth() && pivot.getFullYear() < sample.getFullYear());
+
+	// 		array.push({
+	// 			id: sample.getTime(),
+	// 			date: sample.getDate(),
+	// 			offmonth: next || prec,
+	// 			next,
+	// 			prec,
+	// 			today: isToday(sample),
+	// 			week: Math.floor(index / 7),
+	// 			month: sample.getMonth(),
+	// 			disabled: false,
+	// 			weekend: sample.getDay() == 0,
+	// 			name: format(sample, 'iiiii'),
+	// 			selected: start?.getTime() === sample.getTime()
+	// 		});
+	// 	}
+
+	// 	return array;
+	// };
+
+	// const days = $derived(
+	// 	generator(
+	// 		context_calendar.derived.data.pivote,
+	// 		context_calendar.derived.data.start ?? new Date(),
+	// 		context_calendar.derived.data.end
+	// 	)
+	// );
+
+	function monthDays(month: number, year = 2020) {
+		return new Date(year, month + 1, 0).getDate();
+	}
+
+	function scle(node: HTMLElement, { delay = 0, duration = 400, easing = backInOut }) {
+		return {
+			delay,
+			duration,
+			easing,
+			css: (_, u) => {
+				return `transform: scale(${u})`;
+			}
+		};
+	}
+</script>
+
+<HtmlAtom
+	class={cn('col-span-full grid h-full w-full grid-cols-subgrid', klass)}
+	{preset}
+	{...bodyProps}
+>
+	{#each currentMonth?.days ?? [] as day (day.id)}
+		{#if children}
+			{@render children?.({ day })}
+		{:else}
+			<CalendarDay
+				{day}
+				onclick={() => {
+					console.log('day clicked', day.date);
+					calendarBond?.state.selectStart(new Date(day.date));
+				}}
+			/>
+		{/if}
+	{/each}
+</HtmlAtom>

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

@@ -1,6 +1,5 @@
 <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';

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

@@ -7,7 +7,7 @@
 	const calendarBond = CalendarBond.get();
 	const currentMonth = $derived(calendarBond?.state.props.currentMonth);
 
-	let { class: klass = '', preset = 'calendar.header', children, ...restProps } = $props();
+	let { class: klass = '', preset = 'calendar.header', ...restProps } = $props();
 
 	const headerProps = $derived({
 		...calendarBond?.header(),
@@ -24,10 +24,6 @@
 	{...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}
+		<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;

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

@@ -27,8 +27,6 @@
 
 	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;

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,12 +8,7 @@
 </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">

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;
+}