@ark-ui/react 0.9.0 → 0.10.0-beta.1

package/color-picker/color-picker-channel-slider-thumb.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 ColorPickerChannelSliderThumb = forwardRef((props, ref) => {
   const mergedProps = mergeProps(getChannelSliderThumbProps(sliderContext), props);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
+ColorPickerChannelSliderThumb.displayName = "ColorPickerChannelSliderThumb";
 
 export { ColorPickerChannelSliderThumb };

package/color-picker/color-picker-channel-slider-track.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 colorPickerChannelSliderContext = require('./color-picker-channel-slider-context.cjs');
 const colorPickerContext = require('./color-picker-context.cjs');
 
-const ColorPickerChannelSliderTrack = forwardRef.forwardRef((props, ref) => {
+const ColorPickerChannelSliderTrack = react.forwardRef((props, ref) => {
   const [channelProps, localProps] = createSplitProps.createSplitProps()(props, [
     "channel",
     "orientation"
   ]);
   const { getChannelSliderTrackProps } = colorPickerContext.useColorPickerContext();
-  const mergedProps = react.mergeProps(getChannelSliderTrackProps(channelProps), localProps);
+  const mergedProps = react$1.mergeProps(getChannelSliderTrackProps(channelProps), localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(colorPickerChannelSliderContext.ColorPickerChannelSliderProvider, { value: channelProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
 });
+ColorPickerChannelSliderTrack.displayName = "ColorPickerChannelSliderTrack";
 
 exports.ColorPickerChannelSliderTrack = ColorPickerChannelSliderTrack;

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

@@ -1,6 +1,10 @@
-import type { ForwardRefExoticComponent } from 'react';
 import type { ColorChannelProps } 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 ColorPickerChannelSliderTrackProps = Assign<HTMLArkProps<'div'>, ColorChannelProps>;
-export declare const ColorPickerChannelSliderTrack: ForwardRefExoticComponent<Assign<AsChildComponentProps<"div">, ColorChannelProps>>;
+export type ColorPickerChannelSliderTrackProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, ColorChannelProps>;
+export declare const ColorPickerChannelSliderTrack: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref">, keyof ColorChannelProps> & ColorChannelProps & RefAttributes<HTMLDivElement>>;

package/color-picker/color-picker-channel-slider-track.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 { ColorPickerChannelSliderProvider } from './color-picker-channel-slider-context.mjs';
 import { useColorPickerContext } from './color-picker-context.mjs';
 
@@ -16,5 +16,6 @@ const ColorPickerChannelSliderTrack = forwardRef((props, ref) => {
   const mergedProps = mergeProps(getChannelSliderTrackProps(channelProps), localProps);
   return /* @__PURE__ */ jsx(ColorPickerChannelSliderProvider, { value: channelProps, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
 });
+ColorPickerChannelSliderTrack.displayName = "ColorPickerChannelSliderTrack";
 
 export { ColorPickerChannelSliderTrack };

package/color-picker/color-picker-content.cjs

@@ -4,15 +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 colorPickerContext = require('./color-picker-context.cjs');
 
-const ColorPickerContent = forwardRef.forwardRef((props, ref) => {
-  const { contentProps } = colorPickerContext.useColorPickerContext();
-  const mergedProps = react.mergeProps(contentProps, props);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
-});
+const ColorPickerContent = react.forwardRef(
+  (props, ref) => {
+    const { contentProps } = colorPickerContext.useColorPickerContext();
+    const mergedProps = react$1.mergeProps(contentProps, props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+  }
+);
+ColorPickerContent.displayName = "ColorPickerContent";
 
 exports.ColorPickerContent = ColorPickerContent;

package/color-picker/color-picker-content.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 ColorPickerContentProps = HTMLArkProps<'div'>;
-export declare const ColorPickerContent: ForwardRefExoticComponent<Assign<AsChildComponentProps<"div">, Record<never, never>>>;
+import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
+export type ColorPickerContentProps = ComponentPropsWithoutRef<typeof ark.div>;
+export declare const ColorPickerContent: 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-content.mjs

@@ -1,14 +1,17 @@
 '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 { useColorPickerContext } from './color-picker-context.mjs';
 
-const ColorPickerContent = forwardRef((props, ref) => {
-  const { contentProps } = useColorPickerContext();
-  const mergedProps = mergeProps(contentProps, props);
-  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
-});
+const ColorPickerContent = forwardRef(
+  (props, ref) => {
+    const { contentProps } = useColorPickerContext();
+    const mergedProps = mergeProps(contentProps, props);
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+  }
+);
+ColorPickerContent.displayName = "ColorPickerContent";
 
 export { ColorPickerContent };

package/color-picker/color-picker-eye-dropper-trigger.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 colorPickerContext = require('./color-picker-context.cjs');
 
-const ColorPickerEyeDropperTrigger = forwardRef.forwardRef((props, ref) => {
+const ColorPickerEyeDropperTrigger = react.forwardRef((props, ref) => {
   const { eyeDropperTriggerProps } = colorPickerContext.useColorPickerContext();
-  const mergedProps = react.mergeProps(eyeDropperTriggerProps, props);
+  const mergedProps = react$1.mergeProps(eyeDropperTriggerProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
 });
+ColorPickerEyeDropperTrigger.displayName = "ColorPickerEyeDropperTrigger";
 
 exports.ColorPickerEyeDropperTrigger = ColorPickerEyeDropperTrigger;

package/color-picker/color-picker-eye-dropper-trigger.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 ColorPickerEyeDropperTriggerProps = HTMLArkProps<'button'>;
-export declare const ColorPickerEyeDropperTrigger: ForwardRefExoticComponent<Assign<AsChildComponentProps<"button">, Record<never, never>>>;
+import type { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
+export type ColorPickerEyeDropperTriggerProps = ComponentPropsWithoutRef<typeof ark.button>;
+export declare const ColorPickerEyeDropperTrigger: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref"> & RefAttributes<HTMLButtonElement>>;

package/color-picker/color-picker-eye-dropper-trigger.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 { useColorPickerContext } from './color-picker-context.mjs';
 
 const ColorPickerEyeDropperTrigger = forwardRef((props, ref) => {
@@ -10,5 +10,6 @@ const ColorPickerEyeDropperTrigger = forwardRef((props, ref) => {
   const mergedProps = mergeProps(eyeDropperTriggerProps, props);
   return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
 });
+ColorPickerEyeDropperTrigger.displayName = "ColorPickerEyeDropperTrigger";
 
 export { ColorPickerEyeDropperTrigger };

package/color-picker/color-picker-swatch-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 colorPickerContext = require('./color-picker-context.cjs');
 const colorPickerSwatchContext = require('./color-picker-swatch-context.cjs');
 
-const ColorPickerSwatchBackground = forwardRef.forwardRef((props, ref) => {
+const ColorPickerSwatchBackground = react.forwardRef((props, ref) => {
   const { getSwatchBackgroundProps } = colorPickerContext.useColorPickerContext();
   const colorSwatchProps = colorPickerSwatchContext.useColorPickerSwatchContext();
-  const mergedProps = react.mergeProps(getSwatchBackgroundProps(colorSwatchProps), props);
+  const mergedProps = react$1.mergeProps(getSwatchBackgroundProps(colorSwatchProps), props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
+ColorPickerSwatchBackground.displayName = "ColorPickerSwatchBackground";
 
 exports.ColorPickerSwatchBackground = ColorPickerSwatchBackground;

package/color-picker/color-picker-swatch-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 ColorPickerSwatchBackgroundProps = HTMLArkProps<'div'>;
-export declare const ColorPickerSwatchBackground: ForwardRefExoticComponent<Assign<AsChildComponentProps<"div">, Record<never, never>>>;
+import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
+export type ColorPickerSwatchBackgroundProps = ComponentPropsWithoutRef<typeof ark.div>;
+export declare const ColorPickerSwatchBackground: 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-swatch-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 { useColorPickerContext } from './color-picker-context.mjs';
 import { useColorPickerSwatchContext } from './color-picker-swatch-context.mjs';
 
@@ -12,5 +12,6 @@ const ColorPickerSwatchBackground = forwardRef((props, ref) => {
   const mergedProps = mergeProps(getSwatchBackgroundProps(colorSwatchProps), props);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
+ColorPickerSwatchBackground.displayName = "ColorPickerSwatchBackground";
 
 export { ColorPickerSwatchBackground };

package/color-picker/color-picker-swatch-group.cjs

@@ -4,10 +4,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const colorPicker_anatomy = require('./color-picker.anatomy.cjs');
 
-const ColorPickerSwatchGroup = forwardRef.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...colorPicker_anatomy.parts.swatchGroup.attrs, ...props, ref }));
+const ColorPickerSwatchGroup = react.forwardRef(
+  (props, ref) => /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...colorPicker_anatomy.parts.swatchGroup.attrs, ...props, ref })
+);
+ColorPickerSwatchGroup.displayName = "ColorPickerSwatchGroup";
 
 exports.ColorPickerSwatchGroup = ColorPickerSwatchGroup;

package/color-picker/color-picker-swatch-group.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 ColorPickerSwatchGroupProps = HTMLArkProps<'div'>;
-export declare const ColorPickerSwatchGroup: ForwardRefExoticComponent<Assign<AsChildComponentProps<"div">, Record<never, never>>>;
+import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
+export type ColorPickerSwatchGroupProps = ComponentPropsWithoutRef<typeof ark.div>;
+export declare const ColorPickerSwatchGroup: 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-swatch-group.mjs

@@ -1,9 +1,12 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { forwardRef } from '../forward-ref.mjs';
 import { parts } from './color-picker.anatomy.mjs';
 
-const ColorPickerSwatchGroup = forwardRef((props, ref) => /* @__PURE__ */ jsx(ark.div, { ...parts.swatchGroup.attrs, ...props, ref }));
+const ColorPickerSwatchGroup = forwardRef(
+  (props, ref) => /* @__PURE__ */ jsx(ark.div, { ...parts.swatchGroup.attrs, ...props, ref })
+);
+ColorPickerSwatchGroup.displayName = "ColorPickerSwatchGroup";
 
 export { ColorPickerSwatchGroup };

package/color-picker/color-picker-swatch.cjs

@@ -4,21 +4,24 @@
 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 colorPickerSwatchContext = require('./color-picker-swatch-context.cjs');
 
-const ColorPickerSwatch = forwardRef.forwardRef((props, ref) => {
-  const [colorSwatchProps, localProps] = createSplitProps.createSplitProps()(props, [
-    "readOnly",
-    "value"
-  ]);
-  const { getSwatchProps } = colorPickerContext.useColorPickerContext();
-  const mergedProps = react.mergeProps(getSwatchProps(colorSwatchProps), localProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(colorPickerSwatchContext.ColorPickerSwatchProvider, { value: colorSwatchProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { disabled: colorSwatchProps.readOnly, ...mergedProps, ref }) });
-});
+const ColorPickerSwatch = react.forwardRef(
+  (props, ref) => {
+    const [colorSwatchProps, localProps] = createSplitProps.createSplitProps()(props, [
+      "readOnly",
+      "value"
+    ]);
+    const { getSwatchProps } = colorPickerContext.useColorPickerContext();
+    const mergedProps = react$1.mergeProps(getSwatchProps(colorSwatchProps), localProps);
+    return /* @__PURE__ */ jsxRuntime.jsx(colorPickerSwatchContext.ColorPickerSwatchProvider, { value: colorSwatchProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { disabled: colorSwatchProps.readOnly, ...mergedProps, ref }) });
+  }
+);
+ColorPickerSwatch.displayName = "ColorPickerSwatch";
 
 exports.ColorPickerSwatch = ColorPickerSwatch;

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

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

package/color-picker/color-picker-swatch.mjs

@@ -1,20 +1,23 @@
 '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';
 import { ColorPickerSwatchProvider } from './color-picker-swatch-context.mjs';
 
-const ColorPickerSwatch = forwardRef((props, ref) => {
-  const [colorSwatchProps, localProps] = createSplitProps()(props, [
-    "readOnly",
-    "value"
-  ]);
-  const { getSwatchProps } = useColorPickerContext();
-  const mergedProps = mergeProps(getSwatchProps(colorSwatchProps), localProps);
-  return /* @__PURE__ */ jsx(ColorPickerSwatchProvider, { value: colorSwatchProps, children: /* @__PURE__ */ jsx(ark.button, { disabled: colorSwatchProps.readOnly, ...mergedProps, ref }) });
-});
+const ColorPickerSwatch = forwardRef(
+  (props, ref) => {
+    const [colorSwatchProps, localProps] = createSplitProps()(props, [
+      "readOnly",
+      "value"
+    ]);
+    const { getSwatchProps } = useColorPickerContext();
+    const mergedProps = mergeProps(getSwatchProps(colorSwatchProps), localProps);
+    return /* @__PURE__ */ jsx(ColorPickerSwatchProvider, { value: colorSwatchProps, children: /* @__PURE__ */ jsx(ark.button, { disabled: colorSwatchProps.readOnly, ...mergedProps, ref }) });
+  }
+);
+ColorPickerSwatch.displayName = "ColorPickerSwatch";
 
 export { ColorPickerSwatch };

package/color-picker/use-color-picker.cjs

@@ -4,8 +4,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const colorPicker = require('@zag-js/color-picker');
-const react = require('@zag-js/react');
-const React = require('react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const reactDom = require('react-dom');
 const environmentContext = require('../environment/environment-context.cjs');
 
@@ -31,13 +31,13 @@ const colorPicker__namespace = /*#__PURE__*/_interopNamespaceDefault(colorPicker
 const useColorPicker = (props) => {
   const getRootNode = environmentContext.useEnvironmentContext();
   const initialContext = {
-    id: React.useId(),
+    id: react.useId(),
     getRootNode,
     ...props,
     value: props.defaultValue ?? props.value
   };
   const onChange = props.onChange;
-  const onChangeWithFlushSync = React.useCallback(
+  const onChangeWithFlushSync = react.useCallback(
     (e) => reactDom.flushSync(() => onChange?.(e)),
     [onChange]
   );
@@ -46,8 +46,8 @@ const useColorPicker = (props) => {
     value: props.value,
     onChange: onChangeWithFlushSync
   };
-  const [state, send] = react.useMachine(colorPicker__namespace.machine(initialContext), { context });
-  return colorPicker__namespace.connect(state, send, react.normalizeProps);
+  const [state, send] = react$1.useMachine(colorPicker__namespace.machine(initialContext), { context });
+  return colorPicker__namespace.connect(state, send, react$1.normalizeProps);
 };
 
 exports.useColorPicker = useColorPicker;

package/combobox/combobox-content.cjs

@@ -4,21 +4,25 @@
 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 splitPresenceProps = require('../presence/split-presence-props.cjs');
 const comboboxContext = require('./combobox-context.cjs');
 const comboboxPresence = require('./combobox-presence.cjs');
 
-const ComboboxContent = forwardRef.forwardRef((props, ref) => {
+const ComboboxContent = react.forwardRef((props, ref) => {
   const [presenceProps, comboboxContentProps] = splitPresenceProps.splitPresenceProps(props);
   return /* @__PURE__ */ jsxRuntime.jsx(comboboxPresence.ComboboxPresence, { ...presenceProps, children: /* @__PURE__ */ jsxRuntime.jsx(InnerComboboxContent, { ref, ...comboboxContentProps }) });
 });
-const InnerComboboxContent = forwardRef.forwardRef((props, ref) => {
-  const { contentProps } = comboboxContext.useComboboxContext();
-  const mergedProps = react.mergeProps(contentProps, props);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.ul, { ...mergedProps, ref });
-});
+ComboboxContent.displayName = "ComboboxContent";
+const InnerComboboxContent = react.forwardRef(
+  (props, ref) => {
+    const { contentProps } = comboboxContext.useComboboxContext();
+    const mergedProps = react$1.mergeProps(contentProps, props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.ul, { ...mergedProps, ref });
+  }
+);
+InnerComboboxContent.displayName = "InnerComboboxContent";
 
 exports.ComboboxContent = ComboboxContent;

package/combobox/combobox-content.d.ts

@@ -1,6 +1,10 @@
-import type { Assign } from '../types';
-import type { ForwardRefExoticComponent } from 'react';
-import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
+import type { PresenceProps } from '../presence';
+import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
 import { type ComboboxPresenceProps } from './combobox-presence';
-export type ComboboxContentProps = HTMLArkProps<'ul'> & Omit<ComboboxPresenceProps, 'children'>;
-export declare const ComboboxContent: ForwardRefExoticComponent<Assign<AsChildComponentProps<"ul">, ComboboxContentProps>>;
+export type ComboboxContentProps = ComponentPropsWithoutRef<typeof ark.ul> & Omit<ComboboxPresenceProps, 'children'>;
+export declare const ComboboxContent: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & {
+    ref?: ((instance: HTMLUListElement | null) => void) | RefObject<HTMLUListElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref"> & Omit<PresenceProps, "children"> & RefAttributes<HTMLUListElement>>;

package/combobox/combobox-content.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 { splitPresenceProps } from '../presence/split-presence-props.mjs';
 import { useComboboxContext } from './combobox-context.mjs';
 import { ComboboxPresence } from './combobox-presence.mjs';
@@ -11,10 +11,14 @@ const ComboboxContent = forwardRef((props, ref) => {
   const [presenceProps, comboboxContentProps] = splitPresenceProps(props);
   return /* @__PURE__ */ jsx(ComboboxPresence, { ...presenceProps, children: /* @__PURE__ */ jsx(InnerComboboxContent, { ref, ...comboboxContentProps }) });
 });
-const InnerComboboxContent = forwardRef((props, ref) => {
-  const { contentProps } = useComboboxContext();
-  const mergedProps = mergeProps(contentProps, props);
-  return /* @__PURE__ */ jsx(ark.ul, { ...mergedProps, ref });
-});
+ComboboxContent.displayName = "ComboboxContent";
+const InnerComboboxContent = forwardRef(
+  (props, ref) => {
+    const { contentProps } = useComboboxContext();
+    const mergedProps = mergeProps(contentProps, props);
+    return /* @__PURE__ */ jsx(ark.ul, { ...mergedProps, ref });
+  }
+);
+InnerComboboxContent.displayName = "InnerComboboxContent";
 
 export { ComboboxContent };

package/combobox/combobox-control.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 comboboxContext = require('./combobox-context.cjs');
 
-const ComboboxControl = forwardRef.forwardRef((props, ref) => {
+const ComboboxControl = react.forwardRef((props, ref) => {
   const { controlProps } = comboboxContext.useComboboxContext();
-  const mergedProps = react.mergeProps(controlProps, props);
+  const mergedProps = react$1.mergeProps(controlProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
+ComboboxControl.displayName = "ComboboxControl";
 
 exports.ComboboxControl = ComboboxControl;

package/combobox/combobox-control.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 ComboboxControlProps = HTMLArkProps<'div'>;
-export declare const ComboboxControl: ForwardRefExoticComponent<Assign<AsChildComponentProps<"div">, Record<never, never>>>;
+import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
+export type ComboboxControlProps = ComponentPropsWithoutRef<typeof ark.div>;
+export declare const ComboboxControl: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref"> & RefAttributes<HTMLDivElement>>;

package/combobox/combobox-control.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 { useComboboxContext } from './combobox-context.mjs';
 
 const ComboboxControl = forwardRef((props, ref) => {
@@ -10,5 +10,6 @@ const ComboboxControl = forwardRef((props, ref) => {
   const mergedProps = mergeProps(controlProps, props);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
+ComboboxControl.displayName = "ComboboxControl";
 
 export { ComboboxControl };

package/combobox/combobox-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 comboboxContext = require('./combobox-context.cjs');
 
-const ComboboxInput = forwardRef.forwardRef((props, ref) => {
+const ComboboxInput = react.forwardRef((props, ref) => {
   const { inputProps } = comboboxContext.useComboboxContext();
-  const mergedProps = react.mergeProps(inputProps, props);
+  const mergedProps = react$1.mergeProps(inputProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { ...mergedProps, ref });
 });
+ComboboxInput.displayName = "ComboboxInput";
 
 exports.ComboboxInput = ComboboxInput;

package/combobox/combobox-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 ComboboxInputProps = HTMLArkProps<'input'>;
-export declare const ComboboxInput: ForwardRefExoticComponent<Assign<AsChildComponentProps<"input">, Record<never, never>>>;
+import type { ForwardRefExoticComponent, DetailedHTMLProps, InputHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
+export type ComboboxInputProps = ComponentPropsWithoutRef<typeof ark.input>;
+export declare const ComboboxInput: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+    ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref"> & RefAttributes<HTMLInputElement>>;