bits-ui 0.11.4 → 0.11.6

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

@@ -24,6 +24,7 @@ export let id = void 0;
 export let weekdayFormat = void 0;
 export let initialFocus = false;
 export let startValue = void 0;
+export let numberOfMonths = void 0;
 let el = void 0;
 onMount(() => {
   if (!initialFocus || !el)
@@ -35,7 +36,7 @@ const {
   states: {
     value: localValue,
     placeholder: localPlaceholder,
-    months,
+    months: localMonths,
     weekdays,
     startValue: localStartValue,
     endValue
@@ -58,6 +59,7 @@ const {
   fixedWeeks,
   calendarLabel,
   weekdayFormat,
+  numberOfMonths,
   onPlaceholderChange: ({ next }) => {
     if (placeholder !== next) {
       onPlaceholderChange?.(next);
@@ -109,18 +111,23 @@ $:
   updateOption("calendarLabel", calendarLabel);
 $:
   updateOption("weekdayFormat", weekdayFormat);
+$:
+  updateOption("numberOfMonths", numberOfMonths);
 const attrs = getAttrs("root");
 const dispatch = createDispatcher();
 $:
   builder = $calendar;
 $:
   Object.assign(builder, attrs);
+let months = $localMonths;
+$:
+  months = $localMonths;
 </script>
 
 {#if asChild}
 	<slot
 		{builder}
-		months={$months}
+		{months}
 		weekdays={$weekdays}
 		startValue={$localStartValue}
 		endValue={$endValue}
@@ -134,7 +141,7 @@ $:
 	>
 		<slot
 			{builder}
-			months={$months}
+			{months}
 			weekdays={$weekdays}
 			startValue={$localStartValue}
 			endValue={$endValue}

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

@@ -1,5 +1,7 @@
 import { SvelteComponent } from "svelte";
+import { type Month } from "@melt-ui/svelte";
 import type { Events, Props } from "../types.js";
+import type { DateValue } from "@internationalized/date";
 declare const __propDef: {
     props: Props;
     slots: {
@@ -16,10 +18,10 @@ declare const __propDef: {
             } & {
                 action: (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown">;
             };
-            months: import("@melt-ui/svelte/index.js").Month<import("@internationalized/date").DateValue>[];
+            months: Month<DateValue>[];
             weekdays: string[];
-            startValue: import("@internationalized/date").DateValue | undefined;
-            endValue: import("@internationalized/date").DateValue | undefined;
+            startValue: DateValue | undefined;
+            endValue: DateValue | undefined;
         };
     };
     events: Events;

package/dist/bits/toolbar/_export.types.d.ts

@@ -0,0 +1 @@
+export type { Props as ToolbarProps, ButtonProps as ToolbarButtonProps, LinkProps as ToolbarLinkProps, GroupProps as ToolbarGroupProps, GroupItemProps as ToolbarItemProps, ButtonEvents as ToolbarButtonEvents, LinkEvents as ToolbarLinkEvents, GroupItemEvents as ToolbarItemEvents } from "./types.js";

package/dist/bits/toolbar/_export.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,48 @@
+/**
+ * We define prop types without the HTMLAttributes here so that we can use them
+ * to type-check our API documentation, which requires we document each prop,
+ * but we don't want to document the HTML attributes.
+ */
+import type { CreateToolbarProps, CreateToolbarGroupProps } from "@melt-ui/svelte";
+import type { AsChild, Expand, OmitValue, OnChangeFn } from "../../internal/index.js";
+type Props = Expand<CreateToolbarProps & AsChild>;
+type ButtonProps = AsChild;
+type LinkProps = AsChild;
+type GroupProps<T extends "single" | "multiple"> = Expand<OmitValue<CreateToolbarGroupProps<T>> & {
+    /**
+     * The value of the toolbar toggle group, which is a string or an array of strings,
+     * depending on the type of the toolbar toggle group.
+     *
+     * You can bind to this to programmatically control the value.
+     */
+    value?: CreateToolbarGroupProps<T>["defaultValue"];
+    /**
+     * A callback function called when the value changes.
+     */
+    onValueChange?: OnChangeFn<CreateToolbarGroupProps<T>["defaultValue"]>;
+    /**
+     * The type of the toolbar toggle group.
+     *
+     * If the type is `"single"`, the toolbar toggle group allows only one item to be selected
+     * at a time. If the type is `"multiple"`, the toolbar toggle group allows multiple items
+     * to be selected at a time.
+     */
+    type?: T;
+} & AsChild>;
+type GroupItemProps = Expand<{
+    /**
+     * The value of the toolbar toggle group item. When the toolbar toggle group item is selected,
+     * the toolbar toggle group's value will be set to this value if in `"single"` mode,
+     * or this value will be pushed to the toolbar toggle group's array value if in `"multiple"` mode.
+     *
+     * @required
+     */
+    value: string;
+    /**
+     * Whether the toolbar toggle group item is disabled.
+     *
+     * @defaultValue false
+     */
+    disabled?: boolean;
+} & AsChild>;
+export type { Props, ButtonProps, LinkProps, GroupProps, GroupItemProps };

package/dist/bits/toolbar/_types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,27 @@
+<script>import { melt } from "@melt-ui/svelte";
+import { getAttrs, getCtx } from "../ctx.js";
+import { createDispatcher } from "../../../internal/events.js";
+export let asChild = false;
+const {
+  elements: { button }
+} = getCtx();
+const dispatch = createDispatcher();
+const attrs = getAttrs("button");
+$:
+  builder = $button;
+$:
+  Object.assign(builder, attrs);
+</script>
+
+{#if asChild}
+	<slot {builder} />
+{:else}
+	<button
+		{...builder} use:builder.action
+		type="button"
+		{...$$restProps}
+		on:m-keydown={dispatch}
+	>
+		<slot {builder} />
+	</button>
+{/if}

package/dist/bits/toolbar/components/toolbar-button.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+import type { ButtonEvents, ButtonProps } from "../types.js";
+declare const __propDef: {
+    props: ButtonProps;
+    slots: {
+        default: {
+            builder: {
+                readonly role: "button";
+                readonly type: "button";
+                readonly tabIndex: -1;
+            } & {
+                [x: `data-melt-${string}`]: "";
+            } & {
+                action: (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown">;
+            };
+        };
+    };
+    events: ButtonEvents;
+};
+export type ToolbarButtonProps = typeof __propDef.props;
+export type ToolbarButtonEvents = typeof __propDef.events;
+export type ToolbarButtonSlots = typeof __propDef.slots;
+export default class ToolbarButton extends SvelteComponent<ToolbarButtonProps, ToolbarButtonEvents, ToolbarButtonSlots> {
+}
+export {};

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

@@ -0,0 +1,30 @@
+<script>import { melt } from "@melt-ui/svelte";
+import { getGroupCtx, getAttrs } from "../ctx.js";
+import { createDispatcher, disabledAttrs } from "../../../internal/index.js";
+export let value;
+export let disabled = false;
+export let asChild = false;
+const {
+  elements: { item }
+} = getGroupCtx();
+const dispatch = createDispatcher();
+$:
+  attrs = { ...getAttrs("group-item"), ...disabledAttrs(disabled) };
+$:
+  builder = $item({ value, disabled });
+$:
+  Object.assign(builder, attrs);
+</script>
+
+{#if asChild}
+	<slot {builder} />
+{:else}
+	<button
+		{...builder} use:builder.action
+		{...$$restProps}
+		on:m-click={dispatch}
+		on:m-keydown={dispatch}
+	>
+		<slot {builder} />
+	</button>
+{/if}

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

@@ -0,0 +1,33 @@
+import { SvelteComponent } from "svelte";
+import type { GroupItemProps, GroupItemEvents } from "../types.js";
+declare const __propDef: {
+    props: GroupItemProps;
+    slots: {
+        default: {
+            builder: ((props: import("@melt-ui/svelte/index.js").ToolbarGroupItemProps) => {
+                readonly disabled: true | undefined;
+                readonly pressed: boolean;
+                readonly 'data-orientation': import("@melt-ui/svelte/internal/types").Orientation;
+                readonly 'data-disabled': true | undefined;
+                readonly 'data-value': string;
+                readonly 'data-state': "on" | "off";
+                readonly 'aria-checked': boolean | undefined;
+                readonly 'aria-pressed': boolean | undefined;
+                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">;
+            };
+        };
+    };
+    events: GroupItemEvents;
+};
+export type ToolbarGroupItemProps = typeof __propDef.props;
+export type ToolbarGroupItemEvents = typeof __propDef.events;
+export type ToolbarGroupItemSlots = typeof __propDef.slots;
+export default class ToolbarGroupItem extends SvelteComponent<ToolbarGroupItemProps, ToolbarGroupItemEvents, ToolbarGroupItemSlots> {
+}
+export {};

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

@@ -0,0 +1,48 @@
+<script>import { melt } from "@melt-ui/svelte";
+import { setGroupCtx, getAttrs } from "../ctx.js";
+export let type = "single";
+export let disabled = void 0;
+export let value = void 0;
+export let onValueChange = void 0;
+export let asChild = false;
+const {
+  elements: { group },
+  states: { value: localValue },
+  updateOption
+} = setGroupCtx({
+  disabled,
+  type,
+  defaultValue: value,
+  onValueChange: ({ next }) => {
+    if (Array.isArray(next)) {
+      onValueChange?.(next);
+      value = next;
+      return next;
+    }
+    if (value !== next) {
+      onValueChange?.(next);
+      value = next;
+    }
+    return next;
+  }
+});
+const attrs = getAttrs("group");
+$:
+  value !== void 0 && localValue.set(value);
+$:
+  updateOption("disabled", disabled);
+$:
+  updateOption("type", type);
+$:
+  builder = $group;
+$:
+  Object.assign(builder, attrs);
+</script>
+
+{#if asChild}
+	<slot {builder} />
+{:else}
+	<div {...builder} use:builder.action {...$$restProps}>
+		<slot {builder} />
+	</div>
+{/if}

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

@@ -0,0 +1,26 @@
+import { SvelteComponent } from "svelte";
+import type { GroupProps } from "../types.js";
+declare class __sveltets_Render<T extends "single" | "multiple"> {
+    props(): GroupProps<T>;
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {
+        default: {
+            builder: {
+                readonly role: "group";
+                readonly 'data-orientation': import("@melt-ui/svelte/internal/types").Orientation;
+            } & {
+                [x: `data-melt-${string}`]: "";
+            } & {
+                action: import("svelte/action").Action<any, any, Record<never, any>>;
+            };
+        };
+    };
+}
+export type ToolbarGroupProps<T extends "single" | "multiple"> = ReturnType<__sveltets_Render<T>['props']>;
+export type ToolbarGroupEvents<T extends "single" | "multiple"> = ReturnType<__sveltets_Render<T>['events']>;
+export type ToolbarGroupSlots<T extends "single" | "multiple"> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class ToolbarGroup<T extends "single" | "multiple"> extends SvelteComponent<ToolbarGroupProps<T>, ToolbarGroupEvents<T>, ToolbarGroupSlots<T>> {
+}
+export {};

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

@@ -0,0 +1,27 @@
+<script>import { melt } from "@melt-ui/svelte";
+import { getAttrs, getCtx } from "../ctx.js";
+import { createDispatcher } from "../../../internal/events.js";
+export let asChild = false;
+const {
+  elements: { link }
+} = getCtx();
+const dispatch = createDispatcher();
+const attrs = getAttrs("link");
+$:
+  builder = $link;
+$:
+  Object.assign(builder, attrs);
+</script>
+
+{#if asChild}
+	<slot {builder} />
+{:else}
+	<svelte:element
+		this={"a"}
+		{...builder} use:builder.action
+		{...$$restProps}
+		on:m-keydown={dispatch}
+	>
+		<slot {builder} />
+	</svelte:element>
+{/if}

package/dist/bits/toolbar/components/toolbar-link.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+import type { LinkEvents, LinkProps } from "../types.js";
+declare const __propDef: {
+    props: LinkProps;
+    slots: {
+        default: {
+            builder: {
+                readonly role: "link";
+                readonly 'data-melt-toolbar-item': "";
+                readonly tabIndex: -1;
+            } & {
+                [x: `data-melt-${string}`]: "";
+            } & {
+                action: (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown">;
+            };
+        };
+    };
+    events: LinkEvents;
+};
+export type ToolbarLinkProps = typeof __propDef.props;
+export type ToolbarLinkEvents = typeof __propDef.events;
+export type ToolbarLinkSlots = typeof __propDef.slots;
+export default class ToolbarLink extends SvelteComponent<ToolbarLinkProps, ToolbarLinkEvents, ToolbarLinkSlots> {
+}
+export {};

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

@@ -0,0 +1,30 @@
+<script>import { melt } from "@melt-ui/svelte";
+import { setCtx, getAttrs } from "../ctx.js";
+export let loop = true;
+export let orientation = void 0;
+export let asChild = false;
+const {
+  elements: { root },
+  updateOption
+} = setCtx({
+  loop,
+  orientation
+});
+const attrs = getAttrs("root");
+$:
+  updateOption("loop", loop);
+$:
+  updateOption("orientation", orientation);
+$:
+  builder = $root;
+$:
+  Object.assign(builder, attrs);
+</script>
+
+{#if asChild}
+	<slot {builder} />
+{:else}
+	<div {...builder} use:builder.action {...$$restProps}>
+		<slot {builder} />
+	</div>
+{/if}

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

@@ -0,0 +1,26 @@
+import { SvelteComponent } from "svelte";
+import type { Props } from "../types.js";
+declare const __propDef: {
+    props: Props;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            builder: {
+                role: string;
+                'data-orientation': import("@melt-ui/svelte/internal/types").Orientation;
+            } & {
+                [x: `data-melt-${string}`]: "";
+            } & {
+                action: import("svelte/action").Action<any, any, Record<never, any>>;
+            };
+        };
+    };
+};
+export type ToolbarProps = typeof __propDef.props;
+export type ToolbarEvents = typeof __propDef.events;
+export type ToolbarSlots = typeof __propDef.slots;
+export default class Toolbar extends SvelteComponent<ToolbarProps, ToolbarEvents, ToolbarSlots> {
+}
+export {};

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

@@ -0,0 +1,120 @@
+/// <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>;
+export declare function setCtx(props: ToolbarProps): {
+    updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
+    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;
+            'data-orientation': import("@melt-ui/svelte/internal/types").Orientation;
+        }, string>;
+        button: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<import("svelte/store").Stores | undefined, (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown">, () => {
+            readonly role: "button";
+            readonly type: "button";
+            readonly tabIndex: -1;
+        }, string>;
+        separator: 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: "separator";
+            readonly 'data-orientation': "horizontal" | "vertical";
+            readonly 'aria-orientation': "horizontal" | "vertical";
+        }, string>;
+        link: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<import("svelte/store").Stores | undefined, (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown">, () => {
+            readonly role: "link";
+            readonly 'data-melt-toolbar-item': "";
+            readonly tabIndex: -1;
+        }, string>;
+    };
+    builders: {
+        createToolbarGroup: <T extends import("@melt-ui/svelte").ToolbarGroupType = "single">(props?: ToolbarGroupProps<T> | undefined) => {
+            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";
+                    readonly 'data-orientation': import("@melt-ui/svelte/internal/types").Orientation;
+                }, string>;
+                item: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Writable<boolean>, import("svelte/store").Writable<"single" | T>, {
+                    update: (updater: import("svelte/store").Updater<string | string[] | undefined>, sideEffect?: ((newValue: string | string[] | undefined) => void) | undefined) => void;
+                    set: (this: void, value: string | string[] | undefined) => void;
+                    subscribe(this: void, run: import("svelte/store").Subscriber<string | string[] | undefined>, invalidate?: import("svelte/store").Invalidator<string | string[] | undefined> | undefined): import("svelte/store").Unsubscriber;
+                }, import("svelte/store").Writable<import("@melt-ui/svelte/internal/types").Orientation>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click">, ([$disabled, $type, $value, $orientation]: [boolean, "single" | T, string | string[] | undefined, import("@melt-ui/svelte/internal/types").Orientation]) => (props: import("@melt-ui/svelte").ToolbarGroupItemProps) => {
+                    readonly disabled: true | undefined;
+                    readonly pressed: boolean;
+                    readonly 'data-orientation': import("@melt-ui/svelte/internal/types").Orientation;
+                    readonly 'data-disabled': true | undefined;
+                    readonly 'data-value': string;
+                    readonly 'data-state': "on" | "off";
+                    readonly 'aria-checked': boolean | undefined;
+                    readonly 'aria-pressed': boolean | undefined;
+                    readonly type: "button";
+                    readonly role: "radio" | undefined;
+                    readonly 'data-melt-toolbar-item': "";
+                }, string>;
+            };
+            states: {
+                value: {
+                    update: (updater: import("svelte/store").Updater<string | string[] | undefined>, sideEffect?: ((newValue: string | string[] | undefined) => void) | undefined) => void;
+                    set: (this: void, value: string | string[] | undefined) => void;
+                    subscribe(this: void, run: import("svelte/store").Subscriber<string | string[] | undefined>, invalidate?: import("svelte/store").Invalidator<string | string[] | undefined> | undefined): import("svelte/store").Unsubscriber;
+                };
+            };
+            helpers: {
+                isPressed: import("svelte/store").Readable<(itemValue: string) => boolean>;
+            };
+            options: {
+                defaultValue?: import("svelte/store").Writable<(T extends "single" ? string : string[]) | undefined> | undefined;
+                value?: import("svelte/store").Writable<import("svelte/store").Writable<string | string[] | undefined> | undefined> | undefined;
+                onValueChange?: import("svelte/store").Writable<import("@melt-ui/svelte/internal/helpers").ChangeFn<string | string[] | undefined> | undefined> | undefined;
+                type: import("svelte/store").Writable<"single" | T>;
+                disabled: import("svelte/store").Writable<boolean>;
+            };
+        };
+    };
+    options: {
+        loop: import("svelte/store").Writable<boolean>;
+        orientation: import("svelte/store").Writable<import("@melt-ui/svelte/internal/types").Orientation>;
+    };
+};
+export declare function setGroupCtx<T extends "single" | "multiple">(props: ToolbarGroupProps<T>): {
+    updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
+    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";
+            readonly 'data-orientation': import("@melt-ui/svelte/internal/types").Orientation;
+        }, string>;
+        item: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Writable<boolean>, import("svelte/store").Writable<"single" | T>, {
+            update: (updater: import("svelte/store").Updater<string | string[] | undefined>, sideEffect?: ((newValue: string | string[] | undefined) => void) | undefined) => void;
+            set: (this: void, value: string | string[] | undefined) => void;
+            subscribe(this: void, run: import("svelte/store").Subscriber<string | string[] | undefined>, invalidate?: import("svelte/store").Invalidator<string | string[] | undefined> | undefined): import("svelte/store").Unsubscriber;
+        }, import("svelte/store").Writable<import("@melt-ui/svelte/internal/types").Orientation>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click">, ([$disabled, $type, $value, $orientation]: [boolean, "single" | T, string | string[] | undefined, import("@melt-ui/svelte/internal/types").Orientation]) => (props: import("@melt-ui/svelte").ToolbarGroupItemProps) => {
+            readonly disabled: true | undefined;
+            readonly pressed: boolean;
+            readonly 'data-orientation': import("@melt-ui/svelte/internal/types").Orientation;
+            readonly 'data-disabled': true | undefined;
+            readonly 'data-value': string;
+            readonly 'data-state': "on" | "off";
+            readonly 'aria-checked': boolean | undefined;
+            readonly 'aria-pressed': boolean | undefined;
+            readonly type: "button";
+            readonly role: "radio" | undefined;
+            readonly 'data-melt-toolbar-item': "";
+        }, string>;
+    };
+    states: {
+        value: {
+            update: (updater: import("svelte/store").Updater<string | string[] | undefined>, sideEffect?: ((newValue: string | string[] | undefined) => void) | undefined) => void;
+            set: (this: void, value: string | string[] | undefined) => void;
+            subscribe(this: void, run: import("svelte/store").Subscriber<string | string[] | undefined>, invalidate?: import("svelte/store").Invalidator<string | string[] | undefined> | undefined): import("svelte/store").Unsubscriber;
+        };
+    };
+    helpers: {
+        isPressed: import("svelte/store").Readable<(itemValue: string) => boolean>;
+    };
+    options: {
+        defaultValue?: import("svelte/store").Writable<(T extends "single" ? string : string[]) | undefined> | undefined;
+        value?: import("svelte/store").Writable<import("svelte/store").Writable<string | string[] | undefined> | undefined> | undefined;
+        onValueChange?: import("svelte/store").Writable<import("@melt-ui/svelte/internal/helpers").ChangeFn<string | string[] | undefined> | undefined> | undefined;
+        type: import("svelte/store").Writable<"single" | T>;
+        disabled: import("svelte/store").Writable<boolean>;
+    };
+};
+export declare function getCtx(): ToolbarReturn;
+export declare function getGroupCtx(): ToolbarGroupReturn;

package/dist/bits/toolbar/ctx.js

@@ -0,0 +1,30 @@
+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);
+export function setCtx(props) {
+    const toolbar = createToolbar(removeUndefined(props));
+    setContext(NAME, toolbar);
+    return {
+        ...toolbar,
+        updateOption: getOptionUpdater(toolbar.options)
+    };
+}
+export function setGroupCtx(props) {
+    const { builders: { createToolbarGroup } } = getCtx();
+    const group = createToolbarGroup(removeUndefined(props));
+    setContext(GROUP_NAME, group);
+    return {
+        ...group,
+        updateOption: getOptionUpdater(group.options)
+    };
+}
+export function getCtx() {
+    return getContext(NAME);
+}
+export function getGroupCtx() {
+    return getContext(GROUP_NAME);
+}

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

@@ -0,0 +1,6 @@
+export { default as Root } from "./components/toolbar.svelte";
+export { default as Button } from "./components/toolbar-button.svelte";
+export { default as Link } from "./components/toolbar-link.svelte";
+export { default as Group } from "./components/toolbar-group.svelte";
+export { default as GroupItem } from "./components/toolbar-group-item.svelte";
+export * from "./types.js";

package/dist/bits/toolbar/index.js

@@ -0,0 +1,6 @@
+export { default as Root } from "./components/toolbar.svelte";
+export { default as Button } from "./components/toolbar-button.svelte";
+export { default as Link } from "./components/toolbar-link.svelte";
+export { default as Group } from "./components/toolbar-group.svelte";
+export { default as GroupItem } from "./components/toolbar-group-item.svelte";
+export * from "./types.js";

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

@@ -0,0 +1,23 @@
+import type { HTMLDivAttributes } from "../../internal/index.js";
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
+import type * as I from "./_types.js";
+import type { CustomEventHandler } from "../../index.js";
+type Props = I.Props & HTMLDivAttributes;
+type ButtonProps = I.ButtonProps & HTMLButtonAttributes;
+type LinkProps = I.LinkProps & HTMLAnchorAttributes;
+type GroupProps<T extends "single" | "multiple"> = I.GroupProps<T> & HTMLDivAttributes;
+type GroupItemProps = I.GroupItemProps & HTMLButtonAttributes;
+/**
+ * Events
+ */
+type ButtonEvents = {
+    keydown: CustomEventHandler<KeyboardEvent, HTMLButtonElement>;
+};
+type LinkEvents = {
+    keydown: CustomEventHandler<KeyboardEvent, HTMLAnchorElement>;
+};
+type GroupItemEvents<T extends Element = HTMLButtonElement> = {
+    click: CustomEventHandler<MouseEvent, T>;
+    keydown: CustomEventHandler<KeyboardEvent, T>;
+};
+export type { Props, ButtonProps, LinkProps, GroupProps, GroupItemProps, ButtonEvents, LinkEvents, GroupItemEvents };

package/dist/bits/toolbar/types.js

@@ -0,0 +1 @@
+export {};