bits-ui 0.12.0 → 0.13.1

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

@@ -1,11 +1,18 @@
 import { createBitAttrs, getOptionUpdater, removeUndefined } from "../../internal/index.js";
 import { createToggleGroup } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
-const NAME = "toggle-group";
-const PARTS = ["root", "item"];
-export const getAttrs = createBitAttrs(NAME, PARTS);
+function getToggleGroupData() {
+    const NAME = "toggle-group";
+    const PARTS = ["root", "item"];
+    return {
+        NAME,
+        PARTS
+    };
+}
 export function setCtx(props) {
-    const toggleGroup = createToggleGroup(removeUndefined(props));
+    const { NAME, PARTS } = getToggleGroupData();
+    const getAttrs = createBitAttrs(NAME, PARTS);
+    const toggleGroup = { ...createToggleGroup(removeUndefined(props)), getAttrs };
     setContext(NAME, toggleGroup);
     return {
         ...toggleGroup,
@@ -13,5 +20,6 @@ export function setCtx(props) {
     };
 }
 export function getCtx() {
+    const { NAME } = getToggleGroupData();
     return getContext(NAME);
 }

package/dist/bits/toolbar/components/toolbar-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: { button }
+  elements: { button },
+  getAttrs
 } = getCtx();
 const dispatch = createDispatcher();
 const attrs = getAttrs("button");

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

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

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

@@ -4,7 +4,7 @@ declare const __propDef: {
     props: GroupItemProps;
     slots: {
         default: {
-            builder: ((props: import("@melt-ui/svelte/index.js").ToolbarGroupItemProps) => {
+            builder: {
                 readonly disabled: true | undefined;
                 readonly pressed: boolean;
                 readonly 'data-orientation': import("@melt-ui/svelte/internal/types").Orientation;
@@ -16,7 +16,7 @@ declare const __propDef: {
                 readonly type: "button";
                 readonly role: "radio" | undefined;
                 readonly 'data-melt-toolbar-item': "";
-            }) & {
+            } & {
                 [x: `data-melt-${string}`]: "";
             } & {
                 action: (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click">;

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

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

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

package/dist/bits/toolbar/components/toolbar.svelte

@@ -1,12 +1,13 @@
 <script>import { melt } from "@melt-ui/svelte";
-import { setCtx, getAttrs } from "../ctx.js";
+import { setCtx } from "../ctx.js";
 export let loop = true;
 export let orientation = void 0;
 export let asChild = false;
 export let el = void 0;
 const {
   elements: { root },
-  updateOption
+  updateOption,
+  getAttrs
 } = setCtx({
   loop,
   orientation

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

@@ -1,8 +1,10 @@
 /// <reference types="svelte" />
-import { type Toolbar as ToolbarReturn, type ToolbarGroup as ToolbarGroupReturn, type CreateToolbarProps as ToolbarProps, type CreateToolbarGroupProps as ToolbarGroupProps } from "@melt-ui/svelte";
-export declare const getAttrs: (part: "link" | "group" | "button" | "root" | "group-item") => Record<string, string>;
+import { type CreateToolbarProps as ToolbarProps, type CreateToolbarGroupProps as ToolbarGroupProps } from "@melt-ui/svelte";
+type GetReturn = Omit<ReturnType<typeof setCtx>, "updateOption">;
+type GetGroupReturn = Omit<ReturnType<typeof setGroupCtx>, "updateOption">;
 export declare function setCtx(props: ToolbarProps): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
+    getAttrs: (part: "link" | "group" | "button" | "root" | "group-item") => Record<string, string>;
     elements: {
         root: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<import("svelte/store").Writable<import("@melt-ui/svelte/internal/types").Orientation>, import("svelte/action").Action<any, any, Record<never, any>>, ($orientation: import("@melt-ui/svelte/internal/types").Orientation) => {
             role: string;
@@ -75,6 +77,7 @@ export declare function setCtx(props: ToolbarProps): {
 };
 export declare function setGroupCtx<T extends "single" | "multiple">(props: ToolbarGroupProps<T>): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
+    getAttrs: (part: "link" | "group" | "button" | "root" | "group-item") => Record<string, string>;
     elements: {
         group: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<import("svelte/store").Writable<import("@melt-ui/svelte/internal/types").Orientation>, import("svelte/action").Action<any, any, Record<never, any>>, ($orientation: import("@melt-ui/svelte/internal/types").Orientation) => {
             readonly role: "group";
@@ -116,5 +119,6 @@ export declare function setGroupCtx<T extends "single" | "multiple">(props: Tool
         disabled: boolean;
     }>;
 };
-export declare function getCtx(): ToolbarReturn;
-export declare function getGroupCtx(): ToolbarGroupReturn;
+export declare function getCtx(): GetReturn;
+export declare function getGroupCtx(): GetGroupReturn;
+export {};

package/dist/bits/toolbar/ctx.js

@@ -1,12 +1,20 @@
 import { createBitAttrs, getOptionUpdater, removeUndefined } from "../../internal/index.js";
 import { createToolbar } from "@melt-ui/svelte";
 import { getContext, setContext } from "svelte";
-const NAME = "toolbar";
-const GROUP_NAME = "toolbar-group";
-const PARTS = ["root", "button", "link", "group", "group-item"];
-export const getAttrs = createBitAttrs(NAME, PARTS);
+function getToolbarData() {
+    const NAME = "toolbar";
+    const GROUP_NAME = "toolbar-group";
+    const PARTS = ["root", "button", "link", "group", "group-item"];
+    return {
+        NAME,
+        GROUP_NAME,
+        PARTS
+    };
+}
 export function setCtx(props) {
-    const toolbar = createToolbar(removeUndefined(props));
+    const { NAME, PARTS } = getToolbarData();
+    const getAttrs = createBitAttrs(NAME, PARTS);
+    const toolbar = { ...createToolbar(removeUndefined(props)), getAttrs };
     setContext(NAME, toolbar);
     return {
         ...toolbar,
@@ -14,8 +22,9 @@ export function setCtx(props) {
     };
 }
 export function setGroupCtx(props) {
-    const { builders: { createToolbarGroup } } = getCtx();
-    const group = createToolbarGroup(removeUndefined(props));
+    const { builders: { createToolbarGroup }, getAttrs } = getCtx();
+    const group = { ...createToolbarGroup(removeUndefined(props)), getAttrs };
+    const { GROUP_NAME } = getToolbarData();
     setContext(GROUP_NAME, group);
     return {
         ...group,
@@ -23,8 +32,10 @@ export function setGroupCtx(props) {
     };
 }
 export function getCtx() {
+    const { NAME } = getToolbarData();
     return getContext(NAME);
 }
 export function getGroupCtx() {
+    const { GROUP_NAME } = getToolbarData();
     return getContext(GROUP_NAME);
 }

package/dist/bits/tooltip/components/tooltip-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/tooltip/components/tooltip-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(sideOffset);
 const dispatch = createDispatcher();
 const attrs = getAttrs("content");

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

@@ -1,12 +1,13 @@
 <script>import { melt } from "@melt-ui/svelte";
 import { createDispatcher } from "../../../internal/index.js";
-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: { trigger },
-  ids
+  ids,
+  getAttrs
 } = getCtx();
 const dispatch = createDispatcher();
 const attrs = getAttrs("trigger");

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

@@ -1,10 +1,11 @@
 /// <reference types="svelte" />
-import { type Tooltip as TooltipReturn, type CreateTooltipProps } from "@melt-ui/svelte";
+import { type CreateTooltipProps } from "@melt-ui/svelte";
 import type { Writable } from "svelte/store";
 import type { FloatingProps } from "../floating/_types.js";
-export declare const getAttrs: (part: "content" | "arrow" | "trigger") => Record<string, string>;
+type GetReturn = Omit<ReturnType<typeof setCtx>, "updateOption">;
 export declare function setCtx(props: CreateTooltipProps): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
+    getAttrs: (part: "content" | "arrow" | "trigger") => Record<string, string>;
     ids: import("@melt-ui/svelte/internal/helpers").ToWritableStores<{
         content: string;
         trigger: string;
@@ -56,6 +57,7 @@ export declare function setCtx(props: CreateTooltipProps): {
         }> | undefined;
     }, "open" | "ids">>;
 };
-export declare function getCtx(sideOffset?: number): TooltipReturn;
-export declare function setArrow(size?: number): TooltipReturn;
+export declare function getCtx(sideOffset?: number): GetReturn;
+export declare function setArrow(size?: number): GetReturn;
 export declare function updatePositioning(props: FloatingProps): void;
+export {};

package/dist/bits/tooltip/ctx.js

@@ -2,17 +2,27 @@ import { createTooltip } from "@melt-ui/svelte";
 import { createBitAttrs, getOptionUpdater, removeUndefined } from "../../internal/index.js";
 import { getContext, setContext } from "svelte";
 import { getPositioningUpdater } from "../floating/helpers.js";
-const NAME = "tooltip";
-const PARTS = ["arrow", "content", "trigger"];
-export const getAttrs = createBitAttrs(NAME, PARTS);
+function getTooltipData() {
+    const NAME = "tooltip";
+    const PARTS = ["arrow", "content", "trigger"];
+    return {
+        NAME,
+        PARTS
+    };
+}
 export function setCtx(props) {
-    const tooltip = createTooltip({
-        positioning: {
-            placement: "top"
-        },
-        openDelay: 700,
-        ...removeUndefined(props)
-    });
+    const { NAME, PARTS } = getTooltipData();
+    const getAttrs = createBitAttrs(NAME, PARTS);
+    const tooltip = {
+        ...createTooltip({
+            positioning: {
+                placement: "top"
+            },
+            openDelay: 700,
+            ...removeUndefined(props)
+        }),
+        getAttrs
+    };
     setContext(NAME, tooltip);
     return {
         ...tooltip,
@@ -20,6 +30,7 @@ export function setCtx(props) {
     };
 }
 export function getCtx(sideOffset = 0) {
+    const { NAME } = getTooltipData();
     const tooltip = getContext(NAME);
     const { options: { positioning } } = tooltip;
     positioning.update((prev) => ({ ...prev, gutter: sideOffset }));
@@ -30,11 +41,11 @@ export function setArrow(size = 8) {
     tooltip.options.arrowSize.set(size);
     return tooltip;
 }
-const defaultPlacement = {
-    side: "top",
-    align: "center"
-};
 export function updatePositioning(props) {
+    const defaultPlacement = {
+        side: "top",
+        align: "center"
+    };
     const withDefaults = { ...defaultPlacement, ...props };
     const { options: { positioning } } = getCtx();
     const updater = getPositioningUpdater(positioning);

package/dist/internal/events.d.ts

@@ -5,6 +5,9 @@ type MeltEvent<T extends Event = Event> = {
     cancelable: boolean;
     preventDefault: () => void;
 };
+export type SvelteEvent<T extends Event = Event, U extends EventTarget = EventTarget> = T & {
+    currentTarget: EventTarget & U;
+};
 export declare function createDispatcher<M extends Element = Element>(): (e: MeltEvent) => void;
 export type CreateDispatcher = {
     createDispatcher: typeof createDispatcher;

package/dist/shared/index.d.ts

@@ -9,4 +9,6 @@ export type DateRange = {
     end: DateValue | undefined;
 };
 export type SegmentPart = "month" | "day" | "year" | "hour" | "minute" | "second" | "dayPeriod" | "timeZoneName" | "literal";
+export type FocusTarget = string | HTMLElement | SVGElement | null;
+export type FocusProp = FocusTarget | ((defaultEl?: HTMLElement | null) => FocusTarget);
 export type { Month, Page, PageItem, Ellipsis };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bits-ui",
-  "version": "0.12.0",
+  "version": "0.13.1",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "exports": {
@@ -73,8 +73,8 @@
   "types": "./dist/index.d.ts",
   "type": "module",
   "dependencies": {
-    "@internationalized/date": "^3.5.0",
-    "@melt-ui/svelte": "0.65.2",
+    "@internationalized/date": "^3.5.1",
+    "@melt-ui/svelte": "0.67.0",
     "nanoid": "^5.0.4"
   },
   "peerDependencies": {