ui-ingredients 0.0.43 → 0.0.44

package/README.md

@@ -52,6 +52,7 @@ npm install ui-ingredients
 - [Editable](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/editable.md)
 - [Field](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/field.md)
 - [FileUpload](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/file-upload.md)
+- [FloatingPanel](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/floating-panel.md)
 - [HoverCard](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/hover-card.md)
 - [Menu](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/menu.md)
 - [NumberInput](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/number-input.md)
@@ -79,6 +80,7 @@ npm install ui-ingredients
 - [ToggleGroup](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/toggle-group.md)
 - [Tooltip](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/tooltip.md)
 - [TreeView](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/tree-view.md)
+- [Tour](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/tour.md)
 - [The `asChild` prop](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/aschild.md)
 - [Styling](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/styling.md)
 

package/dist/floating-panel/body.svelte

@@ -0,0 +1,24 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface FloatingPanelBodyProps extends HtmlIngredientProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getFloatingPanelContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: FloatingPanelBodyProps = $props();
+
+  let floatingPanel = getFloatingPanelContext();
+
+  let mergedProps = $derived(mergeProps(props, floatingPanel.getBodyProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/floating-panel/body.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Body: $$__sveltets_2_IsomorphicComponent<FloatingPanelBodyProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Body = InstanceType<typeof Body>;
+export default Body;

package/dist/floating-panel/close-trigger.svelte

@@ -0,0 +1,27 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface FloatingPanelCloseTriggerProps
+    extends HtmlIngredientProps<'button'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getFloatingPanelContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: FloatingPanelCloseTriggerProps = $props();
+
+  let floatingPanel = getFloatingPanelContext();
+
+  let mergedProps = $derived(
+    mergeProps(props, floatingPanel.getCloseTriggerProps()),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <button type="button" {...mergedProps}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/floating-panel/close-trigger.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const CloseTrigger: $$__sveltets_2_IsomorphicComponent<FloatingPanelCloseTriggerProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type CloseTrigger = InstanceType<typeof CloseTrigger>;
+export default CloseTrigger;

package/dist/floating-panel/content.svelte

@@ -0,0 +1,36 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+  import type {Action} from 'svelte/action';
+
+  export interface FloatingPanelContentProps
+    extends HtmlIngredientProps<'div', never, Action> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getPresenceContext} from '../presence/context.svelte.js';
+  import {getFloatingPanelContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: FloatingPanelContentProps = $props();
+
+  let floatingPanel = getFloatingPanelContext();
+  let presence = getPresenceContext();
+
+  let mergedProps = $derived(
+    mergeProps(
+      props,
+      floatingPanel.getContentProps(),
+      presence.getPresenceProps(),
+    ),
+  );
+</script>
+
+{#if presence.mounted}
+  {#if asChild}
+    {@render asChild(presence.ref, mergedProps)}
+  {:else}
+    <div use:presence.ref {...mergedProps}>
+      {@render children?.()}
+    </div>
+  {/if}
+{/if}

package/dist/floating-panel/content.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Content: $$__sveltets_2_IsomorphicComponent<FloatingPanelContentProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Content = InstanceType<typeof Content>;
+export default Content;

package/dist/floating-panel/context.svelte.d.ts

@@ -0,0 +1,2 @@
+import type { CreateFloatingPanelReturn } from './create-floating-panel.svelte.js';
+export declare const getFloatingPanelContext: () => CreateFloatingPanelReturn, setFloatingPanelContext: (context: CreateFloatingPanelReturn | (() => CreateFloatingPanelReturn)) => void;

package/dist/floating-panel/context.svelte.js

@@ -0,0 +1,2 @@
+import { createContext } from '../create-context.svelte.js';
+export const [getFloatingPanelContext, setFloatingPanelContext] = createContext('FloatingPanel');

package/dist/floating-panel/create-floating-panel.svelte.d.ts

@@ -1,5 +1,6 @@
 import * as floatingPanel from '@zag-js/floating-panel';
-export interface CreateFloatingPanelProps extends Omit<floatingPanel.Context, 'dir' | 'getRootNode'> {
+export interface CreateFloatingPanelProps extends Omit<floatingPanel.Context, 'id' | 'dir' | 'getRootNode'> {
+    id?: string | null;
 }
 export interface CreateFloatingPanelReturn extends floatingPanel.Api<any> {
 }

package/dist/floating-panel/create-floating-panel.svelte.js

@@ -8,6 +8,7 @@ export function createFloatingPanel(props) {
     const environment = getEnvironmentContext();
     const id = uid();
     const context = $derived(reflect(() => ({
+        ...props,
         id: props.id ?? id,
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,

package/dist/floating-panel/drag-trigger.svelte

@@ -0,0 +1,27 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface FloatingPanelDragTriggerProps
+    extends HtmlIngredientProps<'button'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getFloatingPanelContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: FloatingPanelDragTriggerProps = $props();
+
+  let floatingPanel = getFloatingPanelContext();
+
+  let mergedProps = $derived(
+    mergeProps(props, floatingPanel.getDragTriggerProps()),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <button type="button" {...mergedProps}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/floating-panel/drag-trigger.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const DragTrigger: $$__sveltets_2_IsomorphicComponent<FloatingPanelDragTriggerProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type DragTrigger = InstanceType<typeof DragTrigger>;
+export default DragTrigger;

package/dist/floating-panel/floating-panel.d.ts

@@ -0,0 +1,13 @@
+export { default as Body } from './body.svelte';
+export { default as CloseTrigger } from './close-trigger.svelte';
+export { default as Content } from './content.svelte';
+export { default as DragTrigger } from './drag-trigger.svelte';
+export { default as Header } from './header.svelte';
+export { default as MaximizeTrigger } from './maximize-trigger.svelte';
+export { default as MinimizeTrigger } from './minimize-trigger.svelte';
+export { default as Positioner } from './positioner.svelte';
+export { default as ResizeTrigger } from './resize-trigger.svelte';
+export { default as RestoreTrigger } from './restore-trigger.svelte';
+export { default as Root } from './root.svelte';
+export { default as Title } from './title.svelte';
+export { default as Trigger } from './trigger.svelte';

package/dist/floating-panel/floating-panel.js

@@ -0,0 +1,13 @@
+export { default as Body } from './body.svelte';
+export { default as CloseTrigger } from './close-trigger.svelte';
+export { default as Content } from './content.svelte';
+export { default as DragTrigger } from './drag-trigger.svelte';
+export { default as Header } from './header.svelte';
+export { default as MaximizeTrigger } from './maximize-trigger.svelte';
+export { default as MinimizeTrigger } from './minimize-trigger.svelte';
+export { default as Positioner } from './positioner.svelte';
+export { default as ResizeTrigger } from './resize-trigger.svelte';
+export { default as RestoreTrigger } from './restore-trigger.svelte';
+export { default as Root } from './root.svelte';
+export { default as Title } from './title.svelte';
+export { default as Trigger } from './trigger.svelte';

package/dist/floating-panel/header.svelte

@@ -0,0 +1,25 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface FloatingPanelHeaderProps
+    extends HtmlIngredientProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getFloatingPanelContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: FloatingPanelHeaderProps = $props();
+
+  let floatingPanel = getFloatingPanelContext();
+
+  let mergedProps = $derived(mergeProps(props, floatingPanel.getHeaderProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/floating-panel/header.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Header: $$__sveltets_2_IsomorphicComponent<FloatingPanelHeaderProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Header = InstanceType<typeof Header>;
+export default Header;

package/dist/floating-panel/index.d.ts

@@ -0,0 +1,16 @@
+export * as FloatingPanel from './floating-panel.js';
+export type { FloatingPanelBodyProps } from './body.svelte';
+export type { FloatingPanelCloseTriggerProps } from './close-trigger.svelte';
+export type { FloatingPanelContentProps } from './content.svelte';
+export type { FloatingPanelDragTriggerProps } from './drag-trigger.svelte';
+export type { FloatingPanelHeaderProps } from './header.svelte';
+export type { FloatingPanelMaximizeTriggerProps } from './maximize-trigger.svelte';
+export type { FloatingPanelMinimizeTriggerProps } from './minimize-trigger.svelte';
+export type { FloatingPanelPositionerProps } from './positioner.svelte';
+export type { FloatingPanelResizeTriggerProps } from './resize-trigger.svelte';
+export type { FloatingPanelRestoreTriggerProps } from './restore-trigger.svelte';
+export type { FloatingPanelProps } from './root.svelte';
+export type { FloatingPanelTitleProps } from './title.svelte';
+export type { FloatingPanelTriggerProps } from './trigger.svelte';
+export { anatomy as floatingPanelAnatomy } from '@zag-js/floating-panel';
+export { getFloatingPanelContext } from './context.svelte.js';

package/dist/floating-panel/index.js

@@ -0,0 +1,3 @@
+export * as FloatingPanel from './floating-panel.js';
+export { anatomy as floatingPanelAnatomy } from '@zag-js/floating-panel';
+export { getFloatingPanelContext } from './context.svelte.js';

package/dist/floating-panel/maximize-trigger.svelte

@@ -0,0 +1,28 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface FloatingPanelMaximizeTriggerProps
+    extends HtmlIngredientProps<'button'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getFloatingPanelContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: FloatingPanelMaximizeTriggerProps =
+    $props();
+
+  let floatingPanel = getFloatingPanelContext();
+
+  let mergedProps = $derived(
+    mergeProps(props, floatingPanel.getMaximizeTriggerProps()),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <button type="button" {...mergedProps}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/floating-panel/maximize-trigger.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const MaximizeTrigger: $$__sveltets_2_IsomorphicComponent<FloatingPanelMaximizeTriggerProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type MaximizeTrigger = InstanceType<typeof MaximizeTrigger>;
+export default MaximizeTrigger;

package/dist/floating-panel/minimize-trigger.svelte

@@ -0,0 +1,28 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface FloatingPanelMinimizeTriggerProps
+    extends HtmlIngredientProps<'button'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getFloatingPanelContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: FloatingPanelMinimizeTriggerProps =
+    $props();
+
+  let floatingPanel = getFloatingPanelContext();
+
+  let mergedProps = $derived(
+    mergeProps(props, floatingPanel.getMinimizeTriggerProps()),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <button type="button" {...mergedProps}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/floating-panel/minimize-trigger.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const MinimizeTrigger: $$__sveltets_2_IsomorphicComponent<FloatingPanelMinimizeTriggerProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type MinimizeTrigger = InstanceType<typeof MinimizeTrigger>;
+export default MinimizeTrigger;

package/dist/floating-panel/positioner.svelte

@@ -0,0 +1,35 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface FloatingPanelPositionerProps
+    extends HtmlIngredientProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getPresenceContext} from '../presence/context.svelte.js';
+  import {getFloatingPanelContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: FloatingPanelPositionerProps = $props();
+
+  let floatingPanel = getFloatingPanelContext();
+  let presence = getPresenceContext();
+
+  let mergedProps = $derived(
+    mergeProps(
+      props,
+      floatingPanel.getPositionerProps(),
+      presence.getPresenceProps(),
+    ),
+  );
+</script>
+
+{#if presence.mounted}
+  {#if asChild}
+    {@render asChild(mergedProps)}
+  {:else}
+    <div {...mergedProps}>
+      {@render children?.()}
+    </div>
+  {/if}
+{/if}

package/dist/floating-panel/positioner.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Positioner: $$__sveltets_2_IsomorphicComponent<FloatingPanelPositionerProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Positioner = InstanceType<typeof Positioner>;
+export default Positioner;

package/dist/floating-panel/resize-trigger.svelte

@@ -0,0 +1,36 @@
+<script lang="ts" module>
+  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {ResizeTriggerProps} from '@zag-js/floating-panel';
+
+  export interface FloatingPanelResizeTriggerProps
+    extends Assign<HtmlIngredientProps<'button'>, ResizeTriggerProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {createSplitProps} from '@zag-js/utils';
+  import {getFloatingPanelContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: FloatingPanelResizeTriggerProps = $props();
+
+  let floatingPanel = getFloatingPanelContext();
+
+  let [resizeTriggerProps, otherProps] = $derived(
+    createSplitProps<ResizeTriggerProps>([])(props),
+  );
+
+  let mergedProps = $derived(
+    mergeProps(
+      otherProps,
+      floatingPanel.getResizeTriggerProps(resizeTriggerProps),
+    ),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <button type="button" {...mergedProps}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/floating-panel/resize-trigger.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ResizeTrigger: $$__sveltets_2_IsomorphicComponent<FloatingPanelResizeTriggerProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type ResizeTrigger = InstanceType<typeof ResizeTrigger>;
+export default ResizeTrigger;

package/dist/floating-panel/restore-trigger.svelte

@@ -0,0 +1,28 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface FloatingPanelRestoreTriggerProps
+    extends HtmlIngredientProps<'button'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getFloatingPanelContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: FloatingPanelRestoreTriggerProps =
+    $props();
+
+  let floatingPanel = getFloatingPanelContext();
+
+  let mergedProps = $derived(
+    mergeProps(props, floatingPanel.getRestoreTriggerProps()),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <button type="button" {...mergedProps}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/floating-panel/restore-trigger.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const RestoreTrigger: $$__sveltets_2_IsomorphicComponent<FloatingPanelRestoreTriggerProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type RestoreTrigger = InstanceType<typeof RestoreTrigger>;
+export default RestoreTrigger;

package/dist/floating-panel/root.svelte

@@ -0,0 +1,50 @@
+<script lang="ts" module>
+  import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
+  import type {Snippet} from 'svelte';
+  import type {
+    CreateFloatingPanelProps,
+    CreateFloatingPanelReturn,
+  } from './create-floating-panel.svelte.js';
+
+  export interface FloatingPanelProps
+    extends CreateFloatingPanelProps,
+      PresenceStrategyProps {
+    children?: Snippet<[CreateFloatingPanelReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {setPresenceContext} from '../presence/context.svelte.js';
+  import {createPresence} from '../presence/create-presence.svelte.js';
+  import {reflect} from '@zag-js/svelte';
+  import {createSplitProps} from '@zag-js/utils';
+  import {setFloatingPanelContext} from './context.svelte.js';
+  import {createFloatingPanel} from './create-floating-panel.svelte.js';
+
+  let {children, ...props}: FloatingPanelProps = $props();
+
+  let [presenceStrategyProps, floatingPanelProps] = $derived(
+    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
+      props,
+    ),
+  );
+
+  let floatingPanel = createFloatingPanel(reflect(() => floatingPanelProps));
+
+  let presence = createPresence({
+    get present() {
+      return floatingPanel.open;
+    },
+    get lazyMount() {
+      return presenceStrategyProps.lazyMount;
+    },
+    get keepMounted() {
+      return presenceStrategyProps.keepMounted;
+    },
+  });
+
+  setFloatingPanelContext(floatingPanel);
+  setPresenceContext(presence);
+</script>
+
+{@render children?.(floatingPanel)}