@ark-ui/react 3.4.0-1 → 3.4.0

package/dist/components/pin-input/pin-input-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 usePinInputContext = require('./use-pin-input-context.cjs');
 
 const PinInputHiddenInput = react.forwardRef(
   (props, ref) => {
     const pinInput = usePinInputContext.usePinInputContext();
     const mergedProps = react$1.mergeProps(pinInput.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 });
   }
 );
 PinInputHiddenInput.displayName = "PinInputHiddenInput";

package/dist/components/pin-input/pin-input-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 { usePinInputContext } from './use-pin-input-context.js';
 
 const PinInputHiddenInput = forwardRef(
   (props, ref) => {
     const pinInput = usePinInputContext();
     const mergedProps = mergeProps(pinInput.getHiddenInputProps(), props);
-    return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });
+    const field = useFieldContext();
+    return /* @__PURE__ */ jsx(ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
   }
 );
 PinInputHiddenInput.displayName = "PinInputHiddenInput";

package/dist/components/pin-input/pin-input-root.cjs

@@ -29,6 +29,8 @@ const PinInputRoot = react.forwardRef((props, ref) => {
     "otp",
     "pattern",
     "placeholder",
+    "readOnly",
+    "required",
     "selectOnFocus",
     "translations",
     "type",

package/dist/components/pin-input/pin-input-root.js

@@ -25,6 +25,8 @@ const PinInputRoot = forwardRef((props, ref) => {
     "otp",
     "pattern",
     "placeholder",
+    "readOnly",
+    "required",
     "selectOnFocus",
     "translations",
     "type",

package/dist/components/pin-input/use-pin-input.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,8 +33,17 @@ const pinInput__namespace = /*#__PURE__*/_interopNamespaceDefault(pinInput);
 const usePinInput = (props = {}) => {
   const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
   const { dir } = useLocaleContext.useLocaleContext();
+  const field = useFieldContext.useFieldContext();
   const initialContext = {
     id: react.useId(),
+    ids: {
+      label: field?.ids.label,
+      hiddenInput: field?.ids.control
+    },
+    disabled: field?.disabled,
+    readOnly: field?.readOnly,
+    required: field?.required,
+    invalid: field?.invalid,
     dir,
     getRootNode,
     value: props.defaultValue,

package/dist/components/pin-input/use-pin-input.js

@@ -5,12 +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 usePinInput = (props = {}) => {
   const { getRootNode } = useEnvironmentContext();
   const { dir } = useLocaleContext();
+  const field = useFieldContext();
   const initialContext = {
     id: useId(),
+    ids: {
+      label: field?.ids.label,
+      hiddenInput: field?.ids.control
+    },
+    disabled: field?.disabled,
+    readOnly: field?.readOnly,
+    required: field?.required,
+    invalid: field?.invalid,
     dir,
     getRootNode,
     value: props.defaultValue,

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

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

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

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

package/dist/components/portal/portal.cjs

@@ -4,6 +4,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+const domQuery = require('@zag-js/dom-query');
 const react = require('react');
 const reactDom = require('react-dom');
 const useEnvironmentContext = require('../../providers/environment/use-environment-context.cjs');
@@ -14,9 +15,14 @@ const Portal = (props) => {
   const isServer = useIsServer.useIsServer();
   const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
   if (isServer || disabled) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
-  const doc = getRootNode?.().ownerDocument ?? document;
-  const mountNode = container?.current ?? doc.body;
+  const mountNode = container?.current ?? getPortalNode(getRootNode);
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: react.Children.map(children, (child) => reactDom.createPortal(child, mountNode)) });
 };
+function getPortalNode(cb) {
+  const node = cb?.();
+  const rootNode = node.getRootNode();
+  if (domQuery.isShadowRoot(rootNode)) return rootNode;
+  return domQuery.getDocument(node).body;
+}
 
 exports.Portal = Portal;

package/dist/components/portal/portal.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx, Fragment } from 'react/jsx-runtime';
+import { isShadowRoot, getDocument } from '@zag-js/dom-query';
 import { Children } from 'react';
 import { createPortal } from 'react-dom';
 import { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';
@@ -10,9 +11,14 @@ const Portal = (props) => {
   const isServer = useIsServer();
   const { getRootNode } = useEnvironmentContext();
   if (isServer || disabled) return /* @__PURE__ */ jsx(Fragment, { children });
-  const doc = getRootNode?.().ownerDocument ?? document;
-  const mountNode = container?.current ?? doc.body;
+  const mountNode = container?.current ?? getPortalNode(getRootNode);
   return /* @__PURE__ */ jsx(Fragment, { children: Children.map(children, (child) => createPortal(child, mountNode)) });
 };
+function getPortalNode(cb) {
+  const node = cb?.();
+  const rootNode = node.getRootNode();
+  if (isShadowRoot(rootNode)) return rootNode;
+  return getDocument(node).body;
+}
 
 export { Portal };

package/dist/components/rating-group/rating-group-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 useRatingGroupContext = require('./use-rating-group-context.cjs');
 
 const RatingGroupHiddenInput = react.forwardRef(
   (props, ref) => {
     const ratingGroup = useRatingGroupContext.useRatingGroupContext();
     const mergedProps = react$1.mergeProps(ratingGroup.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 });
   }
 );
 RatingGroupHiddenInput.displayName = "RatingGroupHiddenInput";

package/dist/components/rating-group/rating-group-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 { useRatingGroupContext } from './use-rating-group-context.js';
 
 const RatingGroupHiddenInput = forwardRef(
   (props, ref) => {
     const ratingGroup = useRatingGroupContext();
     const mergedProps = mergeProps(ratingGroup.getHiddenInputProps(), props);
-    return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });
+    const field = useFieldContext();
+    return /* @__PURE__ */ jsx(ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
   }
 );
 RatingGroupHiddenInput.displayName = "RatingGroupHiddenInput";

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

@@ -25,6 +25,7 @@ const RatingGroupRoot = react.forwardRef((props, ref) => {
     "onHoverChange",
     "onValueChange",
     "readOnly",
+    "required",
     "translations",
     "value"
   ]);

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

@@ -21,6 +21,7 @@ const RatingGroupRoot = forwardRef((props, ref) => {
     "onHoverChange",
     "onValueChange",
     "readOnly",
+    "required",
     "translations",
     "value"
   ]);

package/dist/components/rating-group/use-rating-group.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 rating__namespace = /*#__PURE__*/_interopNamespaceDefault(rating);
 const useRatingGroup = (props) => {
   const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
   const { dir } = useLocaleContext.useLocaleContext();
+  const field = useFieldContext.useFieldContext();
   const initialContext = {
     id: react.useId(),
+    ids: {
+      label: field?.ids.label,
+      hiddenInput: field?.ids.control
+    },
     dir,
+    disabled: field?.disabled,
+    readOnly: field?.readOnly,
+    required: field?.required,
     getRootNode,
     value: props.defaultValue,
     ...props

package/dist/components/rating-group/use-rating-group.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 useRatingGroup = (props) => {
   const { getRootNode } = useEnvironmentContext();
   const { dir } = useLocaleContext();
+  const field = useFieldContext();
   const initialContext = {
     id: useId(),
+    ids: {
+      label: field?.ids.label,
+      hiddenInput: field?.ids.control
+    },
     dir,
+    disabled: field?.disabled,
+    readOnly: field?.readOnly,
+    required: field?.required,
     getRootNode,
     value: props.defaultValue,
     ...props

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,7 +15,8 @@ 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))
     ] });

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,7 +11,8 @@ 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))
     ] });

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/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,6 +7,7 @@ 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');
@@ -21,6 +22,7 @@ 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;

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

@@ -4,6 +4,7 @@ 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';

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

@@ -4,6 +4,7 @@ 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';

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';

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>>;

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

@@ -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>>;

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

@@ -0,0 +1,21 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { createSplitProps } from '../../utils/create-split-props.js';
+import { ark } from '../factory.js';
+import { useFieldContext } from '../field/use-field-context.js';
+import { useSignaturePadContext } from './use-signature-pad-context.js';
+
+const SignaturePadHiddenInput = forwardRef(
+  (props, ref) => {
+    const [hiddenInputProps, localProps] = createSplitProps()(props, ["value"]);
+    const signaturePad = useSignaturePadContext();
+    const mergedProps = mergeProps(signaturePad.getHiddenInputProps(hiddenInputProps), localProps);
+    const field = useFieldContext();
+    return /* @__PURE__ */ jsx(ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
+  }
+);
+SignaturePadHiddenInput.displayName = "SignaturePadHiddenInput";
+
+export { SignaturePadHiddenInput };

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

@@ -20,7 +20,10 @@ const SignaturePadRoot = react.forwardRef((props, ref) => {
     "readOnly",
     "name",
     "onDraw",
-    "onDrawEnd"
+    "onDrawEnd",
+    "readOnly",
+    "required",
+    "translations"
   ]);
   const signaturePad = useSignaturePad.useSignaturePad(useSignaturePadProps);
   const mergedProps = react$1.mergeProps(signaturePad.getRootProps(), localProps);

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

@@ -16,7 +16,10 @@ const SignaturePadRoot = forwardRef((props, ref) => {
     "readOnly",
     "name",
     "onDraw",
-    "onDrawEnd"
+    "onDrawEnd",
+    "readOnly",
+    "required",
+    "translations"
   ]);
   const signaturePad = useSignaturePad(useSignaturePadProps);
   const mergedProps = mergeProps(signaturePad.getRootProps(), localProps);

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

@@ -6,6 +6,7 @@ const signaturePadClearTrigger = require('./signature-pad-clear-trigger.cjs');
 const signaturePadContext = require('./signature-pad-context.cjs');
 const signaturePadControl = require('./signature-pad-control.cjs');
 const signaturePadGuide = require('./signature-pad-guide.cjs');
+const signaturePadHiddenInput = require('./signature-pad-hidden-input.cjs');
 const signaturePadLabel = require('./signature-pad-label.cjs');
 const signaturePadRoot = require('./signature-pad-root.cjs');
 const signaturePadRootProvider = require('./signature-pad-root-provider.cjs');
@@ -17,6 +18,7 @@ exports.ClearTrigger = signaturePadClearTrigger.SignaturePadClearTrigger;
 exports.Context = signaturePadContext.SignaturePadContext;
 exports.Control = signaturePadControl.SignaturePadControl;
 exports.Guide = signaturePadGuide.SignaturePadGuide;
+exports.HiddenInput = signaturePadHiddenInput.SignaturePadHiddenInput;
 exports.Label = signaturePadLabel.SignaturePadLabel;
 exports.Root = signaturePadRoot.SignaturePadRoot;
 exports.RootProvider = signaturePadRootProvider.SignaturePadRootProvider;

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

@@ -3,6 +3,7 @@ export { SignaturePadClearTrigger as ClearTrigger, type SignaturePadClearTrigger
 export { SignaturePadContext as Context, type SignaturePadContextProps as ContextProps, } from './signature-pad-context';
 export { SignaturePadControl as Control, type SignaturePadControlProps as ControlProps, type SignaturePadControlBaseProps as ControlBaseProps, } from './signature-pad-control';
 export { SignaturePadGuide as Guide, type SignaturePadGuideProps as GuideProps, type SignaturePadGuideBaseProps as GuideBaseProps, } from './signature-pad-guide';
+export { SignaturePadHiddenInput as HiddenInput, type SignaturePadHiddenInputProps as HiddenInputProps, type SignaturePadHiddenInputBaseProps as HiddenInputBaseProps, } from './signature-pad-hidden-input';
 export { SignaturePadLabel as Label, type SignaturePadLabelProps as LabelProps, type SignaturePadLabelBaseProps as LabelBaseProps, } from './signature-pad-label';
 export { SignaturePadRoot as Root, type SignaturePadRootProps as RootProps, type SignaturePadRootBaseProps as RootBaseProps, } from './signature-pad-root';
 export { SignaturePadRootProvider as RootProvider, type SignaturePadRootProviderProps as RootProviderProps, type SignaturePadRootProviderBaseProps as RootProviderBaseProps, } from './signature-pad-root-provider';

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

@@ -3,6 +3,7 @@ export { SignaturePadClearTrigger as ClearTrigger, type SignaturePadClearTrigger
 export { SignaturePadContext as Context, type SignaturePadContextProps as ContextProps, } from './signature-pad-context';
 export { SignaturePadControl as Control, type SignaturePadControlProps as ControlProps, type SignaturePadControlBaseProps as ControlBaseProps, } from './signature-pad-control';
 export { SignaturePadGuide as Guide, type SignaturePadGuideProps as GuideProps, type SignaturePadGuideBaseProps as GuideBaseProps, } from './signature-pad-guide';
+export { SignaturePadHiddenInput as HiddenInput, type SignaturePadHiddenInputProps as HiddenInputProps, type SignaturePadHiddenInputBaseProps as HiddenInputBaseProps, } from './signature-pad-hidden-input';
 export { SignaturePadLabel as Label, type SignaturePadLabelProps as LabelProps, type SignaturePadLabelBaseProps as LabelBaseProps, } from './signature-pad-label';
 export { SignaturePadRoot as Root, type SignaturePadRootProps as RootProps, type SignaturePadRootBaseProps as RootBaseProps, } from './signature-pad-root';
 export { SignaturePadRootProvider as RootProvider, type SignaturePadRootProviderProps as RootProviderProps, type SignaturePadRootProviderBaseProps as RootProviderBaseProps, } from './signature-pad-root-provider';

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

@@ -2,6 +2,7 @@ export { SignaturePadClearTrigger as ClearTrigger } from './signature-pad-clear-
 export { SignaturePadContext as Context } from './signature-pad-context.js';
 export { SignaturePadControl as Control } from './signature-pad-control.js';
 export { SignaturePadGuide as Guide } from './signature-pad-guide.js';
+export { SignaturePadHiddenInput as HiddenInput } from './signature-pad-hidden-input.js';
 export { SignaturePadLabel as Label } from './signature-pad-label.js';
 export { SignaturePadRoot as Root } from './signature-pad-root.js';
 export { SignaturePadRootProvider as RootProvider } from './signature-pad-root-provider.js';

package/dist/components/signature-pad/use-signature-pad.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 signaturePad__namespace = /*#__PURE__*/_interopNamespaceDefault(signatureP
 const useSignaturePad = (props) => {
   const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
   const { dir } = useLocaleContext.useLocaleContext();
+  const field = useFieldContext.useFieldContext();
   const initialContext = {
     id: react.useId(),
+    ids: {
+      label: field?.ids.label,
+      hiddenInput: field?.ids.control
+    },
     dir,
+    disabled: field?.disabled,
+    readOnly: field?.readOnly,
+    required: field?.required,
     getRootNode,
     ...props
   };

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