@ark-ui/react 3.4.0-0 → 3.4.0

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

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

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

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

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

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

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

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

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

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

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

@@ -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-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.cjs

@@ -7,13 +7,15 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
+const useFieldContext = require('../field/use-field-context.cjs');
 const useColorPickerContext = require('./use-color-picker-context.cjs');
 
 const ColorPickerHiddenInput = react.forwardRef(
   (props, ref) => {
     const colorPicker = useColorPickerContext.useColorPickerContext();
     const mergedProps = react$1.mergeProps(colorPicker.getHiddenInputProps(), props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { ...mergedProps, ref });
+    const field = useFieldContext.useFieldContext();
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
   }
 );
 ColorPickerHiddenInput.displayName = "ColorPickerHiddenInput";

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-hidden-input.js

@@ -3,13 +3,15 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.js';
+import { useFieldContext } from '../field/use-field-context.js';
 import { useColorPickerContext } from './use-color-picker-context.js';
 
 const ColorPickerHiddenInput = forwardRef(
   (props, ref) => {
     const colorPicker = useColorPickerContext();
     const mergedProps = mergeProps(colorPicker.getHiddenInputProps(), props);
-    return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });
+    const field = useFieldContext();
+    return /* @__PURE__ */ jsx(ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
   }
 );
 ColorPickerHiddenInput.displayName = "ColorPickerHiddenInput";

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.cjs

@@ -39,6 +39,7 @@ const ColorPickerRoot = react.forwardRef((props, ref) => {
       "open",
       "positioning",
       "readOnly",
+      "required",
       "value"
     ]
   );

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-root.js

@@ -35,6 +35,7 @@ const ColorPickerRoot = forwardRef((props, ref) => {
       "open",
       "positioning",
       "readOnly",
+      "required",
       "value"
     ]
   );

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>>;