ui-ingredients 0.0.28 → 0.0.29

package/dist/steps/trigger.svelte

@@ -1,27 +1,29 @@
-<script lang="ts" module>
-  import type {AsChild, HtmlProps} from '../types.js';
-
-  export interface StepsTriggerProps extends HtmlProps<'button'> {
-    asChild?: AsChild<HtmlProps<'button'>>;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {stepsContext, stepsItemPropsContext} from './context.svelte.js';
-
-  let {asChild, children, ...props}: StepsTriggerProps = $props();
-
-  let steps = stepsContext.get();
-  let itemProps = stepsItemPropsContext.get();
-
-  let attrs = $derived(mergeProps(props, steps.getTriggerProps(itemProps)));
-</script>
-
-{#if asChild}
-  {@render asChild(attrs)}
-{:else}
-  <button type="button" {...attrs}>
-    {@render children?.()}
-  </button>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, HTMLProps} from '../types.js';
+
+  export interface StepsTriggerProps extends HTMLProps<'button'> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {stepsContext, stepsItemPropsContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: StepsTriggerProps = $props();
+
+  let steps = stepsContext.get();
+  let itemProps = stepsItemPropsContext.get();
+
+  let mergedProps = $derived(
+    mergeProps(props, steps.getTriggerProps(itemProps)),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <button type="button" {...mergedProps}>
+    {@render children?.()}
+  </button>
+{/if}

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

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

package/dist/switch/context.svelte.js

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

package/dist/switch/control.svelte

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

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

package/dist/switch/hidden-input.svelte

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

package/dist/switch/label.svelte

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

package/dist/switch/root.svelte

@@ -1,62 +1,54 @@
-<script lang="ts" module>
-  import type {AsChild, Assign, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
-  import type {CreateSwitchProps, CreateSwitchReturn} from './create-switch.svelte.js';
-
-  export interface SwitchProps
-    extends Assign<Omit<HtmlProps<'label'>, 'children'>, CreateSwitchProps> {
-    asChild?: AsChild<HtmlProps<'label'>, CreateSwitchReturn>;
-    children?: Snippet<[switch$: CreateSwitchReturn]>;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {switchContext} from './context.svelte.js';
-  import {createSwitch} from './create-switch.svelte.js';
-
-  let {
-    id,
-    ids,
-    form,
-    name,
-    label,
-    value,
-    checked,
-    invalid,
-    disabled,
-    readOnly,
-    required,
-    onCheckedChange,
-    asChild,
-    children,
-    ...props
-  }: SwitchProps = $props();
-
-  let switch$ = createSwitch({
-    id,
-    ids,
-    form,
-    name,
-    label,
-    value: $state.snapshot(value),
-    checked,
-    invalid,
-    disabled,
-    readOnly,
-    required,
-    onCheckedChange,
-  });
-
-  let attrs = $derived(mergeProps(props, switch$.getRootProps()));
-
-  switchContext.set(switch$);
-</script>
-
-{#if asChild}
-  {@render asChild(attrs, switch$)}
-{:else}
-  <label {...attrs}>
-    {@render children?.(switch$)}
-  </label>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {Snippet} from 'svelte';
+  import type {
+    CreateSwitchProps,
+    CreateSwitchReturn,
+  } from './create-switch.svelte.js';
+
+  export interface SwitchProps
+    extends Assign<Omit<HTMLProps<'label'>, 'children'>, CreateSwitchProps> {
+    asChild?: AsChild<CreateSwitchReturn>;
+    children?: Snippet<[CreateSwitchReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {createSplitProps} from '@zag-js/utils';
+  import {switchContext} from './context.svelte.js';
+  import {createSwitch} from './create-switch.svelte.js';
+
+  let {asChild, children, ...props}: SwitchProps = $props();
+
+  let [switchProps, otherProps] = $derived(
+    createSplitProps<CreateSwitchProps>([
+      'id',
+      'ids',
+      'form',
+      'name',
+      'label',
+      'value',
+      'checked',
+      'invalid',
+      'disabled',
+      'readOnly',
+      'required',
+      'onCheckedChange',
+    ])(props),
+  );
+
+  let switch$ = createSwitch(switchProps);
+
+  let mergedProps = $derived(mergeProps(otherProps, switch$.getRootProps()));
+
+  switchContext.set(switch$);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps, switch$)}
+{:else}
+  <label {...mergedProps}>
+    {@render children?.(switch$)}
+  </label>
+{/if}

package/dist/switch/thumb.svelte

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

package/dist/tabs/content.svelte

@@ -1,27 +1,35 @@
-<script lang="ts" module>
-  import type {AsChild, Assign, HtmlProps} from '../types.js';
-  import type {ContentProps} from '@zag-js/tabs';
-
-  export interface TabsContentProps extends Assign<HtmlProps<'div'>, ContentProps> {
-    asChild?: AsChild;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {tabsContext} from './context.svelte.js';
-
-  let {value, asChild, children, ...props}: TabsContentProps = $props();
-
-  let tabs = tabsContext.get();
-
-  let attrs = $derived(mergeProps(props, tabs.getContentProps({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 {ContentProps} from '@zag-js/tabs';
+
+  export interface TabsContentProps
+    extends Assign<HTMLProps<'div'>, ContentProps> {
+    asChild?: AsChild;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {createSplitProps} from '@zag-js/utils';
+  import {tabsContext} from './context.svelte.js';
+
+  let {asChild, children, ...props}: TabsContentProps = $props();
+
+  let tabs = tabsContext.get();
+
+  let [contentProps, otherProps] = $derived(
+    createSplitProps<ContentProps>(['value'])(props),
+  );
+
+  let mergedProps = $derived(
+    mergeProps(otherProps, tabs.getContentProps(contentProps)),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

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

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

package/dist/tabs/context.svelte.js

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

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

package/dist/tabs/list.svelte

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

package/dist/tabs/root.svelte

@@ -1,57 +1,52 @@
-<script lang="ts" module>
-  import type {AsChild, Assign, GenericHtmlProps, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
-  import type {CreateTabsProps, CreateTabsReturn} from './create-tabs.svelte.js';
-
-  export interface TabsProps extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateTabsProps> {
-    asChild?: AsChild<GenericHtmlProps, CreateTabsReturn>;
-    children?: Snippet<[tabs: CreateTabsReturn]>;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {tabsContext} from './context.svelte.js';
-  import {createTabs} from './create-tabs.svelte.js';
-
-  let {
-    id,
-    ids,
-    value,
-    loopFocus,
-    composite,
-    orientation,
-    translations,
-    activationMode,
-    onFocusChange,
-    onValueChange,
-    asChild,
-    children,
-    ...props
-  }: TabsProps = $props();
-
-  let tabs = createTabs({
-    id,
-    ids,
-    value: $state.snapshot(value),
-    loopFocus,
-    composite,
-    orientation,
-    translations,
-    activationMode,
-    onFocusChange,
-    onValueChange,
-  });
-
-  let attrs = $derived<Record<string, any>>(mergeProps(props, tabs.getRootProps()));
-
-  tabsContext.set(tabs);
-</script>
-
-{#if asChild}
-  {@render asChild(attrs, tabs)}
-{:else}
-  <div {...attrs}>
-    {@render children?.(tabs)}
-  </div>
-{/if}
+<script lang="ts" module>
+  import type {AsChild, Assign, HTMLProps} from '../types.js';
+  import type {Snippet} from 'svelte';
+  import type {
+    CreateTabsProps,
+    CreateTabsReturn,
+  } from './create-tabs.svelte.js';
+
+  export interface TabsProps
+    extends Assign<Omit<HTMLProps<'div'>, 'children'>, CreateTabsProps> {
+    asChild?: AsChild<CreateTabsReturn>;
+    children?: Snippet<[CreateTabsReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {createSplitProps} from '@zag-js/utils';
+  import {tabsContext} from './context.svelte.js';
+  import {createTabs} from './create-tabs.svelte.js';
+
+  let {asChild, children, ...props}: TabsProps = $props();
+
+  let [tabsProps, otherProps] = $derived(
+    createSplitProps<CreateTabsProps>([
+      'id',
+      'ids',
+      'value',
+      'loopFocus',
+      'composite',
+      'orientation',
+      'translations',
+      'activationMode',
+      'onFocusChange',
+      'onValueChange',
+    ])(props),
+  );
+
+  let tabs = createTabs(tabsProps);
+
+  let mergedProps = $derived(mergeProps(otherProps, tabs.getRootProps()));
+
+  tabsContext.set(tabs);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps, tabs)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.(tabs)}
+  </div>
+{/if}