@ark-ui/react 3.4.0-0 → 3.4.0

package/dist/components/clipboard/clipboard-trigger.d.ts

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

package/dist/components/collapsible/collapsible-content.d.cts

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

package/dist/components/collapsible/collapsible-content.d.ts

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

package/dist/components/collapsible/collapsible-root-provider.cjs

@@ -12,7 +12,9 @@ const useCollapsibleContext = require('./use-collapsible-context.cjs');
 
 const CollapsibleRootProvider = react.forwardRef(
   (props, ref) => {
-    const [{ value: collapsible }, localProps] = createSplitProps.createSplitProps()(props, ["value"]);
+    const [{ value: collapsible }, localProps] = createSplitProps.createSplitProps()(props, [
+      "value"
+    ]);
     const mergedProps = react$1.mergeProps(collapsible.getRootProps(), localProps);
     return /* @__PURE__ */ jsxRuntime.jsx(useCollapsibleContext.CollapsibleProvider, { value: collapsible, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
   }

package/dist/components/collapsible/collapsible-root-provider.d.cts

@@ -1,10 +1,13 @@
-import { HTMLArkProps } from '../factory';
+import { HTMLProps, PolymorphicProps } from '../factory';
 import { UseCollapsibleReturn } from './use-collapsible';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 
-export interface CollapsibleRootProviderBaseProps {
+interface RootProviderProps {
     value: UseCollapsibleReturn;
 }
-export interface CollapsibleRootProviderProps extends HTMLArkProps<'div'>, CollapsibleRootProviderBaseProps {
+export interface CollapsibleRootProviderBaseProps extends RootProviderProps, PolymorphicProps {
+}
+export interface CollapsibleRootProviderProps extends HTMLProps<'div'>, CollapsibleRootProviderBaseProps {
 }
 export declare const CollapsibleRootProvider: ForwardRefExoticComponent<CollapsibleRootProviderProps & RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/collapsible/collapsible-root-provider.d.ts

@@ -1,10 +1,13 @@
-import { HTMLArkProps } from '../factory';
+import { HTMLProps, PolymorphicProps } from '../factory';
 import { UseCollapsibleReturn } from './use-collapsible';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 
-export interface CollapsibleRootProviderBaseProps {
+interface RootProviderProps {
     value: UseCollapsibleReturn;
 }
-export interface CollapsibleRootProviderProps extends HTMLArkProps<'div'>, CollapsibleRootProviderBaseProps {
+export interface CollapsibleRootProviderBaseProps extends RootProviderProps, PolymorphicProps {
+}
+export interface CollapsibleRootProviderProps extends HTMLProps<'div'>, CollapsibleRootProviderBaseProps {
 }
 export declare const CollapsibleRootProvider: ForwardRefExoticComponent<CollapsibleRootProviderProps & RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/collapsible/collapsible-root-provider.js

@@ -8,7 +8,9 @@ import { CollapsibleProvider } from './use-collapsible-context.js';
 
 const CollapsibleRootProvider = forwardRef(
   (props, ref) => {
-    const [{ value: collapsible }, localProps] = createSplitProps()(props, ["value"]);
+    const [{ value: collapsible }, localProps] = createSplitProps()(props, [
+      "value"
+    ]);
     const mergedProps = mergeProps(collapsible.getRootProps(), localProps);
     return /* @__PURE__ */ jsx(CollapsibleProvider, { value: collapsible, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
   }

package/dist/components/collapsible/collapsible-root.d.cts

@@ -1,10 +1,9 @@
-import { Assign } from '../../types';
-import { HTMLArkProps } from '../factory';
+import { HTMLProps, PolymorphicProps } from '../factory';
 import { UseCollapsibleProps } from './use-collapsible';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 
-export interface CollapsibleRootBaseProps extends UseCollapsibleProps {
+export interface CollapsibleRootBaseProps extends UseCollapsibleProps, PolymorphicProps {
 }
-export interface CollapsibleRootProps extends Assign<HTMLArkProps<'div'>, CollapsibleRootBaseProps> {
+export interface CollapsibleRootProps extends HTMLProps<'div'>, CollapsibleRootBaseProps {
 }
 export declare const CollapsibleRoot: ForwardRefExoticComponent<CollapsibleRootProps & RefAttributes<HTMLDivElement>>;

package/dist/components/collapsible/collapsible-root.d.ts

@@ -1,10 +1,9 @@
-import { Assign } from '../../types';
-import { HTMLArkProps } from '../factory';
+import { HTMLProps, PolymorphicProps } from '../factory';
 import { UseCollapsibleProps } from './use-collapsible';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 
-export interface CollapsibleRootBaseProps extends UseCollapsibleProps {
+export interface CollapsibleRootBaseProps extends UseCollapsibleProps, PolymorphicProps {
 }
-export interface CollapsibleRootProps extends Assign<HTMLArkProps<'div'>, CollapsibleRootBaseProps> {
+export interface CollapsibleRootProps extends HTMLProps<'div'>, CollapsibleRootBaseProps {
 }
 export declare const CollapsibleRoot: ForwardRefExoticComponent<CollapsibleRootProps & RefAttributes<HTMLDivElement>>;

package/dist/components/collapsible/collapsible-trigger.d.cts

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

package/dist/components/collapsible/collapsible-trigger.d.ts

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

package/dist/components/color-picker/color-picker-area-background.d.cts

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

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

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

package/dist/components/color-picker/color-picker-area-thumb.d.cts

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

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

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

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

@@ -1,10 +1,9 @@
 import { AreaProps } 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 ColorPickerAreaBaseProps extends AreaProps {
+export interface ColorPickerAreaBaseProps extends AreaProps, PolymorphicProps {
 }
-export interface ColorPickerAreaProps extends Assign<HTMLArkProps<'div'>, ColorPickerAreaBaseProps> {
+export interface ColorPickerAreaProps extends HTMLProps<'div'>, ColorPickerAreaBaseProps {
 }
 export declare const ColorPickerArea: ForwardRefExoticComponent<ColorPickerAreaProps & RefAttributes<HTMLDivElement>>;

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

@@ -1,10 +1,9 @@
 import { AreaProps } 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 ColorPickerAreaBaseProps extends AreaProps {
+export interface ColorPickerAreaBaseProps extends AreaProps, PolymorphicProps {
 }
-export interface ColorPickerAreaProps extends Assign<HTMLArkProps<'div'>, ColorPickerAreaBaseProps> {
+export interface ColorPickerAreaProps extends HTMLProps<'div'>, ColorPickerAreaBaseProps {
 }
 export declare const ColorPickerArea: ForwardRefExoticComponent<ColorPickerAreaProps & RefAttributes<HTMLDivElement>>;

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

@@ -1,10 +1,9 @@
 import { ChannelInputProps } 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 ColorPickerChannelInputBaseProps extends ChannelInputProps {
+export interface ColorPickerChannelInputBaseProps extends ChannelInputProps, PolymorphicProps {
 }
-export interface ColorPickerChannelInputProps extends Assign<HTMLArkProps<'input'>, ColorPickerChannelInputBaseProps> {
+export interface ColorPickerChannelInputProps extends HTMLProps<'input'>, ColorPickerChannelInputBaseProps {
 }
 export declare const ColorPickerChannelInput: ForwardRefExoticComponent<ColorPickerChannelInputProps & RefAttributes<HTMLInputElement>>;

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

@@ -1,10 +1,9 @@
 import { ChannelInputProps } 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 ColorPickerChannelInputBaseProps extends ChannelInputProps {
+export interface ColorPickerChannelInputBaseProps extends ChannelInputProps, PolymorphicProps {
 }
-export interface ColorPickerChannelInputProps extends Assign<HTMLArkProps<'input'>, ColorPickerChannelInputBaseProps> {
+export interface ColorPickerChannelInputProps extends HTMLProps<'input'>, ColorPickerChannelInputBaseProps {
 }
 export declare const ColorPickerChannelInput: ForwardRefExoticComponent<ColorPickerChannelInputProps & RefAttributes<HTMLInputElement>>;

package/dist/components/color-picker/color-picker-channel-slider-label.cjs

@@ -0,0 +1,21 @@
+'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 factory = require('../factory.cjs');
+const useColorPickerChannelPropsContext = require('./use-color-picker-channel-props-context.cjs');
+const useColorPickerContext = require('./use-color-picker-context.cjs');
+
+const ColorPickerChannelSliderLabel = react.forwardRef((props, ref) => {
+  const colorPicker = useColorPickerContext.useColorPickerContext();
+  const channelProps = useColorPickerChannelPropsContext.useColorPickerChannelPropsContext();
+  const mergedProps = react$1.mergeProps(colorPicker.getChannelSliderLabelProps(channelProps), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref });
+});
+ColorPickerChannelSliderLabel.displayName = "ColorPickerChannelSliderLabel";
+
+exports.ColorPickerChannelSliderLabel = ColorPickerChannelSliderLabel;

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

@@ -0,0 +1,8 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export interface ColorPickerChannelSliderLabelBaseProps extends PolymorphicProps {
+}
+export interface ColorPickerChannelSliderLabelProps extends HTMLProps<'label'>, ColorPickerChannelSliderLabelBaseProps {
+}
+export declare const ColorPickerChannelSliderLabel: ForwardRefExoticComponent<ColorPickerChannelSliderLabelProps & RefAttributes<HTMLLabelElement>>;

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

@@ -0,0 +1,8 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export interface ColorPickerChannelSliderLabelBaseProps extends PolymorphicProps {
+}
+export interface ColorPickerChannelSliderLabelProps extends HTMLProps<'label'>, ColorPickerChannelSliderLabelBaseProps {
+}
+export declare const ColorPickerChannelSliderLabel: ForwardRefExoticComponent<ColorPickerChannelSliderLabelProps & RefAttributes<HTMLLabelElement>>;

package/dist/components/color-picker/color-picker-channel-slider-label.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.js';
+import { useColorPickerChannelPropsContext } from './use-color-picker-channel-props-context.js';
+import { useColorPickerContext } from './use-color-picker-context.js';
+
+const ColorPickerChannelSliderLabel = forwardRef((props, ref) => {
+  const colorPicker = useColorPickerContext();
+  const channelProps = useColorPickerChannelPropsContext();
+  const mergedProps = mergeProps(colorPicker.getChannelSliderLabelProps(channelProps), props);
+  return /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref });
+});
+ColorPickerChannelSliderLabel.displayName = "ColorPickerChannelSliderLabel";
+
+export { ColorPickerChannelSliderLabel };

package/dist/components/color-picker/color-picker-channel-slider-thumb.cjs

@@ -9,11 +9,14 @@ const react = require('react');
 const factory = require('../factory.cjs');
 const useColorPickerChannelPropsContext = require('./use-color-picker-channel-props-context.cjs');
 const useColorPickerContext = require('./use-color-picker-context.cjs');
+const useColorPickerFormatContext = require('./use-color-picker-format-context.cjs');
 
 const ColorPickerChannelSliderThumb = react.forwardRef((props, ref) => {
   const colorPicker = useColorPickerContext.useColorPickerContext();
   const channelProps = useColorPickerChannelPropsContext.useColorPickerChannelPropsContext();
-  const mergedProps = react$1.mergeProps(colorPicker.getChannelSliderThumbProps(channelProps), props);
+  const formatProps = useColorPickerFormatContext.useColorPickerFormatPropsContext();
+  const channelSliderProps = { ...channelProps, ...formatProps };
+  const mergedProps = react$1.mergeProps(colorPicker.getChannelSliderThumbProps(channelSliderProps), props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
 ColorPickerChannelSliderThumb.displayName = "ColorPickerChannelSliderThumb";

package/dist/components/color-picker/color-picker-channel-slider-thumb.d.cts

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

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

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

package/dist/components/color-picker/color-picker-channel-slider-thumb.js

@@ -5,11 +5,14 @@ import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { useColorPickerChannelPropsContext } from './use-color-picker-channel-props-context.js';
 import { useColorPickerContext } from './use-color-picker-context.js';
+import { useColorPickerFormatPropsContext } from './use-color-picker-format-context.js';
 
 const ColorPickerChannelSliderThumb = forwardRef((props, ref) => {
   const colorPicker = useColorPickerContext();
   const channelProps = useColorPickerChannelPropsContext();
-  const mergedProps = mergeProps(colorPicker.getChannelSliderThumbProps(channelProps), props);
+  const formatProps = useColorPickerFormatPropsContext();
+  const channelSliderProps = { ...channelProps, ...formatProps };
+  const mergedProps = mergeProps(colorPicker.getChannelSliderThumbProps(channelSliderProps), props);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
 ColorPickerChannelSliderThumb.displayName = "ColorPickerChannelSliderThumb";

package/dist/components/color-picker/color-picker-channel-slider-track.cjs

@@ -9,11 +9,14 @@ const react = require('react');
 const factory = require('../factory.cjs');
 const useColorPickerChannelPropsContext = require('./use-color-picker-channel-props-context.cjs');
 const useColorPickerContext = require('./use-color-picker-context.cjs');
+const useColorPickerFormatContext = require('./use-color-picker-format-context.cjs');
 
 const ColorPickerChannelSliderTrack = react.forwardRef((props, ref) => {
   const colorPicker = useColorPickerContext.useColorPickerContext();
   const channelProps = useColorPickerChannelPropsContext.useColorPickerChannelPropsContext();
-  const mergedProps = react$1.mergeProps(colorPicker.getChannelSliderTrackProps(channelProps), props);
+  const formatProps = useColorPickerFormatContext.useColorPickerFormatPropsContext();
+  const channelSliderProps = { ...channelProps, ...formatProps };
+  const mergedProps = react$1.mergeProps(colorPicker.getChannelSliderTrackProps(channelSliderProps), props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
 ColorPickerChannelSliderTrack.displayName = "ColorPickerChannelSliderTrack";

package/dist/components/color-picker/color-picker-channel-slider-track.d.cts

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

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

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

package/dist/components/color-picker/color-picker-channel-slider-track.js

@@ -5,11 +5,14 @@ import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { useColorPickerChannelPropsContext } from './use-color-picker-channel-props-context.js';
 import { useColorPickerContext } from './use-color-picker-context.js';
+import { useColorPickerFormatPropsContext } from './use-color-picker-format-context.js';
 
 const ColorPickerChannelSliderTrack = forwardRef((props, ref) => {
   const colorPicker = useColorPickerContext();
   const channelProps = useColorPickerChannelPropsContext();
-  const mergedProps = mergeProps(colorPicker.getChannelSliderTrackProps(channelProps), props);
+  const formatProps = useColorPickerFormatPropsContext();
+  const channelSliderProps = { ...channelProps, ...formatProps };
+  const mergedProps = mergeProps(colorPicker.getChannelSliderTrackProps(channelSliderProps), props);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
 ColorPickerChannelSliderTrack.displayName = "ColorPickerChannelSliderTrack";

package/dist/components/color-picker/color-picker-channel-slider-value-text.cjs

@@ -0,0 +1,23 @@
+'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 useLocaleContext = require('../../providers/locale/use-locale-context.cjs');
+const factory = require('../factory.cjs');
+const useColorPickerChannelPropsContext = require('./use-color-picker-channel-props-context.cjs');
+const useColorPickerContext = require('./use-color-picker-context.cjs');
+
+const ColorPickerChannelSliderValueText = react.forwardRef((props, ref) => {
+  const { locale } = useLocaleContext.useLocaleContext();
+  const colorPicker = useColorPickerContext.useColorPickerContext();
+  const channelProps = useColorPickerChannelPropsContext.useColorPickerChannelPropsContext();
+  const mergedProps = react$1.mergeProps(colorPicker.getChannelSliderValueTextProps(channelProps), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref, children: props.children || colorPicker.getChannelValueText(channelProps.channel, locale) });
+});
+ColorPickerChannelSliderValueText.displayName = "ColorPickerChannelSliderValueText";
+
+exports.ColorPickerChannelSliderValueText = ColorPickerChannelSliderValueText;

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

@@ -0,0 +1,8 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export interface ColorPickerChannelSliderValueTextBaseProps extends PolymorphicProps {
+}
+export interface ColorPickerChannelSliderValueTextProps extends HTMLProps<'span'>, ColorPickerChannelSliderValueTextBaseProps {
+}
+export declare const ColorPickerChannelSliderValueText: ForwardRefExoticComponent<ColorPickerChannelSliderValueTextProps & RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +1,8 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export interface ColorPickerChannelSliderValueTextBaseProps extends PolymorphicProps {
+}
+export interface ColorPickerChannelSliderValueTextProps extends HTMLProps<'span'>, ColorPickerChannelSliderValueTextBaseProps {
+}
+export declare const ColorPickerChannelSliderValueText: ForwardRefExoticComponent<ColorPickerChannelSliderValueTextProps & RefAttributes<HTMLSpanElement>>;

package/dist/components/color-picker/color-picker-channel-slider-value-text.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { useLocaleContext } from '../../providers/locale/use-locale-context.js';
+import { ark } from '../factory.js';
+import { useColorPickerChannelPropsContext } from './use-color-picker-channel-props-context.js';
+import { useColorPickerContext } from './use-color-picker-context.js';
+
+const ColorPickerChannelSliderValueText = forwardRef((props, ref) => {
+  const { locale } = useLocaleContext();
+  const colorPicker = useColorPickerContext();
+  const channelProps = useColorPickerChannelPropsContext();
+  const mergedProps = mergeProps(colorPicker.getChannelSliderValueTextProps(channelProps), props);
+  return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref, children: props.children || colorPicker.getChannelValueText(channelProps.channel, locale) });
+});
+ColorPickerChannelSliderValueText.displayName = "ColorPickerChannelSliderValueText";
+
+export { ColorPickerChannelSliderValueText };

package/dist/components/color-picker/color-picker-channel-slider.cjs

@@ -10,6 +10,7 @@ const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
 const useColorPickerChannelPropsContext = require('./use-color-picker-channel-props-context.cjs');
 const useColorPickerContext = require('./use-color-picker-context.cjs');
+const useColorPickerFormatContext = require('./use-color-picker-format-context.cjs');
 
 const ColorPickerChannelSlider = react.forwardRef(
   (props, ref) => {
@@ -18,7 +19,12 @@ const ColorPickerChannelSlider = react.forwardRef(
       "orientation"
     ]);
     const colorPicker = useColorPickerContext.useColorPickerContext();
-    const mergedProps = react$1.mergeProps(colorPicker.getChannelSliderProps(channelProps), localProps);
+    const formatProps = useColorPickerFormatContext.useColorPickerFormatPropsContext();
+    const channelSliderProps = { ...channelProps, ...formatProps };
+    const mergedProps = react$1.mergeProps(
+      colorPicker.getChannelSliderProps(channelSliderProps),
+      localProps
+    );
     return /* @__PURE__ */ jsxRuntime.jsx(useColorPickerChannelPropsContext.ColorPickerChannelPropsProvider, { value: channelProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
   }
 );

package/dist/components/color-picker/color-picker-channel-slider.d.cts

@@ -1,10 +1,9 @@
 import { ChannelProps } 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 ColorPickerChannelSliderBaseProps extends ChannelProps {
+export interface ColorPickerChannelSliderBaseProps extends ChannelProps, PolymorphicProps {
 }
-export interface ColorPickerChannelSliderProps extends Assign<HTMLArkProps<'div'>, ColorPickerChannelSliderBaseProps> {
+export interface ColorPickerChannelSliderProps extends HTMLProps<'div'>, ColorPickerChannelSliderBaseProps {
 }
 export declare const ColorPickerChannelSlider: ForwardRefExoticComponent<ColorPickerChannelSliderProps & RefAttributes<HTMLDivElement>>;

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

@@ -1,10 +1,9 @@
 import { ChannelProps } 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 ColorPickerChannelSliderBaseProps extends ChannelProps {
+export interface ColorPickerChannelSliderBaseProps extends ChannelProps, PolymorphicProps {
 }
-export interface ColorPickerChannelSliderProps extends Assign<HTMLArkProps<'div'>, ColorPickerChannelSliderBaseProps> {
+export interface ColorPickerChannelSliderProps extends HTMLProps<'div'>, ColorPickerChannelSliderBaseProps {
 }
 export declare const ColorPickerChannelSlider: ForwardRefExoticComponent<ColorPickerChannelSliderProps & RefAttributes<HTMLDivElement>>;

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

@@ -6,6 +6,7 @@ import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
 import { ColorPickerChannelPropsProvider } from './use-color-picker-channel-props-context.js';
 import { useColorPickerContext } from './use-color-picker-context.js';
+import { useColorPickerFormatPropsContext } from './use-color-picker-format-context.js';
 
 const ColorPickerChannelSlider = forwardRef(
   (props, ref) => {
@@ -14,7 +15,12 @@ const ColorPickerChannelSlider = forwardRef(
       "orientation"
     ]);
     const colorPicker = useColorPickerContext();
-    const mergedProps = mergeProps(colorPicker.getChannelSliderProps(channelProps), localProps);
+    const formatProps = useColorPickerFormatPropsContext();
+    const channelSliderProps = { ...channelProps, ...formatProps };
+    const mergedProps = mergeProps(
+      colorPicker.getChannelSliderProps(channelSliderProps),
+      localProps
+    );
     return /* @__PURE__ */ jsx(ColorPickerChannelPropsProvider, { value: channelProps, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
   }
 );

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

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