@cerberus-design/react/dist/components/deprecated/Legend.js

The Cerberus Design React component library.

'use client';
import { jsxs, jsx } from 'react/jsx-runtime';
import { cx, css } from 'styled-system/css';
import { label } from 'styled-system/recipes';
import { hstack } from 'styled-system/patterns';
import { Show } from '../show/show.js';
import { useFieldContext } from '../../node_modules/.pnpm/@ark-ui_react@5.29.1_react-dom@19.2.1_react@19.2.1__react@19.2.1/node_modules/@ark-ui/react/dist/components/field/use-field-context.js';

function Legend(props) {
  const { size, ...nativeProps } = props;
  const { invalid, required } = useFieldContext();
  return /* @__PURE__ */ jsxs(
    "legend",
    {
      ...nativeProps,
      ...invalid && { "aria-invalid": true },
      className: cx(
        nativeProps.className,
        hstack({
          justify: "space-between",
          w: "full"
        }),
        label({
          size
        })
      ),
      children: [
        nativeProps.children,
        /* @__PURE__ */ jsx(Show, { when: required, children: /* @__PURE__ */ jsx(
          "span",
          {
            className: css({
              color: "page.text.100",
              fontSize: "inherit"
            }),
            children: "(required)"
          }
        ) })
      ]
    }
  );
}

export { Legend };