@stratakit/bricks/dist/IconButton.js

Small, modular components for StrataKit

import { c as _c } from "react-compiler-runtime";
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) => {
  const $ = _c(1);
  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);
  let t0;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t0 = (element) => {
      if (!element) {
        return;
      }
      setElementType(element.tagName.toLowerCase() === "a" ? "a" : "button");
    };
    $[0] = t0;
  } else {
    t0 = $[0];
  }
  const determineTagName = t0;
  const button = jsx(IconButtonPresentation, {
    render: 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: [jsx(VisuallyHidden, {
        id: labelId,
        children: label
      }), typeof icon === "string" ? jsx(Icon, {
        href: icon,
        size: iconSize
      }) : icon, dot ? jsx(Dot, {
        id: dotId,
        className: "\u{1F95D}IconButtonDot",
        children: dot
      }) : null]
    })
  });
  if (labelVariant === "visually-hidden") {
    return button;
  }
  return jsx(Tooltip, {
    content: label,
    type: "none",
    children: button
  });
});
var IconButton_default = IconButton;
export {
  IconButton_default as default
};