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

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

@@ -2,150 +2,90 @@ import type { Snippet } from 'svelte';
 import type { DataGridBond } from './bond.svelte';
 import type { CheckboxProps } from '../checkbox/types';
 import type { Factory } from '../../types';
-import type { DataGridTrBond } from './tr/bond.svelte';
-import type { DataGridThBond } from './th/bond.svelte';
-import type { HtmlAtomProps, Base } from '../atom';
+import type { DataGridRowBond } from './row/bond.svelte';
+import type { DataGridColumnBond } from './column/bond.svelte';
+import type { HtmlAtomProps, Base, SnippetProps } from '../atom';
 import type { HtmlElementTagName } from '../element';
-import type { Override } from '../../types';
-/**
- * Extend this interface to add custom datagrid root properties in your application.
- */
-export interface DatagridRootExtendProps {
-}
-/**
- * Extend this interface to add custom datagrid header properties in your application.
- */
-export interface DatagridHeaderExtendProps {
-}
-/**
- * Extend this interface to add custom datagrid body properties in your application.
- */
-export interface DatagridBodyExtendProps {
-}
-/**
- * Extend this interface to add custom datagrid footer properties in your application.
- */
-export interface DatagridFooterExtendProps {
-}
-/**
- * Extend this interface to add custom datagrid th properties in your application.
- */
-export interface DatagridThExtendProps {
-}
-/**
- * Extend this interface to add custom datagrid td properties in your application.
- */
-export interface DatagridTdExtendProps {
-}
-/**
- * Extend this interface to add custom datagrid checkbox properties in your application.
- */
-export interface DatagridCheckboxExtendProps {
-}
-/**
- * Extend this interface to add custom datagrid tr properties in your application.
- */
-export interface DatagridTrExtendProps {
-}
-export interface DatagridContext<T = unknown> extends DataGridBond<T> {
-    [key: string]: unknown;
-}
-export type Direction = 'asc' | 'desc';
-export interface Row<T = unknown> {
-    value: string;
-    data: T;
-}
-export interface SelectedRows<T = unknown> {
-    [id: string]: T;
-}
-export type SortableType = string | (<T>(d: T) => string | number | boolean | Date);
+import type { Direction, SortableType, Override } from '../../types';
+export type { Direction, SortableType };
 export interface SortBy {
     id: string;
     direction: Direction;
     by?: SortableType;
 }
-export interface Column {
-    id: string;
-    name: () => string;
-    index: () => number;
-    sortable?: boolean | SortableType;
-    direction: Direction;
-    screen?: string;
-    width?: string;
-    hidden: () => boolean;
+export interface DatagridSnippetProps<T = unknown> extends SnippetProps {
+    datagrid: DataGridBond<T> | undefined;
 }
-export interface DatagridRootProps<T> extends DatagridRootExtendProps {
-    class?: string;
+export type DatagridChildren<T = unknown> = Snippet<[DatagridSnippetProps<T>]>;
+export interface DatagridColumnSnippetProps<T = unknown> extends SnippetProps {
+    column: DataGridColumnBond<T>;
+}
+export type DatagridColumnChildren<T = unknown> = Snippet<[DatagridColumnSnippetProps<T>]>;
+export interface DatagridRowSnippetProps<T = unknown> extends SnippetProps {
+    row: DataGridRowBond<T>;
+}
+export type DatagridRowChildren<T = unknown> = Snippet<[DatagridRowSnippetProps<T>]>;
+/** @deprecated Use `DatagridColumnSnippetProps` instead */
+export interface DatagridThSnippetProps<T = unknown> extends DatagridColumnSnippetProps<T> {
+    th: DataGridColumnBond<T>;
+}
+/** @deprecated Use `DatagridColumnChildren` instead */
+export type DatagridThChildren<T = unknown> = DatagridColumnChildren<T>;
+/** @deprecated Use `DatagridRowSnippetProps` instead */
+export interface DatagridTrSnippetProps<T = unknown> extends DatagridRowSnippetProps<T> {
+    tr: DataGridRowBond<T>;
+}
+/** @deprecated Use `DatagridRowChildren` instead */
+export type DatagridTrChildren<T = unknown> = DatagridRowChildren<T>;
+export interface DatagridRootProps<T = unknown, E extends HtmlElementTagName = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, DatagridChildren<T>> {
     template?: string;
     fallbackTemplate?: string;
     values?: string[];
-    readonly element?: HTMLElement;
-    children?: Snippet<[{
-        context: DatagridContext<T>;
-    }]>;
+    factory?: Factory<DataGridBond<T>>;
 }
-export interface DatagridHeaderProps<T> extends DatagridHeaderExtendProps {
-    class?: string;
-    readonly element?: HTMLElement;
-    children?: Snippet<[{
-        context: DatagridContext<T>;
-    }]>;
+export interface DatagridHeaderProps<T = unknown, E extends HtmlElementTagName = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, DatagridChildren<T>> {
 }
-export interface DatagridBodyProps<T, E extends HtmlElementTagName = 'div', B extends Base = Base> extends DatagridBodyExtendProps {
-    class?: string;
-    readonly element?: HTMLElement;
-    children?: Snippet<[{
-        context: DatagridContext<T>;
-    }]>;
+export interface DatagridBodyProps<T = unknown, E extends HtmlElementTagName = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, DatagridChildren<T>> {
 }
-export interface DatagridFooterProps<T> extends DatagridFooterExtendProps {
-    class?: string;
-    readonly element?: HTMLElement;
-    children?: Snippet<[{
-        context: DatagridContext<T>;
-    }]>;
+export interface DatagridFooterProps<T = unknown, E extends HtmlElementTagName = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, DatagridChildren<T>> {
 }
-export interface DatagridThProps<T = unknown, E extends HtmlElementTagName = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
-    children?: Snippet<[{
-        th: DatagridContext<T>;
-    }]>;
-}>, DatagridThExtendProps {
+export interface DatagridColumnProps<T = unknown, E extends HtmlElementTagName = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B, DatagridColumnChildren<T>>, {
+    children?: DatagridColumnChildren<T>;
+}> {
     id?: string;
-    class?: string;
     width?: string;
     direction?: Direction;
     screen?: string;
     sortable?: boolean | SortableType;
     hidden?: boolean;
-    factory?: () => DataGridThBond<T>;
+    factory?: () => DataGridColumnBond<T>;
+    onsort?: (event: CustomEvent, options: {
+        field?: SortableType;
+        direction: Direction;
+    }) => void;
 }
-export interface DatagridTdProps<T> extends DatagridTdExtendProps {
-    class?: string;
-    readonly element?: HTMLElement;
-    children?: Snippet<[{
-        context: DatagridContext<T>;
-    }]>;
+/** @deprecated Use `DatagridColumnProps` instead */
+export type DatagridThProps<T = unknown, E extends HtmlElementTagName = 'div', B extends Base = Base> = DatagridColumnProps<T, E, B>;
+export interface DatagridCellProps<T = unknown, E extends HtmlElementTagName = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, DatagridChildren<T>> {
     onclick?: (ev: Event, options: {
-        context?: DatagridContext<T>;
+        cell?: DataGridBond<T>;
     }) => void;
 }
-export interface DatagridCheckboxProps extends Omit<CheckboxProps, 'children'>, DatagridCheckboxExtendProps {
-    readonly element?: HTMLElement;
-    children?: Snippet<[{
-        context: DatagridContext;
-    }]>;
+/** @deprecated Use `DatagridCellProps` instead */
+export type DatagridTdProps<T = unknown, E extends HtmlElementTagName = 'div', B extends Base = Base> = DatagridCellProps<T, E, B>;
+export interface DatagridCheckboxProps extends Omit<CheckboxProps, 'children'> {
 }
-export interface DatagridTrProps<T, E extends HtmlElementTagName = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B>, {
-    children?: Snippet<[{
-        tr: DatagridContext<T>;
-    }]>;
-}>, DatagridTrExtendProps {
-    class?: string;
+export interface DatagridRowProps<T = unknown, E extends HtmlElementTagName = 'div', B extends Base = Base> extends Override<HtmlAtomProps<E, B, DatagridRowChildren<T>>, {
+    children?: DatagridRowChildren<T>;
+}> {
     value?: string;
     rows?: string;
+    header?: boolean;
     data?: T;
-    factory?: Factory<DataGridTrBond<T>>;
+    factory?: Factory<DataGridRowBond<T>>;
     onclick?: (ev: Event, options: {
-        tr?: DatagridContext<T>;
+        row?: DataGridRowBond<T>;
     }) => void;
 }
+/** @deprecated Use `DatagridRowProps` instead */
+export type DatagridTrProps<T = unknown, E extends HtmlElementTagName = 'div', B extends Base = Base> = DatagridRowProps<T, E, B>;

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

@@ -28,23 +28,11 @@ export declare class DatePickerBond<Props extends DatePickerBondProps = DatePick
         disabled: boolean;
         readonly: boolean;
         tabindex: number;
-        'aria-haspopup': string;
-        'data-kind': string;
-        onclick: (ev: PointerEvent) => void;
-        onkeydown: (ev: KeyboardEvent) => void;
     };
     content(): {
         id: string;
         role: string;
         'aria-label': string;
-        'aria-modal': boolean;
-        'aria-labelledby': string;
-        inert: boolean | undefined;
-        tabindex: number;
-        'data-atom': string;
-        'data-kind': string;
-        'data-active': boolean;
-        onkeydown: ((ev: KeyboardEvent) => void) | undefined;
     };
     clearButton(): {
         [x: symbol]: (node: HTMLElement) => void;

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

@@ -1,58 +1,58 @@
-<script lang="ts">
-	import { Content } from '../popover/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();
-
-	let {
-		class: klass = '',
-		preset = 'datepicker.calendar',
-		children: childrenProp,
-		Header = DatePickerHeader,
-		Weekdays = CalendarHeader,
-		Body = CalendarBody,
-		Day = CalendarDay,
-		Months = DatePickerMonths,
-		Years = DatePickerYears,
-		...restProps
-	}: DatePickerCalendarProps = $props();
-
-	function handleChange(_: CustomEvent, { range, pivote }: { range: CalendarRange; pivote: Date }) {
-		if (!datePickerBond) return;
-
-		datePickerBond.state.props.range = range;
-		datePickerBond.state.props.pivote = pivote;
-	}
-</script>
-
-<Content
-	class={['relative overflow-hidden p-0 max-w-[96svw] md:max-w-xs', klass]}
-	base={Root}
-	onchange={handleChange}
-	{preset}
-	{...restProps}
->
-	<HtmlAtom base={Header} class="col-span-full" />
-	<HtmlAtom base={Weekdays} class="border-0" />
-
-	<HtmlAtom base={Body}>
-		{#snippet children({ day }: { day: CalendarDayType })}
-			<Day {day} />
-		{/snippet}
-	</HtmlAtom>
-
-	<HtmlAtom base={Months} />
-	<HtmlAtom base={Years} />
-</Content>
+<script lang="ts">
+	import { Content } from '../popover/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();
+
+	let {
+		class: klass = '',
+		preset = 'datepicker.calendar',
+		children: childrenProp,
+		Header = DatePickerHeader,
+		Weekdays = CalendarHeader,
+		Body = CalendarBody,
+		Day = CalendarDay,
+		Months = DatePickerMonths,
+		Years = DatePickerYears,
+		...restProps
+	}: DatePickerCalendarProps = $props();
+
+	function handleChange(_: CustomEvent, { range, pivote }: { range: CalendarRange; pivote: Date }) {
+		if (!datePickerBond) return;
+
+		datePickerBond.state.props.range = range;
+		datePickerBond.state.props.pivote = pivote;
+	}
+</script>
+
+<Content
+	class={['relative overflow-hidden p-0 max-w-[96svw] md:max-w-xs', klass]}
+	base={Root}
+	onchange={handleChange}
+	{preset}
+	{...restProps}
+>
+	<HtmlAtom base={Header} class="col-span-full" />
+	<HtmlAtom base={Weekdays} class="border-0" />
+
+	<HtmlAtom base={Body}>
+		{#snippet children({ day }: { day: CalendarDayType })}
+			<Day {day} />
+		{/snippet}
+	</HtmlAtom>
+
+	<HtmlAtom base={Months} />
+	<HtmlAtom base={Years} />
+</Content>

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

@@ -121,7 +121,7 @@
 
 			<!-- Months Grid -->
 			<div class="grid flex-1 grid-cols-3 gap-1 px-2 pb-2">
-				{#each monthsGrid as month, index}
+				{#each monthsGrid as month, index (index)}
 					{@const isSelected = index === currentMonth}
 					<button
 						type="button"

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

@@ -1,96 +1,96 @@
-<script lang="ts">
-	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),
-		value = $bindable(undefined),
-		range = $bindable([undefined, undefined]),
-		pivote = $bindable(new Date()),
-		start = $bindable(startOfDay(new Date())),
-		end = $bindable(undefined),
-		min = undefined,
-		max = undefined,
-		type = 'single',
-		offset = 1,
-		factory = _factory,
-		children,
-		...restProps
-	}: DatePickerRootProps = $props();
-
-	const seed = {};
-
-	const bondProps = defineState<DatePickerBondProps>(
-		[
-			defineProperty(
-				'open',
-				() => open,
-				(v) => {
-					open = v;
-				}
-			),
-			defineProperty(
-				'range',
-				() => range,
-				(v: CalendarRange) => {
-					range = v;
-					value = v[0];
-				}
-			),
-			defineProperty(
-				'value',
-				() => range?.[0],
-				(v) => {
-					range[0] = v;
-				}
-			),
-			defineProperty(
-				'pivote',
-				() => pivote,
-				(v: Date) => (pivote = v)
-			),
-			defineProperty(
-				'start',
-				() => range[0],
-				(v: Date) => {
-					range[0] = v;
-				}
-			),
-			defineProperty(
-				'end',
-				() => range[1],
-				(v: Date | undefined) => {
-					range[1] = v;
-				}
-			),
-			defineProperty(
-				'min',
-				() => min,
-				(v: Date | undefined) => (min = v)
-			),
-			defineProperty(
-				'max',
-				() => max,
-				(v: Date | undefined) => (max = v)
-			),
-			defineProperty('type', () => type ?? 'single'),
-			defineProperty('rest', () => restProps)
-		],
-		() => seed
-	);
-
-	const bond = factory().share();
-
-	function _factory() {
-		const bondState = new DatePickerBondState(() => bondProps);
-		return new DatePickerBond(bondState);
-	}
-</script>
-
-<Root bind:open extend={bondProps} {offset} {...restProps}>
-	{@render children?.({ datePicker: bond })}
-</Root>
+<script lang="ts">
+	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),
+		value = $bindable(undefined),
+		range = $bindable([undefined, undefined]),
+		pivote = $bindable(new Date()),
+		start = $bindable(startOfDay(new Date())),
+		end = $bindable(undefined),
+		min = undefined,
+		max = undefined,
+		type = 'single',
+		offset = 1,
+		factory = _factory,
+		children,
+		...restProps
+	}: DatePickerRootProps = $props();
+
+	const seed = {};
+
+	const bondProps = defineState<DatePickerBondProps>(
+		[
+			defineProperty(
+				'open',
+				() => open,
+				(v) => {
+					open = v;
+				}
+			),
+			defineProperty(
+				'range',
+				() => range,
+				(v: CalendarRange) => {
+					range = v;
+					value = v[0];
+				}
+			),
+			defineProperty(
+				'value',
+				() => range?.[0],
+				(v) => {
+					range[0] = v;
+				}
+			),
+			defineProperty(
+				'pivote',
+				() => pivote,
+				(v: Date) => (pivote = v)
+			),
+			defineProperty(
+				'start',
+				() => range[0],
+				(v: Date) => {
+					range[0] = v;
+				}
+			),
+			defineProperty(
+				'end',
+				() => range[1],
+				(v: Date | undefined) => {
+					range[1] = v;
+				}
+			),
+			defineProperty(
+				'min',
+				() => min,
+				(v: Date | undefined) => (min = v)
+			),
+			defineProperty(
+				'max',
+				() => max,
+				(v: Date | undefined) => (max = v)
+			),
+			defineProperty('type', () => type ?? 'single'),
+			defineProperty('rest', () => restProps)
+		],
+		() => seed
+	);
+
+	const bond = factory().share();
+
+	function _factory() {
+		const bondState = new DatePickerBondState(() => bondProps);
+		return new DatePickerBond(bondState);
+	}
+</script>
+
+<Root bind:open extend={bondProps} {offset} {...restProps}>
+	{@render children?.({ datePicker: bond })}
+</Root>

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

@@ -1,4 +1,4 @@
 import type { DatePickerRootProps } from './types';
-declare const DatePickerRoot: import("svelte").Component<DatePickerRootProps, {}, "value" | "end" | "range" | "open" | "start" | "pivote">;
+declare const DatePickerRoot: import("svelte").Component<DatePickerRootProps, {}, "value" | "end" | "open" | "start" | "range" | "pivote">;
 type DatePickerRoot = ReturnType<typeof DatePickerRoot>;
 export default DatePickerRoot;

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

@@ -182,7 +182,7 @@
 
 			<!-- Years Grid -->
 			<div class="grid flex-1 grid-cols-4 gap-1 px-2 py-2">
-				{#each yearsGrid as year}
+				{#each yearsGrid as year, i (i)}
 					{@const isSelected = year === pivote.getFullYear()}
 					{@const isCurrent = year === currentYear}
 					<button

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

@@ -1,7 +1,12 @@
 import type { Component, Snippet } from 'svelte';
+import type { SnippetProps } from '../atom';
 import type { Day, CalendarRange } from '../calendar/types';
 import type { DatePickerBond } from './bond.svelte';
 import type { Factory } from '../../types';
+export interface DatePickerSnippetProps extends SnippetProps {
+    datePicker: DatePickerBond;
+}
+export type DatePickerChildren = Snippet<[DatePickerSnippetProps]>;
 export interface DatePickerCalendarProps {
     class?: string;
     preset?: string;
@@ -46,8 +51,6 @@ export interface DatePickerRootProps {
     type?: 'range' | 'single';
     offset?: number;
     factory?: Factory<DatePickerBond>;
-    children?: Snippet<[{
-        datePicker: DatePickerBond;
-    }]>;
+    children?: DatePickerChildren;
     [key: string]: unknown;
 }

package/dist/components/dialog/atoms.d.ts

@@ -2,5 +2,5 @@ export { default as Root } from './dialog-root.svelte';
 export { default as Header } from './dialog-header.svelte';
 export { default as Body } from './dialog-body.svelte';
 export { default as Footer } from './dialog-footer.svelte';
-export { default as CloseButton } from './dialog-close-button.svelte';
+export { default as CloseButton } from './dialog-close.svelte';
 export { default as Content } from './dialog-content.svelte';

package/dist/components/dialog/atoms.js

@@ -2,5 +2,5 @@ export { default as Root } from './dialog-root.svelte';
 export { default as Header } from './dialog-header.svelte';
 export { default as Body } from './dialog-body.svelte';
 export { default as Footer } from './dialog-footer.svelte';
-export { default as CloseButton } from './dialog-close-button.svelte';
+export { default as CloseButton } from './dialog-close.svelte';
 export { default as Content } from './dialog-content.svelte';