@ark-ui/svelte 0.4.0 → 5.0.0-0

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

@@ -0,0 +1,21 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface ColorPickerHiddenInputBaseProps extends PolymorphicProps<'input'> {}
+  export interface ColorPickerHiddenInputProps extends Assign<HTMLProps<'input'>, ColorPickerHiddenInputBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useColorPickerContext } from './use-color-picker-context'
+  import { useFieldContext } from '../field'
+
+  const props: ColorPickerHiddenInputProps = $props()
+
+  const colorPicker = useColorPickerContext()
+  const mergedProps = $derived(mergeProps(colorPicker().getHiddenInputProps(), props))
+  const field = useFieldContext()
+</script>
+
+<Ark as="input" aria-describedby={field?.()?.ariaDescribedby} {...mergedProps} />

package/dist/components/color-picker/color-picker-hidden-input.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface ColorPickerHiddenInputBaseProps extends PolymorphicProps<'input'> {
+}
+export interface ColorPickerHiddenInputProps extends Assign<HTMLProps<'input'>, ColorPickerHiddenInputBaseProps> {
+}
+declare const ColorPickerHiddenInput: import("svelte").Component<ColorPickerHiddenInputProps, {}, "">;
+type ColorPickerHiddenInput = ReturnType<typeof ColorPickerHiddenInput>;
+export default ColorPickerHiddenInput;

package/dist/components/color-picker/color-picker-label.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface ColorPickerLabelBaseProps extends PolymorphicProps<'label'> {}
+  export interface ColorPickerLabelProps extends Assign<HTMLProps<'label'>, ColorPickerLabelBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useColorPickerContext } from './use-color-picker-context'
+
+  const props: ColorPickerLabelProps = $props()
+
+  const colorPicker = useColorPickerContext()
+  const mergedProps = $derived(mergeProps(colorPicker().getLabelProps(), props))
+</script>
+
+<Ark as="label" {...mergedProps} />

package/dist/components/color-picker/color-picker-label.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface ColorPickerLabelBaseProps extends PolymorphicProps<'label'> {
+}
+export interface ColorPickerLabelProps extends Assign<HTMLProps<'label'>, ColorPickerLabelBaseProps> {
+}
+declare const ColorPickerLabel: import("svelte").Component<ColorPickerLabelProps, {}, "">;
+type ColorPickerLabel = ReturnType<typeof ColorPickerLabel>;
+export default ColorPickerLabel;

package/dist/components/color-picker/color-picker-positioner.svelte

@@ -0,0 +1,24 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface ColorPickerPositionerBaseProps extends PolymorphicProps<'div'> {}
+  export interface ColorPickerPositionerProps extends Assign<HTMLProps<'div'>, ColorPickerPositionerBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useColorPickerContext } from './use-color-picker-context'
+  import { usePresenceContext } from '../presence'
+
+  const props: ColorPickerPositionerProps = $props()
+
+  const colorPicker = useColorPickerContext()
+  const mergedProps = $derived(mergeProps(colorPicker().getPositionerProps(), props))
+
+  const presence = usePresenceContext()
+</script>
+
+{#if !presence().unmounted}
+  <Ark as="div" {...mergedProps} />
+{/if}

package/dist/components/color-picker/color-picker-positioner.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface ColorPickerPositionerBaseProps extends PolymorphicProps<'div'> {
+}
+export interface ColorPickerPositionerProps extends Assign<HTMLProps<'div'>, ColorPickerPositionerBaseProps> {
+}
+declare const ColorPickerPositioner: import("svelte").Component<ColorPickerPositionerProps, {}, "">;
+type ColorPickerPositioner = ReturnType<typeof ColorPickerPositioner>;
+export default ColorPickerPositioner;

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

@@ -0,0 +1,28 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { UseColorPickerReturn } from './use-color-picker.svelte'
+
+  export interface ColorPickerRootProviderBaseProps extends PolymorphicProps<'div'>, UsePresenceProps {
+    value: UseColorPickerReturn
+  }
+  export interface ColorPickerRootProviderProps extends Assign<HTMLProps<'div'>, ColorPickerRootProviderBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { PresenceProvider, splitPresenceProps, usePresence, type UsePresenceProps } from '../presence'
+  import { ColorPickerProvider } from './use-color-picker-context'
+
+  let { value, ...props }: ColorPickerRootProviderProps = $props()
+
+  const [presenceProps, localProps] = $derived(splitPresenceProps(props))
+
+  const presence = usePresence(() => ({ present: value().open, ...presenceProps }))
+  const mergedProps = $derived(mergeProps(value().getRootProps(), localProps))
+
+  ColorPickerProvider(value)
+  PresenceProvider(presence)
+</script>
+
+<Ark as="div" {...mergedProps} />

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

@@ -0,0 +1,11 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { UseColorPickerReturn } from './use-color-picker.svelte';
+export interface ColorPickerRootProviderBaseProps extends PolymorphicProps<'div'>, UsePresenceProps {
+    value: UseColorPickerReturn;
+}
+export interface ColorPickerRootProviderProps extends Assign<HTMLProps<'div'>, ColorPickerRootProviderBaseProps> {
+}
+import { type UsePresenceProps } from '../presence';
+declare const ColorPickerRootProvider: import("svelte").Component<ColorPickerRootProviderProps, {}, "">;
+type ColorPickerRootProvider = ReturnType<typeof ColorPickerRootProvider>;
+export default ColorPickerRootProvider;

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

@@ -0,0 +1,49 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { UsePresenceProps } from '../presence'
+  import type { UseColorPickerProps } from './use-color-picker.svelte'
+
+  export interface ColorPickerRootBaseProps extends UseColorPickerProps, UsePresenceProps, PolymorphicProps<'div'> {}
+  export interface ColorPickerRootProps extends Assign<HTMLProps<'div'>, ColorPickerRootBaseProps> {}
+</script>
+
+<script lang="ts">
+  import type { Color } from '@zag-js/color-utils'
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { PresenceProvider, splitPresenceProps, usePresence } from '../presence'
+  import { splitColorPickerProps } from './split-color-picker-props.svelte'
+  import { ColorPickerProvider } from './use-color-picker-context'
+  import { useColorPicker } from './use-color-picker.svelte'
+
+  let { value = $bindable<Color>(), open = $bindable<boolean>(), ...props }: ColorPickerRootProps = $props()
+  const providedId = $props.id()
+
+  const [presenceProps, colorPickerProps] = $derived(splitPresenceProps(props))
+  const [useColorPickerProps, localProps] = $derived(splitColorPickerProps(colorPickerProps))
+
+  const machineProps = $derived<UseColorPickerProps>({
+    ...useColorPickerProps,
+    id: useColorPickerProps.id ?? providedId,
+    value,
+    open,
+    onValueChange(details) {
+      useColorPickerProps.onValueChange?.(details)
+      value = details.value
+    },
+    onOpenChange(details) {
+      useColorPickerProps.onOpenChange?.(details)
+      open = details.open
+    },
+  })
+
+  const colorPicker = useColorPicker(() => machineProps)
+  const presence = usePresence(() => ({ present: colorPicker().open, ...presenceProps }))
+
+  const mergedProps = $derived(mergeProps(colorPicker().getRootProps(), localProps))
+
+  ColorPickerProvider(colorPicker)
+  PresenceProvider(presence)
+</script>
+
+<Ark as="div" {...mergedProps} />

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

@@ -0,0 +1,10 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { UsePresenceProps } from '../presence';
+import type { UseColorPickerProps } from './use-color-picker.svelte';
+export interface ColorPickerRootBaseProps extends UseColorPickerProps, UsePresenceProps, PolymorphicProps<'div'> {
+}
+export interface ColorPickerRootProps extends Assign<HTMLProps<'div'>, ColorPickerRootBaseProps> {
+}
+declare const ColorPickerRoot: import("svelte").Component<ColorPickerRootProps, {}, "value" | "open">;
+type ColorPickerRoot = ReturnType<typeof ColorPickerRoot>;
+export default ColorPickerRoot;

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

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface ColorPickerSwatchGroupBaseProps extends PolymorphicProps<'div'> {}
+  export interface ColorPickerSwatchGroupProps extends Assign<HTMLProps<'div'>, ColorPickerSwatchGroupBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useColorPickerContext } from './use-color-picker-context'
+
+  const props: ColorPickerSwatchGroupProps = $props()
+
+  const colorPicker = useColorPickerContext()
+  const mergedProps = $derived(mergeProps(colorPicker().getSwatchGroupProps(), props))
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/color-picker/color-picker-swatch-group.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface ColorPickerSwatchGroupBaseProps extends PolymorphicProps<'div'> {
+}
+export interface ColorPickerSwatchGroupProps extends Assign<HTMLProps<'div'>, ColorPickerSwatchGroupBaseProps> {
+}
+declare const ColorPickerSwatchGroup: import("svelte").Component<ColorPickerSwatchGroupProps, {}, "">;
+type ColorPickerSwatchGroup = ReturnType<typeof ColorPickerSwatchGroup>;
+export default ColorPickerSwatchGroup;

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

@@ -0,0 +1,22 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface ColorPickerSwatchIndicatorBaseProps extends PolymorphicProps<'div'> {}
+  export interface ColorPickerSwatchIndicatorProps
+    extends Assign<HTMLProps<'div'>, ColorPickerSwatchIndicatorBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useColorPickerContext } from './use-color-picker-context'
+  import { useColorPickerSwatchPropsContext } from './use-color-picker-swatch-props-context'
+
+  const props: ColorPickerSwatchIndicatorProps = $props()
+
+  const colorPicker = useColorPickerContext()
+  const swatchProps = useColorPickerSwatchPropsContext()
+  const mergedProps = $derived(mergeProps(colorPicker().getSwatchIndicatorProps(swatchProps()), props))
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/color-picker/color-picker-swatch-indicator.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface ColorPickerSwatchIndicatorBaseProps extends PolymorphicProps<'div'> {
+}
+export interface ColorPickerSwatchIndicatorProps extends Assign<HTMLProps<'div'>, ColorPickerSwatchIndicatorBaseProps> {
+}
+declare const ColorPickerSwatchIndicator: import("svelte").Component<ColorPickerSwatchIndicatorProps, {}, "">;
+type ColorPickerSwatchIndicator = ReturnType<typeof ColorPickerSwatchIndicator>;
+export default ColorPickerSwatchIndicator;

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

@@ -0,0 +1,26 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { SwatchTriggerProps } from '@zag-js/color-picker'
+
+  export interface ColorPickerSwatchTriggerBaseProps extends SwatchTriggerProps, PolymorphicProps<'button'> {}
+  export interface ColorPickerSwatchTriggerProps
+    extends Assign<HTMLProps<'button'>, ColorPickerSwatchTriggerBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useColorPickerContext } from './use-color-picker-context'
+
+  const props: ColorPickerSwatchTriggerProps = $props()
+
+  const [swatchTriggerProps, localProps] = $derived(
+    createSplitProps<SwatchTriggerProps>()(props, ['value', 'disabled']),
+  )
+
+  const colorPicker = useColorPickerContext()
+  const mergedProps = $derived(mergeProps(colorPicker().getSwatchTriggerProps(swatchTriggerProps), localProps))
+</script>
+
+<Ark as="button" {...mergedProps} />

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

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { SwatchTriggerProps } from '@zag-js/color-picker';
+export interface ColorPickerSwatchTriggerBaseProps extends SwatchTriggerProps, PolymorphicProps<'button'> {
+}
+export interface ColorPickerSwatchTriggerProps extends Assign<HTMLProps<'button'>, ColorPickerSwatchTriggerBaseProps> {
+}
+declare const ColorPickerSwatchTrigger: import("svelte").Component<ColorPickerSwatchTriggerProps, {}, "">;
+type ColorPickerSwatchTrigger = ReturnType<typeof ColorPickerSwatchTrigger>;
+export default ColorPickerSwatchTrigger;

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

@@ -0,0 +1,26 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { SwatchProps } from '@zag-js/color-picker'
+
+  export interface ColorPickerSwatchBaseProps extends SwatchProps, PolymorphicProps<'div'> {}
+  export interface ColorPickerSwatchProps extends Assign<HTMLProps<'div'>, ColorPickerSwatchBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useColorPickerContext } from './use-color-picker-context'
+  import { ColorPickerSwatchPropsProvider } from './use-color-picker-swatch-props-context'
+  import { createSplitProps } from '../../utils/create-split-props'
+
+  const props: ColorPickerSwatchProps = $props()
+
+  const [swatchProps, localProps] = $derived(createSplitProps<SwatchProps>()(props, ['value', 'respectAlpha']))
+
+  const colorPicker = useColorPickerContext()
+  const mergedProps = $derived(mergeProps(colorPicker().getSwatchProps(swatchProps), localProps))
+
+  ColorPickerSwatchPropsProvider(() => swatchProps)
+</script>
+
+<Ark as="div" {...mergedProps} />

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

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { SwatchProps } from '@zag-js/color-picker';
+export interface ColorPickerSwatchBaseProps extends SwatchProps, PolymorphicProps<'div'> {
+}
+export interface ColorPickerSwatchProps extends Assign<HTMLProps<'div'>, ColorPickerSwatchBaseProps> {
+}
+declare const ColorPickerSwatch: import("svelte").Component<ColorPickerSwatchProps, {}, "">;
+type ColorPickerSwatch = ReturnType<typeof ColorPickerSwatch>;
+export default ColorPickerSwatch;

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

@@ -0,0 +1,24 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface ColorPickerTransparencyGridBaseProps extends TransparencyGridProps, PolymorphicProps<'div'> {}
+  export interface ColorPickerTransparencyGridProps
+    extends Assign<HTMLProps<'div'>, ColorPickerTransparencyGridBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useColorPickerContext } from './use-color-picker-context'
+  import type { TransparencyGridProps } from '@zag-js/color-picker'
+  import { createSplitProps } from '../../utils/create-split-props'
+
+  const props: ColorPickerTransparencyGridProps = $props()
+
+  const [gridProps, localProps] = $derived(createSplitProps<TransparencyGridProps>()(props, ['size']))
+
+  const colorPicker = useColorPickerContext()
+  const mergedProps = $derived(mergeProps(colorPicker().getTransparencyGridProps(gridProps), localProps))
+</script>
+
+<Ark as="div" {...mergedProps} />

package/dist/components/color-picker/color-picker-transparency-grid.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface ColorPickerTransparencyGridBaseProps extends TransparencyGridProps, PolymorphicProps<'div'> {
+}
+export interface ColorPickerTransparencyGridProps extends Assign<HTMLProps<'div'>, ColorPickerTransparencyGridBaseProps> {
+}
+import type { TransparencyGridProps } from '@zag-js/color-picker';
+declare const ColorPickerTransparencyGrid: import("svelte").Component<ColorPickerTransparencyGridProps, {}, "">;
+type ColorPickerTransparencyGrid = ReturnType<typeof ColorPickerTransparencyGrid>;
+export default ColorPickerTransparencyGrid;

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

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+
+  export interface ColorPickerTriggerBaseProps extends PolymorphicProps<'button'> {}
+  export interface ColorPickerTriggerProps extends Assign<HTMLProps<'button'>, ColorPickerTriggerBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useColorPickerContext } from './use-color-picker-context'
+
+  const props: ColorPickerTriggerProps = $props()
+
+  const colorPicker = useColorPickerContext()
+  const mergedProps = $derived(mergeProps(colorPicker().getTriggerProps(), props))
+</script>
+
+<Ark as="button" {...mergedProps} />

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

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+export interface ColorPickerTriggerBaseProps extends PolymorphicProps<'button'> {
+}
+export interface ColorPickerTriggerProps extends Assign<HTMLProps<'button'>, ColorPickerTriggerBaseProps> {
+}
+declare const ColorPickerTrigger: import("svelte").Component<ColorPickerTriggerProps, {}, "">;
+type ColorPickerTrigger = ReturnType<typeof ColorPickerTrigger>;
+export default ColorPickerTrigger;

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

@@ -0,0 +1,34 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { SwatchProps } from '@zag-js/color-picker'
+
+  interface ValueSwatchProps extends Omit<SwatchProps, 'value'> {}
+
+  export interface ColorPickerValueSwatchBaseProps extends ValueSwatchProps, PolymorphicProps<'div'> {}
+  export interface ColorPickerValueSwatchProps extends Assign<HTMLProps<'div'>, ColorPickerValueSwatchBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useColorPickerContext } from './use-color-picker-context'
+  import { ColorPickerSwatchPropsProvider } from './use-color-picker-swatch-props-context'
+
+  const props: ColorPickerValueSwatchProps = $props()
+
+  const [valueSwatchProps, localProps] = $derived(createSplitProps<ValueSwatchProps>()(props, ['respectAlpha']))
+
+  const colorPicker = useColorPickerContext()
+
+  const swatchProps = $derived({
+    ...valueSwatchProps,
+    value: colorPicker().valueAsString,
+  })
+
+  const mergedProps = $derived(mergeProps(colorPicker().getSwatchProps(swatchProps), localProps))
+
+  ColorPickerSwatchPropsProvider(() => swatchProps)
+</script>
+
+<Ark as="div" {...mergedProps} />

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

@@ -0,0 +1,11 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { SwatchProps } from '@zag-js/color-picker';
+interface ValueSwatchProps extends Omit<SwatchProps, 'value'> {
+}
+export interface ColorPickerValueSwatchBaseProps extends ValueSwatchProps, PolymorphicProps<'div'> {
+}
+export interface ColorPickerValueSwatchProps extends Assign<HTMLProps<'div'>, ColorPickerValueSwatchBaseProps> {
+}
+declare const ColorPickerValueSwatch: import("svelte").Component<ColorPickerValueSwatchProps, {}, "">;
+type ColorPickerValueSwatch = ReturnType<typeof ColorPickerValueSwatch>;
+export default ColorPickerValueSwatch;

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

@@ -0,0 +1,29 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { ColorStringFormat } from '@zag-js/color-utils'
+
+  export interface ColorPickerValueTextBaseProps extends PolymorphicProps<'span'> {
+    format?: ColorStringFormat
+  }
+  export interface ColorPickerValueTextProps extends Assign<HTMLProps<'span'>, ColorPickerValueTextBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from '@zag-js/svelte'
+  import { Ark } from '../factory'
+  import { useColorPickerContext } from './use-color-picker-context'
+
+  let { children, format, ...props }: ColorPickerValueTextProps = $props()
+
+  const colorPicker = useColorPickerContext()
+  const mergedProps = $derived(mergeProps(colorPicker().getValueTextProps(), props))
+  const valueAsString = $derived(format ? colorPicker().value.toString(format) : colorPicker().valueAsString)
+</script>
+
+<Ark as="span" {...mergedProps}>
+  {#if children}
+    {@render children()}
+  {:else}
+    {valueAsString}
+  {/if}
+</Ark>

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

@@ -0,0 +1,10 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { ColorStringFormat } from '@zag-js/color-utils';
+export interface ColorPickerValueTextBaseProps extends PolymorphicProps<'span'> {
+    format?: ColorStringFormat;
+}
+export interface ColorPickerValueTextProps extends Assign<HTMLProps<'span'>, ColorPickerValueTextBaseProps> {
+}
+declare const ColorPickerValueText: import("svelte").Component<ColorPickerValueTextProps, {}, "">;
+type ColorPickerValueText = ReturnType<typeof ColorPickerValueText>;
+export default ColorPickerValueText;

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

@@ -0,0 +1,30 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps } from '../../types'
+  import type { ColorFormat } from '@zag-js/color-picker'
+
+  interface FormatOptions {
+    format: ColorFormat
+  }
+
+  export interface ColorPickerViewBaseProps extends FormatOptions, PolymorphicProps<'div'> {}
+  export interface ColorPickerViewProps extends Assign<HTMLProps<'div'>, ColorPickerViewBaseProps> {}
+</script>
+
+<script lang="ts">
+  import { Ark } from '../factory'
+  import { useColorPickerContext } from './use-color-picker-context'
+  import { colorPickerAnatomy } from './color-picker.anatomy'
+  import { createSplitProps } from '../../utils/create-split-props'
+  import { ColorPickerFormatPropsProvider } from './use-color-picker-format-context'
+
+  const props: ColorPickerViewProps = $props()
+  const [formatProps, localProps] = $derived(createSplitProps<FormatOptions>()(props, ['format']))
+
+  const colorPicker = useColorPickerContext()
+
+  ColorPickerFormatPropsProvider(() => formatProps)
+</script>
+
+{#if colorPicker().format === formatProps.format}
+  <Ark as="div" data-format={formatProps.format} {...colorPickerAnatomy.build().view.attrs} {...localProps} />
+{/if}

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

@@ -0,0 +1,12 @@
+import type { Assign, HTMLProps, PolymorphicProps } from '../../types';
+import type { ColorFormat } from '@zag-js/color-picker';
+interface FormatOptions {
+    format: ColorFormat;
+}
+export interface ColorPickerViewBaseProps extends FormatOptions, PolymorphicProps<'div'> {
+}
+export interface ColorPickerViewProps extends Assign<HTMLProps<'div'>, ColorPickerViewBaseProps> {
+}
+declare const ColorPickerView: import("svelte").Component<ColorPickerViewProps, {}, "">;
+type ColorPickerView = ReturnType<typeof ColorPickerView>;
+export default ColorPickerView;

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

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

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

@@ -0,0 +1,2 @@
+import { anatomy } from '@zag-js/color-picker';
+export const colorPickerAnatomy = anatomy.extendWith('view');

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

@@ -0,0 +1,30 @@
+export type { Color, ColorFormat, FormatChangeDetails, OpenChangeDetails, ValueChangeDetails, } from '@zag-js/color-picker';
+export { default as Area, type ColorPickerAreaBaseProps as AreaBaseProps, type ColorPickerAreaProps as AreaProps, } from './color-picker-area.svelte';
+export { default as AreaBackground, type ColorPickerAreaBackgroundBaseProps as AreaBackgroundBaseProps, type ColorPickerAreaBackgroundProps as AreaBackgroundProps, } from './color-picker-area-background.svelte';
+export { default as AreaThumb, type ColorPickerAreaThumbBaseProps as AreaThumbBaseProps, type ColorPickerAreaThumbProps as AreaThumbProps, } from './color-picker-area-thumb.svelte';
+export { default as ChannelInput, type ColorPickerChannelInputBaseProps as ChannelInputBaseProps, type ColorPickerChannelInputProps as ChannelInputProps, } from './color-picker-channel-input.svelte';
+export { default as ChannelSlider, type ColorPickerChannelSliderBaseProps as ChannelSliderBaseProps, type ColorPickerChannelSliderProps as ChannelSliderProps, } from './color-picker-channel-slider.svelte';
+export { default as ChannelSliderLabel, type ColorPickerChannelSliderLabelBaseProps as ChannelSliderLabelBaseProps, type ColorPickerChannelSliderLabelProps as ChannelSliderLabelProps, } from './color-picker-channel-slider-label.svelte';
+export { default as ChannelSliderThumb, type ColorPickerChannelSliderThumbBaseProps as ChannelSliderThumbBaseProps, type ColorPickerChannelSliderThumbProps as ChannelSliderThumbProps, } from './color-picker-channel-slider-thumb.svelte';
+export { default as ChannelSliderTrack, type ColorPickerChannelSliderTrackBaseProps as ChannelSliderTrackBaseProps, type ColorPickerChannelSliderTrackProps as ChannelSliderTrackProps, } from './color-picker-channel-slider-track.svelte';
+export { default as ChannelSliderValueText, type ColorPickerChannelSliderValueTextBaseProps as ChannelSliderValueTextBaseProps, type ColorPickerChannelSliderValueTextProps as ChannelSliderValueTextProps, } from './color-picker-channel-slider-value-text.svelte';
+export { default as Content, type ColorPickerContentBaseProps as ContentBaseProps, type ColorPickerContentProps as ContentProps, } from './color-picker-content.svelte';
+export { default as Context, type ColorPickerContextProps as ContextProps } from './color-picker-context.svelte';
+export { default as Control, type ColorPickerControlBaseProps as ControlBaseProps, type ColorPickerControlProps as ControlProps, } from './color-picker-control.svelte';
+export { default as EyeDropperTrigger, type ColorPickerEyeDropperTriggerBaseProps as EyeDropperTriggerBaseProps, type ColorPickerEyeDropperTriggerProps as EyeDropperTriggerProps, } from './color-picker-eye-dropper-trigger.svelte';
+export { default as FormatSelect, type ColorPickerFormatSelectBaseProps as FormatSelectBaseProps, type ColorPickerFormatSelectProps as FormatSelectProps, } from './color-picker-format-select.svelte';
+export { default as FormatTrigger, type ColorPickerFormatTriggerBaseProps as FormatTriggerBaseProps, type ColorPickerFormatTriggerProps as FormatTriggerProps, } from './color-picker-format-trigger.svelte';
+export { default as HiddenInput, type ColorPickerHiddenInputBaseProps as HiddenInputBaseProps, type ColorPickerHiddenInputProps as HiddenInputProps, } from './color-picker-hidden-input.svelte';
+export { default as Label, type ColorPickerLabelBaseProps as LabelBaseProps, type ColorPickerLabelProps as LabelProps, } from './color-picker-label.svelte';
+export { default as Positioner, type ColorPickerPositionerBaseProps as PositionerBaseProps, type ColorPickerPositionerProps as PositionerProps, } from './color-picker-positioner.svelte';
+export { default as Root, type ColorPickerRootBaseProps as RootBaseProps, type ColorPickerRootProps as RootProps, } from './color-picker-root.svelte';
+export { default as RootProvider, type ColorPickerRootProviderBaseProps as RootProviderBaseProps, type ColorPickerRootProviderProps as RootProviderProps, } from './color-picker-root-provider.svelte';
+export { default as Swatch, type ColorPickerSwatchBaseProps as SwatchBaseProps, type ColorPickerSwatchProps as SwatchProps, } from './color-picker-swatch.svelte';
+export { default as SwatchGroup, type ColorPickerSwatchGroupBaseProps as SwatchGroupBaseProps, type ColorPickerSwatchGroupProps as SwatchGroupProps, } from './color-picker-swatch-group.svelte';
+export { default as SwatchIndicator, type ColorPickerSwatchIndicatorBaseProps as SwatchIndicatorBaseProps, type ColorPickerSwatchIndicatorProps as SwatchIndicatorProps, } from './color-picker-swatch-indicator.svelte';
+export { default as SwatchTrigger, type ColorPickerSwatchTriggerBaseProps as SwatchTriggerBaseProps, type ColorPickerSwatchTriggerProps as SwatchTriggerProps, } from './color-picker-swatch-trigger.svelte';
+export { default as TransparencyGrid, type ColorPickerTransparencyGridBaseProps as TransparencyGridBaseProps, type ColorPickerTransparencyGridProps as TransparencyGridProps, } from './color-picker-transparency-grid.svelte';
+export { default as Trigger, type ColorPickerTriggerBaseProps as TriggerBaseProps, type ColorPickerTriggerProps as TriggerProps, } from './color-picker-trigger.svelte';
+export { default as ValueSwatch, type ColorPickerValueSwatchBaseProps as ValueSwatchBaseProps, type ColorPickerValueSwatchProps as ValueSwatchProps, } from './color-picker-value-swatch.svelte';
+export { default as ValueText, type ColorPickerValueTextBaseProps as ValueTextBaseProps, type ColorPickerValueTextProps as ValueTextProps, } from './color-picker-value-text.svelte';
+export { default as View, type ColorPickerViewBaseProps as ViewBaseProps, type ColorPickerViewProps as ViewProps, } from './color-picker-view.svelte';

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

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