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

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

package/editable/editable-edit-trigger.cjs

@@ -4,16 +4,18 @@
 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 factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const editableContext = require('./editable-context.cjs');
 
-const EditableEditTrigger = forwardRef.forwardRef((props, ref) => {
-  const { editTriggerProps } = editableContext.useEditableContext();
-  const mergedProps = react.mergeProps(editTriggerProps, props);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
-});
+const EditableEditTrigger = react.forwardRef(
+  (props, ref) => {
+    const { editTriggerProps } = editableContext.useEditableContext();
+    const mergedProps = react$1.mergeProps(editTriggerProps, props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
+  }
+);
+EditableEditTrigger.displayName = "EditableEditTrigger";
 
 exports.EditableEditTrigger = EditableEditTrigger;

package/editable/editable-edit-trigger.d.ts

@@ -1,7 +1,8 @@
-import type { AsChildComponentProps } from '../factory';
-import type { Assign } from '../types';
-import type { ForwardRefExoticComponent, type ReactElement } from 'react';
-export type EditableEditTriggerProps = {
-    children: ReactElement;
-};
-export declare const EditableEditTrigger: ForwardRefExoticComponent<Assign<AsChildComponentProps<"button">, Record<never, never>>>;
+import type { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
+export type EditableEditTriggerProps = ComponentPropsWithoutRef<typeof ark.button>;
+export declare const EditableEditTrigger: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref"> & RefAttributes<HTMLButtonElement>>;

package/editable/editable-edit-trigger.mjs

@@ -1,15 +1,17 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
-import 'react';
+import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { forwardRef } from '../forward-ref.mjs';
 import { useEditableContext } from './editable-context.mjs';
 
-const EditableEditTrigger = forwardRef((props, ref) => {
-  const { editTriggerProps } = useEditableContext();
-  const mergedProps = mergeProps(editTriggerProps, props);
-  return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
-});
+const EditableEditTrigger = forwardRef(
+  (props, ref) => {
+    const { editTriggerProps } = useEditableContext();
+    const mergedProps = mergeProps(editTriggerProps, props);
+    return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
+  }
+);
+EditableEditTrigger.displayName = "EditableEditTrigger";
 
 export { EditableEditTrigger };

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

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

package/editable/editable-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 { useEditableContext } from './editable-context.mjs';
 
 const EditableInput = forwardRef((props, ref) => {
@@ -10,5 +10,6 @@ const EditableInput = forwardRef((props, ref) => {
   const mergedProps = mergeProps(inputProps, props);
   return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });
 });
+EditableInput.displayName = "EditableInput";
 
 export { EditableInput };

package/editable/editable-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 editableContext = require('./editable-context.cjs');
 
-const EditableLabel = forwardRef.forwardRef((props, ref) => {
+const EditableLabel = react.forwardRef((props, ref) => {
   const { labelProps } = editableContext.useEditableContext();
-  const mergedProps = react.mergeProps(labelProps, props);
+  const mergedProps = react$1.mergeProps(labelProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref });
 });
+EditableLabel.displayName = "EditableLabel";
 
 exports.EditableLabel = EditableLabel;

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

package/editable/editable-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 { useEditableContext } from './editable-context.mjs';
 
 const EditableLabel = forwardRef((props, ref) => {
@@ -10,5 +10,6 @@ const EditableLabel = forwardRef((props, ref) => {
   const mergedProps = mergeProps(labelProps, props);
   return /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref });
 });
+EditableLabel.displayName = "EditableLabel";
 
 export { EditableLabel };

package/editable/editable-preview.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 editableContext = require('./editable-context.cjs');
 
-const EditablePreview = forwardRef.forwardRef((props, ref) => {
+const EditablePreview = react.forwardRef((props, ref) => {
   const { previewProps } = editableContext.useEditableContext();
-  const mergedProps = react.mergeProps(previewProps, props);
+  const mergedProps = react$1.mergeProps(previewProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref });
 });
+EditablePreview.displayName = "EditablePreview";
 
 exports.EditablePreview = EditablePreview;

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

package/editable/editable-preview.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 { useEditableContext } from './editable-context.mjs';
 
 const EditablePreview = forwardRef((props, ref) => {
@@ -10,5 +10,6 @@ const EditablePreview = forwardRef((props, ref) => {
   const mergedProps = mergeProps(previewProps, props);
   return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });
 });
+EditablePreview.displayName = "EditablePreview";
 
 export { EditablePreview };

package/editable/editable-submit-trigger.cjs

@@ -4,16 +4,18 @@
 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 factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const editableContext = require('./editable-context.cjs');
 
-const EditableSubmitTrigger = forwardRef.forwardRef((props, ref) => {
-  const { submitTriggerProps } = editableContext.useEditableContext();
-  const mergedProps = react.mergeProps(submitTriggerProps, props);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
-});
+const EditableSubmitTrigger = react.forwardRef(
+  (props, ref) => {
+    const { submitTriggerProps } = editableContext.useEditableContext();
+    const mergedProps = react$1.mergeProps(submitTriggerProps, props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
+  }
+);
+EditableSubmitTrigger.displayName = "EditableSubmitTrigger";
 
 exports.EditableSubmitTrigger = EditableSubmitTrigger;

package/editable/editable-submit-trigger.d.ts

@@ -1,7 +1,8 @@
-import type { AsChildComponentProps } from '../factory';
-import type { Assign } from '../types';
-import type { ForwardRefExoticComponent, type ReactElement } from 'react';
-export type EditableSubmitTriggerProps = {
-    children: ReactElement;
-};
-export declare const EditableSubmitTrigger: ForwardRefExoticComponent<Assign<AsChildComponentProps<"button">, Record<never, never>>>;
+import type { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
+export type EditableSubmitTriggerProps = ComponentPropsWithoutRef<typeof ark.button>;
+export declare const EditableSubmitTrigger: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref"> & RefAttributes<HTMLButtonElement>>;

package/editable/editable-submit-trigger.mjs

@@ -1,15 +1,17 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
-import 'react';
+import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import { forwardRef } from '../forward-ref.mjs';
 import { useEditableContext } from './editable-context.mjs';
 
-const EditableSubmitTrigger = forwardRef((props, ref) => {
-  const { submitTriggerProps } = useEditableContext();
-  const mergedProps = mergeProps(submitTriggerProps, props);
-  return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
-});
+const EditableSubmitTrigger = forwardRef(
+  (props, ref) => {
+    const { submitTriggerProps } = useEditableContext();
+    const mergedProps = mergeProps(submitTriggerProps, props);
+    return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
+  }
+);
+EditableSubmitTrigger.displayName = "EditableSubmitTrigger";
 
 export { EditableSubmitTrigger };

package/editable/editable.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 editableContext = require('./editable-context.cjs');
 const useEditable = require('./use-editable.cjs');
 
-const Editable = forwardRef.forwardRef((props, ref) => {
+const Editable = react.forwardRef((props, ref) => {
   const [useEditableProps, { children, ...divProps }] = createSplitProps.createSplitProps()(
     props,
     [
@@ -45,9 +44,10 @@ const Editable = forwardRef.forwardRef((props, ref) => {
     ]
   );
   const editable = useEditable.useEditable(useEditableProps);
-  const mergedProps = react.mergeProps(editable.rootProps, divProps);
+  const mergedProps = react$1.mergeProps(editable.rootProps, divProps);
   const view = runIfFn.runIfFn(children, editable);
   return /* @__PURE__ */ jsxRuntime.jsx(editableContext.EditableProvider, { value: editable, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) });
 });
+Editable.displayName = "Editable";
 
 exports.Editable = Editable;

package/editable/editable.d.ts

@@ -1,9 +1,18 @@
-import type { ForwardRefExoticComponent, type ReactNode } from 'react';
-import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
+import type { Context } from '@zag-js/editable';
+import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef,  type ReactNode } from 'react';
+import { ark } from '../factory';
 import { type Assign } from '../types';
 import { type EditableContext } from './editable-context';
 import { type UseEditableProps } from './use-editable';
-export type EditableProps = Assign<Omit<HTMLArkProps<'div'>, 'children'> & {
+export type EditableProps = Assign<Omit<ComponentPropsWithoutRef<typeof ark.div>, 'children'> & {
     children: ReactNode | ((pages: EditableContext) => ReactNode);
 }, UseEditableProps>;
-export declare const Editable: ForwardRefExoticComponent<Assign<AsChildComponentProps<"div">, EditableProps>>;
+export declare const Editable: ForwardRefExoticComponent<Omit<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref">, "children"> & {
+    children: ReactNode | ((pages: EditableContext) => ReactNode);
+}, "name" | "value" | "form" | "id" | "onChange" | "onSubmit" | "defaultValue" | "dir" | "placeholder" | "disabled" | "onCancel" | "maxLength" | "readOnly" | "getRootNode" | "ids" | "invalid" | "onInteractOutside" | "translations" | "finalFocusEl" | "autoResize" | "activationMode" | "submitMode" | "startWithEditView" | "selectOnFocus" | "onEdit"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+    defaultValue?: string | undefined;
+} & RefAttributes<HTMLDivElement>>;

package/editable/editable.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 { EditableProvider } from './editable-context.mjs';
 import { useEditable } from './use-editable.mjs';
@@ -45,5 +44,6 @@ const Editable = forwardRef((props, ref) => {
   const view = runIfFn(children, editable);
   return /* @__PURE__ */ jsx(EditableProvider, { value: editable, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
 });
+Editable.displayName = "Editable";
 
 export { Editable };

package/editable/use-editable.cjs

@@ -4,8 +4,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const editable = require('@zag-js/editable');
-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,7 +30,7 @@ const editable__namespace = /*#__PURE__*/_interopNamespaceDefault(editable);
 const useEditable = (props) => {
   const getRootNode = environmentContext.useEnvironmentContext();
   const initialContext = {
-    id: React.useId(),
+    id: react.useId(),
     getRootNode,
     ...props,
     value: props.defaultValue
@@ -39,8 +39,8 @@ const useEditable = (props) => {
     ...initialContext,
     value: props.value
   };
-  const [state, send] = react.useMachine(editable__namespace.machine(initialContext), { context });
-  return editable__namespace.connect(state, send, react.normalizeProps);
+  const [state, send] = react$1.useMachine(editable__namespace.machine(initialContext), { context });
+  return editable__namespace.connect(state, send, react$1.normalizeProps);
 };
 
 exports.useEditable = useEditable;

package/environment/environment.cjs

@@ -4,13 +4,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const React = require('react');
+const react = require('react');
 const environmentContext = require('./environment-context.cjs');
 
 const Environment = (props) => {
   const { value, children } = props;
-  const ref = React.useRef(null);
-  const currentEnv = React.useMemo(() => () => value ?? ref.current?.ownerDocument ?? document, [value]);
+  const ref = react.useRef(null);
+  const currentEnv = react.useMemo(() => () => value ?? ref.current?.ownerDocument ?? document, [value]);
   const showSpan = !value;
   return /* @__PURE__ */ jsxRuntime.jsxs(environmentContext.EnvironmentProvider, { value: currentEnv, children: [
     children,

package/factory.cjs

@@ -4,19 +4,19 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const react = require('@zag-js/react');
-const React = require('react');
+const react$1 = require('@zag-js/react');
+const react = require('react');
 const composeRefs = require('./compose-refs.cjs');
 
 const withAsChild = (Component) => {
-  const Comp = React.forwardRef((props, ref) => {
+  const Comp = react.forwardRef((props, ref) => {
     const { asChild, children, ...restProps } = props;
     if (!asChild) {
       return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...props, ref });
     }
-    const onlyChild = React.Children.only(children);
-    return React.isValidElement(onlyChild) ? React.cloneElement(onlyChild, {
-      ...react.mergeProps(restProps, onlyChild.props),
+    const onlyChild = react.Children.only(children);
+    return react.isValidElement(onlyChild) ? react.cloneElement(onlyChild, {
+      ...react$1.mergeProps(restProps, onlyChild.props),
       ref: ref ? composeRefs.composeRefs(ref, onlyChild.ref) : onlyChild.ref
     }) : null;
   });

package/factory.d.ts

@@ -1,12 +1,11 @@
-export type AsChildProps = {
-    asChild?: boolean;
-};
+import React from 'react';
 type JsxElements = {
-    [E in keyof JSX.IntrinsicElements]: AsChildForwardRefComponent<E>;
+    [E in keyof JSX.IntrinsicElements]: ArkForwardRefComponent<E>;
+};
+type ArkForwardRefComponent<E extends React.ElementType> = React.ForwardRefExoticComponent<ArkPropsWithRef<E>>;
+type ArkPropsWithRef<E extends React.ElementType> = React.ComponentPropsWithRef<E> & {
+    asChild?: boolean;
 };
-export type AsChildForwardRefComponent<E extends React.ElementType> = React.ForwardRefExoticComponent<AsChildComponentProps<E>>;
-export type AsChildComponentProps<E extends React.ElementType> = React.ComponentProps<E> & AsChildProps;
-export type HTMLArkProps<T extends React.ElementType> = AsChildComponentProps<T>;
 export declare const jsxFactory: () => JsxElements;
 export declare const ark: JsxElements;
 export {};

package/hover-card/hover-card-arrow-tip.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 hoverCardContext = require('./hover-card-context.cjs');
 
-const HoverCardArrowTip = forwardRef.forwardRef((props, ref) => {
-  const { arrowTipProps } = hoverCardContext.useHoverCardContext();
-  const mergedProps = react.mergeProps(arrowTipProps, props);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
-});
+const HoverCardArrowTip = react.forwardRef(
+  (props, ref) => {
+    const { arrowTipProps } = hoverCardContext.useHoverCardContext();
+    const mergedProps = react$1.mergeProps(arrowTipProps, props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+  }
+);
+HoverCardArrowTip.displayName = "HoverCardArrowTip";
 
 exports.HoverCardArrowTip = HoverCardArrowTip;

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

package/hover-card/hover-card-arrow-tip.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 { useHoverCardContext } from './hover-card-context.mjs';
 
-const HoverCardArrowTip = forwardRef((props, ref) => {
-  const { arrowTipProps } = useHoverCardContext();
-  const mergedProps = mergeProps(arrowTipProps, props);
-  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
-});
+const HoverCardArrowTip = forwardRef(
+  (props, ref) => {
+    const { arrowTipProps } = useHoverCardContext();
+    const mergedProps = mergeProps(arrowTipProps, props);
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+  }
+);
+HoverCardArrowTip.displayName = "HoverCardArrowTip";
 
 export { HoverCardArrowTip };

package/hover-card/hover-card-arrow.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 hoverCardContext = require('./hover-card-context.cjs');
 
-const HoverCardArrow = forwardRef.forwardRef((props, ref) => {
+const HoverCardArrow = react.forwardRef((props, ref) => {
   const { arrowProps } = hoverCardContext.useHoverCardContext();
-  const mergedProps = react.mergeProps(arrowProps, props);
+  const mergedProps = react$1.mergeProps(arrowProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
+HoverCardArrow.displayName = "HoverCardArrow";
 
 exports.HoverCardArrow = HoverCardArrow;

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

package/hover-card/hover-card-arrow.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 { useHoverCardContext } from './hover-card-context.mjs';
 
 const HoverCardArrow = forwardRef((props, ref) => {
@@ -10,5 +10,6 @@ const HoverCardArrow = forwardRef((props, ref) => {
   const mergedProps = mergeProps(arrowProps, props);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
+HoverCardArrow.displayName = "HoverCardArrow";
 
 export { HoverCardArrow };