laif-ds/dist/components/ui/app-tooltip.js

Design System di Laif con componenti React basati su principi di Atomic Design

"use client";
import { jsxs as o, jsx as e } from "react/jsx-runtime";
import { cva as A } from "../../node_modules/class-variance-authority/dist/index.js";
import * as d from "react";
import { cn as t } from "../../lib/utils.js";
import { Label as g } from "./label.js";
import { Tooltip as B, TooltipTrigger as E, TooltipContent as L } from "./tooltip.js";
const v = A(
  "inline-flex items-center justify-center transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-d-ring focus-visible:ring-offset-2",
  {
    variants: {
      variant: {
        default: "hover:text-d-foreground text-d-muted-foreground",
        primary: "hover:text-d-primary text-d-primary/70",
        secondary: "hover:text-d-secondary-foreground text-d-secondary-foreground/70",
        accent: "hover:text-d-accent-foreground text-d-accent-foreground/70",
        muted: "hover:text-d-muted-foreground text-d-muted-foreground/50",
        ghost: "hover:bg-d-accent hover:text-d-accent-foreground"
      },
      size: {
        sm: "text-xs",
        default: "text-sm",
        lg: "text-base"
      }
    },
    defaultVariants: {
      variant: "default",
      size: "default"
    }
  }
);
function D({
  content: x,
  children: s,
  label: r,
  labelClassName: a,
  header: c,
  variant: p = "secondary",
  triggerVariant: f = "default",
  size: l = "default",
  className: u,
  wrpClassName: m,
  contentClassName: h,
  side: b = "top",
  align: y = "center",
  sideOffset: N = 4,
  matchTriggerWidth: i = !1,
  delayDuration: T = 200,
  disabled: R = !1,
  asChild: j = !1
}) {
  const [w, z] = d.useState(), n = d.useRef(null);
  return d.useEffect(() => {
    i && n.current && z(n.current.getBoundingClientRect().width);
  }, [i]), R ? /* @__PURE__ */ o("div", { className: t("flex flex-col gap-2", m), children: [
    r && /* @__PURE__ */ e(g, { className: a, children: r }),
    /* @__PURE__ */ e(
      "div",
      {
        className: t(
          v({ variant: f, size: l }),
          u
        ),
        children: s
      }
    )
  ] }) : /* @__PURE__ */ o("div", { className: t("flex flex-col gap-2", m), children: [
    r && /* @__PURE__ */ e(g, { className: a, children: r }),
    /* @__PURE__ */ o(B, { delayDuration: T, children: [
      /* @__PURE__ */ e(E, { asChild: j, children: /* @__PURE__ */ e(
        "div",
        {
          ref: n,
          className: t(
            v({ variant: f, size: l }),
            u
          ),
          children: s
        }
      ) }),
      /* @__PURE__ */ o(
        L,
        {
          variant: p,
          side: b,
          align: y,
          sideOffset: N,
          className: t(h),
          style: {
            width: i ? w : void 0
          },
          children: [
            c && /* @__PURE__ */ e("div", { className: "border-d-border mb-2 border-b pb-2 font-semibold", children: c }),
            x
          ]
        }
      )
    ] })
  ] });
}
export {
  D as AppTooltip,
  D as default
};