ui-ingredients 0.0.53 → 0.0.54

package/dist/accordion/accordion-root.svelte

@@ -30,7 +30,7 @@
     ),
   );
 
-  let [accordionProps, localProps] = $derived(
+  let [createAccordionProps, localProps] = $derived(
     createSplitProps<CreateAccordionProps>([
       'id',
       'ids',
@@ -44,7 +44,7 @@
     ])(rest),
   );
 
-  let accordion = createAccordion(reflect(() => accordionProps));
+  let accordion = createAccordion(reflect(() => createAccordionProps));
 
   let mergedProps = $derived(mergeProps(localProps, accordion.getRootProps()));
 

package/dist/avatar/avatar-root.svelte

@@ -21,11 +21,11 @@
 
   let {this: e, asChild, children, ...props}: AvatarProps = $props();
 
-  let [avatarProps, localProps] = $derived(
+  let [createAvatarProps, localProps] = $derived(
     createSplitProps<CreateAvatarProps>(['id', 'ids', 'onStatusChange'])(props),
   );
 
-  let avatar = createAvatar(reflect(() => avatarProps));
+  let avatar = createAvatar(reflect(() => createAvatarProps));
 
   let mergedProps = $derived(mergeProps(localProps, avatar.getRootProps()));
 

package/dist/carousel/carousel-root.svelte

@@ -21,7 +21,7 @@
 
   let {this: e, asChild, children, ...props}: CarouselProps = $props();
 
-  let [carouselProps, localProps] = $derived(
+  let [createCarouselProps, localProps] = $derived(
     createSplitProps<CreateCarouselProps>([
       'id',
       'ids',
@@ -35,7 +35,7 @@
     ])(props),
   );
 
-  let carousel = createCarousel(reflect(() => carouselProps));
+  let carousel = createCarousel(reflect(() => createCarouselProps));
 
   let mergedProps = $derived(mergeProps(localProps, carousel.getRootProps()));
 

package/dist/checkbox/checkbox-root.svelte

@@ -22,7 +22,7 @@
 
   let {this: e, asChild, children, ...props}: CheckboxProps = $props();
 
-  let [checkboxProps, localProps] = $derived(
+  let [createCheckboxProps, localProps] = $derived(
     createSplitProps<CreateCheckboxProps>([
       'id',
       'ids',
@@ -38,7 +38,7 @@
     ])(props),
   );
 
-  let checkbox = createCheckbox(reflect(() => checkboxProps));
+  let checkbox = createCheckbox(reflect(() => createCheckboxProps));
 
   let mergedProps = $derived(mergeProps(localProps, checkbox.getRootProps()));
 

package/dist/clipboard/clipboard-root.svelte

@@ -21,7 +21,7 @@
 
   let {this: e, asChild, children, ...props}: ClipboardProps = $props();
 
-  let [clipboardProps, localProps] = $derived(
+  let [createClipboardProps, localProps] = $derived(
     createSplitProps<CreateClipboardProps>([
       'id',
       'ids',
@@ -31,7 +31,7 @@
     ])(props),
   );
 
-  let clipboard = createClipboard(reflect(() => clipboardProps));
+  let clipboard = createClipboard(reflect(() => createClipboardProps));
 
   let mergedProps = $derived(mergeProps(localProps, clipboard.getRootProps()));
 

package/dist/collapsible/collapsible-root.svelte

@@ -21,7 +21,7 @@
 
   let {this: e, asChild, children, ...props}: CollapsibleProps = $props();
 
-  let [collapsibleProps, localProps] = $derived(
+  let [createCollapsibleProps, localProps] = $derived(
     createSplitProps<CreateCollapsibleProps>([
       'id',
       'ids',
@@ -33,7 +33,7 @@
     ])(props),
   );
 
-  let collapsible = createCollapsible(reflect(() => collapsibleProps));
+  let collapsible = createCollapsible(reflect(() => createCollapsibleProps));
 
   let mergedProps = $derived(
     mergeProps(localProps, collapsible.getRootProps()),

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

@@ -0,0 +1,2 @@
+export declare const anatomy: import("@zag-js/anatomy").AnatomyInstance<"area" | "label" | "view" | "root" | "control" | "content" | "trigger" | "positioner" | "areaThumb" | "valueText" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect">;
+export declare const parts: Record<"area" | "label" | "view" | "root" | "control" | "content" | "trigger" | "positioner" | "areaThumb" | "valueText" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect", import("@zag-js/anatomy").AnatomyPart>;

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

@@ -0,0 +1,3 @@
+import { anatomy as _ } from '@zag-js/color-picker';
+export const anatomy = _.extendWith('view');
+export const parts = anatomy.build();

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

@@ -9,7 +9,7 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {
-    getColorPickerChannelSliderPropsContext,
+    getColorPickerChannelPropsContext,
     getColorPickerContext,
   } from './color-picker-context.svelte.js';
 
@@ -23,13 +23,10 @@
   }: ColorPickerChannelSliderLabelProps = $props();
 
   let colorPicker = getColorPickerContext();
-  let channelSliderProps = getColorPickerChannelSliderPropsContext();
+  let channelProps = getColorPickerChannelPropsContext();
 
   let mergedProps = $derived(
-    mergeProps(
-      props,
-      colorPicker.getChannelSliderLabelProps(channelSliderProps),
-    ),
+    mergeProps(props, colorPicker.getChannelSliderLabelProps(channelProps)),
   );
 </script>
 

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

@@ -8,8 +8,9 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {
-    getColorPickerChannelSliderPropsContext,
+    getColorPickerChannelPropsContext,
     getColorPickerContext,
+    getColorPickerFormatPropsContext,
   } from './color-picker-context.svelte.js';
 
   let {
@@ -20,7 +21,12 @@
   }: ColorPickerChannelSliderThumbProps = $props();
 
   let colorPicker = getColorPickerContext();
-  let channelSliderProps = getColorPickerChannelSliderPropsContext();
+  let formatProps = getColorPickerFormatPropsContext();
+  let channelProps = getColorPickerChannelPropsContext();
+  let channelSliderProps = $derived({
+    ...formatProps,
+    ...channelProps,
+  });
 
   let mergedProps = $derived(
     mergeProps(

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

@@ -8,8 +8,9 @@
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {
-    getColorPickerChannelSliderPropsContext,
+    getColorPickerChannelPropsContext,
     getColorPickerContext,
+    getColorPickerFormatPropsContext,
   } from './color-picker-context.svelte.js';
 
   let {
@@ -20,7 +21,12 @@
   }: ColorPickerChannelSliderTrackProps = $props();
 
   let colorPicker = getColorPickerContext();
-  let channelSliderProps = getColorPickerChannelSliderPropsContext();
+  let formatProps = getColorPickerFormatPropsContext();
+  let channelProps = getColorPickerChannelPropsContext();
+  let channelSliderProps = $derived({
+    ...formatProps,
+    ...channelProps,
+  });
 
   let mergedProps = $derived(
     mergeProps(

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

@@ -9,7 +9,7 @@
   import {getLocaleContext} from '../locale-provider/local-provider-context.svelte.js';
   import {mergeProps} from '../merge-props.js';
   import {
-    getColorPickerChannelSliderPropsContext,
+    getColorPickerChannelPropsContext,
     getColorPickerContext,
   } from './color-picker-context.svelte.js';
 
@@ -22,13 +22,10 @@
 
   let locale = getLocaleContext();
   let colorPicker = getColorPickerContext();
-  let channelSliderProps = getColorPickerChannelSliderPropsContext();
+  let channelProps = getColorPickerChannelPropsContext();
 
   let mergedProps = $derived(
-    mergeProps(
-      props,
-      colorPicker.getChannelSliderValueTextProps(channelSliderProps),
-    ),
+    mergeProps(props, colorPicker.getChannelSliderValueTextProps(channelProps)),
   );
 </script>
 
@@ -39,10 +36,7 @@
     {#if children}
       {@render children()}
     {:else}
-      {colorPicker.getChannelValueText(
-        channelSliderProps.channel,
-        locale.locale,
-      )}
+      {colorPicker.getChannelValueText(channelProps.channel, locale.locale)}
     {/if}
   </div>
 {/if}

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

@@ -1,24 +1,21 @@
 <script lang="ts" module>
   import type {Assign, HtmlIngredientProps} from '../types.js';
-  import type {ChannelSliderProps} from '@zag-js/color-picker';
+  import type {ChannelProps} from '@zag-js/color-picker';
 
   export interface ColorPickerChannelSliderProps
-    extends Assign<
-      HtmlIngredientProps<'div', HTMLDivElement>,
-      ChannelSliderProps
-    > {}
+    extends Assign<HtmlIngredientProps<'div', HTMLDivElement>, ChannelProps> {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
   import {
     getColorPickerContext,
-    setColorPickerChannelSliderPropsContext,
+    getColorPickerFormatPropsContext,
+    setColorPickerChannelPropsContext,
   } from './color-picker-context.svelte.js';
 
   let {
     this: e,
-    format,
     channel,
     orientation,
     asChild,
@@ -27,17 +24,22 @@
   }: ColorPickerChannelSliderProps = $props();
 
   let colorPicker = getColorPickerContext();
-  let channelSliderProps: ChannelSliderProps = $derived({
-    format,
+  let formatProps = getColorPickerFormatPropsContext();
+  let channelProps = $derived({
     channel,
     orientation,
   });
 
+  let channelSliderProps = $derived({
+    ...formatProps,
+    ...channelProps,
+  });
+
   let mergedProps = $derived(
     mergeProps(props, colorPicker.getChannelSliderProps(channelSliderProps)),
   );
 
-  setColorPickerChannelSliderPropsContext(() => channelSliderProps);
+  setColorPickerChannelPropsContext(() => channelProps);
 </script>
 
 {#if asChild}

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

@@ -1,6 +1,6 @@
 import type { Assign, HtmlIngredientProps } from '../types.js';
-import type { ChannelSliderProps } from '@zag-js/color-picker';
-export interface ColorPickerChannelSliderProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement>, ChannelSliderProps> {
+import type { ChannelProps } from '@zag-js/color-picker';
+export interface ColorPickerChannelSliderProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement>, ChannelProps> {
 }
 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> & {

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

@@ -30,10 +30,12 @@
   );
 </script>
 
-{#if asChild}
-  {@render asChild(presence.ref, mergedProps)}
-{:else}
-  <div bind:this={e} {...mergedProps}>
-    {@render children?.()}
-  </div>
+{#if presence.mounted}
+  {#if asChild}
+    {@render asChild(presence.ref, mergedProps)}
+  {:else}
+    <div bind:this={e} use:presence.ref {...mergedProps}>
+      {@render children?.()}
+    </div>
+  {/if}
 {/if}

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

@@ -1,7 +1,15 @@
-import type { AreaProps, ChannelProps, ChannelSliderProps, SwatchProps } from '@zag-js/color-picker';
+import type { AreaProps, ChannelProps, ColorFormat, SwatchProps } from '@zag-js/color-picker';
 import type { CreateColorPickerReturn } from './create-color-picker.svelte.js';
 export declare const getColorPickerContext: () => CreateColorPickerReturn, setColorPickerContext: (context: CreateColorPickerReturn | (() => CreateColorPickerReturn)) => CreateColorPickerReturn;
 export declare const getColorPickerAreaPropsContext: () => AreaProps, setColorPickerAreaPropsContext: (context: AreaProps | (() => AreaProps)) => AreaProps;
 export declare const getColorPickerSwatchPropsContext: () => SwatchProps, setColorPickerSwatchPropsContext: (context: SwatchProps | (() => SwatchProps)) => SwatchProps;
+export declare const getColorPickerFormatPropsContext: () => {
+    format: ColorFormat;
+}, setColorPickerFormatPropsContext: (context: {
+    format: ColorFormat;
+} | (() => {
+    format: ColorFormat;
+})) => {
+    format: ColorFormat;
+};
 export declare const getColorPickerChannelPropsContext: () => ChannelProps, setColorPickerChannelPropsContext: (context: ChannelProps | (() => ChannelProps)) => ChannelProps;
-export declare const getColorPickerChannelSliderPropsContext: () => ChannelSliderProps, setColorPickerChannelSliderPropsContext: (context: ChannelSliderProps | (() => ChannelSliderProps)) => ChannelSliderProps;

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

@@ -2,5 +2,5 @@ import { createContext } from '../create-context.svelte.js';
 export const [getColorPickerContext, setColorPickerContext] = createContext('ColorPicker');
 export const [getColorPickerAreaPropsContext, setColorPickerAreaPropsContext] = createContext('ColorPickerArea');
 export const [getColorPickerSwatchPropsContext, setColorPickerSwatchPropsContext,] = createContext('ColorPickerSwatch');
+export const [getColorPickerFormatPropsContext, setColorPickerFormatPropsContext,] = createContext('ColorPicker__format', false);
 export const [getColorPickerChannelPropsContext, setColorPickerChannelPropsContext,] = createContext('ColorPickerChannel');
-export const [getColorPickerChannelSliderPropsContext, setColorPickerChannelSliderPropsContext,] = createContext('ColorPickerChannelSlider');

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

@@ -21,8 +21,6 @@
   let mergedProps = $derived(
     mergeProps(props, colorPicker.getFormatSelectProps()),
   );
-
-  let formats = ['rgba', 'hsla', 'hsba'];
 </script>
 
 {#if asChild}
@@ -32,8 +30,10 @@
     {#if children}
       {@render children()}
     {:else}
-      {#each formats as format}
-        <option value={format}>{format}</option>
+      {#each colorPicker.getFormats() as format}
+        <option value={format.value}>
+          {format.label}
+        </option>
       {/each}
     {/if}
   </select>

package/dist/color-picker/color-picker-root.svelte

@@ -1,4 +1,5 @@
 <script lang="ts" module>
+  import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
   import type {Assign, HtmlIngredientProps} from '../types.js';
   import type {
     CreateColorPickerProps,
@@ -7,9 +8,10 @@
 
   export interface ColorPickerProps
     extends Assign<
-      HtmlIngredientProps<'div', HTMLDivElement, CreateColorPickerReturn>,
-      CreateColorPickerProps
-    > {}
+        HtmlIngredientProps<'div', HTMLDivElement, CreateColorPickerReturn>,
+        CreateColorPickerProps
+      >,
+      PresenceStrategyProps {}
 </script>
 
 <script lang="ts">
@@ -23,7 +25,13 @@
 
   let {this: e, asChild, children, ...props}: ColorPickerProps = $props();
 
-  let [colorPickerProps, localProps] = $derived(
+  let [presenceProps, etc] = $derived(
+    createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
+      props,
+    ),
+  );
+
+  let [createColorPickerProps, localProps] = $derived(
     createSplitProps<CreateColorPickerProps>([
       'id',
       'ids',
@@ -45,15 +53,17 @@
       'onFormatChange',
       'onInteractOutside',
       'onPointerDownOutside',
-    ])(props),
+    ])(etc),
   );
 
-  let colorPicker = createColorPicker(reflect(() => colorPickerProps));
-  let presence = createPresence({
-    get present() {
-      return colorPicker.open;
-    },
-  });
+  let colorPicker = createColorPicker(reflect(() => createColorPickerProps));
+
+  let presence = createPresence(
+    reflect(() => ({
+      present: colorPicker.open,
+      ...presenceProps,
+    })),
+  );
 
   let mergedProps = $derived(
     mergeProps(localProps, colorPicker.getRootProps()),

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

@@ -1,6 +1,7 @@
+import type { PresenceStrategyProps } from '../presence/create-presence.svelte.js';
 import type { Assign, HtmlIngredientProps } from '../types.js';
 import type { CreateColorPickerProps, CreateColorPickerReturn } from './create-color-picker.svelte.js';
-export interface ColorPickerProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateColorPickerReturn>, CreateColorPickerProps> {
+export interface ColorPickerProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateColorPickerReturn>, CreateColorPickerProps>, PresenceStrategyProps {
 }
 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> & {

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

@@ -5,19 +5,17 @@
   export interface ColorPickerSwatchTriggerProps
     extends Assign<
       HtmlIngredientProps<'button', HTMLButtonElement>,
-      Pick<SwatchTriggerProps, 'disabled'>
+      SwatchTriggerProps
     > {}
 </script>
 
 <script lang="ts">
   import {mergeProps} from '../merge-props.js';
-  import {
-    getColorPickerContext,
-    getColorPickerSwatchPropsContext,
-  } from './color-picker-context.svelte.js';
+  import {getColorPickerContext} from './color-picker-context.svelte.js';
 
   let {
     this: e,
+    value,
     disabled,
     asChild,
     children,
@@ -25,13 +23,12 @@
   }: ColorPickerSwatchTriggerProps = $props();
 
   let colorPicker = getColorPickerContext();
-  let swatchProps = getColorPickerSwatchPropsContext();
 
   let mergedProps = $derived(
     mergeProps(
       props,
       colorPicker.getSwatchTriggerProps({
-        value: swatchProps.value,
+        value,
         disabled,
       }),
     ),

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

@@ -1,6 +1,6 @@
 import type { Assign, HtmlIngredientProps } from '../types.js';
 import type { SwatchTriggerProps } from '@zag-js/color-picker';
-export interface ColorPickerSwatchTriggerProps extends Assign<HtmlIngredientProps<'button', HTMLButtonElement>, Pick<SwatchTriggerProps, 'disabled'>> {
+export interface ColorPickerSwatchTriggerProps extends Assign<HtmlIngredientProps<'button', HTMLButtonElement>, SwatchTriggerProps> {
 }
 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> & {

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

@@ -24,12 +24,7 @@
   let colorPicker = getColorPickerContext();
 
   let mergedProps = $derived(
-    mergeProps(
-      props,
-      colorPicker.getTransparencyGridProps({
-        size,
-      }),
-    ),
+    mergeProps(props, colorPicker.getTransparencyGridProps({size})),
   );
 </script>
 

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

@@ -0,0 +1,41 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+
+  export interface ColorPickerValueSwatchProps
+    extends HtmlIngredientProps<'div', HTMLDivElement> {
+    respectAlpha?: boolean;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import type {SwatchProps} from '@zag-js/color-picker';
+  import {getColorPickerContext} from './color-picker-context.svelte.js';
+
+  let {
+    this: e,
+    respectAlpha,
+    asChild,
+    children,
+    ...props
+  }: ColorPickerValueSwatchProps = $props();
+
+  let colorPicker = getColorPickerContext();
+
+  let swatchProps: SwatchProps = $derived({
+    respectAlpha,
+    value: colorPicker.valueAsString,
+  });
+
+  let mergedProps = $derived(
+    mergeProps(props, colorPicker.getSwatchProps(swatchProps)),
+  );
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/color-picker/color-picker-value-swatch.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { HtmlIngredientProps } from '../types.js';
+export interface ColorPickerValueSwatchProps extends HtmlIngredientProps<'div', HTMLDivElement> {
+    respectAlpha?: boolean;
+}
+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 ColorPickerValueSwatch: $$__sveltets_2_IsomorphicComponent<ColorPickerValueSwatchProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type ColorPickerValueSwatch = InstanceType<typeof ColorPickerValueSwatch>;
+export default ColorPickerValueSwatch;

package/dist/color-picker/color-picker-view.svelte

@@ -0,0 +1,41 @@
+<script lang="ts" module>
+  import type {HtmlIngredientProps} from '../types.js';
+  import type {ColorFormat} from '@zag-js/color-picker';
+
+  export interface ColorPickerViewTextProps
+    extends HtmlIngredientProps<'div', HTMLDivElement> {
+    format: ColorFormat;
+  }
+</script>
+
+<script lang="ts">
+  import {mergeProps} from '../merge-props.js';
+  import {
+    getColorPickerContext,
+    setColorPickerFormatPropsContext,
+  } from './color-picker-context.svelte.js';
+
+  let {
+    this: e,
+    format,
+    asChild,
+    children,
+    ...props
+  }: ColorPickerViewTextProps = $props();
+
+  let colorPicker = getColorPickerContext();
+  let formatProps = $derived({format});
+  let mergedProps = $derived(
+    mergeProps(props, colorPicker.getViewProps(formatProps)),
+  );
+
+  setColorPickerFormatPropsContext(() => formatProps);
+</script>
+
+{#if asChild}
+  {@render asChild(mergedProps)}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

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

@@ -0,0 +1,23 @@
+import type { HtmlIngredientProps } from '../types.js';
+import type { ColorFormat } from '@zag-js/color-picker';
+export interface ColorPickerViewTextProps extends HtmlIngredientProps<'div', HTMLDivElement> {
+    format: ColorFormat;
+}
+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 ColorPickerView: $$__sveltets_2_IsomorphicComponent<ColorPickerViewTextProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type ColorPickerView = InstanceType<typeof ColorPickerView>;
+export default ColorPickerView;

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

@@ -23,4 +23,6 @@ export { default as SwatchTrigger } from './color-picker-swatch-trigger.svelte';
 export { default as Swatch } from './color-picker-swatch.svelte';
 export { default as TransparencyGrid } from './color-picker-transparency-grid.svelte';
 export { default as Trigger } from './color-picker-trigger.svelte';
+export { default as ValueSwatchProps } from './color-picker-value-swatch.svelte';
 export { default as ValueText } from './color-picker-value-text.svelte';
+export { default as ViewTextProps } from './color-picker-view.svelte';

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

@@ -23,4 +23,6 @@ export { default as SwatchTrigger } from './color-picker-swatch-trigger.svelte';
 export { default as Swatch } from './color-picker-swatch.svelte';
 export { default as TransparencyGrid } from './color-picker-transparency-grid.svelte';
 export { default as Trigger } from './color-picker-trigger.svelte';
+export { default as ValueSwatchProps } from './color-picker-value-swatch.svelte';
 export { default as ValueText } from './color-picker-value-text.svelte';
+export { default as ViewTextProps } from './color-picker-view.svelte';