@hitachivantara/uikit-react-core/dist/esm/FormElement/Label/Label.js

Core React components for the NEXT Design System.

import { jsxs, Fragment, jsx } from "react/jsx-runtime";
import { useContext, useMemo } from "react";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { setId } from "../../utils/setId.js";
import { HvFormElementContext } from "../context.js";
import { findDescriptors } from "../utils.js";
import { useClasses } from "./Label.styles.js";
import { staticClasses } from "./Label.styles.js";
import { HvTypography } from "../../Typography/Typography.js";
const HvLabel = (props) => {
  const {
    id: idProp,
    classes: classesProp,
    className,
    children,
    label,
    showGutter,
    disabled: disabledProp,
    required: requiredProp,
    htmlFor: htmlForProp,
    ...others
  } = useDefaultProps("HvLabel", props);
  const { classes, cx } = useClasses(classesProp);
  const context = useContext(HvFormElementContext);
  const disabled = disabledProp ?? context.disabled;
  const required = requiredProp ?? context.required;
  const id = idProp ?? setId(context.id, "label");
  const forId = useMemo(
    () => htmlForProp || findDescriptors(children)?.input?.[0]?.id,
    [children, htmlForProp]
  );
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsxs(
      HvTypography,
      {
        id,
        className: cx(
          classes.root,
          {
            [classes.labelDisabled]: disabled,
            [classes.childGutter]: showGutter || children && label
          },
          className
        ),
        variant: "label",
        component: "label",
        htmlFor: forId,
        ...others,
        children: [
          label,
          required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "*" })
        ]
      }
    ),
    children
  ] });
};
export {
  HvLabel,
  staticClasses as labelClasses
};