ui-ingredients 0.2.0 → 0.4.0

package/dist/color-picker/color-picker-anatomy.d.ts

@@ -1,2 +1,2 @@
-export declare const anatomy: import("@zag-js/anatomy").AnatomyInstance<"area" | "label" | "view" | "root" | "control" | "content" | "trigger" | "positioner" | "areaThumb" | "valueText" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect">;
-export declare const parts: Record<"area" | "label" | "view" | "root" | "control" | "content" | "trigger" | "positioner" | "areaThumb" | "valueText" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect", import("@zag-js/anatomy").AnatomyPart>;
+export declare const anatomy: import("@zag-js/anatomy").AnatomyInstance<"area" | "label" | "view" | "content" | "trigger" | "positioner" | "root" | "control" | "areaThumb" | "valueText" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect">;
+export declare const parts: Record<"area" | "label" | "view" | "content" | "trigger" | "positioner" | "root" | "control" | "areaThumb" | "valueText" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect", import("@zag-js/anatomy").AnatomyPart>;

package/dist/color-picker/color-picker-context.svelte.js

@@ -1,6 +1,6 @@
 import { createContext } from '../create-context.svelte.js';
 export const [getColorPickerContext, setColorPickerContext] = createContext('ColorPicker');
-export const [getColorPickerAreaPropsContext, setColorPickerAreaPropsContext] = createContext('ColorPickerArea');
-export const [getColorPickerSwatchPropsContext, setColorPickerSwatchPropsContext,] = createContext('ColorPickerSwatch');
-export const [getColorPickerFormatPropsContext, setColorPickerFormatPropsContext,] = createContext('ColorPicker__format', false);
-export const [getColorPickerChannelPropsContext, setColorPickerChannelPropsContext,] = createContext('ColorPickerChannel');
+export const [getColorPickerAreaPropsContext, setColorPickerAreaPropsContext] = createContext('ColorPickerArea [PROPS]');
+export const [getColorPickerSwatchPropsContext, setColorPickerSwatchPropsContext,] = createContext('ColorPickerSwatch [PROPS]');
+export const [getColorPickerFormatPropsContext, setColorPickerFormatPropsContext,] = createContext('ColorPickerFormat [PROPS]', false);
+export const [getColorPickerChannelPropsContext, setColorPickerChannelPropsContext,] = createContext('ColorPickerChannel [PROPS]');

package/dist/combobox/combobox-context.svelte.js

@@ -1,4 +1,4 @@
 import { createContext } from '../create-context.svelte.js';
 export const [getComboboxContext, setComboboxContext] = createContext('Combobox');
-export const [getComboboxItemPropsContext, setComboboxItemPropsContext] = createContext('ComboboxItem');
-export const [getComboboxItemGroupPropsContext, setComboboxItemGroupPropsContext,] = createContext('ComboboxItemGroup');
+export const [getComboboxItemPropsContext, setComboboxItemPropsContext] = createContext('ComboboxItem [PROPS]');
+export const [getComboboxItemGroupPropsContext, setComboboxItemGroupPropsContext,] = createContext('ComboboxItemGroup [PROPS]');

package/dist/date-picker/date-picker-anatomy.d.ts

@@ -1,2 +1,2 @@
-export declare const anatomy: import("@zag-js/anatomy").AnatomyInstance<"input" | "label" | "table" | "view" | "root" | "control" | "content" | "trigger" | "positioner" | "clearTrigger" | "monthSelect" | "nextTrigger" | "prevTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewTrigger" | "viewControl" | "yearSelect" | "presetTrigger">;
-export declare const parts: Record<"input" | "label" | "table" | "view" | "root" | "control" | "content" | "trigger" | "positioner" | "clearTrigger" | "monthSelect" | "nextTrigger" | "prevTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewTrigger" | "viewControl" | "yearSelect" | "presetTrigger", import("@zag-js/anatomy").AnatomyPart>;
+export declare const anatomy: import("@zag-js/anatomy").AnatomyInstance<"input" | "label" | "table" | "view" | "content" | "trigger" | "positioner" | "root" | "control" | "clearTrigger" | "monthSelect" | "nextTrigger" | "prevTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewTrigger" | "viewControl" | "yearSelect" | "presetTrigger">;
+export declare const parts: Record<"input" | "label" | "table" | "view" | "content" | "trigger" | "positioner" | "root" | "control" | "clearTrigger" | "monthSelect" | "nextTrigger" | "prevTrigger" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewTrigger" | "viewControl" | "yearSelect" | "presetTrigger", import("@zag-js/anatomy").AnatomyPart>;

package/dist/date-picker/date-picker-context.svelte.js

@@ -1,6 +1,6 @@
 import { createContext } from '../create-context.svelte.js';
 export const [getDatePickerContext, setDatePickerContext] = createContext('DatePicker');
-export const [getDatePickerViewPropsContext, setDatePickerViewPropsContext] = createContext('DatePickerView');
-export const [getDatePickerTablePropsContext, setDatePickerTablePropsContext] = createContext('DatePickerTable');
-export const [getDatePickerTableCellPropsContext, setDatePickerTableCellPropsContext,] = createContext('DatePickerTableCell');
-export const [getDatePickerDayTableCellPropsContext, setDatePickerDayTableCellPropsContext,] = createContext('DatePickerDayTableCell');
+export const [getDatePickerViewPropsContext, setDatePickerViewPropsContext] = createContext('DatePickerView [PROPS]');
+export const [getDatePickerTablePropsContext, setDatePickerTablePropsContext] = createContext('DatePickerTable [PROPS]');
+export const [getDatePickerTableCellPropsContext, setDatePickerTableCellPropsContext,] = createContext('DatePickerTableCell [PROPS]');
+export const [getDatePickerDayTableCellPropsContext, setDatePickerDayTableCellPropsContext,] = createContext('DatePickerDayTableCell [PROPS]');

package/dist/dialog/create-dialog.svelte.d.ts

@@ -1,5 +1,5 @@
 import * as dialog from '@zag-js/dialog';
-export interface CreateDialogProps extends Omit<dialog.Context, 'id' | 'dir' | 'getRootNode' | 'open.controlled'> {
+export interface CreateDialogProps extends Omit<dialog.Context, 'id' | 'dir' | 'role' | 'getRootNode' | 'open.controlled'> {
     id?: string;
     openControlled?: boolean;
 }

package/dist/dialog/create-dialog.svelte.js

@@ -10,6 +10,7 @@ export function createDialog(props) {
     const context = reflect(() => ({
         id,
         dir: locale?.dir,
+        role: 'dialog',
         ...props,
         getRootNode: environment?.getRootNode,
         'open.controlled': props.openControlled,

package/dist/drawer/create-drawer.svelte.d.ts

@@ -0,0 +1,12 @@
+import * as dialog from '@zag-js/dialog';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface CreateDrawerProps extends Omit<dialog.Context, 'id' | 'dir' | 'role' | 'getRootNode' | 'open.controlled'> {
+    id?: string;
+    openControlled?: boolean;
+}
+export interface CreateDrawerReturn extends dialog.Api {
+    getBodyProps(): HTMLAttributes<HTMLElement>;
+    getFooterProps(): HTMLAttributes<HTMLElement>;
+    getHeaderProps(): HTMLAttributes<HTMLElement>;
+}
+export declare function createDrawer(props: CreateDrawerProps): CreateDrawerReturn;

package/dist/drawer/create-drawer.svelte.js

@@ -0,0 +1,57 @@
+import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
+import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
+import { mergeProps } from '../merge-props.js';
+import * as dialog from '@zag-js/dialog';
+import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
+import { uid } from 'uid';
+import { parts } from './drawer-anatomy.js';
+export function createDrawer(props) {
+    const locale = getLocaleContext();
+    const environment = getEnvironmentContext();
+    const id = uid();
+    const context = reflect(() => ({
+        id,
+        dir: locale?.dir,
+        role: 'dialog',
+        ...props,
+        getRootNode: environment?.getRootNode,
+        'open.controlled': props.openControlled,
+    }));
+    const [state, send] = useMachine(dialog.machine(context), { context });
+    return reflect(() => {
+        const o = dialog.connect(state, send, normalizeProps);
+        return {
+            ...o,
+            getBackdropProps() {
+                return mergeProps(o.getBackdropProps(), parts.backdrop.attrs);
+            },
+            getCloseTriggerProps() {
+                return mergeProps(o.getCloseTriggerProps(), parts.closeTrigger.attrs);
+            },
+            getContentProps() {
+                return mergeProps(o.getContentProps(), parts.content.attrs);
+            },
+            getDescriptionProps() {
+                return mergeProps(o.getDescriptionProps(), parts.description.attrs);
+            },
+            getPositionerProps() {
+                return mergeProps(o.getPositionerProps(), parts.positioner.attrs);
+            },
+            getTitleProps() {
+                return mergeProps(o.getTitleProps(), parts.title.attrs);
+            },
+            getTriggerProps() {
+                return mergeProps(o.getTriggerProps(), parts.trigger.attrs);
+            },
+            getBodyProps() {
+                return { ...parts.body.attrs };
+            },
+            getFooterProps() {
+                return { ...parts.footer.attrs };
+            },
+            getHeaderProps() {
+                return { ...parts.header.attrs };
+            },
+        };
+    });
+}

package/dist/drawer/drawer-anatomy.d.ts

@@ -0,0 +1,2 @@
+export declare const anatomy: import("@zag-js/anatomy").AnatomyInstance<"body" | "footer" | "header" | "title" | "content" | "trigger" | "backdrop" | "positioner" | "description" | "closeTrigger">;
+export declare const parts: Record<"body" | "footer" | "header" | "title" | "content" | "trigger" | "backdrop" | "positioner" | "description" | "closeTrigger", import("@zag-js/anatomy").AnatomyPart>;

package/dist/drawer/drawer-anatomy.js

@@ -0,0 +1,3 @@
+import { anatomy as _ } from '@zag-js/dialog';
+export const anatomy = _.rename('drawer').extendWith('body', 'footer', 'header');
+export const parts = anatomy.build();

package/dist/drawer/drawer-backdrop.svelte

@@ -0,0 +1,45 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+  import type {Action} from 'svelte/action';
+
+  export interface DrawerBackdropProps
+    extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {createPresence} from '../presence/create-presence.svelte.js';
+  import {getPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
+  import {reflect} from '@zag-js/svelte';
+  import {getDrawerContext} from './drawer-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: DrawerBackdropProps = $props();
+
+  let drawer = getDrawerContext();
+  let presenceStrategyProps = getPresenceStrategyPropsContext();
+  let presence = createPresence(
+    reflect(() => ({
+      ...presenceStrategyProps,
+      present: drawer.open,
+    })),
+  );
+
+  let mergedProps = $derived(
+    mergeProps(drawer.getBackdropProps(), presence.getPresenceProps(), props),
+  );
+</script>
+
+{#if presence.mounted}
+  {#if asChild}
+    {@render asChild(presence.setReference, mergedProps)}
+  {:else}
+    <div bind:this={ref} use:presence.setReference {...mergedProps}>
+      {@render children?.()}
+    </div>
+  {/if}
+{/if}

package/dist/drawer/drawer-backdrop.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { HtmlIngredientProps } from '../types.js';
+import type { Action } from 'svelte/action';
+export interface DrawerBackdropProps extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {
+}
+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 DrawerBackdrop: $$__sveltets_2_IsomorphicComponent<DrawerBackdropProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "ref">;
+type DrawerBackdrop = InstanceType<typeof DrawerBackdrop>;
+export default DrawerBackdrop;

package/dist/drawer/drawer-body.svelte

@@ -0,0 +1,30 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface DrawerBodyProps
+    extends HtmlIngredientProps<'div', HTMLDivElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getDrawerContext} from './drawer-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: DrawerBodyProps = $props();
+
+  let drawer = getDrawerContext();
+
+  let mergedProps = $derived(mergeProps(drawer.getBodyProps(), props));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/drawer/drawer-body.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface DrawerBodyProps extends HtmlIngredientProps<'div', HTMLDivElement> {
+}
+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 DrawerBody: $$__sveltets_2_IsomorphicComponent<DrawerBodyProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "ref">;
+type DrawerBody = InstanceType<typeof DrawerBody>;
+export default DrawerBody;

package/dist/drawer/drawer-close-trigger.svelte

@@ -0,0 +1,30 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface DrawerCloseTriggerProps
+    extends HtmlIngredientProps<'button', HTMLButtonElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getDrawerContext} from './drawer-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: DrawerCloseTriggerProps = $props();
+
+  let drawer = getDrawerContext();
+
+  let mergedProps = $derived(mergeProps(drawer.getCloseTriggerProps(), props));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <button bind:this={ref} type="button" {...mergedProps}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/drawer/drawer-close-trigger.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface DrawerCloseTriggerProps extends HtmlIngredientProps<'button', HTMLButtonElement> {
+}
+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 DrawerCloseTrigger: $$__sveltets_2_IsomorphicComponent<DrawerCloseTriggerProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "ref">;
+type DrawerCloseTrigger = InstanceType<typeof DrawerCloseTrigger>;
+export default DrawerCloseTrigger;

package/dist/drawer/drawer-content.svelte

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

package/dist/drawer/drawer-content.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { HtmlIngredientProps } from '../types.js';
+import type { Action } from 'svelte/action';
+export interface DrawerContentProps extends HtmlIngredientProps<'div', HTMLDivElement, never, Action> {
+}
+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 DrawerContent: $$__sveltets_2_IsomorphicComponent<DrawerContentProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "ref">;
+type DrawerContent = InstanceType<typeof DrawerContent>;
+export default DrawerContent;

package/dist/drawer/drawer-context.svelte.d.ts

@@ -0,0 +1,2 @@
+import type { CreateDrawerReturn } from './create-drawer.svelte.js';
+export declare const getDrawerContext: () => CreateDrawerReturn, setDrawerContext: (context: CreateDrawerReturn | (() => CreateDrawerReturn)) => void;

package/dist/drawer/drawer-context.svelte.js

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

package/dist/drawer/drawer-description.svelte

@@ -0,0 +1,30 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface DrawerDescriptionProps
+    extends HtmlIngredientProps<'p', HTMLParagraphElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getDrawerContext} from './drawer-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: DrawerDescriptionProps = $props();
+
+  let drawer = getDrawerContext();
+
+  let mergedProps = $derived(mergeProps(drawer.getDescriptionProps(), props));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <p bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </p>
+{/if}

package/dist/drawer/drawer-description.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface DrawerDescriptionProps extends HtmlIngredientProps<'p', HTMLParagraphElement> {
+}
+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 DrawerDescription: $$__sveltets_2_IsomorphicComponent<DrawerDescriptionProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "ref">;
+type DrawerDescription = InstanceType<typeof DrawerDescription>;
+export default DrawerDescription;

package/dist/drawer/drawer-footer.svelte

@@ -0,0 +1,30 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface DrawerFooterProps
+    extends HtmlIngredientProps<'div', HTMLDivElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getDrawerContext} from './drawer-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: DrawerFooterProps = $props();
+
+  let drawer = getDrawerContext();
+
+  let mergedProps = $derived(mergeProps(drawer.getFooterProps(), props));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/drawer/drawer-footer.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface DrawerFooterProps extends HtmlIngredientProps<'div', HTMLDivElement> {
+}
+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 DrawerFooter: $$__sveltets_2_IsomorphicComponent<DrawerFooterProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "ref">;
+type DrawerFooter = InstanceType<typeof DrawerFooter>;
+export default DrawerFooter;

package/dist/drawer/drawer-header.svelte

@@ -0,0 +1,30 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface DrawerHeaderProps
+    extends HtmlIngredientProps<'div', HTMLDivElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getDrawerContext} from './drawer-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: DrawerHeaderProps = $props();
+
+  let drawer = getDrawerContext();
+
+  let mergedProps = $derived(mergeProps(drawer.getHeaderProps(), props));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/drawer/drawer-header.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface DrawerHeaderProps extends HtmlIngredientProps<'div', HTMLDivElement> {
+}
+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 DrawerHeader: $$__sveltets_2_IsomorphicComponent<DrawerHeaderProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "ref">;
+type DrawerHeader = InstanceType<typeof DrawerHeader>;
+export default DrawerHeader;

package/dist/drawer/drawer-positioner.svelte

@@ -0,0 +1,36 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface DrawerPositionerProps
+    extends HtmlIngredientProps<'div', HTMLDivElement> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {getPresenceContext} from '../presence/presence-context.svelte.js';
+  import {getDrawerContext} from './drawer-context.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: DrawerPositionerProps = $props();
+
+  let drawer = getDrawerContext();
+  let presence = getPresenceContext();
+
+  let mergedProps = $derived(
+    mergeProps(drawer.getPositionerProps(), presence.getPresenceProps(), props),
+  );
+</script>
+
+{#if presence.mounted}
+  {#if asChild}
+    {@render asChild(mergedProps)}
+  {:else}
+    <div bind:this={ref} {...mergedProps}>
+      {@render children?.()}
+    </div>
+  {/if}
+{/if}

package/dist/drawer/drawer-positioner.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface DrawerPositionerProps extends HtmlIngredientProps<'div', HTMLDivElement> {
+}
+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 DrawerPositioner: $$__sveltets_2_IsomorphicComponent<DrawerPositionerProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "ref">;
+type DrawerPositioner = InstanceType<typeof DrawerPositioner>;
+export default DrawerPositioner;