@ark-ui/react 3.4.0-1 → 3.5.0

package/dist/components/segment-group/segment-group-indicator.js

@@ -1,9 +1,9 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { segmentGroupAnatomy } from '@ark-ui/anatomy';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.js';
+import { parts } from './segment-group.anatomy.js';
 import { useSegmentGroupContext } from './use-segment-group-context.js';
 
 const SegmentGroupIndicator = forwardRef(
@@ -11,7 +11,7 @@ const SegmentGroupIndicator = forwardRef(
     const segmentGroup = useSegmentGroupContext();
     const mergedProps = mergeProps(
       segmentGroup.getIndicatorProps(),
-      segmentGroupAnatomy.build().indicator.attrs,
+      parts.indicator.attrs,
       props
     );
     return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });

package/dist/components/segment-group/segment-group-item-control.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$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
+const segmentGroup_anatomy = require('./segment-group.anatomy.cjs');
 const useSegmentGroupContext = require('./use-segment-group-context.cjs');
 const useSegmentGroupItemPropsContext = require('./use-segment-group-item-props-context.cjs');
 
@@ -17,7 +17,7 @@ const SegmentGroupItemControl = react.forwardRef(
     const itemProps = useSegmentGroupItemPropsContext.useSegmentGroupItemPropsContext();
     const mergedProps = react$1.mergeProps(
       segmentGroup.getItemControlProps(itemProps),
-      anatomy.segmentGroupAnatomy.build().itemControl.attrs,
+      segmentGroup_anatomy.parts.itemControl.attrs,
       props
     );
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });

package/dist/components/segment-group/segment-group-item-control.js

@@ -1,9 +1,9 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { segmentGroupAnatomy } from '@ark-ui/anatomy';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.js';
+import { parts } from './segment-group.anatomy.js';
 import { useSegmentGroupContext } from './use-segment-group-context.js';
 import { useSegmentGroupItemPropsContext } from './use-segment-group-item-props-context.js';
 
@@ -13,7 +13,7 @@ const SegmentGroupItemControl = forwardRef(
     const itemProps = useSegmentGroupItemPropsContext();
     const mergedProps = mergeProps(
       segmentGroup.getItemControlProps(itemProps),
-      segmentGroupAnatomy.build().itemControl.attrs,
+      parts.itemControl.attrs,
       props
     );
     return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });

package/dist/components/segment-group/segment-group-item-text.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$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
+const segmentGroup_anatomy = require('./segment-group.anatomy.cjs');
 const useSegmentGroupContext = require('./use-segment-group-context.cjs');
 const useSegmentGroupItemPropsContext = require('./use-segment-group-item-props-context.cjs');
 
@@ -17,7 +17,7 @@ const SegmentGroupItemText = react.forwardRef(
     const itemProps = useSegmentGroupItemPropsContext.useSegmentGroupItemPropsContext();
     const mergedProps = react$1.mergeProps(
       segmentGroup.getItemTextProps(itemProps),
-      anatomy.segmentGroupAnatomy.build().itemText.attrs,
+      segmentGroup_anatomy.parts.itemText.attrs,
       props
     );
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref });

package/dist/components/segment-group/segment-group-item-text.js

@@ -1,9 +1,9 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { segmentGroupAnatomy } from '@ark-ui/anatomy';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.js';
+import { parts } from './segment-group.anatomy.js';
 import { useSegmentGroupContext } from './use-segment-group-context.js';
 import { useSegmentGroupItemPropsContext } from './use-segment-group-item-props-context.js';
 
@@ -13,7 +13,7 @@ const SegmentGroupItemText = forwardRef(
     const itemProps = useSegmentGroupItemPropsContext();
     const mergedProps = mergeProps(
       segmentGroup.getItemTextProps(itemProps),
-      segmentGroupAnatomy.build().itemText.attrs,
+      parts.itemText.attrs,
       props
     );
     return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });

package/dist/components/segment-group/segment-group-item.cjs

@@ -4,11 +4,11 @@
 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 createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
+const segmentGroup_anatomy = require('./segment-group.anatomy.cjs');
 const useSegmentGroupContext = require('./use-segment-group-context.cjs');
 const useSegmentGroupItemContext = require('./use-segment-group-item-context.cjs');
 const useSegmentGroupItemPropsContext = require('./use-segment-group-item-props-context.cjs');
@@ -23,7 +23,7 @@ const SegmentGroupItem = react.forwardRef(
     const segmentGroup = useSegmentGroupContext.useSegmentGroupContext();
     const mergedProps = react$1.mergeProps(
       segmentGroup.getItemProps(itemProps),
-      anatomy.segmentGroupAnatomy.build().item.attrs,
+      segmentGroup_anatomy.parts.item.attrs,
       localProps
     );
     const itemState = segmentGroup.getItemState(itemProps);

package/dist/components/segment-group/segment-group-item.js

@@ -1,10 +1,10 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { segmentGroupAnatomy } from '@ark-ui/anatomy';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
+import { parts } from './segment-group.anatomy.js';
 import { useSegmentGroupContext } from './use-segment-group-context.js';
 import { SegmentGroupItemProvider } from './use-segment-group-item-context.js';
 import { SegmentGroupItemPropsProvider } from './use-segment-group-item-props-context.js';
@@ -19,7 +19,7 @@ const SegmentGroupItem = forwardRef(
     const segmentGroup = useSegmentGroupContext();
     const mergedProps = mergeProps(
       segmentGroup.getItemProps(itemProps),
-      segmentGroupAnatomy.build().item.attrs,
+      parts.item.attrs,
       localProps
     );
     const itemState = segmentGroup.getItemState(itemProps);

package/dist/components/segment-group/segment-group-label.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$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
+const segmentGroup_anatomy = require('./segment-group.anatomy.cjs');
 const useSegmentGroupContext = require('./use-segment-group-context.cjs');
 
 const SegmentGroupLabel = react.forwardRef(
@@ -15,7 +15,7 @@ const SegmentGroupLabel = react.forwardRef(
     const segmentGroup = useSegmentGroupContext.useSegmentGroupContext();
     const mergedProps = react$1.mergeProps(
       segmentGroup.getLabelProps(),
-      anatomy.segmentGroupAnatomy.build().label.attrs,
+      segmentGroup_anatomy.parts.label.attrs,
       props
     );
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref });

package/dist/components/segment-group/segment-group-label.js

@@ -1,9 +1,9 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { segmentGroupAnatomy } from '@ark-ui/anatomy';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.js';
+import { parts } from './segment-group.anatomy.js';
 import { useSegmentGroupContext } from './use-segment-group-context.js';
 
 const SegmentGroupLabel = forwardRef(
@@ -11,7 +11,7 @@ const SegmentGroupLabel = forwardRef(
     const segmentGroup = useSegmentGroupContext();
     const mergedProps = mergeProps(
       segmentGroup.getLabelProps(),
-      segmentGroupAnatomy.build().label.attrs,
+      parts.label.attrs,
       props
     );
     return /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref });

package/dist/components/segment-group/segment-group-root-provider.cjs

@@ -4,11 +4,11 @@
 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 createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
+const segmentGroup_anatomy = require('./segment-group.anatomy.cjs');
 const useSegmentGroupContext = require('./use-segment-group-context.cjs');
 
 const SegmentGroupRootProvider = react.forwardRef(
@@ -18,7 +18,7 @@ const SegmentGroupRootProvider = react.forwardRef(
     ]);
     const mergedProps = react$1.mergeProps(
       segmentGroup.getRootProps(),
-      anatomy.segmentGroupAnatomy.build().root.attrs,
+      segmentGroup_anatomy.parts.root.attrs,
       localProps
     );
     return /* @__PURE__ */ jsxRuntime.jsx(useSegmentGroupContext.SegmentGroupProvider, { value: segmentGroup, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });

package/dist/components/segment-group/segment-group-root-provider.js

@@ -1,10 +1,10 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { segmentGroupAnatomy } from '@ark-ui/anatomy';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
+import { parts } from './segment-group.anatomy.js';
 import { SegmentGroupProvider } from './use-segment-group-context.js';
 
 const SegmentGroupRootProvider = forwardRef(
@@ -14,7 +14,7 @@ const SegmentGroupRootProvider = forwardRef(
     ]);
     const mergedProps = mergeProps(
       segmentGroup.getRootProps(),
-      segmentGroupAnatomy.build().root.attrs,
+      parts.root.attrs,
       localProps
     );
     return /* @__PURE__ */ jsx(SegmentGroupProvider, { value: segmentGroup, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });

package/dist/components/segment-group/segment-group-root.cjs

@@ -4,11 +4,11 @@
 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 createSplitProps = require('../../utils/create-split-props.cjs');
 const factory = require('../factory.cjs');
+const segmentGroup_anatomy = require('./segment-group.anatomy.cjs');
 const useSegmentGroup = require('./use-segment-group.cjs');
 const useSegmentGroupContext = require('./use-segment-group-context.cjs');
 
@@ -28,7 +28,7 @@ const SegmentGroupRoot = react.forwardRef((props, ref) => {
   const segmentGroup = useSegmentGroup.useSegmentGroup(useSegmentGroupProps);
   const mergedProps = react$1.mergeProps(
     segmentGroup.getRootProps(),
-    anatomy.segmentGroupAnatomy.build().root.attrs,
+    segmentGroup_anatomy.parts.root.attrs,
     localProps
   );
   return /* @__PURE__ */ jsxRuntime.jsx(useSegmentGroupContext.SegmentGroupProvider, { value: segmentGroup, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });

package/dist/components/segment-group/segment-group-root.js

@@ -1,10 +1,10 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { segmentGroupAnatomy } from '@ark-ui/anatomy';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { createSplitProps } from '../../utils/create-split-props.js';
 import { ark } from '../factory.js';
+import { parts } from './segment-group.anatomy.js';
 import { useSegmentGroup } from './use-segment-group.js';
 import { SegmentGroupProvider } from './use-segment-group-context.js';
 
@@ -24,7 +24,7 @@ const SegmentGroupRoot = forwardRef((props, ref) => {
   const segmentGroup = useSegmentGroup(useSegmentGroupProps);
   const mergedProps = mergeProps(
     segmentGroup.getRootProps(),
-    segmentGroupAnatomy.build().root.attrs,
+    parts.root.attrs,
     localProps
   );
   return /* @__PURE__ */ jsx(SegmentGroupProvider, { value: segmentGroup, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });

package/dist/components/segment-group/segment-group.anatomy.cjs

@@ -0,0 +1,12 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const radio = require('@zag-js/radio-group');
+
+const segmentGroupAnatomy = radio.anatomy.rename("segment-group");
+const parts = segmentGroupAnatomy.build();
+
+exports.parts = parts;
+exports.segmentGroupAnatomy = segmentGroupAnatomy;

package/dist/components/segment-group/segment-group.anatomy.d.cts

@@ -0,0 +1,3 @@
+import { Anatomy, AnatomyPart } from '@zag-js/anatomy';
+export declare const segmentGroupAnatomy: Anatomy<"label" | "root" | "item" | "indicator" | "itemText" | "itemControl">;
+export declare const parts: Record<"label" | "root" | "item" | "indicator" | "itemText" | "itemControl", AnatomyPart>;

package/dist/components/segment-group/segment-group.anatomy.d.ts

@@ -0,0 +1,3 @@
+import { Anatomy, AnatomyPart } from '@zag-js/anatomy';
+export declare const segmentGroupAnatomy: Anatomy<"label" | "root" | "item" | "indicator" | "itemText" | "itemControl">;
+export declare const parts: Record<"label" | "root" | "item" | "indicator" | "itemText" | "itemControl", AnatomyPart>;

package/dist/components/segment-group/segment-group.anatomy.js

@@ -0,0 +1,7 @@
+'use client';
+import { anatomy } from '@zag-js/radio-group';
+
+const segmentGroupAnatomy = anatomy.rename("segment-group");
+const parts = segmentGroupAnatomy.build();
+
+export { parts, segmentGroupAnatomy };

package/dist/components/select/index.cjs

@@ -24,7 +24,8 @@ const selectValueText = require('./select-value-text.cjs');
 const useSelect = require('./use-select.cjs');
 const useSelectContext = require('./use-select-context.cjs');
 const useSelectItemContext = require('./use-select-item-context.cjs');
-const select = require('./select.cjs');
+const select$1 = require('./select.cjs');
+const select = require('@zag-js/select');
 
 
 
@@ -50,4 +51,8 @@ exports.SelectValueText = selectValueText.SelectValueText;
 exports.useSelect = useSelect.useSelect;
 exports.useSelectContext = useSelectContext.useSelectContext;
 exports.useSelectItemContext = useSelectItemContext.useSelectItemContext;
-exports.Select = select;
+exports.Select = select$1;
+Object.defineProperty(exports, "selectAnatomy", {
+  enumerable: true,
+  get: () => select.anatomy
+});

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

@@ -22,4 +22,5 @@ export { SelectValueText, type SelectValueTextProps, type SelectValueTextBasePro
 export { useSelect, type UseSelectProps, type UseSelectReturn } from './use-select';
 export { useSelectContext, type UseSelectContext } from './use-select-context';
 export { useSelectItemContext, type UseSelectItemContext } from './use-select-item-context';
+export { selectAnatomy } from './select.anatomy';
 export * as Select from './select';

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

@@ -22,4 +22,5 @@ export { SelectValueText, type SelectValueTextProps, type SelectValueTextBasePro
 export { useSelect, type UseSelectProps, type UseSelectReturn } from './use-select';
 export { useSelectContext, type UseSelectContext } from './use-select-context';
 export { useSelectItemContext, type UseSelectItemContext } from './use-select-item-context';
+export { selectAnatomy } from './select.anatomy';
 export * as Select from './select';

package/dist/components/select/index.js

@@ -22,3 +22,4 @@ export { useSelectContext } from './use-select-context.js';
 export { useSelectItemContext } from './use-select-item-context.js';
 import * as select from './select.js';
 export { select as Select };
+export { anatomy as selectAnatomy } from '@zag-js/select';

package/dist/components/select/select-hidden-select.cjs

@@ -7,6 +7,7 @@ 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 useSelectContext = require('./use-select-context.cjs');
 
 const SelectHiddenSelect = react.forwardRef(
@@ -14,9 +15,10 @@ const SelectHiddenSelect = react.forwardRef(
     const select = useSelectContext.useSelectContext();
     const mergedProps = react$1.mergeProps(select.getHiddenSelectProps(), props);
     const isValueEmpty = select.value.length === 0;
-    return /* @__PURE__ */ jsxRuntime.jsxs(factory.ark.select, { ...mergedProps, ref, children: [
+    const field = useFieldContext.useFieldContext();
+    return /* @__PURE__ */ jsxRuntime.jsxs(factory.ark.select, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref, children: [
       isValueEmpty && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "" }),
-      select.collection.toArray().map((option) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: option.value, children: option.label }, option.value))
+      select.collection.items.map((option) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: option.value, children: option.label }, option.value))
     ] });
   }
 );

package/dist/components/select/select-hidden-select.js

@@ -3,6 +3,7 @@ import { jsxs, 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 { useSelectContext } from './use-select-context.js';
 
 const SelectHiddenSelect = forwardRef(
@@ -10,9 +11,10 @@ const SelectHiddenSelect = forwardRef(
     const select = useSelectContext();
     const mergedProps = mergeProps(select.getHiddenSelectProps(), props);
     const isValueEmpty = select.value.length === 0;
-    return /* @__PURE__ */ jsxs(ark.select, { ...mergedProps, ref, children: [
+    const field = useFieldContext();
+    return /* @__PURE__ */ jsxs(ark.select, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref, children: [
       isValueEmpty && /* @__PURE__ */ jsx("option", { value: "" }),
-      select.collection.toArray().map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
+      select.collection.items.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
     ] });
   }
 );

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

@@ -43,6 +43,7 @@ const SelectImpl = (props, ref) => {
     "open",
     "positioning",
     "readOnly",
+    "required",
     "scrollToIndexFn",
     "value"
   ]);

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

@@ -39,6 +39,7 @@ const SelectImpl = (props, ref) => {
     "open",
     "positioning",
     "readOnly",
+    "required",
     "scrollToIndexFn",
     "value"
   ]);

package/dist/components/select/select-value-text.cjs

@@ -4,15 +4,16 @@
 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 useSelectContext = require('./use-select-context.cjs');
 
 const SelectValueText = react.forwardRef((props, ref) => {
-  const { children, placeholder, ...rest } = props;
+  const { children, placeholder, ...localprops } = props;
   const select = useSelectContext.useSelectContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...anatomy.selectAnatomy.build().valueText.attrs, ...rest, ref, children: children || select.valueAsString || placeholder });
+  const mergedProps = react$1.mergeProps(select.getValueTextProps(), localprops);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref, children: children || select.valueAsString || placeholder });
 });
 SelectValueText.displayName = "SelectValueText";
 

package/dist/components/select/select-value-text.js

@@ -1,14 +1,15 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { selectAnatomy } from '@ark-ui/anatomy';
+import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.js';
 import { useSelectContext } from './use-select-context.js';
 
 const SelectValueText = forwardRef((props, ref) => {
-  const { children, placeholder, ...rest } = props;
+  const { children, placeholder, ...localprops } = props;
   const select = useSelectContext();
-  return /* @__PURE__ */ jsx(ark.span, { ...selectAnatomy.build().valueText.attrs, ...rest, ref, children: children || select.valueAsString || placeholder });
+  const mergedProps = mergeProps(select.getValueTextProps(), localprops);
+  return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref, children: children || select.valueAsString || placeholder });
 });
 SelectValueText.displayName = "SelectValueText";
 

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

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

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

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

package/dist/components/select/use-select.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 useSelect = (props) => {
   );
   const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
   const { dir } = useLocaleContext.useLocaleContext();
+  const field = useFieldContext.useFieldContext();
   const initialContext = {
     id: react.useId(),
+    ids: {
+      label: field?.ids.label,
+      hiddenSelect: field?.ids.control
+    },
+    disabled: field?.disabled,
+    readOnly: field?.readOnly,
+    invalid: field?.invalid,
+    required: field?.required,
     dir,
     getRootNode,
     collection,

package/dist/components/select/use-select.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 useSelect = (props) => {
   const [collectionOptions, selectProps] = createSplitProps()(props, [
@@ -20,8 +21,17 @@ const useSelect = (props) => {
   );
   const { getRootNode } = useEnvironmentContext();
   const { dir } = useLocaleContext();
+  const field = useFieldContext();
   const initialContext = {
     id: useId(),
+    ids: {
+      label: field?.ids.label,
+      hiddenSelect: field?.ids.control
+    },
+    disabled: field?.disabled,
+    readOnly: field?.readOnly,
+    invalid: field?.invalid,
+    required: field?.required,
     dir,
     getRootNode,
     collection,

package/dist/components/signature-pad/index.cjs

@@ -7,12 +7,14 @@ const signaturePadContext = require('./signature-pad-context.cjs');
 const signaturePadControl = require('./signature-pad-control.cjs');
 const signaturePadGuide = require('./signature-pad-guide.cjs');
 const signaturePadLabel = require('./signature-pad-label.cjs');
+const signaturePadHiddenInput = require('./signature-pad-hidden-input.cjs');
 const signaturePadRoot = require('./signature-pad-root.cjs');
 const signaturePadRootProvider = require('./signature-pad-root-provider.cjs');
 const signaturePadSegment = require('./signature-pad-segment.cjs');
 const useSignaturePad = require('./use-signature-pad.cjs');
 const useSignaturePadContext = require('./use-signature-pad-context.cjs');
-const signaturePad = require('./signature-pad.cjs');
+const signaturePad$1 = require('./signature-pad.cjs');
+const signaturePad = require('@zag-js/signature-pad');
 
 
 
@@ -21,9 +23,14 @@ exports.SignaturePadContext = signaturePadContext.SignaturePadContext;
 exports.SignaturePadControl = signaturePadControl.SignaturePadControl;
 exports.SignaturePadGuide = signaturePadGuide.SignaturePadGuide;
 exports.SignaturePadLabel = signaturePadLabel.SignaturePadLabel;
+exports.SignaturePadHiddenInput = signaturePadHiddenInput.SignaturePadHiddenInput;
 exports.SignaturePadRoot = signaturePadRoot.SignaturePadRoot;
 exports.SignaturePadRootProvider = signaturePadRootProvider.SignaturePadRootProvider;
 exports.SignaturePadSegment = signaturePadSegment.SignaturePadSegment;
 exports.useSignaturePad = useSignaturePad.useSignaturePad;
 exports.useSignaturePadContext = useSignaturePadContext.useSignaturePadContext;
-exports.SignaturePad = signaturePad;
+exports.SignaturePad = signaturePad$1;
+Object.defineProperty(exports, "signaturePadAnatomy", {
+  enumerable: true,
+  get: () => signaturePad.anatomy
+});

package/dist/components/signature-pad/index.d.cts

@@ -4,9 +4,11 @@ export { SignaturePadContext, type SignaturePadContextProps, } from './signature
 export { SignaturePadControl, type SignaturePadControlProps, type SignaturePadControlBaseProps, } from './signature-pad-control';
 export { SignaturePadGuide, type SignaturePadGuideProps, type SignaturePadGuideBaseProps, } from './signature-pad-guide';
 export { SignaturePadLabel, type SignaturePadLabelProps, type SignaturePadLabelBaseProps, } from './signature-pad-label';
+export { SignaturePadHiddenInput, type SignaturePadHiddenInputProps, type SignaturePadHiddenInputBaseProps, } from './signature-pad-hidden-input';
 export { SignaturePadRoot, type SignaturePadRootProps, type SignaturePadRootBaseProps, } from './signature-pad-root';
 export { SignaturePadRootProvider, type SignaturePadRootProviderProps, type SignaturePadRootProviderBaseProps, } from './signature-pad-root-provider';
 export { SignaturePadSegment, type SignaturePadSegmentProps, type SignaturePadSegmentBaseProps, } from './signature-pad-segment';
 export { useSignaturePad, type UseSignaturePadProps, type UseSignaturePadReturn, } from './use-signature-pad';
 export { useSignaturePadContext, type UseSignaturePadContext } from './use-signature-pad-context';
+export { signaturePadAnatomy } from './signature-pad.anatomy';
 export * as SignaturePad from './signature-pad';

package/dist/components/signature-pad/index.d.ts

@@ -4,9 +4,11 @@ export { SignaturePadContext, type SignaturePadContextProps, } from './signature
 export { SignaturePadControl, type SignaturePadControlProps, type SignaturePadControlBaseProps, } from './signature-pad-control';
 export { SignaturePadGuide, type SignaturePadGuideProps, type SignaturePadGuideBaseProps, } from './signature-pad-guide';
 export { SignaturePadLabel, type SignaturePadLabelProps, type SignaturePadLabelBaseProps, } from './signature-pad-label';
+export { SignaturePadHiddenInput, type SignaturePadHiddenInputProps, type SignaturePadHiddenInputBaseProps, } from './signature-pad-hidden-input';
 export { SignaturePadRoot, type SignaturePadRootProps, type SignaturePadRootBaseProps, } from './signature-pad-root';
 export { SignaturePadRootProvider, type SignaturePadRootProviderProps, type SignaturePadRootProviderBaseProps, } from './signature-pad-root-provider';
 export { SignaturePadSegment, type SignaturePadSegmentProps, type SignaturePadSegmentBaseProps, } from './signature-pad-segment';
 export { useSignaturePad, type UseSignaturePadProps, type UseSignaturePadReturn, } from './use-signature-pad';
 export { useSignaturePadContext, type UseSignaturePadContext } from './use-signature-pad-context';
+export { signaturePadAnatomy } from './signature-pad.anatomy';
 export * as SignaturePad from './signature-pad';

package/dist/components/signature-pad/index.js

@@ -3,6 +3,7 @@ export { SignaturePadContext } from './signature-pad-context.js';
 export { SignaturePadControl } from './signature-pad-control.js';
 export { SignaturePadGuide } from './signature-pad-guide.js';
 export { SignaturePadLabel } from './signature-pad-label.js';
+export { SignaturePadHiddenInput } from './signature-pad-hidden-input.js';
 export { SignaturePadRoot } from './signature-pad-root.js';
 export { SignaturePadRootProvider } from './signature-pad-root-provider.js';
 export { SignaturePadSegment } from './signature-pad-segment.js';
@@ -10,3 +11,4 @@ export { useSignaturePad } from './use-signature-pad.js';
 export { useSignaturePadContext } from './use-signature-pad-context.js';
 import * as signaturePad from './signature-pad.js';
 export { signaturePad as SignaturePad };
+export { anatomy as signaturePadAnatomy } from '@zag-js/signature-pad';

package/dist/components/signature-pad/signature-pad-hidden-input.cjs

@@ -0,0 +1,25 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const createSplitProps = require('../../utils/create-split-props.cjs');
+const factory = require('../factory.cjs');
+const useFieldContext = require('../field/use-field-context.cjs');
+const useSignaturePadContext = require('./use-signature-pad-context.cjs');
+
+const SignaturePadHiddenInput = react.forwardRef(
+  (props, ref) => {
+    const [hiddenInputProps, localProps] = createSplitProps.createSplitProps()(props, ["value"]);
+    const signaturePad = useSignaturePadContext.useSignaturePadContext();
+    const mergedProps = react$1.mergeProps(signaturePad.getHiddenInputProps(hiddenInputProps), localProps);
+    const field = useFieldContext.useFieldContext();
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
+  }
+);
+SignaturePadHiddenInput.displayName = "SignaturePadHiddenInput";
+
+exports.SignaturePadHiddenInput = SignaturePadHiddenInput;

package/dist/components/signature-pad/signature-pad-hidden-input.d.cts

@@ -0,0 +1,10 @@
+import { HiddenInputProps } from '@zag-js/signature-pad';
+import { Assign } from '../../types';
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export interface SignaturePadHiddenInputBaseProps extends HiddenInputProps, PolymorphicProps {
+}
+export interface SignaturePadHiddenInputProps extends Assign<HTMLProps<'input'>, SignaturePadHiddenInputBaseProps> {
+}
+export declare const SignaturePadHiddenInput: ForwardRefExoticComponent<SignaturePadHiddenInputProps & RefAttributes<HTMLInputElement>>;