bits-ui 0.11.4 → 0.11.6

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

@@ -36,7 +36,7 @@ const {
   states: {
     value: localValue,
     placeholder: localPlaceholder,
-    months,
+    months: localMonths,
     weekdays
   },
   updateOption,
@@ -126,10 +126,13 @@ $:
 $:
   Object.assign(builder, attrs);
 const dispatch = createDispatcher();
+let months = $localMonths;
+$:
+  months = $localMonths;
 </script>
 
 {#if asChild}
-	<slot months={$months} weekdays={$weekdays} {builder} />
+	<slot {months} weekdays={$weekdays} {builder} />
 {:else}
 	<div
 		{...builder} use:builder.action
@@ -137,6 +140,6 @@ const dispatch = createDispatcher();
 		on:m-keydown={dispatch}
 		bind:this={el}
 	>
-		<slot months={$months} weekdays={$weekdays} {builder} />
+		<slot {months} weekdays={$weekdays} {builder} />
 	</div>
 {/if}

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

@@ -1,4 +1,6 @@
 import { SvelteComponent } from "svelte";
+import type { DateValue } from "@internationalized/date";
+import { type Month } from "@melt-ui/svelte";
 import type { Props } from "../types.js";
 declare class __sveltets_Render<Multiple extends boolean> {
     props(): Props<Multiple>;
@@ -7,7 +9,7 @@ declare class __sveltets_Render<Multiple extends boolean> {
     };
     slots(): {
         default: {
-            months: import("@melt-ui/svelte/index.js").Month<import("@internationalized/date").DateValue>[];
+            months: Month<DateValue>[];
             weekdays: string[];
             builder: {
                 id: string;

package/dist/bits/date-picker/components/date-picker-calendar.svelte

@@ -5,7 +5,7 @@ export let asChild = false;
 export let id = void 0;
 const {
   elements: { calendar },
-  states: { months, weekdays },
+  states: { months: localMonths, weekdays },
   ids
 } = getCtx();
 $:
@@ -18,12 +18,15 @@ $:
   builder = $calendar;
 $:
   Object.assign(builder, attrs);
+let months = $localMonths;
+$:
+  months = $localMonths;
 </script>
 
 {#if asChild}
-	<slot {builder} months={$months} weekdays={$weekdays} />
+	<slot {builder} {months} weekdays={$weekdays} />
 {:else}
 	<div {...builder} use:builder.action {...$$restProps} on:m-keydown={dispatch}>
-		<slot {builder} months={$months} weekdays={$weekdays} />
+		<slot {builder} {months} weekdays={$weekdays} />
 	</div>
 {/if}

package/dist/bits/date-picker/components/date-picker-calendar.svelte.d.ts

@@ -1,5 +1,7 @@
 import { SvelteComponent } from "svelte";
+import { type Month } from "@melt-ui/svelte";
 import type { CalendarEvents, CalendarProps } from "../types.js";
+import type { DateValue } from "@internationalized/date";
 declare const __propDef: {
     props: CalendarProps;
     slots: {
@@ -16,7 +18,7 @@ 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[];
         };
     };

package/dist/bits/date-picker/components/date-picker.svelte

@@ -22,6 +22,7 @@ export let isDateDisabled = void 0;
 export let fixedWeeks = void 0;
 export let calendarLabel = void 0;
 export let weekdayFormat = void 0;
+export let numberOfMonths = void 0;
 const {
   states: {
     value: localValue,
@@ -48,6 +49,7 @@ const {
   minValue,
   readonly,
   weekdayFormat,
+  numberOfMonths,
   isDateUnavailable,
   onValueChange: ({ next }) => {
     if (value !== next) {
@@ -158,6 +160,8 @@ $:
   updateOption("calendarLabel", calendarLabel);
 $:
   updateOption("weekdayFormat", weekdayFormat);
+$:
+  updateOption("numberOfMonths", numberOfMonths);
 </script>
 
 <slot ids={$idValues} isInvalid={$localIsInvalid} />

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

@@ -4,7 +4,7 @@ export let asChild = false;
 export let id = void 0;
 const {
   elements: { calendar },
-  states: { months, weekdays },
+  states: { months: localMonths, weekdays },
   ids
 } = getCtx();
 $:
@@ -16,12 +16,15 @@ $:
   builder = $calendar;
 $:
   Object.assign(builder, attrs);
+let months = $localMonths;
+$:
+  months = $localMonths;
 </script>
 
 {#if asChild}
-	<slot {builder} months={$months} weekdays={$weekdays} />
+	<slot {builder} {months} weekdays={$weekdays} />
 {:else}
 	<div {...builder} use:builder.action {...$$restProps}>
-		<slot {builder} months={$months} weekdays={$weekdays} />
+		<slot {builder} {months} weekdays={$weekdays} />
 	</div>
 {/if}

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

@@ -1,5 +1,7 @@
 import { SvelteComponent } from "svelte";
+import { type Month } from "@melt-ui/svelte";
 import type { CalendarProps } from "../types.js";
+import type { DateValue } from "@internationalized/date";
 declare const __propDef: {
     props: CalendarProps;
     events: {
@@ -19,7 +21,7 @@ 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[];
         };
     };

package/dist/bits/date-range-picker/components/date-range-picker.svelte

@@ -23,6 +23,7 @@ export let fixedWeeks = void 0;
 export let calendarLabel = void 0;
 export let weekdayFormat = void 0;
 export let startValue = void 0;
+export let numberOfMonths = void 0;
 const {
   states: {
     value: localValue,
@@ -51,6 +52,7 @@ const {
   minValue,
   readonly,
   weekdayFormat,
+  numberOfMonths,
   isDateUnavailable,
   onValueChange: ({ next }) => {
     if (value !== next) {
@@ -211,6 +213,8 @@ $:
   updateOption("calendarLabel", calendarLabel);
 $:
   updateOption("weekdayFormat", weekdayFormat);
+$:
+  updateOption("numberOfMonths", numberOfMonths);
 </script>
 
 <slot

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