@ark-ui/solid 3.4.1 → 3.5.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 (164) hide show
  1. package/dist/cjs/index.js +169 -26
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/esm/index.js +77 -23
  4. package/dist/esm/index.js.map +1 -1
  5. package/dist/source/components/accordion/accordion.anatomy.js +1 -0
  6. package/dist/source/components/accordion/index.js +1 -0
  7. package/dist/source/components/avatar/avatar.anatomy.js +1 -0
  8. package/dist/source/components/avatar/index.js +1 -0
  9. package/dist/source/components/carousel/carousel-control.jsx +1 -1
  10. package/dist/source/components/carousel/carousel.anatomy.js +2 -0
  11. package/dist/source/components/carousel/index.js +1 -0
  12. package/dist/source/components/checkbox/checkbox-group.jsx +1 -1
  13. package/dist/source/components/checkbox/checkbox.anatomy.js +2 -0
  14. package/dist/source/components/checkbox/index.js +1 -0
  15. package/dist/source/components/clipboard/clipboard.anatomy.js +1 -0
  16. package/dist/source/components/clipboard/index.js +1 -0
  17. package/dist/source/components/collapsible/collapsible.anatomy.js +1 -0
  18. package/dist/source/components/collapsible/index.js +1 -0
  19. package/dist/source/components/color-picker/color-picker-value-text.jsx +3 -4
  20. package/dist/source/components/color-picker/color-picker-view.jsx +1 -1
  21. package/dist/source/components/color-picker/color-picker.anatomy.js +2 -0
  22. package/dist/source/components/color-picker/index.js +1 -0
  23. package/dist/source/components/combobox/combobox.anatomy.js +1 -0
  24. package/dist/source/components/combobox/index.js +1 -0
  25. package/dist/source/components/date-picker/date-picker-view.jsx +1 -1
  26. package/dist/source/components/date-picker/date-picker.anatomy.js +2 -0
  27. package/dist/source/components/date-picker/index.js +1 -0
  28. package/dist/source/components/dialog/dialog.anatomy.js +1 -0
  29. package/dist/source/components/dialog/index.js +1 -0
  30. package/dist/source/components/editable/editable.anatomy.js +1 -0
  31. package/dist/source/components/editable/index.js +1 -0
  32. package/dist/source/components/field/field.anatomy.js +3 -0
  33. package/dist/source/components/field/index.js +1 -0
  34. package/dist/source/components/field/use-field.js +1 -2
  35. package/dist/source/components/file-upload/file-upload.anatomy.js +1 -0
  36. package/dist/source/components/file-upload/index.js +1 -0
  37. package/dist/source/components/hover-card/hover-card.anatomy.js +1 -0
  38. package/dist/source/components/hover-card/index.js +1 -0
  39. package/dist/source/components/menu/index.js +1 -0
  40. package/dist/source/components/menu/menu.anatomy.js +1 -0
  41. package/dist/source/components/number-input/index.js +2 -0
  42. package/dist/source/components/number-input/number-input-value-text.jsx +8 -0
  43. package/dist/source/components/number-input/number-input.anatomy.js +1 -0
  44. package/dist/source/components/number-input/number-input.js +1 -0
  45. package/dist/source/components/pagination/index.js +1 -0
  46. package/dist/source/components/pagination/pagination.anatomy.js +1 -0
  47. package/dist/source/components/pin-input/index.js +1 -0
  48. package/dist/source/components/pin-input/pin-input.anatomy.js +1 -0
  49. package/dist/source/components/popover/index.js +1 -0
  50. package/dist/source/components/popover/popover.anatomy.js +1 -0
  51. package/dist/source/components/progress/index.js +1 -0
  52. package/dist/source/components/progress/progress.anatomy.js +1 -0
  53. package/dist/source/components/qr-code/index.js +1 -0
  54. package/dist/source/components/qr-code/qr-code.anatomy.js +1 -0
  55. package/dist/source/components/radio-group/index.js +1 -0
  56. package/dist/source/components/radio-group/radio-group.anatomy.js +1 -0
  57. package/dist/source/components/rating-group/index.js +1 -0
  58. package/dist/source/components/rating-group/rating-group.anatomy.js +1 -0
  59. package/dist/source/components/segment-group/index.js +1 -0
  60. package/dist/source/components/segment-group/segment-group-indicator.jsx +2 -2
  61. package/dist/source/components/segment-group/segment-group-item-control.jsx +2 -2
  62. package/dist/source/components/segment-group/segment-group-item-text.jsx +2 -2
  63. package/dist/source/components/segment-group/segment-group-item.jsx +2 -2
  64. package/dist/source/components/segment-group/segment-group-label.jsx +2 -2
  65. package/dist/source/components/segment-group/segment-group-root-provider.jsx +2 -2
  66. package/dist/source/components/segment-group/segment-group-root.jsx +2 -2
  67. package/dist/source/components/segment-group/segment-group.anatomy.js +3 -0
  68. package/dist/source/components/select/index.js +1 -0
  69. package/dist/source/components/select/select-hidden-select.jsx +1 -1
  70. package/dist/source/components/select/select-value-text.jsx +1 -2
  71. package/dist/source/components/select/select.anatomy.js +1 -0
  72. package/dist/source/components/signature-pad/index.js +1 -0
  73. package/dist/source/components/signature-pad/signature-pad.anatomy.js +1 -0
  74. package/dist/source/components/slider/index.js +1 -0
  75. package/dist/source/components/slider/slider.anatomy.js +1 -0
  76. package/dist/source/components/splitter/index.js +1 -0
  77. package/dist/source/components/splitter/splitter.anatomy.js +1 -0
  78. package/dist/source/components/switch/index.js +1 -0
  79. package/dist/source/components/switch/switch.anatomy.js +1 -0
  80. package/dist/source/components/tabs/index.js +1 -0
  81. package/dist/source/components/tabs/tabs.anatomy.js +1 -0
  82. package/dist/source/components/tags-input/index.js +1 -0
  83. package/dist/source/components/tags-input/tags-input.anatomy.js +1 -0
  84. package/dist/source/components/toast/index.js +1 -0
  85. package/dist/source/components/toast/toast.anatomy.js +1 -0
  86. package/dist/source/components/toggle-group/index.js +1 -0
  87. package/dist/source/components/toggle-group/toggle-group.anatomy.js +1 -0
  88. package/dist/source/components/tooltip/index.js +1 -0
  89. package/dist/source/components/tooltip/tooltip.anatomy.js +1 -0
  90. package/dist/source/components/tree-view/index.js +1 -0
  91. package/dist/source/components/tree-view/tree-view.anatomy.js +1 -0
  92. package/dist/types/components/accordion/accordion.anatomy.d.ts +1 -0
  93. package/dist/types/components/accordion/index.d.ts +7 -6
  94. package/dist/types/components/avatar/avatar.anatomy.d.ts +1 -0
  95. package/dist/types/components/avatar/index.d.ts +1 -0
  96. package/dist/types/components/carousel/carousel.anatomy.d.ts +1 -0
  97. package/dist/types/components/carousel/index.d.ts +1 -0
  98. package/dist/types/components/checkbox/checkbox.anatomy.d.ts +1 -0
  99. package/dist/types/components/checkbox/index.d.ts +1 -0
  100. package/dist/types/components/clipboard/clipboard.anatomy.d.ts +1 -0
  101. package/dist/types/components/clipboard/index.d.ts +1 -0
  102. package/dist/types/components/collapsible/collapsible.anatomy.d.ts +1 -0
  103. package/dist/types/components/collapsible/index.d.ts +1 -0
  104. package/dist/types/components/color-picker/color-picker.anatomy.d.ts +1 -0
  105. package/dist/types/components/color-picker/index.d.ts +1 -0
  106. package/dist/types/components/combobox/combobox.anatomy.d.ts +1 -0
  107. package/dist/types/components/combobox/index.d.ts +1 -0
  108. package/dist/types/components/date-picker/date-picker.anatomy.d.ts +1 -0
  109. package/dist/types/components/date-picker/index.d.ts +1 -0
  110. package/dist/types/components/dialog/dialog.anatomy.d.ts +1 -0
  111. package/dist/types/components/dialog/index.d.ts +1 -0
  112. package/dist/types/components/editable/editable.anatomy.d.ts +1 -0
  113. package/dist/types/components/editable/index.d.ts +1 -0
  114. package/dist/types/components/field/field.anatomy.d.ts +2 -0
  115. package/dist/types/components/field/index.d.ts +1 -0
  116. package/dist/types/components/file-upload/file-upload.anatomy.d.ts +1 -0
  117. package/dist/types/components/file-upload/index.d.ts +1 -0
  118. package/dist/types/components/hover-card/hover-card.anatomy.d.ts +1 -0
  119. package/dist/types/components/hover-card/index.d.ts +1 -0
  120. package/dist/types/components/menu/index.d.ts +1 -0
  121. package/dist/types/components/menu/menu.anatomy.d.ts +1 -0
  122. package/dist/types/components/number-input/index.d.ts +10 -8
  123. package/dist/types/components/number-input/number-input-value-text.d.ts +6 -0
  124. package/dist/types/components/number-input/number-input.anatomy.d.ts +1 -0
  125. package/dist/types/components/number-input/number-input.d.ts +9 -8
  126. package/dist/types/components/pagination/index.d.ts +1 -0
  127. package/dist/types/components/pagination/pagination.anatomy.d.ts +1 -0
  128. package/dist/types/components/pin-input/index.d.ts +1 -0
  129. package/dist/types/components/pin-input/pin-input.anatomy.d.ts +1 -0
  130. package/dist/types/components/popover/index.d.ts +1 -0
  131. package/dist/types/components/popover/popover.anatomy.d.ts +1 -0
  132. package/dist/types/components/progress/index.d.ts +1 -0
  133. package/dist/types/components/progress/progress.anatomy.d.ts +1 -0
  134. package/dist/types/components/qr-code/index.d.ts +1 -0
  135. package/dist/types/components/qr-code/qr-code.anatomy.d.ts +1 -0
  136. package/dist/types/components/radio-group/index.d.ts +1 -0
  137. package/dist/types/components/radio-group/radio-group.anatomy.d.ts +1 -0
  138. package/dist/types/components/rating-group/index.d.ts +1 -0
  139. package/dist/types/components/rating-group/rating-group.anatomy.d.ts +1 -0
  140. package/dist/types/components/segment-group/index.d.ts +1 -0
  141. package/dist/types/components/segment-group/segment-group.anatomy.d.ts +2 -0
  142. package/dist/types/components/select/index.d.ts +1 -0
  143. package/dist/types/components/select/select.anatomy.d.ts +1 -0
  144. package/dist/types/components/signature-pad/index.d.ts +1 -0
  145. package/dist/types/components/signature-pad/signature-pad.anatomy.d.ts +1 -0
  146. package/dist/types/components/slider/index.d.ts +1 -0
  147. package/dist/types/components/slider/slider.anatomy.d.ts +1 -0
  148. package/dist/types/components/splitter/index.d.ts +1 -0
  149. package/dist/types/components/splitter/splitter.anatomy.d.ts +1 -0
  150. package/dist/types/components/switch/index.d.ts +1 -0
  151. package/dist/types/components/switch/switch.anatomy.d.ts +1 -0
  152. package/dist/types/components/tabs/index.d.ts +1 -0
  153. package/dist/types/components/tabs/tabs.anatomy.d.ts +1 -0
  154. package/dist/types/components/tags-input/index.d.ts +1 -0
  155. package/dist/types/components/tags-input/tags-input.anatomy.d.ts +1 -0
  156. package/dist/types/components/toast/index.d.ts +1 -0
  157. package/dist/types/components/toast/toast.anatomy.d.ts +1 -0
  158. package/dist/types/components/toggle-group/index.d.ts +1 -0
  159. package/dist/types/components/toggle-group/toggle-group.anatomy.d.ts +1 -0
  160. package/dist/types/components/tooltip/index.d.ts +1 -0
  161. package/dist/types/components/tooltip/tooltip.anatomy.d.ts +1 -0
  162. package/dist/types/components/tree-view/index.d.ts +1 -0
  163. package/dist/types/components/tree-view/tree-view.anatomy.d.ts +1 -0
  164. package/package.json +41 -41
@@ -0,0 +1 @@
1
+ export { anatomy as accordionAnatomy } from '@zag-js/accordion';
@@ -9,4 +9,5 @@ export { AccordionRootProvider, } from './accordion-root-provider';
9
9
  export { useAccordion } from './use-accordion';
10
10
  export { useAccordionContext } from './use-accordion-context';
11
11
  export { useAccordionItemContext } from './use-accordion-item-context';
12
+ export { accordionAnatomy } from './accordion.anatomy';
12
13
  export * as Accordion from './accordion';
@@ -0,0 +1 @@
1
+ export { anatomy as avatarAnatomy } from '@zag-js/avatar';
@@ -5,4 +5,5 @@ export { AvatarRoot, } from './avatar-root';
5
5
  export { AvatarRootProvider, } from './avatar-root-provider';
6
6
  export { useAvatar } from './use-avatar';
7
7
  export { useAvatarContext } from './use-avatar-context';
8
+ export { avatarAnatomy } from './avatar.anatomy';
8
9
  export * as Avatar from './avatar';
@@ -1,6 +1,6 @@
1
- import { carouselAnatomy } from '@ark-ui/anatomy';
2
1
  import { mergeProps } from '@zag-js/solid';
3
2
  import { ark } from '../factory';
3
+ import { carouselAnatomy } from './carousel.anatomy';
4
4
  export const CarouselControl = (props) => {
5
5
  const mergedProps = mergeProps(() => carouselAnatomy.build().control.attrs, props);
6
6
  return <ark.div {...mergedProps}/>;
@@ -0,0 +1,2 @@
1
+ import { anatomy } from '@zag-js/carousel';
2
+ export const carouselAnatomy = anatomy.extendWith('control');
@@ -11,4 +11,5 @@ export { CarouselRootProvider, } from './carousel-root-provider';
11
11
  export { CarouselViewport, } from './carousel-viewport';
12
12
  export { useCarousel } from './use-carousel';
13
13
  export { useCarouselContext } from './use-carousel-context';
14
+ export { carouselAnatomy } from './carousel.anatomy';
14
15
  export * as Carousel from './carousel';
@@ -1,6 +1,6 @@
1
- import { checkboxAnatomy } from '@ark-ui/anatomy';
2
1
  import { createSplitProps } from '../../utils/create-split-props';
3
2
  import { ark } from '../factory';
3
+ import { checkboxAnatomy } from './checkbox.anatomy';
4
4
  import { useCheckboxGroup } from './use-checkbox-group';
5
5
  import { CheckboxGroupContextProvider } from './use-checkbox-group-context';
6
6
  export const CheckboxGroup = (props) => {
@@ -0,0 +1,2 @@
1
+ import { anatomy } from '@zag-js/checkbox';
2
+ export const checkboxAnatomy = anatomy.extendWith('group');
@@ -10,4 +10,5 @@ export { useCheckbox } from './use-checkbox';
10
10
  export { useCheckboxContext } from './use-checkbox-context';
11
11
  export { useCheckboxGroup, } from './use-checkbox-group';
12
12
  export { useCheckboxGroupContext } from './use-checkbox-group-context';
13
+ export { checkboxAnatomy } from './checkbox.anatomy';
13
14
  export * as Checkbox from './checkbox';
@@ -0,0 +1 @@
1
+ export { anatomy as clipboardAnatomy } from '@zag-js/clipboard';
@@ -8,4 +8,5 @@ export { ClipboardRootProvider, } from './clipboard-root-provider';
8
8
  export { ClipboardTrigger, } from './clipboard-trigger';
9
9
  export { useClipboard } from './use-clipboard';
10
10
  export { useClipboardContext } from './use-clipboard-context';
11
+ export { clipboardAnatomy } from './clipboard.anatomy';
11
12
  export * as Clipboard from './clipboard';
@@ -0,0 +1 @@
1
+ export { anatomy as collapsibleAnatomy } from '@zag-js/collapsible';
@@ -5,4 +5,5 @@ export { CollapsibleRootProvider, } from './collapsible-root-provider';
5
5
  export { CollapsibleTrigger, } from './collapsible-trigger';
6
6
  export { useCollapsible, } from './use-collapsible';
7
7
  export { useCollapsibleContext } from './use-collapsible-context';
8
+ export { collapsibleAnatomy } from './collapsible.anatomy';
8
9
  export * as Collapsible from './collapsible';
@@ -1,9 +1,8 @@
1
- import { colorPickerAnatomy } from '@ark-ui/anatomy';
2
1
  import { mergeProps } from '@zag-js/solid';
3
2
  import { ark } from '../factory';
4
3
  import { useColorPickerContext } from './use-color-picker-context';
5
4
  export const ColorPickerValueText = (props) => {
6
- const api = useColorPickerContext();
7
- const mergedProps = mergeProps(() => colorPickerAnatomy.build().valueText.attrs, props);
8
- return <ark.span {...mergedProps}>{api().valueAsString || props.children}</ark.span>;
5
+ const colorPicker = useColorPickerContext();
6
+ const mergedProps = mergeProps(() => colorPicker().getValueTextProps(), props);
7
+ return <ark.span {...mergedProps}>{colorPicker().valueAsString || props.children}</ark.span>;
9
8
  };
@@ -1,8 +1,8 @@
1
- import { colorPickerAnatomy } from '@ark-ui/anatomy';
2
1
  import { mergeProps } from '@zag-js/solid';
3
2
  import { Show } from 'solid-js';
4
3
  import { createSplitProps } from '../../utils/create-split-props';
5
4
  import { ark } from '../factory';
5
+ import { colorPickerAnatomy } from './color-picker.anatomy';
6
6
  import { useColorPickerContext } from './use-color-picker-context';
7
7
  import { ColorPickerFormatPropsProvider } from './use-color-picker-format-context';
8
8
  export const ColorPickerView = (props) => {
@@ -0,0 +1,2 @@
1
+ import { anatomy } from '@zag-js/color-picker';
2
+ export const colorPickerAnatomy = anatomy.extendWith('view');
@@ -29,4 +29,5 @@ export { ColorPickerValueText, } from './color-picker-value-text';
29
29
  export { ColorPickerView, } from './color-picker-view';
30
30
  export { useColorPicker, } from './use-color-picker';
31
31
  export { useColorPickerContext } from './use-color-picker-context';
32
+ export { colorPickerAnatomy } from './color-picker.anatomy';
32
33
  export * as ColorPicker from './color-picker';
@@ -0,0 +1 @@
1
+ export { anatomy as comboboxAnatomy } from '@zag-js/combobox';
@@ -18,4 +18,5 @@ export { ComboboxTrigger, } from './combobox-trigger';
18
18
  export { useCombobox } from './use-combobox';
19
19
  export { useComboboxContext } from './use-combobox-context';
20
20
  export { useComboboxItemContext } from './use-combobox-item-context';
21
+ export { comboboxAnatomy } from './combobox.anatomy';
21
22
  export * as Combobox from './combobox';
@@ -1,7 +1,7 @@
1
- import { datePickerAnatomy } from '@ark-ui/anatomy';
2
1
  import { mergeProps } from '@zag-js/solid';
3
2
  import { createSplitProps } from '../../utils/create-split-props';
4
3
  import { ark } from '../factory';
4
+ import { datePickerAnatomy } from './date-picker.anatomy';
5
5
  import { useDatePickerContext } from './use-date-picker-context';
6
6
  import { DatePickerViewProvider } from './use-date-picker-view-props-context';
7
7
  export const DatePickerView = (props) => {
@@ -0,0 +1,2 @@
1
+ import { anatomy } from '@zag-js/date-picker';
2
+ export const datePickerAnatomy = anatomy.extendWith('view');
@@ -26,4 +26,5 @@ export { DatePickerViewTrigger, } from './date-picker-view-trigger';
26
26
  export { DatePickerYearSelect, } from './date-picker-year-select';
27
27
  export { useDatePicker } from './use-date-picker';
28
28
  export { useDatePickerContext } from './use-date-picker-context';
29
+ export { datePickerAnatomy } from './date-picker.anatomy';
29
30
  export * as DatePicker from './date-picker';
@@ -0,0 +1 @@
1
+ export { anatomy as dialogAnatomy } from '@zag-js/dialog';
@@ -10,4 +10,5 @@ export { DialogTitle, } from './dialog-title';
10
10
  export { DialogTrigger, } from './dialog-trigger';
11
11
  export { useDialog } from './use-dialog';
12
12
  export { useDialogContext } from './use-dialog-context';
13
+ export { dialogAnatomy } from './dialog.anatomy';
13
14
  export * as Dialog from './dialog';
@@ -0,0 +1 @@
1
+ export { anatomy as editableAnatomy } from '@zag-js/editable';
@@ -11,4 +11,5 @@ export { EditableRootProvider, } from './editable-root-provider';
11
11
  export { EditableSubmitTrigger, } from './editable-submit-trigger';
12
12
  export { useEditable } from './use-editable';
13
13
  export { useEditableContext } from './use-editable-context';
14
+ export { editableAnatomy } from './editable.anatomy';
14
15
  export * as Editable from './editable';
@@ -0,0 +1,3 @@
1
+ import { createAnatomy } from '@zag-js/anatomy';
2
+ export const fieldAnatomy = createAnatomy('field').parts('root', 'errorText', 'helperText', 'input', 'label', 'select', 'textarea');
3
+ export const parts = fieldAnatomy.build();
@@ -8,4 +8,5 @@ export { FieldRoot } from './field-root';
8
8
  export { FieldRootProvider, } from './field-root-provider';
9
9
  export { FieldTextarea, } from './field-textarea';
10
10
  export { useFieldContext } from './use-field-context';
11
+ export { fieldAnatomy } from './field.anatomy';
11
12
  export * as Field from './field';
@@ -1,7 +1,6 @@
1
- import { fieldAnatomy } from '@ark-ui/anatomy';
2
1
  import { getWindow } from '@zag-js/dom-query';
3
2
  import { createEffect, createMemo, createSignal, onCleanup } from 'solid-js';
4
- const parts = fieldAnatomy.build();
3
+ import { parts } from './field.anatomy';
5
4
  export const useField = (props) => {
6
5
  const { required = false, disabled = false, invalid = false, readOnly = false } = props;
7
6
  const [hasErrorText, setHasErrorText] = createSignal(false);
@@ -0,0 +1 @@
1
+ export { anatomy as fileUploadAnatomy } from '@zag-js/file-upload';
@@ -14,4 +14,5 @@ export { FileUploadRootProvider, } from './file-upload-root-provider';
14
14
  export { FileUploadTrigger, } from './file-upload-trigger';
15
15
  export { useFileUpload } from './use-file-upload';
16
16
  export { useFileUploadContext } from './use-file-upload-context';
17
+ export { fileUploadAnatomy } from './file-upload.anatomy';
17
18
  export * as FileUpload from './file-upload';
@@ -0,0 +1 @@
1
+ export { anatomy as hoverCardAnatomy } from '@zag-js/hover-card';
@@ -8,4 +8,5 @@ export { HoverCardRootProvider, } from './hover-card-root-provider';
8
8
  export { HoverCardTrigger, } from './hover-card-trigger';
9
9
  export { useHoverCard } from './use-hover-card';
10
10
  export { useHoverCardContext } from './use-hover-card-context';
11
+ export { hoverCardAnatomy } from './hover-card.anatomy';
11
12
  export * as HoverCard from './hover-card';
@@ -22,4 +22,5 @@ export { MenuTriggerItem, } from './menu-trigger-item';
22
22
  export { useMenu } from './use-menu';
23
23
  export { useMenuContext } from './use-menu-context';
24
24
  export { useMenuItemContext } from './use-menu-item-context';
25
+ export { menuAnatomy } from './menu.anatomy';
25
26
  export * as Menu from './menu';
@@ -0,0 +1 @@
1
+ export { anatomy as menuAnatomy } from '@zag-js/menu';
@@ -7,6 +7,8 @@ export { NumberInputLabel, } from './number-input-label';
7
7
  export { NumberInputRoot, } from './number-input-root';
8
8
  export { NumberInputRootProvider, } from './number-input-root-provider';
9
9
  export { NumberInputScrubber, } from './number-input-scrubber';
10
+ export { NumberInputValueText, } from './number-input-value-text';
10
11
  export { useNumberInput, } from './use-number-input';
11
12
  export { useNumberInputContext } from './use-number-input-context';
13
+ export { numberInputAnatomy } from './number-input.anatomy';
12
14
  export * as NumberInput from './number-input';
@@ -0,0 +1,8 @@
1
+ import { mergeProps } from '@zag-js/solid';
2
+ import { ark } from '../factory';
3
+ import { useNumberInputContext } from './use-number-input-context';
4
+ export const NumberInputValueText = (props) => {
5
+ const numberInput = useNumberInputContext();
6
+ const mergedProps = mergeProps(() => numberInput().getValueTextProps(), props);
7
+ return <ark.span {...mergedProps}/>;
8
+ };
@@ -0,0 +1 @@
1
+ export { anatomy as numberInputAnatomy } from '@zag-js/number-input';
@@ -7,3 +7,4 @@ export { NumberInputLabel as Label, } from './number-input-label';
7
7
  export { NumberInputRoot as Root, } from './number-input-root';
8
8
  export { NumberInputRootProvider as RootProvider, } from './number-input-root-provider';
9
9
  export { NumberInputScrubber as Scrubber, } from './number-input-scrubber';
10
+ export { NumberInputValueText as ValueText, } from './number-input-value-text';
@@ -7,4 +7,5 @@ export { PaginationRoot, } from './pagination-root';
7
7
  export { PaginationRootProvider, } from './pagination-root-provider';
8
8
  export { usePagination } from './use-pagination';
9
9
  export { usePaginationContext } from './use-pagination-context';
10
+ export { paginationAnatomy } from './pagination.anatomy';
10
11
  export * as Pagination from './pagination';
@@ -0,0 +1 @@
1
+ export { anatomy as paginationAnatomy } from '@zag-js/pagination';
@@ -7,4 +7,5 @@ export { PinInputRoot, } from './pin-input-root';
7
7
  export { PinInputRootProvider, } from './pin-input-root-provider';
8
8
  export { usePinInput } from './use-pin-input';
9
9
  export { usePinInputContext } from './use-pin-input-context';
10
+ export { pinInputAnatomy } from './pin-input.anatomy';
10
11
  export * as PinInput from './pin-input';
@@ -0,0 +1 @@
1
+ export { anatomy as pinInputAnatomy } from '@zag-js/pin-input';
@@ -13,4 +13,5 @@ export { PopoverTitle, } from './popover-title';
13
13
  export { PopoverTrigger, } from './popover-trigger';
14
14
  export { usePopover } from './use-popover';
15
15
  export { usePopoverContext } from './use-popover-context';
16
+ export { popoverAnatomy } from './popover.anatomy';
16
17
  export * as Popover from './popover';
@@ -0,0 +1 @@
1
+ export { anatomy as popoverAnatomy } from '@zag-js/popover';
@@ -11,4 +11,5 @@ export { ProgressValueText, } from './progress-value-text';
11
11
  export { ProgressView, } from './progress-view';
12
12
  export { useProgress } from './use-progress';
13
13
  export { useProgressContext } from './use-progress-context';
14
+ export { progressAnatomy } from './progress.anatomy';
14
15
  export * as Progress from './progress';
@@ -0,0 +1 @@
1
+ export { anatomy as progressAnatomy } from '@zag-js/progress';
@@ -6,4 +6,5 @@ export { QrCodeRoot, } from './qr-code-root';
6
6
  export { QrCodeRootProvider, } from './qr-code-root-provider';
7
7
  export { useQrCode } from './use-qr-code';
8
8
  export { useQrCodeContext } from './use-qr-code-context';
9
+ export { qrCodeAnatomy } from './qr-code.anatomy';
9
10
  export * as QrCode from './qr-code';
@@ -0,0 +1 @@
1
+ export { anatomy as qrCodeAnatomy } from '@zag-js/qr-code';
@@ -11,4 +11,5 @@ export { RadioGroupRootProvider, } from './radio-group-root-provider';
11
11
  export { useRadioGroup } from './use-radio-group';
12
12
  export { useRadioGroupContext } from './use-radio-group-context';
13
13
  export { useRadioGroupItemContext, } from './use-radio-group-item-context';
14
+ export { radioGroupAnatomy } from './radio-group.anatomy';
14
15
  export * as RadioGroup from './radio-group';
@@ -0,0 +1 @@
1
+ export { anatomy as radioGroupAnatomy } from '@zag-js/radio-group';
@@ -9,4 +9,5 @@ export { RatingGroupRootProvider, } from './rating-group-root-provider';
9
9
  export { useRatingGroup, } from './use-rating-group';
10
10
  export { useRatingGroupContext } from './use-rating-group-context';
11
11
  export { useRatingGroupItemContext, } from './use-rating-group-item-context';
12
+ export { ratingGroupAnatomy } from './rating-group.anatomy';
12
13
  export * as RatingGroup from './rating-group';
@@ -0,0 +1 @@
1
+ export { anatomy as ratingGroupAnatomy } from '@zag-js/rating-group';
@@ -11,4 +11,5 @@ export { SegmentGroupRootProvider, } from './segment-group-root-provider';
11
11
  export { useSegmentGroup, } from './use-segment-group';
12
12
  export { useSegmentGroupContext } from './use-segment-group-context';
13
13
  export { useSegmentGroupItemContext, } from './use-segment-group-item-context';
14
+ export { segmentGroupAnatomy } from './segment-group.anatomy';
14
15
  export * as SegmentGroup from './segment-group';
@@ -1,9 +1,9 @@
1
- import { segmentGroupAnatomy } from '@ark-ui/anatomy';
2
1
  import { mergeProps } from '@zag-js/solid';
3
2
  import { ark } from '../factory';
3
+ import { parts } from './segment-group.anatomy';
4
4
  import { useSegmentGroupContext } from './use-segment-group-context';
5
5
  export const SegmentGroupIndicator = (props) => {
6
6
  const segmentGroup = useSegmentGroupContext();
7
- const mergedProps = mergeProps(() => segmentGroup().getIndicatorProps(), segmentGroupAnatomy.build().indicator.attrs, props);
7
+ const mergedProps = mergeProps(() => segmentGroup().getIndicatorProps(), parts.indicator.attrs, props);
8
8
  return <ark.div {...mergedProps}/>;
9
9
  };
@@ -1,11 +1,11 @@
1
- import { segmentGroupAnatomy } from '@ark-ui/anatomy';
2
1
  import { mergeProps } from '@zag-js/solid';
3
2
  import { ark } from '../factory';
3
+ import { parts } from './segment-group.anatomy';
4
4
  import { useSegmentGroupContext } from './use-segment-group-context';
5
5
  import { useSegmentGroupItemPropsContext } from './use-segment-group-item-props-context';
6
6
  export const SegmentGroupItemControl = (props) => {
7
7
  const segmentGroup = useSegmentGroupContext();
8
8
  const itemProps = useSegmentGroupItemPropsContext();
9
- const mergedProps = mergeProps(() => segmentGroup().getItemControlProps(itemProps), segmentGroupAnatomy.build().itemControl.attrs, props);
9
+ const mergedProps = mergeProps(() => segmentGroup().getItemControlProps(itemProps), parts.itemControl.attrs, props);
10
10
  return <ark.div {...mergedProps}/>;
11
11
  };
@@ -1,11 +1,11 @@
1
- import { segmentGroupAnatomy } from '@ark-ui/anatomy';
2
1
  import { mergeProps } from '@zag-js/solid';
3
2
  import { ark } from '../factory';
3
+ import { parts } from './segment-group.anatomy';
4
4
  import { useSegmentGroupContext } from './use-segment-group-context';
5
5
  import { useSegmentGroupItemPropsContext } from './use-segment-group-item-props-context';
6
6
  export const SegmentGroupItemText = (props) => {
7
7
  const segmentGroup = useSegmentGroupContext();
8
8
  const itemProps = useSegmentGroupItemPropsContext();
9
- const mergedProps = mergeProps(() => segmentGroup().getItemTextProps(itemProps), segmentGroupAnatomy.build().itemText.attrs, props);
9
+ const mergedProps = mergeProps(() => segmentGroup().getItemTextProps(itemProps), parts.itemText.attrs, props);
10
10
  return <ark.span {...mergedProps}/>;
11
11
  };
@@ -1,8 +1,8 @@
1
- import { segmentGroupAnatomy } from '@ark-ui/anatomy';
2
1
  import { mergeProps } from '@zag-js/solid';
3
2
  import { createMemo } from 'solid-js';
4
3
  import { createSplitProps } from '../../utils/create-split-props';
5
4
  import { ark } from '../factory';
5
+ import { parts } from './segment-group.anatomy';
6
6
  import { useSegmentGroupContext } from './use-segment-group-context';
7
7
  import { SegmentGroupItemProvider } from './use-segment-group-item-context';
8
8
  import { SegmentGroupItemPropsProvider } from './use-segment-group-item-props-context';
@@ -13,7 +13,7 @@ export const SegmentGroupItem = (props) => {
13
13
  'invalid',
14
14
  ]);
15
15
  const segmentGroup = useSegmentGroupContext();
16
- const mergedProps = mergeProps(() => segmentGroup().getItemProps(itemProps), segmentGroupAnatomy.build().item.attrs, localProps);
16
+ const mergedProps = mergeProps(() => segmentGroup().getItemProps(itemProps), parts.item.attrs, localProps);
17
17
  const itemState = createMemo(() => segmentGroup().getItemState(itemProps));
18
18
  return (<SegmentGroupItemPropsProvider value={itemProps}>
19
19
  <SegmentGroupItemProvider value={itemState}>
@@ -1,9 +1,9 @@
1
- import { segmentGroupAnatomy } from '@ark-ui/anatomy';
2
1
  import { mergeProps } from '@zag-js/solid';
3
2
  import { ark } from '../factory';
3
+ import { parts } from './segment-group.anatomy';
4
4
  import { useSegmentGroupContext } from './use-segment-group-context';
5
5
  export const SegmentGroupLabel = (props) => {
6
6
  const segmentGroup = useSegmentGroupContext();
7
- const mergedProps = mergeProps(() => segmentGroup().getLabelProps(), segmentGroupAnatomy.build().label.attrs, props);
7
+ const mergedProps = mergeProps(() => segmentGroup().getLabelProps(), parts.label.attrs, props);
8
8
  return <ark.label {...mergedProps}/>;
9
9
  };
@@ -1,13 +1,13 @@
1
- import { segmentGroupAnatomy } from '@ark-ui/anatomy';
2
1
  import { mergeProps } from '@zag-js/solid';
3
2
  import { createSplitProps } from '../../utils/create-split-props';
4
3
  import { ark } from '../factory';
4
+ import { parts } from './segment-group.anatomy';
5
5
  import { SegmentGroupProvider } from './use-segment-group-context';
6
6
  export const SegmentGroupRootProvider = (props) => {
7
7
  const [{ value: segmentGroup }, localProps] = createSplitProps()(props, [
8
8
  'value',
9
9
  ]);
10
- const mergedProps = mergeProps(() => segmentGroup().getRootProps(), segmentGroupAnatomy.build().root.attrs, localProps);
10
+ const mergedProps = mergeProps(() => segmentGroup().getRootProps(), parts.root.attrs, localProps);
11
11
  return (<SegmentGroupProvider value={segmentGroup}>
12
12
  <ark.div {...mergedProps}/>
13
13
  </SegmentGroupProvider>);
@@ -1,7 +1,7 @@
1
- import { segmentGroupAnatomy } from '@ark-ui/anatomy';
2
1
  import { mergeProps } from '@zag-js/solid';
3
2
  import { createSplitProps } from '../../utils/create-split-props';
4
3
  import { ark } from '../factory';
4
+ import { parts } from './segment-group.anatomy';
5
5
  import { useSegmentGroup } from './use-segment-group';
6
6
  import { SegmentGroupProvider } from './use-segment-group-context';
7
7
  export const SegmentGroupRoot = (props) => {
@@ -18,7 +18,7 @@ export const SegmentGroupRoot = (props) => {
18
18
  'value',
19
19
  ]);
20
20
  const segmentGroup = useSegmentGroup(useSegmentGroupProps);
21
- const mergedProps = mergeProps(() => segmentGroup().getRootProps(), segmentGroupAnatomy.build().root.attrs, localProps);
21
+ const mergedProps = mergeProps(() => segmentGroup().getRootProps(), parts.root.attrs, localProps);
22
22
  return (<SegmentGroupProvider value={segmentGroup}>
23
23
  <ark.div {...mergedProps}/>
24
24
  </SegmentGroupProvider>);
@@ -0,0 +1,3 @@
1
+ import { anatomy } from '@zag-js/radio-group';
2
+ export const segmentGroupAnatomy = anatomy.rename('segment-group');
3
+ export const parts = segmentGroupAnatomy.build();
@@ -20,4 +20,5 @@ export { SelectValueText, } from './select-value-text';
20
20
  export { useSelect } from './use-select';
21
21
  export { useSelectContext } from './use-select-context';
22
22
  export { useSelectItemContext } from './use-select-item-context';
23
+ export { selectAnatomy } from './select.anatomy';
23
24
  export * as Select from './select';
@@ -12,7 +12,7 @@ export const SelectHiddenSelect = (props) => {
12
12
  <Show when={isValueEmpty()}>
13
13
  <option value=""/>
14
14
  </Show>
15
- <Index each={select().collection.toArray()}>
15
+ <Index each={select().collection.items}>
16
16
  {(option) => <option value={option().value}>{option().label}</option>}
17
17
  </Index>
18
18
  </ark.select>);
@@ -1,9 +1,8 @@
1
- import { selectAnatomy } from '@ark-ui/anatomy';
2
1
  import { mergeProps } from '@zag-js/solid';
3
2
  import { ark } from '../factory';
4
3
  import { useSelectContext } from './use-select-context';
5
4
  export const SelectValueText = (props) => {
6
5
  const select = useSelectContext();
7
- const mergedProps = mergeProps(() => selectAnatomy.build().valueText.attrs, props);
6
+ const mergedProps = mergeProps(() => select().getValueTextProps(), props);
8
7
  return <ark.span {...mergedProps}>{select().valueAsString || props.placeholder}</ark.span>;
9
8
  };
@@ -0,0 +1 @@
1
+ export { anatomy as selectAnatomy } from '@zag-js/select';
@@ -9,4 +9,5 @@ export { SignaturePadRootProvider, } from './signature-pad-root-provider';
9
9
  export { SignaturePadSegment, } from './signature-pad-segment';
10
10
  export { useSignaturePad, } from './use-signature-pad';
11
11
  export { useSignaturePadContext } from './use-signature-pad-context';
12
+ export { signaturePadAnatomy } from './signature-pad.anatomy';
12
13
  export * as SignaturePad from './signature-pad';
@@ -0,0 +1 @@
1
+ export { anatomy as signaturePadAnatomy } from '@zag-js/signature-pad';
@@ -12,4 +12,5 @@ export { SliderTrack, } from './slider-track';
12
12
  export { SliderValueText, } from './slider-value-text';
13
13
  export { useSlider } from './use-slider';
14
14
  export { useSliderContext } from './use-slider-context';
15
+ export { sliderAnatomy } from './slider.anatomy';
15
16
  export * as Slider from './slider';
@@ -0,0 +1 @@
1
+ export { anatomy as sliderAnatomy } from '@zag-js/slider';
@@ -5,4 +5,5 @@ export { SplitterRoot, } from './splitter-root';
5
5
  export { SplitterRootProvider, } from './splitter-root-provider';
6
6
  export { useSplitter } from './use-splitter';
7
7
  export { useSplitterContext } from './use-splitter-context';
8
+ export { splitterAnatomy } from './splitter.anatomy';
8
9
  export * as Splitter from './splitter';
@@ -0,0 +1 @@
1
+ export { anatomy as splitterAnatomy } from '@zag-js/splitter';
@@ -7,4 +7,5 @@ export { SwitchRootProvider, } from './switch-root-provider';
7
7
  export { SwitchThumb, } from './switch-thumb';
8
8
  export { useSwitch } from './use-switch';
9
9
  export { useSwitchContext } from './use-switch-context';
10
+ export { switchAnatomy } from './switch.anatomy';
10
11
  export * as Switch from './switch';
@@ -0,0 +1 @@
1
+ export { anatomy as switchAnatomy } from '@zag-js/switch';
@@ -7,4 +7,5 @@ export { TabsRoot, } from './tabs-root';
7
7
  export { TabsRootProvider, } from './tabs-root-provider';
8
8
  export { useTabs } from './use-tabs';
9
9
  export { useTabsContext } from './use-tabs-context';
10
+ export { tabsAnatomy } from './tabs.anatomy';
10
11
  export * as Tabs from './tabs';
@@ -0,0 +1 @@
1
+ export { anatomy as tabsAnatomy } from '@zag-js/tabs';
@@ -15,4 +15,5 @@ export { TagsInputRootProvider, } from './tags-input-root-provider';
15
15
  export { useTagsInput } from './use-tags-input';
16
16
  export { useTagsInputContext } from './use-tags-input-context';
17
17
  export { useTagsInputItemContext, } from './use-tags-input-item-context';
18
+ export { tagsInputAnatomy } from './tags-input.anatomy';
18
19
  export * as TagsInput from './tags-input';
@@ -0,0 +1 @@
1
+ export { anatomy as tagsInputAnatomy } from '@zag-js/tags-input';
@@ -7,4 +7,5 @@ export { ToastRoot, } from './toast-root';
7
7
  export { ToastTitle, } from './toast-title';
8
8
  export { Toaster, } from './toaster';
9
9
  export { useToastContext } from './use-toast-context';
10
+ export { toastAnatomy } from './toast.anatomy';
10
11
  export * as Toast from './toast';
@@ -0,0 +1 @@
1
+ export { anatomy as toastAnatomy } from '@zag-js/toast';
@@ -4,4 +4,5 @@ export { ToggleGroupRoot, } from './toggle-group-root';
4
4
  export { ToggleGroupRootProvider, } from './toggle-group-root-provider';
5
5
  export { useToggleGroup, } from './use-toggle-group';
6
6
  export { useToggleGroupContext } from './use-toggle-group-context';
7
+ export { toggleGroupAnatomy } from './toggle-group.anatomy';
7
8
  export * as ToggleGroup from './toggle-group';
@@ -0,0 +1 @@
1
+ export { anatomy as toggleGroupAnatomy } from '@zag-js/toggle-group';
@@ -8,4 +8,5 @@ export { TooltipRootProvider, } from './tooltip-root-provider';
8
8
  export { TooltipTrigger, } from './tooltip-trigger';
9
9
  export { useTooltip } from './use-tooltip';
10
10
  export { useTooltipContext } from './use-tooltip-context';
11
+ export { tooltipAnatomy } from './tooltip.anatomy';
11
12
  export * as Tooltip from './tooltip';
@@ -0,0 +1 @@
1
+ export { anatomy as tooltipAnatomy } from '@zag-js/tooltip';