@ark-ui/solid 3.4.0 → 3.5.0

package/dist/cjs/index.js

@@ -6,7 +6,6 @@ var solid = require('@zag-js/solid');
 var collapsible$1 = require('@zag-js/collapsible');
 var accordion$1 = require('@zag-js/accordion');
 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');
@@ -17,6 +16,7 @@ var datePicker$1 = require('@zag-js/date-picker');
 var dialog$1 = require('@zag-js/dialog');
 var editable$1 = require('@zag-js/editable');
 var domQuery = require('@zag-js/dom-query');
+var anatomy = require('@zag-js/anatomy');
 var fileUpload$1 = require('@zag-js/file-upload');
 var i18nUtils = require('@zag-js/i18n-utils');
 var hoverCard$1 = require('@zag-js/hover-card');
@@ -531,8 +531,10 @@ const [CarouselProvider, useCarouselContext] = createContext({
 
 const CarouselContext = props => props.children(useCarouselContext());
 
+const carouselAnatomy = carousel$1.anatomy.extendWith('control');
+
 const CarouselControl = props => {
-  const mergedProps = solid.mergeProps(() => anatomy.carouselAnatomy.build().control.attrs, props);
+  const mergedProps = solid.mergeProps(() => carouselAnatomy.build().control.attrs, props);
   return web.createComponent(ark.div, mergedProps);
 };
 
@@ -650,6 +652,8 @@ const CheckboxControl = props => {
   return web.createComponent(ark.div, mergedProps);
 };
 
+const checkboxAnatomy = checkbox$1.anatomy.extendWith('group');
+
 function useControllableState(props) {
   const [uncontrolledValue, setUncontrolledValue] = solidJs.createSignal(runIfFn(props.defaultValue));
   const controlled = solidJs.createMemo(() => props.value?.() !== undefined);
@@ -698,6 +702,7 @@ function useCheckboxGroup(props = {}) {
             toggleValue(itemProps.value);
           }
         },
+        name: props.name,
         disabled: props.disabled,
         readOnly: props.readOnly
       };
@@ -705,6 +710,7 @@ function useCheckboxGroup(props = {}) {
     return {
       isChecked,
       value,
+      name: props.name,
       disabled: props.disabled,
       readOnly: props.readOnly,
       setValue,
@@ -722,14 +728,14 @@ const [CheckboxGroupContextProvider, useCheckboxGroupContext] = createContext({
 });
 
 const CheckboxGroup = props => {
-  const [checkboxGroupProps, localProps] = createSplitProps()(props, ['defaultValue', 'value', 'onValueChange', 'disabled', 'readOnly']);
+  const [checkboxGroupProps, localProps] = createSplitProps()(props, ['defaultValue', 'value', 'onValueChange', 'disabled', 'readOnly', 'name']);
   const checkboxGroup = useCheckboxGroup(checkboxGroupProps);
   return web.createComponent(CheckboxGroupContextProvider, {
     value: checkboxGroup,
     get children() {
       return web.createComponent(ark.div, web.mergeProps({
         role: "group"
-      }, localProps, () => anatomy.checkboxAnatomy.build().group.attrs));
+      }, localProps, () => checkboxAnatomy.build().group.attrs));
     }
   });
 };
@@ -779,7 +785,9 @@ const FieldSelect = props => {
   return web.createComponent(ark.select, mergedProps);
 };
 
-const parts = anatomy.fieldAnatomy.build();
+const fieldAnatomy = anatomy.createAnatomy('field').parts('root', 'errorText', 'helperText', 'input', 'label', 'select', 'textarea');
+const parts$1 = fieldAnatomy.build();
+
 const useField = props => {
   const {
     required = false,
@@ -798,14 +806,14 @@ const useField = props => {
     return;
   });
   const getRootProps = () => ({
-    ...parts.root.attrs,
+    ...parts$1.root.attrs,
     role: 'group',
     'data-disabled': dataAttr(disabled),
     'data-invalid': dataAttr(invalid),
     'data-readonly': dataAttr(readOnly)
   });
   const getLabelProps = () => ({
-    ...parts.label.attrs,
+    ...parts$1.label.attrs,
     id: labelId,
     'data-disabled': dataAttr(disabled),
     'data-invalid': dataAttr(invalid),
@@ -827,23 +835,23 @@ const useField = props => {
   });
   const getInputProps = () => ({
     ...getControlProps(),
-    ...parts.input.attrs
+    ...parts$1.input.attrs
   });
   const getTextareaProps = () => ({
     ...getControlProps(),
-    ...parts.textarea.attrs
+    ...parts$1.textarea.attrs
   });
   const getSelectProps = () => ({
     ...getControlProps(),
-    ...parts.select.attrs
+    ...parts$1.select.attrs
   });
   const getHelperTextProps = () => ({
     id: helperTextId,
-    ...parts.helperText.attrs
+    ...parts$1.helperText.attrs
   });
   const getErrorTextProps = () => ({
     id: errorTextId,
-    ...parts.errorText.attrs,
+    ...parts$1.errorText.attrs,
     'aria-live': 'polite'
   });
   return solidJs.createMemo(() => ({
@@ -1497,19 +1505,21 @@ const ColorPickerValueSwatch = props => {
 };
 
 const ColorPickerValueText = props => {
-  const api = useColorPickerContext();
-  const mergedProps = solid.mergeProps(() => anatomy.colorPickerAnatomy.build().valueText.attrs, props);
+  const colorPicker = useColorPickerContext();
+  const mergedProps = solid.mergeProps(() => colorPicker().getValueTextProps(), props);
   return web.createComponent(ark.span, web.mergeProps(mergedProps, {
     get children() {
-      return api().valueAsString || props.children;
+      return colorPicker().valueAsString || props.children;
     }
   }));
 };
 
+const colorPickerAnatomy = colorPicker$1.anatomy.extendWith('view');
+
 const ColorPickerView = props => {
   const api = useColorPickerContext();
   const [formatProps, localProps] = createSplitProps()(props, ['format']);
-  const mergedProps = solid.mergeProps(() => anatomy.colorPickerAnatomy.build().view.attrs, localProps);
+  const mergedProps = solid.mergeProps(() => colorPickerAnatomy.build().view.attrs, localProps);
   return web.createComponent(ColorPickerFormatPropsProvider, {
     value: formatProps,
     get children() {
@@ -1708,7 +1718,9 @@ const ComboboxPositioner = props => {
 
 const useCombobox = props => {
   const [collectionOptions, comboboxProps] = createSplitProps()(props, ['isItemDisabled', 'itemToValue', 'itemToString', 'items']);
-  const collection = () => combobox__namespace.collection(collectionOptions);
+  const collection = () => combobox__namespace.collection({
+    ...collectionOptions
+  });
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
   const id = solidJs.createUniqueId();
@@ -2101,10 +2113,12 @@ const DatePickerTrigger = props => {
   return web.createComponent(ark.button, mergedProps);
 };
 
+const datePickerAnatomy = datePicker$1.anatomy.extendWith('view');
+
 const DatePickerView = props => {
   const [viewProps, localProps] = createSplitProps()(props, ['view']);
   const api = useDatePickerContext();
-  const mergedProps = solid.mergeProps(() => anatomy.datePickerAnatomy.build().view.attrs, localProps);
+  const mergedProps = solid.mergeProps(() => datePickerAnatomy.build().view.attrs, localProps);
   return web.createComponent(DatePickerViewProvider, {
     value: viewProps,
     get children() {
@@ -3249,6 +3263,12 @@ const NumberInputScrubber = props => {
   return web.createComponent(ark.div, mergedProps);
 };
 
+const NumberInputValueText = props => {
+  const numberInput = useNumberInputContext();
+  const mergedProps = solid.mergeProps(() => numberInput().getValueTextProps(), props);
+  return web.createComponent(ark.span, mergedProps);
+};
+
 var numberInput = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Context: NumberInputContext,
@@ -3259,7 +3279,8 @@ var numberInput = /*#__PURE__*/Object.freeze({
   Label: NumberInputLabel,
   Root: NumberInputRoot,
   RootProvider: NumberInputRootProvider,
-  Scrubber: NumberInputScrubber
+  Scrubber: NumberInputScrubber,
+  ValueText: NumberInputValueText
 });
 
 const [PaginationProvider, usePaginationContext] = createContext({
@@ -4045,9 +4066,12 @@ const [SegmentGroupProvider, useSegmentGroupContext] = createContext({
 
 const SegmentGroupContext = props => props.children(useSegmentGroupContext());
 
+const segmentGroupAnatomy = radio.anatomy.rename('segment-group');
+const parts = segmentGroupAnatomy.build();
+
 const SegmentGroupIndicator = props => {
   const segmentGroup = useSegmentGroupContext();
-  const mergedProps = solid.mergeProps(() => segmentGroup().getIndicatorProps(), anatomy.segmentGroupAnatomy.build().indicator.attrs, props);
+  const mergedProps = solid.mergeProps(() => segmentGroup().getIndicatorProps(), parts.indicator.attrs, props);
   return web.createComponent(ark.div, mergedProps);
 };
 
@@ -4064,7 +4088,7 @@ const [SegmentGroupItemPropsProvider, useSegmentGroupItemPropsContext] = createC
 const SegmentGroupItem = props => {
   const [itemProps, localProps] = createSplitProps()(props, ['value', 'disabled', 'invalid']);
   const segmentGroup = useSegmentGroupContext();
-  const mergedProps = solid.mergeProps(() => segmentGroup().getItemProps(itemProps), anatomy.segmentGroupAnatomy.build().item.attrs, localProps);
+  const mergedProps = solid.mergeProps(() => segmentGroup().getItemProps(itemProps), parts.item.attrs, localProps);
   const itemState = solidJs.createMemo(() => segmentGroup().getItemState(itemProps));
   return web.createComponent(SegmentGroupItemPropsProvider, {
     value: itemProps,
@@ -4084,7 +4108,7 @@ const SegmentGroupItemContext = props => props.children(useSegmentGroupItemConte
 const SegmentGroupItemControl = props => {
   const segmentGroup = useSegmentGroupContext();
   const itemProps = useSegmentGroupItemPropsContext();
-  const mergedProps = solid.mergeProps(() => segmentGroup().getItemControlProps(itemProps), anatomy.segmentGroupAnatomy.build().itemControl.attrs, props);
+  const mergedProps = solid.mergeProps(() => segmentGroup().getItemControlProps(itemProps), parts.itemControl.attrs, props);
   return web.createComponent(ark.div, mergedProps);
 };
 
@@ -4098,13 +4122,13 @@ const SegmentGroupItemHiddenInput = props => {
 const SegmentGroupItemText = props => {
   const segmentGroup = useSegmentGroupContext();
   const itemProps = useSegmentGroupItemPropsContext();
-  const mergedProps = solid.mergeProps(() => segmentGroup().getItemTextProps(itemProps), anatomy.segmentGroupAnatomy.build().itemText.attrs, props);
+  const mergedProps = solid.mergeProps(() => segmentGroup().getItemTextProps(itemProps), parts.itemText.attrs, props);
   return web.createComponent(ark.span, mergedProps);
 };
 
 const SegmentGroupLabel = props => {
   const segmentGroup = useSegmentGroupContext();
-  const mergedProps = solid.mergeProps(() => segmentGroup().getLabelProps(), anatomy.segmentGroupAnatomy.build().label.attrs, props);
+  const mergedProps = solid.mergeProps(() => segmentGroup().getLabelProps(), parts.label.attrs, props);
   return web.createComponent(ark.label, mergedProps);
 };
 
@@ -4128,7 +4152,7 @@ const useSegmentGroup = props => {
 const SegmentGroupRoot = props => {
   const [useSegmentGroupProps, localProps] = createSplitProps()(props, ['defaultValue', 'disabled', 'form', 'id', 'ids', 'name', 'onValueChange', 'orientation', 'readOnly', 'value']);
   const segmentGroup = useSegmentGroup(useSegmentGroupProps);
-  const mergedProps = solid.mergeProps(() => segmentGroup().getRootProps(), anatomy.segmentGroupAnatomy.build().root.attrs, localProps);
+  const mergedProps = solid.mergeProps(() => segmentGroup().getRootProps(), parts.root.attrs, localProps);
   return web.createComponent(SegmentGroupProvider, {
     value: segmentGroup,
     get children() {
@@ -4141,7 +4165,7 @@ const SegmentGroupRootProvider = props => {
   const [{
     value: segmentGroup
   }, localProps] = createSplitProps()(props, ['value']);
-  const mergedProps = solid.mergeProps(() => segmentGroup().getRootProps(), anatomy.segmentGroupAnatomy.build().root.attrs, localProps);
+  const mergedProps = solid.mergeProps(() => segmentGroup().getRootProps(), parts.root.attrs, localProps);
   return web.createComponent(SegmentGroupProvider, {
     value: segmentGroup,
     get children() {
@@ -4220,7 +4244,7 @@ const SelectHiddenSelect = props => {
         }
       }), web.createComponent(solidJs.Index, {
         get each() {
-          return select().collection.toArray();
+          return select().collection.items;
         },
         children: option => (() => {
           var _el$2 = _tmpl$2$1();
@@ -4340,7 +4364,9 @@ const SelectPositioner = props => {
 
 const useSelect = props => {
   const [collectionOptions, selectProps] = createSplitProps()(props, ['isItemDisabled', 'itemToValue', 'itemToString', 'items']);
-  const collection = () => select__namespace.collection(collectionOptions);
+  const collection = () => select__namespace.collection({
+    ...collectionOptions
+  });
   const locale = useLocaleContext();
   const environment = useEnvironmentContext();
   const id = solidJs.createUniqueId();
@@ -4420,7 +4446,7 @@ const SelectTrigger = props => {
 
 const SelectValueText = props => {
   const select = useSelectContext();
-  const mergedProps = solid.mergeProps(() => anatomy.selectAnatomy.build().valueText.attrs, props);
+  const mergedProps = solid.mergeProps(() => select().getValueTextProps(), props);
   return web.createComponent(ark.span, web.mergeProps(mergedProps, {
     get children() {
       return select().valueAsString || props.placeholder;
@@ -5671,6 +5697,122 @@ var treeView = /*#__PURE__*/Object.freeze({
   Tree: TreeViewTree
 });
 
+Object.defineProperty(exports, "collapsibleAnatomy", {
+  enumerable: true,
+  get: function () { return collapsible$1.anatomy; }
+});
+Object.defineProperty(exports, "accordionAnatomy", {
+  enumerable: true,
+  get: function () { return accordion$1.anatomy; }
+});
+Object.defineProperty(exports, "avatarAnatomy", {
+  enumerable: true,
+  get: function () { return avatar$1.anatomy; }
+});
+Object.defineProperty(exports, "clipboardAnatomy", {
+  enumerable: true,
+  get: function () { return clipboard$1.anatomy; }
+});
+Object.defineProperty(exports, "comboboxAnatomy", {
+  enumerable: true,
+  get: function () { return combobox$1.anatomy; }
+});
+Object.defineProperty(exports, "dialogAnatomy", {
+  enumerable: true,
+  get: function () { return dialog$1.anatomy; }
+});
+Object.defineProperty(exports, "editableAnatomy", {
+  enumerable: true,
+  get: function () { return editable$1.anatomy; }
+});
+Object.defineProperty(exports, "fileUploadAnatomy", {
+  enumerable: true,
+  get: function () { return fileUpload$1.anatomy; }
+});
+Object.defineProperty(exports, "hoverCardAnatomy", {
+  enumerable: true,
+  get: function () { return hoverCard$1.anatomy; }
+});
+Object.defineProperty(exports, "menuAnatomy", {
+  enumerable: true,
+  get: function () { return menu$1.anatomy; }
+});
+Object.defineProperty(exports, "numberInputAnatomy", {
+  enumerable: true,
+  get: function () { return numberInput$1.anatomy; }
+});
+Object.defineProperty(exports, "paginationAnatomy", {
+  enumerable: true,
+  get: function () { return pagination$1.anatomy; }
+});
+Object.defineProperty(exports, "pinInputAnatomy", {
+  enumerable: true,
+  get: function () { return pinInput$1.anatomy; }
+});
+Object.defineProperty(exports, "popoverAnatomy", {
+  enumerable: true,
+  get: function () { return popover$1.anatomy; }
+});
+Object.defineProperty(exports, "progressAnatomy", {
+  enumerable: true,
+  get: function () { return progress$1.anatomy; }
+});
+Object.defineProperty(exports, "qrCodeAnatomy", {
+  enumerable: true,
+  get: function () { return qrCode$1.anatomy; }
+});
+Object.defineProperty(exports, "radioGroupAnatomy", {
+  enumerable: true,
+  get: function () { return radio.anatomy; }
+});
+Object.defineProperty(exports, "ratingGroupAnatomy", {
+  enumerable: true,
+  get: function () { return rating.anatomy; }
+});
+Object.defineProperty(exports, "selectAnatomy", {
+  enumerable: true,
+  get: function () { return select$1.anatomy; }
+});
+Object.defineProperty(exports, "signaturePadAnatomy", {
+  enumerable: true,
+  get: function () { return signaturePad$1.anatomy; }
+});
+Object.defineProperty(exports, "sliderAnatomy", {
+  enumerable: true,
+  get: function () { return slider$1.anatomy; }
+});
+Object.defineProperty(exports, "splitterAnatomy", {
+  enumerable: true,
+  get: function () { return splitter$1.anatomy; }
+});
+Object.defineProperty(exports, "switchAnatomy", {
+  enumerable: true,
+  get: function () { return zagSwitch.anatomy; }
+});
+Object.defineProperty(exports, "tabsAnatomy", {
+  enumerable: true,
+  get: function () { return tabs$1.anatomy; }
+});
+Object.defineProperty(exports, "tagsInputAnatomy", {
+  enumerable: true,
+  get: function () { return tagsInput$1.anatomy; }
+});
+Object.defineProperty(exports, "toastAnatomy", {
+  enumerable: true,
+  get: function () { return toast$1.anatomy; }
+});
+Object.defineProperty(exports, "toggleGroupAnatomy", {
+  enumerable: true,
+  get: function () { return toggleGroup$1.anatomy; }
+});
+Object.defineProperty(exports, "tooltipAnatomy", {
+  enumerable: true,
+  get: function () { return tooltip$1.anatomy; }
+});
+Object.defineProperty(exports, "treeViewAnatomy", {
+  enumerable: true,
+  get: function () { return treeView$1.anatomy; }
+});
 exports.Accordion = accordion;
 exports.AccordionContext = AccordionContext;
 exports.AccordionItem = AccordionItem;
@@ -5891,6 +6033,7 @@ exports.NumberInputLabel = NumberInputLabel;
 exports.NumberInputRoot = NumberInputRoot;
 exports.NumberInputRootProvider = NumberInputRootProvider;
 exports.NumberInputScrubber = NumberInputScrubber;
+exports.NumberInputValueText = NumberInputValueText;
 exports.Pagination = pagination;
 exports.PaginationContext = PaginationContext;
 exports.PaginationEllipsis = PaginationEllipsis;
@@ -6092,7 +6235,13 @@ exports.TreeViewRoot = TreeViewRoot;
 exports.TreeViewRootProvider = TreeViewRootProvider;
 exports.TreeViewTree = TreeViewTree;
 exports.ark = ark;
+exports.carouselAnatomy = carouselAnatomy;
+exports.checkboxAnatomy = checkboxAnatomy;
+exports.colorPickerAnatomy = colorPickerAnatomy;
 exports.createToaster = createToaster;
+exports.datePickerAnatomy = datePickerAnatomy;
+exports.fieldAnatomy = fieldAnatomy;
+exports.segmentGroupAnatomy = segmentGroupAnatomy;
 exports.splitPresenceProps = splitPresenceProps;
 exports.useAccordion = useAccordion;
 exports.useAccordionContext = useAccordionContext;