@ark-ui/react 2.0.2 → 2.1.1

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@ark-ui/react",
-  "version": "2.0.2",
+  "version": "2.1.1",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
     "avatar",
     "carousel",
     "checkbox",
+    "clipboard",
     "color picker",
     "combobox",
     "date picker",
@@ -15,6 +16,7 @@
     "environment",
     "file upload",
     "hover card",
+    "locale",
     "menu",
     "number input",
     "pagination",
@@ -62,60 +64,62 @@
     "release-it": "release-it --config ../../../release-it.json"
   },
   "dependencies": {
-    "@ark-ui/anatomy": "2.1.0",
-    "@zag-js/accordion": "0.34.0",
-    "@zag-js/avatar": "0.34.0",
-    "@zag-js/carousel": "0.34.0",
-    "@zag-js/checkbox": "0.34.0",
-    "@zag-js/color-picker": "0.34.0",
-    "@zag-js/color-utils": "0.34.0",
-    "@zag-js/combobox": "0.34.0",
-    "@zag-js/core": "0.34.0",
-    "@zag-js/date-picker": "0.34.0",
-    "@zag-js/date-utils": "0.34.0",
-    "@zag-js/dialog": "0.34.0",
-    "@zag-js/editable": "0.34.0",
-    "@zag-js/file-upload": "0.34.0",
-    "@zag-js/hover-card": "0.34.0",
-    "@zag-js/menu": "0.34.0",
-    "@zag-js/number-input": "0.34.0",
-    "@zag-js/pagination": "0.34.0",
-    "@zag-js/pin-input": "0.34.0",
-    "@zag-js/popover": "0.34.0",
-    "@zag-js/presence": "0.34.0",
-    "@zag-js/progress": "0.34.0",
-    "@zag-js/radio-group": "0.34.0",
-    "@zag-js/rating-group": "0.34.0",
-    "@zag-js/react": "0.34.0",
-    "@zag-js/select": "0.34.0",
-    "@zag-js/slider": "0.34.0",
-    "@zag-js/splitter": "0.34.0",
-    "@zag-js/switch": "0.34.0",
-    "@zag-js/tabs": "0.34.0",
-    "@zag-js/tags-input": "0.34.0",
-    "@zag-js/toast": "0.34.0",
-    "@zag-js/toggle-group": "0.34.0",
-    "@zag-js/tooltip": "0.34.0",
-    "@zag-js/tree-view": "0.34.0",
-    "@zag-js/types": "0.34.0"
+    "@ark-ui/anatomy": "2.2.0",
+    "@zag-js/accordion": "0.36.2",
+    "@zag-js/avatar": "0.36.2",
+    "@zag-js/carousel": "0.36.2",
+    "@zag-js/checkbox": "0.36.2",
+    "@zag-js/clipboard": "0.36.2",
+    "@zag-js/collapsible": "0.36.2",
+    "@zag-js/color-picker": "0.36.2",
+    "@zag-js/color-utils": "0.36.2",
+    "@zag-js/combobox": "0.36.2",
+    "@zag-js/date-picker": "0.36.2",
+    "@zag-js/date-utils": "0.36.2",
+    "@zag-js/dialog": "0.36.2",
+    "@zag-js/editable": "0.36.2",
+    "@zag-js/file-upload": "0.36.2",
+    "@zag-js/hover-card": "0.36.2",
+    "@zag-js/i18n-utils": "0.36.2",
+    "@zag-js/menu": "0.36.2",
+    "@zag-js/number-input": "0.36.2",
+    "@zag-js/pagination": "0.36.2",
+    "@zag-js/pin-input": "0.36.2",
+    "@zag-js/popover": "0.36.2",
+    "@zag-js/presence": "0.36.2",
+    "@zag-js/progress": "0.36.2",
+    "@zag-js/radio-group": "0.36.2",
+    "@zag-js/rating-group": "0.36.2",
+    "@zag-js/react": "0.36.2",
+    "@zag-js/select": "0.36.2",
+    "@zag-js/slider": "0.36.2",
+    "@zag-js/splitter": "0.36.2",
+    "@zag-js/switch": "0.36.2",
+    "@zag-js/tabs": "0.36.2",
+    "@zag-js/tags-input": "0.36.2",
+    "@zag-js/toast": "0.36.2",
+    "@zag-js/toggle-group": "0.36.2",
+    "@zag-js/tooltip": "0.36.2",
+    "@zag-js/tree-view": "0.36.2",
+    "@zag-js/types": "0.36.2"
   },
   "devDependencies": {
     "@release-it/keep-a-changelog": "5.0.0",
-    "@storybook/addon-a11y": "7.6.12",
-    "@storybook/addon-essentials": "7.6.12",
-    "@storybook/addons": "7.6.12",
-    "@storybook/react": "7.6.12",
-    "@storybook/react-vite": "7.6.12",
+    "@storybook/addon-a11y": "7.6.14",
+    "@storybook/addon-essentials": "7.6.14",
+    "@storybook/addons": "7.6.14",
+    "@storybook/react": "7.6.14",
+    "@storybook/react-vite": "7.6.14",
     "@testing-library/dom": "9.3.4",
-    "@testing-library/jest-dom": "6.4.1",
+    "@testing-library/jest-dom": "6.4.2",
     "@testing-library/react": "14.2.1",
     "@testing-library/user-event": "14.5.2",
     "@types/jsdom": "21.1.6",
-    "@types/react": "18.2.52",
-    "@types/react-dom": "18.2.18",
+    "@types/react": "18.2.55",
+    "@types/react-dom": "18.2.19",
     "@types/testing-library__jest-dom": "5.14.9",
-    "@typescript-eslint/eslint-plugin": "6.20.0",
-    "@typescript-eslint/parser": "6.20.0",
+    "@typescript-eslint/eslint-plugin": "6.21.0",
+    "@typescript-eslint/parser": "6.21.0",
     "@vitejs/plugin-react": "4.2.1",
     "@vitest/coverage-v8": "1.2.2",
     "eslint": "8.56.0",
@@ -123,17 +127,17 @@
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-testing-library": "6.2.0",
-    "globby": "14.0.0",
+    "globby": "14.0.1",
     "jsdom": "24.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-frame-component": "5.2.6",
-    "react-hook-form": "7.50.0",
+    "react-hook-form": "7.50.1",
     "release-it": "17.0.3",
     "resize-observer-polyfill": "1.5.1",
-    "storybook": "7.6.12",
+    "storybook": "7.6.14",
     "typescript": "5.3.3",
-    "vite": "5.0.12",
+    "vite": "5.1.1",
     "vite-plugin-dts": "3.7.2",
     "vitest": "1.2.2"
   },
@@ -173,6 +177,11 @@
       "import": "./checkbox/index.mjs",
       "require": "./checkbox/index.cjs"
     },
+    "./clipboard": {
+      "types": "./clipboard/index.d.ts",
+      "import": "./clipboard/index.mjs",
+      "require": "./clipboard/index.cjs"
+    },
     "./color-picker": {
       "types": "./color-picker/index.d.ts",
       "import": "./color-picker/index.mjs",
@@ -213,6 +222,11 @@
       "import": "./hover-card/index.mjs",
       "require": "./hover-card/index.cjs"
     },
+    "./locale": {
+      "types": "./locale/index.d.ts",
+      "import": "./locale/index.mjs",
+      "require": "./locale/index.cjs"
+    },
     "./menu": {
       "types": "./menu/index.d.ts",
       "import": "./menu/index.mjs",

package/popover/use-popover.cjs

@@ -33,7 +33,8 @@ const usePopover = (props = {}) => {
     id: react.useId(),
     getRootNode: environmentContext.useEnvironmentContext(),
     ...props,
-    open: props.defaultOpen ?? props.open
+    open: props.defaultOpen ?? props.open,
+    "open.controlled": props.open !== void 0
   };
   const context = {
     ...initialContext,

package/popover/use-popover.d.ts

@@ -1,7 +1,7 @@
 import * as popover from '@zag-js/popover';
 import { type PropTypes } from '@zag-js/react';
 import { type Optional } from '../types';
-export interface UsePopoverProps extends Optional<popover.Context, 'id'> {
+export interface UsePopoverProps extends Omit<Optional<popover.Context, 'id'>, 'open.controlled'> {
     /**
      * The initial open state of the popover.
      */

package/popover/use-popover.mjs

@@ -10,7 +10,8 @@ const usePopover = (props = {}) => {
     id: useId(),
     getRootNode: useEnvironmentContext(),
     ...props,
-    open: props.defaultOpen ?? props.open
+    open: props.defaultOpen ?? props.open,
+    "open.controlled": props.open !== void 0
   };
   const context = {
     ...initialContext,

package/select/use-select.cjs

@@ -46,7 +46,8 @@ const useSelect = (props) => {
     getRootNode: environmentContext.useEnvironmentContext(),
     collection,
     ...rest,
-    value: props.defaultValue
+    value: props.defaultValue,
+    "open.controlled": props.open !== void 0
   };
   const context = {
     ...initialContext,

package/select/use-select.d.ts

@@ -2,7 +2,7 @@ import { type PropTypes } from '@zag-js/react';
 import type { CollectionOptions } from '@zag-js/select';
 import * as select from '@zag-js/select';
 import { type CollectionItem, type Optional } from '../types';
-export interface UseSelectProps<T extends CollectionItem> extends CollectionOptions<T>, Omit<Optional<select.Context<T>, 'id'>, 'collection'> {
+export interface UseSelectProps<T extends CollectionItem> extends CollectionOptions<T>, Omit<Optional<select.Context<T>, 'id'>, 'collection' | 'open.controlled'> {
     /**
      * The initial value of the select.
      */

package/select/use-select.mjs

@@ -23,7 +23,8 @@ const useSelect = (props) => {
     getRootNode: useEnvironmentContext(),
     collection,
     ...rest,
-    value: props.defaultValue
+    value: props.defaultValue,
+    "open.controlled": props.open !== void 0
   };
   const context = {
     ...initialContext,

package/tooltip/use-tooltip.cjs

@@ -32,7 +32,8 @@ const useTooltip = (props) => {
   const initialContext = {
     id: react.useId(),
     getRootNode: environmentContext.useEnvironmentContext(),
-    ...props
+    ...props,
+    "open.controlled": props.open !== void 0
   };
   const context = {
     ...initialContext,

package/tooltip/use-tooltip.d.ts

@@ -1,7 +1,7 @@
 import { type PropTypes } from '@zag-js/react';
 import * as tooltip from '@zag-js/tooltip';
 import { type Optional } from '../types';
-export interface UseTooltipProps extends Optional<tooltip.Context, 'id'> {
+export interface UseTooltipProps extends Omit<Optional<tooltip.Context, 'id'>, 'open.controlled'> {
 }
 export interface UseTooltipReturn extends tooltip.Api<PropTypes> {
 }

package/tooltip/use-tooltip.mjs

@@ -9,7 +9,8 @@ const useTooltip = (props) => {
   const initialContext = {
     id: useId(),
     getRootNode: useEnvironmentContext(),
-    ...props
+    ...props,
+    "open.controlled": props.open !== void 0
   };
   const context = {
     ...initialContext,

package/tree-view/index.cjs

@@ -10,6 +10,7 @@ const treeViewBranchText = require('./tree-view-branch-text.cjs');
 const treeViewBranchTrigger = require('./tree-view-branch-trigger.cjs');
 const treeViewContext = require('./tree-view-context.cjs');
 const treeViewItem = require('./tree-view-item.cjs');
+const treeViewItemIndicator = require('./tree-view-item-indicator.cjs');
 const treeViewItemText = require('./tree-view-item-text.cjs');
 const treeViewLabel = require('./tree-view-label.cjs');
 const treeViewRoot = require('./tree-view-root.cjs');
@@ -26,6 +27,7 @@ exports.TreeViewBranchText = treeViewBranchText.TreeViewBranchText;
 exports.TreeViewBranchTrigger = treeViewBranchTrigger.TreeViewBranchTrigger;
 exports.useTreeViewContext = treeViewContext.useTreeViewContext;
 exports.TreeViewItem = treeViewItem.TreeViewItem;
+exports.TreeViewItemIndicator = treeViewItemIndicator.TreeViewItemIndicator;
 exports.TreeViewItemText = treeViewItemText.TreeViewItemText;
 exports.TreeViewLabel = treeViewLabel.TreeViewLabel;
 exports.TreeViewRoot = treeViewRoot.TreeViewRoot;

package/tree-view/index.d.ts

@@ -7,10 +7,11 @@ import { TreeViewBranchText, type TreeViewBranchTextProps } from './tree-view-br
 import { TreeViewBranchTrigger, type TreeViewBranchTriggerProps } from './tree-view-branch-trigger';
 import { useTreeViewContext, type TreeViewContext } from './tree-view-context';
 import { TreeViewItem, type TreeViewItemProps } from './tree-view-item';
+import { TreeViewItemIndicator, type TreeViewItemIndicatorProps } from './tree-view-item-indicator';
 import { TreeViewItemText, type TreeViewItemTextProps } from './tree-view-item-text';
 import { TreeViewLabel, type TreeViewLabelProps } from './tree-view-label';
 import { TreeViewRoot, type TreeViewRootProps } from './tree-view-root';
 import { TreeViewTree, type TreeViewTreeProps } from './tree-view-tree';
 export * as TreeView from './tree-view';
-export { TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchIndicator, TreeViewBranchText, TreeViewBranchTrigger, TreeViewItem, TreeViewItemText, TreeViewLabel, TreeViewRoot, TreeViewTree, useTreeViewContext, };
-export type { TreeViewBranchContentProps, TreeViewBranchControlProps, TreeViewBranchIndicatorProps, TreeViewBranchProps, TreeViewBranchTextProps, TreeViewBranchTriggerProps, TreeViewContext, TreeViewExpandedChangeDetails, TreeViewFocusChangeDetails, TreeViewItemProps, TreeViewItemTextProps, TreeViewLabelProps, TreeViewRootProps, TreeViewSelectionChangeDetails, TreeViewTreeProps, };
+export { TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchIndicator, TreeViewBranchText, TreeViewBranchTrigger, TreeViewItem, TreeViewItemIndicator, TreeViewItemText, TreeViewLabel, TreeViewRoot, TreeViewTree, useTreeViewContext, };
+export type { TreeViewBranchContentProps, TreeViewBranchControlProps, TreeViewBranchIndicatorProps, TreeViewBranchProps, TreeViewBranchTextProps, TreeViewBranchTriggerProps, TreeViewContext, TreeViewExpandedChangeDetails, TreeViewFocusChangeDetails, TreeViewItemIndicatorProps, TreeViewItemProps, TreeViewItemTextProps, TreeViewLabelProps, TreeViewRootProps, TreeViewSelectionChangeDetails, TreeViewTreeProps, };

package/tree-view/index.mjs

@@ -6,6 +6,7 @@ export { TreeViewBranchText } from './tree-view-branch-text.mjs';
 export { TreeViewBranchTrigger } from './tree-view-branch-trigger.mjs';
 export { useTreeViewContext } from './tree-view-context.mjs';
 export { TreeViewItem } from './tree-view-item.mjs';
+export { TreeViewItemIndicator } from './tree-view-item-indicator.mjs';
 export { TreeViewItemText } from './tree-view-item-text.mjs';
 export { TreeViewLabel } from './tree-view-label.mjs';
 export { TreeViewRoot } from './tree-view-root.mjs';

package/tree-view/tree-view-branch-content.cjs

@@ -6,19 +6,15 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
-const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
+const treeViewBranchContext = require('./tree-view-branch-context.cjs');
 const treeViewContext = require('./tree-view-context.cjs');
 
 const TreeViewBranchContent = react.forwardRef(
   (props, ref) => {
-    const [branchProps, { ...localProps }] = createSplitProps.createSplitProps()(props, [
-      "depth",
-      "id",
-      "disabled"
-    ]);
     const api = treeViewContext.useTreeViewContext();
-    const mergedProps = react$1.mergeProps(api.getBranchContentProps(branchProps), localProps);
+    const branchProps = treeViewBranchContext.useTreeViewBranchContext();
+    const mergedProps = react$1.mergeProps(api.getBranchContentProps(branchProps), props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.ul, { ...mergedProps, ref });
   }
 );

package/tree-view/tree-view-branch-content.d.ts

@@ -1,8 +1,6 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-import type { Assign } from '../types';
-import { type BranchProps } from './tree-view-context';
-export interface TreeViewBranchContentProps extends Assign<HTMLArkProps<'ul'>, BranchProps> {
+export interface TreeViewBranchContentProps extends HTMLArkProps<'ul'> {
 }
 export declare const TreeViewBranchContent: ForwardRefExoticComponent<TreeViewBranchContentProps & RefAttributes<HTMLUListElement>>;

package/tree-view/tree-view-branch-content.mjs

@@ -2,19 +2,15 @@
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
-import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
+import { useTreeViewBranchContext } from './tree-view-branch-context.mjs';
 import { useTreeViewContext } from './tree-view-context.mjs';
 
 const TreeViewBranchContent = forwardRef(
   (props, ref) => {
-    const [branchProps, { ...localProps }] = createSplitProps()(props, [
-      "depth",
-      "id",
-      "disabled"
-    ]);
     const api = useTreeViewContext();
-    const mergedProps = mergeProps(api.getBranchContentProps(branchProps), localProps);
+    const branchProps = useTreeViewBranchContext();
+    const mergedProps = mergeProps(api.getBranchContentProps(branchProps), props);
     return /* @__PURE__ */ jsx(ark.ul, { ...mergedProps, ref });
   }
 );

package/tree-view/tree-view-branch-context.cjs

@@ -0,0 +1,15 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const createContext = require('../create-context.cjs');
+
+const [TreeViewBranchProvider, useTreeViewBranchContext] = createContext.createContext({
+  name: "TreeViewBranchContext",
+  hookName: "useTreeViewBranchContext",
+  providerName: "<TreeViewBranchProvider />"
+});
+
+exports.TreeViewBranchProvider = TreeViewBranchProvider;
+exports.useTreeViewBranchContext = useTreeViewBranchContext;

package/tree-view/tree-view-branch-context.d.ts

@@ -0,0 +1,8 @@
+import { Provider } from 'react';
+/// <reference types="react" />
+import type { ItemProps as ZagItemProps } from '@zag-js/tree-view';
+export interface ItemProps extends Omit<ZagItemProps, 'depth'> {
+}
+export interface TreeViewBranchContext extends ZagItemProps {
+}
+export declare const TreeViewBranchProvider: Provider<TreeViewBranchContext>, useTreeViewBranchContext: () => TreeViewBranchContext;

package/tree-view/tree-view-branch-context.mjs

@@ -0,0 +1,10 @@
+'use client';
+import { createContext } from '../create-context.mjs';
+
+const [TreeViewBranchProvider, useTreeViewBranchContext] = createContext({
+  name: "TreeViewBranchContext",
+  hookName: "useTreeViewBranchContext",
+  providerName: "<TreeViewBranchProvider />"
+});
+
+export { TreeViewBranchProvider, useTreeViewBranchContext };

package/tree-view/tree-view-branch-control.cjs

@@ -6,19 +6,15 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
-const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
+const treeViewBranchContext = require('./tree-view-branch-context.cjs');
 const treeViewContext = require('./tree-view-context.cjs');
 
 const TreeViewBranchControl = react.forwardRef(
   (props, ref) => {
-    const [branchProps, { ...localProps }] = createSplitProps.createSplitProps()(props, [
-      "depth",
-      "id",
-      "disabled"
-    ]);
     const api = treeViewContext.useTreeViewContext();
-    const mergedProps = react$1.mergeProps(api.getBranchControlProps(branchProps), localProps);
+    const branchProps = treeViewBranchContext.useTreeViewBranchContext();
+    const mergedProps = react$1.mergeProps(api.getBranchControlProps(branchProps), props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );

package/tree-view/tree-view-branch-control.d.ts

@@ -1,8 +1,6 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-import type { Assign } from '../types';
-import { type BranchProps } from './tree-view-context';
-export interface TreeViewBranchControlProps extends Assign<HTMLArkProps<'div'>, BranchProps> {
+export interface TreeViewBranchControlProps extends HTMLArkProps<'div'> {
 }
 export declare const TreeViewBranchControl: ForwardRefExoticComponent<TreeViewBranchControlProps & RefAttributes<HTMLDivElement>>;

package/tree-view/tree-view-branch-control.mjs

@@ -2,19 +2,15 @@
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
-import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
+import { useTreeViewBranchContext } from './tree-view-branch-context.mjs';
 import { useTreeViewContext } from './tree-view-context.mjs';
 
 const TreeViewBranchControl = forwardRef(
   (props, ref) => {
-    const [branchProps, { ...localProps }] = createSplitProps()(props, [
-      "depth",
-      "id",
-      "disabled"
-    ]);
     const api = useTreeViewContext();
-    const mergedProps = mergeProps(api.getBranchControlProps(branchProps), localProps);
+    const branchProps = useTreeViewBranchContext();
+    const mergedProps = mergeProps(api.getBranchControlProps(branchProps), props);
     return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );

package/tree-view/tree-view-branch-indicator.cjs

@@ -7,22 +7,19 @@ const jsxRuntime = require('react/jsx-runtime');
 const anatomy = require('@ark-ui/anatomy');
 const react$1 = require('@zag-js/react');
 const react = require('react');
-const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
+const treeViewBranchContext = require('./tree-view-branch-context.cjs');
 const treeViewContext = require('./tree-view-context.cjs');
 
 const TreeViewBranchIndicator = react.forwardRef(
   (props, ref) => {
-    const [branchProps, { ...localProps }] = createSplitProps.createSplitProps()(props, [
-      "depth",
-      "id",
-      "disabled"
-    ]);
     const api = treeViewContext.useTreeViewContext();
+    const branchProps = treeViewBranchContext.useTreeViewBranchContext();
     const mergedProps = react$1.mergeProps(
       api.getBranchProps(branchProps),
+      // TODO use api.getBranchIndicatorProps() when available
       anatomy.treeViewAnatomy.build().branchIndicator.attrs,
-      localProps
+      props
     );
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }

package/tree-view/tree-view-branch-indicator.d.ts

@@ -1,8 +1,6 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-import type { Assign } from '../types';
-import { type BranchProps } from './tree-view-context';
-export interface TreeViewBranchIndicatorProps extends Assign<HTMLArkProps<'div'>, BranchProps> {
+export interface TreeViewBranchIndicatorProps extends HTMLArkProps<'div'> {
 }
 export declare const TreeViewBranchIndicator: ForwardRefExoticComponent<TreeViewBranchIndicatorProps & RefAttributes<HTMLDivElement>>;

package/tree-view/tree-view-branch-indicator.mjs

@@ -3,22 +3,19 @@ import { jsx } from 'react/jsx-runtime';
 import { treeViewAnatomy } from '@ark-ui/anatomy';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
-import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
+import { useTreeViewBranchContext } from './tree-view-branch-context.mjs';
 import { useTreeViewContext } from './tree-view-context.mjs';
 
 const TreeViewBranchIndicator = forwardRef(
   (props, ref) => {
-    const [branchProps, { ...localProps }] = createSplitProps()(props, [
-      "depth",
-      "id",
-      "disabled"
-    ]);
     const api = useTreeViewContext();
+    const branchProps = useTreeViewBranchContext();
     const mergedProps = mergeProps(
       api.getBranchProps(branchProps),
+      // TODO use api.getBranchIndicatorProps() when available
       treeViewAnatomy.build().branchIndicator.attrs,
-      localProps
+      props
     );
     return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }

package/tree-view/tree-view-branch-text.cjs

@@ -6,19 +6,15 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
-const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
+const treeViewBranchContext = require('./tree-view-branch-context.cjs');
 const treeViewContext = require('./tree-view-context.cjs');
 
 const TreeViewBranchText = react.forwardRef(
   (props, ref) => {
-    const [branchProps, { ...localProps }] = createSplitProps.createSplitProps()(props, [
-      "depth",
-      "id",
-      "disabled"
-    ]);
     const api = treeViewContext.useTreeViewContext();
-    const mergedProps = react$1.mergeProps(api.getBranchTextProps(branchProps), localProps);
+    const branchProps = treeViewBranchContext.useTreeViewBranchContext();
+    const mergedProps = react$1.mergeProps(api.getBranchTextProps(branchProps), props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref });
   }
 );

package/tree-view/tree-view-branch-text.d.ts

@@ -1,8 +1,6 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-import type { Assign } from '../types';
-import { type BranchProps } from './tree-view-context';
-export interface TreeViewBranchTextProps extends Assign<HTMLArkProps<'span'>, BranchProps> {
+export interface TreeViewBranchTextProps extends HTMLArkProps<'span'> {
 }
 export declare const TreeViewBranchText: ForwardRefExoticComponent<TreeViewBranchTextProps & RefAttributes<HTMLSpanElement>>;

package/tree-view/tree-view-branch-text.mjs

@@ -2,19 +2,15 @@
 import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
-import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
+import { useTreeViewBranchContext } from './tree-view-branch-context.mjs';
 import { useTreeViewContext } from './tree-view-context.mjs';
 
 const TreeViewBranchText = forwardRef(
   (props, ref) => {
-    const [branchProps, { ...localProps }] = createSplitProps()(props, [
-      "depth",
-      "id",
-      "disabled"
-    ]);
     const api = useTreeViewContext();
-    const mergedProps = mergeProps(api.getBranchTextProps(branchProps), localProps);
+    const branchProps = useTreeViewBranchContext();
+    const mergedProps = mergeProps(api.getBranchTextProps(branchProps), props);
     return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });
   }
 );

package/tree-view/tree-view-branch-trigger.cjs

@@ -6,19 +6,15 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
-const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
+const treeViewBranchContext = require('./tree-view-branch-context.cjs');
 const treeViewContext = require('./tree-view-context.cjs');
 
 const TreeViewBranchTrigger = react.forwardRef(
   (props, ref) => {
-    const [branchProps, { ...localProps }] = createSplitProps.createSplitProps()(props, [
-      "depth",
-      "id",
-      "disabled"
-    ]);
     const api = treeViewContext.useTreeViewContext();
-    const mergedProps = react$1.mergeProps(api.getBranchTriggerProps(branchProps), localProps);
+    const branchProps = treeViewBranchContext.useTreeViewBranchContext();
+    const mergedProps = react$1.mergeProps(api.getBranchTriggerProps(branchProps), props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );