ui-ingredients 0.0.28 → 0.0.29

package/dist/color-picker/channel-slider-label.svelte

@@ -1,25 +1,36 @@
-<script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
-  import type {ChannelProps} from '@zag-js/color-picker';
-
-  export interface ColorPickerChannelSliderLabelProps
-    extends Assign<HtmlProps<'div'>, ChannelProps> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {colorPickerChannelSliderPropsContext, colorPickerContext} from './context.svelte.js';
-
-  let {channel, orientation, children, ...props}: ColorPickerChannelSliderLabelProps = $props();
-
-  let colorPicker = colorPickerContext.get();
-  let channelSliderProps = colorPickerChannelSliderPropsContext.get();
-
-  let attrs = $derived(
-    mergeProps(props, colorPicker.getChannelSliderLabelProps(channelSliderProps)),
-  );
-</script>
-
-<div {...attrs}>
-  {@render children?.()}
-</div>
+<script lang="ts" module>
+  import type {Assign, HTMLProps} from '../types.js';
+  import type {ChannelProps} from '@zag-js/color-picker';
+
+  export interface ColorPickerChannelSliderLabelProps
+    extends Assign<HTMLProps<'div'>, ChannelProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {
+    colorPickerChannelSliderPropsContext,
+    colorPickerContext,
+  } from './context.svelte.js';
+
+  let {
+    channel,
+    orientation,
+    children,
+    ...props
+  }: ColorPickerChannelSliderLabelProps = $props();
+
+  let colorPicker = colorPickerContext.get();
+  let channelSliderProps = colorPickerChannelSliderPropsContext.get();
+
+  let mergedProps = $derived(
+    mergeProps(
+      props,
+      colorPicker.getChannelSliderLabelProps(channelSliderProps),
+    ),
+  );
+</script>
+
+<div {...mergedProps}>
+  {@render children?.()}
+</div>

package/dist/color-picker/channel-slider-thumb.svelte

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

package/dist/color-picker/channel-slider-track.svelte

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

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

@@ -1,29 +1,36 @@
-<script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
-
-  export interface ColorPickerChannelSliderValueTextProps extends HtmlProps<'div'> {}
-</script>
-
-<script lang="ts">
-  import {localeContext} from '../locale-provider/context.svelte.js';
-  import {mergeProps} from '../utils.svelte.js';
-  import {colorPickerChannelSliderPropsContext, colorPickerContext} from './context.svelte.js';
-
-  let {children, ...props}: ColorPickerChannelSliderValueTextProps = $props();
-
-  let locale = localeContext.get();
-  let colorPicker = colorPickerContext.get();
-  let channelSliderProps = colorPickerChannelSliderPropsContext.get();
-
-  let attrs = $derived(
-    mergeProps(props, colorPicker.getChannelSliderValueTextProps(channelSliderProps)),
-  );
-</script>
-
-<div {...attrs}>
-  {#if children}
-    {@render children()}
-  {:else}
-    {colorPicker.getChannelValueText(channelSliderProps.channel, locale.locale)}
-  {/if}
-</div>
+<script lang="ts" module>
+  import type {HTMLProps} from '../types.js';
+
+  export interface ColorPickerChannelSliderValueTextProps
+    extends HTMLProps<'div'> {}
+</script>
+
+<script lang="ts">
+  import {localeContext} from '../locale-provider/context.svelte.js';
+  import {mergeProps} from '../merge-props.js';
+  import {
+    colorPickerChannelSliderPropsContext,
+    colorPickerContext,
+  } from './context.svelte.js';
+
+  let {children, ...props}: ColorPickerChannelSliderValueTextProps = $props();
+
+  let locale = localeContext.get();
+  let colorPicker = colorPickerContext.get();
+  let channelSliderProps = colorPickerChannelSliderPropsContext.get();
+
+  let mergedProps = $derived(
+    mergeProps(
+      props,
+      colorPicker.getChannelSliderValueTextProps(channelSliderProps),
+    ),
+  );
+</script>
+
+<div {...mergedProps}>
+  {#if children}
+    {@render children()}
+  {:else}
+    {colorPicker.getChannelValueText(channelSliderProps.channel, locale.locale)}
+  {/if}
+</div>

package/dist/color-picker/channel-slider.svelte

@@ -1,29 +1,40 @@
-<script lang="ts" module>
-  import type {Assign, HtmlProps} from '../types.js';
-  import type {ChannelSliderProps} from '@zag-js/color-picker';
-
-  export interface ColorPickerChannelSliderProps
-    extends Assign<HtmlProps<'div'>, ChannelSliderProps> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {colorPickerChannelSliderPropsContext, colorPickerContext} from './context.svelte.js';
-
-  let {format, channel, orientation, children, ...props}: ColorPickerChannelSliderProps = $props();
-
-  let colorPicker = colorPickerContext.get();
-  let channelSliderProps: ChannelSliderProps = $derived({
-    format,
-    channel,
-    orientation,
-  });
-
-  let attrs = $derived(mergeProps(props, colorPicker.getChannelSliderProps(channelSliderProps)));
-
-  colorPickerChannelSliderPropsContext.set(() => channelSliderProps);
-</script>
-
-<div {...attrs}>
-  {@render children?.()}
-</div>
+<script lang="ts" module>
+  import type {Assign, HTMLProps} from '../types.js';
+  import type {ChannelSliderProps} from '@zag-js/color-picker';
+
+  export interface ColorPickerChannelSliderProps
+    extends Assign<HTMLProps<'div'>, ChannelSliderProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {
+    colorPickerChannelSliderPropsContext,
+    colorPickerContext,
+  } from './context.svelte.js';
+
+  let {
+    format,
+    channel,
+    orientation,
+    children,
+    ...props
+  }: ColorPickerChannelSliderProps = $props();
+
+  let colorPicker = colorPickerContext.get();
+  let channelSliderProps: ChannelSliderProps = $derived({
+    format,
+    channel,
+    orientation,
+  });
+
+  let mergedProps = $derived(
+    mergeProps(props, colorPicker.getChannelSliderProps(channelSliderProps)),
+  );
+
+  colorPickerChannelSliderPropsContext.set(() => channelSliderProps);
+</script>
+
+<div {...mergedProps}>
+  {@render children?.()}
+</div>

package/dist/color-picker/content.svelte

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

package/dist/color-picker/context.svelte.d.ts

@@ -1,4 +1,4 @@
-import { Context } from '../utils.svelte.js';
+import { Context } from '../context.svelte.js';
 import type { AreaProps, ChannelProps, ChannelSliderProps, SwatchProps } from '@zag-js/color-picker';
 import type { CreateColorPickerReturn } from './create-color-picker.svelte.js';
 export declare const colorPickerContext: Context<CreateColorPickerReturn>;

package/dist/color-picker/context.svelte.js

@@ -1,4 +1,4 @@
-import { Context } from '../utils.svelte.js';
+import { Context } from '../context.svelte.js';
 export const colorPickerContext = new Context('ColorPicker');
 export const colorPickerAreaPropsContext = new Context('ColorPickerArea');
 export const colorPickerSwatchPropsContext = new Context('ColorPickerSwatch');

package/dist/color-picker/control.svelte

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

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

package/dist/color-picker/eye-dropper-trigger.svelte

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

package/dist/color-picker/format-select.svelte

@@ -1,28 +1,30 @@
-<script lang="ts" module>
-  import type {HtmlProps} from '../types.js';
-
-  export interface ColorPickerFormatSelectProps extends HtmlProps<'select'> {}
-</script>
-
-<script lang="ts">
-  import {mergeProps} from '../utils.svelte.js';
-  import {colorPickerContext} from './context.svelte.js';
-
-  let {children, ...props}: ColorPickerFormatSelectProps = $props();
-
-  let colorPicker = colorPickerContext.get();
-
-  let attrs = $derived(mergeProps(props, colorPicker.getFormatSelectProps()));
-
-  let formats = ['rgba', 'hsla', 'hsba'];
-</script>
-
-<select {...attrs}>
-  {#if children}
-    {@render children()}
-  {:else}
-    {#each formats as format}
-      <option value={format}>{format}</option>
-    {/each}
-  {/if}
-</select>
+<script lang="ts" module>
+  import type {HTMLProps} from '../types.js';
+
+  export interface ColorPickerFormatSelectProps extends HTMLProps<'select'> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {colorPickerContext} from './context.svelte.js';
+
+  let {children, ...props}: ColorPickerFormatSelectProps = $props();
+
+  let colorPicker = colorPickerContext.get();
+
+  let mergedProps = $derived(
+    mergeProps(props, colorPicker.getFormatSelectProps()),
+  );
+
+  let formats = ['rgba', 'hsla', 'hsba'];
+</script>
+
+<select {...mergedProps}>
+  {#if children}
+    {@render children()}
+  {:else}
+    {#each formats as format}
+      <option value={format}>{format}</option>
+    {/each}
+  {/if}
+</select>

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

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

package/dist/color-picker/hidden-input.svelte

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

package/dist/color-picker/label.svelte

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