bits-ui 0.21.1 → 0.21.2

package/dist/bits/date-field/index.d.ts

@@ -2,4 +2,4 @@ export { default as Root } from "./components/date-field.svelte";
 export { default as Input } from "./components/date-field-input.svelte";
 export { default as Label } from "./components/date-field-label.svelte";
 export { default as Segment } from "./components/date-field-segment.svelte";
-export type * from "./types.js";
+export type { DateFieldProps as Props, DateFieldInputProps as InputProps, DateFieldLabelProps as LabelProps, DateFieldSegmentProps as SegmentProps, DateFieldDescriptionProps as DescriptionProps, DateFieldSegmentEvents as SegmentEvents, } from "./types.js";

package/dist/bits/date-field/types.d.ts

@@ -1,14 +1,50 @@
+import type { DateValue } from "@internationalized/date";
+import type { CreateDateFieldProps as MeltDateFieldProps } from "@melt-ui/svelte";
 import type { CustomEventHandler } from "../../index.js";
-import type { HTMLDivAttributes, HTMLSpanAttributes } from "../../internal/index.js";
-import type * as I from "./_types.js";
-type Props = I.Props;
-type LabelProps = I.LabelProps & HTMLSpanAttributes;
-type SegmentProps = I.SegmentProps & HTMLDivAttributes;
-type InputProps = I.InputProps & HTMLDivAttributes;
-type DescriptionProps = I.DescriptionProps & HTMLDivAttributes;
-type SegmentEvents = {
+import type { DOMElement, Expand, HTMLDivAttributes, HTMLSpanAttributes, OmitDates, OnChangeFn } from "../../internal/index.js";
+import type { SegmentPart } from "../../shared/index.js";
+export type DateFieldPropsWithoutHTML = Expand<Omit<OmitDates<MeltDateFieldProps>, "required" | "name"> & {
+    /**
+     * The value of the date field.
+     * You can bind this to a `DateValue` object to programmatically control the value.
+     */
+    value?: DateValue;
+    /**
+     * A callback function called when the value changes.
+     */
+    onValueChange?: OnChangeFn<DateValue | undefined>;
+    /**
+     * The placeholder date used to start the field.
+     */
+    placeholder?: DateValue;
+    /**
+     * A callback function called when the placeholder changes.
+     */
+    onPlaceholderChange?: OnChangeFn<DateValue>;
+    /**
+     * The id of the validation message element which is used to apply the
+     * appropriate `aria-describedby` attribute to the input.
+     */
+    validationId?: string;
+    /**
+     * The id of the description element which is used to describe the input.
+     * This is used to apply the appropriate `aria-describedby` attribute to the input.
+     */
+    descriptionId?: string;
+}>;
+export type DateFieldInputPropsWithoutHTML = DOMElement;
+export type DateFieldDescriptionPropsWithoutHTML = DOMElement;
+export type DateFieldLabelPropsWithoutHTML = DOMElement<HTMLSpanElement>;
+export type DateFieldSegmentPropsWithoutHTML = Expand<{
+    part: SegmentPart;
+} & DOMElement>;
+export type DateFieldProps = DateFieldPropsWithoutHTML;
+export type DateFieldLabelProps = DateFieldLabelPropsWithoutHTML & HTMLSpanAttributes;
+export type DateFieldSegmentProps = DateFieldSegmentPropsWithoutHTML & HTMLDivAttributes;
+export type DateFieldInputProps = DateFieldInputPropsWithoutHTML & HTMLDivAttributes;
+export type DateFieldDescriptionProps = DateFieldDescriptionPropsWithoutHTML & HTMLDivAttributes;
+export type DateFieldSegmentEvents = {
     click: CustomEventHandler<MouseEvent, HTMLDivElement>;
     focusout: CustomEventHandler<FocusEvent, HTMLDivElement>;
     keydown: CustomEventHandler<KeyboardEvent, HTMLDivElement>;
 };
-export type { Props, LabelProps, DescriptionProps, InputProps, SegmentProps, SegmentEvents, };

package/dist/bits/date-picker/components/date-picker-arrow.svelte

@@ -1,5 +1,5 @@
-<script>import { getCtx } from "../ctx.js";
-import { melt } from "@melt-ui/svelte";
+<script>import { melt } from "@melt-ui/svelte";
+import { getCtx } from "../ctx.js";
 export let asChild = false;
 export let el = void 0;
 export let size = 8;

package/dist/bits/date-picker/components/date-picker-arrow.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { ArrowProps } from "../types.js";
+import type { ArrowProps } from "../index.js";
 declare const __propDef: {
     props: ArrowProps;
     events: {

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

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
 import { type Month } from "@melt-ui/svelte";
-import type { CalendarEvents, CalendarProps } from "../types.js";
 import type { DateValue } from "@internationalized/date";
+import type { CalendarEvents, CalendarProps } from "../index.js";
 declare const __propDef: {
     props: CalendarProps;
     slots: {

package/dist/bits/date-picker/components/date-picker-cell.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { CellProps } from "../types.js";
+import type { CellProps } from "../index.js";
 declare const __propDef: {
     props: CellProps;
     events: {

package/dist/bits/date-picker/components/date-picker-close.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { CloseProps, CloseEvents } from "../types.js";
+import type { CloseEvents, CloseProps } from "../index.js";
 declare const __propDef: {
     props: CloseProps;
     slots: {

package/dist/bits/date-picker/components/date-picker-content.svelte

@@ -54,7 +54,12 @@ $:
 {#if asChild && $open}
 	<slot {builder} />
 {:else if transition && $open}
-	<div bind:this={el} transition:transition={transitionConfig} {...builder} use:builder.action {...$$restProps}>
+	<div
+		bind:this={el}
+		transition:transition={transitionConfig}
+		{...builder} use:builder.action
+		{...$$restProps}
+	>
 		<slot {builder} />
 	</div>
 {:else if inTransition && outTransition && $open}

package/dist/bits/date-picker/components/date-picker-content.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponent } from "svelte";
+import type { ContentProps } from "../index.js";
 import type { Transition } from "../../../internal/index.js";
-import type { ContentProps } from "../types.js";
 declare class __sveltets_Render<T extends Transition, In extends Transition, Out extends Transition> {
     props(): ContentProps<T, In, Out>;
     events(): {} & {

package/dist/bits/date-picker/components/date-picker-day.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { DayEvents, DayProps } from "../types.js";
+import type { DayEvents, DayProps } from "../index.js";
 declare const __propDef: {
     props: DayProps;
     slots: {

package/dist/bits/date-picker/components/date-picker-field.svelte.d.ts

@@ -3,26 +3,26 @@ declare const __propDef: {
     props: {
         multiple?: false | undefined;
         disabled?: boolean | undefined;
+        portal?: string | HTMLElement | null | undefined;
         preventScroll?: boolean | undefined;
         closeOnEscape?: boolean | undefined;
         closeOnOutsideClick?: boolean | undefined;
         onOutsideClick?: ((event: import("@melt-ui/svelte/index.js").InteractOutsideEvent) => void) | undefined;
-        portal?: string | HTMLElement | null | undefined;
         openFocus?: import("@melt-ui/svelte/index.js").FocusProp | undefined;
         closeFocus?: import("@melt-ui/svelte/index.js").FocusProp | undefined;
-        preventDeselect?: boolean | undefined;
+        isDateUnavailable?: import("@melt-ui/svelte/index.js").Matcher | undefined;
         minValue?: import("@internationalized/date").DateValue | undefined;
         maxValue?: import("@internationalized/date").DateValue | undefined;
-        pagedNavigation?: boolean | undefined;
-        weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined;
-        weekdayFormat?: "narrow" | "short" | "long" | undefined;
-        isDateDisabled?: import("@melt-ui/svelte/index.js").Matcher | undefined;
-        isDateUnavailable?: import("@melt-ui/svelte/index.js").Matcher | undefined;
+        readonly?: boolean | undefined;
+        locale?: string | undefined;
+        weekStartsOn?: 0 | 1 | 2 | 3 | 5 | 4 | 6 | undefined;
         fixedWeeks?: boolean | undefined;
         numberOfMonths?: number | undefined;
+        preventDeselect?: boolean | undefined;
+        pagedNavigation?: boolean | undefined;
+        weekdayFormat?: "long" | "short" | "narrow" | undefined;
+        isDateDisabled?: import("@melt-ui/svelte/index.js").Matcher | undefined;
         calendarLabel?: string | undefined;
-        locale?: string | undefined;
-        readonly?: boolean | undefined;
         hourCycle?: 12 | 24 | undefined;
         granularity?: import("@melt-ui/svelte/index.js").Granularity | undefined;
         hideTimeZone?: boolean | undefined;

package/dist/bits/date-picker/components/date-picker-grid-body.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { GridBodyProps } from "../types.js";
+import type { GridBodyProps } from "../index.js";
 declare const __propDef: {
     props: GridBodyProps;
     events: {
@@ -7,7 +7,7 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            attrs: Record<string, string>;
+            attrs: Record<string, string> | undefined;
         };
     };
 };

package/dist/bits/date-picker/components/date-picker-grid-head.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { GridHeadProps } from "../types.js";
+import type { GridHeadProps } from "../index.js";
 declare const __propDef: {
     props: GridHeadProps;
     events: {

package/dist/bits/date-picker/components/date-picker-grid-row.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { GridRowProps } from "../types.js";
+import type { GridRowProps } from "../index.js";
 declare const __propDef: {
     props: GridRowProps;
     events: {
@@ -7,7 +7,7 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            attrs: Record<string, string>;
+            attrs: Record<string, string> | undefined;
         };
     };
 };

package/dist/bits/date-picker/components/date-picker-grid.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { GridProps } from "../types.js";
+import type { GridProps } from "../index.js";
 declare const __propDef: {
     props: GridProps;
     events: {

package/dist/bits/date-picker/components/date-picker-head-cell.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { HeadCellProps } from "../types.js";
+import type { HeadCellProps } from "../index.js";
 declare const __propDef: {
     props: HeadCellProps;
     events: {
@@ -7,7 +7,7 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            attrs: Record<string, string>;
+            attrs: Record<string, string> | undefined;
         };
     };
 };

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { HeaderProps } from "../types.js";
+import type { HeaderProps } from "../index.js";
 declare const __propDef: {
     props: HeaderProps;
     events: {
@@ -7,7 +7,7 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            attrs: Record<string, string>;
+            attrs: Record<string, string> | undefined;
         };
     };
 };

package/dist/bits/date-picker/components/date-picker-heading.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { HeadingProps } from "../types.js";
+import type { HeadingProps } from "../index.js";
 declare const __propDef: {
     props: HeadingProps;
     events: {

package/dist/bits/date-picker/components/date-picker-input.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { InputProps } from "../types.js";
+import type { InputProps } from "../index.js";
 declare const __propDef: {
     props: InputProps;
     events: {

package/dist/bits/date-picker/components/date-picker-label.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { LabelProps } from "../types.js";
+import type { LabelProps } from "../index.js";
 declare const __propDef: {
     props: LabelProps;
     events: {

package/dist/bits/date-picker/components/date-picker-next-button.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { NextButtonProps } from "../types.js";
+import type { NextButtonProps } from "../index.js";
 declare const __propDef: {
     props: NextButtonProps;
     slots: {

package/dist/bits/date-picker/components/date-picker-prev-button.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { PrevButtonProps } from "../types.js";
+import type { PrevButtonProps } from "../index.js";
 declare const __propDef: {
     props: PrevButtonProps;
     slots: {

package/dist/bits/date-picker/components/date-picker-segment.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { SegmentEvents, SegmentProps } from "../types.js";
+import type { SegmentEvents, SegmentProps } from "../index.js";
 declare const __propDef: {
     props: SegmentProps;
     slots: {

package/dist/bits/date-picker/components/date-picker-trigger.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { TriggerEvents, TriggerProps } from "../types.js";
+import type { TriggerEvents, TriggerProps } from "../index.js";
 declare const __propDef: {
     props: TriggerProps;
     slots: {
@@ -9,7 +9,7 @@ declare const __propDef: {
                 'data-segment': string;
                 disabled: boolean | undefined;
                 'data-state': "open" | "closed";
-                'aria-expanded': "false" | "true";
+                'aria-expanded': "true" | "false";
                 'aria-controls': string;
                 role: "button";
                 id: string;

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

@@ -3,26 +3,26 @@ declare const __propDef: {
     props: {
         multiple?: false | undefined;
         disabled?: boolean | undefined;
+        portal?: string | HTMLElement | null | undefined;
         preventScroll?: boolean | undefined;
         closeOnEscape?: boolean | undefined;
         closeOnOutsideClick?: boolean | undefined;
         onOutsideClick?: ((event: import("@melt-ui/svelte/index.js").InteractOutsideEvent) => void) | undefined;
-        portal?: string | HTMLElement | null | undefined;
         openFocus?: import("@melt-ui/svelte/index.js").FocusProp | undefined;
         closeFocus?: import("@melt-ui/svelte/index.js").FocusProp | undefined;
-        preventDeselect?: boolean | undefined;
+        isDateUnavailable?: import("@melt-ui/svelte/index.js").Matcher | undefined;
         minValue?: import("@internationalized/date").DateValue | undefined;
         maxValue?: import("@internationalized/date").DateValue | undefined;
-        pagedNavigation?: boolean | undefined;
-        weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined;
-        weekdayFormat?: "narrow" | "short" | "long" | undefined;
-        isDateDisabled?: import("@melt-ui/svelte/index.js").Matcher | undefined;
-        isDateUnavailable?: import("@melt-ui/svelte/index.js").Matcher | undefined;
+        readonly?: boolean | undefined;
+        locale?: string | undefined;
+        weekStartsOn?: 0 | 1 | 2 | 3 | 5 | 4 | 6 | undefined;
         fixedWeeks?: boolean | undefined;
         numberOfMonths?: number | undefined;
+        preventDeselect?: boolean | undefined;
+        pagedNavigation?: boolean | undefined;
+        weekdayFormat?: "long" | "short" | "narrow" | undefined;
+        isDateDisabled?: import("@melt-ui/svelte/index.js").Matcher | undefined;
         calendarLabel?: string | undefined;
-        locale?: string | undefined;
-        readonly?: boolean | undefined;
         hourCycle?: 12 | 24 | undefined;
         granularity?: import("@melt-ui/svelte/index.js").Granularity | undefined;
         hideTimeZone?: boolean | undefined;

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

@@ -4,21 +4,21 @@ import type { Writable } from "svelte/store";
 import type { FloatingProps } from "../floating/_types.js";
 export declare function setCtx(props: CreateDatePickerProps): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
-    getCalendarAttrs: (part: "day" | "header" | "root" | "cell" | "grid" | "heading" | "prev-button" | "next-button" | "grid-head" | "head-cell" | "grid-body" | "grid-row") => Record<string, string>;
-    getFieldAttrs: (part: "label" | "segment" | "input") => Record<string, string>;
-    getPopoverAttrs: (part: "content" | "arrow" | "trigger" | "close") => Record<string, string>;
+    getCalendarAttrs: (part: "header" | "root" | "cell" | "grid" | "heading" | "prev-button" | "next-button" | "day" | "grid-head" | "head-cell" | "grid-body" | "grid-row") => Record<string, string> | undefined;
+    getFieldAttrs: (part: "label" | "input" | "segment") => Record<string, string> | undefined;
+    getPopoverAttrs: (part: "content" | "trigger" | "close" | "arrow") => Record<string, string> | undefined;
     elements: {
         trigger: import("@melt-ui/svelte/internal/helpers").MeltElement<[import("@melt-ui/svelte/internal/helpers").MeltElement<[import("svelte/store").Readable<boolean>, import("@melt-ui/svelte/internal/helpers").WithGet<Writable<string>>, import("@melt-ui/svelte/internal/helpers").WithGet<Writable<string>>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click">, ([$isVisible, $contentId, $triggerId]: [boolean, string, string]) => {
             readonly role: "button";
             readonly 'aria-haspopup': "dialog";
-            readonly 'aria-expanded': "false" | "true";
+            readonly 'aria-expanded': "true" | "false";
             readonly 'data-state': "open" | "closed";
             readonly 'aria-controls': string;
             readonly id: string;
         }, string>, import("@melt-ui/svelte/internal/helpers").WithGet<Writable<boolean>>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click">, ([$trigger, $disabled]: [{
             readonly role: "button";
             readonly 'aria-haspopup': "dialog";
-            readonly 'aria-expanded': "false" | "true";
+            readonly 'aria-expanded': "true" | "false";
             readonly 'data-state': "open" | "closed";
             readonly 'aria-controls': string;
             readonly id: string;
@@ -31,7 +31,7 @@ export declare function setCtx(props: CreateDatePickerProps): {
             'data-segment': string;
             disabled: boolean | undefined;
             'data-state': "open" | "closed";
-            'aria-expanded': "false" | "true";
+            'aria-expanded': "true" | "false";
             'aria-controls': string;
             role: "button";
             id: string;
@@ -329,12 +329,12 @@ export declare function setCtx(props: CreateDatePickerProps): {
         hourCycle: import("@melt-ui/svelte/internal/helpers").WithGet<Writable<12 | 24 | undefined>>;
         locale: import("@melt-ui/svelte/internal/helpers").WithGet<Writable<string>>;
         hideTimeZone: import("@melt-ui/svelte/internal/helpers").WithGet<Writable<boolean | undefined>>;
-        weekStartsOn: import("@melt-ui/svelte/internal/helpers").WithGet<Writable<0 | 1 | 2 | 3 | 4 | 5 | 6>>;
+        weekStartsOn: import("@melt-ui/svelte/internal/helpers").WithGet<Writable<0 | 1 | 2 | 3 | 5 | 4 | 6>>;
         fixedWeeks: import("@melt-ui/svelte/internal/helpers").WithGet<Writable<boolean>>;
         numberOfMonths: import("@melt-ui/svelte/internal/helpers").WithGet<Writable<number>>;
         preventDeselect: import("@melt-ui/svelte/internal/helpers").WithGet<Writable<boolean>>;
         pagedNavigation: import("@melt-ui/svelte/internal/helpers").WithGet<Writable<boolean>>;
-        weekdayFormat: import("@melt-ui/svelte/internal/helpers").WithGet<Writable<"narrow" | "short" | "long">>;
+        weekdayFormat: import("@melt-ui/svelte/internal/helpers").WithGet<Writable<"long" | "short" | "narrow">>;
         isDateDisabled: import("@melt-ui/svelte/internal/helpers").WithGet<Writable<import("@melt-ui/svelte").Matcher | undefined>>;
         calendarLabel: import("@melt-ui/svelte/internal/helpers").WithGet<Writable<string>>;
         dateFieldIds?: import("@melt-ui/svelte/internal/helpers").WithGet<Writable<Partial<{
@@ -359,7 +359,7 @@ export declare function setCtx(props: CreateDatePickerProps): {
             content: string;
             trigger: string;
         }> | undefined>> | undefined;
-        readonlySegments: import("@melt-ui/svelte/internal/helpers").WithGet<Writable<("month" | "day" | "year" | "hour" | "minute" | "second" | "dayPeriod")[] | undefined>>;
+        readonlySegments: import("@melt-ui/svelte/internal/helpers").WithGet<Writable<("day" | "year" | "month" | "hour" | "minute" | "second" | "dayPeriod")[] | undefined>>;
     };
     ids: {
         dateField: import("@melt-ui/svelte/internal/helpers").ToWritableStores<{
@@ -388,21 +388,21 @@ export declare function setCtx(props: CreateDatePickerProps): {
 };
 export declare function getCtx(): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
-    getCalendarAttrs: (part: "day" | "header" | "root" | "cell" | "grid" | "heading" | "prev-button" | "next-button" | "grid-head" | "head-cell" | "grid-body" | "grid-row") => Record<string, string>;
-    getFieldAttrs: (part: "label" | "segment" | "input") => Record<string, string>;
-    getPopoverAttrs: (part: "content" | "arrow" | "trigger" | "close") => Record<string, string>;
+    getCalendarAttrs: (part: "header" | "root" | "cell" | "grid" | "heading" | "prev-button" | "next-button" | "day" | "grid-head" | "head-cell" | "grid-body" | "grid-row") => Record<string, string> | undefined;
+    getFieldAttrs: (part: "label" | "input" | "segment") => Record<string, string> | undefined;
+    getPopoverAttrs: (part: "content" | "trigger" | "close" | "arrow") => Record<string, string> | undefined;
     elements: {
         trigger: import("@melt-ui/svelte/internal/helpers").MeltElement<[import("@melt-ui/svelte/internal/helpers").MeltElement<[import("svelte/store").Readable<boolean>, import("@melt-ui/svelte/internal/helpers").WithGet<Writable<string>>, import("@melt-ui/svelte/internal/helpers").WithGet<Writable<string>>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click">, ([$isVisible, $contentId, $triggerId]: [boolean, string, string]) => {
             readonly role: "button";
             readonly 'aria-haspopup': "dialog";
-            readonly 'aria-expanded': "false" | "true";
+            readonly 'aria-expanded': "true" | "false";
             readonly 'data-state': "open" | "closed";
             readonly 'aria-controls': string;
             readonly id: string;
         }, string>, import("@melt-ui/svelte/internal/helpers").WithGet<Writable<boolean>>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click">, ([$trigger, $disabled]: [{
             readonly role: "button";
             readonly 'aria-haspopup': "dialog";
-            readonly 'aria-expanded': "false" | "true";
+            readonly 'aria-expanded': "true" | "false";
             readonly 'data-state': "open" | "closed";
             readonly 'aria-controls': string;
             readonly id: string;
@@ -415,7 +415,7 @@ export declare function getCtx(): {
             'data-segment': string;
             disabled: boolean | undefined;
             'data-state': "open" | "closed";
-            'aria-expanded': "false" | "true";
+            'aria-expanded': "true" | "false";
             'aria-controls': string;
             role: "button";
             id: string;
@@ -713,12 +713,12 @@ export declare function getCtx(): {
         hourCycle: import("@melt-ui/svelte/internal/helpers").WithGet<Writable<12 | 24 | undefined>>;
         locale: import("@melt-ui/svelte/internal/helpers").WithGet<Writable<string>>;
         hideTimeZone: import("@melt-ui/svelte/internal/helpers").WithGet<Writable<boolean | undefined>>;
-        weekStartsOn: import("@melt-ui/svelte/internal/helpers").WithGet<Writable<0 | 1 | 2 | 3 | 4 | 5 | 6>>;
+        weekStartsOn: import("@melt-ui/svelte/internal/helpers").WithGet<Writable<0 | 1 | 2 | 3 | 5 | 4 | 6>>;
         fixedWeeks: import("@melt-ui/svelte/internal/helpers").WithGet<Writable<boolean>>;
         numberOfMonths: import("@melt-ui/svelte/internal/helpers").WithGet<Writable<number>>;
         preventDeselect: import("@melt-ui/svelte/internal/helpers").WithGet<Writable<boolean>>;
         pagedNavigation: import("@melt-ui/svelte/internal/helpers").WithGet<Writable<boolean>>;
-        weekdayFormat: import("@melt-ui/svelte/internal/helpers").WithGet<Writable<"narrow" | "short" | "long">>;
+        weekdayFormat: import("@melt-ui/svelte/internal/helpers").WithGet<Writable<"long" | "short" | "narrow">>;
         isDateDisabled: import("@melt-ui/svelte/internal/helpers").WithGet<Writable<import("@melt-ui/svelte").Matcher | undefined>>;
         calendarLabel: import("@melt-ui/svelte/internal/helpers").WithGet<Writable<string>>;
         dateFieldIds?: import("@melt-ui/svelte/internal/helpers").WithGet<Writable<Partial<{
@@ -743,7 +743,7 @@ export declare function getCtx(): {
             content: string;
             trigger: string;
         }> | undefined>> | undefined;
-        readonlySegments: import("@melt-ui/svelte/internal/helpers").WithGet<Writable<("month" | "day" | "year" | "hour" | "minute" | "second" | "dayPeriod")[] | undefined>>;
+        readonlySegments: import("@melt-ui/svelte/internal/helpers").WithGet<Writable<("day" | "year" | "month" | "hour" | "minute" | "second" | "dayPeriod")[] | undefined>>;
     };
     ids: {
         dateField: import("@melt-ui/svelte/internal/helpers").ToWritableStores<{

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

@@ -1,6 +1,6 @@
 import { createDatePicker } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
-import { removeUndefined, getOptionUpdater, createBitAttrs } from "../../internal/index.js";
+import { createBitAttrs, getOptionUpdater, removeUndefined } from "../../internal/index.js";
 import { getCalendarData } from "../calendar/ctx.js";
 import { getDateFieldData } from "../date-field/ctx.js";
 import { getPopoverData } from "../popover/ctx.js";

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

@@ -19,4 +19,4 @@ export { default as Grid } from "./components/date-picker-grid.svelte";
 export { default as Heading } from "./components/date-picker-heading.svelte";
 export { default as NextButton } from "./components/date-picker-next-button.svelte";
 export { default as PrevButton } from "./components/date-picker-prev-button.svelte";
-export type * from "./types.js";
+export type { DatePickerProps as Props, DatePickerLabelProps as LabelProps, DatePickerInputProps as InputProps, DatePickerSegmentProps as SegmentProps, DatePickerArrowProps as ArrowProps, DatePickerCloseEvents as CloseEvents, DatePickerCloseProps as CloseProps, DatePickerContentProps as ContentProps, DatePickerTriggerEvents as TriggerEvents, DatePickerTriggerProps as TriggerProps, DatePickerCalendarEvents as CalendarEvents, DatePickerCalendarProps as CalendarProps, DatePickerCellProps as CellProps, DatePickerDayEvents as DayEvents, DatePickerDayProps as DayProps, DatePickerGridBodyProps as GridBodyProps, DatePickerGridHeadProps as GridHeadProps, DatePickerGridProps as GridProps, DatePickerGridRowProps as GridRowProps, DatePickerHeadCellProps as HeadCellProps, DatePickerHeaderProps as HeaderProps, DatePickerHeadingProps as HeadingProps, DatePickerNextButtonEvents as NextButtonEvents, DatePickerNextButtonProps as NextButtonProps, DatePickerPrevButtonEvents as PrevButtonEvents, DatePickerPrevButtonProps as PrevButtonProps, DatePickerSegmentEvents as SegmentEvents, } from "./types.js";

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

@@ -1,12 +1,60 @@
-import type { HTMLDivAttributes, HTMLSpanAttributes } from "../../internal/index.js";
-import type * as I from "./_types.js";
-import type { CellProps, DayProps, GridBodyProps, GridHeadProps, GridRowProps, GridProps, HeadCellProps, HeaderProps, HeadingProps, NextButtonProps, PrevButtonProps, Events as CalendarEvents, DayEvents, PrevButtonEvents, NextButtonEvents } from "../calendar/types.js";
-import type { TriggerProps, ContentProps, ArrowProps, CloseProps, CloseEvents, TriggerEvents } from "../popover/types.js";
-import type { SegmentEvents } from "../date-field/types.js";
-type Props = I.Props;
-type LabelProps = I.LabelProps & HTMLSpanAttributes;
-type SegmentProps = I.SegmentProps & HTMLDivAttributes;
-type InputProps = I.InputProps & HTMLDivAttributes;
-type DescriptionProps = I.DescriptionProps & HTMLDivAttributes;
-type CalendarProps = I.CalendarProps & HTMLDivAttributes;
-export type { Props, CalendarProps, LabelProps, DescriptionProps, InputProps, SegmentProps, CellProps, DayProps, GridBodyProps, GridHeadProps, GridRowProps, GridProps, HeadCellProps, HeaderProps, HeadingProps, NextButtonProps, PrevButtonProps, TriggerProps, ContentProps, ArrowProps, CloseProps, CloseEvents, TriggerEvents, CalendarEvents, DayEvents, PrevButtonEvents, NextButtonEvents, SegmentEvents, };
+import type { DateValue } from "@internationalized/date";
+import type { CreateDatePickerProps as MeltDatePickerProps } from "@melt-ui/svelte";
+import type { DOMElement, Expand, HTMLDivAttributes, HTMLSpanAttributes, OmitDates, OmitFloating, OnChangeFn } from "../../internal/index.js";
+import type { SegmentPart } from "../../shared/index.js";
+export type { ArrowProps as DatePickerArrowProps, CloseEvents as DatePickerCloseEvents, CloseProps as DatePickerCloseProps, ContentProps as DatePickerContentProps, TriggerEvents as DatePickerTriggerEvents, TriggerProps as DatePickerTriggerProps, } from "../popover/index.js";
+export type { Events as DatePickerCalendarEvents, CellProps as DatePickerCellProps, DayEvents as DatePickerDayEvents, DayProps as DatePickerDayProps, GridBodyProps as DatePickerGridBodyProps, GridHeadProps as DatePickerGridHeadProps, GridProps as DatePickerGridProps, GridRowProps as DatePickerGridRowProps, HeadCellProps as DatePickerHeadCellProps, HeaderProps as DatePickerHeaderProps, HeadingProps as DatePickerHeadingProps, NextButtonEvents as DatePickerNextButtonEvents, NextButtonProps as DatePickerNextButtonProps, PrevButtonEvents as DatePickerPrevButtonEvents, PrevButtonProps as DatePickerPrevButtonProps, } from "../calendar/index.js";
+export type { SegmentEvents as DatePickerSegmentEvents } from "../date-field/index.js";
+export type DatePickerPropsWithoutHTML = Expand<Omit<OmitFloating<OmitDates<MeltDatePickerProps>>, "required" | "name" | "calendarIds" | "dateFieldIds" | "popoverIds"> & {
+    /**
+     * The open state of the popover.
+     * You can bind this to a boolean value to programmatically control the open state.
+     *
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * A callback function called when the open state changes.
+     */
+    onOpenChange?: OnChangeFn<boolean>;
+    /**
+     * The value of the date field.
+     * You can bind this to a `DateValue` object to programmatically control the value.
+     */
+    value?: DateValue;
+    /**
+     * A callback function called when the value changes.
+     */
+    onValueChange?: OnChangeFn<DateValue | undefined>;
+    /**
+     * The placeholder date used to start the field.
+     */
+    placeholder?: DateValue;
+    /**
+     * A callback function called when the placeholder changes.
+     */
+    onPlaceholderChange?: OnChangeFn<DateValue>;
+    /**
+     * The id of the validation message element which is used to apply the
+     * appropriate `aria-describedby` attribute to the input.
+     */
+    validationId?: string;
+    /**
+     * The id of the description element which is used to describe the input.
+     * This is used to apply the appropriate `aria-describedby` attribute to the input.
+     */
+    descriptionId?: string;
+}>;
+export type DatePickerInputPropsWithoutHTML = DOMElement;
+export type DatePickerDescriptionPropsWithoutHTML = DOMElement;
+export type DatePickerLabelPropsWithoutHTML = DOMElement<HTMLSpanElement>;
+export type DatePickerCalendarPropsWithoutHTML = DOMElement;
+export type DatePickerSegmentPropsWithoutHTML = Expand<{
+    part: SegmentPart;
+} & DOMElement>;
+export type DatePickerProps = DatePickerPropsWithoutHTML;
+export type DatePickerLabelProps = DatePickerLabelPropsWithoutHTML & HTMLSpanAttributes;
+export type DatePickerSegmentProps = DatePickerSegmentPropsWithoutHTML & HTMLDivAttributes;
+export type DatePickerInputProps = DatePickerInputPropsWithoutHTML & HTMLDivAttributes;
+export type DatePickerDescriptionProps = DatePickerDescriptionPropsWithoutHTML & HTMLDivAttributes;
+export type DatePickerCalendarProps = DatePickerCalendarPropsWithoutHTML & HTMLDivAttributes;

package/dist/bits/date-range-field/components/date-range-field-input.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { InputProps } from "../types.js";
+import type { InputProps } from "../index.js";
 declare const __propDef: {
     props: InputProps;
     events: {

package/dist/bits/date-range-field/components/date-range-field-label.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { LabelProps } from "../types.js";
+import type { LabelProps } from "../index.js";
 declare const __propDef: {
     props: LabelProps;
     events: {

package/dist/bits/date-range-field/components/date-range-field-segment.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { SegmentProps } from "../types.js";
+import type { SegmentProps } from "../index.js";
 declare const __propDef: {
     props: SegmentProps;
     events: {