ui-ingredients 0.0.28 → 0.0.30

package/dist/portal/root.svelte

@@ -1,28 +1,28 @@
-<script module lang="ts">
-  import {type Snippet} from 'svelte';
-
-  export interface PortalProps {
-    container?: HTMLElement;
-    disabled?: boolean;
-    children: Snippet;
-  }
-</script>
-
-<script lang="ts">
-  import {getEnvironmentContext} from '../environment-provider/index.js';
-  import {portal} from '@zag-js/svelte';
-
-  let {container, disabled, children}: PortalProps = $props();
-
-  let environment = getEnvironmentContext();
-</script>
-
-<div
-  use:portal={{
-    disabled,
-    container,
-    getRootNode: environment?.getRootNode,
-  }}
->
-  {@render children?.()}
-</div>
+<script module lang="ts">
+  import {type Snippet} from 'svelte';
+
+  export interface PortalProps {
+    container?: HTMLElement;
+    disabled?: boolean;
+    children: Snippet;
+  }
+</script>
+
+<script lang="ts">
+  import {getEnvironmentContext} from '../environment-provider/index.js';
+  import {portal} from '@zag-js/svelte';
+
+  let {container, disabled, children}: PortalProps = $props();
+
+  let environment = getEnvironmentContext();
+</script>
+
+<div
+  use:portal={{
+    disabled,
+    container,
+    getRootNode: environment?.getRootNode,
+  }}
+>
+  {@render children?.()}
+</div>

package/dist/presence/context.svelte.d.ts

@@ -1,3 +1,3 @@
-import { Context } from '../utils.svelte.js';
+import { Context } from '../context.svelte.js';
 import type { CreatePresenceReturn } from './create-presence.svelte.js';
 export declare const presenceContext: Context<CreatePresenceReturn>;

package/dist/presence/context.svelte.js

@@ -1,2 +1,2 @@
-import { Context } from '../utils.svelte.js';
+import { Context } from '../context.svelte.js';
 export const presenceContext = new Context('Presence');

package/dist/presence/root.svelte

@@ -1,32 +1,30 @@
-<script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
-  import type {CreatePresenceProps} from './create-presence.svelte.js';
-
-  export interface PresenceProps extends Assign<HtmlProps<'div'>, CreatePresenceProps> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {createPresence} from './create-presence.svelte.js';
-
-  let {
-    /**/
-    present = $bindable(false),
-    keepMounted,
-    children,
-    ...props
-  }: PresenceProps = $props();
-
-  let presence = createPresence({
-    present,
-    keepMounted,
-  });
-
-  let attrs = $derived(mergeProps(props, presence.getRootProps()));
-</script>
-
-{#if !presence.unmounted}
-  <div use:presence.ref {...attrs}>
-    {@render children?.()}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {Assign, HTMLProps} from '../types.js';
+  import type {CreatePresenceProps} from './create-presence.svelte.js';
+
+  export interface PresenceProps
+    extends Assign<HTMLProps<'div'>, CreatePresenceProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {reflect} from '@zag-js/svelte';
+  import {createSplitProps} from '@zag-js/utils';
+  import {createPresence} from './create-presence.svelte.js';
+
+  let {children, ...props}: PresenceProps = $props();
+
+  let [presenceProps, otherProps] = $derived(
+    createSplitProps<CreatePresenceProps>(['present', 'keepMounted'])(props),
+  );
+
+  let presence = createPresence(reflect(() => presenceProps));
+
+  let mergedProps = $derived(mergeProps(otherProps, presence.getRootProps()));
+</script>
+
+{#if !presence.unmounted}
+  <div use:presence.ref {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/presence/root.svelte.d.ts

@@ -13,6 +13,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const Root: $$__sveltets_2_IsomorphicComponent<PresenceProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "present">;
+}, {}, {}, "">;
 type Root = InstanceType<typeof Root>;
 export default Root;

package/dist/progress/circle-range.svelte

@@ -1,26 +1,26 @@
-<script lang="ts" module>
-  import type {AsChild, HtmlProps} from '../types.js';
-
-  export interface ProgressCircleRangeProps extends HtmlProps<'circle'> {
-    asChild?: AsChild<HtmlProps<'circle'>>;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {progressContext} from './context.svelte.js';
-
-  let {asChild, children, ...props}: ProgressCircleRangeProps = $props();
-
-  let progress = progressContext.get();
-
-  let attrs = $derived(mergeProps(props, progress.getCircleRangeProps()));
-</script>
-
-{#if asChild}
-  {@render asChild(attrs)}
-{:else}
-  <circle {...attrs}>
-    {@render children?.()}
-  </circle>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, HTMLProps} from '../types.js';
+
+  export interface ProgressCircleRangeProps extends HTMLProps<'circle'> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {progressContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: ProgressCircleRangeProps = $props();
+
+  let progress = progressContext.get();
+
+  let mergedProps = $derived(mergeProps(props, progress.getCircleRangeProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <circle {...mergedProps}>
+    {@render children?.()}
+  </circle>
+{/if}

package/dist/progress/circle-track.svelte

@@ -1,26 +1,26 @@
-<script lang="ts" module>
-  import type {AsChild, HtmlProps} from '../types.js';
-
-  export interface ProgressCircleTrackProps extends HtmlProps<'circle'> {
-    asChild?: AsChild<HtmlProps<'circle'>>;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {progressContext} from './context.svelte.js';
-
-  let {asChild, children, ...props}: ProgressCircleTrackProps = $props();
-
-  let progress = progressContext.get();
-
-  let attrs = $derived(mergeProps(props, progress.getCircleTrackProps()));
-</script>
-
-{#if asChild}
-  {@render asChild(attrs)}
-{:else}
-  <circle {...attrs}>
-    {@render children?.()}
-  </circle>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, HTMLProps} from '../types.js';
+
+  export interface ProgressCircleTrackProps extends HTMLProps<'circle'> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {progressContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: ProgressCircleTrackProps = $props();
+
+  let progress = progressContext.get();
+
+  let mergedProps = $derived(mergeProps(props, progress.getCircleTrackProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <circle {...mergedProps}>
+    {@render children?.()}
+  </circle>
+{/if}

package/dist/progress/circle.svelte

@@ -1,26 +1,26 @@
-<script lang="ts" module>
-  import type {AsChild, HtmlProps} from '../types.js';
-
-  export interface ProgressCircleProps extends HtmlProps<'svg'> {
-    asChild?: AsChild<HtmlProps<'svg'>>;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {progressContext} from './context.svelte.js';
-
-  let {asChild, children, ...props}: ProgressCircleProps = $props();
-
-  let progress = progressContext.get();
-
-  let attrs = $derived(mergeProps(props, progress.getCircleProps()));
-</script>
-
-{#if asChild}
-  {@render asChild(attrs)}
-{:else}
-  <svg {...attrs}>
-    {@render children?.()}
-  </svg>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, HTMLProps} from '../types.js';
+
+  export interface ProgressCircleProps extends HTMLProps<'svg'> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {progressContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: ProgressCircleProps = $props();
+
+  let progress = progressContext.get();
+
+  let mergedProps = $derived(mergeProps(props, progress.getCircleProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <svg {...mergedProps}>
+    {@render children?.()}
+  </svg>
+{/if}

package/dist/progress/context.svelte.d.ts

@@ -1,3 +1,3 @@
-import { Context } from '../utils.svelte.js';
+import { Context } from '../context.svelte.js';
 import type { CreateProgressReturn } from './create-progress.svelte.js';
 export declare const progressContext: Context<CreateProgressReturn>;

package/dist/progress/context.svelte.js

@@ -1,2 +1,2 @@
-import { Context } from '../utils.svelte.js';
+import { Context } from '../context.svelte.js';
 export const progressContext = new Context('Progress');

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

@@ -1,6 +1,6 @@
+import { createUniqueId } from '../create-unique-id.js';
 import { getEnvironmentContext } from '../environment-provider/context.svelte.js';
 import { getLocaleContext } from '../locale-provider/context.svelte.js';
-import { createUniqueId } from '../utils.svelte.js';
 import * as progress from '@zag-js/progress';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 export function createProgress(props) {

package/dist/progress/label.svelte

@@ -1,26 +1,26 @@
-<script lang="ts" module>
-  import type {AsChild, HtmlProps} from '../types.js';
-
-  export interface ProgressLabelProps extends HtmlProps<'span'> {
-    asChild?: AsChild;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {progressContext} from './context.svelte.js';
-
-  let {asChild, children, ...props}: ProgressLabelProps = $props();
-
-  let progress = progressContext.get();
-
-  let attrs = $derived(mergeProps(props, progress.getLabelProps()));
-</script>
-
-{#if asChild}
-  {@render asChild(attrs)}
-{:else}
-  <span {...attrs}>
-    {@render children?.()}
-  </span>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, HTMLProps} from '../types.js';
+
+  export interface ProgressLabelProps extends HTMLProps<'span'> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {progressContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: ProgressLabelProps = $props();
+
+  let progress = progressContext.get();
+
+  let mergedProps = $derived(mergeProps(props, progress.getLabelProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <span {...mergedProps}>
+    {@render children?.()}
+  </span>
+{/if}

package/dist/progress/range.svelte

@@ -1,26 +1,26 @@
-<script lang="ts" module>
-  import type {AsChild, HtmlProps} from '../types.js';
-
-  export interface ProgressRangeProps extends HtmlProps<'div'> {
-    asChild?: AsChild;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {progressContext} from './context.svelte.js';
-
-  let {asChild, children, ...props}: ProgressRangeProps = $props();
-
-  let progress = progressContext.get();
-
-  let attrs = $derived(mergeProps(props, progress.getRangeProps()));
-</script>
-
-{#if asChild}
-  {@render asChild(attrs)}
-{:else}
-  <div {...attrs}>
-    {@render children?.()}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, HTMLProps} from '../types.js';
+
+  export interface ProgressRangeProps extends HTMLProps<'div'> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {progressContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: ProgressRangeProps = $props();
+
+  let progress = progressContext.get();
+
+  let mergedProps = $derived(mergeProps(props, progress.getRangeProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/progress/root.svelte

@@ -1,53 +1,50 @@
-<script lang="ts" module>
-  import type {AsChild, Assign, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
-  import type {CreateProgressProps, CreateProgressReturn} from './create-progress.svelte.js';
-
-  export interface ProgressProps
-    extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateProgressProps> {
-    asChild?: AsChild;
-    children?: Snippet<[progress: CreateProgressReturn]>;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {progressContext} from './context.svelte.js';
-  import {createProgress} from './create-progress.svelte.js';
-
-  let {
-    /**/
-    id,
-    ids,
-    max,
-    min,
-    value,
-    orientation,
-    translations,
-    asChild,
-    children,
-    ...props
-  }: ProgressProps = $props();
-
-  let progress = createProgress({
-    id,
-    ids,
-    max,
-    min,
-    value: $state.snapshot(value),
-    orientation,
-    translations,
-  });
-
-  let attrs = $derived(mergeProps(props, progress.getRootProps()));
-
-  progressContext.set(progress);
-</script>
-
-{#if asChild}
-  {@render asChild(attrs)}
-{:else}
-  <div {...attrs}>
-    {@render children?.(progress)}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {Snippet} from 'svelte';
+  import type {
+    CreateProgressProps,
+    CreateProgressReturn,
+  } from './create-progress.svelte.js';
+
+  export interface ProgressProps
+    extends Assign<Omit<HTMLProps<'div'>, 'children'>, CreateProgressProps> {
+    asChild?: AsChild;
+    children?: Snippet<[progress: CreateProgressReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {reflect} from '@zag-js/svelte';
+  import {createSplitProps} from '@zag-js/utils';
+  import {progressContext} from './context.svelte.js';
+  import {createProgress} from './create-progress.svelte.js';
+
+  let {asChild, children, ...props}: ProgressProps = $props();
+
+  let [progressProps, otherProps] = $derived(
+    createSplitProps<CreateProgressProps>([
+      'id',
+      'ids',
+      'max',
+      'min',
+      'value',
+      'orientation',
+      'translations',
+    ])(props),
+  );
+
+  let progress = createProgress(reflect(() => progressProps));
+
+  let mergedProps = $derived(mergeProps(otherProps, progress.getRootProps()));
+
+  progressContext.set(progress);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.(progress)}
+  </div>
+{/if}

package/dist/progress/track.svelte

@@ -1,26 +1,26 @@
-<script lang="ts" module>
-  import type {AsChild, HtmlProps} from '../types.js';
-
-  export interface ProgressTrackProps extends HtmlProps<'div'> {
-    asChild?: AsChild;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {progressContext} from './context.svelte.js';
-
-  let {asChild, children, ...props}: ProgressTrackProps = $props();
-
-  let progress = progressContext.get();
-
-  let attrs = $derived(mergeProps(props, progress.getTrackProps()));
-</script>
-
-{#if asChild}
-  {@render asChild(attrs)}
-{:else}
-  <div {...attrs}>
-    {@render children?.()}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, HTMLProps} from '../types.js';
+
+  export interface ProgressTrackProps extends HTMLProps<'div'> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {progressContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: ProgressTrackProps = $props();
+
+  let progress = progressContext.get();
+
+  let mergedProps = $derived(mergeProps(props, progress.getTrackProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/progress/value-text.svelte

@@ -1,30 +1,30 @@
-<script lang="ts" module>
-  import type {AsChild, HtmlProps} from '../types.js';
-
-  export interface ProgressValueTextProps extends HtmlProps<'span'> {
-    asChild?: AsChild;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {progressContext} from './context.svelte.js';
-
-  let {asChild, children, ...props}: ProgressValueTextProps = $props();
-
-  let progress = progressContext.get();
-
-  let attrs = $derived(mergeProps(props, progress.getValueTextProps()));
-</script>
-
-{#if asChild}
-  {@render asChild(attrs)}
-{:else}
-  <span {...attrs}>
-    {#if children}
-      {@render children()}
-    {:else}
-      {progress.percentAsString}
-    {/if}
-  </span>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, HTMLProps} from '../types.js';
+
+  export interface ProgressValueTextProps extends HTMLProps<'span'> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {progressContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: ProgressValueTextProps = $props();
+
+  let progress = progressContext.get();
+
+  let mergedProps = $derived(mergeProps(props, progress.getValueTextProps()));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <span {...mergedProps}>
+    {#if children}
+      {@render children()}
+    {:else}
+      {progress.percentAsString}
+    {/if}
+  </span>
+{/if}