xtreme-ui 0.0.94 → 0.0.96

package/dist/components/base/Select/Select.js

@@ -1,65 +1,74 @@
 "use client";
-import { jsxs as M, jsx as c } from "react/jsx-runtime";
-import { useState as I, useMemo as O } from "react";
-import j from "clsx";
-import y from "react-select";
-import { Icon as z } from "../Icon/Icon.js";
+import { jsxs as I, jsx as c } from "react/jsx-runtime";
+import { useState as O, useMemo as j } from "react";
+import y from "clsx";
+import z from "react-select";
+import { isEqual as d } from "../../../utils/function/common.js";
+import { Icon as H } from "../Icon/Icon.js";
 /* empty css            */
-function $(m) {
+function $(h) {
   const {
-    className: d,
-    multi: s = !1,
-    placeholder: l = "Select an option",
-    noOptionsMessage: f,
-    icon: o,
-    size: n = "default",
-    iconType: u = "regular",
-    clearable: h = !0,
-    searchable: r = !0,
-    disabled: S = !1,
-    loading: x = !1,
-    options: a,
+    className: S,
+    multi: l = !1,
+    placeholder: a = "Select an option",
+    noOptionsMessage: v,
+    icon: n,
+    size: i = "default",
+    iconType: x = "regular",
+    clearable: g = !0,
+    searchable: m = !0,
+    disabled: C = !1,
+    loading: b = !1,
+    options: o,
     value: t,
-    onChange: g
-  } = m, [i, p] = I(!1), v = O(
-    () => a.find((e) => e.value === t),
-    [a, t]
-  ), C = j(
+    onChange: p
+  } = h, [u, f] = O(!1), N = j(() => {
+    if (l) {
+      const e = t ?? [];
+      return o.filter((s) => e.some((r) => d(s.value, r)));
+    } else
+      return o.find((e) => d(e.value, t)) || null;
+  }, [l, o, t]), M = y(
     "xtrSelectWrapper",
-    n && `${n}Size`,
-    s ? "multi" : "single",
-    o && "withIcon",
+    i && `${i}Size`,
+    l ? "multi" : "single",
+    n && "withIcon",
     !!t && "withValue",
-    i && "open",
-    !r && "noSearch",
-    d
+    u && "open",
+    !m && "noSearch",
+    S
   );
-  return /* @__PURE__ */ M("div", { className: C, children: [
+  return /* @__PURE__ */ I("div", { className: M, children: [
     /* @__PURE__ */ c(
-      y,
+      z,
       {
         className: "xtrSelect",
         classNamePrefix: "xtrSelect",
-        isMulti: s,
-        menuIsOpen: i,
-        onMenuOpen: () => p(!0),
-        onMenuClose: () => p(!1),
-        noOptionsMessage: f,
-        placeholder: l,
-        isClearable: h,
-        isSearchable: r,
-        isDisabled: S,
-        isLoading: x,
-        options: a,
-        value: v,
+        isMulti: l,
+        menuIsOpen: u,
+        onMenuOpen: () => f(!0),
+        onMenuClose: () => f(!1),
+        noOptionsMessage: v,
+        placeholder: a,
+        isClearable: g,
+        isSearchable: m,
+        isDisabled: C,
+        isLoading: b,
+        options: o,
+        value: N,
         onChange: (e) => {
-          const b = s ? e == null ? void 0 : e.map(({ value: N }) => N) : e == null ? void 0 : e.value;
-          g(b);
+          if (l) {
+            const s = (e == null ? void 0 : e.map((r) => r.value)) ?? [];
+            p(s);
+          } else {
+            const s = (e == null ? void 0 : e.value) ?? null;
+            p(s);
+          }
         }
       }
     ),
-    l && !s && /* @__PURE__ */ c("p", { className: "placeholder", children: l }),
-    o && /* @__PURE__ */ c(z, { className: "xtrSelectIcon", code: o, type: u })
+    a && !l && /* @__PURE__ */ c("p", { className: "placeholder", children: a }),
+    n && /* @__PURE__ */ c(H, { className: "xtrSelectIcon", code: n, type: x })
   ] });
 }
 export {

package/dist/components/base/Select/types.d.ts

@@ -24,11 +24,16 @@ type TCommonProps<T> = {
     loading?: boolean;
     options: Option<T>[];
 };
-type SingleProps<T> = TCommonProps<T> & {
+export type SingleProps<T> = TCommonProps<T> & {
     multi?: false;
-    value?: T;
-    onChange: (value: T) => void;
+    value?: T | undefined;
+    onChange: (value: T | undefined) => void;
 };
-export type TSelectProps<T> = SingleProps<T>;
+export type MultiProps<T> = TCommonProps<T> & {
+    multi: true;
+    value?: T[];
+    onChange: (value: T[]) => void;
+};
+export type TSelectProps<T> = SingleProps<T> | MultiProps<T>;
 export {};
 //# sourceMappingURL=types.d.ts.map

package/dist/components/base/Select/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/base/Select/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,oBAAY,WAAW;IACtB,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,KAAK,UAAU;CACf;AAED,MAAM,MAAM,MAAM,CAAC,CAAC,IAAI;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,CAAC,CAAA;CAAE,CAAC;AACpD,KAAK,YAAY,CAAC,CAAC,IAAI;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE;QAAE,UAAU,EAAE,MAAM,CAAA;KAAE,KAAK,SAAS,CAAC;IAC9D,IAAI,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,OAAO,SAAS,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;CACrB,CAAC;AACF,KAAK,WAAW,CAAC,CAAC,IAAI,YAAY,CAAC,CAAC,CAAC,GAAG;IACvC,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;CAC7B,CAAC;AAQF,MAAM,MAAM,YAAY,CAAC,CAAC,IAAI,WAAW,CAAC,CAAC,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/base/Select/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,oBAAY,WAAW;IACrB,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED,MAAM,MAAM,MAAM,CAAC,CAAC,IAAI;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,CAAC,CAAA;CAAE,CAAC;AAEpD,KAAK,YAAY,CAAC,CAAC,IAAI;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE;QAAE,UAAU,EAAE,MAAM,CAAA;KAAE,KAAK,SAAS,CAAC;IAC9D,IAAI,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,OAAO,SAAS,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI,YAAY,CAAC,CAAC,CAAC,GAAG;IAC7C,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,KAAK,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,SAAS,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,MAAM,MAAM,UAAU,CAAC,CAAC,IAAI,YAAY,CAAC,CAAC,CAAC,GAAG;IAC5C,KAAK,EAAE,IAAI,CAAC;IACZ,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;IACZ,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,YAAY,CAAC,CAAC,IAAI,WAAW,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC"}

package/dist/components/base/Textfield/Textfield.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textfield.d.ts","sourceRoot":"","sources":["../../../../src/components/base/Textfield/Textfield.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,eAAO,MAAM,SAAS,8GAsGpB,CAAC"}
+{"version":3,"file":"Textfield.d.ts","sourceRoot":"","sources":["../../../../src/components/base/Textfield/Textfield.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,eAAO,MAAM,SAAS,8GAwGpB,CAAC"}

package/dist/components/base/Textfield/Textfield.js

@@ -1,17 +1,18 @@
 "use client";
 import { jsxs as w, jsx as o } from "react/jsx-runtime";
-import { forwardRef as v, useMemo as f } from "react";
-import D from "clsx";
-import { Icon as F } from "../Icon/Icon.js";
+import { forwardRef as D, useMemo as f } from "react";
+import F from "clsx";
+import { Icon as L } from "../Icon/Icon.js";
 import r from "./textfield.module.scss.js";
-const L = v((g, T) => {
+const U = D((g, T) => {
   const {
-    className: C,
-    style: I,
+    className: v,
+    style: C,
     type: e = "text",
-    textarea: n,
+    textarea: t,
     placeholder: a,
     autoComplete: m = "off",
+    active: I,
     autoFocus: d,
     icon: l,
     iconType: E = "regular",
@@ -23,28 +24,29 @@ const L = v((g, T) => {
     onKeyDown: i,
     onEnterKey: u
   } = g, p = f(() => {
-    if (n === !0) return null;
+    if (t === !0) return null;
     if (l) return l;
     if (e === "number") return "23";
     if (e === "search") return "f002";
     if (e === "password") return "f30d";
-  }, [n, l, e]), K = f(() => {
+  }, [t, l, e]), K = f(() => {
     if (a) return a;
     if (e === "number") return "Enter a number";
     if (e === "search") return "Search";
     if (e === "password") return "Enter password";
     if (e === "phone") return "Enter phone number";
-  }, [a, e]), j = f(() => e === "phone" ? "number" : e, [e]), N = (t) => {
-    c == null || c(t);
-  }, b = (t) => {
-    t.key === "Enter" && (u == null || u(t)), i == null || i(t);
-  }, k = D(
+  }, [a, e]), j = f(() => e === "phone" ? "number" : e, [e]), N = (n) => {
+    c == null || c(n);
+  }, b = (n) => {
+    n.key === "Enter" && (u == null || u(n)), i == null || i(n);
+  }, k = F(
     r.textfield,
     p && r.withIcon,
-    n && r.textarea,
+    t && r.textarea,
     s && r.hasValue,
     e === "phone" && r.phone,
-    C
+    I && r.active,
+    v
   );
   return /* @__PURE__ */ w(
     "div",
@@ -52,14 +54,14 @@ const L = v((g, T) => {
       ref: T,
       className: k,
       role: "textbox",
-      style: I,
+      style: C,
       children: [
-        p && !n && /* @__PURE__ */ o(F, { className: r.icon, code: p, type: E }),
+        p && !t && /* @__PURE__ */ o(L, { className: r.icon, code: p, type: E }),
         e === "phone" && /* @__PURE__ */ w("div", { className: r.dialCode, children: [
           /* @__PURE__ */ o("span", { style: { backgroundImage: "url(https://flagcdn.com/in.svg)" } }),
           /* @__PURE__ */ o("p", { children: "+91" })
         ] }),
-        n ? /* @__PURE__ */ o(
+        t ? /* @__PURE__ */ o(
           "textarea",
           {
             className: r.input,
@@ -92,7 +94,7 @@ const L = v((g, T) => {
     }
   );
 });
-L.displayName = "Textfield";
+U.displayName = "Textfield";
 export {
-  L as Textfield
+  U as Textfield
 };

package/dist/components/base/Textfield/textfield.module.scss.js

@@ -1,23 +1,25 @@
-const n = "_textfield_1l1n6_1", t = "_icon_1l1n6_29", e = "_dialCode_1l1n6_39", _ = "_input_1l1n6_60", l = "_placeholder_1l1n6_79", o = "_withIcon_1l1n6_94", a = "_textarea_1l1n6_104", c = "_phone_1l1n6_114", s = "_hasValue_1l1n6_120", i = {
-  textfield: n,
-  icon: t,
-  dialCode: e,
-  input: _,
-  placeholder: l,
-  withIcon: o,
-  textarea: a,
-  phone: c,
-  hasValue: s
+const t = "_textfield_1dif2_1", e = "_icon_1dif2_29", _ = "_dialCode_1dif2_39", i = "_input_1dif2_60", o = "_placeholder_1dif2_79", a = "_withIcon_1dif2_94", c = "_textarea_1dif2_104", d = "_phone_1dif2_114", n = "_hasValue_1dif2_120", l = "_active_1dif2_141", s = {
+  textfield: t,
+  icon: e,
+  dialCode: _,
+  input: i,
+  placeholder: o,
+  withIcon: a,
+  textarea: c,
+  phone: d,
+  hasValue: n,
+  active: l
 };
 export {
-  i as default,
-  e as dialCode,
-  s as hasValue,
-  t as icon,
-  _ as input,
-  c as phone,
-  l as placeholder,
-  a as textarea,
-  n as textfield,
-  o as withIcon
+  l as active,
+  s as default,
+  _ as dialCode,
+  n as hasValue,
+  e as icon,
+  i as input,
+  d as phone,
+  o as placeholder,
+  c as textarea,
+  t as textfield,
+  a as withIcon
 };

package/dist/components/base/Textfield/types.d.ts

@@ -6,6 +6,7 @@ export type TTextfieldProps = {
     type?: keyof typeof ETextfieldType;
     textarea?: boolean;
     placeholder?: string;
+    active?: boolean;
     autoFocus?: boolean;
     autoComplete?: keyof typeof ETextfieldAutoComplete;
     icon?: string;

package/dist/components/base/Textfield/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/base/Textfield/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE9E,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,MAAM,MAAM,eAAe,GAAG;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,OAAO,sBAAsB,CAAC;IACnD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,OAAO,SAAS,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,KAAK,IAAI,CAAC;IAChF,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,KAAK,IAAI,CAAC;IAC9E,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,KAAK,IAAI,CAAC;IAC7E,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC3C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC5C,CAAA;AACD,aAAK,cAAc;IAClB,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,QAAQ,aAAa;IACrB,MAAM,WAAW;CACjB;AAED,aAAK,sBAAsB;IAC1B,KAAK,QAAQ;IACb,IAAI,OAAO;IACX,MAAM,SAAS;IACf,kBAAkB,qBAAqB;IACvC,YAAY,eAAe;IAC3B,iBAAiB,oBAAoB;IACrC,aAAa,gBAAgB;IAC7B,kBAAkB,qBAAqB;IACvC,UAAU,aAAa;IACvB,OAAO,UAAU;IACjB,UAAU,aAAa;IACvB,cAAc,iBAAiB;IAC/B,kBAAkB,qBAAqB;IACvC,eAAe,kBAAkB;IACjC,oBAAoB,uBAAuB;IAC3C,cAAc,iBAAiB;IAC/B,gBAAgB,mBAAmB;IACnC,eAAe,kBAAkB;IACjC,eAAe,kBAAkB;IACjC,eAAe,kBAAkB;IACjC,gBAAgB,mBAAmB;IACnC,gBAAgB,mBAAmB;IACnC,gBAAgB,mBAAmB;IACnC,gBAAgB,mBAAmB;IACnC,SAAS,YAAY;IACrB,cAAc,iBAAiB;IAC/B,aAAa,gBAAgB;IAC7B,SAAS,YAAY;IACrB,eAAe,kBAAkB;IACjC,oBAAoB,uBAAuB;IAC3C,gBAAgB,mBAAmB;IACnC,WAAW,cAAc;IACzB,QAAQ,WAAW;IACnB,cAAc,iBAAiB;IAC/B,aAAa,gBAAgB;IAC7B,QAAQ,WAAW;IACnB,SAAS,YAAY;IACrB,sBAAsB,yBAAyB;IAC/C,oBAAoB,uBAAuB;IAC3C,UAAU,aAAa;IACvB,MAAM,SAAS;IACf,UAAU,aAAa;IACvB,YAAY,eAAe;IAC3B,WAAW,cAAc;IACzB,KAAK,QAAQ;IACb,kBAAkB,qBAAqB;IACvC,cAAc,iBAAiB;IAC/B,eAAe,kBAAkB;IACjC,WAAW,cAAc;IACzB,eAAe,kBAAkB;CACjC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/base/Textfield/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE9E,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,MAAM,MAAM,eAAe,GAAG;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,OAAO,cAAc,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,OAAO,sBAAsB,CAAC;IACnD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,OAAO,SAAS,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,KAAK,IAAI,CAAC;IAChF,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,KAAK,IAAI,CAAC;IAC9E,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,KAAK,IAAI,CAAC;IAC7E,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC3C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC5C,CAAA;AACD,aAAK,cAAc;IAClB,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,QAAQ,aAAa;IACrB,MAAM,WAAW;CACjB;AAED,aAAK,sBAAsB;IAC1B,KAAK,QAAQ;IACb,IAAI,OAAO;IACX,MAAM,SAAS;IACf,kBAAkB,qBAAqB;IACvC,YAAY,eAAe;IAC3B,iBAAiB,oBAAoB;IACrC,aAAa,gBAAgB;IAC7B,kBAAkB,qBAAqB;IACvC,UAAU,aAAa;IACvB,OAAO,UAAU;IACjB,UAAU,aAAa;IACvB,cAAc,iBAAiB;IAC/B,kBAAkB,qBAAqB;IACvC,eAAe,kBAAkB;IACjC,oBAAoB,uBAAuB;IAC3C,cAAc,iBAAiB;IAC/B,gBAAgB,mBAAmB;IACnC,eAAe,kBAAkB;IACjC,eAAe,kBAAkB;IACjC,eAAe,kBAAkB;IACjC,gBAAgB,mBAAmB;IACnC,gBAAgB,mBAAmB;IACnC,gBAAgB,mBAAmB;IACnC,gBAAgB,mBAAmB;IACnC,SAAS,YAAY;IACrB,cAAc,iBAAiB;IAC/B,aAAa,gBAAgB;IAC7B,SAAS,YAAY;IACrB,eAAe,kBAAkB;IACjC,oBAAoB,uBAAuB;IAC3C,gBAAgB,mBAAmB;IACnC,WAAW,cAAc;IACzB,QAAQ,WAAW;IACnB,cAAc,iBAAiB;IAC/B,aAAa,gBAAgB;IAC7B,QAAQ,WAAW;IACnB,SAAS,YAAY;IACrB,sBAAsB,yBAAyB;IAC/C,oBAAoB,uBAAuB;IAC3C,UAAU,aAAa;IACvB,MAAM,SAAS;IACf,UAAU,aAAa;IACvB,YAAY,eAAe;IAC3B,WAAW,cAAc;IACzB,KAAK,QAAQ;IACb,kBAAkB,qBAAqB;IACvC,cAAc,iBAAiB;IAC/B,eAAe,kBAAkB;IACjC,WAAW,cAAc;IACzB,eAAe,kBAAkB;CACjC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../../../src/components/context/Theme/ThemeContext.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAe,iBAAiB,EAAE,mBAAmB,EAAgB,MAAM,SAAS,CAAC;AAS5F,QAAA,MAAM,YAAY,4CAA8B,CAAC;AACjD,QAAA,MAAM,aAAa,GAAI,cAAc,mBAAmB,4CA8BvD,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../../../src/components/context/Theme/ThemeContext.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAe,iBAAiB,EAAE,mBAAmB,EAAgB,MAAM,SAAS,CAAC;AAS5F,QAAA,MAAM,YAAY,4CAA8B,CAAC;AACjD,QAAA,MAAM,aAAa,GAAI,cAAc,mBAAmB,4CAoCvD,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,CAAC"}

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":"AAaA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,EAAqC,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAG/E,eAAO,MAAM,WAAW,8GAwEtB,CAAC"}

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

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