ui-ingredients 0.0.43 → 0.0.45

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

@@ -7,15 +7,14 @@ export function createDialog(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const id = uid();
-    const context = $derived(reflect(() => ({
+    const context = reflect(() => ({
         ...props,
         id: props.id ?? id,
         dir: locale?.dir,
         open: props.defaultOpen ?? props.open,
         getRootNode: environment?.getRootNode,
         'open.controlled': props.open != null,
-    })));
+    }));
     const [state, send] = useMachine(dialog.machine(context), { context });
-    const api = $derived(reflect(() => dialog.connect(state, send, normalizeProps)));
-    return api;
+    return reflect(() => dialog.connect(state, send, normalizeProps));
 }

package/dist/dialog/root.svelte

@@ -33,18 +33,12 @@
   );
 
   let dialog = createDialog(reflect(() => dialogProps));
-
-  let presence = createPresence({
-    get present() {
-      return dialog.open;
-    },
-    get lazyMount() {
-      return presenceStrategyProps.lazyMount;
-    },
-    get keepMounted() {
-      return presenceStrategyProps.keepMounted;
-    },
-  });
+  let presence = createPresence(
+    reflect(() => ({
+      ...presenceStrategyProps,
+      present: dialog.open,
+    })),
+  );
 
   setDialogContext(dialog);
   setPresenceContext(presence);

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

@@ -9,7 +9,7 @@ export function createEditable(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const id = uid();
-    const context = $derived(reflect(() => ({
+    const context = reflect(() => ({
         ids: {
             label: field?.ids.label,
             input: field?.ids.control,
@@ -24,9 +24,9 @@ export function createEditable(props) {
         edit: props.defaultEdit ?? props.edit,
         getRootNode: environment?.getRootNode,
         'edit.controlled': props.edit != null,
-    })));
+    }));
     const [state, send] = useMachine(editable.machine(context), { context });
-    const api = $derived(reflect(() => {
+    return reflect(() => {
         const o = editable.connect(state, send, normalizeProps);
         return {
             ...o,
@@ -37,6 +37,5 @@ export function createEditable(props) {
                 };
             },
         };
-    }));
-    return api;
+    });
 }

package/dist/editable/root.svelte

@@ -21,7 +21,7 @@
 
   let {asChild, children, ...props}: EditableProps = $props();
 
-  let [editableProps, otherProps] = $derived(
+  let [editableProps, localProps] = $derived(
     createSplitProps<CreateEditableProps>([
       'id',
       'ids',
@@ -54,7 +54,7 @@
 
   let editable = createEditable(reflect(() => editableProps));
 
-  let mergedProps = $derived(mergeProps(otherProps, editable.getRootProps()));
+  let mergedProps = $derived(mergeProps(localProps, editable.getRootProps()));
 
   setEditableContext(editable);
 </script>

package/dist/environment-provider/root.svelte

@@ -1,6 +1,5 @@
 <script lang="ts" module>
   import type {Snippet} from 'svelte';
-  import {type Environment} from './context.svelte.js';
 
   export interface EnvironmentProviderProps {
     rootNode?:
@@ -20,21 +19,19 @@
 
   let elem: HTMLSpanElement | null = $state(null);
 
-  let getRootNode = $derived.by(() => {
+  function getRootNode() {
     if (rootNode) {
-      return typeof rootNode === 'function' ? rootNode : () => rootNode;
+      return typeof rootNode === 'function' ? rootNode() : rootNode;
     } else {
-      return () => elem?.ownerDocument ?? document;
+      return elem?.ownerDocument ?? document;
     }
-  });
+  }
 
-  let environment: Environment = $derived({
+  setEnvironmentContext({
     getRootNode,
     getDocument: () => getDocument(getRootNode()),
     getWindow: () => getWindow(getRootNode()),
   });
-
-  setEnvironmentContext(() => environment);
 </script>
 
 {@render children()}

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

@@ -1,4 +1,3 @@
-import type { HtmlProps } from '../types.js';
 interface ElementIds {
     root?: string;
     label?: string;
@@ -16,25 +15,5 @@ export interface CreateFieldProps {
 }
 export interface CreateFieldReturn extends ReturnType<typeof createField> {
 }
-export declare function createField(props: CreateFieldProps): {
-    readonly ids: {
-        root: string;
-        label: string;
-        control: string;
-        errorText: string;
-        helperText: string;
-    };
-    readonly disabled: boolean;
-    readonly required: boolean;
-    readonly readOnly: boolean;
-    readonly invalid: boolean;
-    readonly 'aria-describedby': string;
-    getRootProps: () => HtmlProps<"div">;
-    getLabelProps: () => HtmlProps<"label">;
-    getErrorTextProps: () => HtmlProps<"div">;
-    getHelperTextProps: () => HtmlProps<"div">;
-    getInputProps: () => HtmlProps<"input">;
-    getSelectProps: () => HtmlProps<"select">;
-    getTextareaProps: () => HtmlProps<"textarea">;
-};
+export declare function createField(props: CreateFieldProps): any;
 export {};

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

@@ -1,5 +1,6 @@
 import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
 import { ariaAttr, dataAttr, getDocument, getWindow } from '@zag-js/dom-query';
+import { reflect } from '@zag-js/svelte';
 import { uid } from 'uid';
 import { parts } from './anatomy.js';
 export function createField(props) {
@@ -136,25 +137,13 @@ export function createField(props) {
             'data-readonly': dataAttr(readOnly),
         };
     }
-    return {
-        get ids() {
-            return ids;
-        },
-        get disabled() {
-            return disabled;
-        },
-        get required() {
-            return required;
-        },
-        get readOnly() {
-            return readOnly;
-        },
-        get invalid() {
-            return invalid;
-        },
-        get 'aria-describedby'() {
-            return ariaDescribedby;
-        },
+    return reflect(() => ({
+        ids,
+        disabled,
+        required,
+        readOnly,
+        invalid,
+        'aria-describedby': ariaDescribedby,
         getRootProps,
         getLabelProps,
         getErrorTextProps,
@@ -162,5 +151,5 @@ export function createField(props) {
         getInputProps,
         getSelectProps,
         getTextareaProps,
-    };
+    }));
 }

package/dist/field/root.svelte

@@ -21,7 +21,7 @@
 
   let {asChild, children, ...props}: FieldProps = $props();
 
-  let [fieldProps, otherProps] = $derived(
+  let [fieldProps, localProps] = $derived(
     createSplitProps<CreateFieldProps>([
       'id',
       'ids',
@@ -34,7 +34,7 @@
 
   let field = createField(reflect(() => fieldProps));
 
-  let mergedProps = $derived(mergeProps(otherProps, field.getRootProps()));
+  let mergedProps = $derived(mergeProps(localProps, field.getRootProps()));
 
   setFieldContext(field);
 </script>

package/dist/file-upload/create-file-upload.svelte.js

@@ -9,7 +9,7 @@ export function createFileUpload(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const id = uid();
-    const context = $derived(reflect(() => ({
+    const context = reflect(() => ({
         ids: {
             label: field?.ids.label,
             hiddenInput: field?.ids.control,
@@ -22,9 +22,9 @@ export function createFileUpload(props) {
         dir: locale?.dir,
         locale: props.locale ?? locale?.locale,
         getRootNode: environment?.getRootNode,
-    })));
+    }));
     const [state, send] = useMachine(fileUpload.machine(context), { context });
-    const api = $derived(reflect(() => {
+    return reflect(() => {
         const o = fileUpload.connect(state, send, normalizeProps);
         return {
             ...o,
@@ -35,6 +35,5 @@ export function createFileUpload(props) {
                 };
             },
         };
-    }));
-    return api;
+    });
 }

package/dist/file-upload/item.svelte

@@ -18,12 +18,12 @@
 
   let fileUpload = getFileUploadContext();
 
-  let [itemProps, otherProps] = $derived(
+  let [itemProps, localProps] = $derived(
     createSplitProps<ItemProps>(['file'])(props),
   );
 
   let mergedProps = $derived(
-    mergeProps(otherProps, fileUpload.getItemProps(itemProps)),
+    mergeProps(localProps, fileUpload.getItemProps(itemProps)),
   );
 
   setFileUploadItemPropsContext(() => itemProps);

package/dist/file-upload/root.svelte

@@ -21,7 +21,7 @@
 
   let {asChild, children, ...props}: FileUploadProps = $props();
 
-  let [fileUploadProps, otherProps] = $derived(
+  let [fileUploadProps, localProps] = $derived(
     createSplitProps<CreateFileUploadProps>([
       'id',
       'ids',
@@ -47,7 +47,7 @@
 
   let fileUpload = createFileUpload(reflect(() => fileUploadProps));
 
-  let mergedProps = $derived(mergeProps(otherProps, fileUpload.getRootProps()));
+  let mergedProps = $derived(mergeProps(localProps, fileUpload.getRootProps()));
 
   setFileUploadContext(fileUpload);
 </script>

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

@@ -7,12 +7,12 @@ export function createFloatingPanel(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
     const id = uid();
-    const context = $derived(reflect(() => ({
+    const context = reflect(() => ({
+        ...props,
         id: props.id ?? id,
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
-    })));
+    }));
     const [state, send] = useMachine(floatingPanel.machine(context), { context });
-    const api = $derived(reflect(() => floatingPanel.connect(state, send, normalizeProps)));
-    return api;
+    return reflect(() => floatingPanel.connect(state, send, normalizeProps));
 }

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}