@frontify/fondue
Version:
Design system of Frontify
52 lines (51 loc) • 1.5 kB
JavaScript
import { jsxs as i, jsx as o } from "react/jsx-runtime";
import { useState as p } from "react";
import { SegmentedControls as C } from "../SegmentedControls/SegmentedControls.es.js";
import { ColorFormat as f } from "../../types/colors.es.js";
import { BrandColorPicker as u } from "./BrandColorPicker.es.js";
import { ColorPreview as w } from "./ColorPreview.es.js";
import { CustomColorPicker as v } from "./CustomColorPicker.es.js";
const x = [
{ id: "Brand", value: "Brand" },
{ id: "Custom", value: "Custom" }
], B = ({
currentColor: r,
palettes: e,
onSelect: t,
setFormat: a,
showPreview: l = !0,
currentFormat: s = f.Hex,
allowCustomColor: d = !0
}) => {
const [m, c] = p(
"Brand"
/* Brand */
);
return /* @__PURE__ */ i("div", { className: "tw-w-[400px] tw-relative", children: [
l && /* @__PURE__ */ o(w, { color: r }),
/* @__PURE__ */ i("div", { className: "tw-p-5 tw-flex tw-flex-col tw-gap-2", children: [
e && d && /* @__PURE__ */ o(
C,
{
items: x,
activeItemId: m,
onChange: (n) => c(n)
}
),
e && m === "Brand" ? /* @__PURE__ */ o(u, { currentColor: r, palettes: e, onSelect: t }) : /* @__PURE__ */ o(
v,
{
currentColor: r,
currentFormat: s,
setFormat: a,
onSelect: t
}
)
] })
] });
};
B.displayName = "FondueColorPicker";
export {
B as ColorPicker
};
//# sourceMappingURL=ColorPicker.es.js.map