@ark-ui/solid 2.0.1 → 2.1.1

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@ark-ui/solid",
-  "version": "2.0.1",
+  "version": "2.1.1",
   "description": "A collection of unstyled, accessible UI components for Solid, 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",
@@ -82,73 +84,76 @@
     "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/combobox": "0.34.0",
-    "@zag-js/date-picker": "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/select": "0.34.0",
-    "@zag-js/slider": "0.34.0",
-    "@zag-js/solid": "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/combobox": "0.36.2",
+    "@zag-js/date-picker": "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/select": "0.36.2",
+    "@zag-js/slider": "0.36.2",
+    "@zag-js/solid": "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",
-    "@solidjs/testing-library": "0.8.5",
-    "@storybook/addon-essentials": "7.6.10",
-    "@storybook/addon-interactions": "7.6.10",
-    "@storybook/addon-links": "7.6.10",
-    "@storybook/blocks": "7.6.10",
+    "@solidjs/testing-library": "0.8.6",
+    "@storybook/addon-essentials": "7.6.14",
+    "@storybook/addon-interactions": "7.6.14",
+    "@storybook/addon-links": "7.6.14",
+    "@storybook/blocks": "7.6.14",
     "@storybook/testing-library": "0.2.2",
     "@testing-library/dom": "9.3.4",
-    "@testing-library/jest-dom": "6.3.0",
+    "@testing-library/jest-dom": "6.4.2",
     "@testing-library/user-event": "14.5.2",
     "@types/jsdom": "21.1.6",
     "@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",
     "@vitest/coverage-v8": "1.2.2",
     "eslint": "8.56.0",
     "eslint-plugin-jest-dom": "5.1.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",
     "release-it": "17.0.3",
     "resize-observer-polyfill": "1.5.1",
-    "rollup": "4.9.6",
+    "rollup": "4.10.0",
     "rollup-preset-solid": "2.0.1",
-    "solid-js": "1.8.12",
-    "storybook": "7.6.10",
+    "solid-js": "1.8.14",
+    "storybook": "7.6.14",
     "storybook-solidjs": "1.0.0-beta.2",
     "storybook-solidjs-vite": "1.0.0-beta.2",
     "typescript": "5.3.3",
-    "vite": "5.0.12",
+    "vite": "5.1.1",
     "vite-plugin-solid": "2.9.1",
     "vitest": "1.2.2"
   },

package/source/clipboard/clipboard-context.js

@@ -0,0 +1,5 @@
+import { createContext } from '../create-context';
+export const [ClipboardProvider, useClipboardContext] = createContext({
+    hookName: 'useClipboardContext',
+    providerName: '<ClipboardProvider />',
+});

package/source/clipboard/clipboard-control.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useClipboardContext } from './clipboard-context';
+export const ClipboardControl = (props) => {
+    const api = useClipboardContext();
+    const mergedProps = mergeProps(() => api().controlProps, props);
+    return <ark.div {...mergedProps}/>;
+};

package/source/clipboard/clipboard-indicator.jsx

@@ -0,0 +1,16 @@
+import { mergeProps } from '@zag-js/solid';
+import { Show, children } from 'solid-js';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { useClipboardContext } from './clipboard-context';
+export const ClipboardIndicator = (props) => {
+    const [indicatorProps, localProps] = createSplitProps()(props, ['copied']);
+    const api = useClipboardContext();
+    const mergedProps = mergeProps(api().getIndicatorProps({ copied: api().isCopied }), localProps);
+    const getChildren = children(() => localProps.children);
+    return (<ark.div {...mergedProps}>
+      <Show when={api().isCopied} fallback={getChildren()}>
+        {indicatorProps.copied}
+      </Show>
+    </ark.div>);
+};

package/source/clipboard/clipboard-input.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useClipboardContext } from './clipboard-context';
+export const ClipboardInput = (props) => {
+    const api = useClipboardContext();
+    const mergedProps = mergeProps(() => api().inputProps, props);
+    return <ark.input {...mergedProps}/>;
+};

package/source/clipboard/clipboard-label.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useClipboardContext } from './clipboard-context';
+export const ClipboardLabel = (props) => {
+    const api = useClipboardContext();
+    const mergedProps = mergeProps(() => api().labelProps, props);
+    return <ark.label {...mergedProps}/>;
+};

package/source/clipboard/clipboard-root.jsx

@@ -0,0 +1,22 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { runIfFn } from '../run-if-fn';
+import { ClipboardProvider } from './clipboard-context';
+import { useClipboard } from './use-clipboard';
+export const ClipboardRoot = (props) => {
+    const [useClipboardProps, localProps] = createSplitProps()(props, [
+        'getRootNode',
+        'id',
+        'ids',
+        'value',
+        'timeout',
+        'onCopyStatusChange',
+    ]);
+    const api = useClipboard(useClipboardProps);
+    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    const getChildren = () => runIfFn(localProps.children, api);
+    return (<ClipboardProvider value={api}>
+      <ark.div {...mergedProps}>{getChildren()}</ark.div>
+    </ClipboardProvider>);
+};

package/source/clipboard/clipboard-trigger.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useClipboardContext } from './clipboard-context';
+export const ClipboardTrigger = (props) => {
+    const api = useClipboardContext();
+    const mergedProps = mergeProps(() => api().triggerProps, props);
+    return <ark.button {...mergedProps}/>;
+};

package/source/clipboard/clipboard.jsx

@@ -0,0 +1,7 @@
+import { ClipboardControl as Control } from './clipboard-control';
+import { ClipboardIndicator as Indicator } from './clipboard-indicator';
+import { ClipboardInput as Input } from './clipboard-input';
+import { ClipboardLabel as Label } from './clipboard-label';
+import { ClipboardRoot as Root } from './clipboard-root';
+import { ClipboardTrigger as Trigger } from './clipboard-trigger';
+export { Control, Indicator, Input, Label, Root, Trigger };

package/source/clipboard/index.js

@@ -0,0 +1,9 @@
+import { useClipboardContext } from './clipboard-context';
+import { ClipboardControl } from './clipboard-control';
+import { ClipboardIndicator } from './clipboard-indicator';
+import { ClipboardInput } from './clipboard-input';
+import { ClipboardLabel } from './clipboard-label';
+import { ClipboardRoot } from './clipboard-root';
+import { ClipboardTrigger } from './clipboard-trigger';
+export * as Clipboard from './clipboard';
+export { ClipboardControl, ClipboardIndicator, ClipboardInput, ClipboardLabel, ClipboardRoot, ClipboardTrigger, useClipboardContext, };

package/source/clipboard/use-clipboard.jsx

@@ -0,0 +1,10 @@
+import * as clipboard from '@zag-js/clipboard';
+import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
+import { createMemo, createUniqueId } from 'solid-js';
+import { useEnvironmentContext } from '../environment';
+export const useClipboard = (props) => {
+    const getRootNode = useEnvironmentContext();
+    const context = mergeProps({ id: createUniqueId(), getRootNode }, props);
+    const [state, send] = useMachine(clipboard.machine(context), { context });
+    return createMemo(() => clipboard.connect(state, send, normalizeProps));
+};

package/source/color-picker/use-color-picker.js

@@ -9,6 +9,7 @@ export const useColorPicker = (props) => {
         id: createUniqueId(),
         getRootNode,
         value: local.value ? colorPicker.parse(local.value) : undefined,
+        'open.controlled': props.open !== undefined,
     }), rest);
     const [state, send] = useMachine(colorPicker.machine(context), { context });
     return createMemo(() => colorPicker.connect(state, send, normalizeProps));

package/source/date-picker/date-picker-input.jsx

@@ -1,8 +1,10 @@
 import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
 import { ark } from '../factory';
 import { useDatePickerContext } from './date-picker-context';
 export const DatePickerInput = (props) => {
+    const [inputProps, localProps] = createSplitProps()(props, ['index']);
     const api = useDatePickerContext();
-    const mergedProps = mergeProps(() => api().inputProps, props);
+    const mergedProps = mergeProps(() => api().getInputProps(inputProps), localProps);
     return <ark.input {...mergedProps}/>;
 };

package/source/date-picker/date-picker-preset-trigger.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { useDatePickerContext } from './date-picker-context';
+export const DatePickerPresetTrigger = (props) => {
+    const [presetTriggerProps, localProps] = createSplitProps()(props, ['value']);
+    const api = useDatePickerContext();
+    const mergedProps = mergeProps(() => api().getPresetTriggerProps(presetTriggerProps), localProps);
+    return <ark.button {...mergedProps}/>;
+};

package/source/date-picker/date-picker.jsx

@@ -6,6 +6,7 @@ import { DatePickerLabel as Label } from './date-picker-label';
 import { DatePickerMonthSelect as MonthSelect } from './date-picker-month-select';
 import { DatePickerNextTrigger as NextTrigger } from './date-picker-next-trigger';
 import { DatePickerPositioner as Positioner } from './date-picker-positioner';
+import { DatePickerPresetTrigger as PresetTrigger } from './date-picker-preset-trigger';
 import { DatePickerPrevTrigger as PrevTrigger } from './date-picker-prev-trigger';
 import { DatePickerRangeText as RangeText } from './date-picker-range-text';
 import { DatePickerRoot as Root } from './date-picker-root';
@@ -21,4 +22,4 @@ import { DatePickerView as View } from './date-picker-view';
 import { DatePickerViewControl as ViewControl } from './date-picker-view-control';
 import { DatePickerViewTrigger as ViewTrigger } from './date-picker-view-trigger';
 import { DatePickerYearSelect as YearSelect } from './date-picker-year-select';
-export { ClearTrigger, Content, Control, Input, Label, MonthSelect, NextTrigger, Positioner, PrevTrigger, RangeText, Root, Table, TableBody, TableCell, TableCellTrigger, TableHead, TableHeader, TableRow, Trigger, View, ViewControl, ViewTrigger, YearSelect, };
+export { ClearTrigger, Content, Control, Input, Label, MonthSelect, NextTrigger, Positioner, PresetTrigger, PrevTrigger, RangeText, Root, Table, TableBody, TableCell, TableCellTrigger, TableHead, TableHeader, TableRow, Trigger, View, ViewControl, ViewTrigger, YearSelect, };

package/source/date-picker/index.js

@@ -7,6 +7,7 @@ import { DatePickerLabel } from './date-picker-label';
 import { DatePickerMonthSelect } from './date-picker-month-select';
 import { DatePickerNextTrigger } from './date-picker-next-trigger';
 import { DatePickerPositioner } from './date-picker-positioner';
+import { DatePickerPresetTrigger, } from './date-picker-preset-trigger';
 import { DatePickerPrevTrigger } from './date-picker-prev-trigger';
 import { DatePickerRangeText } from './date-picker-range-text';
 import { DatePickerRoot } from './date-picker-root';
@@ -26,4 +27,4 @@ import { DatePickerViewControl } from './date-picker-view-control';
 import { DatePickerViewTrigger } from './date-picker-view-trigger';
 import { DatePickerYearSelect } from './date-picker-year-select';
 export * as DatePicker from './date-picker';
-export { DatePickerClearTrigger, DatePickerContent, DatePickerControl, DatePickerInput, DatePickerLabel, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPrevTrigger, DatePickerRangeText, DatePickerRoot, DatePickerTable, DatePickerTableBody, DatePickerTableCell, DatePickerTableCellTrigger, DatePickerTableHead, DatePickerTableHeader, DatePickerTableRow, DatePickerTrigger, DatePickerView, DatePickerViewControl, DatePickerViewTrigger, DatePickerYearSelect, useDatePickerContext, useDatePickerTableCellContext, useDatePickerTableContext, useDatePickerViewContext, };
+export { DatePickerClearTrigger, DatePickerContent, DatePickerControl, DatePickerInput, DatePickerLabel, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPresetTrigger, DatePickerPrevTrigger, DatePickerRangeText, DatePickerRoot, DatePickerTable, DatePickerTableBody, DatePickerTableCell, DatePickerTableCellTrigger, DatePickerTableHead, DatePickerTableHeader, DatePickerTableRow, DatePickerTrigger, DatePickerView, DatePickerViewControl, DatePickerViewTrigger, DatePickerYearSelect, useDatePickerContext, useDatePickerTableCellContext, useDatePickerTableContext, useDatePickerViewContext, };

package/source/date-picker/use-date-picker.js

@@ -10,6 +10,7 @@ export const useDatePicker = (props) => {
         getRootNode,
         focusedValue: local.focusedValue ? datePicker.parse(local.focusedValue) : undefined,
         value: local.value ? datePicker.parse(local.value) : undefined,
+        'open.controlled': props.open !== undefined,
     }), rest);
     const [state, send] = useMachine(datePicker.machine(context), { context });
     return createMemo(() => datePicker.connect(state, send, normalizeProps));

package/source/dialog/dialog-description.jsx

@@ -4,5 +4,5 @@ import { useDialogContext } from './dialog-context';
 export const DialogDescription = (props) => {
     const dialog = useDialogContext();
     const mergedProps = mergeProps(() => dialog().descriptionProps, props);
-    return <ark.p {...mergedProps}/>;
+    return <ark.div {...mergedProps}/>;
 };

package/source/dialog/use-dialog.js

@@ -4,7 +4,7 @@ import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext } from '../environment';
 export const useDialog = (props) => {
     const getRootNode = useEnvironmentContext();
-    const context = mergeProps({ id: createUniqueId(), getRootNode }, props);
+    const context = mergeProps({ id: createUniqueId(), getRootNode, 'open.controlled': props.open !== undefined }, props);
     const [state, send] = useMachine(dialog.machine(context), { context });
     return createMemo(() => dialog.connect(state, send, normalizeProps));
 };

package/source/hover-card/use-hover-card.js

@@ -4,7 +4,7 @@ import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext } from '../environment';
 export const useHoverCard = (props) => {
     const getRootNode = useEnvironmentContext();
-    const context = mergeProps({ id: createUniqueId(), getRootNode }, props);
+    const context = mergeProps({ id: createUniqueId(), getRootNode, 'open.controlled': props.open !== undefined }, props);
     const [state, send] = useMachine(hoverCard.machine(context), { context });
     return createMemo(() => hoverCard.connect(state, send, normalizeProps));
 };

package/source/index.jsx

@@ -2,6 +2,7 @@ export * from './accordion';
 export * from './avatar';
 export * from './carousel';
 export * from './checkbox';
+export * from './clipboard';
 export * from './color-picker';
 export * from './combobox';
 export * from './date-picker';
@@ -11,6 +12,7 @@ export * from './environment';
 export * from './factory';
 export * from './file-upload';
 export * from './hover-card';
+export * from './locale';
 export * from './menu';
 export * from './number-input';
 export * from './pagination';

package/source/locale/index.js

@@ -0,0 +1,2 @@
+export { LocaleProvider } from './locale';
+export { useLocaleContext } from './locale-context';

package/source/locale/locale-context.jsx

@@ -0,0 +1,7 @@
+import { createContext } from '../create-context';
+export const [LocaleContextProvider, useLocaleContext] = createContext({
+    hookName: 'useEnvironmentContext',
+    providerName: '<EnvironmentProvider />',
+    strict: false,
+    defaultValue: () => ({ dir: 'ltr', locale: 'en-US' }),
+});

package/source/locale/locale.jsx

@@ -0,0 +1,24 @@
+import { isRTL, trackLocale } from '@zag-js/i18n-utils';
+import { createEffect, createMemo, createSignal, onCleanup, splitProps, } from 'solid-js';
+import { useEnvironmentContext } from '../environment';
+import { LocaleContextProvider } from './locale-context';
+export const LocaleProvider = (props) => {
+    const [localeProps, restProps] = splitProps(props, ['locale', 'defaultLocale']);
+    const [locale, setLocale] = createSignal(localeProps.defaultLocale || localeProps.locale || 'en-US');
+    const getRootNode = useEnvironmentContext();
+    createEffect(() => {
+        const cleanup = trackLocale({
+            locale: localeProps.locale,
+            getRootNode,
+            onLocaleChange(locale) {
+                setLocale(locale.locale);
+            },
+        });
+        onCleanup(cleanup);
+    });
+    const context = createMemo(() => ({
+        locale: locale(),
+        dir: isRTL(locale()) ? 'rtl' : 'ltr',
+    }));
+    return <LocaleContextProvider value={context}>{restProps.children}</LocaleContextProvider>;
+};

package/source/menu/use-menu.js

@@ -4,7 +4,7 @@ import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext } from '../environment';
 export const useMenu = (props) => {
     const getRootNode = useEnvironmentContext();
-    const context = mergeProps({ id: createUniqueId(), getRootNode }, props);
+    const context = mergeProps({ id: createUniqueId(), getRootNode, 'open.controlled': props.open !== undefined }, props);
     const [state, send, machine] = useMachine(menu.machine(context), { context });
     return createMemo(() => ({
         api: () => menu.connect(state, send, normalizeProps),

package/source/popover/popover-description.jsx

@@ -4,5 +4,5 @@ import { usePopoverContext } from './popover-context';
 export const PopoverDescription = (props) => {
     const api = usePopoverContext();
     const mergedProps = mergeProps(() => api().descriptionProps, props);
-    return <ark.p {...mergedProps}/>;
+    return <ark.div {...mergedProps}/>;
 };

package/source/popover/use-popover.js

@@ -4,7 +4,7 @@ import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext } from '../environment';
 export const usePopover = (props) => {
     const getRootNode = useEnvironmentContext();
-    const context = mergeProps({ id: createUniqueId(), getRootNode }, props);
+    const context = mergeProps({ id: createUniqueId(), getRootNode, 'open.controlled': props.open !== undefined }, props);
     const [state, send] = useMachine(popover.machine(context), { context });
     return createMemo(() => popover.connect(state, send, normalizeProps));
 };

package/source/select/select-control.jsx

@@ -1,13 +1,17 @@
 import { mergeProps } from '@zag-js/solid';
-import { Index } from 'solid-js';
+import { createMemo, Index, Show } from 'solid-js';
 import { ark } from '../factory';
 import { useSelectContext } from './select-context';
 export const SelectControl = (props) => {
     const api = useSelectContext();
     const mergedProps = mergeProps(() => api().controlProps, props);
+    const isValueEmpty = createMemo(() => api().value.length === 0);
     return (<>
       <ark.div {...mergedProps}/>
       <select {...api().hiddenSelectProps}>
+        <Show when={isValueEmpty()}>
+          <option value=""/>
+        </Show>
         <Index each={api().collection.toArray()}>
           {(option) => <option value={option().value}>{option().label}</option>}
         </Index>

package/source/select/use-select.js

@@ -12,7 +12,12 @@ export const useSelect = (props) => {
     ]);
     const collection = () => select.collection(collectionOptions);
     const getRootNode = useEnvironmentContext();
-    const context = () => mergeProps({ id: createUniqueId(), getRootNode, collection: collection() }, rest);
+    const context = () => mergeProps({
+        id: createUniqueId(),
+        getRootNode,
+        collection: collection(),
+        'open.controlled': props.open !== undefined,
+    }, rest);
     const [state, send] = useMachine(select.machine(context()), {
         context,
     });

package/source/tooltip/use-tooltip.js

@@ -4,7 +4,7 @@ import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext } from '../environment';
 export const useTooltip = (props) => {
     const getRootNode = useEnvironmentContext();
-    const context = mergeProps({ id: createUniqueId(), getRootNode }, props);
+    const context = mergeProps({ id: createUniqueId(), getRootNode, 'open.controlled': props.open !== undefined }, props);
     const [state, send] = useMachine(tooltip.machine(context), { context });
     return createMemo(() => tooltip.connect(state, send, normalizeProps));
 };

package/source/tree-view/index.js

@@ -6,9 +6,10 @@ import { TreeViewBranchText } from './tree-view-branch-text';
 import { TreeViewBranchTrigger } from './tree-view-branch-trigger';
 import { useTreeViewContext } from './tree-view-context';
 import { TreeViewItem } from './tree-view-item';
+import { TreeViewItemIndicator } from './tree-view-item-indicator';
 import { TreeViewItemText } from './tree-view-item-text';
 import { TreeViewLabel } from './tree-view-label';
 import { TreeViewRoot } from './tree-view-root';
 import { TreeViewTree } from './tree-view-tree';
 export * as TreeView from './tree-view';
-export { TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchIndicator, TreeViewBranchText, TreeViewBranchTrigger, TreeViewItem, TreeViewItemText, TreeViewLabel, TreeViewRoot, TreeViewTree, useTreeViewContext, };
+export { TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchIndicator, TreeViewBranchText, TreeViewBranchTrigger, TreeViewItem, TreeViewItemIndicator, TreeViewItemText, TreeViewLabel, TreeViewRoot, TreeViewTree, useTreeViewContext, };

package/source/tree-view/tree-view-branch-content.jsx

@@ -1,15 +1,10 @@
-// import type { BranchProps } from '@zag-js/tree-view'
 import { mergeProps } from '@zag-js/solid';
-import { createSplitProps } from '../create-split-props';
 import { ark } from '../factory';
+import { useTreeViewBranchContext } from './tree-view-branch-context';
 import { useTreeViewContext } from './tree-view-context';
 export const TreeViewBranchContent = (props) => {
-    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 <ark.ul {...mergedProps}/>;
 };

package/source/tree-view/tree-view-branch-context.js

@@ -0,0 +1,5 @@
+import { createContext } from '../create-context';
+export const [TreeViewBranchProvider, useTreeViewBranchContext] = createContext({
+    hookName: 'useTreeViewBranchContext',
+    providerName: '<TreeViewBranchProvider />',
+});

package/source/tree-view/tree-view-branch-control.jsx

@@ -1,15 +1,10 @@
-// import type { BranchProps } from '@zag-js/tree-view'
 import { mergeProps } from '@zag-js/solid';
-import { createSplitProps } from '../create-split-props';
 import { ark } from '../factory';
+import { useTreeViewBranchContext } from './tree-view-branch-context';
 import { useTreeViewContext } from './tree-view-context';
 export const TreeViewBranchControl = (props) => {
-    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 <ark.div {...mergedProps}/>;
 };

package/source/tree-view/tree-view-branch-indicator.jsx

@@ -1,16 +1,13 @@
-// import type { BranchProps } from '@zag-js/tree-view'
 import { treeViewAnatomy } from '@ark-ui/anatomy';
 import { mergeProps } from '@zag-js/solid';
-import { createSplitProps } from '../create-split-props';
 import { ark } from '../factory';
+import { useTreeViewBranchContext } from './tree-view-branch-context';
 import { useTreeViewContext } from './tree-view-context';
 export const TreeViewBranchIndicator = (props) => {
-    const [branchProps, localProps] = createSplitProps()(props, [
-        'depth',
-        'id',
-        'disabled',
-    ]);
     const api = useTreeViewContext();
-    const mergedProps = mergeProps(() => api().getBranchProps(branchProps), treeViewAnatomy.build().branchIndicator.attrs, localProps);
+    const branchProps = useTreeViewBranchContext();
+    const mergedProps = mergeProps(() => api().getBranchProps(branchProps), 
+    // TODO use api.getBranchIndicatorProps() when available
+    treeViewAnatomy.build().branchIndicator.attrs, props);
     return <ark.div {...mergedProps}/>;
 };

package/source/tree-view/tree-view-branch-text.jsx

@@ -1,15 +1,10 @@
-// import type { BranchProps } from '@zag-js/tree-view'
 import { mergeProps } from '@zag-js/solid';
-import { createSplitProps } from '../create-split-props';
 import { ark } from '../factory';
+import { useTreeViewBranchContext } from './tree-view-branch-context';
 import { useTreeViewContext } from './tree-view-context';
 export const TreeViewBranchText = (props) => {
-    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 <ark.span {...mergedProps}/>;
 };

package/source/tree-view/tree-view-branch-trigger.jsx

@@ -1,15 +1,10 @@
-// import type { BranchProps } from '@zag-js/tree-view'
 import { mergeProps } from '@zag-js/solid';
-import { createSplitProps } from '../create-split-props';
 import { ark } from '../factory';
+import { useTreeViewBranchContext } from './tree-view-branch-context';
 import { useTreeViewContext } from './tree-view-context';
 export const TreeViewBranchTrigger = (props) => {
-    const [branchProps, localProps] = createSplitProps()(props, [
-        'depth',
-        'id',
-        'disabled',
-    ]);
     const api = useTreeViewContext();
-    const mergedProps = mergeProps(() => api().getBranchTriggerProps(branchProps), localProps);
-    return <ark.button {...mergedProps}/>;
+    const branchProps = useTreeViewBranchContext();
+    const mergedProps = mergeProps(() => api().getBranchTriggerProps(branchProps), props);
+    return <ark.div {...mergedProps}/>;
 };