laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
124 lines (123 loc) • 3.38 kB
JavaScript
"use client";
import { jsxs as d, jsx as e } from "react/jsx-runtime";
import { cn as r } from "../../lib/utils.js";
import { cva as k } from "../../node_modules/class-variance-authority/dist/index.js";
import * as c from "react";
import { Label as g } from "./label.js";
import { Tooltip as z, TooltipTrigger as B, TooltipContent as C } from "./tooltip.js";
const x = k(
"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 E({
content: o,
children: n,
label: t,
labelClassName: i,
header: f,
variant: v = "primary",
triggerVariant: l = "default",
size: u = "default",
className: m,
wrpClassName: p,
contentClassName: h,
side: b = "top",
align: y = "center",
sideOffset: T = 4,
matchTriggerWidth: s = !1,
delayDuration: N = 200,
disabled: R = !1,
asChild: j = !1
}) {
const [w, A] = c.useState(), a = c.useRef(null);
return c.useEffect(() => {
s && a.current && A(a.current.getBoundingClientRect().width);
}, [s]), R ? /* @__PURE__ */ d("div", { className: r("flex flex-col gap-2", p), children: [
t && /* @__PURE__ */ e(g, { className: i, children: t }),
/* @__PURE__ */ e(
"div",
{
className: r(
x({ variant: l, size: u }),
m
),
children: n
}
)
] }) : /* @__PURE__ */ d("div", { className: r("flex flex-col gap-2", p), children: [
t && /* @__PURE__ */ e(g, { className: i, children: t }),
/* @__PURE__ */ d(z, { delayDuration: N, children: [
/* @__PURE__ */ e(B, { asChild: j, children: /* @__PURE__ */ e(
"div",
{
ref: a,
className: r(
x({ variant: l, size: u }),
m
),
children: n
}
) }),
/* @__PURE__ */ d(
C,
{
variant: v,
side: b,
align: y,
sideOffset: T,
className: r(h),
style: {
width: s ? w : void 0
},
children: [
f && /* @__PURE__ */ e("div", { className: "border-d-border mb-2 border-b pb-2 font-semibold", children: f }),
o
]
}
)
] })
] });
}
function F({
text: o,
className: n,
variant: t = "primary",
truncate: i = !0
}) {
return /* @__PURE__ */ e(E, { content: o, variant: t, asChild: !0, children: /* @__PURE__ */ e(
"span",
{
className: r(
"text-d-secondary-foreground block w-full min-w-0",
i && "truncate",
n
),
children: o
}
) });
}
export {
F as AppTextTooltip,
E as AppTooltip,
E as default
};