bits-ui 0.9.9 → 0.10.0

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

@@ -0,0 +1,30 @@
+/**
+ * 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 { CreateTabsProps, TabsTriggerProps } from "@melt-ui/svelte";
+import type { AsChild, Expand, ObjectVariation, OmitValue, OnChangeFn } from "../../internal/index.js";
+type Props = Expand<OmitValue<CreateTabsProps> & {
+    /**
+     * The value of the currently active tab.
+     * You can bind this to a string value to programmatically control the active tab.
+     */
+    value?: CreateTabsProps["defaultValue"] & {};
+    /**
+     * A callback function called when the value changes.
+     */
+    onValueChange?: OnChangeFn<CreateTabsProps["defaultValue"]>;
+    /**
+     * The orientation of the tabs, which determines how keyboard navigation works.
+     *
+     * @defaultValue "horizontal"
+     */
+    orientation?: CreateTabsProps["orientation"] & {};
+} & AsChild>;
+type ContentProps = Expand<{
+    value: string;
+} & AsChild>;
+type TriggerProps = Expand<ObjectVariation<TabsTriggerProps> & AsChild>;
+type ListProps = AsChild;
+export type { Props, ContentProps, TriggerProps, ListProps };

package/dist/bits/tabs/_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/tabs/components/{TabsContent.svelte → tabs-content.svelte}

@@ -5,15 +5,17 @@ export let asChild = false;
 const {
   elements: { content }
 } = getCtx();
+const attrs = getAttrs("content");
 $:
   builder = $content(value);
-const attrs = getAttrs("content");
+$:
+  Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {builder} />
 {:else}
-	<div {...builder} use:builder.action {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+	<div {...builder} use:builder.action {...$$restProps}>
+		<slot {builder} />
 	</div>
 {/if}

package/dist/bits/tabs/components/{TabsContent.svelte.d.ts → tabs-content.svelte.d.ts}

@@ -17,7 +17,6 @@ declare const __propDef: {
             } & {
                 action: import("svelte/action").Action<any, any, Record<never, any>>;
             };
-            attrs: Record<string, string>;
         };
     };
 };

package/dist/bits/tabs/components/{TabsList.svelte → tabs-list.svelte}

@@ -4,15 +4,17 @@ export let asChild = false;
 const {
   elements: { list }
 } = getCtx();
+const attrs = getAttrs("list");
 $:
   builder = $list;
-const attrs = getAttrs("list");
+$:
+  Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {builder} />
 {:else}
-	<div {...builder} use:builder.action {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+	<div {...builder} use:builder.action {...$$restProps}>
+		<slot {builder} />
 	</div>
 {/if}

package/dist/bits/tabs/components/{TabsList.svelte.d.ts → tabs-list.svelte.d.ts}

@@ -16,7 +16,6 @@ declare const __propDef: {
             } & {
                 action: import("svelte/action").Action<any, any, Record<never, any>>;
             };
-            attrs: Record<string, string>;
         };
     };
 };

package/dist/bits/tabs/components/{TabsTrigger.svelte → tabs-trigger.svelte}

@@ -8,23 +8,24 @@ const {
   elements: { trigger }
 } = getCtx();
 const dispatch = createDispatcher();
+const attrs = getAttrs("trigger");
 $:
   builder = $trigger({ value, disabled });
-const attrs = getAttrs("trigger");
+$:
+  Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {builder} />
 {:else}
 	<button
 		{...builder} use:builder.action
 		type="button"
 		{...$$restProps}
-		{...attrs}
 		on:m-click={dispatch}
 		on:m-focus={dispatch}
 		on:m-keydown={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {builder} />
 	</button>
 {/if}

package/dist/bits/tabs/components/{TabsTrigger.svelte.d.ts → tabs-trigger.svelte.d.ts}

@@ -18,7 +18,6 @@ declare const __propDef: {
             } & {
                 action: (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click" | "focus">;
             };
-            attrs: Record<string, string>;
         };
     };
     events: TriggerEvents;

package/dist/bits/tabs/components/{Tabs.svelte → tabs.svelte}

@@ -25,6 +25,7 @@ const {
     return next;
   }
 });
+const attrs = getAttrs("root");
 $:
   value !== void 0 && localValue.set(value);
 $:
@@ -37,13 +38,19 @@ $:
   updateOption("autoSet", autoSet);
 $:
   builder = $root;
-const attrs = getAttrs("root");
+$:
+  Object.assign(builder, attrs);
+$:
+  slotProps = {
+    builder,
+    value: $localValue
+  };
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {...slotProps} />
 {:else}
-	<div {...builder} use:builder.action {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+	<div {...builder} use:builder.action {...$$restProps}>
+		<slot {...slotProps} />
 	</div>
 {/if}

package/dist/bits/tabs/components/{Tabs.svelte.d.ts → tabs.svelte.d.ts}

@@ -14,7 +14,7 @@ declare const __propDef: {
             } & {
                 action: import("svelte/action").Action<any, any, Record<never, any>>;
             };
-            attrs: Record<string, string>;
+            value: string;
         };
     };
 };

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

@@ -1,6 +1,6 @@
 /// <reference types="svelte" />
 import { type CreateTabsProps, type Tabs as TabsReturn } from "@melt-ui/svelte";
-export declare const getAttrs: (part: "root" | "content" | "trigger" | "list") => Record<string, string>;
+export declare const getAttrs: (part: "content" | "list" | "root" | "trigger") => Record<string, string>;
 export declare function setCtx(props: CreateTabsProps): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
     elements: {

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

@@ -1,6 +1,5 @@
-import Root from "./components/Tabs.svelte";
-import Content from "./components/TabsContent.svelte";
-import List from "./components/TabsList.svelte";
-import Trigger from "./components/TabsTrigger.svelte";
-export { Root, Content, List, Trigger, Root as Tabs, Content as TabsContent, List as TabsList, Trigger as TabsTrigger };
+export { default as Root } from "./components/tabs.svelte";
+export { default as Content } from "./components/tabs-content.svelte";
+export { default as List } from "./components/tabs-list.svelte";
+export { default as Trigger } from "./components/tabs-trigger.svelte";
 export * from "./types.js";

package/dist/bits/tabs/index.js

@@ -1,8 +1,5 @@
-import Root from "./components/Tabs.svelte";
-import Content from "./components/TabsContent.svelte";
-import List from "./components/TabsList.svelte";
-import Trigger from "./components/TabsTrigger.svelte";
-export { Root, Content, List, Trigger, 
-//
-Root as Tabs, Content as TabsContent, List as TabsList, Trigger as TabsTrigger };
+export { default as Root } from "./components/tabs.svelte";
+export { default as Content } from "./components/tabs-content.svelte";
+export { default as List } from "./components/tabs-list.svelte";
+export { default as Trigger } from "./components/tabs-trigger.svelte";
 export * from "./types.js";

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

@@ -1,20 +1,14 @@
-import type { CreateTabsProps, TabsTriggerProps } from "@melt-ui/svelte";
-import type { AsChild, Expand, HTMLDivAttributes, ObjectVariation, OmitValue, OnChangeFn } from "../../internal/index.js";
+import type { HTMLDivAttributes } from "../../internal/index.js";
 import type { HTMLButtonAttributes } from "svelte/elements";
 import type { CustomEventHandler } from "../../index.js";
-type Props = Expand<OmitValue<CreateTabsProps> & {
-    orientation?: CreateTabsProps["orientation"] & {};
-    value?: CreateTabsProps["defaultValue"] & {};
-    onValueChange?: OnChangeFn<CreateTabsProps["defaultValue"]>;
-} & AsChild> & HTMLDivAttributes;
-type ContentProps = Expand<{
-    value: string;
-} & AsChild> & HTMLDivAttributes;
-type TriggerProps = Expand<ObjectVariation<TabsTriggerProps> & AsChild> & HTMLButtonAttributes;
-type ListProps = AsChild & HTMLDivAttributes;
+import type * as I from "./_types.js";
+type Props = I.Props & HTMLDivAttributes;
+type ContentProps = I.ContentProps & HTMLDivAttributes;
+type TriggerProps = I.TriggerProps & HTMLButtonAttributes;
+type ListProps = I.ListProps & HTMLDivAttributes;
 type TriggerEvents<T extends Element = HTMLButtonElement> = {
     click: CustomEventHandler<MouseEvent, T>;
     keydown: CustomEventHandler<KeyboardEvent, T>;
     focus: CustomEventHandler<FocusEvent, T>;
 };
-export type { Props, ContentProps, TriggerProps, ListProps, Props as TabsProps, ContentProps as TabsContentProps, TriggerProps as TabsTriggerProps, ListProps as TabsListProps, TriggerEvents, TriggerEvents as TabsTriggerEvents };
+export type { Props, ContentProps, TriggerProps, ListProps, TriggerEvents };

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

@@ -0,0 +1 @@
+export type { Props as ToggleProps, Events as ToggleEvents } from "./types.js";

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

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

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

@@ -0,0 +1,21 @@
+/**
+ * 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 { CreateToggleProps } from "@melt-ui/svelte";
+import type { AsChild, Expand, OmitPressed, OnChangeFn } from "../../internal/index.js";
+type Props = Expand<OmitPressed<CreateToggleProps> & {
+    /**
+     * The pressed state of the toggle.
+     * You can bind this to a boolean value to programmatically control the pressed state.
+     *
+     * @defaultValue false
+     */
+    pressed?: boolean;
+    /**
+     * A callback function called when the pressed state changes.
+     */
+    onPressedChange?: OnChangeFn<boolean>;
+} & AsChild>;
+export type { Props, Props as ToggleProps };

package/dist/bits/toggle/_types.js

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

package/dist/bits/toggle/components/{Toggle.svelte → toggle.svelte}

@@ -21,26 +21,27 @@ const {
   }
 });
 const dispatch = createDispatcher();
+const attrs = getAttrs("root");
 $:
   pressed !== void 0 && localPressed.set(pressed);
 $:
   updateOption("disabled", disabled);
 $:
   builder = $root;
-const attrs = getAttrs("root");
+$:
+  Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {builder} />
 {:else}
 	<button
 		{...builder} use:builder.action
 		type="button"
 		{...$$restProps}
-		{...attrs}
 		on:m-click={dispatch}
 		on:m-keydown={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {builder} />
 	</button>
 {/if}

package/dist/bits/toggle/components/{Toggle.svelte.d.ts → toggle.svelte.d.ts}

@@ -15,7 +15,6 @@ declare const __propDef: {
             } & {
                 action: (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click">;
             };
-            attrs: Record<string, string>;
         };
     };
     events: Events;

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

@@ -1,3 +1,2 @@
-import Root from "./components/Toggle.svelte";
-export { Root, Root as Toggle };
+export { default as Root } from "./components/toggle.svelte";
 export * from "./types.js";

package/dist/bits/toggle/index.js

@@ -1,5 +1,2 @@
-import Root from "./components/Toggle.svelte";
-export { Root, 
-//
-Root as Toggle };
+export { default as Root } from "./components/toggle.svelte";
 export * from "./types.js";

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

@@ -1,13 +1,9 @@
-import type { CreateToggleProps } from "@melt-ui/svelte";
-import type { AsChild, Expand, OmitPressed, OnChangeFn } from "../../internal/index.js";
 import type { HTMLButtonAttributes } from "svelte/elements";
 import type { CustomEventHandler } from "../../index.js";
-type Props = Expand<OmitPressed<CreateToggleProps> & {
-    pressed?: boolean;
-    onPressedChange?: OnChangeFn<boolean>;
-} & AsChild> & HTMLButtonAttributes;
+import type * as I from "./_types.js";
+type Props = I.Props & HTMLButtonAttributes;
 type Events<T extends Element = HTMLButtonElement> = {
     click: CustomEventHandler<MouseEvent, T>;
     keydown: CustomEventHandler<KeyboardEvent, T>;
 };
-export type { Props, Props as ToggleProps, Events, Events as ToggleEvents };
+export type { Props, Events };

package/dist/bits/toggle-group/_export.types.d.ts

@@ -0,0 +1 @@
+export type { Props as ToggleGroupProps, ItemProps as ToggleGroupItemProps, ItemEvents as ToggleGroupItemEvents } from "./types.js";

package/dist/bits/toggle-group/_export.types.js

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

package/dist/bits/toggle-group/_types.d.ts

@@ -0,0 +1,45 @@
+/**
+ * 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 { CreateToggleGroupProps } from "@melt-ui/svelte";
+import type { AsChild, Expand, OmitValue, OnChangeFn } from "../../internal/index.js";
+type Props<T extends "single" | "multiple"> = Expand<OmitValue<CreateToggleGroupProps<T>> & {
+    /**
+     * The value of the toggle group, which is a string or an array of strings,
+     * depending on the type of the toggle group.
+     *
+     * You can bind to this to programmatically control the value.
+     */
+    value?: CreateToggleGroupProps<T>["defaultValue"];
+    /**
+     * A callback function called when the value changes.
+     */
+    onValueChange?: OnChangeFn<CreateToggleGroupProps<T>["defaultValue"]>;
+    /**
+     * The type of the toggle group.
+     *
+     * If the type is `"single"`, the toggle group allows only one item to be selected
+     * at a time. If the type is `"multiple"`, the toggle group allows multiple items
+     * to be selected at a time.
+     */
+    type?: T;
+} & AsChild>;
+type ItemProps = Expand<{
+    /**
+     * The value of the toggle group item. When the toggle group item is selected,
+     * the toggle group's value will be set to this value if in `"single"` mode,
+     * or this value will be pushed to the toggle group's array value if in `"multiple"` mode.
+     *
+     * @required
+     */
+    value: string;
+    /**
+     * Whether the toggle group item is disabled.
+     *
+     * @defaultValue false
+     */
+    disabled?: boolean;
+} & AsChild>;
+export type { Props, ItemProps };

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

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

package/dist/bits/toggle-group/components/{ToggleGroupItem.svelte → toggle-group-item.svelte}

@@ -8,21 +8,22 @@ const {
   elements: { item }
 } = getCtx();
 const dispatch = createDispatcher();
+const attrs = getAttrs("item");
 $:
   builder = $item({ value, disabled });
-const attrs = getAttrs("item");
+$:
+  Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {builder} />
 {:else}
 	<button
 		{...builder} use:builder.action
 		{...$$restProps}
-		{...attrs}
 		on:m-click={dispatch}
 		on:m-keydown={dispatch}
 	>
-		<slot {builder} {attrs} />
+		<slot {builder} />
 	</button>
 {/if}

package/dist/bits/toggle-group/components/{ToggleGroupItem.svelte.d.ts → toggle-group-item.svelte.d.ts}

@@ -21,7 +21,6 @@ declare const __propDef: {
             } & {
                 action: (node: HTMLElement) => import("@melt-ui/svelte/internal/types").MeltActionReturn<"keydown" | "click">;
             };
-            attrs: Record<string, string>;
         };
     };
     events: ItemEvents;

package/dist/bits/toggle-group/components/{ToggleGroup.svelte → toggle-group.svelte}

@@ -30,6 +30,7 @@ const {
     return next;
   }
 });
+const attrs = getAttrs("root");
 $:
   value !== void 0 && localValue.set(value);
 $:
@@ -42,13 +43,14 @@ $:
   updateOption("orientation", orientation);
 $:
   builder = $root;
-const attrs = getAttrs("root");
+$:
+  Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {builder} />
 {:else}
-	<div {...builder} use:builder.action {...$$restProps} {...attrs}>
-		<slot {builder} {attrs} />
+	<div {...builder} use:builder.action {...$$restProps}>
+		<slot {builder} />
 	</div>
 {/if}

package/dist/bits/toggle-group/components/{ToggleGroup.svelte.d.ts → toggle-group.svelte.d.ts}

@@ -15,7 +15,6 @@ declare class __sveltets_Render<T extends "single" | "multiple"> {
             } & {
                 action: import("svelte/action").Action<any, any, Record<never, any>>;
             };
-            attrs: Record<string, string>;
         };
     };
 }

package/dist/bits/toggle-group/index.d.ts

@@ -1,4 +1,3 @@
-import Root from "./components/ToggleGroup.svelte";
-import Item from "./components/ToggleGroupItem.svelte";
-export { Root, Item, Root as ToggleGroup, Item as ToggleGroupItem };
+export { default as Root } from "./components/toggle-group.svelte";
+export { default as Item } from "./components/toggle-group-item.svelte";
 export * from "./types.js";

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

@@ -1,6 +1,3 @@
-import Root from "./components/ToggleGroup.svelte";
-import Item from "./components/ToggleGroupItem.svelte";
-export { Root, Item, 
-//
-Root as ToggleGroup, Item as ToggleGroupItem };
+export { default as Root } from "./components/toggle-group.svelte";
+export { default as Item } from "./components/toggle-group-item.svelte";
 export * from "./types.js";

package/dist/bits/toggle-group/types.d.ts

@@ -1,18 +1,11 @@
-import type { CreateToggleGroupProps } from "@melt-ui/svelte";
-import type { AsChild, Expand, HTMLDivAttributes, OmitValue, OnChangeFn } from "../../internal/index.js";
+import type { HTMLDivAttributes } from "../../internal/index.js";
 import type { HTMLButtonAttributes } from "svelte/elements";
 import type { CustomEventHandler } from "../../index.js";
-type Props<T extends "single" | "multiple"> = Expand<OmitValue<CreateToggleGroupProps<T>> & {
-    value?: CreateToggleGroupProps<T>["defaultValue"];
-    onValueChange?: OnChangeFn<CreateToggleGroupProps<T>["defaultValue"]>;
-    type?: T;
-}> & AsChild & HTMLDivAttributes;
-type ItemProps = {
-    value: string;
-    disabled?: boolean;
-} & AsChild & HTMLButtonAttributes;
+import type * as I from "./_types.js";
+type Props<T extends "single" | "multiple"> = I.Props<T> & HTMLDivAttributes;
+type ItemProps = I.ItemProps & HTMLButtonAttributes;
 type ItemEvents<T extends Element = HTMLButtonElement> = {
     click: CustomEventHandler<MouseEvent, T>;
     keydown: CustomEventHandler<KeyboardEvent, T>;
 };
-export type { Props, ItemProps, Props as ToggleGroupProps, ItemProps as ToggleGroupItemProps, ItemEvents, ItemEvents as ToggleGroupItemEvents };
+export type { Props, ItemProps, ItemEvents };

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

@@ -0,0 +1 @@
+export type { Props as TooltipProps, ArrowProps as TooltipArrowProps, ContentProps as TooltipContentProps, TriggerProps as TooltipTriggerProps, TriggerEvents as TooltipTriggerEvents, ContentEvents as TooltipContentEvents } from "./types.js";

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

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

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

@@ -0,0 +1,37 @@
+/**
+ * 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 { CreateTooltipProps } from "@melt-ui/svelte";
+import type { Expand, OmitFloating, OnChangeFn, AsChild } from "../../internal/index.js";
+import type { ArrowProps, ContentProps } from "../floating/_types.js";
+type Props = Expand<OmitFloating<CreateTooltipProps>> & {
+    /**
+     * The open state of the tooltip.
+     * You can bind this to a boolean value to programmatically control the open state.
+     *
+     * @example
+     * ```svelte
+     * <script>
+     * 	import { Tooltip } from 'bits-ui';
+     * 	let open = false;
+     *
+     * 	$: if (someCondition) {
+     * 		open = true
+     * 	}
+     * </script>
+     *
+     * <Tooltip.Root bind:open>
+     * 	<!-- ... -->
+     * </Tooltip.Root>
+     * ```
+     */
+    open?: boolean & {};
+    /**
+     * A callback function called when the open state changes.
+     */
+    onOpenChange?: OnChangeFn<boolean>;
+};
+type TriggerProps = AsChild;
+export type { Props, ArrowProps, TriggerProps, ContentProps };

package/dist/bits/tooltip/_types.js

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

package/dist/bits/{select/components/SelectArrow.svelte → tooltip/components/tooltip-arrow.svelte}

@@ -1,17 +1,19 @@
 <script>import { melt } from "@melt-ui/svelte";
 import { setArrow, getAttrs } from "../ctx.js";
-export let asChild = false;
 export let size = 8;
+export let asChild = false;
 const {
   elements: { arrow }
 } = setArrow(size);
+const attrs = getAttrs("arrow");
 $:
   builder = $arrow;
-const attrs = getAttrs("arrow");
+$:
+  Object.assign(builder, attrs);
 </script>
 
 {#if asChild}
-	<slot {builder} {attrs} />
+	<slot {builder} />
 {:else}
-	<div {...builder} use:builder.action {...$$restProps} {...attrs} />
+	<div {...builder} use:builder.action {...$$restProps} />
 {/if}

package/dist/bits/tooltip/components/{TooltipArrow.svelte.d.ts → tooltip-arrow.svelte.d.ts}

@@ -15,7 +15,6 @@ declare const __propDef: {
             } & {
                 action: import("svelte/action").Action<any, any, Record<never, any>>;
             };
-            attrs: Record<string, string>;
         };
     };
 };