"use strict";

import React, { memo } from 'react';
import { View } from 'react-native';
import { useTheme } from "../theme/use-theme.js";
import { Text } from "../typography/index.js";
import { Label } from "../label/index.js";
import { atoms as a } from "../styles/index.js";
import { fontSize, space } from "../styles/tokens.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * Standalone form-field wrapper: an optional `Label`, the control (passed as
 * `children`), and a description **or** error message below it. Composes
 * Bloom's `Label`. Unlike `TextField` — which bakes its label/error into the
 * input chrome — `Field` wraps any arbitrary control (a `Switch`, a
 * `SegmentedControl`, a custom picker, etc.).
 */
const FieldComponent = function Field({
  children,
  label,
  description,
  error,
  required = false,
  disabled = false,
  nativeID,
  style,
  testID
}) {
  const theme = useTheme();
  const hasError = typeof error === 'string' && error.length > 0;
  const descriptionID = nativeID ? `${nativeID}-description` : undefined;
  const errorID = nativeID ? `${nativeID}-error` : undefined;
  return /*#__PURE__*/_jsxs(View, {
    style: [a.w_full, style],
    testID: testID,
    children: [label != null ? /*#__PURE__*/_jsx(Label, {
      htmlFor: nativeID,
      required: required,
      disabled: disabled,
      children: label
    }) : null, children, hasError ? /*#__PURE__*/_jsx(Text, {
      nativeID: errorID,
      accessibilityRole: "alert",
      style: [{
        fontSize: fontSize.sm,
        color: theme.colors.negative,
        marginTop: space.xs
      }],
      children: error
    }) : description != null ? /*#__PURE__*/_jsx(Text, {
      nativeID: descriptionID,
      style: [{
        fontSize: fontSize.sm,
        color: disabled ? theme.colors.textTertiary : theme.colors.textSecondary,
        marginTop: space.xs
      }],
      children: description
    }) : null]
  });
};
export const Field = /*#__PURE__*/memo(FieldComponent);
Field.displayName = 'Field';
//# sourceMappingURL=Field.js.map