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

The Cerberus Design React component library.

'use client';
'use strict';

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

const jsxRuntime = require('react/jsx-runtime');
const react = require('@ark-ui/react');
const css = require('styled-system/css');
const recipes = require('styled-system/recipes');
const cerberus = require('../../context/cerberus.cjs');

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

exports.FieldStatusIndicator = FieldStatusIndicator;