ui-ingredients 0.0.19 → 0.0.20

package/dist/date-picker/month-table-cell-trigger.svelte.d.ts

@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: {
+    (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const MonthTableCellTrigger: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const MonthTableCellTrigger: $$__sveltets_2_IsomorphicComponent<DatePickerMonthTableCellTriggerProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type MonthTableCellTrigger = InstanceType<typeof MonthTableCellTrigger>;
 export default MonthTableCellTrigger;

package/dist/date-picker/month-table-cell.svelte

@@ -1,3 +1,41 @@
-<script lang="ts" module></script>
+<script lang="ts" module>
+  import type {Assign, HtmlProps} from '../types.js';
+  import type {TableCellProps, TableCellState} from '@zag-js/date-picker';
+  import type {Snippet} from 'svelte';
 
-<script lang="ts"></script>
+  export interface DatePickerMonthTableCellProps
+    extends Assign<Omit<HtmlProps<'div'>, 'children'>, TableCellProps> {
+    children?: Snippet<[state: TableCellState]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {datePickerContext, datePickerTableCellPropsContext} from './context.svelte.js';
+
+  let {
+    /**/
+    value,
+    disabled,
+    columns,
+    children,
+    ...props
+  }: DatePickerMonthTableCellProps = $props();
+
+  let context = datePickerContext.get();
+
+  let tableCellProps: TableCellProps = $derived({
+    value,
+    disabled,
+    columns,
+  });
+
+  let state = $derived(context.getMonthTableCellState(tableCellProps));
+  let attrs = $derived(mergeProps(props, context.getMonthTableCellProps(tableCellProps)));
+
+  datePickerTableCellPropsContext.set(() => tableCellProps);
+</script>
+
+<div {...attrs}>
+  {@render children?.(state)}
+</div>

package/dist/date-picker/month-table-cell.svelte.d.ts

@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: {
+    (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const MonthTableCell: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const MonthTableCell: $$__sveltets_2_IsomorphicComponent<DatePickerMonthTableCellProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type MonthTableCell = InstanceType<typeof MonthTableCell>;
 export default MonthTableCell;

package/dist/date-picker/next-trigger.svelte

@@ -1,3 +1,22 @@
-<script lang="ts" module></script>
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-<script lang="ts"></script>
+  export interface DatePickerNextTriggerProps extends HtmlProps<'button'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {datePickerContext, datePickerViewPropsContext} from './context.svelte.js';
+
+  let {children, ...props}: DatePickerNextTriggerProps = $props();
+
+  let context = datePickerContext.get();
+
+  let viewProps = datePickerViewPropsContext.get();
+
+  let attrs = $derived(mergeProps(props, context.getNextTriggerProps(viewProps)));
+</script>
+
+<button type="button" {...attrs}>
+  {@render children?.()}
+</button>

package/dist/date-picker/next-trigger.svelte.d.ts

@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: {
+    (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const NextTrigger: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const NextTrigger: $$__sveltets_2_IsomorphicComponent<DatePickerNextTriggerProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type NextTrigger = InstanceType<typeof NextTrigger>;
 export default NextTrigger;

package/dist/date-picker/positioner.svelte

@@ -1,3 +1,20 @@
-<script lang="ts" module></script>
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-<script lang="ts"></script>
+  export interface DatePickerPositionerProps extends HtmlProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {datePickerContext} from './context.svelte.js';
+
+  let {children, ...props}: DatePickerPositionerProps = $props();
+
+  let context = datePickerContext.get();
+
+  let attrs = $derived(mergeProps(props, context.getPositionerProps()));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/date-picker/positioner.svelte.d.ts

@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: {
+    (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Positioner: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const Positioner: $$__sveltets_2_IsomorphicComponent<DatePickerPositionerProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type Positioner = InstanceType<typeof Positioner>;
 export default Positioner;

package/dist/date-picker/preset-trigger.svelte

@@ -1,3 +1,22 @@
-<script lang="ts" module></script>
+<script lang="ts" module>
+  import type {Assign, HtmlProps} from '../types.js';
+  import type {PresetTriggerProps} from '@zag-js/date-picker';
 
-<script lang="ts"></script>
+  export interface DatePickerPresetTriggerProps
+    extends Assign<HtmlProps<'button'>, PresetTriggerProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {datePickerContext} from './context.svelte.js';
+
+  let {value, children, ...props}: DatePickerPresetTriggerProps = $props();
+
+  let context = datePickerContext.get();
+
+  let attrs = $derived(mergeProps(props, context.getPresetTriggerProps({value})));
+</script>
+
+<button type="button" {...attrs}>
+  {@render children?.()}
+</button>

package/dist/date-picker/preset-trigger.svelte.d.ts

@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: {
+    (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const PresetTrigger: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const PresetTrigger: $$__sveltets_2_IsomorphicComponent<DatePickerPresetTriggerProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type PresetTrigger = InstanceType<typeof PresetTrigger>;
 export default PresetTrigger;

package/dist/date-picker/prev-trigger.svelte

@@ -1,3 +1,22 @@
-<script lang="ts" module></script>
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-<script lang="ts"></script>
+  export interface DatePickerPrevTriggerProps extends HtmlProps<'button'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {datePickerContext, datePickerViewPropsContext} from './context.svelte.js';
+
+  let {children, ...props}: DatePickerPrevTriggerProps = $props();
+
+  let context = datePickerContext.get();
+
+  let viewProps = datePickerViewPropsContext.get();
+
+  let attrs = $derived(mergeProps(props, context.getPrevTriggerProps(viewProps)));
+</script>
+
+<button type="button" {...attrs}>
+  {@render children?.()}
+</button>

package/dist/date-picker/prev-trigger.svelte.d.ts

@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: {
+    (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const PrevTrigger: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const PrevTrigger: $$__sveltets_2_IsomorphicComponent<DatePickerPrevTriggerProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type PrevTrigger = InstanceType<typeof PrevTrigger>;
 export default PrevTrigger;

package/dist/date-picker/range-text.svelte

@@ -1,3 +1,24 @@
-<script lang="ts" module></script>
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-<script lang="ts"></script>
+  export interface DatePickerRangeTextProps extends HtmlProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {datePickerContext} from './context.svelte.js';
+
+  let {children, ...props}: DatePickerRangeTextProps = $props();
+
+  let context = datePickerContext.get();
+
+  let attrs = $derived(mergeProps(props, context.getRangeTextProps()));
+</script>
+
+<div {...attrs}>
+  {#if children}
+    {@render children()}
+  {:else}
+    {context.visibleRangeText.formatted}
+  {/if}
+</div>

package/dist/date-picker/range-text.svelte.d.ts

@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: {
+    (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const RangeText: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const RangeText: $$__sveltets_2_IsomorphicComponent<DatePickerRangeTextProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type RangeText = InstanceType<typeof RangeText>;
 export default RangeText;

package/dist/date-picker/root.svelte

@@ -1,3 +1,86 @@
-<script lang="ts" module></script>
+<script lang="ts" module>
+  import type {Assign, HtmlProps} from '../types.js';
+  import type {Snippet} from 'svelte';
+  import type {CreateDatePickerProps, CreateDatePickerReturn} from './create-date-picker.svelte.js';
 
-<script lang="ts"></script>
+  export interface DatePickerProps
+    extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateDatePickerProps> {
+    children?: Snippet<[api: CreateDatePickerReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {datePickerContext} from './context.svelte.js';
+  import {createDatePicker} from './create-date-picker.svelte.js';
+
+  let {
+    id,
+    ids,
+    min,
+    max,
+    name,
+    open,
+    view,
+    value,
+    modal,
+    disabled,
+    readOnly,
+    timeZone,
+    fixedWeeks,
+    startOfWeek,
+    defaultOpen,
+    positioning,
+    numOfMonths,
+    translations,
+    focusedValue,
+    closeOnSelect,
+    selectionMode,
+    format,
+    onViewChange,
+    onOpenChange,
+    onValueChange,
+    onFocusChange,
+    isDateUnavailable,
+    children,
+    ...props
+  }: DatePickerProps = $props();
+
+  let context = createDatePicker({
+    id,
+    ids,
+    min,
+    max,
+    name,
+    open,
+    view,
+    value: $state.snapshot(value),
+    modal,
+    disabled,
+    readOnly,
+    timeZone,
+    fixedWeeks,
+    defaultOpen,
+    startOfWeek,
+    positioning,
+    numOfMonths,
+    translations,
+    focusedValue,
+    closeOnSelect,
+    selectionMode,
+    format,
+    onViewChange,
+    onOpenChange,
+    onValueChange,
+    onFocusChange,
+    isDateUnavailable,
+  });
+
+  let attrs = $derived(mergeProps(props, context.getRootProps()));
+
+  datePickerContext.set(context);
+</script>
+
+<div {...attrs}>
+  {@render children?.(context)}
+</div>

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

@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: {
+    (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Root: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const Root: $$__sveltets_2_IsomorphicComponent<DatePickerProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type Root = InstanceType<typeof Root>;
 export default Root;

package/dist/date-picker/table-body.svelte

@@ -1,3 +1,22 @@
-<script lang="ts" module></script>
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-<script lang="ts"></script>
+  export interface DatePickerTableBodyProps extends HtmlProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {datePickerContext, datePickerTablePropsContext} from './context.svelte.js';
+
+  let {children, ...props}: DatePickerTableBodyProps = $props();
+
+  let context = datePickerContext.get();
+
+  let tableProps = datePickerTablePropsContext.get();
+
+  let attrs = $derived(mergeProps(props, context.getTableBodyProps(tableProps)));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/date-picker/table-body.svelte.d.ts

@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: {
+    (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const TableBody: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const TableBody: $$__sveltets_2_IsomorphicComponent<DatePickerTableBodyProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type TableBody = InstanceType<typeof TableBody>;
 export default TableBody;

package/dist/date-picker/table-head.svelte

@@ -1,3 +1,22 @@
-<script lang="ts" module></script>
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-<script lang="ts"></script>
+  export interface DatePickerTableHeadProps extends HtmlProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {datePickerContext, datePickerTablePropsContext} from './context.svelte.js';
+
+  let {children, ...props}: DatePickerTableHeadProps = $props();
+
+  let context = datePickerContext.get();
+
+  let tableProps = datePickerTablePropsContext.get();
+
+  let attrs = $derived(mergeProps(props, context.getTableHeadProps(tableProps)));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/date-picker/table-head.svelte.d.ts

@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: {
+    (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const TableHead: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const TableHead: $$__sveltets_2_IsomorphicComponent<DatePickerTableHeadProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type TableHead = InstanceType<typeof TableHead>;
 export default TableHead;

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

@@ -1,3 +1,22 @@
-<script lang="ts" module></script>
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-<script lang="ts"></script>
+  export interface DatePickerTableHeaderProps extends HtmlProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {datePickerContext, datePickerTablePropsContext} from './context.svelte.js';
+
+  let {children, ...props}: DatePickerTableHeaderProps = $props();
+
+  let context = datePickerContext.get();
+
+  let tableProps = datePickerTablePropsContext.get();
+
+  let attrs = $derived(mergeProps(props, context.getTableHeaderProps(tableProps)));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

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

@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: {
+    (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const TableHeader: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const TableHeader: $$__sveltets_2_IsomorphicComponent<DatePickerTableHeaderProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type TableHeader = InstanceType<typeof TableHeader>;
 export default TableHeader;

package/dist/date-picker/table-row.svelte

@@ -1,3 +1,22 @@
-<script lang="ts" module></script>
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-<script lang="ts"></script>
+  export interface DatePickerTableRowProps extends HtmlProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {datePickerContext, datePickerTablePropsContext} from './context.svelte.js';
+
+  let {children, ...props}: DatePickerTableRowProps = $props();
+
+  let context = datePickerContext.get();
+
+  let tableProps = datePickerTablePropsContext.get();
+
+  let attrs = $derived(mergeProps(props, context.getTableRowProps(tableProps)));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/date-picker/table-row.svelte.d.ts

@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: {
+    (internal: unknown, props: Props & {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const TableRow: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const TableRow: $$__sveltets_2_IsomorphicComponent<DatePickerTableRowProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type TableRow = InstanceType<typeof TableRow>;
 export default TableRow;

package/dist/date-picker/table.svelte

@@ -1,3 +1,32 @@
-<script lang="ts" module></script>
+<script lang="ts" module>
+  import type {Assign, HtmlProps} from '../types.js';
+  import type {TableProps} from '@zag-js/date-picker';
 
-<script lang="ts"></script>
+  export interface DatePickerTableProps
+    extends Assign<HtmlProps<'div'>, Omit<TableProps, 'view'>> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {
+    datePickerContext,
+    datePickerTablePropsContext,
+    datePickerViewPropsContext,
+  } from './context.svelte.js';
+
+  let {id, columns, children, ...props}: DatePickerTableProps = $props();
+
+  let context = datePickerContext.get();
+
+  let viewProps = datePickerViewPropsContext.get();
+
+  let tableProps: TableProps = $derived({...viewProps, id, columns});
+
+  let attrs = $derived(mergeProps(props, context.getTableProps(tableProps)));
+
+  datePickerTablePropsContext.set(() => tableProps);
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>