Merge pull request #23 from svelte-atoms/fix/improvements-013

fix: improve TypeScript props and other stability fixes

Author: ryu-man

README.md

@@ -14,11 +14,7 @@
 
 ### 🧱 **Bond Architecture**
 
-Built around the concept of "Bonds" - self-contained, reusable state management classes that encapsulate component state and DOM interactions. Each component uses the Bond pattern for consistent, predictable behavior across complex interactions. Simple components like Button don't require the Bond pattern as they have minimal state management needs.
-
-### 🔗 **Context-Driven Communication**
-
-Components seamlessly communicate through Svelte's context API using standardized static methods (`Bond.get()` / `Bond.set()`) of the Bond class, enabling powerful parent-child relationships without prop drilling.
+Self-contained state management classes that encapsulate component logic and DOM interactions. Bonds communicate through Svelte's context API using standardized `Bond.get()` / `Bond.set()` methods, enabling parent-child relationships without prop drilling.
 
 ### ♿ **Accessibility First**
 

llm/variants.md

@@ -251,7 +251,7 @@ setPreset({
 **How it works:**
 
 1. `defineVariants(config)` → returns a function
-2. You pass this function to `HtmlAtom` via `{variants}`  
+2. You pass this function to `HtmlAtom` via `{variants}`
 3. `HtmlAtom` internally calls `variants(bond, restProps)`
 4. The function returns `{ class: [...], ...attributes }`
 5. `HtmlAtom` applies these to the rendered element
@@ -519,7 +519,7 @@ Combine global preset variants with component-specific variants:
 >
   {@render children?.()}
 </HtmlAtom>
-````
+```
 
 ### Example 4: Alert Component with Compound Variants
 
@@ -664,9 +664,7 @@ Combine global preset variants with component-specific variants:
 </script>
 
 <!-- Pass the variant function to HtmlAtom -->
-<HtmlAtom {variants} as="button" {variant} {size} {...props}>
-	Click me
-</HtmlAtom>
+<HtmlAtom {variants} as="button" {variant} {size} {...props}>Click me</HtmlAtom>
 ```
 
 ### Benefits After Migration

src/lib/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>

src/lib/components/calendar/calendar-day.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { isBefore, isSameDay, isWithinInterval } from 'date-fns';
-	import { cn } from '$svelte-atoms/core/utils';
 	import { CalendarBond } from './bond.svelte';
 	import type { CalendarDayProps } from './types';
 	import { HtmlAtom } from '../atom';

src/lib/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>

src/lib/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;

src/lib/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">

src/lib/components/calendar/types.ts

@@ -1,5 +1,4 @@
 import type { Snippet } from 'svelte';
-import type { CalendarContext } from './context';
 import type { Factory } from '$svelte-atoms/core/types';
 import type { CalendarBond } from './bond.svelte';
 

src/lib/components/datagrid/datagrid-root.svelte

@@ -10,7 +10,7 @@
 		class: klass = '',
 		values = $bindable([]),
 		template = undefined,
-		data = [],
+		fallbackTemplate = 'auto',
 		factory = _factory,
 		children = undefined,
 		onmount = undefined,
@@ -46,7 +46,7 @@
 	{bond}
 	preset="datagrid"
 	class={['border-border', 'datagrid-root w-full gap-x-0 gap-y-0', '$preset', klass]}
-	style="--template-columns:{bond.state.template}"
+	style="--template-columns:{bond.state.template ?? fallbackTemplate}"
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}

src/lib/components/datagrid/datagrid.css

@@ -3,45 +3,3 @@
 	grid-auto-flow: row;
 	grid-template-columns: var(--template-columns, auto);
 }
-
-.cas-[data-screen='sm'] {
-	@media (max-width: var(--screens-sm)) {
-		display: none;
-	}
-}
-
-.cas-[data-screen='md'] {
-	@media (max-width: var(--screens-md)) {
-		display: none;
-	}
-}
-
-.cas-[data-screen='sd'] {
-	@media (max-width: var(--screens-sd)) {
-		display: none;
-	}
-}
-
-.cas-[data-screen='lg'] {
-	@media (max-width: var(--screens-lg)) {
-		display: none;
-	}
-}
-
-.cas-[data-screen='xl'] {
-	@media (max-width: var(--screens-xl)) {
-		display: none;
-	}
-}
-
-.cas-[data-screen='2xl'] {
-	@media (max-width: var(--screens-2xl)) {
-		display: none;
-	}
-}
-
-.cas-[data-screen='3xl'] {
-	@media (max-width: var(--screens-3xl)) {
-		display: none;
-	}
-}