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

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

'use client';
'use strict';

Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });

const jsxRuntime = require('react/jsx-runtime');
const react = require('react');
const field_anatomy = require('./field.anatomy.cjs');
const useFieldContext = require('./use-field-context.cjs');

const FieldItem = (props) => {
  const { value, children } = props;
  const parentField = useFieldContext.useFieldContext();
  const itemField = react.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(),
        ...field_anatomy.parts.input.attrs
      }),
      getSelectProps: () => ({
        ...getControlProps(),
        ...field_anatomy.parts.select.attrs
      }),
      getTextareaProps: () => ({
        ...getControlProps(),
        ...field_anatomy.parts.textarea.attrs
      })
    };
  }, [parentField, value]);
  return /* @__PURE__ */ jsxRuntime.jsx(useFieldContext.FieldProvider, { value: itemField, children });
};
FieldItem.displayName = "FieldItem";

exports.FieldItem = FieldItem;