bits-ui 0.11.5 → 0.11.6

package/dist/bits/index.d.ts

@@ -16,6 +16,7 @@ export * as DropdownMenu from "./dropdown-menu/index.js";
 export * as LinkPreview from "./link-preview/index.js";
 export * as Label from "./label/index.js";
 export * as Menubar from "./menubar/index.js";
+export * as Pagination from "./pagination/index.js";
 export * as Popover from "./popover/index.js";
 export * as Progress from "./progress/index.js";
 export * as RadioGroup from "./radio-group/index.js";
@@ -27,4 +28,5 @@ export * as Switch from "./switch/index.js";
 export * as Tabs from "./tabs/index.js";
 export * as Toggle from "./toggle/index.js";
 export * as ToggleGroup from "./toggle-group/index.js";
+export * as Toolbar from "./toolbar/index.js";
 export * as Tooltip from "./tooltip/index.js";

package/dist/bits/index.js

@@ -16,6 +16,7 @@ export * as DropdownMenu from "./dropdown-menu/index.js";
 export * as LinkPreview from "./link-preview/index.js";
 export * as Label from "./label/index.js";
 export * as Menubar from "./menubar/index.js";
+export * as Pagination from "./pagination/index.js";
 export * as Popover from "./popover/index.js";
 export * as Progress from "./progress/index.js";
 export * as RadioGroup from "./radio-group/index.js";
@@ -27,4 +28,5 @@ export * as Switch from "./switch/index.js";
 export * as Tabs from "./tabs/index.js";
 export * as Toggle from "./toggle/index.js";
 export * as ToggleGroup from "./toggle-group/index.js";
+export * as Toolbar from "./toolbar/index.js";
 export * as Tooltip from "./tooltip/index.js";

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

@@ -0,0 +1 @@
+export type { Props as PaginationProps, PrevButtonProps as PaginationPrevButtonProps, NextButtonProps as PaginationNextButtonProps, PageProps as PaginationPageProps, Events as PaginationEvents, PrevButtonEvents as PaginationPrevButtonEvents, NextButtonEvents as PaginationNextButtonEvents, PageEvents as PaginationPageEvents } from "./types.js";

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

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

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

@@ -0,0 +1,26 @@
+/**
+ * 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 { AsChild, Expand, OnChangeFn } from "../../internal";
+import type { CreatePaginationProps, Page } from "@melt-ui/svelte";
+type OmitPaginationProps<T> = Omit<T, "page" | "defaultPage" | "onPageChange">;
+type Props = Expand<OmitPaginationProps<CreatePaginationProps> & {
+    /**
+     * The selected page. This updates as the users selects new pages.
+     *
+     * You can bind this to a value to programmatically control the value state.
+     */
+    page?: number;
+    /**
+     * A callback function called when the page changes.
+     */
+    onPageChange?: OnChangeFn<number>;
+} & AsChild>;
+type PageProps = {
+    page: Page;
+} & AsChild;
+type PrevButtonProps = AsChild;
+type NextButtonProps = AsChild;
+export type { Props, PrevButtonProps, NextButtonProps, PageProps };

package/dist/bits/pagination/_types.js

@@ -0,0 +1,6 @@
+/**
+ * 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.
+ */
+export {};

package/dist/bits/pagination/components/pagination-next-button.svelte

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

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

@@ -0,0 +1,26 @@
+import { SvelteComponent } from "svelte";
+import type { NextButtonProps } from "../types.js";
+declare const __propDef: {
+    props: NextButtonProps;
+    slots: {
+        default: {
+            builder: {
+                readonly 'aria-label': "Next";
+                readonly disabled: boolean;
+            } & {
+                [x: `data-melt-${string}`]: "";
+            } & {
+                action: (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click">;
+            };
+        };
+    };
+    events: {
+        click: import("../../../index.js").CustomEventHandler<MouseEvent, HTMLDivElement>;
+    };
+};
+export type PaginationNextButtonProps = typeof __propDef.props;
+export type PaginationNextButtonEvents = typeof __propDef.events;
+export type PaginationNextButtonSlots = typeof __propDef.slots;
+export default class PaginationNextButton extends SvelteComponent<PaginationNextButtonProps, PaginationNextButtonEvents, PaginationNextButtonSlots> {
+}
+export {};

package/dist/bits/pagination/components/pagination-page.svelte

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

package/dist/bits/pagination/components/pagination-page.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponent } from "svelte";
+import type { PageProps } from "../types.js";
+declare const __propDef: {
+    props: PageProps;
+    slots: {
+        default: {
+            builder: ((pageItem: import("@melt-ui/svelte/index.js").Page) => {
+                'aria-label': string;
+                'data-value': number;
+                'data-selected': string | undefined;
+            }) & {
+                [x: `data-melt-${string}`]: "";
+            } & {
+                action: (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click">;
+            };
+        };
+    };
+    events: {
+        click: import("../../../index.js").CustomEventHandler<MouseEvent, HTMLDivElement>;
+    };
+};
+export type PaginationPageProps = typeof __propDef.props;
+export type PaginationPageEvents = typeof __propDef.events;
+export type PaginationPageSlots = typeof __propDef.slots;
+export default class PaginationPage extends SvelteComponent<PaginationPageProps, PaginationPageEvents, PaginationPageSlots> {
+}
+export {};

package/dist/bits/pagination/components/pagination-prev-button.svelte

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

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

@@ -0,0 +1,26 @@
+import { SvelteComponent } from "svelte";
+import type { PrevButtonProps } from "../types.js";
+declare const __propDef: {
+    props: PrevButtonProps;
+    slots: {
+        default: {
+            builder: {
+                readonly 'aria-label': "Previous";
+                readonly disabled: boolean;
+            } & {
+                [x: `data-melt-${string}`]: "";
+            } & {
+                action: (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click">;
+            };
+        };
+    };
+    events: {
+        click: import("../../../index.js").CustomEventHandler<MouseEvent, HTMLDivElement>;
+    };
+};
+export type PaginationPrevButtonProps = typeof __propDef.props;
+export type PaginationPrevButtonEvents = typeof __propDef.events;
+export type PaginationPrevButtonSlots = typeof __propDef.slots;
+export default class PaginationPrevButton extends SvelteComponent<PaginationPrevButtonProps, PaginationPrevButtonEvents, PaginationPrevButtonSlots> {
+}
+export {};

package/dist/bits/pagination/components/pagination.svelte

@@ -0,0 +1,38 @@
+<script>import { melt } from "@melt-ui/svelte";
+import { getAttrs, setCtx } from "../ctx.js";
+export let count;
+export let page = void 0;
+export let onPageChange = void 0;
+export let perPage = void 0;
+export let siblingCount = void 0;
+export let asChild = false;
+const {
+  elements: { root },
+  states: { pages, range }
+} = setCtx({
+  count,
+  perPage,
+  siblingCount,
+  defaultPage: page,
+  onPageChange: ({ next }) => {
+    if (page !== next) {
+      onPageChange?.(next);
+      page = next;
+    }
+    return next;
+  }
+});
+const attrs = getAttrs("root");
+$:
+  builder = $root;
+$:
+  Object.assign(builder, attrs);
+</script>
+
+{#if asChild}
+	<slot {builder} pages={$pages} range={$range} />
+{:else}
+	<div {...builder} use:builder.action {...$$restProps}>
+		<slot {builder} pages={$pages} range={$range} />
+	</div>
+{/if}

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

@@ -0,0 +1,30 @@
+import { SvelteComponent } from "svelte";
+import type { Props } from "../types.js";
+declare const __propDef: {
+    props: Props;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            builder: {
+                'data-scope': string;
+            } & {
+                [x: `data-melt-${string}`]: "";
+            } & {
+                action: import("svelte/action").Action<any, any, Record<never, any>>;
+            };
+            pages: import("@melt-ui/svelte/index.js").PageItem[];
+            range: {
+                start: number;
+                end: number;
+            };
+        };
+    };
+};
+export type PaginationProps = typeof __propDef.props;
+export type PaginationEvents = typeof __propDef.events;
+export type PaginationSlots = typeof __propDef.slots;
+export default class Pagination extends SvelteComponent<PaginationProps, PaginationEvents, PaginationSlots> {
+}
+export {};

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

@@ -0,0 +1,55 @@
+/// <reference types="svelte" />
+import { type CreatePaginationProps, type Pagination as PaginationReturn } from "@melt-ui/svelte";
+export declare const getAttrs: (part: "page" | "root" | "prev-button" | "next-button") => Record<string, string>;
+export declare function setCtx(props: CreatePaginationProps): {
+    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").Stores | undefined, import("svelte/action").Action<any, any, Record<never, any>>, () => {
+            'data-scope': string;
+        }, string>;
+        pageTrigger: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<{
+            update: (updater: import("svelte/store").Updater<number>, sideEffect?: ((newValue: number) => void) | undefined) => void;
+            set: (this: void, value: number) => void;
+            subscribe(this: void, run: import("svelte/store").Subscriber<number>, invalidate?: import("svelte/store").Invalidator<number> | undefined): import("svelte/store").Unsubscriber;
+        }, (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click">, ($page: number) => (pageItem: import("@melt-ui/svelte").Page) => {
+            'aria-label': string;
+            'data-value': number;
+            'data-selected': string | undefined;
+        }, string>;
+        prevButton: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<{
+            update: (updater: import("svelte/store").Updater<number>, sideEffect?: ((newValue: number) => void) | undefined) => void;
+            set: (this: void, value: number) => void;
+            subscribe(this: void, run: import("svelte/store").Subscriber<number>, invalidate?: import("svelte/store").Invalidator<number> | undefined): import("svelte/store").Unsubscriber;
+        }, (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click">, ($page: number) => {
+            readonly 'aria-label': "Previous";
+            readonly disabled: boolean;
+        }, string>;
+        nextButton: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[{
+            update: (updater: import("svelte/store").Updater<number>, sideEffect?: ((newValue: number) => void) | undefined) => void;
+            set: (this: void, value: number) => void;
+            subscribe(this: void, run: import("svelte/store").Subscriber<number>, invalidate?: import("svelte/store").Invalidator<number> | undefined): import("svelte/store").Unsubscriber;
+        }, import("svelte/store").Readable<number>], (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click">, ([$page, $totalPages]: [number, number]) => {
+            readonly 'aria-label': "Next";
+            readonly disabled: boolean;
+        }, string>;
+    };
+    states: {
+        range: import("svelte/store").Readable<{
+            start: number;
+            end: number;
+        }>;
+        page: {
+            update: (updater: import("svelte/store").Updater<number>, sideEffect?: ((newValue: number) => void) | undefined) => void;
+            set: (this: void, value: number) => void;
+            subscribe(this: void, run: import("svelte/store").Subscriber<number>, invalidate?: import("svelte/store").Invalidator<number> | undefined): import("svelte/store").Unsubscriber;
+        };
+        pages: import("svelte/store").Readable<import("@melt-ui/svelte").PageItem[]>;
+        totalPages: import("svelte/store").Readable<number>;
+    };
+    options: {
+        count: import("svelte/store").Writable<number>;
+        perPage: import("svelte/store").Writable<number>;
+        siblingCount: import("svelte/store").Writable<number>;
+    };
+};
+export declare function getCtx(): PaginationReturn;

package/dist/bits/pagination/ctx.js

@@ -0,0 +1,17 @@
+import { createPagination } from "@melt-ui/svelte";
+import { getContext, setContext } from "svelte";
+import { createBitAttrs, getOptionUpdater, removeUndefined } from "../../internal";
+const NAME = "pagination";
+const PARTS = ["root", "prev-button", "next-button", "page"];
+export const getAttrs = createBitAttrs(NAME, PARTS);
+export function setCtx(props) {
+    const pagination = createPagination(removeUndefined(props));
+    setContext(NAME, pagination);
+    return {
+        ...pagination,
+        updateOption: getOptionUpdater(pagination.options)
+    };
+}
+export function getCtx() {
+    return getContext(NAME);
+}

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

@@ -0,0 +1,5 @@
+export { default as Root } from "./components/pagination.svelte";
+export { default as PrevButton } from "./components/pagination-prev-button.svelte";
+export { default as NextButton } from "./components/pagination-next-button.svelte";
+export { default as Page } from "./components/pagination-page.svelte";
+export * from "./types.js";

package/dist/bits/pagination/index.js

@@ -0,0 +1,5 @@
+export { default as Root } from "./components/pagination.svelte";
+export { default as PrevButton } from "./components/pagination-prev-button.svelte";
+export { default as NextButton } from "./components/pagination-next-button.svelte";
+export { default as Page } from "./components/pagination-page.svelte";
+export * from "./types.js";

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

@@ -0,0 +1,21 @@
+import type { HTMLButtonAttributes } from "svelte/elements";
+import type { CustomEventHandler } from "../..";
+import type * as I from "./_types.js";
+import type { HTMLDivAttributes } from "../../internal/types.js";
+type Props = I.Props & HTMLDivAttributes;
+type PrevButtonProps = I.PrevButtonProps & HTMLButtonAttributes;
+type NextButtonProps = I.NextButtonProps & HTMLButtonAttributes;
+type PageProps = I.PageProps & HTMLButtonAttributes;
+/**
+ * Events
+ */
+type ButtonEvents = {
+    click: CustomEventHandler<MouseEvent, HTMLDivElement>;
+};
+type PrevButtonEvents = ButtonEvents;
+type NextButtonEvents = ButtonEvents;
+type PageEvents = ButtonEvents;
+type Events = {
+    keydown: CustomEventHandler<KeyboardEvent, HTMLDivElement>;
+};
+export type { Props, PageProps, PrevButtonProps, NextButtonProps, Events, PageEvents, PrevButtonEvents, NextButtonEvents };

package/dist/bits/pagination/types.js

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

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 {};

package/dist/shared/index.d.ts

@@ -1,5 +1,5 @@
 import type { DateValue } from "@internationalized/date";
-import type { Month } from "@melt-ui/svelte";
+import type { Month, Page, PageItem, Ellipsis } from "@melt-ui/svelte";
 export type Selected<Value> = {
     value: Value;
     label?: string;
@@ -9,4 +9,4 @@ export type DateRange = {
     end: DateValue | undefined;
 };
 export type SegmentPart = "month" | "day" | "year" | "hour" | "minute" | "second" | "dayPeriod" | "timeZoneName" | "literal";
-export type { Month };
+export type { Month, Page, PageItem, Ellipsis };

package/dist/types.d.ts

@@ -16,6 +16,7 @@ export type * from "./bits/dropdown-menu/_export.types.js";
 export type * from "./bits/label/_export.types.js";
 export type * from "./bits/link-preview/_export.types.js";
 export type * from "./bits/menubar/_export.types.js";
+export type * from "./bits/pagination/_export.types.js";
 export type * from "./bits/popover/_export.types.js";
 export type * from "./bits/progress/_export.types.js";
 export type * from "./bits/radio-group/_export.types.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bits-ui",
-  "version": "0.11.5",
+  "version": "0.11.6",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "exports": {