bits-ui 0.13.0 → 0.13.1

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

@@ -1,29 +1,46 @@
 import { createDateRangePicker } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
-import { removeUndefined, getOptionUpdater } from "../../internal/index.js";
-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 { removeUndefined, getOptionUpdater, createBitAttrs } from "../../internal/index.js";
+import { getCalendarData } from "../calendar/ctx.js";
+import { getDateFieldData } from "../date-field/ctx.js";
+import { getPopoverData } from "../popover/ctx.js";
 import { getPositioningUpdater } from "../floating/helpers.js";
-const NAME = "date-range-picker";
-export { getCalendarAttrs, getFieldAttrs, getPopoverAttrs };
+function getDateRangePickerData() {
+    const NAME = "date-range-picker";
+    return {
+        NAME
+    };
+}
 export function setCtx(props) {
-    const dateRangePicker = createDateRangePicker(removeUndefined(props));
+    const { NAME } = getDateRangePickerData();
+    const { NAME: CALENDAR_NAME, PARTS: CALENDAR_PARTS } = getCalendarData();
+    const getCalendarAttrs = createBitAttrs(CALENDAR_NAME, CALENDAR_PARTS);
+    const { NAME: FIELD_NAME, PARTS: FIELD_PARTS } = getDateFieldData();
+    const getFieldAttrs = createBitAttrs(FIELD_NAME, FIELD_PARTS);
+    const { NAME: POPOVER_NAME, PARTS: POPOVER_PARTS } = getPopoverData();
+    const getPopoverAttrs = createBitAttrs(POPOVER_NAME, POPOVER_PARTS);
+    const dateRangePicker = {
+        ...createDateRangePicker(removeUndefined(props)),
+        getCalendarAttrs,
+        getFieldAttrs,
+        getPopoverAttrs
+    };
     const updateOption = getOptionUpdater(dateRangePicker.options);
     setContext(NAME, { ...dateRangePicker, updateOption });
     return {
         ...dateRangePicker,
-        updateOption: getOptionUpdater(dateRangePicker.options)
+        updateOption
     };
 }
 export function getCtx() {
+    const { NAME } = getDateRangePickerData();
     return getContext(NAME);
 }
-const defaultPlacement = {
-    side: "bottom",
-    align: "center"
-};
 export function updatePositioning(props) {
+    const defaultPlacement = {
+        side: "bottom",
+        align: "center"
+    };
     const withDefaults = { ...defaultPlacement, ...props };
     const { options: { positioning } } = getCtx();
     const updater = getPositioningUpdater(positioning);

package/dist/bits/dialog/components/dialog-close.svelte

@@ -1,10 +1,11 @@
 <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 asChild = false;
 export let el = void 0;
 const {
-  elements: { close }
+  elements: { close },
+  getAttrs
 } = getCtx();
 const dispatch = createDispatcher();
 const attrs = getAttrs("close");

package/dist/bits/dialog/components/dialog-content.svelte

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

package/dist/bits/dialog/components/dialog-description.svelte

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

package/dist/bits/dialog/components/dialog-overlay.svelte

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

package/dist/bits/dialog/components/dialog-portal.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: { portalled }
+  elements: { portalled },
+  getAttrs
 } = getCtx();
 const attrs = getAttrs("portal");
 $:

package/dist/bits/dialog/components/dialog-title.svelte

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

package/dist/bits/dialog/components/dialog-trigger.svelte

@@ -1,10 +1,11 @@
 <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 asChild = false;
 export let el = void 0;
 const {
-  elements: { trigger }
+  elements: { trigger },
+  getAttrs
 } = getCtx();
 const dispatch = createDispatcher();
 const attrs = getAttrs("trigger");

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

@@ -1,9 +1,14 @@
 /// <reference types="svelte" />
-import { type CreateDialogProps, type Dialog as DialogReturn } from "@melt-ui/svelte";
-export declare const getAttrs: (part: "content" | "portal" | "description" | "title" | "trigger" | "close" | "overlay") => Record<string, string>;
+import { type CreateDialogProps } from "@melt-ui/svelte";
+export declare function getDialogData(): {
+    NAME: "dialog";
+    PARTS: readonly ["close", "content", "description", "overlay", "portal", "title", "trigger"];
+};
 type SetProps = CreateDialogProps;
+type GetReturn = Omit<ReturnType<typeof setCtx>, "updateOption">;
 export declare function setCtx(props: SetProps): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
+    getAttrs: (part: "content" | "portal" | "description" | "title" | "trigger" | "close" | "overlay") => Record<string, string>;
     ids: import("@melt-ui/svelte/internal/helpers").ToWritableStores<{
         title: string;
         description: string;
@@ -83,5 +88,5 @@ export declare function setCtx(props: SetProps): {
         }> | undefined;
     }, "ids">>;
 };
-export declare function getCtx(): DialogReturn;
+export declare function getCtx(): GetReturn;
 export {};

package/dist/bits/dialog/ctx.js

@@ -1,11 +1,26 @@
 import { createDialog } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
 import { createBitAttrs, getOptionUpdater, removeUndefined } from "../../internal/index.js";
-const NAME = "dialog";
-const PARTS = ["close", "content", "description", "overlay", "portal", "title", "trigger"];
-export const getAttrs = createBitAttrs(NAME, PARTS);
+export function getDialogData() {
+    const NAME = "dialog";
+    const PARTS = [
+        "close",
+        "content",
+        "description",
+        "overlay",
+        "portal",
+        "title",
+        "trigger"
+    ];
+    return {
+        NAME,
+        PARTS
+    };
+}
 export function setCtx(props) {
-    const dialog = createDialog({ ...removeUndefined(props), role: "dialog" });
+    const { NAME, PARTS } = getDialogData();
+    const getAttrs = createBitAttrs(NAME, PARTS);
+    const dialog = { ...createDialog({ ...removeUndefined(props), role: "dialog" }), getAttrs };
     setContext(NAME, dialog);
     return {
         ...dialog,
@@ -13,5 +28,6 @@ export function setCtx(props) {
     };
 }
 export function getCtx() {
+    const { NAME } = getDialogData();
     return getContext(NAME);
 }

package/dist/bits/floating/helpers.js

@@ -1,19 +1,19 @@
-const defaultPositioningProps = {
-    side: "bottom",
-    align: "center",
-    sideOffset: 0,
-    alignOffset: 0,
-    sameWidth: false,
-    avoidCollisions: true,
-    collisionPadding: 8,
-    fitViewport: false
-};
 export function getPositioningUpdater(store) {
     return (props = {}) => {
         return updatePositioning(store, props);
     };
 }
 export function updatePositioning(store, props) {
+    const defaultPositioningProps = {
+        side: "bottom",
+        align: "center",
+        sideOffset: 0,
+        alignOffset: 0,
+        sameWidth: false,
+        avoidCollisions: true,
+        collisionPadding: 8,
+        fitViewport: false
+    };
     const withDefaults = { ...defaultPositioningProps, ...props };
     store.update((prev) => {
         return {

package/dist/bits/label/components/label.svelte

@@ -1,5 +1,5 @@
 <script>import { melt, createLabel } from "@melt-ui/svelte";
-import { getAttrs } from "../ctx.js";
+import { getLabelData } from "../ctx.js";
 import { createDispatcher } from "../../../internal/events.js";
 export let asChild = false;
 export let el = void 0;
@@ -7,6 +7,7 @@ const {
   elements: { root }
 } = createLabel();
 const dispatch = createDispatcher();
+const { getAttrs } = getLabelData();
 const attrs = getAttrs("root");
 $:
   builder = $root;

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

@@ -1 +1,4 @@
-export declare const getAttrs: (part: string) => Record<string, string>;
+export declare function getLabelData(): {
+    NAME: string;
+    getAttrs: (part: string) => Record<string, string>;
+};

package/dist/bits/label/ctx.js

@@ -1,4 +1,10 @@
 import { createBitAttrs } from "../../internal";
-const NAME = "label";
-const PARTS = ["root"];
-export const getAttrs = createBitAttrs(NAME, PARTS);
+export function getLabelData() {
+    const NAME = "label";
+    const PARTS = ["root"];
+    const getAttrs = createBitAttrs(NAME, PARTS);
+    return {
+        NAME,
+        getAttrs
+    };
+}

package/dist/bits/link-preview/components/link-preview-arrow.svelte

@@ -1,10 +1,11 @@
-<script>import { setArrow, getAttrs } from "../ctx.js";
+<script>import { setArrow } 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 }
+  elements: { arrow },
+  getAttrs
 } = setArrow(size);
 const attrs = getAttrs("arrow");
 $:

package/dist/bits/link-preview/components/link-preview-content.svelte

@@ -1,6 +1,6 @@
 <script>import { melt } from "@melt-ui/svelte";
 import { createDispatcher } from "../../../internal/index.js";
-import { getCtx, getAttrs, 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;
@@ -24,7 +24,8 @@ export let el = void 0;
 const {
   elements: { content },
   states: { open },
-  ids
+  ids,
+  getAttrs
 } = getCtx();
 $:
   if (id) {

package/dist/bits/link-preview/components/link-preview-trigger.svelte

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

package/dist/bits/link-preview/ctx.d.ts

@@ -1,11 +1,15 @@
 /// <reference types="svelte" />
-import { type CreateLinkPreviewProps, type LinkPreview as LinkPreviewReturn } from "@melt-ui/svelte";
+import { type CreateLinkPreviewProps } from "@melt-ui/svelte";
 import type { FloatingProps } from "../floating/_types.js";
 import type { Writable } from "svelte/store";
-export declare const getAttrs: (part: string) => Record<string, string>;
-export declare function getCtx(): LinkPreviewReturn;
+export declare function getLinkPreviewData(): {
+    NAME: "link-preview";
+    PARTS: string[];
+};
+type GetReturn = Omit<ReturnType<typeof setCtx>, "updateOption">;
 export declare function setCtx(props: CreateLinkPreviewProps): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
+    getAttrs: (part: string) => Record<string, string>;
     ids: import("@melt-ui/svelte/internal/helpers").ToWritableStores<{
         content: string;
         trigger: string;
@@ -64,5 +68,7 @@ export declare function setCtx(props: CreateLinkPreviewProps): {
         }> | undefined;
     }, "ids">>;
 };
-export declare function setArrow(size?: number): LinkPreviewReturn;
+export declare function getCtx(): GetReturn;
+export declare function setArrow(size?: number): GetReturn;
 export declare function updatePositioning(props: FloatingProps): void;
+export {};

package/dist/bits/link-preview/ctx.js

@@ -2,33 +2,44 @@ import { createBitAttrs, getOptionUpdater, removeUndefined } from "../../interna
 import { createLinkPreview } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
 import { getPositioningUpdater } from "../floating/helpers.js";
-const NAME = "link-preview";
-const PARTS = ["arrow", "content", "trigger"];
-export const getAttrs = createBitAttrs(NAME, PARTS);
-export function getCtx() {
-    return getContext(NAME);
+export function getLinkPreviewData() {
+    const NAME = "link-preview";
+    const PARTS = ["arrow", "content", "trigger"];
+    return {
+        NAME,
+        PARTS
+    };
 }
 export function setCtx(props) {
-    const linkPreview = createLinkPreview({
-        ...removeUndefined(props),
-        forceVisible: true
-    });
+    const { NAME, PARTS } = getLinkPreviewData();
+    const getAttrs = createBitAttrs(NAME, PARTS);
+    const linkPreview = {
+        ...createLinkPreview({
+            ...removeUndefined(props),
+            forceVisible: true
+        }),
+        getAttrs
+    };
     setContext(NAME, linkPreview);
     return {
         ...linkPreview,
         updateOption: getOptionUpdater(linkPreview.options)
     };
 }
+export function getCtx() {
+    const { NAME } = getLinkPreviewData();
+    return getContext(NAME);
+}
 export function setArrow(size = 8) {
     const linkPreview = getCtx();
     linkPreview.options.arrowSize.set(size);
     return linkPreview;
 }
-const defaultPlacement = {
-    side: "bottom",
-    align: "center"
-};
 export function updatePositioning(props) {
+    const defaultPlacement = {
+        side: "bottom",
+        align: "center"
+    };
     const withDefaults = { ...defaultPlacement, ...props };
     const { options: { positioning } } = getCtx();
     const updater = getPositioningUpdater(positioning);

package/dist/bits/menu/components/menu-arrow.svelte

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

package/dist/bits/menu/components/menu-checkbox-indicator.svelte

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

package/dist/bits/menu/components/menu-checkbox-item.svelte

@@ -1,5 +1,5 @@
 <script>import { melt } from "@melt-ui/svelte";
-import { setCheckboxItem, getAttrs } from "../ctx.js";
+import { setCheckboxItem } from "../ctx.js";
 import { createDispatcher } from "../../../internal/events.js";
 export let checked = void 0;
 export let onCheckedChange = void 0;
@@ -9,7 +9,8 @@ export let el = void 0;
 const {
   elements: { checkboxItem },
   states: { checked: localChecked },
-  updateOption
+  updateOption,
+  getAttrs
 } = setCheckboxItem({
   disabled,
   defaultChecked: checked,

package/dist/bits/menu/components/menu-content.svelte

@@ -1,6 +1,6 @@
 <script>import { createDispatcher } from "../../../internal/events.js";
 import { melt } from "@melt-ui/svelte";
-import { getAttrs, getCtx, 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;
@@ -24,7 +24,8 @@ export let el = void 0;
 const {
   elements: { menu },
   states: { open },
-  ids
+  ids,
+  getAttrs
 } = getCtx();
 const dispatch = createDispatcher();
 const attrs = getAttrs("content");

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

@@ -1,8 +1,8 @@
 <script>import { melt } from "@melt-ui/svelte";
-import { setGroupCtx, getAttrs } from "../ctx.js";
+import { setGroupCtx } from "../ctx.js";
 export let asChild = false;
 export let el = void 0;
-const { group, id } = setGroupCtx();
+const { group, id, getAttrs } = setGroupCtx();
 const attrs = getAttrs("group");
 $:
   builder = $group(id);

package/dist/bits/menu/components/menu-item.svelte

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

package/dist/bits/menu/components/menu-label.svelte

@@ -1,8 +1,8 @@
 <script>import { melt } from "@melt-ui/svelte";
-import { getGroupLabel, getAttrs } from "../ctx.js";
+import { getGroupLabel } from "../ctx.js";
 export let asChild = false;
 export let el = void 0;
-const { groupLabel, id } = getGroupLabel();
+const { groupLabel, id, getAttrs } = getGroupLabel();
 const attrs = getAttrs("label");
 $:
   builder = $groupLabel(id);

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

@@ -1,12 +1,13 @@
 <script>import { melt } from "@melt-ui/svelte";
-import { setRadioGroupCtx, getAttrs } from "../ctx.js";
+import { setRadioGroupCtx } from "../ctx.js";
 export let value = void 0;
 export let onValueChange = void 0;
 export let asChild = false;
 export let el = void 0;
 const {
   elements: { radioGroup },
-  states: { value: localValue }
+  states: { value: localValue },
+  getAttrs
 } = setRadioGroupCtx({
   defaultValue: value,
   onValueChange: ({ next }) => {

package/dist/bits/menu/components/menu-radio-indicator.svelte

@@ -1,7 +1,11 @@
-<script>import { getAttrs, getRadioIndicator } 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("radio-indicator");
 $:
   checked = $isChecked(value);

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

@@ -1,12 +1,13 @@
 <script>import { melt } from "@melt-ui/svelte";
-import { setRadioItem, getAttrs } from "../ctx.js";
+import { setRadioItem } 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: { radioItem }
+  elements: { radioItem },
+  getAttrs
 } = setRadioItem(value);
 const attrs = getAttrs("radio-item");
 const dispatch = createDispatcher();

package/dist/bits/menu/components/menu-separator.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: { separator }
+  elements: { separator },
+  getAttrs
 } = getCtx();
 const attrs = getAttrs("separator");
 $:

package/dist/bits/menu/components/menu-sub-content.svelte

@@ -1,6 +1,6 @@
 <script>import { melt } from "@melt-ui/svelte";
 import { createDispatcher } from "../../../internal/index.js";
-import { getAttrs, getSubmenuCtx, updateSubPositioning } from "../ctx.js";
+import { getSubmenuCtx, updateSubPositioning } from "../ctx.js";
 export let transition = void 0;
 export let transitionConfig = void 0;
 export let inTransition = void 0;
@@ -24,7 +24,8 @@ export let el = void 0;
 const {
   elements: { subMenu },
   states: { subOpen },
-  ids
+  ids,
+  getAttrs
 } = getSubmenuCtx();
 const dispatch = createDispatcher();
 const attrs = getAttrs("sub-content");

package/dist/bits/menu/components/menu-sub-trigger.svelte

@@ -1,6 +1,6 @@
 <script>import { melt } from "@melt-ui/svelte";
 import { disabledAttrs } from "../../../internal/index.js";
-import { getSubTrigger, getAttrs } from "../ctx.js";
+import { getSubTrigger } from "../ctx.js";
 import { createDispatcher } from "../../../internal/events.js";
 export let disabled = false;
 export let asChild = false;
@@ -8,7 +8,8 @@ export let id = void 0;
 export let el = void 0;
 const {
   elements: { subTrigger },
-  ids
+  ids,
+  getAttrs
 } = getSubTrigger();
 const dispatch = createDispatcher();
 $: