xtreme-ui
Version:
Collection of reusable components that can be used in web projects
85 lines (84 loc) • 3.24 kB
JavaScript
"use client";
import { jsxs as i, jsx as o } from "react/jsx-runtime";
import { forwardRef as T } from "react";
import t from "clsx";
import { ActionCard as v } from "../../base/ActionCard/ActionCard.js";
import { Button as S } from "../../base/Button/Button.js";
import { Icon as u } from "../../base/Icon/Icon.js";
import { useXTheme as C } from "../../context/useContext.js";
import { useScreenType as $ } from "../../hooks/useScreen.js";
import { isEqual as b } from "../../../utils/function/common.js";
import { THEME_SCHEME as g, ThemeColorsPreset as w } from "../../../utils/constants/theme.js";
import "color-namer";
import { ThemeSelect as x } from "../ThemeSelect/ThemeSelect.js";
/* empty css */
const E = Object.values(w), M = T((l, a) => {
const { className: c } = l, { themeScheme: m, setThemeScheme: h, themeColor: n, setThemeColor: d } = C(), r = $({
smallMobile: 325,
mobile: 420,
tablet: 640
}), p = t(
"xtrThemePicker",
c
);
return /* @__PURE__ */ i(
"div",
{
ref: a,
className: p,
role: "region",
children: [
/* @__PURE__ */ o("div", { className: "themeSchemes", role: "radiogroup", children: g.map(({ name: e, icon: s }, f) => /* @__PURE__ */ i(
v,
{
className: t("themeSchemeItem", e, m === e && "active"),
onClick: () => h(e),
children: [
/* @__PURE__ */ i("div", { className: "design", children: [
/* @__PURE__ */ o("div", { className: "navigation", children: Array.from({ length: 6 }, (k, N) => /* @__PURE__ */ o("div", { className: "navigationItem" }, `ThemeScheme-${e}-navigation-${N}`)) }),
/* @__PURE__ */ i("div", { className: "content", children: [
/* @__PURE__ */ o("div", { className: "header" }),
/* @__PURE__ */ o("div", { className: "profile" })
] })
] }),
/* @__PURE__ */ i("div", { className: "footer", children: [
/* @__PURE__ */ o(u, { className: "footerIcon", code: m === e ? "f058" : s, type: "solid" }),
/* @__PURE__ */ o("span", { className: "footerLabel", children: e })
] })
]
},
`ThemeScheme-${e}-${f}`
)) }),
/* @__PURE__ */ i("div", { className: "swatches", role: "radiogroup", children: [
E.map((e, s) => /* @__PURE__ */ o(
S,
{
className: "swatchItem",
size: r.isLargest ? "default" : "mini",
icon: "f00c",
iconType: "solid",
style: {
"--themeColor": `${e.h} ${e.s}% ${e.l}%`,
color: b(e, n) ? "white" : "transparent"
},
onClick: () => d(e)
},
`ThemeColor-${e.h}${e.s}${e.l}-${s}`
)),
/* @__PURE__ */ o(
x,
{
withScheme: r.isSmallMobile,
withSwatch: r.isSmallMobile,
input: r.isLargest || r.isSmallMobile ? "textfield" : "buttonLabel"
}
)
] })
]
}
);
});
M.displayName = "ThemePicker";
export {
M as ThemePicker
};