@ark-ui/react 3.4.0-1 → 3.5.0

package/dist/components/collapsible/index.d.ts

@@ -6,4 +6,5 @@ export { CollapsibleRootProvider, type CollapsibleRootProviderProps, type Collap
 export { CollapsibleTrigger, type CollapsibleTriggerProps, type CollapsibleTriggerBaseProps, } from './collapsible-trigger';
 export { useCollapsible, type UseCollapsibleProps, type UseCollapsibleReturn, } from './use-collapsible';
 export { useCollapsibleContext, type UseCollapsibleContext } from './use-collapsible-context';
+export { collapsibleAnatomy } from './collapsible.anatomy';
 export * as Collapsible from './collapsible';

package/dist/components/collapsible/index.js

@@ -7,3 +7,4 @@ export { useCollapsible } from './use-collapsible.js';
 export { useCollapsibleContext } from './use-collapsible-context.js';
 import * as collapsible from './collapsible.js';
 export { collapsible as Collapsible };
+export { anatomy as collapsibleAnatomy } from '@zag-js/collapsible';

package/dist/components/color-picker/color-picker-hidden-input.cjs

@@ -7,13 +7,15 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
+const useFieldContext = require('../field/use-field-context.cjs');
 const useColorPickerContext = require('./use-color-picker-context.cjs');
 
 const ColorPickerHiddenInput = react.forwardRef(
   (props, ref) => {
     const colorPicker = useColorPickerContext.useColorPickerContext();
     const mergedProps = react$1.mergeProps(colorPicker.getHiddenInputProps(), props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { ...mergedProps, ref });
+    const field = useFieldContext.useFieldContext();
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
   }
 );
 ColorPickerHiddenInput.displayName = "ColorPickerHiddenInput";

package/dist/components/color-picker/color-picker-hidden-input.js

@@ -3,13 +3,15 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.js';
+import { useFieldContext } from '../field/use-field-context.js';
 import { useColorPickerContext } from './use-color-picker-context.js';
 
 const ColorPickerHiddenInput = forwardRef(
   (props, ref) => {
     const colorPicker = useColorPickerContext();
     const mergedProps = mergeProps(colorPicker.getHiddenInputProps(), props);
-    return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });
+    const field = useFieldContext();
+    return /* @__PURE__ */ jsx(ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
   }
 );
 ColorPickerHiddenInput.displayName = "ColorPickerHiddenInput";

package/dist/components/color-picker/color-picker-root.cjs

@@ -39,6 +39,7 @@ const ColorPickerRoot = react.forwardRef((props, ref) => {
       "open",
       "positioning",
       "readOnly",
+      "required",
       "value"
     ]
   );

package/dist/components/color-picker/color-picker-root.js

@@ -35,6 +35,7 @@ const ColorPickerRoot = forwardRef((props, ref) => {
       "open",
       "positioning",
       "readOnly",
+      "required",
       "value"
     ]
   );

package/dist/components/color-picker/color-picker-value-text.cjs

@@ -4,15 +4,17 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const anatomy = require('@ark-ui/anatomy');
+const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
 const useColorPickerContext = require('./use-color-picker-context.cjs');
 
 const ColorPickerValueText = react.forwardRef(
   (props, ref) => {
+    const { children, ...localprops } = props;
     const colorPicker = useColorPickerContext.useColorPickerContext();
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...anatomy.colorPickerAnatomy.build().valueText.attrs, ...props, ref, children: props.children || colorPicker.valueAsString });
+    const mergedProps = react$1.mergeProps(colorPicker.getValueTextProps(), localprops);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref, children: props.children || colorPicker.valueAsString });
   }
 );
 ColorPickerValueText.displayName = "ColorPickerValueText";

package/dist/components/color-picker/color-picker-value-text.js

@@ -1,14 +1,16 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { colorPickerAnatomy } from '@ark-ui/anatomy';
+import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { useColorPickerContext } from './use-color-picker-context.js';
 
 const ColorPickerValueText = forwardRef(
   (props, ref) => {
+    const { children, ...localprops } = props;
     const colorPicker = useColorPickerContext();
-    return /* @__PURE__ */ jsx(ark.span, { ...colorPickerAnatomy.build().valueText.attrs, ...props, ref, children: props.children || colorPicker.valueAsString });
+    const mergedProps = mergeProps(colorPicker.getValueTextProps(), localprops);
+    return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref, children: props.children || colorPicker.valueAsString });
   }
 );
 ColorPickerValueText.displayName = "ColorPickerValueText";

package/dist/components/color-picker/color-picker-view.cjs

@@ -4,10 +4,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const anatomy = require('@ark-ui/anatomy');
 const react = require('react');
 const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
+const colorPicker_anatomy = require('./color-picker.anatomy.cjs');
 const useColorPickerContext = require('./use-color-picker-context.cjs');
 const useColorPickerFormatContext = require('./use-color-picker-format-context.cjs');
 
@@ -22,7 +22,7 @@ const ColorPickerView = react.forwardRef((props, ref) => {
     {
       ref,
       "data-format": props.format,
-      ...anatomy.colorPickerAnatomy.build().view.attrs,
+      ...colorPicker_anatomy.colorPickerAnatomy.build().view.attrs,
       ...restProps
     }
   ) });

package/dist/components/color-picker/color-picker-view.js

@@ -1,9 +1,9 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { colorPickerAnatomy } from '@ark-ui/anatomy';
 import { forwardRef } from 'react';
 import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
+import { colorPickerAnatomy } from './color-picker.anatomy.js';
 import { useColorPickerContext } from './use-color-picker-context.js';
 import { ColorPickerFormatPropsProvider } from './use-color-picker-format-context.js';
 

package/dist/components/color-picker/color-picker.anatomy.cjs

@@ -0,0 +1,10 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const colorPicker = require('@zag-js/color-picker');
+
+const colorPickerAnatomy = colorPicker.anatomy.extendWith("view");
+
+exports.colorPickerAnatomy = colorPickerAnatomy;

package/dist/components/color-picker/color-picker.anatomy.d.cts

@@ -0,0 +1,2 @@
+import { AnatomyInstance } from '@zag-js/anatomy';
+export declare const colorPickerAnatomy: AnatomyInstance<"area" | "label" | "view" | "content" | "root" | "trigger" | "control" | "positioner" | "formatSelect" | "areaThumb" | "channelInput" | "channelSliderTrack" | "channelSliderThumb" | "valueText" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderValueText" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger">;

package/dist/components/color-picker/color-picker.anatomy.d.ts

@@ -0,0 +1,2 @@
+import { AnatomyInstance } from '@zag-js/anatomy';
+export declare const colorPickerAnatomy: AnatomyInstance<"area" | "label" | "view" | "content" | "root" | "trigger" | "control" | "positioner" | "formatSelect" | "areaThumb" | "channelInput" | "channelSliderTrack" | "channelSliderThumb" | "valueText" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderValueText" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger">;

package/dist/components/color-picker/color-picker.anatomy.js

@@ -0,0 +1,6 @@
+'use client';
+import { anatomy } from '@zag-js/color-picker';
+
+const colorPickerAnatomy = anatomy.extendWith("view");
+
+export { colorPickerAnatomy };

package/dist/components/color-picker/index.cjs

@@ -33,6 +33,7 @@ const colorPickerValueText = require('./color-picker-value-text.cjs');
 const colorPickerView = require('./color-picker-view.cjs');
 const useColorPicker = require('./use-color-picker.cjs');
 const useColorPickerContext = require('./use-color-picker-context.cjs');
+const colorPicker_anatomy = require('./color-picker.anatomy.cjs');
 const colorPicker = require('./color-picker.cjs');
 
 
@@ -68,4 +69,5 @@ exports.ColorPickerValueText = colorPickerValueText.ColorPickerValueText;
 exports.ColorPickerView = colorPickerView.ColorPickerView;
 exports.useColorPicker = useColorPicker.useColorPicker;
 exports.useColorPickerContext = useColorPickerContext.useColorPickerContext;
+exports.colorPickerAnatomy = colorPicker_anatomy.colorPickerAnatomy;
 exports.ColorPicker = colorPicker;

package/dist/components/color-picker/index.d.cts

@@ -30,4 +30,5 @@ export { ColorPickerValueText, type ColorPickerValueTextBaseProps, type ColorPic
 export { ColorPickerView, type ColorPickerViewBaseProps, type ColorPickerViewProps, } from './color-picker-view';
 export { useColorPicker, type UseColorPickerProps, type UseColorPickerReturn, } from './use-color-picker';
 export { useColorPickerContext, type UseColorPickerContext } from './use-color-picker-context';
+export { colorPickerAnatomy } from './color-picker.anatomy';
 export * as ColorPicker from './color-picker';

package/dist/components/color-picker/index.d.ts

@@ -30,4 +30,5 @@ export { ColorPickerValueText, type ColorPickerValueTextBaseProps, type ColorPic
 export { ColorPickerView, type ColorPickerViewBaseProps, type ColorPickerViewProps, } from './color-picker-view';
 export { useColorPicker, type UseColorPickerProps, type UseColorPickerReturn, } from './use-color-picker';
 export { useColorPickerContext, type UseColorPickerContext } from './use-color-picker-context';
+export { colorPickerAnatomy } from './color-picker.anatomy';
 export * as ColorPicker from './color-picker';

package/dist/components/color-picker/index.js

@@ -29,5 +29,6 @@ export { ColorPickerValueText } from './color-picker-value-text.js';
 export { ColorPickerView } from './color-picker-view.js';
 export { useColorPicker } from './use-color-picker.js';
 export { useColorPickerContext } from './use-color-picker-context.js';
+export { colorPickerAnatomy } from './color-picker.anatomy.js';
 import * as colorPicker from './color-picker.js';
 export { colorPicker as ColorPicker };

package/dist/components/color-picker/use-color-picker.cjs

@@ -9,6 +9,7 @@ const react = require('react');
 const useEnvironmentContext = require('../../providers/environment/use-environment-context.cjs');
 const useLocaleContext = require('../../providers/locale/use-locale-context.cjs');
 const useEvent = require('../../utils/use-event.cjs');
+const useFieldContext = require('../field/use-field-context.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -32,9 +33,17 @@ const colorPicker__namespace = /*#__PURE__*/_interopNamespaceDefault(colorPicker
 const useColorPicker = (props) => {
   const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
   const { dir } = useLocaleContext.useLocaleContext();
+  const field = useFieldContext.useFieldContext();
   const initialContext = {
     id: react.useId(),
+    ids: {
+      label: field?.ids.label,
+      input: field?.ids.control
+    },
     dir,
+    disabled: field?.disabled,
+    readOnly: field?.readOnly,
+    required: field?.required,
     getRootNode,
     open: props.defaultOpen,
     "open.controlled": props.open !== void 0,

package/dist/components/color-picker/use-color-picker.js

@@ -5,13 +5,22 @@ import { useId } from 'react';
 import { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';
 import { useLocaleContext } from '../../providers/locale/use-locale-context.js';
 import { useEvent } from '../../utils/use-event.js';
+import { useFieldContext } from '../field/use-field-context.js';
 
 const useColorPicker = (props) => {
   const { getRootNode } = useEnvironmentContext();
   const { dir } = useLocaleContext();
+  const field = useFieldContext();
   const initialContext = {
     id: useId(),
+    ids: {
+      label: field?.ids.label,
+      input: field?.ids.control
+    },
     dir,
+    disabled: field?.disabled,
+    readOnly: field?.readOnly,
+    required: field?.required,
     getRootNode,
     open: props.defaultOpen,
     "open.controlled": props.open !== void 0,

package/dist/components/combobox/combobox-input.cjs

@@ -7,12 +7,14 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
+const useFieldContext = require('../field/use-field-context.cjs');
 const useComboboxContext = require('./use-combobox-context.cjs');
 
 const ComboboxInput = react.forwardRef((props, ref) => {
   const combobox = useComboboxContext.useComboboxContext();
   const mergedProps = react$1.mergeProps(combobox.getInputProps(), props);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { ...mergedProps, ref });
+  const field = useFieldContext.useFieldContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
 });
 ComboboxInput.displayName = "ComboboxInput";
 

package/dist/components/combobox/combobox-input.js

@@ -3,12 +3,14 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.js';
+import { useFieldContext } from '../field/use-field-context.js';
 import { useComboboxContext } from './use-combobox-context.js';
 
 const ComboboxInput = forwardRef((props, ref) => {
   const combobox = useComboboxContext();
   const mergedProps = mergeProps(combobox.getInputProps(), props);
-  return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });
+  const field = useFieldContext();
+  return /* @__PURE__ */ jsx(ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
 });
 ComboboxInput.displayName = "ComboboxInput";
 

package/dist/components/combobox/combobox-root.cjs

@@ -55,6 +55,7 @@ const ComboboxImpl = (props, ref) => {
     "placeholder",
     "positioning",
     "readOnly",
+    "required",
     "scrollToIndexFn",
     "selectionBehavior",
     "translations",

package/dist/components/combobox/combobox-root.js

@@ -51,6 +51,7 @@ const ComboboxImpl = (props, ref) => {
     "placeholder",
     "positioning",
     "readOnly",
+    "required",
     "scrollToIndexFn",
     "selectionBehavior",
     "translations",

package/dist/components/combobox/combobox.anatomy.d.cts

@@ -0,0 +1 @@
+export { anatomy as comboboxAnatomy } from '@zag-js/combobox';

package/dist/components/combobox/combobox.anatomy.d.ts

@@ -0,0 +1 @@
+export { anatomy as comboboxAnatomy } from '@zag-js/combobox';

package/dist/components/combobox/index.cjs

@@ -22,7 +22,8 @@ const comboboxTrigger = require('./combobox-trigger.cjs');
 const useCombobox = require('./use-combobox.cjs');
 const useComboboxContext = require('./use-combobox-context.cjs');
 const useComboboxItemContext = require('./use-combobox-item-context.cjs');
-const combobox = require('./combobox.cjs');
+const combobox$1 = require('./combobox.cjs');
+const combobox = require('@zag-js/combobox');
 
 
 
@@ -46,4 +47,8 @@ exports.ComboboxTrigger = comboboxTrigger.ComboboxTrigger;
 exports.useCombobox = useCombobox.useCombobox;
 exports.useComboboxContext = useComboboxContext.useComboboxContext;
 exports.useComboboxItemContext = useComboboxItemContext.useComboboxItemContext;
-exports.Combobox = combobox;
+exports.Combobox = combobox$1;
+Object.defineProperty(exports, "comboboxAnatomy", {
+  enumerable: true,
+  get: () => combobox.anatomy
+});

package/dist/components/combobox/index.d.cts

@@ -20,4 +20,5 @@ export { ComboboxTrigger, type ComboboxTriggerProps, type ComboboxTriggerBasePro
 export { useCombobox, type UseComboboxProps, type UseComboboxReturn } from './use-combobox';
 export { useComboboxContext, type UseComboboxContext } from './use-combobox-context';
 export { useComboboxItemContext, type UseComboboxItemContext } from './use-combobox-item-context';
+export { comboboxAnatomy } from './combobox.anatomy';
 export * as Combobox from './combobox';

package/dist/components/combobox/index.d.ts

@@ -20,4 +20,5 @@ export { ComboboxTrigger, type ComboboxTriggerProps, type ComboboxTriggerBasePro
 export { useCombobox, type UseComboboxProps, type UseComboboxReturn } from './use-combobox';
 export { useComboboxContext, type UseComboboxContext } from './use-combobox-context';
 export { useComboboxItemContext, type UseComboboxItemContext } from './use-combobox-item-context';
+export { comboboxAnatomy } from './combobox.anatomy';
 export * as Combobox from './combobox';

package/dist/components/combobox/index.js

@@ -20,3 +20,4 @@ export { useComboboxContext } from './use-combobox-context.js';
 export { useComboboxItemContext } from './use-combobox-item-context.js';
 import * as combobox from './combobox.js';
 export { combobox as Combobox };
+export { anatomy as comboboxAnatomy } from '@zag-js/combobox';

package/dist/components/combobox/use-combobox.cjs

@@ -10,6 +10,7 @@ const useEnvironmentContext = require('../../providers/environment/use-environme
 const useLocaleContext = require('../../providers/locale/use-locale-context.cjs');
 const createSplitProps = require('../../utils/create-split-props.cjs');
 const useEvent = require('../../utils/use-event.cjs');
+const useFieldContext = require('../field/use-field-context.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -43,8 +44,17 @@ const useCombobox = (props) => {
   );
   const { dir } = useLocaleContext.useLocaleContext();
   const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
+  const field = useFieldContext.useFieldContext();
   const initialContext = {
     id: react.useId(),
+    ids: {
+      label: field?.ids.label,
+      input: field?.ids.control
+    },
+    disabled: field?.disabled,
+    readOnly: field?.readOnly,
+    required: field?.required,
+    invalid: field?.invalid,
     dir,
     getRootNode,
     collection,

package/dist/components/combobox/use-combobox.js

@@ -6,6 +6,7 @@ import { useEnvironmentContext } from '../../providers/environment/use-environme
 import { useLocaleContext } from '../../providers/locale/use-locale-context.js';
 import { createSplitProps } from '../../utils/create-split-props.js';
 import { useEvent } from '../../utils/use-event.js';
+import { useFieldContext } from '../field/use-field-context.js';
 
 const useCombobox = (props) => {
   const [collectionOptions, comboboxProps] = createSplitProps()(props, [
@@ -20,8 +21,17 @@ const useCombobox = (props) => {
   );
   const { dir } = useLocaleContext();
   const { getRootNode } = useEnvironmentContext();
+  const field = useFieldContext();
   const initialContext = {
     id: useId(),
+    ids: {
+      label: field?.ids.label,
+      input: field?.ids.control
+    },
+    disabled: field?.disabled,
+    readOnly: field?.readOnly,
+    required: field?.required,
+    invalid: field?.invalid,
     dir,
     getRootNode,
     collection,

package/dist/components/date-picker/date-picker-view.cjs

@@ -4,10 +4,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const anatomy = require('@ark-ui/anatomy');
 const react = require('react');
 const createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
+const datePicker_anatomy = require('./date-picker.anatomy.cjs');
 const useDatePickerContext = require('./use-date-picker-context.cjs');
 const useDatePickerViewPropsContext = require('./use-date-picker-view-props-context.cjs');
 
@@ -18,7 +18,7 @@ const DatePickerView = react.forwardRef((props, ref) => {
     factory.ark.div,
     {
       hidden: datePicker.view !== viewProps.view,
-      ...anatomy.datePickerAnatomy.build().view.attrs,
+      ...datePicker_anatomy.datePickerAnatomy.build().view.attrs,
       ...localProps,
       ref
     }

package/dist/components/date-picker/date-picker-view.js

@@ -1,9 +1,9 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { datePickerAnatomy } from '@ark-ui/anatomy';
 import { forwardRef } from 'react';
 import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
+import { datePickerAnatomy } from './date-picker.anatomy.js';
 import { useDatePickerContext } from './use-date-picker-context.js';
 import { DatePickerViewPropsProvider } from './use-date-picker-view-props-context.js';
 

package/dist/components/date-picker/date-picker.anatomy.cjs

@@ -0,0 +1,10 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const datePicker = require('@zag-js/date-picker');
+
+const datePickerAnatomy = datePicker.anatomy.extendWith("view");
+
+exports.datePickerAnatomy = datePickerAnatomy;

package/dist/components/date-picker/date-picker.anatomy.d.cts

@@ -0,0 +1,2 @@
+import { AnatomyInstance } from '@zag-js/anatomy';
+export declare const datePickerAnatomy: AnatomyInstance<"input" | "label" | "table" | "view" | "content" | "root" | "trigger" | "nextTrigger" | "prevTrigger" | "control" | "positioner" | "clearTrigger" | "monthSelect" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewTrigger" | "viewControl" | "yearSelect" | "presetTrigger">;

package/dist/components/date-picker/date-picker.anatomy.d.ts

@@ -0,0 +1,2 @@
+import { AnatomyInstance } from '@zag-js/anatomy';
+export declare const datePickerAnatomy: AnatomyInstance<"input" | "label" | "table" | "view" | "content" | "root" | "trigger" | "nextTrigger" | "prevTrigger" | "control" | "positioner" | "clearTrigger" | "monthSelect" | "rangeText" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "viewTrigger" | "viewControl" | "yearSelect" | "presetTrigger">;

package/dist/components/date-picker/date-picker.anatomy.js

@@ -0,0 +1,6 @@
+'use client';
+import { anatomy } from '@zag-js/date-picker';
+
+const datePickerAnatomy = anatomy.extendWith("view");
+
+export { datePickerAnatomy };

package/dist/components/date-picker/index.cjs

@@ -30,6 +30,7 @@ const datePickerViewTrigger = require('./date-picker-view-trigger.cjs');
 const datePickerYearSelect = require('./date-picker-year-select.cjs');
 const useDatePicker = require('./use-date-picker.cjs');
 const useDatePickerContext = require('./use-date-picker-context.cjs');
+const datePicker_anatomy = require('./date-picker.anatomy.cjs');
 const datePicker = require('./date-picker.cjs');
 
 
@@ -62,4 +63,5 @@ exports.DatePickerViewTrigger = datePickerViewTrigger.DatePickerViewTrigger;
 exports.DatePickerYearSelect = datePickerYearSelect.DatePickerYearSelect;
 exports.useDatePicker = useDatePicker.useDatePicker;
 exports.useDatePickerContext = useDatePickerContext.useDatePickerContext;
+exports.datePickerAnatomy = datePicker_anatomy.datePickerAnatomy;
 exports.DatePicker = datePicker;

package/dist/components/date-picker/index.d.cts

@@ -27,4 +27,5 @@ export { DatePickerViewTrigger, type DatePickerViewTriggerProps, type DatePicker
 export { DatePickerYearSelect, type DatePickerYearSelectProps, type DatePickerYearSelectBaseProps, } from './date-picker-year-select';
 export { useDatePicker, type UseDatePickerProps, type UseDatePickerReturn } from './use-date-picker';
 export { useDatePickerContext, type UseDatePickerContext } from './use-date-picker-context';
+export { datePickerAnatomy } from './date-picker.anatomy';
 export * as DatePicker from './date-picker';

package/dist/components/date-picker/index.d.ts

@@ -27,4 +27,5 @@ export { DatePickerViewTrigger, type DatePickerViewTriggerProps, type DatePicker
 export { DatePickerYearSelect, type DatePickerYearSelectProps, type DatePickerYearSelectBaseProps, } from './date-picker-year-select';
 export { useDatePicker, type UseDatePickerProps, type UseDatePickerReturn } from './use-date-picker';
 export { useDatePickerContext, type UseDatePickerContext } from './use-date-picker-context';
+export { datePickerAnatomy } from './date-picker.anatomy';
 export * as DatePicker from './date-picker';

package/dist/components/date-picker/index.js

@@ -26,5 +26,6 @@ export { DatePickerViewTrigger } from './date-picker-view-trigger.js';
 export { DatePickerYearSelect } from './date-picker-year-select.js';
 export { useDatePicker } from './use-date-picker.js';
 export { useDatePickerContext } from './use-date-picker-context.js';
+export { datePickerAnatomy } from './date-picker.anatomy.js';
 import * as datePicker from './date-picker.js';
 export { datePicker as DatePicker };

package/dist/components/dialog/dialog-description.d.cts

@@ -5,4 +5,4 @@ export interface DialogDescriptionBaseProps extends PolymorphicProps {
 }
 export interface DialogDescriptionProps extends HTMLProps<'div'>, DialogDescriptionBaseProps {
 }
-export declare const DialogDescription: ForwardRefExoticComponent<DialogDescriptionProps & RefAttributes<HTMLParagraphElement>>;
+export declare const DialogDescription: ForwardRefExoticComponent<DialogDescriptionProps & RefAttributes<HTMLDivElement>>;

package/dist/components/dialog/dialog-description.d.ts

@@ -5,4 +5,4 @@ export interface DialogDescriptionBaseProps extends PolymorphicProps {
 }
 export interface DialogDescriptionProps extends HTMLProps<'div'>, DialogDescriptionBaseProps {
 }
-export declare const DialogDescription: ForwardRefExoticComponent<DialogDescriptionProps & RefAttributes<HTMLParagraphElement>>;
+export declare const DialogDescription: ForwardRefExoticComponent<DialogDescriptionProps & RefAttributes<HTMLDivElement>>;

package/dist/components/dialog/dialog.anatomy.d.cts

@@ -0,0 +1 @@
+export { anatomy as dialogAnatomy } from '@zag-js/dialog';

package/dist/components/dialog/dialog.anatomy.d.ts

@@ -0,0 +1 @@
+export { anatomy as dialogAnatomy } from '@zag-js/dialog';

package/dist/components/dialog/index.cjs

@@ -14,7 +14,8 @@ const dialogTitle = require('./dialog-title.cjs');
 const dialogTrigger = require('./dialog-trigger.cjs');
 const useDialog = require('./use-dialog.cjs');
 const useDialogContext = require('./use-dialog-context.cjs');
-const dialog = require('./dialog.cjs');
+const dialog$1 = require('./dialog.cjs');
+const dialog = require('@zag-js/dialog');
 
 
 
@@ -30,4 +31,8 @@ exports.DialogTitle = dialogTitle.DialogTitle;
 exports.DialogTrigger = dialogTrigger.DialogTrigger;
 exports.useDialog = useDialog.useDialog;
 exports.useDialogContext = useDialogContext.useDialogContext;
-exports.Dialog = dialog;
+exports.Dialog = dialog$1;
+Object.defineProperty(exports, "dialogAnatomy", {
+  enumerable: true,
+  get: () => dialog.anatomy
+});

package/dist/components/dialog/index.d.cts

@@ -11,4 +11,5 @@ export { DialogTitle, type DialogTitleProps, type DialogTitleBaseProps, } from '
 export { DialogTrigger, type DialogTriggerProps, type DialogTriggerBaseProps, } from './dialog-trigger';
 export { useDialog, type UseDialogProps, type UseDialogReturn } from './use-dialog';
 export { useDialogContext, type UseDialogContext } from './use-dialog-context';
+export { dialogAnatomy } from './dialog.anatomy';
 export * as Dialog from './dialog';

package/dist/components/dialog/index.d.ts

@@ -11,4 +11,5 @@ export { DialogTitle, type DialogTitleProps, type DialogTitleBaseProps, } from '
 export { DialogTrigger, type DialogTriggerProps, type DialogTriggerBaseProps, } from './dialog-trigger';
 export { useDialog, type UseDialogProps, type UseDialogReturn } from './use-dialog';
 export { useDialogContext, type UseDialogContext } from './use-dialog-context';
+export { dialogAnatomy } from './dialog.anatomy';
 export * as Dialog from './dialog';

package/dist/components/dialog/index.js

@@ -12,3 +12,4 @@ export { useDialog } from './use-dialog.js';
 export { useDialogContext } from './use-dialog-context.js';
 import * as dialog from './dialog.js';
 export { dialog as Dialog };
+export { anatomy as dialogAnatomy } from '@zag-js/dialog';

package/dist/components/editable/editable-input.cjs

@@ -7,12 +7,14 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
+const useFieldContext = require('../field/use-field-context.cjs');
 const useEditableContext = require('./use-editable-context.cjs');
 
 const EditableInput = react.forwardRef((props, ref) => {
   const editable = useEditableContext.useEditableContext();
   const mergedProps = react$1.mergeProps(editable.getInputProps(), props);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { ...mergedProps, ref });
+  const field = useFieldContext.useFieldContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
 });
 EditableInput.displayName = "EditableInput";
 

package/dist/components/editable/editable-input.js

@@ -3,12 +3,14 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.js';
+import { useFieldContext } from '../field/use-field-context.js';
 import { useEditableContext } from './use-editable-context.js';
 
 const EditableInput = forwardRef((props, ref) => {
   const editable = useEditableContext();
   const mergedProps = mergeProps(editable.getInputProps(), props);
-  return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });
+  const field = useFieldContext();
+  return /* @__PURE__ */ jsx(ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
 });
 EditableInput.displayName = "EditableInput";