@ark-ui/react 0.10.0-beta.0 → 0.10.0

package/checkbox/checkbox-input.cjs

@@ -4,15 +4,16 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const checkboxContext = require('./checkbox-context.cjs');
 
-const CheckboxInput = forwardRef.forwardRef((props, ref) => {
+const CheckboxInput = react.forwardRef((props, ref) => {
   const { inputProps } = checkboxContext.useCheckboxContext();
-  const mergedProps = react.mergeProps(inputProps, props);
+  const mergedProps = react$1.mergeProps(inputProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { ...mergedProps, ref });
 });
+CheckboxInput.displayName = "CheckboxInput";
 
 exports.CheckboxInput = CheckboxInput;

package/checkbox/checkbox-input.d.ts

@@ -1,5 +1,8 @@
-import type { Assign } from '../types';
-import type { ForwardRefExoticComponent } from 'react';
-import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
-export type CheckboxInputProps = HTMLArkProps<'input'>;
-export declare const CheckboxInput: ForwardRefExoticComponent<Assign<AsChildComponentProps<"input">, Record<never, never>>>;
+import type { ForwardRefExoticComponent, DetailedHTMLProps, InputHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
+export type CheckboxInputProps = ComponentPropsWithoutRef<typeof ark.input>;
+export declare const CheckboxInput: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+    ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref"> & RefAttributes<HTMLInputElement>>;

package/checkbox/checkbox-input.mjs

@@ -1,8 +1,8 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { forwardRef } from '../forward-ref.mjs';
 import { useCheckboxContext } from './checkbox-context.mjs';
 
 const CheckboxInput = forwardRef((props, ref) => {
@@ -10,5 +10,6 @@ const CheckboxInput = forwardRef((props, ref) => {
   const mergedProps = mergeProps(inputProps, props);
   return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });
 });
+CheckboxInput.displayName = "CheckboxInput";
 
 export { CheckboxInput };

package/checkbox/checkbox-label.cjs

@@ -4,15 +4,16 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const checkboxContext = require('./checkbox-context.cjs');
 
-const CheckboxLabel = forwardRef.forwardRef((props, ref) => {
+const CheckboxLabel = react.forwardRef((props, ref) => {
   const { labelProps } = checkboxContext.useCheckboxContext();
-  const mergedProps = react.mergeProps(labelProps, props);
+  const mergedProps = react$1.mergeProps(labelProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref });
 });
+CheckboxLabel.displayName = "CheckboxLabel";
 
 exports.CheckboxLabel = CheckboxLabel;

package/checkbox/checkbox-label.d.ts

@@ -1,5 +1,8 @@
-import type { Assign } from '../types';
-import type { ForwardRefExoticComponent } from 'react';
-import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
-export type CheckboxLabelProps = HTMLArkProps<'span'>;
-export declare const CheckboxLabel: ForwardRefExoticComponent<Assign<AsChildComponentProps<"span">, Record<never, never>>>;
+import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
+export type CheckboxLabelProps = ComponentPropsWithoutRef<typeof ark.span>;
+export declare const CheckboxLabel: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref"> & RefAttributes<HTMLSpanElement>>;

package/checkbox/checkbox-label.mjs

@@ -1,8 +1,8 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { forwardRef } from '../forward-ref.mjs';
 import { useCheckboxContext } from './checkbox-context.mjs';
 
 const CheckboxLabel = forwardRef((props, ref) => {
@@ -10,5 +10,6 @@ const CheckboxLabel = forwardRef((props, ref) => {
   const mergedProps = mergeProps(labelProps, props);
   return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });
 });
+CheckboxLabel.displayName = "CheckboxLabel";
 
 export { CheckboxLabel };

package/checkbox/checkbox.cjs

@@ -4,16 +4,15 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
-require('react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const runIfFn = require('../run-if-fn.cjs');
 const checkboxContext = require('./checkbox-context.cjs');
 const useCheckbox = require('./use-checkbox.cjs');
 
-const Checkbox = forwardRef.forwardRef((props, ref) => {
+const Checkbox = react.forwardRef((props, ref) => {
   const [useCheckboxProps, { children, ...labelProps }] = createSplitProps.createSplitProps()(
     props,
     [
@@ -32,9 +31,10 @@ const Checkbox = forwardRef.forwardRef((props, ref) => {
     ]
   );
   const checkbox = useCheckbox.useCheckbox(useCheckboxProps);
-  const mergedProps = react.mergeProps(checkbox.rootProps, labelProps);
+  const mergedProps = react$1.mergeProps(checkbox.rootProps, labelProps);
   const view = runIfFn.runIfFn(children, checkbox);
   return /* @__PURE__ */ jsxRuntime.jsx(checkboxContext.CheckboxProvider, { value: checkbox, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref, children: view }) });
 });
+Checkbox.displayName = "Checkbox";
 
 exports.Checkbox = Checkbox;

package/checkbox/checkbox.d.ts

@@ -1,11 +1,15 @@
-import type { ForwardRefExoticComponent, type ReactNode } from 'react';
-import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
+import type { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef,  type ReactNode } from 'react';
+import { ark } from '../factory';
 import { type Assign } from '../types';
 import { type CheckboxContext } from './checkbox-context';
 import { type UseCheckboxProps } from './use-checkbox';
-export type CheckboxProps = Assign<HTMLArkProps<'label'>, Foo>;
-type Foo = Assign<UseCheckboxProps, {
+export type CheckboxProps = Assign<ComponentPropsWithoutRef<typeof ark.label>, Assign<UseCheckboxProps, {
     children: ReactNode | ((pages: CheckboxContext) => ReactNode);
-}>;
-export declare const Checkbox: ForwardRefExoticComponent<Assign<AsChildComponentProps<"label">, Foo>>;
-export {};
+}>>;
+export declare const Checkbox: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
+    ref?: ((instance: HTMLLabelElement | null) => void) | RefObject<HTMLLabelElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref">, "name" | "value" | "children" | "form" | "id" | "onChange" | "dir" | "disabled" | "checked" | "required" | "getRootNode" | "ids" | "invalid"> & Omit<UseCheckboxProps, "children"> & {
+    children: ReactNode | ((pages: CheckboxContext) => ReactNode);
+} & RefAttributes<HTMLLabelElement>>;

package/checkbox/checkbox.mjs

@@ -1,10 +1,9 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
-import 'react';
+import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
-import { forwardRef } from '../forward-ref.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
 import { CheckboxProvider } from './checkbox-context.mjs';
 import { useCheckbox } from './use-checkbox.mjs';
@@ -32,5 +31,6 @@ const Checkbox = forwardRef((props, ref) => {
   const view = runIfFn(children, checkbox);
   return /* @__PURE__ */ jsx(CheckboxProvider, { value: checkbox, children: /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref, children: view }) });
 });
+Checkbox.displayName = "Checkbox";
 
 export { Checkbox };

package/checkbox/use-checkbox.cjs

@@ -4,8 +4,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const checkbox = require('@zag-js/checkbox');
-const react = require('@zag-js/react');
-const React = require('react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {
@@ -30,12 +30,12 @@ const checkbox__namespace = /*#__PURE__*/_interopNamespaceDefault(checkbox);
 const useCheckbox = (props) => {
   const getRootNode = environmentContext.useEnvironmentContext();
   const context = {
-    id: React.useId(),
+    id: react.useId(),
     getRootNode,
     ...props
   };
-  const [state, send] = react.useMachine(checkbox__namespace.machine(context), { context });
-  return checkbox__namespace.connect(state, send, react.normalizeProps);
+  const [state, send] = react$1.useMachine(checkbox__namespace.machine(context), { context });
+  return checkbox__namespace.connect(state, send, react$1.normalizeProps);
 };
 
 exports.useCheckbox = useCheckbox;

package/color-picker/color-picker-area-gradient.cjs

@@ -4,17 +4,20 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const colorPickerAreaContext = require('./color-picker-area-context.cjs');
 const colorPickerContext = require('./color-picker-context.cjs');
 
-const ColorPickerAreaGradient = forwardRef.forwardRef((props, ref) => {
-  const colorAreaProps = colorPickerAreaContext.useColorPickerAreaContext();
-  const { getAreaGradientProps } = colorPickerContext.useColorPickerContext();
-  const mergedProps = react.mergeProps(getAreaGradientProps(colorAreaProps), props);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
-});
+const ColorPickerAreaGradient = react.forwardRef(
+  (props, ref) => {
+    const colorAreaProps = colorPickerAreaContext.useColorPickerAreaContext();
+    const { getAreaGradientProps } = colorPickerContext.useColorPickerContext();
+    const mergedProps = react$1.mergeProps(getAreaGradientProps(colorAreaProps), props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+  }
+);
+ColorPickerAreaGradient.displayName = "ColorPickerAreaGradient";
 
 exports.ColorPickerAreaGradient = ColorPickerAreaGradient;

package/color-picker/color-picker-area-gradient.d.ts

@@ -1,5 +1,8 @@
-import type { Assign } from '../types';
-import type { ForwardRefExoticComponent } from 'react';
-import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
-export type ColorPickerAreaGradientProps = HTMLArkProps<'div'>;
-export declare const ColorPickerAreaGradient: ForwardRefExoticComponent<Assign<AsChildComponentProps<"div">, Record<never, never>>>;
+import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
+export type ColorPickerAreaGradientProps = ComponentPropsWithoutRef<typeof ark.div>;
+export declare const ColorPickerAreaGradient: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref"> & RefAttributes<HTMLDivElement>>;

package/color-picker/color-picker-area-gradient.mjs

@@ -1,16 +1,19 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { forwardRef } from '../forward-ref.mjs';
 import { useColorPickerAreaContext } from './color-picker-area-context.mjs';
 import { useColorPickerContext } from './color-picker-context.mjs';
 
-const ColorPickerAreaGradient = forwardRef((props, ref) => {
-  const colorAreaProps = useColorPickerAreaContext();
-  const { getAreaGradientProps } = useColorPickerContext();
-  const mergedProps = mergeProps(getAreaGradientProps(colorAreaProps), props);
-  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
-});
+const ColorPickerAreaGradient = forwardRef(
+  (props, ref) => {
+    const colorAreaProps = useColorPickerAreaContext();
+    const { getAreaGradientProps } = useColorPickerContext();
+    const mergedProps = mergeProps(getAreaGradientProps(colorAreaProps), props);
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+  }
+);
+ColorPickerAreaGradient.displayName = "ColorPickerAreaGradient";
 
 export { ColorPickerAreaGradient };

package/color-picker/color-picker-area-thumb.cjs

@@ -4,17 +4,20 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const colorPickerAreaContext = require('./color-picker-area-context.cjs');
 const colorPickerContext = require('./color-picker-context.cjs');
 
-const ColorPickerAreaThumb = forwardRef.forwardRef((props, ref) => {
-  const colorAreaProps = colorPickerAreaContext.useColorPickerAreaContext();
-  const { getAreaThumbProps } = colorPickerContext.useColorPickerContext();
-  const mergedProps = react.mergeProps(getAreaThumbProps(colorAreaProps), props);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
-});
+const ColorPickerAreaThumb = react.forwardRef(
+  (props, ref) => {
+    const colorAreaProps = colorPickerAreaContext.useColorPickerAreaContext();
+    const { getAreaThumbProps } = colorPickerContext.useColorPickerContext();
+    const mergedProps = react$1.mergeProps(getAreaThumbProps(colorAreaProps), props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+  }
+);
+ColorPickerAreaThumb.displayName = "ColorPickerAreaThumb";
 
 exports.ColorPickerAreaThumb = ColorPickerAreaThumb;

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

@@ -1,5 +1,8 @@
-import type { Assign } from '../types';
-import type { ForwardRefExoticComponent } from 'react';
-import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
-export type ColorPickerAreaThumbProps = HTMLArkProps<'div'>;
-export declare const ColorPickerAreaThumb: ForwardRefExoticComponent<Assign<AsChildComponentProps<"div">, Record<never, never>>>;
+import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
+export type ColorPickerAreaThumbProps = ComponentPropsWithoutRef<typeof ark.div>;
+export declare const ColorPickerAreaThumb: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref"> & RefAttributes<HTMLDivElement>>;

package/color-picker/color-picker-area-thumb.mjs

@@ -1,16 +1,19 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { forwardRef } from '../forward-ref.mjs';
 import { useColorPickerAreaContext } from './color-picker-area-context.mjs';
 import { useColorPickerContext } from './color-picker-context.mjs';
 
-const ColorPickerAreaThumb = forwardRef((props, ref) => {
-  const colorAreaProps = useColorPickerAreaContext();
-  const { getAreaThumbProps } = useColorPickerContext();
-  const mergedProps = mergeProps(getAreaThumbProps(colorAreaProps), props);
-  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
-});
+const ColorPickerAreaThumb = forwardRef(
+  (props, ref) => {
+    const colorAreaProps = useColorPickerAreaContext();
+    const { getAreaThumbProps } = useColorPickerContext();
+    const mergedProps = mergeProps(getAreaThumbProps(colorAreaProps), props);
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+  }
+);
+ColorPickerAreaThumb.displayName = "ColorPickerAreaThumb";
 
 export { ColorPickerAreaThumb };

package/color-picker/color-picker-area.cjs

@@ -4,21 +4,22 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const colorPickerAreaContext = require('./color-picker-area-context.cjs');
 const colorPickerContext = require('./color-picker-context.cjs');
 
-const ColorPickerArea = forwardRef.forwardRef((props, ref) => {
+const ColorPickerArea = react.forwardRef((props, ref) => {
   const [channelProps, divprops] = createSplitProps.createSplitProps()(props, [
     "xChannel",
     "yChannel"
   ]);
   const { getAreaProps } = colorPickerContext.useColorPickerContext();
-  const mergedProps = react.mergeProps(getAreaProps(channelProps), divprops);
+  const mergedProps = react$1.mergeProps(getAreaProps(channelProps), divprops);
   return /* @__PURE__ */ jsxRuntime.jsx(colorPickerAreaContext.ColorPickerAreaProvider, { value: channelProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
 });
+ColorPickerArea.displayName = "ColorPickerArea";
 
 exports.ColorPickerArea = ColorPickerArea;

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

@@ -1,6 +1,10 @@
-import type { ForwardRefExoticComponent } from 'react';
 import type { ColorAreaProps } from '@zag-js/color-picker';
-import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
+import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
 import type { Assign } from '../types';
-export type ColorPickerAreaProps = Assign<HTMLArkProps<'div'>, ColorAreaProps>;
-export declare const ColorPickerArea: ForwardRefExoticComponent<Assign<AsChildComponentProps<"div">, ColorAreaProps>>;
+export type ColorPickerAreaProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, ColorAreaProps>;
+export declare const ColorPickerArea: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref">, keyof ColorAreaProps> & ColorAreaProps & RefAttributes<HTMLDivElement>>;

package/color-picker/color-picker-area.mjs

@@ -1,9 +1,9 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
-import { forwardRef } from '../forward-ref.mjs';
 import { ColorPickerAreaProvider } from './color-picker-area-context.mjs';
 import { useColorPickerContext } from './color-picker-context.mjs';
 
@@ -16,5 +16,6 @@ const ColorPickerArea = forwardRef((props, ref) => {
   const mergedProps = mergeProps(getAreaProps(channelProps), divprops);
   return /* @__PURE__ */ jsx(ColorPickerAreaProvider, { value: channelProps, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
 });
+ColorPickerArea.displayName = "ColorPickerArea";
 
 export { ColorPickerArea };

package/color-picker/color-picker-channel-input.cjs

@@ -4,20 +4,23 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const colorPickerContext = require('./color-picker-context.cjs');
 
-const ColorPickerChannelInput = forwardRef.forwardRef((props, ref) => {
-  const [channelProps, inputProps] = createSplitProps.createSplitProps()(props, [
-    "channel",
-    "orientation"
-  ]);
-  const { getChannelInputProps } = colorPickerContext.useColorPickerContext();
-  const mergedProps = react.mergeProps(getChannelInputProps(channelProps), inputProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { ...mergedProps, ref });
-});
+const ColorPickerChannelInput = react.forwardRef(
+  (props, ref) => {
+    const [channelProps, inputProps] = createSplitProps.createSplitProps()(props, [
+      "channel",
+      "orientation"
+    ]);
+    const { getChannelInputProps } = colorPickerContext.useColorPickerContext();
+    const mergedProps = react$1.mergeProps(getChannelInputProps(channelProps), inputProps);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { ...mergedProps, ref });
+  }
+);
+ColorPickerChannelInput.displayName = "ColorPickerChannelInput";
 
 exports.ColorPickerChannelInput = ColorPickerChannelInput;

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

@@ -1,6 +1,10 @@
-import type { ForwardRefExoticComponent } from 'react';
 import type { ColorChannelInputProps } from '@zag-js/color-picker';
-import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
+import type { ForwardRefExoticComponent, InputHTMLAttributes, DetailedHTMLProps, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
 import type { Assign } from '../types';
-export type ColorPickerChannelInputProps = Assign<HTMLArkProps<'input'>, ColorChannelInputProps>;
-export declare const ColorPickerChannelInput: ForwardRefExoticComponent<Assign<AsChildComponentProps<"input">, ColorChannelInputProps>>;
+export type ColorPickerChannelInputProps = Assign<ColorChannelInputProps, ComponentPropsWithoutRef<typeof ark.input>>;
+export declare const ColorPickerChannelInput: ForwardRefExoticComponent<Omit<ColorChannelInputProps, "key" | keyof InputHTMLAttributes<HTMLInputElement> | "asChild"> & Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+    ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref"> & RefAttributes<HTMLInputElement>>;

package/color-picker/color-picker-channel-input.mjs

@@ -1,19 +1,22 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
-import { forwardRef } from '../forward-ref.mjs';
 import { useColorPickerContext } from './color-picker-context.mjs';
 
-const ColorPickerChannelInput = forwardRef((props, ref) => {
-  const [channelProps, inputProps] = createSplitProps()(props, [
-    "channel",
-    "orientation"
-  ]);
-  const { getChannelInputProps } = useColorPickerContext();
-  const mergedProps = mergeProps(getChannelInputProps(channelProps), inputProps);
-  return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });
-});
+const ColorPickerChannelInput = forwardRef(
+  (props, ref) => {
+    const [channelProps, inputProps] = createSplitProps()(props, [
+      "channel",
+      "orientation"
+    ]);
+    const { getChannelInputProps } = useColorPickerContext();
+    const mergedProps = mergeProps(getChannelInputProps(channelProps), inputProps);
+    return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });
+  }
+);
+ColorPickerChannelInput.displayName = "ColorPickerChannelInput";
 
 export { ColorPickerChannelInput };

package/color-picker/color-picker-channel-slider-background.cjs

@@ -4,17 +4,18 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const colorPickerChannelSliderContext = require('./color-picker-channel-slider-context.cjs');
 const colorPickerContext = require('./color-picker-context.cjs');
 
-const ColorPickerChannelSliderBackground = forwardRef.forwardRef((props, ref) => {
+const ColorPickerChannelSliderBackground = react.forwardRef((props, ref) => {
   const sliderContext = colorPickerChannelSliderContext.useColorPickerChannelSliderContext();
   const { getChannelSliderBackgroundProps } = colorPickerContext.useColorPickerContext();
-  const mergedProps = react.mergeProps(getChannelSliderBackgroundProps(sliderContext), props);
+  const mergedProps = react$1.mergeProps(getChannelSliderBackgroundProps(sliderContext), props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
+ColorPickerChannelSliderBackground.displayName = "ColorPickerChannelSliderBackground";
 
 exports.ColorPickerChannelSliderBackground = ColorPickerChannelSliderBackground;

package/color-picker/color-picker-channel-slider-background.d.ts

@@ -1,5 +1,8 @@
-import type { Assign } from '../types';
-import type { ForwardRefExoticComponent } from 'react';
-import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
-export type ColorPickerChannelSliderBackgroundProps = HTMLArkProps<'div'>;
-export declare const ColorPickerChannelSliderBackground: ForwardRefExoticComponent<Assign<AsChildComponentProps<"div">, Record<never, never>>>;
+import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
+export type ColorPickerChannelSliderBackgroundProps = ComponentPropsWithoutRef<typeof ark.div>;
+export declare const ColorPickerChannelSliderBackground: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref"> & RefAttributes<HTMLDivElement>>;

package/color-picker/color-picker-channel-slider-background.mjs

@@ -1,8 +1,8 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { forwardRef } from '../forward-ref.mjs';
 import { useColorPickerChannelSliderContext } from './color-picker-channel-slider-context.mjs';
 import { useColorPickerContext } from './color-picker-context.mjs';
 
@@ -12,5 +12,6 @@ const ColorPickerChannelSliderBackground = forwardRef((props, ref) => {
   const mergedProps = mergeProps(getChannelSliderBackgroundProps(sliderContext), props);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
+ColorPickerChannelSliderBackground.displayName = "ColorPickerChannelSliderBackground";
 
 export { ColorPickerChannelSliderBackground };

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

@@ -4,17 +4,18 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const colorPickerChannelSliderContext = require('./color-picker-channel-slider-context.cjs');
 const colorPickerContext = require('./color-picker-context.cjs');
 
-const ColorPickerChannelSliderThumb = forwardRef.forwardRef((props, ref) => {
+const ColorPickerChannelSliderThumb = react.forwardRef((props, ref) => {
   const sliderContext = colorPickerChannelSliderContext.useColorPickerChannelSliderContext();
   const { getChannelSliderThumbProps } = colorPickerContext.useColorPickerContext();
-  const mergedProps = react.mergeProps(getChannelSliderThumbProps(sliderContext), props);
+  const mergedProps = react$1.mergeProps(getChannelSliderThumbProps(sliderContext), props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
+ColorPickerChannelSliderThumb.displayName = "ColorPickerChannelSliderThumb";
 
 exports.ColorPickerChannelSliderThumb = ColorPickerChannelSliderThumb;

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

@@ -1,5 +1,8 @@
-import type { Assign } from '../types';
-import type { ForwardRefExoticComponent } from 'react';
-import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
-export type ColorPickerChannelSliderThumbProps = HTMLArkProps<'div'>;
-export declare const ColorPickerChannelSliderThumb: ForwardRefExoticComponent<Assign<AsChildComponentProps<"div">, Record<never, never>>>;
+import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
+export type ColorPickerChannelSliderThumbProps = ComponentPropsWithoutRef<typeof ark.div>;
+export declare const ColorPickerChannelSliderThumb: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref"> & RefAttributes<HTMLDivElement>>;