@ark-ui/react 0.13.1 → 0.15.0-beta.0

package/CHANGELOG.md

@@ -6,6 +6,39 @@ description: All notable changes to this project will be documented in this file
 
 ## [Unreleased]
 
+## [0.15.0-beta.0] - 2023-09-14
+
+### Added
+
+- Added `ToggleGroup` component
+- Added `type HTMLArkProps` that can be used together with the `ark` factory fn to create a type that can be used with `asChild` prop.
+
+### Changed
+
+- Revised `Comoobox` component to support multiple selection
+- Revised `Select` component to support multiple selection
+
+### Fixed
+
+- Fix issue where event callbacks that use `flushSync` did not have a stable reference, resulting in a noticable blocking re-renders.
+  > Affected components: `Slider`, `RangeSlider`, `NumberInput`, `ColorPicker`
+
+## [0.14.0] - 2023-08-29
+
+### Changed
+
+- Changed `MenuItem` from a `button` to a `div` element.
+- `Accordion`: Remove support for passing value as `string`. The value property must be an array of strings.
+- `Combobox`: Remove `selectInputOnFocus` option in favor of userland control
+- `TagsInput`: Rename `onHighlight` to `onFocusChange`
+
+### Removed
+
+- Removed `'use client'` annotation from `compose-refs` function.
+- Removed `Switchinput`. This component is no longer required.
+- `TagsInput`: Removed`onTagUpdate` use `onChange` instead.
+- `Switch`: Removed `defaultChecked` in favor of `defaultIsChecked`
+
 ## [0.13.1] - 2023-08-13
 
 ### Changed
@@ -191,7 +224,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.13.1...HEAD
+[unreleased]: https://github.com/chakra-ui/ark/compare/@ark-ui/react@0.15.0-beta.0...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
@@ -217,5 +250,7 @@ description: All notable changes to this project will be documented in this file
 
 [0.12.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.12.0
 [0.13.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.13.0
-
 [0.13.1]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.13.1
+[0.14.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.14.0
+
+[0.15.0-beta.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.15.0-beta.0

package/accordion/accordion-content.cjs

@@ -7,23 +7,23 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
-require('../presence/index.cjs');
+const index = require('../presence/index.cjs');
 const accordionContext = require('./accordion-context.cjs');
 const accordionItemContext = require('./accordion-item-context.cjs');
-const accordionItemPresence = require('./accordion-item-presence.cjs');
 const splitPresenceProps = require('../presence/split-presence-props.cjs');
 
 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 [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
+    const api = accordionItemContext.useAccordionItemContext();
+    return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api.isOpen, ...presenceProps, children: /* @__PURE__ */ jsxRuntime.jsx(AccordionInnerContent, { ref, ...localProps }) });
   }
 );
-const InnerAccordionContent = react.forwardRef(
-  function InnerAccordionContent2(props, ref) {
-    const { getContentProps } = accordionContext.useAccordionContext();
+const AccordionInnerContent = react.forwardRef(
+  function AccordionInnerContent2(props, ref) {
+    const api = accordionContext.useAccordionContext();
     const accordionItem = accordionItemContext.useAccordionItemContext();
-    const mergedProps = react$1.mergeProps(getContentProps(accordionItem), props);
+    const mergedProps = react$1.mergeProps(api.getContentProps(accordionItem), props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );

package/accordion/accordion-content.d.ts

@@ -1,10 +1,7 @@
-import { PresenceProps } from '../presence';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-import { type AccordionItemPresenceProps } from './accordion-item-presence';
-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>>;
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+import { type PresenceProps } from '../presence';
+import type { Assign } from '../types';
+export type AccordionContentProps = Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children'>>;
+export declare const AccordionContent: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "present" | "onExitComplete" | "lazyMount" | "unmountOnExit"> & Omit<PresenceProps, "children"> & RefAttributes<HTMLDivElement>>;

package/accordion/accordion-content.mjs

@@ -3,23 +3,23 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
-import '../presence/index.mjs';
+import { Presence } from '../presence/index.mjs';
 import { useAccordionContext } from './accordion-context.mjs';
 import { useAccordionItemContext } from './accordion-item-context.mjs';
-import { AccordionItemPresence } from './accordion-item-presence.mjs';
 import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 
 const AccordionContent = forwardRef(
   function AccordionContent2(props, ref) {
-    const [presenceProps, accordionContentProps] = splitPresenceProps(props);
-    return /* @__PURE__ */ jsx(AccordionItemPresence, { ...presenceProps, children: /* @__PURE__ */ jsx(InnerAccordionContent, { ref, ...accordionContentProps }) });
+    const [presenceProps, localProps] = splitPresenceProps(props);
+    const api = useAccordionItemContext();
+    return /* @__PURE__ */ jsx(Presence, { present: api.isOpen, ...presenceProps, children: /* @__PURE__ */ jsx(AccordionInnerContent, { ref, ...localProps }) });
   }
 );
-const InnerAccordionContent = forwardRef(
-  function InnerAccordionContent2(props, ref) {
-    const { getContentProps } = useAccordionContext();
+const AccordionInnerContent = forwardRef(
+  function AccordionInnerContent2(props, ref) {
+    const api = useAccordionContext();
     const accordionItem = useAccordionItemContext();
-    const mergedProps = mergeProps(getContentProps(accordionItem), props);
+    const mergedProps = mergeProps(api.getContentProps(accordionItem), props);
     return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );

package/accordion/accordion-context.d.ts

@@ -1,12 +1,5 @@
-import { PublicApi } from '@zag-js/accordion';
-import { Provider, HTMLAttributes, CSSProperties } from 'react';
+import { Provider } from 'react';
 /// <reference types="react" />
 import { type UseAccordionReturn } from './use-accordion';
 export type AccordionContext = UseAccordionReturn;
-export declare const AccordionProvider: Provider<PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>>, useAccordionContext: () => PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>;
+export declare const AccordionProvider: Provider<UseAccordionReturn>, useAccordionContext: () => UseAccordionReturn;

package/accordion/accordion-item-context.d.ts

@@ -1,8 +1,6 @@
 import { Provider } from 'react';
 /// <reference types="react" />
-import { type AccordionContext } from './accordion-context';
-export type AccordionItemContext = ReturnType<AccordionContext['getItemState']> & {
-    value: string;
-    disabled?: boolean;
-};
+import type { ItemProps, ItemState } from '@zag-js/accordion';
+export interface AccordionItemContext extends ItemProps, ItemState {
+}
 export declare const AccordionItemProvider: Provider<AccordionItemContext>, useAccordionItemContext: () => AccordionItemContext;

package/accordion/accordion-item.d.ts

@@ -1,14 +1,11 @@
+import { ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
+/// <reference types="react" />
 import type { ItemProps, ItemState } from '@zag-js/accordion';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, ReactNode, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
+import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
-export type AccordionItemProps = ItemProps & Assign<ComponentPropsWithoutRef<typeof ark.div>, {
+export type AccordionItemProps = ItemProps & Assign<HTMLArkProps<'div'>, {
     children?: React.ReactNode | ((props: ItemState) => React.ReactNode);
 }>;
-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"> & {
+export declare const AccordionItem: ForwardRefExoticComponent<ItemProps & Omit<HTMLArkProps<"div">, "children"> & {
     children?: ReactNode | ((props: ItemState) => React.ReactNode);
 } & RefAttributes<HTMLDivElement>>;

package/accordion/accordion-trigger.d.ts

@@ -1,8 +1,7 @@
-import { 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;
-} & {
+import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export type AccordionTriggerProps = HTMLArkProps<'button'>;
+export declare const AccordionTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLButtonElement>>;
+} & RefAttributes<HTMLButtonElement>>;

package/accordion/accordion.cjs

@@ -22,8 +22,9 @@ const Accordion = react.forwardRef((props, ref) => {
     "ids",
     "multiple",
     "onChange",
-    "value",
-    "orientation"
+    "onFocusChange",
+    "orientation",
+    "value"
   ]);
   const accordion = useAccordion.useAccordion(useAccordionProps);
   const mergedProps = react$1.mergeProps(accordion.rootProps, divProps);

package/accordion/accordion.d.ts

@@ -1,13 +1,7 @@
-import { Context } from '@zag-js/accordion';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 import { type UseAccordionProps } from './use-accordion';
-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" | "getRootNode" | "id" | "ids" | "disabled" | "orientation" | "onChange" | "defaultValue" | "dir" | "multiple" | "collapsible"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
-    defaultValue?: string | string[] | null | undefined;
-} & RefAttributes<HTMLDivElement>>;
+export type AccordionProps = Assign<HTMLArkProps<'div'>, UseAccordionProps>;
+export declare const Accordion: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UseAccordionProps> & UseAccordionProps & RefAttributes<HTMLDivElement>>;

package/accordion/accordion.mjs

@@ -18,8 +18,9 @@ const Accordion = forwardRef((props, ref) => {
     "ids",
     "multiple",
     "onChange",
-    "value",
-    "orientation"
+    "onFocusChange",
+    "orientation",
+    "value"
   ]);
   const accordion = useAccordion(useAccordionProps);
   const mergedProps = mergeProps(accordion.rootProps, divProps);

package/accordion/accordion.stories.d.ts

@@ -1,6 +1,6 @@
 import { JSX } from 'react/jsx-runtime';
 import type { Meta } from '@storybook/react';
-import { Accordion } from '.';
+import { Accordion } from './';
 type AccordionType = typeof Accordion;
 declare const meta: Meta<AccordionType>;
 export default meta;

package/accordion/index.d.ts

@@ -1,45 +1,24 @@
-import { PresenceProps } from '..';
-import { Context, ItemProps, ItemState } from '@zag-js/accordion';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, ReactNode, ButtonHTMLAttributes } from 'react';
+import { ItemProps, ItemState } from '@zag-js/accordion';
+import { UseAccordionProps } from './use-accordion';
+import { HTMLArkProps, PresenceProps } from '..';
+import { ForwardRefExoticComponent, RefAttributes, ReactNode, DetailedHTMLProps, ButtonHTMLAttributes } from 'react';
 /// <reference types="react" />
 import { type AccordionProps } from './accordion';
 import { AccordionContent, type AccordionContentProps } from './accordion-content';
-import { useAccordionContext } from './accordion-context';
+import { useAccordionContext, type AccordionContext } from './accordion-context';
 import { AccordionItem, type AccordionItemProps } from './accordion-item';
-import { useAccordionItemContext } from './accordion-item-context';
+import { useAccordionItemContext, type AccordionItemContext } from './accordion-item-context';
 import { AccordionTrigger, type AccordionTriggerProps } from './accordion-trigger';
 import { accordionAnatomy } from './accordion.anatomy';
-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" | "getRootNode" | "id" | "ids" | "disabled" | "orientation" | "onChange" | "defaultValue" | "dir" | "multiple" | "collapsible"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
-    defaultValue?: string | string[] | null | undefined;
-} & RefAttributes<HTMLDivElement>> & {
-    Root: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref">, "value" | "getRootNode" | "id" | "ids" | "disabled" | "orientation" | "onChange" | "defaultValue" | "dir" | "multiple" | "collapsible"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
-        defaultValue?: string | string[] | null | undefined;
-    } & RefAttributes<HTMLDivElement>>;
-    Content: 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>>;
-    Item: ForwardRefExoticComponent<ItemProps & Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref">, "children"> & {
+declare const Accordion: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UseAccordionProps> & UseAccordionProps & RefAttributes<HTMLDivElement>> & {
+    Root: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UseAccordionProps> & UseAccordionProps & RefAttributes<HTMLDivElement>>;
+    Content: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "present" | "onExitComplete" | "lazyMount" | "unmountOnExit"> & Omit<PresenceProps, "children"> & RefAttributes<HTMLDivElement>>;
+    Item: ForwardRefExoticComponent<ItemProps & Omit<HTMLArkProps<"div">, "children"> & {
         children?: ReactNode | ((props: ItemState) => ReactNode);
     } & RefAttributes<HTMLDivElement>>;
-    Trigger: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
-    } & {
+    Trigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLButtonElement>>;
+    } & RefAttributes<HTMLButtonElement>>;
 };
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, accordionAnatomy, useAccordionContext, useAccordionItemContext, };
-export type { AccordionContentProps, AccordionItemProps, AccordionProps, AccordionTriggerProps };
+export type { AccordionContentProps, AccordionContext, AccordionItemContext, AccordionItemProps, AccordionProps, AccordionTriggerProps, };

package/accordion/use-accordion.d.ts

@@ -1,12 +1,7 @@
-import { HTMLAttributes, CSSProperties } from 'react';
-/// <reference types="react" />
 import * as accordion from '@zag-js/accordion';
 import { type Optional } from '../types';
-export type UseAccordionProps = Optional<accordion.Context, 'id'> & {
+export interface UseAccordionProps extends Optional<accordion.Context, 'id'> {
     defaultValue?: accordion.Context['value'];
-};
-export type UseAccordionReturn = ReturnType<typeof useAccordion>;
-export declare const useAccordion: (props: UseAccordionProps) => accordion.PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>;
+}
+export type UseAccordionReturn = accordion.Api;
+export declare const useAccordion: (props: UseAccordionProps) => UseAccordionReturn;

package/avatar/avatar-context.d.ts

@@ -1,12 +1,5 @@
-import { PublicApi } from '@zag-js/avatar';
-import { Provider, HTMLAttributes, CSSProperties } from 'react';
+import { Provider } from 'react';
 /// <reference types="react" />
 import { type UseAvatarReturn } from './use-avatar';
 export type AvatarContext = UseAvatarReturn;
-export declare const AvatarProvider: Provider<PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>>, useAvatarContext: () => PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>;
+export declare const AvatarProvider: Provider<UseAvatarReturn>, useAvatarContext: () => UseAvatarReturn;

package/avatar/avatar-fallback.d.ts

@@ -1,8 +1,7 @@
-import { 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?: RefObject<HTMLSpanElement> | ((instance: HTMLSpanElement | null) => void) | null | undefined;
-} & {
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export type AvatarFallbackProps = HTMLArkProps<'span'>;
+export declare const AvatarFallback: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLSpanElement>>;
+} & RefAttributes<HTMLSpanElement>>;

package/avatar/avatar-image.d.ts

@@ -1,8 +1,7 @@
-import { 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;
-} & {
+import { ForwardRefExoticComponent, DetailedHTMLProps, ImgHTMLAttributes, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export type AvatarImageProps = HTMLArkProps<'img'>;
+export declare const AvatarImage: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLImageElement>>;
+} & RefAttributes<HTMLImageElement>>;

package/avatar/avatar.d.ts

@@ -1,11 +1,7 @@
-import { Context } from '@zag-js/avatar';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
 import { type UseAvatarProps } from './use-avatar';
-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">, "getRootNode" | "id" | "onLoad" | "onError"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & RefAttributes<HTMLDivElement>>;
+export type AvatarProps = Assign<HTMLArkProps<'div'>, UseAvatarProps>;
+export declare const Avatar: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UseAvatarProps> & UseAvatarProps & RefAttributes<HTMLDivElement>>;

package/avatar/avatar.test.d.ts

@@ -0,0 +1 @@
+export {};

package/avatar/index.d.ts

@@ -1,31 +1,20 @@
-import { Context } from '@zag-js/avatar';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, ImgHTMLAttributes } from 'react';
+import { UseAvatarProps } from './use-avatar';
+import { HTMLArkProps } from '..';
+import { ForwardRefExoticComponent, RefAttributes, DetailedHTMLProps, HTMLAttributes, ImgHTMLAttributes } from 'react';
 /// <reference types="react" />
 import { type AvatarProps } from './avatar';
-import { useAvatarContext } from './avatar-context';
+import { useAvatarContext, type AvatarContext } from './avatar-context';
 import { AvatarFallback, type AvatarFallbackProps } from './avatar-fallback';
 import { AvatarImage, type AvatarImageProps } from './avatar-image';
 import { avatarAnatomy } from './avatar.anatomy';
-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">, "getRootNode" | "id" | "onLoad" | "onError"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & RefAttributes<HTMLDivElement>> & {
-    Root: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+declare const Avatar: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UseAvatarProps> & UseAvatarProps & RefAttributes<HTMLDivElement>> & {
+    Root: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UseAvatarProps> & UseAvatarProps & RefAttributes<HTMLDivElement>>;
+    Fallback: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref">, "getRootNode" | "id" | "onLoad" | "onError"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & RefAttributes<HTMLDivElement>>;
-    Fallback: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-        ref?: RefObject<HTMLSpanElement> | ((instance: HTMLSpanElement | null) => void) | null | undefined;
-    } & {
+    } & RefAttributes<HTMLSpanElement>>;
+    Image: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLSpanElement>>;
-    Image: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & {
-        ref?: ((instance: HTMLImageElement | null) => void) | RefObject<HTMLImageElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLImageElement>>;
+    } & RefAttributes<HTMLImageElement>>;
 };
 export { Avatar, AvatarFallback, AvatarImage, avatarAnatomy, useAvatarContext };
-export type { AvatarFallbackProps, AvatarImageProps, AvatarProps };
+export type { AvatarContext, AvatarFallbackProps, AvatarImageProps, AvatarProps };

package/avatar/use-avatar.d.ts

@@ -1,10 +1,6 @@
-import { HTMLAttributes, CSSProperties } from 'react';
-/// <reference types="react" />
 import * as avatar from '@zag-js/avatar';
 import { type Optional } from '../types';
-export type UseAvatarProps = Optional<avatar.Context, 'id'>;
-export type UseAvatarReturn = ReturnType<typeof useAvatar>;
-export declare const useAvatar: (props: UseAvatarProps) => avatar.PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>;
+export interface UseAvatarProps extends Optional<avatar.Context, 'id'> {
+}
+export type UseAvatarReturn = avatar.Api;
+export declare const useAvatar: (props: UseAvatarProps) => UseAvatarReturn;

package/carousel/carousel-context.d.ts

@@ -1,12 +1,5 @@
-import { PublicApi } from '@zag-js/carousel';
-import { Provider, HTMLAttributes, CSSProperties } from 'react';
+import { Provider } from 'react';
 /// <reference types="react" />
 import { type UseCarouselReturn } from './use-carousel';
 export type CarouselContext = UseCarouselReturn;
-export declare const CarouselProvider: Provider<PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>>, useCarouselContext: () => PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>;
+export declare const CarouselProvider: Provider<UseCarouselReturn>, useCarouselContext: () => UseCarouselReturn;

package/carousel/carousel-control.d.ts

@@ -1,8 +1,7 @@
-import { 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;
-} & {
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export type CarouselControlProps = HTMLArkProps<'div'>;
+export declare const CarouselControl: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLDivElement>>;
+} & RefAttributes<HTMLDivElement>>;

package/carousel/carousel-indicator-group.d.ts

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

package/carousel/carousel-indicator.d.ts

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

package/carousel/carousel-next-slide-trigger.d.ts

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

package/carousel/carousel-prev-slide-trigger.d.ts

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

package/carousel/carousel-slide-group.d.ts

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