xtreme-ui
Version:
Collection of reusable components that can be used in web projects
60 lines (59 loc) • 2.85 kB
JavaScript
"use client";
import { jsxs as i, jsx as o } from "react/jsx-runtime";
import m from "clsx";
import { Icon as T } from "gliff";
import { forwardRef as v } from "react";
import { ActionCard as S } from "../../base/ActionCard/ActionCard.js";
import { Button as u } from "../../base/Button/Button.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 "colord";
import { ThemeSelect as x } from "../ThemeSelect/ThemeSelect.js";
import './themePicker.css';/* empty css */
const E = Object.values(w), M = v((l, a) => {
const { className: c } = l, { themeScheme: t, setThemeScheme: h, themeColor: n, setThemeColor: d } = C(), s = $({
smallMobile: 325,
mobile: 420,
tablet: 640
}), p = m("xtrThemePicker", c);
return /* @__PURE__ */ i("section", { ref: a, className: p, children: [
/* @__PURE__ */ o("div", { className: "themeSchemes", role: "radiogroup", children: g.map(({ name: e, icon: r }, f) => /* @__PURE__ */ i(S, { className: m("themeSchemeItem", e, t === 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(T, { className: "footerIcon", code: t === e ? "f058" : r, type: "solid" }),
/* @__PURE__ */ o("span", { className: "footerLabel", children: e })
] })
] }, `ThemeScheme-${e}-${f}`)) }),
/* @__PURE__ */ i("div", { className: "swatches", role: "radiogroup", children: [
E.map((e, r) => /* @__PURE__ */ o(
u,
{
className: "swatchItem",
size: s.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}-${r}`
)),
/* @__PURE__ */ o(x, { withScheme: s.isSmallMobile, withSwatch: s.isSmallMobile, input: s.isLargest || s.isSmallMobile ? "textfield" : "buttonLabel" })
] })
] });
});
M.displayName = "ThemePicker";
export {
M as ThemePicker
};