@ark-ui/solid 2.0.1 → 2.1.1

package/cjs/index.js

@@ -9,6 +9,7 @@ var avatar$1 = require('@zag-js/avatar');
 var anatomy = require('@ark-ui/anatomy');
 var carousel$1 = require('@zag-js/carousel');
 var checkbox$1 = require('@zag-js/checkbox');
+var clipboard$1 = require('@zag-js/clipboard');
 var colorPicker$1 = require('@zag-js/color-picker');
 var combobox$1 = require('@zag-js/combobox');
 var datePicker$1 = require('@zag-js/date-picker');
@@ -16,6 +17,7 @@ var dialog$1 = require('@zag-js/dialog');
 var editable$1 = require('@zag-js/editable');
 var fileUpload$1 = require('@zag-js/file-upload');
 var hoverCard$1 = require('@zag-js/hover-card');
+var i18nUtils = require('@zag-js/i18n-utils');
 var menu$1 = require('@zag-js/menu');
 var numberInput$1 = require('@zag-js/number-input');
 var pagination$1 = require('@zag-js/pagination');
@@ -57,6 +59,7 @@ var accordion__namespace = /*#__PURE__*/_interopNamespaceDefault(accordion$1);
 var avatar__namespace = /*#__PURE__*/_interopNamespaceDefault(avatar$1);
 var carousel__namespace = /*#__PURE__*/_interopNamespaceDefault(carousel$1);
 var checkbox__namespace = /*#__PURE__*/_interopNamespaceDefault(checkbox$1);
+var clipboard__namespace = /*#__PURE__*/_interopNamespaceDefault(clipboard$1);
 var colorPicker__namespace = /*#__PURE__*/_interopNamespaceDefault(colorPicker$1);
 var combobox__namespace = /*#__PURE__*/_interopNamespaceDefault(combobox$1);
 var datePicker__namespace = /*#__PURE__*/_interopNamespaceDefault(datePicker$1);
@@ -267,7 +270,7 @@ const [EnvironmentProvider, useEnvironmentContext] = createContext({
   strict: false
 });
 
-const _tmpl$$c = /*#__PURE__*/web.template(`<span hidden>`);
+var _tmpl$$c = /*#__PURE__*/web.template(`<span hidden>`);
 const Environment = props => {
   // eslint-disable-next-line prefer-const
   let spanRef = undefined;
@@ -278,8 +281,8 @@ const Environment = props => {
     },
     get children() {
       return [web.memo(() => props.children), web.memo(() => web.memo(() => !!!props.value)() && (() => {
-        const _el$ = _tmpl$$c();
-        const _ref$ = spanRef;
+        var _el$ = _tmpl$$c();
+        var _ref$ = spanRef;
         typeof _ref$ === "function" ? web.use(_ref$, _el$) : spanRef = _el$;
         return _el$;
       })())];
@@ -475,12 +478,12 @@ const [CheckboxProvider, useCheckboxContext] = createContext({
   providerName: '<CheckboxProvider />'
 });
 
-const _tmpl$$b = /*#__PURE__*/web.template(`<input>`);
+var _tmpl$$b = /*#__PURE__*/web.template(`<input>`);
 const CheckboxControl = props => {
   const api = useCheckboxContext();
   const mergedProps = solid.mergeProps(() => api().controlProps, props);
   return [web.createComponent(ark.div, mergedProps), (() => {
-    const _el$ = _tmpl$$b();
+    var _el$ = _tmpl$$b();
     web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
     return _el$;
   })()];
@@ -535,6 +538,98 @@ var checkbox = /*#__PURE__*/Object.freeze({
   Root: CheckboxRoot
 });
 
+const [ClipboardProvider, useClipboardContext] = createContext({
+  hookName: 'useClipboardContext',
+  providerName: '<ClipboardProvider />'
+});
+
+const ClipboardControl = props => {
+  const api = useClipboardContext();
+  const mergedProps = solid.mergeProps(() => api().controlProps, props);
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const ClipboardIndicator = props => {
+  const [indicatorProps, localProps] = createSplitProps()(props, ['copied']);
+  const api = useClipboardContext();
+  const mergedProps = solid.mergeProps(api().getIndicatorProps({
+    copied: api().isCopied
+  }), localProps);
+  const getChildren = solidJs.children(() => localProps.children);
+  return web.createComponent(ark.div, web.mergeProps(mergedProps, {
+    get children() {
+      return web.createComponent(solidJs.Show, {
+        get when() {
+          return api().isCopied;
+        },
+        get fallback() {
+          return getChildren();
+        },
+        get children() {
+          return indicatorProps.copied;
+        }
+      });
+    }
+  }));
+};
+
+const ClipboardInput = props => {
+  const api = useClipboardContext();
+  const mergedProps = solid.mergeProps(() => api().inputProps, props);
+  return web.createComponent(ark.input, mergedProps);
+};
+
+const ClipboardLabel = props => {
+  const api = useClipboardContext();
+  const mergedProps = solid.mergeProps(() => api().labelProps, props);
+  return web.createComponent(ark.label, mergedProps);
+};
+
+const useClipboard = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = solid.mergeProps({
+    id: solidJs.createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = solid.useMachine(clipboard__namespace.machine(context), {
+    context
+  });
+  return solidJs.createMemo(() => clipboard__namespace.connect(state, send, solid.normalizeProps));
+};
+
+const ClipboardRoot = props => {
+  const [useClipboardProps, localProps] = createSplitProps()(props, ['getRootNode', 'id', 'ids', 'value', 'timeout', 'onCopyStatusChange']);
+  const api = useClipboard(useClipboardProps);
+  const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
+  const getChildren = () => runIfFn(localProps.children, api);
+  return web.createComponent(ClipboardProvider, {
+    value: api,
+    get children() {
+      return web.createComponent(ark.div, web.mergeProps(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
+const ClipboardTrigger = props => {
+  const api = useClipboardContext();
+  const mergedProps = solid.mergeProps(() => api().triggerProps, props);
+  return web.createComponent(ark.button, mergedProps);
+};
+
+var clipboard = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Control: ClipboardControl,
+  Indicator: ClipboardIndicator,
+  Input: ClipboardInput,
+  Label: ClipboardLabel,
+  Root: ClipboardRoot,
+  Trigger: ClipboardTrigger
+});
+
 const [ColorPickerAreaProvider, useColorPickerAreaContext] = createContext({
   hookName: 'useColorPickerAreaContext',
   providerName: '<ColorPickerAreaProvider />'
@@ -687,7 +782,8 @@ const useColorPicker = props => {
   const context = solid.mergeProps(() => ({
     id: solidJs.createUniqueId(),
     getRootNode,
-    value: local.value ? colorPicker__namespace.parse(local.value) : undefined
+    value: local.value ? colorPicker__namespace.parse(local.value) : undefined,
+    'open.controlled': props.open !== undefined
   }), rest);
   const [state, send] = solid.useMachine(colorPicker__namespace.machine(context), {
     context
@@ -695,7 +791,7 @@ const useColorPicker = props => {
   return solidJs.createMemo(() => colorPicker__namespace.connect(state, send, solid.normalizeProps));
 };
 
-const _tmpl$$a = /*#__PURE__*/web.template(`<input>`);
+var _tmpl$$a = /*#__PURE__*/web.template(`<input>`);
 const ColorPickerRoot = props => {
   const [presenceProps, colorPickerProps] = splitPresenceProps(props);
   const [useColorPickerProps, localProps] = createSplitProps()(colorPickerProps, ['closeOnSelect', 'dir', 'disabled', 'format', 'getRootNode', 'id', 'ids', 'initialFocusEl', 'name', 'name', 'onFocusOutside', 'onFormatChange', 'onInteractOutside', 'onOpenChange', 'onPointerDownOutside', 'onValueChange', 'onValueChangeEnd', 'open', 'positioning', 'readOnly', 'value']);
@@ -718,7 +814,7 @@ const ColorPickerRoot = props => {
           }));
         }
       }), (() => {
-        const _el$ = _tmpl$$a();
+        var _el$ = _tmpl$$a();
         web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
         return _el$;
       })()];
@@ -1038,8 +1134,9 @@ const DatePickerControl = props => {
 };
 
 const DatePickerInput = props => {
+  const [inputProps, localProps] = createSplitProps()(props, ['index']);
   const api = useDatePickerContext();
-  const mergedProps = solid.mergeProps(() => api().inputProps, props);
+  const mergedProps = solid.mergeProps(() => api().getInputProps(inputProps), localProps);
   return web.createComponent(ark.input, mergedProps);
 };
 
@@ -1049,14 +1146,14 @@ const DatePickerLabel = props => {
   return web.createComponent(ark.label, mergedProps);
 };
 
-const _tmpl$$9 = /*#__PURE__*/web.template(`<option>`);
+var _tmpl$$9 = /*#__PURE__*/web.template(`<option>`);
 const DatePickerMonthSelect = props => {
   const api = useDatePickerContext();
   const mergedProps = solid.mergeProps(() => api().monthSelectProps, props);
   return web.createComponent(ark.select, web.mergeProps(mergedProps, {
     get children() {
       return api().getMonths().map(month => (() => {
-        const _el$ = _tmpl$$9();
+        var _el$ = _tmpl$$9();
         web.insert(_el$, () => month.label);
         web.effect(() => _el$.value = month.value);
         return _el$;
@@ -1091,6 +1188,13 @@ const DatePickerPositioner = props => {
   });
 };
 
+const DatePickerPresetTrigger = props => {
+  const [presetTriggerProps, localProps] = createSplitProps()(props, ['value']);
+  const api = useDatePickerContext();
+  const mergedProps = solid.mergeProps(() => api().getPresetTriggerProps(presetTriggerProps), localProps);
+  return web.createComponent(ark.button, mergedProps);
+};
+
 const DatePickerPrevTrigger = props => {
   const api = useDatePickerContext();
   const viewProps = useDatePickerViewContext();
@@ -1115,7 +1219,8 @@ const useDatePicker = props => {
     id: solidJs.createUniqueId(),
     getRootNode,
     focusedValue: local.focusedValue ? datePicker__namespace.parse(local.focusedValue) : undefined,
-    value: local.value ? datePicker__namespace.parse(local.value) : undefined
+    value: local.value ? datePicker__namespace.parse(local.value) : undefined,
+    'open.controlled': props.open !== undefined
   }), rest);
   const [state, send] = solid.useMachine(datePicker__namespace.machine(context), {
     context
@@ -1280,7 +1385,7 @@ const DatePickerViewTrigger = props => {
   return web.createComponent(ark.button, mergedProps);
 };
 
-const _tmpl$$8 = /*#__PURE__*/web.template(`<option>`);
+var _tmpl$$8 = /*#__PURE__*/web.template(`<option>`);
 const DatePickerYearSelect = props => {
   const api = useDatePickerContext();
   const mergedProps = solid.mergeProps(() => api().yearSelectProps, props);
@@ -1290,7 +1395,7 @@ const DatePickerYearSelect = props => {
         from: 1_000,
         to: 4_000
       }).map(year => (() => {
-        const _el$ = _tmpl$$8();
+        var _el$ = _tmpl$$8();
         _el$.value = year;
         web.insert(_el$, year);
         return _el$;
@@ -1316,6 +1421,7 @@ var datePicker = /*#__PURE__*/Object.freeze({
   MonthSelect: DatePickerMonthSelect,
   NextTrigger: DatePickerNextTrigger,
   Positioner: DatePickerPositioner,
+  PresetTrigger: DatePickerPresetTrigger,
   PrevTrigger: DatePickerPrevTrigger,
   RangeText: DatePickerRangeText,
   Root: DatePickerRoot,
@@ -1378,7 +1484,7 @@ const DialogContent = props => {
 const DialogDescription = props => {
   const dialog = useDialogContext();
   const mergedProps = solid.mergeProps(() => dialog().descriptionProps, props);
-  return web.createComponent(ark.p, mergedProps);
+  return web.createComponent(ark.div, mergedProps);
 };
 
 const DialogPositioner = props => {
@@ -1399,7 +1505,8 @@ const useDialog = props => {
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode
+    getRootNode,
+    'open.controlled': props.open !== undefined
   }, props);
   const [state, send] = solid.useMachine(dialog__namespace.machine(context), {
     context
@@ -1560,12 +1667,12 @@ const [FileUploadProvider, useFileUploadContext] = createContext({
   providerName: '<FileUploadProvider />'
 });
 
-const _tmpl$$7 = /*#__PURE__*/web.template(`<input>`);
+var _tmpl$$7 = /*#__PURE__*/web.template(`<input>`);
 const FileUploadDropzone = props => {
   const api = useFileUploadContext();
   const mergedProps = solid.mergeProps(() => api().dropzoneProps, props);
   return [web.createComponent(ark.div, mergedProps), (() => {
-    const _el$ = _tmpl$$7();
+    var _el$ = _tmpl$$7();
     web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
     return _el$;
   })()];
@@ -1760,7 +1867,8 @@ const useHoverCard = props => {
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode
+    getRootNode,
+    'open.controlled': props.open !== undefined
   }, props);
   const [state, send] = solid.useMachine(hoverCard__namespace.machine(context), {
     context
@@ -1805,6 +1913,42 @@ var hoverCard = /*#__PURE__*/Object.freeze({
   Trigger: HoverCardTrigger
 });
 
+const [LocaleContextProvider, useLocaleContext] = createContext({
+  hookName: 'useEnvironmentContext',
+  providerName: '<EnvironmentProvider />',
+  strict: false,
+  defaultValue: () => ({
+    dir: 'ltr',
+    locale: 'en-US'
+  })
+});
+
+const LocaleProvider = props => {
+  const [localeProps, restProps] = solidJs.splitProps(props, ['locale', 'defaultLocale']);
+  const [locale, setLocale] = solidJs.createSignal(localeProps.defaultLocale || localeProps.locale || 'en-US');
+  const getRootNode = useEnvironmentContext();
+  solidJs.createEffect(() => {
+    const cleanup = i18nUtils.trackLocale({
+      locale: localeProps.locale,
+      getRootNode,
+      onLocaleChange(locale) {
+        setLocale(locale.locale);
+      }
+    });
+    solidJs.onCleanup(cleanup);
+  });
+  const context = solidJs.createMemo(() => ({
+    locale: locale(),
+    dir: i18nUtils.isRTL(locale()) ? 'rtl' : 'ltr'
+  }));
+  return web.createComponent(LocaleContextProvider, {
+    value: context,
+    get children() {
+      return restProps.children;
+    }
+  });
+};
+
 const [MenuProvider, useMenuContext] = createContext({
   hookName: 'useMenuContext',
   providerName: '<MenuProvider />',
@@ -1907,7 +2051,8 @@ const useMenu = props => {
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode
+    getRootNode,
+    'open.controlled': props.open !== undefined
   }, props);
   const [state, send, machine] = solid.useMachine(menu__namespace.machine(context), {
     context
@@ -2184,7 +2329,7 @@ const usePinInput = props => {
   return solidJs.createMemo(() => pinInput__namespace.connect(state, send, solid.normalizeProps));
 };
 
-const _tmpl$$6 = /*#__PURE__*/web.template(`<input>`);
+var _tmpl$$6 = /*#__PURE__*/web.template(`<input>`);
 const PinInputRoot = props => {
   const [usePinInputProps, localProps] = createSplitProps()(props, ['autoFocus', 'blurOnComplete', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'mask', 'name', 'onValueChange', 'onValueComplete', 'onValueInvalid', 'otp', 'pattern', 'placeholder', 'selectOnFocus', 'translations', 'type', 'value']);
   const api = usePinInput(usePinInputProps);
@@ -2193,7 +2338,7 @@ const PinInputRoot = props => {
     value: api,
     get children() {
       return [web.createComponent(ark.div, mergedProps), (() => {
-        const _el$ = _tmpl$$6();
+        var _el$ = _tmpl$$6();
         web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
         return _el$;
       })()];
@@ -2255,7 +2400,7 @@ const PopoverContent = props => {
 const PopoverDescription = props => {
   const api = usePopoverContext();
   const mergedProps = solid.mergeProps(() => api().descriptionProps, props);
-  return web.createComponent(ark.p, mergedProps);
+  return web.createComponent(ark.div, mergedProps);
 };
 
 const PopoverIndicator = props => {
@@ -2282,7 +2427,8 @@ const usePopover = props => {
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode
+    getRootNode,
+    'open.controlled': props.open !== undefined
   }, props);
   const [state, send] = solid.useMachine(popover__namespace.machine(context), {
     context
@@ -2476,13 +2622,13 @@ const RadioGroupItem = props => {
   });
 };
 
-const _tmpl$$5 = /*#__PURE__*/web.template(`<input>`);
+var _tmpl$$5 = /*#__PURE__*/web.template(`<input>`);
 const RadioGroupItemControl = props => {
   const api = useRadioGroupContext();
   const itemProps = useRadioGroupItemContext();
   const mergedProps = solid.mergeProps(() => api().getItemControlProps(itemProps), props);
   return [web.createComponent(ark.div, mergedProps), (() => {
-    const _el$ = _tmpl$$5();
+    var _el$ = _tmpl$$5();
     web.spread(_el$, web.mergeProps(() => api().getItemHiddenInputProps(itemProps)), false, false);
     return _el$;
   })()];
@@ -2540,7 +2686,7 @@ const [RatingGroupProvider, useRatingGroupContext] = createContext({
   providerName: '<RatingGroupProvider />'
 });
 
-const _tmpl$$4 = /*#__PURE__*/web.template(`<input>`);
+var _tmpl$$4 = /*#__PURE__*/web.template(`<input>`);
 const RatingGroupControl = props => {
   const api = useRatingGroupContext();
   const mergedProps = solid.mergeProps(() => api().controlProps, props);
@@ -2550,7 +2696,7 @@ const RatingGroupControl = props => {
       return getChildren();
     }
   })), (() => {
-    const _el$ = _tmpl$$4();
+    var _el$ = _tmpl$$4();
     web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
     return _el$;
   })()];
@@ -2651,13 +2797,13 @@ const SegmentGroupItem = props => {
   });
 };
 
-const _tmpl$$3 = /*#__PURE__*/web.template(`<input>`);
+var _tmpl$$3 = /*#__PURE__*/web.template(`<input>`);
 const SegmentGroupItemControl = props => {
   const api = useSegmentGroupContext();
   const itemProps = useSegmentGroupItemContext();
   const mergedProps = solid.mergeProps(() => api().getItemControlProps(itemProps), anatomy.segmentGroupAnatomy.build().itemControl.attrs, props);
   return [web.createComponent(ark.div, mergedProps), (() => {
-    const _el$ = _tmpl$$3();
+    var _el$ = _tmpl$$3();
     web.spread(_el$, web.mergeProps(() => api().getItemHiddenInputProps(itemProps)), false, false);
     return _el$;
   })()];
@@ -2736,25 +2882,35 @@ const SelectContent = props => {
   });
 };
 
-const _tmpl$$2 = /*#__PURE__*/web.template(`<select>`),
-  _tmpl$2 = /*#__PURE__*/web.template(`<option>`);
+var _tmpl$$2 = /*#__PURE__*/web.template(`<option value="">`),
+  _tmpl$2 = /*#__PURE__*/web.template(`<select>`),
+  _tmpl$3 = /*#__PURE__*/web.template(`<option>`);
 const SelectControl = props => {
   const api = useSelectContext();
   const mergedProps = solid.mergeProps(() => api().controlProps, props);
+  const isValueEmpty = solidJs.createMemo(() => api().value.length === 0);
   return [web.createComponent(ark.div, mergedProps), (() => {
-    const _el$ = _tmpl$$2();
+    var _el$ = _tmpl$2();
     web.spread(_el$, web.mergeProps(() => api().hiddenSelectProps), false, true);
+    web.insert(_el$, web.createComponent(solidJs.Show, {
+      get when() {
+        return isValueEmpty();
+      },
+      get children() {
+        return _tmpl$$2();
+      }
+    }), null);
     web.insert(_el$, web.createComponent(solidJs.Index, {
       get each() {
         return api().collection.toArray();
       },
       children: option => (() => {
-        const _el$2 = _tmpl$2();
-        web.insert(_el$2, () => option().label);
-        web.effect(() => _el$2.value = option().value);
-        return _el$2;
+        var _el$3 = _tmpl$3();
+        web.insert(_el$3, () => option().label);
+        web.effect(() => _el$3.value = option().value);
+        return _el$3;
       })()
-    }));
+    }), null);
     return _el$;
   })()];
 };
@@ -2844,7 +3000,8 @@ const useSelect = props => {
   const context = () => solid.mergeProps({
     id: solidJs.createUniqueId(),
     getRootNode,
-    collection: collection()
+    collection: collection(),
+    'open.controlled': props.open !== undefined
   }, rest);
   const [state, send] = solid.useMachine(select__namespace.machine(context()), {
     context
@@ -3074,12 +3231,12 @@ const [SwitchProvider, useSwitchContext] = createContext({
   providerName: '<SwitchProvider />'
 });
 
-const _tmpl$$1 = /*#__PURE__*/web.template(`<input>`);
+var _tmpl$$1 = /*#__PURE__*/web.template(`<input>`);
 const SwitchControl = props => {
   const api = useSwitchContext();
   const mergedProps = solid.mergeProps(() => api().controlProps, props);
   return [web.createComponent(ark.span, mergedProps), (() => {
-    const _el$ = _tmpl$$1();
+    var _el$ = _tmpl$$1();
     web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
     return _el$;
   })()];
@@ -3311,7 +3468,7 @@ const useTagsInput = props => {
   return solidJs.createMemo(() => tagsInput__namespace.connect(state, send, solid.normalizeProps));
 };
 
-const _tmpl$ = /*#__PURE__*/web.template(`<input>`);
+var _tmpl$ = /*#__PURE__*/web.template(`<input>`);
 const TagsInputRoot = props => {
   const [tagsInputParams, restProps] = createSplitProps()(props, ['addOnPaste', 'allowEditTag', 'allowOverflow', 'autoFocus', 'blurBehavior', 'delimiter', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'inputValue', 'invalid', 'max', 'maxLength', 'name', 'onFocusOutside', 'onHighlightChange', 'onInteractOutside', 'onPointerDownOutside', 'onValueChange', 'onValueInvalid', 'readOnly', 'translations', 'validate', 'value']);
   const api = useTagsInput(tagsInputParams);
@@ -3325,7 +3482,7 @@ const TagsInputRoot = props => {
           return getChildren();
         }
       })), (() => {
-        const _el$ = _tmpl$();
+        var _el$ = _tmpl$();
         web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
         return _el$;
       })()];
@@ -3526,7 +3683,8 @@ const useTooltip = props => {
   const getRootNode = useEnvironmentContext();
   const context = solid.mergeProps({
     id: solidJs.createUniqueId(),
-    getRootNode
+    getRootNode,
+    'open.controlled': props.open !== undefined
   }, props);
   const [state, send] = solid.useMachine(tooltip__namespace.machine(context), {
     context
@@ -3571,76 +3729,121 @@ var tooltip = /*#__PURE__*/Object.freeze({
   Trigger: TooltipTrigger
 });
 
-// TODO: remove after zag release
+const [TreeViewBranchProvider, useTreeViewBranchContext] = createContext({
+  hookName: 'useTreeViewBranchContext',
+  providerName: '<TreeViewBranchProvider />'
+});
 
 const [TreeViewProvider, useTreeViewContext] = createContext({
   hookName: 'useTreeViewContext',
   providerName: '<TreeViewProvider />'
 });
 
+const [TreeViewDepthProvider, useTreeViewDepthContext] = createContext({
+  hookName: 'useTreeViewDepthContext',
+  providerName: '<TreeViewDepthProvider />'
+});
+
 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 = solid.mergeProps(itemProps, {
+    depth
+  });
   const mergedProps = solid.mergeProps(() => api().getBranchProps(branchProps), localProps);
   const getChildren = () => runIfFn(localProps.children, () => api().getBranchState(branchProps));
-  return web.createComponent(ark.li, web.mergeProps(mergedProps, {
+  return web.createComponent(TreeViewDepthProvider, {
+    value: depth + 1,
     get children() {
-      return getChildren();
+      return web.createComponent(TreeViewBranchProvider, {
+        value: branchProps,
+        get children() {
+          return web.createComponent(ark.li, web.mergeProps(mergedProps, {
+            get children() {
+              return getChildren();
+            }
+          }));
+        }
+      });
     }
-  }));
+  });
 };
 
 const TreeViewBranchContent = props => {
-  const [branchProps, localProps] = createSplitProps()(props, ['depth', 'id', 'disabled']);
   const api = useTreeViewContext();
-  const mergedProps = solid.mergeProps(() => api().getBranchContentProps(branchProps), localProps);
+  const branchProps = useTreeViewBranchContext();
+  const mergedProps = solid.mergeProps(() => api().getBranchContentProps(branchProps), props);
   return web.createComponent(ark.ul, mergedProps);
 };
 
 const TreeViewBranchControl = props => {
-  const [branchProps, localProps] = createSplitProps()(props, ['depth', 'id', 'disabled']);
   const api = useTreeViewContext();
-  const mergedProps = solid.mergeProps(() => api().getBranchControlProps(branchProps), localProps);
+  const branchProps = useTreeViewBranchContext();
+  const mergedProps = solid.mergeProps(() => api().getBranchControlProps(branchProps), props);
   return web.createComponent(ark.div, mergedProps);
 };
 
 const TreeViewBranchIndicator = props => {
-  const [branchProps, localProps] = createSplitProps()(props, ['depth', 'id', 'disabled']);
   const api = useTreeViewContext();
-  const mergedProps = solid.mergeProps(() => api().getBranchProps(branchProps), anatomy.treeViewAnatomy.build().branchIndicator.attrs, localProps);
+  const branchProps = useTreeViewBranchContext();
+  const mergedProps = solid.mergeProps(() => api().getBranchProps(branchProps),
+  // TODO use api.getBranchIndicatorProps() when available
+  anatomy.treeViewAnatomy.build().branchIndicator.attrs, props);
   return web.createComponent(ark.div, mergedProps);
 };
 
 const TreeViewBranchText = props => {
-  const [branchProps, localProps] = createSplitProps()(props, ['depth', 'id', 'disabled']);
   const api = useTreeViewContext();
-  const mergedProps = solid.mergeProps(() => api().getBranchTextProps(branchProps), localProps);
+  const branchProps = useTreeViewBranchContext();
+  const mergedProps = solid.mergeProps(() => api().getBranchTextProps(branchProps), props);
   return web.createComponent(ark.span, mergedProps);
 };
 
 const TreeViewBranchTrigger = props => {
-  const [branchProps, localProps] = createSplitProps()(props, ['depth', 'id', 'disabled']);
   const api = useTreeViewContext();
-  const mergedProps = solid.mergeProps(() => api().getBranchTriggerProps(branchProps), localProps);
-  return web.createComponent(ark.button, mergedProps);
+  const branchProps = useTreeViewBranchContext();
+  const mergedProps = solid.mergeProps(() => api().getBranchTriggerProps(branchProps), props);
+  return web.createComponent(ark.div, mergedProps);
 };
 
+const [TreeViewItemProvider, useTreeViewItemContext] = createContext({
+  hookName: 'useTreeViewItemContext',
+  providerName: '<TreeViewItemProvider />'
+});
+
 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 = solid.mergeProps(_itemProps, {
+    depth
+  });
   const mergedProps = solid.mergeProps(() => api().getItemProps(itemProps), localProps);
   const getChildren = () => runIfFn(localProps.children, () => api().getItemState(itemProps));
-  return web.createComponent(ark.li, web.mergeProps(mergedProps, {
+  return web.createComponent(TreeViewItemProvider, {
+    value: itemProps,
     get children() {
-      return getChildren();
+      return web.createComponent(ark.li, web.mergeProps(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
     }
-  }));
+  });
+};
+
+const TreeViewItemIndicator = props => {
+  const api = useTreeViewContext();
+  const itemProps = useTreeViewItemContext();
+  const mergedProps = solid.mergeProps(() => api().getItemIndicatorProps(itemProps), props);
+  return web.createComponent(ark.div, mergedProps);
 };
 
 const TreeViewItemText = props => {
-  const [itemProps, localProps] = createSplitProps()(props, ['depth', 'id', 'disabled']);
   const api = useTreeViewContext();
-  const mergedProps = solid.mergeProps(() => api().getItemProps(itemProps), anatomy.treeViewAnatomy.build().itemText.attrs, localProps);
+  const itemProps = useTreeViewItemContext();
+  const mergedProps = solid.mergeProps(() => api().getItemTextProps(itemProps), props);
   return web.createComponent(ark.span, mergedProps);
 };
 
@@ -3682,7 +3885,12 @@ const TreeViewRoot = props => {
 const TreeViewTree = props => {
   const api = useTreeViewContext();
   const mergedProps = solid.mergeProps(() => api().treeProps, props);
-  return web.createComponent(ark.ul, mergedProps);
+  return web.createComponent(TreeViewDepthProvider, {
+    value: 1,
+    get children() {
+      return web.createComponent(ark.ul, mergedProps);
+    }
+  });
 };
 
 var treeView = /*#__PURE__*/Object.freeze({
@@ -3694,6 +3902,7 @@ var treeView = /*#__PURE__*/Object.freeze({
   BranchText: TreeViewBranchText,
   BranchTrigger: TreeViewBranchTrigger,
   Item: TreeViewItem,
+  ItemIndicator: TreeViewItemIndicator,
   ItemText: TreeViewItemText,
   Label: TreeViewLabel,
   Root: TreeViewRoot,
@@ -3725,6 +3934,13 @@ exports.CheckboxControl = CheckboxControl;
 exports.CheckboxIndicator = CheckboxIndicator;
 exports.CheckboxLabel = CheckboxLabel;
 exports.CheckboxRoot = CheckboxRoot;
+exports.Clipboard = clipboard;
+exports.ClipboardControl = ClipboardControl;
+exports.ClipboardIndicator = ClipboardIndicator;
+exports.ClipboardInput = ClipboardInput;
+exports.ClipboardLabel = ClipboardLabel;
+exports.ClipboardRoot = ClipboardRoot;
+exports.ClipboardTrigger = ClipboardTrigger;
 exports.ColorPicker = colorPicker;
 exports.ColorPickerArea = ColorPickerArea;
 exports.ColorPickerAreaBackground = ColorPickerAreaBackground;
@@ -3772,6 +3988,7 @@ exports.DatePickerLabel = DatePickerLabel;
 exports.DatePickerMonthSelect = DatePickerMonthSelect;
 exports.DatePickerNextTrigger = DatePickerNextTrigger;
 exports.DatePickerPositioner = DatePickerPositioner;
+exports.DatePickerPresetTrigger = DatePickerPresetTrigger;
 exports.DatePickerPrevTrigger = DatePickerPrevTrigger;
 exports.DatePickerRangeText = DatePickerRangeText;
 exports.DatePickerRoot = DatePickerRoot;
@@ -3826,6 +4043,7 @@ exports.HoverCardContent = HoverCardContent;
 exports.HoverCardPositioner = HoverCardPositioner;
 exports.HoverCardRoot = HoverCardRoot;
 exports.HoverCardTrigger = HoverCardTrigger;
+exports.LocaleProvider = LocaleProvider;
 exports.Menu = menu;
 exports.MenuArrow = MenuArrow;
 exports.MenuArrowTip = MenuArrowTip;
@@ -3978,6 +4196,7 @@ exports.TreeViewBranchIndicator = TreeViewBranchIndicator;
 exports.TreeViewBranchText = TreeViewBranchText;
 exports.TreeViewBranchTrigger = TreeViewBranchTrigger;
 exports.TreeViewItem = TreeViewItem;
+exports.TreeViewItemIndicator = TreeViewItemIndicator;
 exports.TreeViewItemText = TreeViewItemText;
 exports.TreeViewLabel = TreeViewLabel;
 exports.TreeViewRoot = TreeViewRoot;
@@ -3990,6 +4209,7 @@ exports.useAccordionItemContext = useAccordionItemContext;
 exports.useAvatarContext = useAvatarContext;
 exports.useCarouselContext = useCarouselContext;
 exports.useCheckboxContext = useCheckboxContext;
+exports.useClipboardContext = useClipboardContext;
 exports.useColorPickerAreaContext = useColorPickerAreaContext;
 exports.useColorPickerChannelSliderContext = useColorPickerChannelSliderContext;
 exports.useColorPickerContext = useColorPickerContext;
@@ -4003,6 +4223,7 @@ exports.useEditableContext = useEditableContext;
 exports.useEnvironmentContext = useEnvironmentContext;
 exports.useFileUploadContext = useFileUploadContext;
 exports.useHoverCardContext = useHoverCardContext;
+exports.useLocaleContext = useLocaleContext;
 exports.useMenuContext = useMenuContext;
 exports.useNumberInputContext = useNumberInputContext;
 exports.usePaginationContext = usePaginationContext;