bits-ui 0.12.0 → 0.13.1

package/dist/bits/date-range-field/ctx.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="svelte" />
 import { type CreateDateRangeFieldProps } from "@melt-ui/svelte";
-export declare const getAttrs: (part: "segment" | "label" | "input" | "field") => Record<string, string>;
+type GetReturn = Omit<ReturnType<typeof setCtx>, "updateOption">;
 export declare function setCtx(props: CreateDateRangeFieldProps): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
+    getAttrs: (part: "segment" | "label" | "input") => Record<string, string>;
     elements: {
         field: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Readable<import("@internationalized/date").DateValue | undefined>, import("svelte/store").Readable<boolean>, import("svelte/store").Readable<{
             field: string;
@@ -76,9 +77,9 @@ export declare function setCtx(props: CreateDateRangeFieldProps): {
             dayPeriod: string;
             timeZoneName: string;
         }, string]) => (part: import("@melt-ui/svelte").SegmentPart) => {
-            'aria-invalid': string | undefined;
-            'aria-disabled': string | undefined;
-            'aria-readonly': string | undefined;
+            'aria-invalid': "true" | undefined;
+            'aria-disabled': "true" | undefined;
+            'aria-readonly': "true" | undefined;
             'data-invalid': string | undefined;
             'data-disabled': string | undefined;
             'data-segment': string;
@@ -88,9 +89,9 @@ export declare function setCtx(props: CreateDateRangeFieldProps): {
             contentEditable: boolean;
             'aria-describedby': string | undefined;
             tabindex: number | undefined;
-            'aria-invalid': string | undefined;
-            'aria-disabled': string | undefined;
-            'aria-readonly': string | undefined;
+            'aria-invalid': "true" | undefined;
+            'aria-disabled': "true" | undefined;
+            'aria-readonly': "true" | undefined;
             'data-invalid': string | undefined;
             'data-disabled': string | undefined;
             'data-segment': string;
@@ -141,9 +142,9 @@ export declare function setCtx(props: CreateDateRangeFieldProps): {
             dayPeriod: string;
             timeZoneName: string;
         }, string]) => (part: import("@melt-ui/svelte").SegmentPart) => {
-            'aria-invalid': string | undefined;
-            'aria-disabled': string | undefined;
-            'aria-readonly': string | undefined;
+            'aria-invalid': "true" | undefined;
+            'aria-disabled': "true" | undefined;
+            'aria-readonly': "true" | undefined;
             'data-invalid': string | undefined;
             'data-disabled': string | undefined;
             'data-segment': string;
@@ -153,9 +154,9 @@ export declare function setCtx(props: CreateDateRangeFieldProps): {
             contentEditable: boolean;
             'aria-describedby': string | undefined;
             tabindex: number | undefined;
-            'aria-invalid': string | undefined;
-            'aria-disabled': string | undefined;
-            'aria-readonly': string | undefined;
+            'aria-invalid': "true" | undefined;
+            'aria-disabled': "true" | undefined;
+            'aria-readonly': "true" | undefined;
             'data-invalid': string | undefined;
             'data-disabled': string | undefined;
             'data-segment': string;
@@ -167,7 +168,7 @@ export declare function setCtx(props: CreateDateRangeFieldProps): {
         }, import("svelte/store").Writable<string | undefined>, import("svelte/store").Writable<boolean>, import("svelte/store").Writable<boolean>], import("svelte/action").Action<any, any, Record<never, any>>, ([$value, $nameStore, $disabled, $required]: [import("@internationalized/date").DateValue | undefined, string | undefined, boolean, boolean]) => {
             name: string | undefined;
             value: string | undefined;
-            'aria-hidden': string;
+            'aria-hidden': "true";
             hidden: boolean;
             disabled: boolean;
             required: boolean;
@@ -181,313 +182,7 @@ export declare function setCtx(props: CreateDateRangeFieldProps): {
         }, import("svelte/store").Writable<string | undefined>, import("svelte/store").Writable<boolean>, import("svelte/store").Writable<boolean>], import("svelte/action").Action<any, any, Record<never, any>>, ([$value, $nameStore, $disabled, $required]: [import("@internationalized/date").DateValue | undefined, string | undefined, boolean, boolean]) => {
             name: string | undefined;
             value: string | undefined;
-            'aria-hidden': string;
-            hidden: boolean;
-            disabled: boolean;
-            required: boolean;
-            tabIndex: number;
-            style: string;
-        }, string>;
-        validation: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Readable<boolean>, import("svelte/store").Writable<string>], import("svelte/action").Action<any, any, Record<never, any>>, ([$isInvalid, $validationId]: [boolean, string]) => {
-            id: string;
-            'data-invalid': string | undefined;
-            style: string | undefined;
-        }, string>;
-    };
-    states: {
-        value: {
-            update: (updater: import("svelte/store").Updater<import("@melt-ui/svelte").DateRange>, sideEffect?: ((newValue: import("@melt-ui/svelte").DateRange) => void) | undefined) => void;
-            set: (this: void, value: import("@melt-ui/svelte").DateRange) => void;
-            subscribe(this: void, run: import("svelte/store").Subscriber<import("@melt-ui/svelte").DateRange>, invalidate?: import("svelte/store").Invalidator<import("@melt-ui/svelte").DateRange> | undefined): import("svelte/store").Unsubscriber;
-        };
-        placeholder: {
-            set: (this: void, value: import("@internationalized/date").DateValue) => void;
-            subscribe: (this: void, run: import("svelte/store").Subscriber<import("@internationalized/date").DateValue>, invalidate?: import("svelte/store").Invalidator<import("@internationalized/date").DateValue> | undefined) => import("svelte/store").Unsubscriber;
-            update: (this: void, updater: import("svelte/store").Updater<import("@internationalized/date").DateValue>) => void;
-        };
-        segmentContents: import("svelte/store").Readable<{
-            start: {
-                part: import("@melt-ui/svelte").SegmentPart;
-                value: string;
-            }[];
-            end: {
-                part: import("@melt-ui/svelte").SegmentPart;
-                value: string;
-            }[];
-        }>;
-        endSegmentValues: import("svelte/store").Writable<import("@melt-ui/svelte/dist/builders/date-field/_internal/types").DateSegmentObj | import("@melt-ui/svelte/dist/builders/date-field/_internal/types").DateAndTimeSegmentObj>;
-        startSegmentValues: import("svelte/store").Writable<import("@melt-ui/svelte/dist/builders/date-field/_internal/types").DateSegmentObj | import("@melt-ui/svelte/dist/builders/date-field/_internal/types").DateAndTimeSegmentObj>;
-        isInvalid: import("svelte/store").Readable<boolean>;
-    };
-    options: {
-        endName: import("svelte/store").Writable<string | undefined>;
-        startName: import("svelte/store").Writable<string | undefined>;
-        disabled: import("svelte/store").Writable<boolean>;
-        onValueChange?: import("svelte/store").Writable<import("@melt-ui/svelte/internal/helpers").ChangeFn<import("@melt-ui/svelte").DateRange> | undefined> | undefined;
-        defaultValue: import("svelte/store").Writable<import("@melt-ui/svelte").DateRange>;
-        ids?: import("svelte/store").Writable<Partial<{
-            label: string;
-            description: string;
-            field: string;
-            validation: string;
-        }> | undefined> | undefined;
-        required?: import("svelte/store").Writable<boolean | undefined> | undefined;
-        minValue: import("svelte/store").Writable<import("@internationalized/date").DateValue | undefined>;
-        maxValue: import("svelte/store").Writable<import("@internationalized/date").DateValue | undefined>;
-        defaultPlaceholder?: import("svelte/store").Writable<import("@internationalized/date").DateValue | undefined> | undefined;
-        onPlaceholderChange?: import("svelte/store").Writable<import("@melt-ui/svelte/internal/helpers").ChangeFn<import("@internationalized/date").DateValue> | undefined> | undefined;
-        isDateUnavailable: import("svelte/store").Writable<import("@melt-ui/svelte").Matcher | undefined>;
-        locale: import("svelte/store").Writable<string>;
-        readonly: import("svelte/store").Writable<boolean>;
-        granularity: import("svelte/store").Writable<import("@melt-ui/svelte").Granularity | undefined>;
-        hourCycle: import("svelte/store").Writable<12 | 24 | undefined>;
-        hideTimeZone: import("svelte/store").Writable<boolean>;
-        startIds?: import("svelte/store").Writable<Partial<{
-            label: string;
-            description: string;
-            month: string;
-            year: string;
-            day: string;
-            hour: string;
-            minute: string;
-            second: string;
-            dayPeriod: string;
-            timeZoneName: string;
-            field: string;
-            validation: string;
-        }> | undefined> | undefined;
-        endIds?: import("svelte/store").Writable<Partial<{
-            label: string;
-            description: string;
-            month: string;
-            year: string;
-            day: string;
-            hour: string;
-            minute: string;
-            second: string;
-            dayPeriod: string;
-            timeZoneName: string;
-            field: string;
-            validation: string;
-        }> | undefined> | undefined;
-    };
-    ids: {
-        field: import("@melt-ui/svelte/internal/helpers").ToWritableStores<{
-            label: string;
-            description: string;
-            field: string;
-            validation: string;
-        }>;
-        start: import("@melt-ui/svelte/internal/helpers").ToWritableStores<{
-            label: string;
-            description: string;
-            month: string;
-            year: string;
-            day: string;
-            hour: string;
-            minute: string;
-            second: string;
-            dayPeriod: string;
-            timeZoneName: string;
-            field: string;
-            validation: string;
-        }>;
-        end: import("@melt-ui/svelte/internal/helpers").ToWritableStores<{
-            label: string;
-            description: string;
-            month: string;
-            year: string;
-            day: string;
-            hour: string;
-            minute: string;
-            second: string;
-            dayPeriod: string;
-            timeZoneName: string;
-            field: string;
-            validation: string;
-        }>;
-    };
-};
-export declare function getCtx(): {
-    elements: {
-        field: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Readable<import("@internationalized/date").DateValue | undefined>, import("svelte/store").Readable<boolean>, import("svelte/store").Readable<{
-            field: string;
-            label: string;
-            description: string;
-            validation: string;
-        }>], <Node_1 extends unknown>() => {
-            destroy(): void;
-        }, ([$isCompleted, $isInvalid, $ids]: [import("@internationalized/date").DateValue | undefined, boolean, {
-            field: string;
-            label: string;
-            description: string;
-            validation: string;
-        }]) => {
-            role: string;
-            id: string;
-            'aria-labelledby': string;
-            'aria-describedby': string;
-            'data-invalid': string | undefined;
-        }, string>;
-        label: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Readable<boolean>, import("svelte/store").Writable<boolean>, import("svelte/store").Writable<string>], (node: HTMLElement) => {
-            destroy: () => void;
-        }, ([$isInvalid, $disabled, $labelId]: [boolean, boolean, string]) => {
-            id: string;
-            'data-invalid': string | undefined;
-            'data-disabled': string | undefined;
-        }, string>;
-        startSegment: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Writable<import("@melt-ui/svelte/dist/builders/date-field/_internal/types").DateSegmentObj | import("@melt-ui/svelte/dist/builders/date-field/_internal/types").DateAndTimeSegmentObj>, import("svelte/store").Writable<12 | 24 | undefined>, {
-            set: (this: void, value: import("@internationalized/date").DateValue) => void;
-            update: (this: void, updater: import("svelte/store").Updater<import("@internationalized/date").DateValue>) => void;
-            subscribe: (this: void, run: import("svelte/store").Subscriber<import("@internationalized/date").DateValue>, invalidate?: import("svelte/store").Invalidator<import("@internationalized/date").DateValue> | undefined) => import("svelte/store").Unsubscriber;
-            add: (duration: import("@internationalized/date").DateTimeDuration | import("@internationalized/date").DateDuration) => void;
-            subtract: (duration: import("@internationalized/date").DateTimeDuration | import("@internationalized/date").DateDuration) => void;
-            setDate: (fields: import("@internationalized/date").DateFields | (import("@internationalized/date").DateFields & import("@internationalized/date").TimeFields), disambiguation?: import("@internationalized/date").Disambiguation | undefined) => void;
-            reset: () => void;
-            toWritable: () => {
-                set: (this: void, value: import("@internationalized/date").DateValue) => void;
-                subscribe: (this: void, run: import("svelte/store").Subscriber<import("@internationalized/date").DateValue>, invalidate?: import("svelte/store").Invalidator<import("@internationalized/date").DateValue> | undefined) => import("svelte/store").Unsubscriber;
-                update: (this: void, updater: import("svelte/store").Updater<import("@internationalized/date").DateValue>) => void;
-            };
-            nextPage: (amount: number) => void;
-            prevPage: (amount: number) => void;
-        }, {
-            update: (updater: import("svelte/store").Updater<import("@internationalized/date").DateValue | undefined>, sideEffect?: ((newValue: import("@internationalized/date").DateValue | undefined) => void) | undefined) => void;
-            set: (this: void, value: import("@internationalized/date").DateValue | undefined) => void;
-            subscribe(this: void, run: import("svelte/store").Subscriber<import("@internationalized/date").DateValue | undefined>, invalidate?: import("svelte/store").Invalidator<import("@internationalized/date").DateValue | undefined> | undefined): import("svelte/store").Unsubscriber;
-        }, import("svelte/store").Readable<boolean>, import("svelte/store").Writable<boolean>, import("svelte/store").Writable<boolean>, import("svelte/store").Readable<{
-            field: string;
-            label: string;
-            description: string;
-            validation: string;
-            day: string;
-            month: string;
-            year: string;
-            hour: string;
-            minute: string;
-            second: string;
-            dayPeriod: string;
-            timeZoneName: string;
-        }>, import("svelte/store").Writable<string>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click" | "focusout">, ([$segmentValues, $hourCycle, $placeholder, $value, $isInvalid, $disabled, $readonly, $idValues, _,]: [import("@melt-ui/svelte/dist/builders/date-field/_internal/types").DateSegmentObj | import("@melt-ui/svelte/dist/builders/date-field/_internal/types").DateAndTimeSegmentObj, 12 | 24 | undefined, import("@internationalized/date").DateValue, import("@internationalized/date").DateValue | undefined, boolean, boolean, boolean, {
-            field: string;
-            label: string;
-            description: string;
-            validation: string;
-            day: string;
-            month: string;
-            year: string;
-            hour: string;
-            minute: string;
-            second: string;
-            dayPeriod: string;
-            timeZoneName: string;
-        }, string]) => (part: import("@melt-ui/svelte").SegmentPart) => {
-            'aria-invalid': string | undefined;
-            'aria-disabled': string | undefined;
-            'aria-readonly': string | undefined;
-            'data-invalid': string | undefined;
-            'data-disabled': string | undefined;
-            'data-segment': string;
-        } | {
-            id: string;
-            'aria-labelledby': string;
-            contentEditable: boolean;
-            'aria-describedby': string | undefined;
-            tabindex: number | undefined;
-            'aria-invalid': string | undefined;
-            'aria-disabled': string | undefined;
-            'aria-readonly': string | undefined;
-            'data-invalid': string | undefined;
-            'data-disabled': string | undefined;
-            'data-segment': string;
-        }, string>;
-        endSegment: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Writable<import("@melt-ui/svelte/dist/builders/date-field/_internal/types").DateSegmentObj | import("@melt-ui/svelte/dist/builders/date-field/_internal/types").DateAndTimeSegmentObj>, import("svelte/store").Writable<12 | 24 | undefined>, {
-            set: (this: void, value: import("@internationalized/date").DateValue) => void;
-            update: (this: void, updater: import("svelte/store").Updater<import("@internationalized/date").DateValue>) => void;
-            subscribe: (this: void, run: import("svelte/store").Subscriber<import("@internationalized/date").DateValue>, invalidate?: import("svelte/store").Invalidator<import("@internationalized/date").DateValue> | undefined) => import("svelte/store").Unsubscriber;
-            add: (duration: import("@internationalized/date").DateTimeDuration | import("@internationalized/date").DateDuration) => void;
-            subtract: (duration: import("@internationalized/date").DateTimeDuration | import("@internationalized/date").DateDuration) => void;
-            setDate: (fields: import("@internationalized/date").DateFields | (import("@internationalized/date").DateFields & import("@internationalized/date").TimeFields), disambiguation?: import("@internationalized/date").Disambiguation | undefined) => void;
-            reset: () => void;
-            toWritable: () => {
-                set: (this: void, value: import("@internationalized/date").DateValue) => void;
-                subscribe: (this: void, run: import("svelte/store").Subscriber<import("@internationalized/date").DateValue>, invalidate?: import("svelte/store").Invalidator<import("@internationalized/date").DateValue> | undefined) => import("svelte/store").Unsubscriber;
-                update: (this: void, updater: import("svelte/store").Updater<import("@internationalized/date").DateValue>) => void;
-            };
-            nextPage: (amount: number) => void;
-            prevPage: (amount: number) => void;
-        }, {
-            update: (updater: import("svelte/store").Updater<import("@internationalized/date").DateValue | undefined>, sideEffect?: ((newValue: import("@internationalized/date").DateValue | undefined) => void) | undefined) => void;
-            set: (this: void, value: import("@internationalized/date").DateValue | undefined) => void;
-            subscribe(this: void, run: import("svelte/store").Subscriber<import("@internationalized/date").DateValue | undefined>, invalidate?: import("svelte/store").Invalidator<import("@internationalized/date").DateValue | undefined> | undefined): import("svelte/store").Unsubscriber;
-        }, import("svelte/store").Readable<boolean>, import("svelte/store").Writable<boolean>, import("svelte/store").Writable<boolean>, import("svelte/store").Readable<{
-            field: string;
-            label: string;
-            description: string;
-            validation: string;
-            day: string;
-            month: string;
-            year: string;
-            hour: string;
-            minute: string;
-            second: string;
-            dayPeriod: string;
-            timeZoneName: string;
-        }>, import("svelte/store").Writable<string>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click" | "focusout">, ([$segmentValues, $hourCycle, $placeholder, $value, $isInvalid, $disabled, $readonly, $idValues, _,]: [import("@melt-ui/svelte/dist/builders/date-field/_internal/types").DateSegmentObj | import("@melt-ui/svelte/dist/builders/date-field/_internal/types").DateAndTimeSegmentObj, 12 | 24 | undefined, import("@internationalized/date").DateValue, import("@internationalized/date").DateValue | undefined, boolean, boolean, boolean, {
-            field: string;
-            label: string;
-            description: string;
-            validation: string;
-            day: string;
-            month: string;
-            year: string;
-            hour: string;
-            minute: string;
-            second: string;
-            dayPeriod: string;
-            timeZoneName: string;
-        }, string]) => (part: import("@melt-ui/svelte").SegmentPart) => {
-            'aria-invalid': string | undefined;
-            'aria-disabled': string | undefined;
-            'aria-readonly': string | undefined;
-            'data-invalid': string | undefined;
-            'data-disabled': string | undefined;
-            'data-segment': string;
-        } | {
-            id: string;
-            'aria-labelledby': string;
-            contentEditable: boolean;
-            'aria-describedby': string | undefined;
-            tabindex: number | undefined;
-            'aria-invalid': string | undefined;
-            'aria-disabled': string | undefined;
-            'aria-readonly': string | undefined;
-            'data-invalid': string | undefined;
-            'data-disabled': string | undefined;
-            'data-segment': string;
-        }, string>;
-        startHiddenInput: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[{
-            update: (updater: import("svelte/store").Updater<import("@internationalized/date").DateValue | undefined>, sideEffect?: ((newValue: import("@internationalized/date").DateValue | undefined) => void) | undefined) => void;
-            set: (this: void, value: import("@internationalized/date").DateValue | undefined) => void;
-            subscribe(this: void, run: import("svelte/store").Subscriber<import("@internationalized/date").DateValue | undefined>, invalidate?: import("svelte/store").Invalidator<import("@internationalized/date").DateValue | undefined> | undefined): import("svelte/store").Unsubscriber;
-        }, import("svelte/store").Writable<string | undefined>, import("svelte/store").Writable<boolean>, import("svelte/store").Writable<boolean>], import("svelte/action").Action<any, any, Record<never, any>>, ([$value, $nameStore, $disabled, $required]: [import("@internationalized/date").DateValue | undefined, string | undefined, boolean, boolean]) => {
-            name: string | undefined;
-            value: string | undefined;
-            'aria-hidden': string;
-            hidden: boolean;
-            disabled: boolean;
-            required: boolean;
-            tabIndex: number;
-            style: string;
-        }, string>;
-        endHiddenInput: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[{
-            update: (updater: import("svelte/store").Updater<import("@internationalized/date").DateValue | undefined>, sideEffect?: ((newValue: import("@internationalized/date").DateValue | undefined) => void) | undefined) => void;
-            set: (this: void, value: import("@internationalized/date").DateValue | undefined) => void;
-            subscribe(this: void, run: import("svelte/store").Subscriber<import("@internationalized/date").DateValue | undefined>, invalidate?: import("svelte/store").Invalidator<import("@internationalized/date").DateValue | undefined> | undefined): import("svelte/store").Unsubscriber;
-        }, import("svelte/store").Writable<string | undefined>, import("svelte/store").Writable<boolean>, import("svelte/store").Writable<boolean>], import("svelte/action").Action<any, any, Record<never, any>>, ([$value, $nameStore, $disabled, $required]: [import("@internationalized/date").DateValue | undefined, string | undefined, boolean, boolean]) => {
-            name: string | undefined;
-            value: string | undefined;
-            'aria-hidden': string;
+            'aria-hidden': "true";
             hidden: boolean;
             disabled: boolean;
             required: boolean;
@@ -614,3 +309,5 @@ export declare function getCtx(): {
         }>;
     };
 };
+export declare function getCtx(): GetReturn;
+export {};

package/dist/bits/date-range-field/ctx.js

@@ -1,17 +1,18 @@
 import { createDateRangeField } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
 import { removeUndefined, getOptionUpdater, createBitAttrs } from "../../internal/index.js";
-const NAME = "date-field";
-const PARTS = ["label", "field", "input", "segment"];
-export const getAttrs = createBitAttrs(NAME, PARTS);
+import { getDateFieldData } from "../date-field/ctx";
 export function setCtx(props) {
-    const dateField = createDateRangeField(removeUndefined(props));
-    setContext(NAME, dateField);
+    const { NAME, PARTS } = getDateFieldData();
+    const getAttrs = createBitAttrs(NAME, PARTS);
+    const dateRangeField = { ...createDateRangeField(removeUndefined(props)), getAttrs };
+    setContext(NAME, dateRangeField);
     return {
-        ...dateField,
-        updateOption: getOptionUpdater(dateField.options)
+        ...dateRangeField,
+        updateOption: getOptionUpdater(dateRangeField.options)
     };
 }
 export function getCtx() {
+    const { NAME } = getDateFieldData();
     return getContext(NAME);
 }

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

@@ -1,11 +1,12 @@
-<script>import { getPopoverAttrs, getCtx } from "../ctx.js";
+<script>import { getCtx } from "../ctx.js";
 import { melt } from "@melt-ui/svelte";
 export let asChild = false;
 export let el = void 0;
 export let size = 8;
 const {
   elements: { arrow },
-  updateOption
+  updateOption,
+  getPopoverAttrs
 } = getCtx();
 const attrs = getPopoverAttrs("arrow");
 $:

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

@@ -1,12 +1,13 @@
 <script>import { melt } from "@melt-ui/svelte";
-import { getCtx, getCalendarAttrs } from "../ctx.js";
+import { getCtx } from "../ctx.js";
 export let asChild = false;
 export let id = void 0;
 export let el = void 0;
 const {
   elements: { calendar },
   states: { months: localMonths, weekdays },
-  ids
+  ids,
+  getCalendarAttrs
 } = getCtx();
 $:
   if (id) {

package/dist/bits/date-range-picker/components/date-range-picker-cell.svelte

@@ -1,9 +1,10 @@
-<script>import { getCtx, getCalendarAttrs } from "../ctx.js";
+<script>import { getCtx } from "../ctx.js";
 export let date;
 export let asChild = false;
 export let el = void 0;
 const {
-  helpers: { isDateDisabled, isDateUnavailable }
+  helpers: { isDateDisabled, isDateUnavailable },
+  getCalendarAttrs
 } = getCtx();
 $:
   attrs = {

package/dist/bits/date-range-picker/components/date-range-picker-close.svelte

@@ -1,10 +1,11 @@
 <script>import { melt } from "@melt-ui/svelte";
-import { getCtx, getPopoverAttrs } from "../ctx.js";
+import { getCtx } from "../ctx.js";
 import { createDispatcher } from "../../../internal/events.js";
 export let asChild = false;
 export let el = void 0;
 const {
-  elements: { close }
+  elements: { close },
+  getPopoverAttrs
 } = getCtx();
 const dispatch = createDispatcher();
 const attrs = getPopoverAttrs("close");

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

@@ -1,5 +1,5 @@
 <script>import { melt } from "@melt-ui/svelte";
-import { getCtx, getPopoverAttrs, updatePositioning } from "../ctx.js";
+import { getCtx, updatePositioning } from "../ctx.js";
 export let transition = void 0;
 export let transitionConfig = void 0;
 export let inTransition = void 0;
@@ -23,7 +23,8 @@ export let el = void 0;
 const {
   elements: { content },
   states: { open },
-  ids
+  ids,
+  getPopoverAttrs
 } = getCtx();
 const attrs = getPopoverAttrs("content");
 $:

package/dist/bits/date-range-picker/components/date-range-picker-day.svelte

@@ -1,12 +1,13 @@
 <script>import { melt } from "@melt-ui/svelte";
-import { getCtx, getCalendarAttrs } from "../ctx.js";
+import { getCtx } from "../ctx.js";
 export let date;
 export let month;
 export let asChild = false;
 export let el = void 0;
 const {
   elements: { cell },
-  helpers: { isDateDisabled, isDateUnavailable }
+  helpers: { isDateDisabled, isDateUnavailable },
+  getCalendarAttrs
 } = getCtx();
 const attrs = getCalendarAttrs("day");
 $:

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

@@ -7,7 +7,7 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            builder: ((cellValue: import("@internationalized/date").DateValue, monthValue: import("@internationalized/date").DateValue) => {
+            builder: {
                 readonly role: "button";
                 readonly 'aria-label': string;
                 readonly 'aria-selected': true | undefined;
@@ -24,7 +24,7 @@ declare const __propDef: {
                 readonly 'data-focused': "" | undefined;
                 readonly 'data-highlighted': "" | undefined;
                 readonly tabindex: 0 | -1 | undefined;
-            }) & {
+            } & {
                 [x: `data-melt-${string}`]: "";
             } & {
                 action: (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"click" | "focusin" | "mouseenter">;

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

@@ -5,6 +5,7 @@ declare const __propDef: {
         preventScroll?: boolean | undefined;
         closeOnEscape?: boolean | undefined;
         closeOnOutsideClick?: boolean | undefined;
+        onOutsideClick?: ((event: PointerEvent) => 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;

package/dist/bits/date-range-picker/components/date-range-picker-grid.svelte

@@ -1,9 +1,10 @@
 <script>import { melt } from "@melt-ui/svelte";
-import { getCalendarAttrs, getCtx } from "../ctx.js";
+import { getCtx } from "../ctx.js";
 export let asChild = false;
 export let el = void 0;
 const {
-  elements: { grid }
+  elements: { grid },
+  getCalendarAttrs
 } = getCtx();
 const attrs = getCalendarAttrs("grid");
 $:

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

@@ -10,8 +10,8 @@ declare const __propDef: {
             builder: {
                 tabindex: number;
                 role: string;
-                'aria-readonly': string | undefined;
-                'aria-disabled': string | undefined;
+                'aria-readonly': "true" | undefined;
+                'aria-disabled': "true" | undefined;
                 'data-readonly': string | undefined;
                 'data-disabled': string | undefined;
             } & {

package/dist/bits/date-range-picker/components/date-range-picker-heading.svelte

@@ -1,10 +1,11 @@
 <script>import { melt } from "@melt-ui/svelte";
-import { getCalendarAttrs, getCtx } from "../ctx.js";
+import { getCtx } from "../ctx.js";
 export let asChild = false;
 export let el = void 0;
 const {
   elements: { heading },
-  states: { headingValue }
+  states: { headingValue },
+  getCalendarAttrs
 } = getCtx();
 const attrs = getCalendarAttrs("heading");
 $:

package/dist/bits/date-range-picker/components/date-range-picker-input.svelte

@@ -1,12 +1,13 @@
 <script>import { melt } from "@melt-ui/svelte";
-import { getCtx, getFieldAttrs } from "../ctx.js";
+import { getCtx } from "../ctx.js";
 export let asChild = false;
 export let id = void 0;
 export let el = void 0;
 const {
   elements: { field },
   states: { segmentContents },
-  ids
+  ids,
+  getFieldAttrs
 } = getCtx();
 $:
   if (id) {

package/dist/bits/date-range-picker/components/date-range-picker-label.svelte

@@ -1,11 +1,12 @@
 <script>import { melt } from "@melt-ui/svelte";
-import { getCtx, getFieldAttrs } from "../ctx.js";
+import { getCtx } from "../ctx.js";
 export let asChild = false;
 export let id = void 0;
 export let el = void 0;
 const {
   elements: { label },
-  ids
+  ids,
+  getFieldAttrs
 } = getCtx();
 if (id) {
   ids.rangeField.field.label.set(id);

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

@@ -1,9 +1,10 @@
 <script>import { melt } from "@melt-ui/svelte";
-import { getCalendarAttrs, getCtx } from "../ctx.js";
+import { getCtx } from "../ctx.js";
 export let asChild = false;
 export let el = void 0;
 const {
-  elements: { nextButton }
+  elements: { nextButton },
+  getCalendarAttrs
 } = getCtx();
 const attrs = getCalendarAttrs("next-button");
 $:

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

@@ -10,7 +10,7 @@ declare const __propDef: {
             builder: {
                 role: string;
                 'aria-label': string;
-                'aria-disabled': string | undefined;
+                'aria-disabled': "true" | undefined;
                 disabled: boolean | undefined;
                 'data-disabled': string | undefined;
             } & {