import { jsx } from "../../../packages/jsx/src/jsx-runtime.js";
import { useRef } from "react";
import { Spacing } from "../../../tokens/Spacing.js";
import { Tooltip } from "../../../molecules/Tooltip/Tooltip.js";
function TableCell({
  className,
  style,
  tooltip,
  children,
  "aria-colindex": ariaColIndex,
  onFocus,
  onBlur,
  onPointerDown,
  noVerticalBorders
}) {
  const ref = useRef(null);
  return /* @__PURE__ */ jsx(
    Tooltip,
    {
      content: /* @__PURE__ */ jsx(
        Tooltip.Content,
        {
          type: "kpi",
          text: tooltip,
          sideOffset: -20,
          alignOffset: 16,
          align: "start",
          sx: { zIndex: 30 }
        }
      ),
      children: /* @__PURE__ */ jsx(
        "div",
        {
          ref,
          role: "gridcell",
          "aria-colindex": ariaColIndex,
          tabIndex: -1,
          className,
          style: {
            ...style,
            "--border-x": noVerticalBorders ? "0px" : "1px"
          },
          onPointerDown,
          onFocus,
          onBlur,
          sx: {
            display: "table-cell",
            borderStyle: "solid",
            borderColor: "White8",
            borderWidth: "0 var(--border-x) 1px var(--border-x)",
            whiteSpace: "nowrap",
            verticalAlign: "middle",
            py: [Spacing["8px"], Spacing["16px"]],
            px: Spacing["16px"],
            "&:focus-visible": { outline: "none" },
            "&:first-of-type": { borderLeft: "none" },
            "&:last-of-type": { borderRight: "none" }
          },
          children
        }
      )
    }
  );
}
export {
  TableCell
};
