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

package/CHANGELOG.md

@@ -6,6 +6,19 @@ description: All notable changes to this project will be documented in this file
 
 ## [Unreleased]
 
+## [0.10.0-beta.1] - 2023-07-29
+
+### Changed
+
+- Simplified forwardRef setup
+
+## [0.10.0-beta.0] - 2023-07-29
+
+### Changed
+
+- Updated number input `onChange` handler to allow synchronous updates to the value when using the scrubber.
+- Improved TypeScript typings in our factory functions. The changes allow for more accurate type inference for the `ref` property when dealing with both intrinsic HTML elements and custom React components.
+
 ## [0.9.0] - 2023-07-21
 
 ### Added
@@ -133,7 +146,7 @@ description: All notable changes to this project will be documented in this file
 - Add `Toast`
 - Add `Tooltip`
 
-[unreleased]: https://github.com/chakra-ui/ark/compare/@ark-ui/react@0.9.0...HEAD
+[unreleased]: https://github.com/chakra-ui/ark/compare/@ark-ui/react@0.10.0-beta.1...HEAD
 [0.1.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.1.0
 [0.2.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.2.0
 [0.3.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.3.0
@@ -146,5 +159,7 @@ description: All notable changes to this project will be documented in this file
 [0.7.3]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.7.3
 [0.8.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.8.0
 [0.8.1]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.8.1
-
 [0.9.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.9.0
+[0.10.0-beta.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.10.0-beta.0
+
+[0.10.0-beta.1]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.10.0-beta.1

package/accordion/accordion-content.cjs

@@ -4,23 +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');
+const react = require('react');
 const factory = require('../factory.cjs');
-const forwardRef = require('../forward-ref.cjs');
 const splitPresenceProps = require('../presence/split-presence-props.cjs');
 const accordionContext = require('./accordion-context.cjs');
 const accordionItemContext = require('./accordion-item-context.cjs');
 const accordionItemPresence = require('./accordion-item-presence.cjs');
 
-const AccordionContent = forwardRef.forwardRef((props, ref) => {
-  const [presenceProps, accordionContentProps] = splitPresenceProps.splitPresenceProps(props);
-  return /* @__PURE__ */ jsxRuntime.jsx(accordionItemPresence.AccordionItemPresence, { ...presenceProps, children: /* @__PURE__ */ jsxRuntime.jsx(InnerAccordionContent, { ref, ...accordionContentProps }) });
-});
-const InnerAccordionContent = forwardRef.forwardRef((props, ref) => {
-  const { getContentProps } = accordionContext.useAccordionContext();
-  const accordionItem = accordionItemContext.useAccordionItemContext();
-  const mergedProps = react.mergeProps(getContentProps(accordionItem), props);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
-});
+const AccordionContent = react.forwardRef(
+  function AccordionContent2(props, ref) {
+    const [presenceProps, accordionContentProps] = splitPresenceProps.splitPresenceProps(props);
+    return /* @__PURE__ */ jsxRuntime.jsx(accordionItemPresence.AccordionItemPresence, { ...presenceProps, children: /* @__PURE__ */ jsxRuntime.jsx(InnerAccordionContent, { ref, ...accordionContentProps }) });
+  }
+);
+const InnerAccordionContent = react.forwardRef(
+  function InnerAccordionContent2(props, ref) {
+    const { getContentProps } = accordionContext.useAccordionContext();
+    const accordionItem = accordionItemContext.useAccordionItemContext();
+    const mergedProps = react$1.mergeProps(getContentProps(accordionItem), props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+  }
+);
 
 exports.AccordionContent = AccordionContent;

package/accordion/accordion-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 AccordionItemPresenceProps } from './accordion-item-presence';
-export type AccordionContentProps = HTMLArkProps<'div'> & Omit<AccordionItemPresenceProps, 'children'>;
-export declare const AccordionContent: ForwardRefExoticComponent<Assign<AsChildComponentProps<"div">, AccordionContentProps>>;
+export type AccordionContentProps = ComponentPropsWithoutRef<typeof ark.div> & Omit<AccordionItemPresenceProps, 'children'>;
+export declare const AccordionContent: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref"> & Omit<PresenceProps, "children"> & RefAttributes<HTMLDivElement>>;

package/accordion/accordion-content.mjs

@@ -1,22 +1,26 @@
 '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 { useAccordionContext } from './accordion-context.mjs';
 import { useAccordionItemContext } from './accordion-item-context.mjs';
 import { AccordionItemPresence } from './accordion-item-presence.mjs';
 
-const AccordionContent = forwardRef((props, ref) => {
-  const [presenceProps, accordionContentProps] = splitPresenceProps(props);
-  return /* @__PURE__ */ jsx(AccordionItemPresence, { ...presenceProps, children: /* @__PURE__ */ jsx(InnerAccordionContent, { ref, ...accordionContentProps }) });
-});
-const InnerAccordionContent = forwardRef((props, ref) => {
-  const { getContentProps } = useAccordionContext();
-  const accordionItem = useAccordionItemContext();
-  const mergedProps = mergeProps(getContentProps(accordionItem), props);
-  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
-});
+const AccordionContent = forwardRef(
+  function AccordionContent2(props, ref) {
+    const [presenceProps, accordionContentProps] = splitPresenceProps(props);
+    return /* @__PURE__ */ jsx(AccordionItemPresence, { ...presenceProps, children: /* @__PURE__ */ jsx(InnerAccordionContent, { ref, ...accordionContentProps }) });
+  }
+);
+const InnerAccordionContent = forwardRef(
+  function InnerAccordionContent2(props, ref) {
+    const { getContentProps } = useAccordionContext();
+    const accordionItem = useAccordionItemContext();
+    const mergedProps = mergeProps(getContentProps(accordionItem), props);
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+  }
+);
 
 export { AccordionContent };

package/accordion/accordion-item.cjs

@@ -4,24 +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 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 accordionContext = require('./accordion-context.cjs');
 const accordionItemContext = require('./accordion-item-context.cjs');
 
-const AccordionItem = forwardRef.forwardRef((props, ref) => {
+const AccordionItem = react.forwardRef((props, ref) => {
   const [itemProps, { children, ...rest }] = createSplitProps.createSplitProps()(props, [
     "value",
     "disabled"
   ]);
   const { getItemProps, getItemState } = accordionContext.useAccordionContext();
   const itemState = getItemState(itemProps);
-  const mergedProps = react.mergeProps(getItemProps(itemProps), rest);
+  const mergedProps = react$1.mergeProps(getItemProps(itemProps), rest);
   const view = runIfFn.runIfFn(children, itemState);
   return /* @__PURE__ */ jsxRuntime.jsx(accordionItemContext.AccordionItemProvider, { value: { ...itemProps, ...itemState }, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) });
 });
+AccordionItem.displayName = "AccordionItem";
 
 exports.AccordionItem = AccordionItem;

package/accordion/accordion-item.d.ts

@@ -1,8 +1,14 @@
-import type { ForwardRefExoticComponent } from 'react';
 import type { ItemProps, ItemState } from '@zag-js/accordion';
-import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
+import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, ReactNode, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
 import type { Assign } from '../types';
-export type AccordionItemProps = ItemProps & Assign<HTMLArkProps<'div'>, {
+export type AccordionItemProps = ItemProps & Assign<ComponentPropsWithoutRef<typeof ark.div>, {
     children?: React.ReactNode | ((props: ItemState) => React.ReactNode);
 }>;
-export declare const AccordionItem: ForwardRefExoticComponent<Assign<AsChildComponentProps<"div">, AccordionItemProps>>;
+export declare const AccordionItem: ForwardRefExoticComponent<ItemProps & Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref">, "children"> & {
+    children?: ReactNode | ((props: ItemState) => React.ReactNode);
+} & RefAttributes<HTMLDivElement>>;

package/accordion/accordion-item.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 { useAccordionContext } from './accordion-context.mjs';
 import { AccordionItemProvider } from './accordion-item-context.mjs';
@@ -19,5 +19,6 @@ const AccordionItem = forwardRef((props, ref) => {
   const view = runIfFn(children, itemState);
   return /* @__PURE__ */ jsx(AccordionItemProvider, { value: { ...itemProps, ...itemState }, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
 });
+AccordionItem.displayName = "AccordionItem";
 
 export { AccordionItem };

package/accordion/accordion-trigger.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 accordionContext = require('./accordion-context.cjs');
 const accordionItemContext = require('./accordion-item-context.cjs');
 
-const AccordionTrigger = forwardRef.forwardRef((props, ref) => {
-  const { getTriggerProps } = accordionContext.useAccordionContext();
-  const accordionItem = accordionItemContext.useAccordionItemContext();
-  const mergedProps = react.mergeProps(getTriggerProps(accordionItem), props);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
-});
+const AccordionTrigger = react.forwardRef(
+  (props, ref) => {
+    const { getTriggerProps } = accordionContext.useAccordionContext();
+    const accordionItem = accordionItemContext.useAccordionItemContext();
+    const mergedProps = react$1.mergeProps(getTriggerProps(accordionItem), props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
+  }
+);
+AccordionTrigger.displayName = "AccordionTrigger";
 
 exports.AccordionTrigger = AccordionTrigger;

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

package/accordion/accordion-trigger.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 { useAccordionContext } from './accordion-context.mjs';
 import { useAccordionItemContext } from './accordion-item-context.mjs';
 
-const AccordionTrigger = forwardRef((props, ref) => {
-  const { getTriggerProps } = useAccordionContext();
-  const accordionItem = useAccordionItemContext();
-  const mergedProps = mergeProps(getTriggerProps(accordionItem), props);
-  return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
-});
+const AccordionTrigger = forwardRef(
+  (props, ref) => {
+    const { getTriggerProps } = useAccordionContext();
+    const accordionItem = useAccordionItemContext();
+    const mergedProps = mergeProps(getTriggerProps(accordionItem), props);
+    return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
+  }
+);
+AccordionTrigger.displayName = "AccordionTrigger";
 
 export { AccordionTrigger };

package/accordion/accordion.cjs

@@ -4,14 +4,14 @@
 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 accordionContext = require('./accordion-context.cjs');
 const useAccordion = require('./use-accordion.cjs');
 
-const Accordion = forwardRef.forwardRef((props, ref) => {
+const Accordion = react.forwardRef((props, ref) => {
   const [useAccordionProps, divProps] = createSplitProps.createSplitProps()(props, [
     "collapsible",
     "defaultValue",
@@ -26,8 +26,9 @@ const Accordion = forwardRef.forwardRef((props, ref) => {
     "orientation"
   ]);
   const accordion = useAccordion.useAccordion(useAccordionProps);
-  const mergedProps = react.mergeProps(accordion.rootProps, divProps);
+  const mergedProps = react$1.mergeProps(accordion.rootProps, divProps);
   return /* @__PURE__ */ jsxRuntime.jsx(accordionContext.AccordionProvider, { value: accordion, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
 });
+Accordion.displayName = "Accordion";
 
 exports.Accordion = Accordion;

package/accordion/accordion.d.ts

@@ -1,6 +1,13 @@
-import type { ForwardRefExoticComponent } from 'react';
-import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
+import type { Context } from '@zag-js/accordion';
+import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
 import type { Assign } from '../types';
 import { type UseAccordionProps } from './use-accordion';
-export type AccordionProps = Assign<HTMLArkProps<'div'>, UseAccordionProps>;
-export declare const Accordion: ForwardRefExoticComponent<Assign<AsChildComponentProps<"div">, AccordionProps>>;
+export type AccordionProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, UseAccordionProps>;
+export declare const Accordion: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref">, "value" | "id" | "orientation" | "onChange" | "defaultValue" | "dir" | "disabled" | "multiple" | "getRootNode" | "ids" | "collapsible"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+    defaultValue?: string | string[] | null | undefined;
+} & RefAttributes<HTMLDivElement>>;

package/accordion/accordion.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 { AccordionProvider } from './accordion-context.mjs';
 import { useAccordion } from './use-accordion.mjs';
 
@@ -25,5 +25,6 @@ const Accordion = forwardRef((props, ref) => {
   const mergedProps = mergeProps(accordion.rootProps, divProps);
   return /* @__PURE__ */ jsx(AccordionProvider, { value: accordion, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
 });
+Accordion.displayName = "Accordion";
 
 export { Accordion };

package/accordion/use-accordion.cjs

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

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

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

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

package/avatar/avatar-image.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 avatarContext = require('./avatar-context.cjs');
 
-const AvatarImage = forwardRef.forwardRef((props, ref) => {
+const AvatarImage = react.forwardRef((props, ref) => {
   const { imageProps } = avatarContext.useAvatarContext();
-  const mergedProps = react.mergeProps(imageProps, props);
+  const mergedProps = react$1.mergeProps(imageProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.img, { ...mergedProps, ref });
 });
+AvatarImage.displayName = "AvatarImage";
 
 exports.AvatarImage = AvatarImage;

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

package/avatar/avatar-image.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 { useAvatarContext } from './avatar-context.mjs';
 
 const AvatarImage = forwardRef((props, ref) => {
@@ -10,5 +10,6 @@ const AvatarImage = forwardRef((props, ref) => {
   const mergedProps = mergeProps(imageProps, props);
   return /* @__PURE__ */ jsx(ark.img, { ...mergedProps, ref });
 });
+AvatarImage.displayName = "AvatarImage";
 
 export { AvatarImage };

package/avatar/avatar.cjs

@@ -4,14 +4,14 @@
 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 avatarContext = require('./avatar-context.cjs');
 const useAvatar = require('./use-avatar.cjs');
 
-const Avatar = forwardRef.forwardRef((props, ref) => {
+const Avatar = react.forwardRef((props, ref) => {
   const [useAvatarProps, localProps] = createSplitProps.createSplitProps()(props, [
     "getRootNode",
     "id",
@@ -19,8 +19,9 @@ const Avatar = forwardRef.forwardRef((props, ref) => {
     "onLoad"
   ]);
   const avatar = useAvatar.useAvatar(useAvatarProps);
-  const mergedProps = react.mergeProps(avatar.rootProps, localProps);
+  const mergedProps = react$1.mergeProps(avatar.rootProps, localProps);
   return /* @__PURE__ */ jsxRuntime.jsx(avatarContext.AvatarProvider, { value: avatar, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
 });
+Avatar.displayName = "Avatar";
 
 exports.Avatar = Avatar;

package/avatar/avatar.d.ts

@@ -1,6 +1,11 @@
-import type { ForwardRefExoticComponent } from 'react';
-import type { AsChildComponentProps, type HTMLArkProps } from '../factory';
+import type { Context } from '@zag-js/avatar';
+import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ark } from '../factory';
 import { type Assign } from '../types';
 import { type UseAvatarProps } from './use-avatar';
-export type AvatarProps = Assign<HTMLArkProps<'div'>, UseAvatarProps>;
-export declare const Avatar: ForwardRefExoticComponent<Assign<AsChildComponentProps<"div">, AvatarProps>>;
+export type AvatarProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, UseAvatarProps>;
+export declare const Avatar: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref">, "id" | "onLoad" | "onError" | "getRootNode"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & RefAttributes<HTMLDivElement>>;

package/avatar/avatar.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 { AvatarProvider } from './avatar-context.mjs';
 import { useAvatar } from './use-avatar.mjs';
 
@@ -18,5 +18,6 @@ const Avatar = forwardRef((props, ref) => {
   const mergedProps = mergeProps(avatar.rootProps, localProps);
   return /* @__PURE__ */ jsx(AvatarProvider, { value: avatar, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
 });
+Avatar.displayName = "Avatar";
 
 export { Avatar };

package/avatar/use-avatar.cjs

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

package/carousel/carousel-control.cjs

@@ -4,10 +4,11 @@
 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 carousel_anatomy = require('./carousel.anatomy.cjs');
 
-const CarouselControl = forwardRef.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...carousel_anatomy.parts.control.attrs, ...props, ref }));
+const CarouselControl = react.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...carousel_anatomy.parts.control.attrs, ...props, ref }));
+CarouselControl.displayName = "CarouselControl";
 
 exports.CarouselControl = CarouselControl;

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