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

package/splitter/splitter-resize-trigger.mjs

@@ -2,9 +2,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import '@zag-js/splitter';
+import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
-import { forwardRef } from '../forward-ref.mjs';
 import { useSplitterContext } from './splitter-context.mjs';
 
 const SplitterResizeTrigger = forwardRef(
@@ -19,5 +19,6 @@ const SplitterResizeTrigger = forwardRef(
     return /* @__PURE__ */ jsx(ark.button, { ref, ...mergedProps });
   }
 );
+SplitterResizeTrigger.displayName = "SplitterResizeTrigger";
 
 export { SplitterResizeTrigger };

package/splitter/splitter.cjs

@@ -4,15 +4,15 @@
 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 runIfFn = require('../run-if-fn.cjs');
 const splitterContext = require('./splitter-context.cjs');
 const useSplitter = require('./use-splitter.cjs');
 
-const Splitter = forwardRef.forwardRef((props, ref) => {
+const Splitter = react.forwardRef((props, ref) => {
   const [useSplitterProps, { children, ...divProps }] = createSplitProps.createSplitProps()(
     props,
     [
@@ -29,9 +29,10 @@ const Splitter = forwardRef.forwardRef((props, ref) => {
     ]
   );
   const splitter = useSplitter.useSplitter(useSplitterProps);
-  const mergedProps = react.mergeProps(splitter.rootProps, divProps);
+  const mergedProps = react$1.mergeProps(splitter.rootProps, divProps);
   const view = runIfFn.runIfFn(children, splitter);
   return /* @__PURE__ */ jsxRuntime.jsx(splitterContext.SplitterProvider, { value: splitter, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) });
 });
+Splitter.displayName = "Splitter";
 
 exports.Splitter = Splitter;

package/splitter/splitter.d.ts

@@ -1,8 +1,23 @@
-import type { ForwardRefExoticComponent, ReactNode } from 'react';
-import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
+import type { Context } from '@zag-js/splitter';
+import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, ReactNode } from 'react';
+import { type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
 import type { Assign } from '../types';
 import { type UseSplitterProps, type UseSplitterReturn } from './use-splitter';
-export type SplitterProps = Assign<HTMLArkProps<'div'>, UseSplitterProps & {
+export type SplitterProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, UseSplitterProps & {
     children?: ReactNode | ((state: UseSplitterReturn) => ReactNode);
 }>;
-export declare const Splitter: ForwardRefExoticComponent<Assign<AsChildComponentProps<"div">, SplitterProps>>;
+export declare const Splitter: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref">, "children" | "id" | "orientation" | "onResize" | "dir" | "size" | "getRootNode" | "ids" | "onResizeStart" | "onResizeEnd" | "defaultSize"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+    defaultSize?: {
+        id: string | number;
+        size?: number | undefined;
+        minSize?: number | undefined;
+        maxSize?: number | undefined;
+    }[] | undefined;
+} & {
+    children?: ReactNode | ((state: UseSplitterReturn) => ReactNode);
+} & RefAttributes<HTMLDivElement>>;

package/splitter/splitter.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 { runIfFn } from '../run-if-fn.mjs';
 import { SplitterProvider } from './splitter-context.mjs';
 import { useSplitter } from './use-splitter.mjs';
@@ -29,5 +29,6 @@ const Splitter = forwardRef((props, ref) => {
   const view = runIfFn(children, splitter);
   return /* @__PURE__ */ jsx(SplitterProvider, { value: splitter, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
 });
+Splitter.displayName = "Splitter";
 
 export { Splitter };

package/splitter/use-splitter.cjs

@@ -3,9 +3,9 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const react = require('@zag-js/react');
+const react$1 = require('@zag-js/react');
 const splitter = require('@zag-js/splitter');
-const React = require('react');
+const react = require('react');
 const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {
@@ -30,7 +30,7 @@ const splitter__namespace = /*#__PURE__*/_interopNamespaceDefault(splitter);
 const useSplitter = (props) => {
   const getRootNode = environmentContext.useEnvironmentContext();
   const initialContext = {
-    id: React.useId(),
+    id: react.useId(),
     getRootNode,
     ...props,
     size: props.defaultSize
@@ -39,8 +39,8 @@ const useSplitter = (props) => {
     ...initialContext,
     size: props.size
   };
-  const [state, send] = react.useMachine(splitter__namespace.machine(initialContext), { context });
-  return splitter__namespace.connect(state, send, react.normalizeProps);
+  const [state, send] = react$1.useMachine(splitter__namespace.machine(initialContext), { context });
+  return splitter__namespace.connect(state, send, react$1.normalizeProps);
 };
 
 exports.useSplitter = useSplitter;

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

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

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

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

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

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

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

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

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

package/switch/switch-thumb.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 switchContext = require('./switch-context.cjs');
 
-const SwitchThumb = forwardRef.forwardRef((props, ref) => {
+const SwitchThumb = react.forwardRef((props, ref) => {
   const { thumbProps } = switchContext.useSwitchContext();
-  const mergedProps = react.mergeProps(thumbProps, props);
+  const mergedProps = react$1.mergeProps(thumbProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref });
 });
+SwitchThumb.displayName = "SwitchThumb";
 
 exports.SwitchThumb = SwitchThumb;

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

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

package/switch/switch.cjs

@@ -4,15 +4,15 @@
 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 runIfFn = require('../run-if-fn.cjs');
 const switchContext = require('./switch-context.cjs');
 const useSwitch = require('./use-switch.cjs');
 
-const Switch = forwardRef.forwardRef((props, ref) => {
+const Switch = react.forwardRef((props, ref) => {
   const [switchProps, { children, ...labelProps }] = createSplitProps.createSplitProps()(props, [
     "checked",
     "dir",
@@ -32,8 +32,9 @@ const Switch = forwardRef.forwardRef((props, ref) => {
   ]);
   const api = useSwitch.useSwitch(switchProps);
   const view = runIfFn.runIfFn(children, api);
-  const mergedProps = react.mergeProps(api.rootProps, labelProps);
+  const mergedProps = react$1.mergeProps(api.rootProps, labelProps);
   return /* @__PURE__ */ jsxRuntime.jsx(switchContext.SwitchProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref, children: view }) });
 });
+Switch.displayName = "Switch";
 
 exports.Switch = Switch;

package/switch/switch.d.ts

@@ -1,8 +1,15 @@
-import type { ForwardRefExoticComponent, ReactNode } from 'react';
-import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
+import type { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefObject, RefAttributes, ReactNode } from 'react';
+import { type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
 import type { Assign } from '../types';
 import { type UseSwitchProps, type UseSwitchReturn } from './use-switch';
-export type SwitchProps = Assign<Assign<HTMLArkProps<'label'>, UseSwitchProps>, {
+export type SwitchProps = Assign<Assign<ComponentPropsWithoutRef<typeof ark.label>, UseSwitchProps>, {
     children: ReactNode | ((pages: UseSwitchReturn) => ReactNode);
 }>;
-export declare const Switch: ForwardRefExoticComponent<Assign<AsChildComponentProps<"label">, SwitchProps>>;
+export declare const Switch: ForwardRefExoticComponent<Omit<Assign<Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
+    ref?: ((instance: HTMLLabelElement | null) => void) | RefObject<HTMLLabelElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref">, UseSwitchProps>, "children"> & {
+    children: ReactNode | ((pages: UseSwitchReturn) => ReactNode);
+} & RefAttributes<HTMLLabelElement>>;

package/switch/switch.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 { runIfFn } from '../run-if-fn.mjs';
 import { SwitchProvider } from './switch-context.mjs';
 import { useSwitch } from './use-switch.mjs';
@@ -31,5 +31,6 @@ const Switch = forwardRef((props, ref) => {
   const mergedProps = mergeProps(api.rootProps, labelProps);
   return /* @__PURE__ */ jsx(SwitchProvider, { value: api, children: /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref, children: view }) });
 });
+Switch.displayName = "Switch";
 
 export { Switch };

package/switch/use-switch.cjs

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

package/tabs/tab-content.cjs

@@ -4,25 +4,27 @@
 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');
 require('@zag-js/tabs');
+const react = require('react');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const splitPresenceProps = require('../presence/split-presence-props.cjs');
 const tabPresence = require('./tab-presence.cjs');
 const tabsContext = require('./tabs-context.cjs');
 
-const TabContent = forwardRef.forwardRef((props, ref) => {
+const TabContent = react.forwardRef((props, ref) => {
   const [presenceProps, tabContentProps] = splitPresenceProps.splitPresenceProps(props);
   const [contentProps, localProps] = createSplitProps.createSplitProps()(tabContentProps, ["value"]);
   return /* @__PURE__ */ jsxRuntime.jsx(tabPresence.TabPresence, { ...presenceProps, ...contentProps, children: /* @__PURE__ */ jsxRuntime.jsx(InnerTabContent, { ref, ...contentProps, ...localProps }) });
 });
-const InnerTabContent = forwardRef.forwardRef((props, ref) => {
+TabContent.displayName = "TabContent";
+const InnerTabContent = react.forwardRef((props, ref) => {
   const [tabContentProps, divProps] = createSplitProps.createSplitProps()(props, ["value"]);
   const { getContentProps } = tabsContext.useTabsContext();
-  const mergedProps = react.mergeProps(getContentProps(tabContentProps), divProps);
+  const mergedProps = react$1.mergeProps(getContentProps(tabContentProps), divProps);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
+InnerTabContent.displayName = "InnerTabContent";
 
 exports.TabContent = TabContent;

package/tabs/tab-content.d.ts

@@ -1,9 +1,12 @@
-import type { Assign } from '../types';
-import type { ForwardRefExoticComponent } from 'react';
 import { type ContentProps } from '@zag-js/tabs';
-import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
+import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
 import { type TabPresenceProps } from './tab-presence';
 export type TabContentProps = InnerTabContentProps & Omit<TabPresenceProps, 'children'>;
-export declare const TabContent: ForwardRefExoticComponent<Assign<AsChildComponentProps<"div">, TabContentProps>>;
-type InnerTabContentProps = HTMLArkProps<'div'> & ContentProps;
+export declare const TabContent: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref"> & ContentProps & Omit<TabPresenceProps, "children"> & RefAttributes<HTMLDivElement>>;
+type InnerTabContentProps = ComponentPropsWithoutRef<typeof ark.div> & ContentProps;
 export {};

package/tabs/tab-content.mjs

@@ -2,9 +2,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import '@zag-js/tabs';
+import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
-import { forwardRef } from '../forward-ref.mjs';
 import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 import { TabPresence } from './tab-presence.mjs';
 import { useTabsContext } from './tabs-context.mjs';
@@ -14,11 +14,13 @@ const TabContent = forwardRef((props, ref) => {
   const [contentProps, localProps] = createSplitProps()(tabContentProps, ["value"]);
   return /* @__PURE__ */ jsx(TabPresence, { ...presenceProps, ...contentProps, children: /* @__PURE__ */ jsx(InnerTabContent, { ref, ...contentProps, ...localProps }) });
 });
+TabContent.displayName = "TabContent";
 const InnerTabContent = forwardRef((props, ref) => {
   const [tabContentProps, divProps] = createSplitProps()(props, ["value"]);
   const { getContentProps } = useTabsContext();
   const mergedProps = mergeProps(getContentProps(tabContentProps), divProps);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
+InnerTabContent.displayName = "InnerTabContent";
 
 export { TabContent };

package/tabs/tab-indicator.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 tabsContext = require('./tabs-context.cjs');
 
-const TabIndicator = forwardRef.forwardRef((props, ref) => {
+const TabIndicator = react.forwardRef((props, ref) => {
   const { indicatorProps } = tabsContext.useTabsContext();
-  const mergedProps = react.mergeProps(indicatorProps, props);
+  const mergedProps = react$1.mergeProps(indicatorProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
+TabIndicator.displayName = "TabIndicator";
 
 exports.TabIndicator = TabIndicator;

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

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

package/tabs/tab-list.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 tabsContext = require('./tabs-context.cjs');
 
-const TabList = forwardRef.forwardRef((props, ref) => {
+const TabList = react.forwardRef((props, ref) => {
   const { tablistProps } = tabsContext.useTabsContext();
-  const mergedProps = react.mergeProps(tablistProps, props);
+  const mergedProps = react$1.mergeProps(tablistProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
+TabList.displayName = "TabList";
 
 exports.TabList = TabList;

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