@ark-ui/react/dist/components/field/field-item.js

A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.

'use client';
import { jsx } from 'react/jsx-runtime';
import { useMemo } from 'react';
import { parts } from './field.anatomy.js';
import { useFieldContext, FieldProvider } from './use-field-context.js';

const FieldItem = (props) => {
  const { value, children } = props;
  const parentField = useFieldContext();
  const itemField = useMemo(() => {
    if (!parentField) {
      throw new Error("Field.Item must be used within Field.Root");
    }
    const controlId = `field::${parentField.ids.control}::item::${value}`;
    const labelId = `${controlId}::label`;
    const getControlProps = () => ({
      ...parentField.getInputProps(),
      id: controlId
    });
    return {
      ...parentField,
      ids: {
        ...parentField.ids,
        control: controlId,
        label: labelId
      },
      getLabelProps: () => ({
        ...parentField.getLabelProps(),
        id: labelId,
        htmlFor: controlId
      }),
      getInputProps: () => ({
        ...getControlProps(),
        ...parts.input.attrs
      }),
      getSelectProps: () => ({
        ...getControlProps(),
        ...parts.select.attrs
      }),
      getTextareaProps: () => ({
        ...getControlProps(),
        ...parts.textarea.attrs
      })
    };
  }, [parentField, value]);
  return /* @__PURE__ */ jsx(FieldProvider, { value: itemField, children });
};
FieldItem.displayName = "FieldItem";

export { FieldItem };