@ark-ui/react 3.4.0-1 → 3.5.0

package/dist/components/field/field-textarea.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/core';
+import { forwardRef } from 'react';
+import { ark } from '../factory.js';
+import { useFieldContext } from './use-field-context.js';
+
+const FieldTextarea = forwardRef((props, ref) => {
+  const field = useFieldContext();
+  const mergedProps = mergeProps(field?.getTextareaProps(), props);
+  return /* @__PURE__ */ jsx(ark.textarea, { ...mergedProps, ref });
+});
+FieldTextarea.displayName = "FieldTextarea";
+
+export { FieldTextarea };

package/dist/components/field/field.anatomy.cjs

@@ -0,0 +1,20 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const anatomy = require('@zag-js/anatomy');
+
+const fieldAnatomy = anatomy.createAnatomy("field").parts(
+  "root",
+  "errorText",
+  "helperText",
+  "input",
+  "label",
+  "select",
+  "textarea"
+);
+const parts = fieldAnatomy.build();
+
+exports.fieldAnatomy = fieldAnatomy;
+exports.parts = parts;

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

@@ -0,0 +1,3 @@
+import { AnatomyInstance, AnatomyPart } from '@zag-js/anatomy';
+export declare const fieldAnatomy: AnatomyInstance<"input" | "label" | "select" | "textarea" | "root" | "errorText" | "helperText">;
+export declare const parts: Record<"input" | "label" | "select" | "textarea" | "root" | "errorText" | "helperText", AnatomyPart>;

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

@@ -0,0 +1,3 @@
+import { AnatomyInstance, AnatomyPart } from '@zag-js/anatomy';
+export declare const fieldAnatomy: AnatomyInstance<"input" | "label" | "select" | "textarea" | "root" | "errorText" | "helperText">;
+export declare const parts: Record<"input" | "label" | "select" | "textarea" | "root" | "errorText" | "helperText", AnatomyPart>;

package/dist/components/field/field.anatomy.js

@@ -0,0 +1,15 @@
+'use client';
+import { createAnatomy } from '@zag-js/anatomy';
+
+const fieldAnatomy = createAnatomy("field").parts(
+  "root",
+  "errorText",
+  "helperText",
+  "input",
+  "label",
+  "select",
+  "textarea"
+);
+const parts = fieldAnatomy.build();
+
+export { fieldAnatomy, parts };

package/dist/components/field/field.cjs

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const fieldRoot = require('./field-root.cjs');
+const fieldRootProvider = require('./field-root-provider.cjs');
+const fieldLabel = require('./field-label.cjs');
+const fieldInput = require('./field-input.cjs');
+const fieldTextarea = require('./field-textarea.cjs');
+const fieldSelect = require('./field-select.cjs');
+const fieldHelperText = require('./field-helper-text.cjs');
+const fieldErrorText = require('./field-error-text.cjs');
+const fieldContext = require('./field-context.cjs');
+
+
+
+exports.Root = fieldRoot.FieldRoot;
+exports.RootProvider = fieldRootProvider.FieldRootProvider;
+exports.Label = fieldLabel.FieldLabel;
+exports.Input = fieldInput.FieldInput;
+exports.Textarea = fieldTextarea.FieldTextarea;
+exports.Select = fieldSelect.FieldSelect;
+exports.HelperText = fieldHelperText.FieldHelperText;
+exports.ErrorText = fieldErrorText.FieldErrorText;
+exports.Context = fieldContext.FieldContext;

package/dist/components/field/field.d.cts

@@ -0,0 +1,9 @@
+export { FieldRoot as Root, type FieldRootProps as RootProps, type FieldRootBaseProps as RootBaseProps, } from './field-root';
+export { FieldRootProvider as RootProvider, type FieldRootProviderProps as RootProviderProps, type FieldRootProviderBaseProps as RootProviderBaseProps, } from './field-root-provider';
+export { FieldLabel as Label, type FieldLabelProps as LabelProps, type FieldLabelBaseProps as LabelBaseProps, } from './field-label';
+export { FieldInput as Input, type FieldInputProps as InputProps, type FieldInputBaseProps as InputBaseProps, } from './field-input';
+export { FieldTextarea as Textarea, type FieldTextareaProps as TextareaProps, type FieldTextareaBaseProps as TextareaBaseProps, } from './field-textarea';
+export { FieldSelect as Select, type FieldSelectProps as SelectProps, type FieldSelectBaseProps as SelectBaseProps, } from './field-select';
+export { FieldHelperText as HelperText, type FieldHelperTextProps as HelperTextProps, type FieldHelperTextBaseProps as HelperTextBaseProps, } from './field-helper-text';
+export { FieldErrorText as ErrorText, type FieldErrorTextProps as ErrorTextProps, type FieldErrorTextBaseProps as ErrorTextBaseProps, } from './field-error-text';
+export { FieldContext as Context, type FieldContextProps as ContextProps } from './field-context';

package/dist/components/field/field.d.ts

@@ -0,0 +1,9 @@
+export { FieldRoot as Root, type FieldRootProps as RootProps, type FieldRootBaseProps as RootBaseProps, } from './field-root';
+export { FieldRootProvider as RootProvider, type FieldRootProviderProps as RootProviderProps, type FieldRootProviderBaseProps as RootProviderBaseProps, } from './field-root-provider';
+export { FieldLabel as Label, type FieldLabelProps as LabelProps, type FieldLabelBaseProps as LabelBaseProps, } from './field-label';
+export { FieldInput as Input, type FieldInputProps as InputProps, type FieldInputBaseProps as InputBaseProps, } from './field-input';
+export { FieldTextarea as Textarea, type FieldTextareaProps as TextareaProps, type FieldTextareaBaseProps as TextareaBaseProps, } from './field-textarea';
+export { FieldSelect as Select, type FieldSelectProps as SelectProps, type FieldSelectBaseProps as SelectBaseProps, } from './field-select';
+export { FieldHelperText as HelperText, type FieldHelperTextProps as HelperTextProps, type FieldHelperTextBaseProps as HelperTextBaseProps, } from './field-helper-text';
+export { FieldErrorText as ErrorText, type FieldErrorTextProps as ErrorTextProps, type FieldErrorTextBaseProps as ErrorTextBaseProps, } from './field-error-text';
+export { FieldContext as Context, type FieldContextProps as ContextProps } from './field-context';

package/dist/components/field/field.js

@@ -0,0 +1,9 @@
+export { FieldRoot as Root } from './field-root.js';
+export { FieldRootProvider as RootProvider } from './field-root-provider.js';
+export { FieldLabel as Label } from './field-label.js';
+export { FieldInput as Input } from './field-input.js';
+export { FieldTextarea as Textarea } from './field-textarea.js';
+export { FieldSelect as Select } from './field-select.js';
+export { FieldHelperText as HelperText } from './field-helper-text.js';
+export { FieldErrorText as ErrorText } from './field-error-text.js';
+export { FieldContext as Context } from './field-context.js';

package/dist/components/field/index.cjs

@@ -0,0 +1,31 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const fieldContext = require('./field-context.cjs');
+const fieldErrorText = require('./field-error-text.cjs');
+const fieldHelperText = require('./field-helper-text.cjs');
+const fieldInput = require('./field-input.cjs');
+const fieldLabel = require('./field-label.cjs');
+const fieldSelect = require('./field-select.cjs');
+const fieldRoot = require('./field-root.cjs');
+const fieldRootProvider = require('./field-root-provider.cjs');
+const fieldTextarea = require('./field-textarea.cjs');
+const useFieldContext = require('./use-field-context.cjs');
+const field_anatomy = require('./field.anatomy.cjs');
+const field = require('./field.cjs');
+
+
+
+exports.FieldContext = fieldContext.FieldContext;
+exports.FieldErrorText = fieldErrorText.FieldErrorText;
+exports.FieldHelperText = fieldHelperText.FieldHelperText;
+exports.FieldInput = fieldInput.FieldInput;
+exports.FieldLabel = fieldLabel.FieldLabel;
+exports.FieldSelect = fieldSelect.FieldSelect;
+exports.FieldRoot = fieldRoot.FieldRoot;
+exports.FieldRootProvider = fieldRootProvider.FieldRootProvider;
+exports.FieldTextarea = fieldTextarea.FieldTextarea;
+exports.useFieldContext = useFieldContext.useFieldContext;
+exports.fieldAnatomy = field_anatomy.fieldAnatomy;
+exports.Field = field;

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

@@ -0,0 +1,12 @@
+export { FieldContext, type FieldContextProps } from './field-context';
+export { FieldErrorText, type FieldErrorTextBaseProps, type FieldErrorTextProps, } from './field-error-text';
+export { FieldHelperText, type FieldHelperTextBaseProps, type FieldHelperTextProps, } from './field-helper-text';
+export { FieldInput, type FieldInputBaseProps, type FieldInputProps } from './field-input';
+export { FieldLabel, type FieldLabelBaseProps, type FieldLabelProps } from './field-label';
+export { FieldSelect, type FieldSelectBaseProps, type FieldSelectProps } from './field-select';
+export { FieldRoot, type FieldRootBaseProps, type FieldRootProps } from './field-root';
+export { FieldRootProvider, type FieldRootProviderBaseProps, type FieldRootProviderProps, } from './field-root-provider';
+export { FieldTextarea, type FieldTextareaBaseProps, type FieldTextareaProps, } from './field-textarea';
+export { useFieldContext, type UseFieldContext } from './use-field-context';
+export { fieldAnatomy } from './field.anatomy';
+export * as Field from './field';

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

@@ -0,0 +1,12 @@
+export { FieldContext, type FieldContextProps } from './field-context';
+export { FieldErrorText, type FieldErrorTextBaseProps, type FieldErrorTextProps, } from './field-error-text';
+export { FieldHelperText, type FieldHelperTextBaseProps, type FieldHelperTextProps, } from './field-helper-text';
+export { FieldInput, type FieldInputBaseProps, type FieldInputProps } from './field-input';
+export { FieldLabel, type FieldLabelBaseProps, type FieldLabelProps } from './field-label';
+export { FieldSelect, type FieldSelectBaseProps, type FieldSelectProps } from './field-select';
+export { FieldRoot, type FieldRootBaseProps, type FieldRootProps } from './field-root';
+export { FieldRootProvider, type FieldRootProviderBaseProps, type FieldRootProviderProps, } from './field-root-provider';
+export { FieldTextarea, type FieldTextareaBaseProps, type FieldTextareaProps, } from './field-textarea';
+export { useFieldContext, type UseFieldContext } from './use-field-context';
+export { fieldAnatomy } from './field.anatomy';
+export * as Field from './field';

package/dist/components/field/index.js

@@ -0,0 +1,13 @@
+export { FieldContext } from './field-context.js';
+export { FieldErrorText } from './field-error-text.js';
+export { FieldHelperText } from './field-helper-text.js';
+export { FieldInput } from './field-input.js';
+export { FieldLabel } from './field-label.js';
+export { FieldSelect } from './field-select.js';
+export { FieldRoot } from './field-root.js';
+export { FieldRootProvider } from './field-root-provider.js';
+export { FieldTextarea } from './field-textarea.js';
+export { useFieldContext } from './use-field-context.js';
+export { fieldAnatomy } from './field.anatomy.js';
+import * as field from './field.js';
+export { field as Field };

package/dist/components/field/use-field-context.cjs

@@ -0,0 +1,16 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const createContext = require('../../utils/create-context.cjs');
+
+const [FieldProvider, useFieldContext] = createContext.createContext({
+  name: "FieldContext",
+  hookName: "useFieldContext",
+  providerName: "<FieldProvider />",
+  strict: false
+});
+
+exports.FieldProvider = FieldProvider;
+exports.useFieldContext = useFieldContext;

package/dist/components/field/use-field-context.d.cts

@@ -0,0 +1,6 @@
+import { UseFieldReturn } from './use-field';
+import { Provider } from 'react';
+
+export interface UseFieldContext extends UseFieldReturn {
+}
+export declare const FieldProvider: Provider<UseFieldContext>, useFieldContext: () => UseFieldContext;

package/dist/components/field/use-field-context.d.ts

@@ -0,0 +1,6 @@
+import { UseFieldReturn } from './use-field';
+import { Provider } from 'react';
+
+export interface UseFieldContext extends UseFieldReturn {
+}
+export declare const FieldProvider: Provider<UseFieldContext>, useFieldContext: () => UseFieldContext;

package/dist/components/field/use-field-context.js

@@ -0,0 +1,11 @@
+'use client';
+import { createContext } from '../../utils/create-context.js';
+
+const [FieldProvider, useFieldContext] = createContext({
+  name: "FieldContext",
+  hookName: "useFieldContext",
+  providerName: "<FieldProvider />",
+  strict: false
+});
+
+export { FieldProvider, useFieldContext };

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

@@ -0,0 +1,109 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const domQuery = require('@zag-js/dom-query');
+const react = require('react');
+const field_anatomy = require('./field.anatomy.cjs');
+
+const useField = (props) => {
+  const { required = false, disabled = false, invalid = false, readOnly = false } = props;
+  const [hasErrorText, setHasErrorText] = react.useState(false);
+  const [hasHelperText, setHasHelperText] = react.useState(false);
+  const id = props.id ?? react.useId();
+  const rootRef = react.useRef(null);
+  const errorTextId = `field::${id}::error-text`;
+  const helperTextId = `field::${id}::helper-text`;
+  const labelId = `field::${id}::label`;
+  react.useLayoutEffect(() => {
+    const rootNode = rootRef.current;
+    if (!rootNode) return;
+    const win = domQuery.getWindow(rootNode);
+    const doc = win.document;
+    const checkTextElements = () => {
+      setHasErrorText(!!doc.getElementById(errorTextId));
+      setHasHelperText(!!doc.getElementById(helperTextId));
+    };
+    checkTextElements();
+    const observer = new win.MutationObserver(checkTextElements);
+    observer.observe(rootNode, { childList: true, subtree: true });
+    return () => observer.disconnect();
+  }, [errorTextId, helperTextId]);
+  const getRootProps = () => ({
+    ...field_anatomy.parts.root.attrs,
+    role: "group",
+    "data-disabled": dataAttr(disabled),
+    "data-invalid": dataAttr(invalid),
+    "data-readonly": dataAttr(readOnly)
+  });
+  const getLabelProps = () => ({
+    ...field_anatomy.parts.label.attrs,
+    id: labelId,
+    "data-disabled": dataAttr(disabled),
+    "data-invalid": dataAttr(invalid),
+    "data-readonly": dataAttr(readOnly),
+    htmlFor: id
+  });
+  const labelIds = [];
+  if (hasErrorText && invalid) labelIds.push(errorTextId);
+  if (hasHelperText) labelIds.push(helperTextId);
+  const getControlProps = () => ({
+    "aria-describedby": labelIds.join(" ") || void 0,
+    "aria-invalid": ariaAttr(invalid),
+    "aria-required": ariaAttr(required),
+    "aria-readonly": ariaAttr(readOnly),
+    id,
+    required,
+    disabled,
+    readOnly
+  });
+  const getInputProps = () => ({
+    ...getControlProps(),
+    ...field_anatomy.parts.input.attrs
+  });
+  const getTextareaProps = () => ({
+    ...getControlProps(),
+    ...field_anatomy.parts.textarea.attrs
+  });
+  const getSelectProps = () => ({
+    ...getControlProps(),
+    ...field_anatomy.parts.select.attrs
+  });
+  const getHelperTextProps = () => ({
+    id: helperTextId,
+    ...field_anatomy.parts.helperText.attrs
+  });
+  const getErrorTextProps = () => ({
+    id: errorTextId,
+    ...field_anatomy.parts.errorText.attrs,
+    "aria-live": "polite"
+  });
+  return {
+    ariaDescribedby: labelIds.join(" "),
+    ids: {
+      control: id,
+      label: labelId,
+      errorText: errorTextId,
+      helperText: helperTextId
+    },
+    refs: {
+      rootRef
+    },
+    disabled,
+    invalid,
+    readOnly,
+    required,
+    getLabelProps,
+    getRootProps,
+    getInputProps,
+    getTextareaProps,
+    getSelectProps,
+    getHelperTextProps,
+    getErrorTextProps
+  };
+};
+const dataAttr = (condition) => condition ? "" : void 0;
+const ariaAttr = (condition) => condition ? true : void 0;
+
+exports.useField = useField;

package/dist/components/field/use-field.d.cts

@@ -0,0 +1,100 @@
+import { HTMLProps } from '../factory';
+import { RefObject } from 'react';
+
+export interface UseFieldProps {
+    id?: string;
+    /**
+     * Indicates whether the field is required.
+     */
+    required?: boolean;
+    /**
+     * Indicates whether the field is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Indicates whether the field is invalid.
+     */
+    invalid?: boolean;
+    /**
+     * Indicates whether the field is read-only.
+     */
+    readOnly?: boolean;
+}
+export type UseFieldReturn = ReturnType<typeof useField>;
+export declare const useField: (props: UseFieldProps) => {
+    ariaDescribedby: string;
+    ids: {
+        control: string;
+        label: string;
+        errorText: string;
+        helperText: string;
+    };
+    refs: {
+        rootRef: RefObject<HTMLDivElement>;
+    };
+    disabled: boolean;
+    invalid: boolean;
+    readOnly: boolean;
+    required: boolean;
+    getLabelProps: () => {
+        id: string;
+        'data-disabled': Booleanish;
+        'data-invalid': Booleanish;
+        'data-readonly': Booleanish;
+        htmlFor: string;
+        "data-scope": string;
+        "data-part": string;
+    };
+    getRootProps: () => {
+        role: string;
+        'data-disabled': Booleanish;
+        'data-invalid': Booleanish;
+        'data-readonly': Booleanish;
+        "data-scope": string;
+        "data-part": string;
+    };
+    getInputProps: () => {
+        "data-scope": string;
+        "data-part": string;
+        'aria-describedby': string | undefined;
+        'aria-invalid': boolean | undefined;
+        'aria-required': boolean | undefined;
+        'aria-readonly': boolean | undefined;
+        id: string;
+        required: boolean;
+        disabled: boolean;
+        readOnly: boolean;
+    };
+    getTextareaProps: () => {
+        "data-scope": string;
+        "data-part": string;
+        'aria-describedby': string | undefined;
+        'aria-invalid': boolean | undefined;
+        'aria-required': boolean | undefined;
+        'aria-readonly': boolean | undefined;
+        id: string;
+        required: boolean;
+        disabled: boolean;
+        readOnly: boolean;
+    };
+    getSelectProps: () => {
+        "data-scope": string;
+        "data-part": string;
+        'aria-describedby': string | undefined;
+        'aria-invalid': boolean | undefined;
+        'aria-required': boolean | undefined;
+        'aria-readonly': boolean | undefined;
+        id: string;
+        required: boolean;
+        disabled: boolean;
+        readOnly: boolean;
+    };
+    getHelperTextProps: () => {
+        "data-scope": string;
+        "data-part": string;
+        id: string;
+    };
+    getErrorTextProps: () => HTMLProps<"span">;
+};
+type Booleanish = boolean | 'true' | 'false';
+export {};

package/dist/components/field/use-field.d.ts

@@ -0,0 +1,100 @@
+import { HTMLProps } from '../factory';
+import { RefObject } from 'react';
+
+export interface UseFieldProps {
+    id?: string;
+    /**
+     * Indicates whether the field is required.
+     */
+    required?: boolean;
+    /**
+     * Indicates whether the field is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Indicates whether the field is invalid.
+     */
+    invalid?: boolean;
+    /**
+     * Indicates whether the field is read-only.
+     */
+    readOnly?: boolean;
+}
+export type UseFieldReturn = ReturnType<typeof useField>;
+export declare const useField: (props: UseFieldProps) => {
+    ariaDescribedby: string;
+    ids: {
+        control: string;
+        label: string;
+        errorText: string;
+        helperText: string;
+    };
+    refs: {
+        rootRef: RefObject<HTMLDivElement>;
+    };
+    disabled: boolean;
+    invalid: boolean;
+    readOnly: boolean;
+    required: boolean;
+    getLabelProps: () => {
+        id: string;
+        'data-disabled': Booleanish;
+        'data-invalid': Booleanish;
+        'data-readonly': Booleanish;
+        htmlFor: string;
+        "data-scope": string;
+        "data-part": string;
+    };
+    getRootProps: () => {
+        role: string;
+        'data-disabled': Booleanish;
+        'data-invalid': Booleanish;
+        'data-readonly': Booleanish;
+        "data-scope": string;
+        "data-part": string;
+    };
+    getInputProps: () => {
+        "data-scope": string;
+        "data-part": string;
+        'aria-describedby': string | undefined;
+        'aria-invalid': boolean | undefined;
+        'aria-required': boolean | undefined;
+        'aria-readonly': boolean | undefined;
+        id: string;
+        required: boolean;
+        disabled: boolean;
+        readOnly: boolean;
+    };
+    getTextareaProps: () => {
+        "data-scope": string;
+        "data-part": string;
+        'aria-describedby': string | undefined;
+        'aria-invalid': boolean | undefined;
+        'aria-required': boolean | undefined;
+        'aria-readonly': boolean | undefined;
+        id: string;
+        required: boolean;
+        disabled: boolean;
+        readOnly: boolean;
+    };
+    getSelectProps: () => {
+        "data-scope": string;
+        "data-part": string;
+        'aria-describedby': string | undefined;
+        'aria-invalid': boolean | undefined;
+        'aria-required': boolean | undefined;
+        'aria-readonly': boolean | undefined;
+        id: string;
+        required: boolean;
+        disabled: boolean;
+        readOnly: boolean;
+    };
+    getHelperTextProps: () => {
+        "data-scope": string;
+        "data-part": string;
+        id: string;
+    };
+    getErrorTextProps: () => HTMLProps<"span">;
+};
+type Booleanish = boolean | 'true' | 'false';
+export {};

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

@@ -0,0 +1,105 @@
+'use client';
+import { getWindow } from '@zag-js/dom-query';
+import { useState, useId, useRef, useLayoutEffect } from 'react';
+import { parts } from './field.anatomy.js';
+
+const useField = (props) => {
+  const { required = false, disabled = false, invalid = false, readOnly = false } = props;
+  const [hasErrorText, setHasErrorText] = useState(false);
+  const [hasHelperText, setHasHelperText] = useState(false);
+  const id = props.id ?? useId();
+  const rootRef = useRef(null);
+  const errorTextId = `field::${id}::error-text`;
+  const helperTextId = `field::${id}::helper-text`;
+  const labelId = `field::${id}::label`;
+  useLayoutEffect(() => {
+    const rootNode = rootRef.current;
+    if (!rootNode) return;
+    const win = getWindow(rootNode);
+    const doc = win.document;
+    const checkTextElements = () => {
+      setHasErrorText(!!doc.getElementById(errorTextId));
+      setHasHelperText(!!doc.getElementById(helperTextId));
+    };
+    checkTextElements();
+    const observer = new win.MutationObserver(checkTextElements);
+    observer.observe(rootNode, { childList: true, subtree: true });
+    return () => observer.disconnect();
+  }, [errorTextId, helperTextId]);
+  const getRootProps = () => ({
+    ...parts.root.attrs,
+    role: "group",
+    "data-disabled": dataAttr(disabled),
+    "data-invalid": dataAttr(invalid),
+    "data-readonly": dataAttr(readOnly)
+  });
+  const getLabelProps = () => ({
+    ...parts.label.attrs,
+    id: labelId,
+    "data-disabled": dataAttr(disabled),
+    "data-invalid": dataAttr(invalid),
+    "data-readonly": dataAttr(readOnly),
+    htmlFor: id
+  });
+  const labelIds = [];
+  if (hasErrorText && invalid) labelIds.push(errorTextId);
+  if (hasHelperText) labelIds.push(helperTextId);
+  const getControlProps = () => ({
+    "aria-describedby": labelIds.join(" ") || void 0,
+    "aria-invalid": ariaAttr(invalid),
+    "aria-required": ariaAttr(required),
+    "aria-readonly": ariaAttr(readOnly),
+    id,
+    required,
+    disabled,
+    readOnly
+  });
+  const getInputProps = () => ({
+    ...getControlProps(),
+    ...parts.input.attrs
+  });
+  const getTextareaProps = () => ({
+    ...getControlProps(),
+    ...parts.textarea.attrs
+  });
+  const getSelectProps = () => ({
+    ...getControlProps(),
+    ...parts.select.attrs
+  });
+  const getHelperTextProps = () => ({
+    id: helperTextId,
+    ...parts.helperText.attrs
+  });
+  const getErrorTextProps = () => ({
+    id: errorTextId,
+    ...parts.errorText.attrs,
+    "aria-live": "polite"
+  });
+  return {
+    ariaDescribedby: labelIds.join(" "),
+    ids: {
+      control: id,
+      label: labelId,
+      errorText: errorTextId,
+      helperText: helperTextId
+    },
+    refs: {
+      rootRef
+    },
+    disabled,
+    invalid,
+    readOnly,
+    required,
+    getLabelProps,
+    getRootProps,
+    getInputProps,
+    getTextareaProps,
+    getSelectProps,
+    getHelperTextProps,
+    getErrorTextProps
+  };
+};
+const dataAttr = (condition) => condition ? "" : void 0;
+const ariaAttr = (condition) => condition ? true : void 0;
+
+export { useField };