bits-ui 0.0.27 → 0.0.28

package/dist/bits/context-menu/ctx.d.ts

@@ -18,7 +18,6 @@ export declare const ctx: {
     getGroupLabel: typeof getGroupLabel;
     setArrow: typeof setArrow;
 };
-declare function get(): ContextMenuReturn;
 declare function set(props: CreateContextMenuProps): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
     elements: {
@@ -194,6 +193,7 @@ declare function set(props: CreateContextMenuProps): {
         forceVisible: import("svelte/store").Writable<boolean>;
     };
 };
+declare function get(): ContextMenuReturn;
 declare function setSub(props: CreateContextSubmenuProps): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
     elements: {

package/dist/bits/context-menu/ctx.js

@@ -24,9 +24,6 @@ export const ctx = {
     getGroupLabel,
     setArrow
 };
-function get() {
-    return getContext(NAME);
-}
 function set(props) {
     const contextMenu = createContextMenu(removeUndefined(props));
     setContext(NAME, contextMenu);
@@ -35,6 +32,9 @@ function set(props) {
         updateOption: getOptionUpdater(contextMenu.options)
     };
 }
+function get() {
+    return getContext(NAME);
+}
 function setSub(props) {
     const { builders: { createSubmenu } } = get();
     const sub = createSubmenu(removeUndefined(props));

package/dist/bits/context-menu/types.d.ts

@@ -1,4 +1,4 @@
-import type { AsChild, Expand, HTMLDivAttributes, OmitChecked, OmitOpen, OmitValue, OnChangeFn, Transition, TransitionParams } from "../../internal/index.js";
+import type { AsChild, Expand, HTMLDivAttributes, OmitChecked, OmitOpen, OmitValue, OnChangeFn, Transition, TransitionProps } from "../../internal/index.js";
 import type { DivEventHandler } from "../..";
 import type { CreateContextMenuProps, CreateContextMenuCheckboxItemProps, CreateContextMenuRadioGroupProps, ContextMenuRadioItemProps, CreateContextSubmenuProps, ContextMenuComponentEvents } from "@melt-ui/svelte";
 type Props = Expand<OmitOpen<CreateContextMenuProps> & {
@@ -14,11 +14,9 @@ type RadioGroupProps = Expand<OmitValue<CreateContextMenuRadioGroupProps> & {
     onValueChange?: OnChangeFn<CreateContextMenuRadioGroupProps["defaultValue"]>;
 } & AsChild> & HTMLDivAttributes;
 type RadioItemProps = Expand<ContextMenuRadioItemProps & AsChild> & HTMLDivAttributes;
-type ContentProps<T extends Transition = Transition> = Expand<{
+type ContentProps<T extends Transition = Transition, In extends Transition = Transition, Out extends Transition = Transition> = Expand<{
     sideOffset?: number;
-    transition?: T;
-    transitionConfig?: TransitionParams<T>;
-} & AsChild> & HTMLDivAttributes;
+} & TransitionProps<T, In, Out> & AsChild> & HTMLDivAttributes;
 type GroupProps = AsChild & HTMLDivAttributes;
 type ItemProps = Expand<{
     disabled?: boolean;
@@ -27,10 +25,7 @@ type CheckboxItemIndicatorProps = HTMLDivAttributes;
 type LabelProps = AsChild & HTMLDivAttributes;
 type SeparatorProps = AsChild & HTMLDivAttributes;
 type SubProps = Expand<CreateContextSubmenuProps>;
-type SubContentProps<T extends Transition = Transition> = Expand<{
-    transition?: T;
-    transitionConfig?: TransitionParams<T>;
-} & AsChild> & HTMLDivAttributes;
+type SubContentProps<T extends Transition = Transition, In extends Transition = Transition, Out extends Transition = Transition> = Expand<TransitionProps<T, In, Out> & AsChild> & HTMLDivAttributes;
 type SubTriggerProps = Expand<{
     disabled?: boolean;
 } & AsChild> & HTMLDivAttributes;

package/dist/bits/dialog/components/Dialog.svelte

@@ -1,4 +1,7 @@
-<script>import { ctx } from "../ctx.js";
+<script>import { writable } from "svelte/store";
+import { ctx } from "../ctx.js";
+import { isBrowser } from "@/utils/is.js";
+import { onDestroy } from "svelte";
 export let preventScroll = void 0;
 export let closeOnEscape = void 0;
 export let closeOnOutsideClick = void 0;
@@ -6,22 +9,49 @@ export let portal = void 0;
 export let forceVisible = true;
 export let open = void 0;
 export let onOpenChange = void 0;
+const transitionTimes = writable({});
+const tOpen = writable(open);
+let timeout = 0;
 const {
   states: { open: localOpen },
   updateOption
 } = ctx.set({
-  preventScroll,
   closeOnEscape,
+  preventScroll,
   closeOnOutsideClick,
   portal,
   forceVisible,
   defaultOpen: open,
+  transitionTimes,
+  tOpen,
   onOpenChange: ({ next }) => {
     onOpenChange?.(next);
+    if (next !== $tOpen) {
+      tOpen.set(next);
+      if (!next) {
+        window.clearTimeout(timeout);
+        timeout = window.setTimeout(
+          () => {
+            localOpen.set(next);
+          },
+          $transitionTimes.out ? $transitionTimes.out * 0.5 : 0
+        );
+        open = !next;
+        return !next;
+      } else {
+        open = next;
+        return next;
+      }
+    }
     open = next;
     return next;
   }
 });
+onDestroy(() => {
+  if (isBrowser) {
+    window.clearTimeout(timeout);
+  }
+});
 $:
   open !== void 0 && localOpen.set(open);
 $:

package/dist/bits/dialog/components/DialogContent.svelte

@@ -1,24 +1,55 @@
 <script>import { melt } from "@melt-ui/svelte";
+import { setTransitionTimes } from "../../../internal/index.js";
 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: { content },
-  states: { open }
+  transitionTimes,
+  tOpen
 } = ctx.get();
+$:
+  setTransitionTimes(transitionTimes, {
+    transition,
+    transitionConfig,
+    inTransition,
+    inTransitionConfig,
+    outTransition,
+    outTransitionConfig
+  });
 </script>
 
-{#if $open}
+{#if $tOpen}
+	{@const builder = $content}
 	{#if asChild}
-		<slot builder={$content} />
+		<slot {builder} />
 	{:else if transition}
-		{@const builder = $content}
-		<div {...builder} use:builder.action {...$$restProps} transition:transition={transitionConfig}>
+		<div transition:transition|global={transitionConfig} {...builder} use:builder.action {...$$restProps}>
+			<slot {builder} />
+		</div>
+	{:else if inTransition && outTransition}
+		<div
+			in:inTransition|global={inTransitionConfig}
+			out:outTransition|global={outTransitionConfig}
+			{...builder} use:builder.action
+			{...$$restProps}
+		>
+			<slot {builder} />
+		</div>
+	{:else if inTransition}
+		<div in:inTransition|global={inTransitionConfig} {...builder} use:builder.action {...$$restProps}>
+			<slot {builder} />
+		</div>
+	{:else if outTransition}
+		<div out:outTransition|global={outTransitionConfig} {...builder} use:builder.action {...$$restProps}>
 			<slot {builder} />
 		</div>
 	{:else}
-		{@const builder = $content}
 		<div {...builder} use:builder.action {...$$restProps}>
 			<slot {builder} />
 		</div>

package/dist/bits/dialog/components/DialogContent.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> {
+import { type Transition } from "../../../internal/index.js";
+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 DialogContentProps<T extends Transition> = ReturnType<__sveltets_Render<T>['props']>;
-export type DialogContentEvents<T extends Transition> = ReturnType<__sveltets_Render<T>['events']>;
-export type DialogContentSlots<T extends Transition> = ReturnType<__sveltets_Render<T>['slots']>;
-export default class DialogContent<T extends Transition> extends SvelteComponent<DialogContentProps<T>, DialogContentEvents<T>, DialogContentSlots<T>> {
+export type DialogContentProps<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['props']>;
+export type DialogContentEvents<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['events']>;
+export type DialogContentSlots<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['slots']>;
+export default class DialogContent<T extends Transition, In extends Transition, Out extends Transition> extends SvelteComponent<DialogContentProps<T, In, Out>, DialogContentEvents<T, In, Out>, DialogContentSlots<T, In, Out>> {
 }
 export {};

package/dist/bits/dialog/components/DialogOverlay.svelte

@@ -1,16 +1,35 @@
 <script>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: { overlay },
-  states: { open }
+  tOpen
 } = ctx.get();
 </script>
 
-{#if $open}
+{#if $tOpen}
 	{@const builder = $overlay}
 	{#if asChild}
 		<slot {builder} />
+	{:else if transition}
+		<div transition:transition|global={transitionConfig} {...builder} use:builder.action {...$$restProps} />
+	{:else if inTransition && outTransition}
+		<div
+			in:inTransition|global={inTransitionConfig}
+			out:outTransition|global={outTransitionConfig}
+			{...builder} use:builder.action
+			{...$$restProps}
+		/>
+	{:else if inTransition}
+		<div in:inTransition|global={inTransitionConfig} {...builder} use:builder.action {...$$restProps} />
+	{:else if outTransition}
+		<div out:outTransition|global={outTransitionConfig} {...builder} use:builder.action {...$$restProps} />
 	{:else}
 		<div {...builder} use:builder.action {...$$restProps} />
 	{/if}

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

@@ -1,10 +1,13 @@
 /// <reference types="svelte" />
 import { type CreateDialogProps, type Dialog as DialogReturn } from "@melt-ui/svelte";
+import { type TOpen, type TransitionTimesProp } from "../../internal/index.js";
+type SetProps = CreateDialogProps & TransitionTimesProp & TOpen;
+type CtxReturn = DialogReturn & TransitionTimesProp & TOpen;
 export declare const ctx: {
     set: typeof set;
     get: typeof get;
 };
-declare function set(props: CreateDialogProps): {
+declare function set(props: SetProps): {
     updateOption: <K extends string, V extends unknown>(key: K, value: V | undefined) => void;
     elements: {
         content: import("@melt-ui/svelte/internal/helpers").ExplicitBuilderReturn<[import("svelte/store").Readable<boolean>], <Node_1 extends unknown>(node: HTMLElement) => {
@@ -73,5 +76,5 @@ declare function set(props: CreateDialogProps): {
         forceVisible: import("svelte/store").Writable<boolean>;
     };
 };
-declare function get(): DialogReturn;
+declare function get(): CtxReturn;
 export {};

package/dist/bits/dialog/ctx.js

@@ -8,7 +8,7 @@ export const ctx = {
 };
 function set(props) {
     const dialog = createDialog({ ...removeUndefined(props), role: "dialog" });
-    setContext(NAME, dialog);
+    setContext(NAME, { ...dialog, transitionTimes: props.transitionTimes, tOpen: props.tOpen });
     return {
         ...dialog,
         updateOption: getOptionUpdater(dialog.options)

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

@@ -1,4 +1,4 @@
-import type { AsChild, Expand, HTMLDivAttributes, HTMLHeadingAttributes, OmitOpen, OnChangeFn, Transition, TransitionParams } from "../../internal/index.js";
+import type { AsChild, Expand, HTMLDivAttributes, HTMLHeadingAttributes, OmitOpen, OnChangeFn, Transition, TransitionProps } from "../../internal/index.js";
 import type { HTMLButtonAttributes } from "svelte/elements";
 import type { CreateDialogProps } from "@melt-ui/svelte";
 import type { ButtonEventHandler } from "../../index.js";
@@ -8,12 +8,9 @@ type Props = Expand<OmitOpen<Omit<CreateDialogProps, "role">> & {
 }>;
 type TriggerProps = AsChild & HTMLButtonAttributes;
 type CloseProps = TriggerProps;
-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 DescriptionProps = AsChild & HTMLDivAttributes;
-type OverlayProps = AsChild & HTMLDivAttributes;
+type OverlayProps<T extends Transition = Transition, In extends Transition = Transition, Out extends Transition = Transition> = Expand<TransitionProps<T, In, Out> & AsChild> & HTMLDivAttributes;
 type PortalProps = AsChild & HTMLDivAttributes;
 type TitleProps = Expand<{
     level?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";

package/dist/bits/dropdown-menu/components/DropdownMenuContent.svelte

@@ -4,6 +4,10 @@ import { ctx } from "../ctx.js";
 export let sideOffset = 5;
 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/dropdown-menu/components/DropdownMenuContent.svelte.d.ts

@@ -1,10 +1,14 @@
 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(): {
         sideOffset?: number | undefined;
         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;
@@ -224,9 +228,9 @@ declare class __sveltets_Render<T extends Transition> {
         };
     };
 }
-export type DropdownMenuContentProps<T extends Transition> = ReturnType<__sveltets_Render<T>['props']>;
-export type DropdownMenuContentEvents<T extends Transition> = ReturnType<__sveltets_Render<T>['events']>;
-export type DropdownMenuContentSlots<T extends Transition> = ReturnType<__sveltets_Render<T>['slots']>;
-export default class DropdownMenuContent<T extends Transition> extends SvelteComponent<DropdownMenuContentProps<T>, DropdownMenuContentEvents<T>, DropdownMenuContentSlots<T>> {
+export type DropdownMenuContentProps<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['props']>;
+export type DropdownMenuContentEvents<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['events']>;
+export type DropdownMenuContentSlots<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['slots']>;
+export default class DropdownMenuContent<T extends Transition, In extends Transition, Out extends Transition> extends SvelteComponent<DropdownMenuContentProps<T, In, Out>, DropdownMenuContentEvents<T, In, Out>, DropdownMenuContentSlots<T, In, Out>> {
 }
 export {};

package/dist/bits/dropdown-menu/components/DropdownMenuSubContent.svelte

@@ -2,6 +2,10 @@
 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: { subMenu },
@@ -9,20 +13,53 @@ const {
 } = ctx.getSubContent();
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions applied by melt's action/store -->
-
+<!-- svelte-ignore a11y-no-static-element-interactions / applied by melt store -->
 {#if $subOpen}
 	{@const builder = $subMenu}
 	{#if asChild}
 		<slot {builder} />
 	{:else if transition}
 		<div
+			transition:transition|global={transitionConfig}
+			{...builder} use:builder.action
+			{...$$restProps}
+			on:m-focusout
+			on:m-keydown
+			on:m-pointermove
+		>
+			<slot {builder} />
+		</div>
+	{:else if inTransition && outTransition}
+		<div
+			in:inTransition|global={inTransitionConfig}
+			out:outTransition|global={outTransitionConfig}
+			{...builder} use:builder.action
+			{...$$restProps}
+			on:m-focusout
+			on:m-keydown
+			on:m-pointermove
+		>
+			<slot {builder} />
+		</div>
+	{:else if inTransition}
+		<div
+			in:inTransition|global={inTransitionConfig}
+			{...builder} use:builder.action
+			{...$$restProps}
+			on:m-focusout
+			on:m-keydown
+			on:m-pointermove
+		>
+			<slot {builder} />
+		</div>
+	{:else if outTransition}
+		<div
+			out:outTransition|global={outTransitionConfig}
 			{...builder} use:builder.action
 			{...$$restProps}
 			on:m-focusout
 			on:m-keydown
 			on:m-pointermove
-			transition:transition={transitionConfig}
 		>
 			<slot {builder} />
 		</div>

package/dist/bits/dropdown-menu/components/DropdownMenuSubContent.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;
+        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;
@@ -226,9 +230,9 @@ declare class __sveltets_Render<T extends Transition> {
         };
     };
 }
-export type DropdownMenuSubContentProps<T extends Transition> = ReturnType<__sveltets_Render<T>['props']>;
-export type DropdownMenuSubContentEvents<T extends Transition> = ReturnType<__sveltets_Render<T>['events']>;
-export type DropdownMenuSubContentSlots<T extends Transition> = ReturnType<__sveltets_Render<T>['slots']>;
-export default class DropdownMenuSubContent<T extends Transition> extends SvelteComponent<DropdownMenuSubContentProps<T>, DropdownMenuSubContentEvents<T>, DropdownMenuSubContentSlots<T>> {
+export type DropdownMenuSubContentProps<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['props']>;
+export type DropdownMenuSubContentEvents<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['events']>;
+export type DropdownMenuSubContentSlots<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['slots']>;
+export default class DropdownMenuSubContent<T extends Transition, In extends Transition, Out extends Transition> extends SvelteComponent<DropdownMenuSubContentProps<T, In, Out>, DropdownMenuSubContentEvents<T, In, Out>, DropdownMenuSubContentSlots<T, In, Out>> {
 }
 export {};

package/dist/bits/dropdown-menu/types.d.ts

@@ -1,4 +1,4 @@
-import type { AsChild, Expand, HTMLDivAttributes, OmitChecked, OmitOpen, OmitValue, OnChangeFn, Transition, TransitionParams } from "../../internal/index.js";
+import type { TransitionProps, AsChild, Expand, HTMLDivAttributes, OmitChecked, OmitOpen, OmitValue, OnChangeFn, Transition } from "../../internal/index.js";
 import type { ButtonEventHandler, DivEventHandler } from "../../index.js";
 import type { CreateDropdownMenuProps, CreateDropdownMenuCheckboxItemProps, CreateDropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, CreateDropdownSubmenuProps, DropdownMenuComponentEvents } from "@melt-ui/svelte";
 import type { HTMLButtonAttributes } from "svelte/elements";
@@ -15,11 +15,9 @@ type RadioGroupProps = Expand<OmitValue<CreateDropdownMenuRadioGroupProps> & {
     onValueChange?: OnChangeFn<CreateDropdownMenuRadioGroupProps["defaultValue"]>;
 } & AsChild> & HTMLDivAttributes;
 type RadioItemProps = Expand<DropdownMenuRadioItemProps & AsChild> & HTMLDivAttributes;
-type ContentProps<T extends Transition = Transition> = Expand<{
+type ContentProps<T extends Transition = Transition, In extends Transition = Transition, Out extends Transition = Transition> = Expand<{
     sideOffset?: number;
-    transition?: T;
-    transitionConfig?: TransitionParams<T>;
-} & AsChild> & HTMLDivAttributes;
+} & TransitionProps<T, In, Out> & AsChild> & HTMLDivAttributes;
 type GroupProps = AsChild & HTMLDivAttributes;
 type ItemProps = Expand<{
     disabled?: boolean;
@@ -28,11 +26,9 @@ type CheckboxItemIndicatorProps = HTMLDivAttributes;
 type LabelProps = AsChild & HTMLDivAttributes;
 type SeparatorProps = AsChild & HTMLDivAttributes;
 type SubProps = Expand<CreateDropdownSubmenuProps>;
-type SubContentProps<T extends Transition = Transition> = Expand<{
+type SubContentProps<T extends Transition = Transition, In extends Transition = Transition, Out extends Transition = Transition> = Expand<{
     sideOffset?: number;
-    transition?: T;
-    transitionConfig?: TransitionParams<T>;
-} & AsChild> & HTMLDivAttributes;
+} & TransitionProps<T, In, Out> & AsChild> & HTMLDivAttributes;
 type SubTriggerProps = Expand<{
     disabled?: boolean;
 } & AsChild> & HTMLDivAttributes;

package/dist/bits/link-preview/components/LinkPreviewContent.svelte

@@ -2,6 +2,10 @@
 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: { content },
@@ -17,13 +21,50 @@ const {
 		<slot {builder} />
 	{:else if transition}
 		<div
+			transition:transition|global={transitionConfig}
+			{...builder} use:builder.action
+			{...$$restProps}
+			on:m-focusout
+			on:m-pointerdown
+			on:m-pointerenter
+			on:m-pointerleave
+		>
+			<slot {builder} />
+		</div>
+	{:else if inTransition && outTransition}
+		<div
+			in:inTransition|global={inTransitionConfig}
+			out:outTransition|global={outTransitionConfig}
+			{...builder} use:builder.action
+			{...$$restProps}
+			on:m-focusout
+			on:m-pointerdown
+			on:m-pointerenter
+			on:m-pointerleave
+		>
+			<slot {builder} />
+		</div>
+	{:else if inTransition}
+		<div
+			in:inTransition|global={inTransitionConfig}
+			{...builder} use:builder.action
+			{...$$restProps}
+			on:m-focusout
+			on:m-pointerdown
+			on:m-pointerenter
+			on:m-pointerleave
+		>
+			<slot {builder} />
+		</div>
+	{:else if outTransition}
+		<div
+			out:outTransition|global={outTransitionConfig}
 			{...builder} use:builder.action
 			{...$$restProps}
 			on:m-focusout
 			on:m-pointerdown
 			on:m-pointerenter
 			on:m-pointerleave
-			transition:transition={transitionConfig}
 		>
 			<slot {builder} />
 		</div>

package/dist/bits/link-preview/components/LinkPreviewContent.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;
@@ -226,9 +230,9 @@ declare class __sveltets_Render<T extends Transition> {
         };
     };
 }
-export type LinkPreviewContentProps<T extends Transition> = ReturnType<__sveltets_Render<T>['props']>;
-export type LinkPreviewContentEvents<T extends Transition> = ReturnType<__sveltets_Render<T>['events']>;
-export type LinkPreviewContentSlots<T extends Transition> = ReturnType<__sveltets_Render<T>['slots']>;
-export default class LinkPreviewContent<T extends Transition> extends SvelteComponent<LinkPreviewContentProps<T>, LinkPreviewContentEvents<T>, LinkPreviewContentSlots<T>> {
+export type LinkPreviewContentProps<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['props']>;
+export type LinkPreviewContentEvents<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['events']>;
+export type LinkPreviewContentSlots<T extends Transition, In extends Transition, Out extends Transition> = ReturnType<__sveltets_Render<T, In, Out>['slots']>;
+export default class LinkPreviewContent<T extends Transition, In extends Transition, Out extends Transition> extends SvelteComponent<LinkPreviewContentProps<T, In, Out>, LinkPreviewContentEvents<T, In, Out>, LinkPreviewContentSlots<T, In, Out>> {
 }
 export {};

package/dist/bits/link-preview/types.d.ts

@@ -1,4 +1,4 @@
-import type { OmitOpen, Expand, HTMLDivAttributes, OnChangeFn, Transition, TransitionParams, AsChild } from "../../internal/index.js";
+import type { OmitOpen, Expand, HTMLDivAttributes, OnChangeFn, Transition, AsChild, TransitionProps } from "../../internal/index.js";
 import type { CreateLinkPreviewProps, LinkPreviewComponentEvents } from "@melt-ui/svelte";
 import type { HTMLAnchorAttributes } from "svelte/elements";
 type Props = Expand<OmitOpen<CreateLinkPreviewProps> & {
@@ -6,10 +6,7 @@ type Props = Expand<OmitOpen<CreateLinkPreviewProps> & {
     onOpenChange?: OnChangeFn<CreateLinkPreviewProps["defaultOpen"]>;
 }>;
 type TriggerProps = AsChild & HTMLAnchorAttributes;
-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 ArrowProps = Expand<{
     size?: number;
 } & AsChild> & HTMLDivAttributes;