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

The Cerberus Design React component library.

'use client';
import { jsx } from 'react/jsx-runtime';
import { useFieldContext } from '@ark-ui/react';
import { cx } from 'styled-system/css';
import { field } from 'styled-system/recipes';
import { useCerberusContext } from '../../context/cerberus.js';

function FieldStatusIndicator(props) {
  const { fallback, ...nativeProps } = props;
  const fieldContext = useFieldContext();
  const styles = field();
  const { icons } = useCerberusContext();
  const { invalid: InvalidIcon } = icons;
  if (!fieldContext) return null;
  if (fieldContext.invalid) {
    return /* @__PURE__ */ jsx(
      "span",
      {
        ...nativeProps,
        "aria-hidden": "true",
        "data-invalid": true,
        className: cx(nativeProps.className, styles.statusIndicator),
        children: /* @__PURE__ */ jsx(InvalidIcon, {})
      }
    );
  }
  return /* @__PURE__ */ jsx(
    "span",
    {
      ...nativeProps,
      "aria-hidden": "true",
      "data-part": "end-indicator",
      className: cx(nativeProps.className, styles.endIndicator),
      children: fallback
    }
  );
}

export { FieldStatusIndicator };