@crossed/ui/lib/module/display/Tooltip.js

A universal & performant styling library for React Native, Next.js & React

import { jsx } from "react/jsx-runtime";
import { withStaticProperties } from "@crossed/core";
import { Text } from "../typography";
import { composeStyles, inlineStyle } from "@crossed/styled";
import { Popover } from "../overlay";
import { memo } from "react";
const tooltipStyles = inlineStyle(({ colors, space }) => ({
  base: {
    backgroundColor: colors.text.primary,
    borderRadius: 16,
    paddingVertical: space.md,
    paddingHorizontal: space.lg,
    maxWidth: 276
  },
  web: { base: { width: "max-content" } }
}));
const TooltipRoot = memo(
  ({
    children,
    placement = "bottom",
    triggerStrategy = "onPointerEnter",
    ...props
  }) => {
    return /* @__PURE__ */ jsx(
      Popover,
      {
        placement,
        triggerStrategy,
        ...props,
        children
      }
    );
  }
);
const TooltipTrigger = ({ ...props }) => {
  return /* @__PURE__ */ jsx(Popover.Trigger, { ...props });
};
const TooltipContent = ({ children, style }) => {
  return /* @__PURE__ */ jsx(Popover.Content, { style: composeStyles(tooltipStyles, style), children });
};
const TooltipText = (props) => {
  return /* @__PURE__ */ jsx(
    Text,
    {
      ...props,
      style: composeStyles(
        inlineStyle(({ colors }) => ({
          media: { md: { color: colors.text.invert } }
        })),
        props.style
      )
    }
  );
};
TooltipText.displayName = "Tooltip.Text";
const Tooltip = withStaticProperties(TooltipRoot, {
  Trigger: TooltipTrigger,
  Content: TooltipContent,
  Text: TooltipText
});
export {
  Tooltip
};
//# sourceMappingURL=Tooltip.js.map