bits-ui 0.13.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;
@@ -308,309 +309,5 @@ export declare function setCtx(props: CreateDateRangeFieldProps): {
         }>;
     };
 };
-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': "true" | undefined;
-            'aria-disabled': "true" | undefined;
-            'aria-readonly': "true" | 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': "true" | undefined;
-            'aria-disabled': "true" | undefined;
-            'aria-readonly': "true" | 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': "true" | undefined;
-            'aria-disabled': "true" | undefined;
-            'aria-readonly': "true" | 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': "true" | undefined;
-            'aria-disabled': "true" | undefined;
-            'aria-readonly': "true" | 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': "true";
-            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': "true";
-            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(): 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-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-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-prev-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: { prevButton }
+  elements: { prevButton },
+  getCalendarAttrs
 } = getCtx();
 const attrs = getCalendarAttrs("prev-button");
 $:

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

@@ -1,5 +1,5 @@
 <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 part;
@@ -7,7 +7,8 @@ export let type;
 export let el = void 0;
 const {
   elements: { startSegment, endSegment },
-  ids
+  ids,
+  getFieldAttrs
 } = getCtx();
 $:
   if (id && part !== "literal") {

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

@@ -1,12 +1,13 @@
 <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 id = void 0;
 export let el = void 0;
 const {
   elements: { trigger },
-  ids
+  ids,
+  getPopoverAttrs
 } = getCtx();
 const dispatch = createDispatcher();
 const attrs = getPopoverAttrs("trigger");

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

@@ -1,13 +1,12 @@
 /// <reference types="svelte" />
 import { type CreateDateRangePickerProps } from "@melt-ui/svelte";
 import type { Writable } from "svelte/store";
-import { getAttrs as getCalendarAttrs } from "../calendar/ctx.js";
-import { getAttrs as getFieldAttrs } from "../date-field/ctx.js";
-import { getAttrs as getPopoverAttrs } from "../popover/ctx.js";
 import type { FloatingProps } from "../floating/_types.js";
-export { getCalendarAttrs, getFieldAttrs, getPopoverAttrs };
 export declare function setCtx(props: CreateDateRangePickerProps): {
     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: "segment" | "label" | "input") => Record<string, string>;
+    getPopoverAttrs: (part: "content" | "arrow" | "trigger" | "close") => Record<string, string>;
     elements: {
         trigger: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[{
             update: (updater: import("svelte/store").Updater<boolean>, sideEffect?: ((newValue: boolean) => void) | undefined) => void;
@@ -508,6 +507,9 @@ export declare function setCtx(props: CreateDateRangePickerProps): {
 };
 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: "segment" | "label" | "input") => Record<string, string>;
+    getPopoverAttrs: (part: "content" | "arrow" | "trigger" | "close") => Record<string, string>;
     elements: {
         trigger: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[{
             update: (updater: import("svelte/store").Updater<boolean>, sideEffect?: ((newValue: boolean) => void) | undefined) => void;