@ark-ui/solid 2.0.1 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (66) hide show
  1. package/CHANGELOG.md +35 -0
  2. package/cjs/index.js +147 -67
  3. package/cjs/index.js.map +1 -1
  4. package/esm/index.js +146 -68
  5. package/esm/index.js.map +1 -1
  6. package/package.json +52 -47
  7. package/source/color-picker/use-color-picker.js +1 -0
  8. package/source/date-picker/date-picker-input.jsx +3 -1
  9. package/source/date-picker/date-picker-preset-trigger.jsx +10 -0
  10. package/source/date-picker/date-picker.jsx +2 -1
  11. package/source/date-picker/index.js +2 -1
  12. package/source/date-picker/use-date-picker.js +1 -0
  13. package/source/dialog/dialog-description.jsx +1 -1
  14. package/source/dialog/use-dialog.js +1 -1
  15. package/source/hover-card/use-hover-card.js +1 -1
  16. package/source/menu/use-menu.js +1 -1
  17. package/source/popover/popover-description.jsx +1 -1
  18. package/source/popover/use-popover.js +1 -1
  19. package/source/select/select-control.jsx +5 -1
  20. package/source/select/use-select.js +6 -1
  21. package/source/tooltip/use-tooltip.js +1 -1
  22. package/source/tree-view/index.js +2 -1
  23. package/source/tree-view/tree-view-branch-content.jsx +3 -8
  24. package/source/tree-view/tree-view-branch-context.js +5 -0
  25. package/source/tree-view/tree-view-branch-control.jsx +3 -8
  26. package/source/tree-view/tree-view-branch-indicator.jsx +5 -8
  27. package/source/tree-view/tree-view-branch-text.jsx +3 -8
  28. package/source/tree-view/tree-view-branch-trigger.jsx +4 -9
  29. package/source/tree-view/tree-view-branch.jsx +10 -7
  30. package/source/tree-view/tree-view-depth-context.js +5 -0
  31. package/source/tree-view/tree-view-item-context.js +5 -0
  32. package/source/tree-view/tree-view-item-indicator.jsx +10 -0
  33. package/source/tree-view/tree-view-item-text.jsx +3 -5
  34. package/source/tree-view/tree-view-item.jsx +8 -3
  35. package/source/tree-view/tree-view-tree.jsx +4 -1
  36. package/source/tree-view/tree-view.jsx +2 -1
  37. package/types/color-picker/use-color-picker.d.ts +1 -1
  38. package/types/date-picker/date-picker-input.d.ts +4 -2
  39. package/types/date-picker/date-picker-preset-trigger.d.ts +6 -0
  40. package/types/date-picker/date-picker.d.ts +2 -1
  41. package/types/date-picker/index.d.ts +3 -2
  42. package/types/date-picker/use-date-picker.d.ts +1 -1
  43. package/types/dialog/dialog-description.d.ts +2 -2
  44. package/types/dialog/use-dialog.d.ts +1 -1
  45. package/types/hover-card/use-hover-card.d.ts +1 -1
  46. package/types/menu/index.d.ts +2 -2
  47. package/types/menu/use-menu.d.ts +1 -1
  48. package/types/popover/popover-description.d.ts +2 -2
  49. package/types/popover/use-popover.d.ts +1 -1
  50. package/types/select/use-select.d.ts +1 -1
  51. package/types/tooltip/use-tooltip.d.ts +1 -1
  52. package/types/tree-view/index.d.ts +3 -2
  53. package/types/tree-view/tree-view-branch-content.d.ts +2 -4
  54. package/types/tree-view/tree-view-branch-context.d.ts +6 -0
  55. package/types/tree-view/tree-view-branch-control.d.ts +2 -4
  56. package/types/tree-view/tree-view-branch-indicator.d.ts +2 -4
  57. package/types/tree-view/tree-view-branch-text.d.ts +2 -4
  58. package/types/tree-view/tree-view-branch-trigger.d.ts +2 -4
  59. package/types/tree-view/tree-view-branch.d.ts +4 -3
  60. package/types/tree-view/tree-view-context.d.ts +0 -16
  61. package/types/tree-view/tree-view-depth-context.d.ts +2 -0
  62. package/types/tree-view/tree-view-item-context.d.ts +6 -0
  63. package/types/tree-view/tree-view-item-indicator.d.ts +4 -0
  64. package/types/tree-view/tree-view-item-text.d.ts +2 -4
  65. package/types/tree-view/tree-view-item.d.ts +2 -1
  66. package/types/tree-view/tree-view.d.ts +2 -1
package/esm/index.js CHANGED
@@ -217,7 +217,7 @@ const [EnvironmentProvider, useEnvironmentContext] = createContext({
217
217
  strict: false
218
218
  });
219
219
 
220
- const _tmpl$$c = /*#__PURE__*/template(`<span hidden>`);
220
+ var _tmpl$$c = /*#__PURE__*/template(`<span hidden>`);
221
221
  const Environment = props => {
222
222
  // eslint-disable-next-line prefer-const
223
223
  let spanRef = undefined;
@@ -228,8 +228,8 @@ const Environment = props => {
228
228
  },
229
229
  get children() {
230
230
  return [memo(() => props.children), memo(() => memo(() => !!!props.value)() && (() => {
231
- const _el$ = _tmpl$$c();
232
- const _ref$ = spanRef;
231
+ var _el$ = _tmpl$$c();
232
+ var _ref$ = spanRef;
233
233
  typeof _ref$ === "function" ? use(_ref$, _el$) : spanRef = _el$;
234
234
  return _el$;
235
235
  })())];
@@ -425,12 +425,12 @@ const [CheckboxProvider, useCheckboxContext] = createContext({
425
425
  providerName: '<CheckboxProvider />'
426
426
  });
427
427
 
428
- const _tmpl$$b = /*#__PURE__*/template(`<input>`);
428
+ var _tmpl$$b = /*#__PURE__*/template(`<input>`);
429
429
  const CheckboxControl = props => {
430
430
  const api = useCheckboxContext();
431
431
  const mergedProps = mergeProps$1(() => api().controlProps, props);
432
432
  return [createComponent(ark.div, mergedProps), (() => {
433
- const _el$ = _tmpl$$b();
433
+ var _el$ = _tmpl$$b();
434
434
  spread(_el$, mergeProps(() => api().hiddenInputProps), false, false);
435
435
  return _el$;
436
436
  })()];
@@ -637,7 +637,8 @@ const useColorPicker = props => {
637
637
  const context = mergeProps$1(() => ({
638
638
  id: createUniqueId(),
639
639
  getRootNode,
640
- value: local.value ? colorPicker$1.parse(local.value) : undefined
640
+ value: local.value ? colorPicker$1.parse(local.value) : undefined,
641
+ 'open.controlled': props.open !== undefined
641
642
  }), rest);
642
643
  const [state, send] = useMachine(colorPicker$1.machine(context), {
643
644
  context
@@ -645,7 +646,7 @@ const useColorPicker = props => {
645
646
  return createMemo(() => colorPicker$1.connect(state, send, normalizeProps));
646
647
  };
647
648
 
648
- const _tmpl$$a = /*#__PURE__*/template(`<input>`);
649
+ var _tmpl$$a = /*#__PURE__*/template(`<input>`);
649
650
  const ColorPickerRoot = props => {
650
651
  const [presenceProps, colorPickerProps] = splitPresenceProps(props);
651
652
  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']);
@@ -668,7 +669,7 @@ const ColorPickerRoot = props => {
668
669
  }));
669
670
  }
670
671
  }), (() => {
671
- const _el$ = _tmpl$$a();
672
+ var _el$ = _tmpl$$a();
672
673
  spread(_el$, mergeProps(() => api().hiddenInputProps), false, false);
673
674
  return _el$;
674
675
  })()];
@@ -988,8 +989,9 @@ const DatePickerControl = props => {
988
989
  };
989
990
 
990
991
  const DatePickerInput = props => {
992
+ const [inputProps, localProps] = createSplitProps()(props, ['index']);
991
993
  const api = useDatePickerContext();
992
- const mergedProps = mergeProps$1(() => api().inputProps, props);
994
+ const mergedProps = mergeProps$1(() => api().getInputProps(inputProps), localProps);
993
995
  return createComponent(ark.input, mergedProps);
994
996
  };
995
997
 
@@ -999,14 +1001,14 @@ const DatePickerLabel = props => {
999
1001
  return createComponent(ark.label, mergedProps);
1000
1002
  };
1001
1003
 
1002
- const _tmpl$$9 = /*#__PURE__*/template(`<option>`);
1004
+ var _tmpl$$9 = /*#__PURE__*/template(`<option>`);
1003
1005
  const DatePickerMonthSelect = props => {
1004
1006
  const api = useDatePickerContext();
1005
1007
  const mergedProps = mergeProps$1(() => api().monthSelectProps, props);
1006
1008
  return createComponent(ark.select, mergeProps(mergedProps, {
1007
1009
  get children() {
1008
1010
  return api().getMonths().map(month => (() => {
1009
- const _el$ = _tmpl$$9();
1011
+ var _el$ = _tmpl$$9();
1010
1012
  insert(_el$, () => month.label);
1011
1013
  effect(() => _el$.value = month.value);
1012
1014
  return _el$;
@@ -1041,6 +1043,13 @@ const DatePickerPositioner = props => {
1041
1043
  });
1042
1044
  };
1043
1045
 
1046
+ const DatePickerPresetTrigger = props => {
1047
+ const [presetTriggerProps, localProps] = createSplitProps()(props, ['value']);
1048
+ const api = useDatePickerContext();
1049
+ const mergedProps = mergeProps$1(() => api().getPresetTriggerProps(presetTriggerProps), localProps);
1050
+ return createComponent(ark.button, mergedProps);
1051
+ };
1052
+
1044
1053
  const DatePickerPrevTrigger = props => {
1045
1054
  const api = useDatePickerContext();
1046
1055
  const viewProps = useDatePickerViewContext();
@@ -1065,7 +1074,8 @@ const useDatePicker = props => {
1065
1074
  id: createUniqueId(),
1066
1075
  getRootNode,
1067
1076
  focusedValue: local.focusedValue ? datePicker$1.parse(local.focusedValue) : undefined,
1068
- value: local.value ? datePicker$1.parse(local.value) : undefined
1077
+ value: local.value ? datePicker$1.parse(local.value) : undefined,
1078
+ 'open.controlled': props.open !== undefined
1069
1079
  }), rest);
1070
1080
  const [state, send] = useMachine(datePicker$1.machine(context), {
1071
1081
  context
@@ -1230,7 +1240,7 @@ const DatePickerViewTrigger = props => {
1230
1240
  return createComponent(ark.button, mergedProps);
1231
1241
  };
1232
1242
 
1233
- const _tmpl$$8 = /*#__PURE__*/template(`<option>`);
1243
+ var _tmpl$$8 = /*#__PURE__*/template(`<option>`);
1234
1244
  const DatePickerYearSelect = props => {
1235
1245
  const api = useDatePickerContext();
1236
1246
  const mergedProps = mergeProps$1(() => api().yearSelectProps, props);
@@ -1240,7 +1250,7 @@ const DatePickerYearSelect = props => {
1240
1250
  from: 1_000,
1241
1251
  to: 4_000
1242
1252
  }).map(year => (() => {
1243
- const _el$ = _tmpl$$8();
1253
+ var _el$ = _tmpl$$8();
1244
1254
  _el$.value = year;
1245
1255
  insert(_el$, year);
1246
1256
  return _el$;
@@ -1266,6 +1276,7 @@ var datePicker = /*#__PURE__*/Object.freeze({
1266
1276
  MonthSelect: DatePickerMonthSelect,
1267
1277
  NextTrigger: DatePickerNextTrigger,
1268
1278
  Positioner: DatePickerPositioner,
1279
+ PresetTrigger: DatePickerPresetTrigger,
1269
1280
  PrevTrigger: DatePickerPrevTrigger,
1270
1281
  RangeText: DatePickerRangeText,
1271
1282
  Root: DatePickerRoot,
@@ -1328,7 +1339,7 @@ const DialogContent = props => {
1328
1339
  const DialogDescription = props => {
1329
1340
  const dialog = useDialogContext();
1330
1341
  const mergedProps = mergeProps$1(() => dialog().descriptionProps, props);
1331
- return createComponent(ark.p, mergedProps);
1342
+ return createComponent(ark.div, mergedProps);
1332
1343
  };
1333
1344
 
1334
1345
  const DialogPositioner = props => {
@@ -1349,7 +1360,8 @@ const useDialog = props => {
1349
1360
  const getRootNode = useEnvironmentContext();
1350
1361
  const context = mergeProps$1({
1351
1362
  id: createUniqueId(),
1352
- getRootNode
1363
+ getRootNode,
1364
+ 'open.controlled': props.open !== undefined
1353
1365
  }, props);
1354
1366
  const [state, send] = useMachine(dialog$1.machine(context), {
1355
1367
  context
@@ -1510,12 +1522,12 @@ const [FileUploadProvider, useFileUploadContext] = createContext({
1510
1522
  providerName: '<FileUploadProvider />'
1511
1523
  });
1512
1524
 
1513
- const _tmpl$$7 = /*#__PURE__*/template(`<input>`);
1525
+ var _tmpl$$7 = /*#__PURE__*/template(`<input>`);
1514
1526
  const FileUploadDropzone = props => {
1515
1527
  const api = useFileUploadContext();
1516
1528
  const mergedProps = mergeProps$1(() => api().dropzoneProps, props);
1517
1529
  return [createComponent(ark.div, mergedProps), (() => {
1518
- const _el$ = _tmpl$$7();
1530
+ var _el$ = _tmpl$$7();
1519
1531
  spread(_el$, mergeProps(() => api().hiddenInputProps), false, false);
1520
1532
  return _el$;
1521
1533
  })()];
@@ -1710,7 +1722,8 @@ const useHoverCard = props => {
1710
1722
  const getRootNode = useEnvironmentContext();
1711
1723
  const context = mergeProps$1({
1712
1724
  id: createUniqueId(),
1713
- getRootNode
1725
+ getRootNode,
1726
+ 'open.controlled': props.open !== undefined
1714
1727
  }, props);
1715
1728
  const [state, send] = useMachine(hoverCard$1.machine(context), {
1716
1729
  context
@@ -1857,7 +1870,8 @@ const useMenu = props => {
1857
1870
  const getRootNode = useEnvironmentContext();
1858
1871
  const context = mergeProps$1({
1859
1872
  id: createUniqueId(),
1860
- getRootNode
1873
+ getRootNode,
1874
+ 'open.controlled': props.open !== undefined
1861
1875
  }, props);
1862
1876
  const [state, send, machine] = useMachine(menu$1.machine(context), {
1863
1877
  context
@@ -2134,7 +2148,7 @@ const usePinInput = props => {
2134
2148
  return createMemo(() => pinInput$1.connect(state, send, normalizeProps));
2135
2149
  };
2136
2150
 
2137
- const _tmpl$$6 = /*#__PURE__*/template(`<input>`);
2151
+ var _tmpl$$6 = /*#__PURE__*/template(`<input>`);
2138
2152
  const PinInputRoot = props => {
2139
2153
  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']);
2140
2154
  const api = usePinInput(usePinInputProps);
@@ -2143,7 +2157,7 @@ const PinInputRoot = props => {
2143
2157
  value: api,
2144
2158
  get children() {
2145
2159
  return [createComponent(ark.div, mergedProps), (() => {
2146
- const _el$ = _tmpl$$6();
2160
+ var _el$ = _tmpl$$6();
2147
2161
  spread(_el$, mergeProps(() => api().hiddenInputProps), false, false);
2148
2162
  return _el$;
2149
2163
  })()];
@@ -2205,7 +2219,7 @@ const PopoverContent = props => {
2205
2219
  const PopoverDescription = props => {
2206
2220
  const api = usePopoverContext();
2207
2221
  const mergedProps = mergeProps$1(() => api().descriptionProps, props);
2208
- return createComponent(ark.p, mergedProps);
2222
+ return createComponent(ark.div, mergedProps);
2209
2223
  };
2210
2224
 
2211
2225
  const PopoverIndicator = props => {
@@ -2232,7 +2246,8 @@ const usePopover = props => {
2232
2246
  const getRootNode = useEnvironmentContext();
2233
2247
  const context = mergeProps$1({
2234
2248
  id: createUniqueId(),
2235
- getRootNode
2249
+ getRootNode,
2250
+ 'open.controlled': props.open !== undefined
2236
2251
  }, props);
2237
2252
  const [state, send] = useMachine(popover$1.machine(context), {
2238
2253
  context
@@ -2426,13 +2441,13 @@ const RadioGroupItem = props => {
2426
2441
  });
2427
2442
  };
2428
2443
 
2429
- const _tmpl$$5 = /*#__PURE__*/template(`<input>`);
2444
+ var _tmpl$$5 = /*#__PURE__*/template(`<input>`);
2430
2445
  const RadioGroupItemControl = props => {
2431
2446
  const api = useRadioGroupContext();
2432
2447
  const itemProps = useRadioGroupItemContext();
2433
2448
  const mergedProps = mergeProps$1(() => api().getItemControlProps(itemProps), props);
2434
2449
  return [createComponent(ark.div, mergedProps), (() => {
2435
- const _el$ = _tmpl$$5();
2450
+ var _el$ = _tmpl$$5();
2436
2451
  spread(_el$, mergeProps(() => api().getItemHiddenInputProps(itemProps)), false, false);
2437
2452
  return _el$;
2438
2453
  })()];
@@ -2490,7 +2505,7 @@ const [RatingGroupProvider, useRatingGroupContext] = createContext({
2490
2505
  providerName: '<RatingGroupProvider />'
2491
2506
  });
2492
2507
 
2493
- const _tmpl$$4 = /*#__PURE__*/template(`<input>`);
2508
+ var _tmpl$$4 = /*#__PURE__*/template(`<input>`);
2494
2509
  const RatingGroupControl = props => {
2495
2510
  const api = useRatingGroupContext();
2496
2511
  const mergedProps = mergeProps$1(() => api().controlProps, props);
@@ -2500,7 +2515,7 @@ const RatingGroupControl = props => {
2500
2515
  return getChildren();
2501
2516
  }
2502
2517
  })), (() => {
2503
- const _el$ = _tmpl$$4();
2518
+ var _el$ = _tmpl$$4();
2504
2519
  spread(_el$, mergeProps(() => api().hiddenInputProps), false, false);
2505
2520
  return _el$;
2506
2521
  })()];
@@ -2601,13 +2616,13 @@ const SegmentGroupItem = props => {
2601
2616
  });
2602
2617
  };
2603
2618
 
2604
- const _tmpl$$3 = /*#__PURE__*/template(`<input>`);
2619
+ var _tmpl$$3 = /*#__PURE__*/template(`<input>`);
2605
2620
  const SegmentGroupItemControl = props => {
2606
2621
  const api = useSegmentGroupContext();
2607
2622
  const itemProps = useSegmentGroupItemContext();
2608
2623
  const mergedProps = mergeProps$1(() => api().getItemControlProps(itemProps), segmentGroupAnatomy.build().itemControl.attrs, props);
2609
2624
  return [createComponent(ark.div, mergedProps), (() => {
2610
- const _el$ = _tmpl$$3();
2625
+ var _el$ = _tmpl$$3();
2611
2626
  spread(_el$, mergeProps(() => api().getItemHiddenInputProps(itemProps)), false, false);
2612
2627
  return _el$;
2613
2628
  })()];
@@ -2686,25 +2701,35 @@ const SelectContent = props => {
2686
2701
  });
2687
2702
  };
2688
2703
 
2689
- const _tmpl$$2 = /*#__PURE__*/template(`<select>`),
2690
- _tmpl$2 = /*#__PURE__*/template(`<option>`);
2704
+ var _tmpl$$2 = /*#__PURE__*/template(`<option value="">`),
2705
+ _tmpl$2 = /*#__PURE__*/template(`<select>`),
2706
+ _tmpl$3 = /*#__PURE__*/template(`<option>`);
2691
2707
  const SelectControl = props => {
2692
2708
  const api = useSelectContext();
2693
2709
  const mergedProps = mergeProps$1(() => api().controlProps, props);
2710
+ const isValueEmpty = createMemo(() => api().value.length === 0);
2694
2711
  return [createComponent(ark.div, mergedProps), (() => {
2695
- const _el$ = _tmpl$$2();
2712
+ var _el$ = _tmpl$2();
2696
2713
  spread(_el$, mergeProps(() => api().hiddenSelectProps), false, true);
2714
+ insert(_el$, createComponent(Show, {
2715
+ get when() {
2716
+ return isValueEmpty();
2717
+ },
2718
+ get children() {
2719
+ return _tmpl$$2();
2720
+ }
2721
+ }), null);
2697
2722
  insert(_el$, createComponent(Index, {
2698
2723
  get each() {
2699
2724
  return api().collection.toArray();
2700
2725
  },
2701
2726
  children: option => (() => {
2702
- const _el$2 = _tmpl$2();
2703
- insert(_el$2, () => option().label);
2704
- effect(() => _el$2.value = option().value);
2705
- return _el$2;
2727
+ var _el$3 = _tmpl$3();
2728
+ insert(_el$3, () => option().label);
2729
+ effect(() => _el$3.value = option().value);
2730
+ return _el$3;
2706
2731
  })()
2707
- }));
2732
+ }), null);
2708
2733
  return _el$;
2709
2734
  })()];
2710
2735
  };
@@ -2794,7 +2819,8 @@ const useSelect = props => {
2794
2819
  const context = () => mergeProps$1({
2795
2820
  id: createUniqueId(),
2796
2821
  getRootNode,
2797
- collection: collection()
2822
+ collection: collection(),
2823
+ 'open.controlled': props.open !== undefined
2798
2824
  }, rest);
2799
2825
  const [state, send] = useMachine(select$1.machine(context()), {
2800
2826
  context
@@ -3024,12 +3050,12 @@ const [SwitchProvider, useSwitchContext] = createContext({
3024
3050
  providerName: '<SwitchProvider />'
3025
3051
  });
3026
3052
 
3027
- const _tmpl$$1 = /*#__PURE__*/template(`<input>`);
3053
+ var _tmpl$$1 = /*#__PURE__*/template(`<input>`);
3028
3054
  const SwitchControl = props => {
3029
3055
  const api = useSwitchContext();
3030
3056
  const mergedProps = mergeProps$1(() => api().controlProps, props);
3031
3057
  return [createComponent(ark.span, mergedProps), (() => {
3032
- const _el$ = _tmpl$$1();
3058
+ var _el$ = _tmpl$$1();
3033
3059
  spread(_el$, mergeProps(() => api().hiddenInputProps), false, false);
3034
3060
  return _el$;
3035
3061
  })()];
@@ -3261,7 +3287,7 @@ const useTagsInput = props => {
3261
3287
  return createMemo(() => tagsInput$1.connect(state, send, normalizeProps));
3262
3288
  };
3263
3289
 
3264
- const _tmpl$ = /*#__PURE__*/template(`<input>`);
3290
+ var _tmpl$ = /*#__PURE__*/template(`<input>`);
3265
3291
  const TagsInputRoot = props => {
3266
3292
  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']);
3267
3293
  const api = useTagsInput(tagsInputParams);
@@ -3275,7 +3301,7 @@ const TagsInputRoot = props => {
3275
3301
  return getChildren();
3276
3302
  }
3277
3303
  })), (() => {
3278
- const _el$ = _tmpl$();
3304
+ var _el$ = _tmpl$();
3279
3305
  spread(_el$, mergeProps(() => api().hiddenInputProps), false, false);
3280
3306
  return _el$;
3281
3307
  })()];
@@ -3476,7 +3502,8 @@ const useTooltip = props => {
3476
3502
  const getRootNode = useEnvironmentContext();
3477
3503
  const context = mergeProps$1({
3478
3504
  id: createUniqueId(),
3479
- getRootNode
3505
+ getRootNode,
3506
+ 'open.controlled': props.open !== undefined
3480
3507
  }, props);
3481
3508
  const [state, send] = useMachine(tooltip$1.machine(context), {
3482
3509
  context
@@ -3521,76 +3548,121 @@ var tooltip = /*#__PURE__*/Object.freeze({
3521
3548
  Trigger: TooltipTrigger
3522
3549
  });
3523
3550
 
3524
- // TODO: remove after zag release
3551
+ const [TreeViewBranchProvider, useTreeViewBranchContext] = createContext({
3552
+ hookName: 'useTreeViewBranchContext',
3553
+ providerName: '<TreeViewBranchProvider />'
3554
+ });
3525
3555
 
3526
3556
  const [TreeViewProvider, useTreeViewContext] = createContext({
3527
3557
  hookName: 'useTreeViewContext',
3528
3558
  providerName: '<TreeViewProvider />'
3529
3559
  });
3530
3560
 
3561
+ const [TreeViewDepthProvider, useTreeViewDepthContext] = createContext({
3562
+ hookName: 'useTreeViewDepthContext',
3563
+ providerName: '<TreeViewDepthProvider />'
3564
+ });
3565
+
3531
3566
  const TreeViewBranch = props => {
3532
- const [branchProps, localProps] = createSplitProps()(props, ['depth', 'id', 'disabled']);
3567
+ const [itemProps, localProps] = createSplitProps()(props, ['disabled', 'id']);
3533
3568
  const api = useTreeViewContext();
3569
+ const depth = useTreeViewDepthContext();
3570
+ const branchProps = mergeProps$1(itemProps, {
3571
+ depth
3572
+ });
3534
3573
  const mergedProps = mergeProps$1(() => api().getBranchProps(branchProps), localProps);
3535
3574
  const getChildren = () => runIfFn(localProps.children, () => api().getBranchState(branchProps));
3536
- return createComponent(ark.li, mergeProps(mergedProps, {
3575
+ return createComponent(TreeViewDepthProvider, {
3576
+ value: depth + 1,
3537
3577
  get children() {
3538
- return getChildren();
3578
+ return createComponent(TreeViewBranchProvider, {
3579
+ value: branchProps,
3580
+ get children() {
3581
+ return createComponent(ark.li, mergeProps(mergedProps, {
3582
+ get children() {
3583
+ return getChildren();
3584
+ }
3585
+ }));
3586
+ }
3587
+ });
3539
3588
  }
3540
- }));
3589
+ });
3541
3590
  };
3542
3591
 
3543
3592
  const TreeViewBranchContent = props => {
3544
- const [branchProps, localProps] = createSplitProps()(props, ['depth', 'id', 'disabled']);
3545
3593
  const api = useTreeViewContext();
3546
- const mergedProps = mergeProps$1(() => api().getBranchContentProps(branchProps), localProps);
3594
+ const branchProps = useTreeViewBranchContext();
3595
+ const mergedProps = mergeProps$1(() => api().getBranchContentProps(branchProps), props);
3547
3596
  return createComponent(ark.ul, mergedProps);
3548
3597
  };
3549
3598
 
3550
3599
  const TreeViewBranchControl = props => {
3551
- const [branchProps, localProps] = createSplitProps()(props, ['depth', 'id', 'disabled']);
3552
3600
  const api = useTreeViewContext();
3553
- const mergedProps = mergeProps$1(() => api().getBranchControlProps(branchProps), localProps);
3601
+ const branchProps = useTreeViewBranchContext();
3602
+ const mergedProps = mergeProps$1(() => api().getBranchControlProps(branchProps), props);
3554
3603
  return createComponent(ark.div, mergedProps);
3555
3604
  };
3556
3605
 
3557
3606
  const TreeViewBranchIndicator = props => {
3558
- const [branchProps, localProps] = createSplitProps()(props, ['depth', 'id', 'disabled']);
3559
3607
  const api = useTreeViewContext();
3560
- const mergedProps = mergeProps$1(() => api().getBranchProps(branchProps), treeViewAnatomy.build().branchIndicator.attrs, localProps);
3608
+ const branchProps = useTreeViewBranchContext();
3609
+ const mergedProps = mergeProps$1(() => api().getBranchProps(branchProps),
3610
+ // TODO use api.getBranchIndicatorProps() when available
3611
+ treeViewAnatomy.build().branchIndicator.attrs, props);
3561
3612
  return createComponent(ark.div, mergedProps);
3562
3613
  };
3563
3614
 
3564
3615
  const TreeViewBranchText = props => {
3565
- const [branchProps, localProps] = createSplitProps()(props, ['depth', 'id', 'disabled']);
3566
3616
  const api = useTreeViewContext();
3567
- const mergedProps = mergeProps$1(() => api().getBranchTextProps(branchProps), localProps);
3617
+ const branchProps = useTreeViewBranchContext();
3618
+ const mergedProps = mergeProps$1(() => api().getBranchTextProps(branchProps), props);
3568
3619
  return createComponent(ark.span, mergedProps);
3569
3620
  };
3570
3621
 
3571
3622
  const TreeViewBranchTrigger = props => {
3572
- const [branchProps, localProps] = createSplitProps()(props, ['depth', 'id', 'disabled']);
3573
3623
  const api = useTreeViewContext();
3574
- const mergedProps = mergeProps$1(() => api().getBranchTriggerProps(branchProps), localProps);
3575
- return createComponent(ark.button, mergedProps);
3624
+ const branchProps = useTreeViewBranchContext();
3625
+ const mergedProps = mergeProps$1(() => api().getBranchTriggerProps(branchProps), props);
3626
+ return createComponent(ark.div, mergedProps);
3576
3627
  };
3577
3628
 
3629
+ const [TreeViewItemProvider, useTreeViewItemContext] = createContext({
3630
+ hookName: 'useTreeViewItemContext',
3631
+ providerName: '<TreeViewItemProvider />'
3632
+ });
3633
+
3578
3634
  const TreeViewItem = props => {
3579
- const [itemProps, localProps] = createSplitProps()(props, ['depth', 'id', 'disabled']);
3635
+ const [_itemProps, localProps] = createSplitProps()(props, ['id', 'disabled']);
3580
3636
  const api = useTreeViewContext();
3637
+ const depth = useTreeViewDepthContext();
3638
+ const itemProps = mergeProps$1(_itemProps, {
3639
+ depth
3640
+ });
3581
3641
  const mergedProps = mergeProps$1(() => api().getItemProps(itemProps), localProps);
3582
3642
  const getChildren = () => runIfFn(localProps.children, () => api().getItemState(itemProps));
3583
- return createComponent(ark.li, mergeProps(mergedProps, {
3643
+ return createComponent(TreeViewItemProvider, {
3644
+ value: itemProps,
3584
3645
  get children() {
3585
- return getChildren();
3646
+ return createComponent(ark.li, mergeProps(mergedProps, {
3647
+ get children() {
3648
+ return getChildren();
3649
+ }
3650
+ }));
3586
3651
  }
3587
- }));
3652
+ });
3653
+ };
3654
+
3655
+ const TreeViewItemIndicator = props => {
3656
+ const api = useTreeViewContext();
3657
+ const itemProps = useTreeViewItemContext();
3658
+ const mergedProps = mergeProps$1(() => api().getItemIndicatorProps(itemProps), props);
3659
+ return createComponent(ark.div, mergedProps);
3588
3660
  };
3589
3661
 
3590
3662
  const TreeViewItemText = props => {
3591
- const [itemProps, localProps] = createSplitProps()(props, ['depth', 'id', 'disabled']);
3592
3663
  const api = useTreeViewContext();
3593
- const mergedProps = mergeProps$1(() => api().getItemProps(itemProps), treeViewAnatomy.build().itemText.attrs, localProps);
3664
+ const itemProps = useTreeViewItemContext();
3665
+ const mergedProps = mergeProps$1(() => api().getItemTextProps(itemProps), props);
3594
3666
  return createComponent(ark.span, mergedProps);
3595
3667
  };
3596
3668
 
@@ -3632,7 +3704,12 @@ const TreeViewRoot = props => {
3632
3704
  const TreeViewTree = props => {
3633
3705
  const api = useTreeViewContext();
3634
3706
  const mergedProps = mergeProps$1(() => api().treeProps, props);
3635
- return createComponent(ark.ul, mergedProps);
3707
+ return createComponent(TreeViewDepthProvider, {
3708
+ value: 1,
3709
+ get children() {
3710
+ return createComponent(ark.ul, mergedProps);
3711
+ }
3712
+ });
3636
3713
  };
3637
3714
 
3638
3715
  var treeView = /*#__PURE__*/Object.freeze({
@@ -3644,11 +3721,12 @@ var treeView = /*#__PURE__*/Object.freeze({
3644
3721
  BranchText: TreeViewBranchText,
3645
3722
  BranchTrigger: TreeViewBranchTrigger,
3646
3723
  Item: TreeViewItem,
3724
+ ItemIndicator: TreeViewItemIndicator,
3647
3725
  ItemText: TreeViewItemText,
3648
3726
  Label: TreeViewLabel,
3649
3727
  Root: TreeViewRoot,
3650
3728
  Tree: TreeViewTree
3651
3729
  });
3652
3730
 
3653
- export { accordion as Accordion, AccordionItem, AccordionItemContent, AccordionItemIndicator, AccordionItemTrigger, AccordionRoot, avatar as Avatar, AvatarFallback, AvatarImage, AvatarRoot, carousel as Carousel, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselRoot, CarouselViewport, checkbox as Checkbox, CheckboxControl, CheckboxIndicator, CheckboxLabel, CheckboxRoot, colorPicker as ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerFormatSelect, ColorPickerFormatTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerRoot, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchIndicator, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueText, ColorPickerView, combobox as Combobox, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxItemGroup, ComboboxItemGroupLabel, ComboboxItemIndicator, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxRoot, ComboboxTrigger, datePicker as DatePicker, DatePickerClearTrigger, DatePickerContent, DatePickerControl, DatePickerInput, DatePickerLabel, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPrevTrigger, DatePickerRangeText, DatePickerRoot, DatePickerTable, DatePickerTableBody, DatePickerTableCell, DatePickerTableCellTrigger, DatePickerTableHead, DatePickerTableHeader, DatePickerTableRow, DatePickerTrigger, DatePickerView, DatePickerViewControl, DatePickerViewTrigger, DatePickerYearSelect, dialog as Dialog, DialogBackdrop, DialogCloseTrigger, DialogContent, DialogDescription, DialogPositioner, DialogRoot, DialogTitle, DialogTrigger, editable as Editable, EditableArea, EditableCancelTrigger, EditableControl, EditableEditTrigger, EditableInput, EditableLabel, EditablePreview, EditableRoot, EditableSubmitTrigger, Environment, fileUpload as FileUpload, FileUploadDropzone, FileUploadItem, FileUploadItemDeleteTrigger, FileUploadItemGroup, FileUploadItemName, FileUploadItemPreview, FileUploadItemPreviewImage, FileUploadItemSizeText, FileUploadLabel, FileUploadRoot, FileUploadTrigger, hoverCard as HoverCard, HoverCardArrow, HoverCardArrowTip, HoverCardContent, HoverCardPositioner, HoverCardRoot, HoverCardTrigger, menu as Menu, MenuArrow, MenuArrowTip, MenuContent, MenuContextTrigger, MenuItem, MenuItemGroup, MenuItemGroupLabel, MenuOptionItem, MenuPositioner, MenuRoot, MenuSeparator, MenuTrigger, MenuTriggerItem, numberInput as NumberInput, NumberInputControl, NumberInputDecrementTrigger, NumberInputIncrementTrigger, NumberInputInput, NumberInputLabel, NumberInputRoot, NumberInputScrubber, pagination as Pagination, PaginationEllipsis, PaginationItem, PaginationNextTrigger, PaginationPrevTrigger, PaginationRoot, pinInput as PinInput, PinInputControl, PinInputInput, PinInputLabel, PinInputRoot, popover as Popover, PopoverAnchor, PopoverArrow, PopoverArrowTip, PopoverCloseTrigger, PopoverContent, PopoverDescription, PopoverIndicator, PopoverPositioner, PopoverRoot, PopoverTitle, PopoverTrigger, Presence, PresencePropsProvider, PresenceProvider, progress as Progress, ProgressCircle, ProgressCircleRange, ProgressCircleTrack, ProgressLabel, ProgressRange, ProgressRoot, ProgressTrack, ProgressValueText, ProgressView, radioGroup as RadioGroup, RadioGroupIndicator, RadioGroupItem, RadioGroupItemControl, RadioGroupItemText, RadioGroupLabel, RadioGroupRoot, ratingGroup as RatingGroup, RatingGroupControl, RatingGroupItem, RatingGroupLabel, RatingGroupRoot, segmentGroup as SegmentGroup, SegmentGroupIndicator, SegmentGroupItem, SegmentGroupItemControl, SegmentGroupItemText, SegmentGroupLabel, SegmentGroupRoot, select as Select, SelectClearTrigger, SelectContent, SelectControl, SelectIndicator, SelectItem, SelectItemGroup, SelectItemGroupLabel, SelectItemIndicator, SelectItemText, SelectLabel, SelectPositioner, SelectRoot, SelectTrigger, SelectValueText, slider as Slider, SliderControl, SliderLabel, SliderMarker, SliderMarkerGroup, SliderRange, SliderRoot, SliderThumb, SliderTrack, SliderValueText, splitter as Splitter, SplitterPanel, SplitterResizeTrigger, SplitterRoot, _switch as Switch, SwitchControl, SwitchLabel, SwitchRoot, SwitchThumb, TabContent, TabIndicator, TabList, TabTrigger, tabs as Tabs, TabsRoot, tagsInput as TagsInput, TagsInputClearTrigger, TagsInputControl, TagsInputInput, TagsInputItem, TagsInputItemDeleteTrigger, TagsInputItemInput, TagsInputItemPreview, TagsInputItemText, TagsInputLabel, TagsInputRoot, toast as Toast, ToastCloseTrigger, ToastDescription, ToastGroup, ToastRoot, ToastTitle, toggleGroup as ToggleGroup, ToggleGroupItem, ToggleGroupRoot, tooltip as Tooltip, TooltipArrow, TooltipArrowTip, TooltipContent, TooltipPositioner, TooltipRoot, TooltipTrigger, treeView as TreeView, TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchIndicator, TreeViewBranchText, TreeViewBranchTrigger, TreeViewItem, TreeViewItemText, TreeViewLabel, TreeViewRoot, TreeViewTree, ark, createToaster, splitPresenceProps, useAccordionContext, useAccordionItemContext, useAvatarContext, useCarouselContext, useCheckboxContext, useColorPickerAreaContext, useColorPickerChannelSliderContext, useColorPickerContext, useComboboxContext, useDatePickerContext, useDatePickerTableCellContext, useDatePickerTableContext, useDatePickerViewContext, useDialogContext, useEditableContext, useEnvironmentContext, useFileUploadContext, useHoverCardContext, useMenuContext, useNumberInputContext, usePaginationContext, usePinInputContext, usePopoverContext, usePresence, usePresenceContext, usePresencePropsContext, useProgressContext, useRadioGroupContext, useRadioGroupItemContext, useRatingGroupContext, useRatingGroupItemContext, useSegmentGroupContext, useSegmentGroupItemContext, useSelectContext, useSelectItemContext, useSliderContext, useSplitterContext, useSwitchContext, useTabsContext, useTagsInputContext, useTagsInputItemContext, useToggleGroupContext, useTooltipContext, useTreeViewContext, withAsProp };
3731
+ export { accordion as Accordion, AccordionItem, AccordionItemContent, AccordionItemIndicator, AccordionItemTrigger, AccordionRoot, avatar as Avatar, AvatarFallback, AvatarImage, AvatarRoot, carousel as Carousel, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselRoot, CarouselViewport, checkbox as Checkbox, CheckboxControl, CheckboxIndicator, CheckboxLabel, CheckboxRoot, colorPicker as ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerFormatSelect, ColorPickerFormatTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerRoot, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchIndicator, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueText, ColorPickerView, combobox as Combobox, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxItemGroup, ComboboxItemGroupLabel, ComboboxItemIndicator, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxRoot, ComboboxTrigger, datePicker as DatePicker, DatePickerClearTrigger, DatePickerContent, DatePickerControl, DatePickerInput, DatePickerLabel, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPresetTrigger, DatePickerPrevTrigger, DatePickerRangeText, DatePickerRoot, DatePickerTable, DatePickerTableBody, DatePickerTableCell, DatePickerTableCellTrigger, DatePickerTableHead, DatePickerTableHeader, DatePickerTableRow, DatePickerTrigger, DatePickerView, DatePickerViewControl, DatePickerViewTrigger, DatePickerYearSelect, dialog as Dialog, DialogBackdrop, DialogCloseTrigger, DialogContent, DialogDescription, DialogPositioner, DialogRoot, DialogTitle, DialogTrigger, editable as Editable, EditableArea, EditableCancelTrigger, EditableControl, EditableEditTrigger, EditableInput, EditableLabel, EditablePreview, EditableRoot, EditableSubmitTrigger, Environment, fileUpload as FileUpload, FileUploadDropzone, FileUploadItem, FileUploadItemDeleteTrigger, FileUploadItemGroup, FileUploadItemName, FileUploadItemPreview, FileUploadItemPreviewImage, FileUploadItemSizeText, FileUploadLabel, FileUploadRoot, FileUploadTrigger, hoverCard as HoverCard, HoverCardArrow, HoverCardArrowTip, HoverCardContent, HoverCardPositioner, HoverCardRoot, HoverCardTrigger, menu as Menu, MenuArrow, MenuArrowTip, MenuContent, MenuContextTrigger, MenuItem, MenuItemGroup, MenuItemGroupLabel, MenuOptionItem, MenuPositioner, MenuRoot, MenuSeparator, MenuTrigger, MenuTriggerItem, numberInput as NumberInput, NumberInputControl, NumberInputDecrementTrigger, NumberInputIncrementTrigger, NumberInputInput, NumberInputLabel, NumberInputRoot, NumberInputScrubber, pagination as Pagination, PaginationEllipsis, PaginationItem, PaginationNextTrigger, PaginationPrevTrigger, PaginationRoot, pinInput as PinInput, PinInputControl, PinInputInput, PinInputLabel, PinInputRoot, popover as Popover, PopoverAnchor, PopoverArrow, PopoverArrowTip, PopoverCloseTrigger, PopoverContent, PopoverDescription, PopoverIndicator, PopoverPositioner, PopoverRoot, PopoverTitle, PopoverTrigger, Presence, PresencePropsProvider, PresenceProvider, progress as Progress, ProgressCircle, ProgressCircleRange, ProgressCircleTrack, ProgressLabel, ProgressRange, ProgressRoot, ProgressTrack, ProgressValueText, ProgressView, radioGroup as RadioGroup, RadioGroupIndicator, RadioGroupItem, RadioGroupItemControl, RadioGroupItemText, RadioGroupLabel, RadioGroupRoot, ratingGroup as RatingGroup, RatingGroupControl, RatingGroupItem, RatingGroupLabel, RatingGroupRoot, segmentGroup as SegmentGroup, SegmentGroupIndicator, SegmentGroupItem, SegmentGroupItemControl, SegmentGroupItemText, SegmentGroupLabel, SegmentGroupRoot, select as Select, SelectClearTrigger, SelectContent, SelectControl, SelectIndicator, SelectItem, SelectItemGroup, SelectItemGroupLabel, SelectItemIndicator, SelectItemText, SelectLabel, SelectPositioner, SelectRoot, SelectTrigger, SelectValueText, slider as Slider, SliderControl, SliderLabel, SliderMarker, SliderMarkerGroup, SliderRange, SliderRoot, SliderThumb, SliderTrack, SliderValueText, splitter as Splitter, SplitterPanel, SplitterResizeTrigger, SplitterRoot, _switch as Switch, SwitchControl, SwitchLabel, SwitchRoot, SwitchThumb, TabContent, TabIndicator, TabList, TabTrigger, tabs as Tabs, TabsRoot, tagsInput as TagsInput, TagsInputClearTrigger, TagsInputControl, TagsInputInput, TagsInputItem, TagsInputItemDeleteTrigger, TagsInputItemInput, TagsInputItemPreview, TagsInputItemText, TagsInputLabel, TagsInputRoot, toast as Toast, ToastCloseTrigger, ToastDescription, ToastGroup, ToastRoot, ToastTitle, toggleGroup as ToggleGroup, ToggleGroupItem, ToggleGroupRoot, tooltip as Tooltip, TooltipArrow, TooltipArrowTip, TooltipContent, TooltipPositioner, TooltipRoot, TooltipTrigger, treeView as TreeView, TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchIndicator, TreeViewBranchText, TreeViewBranchTrigger, TreeViewItem, TreeViewItemIndicator, TreeViewItemText, TreeViewLabel, TreeViewRoot, TreeViewTree, ark, createToaster, splitPresenceProps, useAccordionContext, useAccordionItemContext, useAvatarContext, useCarouselContext, useCheckboxContext, useColorPickerAreaContext, useColorPickerChannelSliderContext, useColorPickerContext, useComboboxContext, useDatePickerContext, useDatePickerTableCellContext, useDatePickerTableContext, useDatePickerViewContext, useDialogContext, useEditableContext, useEnvironmentContext, useFileUploadContext, useHoverCardContext, useMenuContext, useNumberInputContext, usePaginationContext, usePinInputContext, usePopoverContext, usePresence, usePresenceContext, usePresencePropsContext, useProgressContext, useRadioGroupContext, useRadioGroupItemContext, useRatingGroupContext, useRatingGroupItemContext, useSegmentGroupContext, useSegmentGroupItemContext, useSelectContext, useSelectItemContext, useSliderContext, useSplitterContext, useSwitchContext, useTabsContext, useTagsInputContext, useTagsInputItemContext, useToggleGroupContext, useTooltipContext, useTreeViewContext, withAsProp };
3654
3732
  //# sourceMappingURL=index.js.map