@ark-ui/solid 2.0.1 → 2.1.0

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@ark-ui/solid",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "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/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/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}/>;
 };

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

@@ -1,17 +1,20 @@
-// import type { BranchProps, BranchState } from '@zag-js/tree-view'
 import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props';
 import { ark } from '../factory';
 import { runIfFn } from '../run-if-fn';
+import { TreeViewBranchProvider } from './tree-view-branch-context';
 import { useTreeViewContext } from './tree-view-context';
+import { TreeViewDepthProvider, useTreeViewDepthContext } from './tree-view-depth-context';
 export const TreeViewBranch = (props) => {
-    const [branchProps, localProps] = createSplitProps()(props, [
-        'depth',
-        'id',
-        'disabled',
-    ]);
+    const [itemProps, localProps] = createSplitProps()(props, ['disabled', 'id']);
     const api = useTreeViewContext();
+    const depth = useTreeViewDepthContext();
+    const branchProps = mergeProps(itemProps, { depth });
     const mergedProps = mergeProps(() => api().getBranchProps(branchProps), localProps);
     const getChildren = () => runIfFn(localProps.children, () => api().getBranchState(branchProps));
-    return <ark.li {...mergedProps}>{getChildren()}</ark.li>;
+    return (<TreeViewDepthProvider value={depth + 1}>
+      <TreeViewBranchProvider value={branchProps}>
+        <ark.li {...mergedProps}>{getChildren()}</ark.li>
+      </TreeViewBranchProvider>
+    </TreeViewDepthProvider>);
 };

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

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

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

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

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

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useTreeViewContext } from './tree-view-context';
+import { useTreeViewItemContext } from './tree-view-item-context';
+export const TreeViewItemIndicator = (props) => {
+    const api = useTreeViewContext();
+    const itemProps = useTreeViewItemContext();
+    const mergedProps = mergeProps(() => api().getItemIndicatorProps(itemProps), props);
+    return <ark.div {...mergedProps}/>;
+};

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

@@ -1,12 +1,10 @@
-// import type { ItemProps } 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 { useTreeViewContext } from './tree-view-context';
+import { useTreeViewItemContext } from './tree-view-item-context';
 export const TreeViewItemText = (props) => {
-    const [itemProps, localProps] = createSplitProps()(props, ['depth', 'id', 'disabled']);
     const api = useTreeViewContext();
-    const mergedProps = mergeProps(() => api().getItemProps(itemProps), treeViewAnatomy.build().itemText.attrs, localProps);
+    const itemProps = useTreeViewItemContext();
+    const mergedProps = mergeProps(() => api().getItemTextProps(itemProps), props);
     return <ark.span {...mergedProps}/>;
 };

package/source/tree-view/tree-view-item.jsx

@@ -1,13 +1,18 @@
-// import type { ItemProps, ItemState } from '@zag-js/tree-view'
 import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props';
 import { ark } from '../factory';
 import { runIfFn } from '../run-if-fn';
 import { useTreeViewContext } from './tree-view-context';
+import { useTreeViewDepthContext } from './tree-view-depth-context';
+import { TreeViewItemProvider } from './tree-view-item-context';
 export const TreeViewItem = (props) => {
-    const [itemProps, localProps] = createSplitProps()(props, ['depth', 'id', 'disabled']);
+    const [_itemProps, localProps] = createSplitProps()(props, ['id', 'disabled']);
     const api = useTreeViewContext();
+    const depth = useTreeViewDepthContext();
+    const itemProps = mergeProps(_itemProps, { depth });
     const mergedProps = mergeProps(() => api().getItemProps(itemProps), localProps);
     const getChildren = () => runIfFn(localProps.children, () => api().getItemState(itemProps));
-    return <ark.li {...mergedProps}>{getChildren()}</ark.li>;
+    return (<TreeViewItemProvider value={itemProps}>
+      <ark.li {...mergedProps}>{getChildren()}</ark.li>
+    </TreeViewItemProvider>);
 };

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

@@ -1,8 +1,11 @@
 import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory';
 import { useTreeViewContext } from './tree-view-context';
+import { TreeViewDepthProvider } from './tree-view-depth-context';
 export const TreeViewTree = (props) => {
     const api = useTreeViewContext();
     const mergedProps = mergeProps(() => api().treeProps, props);
-    return <ark.ul {...mergedProps}/>;
+    return (<TreeViewDepthProvider value={1}>
+      <ark.ul {...mergedProps}/>
+    </TreeViewDepthProvider>);
 };

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

@@ -5,8 +5,9 @@ import { TreeViewBranchIndicator as BranchIndicator } from './tree-view-branch-i
 import { TreeViewBranchText as BranchText } from './tree-view-branch-text';
 import { TreeViewBranchTrigger as BranchTrigger } from './tree-view-branch-trigger';
 import { TreeViewItem as Item } from './tree-view-item';
+import { TreeViewItemIndicator as ItemIndicator } from './tree-view-item-indicator';
 import { TreeViewItemText as ItemText } from './tree-view-item-text';
 import { TreeViewLabel as Label } from './tree-view-label';
 import { TreeViewRoot as Root } from './tree-view-root';
 import { TreeViewTree as Tree } from './tree-view-tree';
-export { Branch, BranchContent, BranchControl, BranchIndicator, BranchText, BranchTrigger, Item, ItemText, Label, Root, Tree, };
+export { Branch, BranchContent, BranchControl, BranchIndicator, BranchText, BranchTrigger, Item, ItemIndicator, ItemText, Label, Root, Tree, };

package/types/color-picker/use-color-picker.d.ts

@@ -2,7 +2,7 @@ import * as colorPicker from '@zag-js/color-picker';
 import { type PropTypes } from '@zag-js/solid';
 import { type Accessor } from 'solid-js';
 import { type Optional } from '../types';
-export interface UseColorPickerProps extends Optional<Omit<colorPicker.Context, 'value'>, 'id'> {
+export interface UseColorPickerProps extends Omit<Optional<Omit<colorPicker.Context, 'value'>, 'id'>, 'open.controlled'> {
     /**
      * The current value of the color picker.
      */

package/types/date-picker/date-picker-input.d.ts

@@ -1,4 +1,6 @@
+import type { InputProps } from '@zag-js/date-picker';
 import { type ArkComponent, type HTMLArkProps } from '../factory';
-export interface DatePickerInputProps extends HTMLArkProps<'input'> {
+import type { Assign } from '../types';
+export interface DatePickerInputProps extends Assign<HTMLArkProps<'input'>, InputProps> {
 }
-export declare const DatePickerInput: ArkComponent<'input'>;
+export declare const DatePickerInput: ArkComponent<'input', InputProps>;

package/types/date-picker/date-picker-preset-trigger.d.ts

@@ -0,0 +1,6 @@
+import type { PresetTriggerProps } from '@zag-js/date-picker';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+export interface DatePickerPresetTriggerProps extends Assign<HTMLArkProps<'button'>, PresetTriggerProps> {
+}
+export declare const DatePickerPresetTrigger: ArkComponent<'button', PresetTriggerProps>;

package/types/date-picker/date-picker.d.ts

@@ -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, };