xtreme-ui/dist/components/layout/ThemeSelect/ThemeSelect.js

Collection of reusable components that can be used in web projects

"use client";
import { jsx as u } from "react/jsx-runtime";
import d from "clsx";
import { forwardRef as T } from "react";
import { ColorPopper as C } from "../../base/ColorPopper/ColorPopper.js";
import { useXTheme as S } from "../../context/useContext.js";
import { useScreenType as w } from "../../hooks/useScreen.js";
import { isValidThemeColor as x } from "../../../utils/helper/colorHelper.js";
import { ThemeColorsPreset as b } from "../../../utils/constants/theme.js";
import './themeSelect.css';/* empty css                 */
const v = T((m, i) => {
  const { className: l, input: o, size: t, withScheme: s = !0, withSwatch: h = !0, withWheel: c = !0 } = m, { themeScheme: a, setThemeScheme: p, themeColor: e, setThemeColor: n } = S(), r = w(), f = d("xtrThemeSelect", l);
  return !e || !x(e) ? null : /* @__PURE__ */ u(
    C,
    {
      ref: i,
      className: f,
      placeholder: "Theme",
      alpha: !1,
      hideWheel: !c,
      swatch: h ? Object.values(b) : void 0,
      colorHeading: "Theme Color",
      schemeHeading: s ? "Appearance" : void 0,
      themeScheme: a,
      input: o || (r.isMobile ? "button" : "textfield"),
      size: t || (r.isMobile ? "mini" : "default"),
      setThemeScheme: p,
      color: e,
      setColor: n
    }
  );
});
v.displayName = "ThemeSelect";
export {
  v as ThemeSelect
};