@frontify/fondue
Version:
Design system of Frontify
70 lines (69 loc) • 2.35 kB
JavaScript
import { jsx as o } from "react/jsx-runtime";
import { TinyColor as c } from "@ctrl/tinycolor";
import { useFocusRing as g } from "@react-aria/focus";
import { MenuItemContent as u } from "../MenuItem/MenuItemContent.es.js";
import { Trigger as d } from "../Trigger/Trigger.es.js";
import h from "../../foundation/Icon/Generated/IconDroplet.es.js";
import { IconSize as x } from "../../foundation/Icon/IconSize.es.js";
import { useMemoizedId as b } from "../../hooks/useMemoizedId.es.js";
import { toShortRgb as y } from "../../utilities/colors.es.js";
import { merge as r } from "../../utilities/merge.es.js";
import { ColorInputTitle as I } from "./ColorInputTitle.es.js";
const k = ({
id: i,
currentColor: t,
format: m,
isOpen: n = !1,
disabled: e = !1,
clearable: s = !1,
onClear: w,
onDelete: l
}) => {
const { isFocusVisible: p, focusProps: f } = g(), a = t ? new c(y(t)).toRgbString() : "";
return /* @__PURE__ */ o(
d,
{
isOpen: n,
disabled: e,
isFocusVisible: p,
showClear: !!t && s,
onClear: w,
onDelete: l,
children: /* @__PURE__ */ o(
"button",
{
...f,
type: "button",
id: b(i),
disabled: e,
className: r([
"tw-overflow-hidden tw-flex-auto tw-h-full tw-rounded tw-text-left tw-outline-none tw-py-2 tw-pl-3 tw-min-h-[34px] tw-pr-8",
!t && "tw-text-black-60",
e && "tw-text-black-40"
]),
children: /* @__PURE__ */ o(
u,
{
title: t ? /* @__PURE__ */ o(I, { format: m, currentColor: t }) : "Select color",
decorator: t ? /* @__PURE__ */ o(
"span",
{
className: r([
"tw-h-4 tw-w-4 tw-rounded tw-flex tw-items-center tw-justify-center tw-ring-1 tw-ring-black-10 tw-ring-offset-1",
e && "tw-opacity-50"
]),
style: { backgroundColor: a }
}
) : /* @__PURE__ */ o("span", { className: "tw-text-black-70", children: /* @__PURE__ */ o(h, { size: x.Size12 }) })
}
)
}
)
}
);
};
k.displayName = "FondueColorInputTrigger";
export {
k as ColorInputTrigger
};
//# sourceMappingURL=ColorPickerTrigger.es.js.map