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

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

@@ -1,59 +1,59 @@
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap, B extends Base = Base">
-	import { defineProperty, defineState } from '../../utils';
-	import { HtmlAtom, type Base } from '../atom';
-	import { DataGridBond, DataGridBondState, type DataGridStateProps } from './bond.svelte';
-	import type { DatagridRootProps } from './types';
-
-	import './datagrid.css';
-
-	let {
-		class: klass = '',
-		values = $bindable([]),
-		template = undefined,
-		data = [],
-		factory = _factory,
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: DatagridRootProps<T> = $props();
-
-	const bondProps = defineState<DataGridStateProps<T>>([
-		defineProperty('template', () => template),
-		defineProperty(
-			'values',
-			() => values,
-			(v) => (values = v)
-		)
-	]);
-	const bond = factory(bondProps).share();
-
-	function _factory(props: typeof bondProps) {
-		const dataGridState = new DataGridBondState(() => props);
-		return new DataGridBond(dataGridState);
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="datagrid"
-	class={['border-border', 'datagrid-root w-full gap-x-0 gap-y-0', '$preset', klass]}
-	style="--template-columns:{bond.state.template}"
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	{...restProps}
->
-	{@render children?.({ datagrid: bond })}
-</HtmlAtom>
+<script lang="ts" generics="T extends keyof HTMLElementTagNameMap, B extends Base = Base">
+	import { defineProperty, defineState } from '../../utils';
+	import { HtmlAtom, type Base } from '../atom';
+	import { DataGridBond, DataGridBondState, type DataGridStateProps } from './bond.svelte';
+	import type { DatagridRootProps } from './types';
+
+	import './datagrid.css';
+
+	let {
+		class: klass = '',
+		values = $bindable([]),
+		template = undefined,
+		fallbackTemplate = 'auto',
+		factory = _factory,
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: DatagridRootProps<T> = $props();
+
+	const bondProps = defineState<DataGridStateProps<T>>([
+		defineProperty('template', () => template),
+		defineProperty(
+			'values',
+			() => values,
+			(v) => (values = v)
+		)
+	]);
+	const bond = factory(bondProps).share();
+
+	function _factory(props: typeof bondProps) {
+		const dataGridState = new DataGridBondState(() => props);
+		return new DataGridBond(dataGridState);
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="datagrid"
+	class={['border-border', 'datagrid-root w-full gap-x-0 gap-y-0', '$preset', klass]}
+	style="--template-columns:{bond.state.template ?? fallbackTemplate}"
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	{...restProps}
+>
+	{@render children?.({ datagrid: bond })}
+</HtmlAtom>

package/dist/components/datagrid/datagrid.css

@@ -1,47 +1,5 @@
-.datagrid-root {
-	display: grid;
-	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;
-	}
-}
+.datagrid-root {
+	display: grid;
+	grid-auto-flow: row;
+	grid-template-columns: var(--template-columns, auto);
+}

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

@@ -77,8 +77,8 @@ export interface Column {
 export interface DatagridRootProps<T> extends DatagridRootExtendProps {
     class?: string;
     template?: string;
+    fallbackTemplate?: string;
     values?: string[];
-    data?: T[];
     readonly element?: HTMLElement;
     children?: Snippet<[{
         context: DatagridContext<T>;

package/dist/components/date-picker/atoms.d.ts

@@ -1,7 +1,3 @@
 export { Arrow, Indicator, Trigger } from '../popover/atoms';
-export { Body, Day, Header as WeekDays, WeekDay } from '../calendar/atoms';
 export { default as Root } from './date-picker-root.svelte';
 export { default as Calendar } from './date-picker-calendar.svelte';
-export { default as Header } from './date-picker-header.svelte';
-export { default as Years } from './date-picker-years.svelte';
-export { default as Months } from './date-picker-months.svelte';

package/dist/components/date-picker/atoms.js

@@ -1,7 +1,3 @@
 export { Arrow, Indicator, Trigger } from '../popover/atoms';
-export { Body, Day, Header as WeekDays, WeekDay } from '../calendar/atoms';
 export { default as Root } from './date-picker-root.svelte';
 export { default as Calendar } from './date-picker-calendar.svelte';
-export { default as Header } from './date-picker-header.svelte';
-export { default as Years } from './date-picker-years.svelte';
-export { default as Months } from './date-picker-months.svelte';

package/dist/components/date-picker/date-picker-calendar.svelte

@@ -1,7 +1,18 @@
 <script lang="ts">
 	import { Content } from '../popover/atoms';
-	import { Root } from '../calendar/atoms';
+	import {
+		Root,
+		Header as CalendarHeader,
+		Body as CalendarBody,
+		Day as CalendarDay
+	} from '../calendar/atoms';
 	import { DatePickerBond } from './bond.svelte';
+	import DatePickerHeader from './date-picker-header.svelte';
+	import DatePickerMonths from './date-picker-months.svelte';
+	import DatePickerYears from './date-picker-years.svelte';
+	import { HtmlAtom } from '../atom';
+	import type { CalendarRange, Day as CalendarDayType } from '../calendar/types';
+	import type { DatePickerCalendarProps } from './types';
 
 	const datePickerBond = DatePickerBond.get();
 	const datePickerBondProps = $derived(datePickerBond?.state.props);
@@ -9,9 +20,15 @@
 	let {
 		class: klass = '',
 		preset = 'datepicker.calendar',
-		children: datePickerChildren,
+		children: childrenProp,
+		Header = DatePickerHeader,
+		Weekdays = CalendarHeader,
+		Body = CalendarBody,
+		Day = CalendarDay,
+		Months = DatePickerMonths,
+		Years = DatePickerYears,
 		...restProps
-	} = $props();
+	}: DatePickerCalendarProps = $props();
 
 	const calendarProps = $derived({
 		...datePickerBond?.content(),
@@ -19,7 +36,7 @@
 		...restProps
 	});
 
-	function handleChange(ev: CustomEvent, { range, pivote }) {
+	function handleChange(_: CustomEvent, { range, pivote }: { range: CalendarRange; pivote: Date }) {
 		if (!datePickerBond) return;
 
 		datePickerBond.state.props.range = range;
@@ -34,9 +51,17 @@
 	{preset}
 	{...calendarProps}
 >
-	{#snippet children({ calendar })}
-		{@render datePickerChildren?.({
-			datePicker: datePickerBond
-		})}
-	{/snippet}
+	<HtmlAtom base={Header} class="col-span-full" />
+	<HtmlAtom base={Weekdays} />
+
+	<HtmlAtom base={Body}>
+		{#snippet children({ day }: { day: CalendarDayType })}
+			<HtmlAtom base={Day} {day} class="flex items-center justify-center">
+				<span class="value">{day.dayOfMonth}</span>
+			</HtmlAtom>
+		{/snippet}
+	</HtmlAtom>
+
+	<HtmlAtom base={Months} />
+	<HtmlAtom base={Years} />
 </Content>

package/dist/components/date-picker/date-picker-calendar.svelte.d.ts

@@ -1,7 +1,4 @@
-declare const DatePickerCalendar: import("svelte").Component<{
-    class?: string;
-    preset?: string;
-    children: any;
-} & Record<string, any>, {}, "">;
+import type { DatePickerCalendarProps } from './types';
+declare const DatePickerCalendar: import("svelte").Component<DatePickerCalendarProps, {}, "">;
 type DatePickerCalendar = ReturnType<typeof DatePickerCalendar>;
 export default DatePickerCalendar;

package/dist/components/date-picker/date-picker-header.svelte

@@ -3,11 +3,17 @@
 	import { DatePickerBond } from './bond.svelte';
 	import { CalendarBond } from '../calendar/bond.svelte';
 	import { Icon } from '../icon';
+	import type { DatePickerHeaderProps } from './types';
 
 	const datePickerBond = DatePickerBond.get();
 	const calendarBond = CalendarBond.get();
 
-	let { class: klass = '', preset = 'datepicker.header', children, ...restProps } = $props();
+	let {
+		class: klass = '',
+		preset = 'datepicker.header',
+		children,
+		...restProps
+	}: DatePickerHeaderProps = $props();
 
 	const calendarBondProps = $derived(datePickerBond?.state?.props);
 
@@ -37,69 +43,58 @@
 	{preset}
 	{...restProps}
 >
-	{#if children}
-		{@render children?.({
-			datePicker: datePickerBond,
-			calendar: calendarBond,
-			monthName,
-			year,
-			onPrevious: handlePreviousMonth,
-			onNext: handleNextMonth
-		})}
-	{:else}
-		<!-- Previous Month Button -->
-		<button
-			type="button"
-			class="hover:bg-foreground/10 active:bg-foreground/20 flex size-8 cursor-pointer items-center justify-center rounded-md transition-colors"
-			onclick={handlePreviousMonth}
-			aria-label="Previous month"
-		>
-			<Icon class="size-5">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="size-full"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					stroke-width="2"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-				>
-					<path d="M15 18l-6-6 6-6" />
-				</svg>
-			</Icon>
-		</button>
+	<!-- Previous Month Button -->
+	<button
+		type="button"
+		class="hover:bg-foreground/10 active:bg-foreground/20 flex size-8 cursor-pointer items-center justify-center rounded-md transition-colors"
+		onclick={handlePreviousMonth}
+		aria-label="Previous month"
+	>
+		<Icon class="size-5">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="size-full"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<path d="M15 18l-6-6 6-6" />
+			</svg>
+		</Icon>
+	</button>
 
-		<!-- Month and Year Display -->
-		<button
-			class="text-foreground h-full flex-1 cursor-pointer text-center text-sm font-semibold"
-			onclick={handleMonthPicker}
-		>
-			{monthName}
-			{year}
-		</button>
+	<!-- Month and Year Display -->
+	<button
+		class="text-foreground h-full flex-1 cursor-pointer text-center text-sm font-semibold"
+		onclick={handleMonthPicker}
+	>
+		{monthName}
+		{year}
+	</button>
 
-		<!-- Next Month Button -->
-		<button
-			type="button"
-			class="hover:bg-foreground/10 active:bg-foreground/20 flex size-8 cursor-pointer items-center justify-center rounded-md transition-colors"
-			onclick={handleNextMonth}
-			aria-label="Next month"
-		>
-			<Icon class="size-5">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="size-full"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					stroke-width="2"
-					stroke-linecap="round"
-					stroke-linejoin="round"
-				>
-					<path d="M9 18l6-6-6-6" />
-				</svg>
-			</Icon>
-		</button>
-	{/if}
+	<!-- Next Month Button -->
+	<button
+		type="button"
+		class="hover:bg-foreground/10 active:bg-foreground/20 flex size-8 cursor-pointer items-center justify-center rounded-md transition-colors"
+		onclick={handleNextMonth}
+		aria-label="Next month"
+	>
+		<Icon class="size-5">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="size-full"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<path d="M9 18l6-6-6-6" />
+			</svg>
+		</Icon>
+	</button>
 </HtmlAtom>

package/dist/components/date-picker/date-picker-header.svelte.d.ts

@@ -1,7 +1,4 @@
-declare const DatePickerHeader: import("svelte").Component<{
-    class?: string;
-    preset?: string;
-    children: any;
-} & Record<string, any>, {}, "">;
+import type { DatePickerHeaderProps } from './types';
+declare const DatePickerHeader: import("svelte").Component<DatePickerHeaderProps, {}, "">;
 type DatePickerHeader = ReturnType<typeof DatePickerHeader>;
 export default DatePickerHeader;

package/dist/components/date-picker/date-picker-months.svelte

@@ -1,14 +1,12 @@
 <script lang="ts">
-	import { HtmlAtom } from '../atom';
-	import { PopoverBond } from '../popover';
-	import { DatePickerBond } from './bond.svelte';
+	import { animate } from 'motion';
 	import { getYear, getMonth, setMonth } from 'date-fns';
 	import { cn } from '../../utils';
-	import { animate } from 'motion';
+	import { HtmlAtom } from '../atom';
+	import { DatePickerBond } from './bond.svelte';
+	import type { DatePickerMonthsProps } from './types';
 
-	const popover = PopoverBond.get();
 	const datePicker = DatePickerBond.get();
-	const calendar = datePicker.calendar;
 
 	const pivote = $derived(datePicker?.state.props.pivote ?? new Date());
 
@@ -31,7 +29,12 @@
 		'Dec'
 	];
 
-	let { class: klass = '', preset = 'datepicker.months', children, ...restProps } = $props();
+	let {
+		class: klass = '',
+		preset = 'datepicker.months',
+		children,
+		...restProps
+	}: DatePickerMonthsProps = $props();
 
 	function enter(node: HTMLElement) {
 		animate(
@@ -104,47 +107,36 @@
 		{...restProps}
 	>
 		<HtmlAtom class="flex flex-1 flex-col gap-2" {enter} {exit}>
-			{#if children}
-				{@render children?.({
-					calendar,
-					popover,
-					currentYear,
-					currentMonth,
-					monthsGrid,
-					onMonthSelect: handleMonthSelect
-				})}
-			{:else}
-				<!-- Year Display -->
-				<nav
-					class="border-border text-foreground flex h-12 items-center justify-center gap-2 border-b px-2 py-2"
+			<!-- Year Display -->
+			<nav
+				class="border-border text-foreground flex h-12 items-center justify-center gap-2 border-b px-2 py-2"
+			>
+				<button
+					class="text-foreground cursor-pointer text-center text-sm font-semibold"
+					onclick={handleYearPicker}
 				>
+					{currentYear}
+				</button>
+			</nav>
+
+			<!-- Months Grid -->
+			<div class="grid flex-1 grid-cols-3 gap-1 px-2 pb-2">
+				{#each monthsGrid as month, index}
+					{@const isSelected = index === currentMonth}
 					<button
-						class="text-foreground cursor-pointer text-center text-sm font-semibold"
-						onclick={handleYearPicker}
+						type="button"
+						class={cn(
+							'hover:bg-foreground/10 active:bg-foreground/20 rounded-md px-3 py-2 text-sm transition-colors',
+							isSelected && 'bg-primary text-primary-foreground hover:bg-primary/90'
+						)}
+						onclick={() => handleMonthSelect(index)}
+						aria-label="Select {month}"
+						aria-current={isSelected ? 'date' : undefined}
 					>
-						{currentYear}
+						{month}
 					</button>
-				</nav>
-
-				<!-- Months Grid -->
-				<div class="grid flex-1 grid-cols-3 gap-1 px-2 pb-2">
-					{#each monthsGrid as month, index}
-						{@const isSelected = index === currentMonth}
-						<button
-							type="button"
-							class={cn(
-								'hover:bg-foreground/10 active:bg-foreground/20 rounded-md px-3 py-2 text-sm transition-colors',
-								isSelected && 'bg-primary text-primary-foreground hover:bg-primary/90'
-							)}
-							onclick={() => handleMonthSelect(index)}
-							aria-label="Select {month}"
-							aria-current={isSelected ? 'date' : undefined}
-						>
-							{month}
-						</button>
-					{/each}
-				</div>
-			{/if}
+				{/each}
+			</div>
 		</HtmlAtom>
 	</HtmlAtom>
 {/if}

package/dist/components/date-picker/date-picker-months.svelte.d.ts

@@ -1,7 +1,4 @@
-declare const DatePickerMonths: import("svelte").Component<{
-    class?: string;
-    preset?: string;
-    children: any;
-} & Record<string, any>, {}, "">;
+import type { DatePickerMonthsProps } from './types';
+declare const DatePickerMonths: import("svelte").Component<DatePickerMonthsProps, {}, "">;
 type DatePickerMonths = ReturnType<typeof DatePickerMonths>;
 export default DatePickerMonths;

package/dist/components/date-picker/date-picker-root.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
-	import { defineProperty, defineState } from '../../utils';
 	import { startOfDay } from 'date-fns';
+	import { defineProperty, defineState } from '../../utils';
 	import { Root } from '../popover/atoms';
 	import type { CalendarRange } from '../calendar/types';
 	import { DatePickerBond, DatePickerBondState, type DatePickerBondProps } from './bond.svelte';
+	import type { DatePickerRootProps } from './types';
 
 	let {
 		open = $bindable(false),
@@ -19,7 +20,7 @@
 		factory = _factory,
 		children,
 		...restProps
-	} = $props();
+	}: DatePickerRootProps = $props();
 
 	const seed = {};
 

package/dist/components/date-picker/date-picker-root.svelte.d.ts

@@ -1,17 +1,4 @@
-import { DatePickerBond, DatePickerBondState, type DatePickerBondProps } from './bond.svelte';
-declare const DatePickerRoot: import("svelte").Component<{
-    open?: boolean;
-    value?: any;
-    range?: any[];
-    pivote?: any;
-    start?: any;
-    end?: any;
-    min?: any;
-    max?: any;
-    type?: string;
-    offset?: number;
-    factory?: () => DatePickerBond<DatePickerBondProps, DatePickerBondState<DatePickerBondProps>>;
-    children: any;
-} & Record<string, any>, {}, "value" | "end" | "range" | "open" | "start" | "pivote">;
+import type { DatePickerRootProps } from './types';
+declare const DatePickerRoot: import("svelte").Component<DatePickerRootProps, {}, "value" | "end" | "range" | "open" | "start" | "pivote">;
 type DatePickerRoot = ReturnType<typeof DatePickerRoot>;
 export default DatePickerRoot;