bits-ui 0.12.0 → 0.13.1

package/dist/bits/progress/ctx.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="svelte" />
 import { type CreateProgressProps } from "@melt-ui/svelte";
-export declare const getAttrs: (part: "root") => Record<string, string>;
 export declare function setCtx(props: CreateProgressProps): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
+    getAttrs: (part: "root") => Record<string, string>;
     elements: {
         root: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[{
             update: (updater: import("svelte/store").Updater<number>, sideEffect?: ((newValue: number) => void) | undefined) => void;

package/dist/bits/progress/ctx.js

@@ -1,10 +1,17 @@
 import { createProgress } from "@melt-ui/svelte";
 import { createBitAttrs, getOptionUpdater, removeUndefined } from "../../internal/index.js";
-const NAME = "progress";
-const PARTS = ["root"];
-export const getAttrs = createBitAttrs(NAME, PARTS);
+function getProgressData() {
+    const NAME = "progress";
+    const PARTS = ["root"];
+    return {
+        NAME,
+        PARTS
+    };
+}
 export function setCtx(props) {
-    const progress = createProgress(removeUndefined(props));
+    const { NAME, PARTS } = getProgressData();
+    const getAttrs = createBitAttrs(NAME, PARTS);
+    const progress = { ...createProgress(removeUndefined(props)), getAttrs };
     return {
         ...progress,
         updateOption: getOptionUpdater(progress.options)

package/dist/bits/radio-group/components/radio-group-input.svelte

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

package/dist/bits/radio-group/components/radio-group-item-indicator.svelte

@@ -1,7 +1,11 @@
-<script>import { getRadioIndicator, getAttrs } from "../ctx.js";
+<script>import { getRadioIndicator } from "../ctx.js";
 export let asChild = false;
 export let el = void 0;
-const { isChecked, value } = getRadioIndicator();
+const {
+  helpers: { isChecked },
+  value,
+  getAttrs
+} = getRadioIndicator();
 const attrs = getAttrs("item-indicator");
 $:
   checked = $isChecked(value);

package/dist/bits/radio-group/components/radio-group-item.svelte

@@ -1,12 +1,13 @@
 <script>import { melt } from "@melt-ui/svelte";
-import { setItemCtx, getAttrs } from "../ctx.js";
+import { setItemCtx } from "../ctx.js";
 import { createDispatcher } from "../../../internal/events.js";
 export let value;
 export let disabled = false;
 export let asChild = false;
 export let el = void 0;
 const {
-  elements: { item }
+  elements: { item },
+  getAttrs
 } = setItemCtx(value);
 const dispatch = createDispatcher();
 const attrs = getAttrs("item");

package/dist/bits/radio-group/components/radio-group-item.svelte.d.ts

@@ -4,7 +4,7 @@ declare const __propDef: {
     props: ItemProps;
     slots: {
         default: {
-            builder: ((props: import("@melt-ui/svelte/index.js").RadioGroupItemProps) => {
+            builder: {
                 readonly disabled: boolean;
                 readonly 'data-value': string;
                 readonly 'data-orientation': import("@melt-ui/svelte/internal/types").Orientation;
@@ -14,7 +14,7 @@ declare const __propDef: {
                 readonly type: "button";
                 readonly role: "radio";
                 readonly tabindex: 0 | -1;
-            }) & {
+            } & {
                 [x: `data-melt-${string}`]: "";
             } & {
                 action: (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click" | "focus">;

package/dist/bits/radio-group/components/radio-group.svelte

@@ -1,5 +1,5 @@
 <script>import { melt } from "@melt-ui/svelte";
-import { setCtx, getAttrs } from "../ctx.js";
+import { setCtx } from "../ctx.js";
 export let required = void 0;
 export let disabled = void 0;
 export let value = void 0;
@@ -11,7 +11,8 @@ export let el = void 0;
 const {
   elements: { root },
   states: { value: localValue },
-  updateOption
+  updateOption,
+  getAttrs
 } = setCtx({
   required,
   disabled,

package/dist/bits/radio-group/ctx.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="svelte" />
-import { type CreateRadioGroupProps, type RadioGroup as RadioGroupReturn } from "@melt-ui/svelte";
-import type { Readable } from "svelte/store";
-export declare const getAttrs: (part: "input" | "root" | "item" | "item-indicator") => Record<string, string>;
+import { type CreateRadioGroupProps } from "@melt-ui/svelte";
+type GetReturn = Omit<ReturnType<typeof setCtx>, "updateOption">;
 export declare function setCtx(props: CreateRadioGroupProps): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
+    getAttrs: (part: "input" | "root" | "item" | "item-indicator") => Record<string, string>;
     elements: {
         root: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Writable<boolean>, import("svelte/store").Writable<import("@melt-ui/svelte/internal/types").Orientation>], import("svelte/action").Action<any, any, Record<never, any>>, ([$required, $orientation]: [boolean, import("@melt-ui/svelte/internal/types").Orientation]) => {
             readonly role: "radiogroup";
@@ -48,7 +48,7 @@ export declare function setCtx(props: CreateRadioGroupProps): {
         };
     };
     helpers: {
-        isChecked: Readable<(itemValue: string) => boolean>;
+        isChecked: import("svelte/store").Readable<(itemValue: string) => boolean>;
     };
     options: import("@melt-ui/svelte/internal/helpers").ToWritableStores<Omit<{
         disabled: boolean;
@@ -60,9 +60,66 @@ export declare function setCtx(props: CreateRadioGroupProps): {
         onValueChange?: import("@melt-ui/svelte/internal/helpers").ChangeFn<string> | undefined;
     }, "value">>;
 };
-export declare function getCtx(): RadioGroupReturn;
-export declare function setItemCtx(value: string): RadioGroupReturn;
-export declare function getRadioIndicator(): {
-    isChecked: Readable<(itemValue: string) => boolean>;
+export declare function getCtx(): GetReturn;
+export declare function setItemCtx(value: string): {
     value: string;
+    elements: {
+        root: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Writable<boolean>, import("svelte/store").Writable<import("@melt-ui/svelte/internal/types").Orientation>], import("svelte/action").Action<any, any, Record<never, any>>, ([$required, $orientation]: [boolean, import("@melt-ui/svelte/internal/types").Orientation]) => {
+            readonly role: "radiogroup";
+            readonly 'aria-required': boolean;
+            readonly 'data-orientation': import("@melt-ui/svelte/internal/types").Orientation;
+        }, string>;
+        item: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[{
+            update: (updater: import("svelte/store").Updater<string>, sideEffect?: ((newValue: string) => void) | undefined) => void;
+            set: (this: void, value: string) => void;
+            subscribe(this: void, run: import("svelte/store").Subscriber<string>, invalidate?: import("svelte/store").Invalidator<string> | undefined): import("svelte/store").Unsubscriber;
+        }, import("svelte/store").Writable<import("@melt-ui/svelte/internal/types").Orientation>, import("svelte/store").Writable<boolean>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click" | "focus">, ([$value, $orientation, $disabled]: [string, import("@melt-ui/svelte/internal/types").Orientation, boolean]) => (props: import("@melt-ui/svelte").RadioGroupItemProps) => {
+            readonly disabled: boolean;
+            readonly 'data-value': string;
+            readonly 'data-orientation': import("@melt-ui/svelte/internal/types").Orientation;
+            readonly 'data-disabled': true | undefined;
+            readonly 'data-state': "checked" | "unchecked";
+            readonly 'aria-checked': boolean;
+            readonly type: "button";
+            readonly role: "radio";
+            readonly tabindex: 0 | -1;
+        }, string>;
+        hiddenInput: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Writable<boolean>, {
+            update: (updater: import("svelte/store").Updater<string>, sideEffect?: ((newValue: string) => void) | undefined) => void;
+            set: (this: void, value: string) => void;
+            subscribe(this: void, run: import("svelte/store").Subscriber<string>, invalidate?: import("svelte/store").Invalidator<string> | undefined): import("svelte/store").Unsubscriber;
+        }, import("svelte/store").Writable<boolean>], (_node: HTMLInputElement) => void, ([$disabled, $value, $required]: [boolean, string, boolean]) => {
+            disabled: boolean | undefined;
+            value: string;
+            required: boolean;
+            type: string;
+            'aria-hidden': boolean;
+            hidden: boolean;
+            tabIndex: number;
+            style: string;
+        }, string>;
+    };
+    states: {
+        value: {
+            update: (updater: import("svelte/store").Updater<string>, sideEffect?: ((newValue: string) => void) | undefined) => void;
+            set: (this: void, value: string) => void;
+            subscribe(this: void, run: import("svelte/store").Subscriber<string>, invalidate?: import("svelte/store").Invalidator<string> | undefined): import("svelte/store").Unsubscriber;
+        };
+    };
+    getAttrs: (part: "input" | "root" | "item" | "item-indicator") => Record<string, string>;
+    helpers: {
+        isChecked: import("svelte/store").Readable<(itemValue: string) => boolean>;
+    };
+    options: import("@melt-ui/svelte/internal/helpers").ToWritableStores<Omit<{
+        disabled: boolean;
+        required: boolean;
+        loop: boolean;
+        orientation: import("@melt-ui/svelte/internal/types").Orientation;
+        defaultValue: string | undefined;
+        value?: import("svelte/store").Writable<string> | undefined;
+        onValueChange?: import("@melt-ui/svelte/internal/helpers").ChangeFn<string> | undefined;
+    }, "value">>;
 };
+type GetItemReturn = Omit<ReturnType<typeof setItemCtx>, "updateOption">;
+export declare function getRadioIndicator(): GetItemReturn;
+export {};

package/dist/bits/radio-group/ctx.js

@@ -2,12 +2,20 @@ import { createBitAttrs, getOptionUpdater } from "../../internal/index.js";
 import { createRadioGroup } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
 import { removeUndefined } from "../../internal/index.js";
-const NAME = "radio-group";
-const ITEM_NAME = "radio-group-item";
-const PARTS = ["root", "item", "input", "item-indicator"];
-export const getAttrs = createBitAttrs(NAME, PARTS);
+function getRadioGroupData() {
+    const NAME = "radio-group";
+    const ITEM_NAME = "radio-group-item";
+    const PARTS = ["root", "item", "input", "item-indicator"];
+    return {
+        NAME,
+        ITEM_NAME,
+        PARTS
+    };
+}
 export function setCtx(props) {
-    const radioGroup = createRadioGroup(removeUndefined(props));
+    const { NAME, PARTS } = getRadioGroupData();
+    const getAttrs = createBitAttrs(NAME, PARTS);
+    const radioGroup = { ...createRadioGroup(removeUndefined(props)), getAttrs };
     setContext(NAME, radioGroup);
     return {
         ...radioGroup,
@@ -15,13 +23,16 @@ export function setCtx(props) {
     };
 }
 export function getCtx() {
+    const { NAME } = getRadioGroupData();
     return getContext(NAME);
 }
 export function setItemCtx(value) {
-    const radioGroup = getCtx();
-    setContext(ITEM_NAME, { value, isChecked: radioGroup.helpers.isChecked });
+    const { ITEM_NAME } = getRadioGroupData();
+    const radioGroup = { ...getCtx(), value };
+    setContext(ITEM_NAME, radioGroup);
     return radioGroup;
 }
 export function getRadioIndicator() {
+    const { ITEM_NAME } = getRadioGroupData();
     return getContext(ITEM_NAME);
 }

package/dist/bits/range-calendar/components/range-calendar-cell.svelte

@@ -1,9 +1,10 @@
-<script>import { getCtx, getAttrs } 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 },
+  getAttrs
 } = getCtx();
 $:
   attrs = {

package/dist/bits/range-calendar/components/range-calendar-day.svelte

@@ -1,5 +1,5 @@
 <script>import { melt } from "@melt-ui/svelte";
-import { getCtx, getAttrs } from "../ctx.js";
+import { getCtx } from "../ctx.js";
 import { createDispatcher } from "../../../internal/events.js";
 export let date;
 export let month;
@@ -7,7 +7,8 @@ export let asChild = false;
 export let el = void 0;
 const {
   elements: { cell },
-  helpers: { isDateDisabled, isDateUnavailable }
+  helpers: { isDateDisabled, isDateUnavailable },
+  getAttrs
 } = getCtx();
 const attrs = getAttrs("day");
 const dispatch = createDispatcher();

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

@@ -4,7 +4,7 @@ declare const __propDef: {
     props: DayProps;
     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;
@@ -21,7 +21,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/range-calendar/components/range-calendar-grid-body.svelte

@@ -1,6 +1,7 @@
-<script>import { getAttrs } from "../ctx.js";
+<script>import { getCtx } from "../ctx.js";
 export let asChild = false;
 export let el = void 0;
+const { getAttrs } = getCtx();
 const attrs = getAttrs("grid-body");
 </script>
 

package/dist/bits/range-calendar/components/range-calendar-grid-head.svelte

@@ -1,6 +1,7 @@
-<script>import { getAttrs } from "../ctx.js";
+<script>import { getCtx } from "../ctx.js";
 export let asChild = false;
 export let el = void 0;
+const { getAttrs } = getCtx();
 const attrs = { ...getAttrs("grid-head"), "aria-hidden": true };
 </script>
 

package/dist/bits/range-calendar/components/range-calendar-grid-row.svelte

@@ -1,6 +1,7 @@
-<script>import { getAttrs } from "../ctx.js";
+<script>import { getCtx } from "../ctx.js";
 export let asChild = false;
 export let el = void 0;
+const { getAttrs } = getCtx();
 const attrs = getAttrs("grid-row");
 </script>
 

package/dist/bits/range-calendar/components/range-calendar-grid.svelte

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

package/dist/bits/range-calendar/components/range-calendar-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/range-calendar/components/range-calendar-head-cell.svelte

@@ -1,6 +1,7 @@
-<script>import { getAttrs } from "../ctx.js";
+<script>import { getCtx } from "../ctx.js";
 export let asChild = false;
 export let el = void 0;
+const { getAttrs } = getCtx();
 const attrs = getAttrs("head-cell");
 </script>
 

package/dist/bits/range-calendar/components/range-calendar-header.svelte

@@ -1,6 +1,7 @@
-<script>import { getAttrs } from "../ctx.js";
+<script>import { getCtx } from "../ctx.js";
 export let asChild = false;
 export let el = void 0;
+const { getAttrs } = getCtx();
 const attrs = getAttrs("header");
 </script>
 

package/dist/bits/range-calendar/components/range-calendar-heading.svelte

@@ -1,10 +1,11 @@
 <script>import { melt } from "@melt-ui/svelte";
-import { getAttrs, 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 },
+  getAttrs
 } = getCtx();
 const attrs = getAttrs("heading");
 $:

package/dist/bits/range-calendar/components/range-calendar-next-button.svelte

@@ -1,10 +1,11 @@
 <script>import { melt } from "@melt-ui/svelte";
-import { getAttrs, getCtx } 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: { nextButton }
+  elements: { nextButton },
+  getAttrs
 } = getCtx();
 const attrs = getAttrs("next-button");
 const dispatch = createDispatcher();

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

@@ -7,7 +7,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;
             } & {

package/dist/bits/range-calendar/components/range-calendar-prev-button.svelte

@@ -1,10 +1,11 @@
 <script>import { melt } from "@melt-ui/svelte";
-import { getAttrs, getCtx } 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: { prevButton }
+  elements: { prevButton },
+  getAttrs
 } = getCtx();
 const attrs = getAttrs("prev-button");
 const dispatch = createDispatcher();

package/dist/bits/range-calendar/components/range-calendar-prev-button.svelte.d.ts

@@ -7,7 +7,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;
             } & {

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

@@ -1,5 +1,5 @@
 <script>import { melt } from "@melt-ui/svelte";
-import { setCtx, getAttrs } from "../ctx.js";
+import { setCtx } from "../ctx.js";
 import { createDispatcher } from "../../../internal/events.js";
 import { onMount } from "svelte";
 import { handleCalendarInitialFocus } from "../../../internal/focus.js";
@@ -42,7 +42,8 @@ const {
     endValue
   },
   updateOption,
-  ids
+  ids,
+  getAttrs
 } = setCtx({
   defaultPlaceholder: placeholder,
   defaultValue: value,