@ark-ui/react 3.4.0-1 → 3.4.0

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

@@ -0,0 +1,19 @@
+'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 factory = require('../factory.cjs');
+const useFieldContext = require('./use-field-context.cjs');
+
+const FieldLabel = react.forwardRef((props, ref) => {
+  const field = useFieldContext.useFieldContext();
+  const mergedProps = react$1.mergeProps(field?.getLabelProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref });
+});
+FieldLabel.displayName = "FieldLabel";
+
+exports.FieldLabel = FieldLabel;

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

@@ -0,0 +1,8 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export interface FieldLabelBaseProps extends PolymorphicProps {
+}
+export interface FieldLabelProps extends HTMLProps<'label'>, FieldLabelBaseProps {
+}
+export declare const FieldLabel: ForwardRefExoticComponent<FieldLabelProps & RefAttributes<HTMLLabelElement>>;

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

@@ -0,0 +1,8 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export interface FieldLabelBaseProps extends PolymorphicProps {
+}
+export interface FieldLabelProps extends HTMLProps<'label'>, FieldLabelBaseProps {
+}
+export declare const FieldLabel: ForwardRefExoticComponent<FieldLabelProps & RefAttributes<HTMLLabelElement>>;

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

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

package/dist/components/field/field-root-provider.cjs

@@ -0,0 +1,22 @@
+'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('./use-field-context.cjs');
+
+const FieldRootProvider = react.forwardRef(
+  (props, ref) => {
+    const [{ value: field }, localProps] = createSplitProps.createSplitProps()(props, ["value"]);
+    const mergedProps = react$1.mergeProps(field.getRootProps(), localProps);
+    return /* @__PURE__ */ jsxRuntime.jsx(useFieldContext.FieldProvider, { value: field, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
+  }
+);
+FieldRootProvider.displayName = "FieldRootProvider";
+
+exports.FieldRootProvider = FieldRootProvider;

package/dist/components/field/field-root-provider.d.cts

@@ -0,0 +1,13 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { UseFieldReturn } from './use-field';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+interface RootProviderProps {
+    value: UseFieldReturn;
+}
+export interface FieldRootProviderBaseProps extends RootProviderProps, PolymorphicProps {
+}
+export interface FieldRootProviderProps extends HTMLProps<'div'>, FieldRootProviderBaseProps {
+}
+export declare const FieldRootProvider: ForwardRefExoticComponent<FieldRootProviderProps & RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/field/field-root-provider.d.ts

@@ -0,0 +1,13 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { UseFieldReturn } from './use-field';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+interface RootProviderProps {
+    value: UseFieldReturn;
+}
+export interface FieldRootProviderBaseProps extends RootProviderProps, PolymorphicProps {
+}
+export interface FieldRootProviderProps extends HTMLProps<'div'>, FieldRootProviderBaseProps {
+}
+export declare const FieldRootProvider: ForwardRefExoticComponent<FieldRootProviderProps & RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/field/field-root-provider.js

@@ -0,0 +1,18 @@
+'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 { FieldProvider } from './use-field-context.js';
+
+const FieldRootProvider = forwardRef(
+  (props, ref) => {
+    const [{ value: field }, localProps] = createSplitProps()(props, ["value"]);
+    const mergedProps = mergeProps(field.getRootProps(), localProps);
+    return /* @__PURE__ */ jsx(FieldProvider, { value: field, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
+  }
+);
+FieldRootProvider.displayName = "FieldRootProvider";
+
+export { FieldRootProvider };

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

@@ -0,0 +1,29 @@
+'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 composeRefs = require('../../utils/compose-refs.cjs');
+const createSplitProps = require('../../utils/create-split-props.cjs');
+const factory = require('../factory.cjs');
+const useField = require('./use-field.cjs');
+const useFieldContext = require('./use-field-context.cjs');
+
+const FieldRoot = react.forwardRef((props, ref) => {
+  const [useFieldProps, localProps] = createSplitProps.createSplitProps()(props, [
+    "id",
+    "disabled",
+    "invalid",
+    "readOnly",
+    "required"
+  ]);
+  const field = useField.useField(useFieldProps);
+  const mergedProps = react$1.mergeProps(field.getRootProps(), localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(useFieldContext.FieldProvider, { value: field, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref: composeRefs.composeRefs(ref, field.refs.rootRef) }) });
+});
+FieldRoot.displayName = "FieldRoot";
+
+exports.FieldRoot = FieldRoot;

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

@@ -0,0 +1,9 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { UseFieldProps } from './use-field';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export interface FieldRootBaseProps extends UseFieldProps, PolymorphicProps {
+}
+export interface FieldRootProps extends HTMLProps<'div'>, FieldRootBaseProps {
+}
+export declare const FieldRoot: ForwardRefExoticComponent<FieldRootProps & RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,9 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { UseFieldProps } from './use-field';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export interface FieldRootBaseProps extends UseFieldProps, PolymorphicProps {
+}
+export interface FieldRootProps extends HTMLProps<'div'>, FieldRootBaseProps {
+}
+export declare const FieldRoot: ForwardRefExoticComponent<FieldRootProps & RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,25 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { composeRefs } from '../../utils/compose-refs.js';
+import { createSplitProps } from '../../utils/create-split-props.js';
+import { ark } from '../factory.js';
+import { useField } from './use-field.js';
+import { FieldProvider } from './use-field-context.js';
+
+const FieldRoot = forwardRef((props, ref) => {
+  const [useFieldProps, localProps] = createSplitProps()(props, [
+    "id",
+    "disabled",
+    "invalid",
+    "readOnly",
+    "required"
+  ]);
+  const field = useField(useFieldProps);
+  const mergedProps = mergeProps(field.getRootProps(), localProps);
+  return /* @__PURE__ */ jsx(FieldProvider, { value: field, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref: composeRefs(ref, field.refs.rootRef) }) });
+});
+FieldRoot.displayName = "FieldRoot";
+
+export { FieldRoot };

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

@@ -0,0 +1,19 @@
+'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 factory = require('../factory.cjs');
+const useFieldContext = require('./use-field-context.cjs');
+
+const FieldSelect = react.forwardRef((props, ref) => {
+  const field = useFieldContext.useFieldContext();
+  const mergedProps = react$1.mergeProps(field?.getSelectProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.select, { ...mergedProps, ref });
+});
+FieldSelect.displayName = "FieldSelect";
+
+exports.FieldSelect = FieldSelect;

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

@@ -0,0 +1,8 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export interface FieldSelectBaseProps extends PolymorphicProps {
+}
+export interface FieldSelectProps extends HTMLProps<'select'>, FieldSelectBaseProps {
+}
+export declare const FieldSelect: ForwardRefExoticComponent<FieldSelectProps & RefAttributes<HTMLSelectElement>>;

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

@@ -0,0 +1,8 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export interface FieldSelectBaseProps extends PolymorphicProps {
+}
+export interface FieldSelectProps extends HTMLProps<'select'>, FieldSelectBaseProps {
+}
+export declare const FieldSelect: ForwardRefExoticComponent<FieldSelectProps & RefAttributes<HTMLSelectElement>>;

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

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

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

@@ -0,0 +1,19 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const core = require('@zag-js/core');
+const react = require('react');
+const factory = require('../factory.cjs');
+const useFieldContext = require('./use-field-context.cjs');
+
+const FieldTextarea = react.forwardRef((props, ref) => {
+  const field = useFieldContext.useFieldContext();
+  const mergedProps = core.mergeProps(field?.getTextareaProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.textarea, { ...mergedProps, ref });
+});
+FieldTextarea.displayName = "FieldTextarea";
+
+exports.FieldTextarea = FieldTextarea;

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

@@ -0,0 +1,8 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export interface FieldTextareaBaseProps extends PolymorphicProps {
+}
+export interface FieldTextareaProps extends HTMLProps<'textarea'>, FieldTextareaBaseProps {
+}
+export declare const FieldTextarea: ForwardRefExoticComponent<FieldTextareaProps & RefAttributes<HTMLTextAreaElement>>;

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

@@ -0,0 +1,8 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export interface FieldTextareaBaseProps extends PolymorphicProps {
+}
+export interface FieldTextareaProps extends HTMLProps<'textarea'>, FieldTextareaBaseProps {
+}
+export declare const FieldTextarea: ForwardRefExoticComponent<FieldTextareaProps & RefAttributes<HTMLTextAreaElement>>;

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.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,29 @@
+'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 = 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.Field = field;

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

@@ -0,0 +1,11 @@
+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 * as Field from './field';

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

@@ -0,0 +1,11 @@
+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 * as Field from './field';

package/dist/components/field/index.js

@@ -0,0 +1,12 @@
+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';
+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,110 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const anatomy = require('@ark-ui/anatomy');
+const domQuery = require('@zag-js/dom-query');
+const react = require('react');
+
+const parts = anatomy.fieldAnatomy.build();
+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 = () => ({
+    ...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;
+
+exports.useField = useField;