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

package/index.mjs

@@ -30,6 +30,7 @@ export { Switch } from './switch/index.mjs';
 export { Tabs } from './tabs/index.mjs';
 export { TagsInput } from './tags-input/index.mjs';
 export { Toast } from './toast/index.mjs';
+export { ToggleGroup } from './toggle-group/index.mjs';
 export { Tooltip } from './tooltip/index.mjs';
 export { AccordionContent } from './accordion/accordion-content.mjs';
 export { AccordionItem } from './accordion/accordion-item.mjs';
@@ -75,10 +76,12 @@ export { ComboboxClearTrigger } from './combobox/combobox-clear-trigger.mjs';
 export { ComboboxContent } from './combobox/combobox-content.mjs';
 export { ComboboxControl } from './combobox/combobox-control.mjs';
 export { ComboboxInput } from './combobox/combobox-input.mjs';
+export { ComboboxItem } from './combobox/combobox-item.mjs';
+export { ComboboxItemGroup } from './combobox/combobox-item-group.mjs';
+export { ComboboxItemGroupLabel } from './combobox/combobox-item-group-label.mjs';
+export { ComboboxItemIndicator } from './combobox/combobox-item-indicator.mjs';
+export { ComboboxItemText } from './combobox/combobox-item-text.mjs';
 export { ComboboxLabel } from './combobox/combobox-label.mjs';
-export { ComboboxOption } from './combobox/combobox-option.mjs';
-export { ComboboxOptionGroup } from './combobox/combobox-option-group.mjs';
-export { ComboboxOptionGroupLabel } from './combobox/combobox-option-group-label.mjs';
 export { ComboboxPositioner } from './combobox/combobox-positioner.mjs';
 export { ComboboxTrigger } from './combobox/combobox-trigger.mjs';
 export { anatomy as comboboxAnatomy } from '@zag-js/combobox';
@@ -215,14 +218,19 @@ export { SegmentLabel } from './segment-group/segment-label.mjs';
 export { segmentGroupAnatomy } from './segment-group/segment-group.anatomy.mjs';
 export { useSegmentContext } from './segment-group/segment-context.mjs';
 export { useSegmentGroupContext } from './segment-group/segment-group-context.mjs';
+export { SelectClearTrigger } from './select/select-clear-trigger.mjs';
 export { SelectContent } from './select/select-content.mjs';
+export { SelectControl } from './select/select-control.mjs';
+export { SelectItem } from './select/select-item.mjs';
+export { SelectItemGroup } from './select/select-item-group.mjs';
+export { SelectItemGroupLabel } from './select/select-item-group-label.mjs';
+export { SelectItemIndicator } from './select/select-item-indicator.mjs';
+export { SelectItemText } from './select/select-item-text.mjs';
 export { SelectLabel } from './select/select-label.mjs';
-export { SelectOption } from './select/select-option.mjs';
-export { SelectOptionGroup } from './select/select-option-group.mjs';
-export { SelectOptionGroupLabel } from './select/select-option-group-label.mjs';
 export { SelectPositioner } from './select/select-positioner.mjs';
 export { SelectTrigger } from './select/select-trigger.mjs';
-export { anatomy as selectAnatomy } from '@zag-js/select';
+export { SelectValue } from './select/select-value.mjs';
+export { selectAnatomy } from './select/select.anatomy.mjs';
 export { useSelectContext } from './select/select-context.mjs';
 export { SliderControl } from './slider/slider-control.mjs';
 export { SliderLabel } from './slider/slider-label.mjs';
@@ -267,6 +275,8 @@ export { Toast as ToastRoot } from './toast/toast.mjs';
 export { ToastTitle } from './toast/toast-title.mjs';
 export { anatomy as toastAnatomy } from '@zag-js/toast';
 export { useToastItemContext } from './toast/toast-item-context.mjs';
+export { Toggle } from './toggle-group/toggle.mjs';
+export { useToggleGroupContext } from './toggle-group/toggle-group-context.mjs';
 export { TooltipArrow } from './tooltip/tooltip-arrow.mjs';
 export { TooltipArrowTip } from './tooltip/tooltip-arrow-tip.mjs';
 export { TooltipContent } from './tooltip/tooltip-content.mjs';

package/menu/index.d.ts

@@ -1,5 +1,6 @@
 import { ItemProps, GroupProps } from '@zag-js/menu';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, ButtonHTMLAttributes, LabelHTMLAttributes, ReactNode } from 'react';
+import { HTMLArkProps, PresenceProps } from '..';
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
 import { JSX } from 'react/jsx-runtime';
 /// <reference types="react" />
 import { type MenuProps } from './menu';
@@ -19,48 +20,22 @@ import { MenuTriggerItem, type MenuTriggerItemProps } from './menu-trigger-item'
 import { menuAnatomy } from './menu.anatomy';
 declare const Menu: ((props: MenuProps) => JSX.Element) & {
     Root: (props: MenuProps) => JSX.Element;
-    Arrow: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLDivElement>>;
-    ArrowTip: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    Arrow: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLDivElement>>;
-    Content: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLDivElement>>;
-    ContextTrigger: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLButtonElement>>;
-    Item: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref">, keyof ItemProps> & ItemProps & RefAttributes<HTMLDivElement>>;
-    ItemGroup: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLDivElement>>;
+    ArrowTip: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref">, "id"> & GroupProps & RefAttributes<HTMLDivElement>>;
-    ItemGroupLabel: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
-        ref?: ((instance: HTMLLabelElement | null) => void) | RefObject<HTMLLabelElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLDivElement>>;
+    Content: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "present" | "onExitComplete" | "lazyMount" | "unmountOnExit"> & Omit<PresenceProps, "children"> & RefAttributes<HTMLDivElement>>;
+    ContextTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref">, "htmlFor"> & {
+    } & RefAttributes<HTMLButtonElement>>;
+    Item: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof ItemProps> & ItemProps & RefAttributes<HTMLDivElement>>;
+    ItemGroup: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "id"> & GroupProps & RefAttributes<HTMLDivElement>>;
+    ItemGroupLabel: ForwardRefExoticComponent<Omit<HTMLArkProps<"label">, "htmlFor"> & {
         htmlFor: string;
     } & RefAttributes<HTMLLabelElement>>;
-    OptionItem: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref">, "name" | "value" | "children" | "type" | keyof ItemProps | "onCheckedChange"> & Partial<ItemProps> & {
+    OptionItem: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "name" | "value" | "children" | "type" | keyof ItemProps | "onCheckedChange"> & Partial<ItemProps> & {
         name: string;
         type: "checkbox" | "radio";
         value: string;
@@ -68,26 +43,18 @@ declare const Menu: ((props: MenuProps) => JSX.Element) & {
     } & {
         children?: ReactNode | ((state: MenuOptionItemState) => ReactNode);
     } & RefAttributes<HTMLDivElement>>;
-    Positioner: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    Positioner: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLDivElement>>;
-    Separator: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLHRElement>, HTMLHRElement>, "ref"> & {
-        ref?: ((instance: HTMLHRElement | null) => void) | RefObject<HTMLHRElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLDivElement>>;
+    Separator: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLHRElement>, HTMLHRElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLHRElement>>;
-    Trigger: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLHRElement>>;
+    Trigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLButtonElement>>;
-    TriggerItem: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLButtonElement>>;
+    TriggerItem: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLDivElement>>;
+    } & RefAttributes<HTMLDivElement>>;
 };
 export { Menu, MenuArrow, MenuArrowTip, MenuContent, MenuContextTrigger, MenuItem, MenuItemGroup, MenuItemGroupLabel, MenuOptionItem, MenuPositioner, MenuSeparator, MenuTrigger, MenuTriggerItem, menuAnatomy, useMenuContext, };
 export type { MenuArrowProps, MenuArrowTipProps, MenuContentProps, MenuContextTriggerProps, MenuItemGroupLabelProps, MenuItemGroupProps, MenuItemProps, MenuOptionItemProps, MenuOptionItemState, MenuPositionerProps, MenuProps, MenuSeparatorProps, MenuTriggerItemProps, MenuTriggerProps, };

package/menu/menu-arrow-tip.d.ts

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

package/menu/menu-arrow.d.ts

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

package/menu/menu-content.cjs

@@ -7,13 +7,22 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
+const index = require('../presence/index.cjs');
 const menuContext = require('./menu-context.cjs');
+const splitPresenceProps = require('../presence/split-presence-props.cjs');
 
 const MenuContent = react.forwardRef((props, ref) => {
+  const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
   const api = menuContext.useMenuContext();
-  const mergedProps = react$1.mergeProps(api?.contentProps ?? {}, props);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api?.isOpen, ...presenceProps, children: /* @__PURE__ */ jsxRuntime.jsx(MenuInnerContent, { ref, ...localProps }) });
 });
 MenuContent.displayName = "MenuContent";
+const MenuInnerContent = react.forwardRef(
+  function MenuInnerContent2(props, ref) {
+    const api = menuContext.useMenuContext();
+    const mergedProps = react$1.mergeProps(api?.contentProps ?? {}, props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+  }
+);
 
 exports.MenuContent = MenuContent;

package/menu/menu-content.d.ts

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type MenuContentProps = ComponentPropsWithoutRef<typeof ark.div>;
-export declare const MenuContent: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref"> & 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 MenuContentProps = Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children'>>;
+export declare const MenuContent: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "present" | "onExitComplete" | "lazyMount" | "unmountOnExit"> & Omit<PresenceProps, "children"> & RefAttributes<HTMLDivElement>>;

package/menu/menu-content.mjs

@@ -3,13 +3,22 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
+import { Presence } from '../presence/index.mjs';
 import { useMenuContext } from './menu-context.mjs';
+import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 
 const MenuContent = forwardRef((props, ref) => {
+  const [presenceProps, localProps] = splitPresenceProps(props);
   const api = useMenuContext();
-  const mergedProps = mergeProps(api?.contentProps ?? {}, props);
-  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+  return /* @__PURE__ */ jsx(Presence, { present: api?.isOpen, ...presenceProps, children: /* @__PURE__ */ jsx(MenuInnerContent, { ref, ...localProps }) });
 });
 MenuContent.displayName = "MenuContent";
+const MenuInnerContent = forwardRef(
+  function MenuInnerContent2(props, ref) {
+    const api = useMenuContext();
+    const mergedProps = mergeProps(api?.contentProps ?? {}, props);
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+  }
+);
 
 export { MenuContent };

package/menu/menu-context-trigger.d.ts

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

package/menu/menu-context.d.ts

@@ -1,9 +1,8 @@
 import { Provider } from 'react';
 /// <reference types="react" />
 import { type UseMenuReturn } from './use-menu';
-export type MenuContext = unknown;
 export declare const MenuProvider: Provider<unknown>, useMenuContext: () => unknown;
-export type MenuMachineContext = unknown;
 export declare const MenuMachineProvider: Provider<unknown>, useMenuMachineContext: () => unknown;
-export type MenuTriggerItemProviderContext = () => ReturnType<UseMenuReturn['api']['getTriggerItemProps']> | undefined;
+type MenuTriggerItemProviderContext = () => ReturnType<UseMenuReturn['api']['getTriggerItemProps']> | undefined;
 export declare const MenuTriggerItemProvider: Provider<MenuTriggerItemProviderContext | undefined>, useMenuTriggerItemContext: () => MenuTriggerItemProviderContext | undefined;
+export {};

package/menu/menu-item-group-label.d.ts

@@ -1,13 +1,10 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, 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';
 type MenuItemGroupLabelParams = {
     htmlFor: string;
 };
-export type MenuItemGroupLabelProps = Assign<ComponentPropsWithoutRef<typeof ark.label>, MenuItemGroupLabelParams>;
-export declare const MenuItemGroupLabel: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
-    ref?: ((instance: HTMLLabelElement | null) => void) | RefObject<HTMLLabelElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, "htmlFor"> & MenuItemGroupLabelParams & RefAttributes<HTMLLabelElement>>;
+export type MenuItemGroupLabelProps = Assign<HTMLArkProps<'label'>, MenuItemGroupLabelParams>;
+export declare const MenuItemGroupLabel: ForwardRefExoticComponent<Omit<HTMLArkProps<"label">, "htmlFor"> & MenuItemGroupLabelParams & RefAttributes<HTMLLabelElement>>;
 export {};

package/menu/menu-item-group.d.ts

@@ -1,13 +1,10 @@
 import { GroupProps } from '@zag-js/menu';
-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 UseMenuReturn } from './use-menu';
 type MenuItemGroupParams = Parameters<UseMenuReturn['api']['getItemGroupProps']>[0];
-export type MenuItemGroupProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, MenuItemGroupParams>;
-export declare const MenuItemGroup: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, "id"> & GroupProps & RefAttributes<HTMLDivElement>>;
+export type MenuItemGroupProps = Assign<HTMLArkProps<'div'>, MenuItemGroupParams>;
+export declare const MenuItemGroup: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "id"> & GroupProps & RefAttributes<HTMLDivElement>>;
 export {};

package/menu/menu-item.d.ts

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

package/menu/menu-option-item.d.ts

@@ -1,19 +1,14 @@
-import { ItemProps, type connect } from '@zag-js/menu';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef, type ReactNode } from 'react';
-import { ark } from '../factory';
+import { ItemProps, type OptionItemProps } from '@zag-js/menu';
+import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
+import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
 export type MenuOptionItemState = {
     isActive: boolean;
 };
-export type MenuOptionItemParams = Parameters<ReturnType<typeof connect>['getOptionItemProps']>[0];
-export type MenuOptionItemProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, MenuOptionItemParams & {
+export type MenuOptionItemProps = Assign<HTMLArkProps<'div'>, OptionItemProps & {
     children?: ReactNode | ((state: MenuOptionItemState) => ReactNode);
 }>;
-export declare const MenuOptionItem: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, "name" | "value" | "children" | "type" | keyof ItemProps | "onCheckedChange"> & Partial<ItemProps> & {
+export declare const MenuOptionItem: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "name" | "value" | "children" | "type" | keyof ItemProps | "onCheckedChange"> & Partial<ItemProps> & {
     name: string;
     type: "checkbox" | "radio";
     value: string;

package/menu/menu-positioner.d.ts

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

package/menu/menu-separator.d.ts

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

package/menu/menu-trigger-item.d.ts

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

package/menu/menu-trigger.d.ts

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

package/menu/menu.d.ts

@@ -2,7 +2,7 @@ import { JSX } from 'react/jsx-runtime';
 import { type ReactNode } from 'react';
 import { type Assign } from '../types';
 import { type UseMenuProps } from './use-menu';
-export type MenuState = {
+type MenuState = {
     isOpen: boolean;
     onClose: () => void;
 };
@@ -11,3 +11,4 @@ export type MenuProps = Assign<UseMenuProps, {
     isOpen?: boolean;
 }>;
 export declare const Menu: (props: MenuProps) => JSX.Element;
+export {};

package/menu/menu.stories.d.ts

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

package/menu/use-menu.d.ts

@@ -1,6 +1,7 @@
 import * as menu from '@zag-js/menu';
 import { type Optional } from '../types';
-export type UseMenuProps = Optional<menu.Context, 'id'>;
+export interface UseMenuProps extends Optional<menu.Context, 'id'> {
+}
 export type UseMenuReturn = {
     machine: ReturnType<typeof menu.machine>;
     api: menu.Api;

package/number-input/index.d.ts

@@ -1,8 +1,9 @@
-import { Context } from '@zag-js/number-input';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, ButtonHTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes } from 'react';
+import { UseNumberInputProps } from './use-number-input';
+import { HTMLArkProps } from '..';
+import { ForwardRefExoticComponent, RefAttributes, DetailedHTMLProps, HTMLAttributes, ButtonHTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes } from 'react';
 /// <reference types="react" />
 import { type NumberInputProps } from './number-input';
-import { useNumberInputContext } from './number-input-context';
+import { useNumberInputContext, type NumberInputContext } from './number-input-context';
 import { NumberInputControl, type NumberInputControlProps } from './number-input-control';
 import { NumberInputDecrementTrigger, type NumberInputDecrementTriggerProps } from './number-input-decrement-trigger';
 import { NumberInputInput, type NumberInputInputProps } from './number-input-field';
@@ -10,50 +11,26 @@ import { NumberInputIncrementTrigger, type NumberInputIncrementTriggerProps } fr
 import { NumberInputLabel, type NumberInputLabelProps } from './number-input-label';
 import { NumberInputScrubber, type NumberInputScrubberProps } from './number-input-scrubber';
 import { numberInputAnatomy } from './number-input.anatomy';
-declare const NumberInput: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, "name" | "value" | "getRootNode" | "form" | "pattern" | "id" | "ids" | "disabled" | "defaultValue" | "dir" | "inputMode" | "onFocus" | "onBlur" | "onChange" | "onInvalid" | "max" | "min" | "readOnly" | "step" | "format" | "invalid" | "translations" | "parse" | "allowMouseWheel" | "allowOverflow" | "validateCharacter" | "clampValueOnBlur" | "focusInputOnChange" | "minFractionDigits" | "maxFractionDigits" | "spinOnPress"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
-    defaultValue?: string | undefined;
-} & RefAttributes<HTMLDivElement>> & {
-    Root: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+declare const NumberInput: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UseNumberInputProps> & UseNumberInputProps & RefAttributes<HTMLDivElement>> & {
+    Root: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UseNumberInputProps> & UseNumberInputProps & RefAttributes<HTMLDivElement>>;
+    Control: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref">, "name" | "value" | "getRootNode" | "form" | "pattern" | "id" | "ids" | "disabled" | "defaultValue" | "dir" | "inputMode" | "onFocus" | "onBlur" | "onChange" | "onInvalid" | "max" | "min" | "readOnly" | "step" | "format" | "invalid" | "translations" | "parse" | "allowMouseWheel" | "allowOverflow" | "validateCharacter" | "clampValueOnBlur" | "focusInputOnChange" | "minFractionDigits" | "maxFractionDigits" | "spinOnPress"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
-        defaultValue?: string | undefined;
     } & RefAttributes<HTMLDivElement>>;
-    Control: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    DecrementTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLDivElement>>;
-    DecrementTrigger: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLButtonElement>>;
+    Input: ForwardRefExoticComponent<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLButtonElement>>;
-    Input: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-        ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLInputElement>>;
+    IncrementTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLInputElement>>;
-    IncrementTrigger: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLButtonElement>>;
+    Label: ForwardRefExoticComponent<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLButtonElement>>;
-    Label: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
-        ref?: ((instance: HTMLLabelElement | null) => void) | RefObject<HTMLLabelElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLLabelElement>>;
+    Scrubber: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLLabelElement>>;
-    Scrubber: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLDivElement>>;
+    } & RefAttributes<HTMLDivElement>>;
 };
 export { NumberInput, NumberInputControl, NumberInputDecrementTrigger, NumberInputIncrementTrigger, NumberInputInput, NumberInputLabel, NumberInputScrubber, numberInputAnatomy, useNumberInputContext, };
-export type { NumberInputControlProps, NumberInputDecrementTriggerProps, NumberInputIncrementTriggerProps, NumberInputInputProps, NumberInputLabelProps, NumberInputProps, NumberInputScrubberProps, };
+export type { NumberInputContext, NumberInputControlProps, NumberInputDecrementTriggerProps, NumberInputIncrementTriggerProps, NumberInputInputProps, NumberInputLabelProps, NumberInputProps, NumberInputScrubberProps, };

package/number-input/number-input-control.d.ts

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