@frontify/fondue
Version:
Design system of Frontify
63 lines (62 loc) • 2.11 kB
JavaScript
import { jsxs as h, jsx as t } from "react/jsx-runtime";
import { TooltipIcon as v } from "../TooltipIcon/TooltipIcon.es.js";
import { IconSize as g } from "../../foundation/Icon/IconSize.es.js";
import { merge as n } from "../../utilities/merge.es.js";
const y = ({
id: r,
children: e,
htmlFor: w,
required: m = !1,
disabled: l = !1,
clickable: p = !1,
tooltip: i = [],
bold: x,
"data-test-id": o = "input-label"
}) => {
const c = (Array.isArray(i) ? i : [i]).map((a, s) => ({
key: s,
...a
}));
return /* @__PURE__ */ h(
"div",
{
className: n([
"tw-inline-flex tw-leading-4 tw-items-center tw-gap-1 tw-font-sans tw-text-s tw-max-w-full tw-min-w-0 tw-flex-initial",
l ? "tw-text-text-disabled" : "tw-text-text-weak"
]),
"data-test-id": `${o}-container`,
children: [
/* @__PURE__ */ t("div", { className: "tw-flex-1 tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap", children: /* @__PURE__ */ t(
"label",
{
id: r,
htmlFor: w,
className: n([
"tw-select-none tw-max-w-full",
x && "tw-font-medium",
l || !p ? "hover:tw-cursor-not-allowed tw-pointer-events-none" : "hover:tw-cursor-pointer hover:tw-text-text group-hover:tw-text-text"
]),
"data-test-id": o,
title: typeof e == "string" ? e : "",
children: e
}
) }),
m && /* @__PURE__ */ t("span", { "data-test-id": `${o}-required`, className: "tw-h-4 tw-text-m tw-text-text-negative", children: "*" }),
c.map(({ key: a, triggerIcon: s, triggerStyle: d, hoverDelay: f = 100, ...u }) => /* @__PURE__ */ t("div", { className: "tw-leading-3", children: /* @__PURE__ */ t(
v,
{
tooltip: { ...u, hoverDelay: f },
iconSize: g.Size16,
triggerIcon: s,
triggerStyle: d
}
) }, a))
]
}
);
};
y.displayName = "FondueInputLabel";
export {
y as InputLabel
};
//# sourceMappingURL=InputLabel.es.js.map