xtreme-ui 0.0.93 → 0.0.95

package/dist/components/context/Theme/ThemeContext.js

@@ -1,22 +1,27 @@
 "use client";
-import { jsx as i } from "react/jsx-runtime";
-import { createContext as S, useState as n, useEffect as s } from "react";
-import { STORAGE as e } from "../../../utils/constants/commons.js";
-const h = {
+import { jsx as d } from "react/jsx-runtime";
+import { createContext as i, useState as n, useEffect as h } from "react";
+import { STORAGE as t, defaultColorPreset as u } from "../../../utils/constants/theme.js";
+const c = {
   themeScheme: void 0,
   setThemeScheme: () => null,
   themeColor: void 0,
   setThemeColor: () => null
-}, d = S(h), A = ({ children: u }) => {
-  const [t, l] = n(h.themeScheme), [o, c] = n(h.themeColor);
-  return s(() => {
-    let m = localStorage.getItem(e.themeScheme), r = localStorage.getItem(e.themeColor);
-    m || (m = (document == null ? void 0 : document.documentElement.getAttribute(e.themeSchemeAttr)) ?? void 0), r || (r = (document == null ? void 0 : document.documentElement.getAttribute(e.themeColorAttr)) ?? void 0), m && l(m), r && c(r);
-  }, []), s(() => {
-    !t || !o || (document.documentElement.setAttribute(e.themeSchemeAttr, t), document.documentElement.setAttribute(e.themeColorAttr, o), localStorage.setItem(e.themeScheme, t), localStorage.setItem(e.themeColor, o));
-  }, [t, o]), /* @__PURE__ */ i(d.Provider, { value: { themeScheme: t, setThemeScheme: l, themeColor: o, setThemeColor: c }, children: u });
+}, a = i(c), y = ({ children: S }) => {
+  const [o, l] = n(c.themeScheme), [e, s] = n(c.themeColor);
+  return h(() => {
+    let m = localStorage.getItem(t.themeScheme), r;
+    try {
+      r = JSON.parse(localStorage.getItem(t.themeColor) || "null") || u;
+    } catch {
+      r = u;
+    }
+    m || (m = (document == null ? void 0 : document.documentElement.getAttribute(t.themeSchemeAttr)) ?? void 0), m && l(m), r && s(r);
+  }, []), h(() => {
+    !o || !e || (document.documentElement.setAttribute(t.themeSchemeAttr, o), document.documentElement.style.setProperty("--H", `${e == null ? void 0 : e.h}`), document.documentElement.style.setProperty("--S", `${e == null ? void 0 : e.s}%`), document.documentElement.style.setProperty("--L", `${e == null ? void 0 : e.l}%`), localStorage.setItem(t.themeScheme, o), localStorage.setItem(t.themeColor, JSON.stringify(e)));
+  }, [o, e]), /* @__PURE__ */ d(a.Provider, { value: { themeScheme: o, setThemeScheme: l, themeColor: e, setThemeColor: s }, children: S });
 };
 export {
-  d as ThemeContext,
-  A as ThemeProvider
+  a as ThemeContext,
+  y as ThemeProvider
 };

package/dist/components/context/Theme/types.d.ts

@@ -1,9 +1,9 @@
 import { ReactNode } from 'react';
 export type TThemeInitialType = {
-    themeScheme: TThemeScheme;
-    setThemeScheme: (scheme: TThemeScheme) => void;
-    themeColor: TThemeColor;
-    setThemeColor: (color: TThemeColor) => void;
+    themeScheme: TThemeScheme | undefined;
+    setThemeScheme: (scheme: TThemeScheme | undefined) => void;
+    themeColor: TThemeColor | undefined;
+    setThemeColor: (color: TThemeColor | undefined) => void;
 };
 export type TThemeProviderProps = {
     children?: ReactNode;
@@ -11,18 +11,13 @@ export type TThemeProviderProps = {
 export declare enum EThemeScheme {
     light = "light",
     dark = "dark",
-    system = "system"
+    auto = "auto"
 }
-export type TThemeScheme = keyof typeof EThemeScheme | undefined;
-export declare const defaultScheme = EThemeScheme.system;
-export declare enum EThemeColor {
-    red = "red",
-    pink = "pink",
-    orange = "orange",
-    green = "green",
-    blue = "blue",
-    violet = "violet"
-}
-export type TThemeColor = keyof typeof EThemeColor | undefined;
-export declare const defaultColor = EThemeColor.violet;
+export type TThemeScheme = keyof typeof EThemeScheme;
+export declare const defaultScheme = EThemeScheme.auto;
+export type TThemeColor = {
+    h: number;
+    s: number;
+    l: number;
+};
 //# sourceMappingURL=types.d.ts.map

package/dist/components/context/Theme/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/context/Theme/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,MAAM,iBAAiB,GAAG;IAC/B,WAAW,EAAE,YAAY,CAAC;IAC1B,cAAc,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAC/C,UAAU,EAAE,WAAW,CAAC;IACxB,aAAa,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;CAC5C,CAAA;AACD,MAAM,MAAM,mBAAmB,GAAG;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAA;CACvB,CAAA;AAED,oBAAY,YAAY;IACvB,KAAK,UAAU;IACf,IAAI,SAAS;IACb,MAAM,WAAW;CACjB;AACD,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,YAAY,GAAG,SAAS,CAAC;AACjE,eAAO,MAAM,aAAa,sBAAsB,CAAC;AAEjD,oBAAY,WAAW;IACtB,GAAG,QAAQ;IACX,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,IAAI,SAAS;IACb,MAAM,WAAW;CACjB;AACD,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,WAAW,GAAG,SAAS,CAAC;AAC/D,eAAO,MAAM,YAAY,qBAAqB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/context/Theme/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,MAAM,iBAAiB,GAAG;IAC/B,WAAW,EAAE,YAAY,GAAG,SAAS,CAAC;IACtC,cAAc,EAAE,CAAC,MAAM,EAAE,YAAY,GAAG,SAAS,KAAK,IAAI,CAAC;IAC3D,UAAU,EAAE,WAAW,GAAG,SAAS,CAAC;IACpC,aAAa,EAAE,CAAC,KAAK,EAAE,WAAW,GAAG,SAAS,KAAK,IAAI,CAAC;CACxD,CAAC;AACF,MAAM,MAAM,mBAAmB,GAAG;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,oBAAY,YAAY;IACvB,KAAK,UAAU;IACf,IAAI,SAAS;IACb,IAAI,SAAS;CACb;AACD,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,YAAY,CAAC;AACrD,eAAO,MAAM,aAAa,oBAAoB,CAAC;AAE/C,MAAM,MAAM,WAAW,GAAG;IACzB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACV,CAAC"}

package/dist/components/context/Theme/types.js

@@ -1,10 +1,6 @@
-var r = /* @__PURE__ */ ((t) => (t.light = "light", t.dark = "dark", t.system = "system", t))(r || {});
-const a = "system";
-var n = /* @__PURE__ */ ((t) => (t.red = "red", t.pink = "pink", t.orange = "orange", t.green = "green", t.blue = "blue", t.violet = "violet", t))(n || {});
-const s = "violet";
+var a = /* @__PURE__ */ ((t) => (t.light = "light", t.dark = "dark", t.auto = "auto", t))(a || {});
+const r = "auto";
 export {
-  n as EThemeColor,
-  r as EThemeScheme,
-  s as defaultColor,
-  a as defaultScheme
+  a as EThemeScheme,
+  r as defaultScheme
 };

package/dist/components/layout/Navigation/navigation.module.scss.js

@@ -1,21 +1,21 @@
-const t = "_navigation_1vrjr_1", r = "_brand_1vrjr_10", o = "_routeList_1vrjr_19", n = "_route_1vrjr_19", _ = "_icon_1vrjr_52", a = "_label_1vrjr_59", i = "_loading_1vrjr_79", c = "_active_1vrjr_98", e = {
+const t = "_navigation_10g7s_1", o = "_brand_10g7s_10", n = "_routeList_10g7s_19", _ = "_route_10g7s_19", s = "_icon_10g7s_52", a = "_label_10g7s_59", i = "_loading_10g7s_79", c = "_active_10g7s_98", e = {
   navigation: t,
-  brand: r,
-  routeList: o,
-  route: n,
-  icon: _,
+  brand: o,
+  routeList: n,
+  route: _,
+  icon: s,
   label: a,
   loading: i,
   active: c
 };
 export {
   c as active,
-  r as brand,
+  o as brand,
   e as default,
-  _ as icon,
+  s as icon,
   a as label,
   i as loading,
   t as navigation,
-  n as route,
-  o as routeList
+  _ as route,
+  n as routeList
 };

package/dist/components/layout/Sider/sider.module.scss.js

@@ -1,21 +1,21 @@
-const e = "_sider_1dq8m_1", i = "_leftSiderContainer_1dq8m_13", t = "_rightSiderContainer_1dq8m_21", n = "_content_1dq8m_29", r = "_miniLeftSider_1dq8m_39", d = "_miniRightSider_1dq8m_46", _ = "_leftOpen_1dq8m_53", o = "_rightOpen_1dq8m_66", s = {
+const e = "_sider_11os5_1", i = "_leftSiderContainer_11os5_13", t = "_rightSiderContainer_11os5_21", n = "_content_11os5_29", r = "_miniLeftSider_11os5_39", o = "_miniRightSider_11os5_46", _ = "_leftOpen_11os5_53", s = "_rightOpen_11os5_66", d = {
   sider: e,
   leftSiderContainer: i,
   rightSiderContainer: t,
   content: n,
   miniLeftSider: r,
-  miniRightSider: d,
+  miniRightSider: o,
   leftOpen: _,
-  rightOpen: o
+  rightOpen: s
 };
 export {
   n as content,
-  s as default,
+  d as default,
   _ as leftOpen,
   i as leftSiderContainer,
   r as miniLeftSider,
-  d as miniRightSider,
-  o as rightOpen,
+  o as miniRightSider,
+  s as rightOpen,
   t as rightSiderContainer,
   e as sider
 };

package/dist/components/layout/ThemePicker/ThemePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/ThemePicker/ThemePicker.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAqC,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE/E,eAAO,MAAM,WAAW,8GAuEtB,CAAC"}
+{"version":3,"file":"ThemePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/ThemePicker/ThemePicker.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAqC,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAG/E,eAAO,MAAM,WAAW,8GAuEtB,CAAC"}

package/dist/components/layout/ThemePicker/ThemePicker.js

@@ -1,73 +1,72 @@
 "use client";
-import { jsxs as m, jsx as o } from "react/jsx-runtime";
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
 import { forwardRef as T } from "react";
-import c from "clsx";
+import l from "clsx";
 import { ActionCard as C } from "../../base/ActionCard/ActionCard.js";
-import { Button as k } from "../../base/Button/Button.js";
-import { Icon as S } from "../../base/Icon/Icon.js";
-import { EThemeColor as $ } from "../../context/Theme/types.js";
-import { useXTheme as g } from "../../context/useContext.js";
-import { THEME_SCHEME as u } from "../../../utils/constants/commons.js";
-import { capitalizeFirstLetter as y } from "../../../utils/function/string.js";
-import e from "./themePicker.module.scss.js";
-import { EThemePickerGap as x, EThemePickerSize as E } from "./types.js";
-const P = T((a, l) => {
-  const { className: h, size: i = "default" } = a, { themeScheme: t, setThemeScheme: n, themeColor: d, setThemeColor: p } = g(), f = c(
-    e.themePicker,
+import { Button as $ } from "../../base/Button/Button.js";
+import { Icon as u } from "../../base/Icon/Icon.js";
+import { useXTheme as E } from "../../context/useContext.js";
+import { isEqual as S } from "../../../utils/function/common.js";
+import { THEME_SCHEME as g, ThemeColorsPreset as k } from "../../../utils/constants/theme.js";
+import o from "./themePicker.module.scss.js";
+import { EThemePickerGap as x, EThemePickerSize as y } from "./types.js";
+const P = Object.values(k), I = T((c, a) => {
+  const { className: h, size: s = "default" } = c, { themeScheme: t, setThemeScheme: n, themeColor: d, setThemeColor: p } = E(), f = l(
+    o.themePicker,
     h
   );
   return /* @__PURE__ */ m(
     "div",
     {
-      ref: l,
+      ref: a,
       className: f,
       role: "region",
       style: {
-        "--schemeSize": `${E[i]}px`,
-        "--schemeGap": `${x[i]}px`
+        "--schemeSize": `${y[s]}px`,
+        "--schemeGap": `${x[s]}px`
       },
       children: [
-        /* @__PURE__ */ o("div", { className: e.themeSchemes, role: "radiogroup", children: u.map(({ name: r, icon: s }, N) => /* @__PURE__ */ m(
+        /* @__PURE__ */ r("div", { className: o.themeSchemes, role: "radiogroup", children: g.map(({ name: e, icon: i }, N) => /* @__PURE__ */ m(
           C,
           {
-            className: c(e.themeSchemeItem, e[r], t === r && e.active),
-            onClick: () => n(r),
+            className: l(o.themeSchemeItem, o[e], t === e && o.active),
+            onClick: () => n(e),
             children: [
-              /* @__PURE__ */ m("div", { className: e.design, children: [
-                /* @__PURE__ */ o("div", { className: e.navigation, children: Array.from({ length: 6 }, (I, v) => /* @__PURE__ */ o("div", { className: e.navigationItem }, `ThemeScheme-${r}-navigation-${v}`)) }),
-                /* @__PURE__ */ m("div", { className: e.content, children: [
-                  /* @__PURE__ */ o("div", { className: e.header }),
-                  /* @__PURE__ */ o("div", { className: e.profile })
+              /* @__PURE__ */ m("div", { className: o.design, children: [
+                /* @__PURE__ */ r("div", { className: o.navigation, children: Array.from({ length: 6 }, (j, v) => /* @__PURE__ */ r("div", { className: o.navigationItem }, `ThemeScheme-${e}-navigation-${v}`)) }),
+                /* @__PURE__ */ m("div", { className: o.content, children: [
+                  /* @__PURE__ */ r("div", { className: o.header }),
+                  /* @__PURE__ */ r("div", { className: o.profile })
                 ] })
               ] }),
-              /* @__PURE__ */ m("div", { className: e.footer, children: [
-                /* @__PURE__ */ o(S, { className: e.footerIcon, code: t === r ? "f058" : s, type: "solid" }),
-                /* @__PURE__ */ o("span", { className: e.footerLabel, children: r })
+              /* @__PURE__ */ m("div", { className: o.footer, children: [
+                /* @__PURE__ */ r(u, { className: o.footerIcon, code: t === e ? "f058" : i, type: "solid" }),
+                /* @__PURE__ */ r("span", { className: o.footerLabel, children: e })
               ] })
             ]
           },
-          `ThemeScheme-${r}-${N}`
+          `ThemeScheme-${e}-${N}`
         )) }),
-        /* @__PURE__ */ o("div", { className: e.themeColors, role: "radiogroup", children: Object.keys($).map((r, s) => /* @__PURE__ */ o(
-          k,
+        /* @__PURE__ */ r("div", { className: o.themeColors, role: "radiogroup", children: P.map((e, i) => /* @__PURE__ */ r(
+          $,
           {
-            className: e.themeColorsItem,
-            size: i,
+            className: o.themeColorsItem,
+            size: s,
             icon: "f00c",
             iconType: "solid",
             style: {
-              "--themeColor": `var(--color${y(r)}Accent)`,
-              color: d === r ? "white" : "transparent"
+              "--themeColor": `${e.h} ${e.s}% ${e.l}%`,
+              color: S(e, d) ? "white" : "transparent"
             },
-            onClick: () => p(r)
+            onClick: () => p(e)
           },
-          `ThemeColor-${r}-${s}`
+          `ThemeColor-${e.h}${e.s}${e.l}-${i}`
         )) })
       ]
     }
   );
 });
-P.displayName = "ThemePicker";
+I.displayName = "ThemePicker";
 export {
-  P as ThemePicker
+  I as ThemePicker
 };

package/dist/components/layout/ThemePicker/themePicker.module.scss.js

@@ -1,39 +1,39 @@
-const e = "_themePicker_71mms_1", t = "_themeSchemes_71mms_11", m = "_themeSchemeItem_71mms_18", o = "_system_71mms_30", s = "_light_71mms_51", _ = "_dark_71mms_60", n = "_design_71mms_69", c = "_navigation_71mms_77", i = "_navigationItem_71mms_89", a = "_content_71mms_102", r = "_header_71mms_112", h = "_profile_71mms_141", l = "_footer_71mms_164", f = "_footerIcon_71mms_175", g = "_footerLabel_71mms_180", d = "_active_71mms_191", v = "_themeColors_71mms_203", I = {
+const e = "_themePicker_iibr7_1", t = "_themeSchemes_iibr7_11", i = "_themeSchemeItem_iibr7_18", o = "_auto_iibr7_30", _ = "_light_iibr7_51", n = "_dark_iibr7_60", r = "_design_iibr7_69", c = "_navigation_iibr7_77", s = "_navigationItem_iibr7_89", a = "_content_iibr7_102", h = "_header_iibr7_112", m = "_profile_iibr7_141", b = "_footer_iibr7_164", l = "_footerIcon_iibr7_175", f = "_footerLabel_iibr7_180", g = "_active_iibr7_191", d = "_themeColors_iibr7_203", v = {
   themePicker: e,
   themeSchemes: t,
-  themeSchemeItem: m,
-  system: o,
-  light: s,
-  dark: _,
-  design: n,
+  themeSchemeItem: i,
+  auto: o,
+  light: _,
+  dark: n,
+  design: r,
   navigation: c,
-  navigationItem: i,
+  navigationItem: s,
   content: a,
-  header: r,
-  profile: h,
-  footer: l,
-  footerIcon: f,
-  footerLabel: g,
-  active: d,
-  themeColors: v
+  header: h,
+  profile: m,
+  footer: b,
+  footerIcon: l,
+  footerLabel: f,
+  active: g,
+  themeColors: d
 };
 export {
-  d as active,
+  g as active,
+  o as auto,
   a as content,
-  _ as dark,
-  I as default,
-  n as design,
-  l as footer,
-  f as footerIcon,
-  g as footerLabel,
-  r as header,
-  s as light,
+  n as dark,
+  v as default,
+  r as design,
+  b as footer,
+  l as footerIcon,
+  f as footerLabel,
+  h as header,
+  _ as light,
   c as navigation,
-  i as navigationItem,
-  h as profile,
-  o as system,
-  v as themeColors,
+  s as navigationItem,
+  m as profile,
+  d as themeColors,
   e as themePicker,
-  m as themeSchemeItem,
+  i as themeSchemeItem,
   t as themeSchemes
 };

package/dist/components/layout/ThemeSelect/ThemeSelect.d.ts

@@ -0,0 +1,3 @@
+import { TThemeSwitchProps } from './types';
+export declare const ThemeSelect: import('react').ForwardRefExoticComponent<TThemeSwitchProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ThemeSelect.d.ts.map

package/dist/components/layout/ThemeSelect/ThemeSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/ThemeSelect/ThemeSelect.tsx"],"names":[],"mappings":"AAQA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C,eAAO,MAAM,WAAW,8GAetB,CAAC"}

package/dist/components/layout/ThemeSelect/types.d.ts

@@ -0,0 +1,10 @@
+import { EIconType } from '../../base/Icon/types';
+import { EButtonSize, EButtonTypes } from '../../base/Button/types';
+export type TThemeSwitchProps = {
+    className?: string;
+    withLabel?: boolean;
+    type?: keyof typeof EButtonTypes;
+    size?: keyof typeof EButtonSize;
+    iconType?: keyof typeof EIconType;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/components/layout/ThemeSelect/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/ThemeSelect/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAExD,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAEpE,MAAM,MAAM,iBAAiB,GAAG;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC;IACjC,IAAI,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IAChC,QAAQ,CAAC,EAAE,MAAM,OAAO,SAAS,CAAC;CAClC,CAAA"}

package/dist/components/layout/ThemeSwitch/ThemeSwitch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeSwitch.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/ThemeSwitch/ThemeSwitch.tsx"],"names":[],"mappings":"AAWA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAQ5C,eAAO,MAAM,WAAW,8GAiEtB,CAAC"}
+{"version":3,"file":"ThemeSwitch.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/ThemeSwitch/ThemeSwitch.tsx"],"names":[],"mappings":"AAWA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAS5C,eAAO,MAAM,WAAW,8GA+DtB,CAAC"}

package/dist/components/layout/ThemeSwitch/ThemeSwitch.js

@@ -1,67 +1,67 @@
 "use client";
-import { jsxs as N, jsx as a } from "react/jsx-runtime";
-import { forwardRef as O, useMemo as c } from "react";
-import M from "clsx";
-import { Button as u } from "../../base/Button/Button.js";
-import { Select as j } from "../../base/Select/Select.js";
-import { EThemeColor as T } from "../../context/Theme/types.js";
-import { useXTheme as I } from "../../context/useContext.js";
-import { useScreenType as g } from "../../hooks/useScreen.js";
-import { THEME_SCHEME as m } from "../../../utils/constants/commons.js";
+import { jsxs as O, jsx as c } from "react/jsx-runtime";
+import { forwardRef as v, useMemo as a } from "react";
+import w from "clsx";
+import { Button as d } from "../../base/Button/Button.js";
+import { Select as M } from "../../base/Select/Select.js";
+import { useXTheme as g } from "../../context/useContext.js";
+import { useScreenType as j } from "../../hooks/useScreen.js";
+import { isValidThemeColor as I, getColorLabel as k } from "../../../utils/helper/colorHelper.js";
+import { ThemeColorsPreset as u, THEME_SCHEME as m } from "../../../utils/constants/theme.js";
 /* empty css                 */
-const k = Object.values(T).map((t) => ({
-  value: t,
-  label: t.charAt(0).toUpperCase() + t.slice(1)
-})), i = Object.values(T), H = O((t, d) => {
-  const { className: C, type: x = "secondary", size: n = "default", iconType: s = "solid" } = t, { themeScheme: e, setThemeScheme: b, themeColor: r, setThemeColor: h } = I(), { isMobile: S, isDesktop: y } = g(), l = !S, p = c(() => m[(m.findIndex((o) => o.name === e) + 1) % m.length], [e]), v = c(() => {
+const H = Object.entries(u).map(([r, n]) => ({
+  label: r.charAt(0).toUpperCase() + r.slice(1),
+  value: n
+})), h = Object.values(u), L = v((r, n) => {
+  const { className: C, type: x = "secondary", size: s = "default", iconType: i = "solid" } = r, { themeScheme: e, setThemeScheme: S, themeColor: t, setThemeColor: p } = g(), { isMobile: l, isDesktop: b } = j(), f = a(() => m[(m.findIndex((o) => o.name === e) + 1) % m.length], [e]), y = a(() => {
     var o;
-    return ((o = m.find((w) => w.name === e)) == null ? void 0 : o.icon) ?? "";
-  }, [e]), f = c(() => i[(i.findIndex((o) => o === r) + 1) % i.length], [r]), E = M(
+    return ((o = m.find((N) => N.name === e)) == null ? void 0 : o.icon) ?? "";
+  }, [e]), T = a(() => h[(h.findIndex((o) => o === t) + 1) % h.length], [t]), E = w(
     "xtrThemeSwitch",
     C,
-    l && "withLabel"
+    !l && "withLabel"
   );
-  return !e || !r ? null : /* @__PURE__ */ N("div", { ref: d, className: E, children: [
-    /* @__PURE__ */ a(
-      u,
+  return !e || !I(t) ? null : /* @__PURE__ */ O("div", { ref: n, className: E, children: [
+    /* @__PURE__ */ c(
+      d,
       {
         className: "xtrThemeScheme",
         type: x,
-        size: n,
-        icon: v,
-        iconType: s,
-        label: l ? e === "system" ? "auto" : e : void 0,
-        onClick: () => p.name && b(p.name)
+        size: s,
+        icon: y,
+        iconType: i,
+        label: l ? void 0 : e,
+        onClick: () => f.name && S(f.name)
       }
     ),
-    y ? /* @__PURE__ */ a(
-      j,
+    b ? /* @__PURE__ */ c(
+      M,
       {
         clearable: !1,
         searchable: !1,
-        size: n,
-        options: k,
+        size: s,
         icon: "f53f",
-        iconType: s,
+        iconType: i,
         placeholder: "Theme",
-        value: r,
-        onChange: h
+        options: H,
+        value: t,
+        onChange: p
       }
-    ) : /* @__PURE__ */ a(
-      u,
+    ) : /* @__PURE__ */ c(
+      d,
       {
         className: "xtrThemeColor",
         type: "primary",
-        size: n,
+        size: s,
         icon: "f53f",
-        iconType: s,
-        label: l ? r : void 0,
-        onClick: () => f && h(f)
+        iconType: i,
+        label: l ? void 0 : k(t),
+        onClick: () => T && p(T)
       }
     )
   ] });
 });
-H.displayName = "ThemeSwitch";
+L.displayName = "ThemeSwitch";
 export {
-  H as ThemeSwitch
+  L as ThemeSwitch
 };