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

Small, modular components for StrataKit

import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { Focusable } from "@ariakit/react/focusable";
import { Role } from "@ariakit/react/role";
import { forwardRef } from "@stratakit/foundations/secret-internals";
import cx from "classnames";
import { useInit } from "./~utils.useInit.js";
import VisuallyHidden from "./VisuallyHidden.js";
const AnchorRoot = forwardRef((props, forwardedRef) => {
  useInit();
  const { tone = "neutral", ...rest } = props;
  return /* @__PURE__ */ jsx(
    Role.a,
    {
      ...rest,
      "data-_sk-tone": tone,
      className: cx("\u{1F95D}Anchor", props.className),
      render: /* @__PURE__ */ jsx(Focusable, { accessibleWhenDisabled: true, render: props.render || /* @__PURE__ */ jsx("a", {}) }),
      ref: forwardedRef
    }
  );
});
DEV: AnchorRoot.displayName = "Anchor.Root";
const AnchorText = forwardRef(
  (props, forwardedRef) => {
    return /* @__PURE__ */ jsx(
      Role.span,
      {
        ...props,
        className: cx("\u{1F95D}AnchorText", props.className),
        ref: forwardedRef
      }
    );
  }
);
DEV: AnchorText.displayName = "Anchor.Text";
const AnchorExternalMarker = forwardRef(
  (props, forwardedRef) => {
    const { alt = "external", ...rest } = props;
    return /* @__PURE__ */ jsxs(Fragment, { children: [
      /* @__PURE__ */ jsx(
        Role.span,
        {
          "aria-hidden": "true",
          ...rest,
          className: cx("\u{1F95D}AnchorExternalMarker", props.className),
          ref: forwardedRef,
          children: "\xA0\u2197"
        }
      ),
      /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
        " (",
        alt,
        ")"
      ] })
    ] });
  }
);
DEV: AnchorExternalMarker.displayName = "Anchor.ExternalMarker";
const Anchor = forwardRef((props, forwardedRef) => {
  const { tone = "neutral", ...rest } = props;
  return /* @__PURE__ */ jsx(AnchorRoot, { ...rest, tone, ref: forwardedRef });
});
DEV: Anchor.displayName = "Anchor";
var Anchor_default = Anchor;
export {
  AnchorExternalMarker as ExternalMarker,
  AnchorRoot as Root,
  AnchorText as Text,
  Anchor_default as default
};