@cerberus-design/react/dist/components/field/field.js

The Cerberus Design React component library.

import { jsxs, jsx } from 'react/jsx-runtime';
import { HStack } from 'styled-system/jsx';
import { splitProps } from '../../utils/index.js';
import { Show } from '../show/show.js';
import { FieldRoot, FieldLabel, FieldErrorText, FieldHelperText } from './primitives.js';
import { HelperText } from './helper-text.js';

function Field(props) {
  const [statusProps, fieldProps, rootProps] = splitProps(
    props,
    ["disabled", "required", "readOnly", "invalid"],
    [
      "label",
      "helperText",
      "secondaryHelperText",
      "errorText",
      "hideLabel",
      "children"
    ]
  );
  return /* @__PURE__ */ jsxs(FieldRoot, { ...statusProps, ...rootProps, children: [
    /* @__PURE__ */ jsx(Show, { when: fieldProps.label, children: /* @__PURE__ */ jsx(FieldLabel, { hideLabel: fieldProps.hideLabel, children: fieldProps.label }) }),
    fieldProps.children,
    /* @__PURE__ */ jsxs(HStack, { justifyContent: "space-between", w: "full", children: [
      /* @__PURE__ */ jsx(HelperText, { invalid: statusProps.invalid, children: fieldProps.helperText }),
      /* @__PURE__ */ jsx(FieldErrorText, { children: fieldProps.errorText }),
      /* @__PURE__ */ jsx(Show, { when: fieldProps.secondaryHelperText, children: /* @__PURE__ */ jsx(FieldHelperText, { children: fieldProps.secondaryHelperText }) })
    ] })
  ] });
}

export { Field };