@ark-ui/react 1.0.0-beta.3 → 1.0.0-beta.5

package/index.mjs

@@ -175,7 +175,10 @@ export { PopoverPositioner } from './popover/popover-positioner.mjs';
 export { PopoverTitle } from './popover/popover-title.mjs';
 export { PopoverTrigger } from './popover/popover-trigger.mjs';
 export { usePopoverContext } from './popover/popover-context.mjs';
+export { PresencePropsProvider, usePresencePropsContext } from './presence/presence-props-context.mjs';
+export { PresenceProvider, usePresenceContext } from './presence/presence-context.mjs';
 export { splitPresenceProps } from './presence/split-presence-props.mjs';
+export { usePresence } from './presence/use-presence.mjs';
 export { RadioGroupItem } from './radio-group/radio-group-item.mjs';
 export { RadioGroupItemControl } from './radio-group/radio-group-item-control.mjs';
 export { RadioGroupItemText } from './radio-group/radio-group-item-text.mjs';
@@ -213,10 +216,10 @@ export { SliderControl } from './slider/slider-control.mjs';
 export { SliderLabel } from './slider/slider-label.mjs';
 export { SliderMarker } from './slider/slider-marker.mjs';
 export { SliderMarkerGroup } from './slider/slider-marker-group.mjs';
-export { SliderOutput } from './slider/slider-output.mjs';
 export { SliderRange } from './slider/slider-range.mjs';
 export { SliderThumb } from './slider/slider-thumb.mjs';
 export { SliderTrack } from './slider/slider-track.mjs';
+export { SliderValueText } from './slider/slider-value-text.mjs';
 export { useSliderContext } from './slider/slider-context.mjs';
 export { SplitterPanel } from './splitter/splitter-panel.mjs';
 export { SplitterResizeTrigger } from './splitter/splitter-resize-trigger.mjs';

package/menu/index.d.ts

@@ -23,7 +23,7 @@ declare const Menu: ((props: MenuProps) => JSX.Element) & {
     ContextTrigger: ForwardRefExoticComponent<MenuContextTriggerProps & RefAttributes<HTMLButtonElement>>;
     Item: ForwardRefExoticComponent<MenuItemProps & RefAttributes<HTMLDivElement>>;
     ItemGroup: ForwardRefExoticComponent<MenuItemGroupProps & RefAttributes<HTMLDivElement>>;
-    ItemGroupLabel: ForwardRefExoticComponent<MenuItemGroupLabelProps & RefAttributes<HTMLLabelElement>>;
+    ItemGroupLabel: ForwardRefExoticComponent<MenuItemGroupLabelProps & RefAttributes<HTMLDivElement>>;
     OptionItem: ForwardRefExoticComponent<MenuOptionItemProps & RefAttributes<HTMLDivElement>>;
     Positioner: ForwardRefExoticComponent<MenuPositionerProps & RefAttributes<HTMLDivElement>>;
     Separator: ForwardRefExoticComponent<MenuSeparatorProps & RefAttributes<HTMLHRElement>>;

package/menu/menu-content.cjs

@@ -7,22 +7,19 @@ 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');
+require('../presence/index.cjs');
 const menuContext = require('./menu-context.cjs');
-const splitPresenceProps = require('../presence/split-presence-props.cjs');
+const presenceContext = require('../presence/presence-context.cjs');
 
 const MenuContent = react.forwardRef((props, ref) => {
-  const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
   const api = menuContext.useMenuContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api?.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsxRuntime.jsx(MenuInnerContent, { ref, ...localProps }) });
+  const presenceApi = presenceContext.usePresenceContext();
+  const mergedProps = react$1.mergeProps(api?.contentProps ?? {}, presenceApi.getPresenceProps(ref), props);
+  if (presenceApi.isUnmounted) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps });
 });
 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,6 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-import { type PresenceProps } from '../presence';
-import type { Assign } from '../types';
-export interface MenuContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children' | 'fallback'>> {
+export interface MenuContentProps extends HTMLArkProps<'div'> {
 }
 export declare const MenuContent: ForwardRefExoticComponent<MenuContentProps & RefAttributes<HTMLDivElement>>;

package/menu/menu-content.mjs

@@ -3,22 +3,19 @@ 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 '../presence/index.mjs';
 import { useMenuContext } from './menu-context.mjs';
-import { splitPresenceProps } from '../presence/split-presence-props.mjs';
+import { usePresenceContext } from '../presence/presence-context.mjs';
 
 const MenuContent = forwardRef((props, ref) => {
-  const [presenceProps, localProps] = splitPresenceProps(props);
   const api = useMenuContext();
-  return /* @__PURE__ */ jsx(Presence, { present: api?.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsx(MenuInnerContent, { ref, ...localProps }) });
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps(api?.contentProps ?? {}, presenceApi.getPresenceProps(ref), props);
+  if (presenceApi.isUnmounted) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps });
 });
 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-item-group-label.cjs

@@ -15,7 +15,7 @@ const MenuItemGroupLabel = react.forwardRef(
     const [labelProps, htmlProps] = createSplitProps.createSplitProps()(props, ["htmlFor"]);
     const api = menuContext.useMenuContext();
     const mergedProps = react$1.mergeProps(api?.getItemGroupLabelProps(labelProps) ?? {}, htmlProps);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref });
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );
 MenuItemGroupLabel.displayName = "MenuItemGroupLabel";

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

@@ -2,10 +2,10 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
-interface MenuItemGroupLabelParams {
+interface ItemGroupLabelProps {
     htmlFor: string;
 }
-export interface MenuItemGroupLabelProps extends Assign<HTMLArkProps<'label'>, MenuItemGroupLabelParams> {
+export interface MenuItemGroupLabelProps extends Assign<HTMLArkProps<'div'>, ItemGroupLabelProps> {
 }
-export declare const MenuItemGroupLabel: ForwardRefExoticComponent<MenuItemGroupLabelProps & RefAttributes<HTMLLabelElement>>;
+export declare const MenuItemGroupLabel: ForwardRefExoticComponent<MenuItemGroupLabelProps & RefAttributes<HTMLDivElement>>;
 export {};

package/menu/menu-item-group-label.mjs

@@ -11,7 +11,7 @@ const MenuItemGroupLabel = forwardRef(
     const [labelProps, htmlProps] = createSplitProps()(props, ["htmlFor"]);
     const api = useMenuContext();
     const mergedProps = mergeProps(api?.getItemGroupLabelProps(labelProps) ?? {}, htmlProps);
-    return /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref });
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );
 MenuItemGroupLabel.displayName = "MenuItemGroupLabel";

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

@@ -2,8 +2,8 @@ import type { OptionItemProps, OptionItemState } from '@zag-js/menu';
 import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
 import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
-export interface MenuOptionItemProps extends Assign<HTMLArkProps<'div'>, OptionItemProps & {
+export interface MenuOptionItemProps extends Assign<HTMLArkProps<'div'>, {
     children?: ReactNode | ((state: OptionItemState) => ReactNode);
-}> {
+}>, OptionItemProps {
 }
 export declare const MenuOptionItem: ForwardRefExoticComponent<MenuOptionItemProps & RefAttributes<HTMLDivElement>>;

package/menu/menu.cjs

@@ -6,13 +6,18 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const react = require('react');
 const createSplitProps = require('../create-split-props.cjs');
+require('../presence/index.cjs');
 const runIfFn = require('../run-if-fn.cjs');
 const useEffectOnce = require('../use-effect-once.cjs');
 const menuContext = require('./menu-context.cjs');
 const useMenu = require('./use-menu.cjs');
+const splitPresenceProps = require('../presence/split-presence-props.cjs');
+const usePresence = require('../presence/use-presence.cjs');
+const presenceContext = require('../presence/presence-context.cjs');
 
 const Menu = (props) => {
-  const [menuProps, { children, isOpen }] = createSplitProps.createSplitProps()(props, [
+  const [presenceProps, menuProps] = splitPresenceProps.splitPresenceProps(props);
+  const [useMenuProps, localProps] = createSplitProps.createSplitProps()(menuProps, [
     "anchorPoint",
     "aria-label",
     "closeOnSelect",
@@ -28,32 +33,26 @@ const Menu = (props) => {
     "onPointerDownOutside",
     "onSelect",
     "onValueChange",
+    "open",
     "positioning",
     "value"
   ]);
   const parentApi = menuContext.useMenuContext();
   const parentMachine = menuContext.useMenuMachineContext();
-  const { api, machine } = useMenu.useMenu(menuProps);
-  const view = runIfFn.runIfFn(children, {
-    isOpen: api.isOpen,
-    onClose: api.close
-  });
+  const { api, machine } = useMenu.useMenu(useMenuProps);
+  const presenceApi = usePresence.usePresence({ ...presenceProps, present: api.isOpen });
+  const view = runIfFn.runIfFn(localProps.children, api);
   useEffectOnce.useEffectOnce(() => {
     if (!parentMachine)
       return;
     parentApi.setChild(machine);
     api.setParent(parentMachine);
   });
-  react.useEffect(() => {
-    if (isOpen && !api.isOpen) {
-      api.open();
-    }
-  }, [isOpen, api]);
   const getTriggerItemProps = react.useCallback(
     () => parentApi.getTriggerItemProps(api),
     [api, parentApi]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(menuContext.MenuTriggerItemProvider, { value: getTriggerItemProps, children: /* @__PURE__ */ jsxRuntime.jsx(menuContext.MenuMachineProvider, { value: machine, children: /* @__PURE__ */ jsxRuntime.jsx(menuContext.MenuProvider, { value: api, children: view }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(menuContext.MenuTriggerItemProvider, { value: getTriggerItemProps, children: /* @__PURE__ */ jsxRuntime.jsx(menuContext.MenuMachineProvider, { value: machine, children: /* @__PURE__ */ jsxRuntime.jsx(menuContext.MenuProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(presenceContext.PresenceProvider, { value: presenceApi, children: view }) }) }) });
 };
 
 exports.Menu = Menu;

package/menu/menu.d.ts

@@ -1,15 +1,8 @@
 import { JSX } from 'react/jsx-runtime';
 import { type ReactNode } from 'react';
-import { type Assign } from '../types';
-import { type UseMenuProps } from './use-menu';
-interface MenuState {
-    isOpen: boolean;
-    onClose: () => void;
-}
-export interface MenuProps extends Assign<UseMenuProps, {
-    children?: ReactNode | ((state: MenuState) => ReactNode);
-    isOpen?: boolean;
-}> {
+import { type UsePresenceProps } from '../presence';
+import { type UseMenuProps, type UseMenuReturn } from './use-menu';
+export interface MenuProps extends UseMenuProps, UsePresenceProps {
+    children?: ReactNode | ((api: UseMenuReturn['api']) => ReactNode);
 }
 export declare const Menu: (props: MenuProps) => JSX.Element;
-export {};

package/menu/menu.mjs

@@ -1,14 +1,19 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { useEffect, useCallback } from 'react';
+import { useCallback } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
+import '../presence/index.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
 import { useEffectOnce } from '../use-effect-once.mjs';
 import { useMenuContext, useMenuMachineContext, MenuTriggerItemProvider, MenuMachineProvider, MenuProvider } from './menu-context.mjs';
 import { useMenu } from './use-menu.mjs';
+import { splitPresenceProps } from '../presence/split-presence-props.mjs';
+import { usePresence } from '../presence/use-presence.mjs';
+import { PresenceProvider } from '../presence/presence-context.mjs';
 
 const Menu = (props) => {
-  const [menuProps, { children, isOpen }] = createSplitProps()(props, [
+  const [presenceProps, menuProps] = splitPresenceProps(props);
+  const [useMenuProps, localProps] = createSplitProps()(menuProps, [
     "anchorPoint",
     "aria-label",
     "closeOnSelect",
@@ -24,32 +29,26 @@ const Menu = (props) => {
     "onPointerDownOutside",
     "onSelect",
     "onValueChange",
+    "open",
     "positioning",
     "value"
   ]);
   const parentApi = useMenuContext();
   const parentMachine = useMenuMachineContext();
-  const { api, machine } = useMenu(menuProps);
-  const view = runIfFn(children, {
-    isOpen: api.isOpen,
-    onClose: api.close
-  });
+  const { api, machine } = useMenu(useMenuProps);
+  const presenceApi = usePresence({ ...presenceProps, present: api.isOpen });
+  const view = runIfFn(localProps.children, api);
   useEffectOnce(() => {
     if (!parentMachine)
       return;
     parentApi.setChild(machine);
     api.setParent(parentMachine);
   });
-  useEffect(() => {
-    if (isOpen && !api.isOpen) {
-      api.open();
-    }
-  }, [isOpen, api]);
   const getTriggerItemProps = useCallback(
     () => parentApi.getTriggerItemProps(api),
     [api, parentApi]
   );
-  return /* @__PURE__ */ jsx(MenuTriggerItemProvider, { value: getTriggerItemProps, children: /* @__PURE__ */ jsx(MenuMachineProvider, { value: machine, children: /* @__PURE__ */ jsx(MenuProvider, { value: api, children: view }) }) });
+  return /* @__PURE__ */ jsx(MenuTriggerItemProvider, { value: getTriggerItemProps, children: /* @__PURE__ */ jsx(MenuMachineProvider, { value: machine, children: /* @__PURE__ */ jsx(MenuProvider, { value: api, children: /* @__PURE__ */ jsx(PresenceProvider, { value: presenceApi, children: view }) }) }) });
 };
 
 export { Menu };

package/menu/menu.stories.d.ts

@@ -5,7 +5,10 @@ type MenuType = typeof Menu;
 declare const meta: Meta<MenuType>;
 export default meta;
 export declare const Basic: () => JSX.Element;
+export declare const Controlled: () => JSX.Element;
 export declare const Group: () => JSX.Element;
-export declare const Options: () => JSX.Element;
+export declare const Separator: () => JSX.Element;
+export declare const ContextMenu: () => JSX.Element;
 export declare const SubMenu: () => JSX.Element;
+export declare const Options: () => JSX.Element;
 export declare const ComplexSubMenu: () => JSX.Element;

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

@@ -5,5 +5,10 @@ type NumberInputType = typeof NumberInput.Root;
 declare const meta: Meta<NumberInputType>;
 export default meta;
 export declare const Basic: () => JSX.Element;
-export declare const MouseWheel: () => JSX.Element;
+export declare const MinMax: () => JSX.Element;
 export declare const FractionDigits: () => JSX.Element;
+export declare const Scrubber: () => JSX.Element;
+export declare const MouseWheel: () => JSX.Element;
+export declare const NoClamp: () => JSX.Element;
+export declare const FormUsage: () => JSX.Element;
+export declare const Formatted: () => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/react",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.5",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -60,74 +60,74 @@
   },
   "dependencies": {
     "@ark-ui/anatomy": "1.0.0-beta.1",
-    "@zag-js/accordion": "0.26.0",
-    "@zag-js/anatomy": "0.26.0",
-    "@zag-js/avatar": "0.26.0",
-    "@zag-js/carousel": "0.26.0",
-    "@zag-js/checkbox": "0.26.0",
-    "@zag-js/color-picker": "0.26.0",
-    "@zag-js/color-utils": "0.26.0",
-    "@zag-js/combobox": "0.26.0",
-    "@zag-js/core": "0.26.0",
-    "@zag-js/date-picker": "0.26.0",
-    "@zag-js/date-utils": "0.26.0",
-    "@zag-js/dialog": "0.26.0",
-    "@zag-js/editable": "0.26.0",
-    "@zag-js/hover-card": "0.26.0",
-    "@zag-js/menu": "0.26.0",
-    "@zag-js/number-input": "0.26.0",
-    "@zag-js/pagination": "0.26.0",
-    "@zag-js/pin-input": "0.26.0",
-    "@zag-js/popover": "0.26.0",
-    "@zag-js/presence": "0.26.0",
-    "@zag-js/radio-group": "0.26.0",
-    "@zag-js/rating-group": "0.26.0",
-    "@zag-js/react": "0.26.0",
-    "@zag-js/select": "0.26.0",
-    "@zag-js/slider": "0.26.0",
-    "@zag-js/splitter": "0.26.0",
-    "@zag-js/switch": "0.26.0",
-    "@zag-js/tabs": "0.26.0",
-    "@zag-js/tags-input": "0.26.0",
-    "@zag-js/toast": "0.26.0",
-    "@zag-js/toggle-group": "0.26.0",
-    "@zag-js/tooltip": "0.26.0",
-    "@zag-js/types": "0.26.0"
+    "@zag-js/accordion": "0.28.0",
+    "@zag-js/anatomy": "0.28.0",
+    "@zag-js/avatar": "0.28.0",
+    "@zag-js/carousel": "0.28.0",
+    "@zag-js/checkbox": "0.28.0",
+    "@zag-js/color-picker": "0.28.0",
+    "@zag-js/color-utils": "0.28.0",
+    "@zag-js/combobox": "0.28.0",
+    "@zag-js/core": "0.28.0",
+    "@zag-js/date-picker": "0.28.0",
+    "@zag-js/date-utils": "0.28.0",
+    "@zag-js/dialog": "0.28.0",
+    "@zag-js/editable": "0.28.0",
+    "@zag-js/hover-card": "0.28.0",
+    "@zag-js/menu": "0.28.0",
+    "@zag-js/number-input": "0.28.0",
+    "@zag-js/pagination": "0.28.0",
+    "@zag-js/pin-input": "0.28.0",
+    "@zag-js/popover": "0.28.0",
+    "@zag-js/presence": "0.28.0",
+    "@zag-js/radio-group": "0.28.0",
+    "@zag-js/rating-group": "0.28.0",
+    "@zag-js/react": "0.28.0",
+    "@zag-js/select": "0.28.0",
+    "@zag-js/slider": "0.28.0",
+    "@zag-js/splitter": "0.28.0",
+    "@zag-js/switch": "0.28.0",
+    "@zag-js/tabs": "0.28.0",
+    "@zag-js/tags-input": "0.28.0",
+    "@zag-js/toast": "0.28.0",
+    "@zag-js/toggle-group": "0.28.0",
+    "@zag-js/tooltip": "0.28.0",
+    "@zag-js/types": "0.28.0"
   },
   "devDependencies": {
     "@release-it/keep-a-changelog": "4.0.0",
-    "@storybook/addon-a11y": "7.5.1",
-    "@storybook/addon-essentials": "7.5.1",
-    "@storybook/addons": "7.5.1",
-    "@storybook/react": "7.5.1",
-    "@storybook/react-vite": "7.5.1",
+    "@storybook/addon-a11y": "7.5.3",
+    "@storybook/addon-essentials": "7.5.3",
+    "@storybook/addons": "7.5.3",
+    "@storybook/react": "7.5.3",
+    "@storybook/react-vite": "7.5.3",
     "@testing-library/dom": "9.3.3",
     "@testing-library/jest-dom": "6.1.4",
-    "@testing-library/react": "14.0.0",
+    "@testing-library/react": "14.1.0",
     "@testing-library/user-event": "14.5.1",
-    "@types/jsdom": "21.1.4",
-    "@types/react": "18.2.33",
-    "@types/react-dom": "18.2.14",
+    "@types/jsdom": "21.1.5",
+    "@types/react": "18.2.37",
+    "@types/react-dom": "18.2.15",
     "@types/testing-library__jest-dom": "5.14.9",
-    "@typescript-eslint/eslint-plugin": "6.9.0",
-    "@typescript-eslint/parser": "6.9.0",
-    "@vitejs/plugin-react": "4.1.0",
+    "@typescript-eslint/eslint-plugin": "6.10.0",
+    "@typescript-eslint/parser": "6.10.0",
+    "@vitejs/plugin-react": "4.1.1",
     "@vitest/coverage-v8": "0.34.6",
-    "eslint": "8.52.0",
+    "eslint": "8.53.0",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "globby": "13.2.2",
     "jsdom": "22.1.0",
-    "lucide-react": "0.289.0",
+    "lucide-react": "0.292.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-frame-component": "5.2.6",
     "release-it": "16.2.1",
     "resize-observer-polyfill": "1.5.1",
-    "storybook": "7.5.1",
+    "storybook": "7.5.3",
     "typescript": "5.2.2",
     "vite": "4.5.0",
-    "vite-plugin-dts": "3.6.1",
+    "vite-plugin-dts": "3.6.3",
     "vitest": "0.34.6"
   },
   "peerDependencies": {

package/pagination/pagination.d.ts

@@ -2,8 +2,8 @@ import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react'
 import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
 import { type UsePaginationProps, type UsePaginationReturn } from './use-pagination';
-export interface PaginationProps extends Assign<Assign<HTMLArkProps<'nav'>, UsePaginationProps>, {
-    children?: ReactNode | ((pages: UsePaginationReturn) => ReactNode);
-}> {
+export interface PaginationProps extends Assign<Assign<HTMLArkProps<'nav'>, {
+    children?: ReactNode | ((api: UsePaginationReturn) => ReactNode);
+}>, UsePaginationProps> {
 }
 export declare const Pagination: ForwardRefExoticComponent<PaginationProps & RefAttributes<HTMLElement>>;

package/pin-input/pin-input.stories.d.ts

@@ -5,3 +5,8 @@ type PinInputType = typeof PinInput;
 declare const meta: Meta<PinInputType>;
 export default meta;
 export declare const Basic: () => JSX.Element;
+export declare const InitialValue: () => JSX.Element;
+export declare const Customized: () => JSX.Element;
+export declare const Blurred: () => JSX.Element;
+export declare const OTPMode: () => JSX.Element;
+export declare const WithMask: () => JSX.Element;

package/popover/popover-content.cjs

@@ -7,22 +7,19 @@ 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');
+require('../presence/index.cjs');
 const popoverContext = require('./popover-context.cjs');
-const splitPresenceProps = require('../presence/split-presence-props.cjs');
+const presenceContext = require('../presence/presence-context.cjs');
 
 const PopoverContent = react.forwardRef((props, ref) => {
-  const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
   const api = popoverContext.usePopoverContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsxRuntime.jsx(PopoverInnerContent, { ref, ...localProps }) });
+  const presenceApi = presenceContext.usePresenceContext();
+  const mergedProps = react$1.mergeProps(api.contentProps, presenceApi.getPresenceProps(ref), props);
+  if (presenceApi.isUnmounted) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps });
 });
 PopoverContent.displayName = "PopoverContent";
-const PopoverInnerContent = react.forwardRef(
-  function PopoverInnerContent2(props, ref) {
-    const api = popoverContext.usePopoverContext();
-    const mergedProps = react$1.mergeProps(api.contentProps, props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
-  }
-);
 
 exports.PopoverContent = PopoverContent;

package/popover/popover-content.d.ts

@@ -1,8 +1,6 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-import { type PresenceProps } from '../presence';
-import type { Assign } from '../types';
-export interface PopoverContentProps extends Assign<HTMLArkProps<'div'>, Omit<PresenceProps, 'children' | 'fallback'>> {
+export interface PopoverContentProps extends HTMLArkProps<'div'> {
 }
 export declare const PopoverContent: ForwardRefExoticComponent<PopoverContentProps & RefAttributes<HTMLDivElement>>;

package/popover/popover-content.mjs

@@ -3,22 +3,19 @@ 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 '../presence/index.mjs';
 import { usePopoverContext } from './popover-context.mjs';
-import { splitPresenceProps } from '../presence/split-presence-props.mjs';
+import { usePresenceContext } from '../presence/presence-context.mjs';
 
 const PopoverContent = forwardRef((props, ref) => {
-  const [presenceProps, localProps] = splitPresenceProps(props);
   const api = usePopoverContext();
-  return /* @__PURE__ */ jsx(Presence, { present: api.isOpen, ...presenceProps, fallback: /* @__PURE__ */ jsx("div", { ...api.contentProps }), children: /* @__PURE__ */ jsx(PopoverInnerContent, { ref, ...localProps }) });
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps(api.contentProps, presenceApi.getPresenceProps(ref), props);
+  if (presenceApi.isUnmounted) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps });
 });
 PopoverContent.displayName = "PopoverContent";
-const PopoverInnerContent = forwardRef(
-  function PopoverInnerContent2(props, ref) {
-    const api = usePopoverContext();
-    const mergedProps = mergeProps(api.contentProps, props);
-    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
-  }
-);
 
 export { PopoverContent };

package/popover/popover-positioner.cjs

@@ -7,12 +7,18 @@ 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 popoverContext = require('./popover-context.cjs');
+const presenceContext = require('../presence/presence-context.cjs');
 
 const PopoverPositioner = react.forwardRef(
   (props, ref) => {
     const api = popoverContext.usePopoverContext();
+    const presenceApi = presenceContext.usePresenceContext();
     const mergedProps = react$1.mergeProps(api.positionerProps, props);
+    if (presenceApi.isUnmounted) {
+      return null;
+    }
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );

package/popover/popover-positioner.mjs

@@ -3,12 +3,18 @@ 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 { usePopoverContext } from './popover-context.mjs';
+import { usePresenceContext } from '../presence/presence-context.mjs';
 
 const PopoverPositioner = forwardRef(
   (props, ref) => {
     const api = usePopoverContext();
+    const presenceApi = usePresenceContext();
     const mergedProps = mergeProps(api.positionerProps, props);
+    if (presenceApi.isUnmounted) {
+      return null;
+    }
     return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );

package/popover/popover-trigger.cjs

@@ -7,11 +7,20 @@ 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 popoverContext = require('./popover-context.cjs');
+const presenceContext = require('../presence/presence-context.cjs');
 
 const PopoverTrigger = react.forwardRef((props, ref) => {
   const api = popoverContext.usePopoverContext();
-  const mergedProps = react$1.mergeProps(api.triggerProps, props);
+  const presenceApi = presenceContext.usePresenceContext();
+  const mergedProps = react$1.mergeProps(
+    {
+      ...api.triggerProps,
+      "aria-controls": presenceApi.isUnmounted ? void 0 : api.triggerProps["aria-controls"]
+    },
+    props
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
 });
 PopoverTrigger.displayName = "PopoverTrigger";