xtreme-ui 0.0.93 → 0.0.95

package/dist/index.js

@@ -1,102 +1,104 @@
 /* empty css                  */
-import { STORAGE as t, THEME_SCHEME as p } from "./utils/constants/commons.js";
-import { FACE_ICONS as f } from "./utils/constants/iconCollection.js";
-import { getLocalState as x, setLocalState as a } from "./utils/function/localStorage.js";
-import { assignRef as n, mergeRefs as c } from "./utils/function/mergeRefs.js";
-import { capitalizeFirstLetter as g, safeStringFromCodePoint as l, unicodeToString as d } from "./utils/function/string.js";
-import { doc as P, elementObserver as C, getCssProperty as I, getCssPropertyPx as T, getCssPropertyVh as u, getCssPropertyVw as y, isClient as z, localStore as A, setCssProperty as F, waitForElement as h, win as k } from "./utils/helper/domHelper.js";
-import { createImage as L, getCroppedImg as w, getImageSize as D, getRadianAngle as R, readImageFile as B, readImageSrc as M } from "./utils/helper/imageHelper.js";
-import { themeController as X } from "./utils/helper/themeController.js";
-import { XProvider as H } from "./components/context/index.js";
-import { useXData as V, useXTheme as _ } from "./components/context/useContext.js";
-import { ActionCard as j } from "./components/base/ActionCard/ActionCard.js";
-import { EActionCardSize as J } from "./components/base/ActionCard/types.js";
-import { Avatar as Q } from "./components/base/Avatar/Avatar.js";
-import { EAvatarSize as W } from "./components/base/Avatar/types.js";
-import { Button as Z } from "./components/base/Button/Button.js";
-import { EButtonTypes as ee } from "./components/base/Button/types.js";
-import { Icon as oe } from "./components/base/Icon/Icon.js";
-import { EIconSize as pe } from "./components/base/Icon/types.js";
-import { Lottie as fe } from "./components/base/Lottie/Lottie.js";
-import { ELottieSize as xe } from "./components/base/Lottie/types.js";
-import { ProgressBar as se } from "./components/base/ProgressBar/ProgressBar.js";
-import { Spinner as ce } from "./components/base/Spinner/Spinner.js";
-import { ESpinnerSize as ge } from "./components/base/Spinner/types.js";
-import { Textfield as de } from "./components/base/Textfield/Textfield.js";
-import { DatePicker as Pe } from "./components/base/DatePicker/DatePicker.js";
+import { STORAGE as t, THEME_SCHEME as m, ThemeColorsPreset as p, defaultColorPreset as f } from "./utils/constants/theme.js";
+import { FACE_ICONS as x } from "./utils/constants/iconCollection.js";
+import { getLocalState as s, setLocalState as n } from "./utils/function/localStorage.js";
+import { assignRef as S, mergeRefs as g } from "./utils/function/mergeRefs.js";
+import { capitalizeFirstLetter as P, safeStringFromCodePoint as d, unicodeToString as C } from "./utils/function/string.js";
+import { doc as T, elementObserver as u, getCssProperty as I, getCssPropertyPx as y, getCssPropertyVh as h, getCssPropertyVw as z, isClient as A, localStore as F, setCssProperty as k, waitForElement as v, win as L } from "./utils/helper/domHelper.js";
+import { createImage as D, getCroppedImg as R, getImageSize as B, getRadianAngle as M, readImageFile as O, readImageSrc as X } from "./utils/helper/imageHelper.js";
+import { themeController as H } from "./utils/helper/themeController.js";
+import { XProvider as V } from "./components/context/index.js";
+import { useXData as G, useXTheme as j } from "./components/context/useContext.js";
+import { ActionCard as J } from "./components/base/ActionCard/ActionCard.js";
+import { EActionCardSize as Q } from "./components/base/ActionCard/types.js";
+import { Avatar as W } from "./components/base/Avatar/Avatar.js";
+import { EAvatarSize as Z } from "./components/base/Avatar/types.js";
+import { Button as ee } from "./components/base/Button/Button.js";
+import { EButtonTypes as oe } from "./components/base/Button/types.js";
+import { Icon as me } from "./components/base/Icon/Icon.js";
+import { EIconSize as fe } from "./components/base/Icon/types.js";
+import { Lottie as xe } from "./components/base/Lottie/Lottie.js";
+import { ELottieSize as se } from "./components/base/Lottie/types.js";
+import { ProgressBar as ce } from "./components/base/ProgressBar/ProgressBar.js";
+import { Spinner as ge } from "./components/base/Spinner/Spinner.js";
+import { ESpinnerSize as Pe } from "./components/base/Spinner/types.js";
+import { Textfield as Ce } from "./components/base/Textfield/Textfield.js";
+import { DatePicker as Te } from "./components/base/DatePicker/DatePicker.js";
 import { EDatePickerTypes as Ie } from "./components/base/DatePicker/types.js";
-import { FilePicker as ue } from "./components/base/FilePicker/FilePicker.js";
-import { FilePickerIcon as ze } from "./components/base/FilePicker/types.js";
-import { Select as Fe } from "./components/base/Select/Select.js";
-import { ColorPopper as ke } from "./components/base/ColorPopper/ColorPopper.js";
-import { Sider as Le } from "./components/layout/Sider/Sider.js";
-import { SiderModal as De } from "./components/layout/SiderModal/SiderModal.js";
-import { Navigation as Be } from "./components/layout/Navigation/Navigation.js";
-import { ThemePicker as Oe } from "./components/layout/ThemePicker/ThemePicker.js";
-import { ThemeSwitch as be } from "./components/layout/ThemeSwitch/ThemeSwitch.js";
-import { ImageEditor as Ne } from "./components/layout/ImageEditor/ImageEditor.js";
-import { useScreenType as _e } from "./components/hooks/useScreen.js";
-import { usePersistingState as je } from "./components/hooks/usePersistingState.js";
-import { useDebouncedEffect as Je } from "./components/hooks/useDebouncedEffect.js";
+import { FilePicker as he } from "./components/base/FilePicker/FilePicker.js";
+import { FilePickerIcon as Ae } from "./components/base/FilePicker/types.js";
+import { Select as ke } from "./components/base/Select/Select.js";
+import { ColorPopper as Le } from "./components/base/ColorPopper/ColorPopper.js";
+import { Sider as De } from "./components/layout/Sider/Sider.js";
+import { SiderModal as Be } from "./components/layout/SiderModal/SiderModal.js";
+import { Navigation as Oe } from "./components/layout/Navigation/Navigation.js";
+import { ThemePicker as be } from "./components/layout/ThemePicker/ThemePicker.js";
+import { ThemeSwitch as Ne } from "./components/layout/ThemeSwitch/ThemeSwitch.js";
+import { ImageEditor as _e } from "./components/layout/ImageEditor/ImageEditor.js";
+import { useScreenType as je } from "./components/hooks/useScreen.js";
+import { usePersistingState as Je } from "./components/hooks/usePersistingState.js";
+import { useDebouncedEffect as Qe } from "./components/hooks/useDebouncedEffect.js";
 export {
-  j as ActionCard,
-  Q as Avatar,
-  Z as Button,
-  ke as ColorPopper,
-  Pe as DatePicker,
-  J as EActionCardSize,
-  W as EAvatarSize,
-  ee as EButtonTypes,
+  J as ActionCard,
+  W as Avatar,
+  ee as Button,
+  Le as ColorPopper,
+  Te as DatePicker,
+  Q as EActionCardSize,
+  Z as EAvatarSize,
+  oe as EButtonTypes,
   Ie as EDatePickerTypes,
-  pe as EIconSize,
-  xe as ELottieSize,
-  ge as ESpinnerSize,
-  f as FACE_ICONS,
-  ue as FilePicker,
-  ze as FilePickerIcon,
-  oe as Icon,
-  Ne as ImageEditor,
-  fe as Lottie,
-  Be as Navigation,
-  se as ProgressBar,
+  fe as EIconSize,
+  se as ELottieSize,
+  Pe as ESpinnerSize,
+  x as FACE_ICONS,
+  he as FilePicker,
+  Ae as FilePickerIcon,
+  me as Icon,
+  _e as ImageEditor,
+  xe as Lottie,
+  Oe as Navigation,
+  ce as ProgressBar,
   t as STORAGE,
-  Fe as Select,
-  Le as Sider,
-  De as SiderModal,
-  ce as Spinner,
-  p as THEME_SCHEME,
-  de as Textfield,
-  Oe as ThemePicker,
-  be as ThemeSwitch,
-  H as XProvider,
-  n as assignRef,
-  g as capitalizeFirstLetter,
-  L as createImage,
-  P as doc,
-  C as elementObserver,
-  w as getCroppedImg,
+  ke as Select,
+  De as Sider,
+  Be as SiderModal,
+  ge as Spinner,
+  m as THEME_SCHEME,
+  Ce as Textfield,
+  p as ThemeColorsPreset,
+  be as ThemePicker,
+  Ne as ThemeSwitch,
+  V as XProvider,
+  S as assignRef,
+  P as capitalizeFirstLetter,
+  D as createImage,
+  f as defaultColorPreset,
+  T as doc,
+  u as elementObserver,
+  R as getCroppedImg,
   I as getCssProperty,
-  T as getCssPropertyPx,
-  u as getCssPropertyVh,
-  y as getCssPropertyVw,
-  D as getImageSize,
-  x as getLocalState,
-  R as getRadianAngle,
-  z as isClient,
-  A as localStore,
-  c as mergeRefs,
-  B as readImageFile,
-  M as readImageSrc,
-  l as safeStringFromCodePoint,
-  F as setCssProperty,
-  a as setLocalState,
-  X as themeController,
-  d as unicodeToString,
-  Je as useDebouncedEffect,
-  je as usePersistingState,
-  _e as useScreenType,
-  V as useXData,
-  _ as useXTheme,
-  h as waitForElement,
-  k as win
+  y as getCssPropertyPx,
+  h as getCssPropertyVh,
+  z as getCssPropertyVw,
+  B as getImageSize,
+  s as getLocalState,
+  M as getRadianAngle,
+  A as isClient,
+  F as localStore,
+  g as mergeRefs,
+  O as readImageFile,
+  X as readImageSrc,
+  d as safeStringFromCodePoint,
+  k as setCssProperty,
+  n as setLocalState,
+  H as themeController,
+  C as unicodeToString,
+  Qe as useDebouncedEffect,
+  Je as usePersistingState,
+  je as useScreenType,
+  G as useXData,
+  j as useXTheme,
+  v as waitForElement,
+  L as win
 };

package/dist/utils/constants/theme.d.ts

@@ -0,0 +1,19 @@
+import { EThemeScheme, TThemeColor } from '../../components/context/Theme/types';
+export declare const STORAGE: {
+    themeSchemeAttr: string;
+    themeScheme: string;
+    themeColor: string;
+};
+export declare const THEME_SCHEME: readonly [{
+    readonly name: EThemeScheme.auto;
+    readonly icon: "e2ca";
+}, {
+    readonly name: EThemeScheme.light;
+    readonly icon: "f763";
+}, {
+    readonly name: EThemeScheme.dark;
+    readonly icon: "f754";
+}];
+export declare const ThemeColorsPreset: Record<string, TThemeColor>;
+export declare const defaultColorPreset: TThemeColor;
+//# sourceMappingURL=theme.d.ts.map

package/dist/utils/constants/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/utils/constants/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAE5E,eAAO,MAAM,OAAO;;;;CAInB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;;;;EAIf,CAAC;AAEX,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAOzD,CAAC;AACF,eAAO,MAAM,kBAAkB,aAA2B,CAAC"}

package/dist/utils/constants/theme.js

@@ -0,0 +1,29 @@
+import { EThemeScheme as e } from "../../components/context/Theme/types.js";
+const t = {
+  themeSchemeAttr: "data-theme-scheme",
+  themeScheme: "xThemeScheme",
+  themeColor: "xThemeColor"
+}, m = [
+  { name: e.auto, icon: "e2ca" },
+  { name: e.light, icon: "f763" },
+  { name: e.dark, icon: "f754" }
+], o = {
+  red: { h: 352, s: 100, l: 61 },
+  // hsl(352 100 61)
+  pink: { h: 342, s: 100, l: 67 },
+  // hsl(342 100 67)
+  orange: { h: 2, s: 100, l: 70 },
+  // hsl(2 100 70)
+  blue: { h: 207, s: 90, l: 54 },
+  // hsl(207 90 54)
+  green: { h: 147, s: 20, l: 58 },
+  // hsl(147 20 58)
+  violet: { h: 256, s: 100, l: 66 }
+  // hsl(256 100 66)
+}, r = o.orange;
+export {
+  t as STORAGE,
+  m as THEME_SCHEME,
+  o as ThemeColorsPreset,
+  r as defaultColorPreset
+};

package/dist/utils/function/common.d.ts

@@ -0,0 +1,2 @@
+export declare const isEqual: (a: unknown, b: unknown) => boolean;
+//# sourceMappingURL=common.d.ts.map

package/dist/utils/function/common.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../src/utils/function/common.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,GAAI,GAAG,OAAO,EAAE,GAAG,OAAO,KAAG,OAKhD,CAAC"}

package/dist/utils/function/common.js

@@ -0,0 +1,4 @@
+const o = (e, t) => typeof e == "string" && typeof t == "string" ? e === t : typeof e == "object" && typeof t == "object" && e !== null && t !== null ? Object.entries(e).every(([r, n]) => t[r] === n) : !1;
+export {
+  o as isEqual
+};

package/dist/utils/helper/colorHelper.d.ts

@@ -0,0 +1,5 @@
+import { TThemeColor } from '../../components/context/Theme/types';
+export declare const guessClosestColorName: (color: TThemeColor) => any;
+export declare function getColorLabel(c?: TThemeColor): string | undefined;
+export declare const isValidThemeColor: (c?: TThemeColor) => boolean;
+//# sourceMappingURL=colorHelper.d.ts.map

package/dist/utils/helper/colorHelper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorHelper.d.ts","sourceRoot":"","sources":["../../../src/utils/helper/colorHelper.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAG9D,eAAO,MAAM,qBAAqB,GAAI,OAAO,WAAW,QAUvD,CAAC;AAEF,wBAAgB,aAAa,CAAE,CAAC,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,SAAS,CAMlE;AAED,eAAO,MAAM,iBAAiB,GAAI,IAAI,WAAW,KAAG,OACiC,CAAC"}

package/dist/utils/helper/colorHelper.js

@@ -0,0 +1,24 @@
+import s from "color-namer";
+import { colord as l } from "colord";
+import { ThemeColorsPreset as m } from "../constants/theme.js";
+const f = (e) => {
+  const t = l(e).toHex(), r = s(t);
+  let o = null;
+  for (const n of r.ntc)
+    (!o || n.distance < o.distance) && (o = n);
+  return (o == null ? void 0 : o.name) || void 0;
+};
+function p(e) {
+  if (e) {
+    for (const [t, r] of Object.entries(m))
+      if (e.h === r.h && e.s === r.s && e.l === r.l)
+        return t;
+    return f(e);
+  }
+}
+const b = (e) => !!e && typeof e.h == "number" && typeof e.s == "number" && typeof e.l == "number";
+export {
+  p as getColorLabel,
+  f as guessClosestColorName,
+  b as isValidThemeColor
+};

package/dist/utils/helper/themeController.d.ts

@@ -1,2 +1,3 @@
-export declare const themeController: (scheme?: string, color?: string) => string;
+import { TThemeColor } from '../../components/context/Theme/types';
+export declare const themeController: (preferredScheme: string | undefined | null, preferredColor: TThemeColor | undefined | null, defaultScheme?: string, defaultColorPreset?: TThemeColor) => string;
 //# sourceMappingURL=themeController.d.ts.map

package/dist/utils/helper/themeController.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"themeController.d.ts","sourceRoot":"","sources":["../../../src/utils/helper/themeController.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,GAAI,SAAQ,MAAsB,EAAE,QAAO,MAAqB,WAW3F,CAAC"}
+{"version":3,"file":"themeController.d.ts","sourceRoot":"","sources":["../../../src/utils/helper/themeController.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmC,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAG/F,eAAO,MAAM,eAAe,GAC3B,iBAAiB,MAAM,GAAG,SAAS,GAAG,IAAI,EAC1C,gBAAgB,WAAW,GAAG,SAAS,GAAG,IAAI,EAC9C,gBAAe,MAAuB,EACtC,qBAAoB,WAAiC,WAiCrD,CAAC"}

package/dist/utils/helper/themeController.js

@@ -1,16 +1,35 @@
-import { defaultScheme as m, defaultColor as r } from "../../components/context/Theme/types.js";
-import { STORAGE as e } from "../constants/commons.js";
-const l = (t = m, o = r) => `
-	(function() {
-      try {
-        const themeScheme = localStorage.getItem('${e.themeScheme}') || '${t}';
-        const themeColor = localStorage.getItem('${e.themeColor}') || '${o}';
+import { defaultScheme as c } from "../../components/context/Theme/types.js";
+import { defaultColorPreset as d, STORAGE as e } from "../constants/theme.js";
+const S = (r, t, o = c, m = d) => {
+  const s = JSON.stringify(r), l = t ? JSON.stringify(t) : "null", n = JSON.stringify(m);
+  return `(function() {
+		try {
+			const storedScheme = localStorage.getItem('${e.themeScheme}');
+			const themeScheme = ${s} ?? storedScheme ?? '${o}';
 
-        document.documentElement.setAttribute('${e.themeSchemeAttr}', themeScheme);
-        document.documentElement.setAttribute('${e.themeColorAttr}', themeColor);
-      } catch (e) {}
-    })();
-	`;
+			const themeColorRaw = localStorage.getItem('${e.themeColor}');
+			let {h, s, l} = ${n};
+
+			const preferredColor = ${l};
+
+			if (preferredColor) {
+				({h, s, l} = preferredColor);
+			} else {
+				try {
+					const parsed = JSON.parse(themeColorRaw);
+					if (parsed && typeof parsed.h === 'number' && typeof parsed.s === 'number' && typeof parsed.l === 'number') {
+						({h, s, l} = parsed);
+					}
+				} catch {}
+			}
+
+			document.documentElement.setAttribute('${e.themeSchemeAttr}', themeScheme);
+			document.documentElement.style.setProperty('--H', h.toString());
+			document.documentElement.style.setProperty('--S', s + '%');
+			document.documentElement.style.setProperty('--L', l + '%');
+		} catch {}
+	})();`;
+};
 export {
-  l as themeController
+  S as themeController
 };

package/dist/utils/index.d.ts

@@ -1,4 +1,4 @@
-export * from './constants/commons';
+export * from './constants/theme';
 export * from './constants/iconCollection';
 export * from './function/localStorage';
 export * from './function/mergeRefs';

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC"}