ui-ingredients 0.0.28 → 0.0.30

package/dist/color-picker/positioner.svelte

@@ -1,20 +1,22 @@
-<script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
-
-  export interface ColorPickerPositionerProps extends HtmlProps<'div'> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {colorPickerContext} from './context.svelte.js';
-
-  let {children, ...props}: ColorPickerPositionerProps = $props();
-
-  let colorPicker = colorPickerContext.get();
-
-  let attrs = $derived(mergeProps(props, colorPicker.getPositionerProps()));
-</script>
-
-<div {...attrs}>
-  {@render children?.()}
-</div>
+<script lang="ts" module>
+  import type {HTMLProps} from '../types.js';
+
+  export interface ColorPickerPositionerProps extends HTMLProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {colorPickerContext} from './context.svelte.js';
+
+  let {children, ...props}: ColorPickerPositionerProps = $props();
+
+  let colorPicker = colorPickerContext.get();
+
+  let mergedProps = $derived(
+    mergeProps(props, colorPicker.getPositionerProps()),
+  );
+</script>
+
+<div {...mergedProps}>
+  {@render children?.()}
+</div>

package/dist/color-picker/root.svelte

@@ -1,75 +1,75 @@
-<script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
-  import type {Snippet} from 'svelte';
-  import type {
-    CreateColorPickerProps,
-    CreateColorPickerReturn,
-  } from './create-color-picker.svelte.js';
-
-  export interface ColorPickerProps
-    extends Assign<Omit<HtmlProps<'div'>, 'children'>, CreateColorPickerProps> {
-    children?: Snippet<[colorPicker: CreateColorPickerReturn]>;
-  }
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {colorPickerContext} from './context.svelte.js';
-  import {createColorPicker} from './create-color-picker.svelte.js';
-
-  let {
-    id,
-    ids,
-    open,
-    name,
-    value,
-    format,
-    disabled,
-    required,
-    readOnly,
-    defaultOpen,
-    positioning,
-    onOpenChange,
-    closeOnSelect,
-    initialFocusEl,
-    onValueChange,
-    onValueChangeEnd,
-    onFocusOutside,
-    onFormatChange,
-    onInteractOutside,
-    onPointerDownOutside,
-    children,
-    ...props
-  }: ColorPickerProps = $props();
-
-  let colorPicker = createColorPicker({
-    id,
-    ids,
-    open,
-    name,
-    value,
-    format,
-    disabled,
-    required,
-    readOnly,
-    defaultOpen,
-    positioning,
-    onOpenChange,
-    closeOnSelect,
-    initialFocusEl,
-    onValueChange,
-    onValueChangeEnd,
-    onFocusOutside,
-    onFormatChange,
-    onInteractOutside,
-    onPointerDownOutside,
-  });
-
-  let attrs = $derived(mergeProps(props, colorPicker.getRootProps()));
-
-  colorPickerContext.set(colorPicker);
-</script>
-
-<div {...attrs}>
-  {@render children?.(colorPicker)}
-</div>
+<script lang="ts" module>
+  import type {Assign, HTMLProps} from '../types.js';
+  import type {Snippet} from 'svelte';
+  import type {
+    CreateColorPickerProps,
+    CreateColorPickerReturn,
+  } from './create-color-picker.svelte.js';
+
+  export interface ColorPickerProps
+    extends Assign<Omit<HTMLProps<'div'>, 'children'>, CreateColorPickerProps> {
+    children?: Snippet<[colorPicker: CreateColorPickerReturn]>;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {colorPickerContext} from './context.svelte.js';
+  import {createColorPicker} from './create-color-picker.svelte.js';
+
+  let {
+    id,
+    ids,
+    open,
+    name,
+    value,
+    format,
+    disabled,
+    required,
+    readOnly,
+    defaultOpen,
+    positioning,
+    onOpenChange,
+    closeOnSelect,
+    initialFocusEl,
+    onValueChange,
+    onValueChangeEnd,
+    onFocusOutside,
+    onFormatChange,
+    onInteractOutside,
+    onPointerDownOutside,
+    children,
+    ...props
+  }: ColorPickerProps = $props();
+
+  let colorPicker = createColorPicker({
+    id,
+    ids,
+    open,
+    name,
+    value,
+    format,
+    disabled,
+    required,
+    readOnly,
+    defaultOpen,
+    positioning,
+    onOpenChange,
+    closeOnSelect,
+    initialFocusEl,
+    onValueChange,
+    onValueChangeEnd,
+    onFocusOutside,
+    onFormatChange,
+    onInteractOutside,
+    onPointerDownOutside,
+  });
+
+  let mergedProps = $derived(mergeProps(props, colorPicker.getRootProps()));
+
+  colorPickerContext.set(colorPicker);
+</script>
+
+<div {...mergedProps}>
+  {@render children?.(colorPicker)}
+</div>

package/dist/color-picker/swatch-group.svelte

@@ -1,20 +1,22 @@
-<script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
-
-  export interface ColorPickerSwatchGroupProps extends HtmlProps<'div'> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {colorPickerContext} from './context.svelte.js';
-
-  let {children, ...props}: ColorPickerSwatchGroupProps = $props();
-
-  let colorPicker = colorPickerContext.get();
-
-  let attrs = $derived(mergeProps(props, colorPicker.getSwatchGroupProps()));
-</script>
-
-<div {...attrs}>
-  {@render children?.()}
-</div>
+<script lang="ts" module>
+  import type {HTMLProps} from '../types.js';
+
+  export interface ColorPickerSwatchGroupProps extends HTMLProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {colorPickerContext} from './context.svelte.js';
+
+  let {children, ...props}: ColorPickerSwatchGroupProps = $props();
+
+  let colorPicker = colorPickerContext.get();
+
+  let mergedProps = $derived(
+    mergeProps(props, colorPicker.getSwatchGroupProps()),
+  );
+</script>
+
+<div {...mergedProps}>
+  {@render children?.()}
+</div>

package/dist/color-picker/swatch-indicator.svelte

@@ -1,21 +1,26 @@
-<script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
-
-  export interface ColorPickerSwatchIndicatorProps extends HtmlProps<'div'> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {colorPickerContext, colorPickerSwatchPropsContext} from './context.svelte.js';
-
-  let {children, ...props}: ColorPickerSwatchIndicatorProps = $props();
-
-  let colorPicker = colorPickerContext.get();
-  let swatchProps = colorPickerSwatchPropsContext.get();
-
-  let attrs = $derived(mergeProps(props, colorPicker.getSwatchIndicatorProps(swatchProps)));
-</script>
-
-<div {...attrs}>
-  {@render children?.()}
-</div>
+<script lang="ts" module>
+  import type {HTMLProps} from '../types.js';
+
+  export interface ColorPickerSwatchIndicatorProps extends HTMLProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {
+    colorPickerContext,
+    colorPickerSwatchPropsContext,
+  } from './context.svelte.js';
+
+  let {children, ...props}: ColorPickerSwatchIndicatorProps = $props();
+
+  let colorPicker = colorPickerContext.get();
+  let swatchProps = colorPickerSwatchPropsContext.get();
+
+  let mergedProps = $derived(
+    mergeProps(props, colorPicker.getSwatchIndicatorProps(swatchProps)),
+  );
+</script>
+
+<div {...mergedProps}>
+  {@render children?.()}
+</div>

package/dist/color-picker/swatch-trigger.svelte

@@ -1,31 +1,34 @@
-<script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
-  import type {SwatchTriggerProps} from '@zag-js/color-picker';
-
-  export interface ColorPickerSwatchTriggerProps
-    extends Assign<HtmlProps<'button'>, Pick<SwatchTriggerProps, 'disabled'>> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {colorPickerContext, colorPickerSwatchPropsContext} from './context.svelte.js';
-
-  let {disabled, children, ...props}: ColorPickerSwatchTriggerProps = $props();
-
-  let colorPicker = colorPickerContext.get();
-  let swatchProps = colorPickerSwatchPropsContext.get();
-
-  let attrs = $derived(
-    mergeProps(
-      props,
-      colorPicker.getSwatchTriggerProps({
-        value: swatchProps.value,
-        disabled,
-      }),
-    ),
-  );
-</script>
-
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+<script lang="ts" module>
+  import type {Assign, HTMLProps} from '../types.js';
+  import type {SwatchTriggerProps} from '@zag-js/color-picker';
+
+  export interface ColorPickerSwatchTriggerProps
+    extends Assign<HTMLProps<'button'>, Pick<SwatchTriggerProps, 'disabled'>> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {
+    colorPickerContext,
+    colorPickerSwatchPropsContext,
+  } from './context.svelte.js';
+
+  let {disabled, children, ...props}: ColorPickerSwatchTriggerProps = $props();
+
+  let colorPicker = colorPickerContext.get();
+  let swatchProps = colorPickerSwatchPropsContext.get();
+
+  let mergedProps = $derived(
+    mergeProps(
+      props,
+      colorPicker.getSwatchTriggerProps({
+        value: swatchProps.value,
+        disabled,
+      }),
+    ),
+  );
+</script>
+
+<button type="button" {...mergedProps}>
+  {@render children?.()}
+</button>

package/dist/color-picker/swatch.svelte

@@ -1,27 +1,34 @@
-<script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
-  import type {SwatchProps} from '@zag-js/color-picker';
-
-  export interface ColorPickerSwatchProps extends Assign<HtmlProps<'div'>, SwatchProps> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {colorPickerContext, colorPickerSwatchPropsContext} from './context.svelte.js';
-
-  let {value, respectAlpha, children, ...props}: ColorPickerSwatchProps = $props();
-
-  let colorPicker = colorPickerContext.get();
-  let swatchProps: SwatchProps = $derived({
-    value,
-    respectAlpha,
-  });
-
-  let attrs = $derived(mergeProps(props, colorPicker.getSwatchProps(swatchProps)));
-
-  colorPickerSwatchPropsContext.set(() => swatchProps);
-</script>
-
-<div {...attrs}>
-  {@render children?.()}
-</div>
+<script lang="ts" module>
+  import type {Assign, HTMLProps} from '../types.js';
+  import type {SwatchProps} from '@zag-js/color-picker';
+
+  export interface ColorPickerSwatchProps
+    extends Assign<HTMLProps<'div'>, SwatchProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {
+    colorPickerContext,
+    colorPickerSwatchPropsContext,
+  } from './context.svelte.js';
+
+  let {value, respectAlpha, children, ...props}: ColorPickerSwatchProps =
+    $props();
+
+  let colorPicker = colorPickerContext.get();
+  let swatchProps: SwatchProps = $derived({
+    value,
+    respectAlpha,
+  });
+
+  let mergedProps = $derived(
+    mergeProps(props, colorPicker.getSwatchProps(swatchProps)),
+  );
+
+  colorPickerSwatchPropsContext.set(() => swatchProps);
+</script>
+
+<div {...mergedProps}>
+  {@render children?.()}
+</div>

package/dist/color-picker/transparency-grid.svelte

@@ -1,29 +1,29 @@
-<script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
-  import type {TransparencyGridProps} from '@zag-js/color-picker';
-
-  export interface ColorPickerTransparencyGridProps
-    extends Assign<HtmlProps<'div'>, TransparencyGridProps> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {colorPickerContext} from './context.svelte.js';
-
-  let {size, children, ...props}: ColorPickerTransparencyGridProps = $props();
-
-  let colorPicker = colorPickerContext.get();
-
-  let attrs = $derived(
-    mergeProps(
-      props,
-      colorPicker.getTransparencyGridProps({
-        size,
-      }),
-    ),
-  );
-</script>
-
-<div {...attrs}>
-  {@render children?.()}
-</div>
+<script lang="ts" module>
+  import type {Assign, HTMLProps} from '../types.js';
+  import type {TransparencyGridProps} from '@zag-js/color-picker';
+
+  export interface ColorPickerTransparencyGridProps
+    extends Assign<HTMLProps<'div'>, TransparencyGridProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {colorPickerContext} from './context.svelte.js';
+
+  let {size, children, ...props}: ColorPickerTransparencyGridProps = $props();
+
+  let colorPicker = colorPickerContext.get();
+
+  let mergedProps = $derived(
+    mergeProps(
+      props,
+      colorPicker.getTransparencyGridProps({
+        size,
+      }),
+    ),
+  );
+</script>
+
+<div {...mergedProps}>
+  {@render children?.()}
+</div>

package/dist/color-picker/trigger.svelte

@@ -1,20 +1,20 @@
-<script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
-
-  export interface ColorPickerTriggerProps extends HtmlProps<'button'> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {colorPickerContext} from './context.svelte.js';
-
-  let {children, ...props}: ColorPickerTriggerProps = $props();
-
-  let colorPicker = colorPickerContext.get();
-
-  let attrs = $derived(mergeProps(props, colorPicker.getTriggerProps()));
-</script>
-
-<button type="button" {...attrs}>
-  {@render children?.()}
-</button>
+<script lang="ts" module>
+  import type {HTMLProps} from '../types.js';
+
+  export interface ColorPickerTriggerProps extends HTMLProps<'button'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {colorPickerContext} from './context.svelte.js';
+
+  let {children, ...props}: ColorPickerTriggerProps = $props();
+
+  let colorPicker = colorPickerContext.get();
+
+  let mergedProps = $derived(mergeProps(props, colorPicker.getTriggerProps()));
+</script>
+
+<button type="button" {...mergedProps}>
+  {@render children?.()}
+</button>

package/dist/color-picker/value-text.svelte

@@ -1,24 +1,26 @@
-<script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
-
-  export interface ColorPickerValueTextProps extends HtmlProps<'div'> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {colorPickerContext} from './context.svelte.js';
-
-  let {children, ...props}: ColorPickerValueTextProps = $props();
-
-  let colorPicker = colorPickerContext.get();
-
-  let attrs = $derived(mergeProps(props, colorPicker.getValueTextProps()));
-</script>
-
-<div {...attrs}>
-  {#if children}
-    {@render children()}
-  {:else}
-    {colorPicker.valueAsString}
-  {/if}
-</div>
+<script lang="ts" module>
+  import type {HTMLProps} from '../types.js';
+
+  export interface ColorPickerValueTextProps extends HTMLProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {colorPickerContext} from './context.svelte.js';
+
+  let {children, ...props}: ColorPickerValueTextProps = $props();
+
+  let colorPicker = colorPickerContext.get();
+
+  let mergedProps = $derived(
+    mergeProps(props, colorPicker.getValueTextProps()),
+  );
+</script>
+
+<div {...mergedProps}>
+  {#if children}
+    {@render children()}
+  {:else}
+    {colorPicker.valueAsString}
+  {/if}
+</div>

package/dist/combobox/clear-trigger.svelte

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