@stratakit/bricks/dist/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 } from "@stratakit/foundations/secret-internals";
import { Dot } from "./~utils.Dot.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 { label, icon, isActive, labelVariant, dot, ...rest } = props;
    const baseId = React.useId();
    const labelId = `${baseId}-label`;
    const dotId = `${baseId}-dot`;
    const { iconSize } = React.useContext(IconButtonContext);
    const button = /* @__PURE__ */ jsx(
      IconButtonPresentation,
      {
        render: /* @__PURE__ */ jsxs(
          Button,
          {
            "aria-pressed": isActive,
            "aria-labelledby": labelId,
            "aria-describedby": dot ? dotId : void 0,
            ...rest,
            ref: 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}-icon-button-dot", children: dot }) : null
            ]
          }
        )
      }
    );
    if (labelVariant === "visually-hidden") {
      return button;
    }
    return /* @__PURE__ */ jsx(Tooltip, { content: label, type: "none", children: button });
  }
);
var IconButton_default = IconButton;
export {
  IconButton_default as default
};