bits-ui 0.0.27 → 0.0.28

package/dist/bits/popover/components/PopoverContent.svelte.d.ts

@@ -1,9 +1,13 @@
 import { SvelteComponent } from "svelte";
 import type { Transition } from "../../../internal/index.js";
-declare class __sveltets_Render<T extends Transition> {
+declare class __sveltets_Render<T extends Transition, In extends Transition, Out extends Transition> {
     props(): {
         transition?: T | undefined;
         transitionConfig?: import("../../../internal/index.js").TransitionParams<T> | undefined;
+        inTransition?: In | undefined;
+        inTransitionConfig?: import("../../../internal/index.js").TransitionParams<In> | undefined;
+        outTransition?: Out | undefined;
+        outTransitionConfig?: import("../../../internal/index.js").TransitionParams<Out> | undefined;
         asChild?: boolean | undefined;
         accesskey?: string | null | undefined;
         autofocus?: boolean | null | undefined;
@@ -223,9 +227,9 @@ declare class __sveltets_Render<T extends Transition> {
         };
     };
 }
-export type PopoverContentProps<T extends Transition> = ReturnType<__sveltets_Render<T>['props']>;
-export type PopoverContentEvents<T extends Transition> = ReturnType<__sveltets_Render<T>['events']>;
-export type PopoverContentSlots<T extends Transition> = ReturnType<__sveltets_Render<T>['slots']>;
-export default class PopoverContent<T extends Transition> extends SvelteComponent<PopoverContentProps<T>, PopoverContentEvents<T>, PopoverContentSlots<T>> {
+export type PopoverContentProps<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['props']>;
+export type PopoverContentEvents<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['events']>;
+export type PopoverContentSlots<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['slots']>;
+export default class PopoverContent<T extends Transition, In extends Transition, Out extends Transition> extends SvelteComponent<PopoverContentProps<T, In, Out>, PopoverContentEvents<T, In, Out>, PopoverContentSlots<T, In, Out>> {
 }
 export {};

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

@@ -1,4 +1,4 @@
-import type { OmitOpen, Expand, HTMLDivAttributes, Transition, TransitionParams, OnChangeFn, AsChild } from "../../internal/index.js";
+import type { OmitOpen, Expand, HTMLDivAttributes, Transition, OnChangeFn, AsChild, TransitionProps } from "../../internal/index.js";
 import type { ButtonEventHandler } from "../../index.js";
 import type { CreatePopoverProps } from "@melt-ui/svelte";
 import type { HTMLButtonAttributes } from "svelte/elements";
@@ -6,10 +6,7 @@ type Props = Expand<OmitOpen<CreatePopoverProps> & {
     open?: CreatePopoverProps["defaultOpen"];
     onOpenChange?: OnChangeFn<CreatePopoverProps["defaultOpen"]>;
 }>;
-type ContentProps<T extends Transition = Transition> = Expand<{
-    transition?: T;
-    transitionConfig?: TransitionParams<T>;
-} & AsChild> & HTMLDivAttributes;
+type ContentProps<T extends Transition = Transition, In extends Transition = Transition, Out extends Transition = Transition> = Expand<TransitionProps<T, In, Out> & AsChild> & HTMLDivAttributes;
 type TriggerProps = AsChild & HTMLButtonAttributes;
 type CloseProps = AsChild & HTMLButtonAttributes;
 type ArrowProps = Expand<{

package/dist/bits/select/components/Select.svelte

@@ -15,6 +15,7 @@ export let onValueChange = void 0;
 export let open = void 0;
 export let onOpenChange = void 0;
 export let label = void 0;
+export let forceVisible = true;
 const {
   states: { open: localOpen, value: localValue },
   updateOption
@@ -70,6 +71,8 @@ $:
   updateOption("name", name);
 $:
   updateOption("multiple", multiple);
+$:
+  updateOption("forceVisible", forceVisible);
 </script>
 
 <slot />

package/dist/bits/select/components/Select.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 import type { SelectProps } from "../types.js";
 declare const __propDef: {
     props: {
+        forceVisible?: boolean | undefined;
         multiple?: false | undefined;
         disabled?: boolean | undefined;
         preventScroll?: boolean | undefined;

package/dist/bits/select/components/SelectContent.svelte

@@ -3,6 +3,10 @@ import { melt } from "@melt-ui/svelte";
 import { ctx } from "../ctx.js";
 export let transition = void 0;
 export let transitionConfig = void 0;
+export let inTransition = void 0;
+export let inTransitionConfig = void 0;
+export let outTransition = void 0;
+export let outTransitionConfig = void 0;
 export let asChild = false;
 const {
   elements: { menu },
@@ -18,7 +22,40 @@ const {
 	{#if asChild}
 		<slot {builder} />
 	{:else if transition}
-		<div {...builder} use:builder.action {...$$restProps} on:m-keydown transition:transition={transitionConfig}>
+		<div
+			transition:transition|global={transitionConfig}
+			{...builder} use:builder.action
+			{...$$restProps}
+			on:m-keydown
+		>
+			<slot {builder} />
+		</div>
+	{:else if inTransition && outTransition}
+		<div
+			in:inTransition|global={inTransitionConfig}
+			out:outTransition|global={outTransitionConfig}
+			{...builder} use:builder.action
+			{...$$restProps}
+			on:m-keydown
+		>
+			<slot {builder} />
+		</div>
+	{:else if inTransition}
+		<div
+			in:inTransition|global={inTransitionConfig}
+			{...builder} use:builder.action
+			{...$$restProps}
+			on:m-keydown
+		>
+			<slot {builder} />
+		</div>
+	{:else if outTransition}
+		<div
+			out:outTransition|global={outTransitionConfig}
+			{...builder} use:builder.action
+			{...$$restProps}
+			on:m-keydown
+		>
 			<slot {builder} />
 		</div>
 	{:else}

package/dist/bits/select/components/SelectContent.svelte.d.ts

@@ -1,9 +1,13 @@
 import { SvelteComponent } from "svelte";
 import type { Transition } from "../../../internal/types.js";
-declare class __sveltets_Render<T extends Transition> {
+declare class __sveltets_Render<T extends Transition, In extends Transition, Out extends Transition> {
     props(): {
         transition?: T | undefined;
         transitionConfig?: import("../../../internal/types.js").TransitionParams<T> | undefined;
+        inTransition?: In | undefined;
+        inTransitionConfig?: import("../../../internal/types.js").TransitionParams<In> | undefined;
+        outTransition?: Out | undefined;
+        outTransitionConfig?: import("../../../internal/types.js").TransitionParams<Out> | undefined;
         asChild?: boolean | undefined;
         accesskey?: string | null | undefined;
         autofocus?: boolean | null | undefined;
@@ -223,9 +227,9 @@ declare class __sveltets_Render<T extends Transition> {
         };
     };
 }
-export type SelectContentProps<T extends Transition> = ReturnType<__sveltets_Render<T>['props']>;
-export type SelectContentEvents<T extends Transition> = ReturnType<__sveltets_Render<T>['events']>;
-export type SelectContentSlots<T extends Transition> = ReturnType<__sveltets_Render<T>['slots']>;
-export default class SelectContent<T extends Transition> extends SvelteComponent<SelectContentProps<T>, SelectContentEvents<T>, SelectContentSlots<T>> {
+export type SelectContentProps<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['props']>;
+export type SelectContentEvents<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['events']>;
+export type SelectContentSlots<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['slots']>;
+export default class SelectContent<T extends Transition, In extends Transition, Out extends Transition> extends SvelteComponent<SelectContentProps<T, In, Out>, SelectContentEvents<T, In, Out>, SelectContentSlots<T, In, Out>> {
 }
 export {};

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

@@ -1,18 +1,15 @@
 import type { CreateSelectProps, SelectComponentEvents, SelectOptionProps } from "@melt-ui/svelte";
-import type { AsChild, Expand, HTMLDivAttributes, OmitOpen, OmitValue, OnChangeFn, Transition, TransitionParams } from "../../internal/index.js";
+import type { AsChild, Expand, HTMLDivAttributes, OmitOpen, OmitValue, OnChangeFn, Transition, TransitionProps } from "../../internal/index.js";
 import type { HTMLAttributes, HTMLButtonAttributes, HTMLInputAttributes } from "svelte/elements";
 import type { ButtonEventHandler, DivEventHandler } from "../../index.js";
-type Props = Expand<OmitOpen<OmitValue<Omit<CreateSelectProps, "defaultValueLabel" | "forceVisible">>> & {
+type Props = Expand<OmitOpen<OmitValue<Omit<CreateSelectProps, "defaultValueLabel">>> & {
     value?: CreateSelectProps["defaultValue"] & {};
     onValueChange?: OnChangeFn<CreateSelectProps["defaultValue"]>;
     open?: CreateSelectProps["defaultOpen"] & {};
     onOpenChange?: OnChangeFn<CreateSelectProps["defaultOpen"]>;
     label?: CreateSelectProps["defaultValueLabel"] & {};
 }>;
-type ContentProps<T extends Transition = Transition> = Expand<{
-    transition?: T;
-    transitionConfig?: TransitionParams<T>;
-} & AsChild> & HTMLDivAttributes;
+type ContentProps<T extends Transition = Transition, In extends Transition = Transition, Out extends Transition = Transition> = Expand<TransitionProps<T, In, Out> & AsChild> & HTMLDivAttributes;
 type GroupProps = AsChild & HTMLDivAttributes;
 type InputProps = AsChild & HTMLInputAttributes;
 type LabelProps = AsChild & HTMLDivAttributes;

package/dist/bits/tooltip/components/TooltipContent.svelte

@@ -2,8 +2,12 @@
 import { ctx } from "../ctx.js";
 export let transition = void 0;
 export let transitionConfig = void 0;
-export let sideOffset = 4;
+export let inTransition = void 0;
+export let inTransitionConfig = void 0;
+export let outTransition = void 0;
+export let outTransitionConfig = void 0;
 export let asChild = false;
+export let sideOffset = 4;
 const {
   elements: { content },
   states: { open }
@@ -17,7 +21,38 @@ const {
 	{:else if transition}
 		<div
 			{...builder} use:builder.action
-			transition:transition={transitionConfig}
+			transition:transition|global={transitionConfig}
+			{...$$restProps}
+			on:m-pointerdown
+			on:m-pointerenter
+		>
+			<slot {builder} />
+		</div>
+	{:else if inTransition && outTransition}
+		<div
+			{...builder} use:builder.action
+			in:inTransition|global={inTransitionConfig}
+			out:outTransition|global={outTransitionConfig}
+			{...$$restProps}
+			on:m-pointerdown
+			on:m-pointerenter
+		>
+			<slot {builder} />
+		</div>
+	{:else if inTransition}
+		<div
+			{...builder} use:builder.action
+			in:inTransition|global={inTransitionConfig}
+			{...$$restProps}
+			on:m-pointerdown
+			on:m-pointerenter
+		>
+			<slot {builder} />
+		</div>
+	{:else if outTransition}
+		<div
+			{...builder} use:builder.action
+			out:outTransition|global={outTransitionConfig}
 			{...$$restProps}
 			on:m-pointerdown
 			on:m-pointerenter

package/dist/bits/tooltip/components/TooltipContent.svelte.d.ts

@@ -1,10 +1,14 @@
 import { SvelteComponent } from "svelte";
 import type { Transition } from "../../../internal/index.js";
-declare class __sveltets_Render<T extends Transition> {
+declare class __sveltets_Render<T extends Transition, In extends Transition, Out extends Transition> {
     props(): {
+        sideOffset?: number | undefined;
         transition?: T | undefined;
         transitionConfig?: import("../../../internal/index.js").TransitionParams<T> | undefined;
-        sideOffset?: number | undefined;
+        inTransition?: In | undefined;
+        inTransitionConfig?: import("../../../internal/index.js").TransitionParams<In> | undefined;
+        outTransition?: Out | undefined;
+        outTransitionConfig?: import("../../../internal/index.js").TransitionParams<Out> | undefined;
         asChild?: boolean | undefined;
         accesskey?: string | null | undefined;
         autofocus?: boolean | null | undefined;
@@ -225,9 +229,9 @@ declare class __sveltets_Render<T extends Transition> {
         };
     };
 }
-export type TooltipContentProps<T extends Transition> = ReturnType<__sveltets_Render<T>['props']>;
-export type TooltipContentEvents<T extends Transition> = ReturnType<__sveltets_Render<T>['events']>;
-export type TooltipContentSlots<T extends Transition> = ReturnType<__sveltets_Render<T>['slots']>;
-export default class TooltipContent<T extends Transition> extends SvelteComponent<TooltipContentProps<T>, TooltipContentEvents<T>, TooltipContentSlots<T>> {
+export type TooltipContentProps<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['props']>;
+export type TooltipContentEvents<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['events']>;
+export type TooltipContentSlots<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['slots']>;
+export default class TooltipContent<T extends Transition, In extends Transition, Out extends Transition> extends SvelteComponent<TooltipContentProps<T, In, Out>, TooltipContentEvents<T, In, Out>, TooltipContentSlots<T, In, Out>> {
 }
 export {};

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

@@ -1,15 +1,13 @@
 import type { CreateTooltipProps, TooltipComponentEvents } from "@melt-ui/svelte";
-import type { Expand, HTMLDivAttributes, OmitOpen, OmitForceVisible, Transition, TransitionParams, OnChangeFn, AsChild } from "../../internal/index.js";
+import type { Expand, HTMLDivAttributes, OmitOpen, OmitForceVisible, Transition, OnChangeFn, AsChild, TransitionProps } from "../../internal/index.js";
 import type { HTMLButtonAttributes } from "svelte/elements";
 type Props = Expand<OmitOpen<OmitForceVisible<CreateTooltipProps>> & {
     open?: CreateTooltipProps["defaultOpen"] & {};
     onOpenChange?: OnChangeFn<CreateTooltipProps["defaultOpen"]>;
 }>;
-type ContentProps<T extends Transition = Transition> = Expand<{
-    transition?: T;
-    transitionConfig?: TransitionParams<T>;
+type ContentProps<T extends Transition = Transition, In extends Transition = Transition, Out extends Transition = Transition> = Expand<{
     sideOffset?: number;
-} & AsChild> & HTMLDivAttributes;
+} & TransitionProps<T, In, Out> & AsChild> & HTMLDivAttributes;
 type TriggerProps = AsChild & HTMLButtonAttributes;
 type ArrowProps = Expand<{
     size?: number;

package/dist/internal/helpers.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="svelte" />
 import type { Writable } from "svelte/store";
-import type { Builder } from "./types.js";
+import type { Builder, Transition, TransitionParams, TransitionTimesStore } from "./types.js";
 export declare function noop(): void;
 export declare function generateId(): string;
 export declare function removeUndefined<T extends object>(obj: T): T;
@@ -24,4 +24,13 @@ export declare function disabledAttrs(disabled: boolean): {
 export declare function bitWrap<T extends object>(storeValues: T, bit: string): T;
 export declare function sleep(ms: number): Promise<unknown>;
 export declare function styleToString(style: Record<string, number | string | undefined>): string;
+type TransitionsObj<T extends Transition = Transition, In extends Transition = Transition, Out extends Transition = Transition> = {
+    transition?: T;
+    transitionConfig?: TransitionParams<T>;
+    inTransition?: In;
+    inTransitionConfig?: TransitionParams<In>;
+    outTransition?: Out;
+    outTransitionConfig?: TransitionParams<Out>;
+};
+export declare function setTransitionTimes(transitionTimes: TransitionTimesStore, transitionsObj: TransitionsObj): void;
 export {};

package/dist/internal/helpers.js

@@ -1,4 +1,5 @@
 import { nanoid } from "nanoid/non-secure";
+import { isBrowser } from "@/utils/is.js";
 export function noop() {
     // do nothing
 }
@@ -71,3 +72,57 @@ export function styleToString(style) {
         return str + `${key}:${style[key]};`;
     }, "");
 }
+export function setTransitionTimes(transitionTimes, transitionsObj) {
+    if (!isBrowser)
+        return;
+    const { transition, transitionConfig, inTransition, inTransitionConfig, outTransition, outTransitionConfig } = transitionsObj;
+    if (transition) {
+        if (transitionConfig) {
+            const { delay, duration } = transition(document.body, transitionConfig);
+            const time = calcTime(delay, duration);
+            transitionTimes.set({
+                in: time,
+                out: time
+            });
+            return;
+        }
+        const { delay, duration } = transition(document.body);
+        const time = calcTime(delay, duration);
+        transitionTimes.set({
+            in: time,
+            out: time
+        });
+        return;
+    }
+    let inTime = 0;
+    let outTime = 0;
+    if (inTransition) {
+        if (inTransitionConfig) {
+            const { delay, duration } = inTransition(document.body, inTransitionConfig);
+            inTime = calcTime(delay, duration);
+        }
+        else {
+            const { delay, duration } = inTransition(document.body);
+            inTime = calcTime(delay, duration);
+        }
+    }
+    if (outTransition) {
+        if (outTransitionConfig) {
+            const { delay, duration } = outTransition(document.body, outTransitionConfig);
+            outTime = calcTime(delay, duration);
+        }
+        else {
+            const { delay, duration } = outTransition(document.body);
+            outTime = calcTime(delay, duration);
+        }
+    }
+    transitionTimes.set({
+        in: inTime,
+        out: outTime
+    });
+}
+function calcTime(delay, duration) {
+    const numDelay = delay ?? 0;
+    const numDuration = duration ?? 0;
+    return numDelay + numDuration;
+}

package/dist/internal/types.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="svelte" />
 import type { Action } from "svelte/action";
 import type { HTMLAttributes } from "svelte/elements";
+import type { Writable } from "svelte/store";
 import type { TransitionConfig } from "svelte/transition";
 export type ObjectVariation<T> = T extends object ? T : never;
 export type Transition = (node: Element, params?: any) => TransitionConfig;
@@ -34,3 +35,22 @@ export type KeydownClickEvents = {
 export type AsChild = Expand<{
     asChild?: boolean;
 }>;
+export type TransitionProps<T extends Transition = Transition, In extends Transition = Transition, Out extends Transition = Transition> = Expand<{
+    transition?: T;
+    transitionConfig?: TransitionParams<T>;
+    inTransition?: In;
+    inTransitionConfig?: TransitionParams<In>;
+    outTransition?: Out;
+    outTransitionConfig?: TransitionParams<Out>;
+}>;
+export type TransitionTimes = {
+    in?: number;
+    out?: number;
+};
+export type TransitionTimesStore = Writable<Expand<TransitionTimes>>;
+export type TransitionTimesProp = {
+    transitionTimes: TransitionTimesStore;
+};
+export type TOpen = {
+    tOpen: Writable<boolean>;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bits-ui",
-  "version": "0.0.27",
+  "version": "0.0.28",
   "license": "MIT",
   "exports": {
     ".": {