ui-ingredients 0.0.28 → 0.0.30

package/dist/signature-pad/root.svelte

@@ -1,61 +1,58 @@
-<script lang="ts" module>
-  import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
-  import type {
-    CreateSignaturePadProps,
-    CreateSignaturePadReturn,
-  } from './create-signature-pad.svelte.js';
-
-  export interface SignaturePadProps
-    extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateSignaturePadProps> {
-    asChild?: AsChild<GenericHtmlProps, CreateSignaturePadReturn>;
-    children?: Snippet<[signaturePad: CreateSignaturePadReturn]>;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {signaturePadContext} from './context.svelte.js';
-  import {createSignaturePad} from './create-signature-pad.svelte.js';
-
-  let {
-    id,
-    ids,
-    name,
-    drawing,
-    required,
-    disabled,
-    readOnly,
-    translations,
-    onDraw,
-    onDrawEnd,
-    asChild,
-    children,
-    ...props
-  }: SignaturePadProps = $props();
-
-  let signaturePad = createSignaturePad({
-    id,
-    ids,
-    name,
-    drawing,
-    required,
-    disabled,
-    readOnly,
-    translations,
-    onDraw,
-    onDrawEnd,
-  });
-
-  let attrs = $derived(mergeProps(props, signaturePad.getRootProps()));
-
-  signaturePadContext.set(signaturePad);
-</script>
-
-{#if asChild}
-  {@render asChild(attrs, signaturePad)}
-{:else}
-  <div {...attrs}>
-    {@render children?.(signaturePad)}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {Snippet} from 'svelte';
+  import type {
+    CreateSignaturePadProps,
+    CreateSignaturePadReturn,
+  } from './create-signature-pad.svelte.js';
+
+  export interface SignaturePadProps
+    extends Assign<
+      Omit<HTMLProps<'div'>, 'children'>,
+      CreateSignaturePadProps
+    > {
+    asChild?: AsChild<CreateSignaturePadReturn>;
+    children?: Snippet<[CreateSignaturePadReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {reflect} from '@zag-js/svelte';
+  import {createSplitProps} from '@zag-js/utils';
+  import {signaturePadContext} from './context.svelte.js';
+  import {createSignaturePad} from './create-signature-pad.svelte.js';
+
+  let {asChild, children, ...props}: SignaturePadProps = $props();
+
+  let [signaturePadProps, otherProps] = $derived(
+    createSplitProps<CreateSignaturePadProps>([
+      'id',
+      'ids',
+      'name',
+      'drawing',
+      'required',
+      'disabled',
+      'readOnly',
+      'translations',
+      'onDraw',
+      'onDrawEnd',
+    ])(props),
+  );
+
+  let signaturePad = createSignaturePad(reflect(() => signaturePadProps));
+
+  let mergedProps = $derived(
+    mergeProps(otherProps, signaturePad.getRootProps()),
+  );
+
+  signaturePadContext.set(signaturePad);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps, signaturePad)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.(signaturePad)}
+  </div>
+{/if}

package/dist/signature-pad/segment-path.svelte

@@ -1,28 +1,31 @@
-<script lang="ts" module>
-  import type {AsChild, Assign, HtmlProps} from '../types.js';
-  import type {SegmentPathProps} from '@zag-js/signature-pad';
-
-  export interface SignaturePadSegmentPathProps
-    extends Assign<HtmlProps<'path'>, SegmentPathProps> {
-    asChild?: AsChild<HtmlProps<'path'>>;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {signaturePadContext} from './context.svelte.js';
-
-  let {path, asChild, children, ...props}: SignaturePadSegmentPathProps = $props();
-
-  let signaturePad = signaturePadContext.get();
-
-  let attrs = $derived(mergeProps(props, signaturePad.getSegmentPathProps({path})));
-</script>
-
-{#if asChild}
-  {@render asChild(attrs)}
-{:else}
-  <path {...attrs}>
-    {@render children?.()}
-  </path>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {SegmentPathProps} from '@zag-js/signature-pad';
+
+  export interface SignaturePadSegmentPathProps
+    extends Assign<HTMLProps<'path'>, SegmentPathProps> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {signaturePadContext} from './context.svelte.js';
+
+  let {path, asChild, children, ...props}: SignaturePadSegmentPathProps =
+    $props();
+
+  let signaturePad = signaturePadContext.get();
+
+  let mergedProps = $derived(
+    mergeProps(props, signaturePad.getSegmentPathProps({path})),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <path {...mergedProps}>
+    {@render children?.()}
+  </path>
+{/if}

package/dist/signature-pad/segment.svelte

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

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

@@ -1,4 +1,4 @@
-import { Context } from '../utils.svelte.js';
+import { Context } from '../context.svelte.js';
 import type { ThumbProps } from '@zag-js/slider';
 import type { CreateSliderReturn } from './create-slider.svelte.js';
 export declare const sliderContext: Context<CreateSliderReturn>;

package/dist/slider/context.svelte.js

@@ -1,3 +1,3 @@
-import { Context } from '../utils.svelte.js';
+import { Context } from '../context.svelte.js';
 export const sliderContext = new Context('Slider');
 export const sliderThumbPropsContext = new Context('SliderThumb');

package/dist/slider/control.svelte

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

package/dist/slider/create-slider.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 slider from '@zag-js/slider';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
 export function createSlider(props) {

package/dist/slider/hidden-input.svelte

@@ -1,19 +1,21 @@
-<script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
-
-  export interface SliderHiddenInputProps extends HtmlProps<'input'> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {sliderContext, sliderThumbPropsContext} from './context.svelte.js';
-
-  let {...props}: SliderHiddenInputProps = $props();
-
-  let slider = sliderContext.get();
-  let thumbProps = sliderThumbPropsContext.get();
-
-  let attrs = $derived(mergeProps(props, slider.getHiddenInputProps(thumbProps)));
-</script>
-
-<input {...attrs} />
+<script lang="ts" module>
+  import type {HTMLProps} from '../types.js';
+
+  export interface SliderHiddenInputProps extends HTMLProps<'input'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {sliderContext, sliderThumbPropsContext} from './context.svelte.js';
+
+  let {...props}: SliderHiddenInputProps = $props();
+
+  let slider = sliderContext.get();
+  let thumbProps = sliderThumbPropsContext.get();
+
+  let mergedProps = $derived(
+    mergeProps(props, slider.getHiddenInputProps(thumbProps)),
+  );
+</script>
+
+<input {...mergedProps} />

package/dist/slider/label.svelte

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

package/dist/slider/marker-group.svelte

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

package/dist/slider/marker.svelte

@@ -1,34 +1,35 @@
-<script lang="ts" module>
-  import type {AsChild, Assign, HtmlProps} from '../types.js';
-  import type {MarkerProps} from '@zag-js/slider';
-
-  export interface SliderMarkerProps extends Assign<HtmlProps<'div'>, MarkerProps> {
-    asChild?: AsChild;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {sliderContext} from './context.svelte.js';
-
-  let {value, asChild, children, ...props}: SliderMarkerProps = $props();
-
-  let slider = sliderContext.get();
-
-  let attrs = $derived(
-    mergeProps(
-      props,
-      slider.getMarkerProps({
-        value,
-      }),
-    ),
-  );
-</script>
-
-{#if asChild}
-  {@render asChild(attrs)}
-{:else}
-  <div {...attrs}>
-    {@render children?.()}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {MarkerProps} from '@zag-js/slider';
+
+  export interface SliderMarkerProps
+    extends Assign<HTMLProps<'div'>, MarkerProps> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {sliderContext} from './context.svelte.js';
+
+  let {value, asChild, children, ...props}: SliderMarkerProps = $props();
+
+  let slider = sliderContext.get();
+
+  let mergedProps = $derived(
+    mergeProps(
+      props,
+      slider.getMarkerProps({
+        value,
+      }),
+    ),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/slider/range.svelte

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