@ark-ui/react 3.4.0-0 → 3.4.0-1

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

@@ -1,7 +1,8 @@
-import { HTMLArkProps } from '../factory';
+import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 
-export type ColorPickerFormatSelectBaseProps = {};
-export interface ColorPickerFormatSelectProps extends HTMLArkProps<'select'>, ColorPickerFormatSelectBaseProps {
+export interface ColorPickerFormatSelectBaseProps extends PolymorphicProps {
+}
+export interface ColorPickerFormatSelectProps extends HTMLProps<'select'>, ColorPickerFormatSelectBaseProps {
 }
 export declare const ColorPickerFormatSelect: ForwardRefExoticComponent<ColorPickerFormatSelectProps & RefAttributes<HTMLSelectElement>>;

package/dist/components/color-picker/color-picker-format-trigger.d.cts

@@ -1,7 +1,8 @@
-import { HTMLArkProps } from '../factory';
+import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 
-export type ColorPickerFormatTriggerBaseProps = {};
-export interface ColorPickerFormatTriggerProps extends HTMLArkProps<'button'>, ColorPickerFormatTriggerBaseProps {
+export interface ColorPickerFormatTriggerBaseProps extends PolymorphicProps {
+}
+export interface ColorPickerFormatTriggerProps extends HTMLProps<'button'>, ColorPickerFormatTriggerBaseProps {
 }
 export declare const ColorPickerFormatTrigger: ForwardRefExoticComponent<ColorPickerFormatTriggerProps & RefAttributes<HTMLButtonElement>>;

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

@@ -1,7 +1,8 @@
-import { HTMLArkProps } from '../factory';
+import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 
-export type ColorPickerFormatTriggerBaseProps = {};
-export interface ColorPickerFormatTriggerProps extends HTMLArkProps<'button'>, ColorPickerFormatTriggerBaseProps {
+export interface ColorPickerFormatTriggerBaseProps extends PolymorphicProps {
+}
+export interface ColorPickerFormatTriggerProps extends HTMLProps<'button'>, ColorPickerFormatTriggerBaseProps {
 }
 export declare const ColorPickerFormatTrigger: ForwardRefExoticComponent<ColorPickerFormatTriggerProps & RefAttributes<HTMLButtonElement>>;

package/dist/components/color-picker/color-picker-hidden-input.d.cts

@@ -1,7 +1,8 @@
-import { HTMLArkProps } from '../factory';
+import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 
-export type ColorPickerHiddenInputBaseProps = {};
-export interface ColorPickerHiddenInputProps extends HTMLArkProps<'input'>, ColorPickerHiddenInputBaseProps {
+export interface ColorPickerHiddenInputBaseProps extends PolymorphicProps {
+}
+export interface ColorPickerHiddenInputProps extends HTMLProps<'input'>, ColorPickerHiddenInputBaseProps {
 }
 export declare const ColorPickerHiddenInput: ForwardRefExoticComponent<ColorPickerHiddenInputProps & RefAttributes<HTMLInputElement>>;

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

@@ -1,7 +1,8 @@
-import { HTMLArkProps } from '../factory';
+import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 
-export type ColorPickerHiddenInputBaseProps = {};
-export interface ColorPickerHiddenInputProps extends HTMLArkProps<'input'>, ColorPickerHiddenInputBaseProps {
+export interface ColorPickerHiddenInputBaseProps extends PolymorphicProps {
+}
+export interface ColorPickerHiddenInputProps extends HTMLProps<'input'>, ColorPickerHiddenInputBaseProps {
 }
 export declare const ColorPickerHiddenInput: ForwardRefExoticComponent<ColorPickerHiddenInputProps & RefAttributes<HTMLInputElement>>;

package/dist/components/color-picker/color-picker-label.d.cts

@@ -1,7 +1,8 @@
-import { HTMLArkProps } from '../factory';
+import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 
-export type ColorPickerLabelBaseProps = {};
-export interface ColorPickerLabelProps extends HTMLArkProps<'label'>, ColorPickerLabelBaseProps {
+export interface ColorPickerLabelBaseProps extends PolymorphicProps {
+}
+export interface ColorPickerLabelProps extends HTMLProps<'label'>, ColorPickerLabelBaseProps {
 }
 export declare const ColorPickerLabel: ForwardRefExoticComponent<ColorPickerLabelProps & RefAttributes<HTMLLabelElement>>;

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

@@ -1,7 +1,8 @@
-import { HTMLArkProps } from '../factory';
+import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 
-export type ColorPickerLabelBaseProps = {};
-export interface ColorPickerLabelProps extends HTMLArkProps<'label'>, ColorPickerLabelBaseProps {
+export interface ColorPickerLabelBaseProps extends PolymorphicProps {
+}
+export interface ColorPickerLabelProps extends HTMLProps<'label'>, ColorPickerLabelBaseProps {
 }
 export declare const ColorPickerLabel: ForwardRefExoticComponent<ColorPickerLabelProps & RefAttributes<HTMLLabelElement>>;

package/dist/components/color-picker/color-picker-positioner.d.cts

@@ -1,7 +1,8 @@
-import { HTMLArkProps } from '../factory';
+import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 
-export type ColorPickerPositionerBaseProps = {};
-export interface ColorPickerPositionerProps extends HTMLArkProps<'div'>, ColorPickerPositionerBaseProps {
+export interface ColorPickerPositionerBaseProps extends PolymorphicProps {
+}
+export interface ColorPickerPositionerProps extends HTMLProps<'div'>, ColorPickerPositionerBaseProps {
 }
 export declare const ColorPickerPositioner: ForwardRefExoticComponent<ColorPickerPositionerProps & RefAttributes<HTMLDivElement>>;

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

@@ -1,7 +1,8 @@
-import { HTMLArkProps } from '../factory';
+import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 
-export type ColorPickerPositionerBaseProps = {};
-export interface ColorPickerPositionerProps extends HTMLArkProps<'div'>, ColorPickerPositionerBaseProps {
+export interface ColorPickerPositionerBaseProps extends PolymorphicProps {
+}
+export interface ColorPickerPositionerProps extends HTMLProps<'div'>, ColorPickerPositionerBaseProps {
 }
 export declare const ColorPickerPositioner: ForwardRefExoticComponent<ColorPickerPositionerProps & RefAttributes<HTMLDivElement>>;

package/dist/components/color-picker/color-picker-root-provider.d.cts

@@ -1,4 +1,4 @@
-import { HTMLArkProps } from '../factory';
+import { HTMLProps, PolymorphicProps } from '../factory';
 import { UsePresenceProps } from '../presence';
 import { UseColorPickerReturn } from './use-color-picker';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
@@ -6,9 +6,9 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 interface RootProviderProps {
     value: UseColorPickerReturn;
 }
-export interface ColorPickerRootProviderBaseProps extends RootProviderProps, UsePresenceProps {
+export interface ColorPickerRootProviderBaseProps extends RootProviderProps, UsePresenceProps, PolymorphicProps {
 }
-export interface ColorPickerRootProviderProps extends HTMLArkProps<'div'>, ColorPickerRootProviderBaseProps {
+export interface ColorPickerRootProviderProps extends HTMLProps<'div'>, ColorPickerRootProviderBaseProps {
 }
 export declare const ColorPickerRootProvider: ForwardRefExoticComponent<ColorPickerRootProviderProps & RefAttributes<HTMLDivElement>>;
 export {};

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

@@ -1,4 +1,4 @@
-import { HTMLArkProps } from '../factory';
+import { HTMLProps, PolymorphicProps } from '../factory';
 import { UsePresenceProps } from '../presence';
 import { UseColorPickerReturn } from './use-color-picker';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
@@ -6,9 +6,9 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 interface RootProviderProps {
     value: UseColorPickerReturn;
 }
-export interface ColorPickerRootProviderBaseProps extends RootProviderProps, UsePresenceProps {
+export interface ColorPickerRootProviderBaseProps extends RootProviderProps, UsePresenceProps, PolymorphicProps {
 }
-export interface ColorPickerRootProviderProps extends HTMLArkProps<'div'>, ColorPickerRootProviderBaseProps {
+export interface ColorPickerRootProviderProps extends HTMLProps<'div'>, ColorPickerRootProviderBaseProps {
 }
 export declare const ColorPickerRootProvider: ForwardRefExoticComponent<ColorPickerRootProviderProps & RefAttributes<HTMLDivElement>>;
 export {};

package/dist/components/color-picker/color-picker-root.d.cts

@@ -1,11 +1,11 @@
 import { Assign } from '../../types';
-import { HTMLArkProps } from '../factory';
+import { HTMLProps, PolymorphicProps } from '../factory';
 import { UsePresenceProps } from '../presence';
 import { UseColorPickerProps } from './use-color-picker';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 
-export interface ColorPickerRootBaseProps extends UseColorPickerProps, UsePresenceProps {
+export interface ColorPickerRootBaseProps extends UseColorPickerProps, UsePresenceProps, PolymorphicProps {
 }
-export interface ColorPickerRootProps extends Assign<HTMLArkProps<'div'>, ColorPickerRootBaseProps> {
+export interface ColorPickerRootProps extends Assign<HTMLProps<'div'>, ColorPickerRootBaseProps> {
 }
 export declare const ColorPickerRoot: ForwardRefExoticComponent<ColorPickerRootProps & RefAttributes<HTMLDivElement>>;

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

@@ -1,11 +1,11 @@
 import { Assign } from '../../types';
-import { HTMLArkProps } from '../factory';
+import { HTMLProps, PolymorphicProps } from '../factory';
 import { UsePresenceProps } from '../presence';
 import { UseColorPickerProps } from './use-color-picker';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 
-export interface ColorPickerRootBaseProps extends UseColorPickerProps, UsePresenceProps {
+export interface ColorPickerRootBaseProps extends UseColorPickerProps, UsePresenceProps, PolymorphicProps {
 }
-export interface ColorPickerRootProps extends Assign<HTMLArkProps<'div'>, ColorPickerRootBaseProps> {
+export interface ColorPickerRootProps extends Assign<HTMLProps<'div'>, ColorPickerRootBaseProps> {
 }
 export declare const ColorPickerRoot: ForwardRefExoticComponent<ColorPickerRootProps & RefAttributes<HTMLDivElement>>;

package/dist/components/color-picker/color-picker-swatch-group.d.cts

@@ -1,7 +1,8 @@
-import { HTMLArkProps } from '../factory';
+import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 
-export type ColorPickerSwatchGroupBaseProps = {};
-export interface ColorPickerSwatchGroupProps extends HTMLArkProps<'div'>, ColorPickerSwatchGroupBaseProps {
+export interface ColorPickerSwatchGroupBaseProps extends PolymorphicProps {
+}
+export interface ColorPickerSwatchGroupProps extends HTMLProps<'div'>, ColorPickerSwatchGroupBaseProps {
 }
 export declare const ColorPickerSwatchGroup: ForwardRefExoticComponent<ColorPickerSwatchGroupProps & RefAttributes<HTMLDivElement>>;

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

@@ -1,7 +1,8 @@
-import { HTMLArkProps } from '../factory';
+import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 
-export type ColorPickerSwatchGroupBaseProps = {};
-export interface ColorPickerSwatchGroupProps extends HTMLArkProps<'div'>, ColorPickerSwatchGroupBaseProps {
+export interface ColorPickerSwatchGroupBaseProps extends PolymorphicProps {
+}
+export interface ColorPickerSwatchGroupProps extends HTMLProps<'div'>, ColorPickerSwatchGroupBaseProps {
 }
 export declare const ColorPickerSwatchGroup: ForwardRefExoticComponent<ColorPickerSwatchGroupProps & RefAttributes<HTMLDivElement>>;

package/dist/components/color-picker/color-picker-swatch-indicator.d.cts

@@ -1,7 +1,8 @@
-import { HTMLArkProps } from '../factory';
+import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 
-export type ColorPickerSwatchIndicatorBaseProps = {};
-export interface ColorPickerSwatchIndicatorProps extends HTMLArkProps<'div'>, ColorPickerSwatchIndicatorBaseProps {
+export interface ColorPickerSwatchIndicatorBaseProps extends PolymorphicProps {
+}
+export interface ColorPickerSwatchIndicatorProps extends HTMLProps<'div'>, ColorPickerSwatchIndicatorBaseProps {
 }
 export declare const ColorPickerSwatchIndicator: ForwardRefExoticComponent<ColorPickerSwatchIndicatorProps & RefAttributes<HTMLDivElement>>;

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

@@ -1,7 +1,8 @@
-import { HTMLArkProps } from '../factory';
+import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 
-export type ColorPickerSwatchIndicatorBaseProps = {};
-export interface ColorPickerSwatchIndicatorProps extends HTMLArkProps<'div'>, ColorPickerSwatchIndicatorBaseProps {
+export interface ColorPickerSwatchIndicatorBaseProps extends PolymorphicProps {
+}
+export interface ColorPickerSwatchIndicatorProps extends HTMLProps<'div'>, ColorPickerSwatchIndicatorBaseProps {
 }
 export declare const ColorPickerSwatchIndicator: ForwardRefExoticComponent<ColorPickerSwatchIndicatorProps & RefAttributes<HTMLDivElement>>;

package/dist/components/color-picker/color-picker-swatch-trigger.d.cts

@@ -1,10 +1,10 @@
 import { SwatchTriggerProps } from '@zag-js/color-picker';
 import { Assign } from '../../types';
-import { HTMLArkProps } from '../factory';
+import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 
-export interface ColorPickerSwatchTriggerBaseProps extends SwatchTriggerProps {
+export interface ColorPickerSwatchTriggerBaseProps extends SwatchTriggerProps, PolymorphicProps {
 }
-export interface ColorPickerSwatchTriggerProps extends Assign<HTMLArkProps<'button'>, ColorPickerSwatchTriggerBaseProps> {
+export interface ColorPickerSwatchTriggerProps extends Assign<HTMLProps<'button'>, ColorPickerSwatchTriggerBaseProps> {
 }
 export declare const ColorPickerSwatchTrigger: ForwardRefExoticComponent<ColorPickerSwatchTriggerProps & RefAttributes<HTMLButtonElement>>;

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

@@ -1,10 +1,10 @@
 import { SwatchTriggerProps } from '@zag-js/color-picker';
 import { Assign } from '../../types';
-import { HTMLArkProps } from '../factory';
+import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 
-export interface ColorPickerSwatchTriggerBaseProps extends SwatchTriggerProps {
+export interface ColorPickerSwatchTriggerBaseProps extends SwatchTriggerProps, PolymorphicProps {
 }
-export interface ColorPickerSwatchTriggerProps extends Assign<HTMLArkProps<'button'>, ColorPickerSwatchTriggerBaseProps> {
+export interface ColorPickerSwatchTriggerProps extends Assign<HTMLProps<'button'>, ColorPickerSwatchTriggerBaseProps> {
 }
 export declare const ColorPickerSwatchTrigger: ForwardRefExoticComponent<ColorPickerSwatchTriggerProps & RefAttributes<HTMLButtonElement>>;

package/dist/components/color-picker/color-picker-swatch.d.cts

@@ -1,10 +1,9 @@
 import { SwatchProps } from '@zag-js/color-picker';
-import { Assign } from '../../types';
-import { HTMLArkProps } from '../factory';
+import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 
-export interface ColorPickerSwatchBaseProps extends SwatchProps {
+export interface ColorPickerSwatchBaseProps extends SwatchProps, PolymorphicProps {
 }
-export interface ColorPickerSwatchProps extends Assign<HTMLArkProps<'div'>, ColorPickerSwatchBaseProps> {
+export interface ColorPickerSwatchProps extends HTMLProps<'div'>, ColorPickerSwatchBaseProps {
 }
 export declare const ColorPickerSwatch: ForwardRefExoticComponent<ColorPickerSwatchProps & RefAttributes<HTMLDivElement>>;

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

@@ -1,10 +1,9 @@
 import { SwatchProps } from '@zag-js/color-picker';
-import { Assign } from '../../types';
-import { HTMLArkProps } from '../factory';
+import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 
-export interface ColorPickerSwatchBaseProps extends SwatchProps {
+export interface ColorPickerSwatchBaseProps extends SwatchProps, PolymorphicProps {
 }
-export interface ColorPickerSwatchProps extends Assign<HTMLArkProps<'div'>, ColorPickerSwatchBaseProps> {
+export interface ColorPickerSwatchProps extends HTMLProps<'div'>, ColorPickerSwatchBaseProps {
 }
 export declare const ColorPickerSwatch: ForwardRefExoticComponent<ColorPickerSwatchProps & RefAttributes<HTMLDivElement>>;

package/dist/components/color-picker/color-picker-transparency-grid.d.cts

@@ -1,10 +1,9 @@
 import { TransparencyGridProps } from '@zag-js/color-picker';
-import { Assign } from '../../types';
-import { HTMLArkProps } from '../factory';
+import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 
-export interface ColorPickerTransparencyGridBaseProps extends TransparencyGridProps {
+export interface ColorPickerTransparencyGridBaseProps extends TransparencyGridProps, PolymorphicProps {
 }
-export interface ColorPickerTransparencyGridProps extends Assign<HTMLArkProps<'div'>, ColorPickerTransparencyGridBaseProps> {
+export interface ColorPickerTransparencyGridProps extends HTMLProps<'div'>, ColorPickerTransparencyGridBaseProps {
 }
 export declare const ColorPickerTransparencyGrid: ForwardRefExoticComponent<ColorPickerTransparencyGridProps & RefAttributes<HTMLDivElement>>;

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

@@ -1,10 +1,9 @@
 import { TransparencyGridProps } from '@zag-js/color-picker';
-import { Assign } from '../../types';
-import { HTMLArkProps } from '../factory';
+import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 
-export interface ColorPickerTransparencyGridBaseProps extends TransparencyGridProps {
+export interface ColorPickerTransparencyGridBaseProps extends TransparencyGridProps, PolymorphicProps {
 }
-export interface ColorPickerTransparencyGridProps extends Assign<HTMLArkProps<'div'>, ColorPickerTransparencyGridBaseProps> {
+export interface ColorPickerTransparencyGridProps extends HTMLProps<'div'>, ColorPickerTransparencyGridBaseProps {
 }
 export declare const ColorPickerTransparencyGrid: ForwardRefExoticComponent<ColorPickerTransparencyGridProps & RefAttributes<HTMLDivElement>>;

package/dist/components/color-picker/color-picker-trigger.d.cts

@@ -1,7 +1,8 @@
-import { HTMLArkProps } from '../factory';
+import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 
-export type ColorPickerTriggerBaseProps = {};
-export interface ColorPickerTriggerProps extends HTMLArkProps<'button'>, ColorPickerTriggerBaseProps {
+export interface ColorPickerTriggerBaseProps extends PolymorphicProps {
+}
+export interface ColorPickerTriggerProps extends HTMLProps<'button'>, ColorPickerTriggerBaseProps {
 }
 export declare const ColorPickerTrigger: ForwardRefExoticComponent<ColorPickerTriggerProps & RefAttributes<HTMLButtonElement>>;

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

@@ -1,7 +1,8 @@
-import { HTMLArkProps } from '../factory';
+import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 
-export type ColorPickerTriggerBaseProps = {};
-export interface ColorPickerTriggerProps extends HTMLArkProps<'button'>, ColorPickerTriggerBaseProps {
+export interface ColorPickerTriggerBaseProps extends PolymorphicProps {
+}
+export interface ColorPickerTriggerProps extends HTMLProps<'button'>, ColorPickerTriggerBaseProps {
 }
 export declare const ColorPickerTrigger: ForwardRefExoticComponent<ColorPickerTriggerProps & RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,30 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const createSplitProps = require('../../utils/create-split-props.cjs');
+const factory = require('../factory.cjs');
+const useColorPickerContext = require('./use-color-picker-context.cjs');
+const useColorPickerSwatchPropsContext = require('./use-color-picker-swatch-props-context.cjs');
+
+const ColorPickerValueSwatch = react.forwardRef(
+  (props, ref) => {
+    const [{ respectAlpha }, localProps] = createSplitProps.createSplitProps()(props, [
+      "respectAlpha"
+    ]);
+    const colorPicker = useColorPickerContext.useColorPickerContext();
+    const swatchProps = {
+      respectAlpha,
+      value: colorPicker.valueAsString
+    };
+    const mergedProps = react$1.mergeProps(colorPicker.getSwatchProps(swatchProps), localProps);
+    return /* @__PURE__ */ jsxRuntime.jsx(useColorPickerSwatchPropsContext.ColorPickerSwatchPropsProvider, { value: swatchProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
+  }
+);
+ColorPickerValueSwatch.displayName = "ColorPickerValueSwatch";
+
+exports.ColorPickerValueSwatch = ColorPickerValueSwatch;

package/dist/components/color-picker/color-picker-value-swatch.d.cts

@@ -0,0 +1,12 @@
+import { SwatchProps } from '@zag-js/color-picker';
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+interface ValueSwatchProps extends Omit<SwatchProps, 'value'> {
+}
+export interface ColorPickerValueSwatchBaseProps extends ValueSwatchProps, PolymorphicProps {
+}
+export interface ColorPickerValueSwatchProps extends HTMLProps<'div'>, ColorPickerValueSwatchBaseProps {
+}
+export declare const ColorPickerValueSwatch: ForwardRefExoticComponent<ColorPickerValueSwatchProps & RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,12 @@
+import { SwatchProps } from '@zag-js/color-picker';
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+interface ValueSwatchProps extends Omit<SwatchProps, 'value'> {
+}
+export interface ColorPickerValueSwatchBaseProps extends ValueSwatchProps, PolymorphicProps {
+}
+export interface ColorPickerValueSwatchProps extends HTMLProps<'div'>, ColorPickerValueSwatchBaseProps {
+}
+export declare const ColorPickerValueSwatch: ForwardRefExoticComponent<ColorPickerValueSwatchProps & RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,26 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { createSplitProps } from '../../utils/create-split-props.js';
+import { ark } from '../factory.js';
+import { useColorPickerContext } from './use-color-picker-context.js';
+import { ColorPickerSwatchPropsProvider } from './use-color-picker-swatch-props-context.js';
+
+const ColorPickerValueSwatch = forwardRef(
+  (props, ref) => {
+    const [{ respectAlpha }, localProps] = createSplitProps()(props, [
+      "respectAlpha"
+    ]);
+    const colorPicker = useColorPickerContext();
+    const swatchProps = {
+      respectAlpha,
+      value: colorPicker.valueAsString
+    };
+    const mergedProps = mergeProps(colorPicker.getSwatchProps(swatchProps), localProps);
+    return /* @__PURE__ */ jsx(ColorPickerSwatchPropsProvider, { value: swatchProps, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
+  }
+);
+ColorPickerValueSwatch.displayName = "ColorPickerValueSwatch";
+
+export { ColorPickerValueSwatch };

package/dist/components/color-picker/color-picker-value-text.d.cts

@@ -1,7 +1,8 @@
-import { HTMLArkProps } from '../factory';
+import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 
-export type ColorPickerValueTextBaseProps = {};
-export interface ColorPickerValueTextProps extends HTMLArkProps<'span'>, ColorPickerValueTextBaseProps {
+export interface ColorPickerValueTextBaseProps extends PolymorphicProps {
+}
+export interface ColorPickerValueTextProps extends HTMLProps<'span'>, ColorPickerValueTextBaseProps {
 }
 export declare const ColorPickerValueText: ForwardRefExoticComponent<ColorPickerValueTextProps & RefAttributes<HTMLDivElement>>;

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

@@ -1,7 +1,8 @@
-import { HTMLArkProps } from '../factory';
+import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 
-export type ColorPickerValueTextBaseProps = {};
-export interface ColorPickerValueTextProps extends HTMLArkProps<'span'>, ColorPickerValueTextBaseProps {
+export interface ColorPickerValueTextBaseProps extends PolymorphicProps {
+}
+export interface ColorPickerValueTextProps extends HTMLProps<'span'>, ColorPickerValueTextBaseProps {
 }
 export declare const ColorPickerValueText: ForwardRefExoticComponent<ColorPickerValueTextProps & RefAttributes<HTMLDivElement>>;

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

@@ -6,23 +6,26 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const anatomy = require('@ark-ui/anatomy');
 const react = require('react');
+const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const useColorPickerContext = require('./use-color-picker-context.cjs');
+const useColorPickerFormatContext = require('./use-color-picker-format-context.cjs');
 
 const ColorPickerView = react.forwardRef((props, ref) => {
   const colorPicker = useColorPickerContext.useColorPickerContext();
-  if (colorPicker.format !== props.format) {
+  const [formatProps, restProps] = createSplitProps.createSplitProps()(props, ["format"]);
+  if (colorPicker.format !== formatProps.format) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(useColorPickerFormatContext.ColorPickerFormatPropsProvider, { value: formatProps, children: /* @__PURE__ */ jsxRuntime.jsx(
     factory.ark.div,
     {
       ref,
       "data-format": props.format,
       ...anatomy.colorPickerAnatomy.build().view.attrs,
-      ...props
+      ...restProps
     }
-  );
+  ) });
 });
 ColorPickerView.displayName = "ColorPickerView";
 

package/dist/components/color-picker/color-picker-view.d.cts

@@ -1,10 +1,13 @@
 import { ColorFormat } from '@zag-js/color-picker';
-import { HTMLArkProps } from '../factory';
+import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 
-export interface ColorPickerViewBaseProps {
+interface FormatOptions {
     format: ColorFormat;
 }
-export interface ColorPickerViewProps extends HTMLArkProps<'div'>, ColorPickerViewBaseProps {
+export interface ColorPickerViewBaseProps extends FormatOptions, PolymorphicProps {
+}
+export interface ColorPickerViewProps extends HTMLProps<'div'>, ColorPickerViewBaseProps {
 }
 export declare const ColorPickerView: ForwardRefExoticComponent<ColorPickerViewProps & RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -1,10 +1,13 @@
 import { ColorFormat } from '@zag-js/color-picker';
-import { HTMLArkProps } from '../factory';
+import { HTMLProps, PolymorphicProps } from '../factory';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 
-export interface ColorPickerViewBaseProps {
+interface FormatOptions {
     format: ColorFormat;
 }
-export interface ColorPickerViewProps extends HTMLArkProps<'div'>, ColorPickerViewBaseProps {
+export interface ColorPickerViewBaseProps extends FormatOptions, PolymorphicProps {
+}
+export interface ColorPickerViewProps extends HTMLProps<'div'>, ColorPickerViewBaseProps {
 }
 export declare const ColorPickerView: ForwardRefExoticComponent<ColorPickerViewProps & RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -2,23 +2,26 @@
 import { jsx } from 'react/jsx-runtime';
 import { colorPickerAnatomy } from '@ark-ui/anatomy';
 import { forwardRef } from 'react';
+import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
 import { useColorPickerContext } from './use-color-picker-context.js';
+import { ColorPickerFormatPropsProvider } from './use-color-picker-format-context.js';
 
 const ColorPickerView = forwardRef((props, ref) => {
   const colorPicker = useColorPickerContext();
-  if (colorPicker.format !== props.format) {
+  const [formatProps, restProps] = createSplitProps()(props, ["format"]);
+  if (colorPicker.format !== formatProps.format) {
     return null;
   }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(ColorPickerFormatPropsProvider, { value: formatProps, children: /* @__PURE__ */ jsx(
     ark.div,
     {
       ref,
       "data-format": props.format,
       ...colorPickerAnatomy.build().view.attrs,
-      ...props
+      ...restProps
     }
-  );
+  ) });
 });
 ColorPickerView.displayName = "ColorPickerView";