"use client";
import { jsx } from "../../packages/jsx/src/jsx-runtime.js";
import { BorderRadius } from "../../tokens/BorderRadius.js";
import { Spacing } from "../../tokens/Spacing.js";
import { Text } from "../../atoms/Text/Text.js";
const AxisTick = ({
  axis,
  x = 0,
  y = 0,
  label = false,
  background = "Gray32",
  formatter,
  payload,
  children
}) => {
  const labelStyles = label ? {
    px: Spacing["8px"],
    py: Spacing["4px"],
    borderRadius: BorderRadius.FULL,
    bg: background,
    backdropFilter: "blur(16px)"
  } : {};
  return /* @__PURE__ */ jsx(
    "foreignObject",
    {
      x: axis === "y" ? 0 : x,
      y: axis === "y" && y <= 12 && !label ? 0 : y,
      width: 1,
      height: 1,
      sx: { overflow: "visible" },
      children: /* @__PURE__ */ jsx(
        "div",
        {
          className: `tick ${label ? "tick--label" : "tick--value"}`,
          sx: {
            ...labelStyles,
            width: "min-content",
            transform: axis === "y" ? "translateY(-50%)" : "translate(-50%, -50%)"
          },
          children: /* @__PURE__ */ jsx(Text.C10, { color: label ? "White88" : "White64", lineHeight: "TIGHT", sx: { whiteSpace: "nowrap" }, children: formatter && payload ? formatter(payload.value) : children })
        }
      )
    }
  );
};
export {
  AxisTick
};
