ui-ingredients 0.0.27 → 0.0.29

package/dist/progress/view.svelte

@@ -1,27 +1,28 @@
-<script lang="ts" module>
-  import type {AsChild, Assign, HtmlProps} from '../types.js';
-  import type {ViewProps} from '@zag-js/progress';
-
-  export interface ProgressViewProps extends Assign<HtmlProps<'div'>, ViewProps> {
-    asChild?: AsChild;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {progressContext} from './context.svelte.js';
-
-  let {state, asChild, children, ...props}: ProgressViewProps = $props();
-
-  let progress = progressContext.get();
-
-  let attrs = $derived(mergeProps(props, progress.getViewProps({state})));
-</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 {ViewProps} from '@zag-js/progress';
+
+  export interface ProgressViewProps
+    extends Assign<HTMLProps<'div'>, ViewProps> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {progressContext} from './context.svelte.js';
+
+  let {state, asChild, children, ...props}: ProgressViewProps = $props();
+
+  let progress = progressContext.get();
+
+  let mergedProps = $derived(mergeProps(props, progress.getViewProps({state})));
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/qr-code/context.svelte.d.ts

@@ -1,3 +1,3 @@
-import { Context } from '../utils.svelte.js';
+import { Context } from '../context.svelte.js';
 import type { CreateQRCodeReturn } from './create-qr-code.svelte.js';
 export declare const qrCodeContext: Context<CreateQRCodeReturn>;

package/dist/qr-code/context.svelte.js

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

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

package/dist/qr-code/frame.svelte

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

package/dist/qr-code/overlay.svelte

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

package/dist/qr-code/pattern.svelte

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

package/dist/qr-code/root.svelte

@@ -1,47 +1,43 @@
-<script lang="ts" module>
-  import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
-  import type {CreateQRCodeProps, CreateQRCodeReturn} from './create-qr-code.svelte.js';
-
-  export interface QRCodeProps
-    extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateQRCodeProps> {
-    asChild?: AsChild<GenericHtmlProps, CreateQRCodeReturn>;
-    children?: Snippet<[qrCode: CreateQRCodeReturn]>;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {qrCodeContext} from './context.svelte.js';
-  import {createQRCode} from './create-qr-code.svelte.js';
-
-  let {
-    /**/
-    id,
-    ids,
-    value,
-    encoding,
-    asChild,
-    children,
-    ...props
-  }: QRCodeProps = $props();
-
-  let qrCode = createQRCode({
-    id,
-    ids,
-    value: $state.snapshot(value),
-    encoding,
-  });
-
-  let attrs = $derived(mergeProps(props, qrCode.getRootProps()));
-
-  qrCodeContext.set(qrCode);
-</script>
-
-{#if asChild}
-  {@render asChild(attrs, qrCode)}
-{:else}
-  <div {...attrs}>
-    {@render children?.(qrCode)}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {Snippet} from 'svelte';
+  import type {
+    CreateQRCodeProps,
+    CreateQRCodeReturn,
+  } from './create-qr-code.svelte.js';
+
+  export interface QRCodeProps
+    extends Assign<Omit<HTMLProps<'div'>, 'children'>, CreateQRCodeProps> {
+    asChild?: AsChild<CreateQRCodeReturn>;
+    children?: Snippet<[CreateQRCodeReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {createSplitProps} from '@zag-js/utils';
+  import {qrCodeContext} from './context.svelte.js';
+  import {createQRCode} from './create-qr-code.svelte.js';
+
+  let {asChild, children, ...props}: QRCodeProps = $props();
+
+  let [qrCodeProps, otherProps] = $derived(
+    createSplitProps<CreateQRCodeProps>(['id', 'ids', 'value', 'encoding'])(
+      props,
+    ),
+  );
+
+  let qrCode = createQRCode(qrCodeProps);
+
+  let mergedProps = $derived(mergeProps(otherProps, qrCode.getRootProps()));
+
+  qrCodeContext.set(qrCode);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps, qrCode)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.(qrCode)}
+  </div>
+{/if}

package/dist/radio-group/context.svelte.d.ts

@@ -1,4 +1,4 @@
-import { Context } from '../utils.svelte.js';
+import { Context } from '../context.svelte.js';
 import type { ItemProps } from '@zag-js/radio-group';
 import type { CreateRadioGroupReturn } from './create-radio-group.svelte.js';
 export declare const radioGroupContext: Context<CreateRadioGroupReturn>;

package/dist/radio-group/context.svelte.js

@@ -1,3 +1,3 @@
-import { Context } from '../utils.svelte.js';
+import { Context } from '../context.svelte.js';
 export const radioGroupContext = new Context('RadioGroup');
 export const radioGroupItemPropsContext = new Context('RadioGroupItem');

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

package/dist/radio-group/indicator.svelte

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

package/dist/radio-group/item-control.svelte

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

package/dist/radio-group/item-hidden-input.svelte

@@ -1,19 +1,24 @@
-<script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
-
-  export interface RadioGroupItemHiddenInputProps extends HtmlProps<'input'> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {radioGroupContext, radioGroupItemPropsContext} from './context.svelte.js';
-
-  let {...props}: RadioGroupItemHiddenInputProps = $props();
-
-  let radioGroup = radioGroupContext.get();
-  let itemProps = radioGroupItemPropsContext.get();
-
-  let attrs = $derived(mergeProps(props, radioGroup.getItemHiddenInputProps(itemProps)));
-</script>
-
-<input {...attrs} />
+<script lang="ts" module>
+  import type {HTMLProps} from '../types.js';
+
+  export interface RadioGroupItemHiddenInputProps extends HTMLProps<'input'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {
+    radioGroupContext,
+    radioGroupItemPropsContext,
+  } from './context.svelte.js';
+
+  let {...props}: RadioGroupItemHiddenInputProps = $props();
+
+  let radioGroup = radioGroupContext.get();
+  let itemProps = radioGroupItemPropsContext.get();
+
+  let mergedProps = $derived(
+    mergeProps(props, radioGroup.getItemHiddenInputProps(itemProps)),
+  );
+</script>
+
+<input {...mergedProps} />

package/dist/radio-group/item-text.svelte

@@ -1,27 +1,32 @@
-<script lang="ts" module>
-  import type {AsChild, HtmlProps} from '../types.js';
-
-  export interface RadioGroupItemTextProps extends HtmlProps<'span'> {
-    asChild?: AsChild;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {radioGroupContext, radioGroupItemPropsContext} from './context.svelte.js';
-
-  let {asChild, children, ...props}: RadioGroupItemTextProps = $props();
-
-  let radioGroup = radioGroupContext.get();
-  let itemProps = radioGroupItemPropsContext.get();
-
-  let attrs = $derived(mergeProps(props, radioGroup.getItemTextProps(itemProps)));
-</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 RadioGroupItemTextProps extends HTMLProps<'span'> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {
+    radioGroupContext,
+    radioGroupItemPropsContext,
+  } from './context.svelte.js';
+
+  let {asChild, children, ...props}: RadioGroupItemTextProps = $props();
+
+  let radioGroup = radioGroupContext.get();
+  let itemProps = radioGroupItemPropsContext.get();
+
+  let mergedProps = $derived(
+    mergeProps(props, radioGroup.getItemTextProps(itemProps)),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <span {...mergedProps}>
+    {@render children?.()}
+  </span>
+{/if}

package/dist/radio-group/item.svelte

@@ -1,38 +1,43 @@
-<script lang="ts" module>
-  import type {AsChild, Assign, HtmlProps} from '../types.js';
-  import type {ItemProps, ItemState} from '@zag-js/radio-group';
-  import type {Snippet} from 'svelte';
-
-  export interface RadioGroupItemProps
-    extends Assign<Omit<HtmlProps<'label'>, 'children'>, ItemProps> {
-    asChild?: AsChild<HtmlProps<'label'>, ItemState>;
-    children?: Snippet<[state: ItemState]>;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {radioGroupContext, radioGroupItemPropsContext} from './context.svelte.js';
-
-  let {value, invalid, disabled, children, asChild, ...props}: RadioGroupItemProps = $props();
-
-  let radioGroup = radioGroupContext.get();
-  let itemProps = $derived({
-    value,
-    invalid,
-    disabled,
-  });
-
-  let state = $derived(radioGroup.getItemState(itemProps));
-  let attrs = $derived(mergeProps(props, radioGroup.getItemProps(itemProps)));
-
-  radioGroupItemPropsContext.set(() => itemProps);
-</script>
-
-{#if asChild}
-  {@render asChild(attrs, state)}
-{:else}
-  <label {...attrs}>
-    {@render children?.(state)}
-  </label>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {ItemProps, ItemState} from '@zag-js/radio-group';
+  import type {Snippet} from 'svelte';
+
+  export interface RadioGroupItemProps
+    extends Assign<Omit<HTMLProps<'label'>, 'children'>, ItemProps> {
+    asChild?: AsChild<ItemState>;
+    children?: Snippet<[ItemState]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {createSplitProps} from '@zag-js/utils';
+  import {
+    radioGroupContext,
+    radioGroupItemPropsContext,
+  } from './context.svelte.js';
+
+  let {children, asChild, ...props}: RadioGroupItemProps = $props();
+
+  let radioGroup = radioGroupContext.get();
+
+  let [itemProps, otherProps] = $derived(
+    createSplitProps<ItemProps>(['value', 'invalid', 'disabled'])(props),
+  );
+
+  let itemState = $derived(radioGroup.getItemState(itemProps));
+  let mergedProps = $derived(
+    mergeProps(otherProps, radioGroup.getItemProps(itemProps)),
+  );
+
+  radioGroupItemPropsContext.set(() => itemProps);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps, itemState)}
+{:else}
+  <label {...mergedProps}>
+    {@render children?.(itemState)}
+  </label>
+{/if}