@stratakit/bricks/dist/DEV/IconButton.js

Small, modular components for StrataKit

import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { Icon } from "@stratakit/foundations";
import {
  forwardRef,
  useMergedRefs
} from "@stratakit/foundations/secret-internals";
import { Dot } from "./~utils.Dot.js";
import { useInit } from "./~utils.useInit.js";
import Button from "./Button.js";
import {
  IconButtonContext,
  IconButtonPresentation
} from "./IconButton.internal.js";
import Tooltip from "./Tooltip.js";
import VisuallyHidden from "./VisuallyHidden.js";
const IconButton = forwardRef(
  (props, forwardedRef) => {
    useInit();
    const { label, icon, active, labelVariant, dot, ...rest } = props;
    const baseId = React.useId();
    const labelId = `${baseId}-label`;
    const dotId = `${baseId}-dot`;
    const { iconSize } = React.useContext(IconButtonContext);
    const [elementType, setElementType] = React.useState(!props.render ? "button" : void 0);
    const determineTagName = React.useCallback(
      (element) => {
        if (!element) return;
        setElementType(element.tagName.toLowerCase() === "a" ? "a" : "button");
      },
      []
    );
    const button = /* @__PURE__ */ jsx(
      IconButtonPresentation,
      {
        render: /* @__PURE__ */ jsxs(
          Button,
          {
            "aria-pressed": elementType === "button" ? active : void 0,
            "aria-current": elementType === "a" ? active : void 0,
            "aria-labelledby": labelId,
            "aria-describedby": dot ? dotId : void 0,
            ...rest,
            ref: useMergedRefs(determineTagName, forwardedRef),
            children: [
              /* @__PURE__ */ jsx(VisuallyHidden, { id: labelId, children: label }),
              typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { href: icon, size: iconSize }) : icon,
              dot ? /* @__PURE__ */ jsx(Dot, { id: dotId, className: "\u{1F95D}IconButtonDot", children: dot }) : null
            ]
          }
        )
      }
    );
    if (labelVariant === "visually-hidden") {
      return button;
    }
    return /* @__PURE__ */ jsx(Tooltip, { content: label, type: "none", children: button });
  }
);
DEV: IconButton.displayName = "IconButton";
var IconButton_default = IconButton;
export {
  IconButton_default as default
};