ui-ingredients 0.0.25 → 0.0.27

package/dist/color-picker/area.svelte

@@ -0,0 +1,27 @@
+<script lang="ts" module>
+  import type {Assign, HtmlProps} from '../types.js';
+  import type {AreaProps} from '@zag-js/color-picker';
+
+  export interface ColorPickerAreaProps extends Assign<HtmlProps<'div'>, AreaProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../utils.svelte.js';
+  import {colorPickerAreaPropsContext, colorPickerContext} from './context.svelte.js';
+
+  let {xChannel, yChannel, children, ...props}: ColorPickerAreaProps = $props();
+
+  let colorPicker = colorPickerContext.get();
+  let areaProps: AreaProps = $derived({
+    xChannel,
+    yChannel,
+  });
+
+  let attrs = $derived(mergeProps(props, colorPicker.getAreaProps(areaProps)));
+
+  colorPickerAreaPropsContext.set(() => areaProps);
+</script>
+
+<div {...attrs}>
+  {@render children?.()}
+</div>

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Area: $$__sveltets_2_IsomorphicComponent<ColorPickerAreaProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Area = InstanceType<typeof Area>;
+export default Area;

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

@@ -0,0 +1,28 @@
+<script lang="ts" module>
+  import type {Assign, HtmlProps} from '../types.js';
+  import type {ChannelInputProps} from '@zag-js/color-picker';
+
+  export interface ColorPickerChannelInputProps
+    extends Assign<HtmlProps<'input'>, ChannelInputProps> {}
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../utils.svelte.js';
+  import {colorPickerContext} from './context.svelte.js';
+
+  let {channel, orientation, ...props}: ColorPickerChannelInputProps = $props();
+
+  let colorPicker = colorPickerContext.get();
+
+  let attrs = $derived(
+    mergeProps(
+      props,
+      colorPicker.getChannelInputProps({
+        channel,
+        orientation,
+      }),
+    ),
+  );
+</script>
+
+<input {...attrs} />

package/dist/color-picker/channel-input.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ChannelInput: $$__sveltets_2_IsomorphicComponent<ColorPickerChannelInputProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type ChannelInput = InstanceType<typeof ChannelInput>;
+export default ChannelInput;

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

@@ -0,0 +1,25 @@
+<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>

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ChannelSliderLabel: $$__sveltets_2_IsomorphicComponent<ColorPickerChannelSliderLabelProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type ChannelSliderLabel = InstanceType<typeof ChannelSliderLabel>;
+export default ChannelSliderLabel;

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

@@ -0,0 +1,23 @@
+<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>

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ChannelSliderThumb: $$__sveltets_2_IsomorphicComponent<ColorPickerChannelSliderThumbProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type ChannelSliderThumb = InstanceType<typeof ChannelSliderThumb>;
+export default ChannelSliderThumb;

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

@@ -0,0 +1,23 @@
+<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>

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ChannelSliderTrack: $$__sveltets_2_IsomorphicComponent<ColorPickerChannelSliderTrackProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type ChannelSliderTrack = InstanceType<typeof ChannelSliderTrack>;
+export default ChannelSliderTrack;

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

@@ -0,0 +1,29 @@
+<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>

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ChannelSliderValueText: $$__sveltets_2_IsomorphicComponent<ColorPickerChannelSliderValueTextProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type ChannelSliderValueText = InstanceType<typeof ChannelSliderValueText>;
+export default ChannelSliderValueText;

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

@@ -0,0 +1,29 @@
+<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>

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ChannelSlider: $$__sveltets_2_IsomorphicComponent<ColorPickerChannelSliderProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type ChannelSlider = InstanceType<typeof ChannelSlider>;
+export default ChannelSlider;

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

@@ -0,0 +1,26 @@
+export { anatomy, parse } from '@zag-js/color-picker';
+export { default as AreaBackground } from './area-background.svelte';
+export { default as AreaThumb } from './area-thumb.svelte';
+export { default as Area } from './area.svelte';
+export { default as ChannelInput } from './channel-input.svelte';
+export { default as ChannelSliderLabel } from './channel-slider-label.svelte';
+export { default as ChannelSliderThumb } from './channel-slider-thumb.svelte';
+export { default as ChannelSliderTrack } from './channel-slider-track.svelte';
+export { default as ChannelSliderValueText } from './channel-slider-value-text.svelte';
+export { default as ChannelSlider } from './channel-slider.svelte';
+export { default as Content } from './content.svelte';
+export { default as Control } from './control.svelte';
+export { default as EyeDropperTrigger } from './eye-dropper-trigger.svelte';
+export { default as FormatSelect } from './format-select.svelte';
+export { default as FormatTrigger } from './format-trigger.svelte';
+export { default as HiddenInput } from './hidden-input.svelte';
+export { default as Label } from './label.svelte';
+export { default as Positioner } from './positioner.svelte';
+export { default as Root } from './root.svelte';
+export { default as SwatchGroup } from './swatch-group.svelte';
+export { default as SwatchIndicator } from './swatch-indicator.svelte';
+export { default as SwatchTrigger } from './swatch-trigger.svelte';
+export { default as Swatch } from './swatch.svelte';
+export { default as TransparencyGrid } from './transparency-grid.svelte';
+export { default as Trigger } from './trigger.svelte';
+export { default as ValueText } from './value-text.svelte';

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

@@ -0,0 +1,26 @@
+export { anatomy, parse } from '@zag-js/color-picker';
+export { default as AreaBackground } from './area-background.svelte';
+export { default as AreaThumb } from './area-thumb.svelte';
+export { default as Area } from './area.svelte';
+export { default as ChannelInput } from './channel-input.svelte';
+export { default as ChannelSliderLabel } from './channel-slider-label.svelte';
+export { default as ChannelSliderThumb } from './channel-slider-thumb.svelte';
+export { default as ChannelSliderTrack } from './channel-slider-track.svelte';
+export { default as ChannelSliderValueText } from './channel-slider-value-text.svelte';
+export { default as ChannelSlider } from './channel-slider.svelte';
+export { default as Content } from './content.svelte';
+export { default as Control } from './control.svelte';
+export { default as EyeDropperTrigger } from './eye-dropper-trigger.svelte';
+export { default as FormatSelect } from './format-select.svelte';
+export { default as FormatTrigger } from './format-trigger.svelte';
+export { default as HiddenInput } from './hidden-input.svelte';
+export { default as Label } from './label.svelte';
+export { default as Positioner } from './positioner.svelte';
+export { default as Root } from './root.svelte';
+export { default as SwatchGroup } from './swatch-group.svelte';
+export { default as SwatchIndicator } from './swatch-indicator.svelte';
+export { default as SwatchTrigger } from './swatch-trigger.svelte';
+export { default as Swatch } from './swatch.svelte';
+export { default as TransparencyGrid } from './transparency-grid.svelte';
+export { default as Trigger } from './trigger.svelte';
+export { default as ValueText } from './value-text.svelte';

package/dist/color-picker/content.svelte

@@ -0,0 +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>

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Content: $$__sveltets_2_IsomorphicComponent<ColorPickerContentProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Content = InstanceType<typeof Content>;
+export default Content;

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

@@ -0,0 +1,8 @@
+import { Context } from '../utils.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>;
+export declare const colorPickerAreaPropsContext: Context<AreaProps>;
+export declare const colorPickerSwatchPropsContext: Context<SwatchProps>;
+export declare const colorPickerChannelPropsContext: Context<ChannelProps>;
+export declare const colorPickerChannelSliderPropsContext: Context<ChannelSliderProps>;

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

@@ -0,0 +1,6 @@
+import { Context } from '../utils.svelte.js';
+export const colorPickerContext = new Context('ColorPicker');
+export const colorPickerAreaPropsContext = new Context('ColorPickerArea');
+export const colorPickerSwatchPropsContext = new Context('ColorPickerSwatch');
+export const colorPickerChannelPropsContext = new Context('ColorPickerChannel');
+export const colorPickerChannelSliderPropsContext = new Context('ColorPickerChannelSlider');

package/dist/color-picker/control.svelte

@@ -0,0 +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>

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Control: $$__sveltets_2_IsomorphicComponent<ColorPickerControlProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Control = InstanceType<typeof Control>;
+export default Control;

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

@@ -0,0 +1,9 @@
+import * as colorPicker from '@zag-js/color-picker';
+export interface CreateColorPickerProps extends Omit<colorPicker.Context, 'id' | 'dir' | 'value' | 'getRootNode' | 'open.controlled'> {
+    id?: string | null;
+    value?: string;
+    defaultOpen?: boolean;
+}
+export interface CreateColorPickerReturn extends colorPicker.Api {
+}
+export declare function createColorPicker(props: CreateColorPickerProps): CreateColorPickerReturn;

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

@@ -0,0 +1,20 @@
+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) {
+    const locale = getLocaleContext();
+    const environment = getEnvironmentContext();
+    const [state, send] = useMachine(colorPicker.machine({
+        ...props,
+        id: props.id ?? createUniqueId(),
+        dir: locale?.dir,
+        open: props.defaultOpen,
+        value: props.value ? colorPicker.parse(props.value) : undefined,
+        getRootNode: environment?.getRootNode,
+        'open.controlled': props.open != null,
+    }));
+    const api = $derived(reflect(() => colorPicker.connect(state, send, normalizeProps)));
+    return api;
+}

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

@@ -0,0 +1,20 @@
+<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>

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const EyeDropperTrigger: $$__sveltets_2_IsomorphicComponent<ColorPickerEyeDropperTriggerProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type EyeDropperTrigger = InstanceType<typeof EyeDropperTrigger>;
+export default EyeDropperTrigger;

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

@@ -0,0 +1,28 @@
+<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>

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const FormatSelect: $$__sveltets_2_IsomorphicComponent<ColorPickerFormatSelectProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type FormatSelect = InstanceType<typeof FormatSelect>;
+export default FormatSelect;

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

@@ -0,0 +1,20 @@
+<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>

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const FormatTrigger: $$__sveltets_2_IsomorphicComponent<ColorPickerFormatTriggerProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type FormatTrigger = InstanceType<typeof FormatTrigger>;
+export default FormatTrigger;