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

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

@@ -0,0 +1,64 @@
+<script lang="ts" generics="T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { untrack } from 'svelte';
+	import { nanoid } from 'nanoid';
+	import { defineProperty, defineState } from '../../../utils';
+	import { HtmlAtom, type Base } from '../../atom';
+	import { DataGridRowBond, DataGridRowBondState, type DataGridRowBondProps } from './bond.svelte';
+	import type { DatagridRowProps } from '../types';
+    import './datagrid-row.css';
+
+	let {
+		class: klass = '',
+		value = nanoid(),
+		rows = 'auto',
+		data = undefined,
+		header = false,
+		factory = _factory,
+		children = undefined,
+		onclick = undefined,
+		...restProps
+	}: DatagridRowProps<T, E, B> = $props();
+
+	const bondProps = defineState<DataGridRowBondProps<T>>([
+		defineProperty('data', () => data),
+		defineProperty('value', () => value),
+		defineProperty('header', () => header)
+	]);
+
+	const bond = untrack(() => factory(bondProps)).share();
+
+	const isHeader = $derived(bond.state.isHeader);
+	const isSelected = $derived(bond.state.isSelected);
+
+	const rowProps = $derived({ ...bond.root().spread, ...restProps });
+
+	const unmount = untrack(() => (isHeader ? undefined : bond.mount()));
+	$effect(() => unmount);
+
+	function _factory(props: typeof bondProps) {
+		const state = new DataGridRowBondState<T>(() => props);
+		return new DataGridRowBond<T>(state);
+	}
+
+	function handleClick(ev: Event) {
+		onclick?.(ev, { row: bond });
+	}
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="datagrid.row"
+	class={[
+		'datagrid-row border-border items-center border-b bg-transparent',
+		!isHeader && 'hover:bg-foreground/2 active:bg-foreground/4 transition-colors duration-100',
+		isHeader && 'header-tr',
+		isSelected && 'bg-primary/2 hover:bg-primary/4 active:bg-primary/6',
+		'$preset',
+		klass
+	]}
+	style="--rows:{rows}"
+	onclick={handleClick}
+	{...rowProps}
+>
+	{@render children?.({ row: bond })}
+</HtmlAtom>

package/dist/components/datagrid/row/datagrid-row.svelte.d.ts

@@ -0,0 +1,27 @@
+import { type Base } from '../../atom';
+import type { DatagridRowProps } from '../types';
+import './datagrid-row.css';
+declare function $$render<T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
+    props: DatagridRowProps<T, E, B>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> {
+    props(): ReturnType<typeof $$render<T, E, B>>['props'];
+    events(): ReturnType<typeof $$render<T, E, B>>['events'];
+    slots(): ReturnType<typeof $$render<T, E, B>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, E, B>['props']>, ReturnType<__sveltets_Render<T, E, B>['events']>, ReturnType<__sveltets_Render<T, E, B>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, E, B>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, E, B>['exports']>;
+    <T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<T, E, B>['props']> & {}): ReturnType<__sveltets_Render<T, E, B>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
+}
+declare const DatagridRow: $$IsomorphicComponent;
+type DatagridRow<T = unknown, E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof DatagridRow<T, E, B>>;
+export default DatagridRow;

package/dist/components/datagrid/row/index.d.ts

@@ -0,0 +1,4 @@
+/** @deprecated Use `Row` instead */
+export { default as Tr } from './datagrid-row.svelte';
+export * from './bond.svelte';
+export { default as Row } from './datagrid-row.svelte';

package/dist/components/datagrid/row/index.js

@@ -0,0 +1,4 @@
+/** @deprecated Use `Row` instead */
+export { default as Tr } from './datagrid-row.svelte';
+export * from './bond.svelte';
+export { default as Row } from './datagrid-row.svelte';

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;