ui-ingredients 0.0.18 → 0.0.20

package/README.md

@@ -43,7 +43,7 @@ npm install ui-ingredients
 - 🟢 Collapsible
 - ⚪ ColorPicker
 - 🟢 Combobox
-- 🟡 DatePicker
+- 🟢 DatePicker
 - 🟢 Dialog
 - 🟢 Editable
 - 🟡 FileUpload

package/dist/collapsible/create-collapsible.svelte.d.ts

@@ -1,6 +1,7 @@
 import * as collapsible from '@zag-js/collapsible';
 export interface CreateCollapsibleProps extends Omit<collapsible.Context, 'id' | 'dir' | 'getRootNode' | 'open.controlled'> {
     id?: string | null;
+    defaultOpen?: boolean;
 }
 export interface CreateCollapsibleReturn extends collapsible.Api {
 }

package/dist/collapsible/create-collapsible.svelte.js

@@ -10,6 +10,7 @@ export function createCollapsible(props) {
         ...props,
         id: props.id ?? createUniqueId(),
         dir: localeContext?.dir,
+        open: props.defaultOpen,
         getRootNode: environmentContext?.getRootNode,
         'open.controlled': props.open != null,
     }));

package/dist/collapsible/root.svelte

@@ -22,6 +22,7 @@
     ids,
     open,
     disabled,
+    defaultOpen,
     onOpenChange,
     onExitComplete,
     children,
@@ -33,15 +34,16 @@
     ids,
     open,
     disabled,
+    defaultOpen,
     onOpenChange,
     onExitComplete,
   });
 
-  let mergedProps = $derived(mergeProps(props, context.getRootProps()));
+  let attrs = $derived(mergeProps(props, context.getRootProps()));
 
   collapsibleContext.set(context);
 </script>
 
-<div {...mergedProps}>
+<div {...attrs}>
   {@render children?.(context)}
 </div>

package/dist/collapsible/trigger.svelte

@@ -12,9 +12,9 @@
 
   let context = collapsibleContext.get();
 
-  let mergedProps = $derived(mergeProps(props, context.getTriggerProps()));
+  let attrs = $derived(mergeProps(props, context.getTriggerProps()));
 </script>
 
-<button type="button" {...mergedProps}>
+<button type="button" {...attrs}>
   {@render children?.()}
 </button>

package/dist/combobox/create-combobox.svelte.d.ts

@@ -5,6 +5,7 @@ export interface CreateComboboxProps<T> extends Omit<combobox.Context, 'id' | 'd
     itemToString?: (item: T) => string;
     itemToValue?: (item: T) => string;
     isItemDisabled?: (item: T) => boolean;
+    defaultOpen?: boolean;
 }
 export interface CreateComboboxReturn extends combobox.Api {
 }

package/dist/combobox/create-combobox.svelte.js

@@ -16,6 +16,7 @@ export function createCombobox(props) {
         ...props,
         id: props.id ?? createUniqueId(),
         dir: localeContext?.dir,
+        open: props.defaultOpen,
         getRootNode: environmentContext?.getRootNode,
         'open.controlled': props.open != null,
         collection,

package/dist/combobox/root.svelte

@@ -20,6 +20,7 @@
     name,
     form,
     open,
+    defaultOpen,
     items,
     value,
     invalid,
@@ -65,6 +66,7 @@
     name,
     form,
     open,
+    defaultOpen,
     items,
     value: $state.snapshot(value),
     invalid,

package/dist/date-picker/anatomy.js

@@ -0,0 +1,3 @@
+import { anatomy } from '@zag-js/date-picker';
+export const datePickerAnatomy = anatomy.extendWith('view');
+export const parts = datePickerAnatomy.build();

package/dist/date-picker/clear-trigger.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 DatePickerClearTriggerProps extends HtmlProps<'button'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {datePickerContext} from './context.svelte.js';
+
+  let {children, ...props}: DatePickerClearTriggerProps = $props();
+
+  let context = datePickerContext.get();
+
+  let attrs = $derived(mergeProps(props, context.getClearTriggerProps()));
+</script>
+
+<button type="button" {...attrs}>
+  {@render children?.()}
+</button>

package/dist/date-picker/clear-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 ClearTrigger: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const ClearTrigger: $$__sveltets_2_IsomorphicComponent<DatePickerClearTriggerProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type ClearTrigger = InstanceType<typeof ClearTrigger>;
 export default ClearTrigger;

package/dist/date-picker/content.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 DatePickerContentProps extends HtmlProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {datePickerContext} from './context.svelte.js';
+
+  let {children, ...props}: DatePickerContentProps = $props();
+
+  let context = datePickerContext.get();
+
+  let attrs = $derived(mergeProps(props, context.getContentProps()));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/date-picker/content.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 Content: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const Content: $$__sveltets_2_IsomorphicComponent<DatePickerContentProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type Content = InstanceType<typeof Content>;
 export default Content;

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

@@ -1,8 +1,8 @@
-import * as datePicker from '@zag-js/date-picker';
-export interface CreateDatePickerContextProps extends datePicker.Context {
-}
-export interface CreateDatePickerContextReturn extends ReturnType<typeof createDatePickerContext> {
-}
-export declare function createDatePickerContext(props: CreateDatePickerContextProps): any;
-export declare function setDatePickerContext(value: CreateDatePickerContextReturn): void;
-export declare function useDatePickerContext(): CreateDatePickerContextReturn;
+import { Context } from '../utils.svelte.js';
+import type { DayTableCellProps, TableCellProps, TableProps, ViewProps } from '@zag-js/date-picker';
+import type { CreateDatePickerReturn } from './create-date-picker.svelte.js';
+export declare const datePickerContext: Context<CreateDatePickerReturn>;
+export declare const datePickerViewPropsContext: Context<ViewProps>;
+export declare const datePickerTablePropsContext: Context<TableProps>;
+export declare const datePickerTableCellPropsContext: Context<TableCellProps>;
+export declare const datePickerDayTableCellPropsContext: Context<DayTableCellProps>;

package/dist/date-picker/context.svelte.js

@@ -1,14 +1,6 @@
-import * as datePicker from '@zag-js/date-picker';
-import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { getContext, setContext } from 'svelte';
-export function createDatePickerContext(props) {
-    const [state, send] = useMachine(datePicker.machine(props));
-    const api = $derived(reflect(() => datePicker.connect(state, send, normalizeProps)));
-    return api;
-}
-export function setDatePickerContext(value) {
-    setContext('DatePicker', value);
-}
-export function useDatePickerContext() {
-    return getContext('DatePicker');
-}
+import { Context } from '../utils.svelte.js';
+export const datePickerContext = new Context('DatePicker');
+export const datePickerViewPropsContext = new Context('DatePickerView');
+export const datePickerTablePropsContext = new Context('DatePickerTable');
+export const datePickerTableCellPropsContext = new Context('DatePickerTableCell');
+export const datePickerDayTableCellPropsContext = new Context('DatePickerDayTableCell');

package/dist/date-picker/control.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 DatePickerControlProps extends HtmlProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {datePickerContext} from './context.svelte.js';
+
+  let {children, ...props}: DatePickerControlProps = $props();
+
+  let context = datePickerContext.get();
+
+  let attrs = $derived(mergeProps(props, context.getControlProps()));
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

package/dist/date-picker/control.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 Control: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const Control: $$__sveltets_2_IsomorphicComponent<DatePickerControlProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type Control = InstanceType<typeof Control>;
 export default Control;

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

@@ -0,0 +1,14 @@
+import * as datePicker from '@zag-js/date-picker';
+type Omitted = 'id' | 'dir' | 'min' | 'max' | 'value' | 'focusedValue' | 'locale' | 'getRootNode' | 'open.controlled';
+export interface CreateDatePickerProps extends Omit<datePicker.Context, Omitted> {
+    id?: string | null;
+    min?: string | Date;
+    max?: string | Date;
+    value?: string[] | Date[];
+    focusedValue?: string | Date;
+    defaultOpen?: boolean;
+}
+export interface CreateDatePickerReturn extends datePicker.Api {
+}
+export declare function createDatePicker(props: CreateDatePickerProps): CreateDatePickerReturn;
+export {};

package/dist/date-picker/create-date-picker.svelte.js

@@ -0,0 +1,24 @@
+import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
+import { getLocaleContext } from '../locale-provider/context.svelte.js';
+import { createUniqueId } from '../utils.svelte.js';
+import * as datePicker from '@zag-js/date-picker';
+import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+export function createDatePicker(props) {
+    const localeContext = getLocaleContext();
+    const environmentContext = getEnvironmentContext();
+    const [state, send] = useMachine(datePicker.machine({
+        ...props,
+        id: props.id ?? createUniqueId(),
+        dir: localeContext?.dir,
+        min: props.min ? datePicker.parse(props.min) : undefined,
+        max: props.max ? datePicker.parse(props.max) : undefined,
+        value: props.value ? datePicker.parse(props.value) : undefined,
+        focusedValue: props.focusedValue ? datePicker.parse(props.focusedValue) : undefined,
+        open: props.defaultOpen,
+        'open.controlled': props.open != null,
+        locale: localeContext?.locale,
+        getRootNode: environmentContext?.getRootNode,
+    }));
+    const api = $derived(reflect(() => datePicker.connect(state, send, normalizeProps)));
+    return api;
+}

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

@@ -1,8 +1,8 @@
 export { default as ClearTrigger } from './clear-trigger.svelte';
 export { default as Content } from './content.svelte';
 export { default as Control } from './control.svelte';
-export { default as TableCellTrigger } from './day-table-cell-trigger.svelte';
-export { default as TableCell } from './day-table-cell.svelte';
+export { default as DayTableCellTrigger } from './day-table-cell-trigger.svelte';
+export { default as DayTableCell } from './day-table-cell.svelte';
 export { default as Input } from './input.svelte';
 export { default as Label } from './label.svelte';
 export { default as MonthSelect } from './month-select.svelte';
@@ -21,7 +21,7 @@ export { default as TableRow } from './table-row.svelte';
 export { default as Table } from './table.svelte';
 export { default as Trigger } from './trigger.svelte';
 export { default as ViewControl } from './view-control.svelte';
-export { default as ViewTrigger } from './view-trigger.svelte';
+export { default as View } from './view.svelte';
 export { default as YearSelect } from './year-select.svelte';
 export { default as YearTableCellTrigger } from './year-table-cell-trigger.svelte';
 export { default as YearTableCell } from './year-table-cell.svelte';

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

@@ -1,8 +1,8 @@
 export { default as ClearTrigger } from './clear-trigger.svelte';
 export { default as Content } from './content.svelte';
 export { default as Control } from './control.svelte';
-export { default as TableCellTrigger } from './day-table-cell-trigger.svelte';
-export { default as TableCell } from './day-table-cell.svelte';
+export { default as DayTableCellTrigger } from './day-table-cell-trigger.svelte';
+export { default as DayTableCell } from './day-table-cell.svelte';
 export { default as Input } from './input.svelte';
 export { default as Label } from './label.svelte';
 export { default as MonthSelect } from './month-select.svelte';
@@ -21,7 +21,7 @@ export { default as TableRow } from './table-row.svelte';
 export { default as Table } from './table.svelte';
 export { default as Trigger } from './trigger.svelte';
 export { default as ViewControl } from './view-control.svelte';
-export { default as ViewTrigger } from './view-trigger.svelte';
+export { default as View } from './view.svelte';
 export { default as YearSelect } from './year-select.svelte';
 export { default as YearTableCellTrigger } from './year-table-cell-trigger.svelte';
 export { default as YearTableCell } from './year-table-cell.svelte';

package/dist/date-picker/day-table-cell-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 DatePickerDayTableCellTriggerProps extends HtmlProps<'button'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {datePickerContext, datePickerDayTableCellPropsContext} from './context.svelte.js';
+
+  let {children, ...props}: DatePickerDayTableCellTriggerProps = $props();
+
+  let context = datePickerContext.get();
+
+  let tableCellProps = datePickerDayTableCellPropsContext.get();
+
+  let attrs = $derived(mergeProps(props, context.getDayTableCellTriggerProps(tableCellProps)));
+</script>
+
+<button type="button" {...attrs}>
+  {@render children?.()}
+</button>

package/dist/date-picker/day-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 DayTableCellTrigger: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const DayTableCellTrigger: $$__sveltets_2_IsomorphicComponent<DatePickerDayTableCellTriggerProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type DayTableCellTrigger = InstanceType<typeof DayTableCellTrigger>;
 export default DayTableCellTrigger;

package/dist/date-picker/day-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 {DayTableCellProps, DayTableCellState} from '@zag-js/date-picker';
+  import type {Snippet} from 'svelte';
 
-<script lang="ts"></script>
+  export interface DatePickerDayTableCellProps
+    extends Assign<Omit<HtmlProps<'div'>, 'children'>, DayTableCellProps> {
+    children?: Snippet<[state: DayTableCellState]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {datePickerContext, datePickerDayTableCellPropsContext} from './context.svelte.js';
+
+  let {
+    /**/
+    value,
+    disabled,
+    visibleRange,
+    children,
+    ...props
+  }: DatePickerDayTableCellProps = $props();
+
+  let context = datePickerContext.get();
+
+  let tableCellProps: DayTableCellProps = $derived({
+    value,
+    disabled,
+    visibleRange,
+  });
+
+  let state = $derived(context.getDayTableCellState(tableCellProps));
+  let attrs = $derived(mergeProps(props, context.getDayTableCellProps(tableCellProps)));
+
+  datePickerDayTableCellPropsContext.set(() => tableCellProps);
+</script>
+
+<div {...attrs}>
+  {@render children?.(state)}
+</div>

package/dist/date-picker/day-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 DayTableCell: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const DayTableCell: $$__sveltets_2_IsomorphicComponent<DatePickerDayTableCellProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type DayTableCell = InstanceType<typeof DayTableCell>;
 export default DayTableCell;

package/dist/date-picker/index.d.ts

@@ -1 +1,30 @@
+export { parse as parseDate } from '@zag-js/date-picker';
+export { datePickerAnatomy } from './anatomy.js';
 export * as DatePicker from './date-picker.js';
+export type { DatePickerClearTriggerProps } from './clear-trigger.svelte';
+export type { DatePickerContentProps } from './content.svelte';
+export type { DatePickerControlProps } from './control.svelte';
+export type { DatePickerDayTableCellTriggerProps } from './day-table-cell-trigger.svelte';
+export type { DatePickerDayTableCellProps } from './day-table-cell.svelte';
+export type { DatePickerInputProps } from './input.svelte';
+export type { DatePickerLabelProps } from './label.svelte';
+export type { DatePickerMonthSelectProps } from './month-select.svelte';
+export type { DatePickerMonthTableCellTriggerProps } from './month-table-cell-trigger.svelte';
+export type { DatePickerMonthTableCellProps } from './month-table-cell.svelte';
+export type { DatePickerNextTriggerProps } from './next-trigger.svelte';
+export type { DatePickerPositionerProps } from './positioner.svelte';
+export type { DatePickerPresetTriggerProps } from './preset-trigger.svelte';
+export type { DatePickerPrevTriggerProps } from './prev-trigger.svelte';
+export type { DatePickerRangeTextProps } from './range-text.svelte';
+export type { DatePickerProps } from './root.svelte';
+export type { DatePickerTableBodyProps } from './table-body.svelte';
+export type { DatePickerTableHeadProps } from './table-head.svelte';
+export type { DatePickerTableHeaderProps } from './table-header.svelte';
+export type { DatePickerTableRowProps } from './table-row.svelte';
+export type { DatePickerTableProps } from './table.svelte';
+export type { DatePickerTriggerProps } from './trigger.svelte';
+export type { DatePickerViewControlProps } from './view-control.svelte';
+export type { DatePickerViewProps } from './view.svelte';
+export type { DatePickerYearSelectProps } from './year-select.svelte';
+export type { DatePickerYearTableCellTriggerProps } from './year-table-cell-trigger.svelte';
+export type { DatePickerYearTableCellProps } from './year-table-cell.svelte';

package/dist/date-picker/index.js

@@ -1 +1,3 @@
+export { parse as parseDate } from '@zag-js/date-picker';
+export { datePickerAnatomy } from './anatomy.js';
 export * as DatePicker from './date-picker.js';

package/dist/date-picker/input.svelte

@@ -1,3 +1,19 @@
-<script lang="ts" module></script>
+<script lang="ts" module>
+  import type {Assign, HtmlProps} from '../types.js';
+  import type {InputProps} from '@zag-js/date-picker';
 
-<script lang="ts"></script>
+  export interface DatePickerInputProps extends Assign<HtmlProps<'input'>, InputProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {datePickerContext} from './context.svelte.js';
+
+  let {index, children, ...props}: DatePickerInputProps = $props();
+
+  let context = datePickerContext.get();
+
+  let attrs = $derived(mergeProps(props, context.getInputProps({index})));
+</script>
+
+<input {...attrs} />

package/dist/date-picker/input.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 Input: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const Input: $$__sveltets_2_IsomorphicComponent<DatePickerInputProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type Input = InstanceType<typeof Input>;
 export default Input;

package/dist/date-picker/label.svelte

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

package/dist/date-picker/label.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 Label: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const Label: $$__sveltets_2_IsomorphicComponent<DatePickerLabelProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type Label = InstanceType<typeof Label>;
 export default Label;

package/dist/date-picker/month-select.svelte

@@ -1,3 +1,41 @@
-<script lang="ts" module></script>
+<script lang="ts" module>
+  import type {HtmlProps} from '../types.js';
 
-<script lang="ts"></script>
+  export interface DatePickerMonthSelectProps extends HtmlProps<'select'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '@zag-js/svelte';
+  import {datePickerContext} from './context.svelte.js';
+
+  let {children, ...props}: DatePickerMonthSelectProps = $props();
+
+  let context = datePickerContext.get();
+
+  let attrs = $derived(mergeProps(props, context.getMonthSelectProps()));
+
+  const months = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ];
+</script>
+
+<select {...attrs}>
+  {#if children}
+    {@render children()}
+  {:else}
+    {#each months as month, index}
+      <option value={index}>{month}</option>
+    {/each}
+  {/if}
+</select>