@serendie/ui/dist/components/Tooltip/Tooltip.js

Adaptive UI component library as part of Serendie Design System by Mitsubishi Electric

import { jsxs as e, jsx as s } from "react/jsx-runtime";
import { tooltip_exports as o } from "../../node_modules/@ark-ui/react/dist/components/tooltip/tooltip.js";
import { cx as w } from "../../styled-system/css/cx.js";
import { sva as g } from "../../styled-system/css/sva.js";
const t = g({
  slots: ["content", "arrow", "arrowTip"],
  base: {
    content: {
      backgroundColor: "sd.system.color.component.inverseSurface",
      color: "sd.system.color.component.inverseOnSurface",
      borderRadius: "sd.system.dimension.radius.small",
      px: "sd.system.dimension.spacing.extraSmall",
      py: "sd.system.dimension.spacing.twoExtraSmall",
      boxShadow: "sd.system.elevation.shadow.level3",
      maxWidth: "200px",
      textStyle: "sd.system.typography.body.extraSmall_expanded",
      zIndex: 1e3
    },
    arrow: {
      "--arrow-size": "8px",
      "--arrow-background": "colors.sd.system.color.component.inverseSurface",
      zIndex: 1001
    }
  }
}), h = ({
  content: a,
  children: n,
  placement: i = "top",
  openDelay: l = 700,
  closeDelay: d = 300,
  disabled: p = !1,
  className: m,
  ...c
}) => {
  const [x, y] = t.splitVariantProps(c), r = t(x);
  return /* @__PURE__ */ e(
    o.Root,
    {
      openDelay: l,
      closeDelay: d,
      positioning: { placement: i, arrowPadding: 8 },
      disabled: p,
      children: [
        /* @__PURE__ */ s(o.Trigger, { asChild: !0, children: n }),
        /* @__PURE__ */ s(o.Positioner, { children: /* @__PURE__ */ e(
          o.Content,
          {
            className: w(r.content, m),
            ...y,
            children: [
              /* @__PURE__ */ s(o.Arrow, { className: r.arrow, children: /* @__PURE__ */ s(o.ArrowTip, { className: r.arrowTip }) }),
              a
            ]
          }
        ) })
      ]
    }
  );
};
h.displayName = "Tooltip";
export {
  h as Tooltip
};