xtreme-ui 0.0.110 → 0.0.111

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPopper.d.ts","sourceRoot":"","sources":["../../../../src/components/base/ColorPopper/ColorPopper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoD,GAAG,EAAE,MAAM,OAAO,CAAC;AAwB9E,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAAK,EAAoB,iBAAiB,EAAE,MAAM,SAAS,CAAC;AACnE,OAAO,KAAK,EAAE,QAAQ,EAAoB,MAAM,cAAc,CAAC;AAE/D,iBAAS,gBAAgB,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ,EAAG,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,cAAc,CAAC,2CAsP9G;kBAtPQ,gBAAgB;;;AAwPzB,eAAO,MAAM,WAAW,EAAmC,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ,EACxF,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAAE,KACvD,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC"}
+{"version":3,"file":"ColorPopper.d.ts","sourceRoot":"","sources":["../../../../src/components/base/ColorPopper/ColorPopper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoD,GAAG,EAAE,MAAM,OAAO,CAAC;AAyB9E,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAAK,EAAoB,iBAAiB,EAAE,MAAM,SAAS,CAAC;AACnE,OAAO,KAAK,EAAE,QAAQ,EAAoB,MAAM,cAAc,CAAC;AAE/D,iBAAS,gBAAgB,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ,EAAG,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,cAAc,CAAC,2CAwP9G;kBAxPQ,gBAAgB;;;AA0PzB,eAAO,MAAM,WAAW,EAAmC,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ,EACxF,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAAE,KACvD,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC"}

package/dist/components/base/ColorPopper/ColorPopper.js

@@ -1,54 +1,55 @@
 "use client";
-import { jsxs as i, Fragment as re, jsx as t } from "react/jsx-runtime";
-import { forwardRef as le, useMemo as b, useState as C, useRef as ne, useEffect as L } from "react";
-import { useFloating as ie, autoUpdate as ae, shift as ce, flip as he, offset as de, useTransitionStyles as me, useInteractions as pe, useClick as ue, useDismiss as fe } from "@floating-ui/react";
+import { jsxs as i, Fragment as le, jsx as t } from "react/jsx-runtime";
+import { forwardRef as ne, useMemo as T, useState as C, useRef as ie, useEffect as L } from "react";
+import { useFloating as ae, autoUpdate as ce, shift as he, flip as de, offset as me, useTransitionStyles as pe, useInteractions as ue, useClick as fe, useDismiss as Ce } from "@floating-ui/react";
 import g from "clsx";
-import { colord as s, getFormat as Ce } from "colord";
-import { ColorPicker as ge } from "../ColorPicker/ColorPicker.js";
-import { Icon as xe } from "../Icon/Icon.js";
-import { Textfield as ve } from "../Textfield/Textfield.js";
-import { getColorLabel as He } from "../../../utils/helper/colorHelper.js";
-import { THEME_SCHEME as ye } from "../../../utils/constants/theme.js";
-import { mergeRefs as Ne } from "../../../utils/function/mergeRefs.js";
-import { Button as R } from "../Button/Button.js";
+import { colord as s, getFormat as ge } from "colord";
+import { ColorPicker as xe } from "../ColorPicker/ColorPicker.js";
+import { Icon as ve } from "../Icon/Icon.js";
+import { Textfield as ye } from "../Textfield/Textfield.js";
+import { useScreenType as He } from "../../hooks/useScreen.js";
+import { getColorLabel as Ne } from "../../../utils/helper/colorHelper.js";
+import { THEME_SCHEME as $e } from "../../../utils/constants/theme.js";
+import { mergeRefs as Pe } from "../../../utils/function/mergeRefs.js";
+import { Button as b } from "../Button/Button.js";
 /* empty css                 */
 function O(j, z) {
   const {
-    className: T,
+    className: R,
     popperClassName: A,
     input: x = "textfield",
-    size: q = "default",
-    placeholder: D = "Color Picker",
+    size: D = "default",
+    placeholder: q = "Color Picker",
     colorHeading: m = "Pick color",
-    schemeHeading: I,
+    schemeHeading: S,
     themeScheme: v,
-    setThemeScheme: H,
+    setThemeScheme: y,
     showReset: U = !0,
     alpha: W,
     shade: _,
-    swatch: y,
-    hideWheel: S = !1,
+    swatch: H,
+    hideWheel: I = !1,
     color: a,
     setColor: p
-  } = j, r = b(() => s(a), []), u = b(() => Ce(a), [a]), [N, c] = C(r.toHsv()), [h, d] = C(r.toHex()), [G, J] = C(m), $ = ne(!1), [E, P] = C(!1), { refs: k, floatingStyles: K, context: w } = ie({
+  } = j, { isDesktop: G } = He(), r = T(() => s(a), []), u = T(() => ge(a), [a]), [N, c] = C(r.toHsv()), [h, d] = C(r.toHex()), [J, K] = C(m), $ = ie(!1), [E, P] = C(!1), { refs: k, floatingStyles: Q, context: w } = ae({
     open: E,
     onOpenChange: P,
     middleware: [
-      ce({ crossAxis: !0, padding: 18 }),
-      he(),
-      de(({ placement: e }) => e === "bottom" ? 10 : 16)
+      he({ crossAxis: !0, padding: 18 }),
+      de(),
+      me(({ placement: e }) => e === "bottom" ? 10 : 16)
     ],
-    whileElementsMounted: ae
-  }), { isMounted: Q, styles: X } = me(w, {
+    whileElementsMounted: ce
+  }), { isMounted: X, styles: Y } = pe(w, {
     duration: 200,
     initial: ({ side: e }) => ({
       opacity: 0,
       translate: e === "bottom" ? "0px 8px" : "0px -8px"
     })
-  }), { getReferenceProps: F, getFloatingProps: Y } = pe([
-    ue(w),
-    fe(w)
-  ]), [M, Z, B] = b(() => {
+  }), { getReferenceProps: F, getFloatingProps: Z } = ue([
+    fe(w),
+    Ce(w)
+  ]), [M, ee, B] = T(() => {
     const e = s(N), o = e.toHsl(), l = r.toHsl();
     return [
       `${Math.round(o.h)} ${Math.round(o.s)}% ${Math.round(o.l)}%`,
@@ -61,13 +62,13 @@ function O(j, z) {
     d(e);
     const o = s(e);
     o.isValid() && (c(o.toHsv()), f(o));
-  }, ee = (e) => {
+  }, oe = (e) => {
     const o = s(e);
     c(e), d(o.toHex()), f(o);
-  }, oe = (e) => {
+  }, te = (e) => {
     const o = s(e);
     c(o.toHsv()), d(o.toHex()), f(o);
-  }, te = () => {
+  }, se = () => {
     c(r.toHsv()), d(r.toHex()), f(r);
   };
   return L(() => {
@@ -77,14 +78,14 @@ function O(j, z) {
     }
     $.current = !1;
   }, [a]), L(() => {
-    J(He(s(h).toHsl()) ?? m);
-  }, [m, h]), /* @__PURE__ */ i(re, { children: [
+    K(Ne(s(h).toHsl()) ?? m);
+  }, [m, h]), /* @__PURE__ */ i(le, { children: [
     x === "button" ? /* @__PURE__ */ t(
-      R,
+      b,
       {
         className: "xtrColorButton",
         ref: k.setReference,
-        size: q,
+        size: D,
         icon: "f53f",
         iconType: "solid",
         style: {
@@ -95,11 +96,11 @@ function O(j, z) {
         ...F()
       }
     ) : /* @__PURE__ */ t(
-      ve,
+      ye,
       {
-        className: g("xtrColorInput", T),
+        className: g("xtrColorInput", R),
         ref: k.setReference,
-        placeholder: D,
+        placeholder: q,
         icon: "f53f",
         iconType: "solid",
         active: E,
@@ -113,25 +114,25 @@ function O(j, z) {
         ...F()
       }
     ),
-    Q && /* @__PURE__ */ i(
+    X && /* @__PURE__ */ i(
       "div",
       {
-        ref: Ne([z, k.setFloating]),
+        ref: Pe([z, k.setFloating]),
         className: g("xtrColorPopper", A),
-        style: { ...K, ...X, "--colorBrandPrimary": M },
-        ...Y(),
+        style: { ...Q, ...Y, "--colorBrandPrimary": M },
+        ...Z(),
         children: [
-          (y || !S) && /* @__PURE__ */ i("div", { className: g("header", x === "button" && "withInput"), children: [
+          (H || !I) && /* @__PURE__ */ i("div", { className: g("header", x === "button" && "withInput"), children: [
             /* @__PURE__ */ i("div", { className: "heading", children: [
               /* @__PURE__ */ i("div", { children: [
-                /* @__PURE__ */ t("h1", { children: G }),
+                /* @__PURE__ */ t("h1", { children: J }),
                 x === "button" && /* @__PURE__ */ t(
                   "input",
                   {
                     placeholder: "#Hex",
-                    className: g("popperInput", T),
-                    autoFocus: !0,
+                    className: g("popperInput", R),
                     value: h,
+                    autoFocus: G,
                     onChange: (e) => V(e.target.value)
                   }
                 )
@@ -139,56 +140,56 @@ function O(j, z) {
               /* @__PURE__ */ t("h1", { children: m })
             ] }),
             U && /* @__PURE__ */ t(
-              xe,
+              ve,
               {
                 code: "f1da",
                 type: "solid",
-                style: { "--colorBrandPrimary": Z },
-                onClick: te
+                style: { "--colorBrandPrimary": ee },
+                onClick: se
               }
             )
           ] }),
-          y && /* @__PURE__ */ t("div", { className: "swatch", children: y.map((e, o) => {
-            const l = s(h).isEqual(e), n = s(e).toHsl(), se = `${n.h} ${n.s}% ${n.l}%`;
+          H && /* @__PURE__ */ t("div", { className: "swatch", children: H.map((e, o) => {
+            const l = s(h).isEqual(e), n = s(e).toHsl(), re = `${n.h} ${n.s}% ${n.l}%`;
             return /* @__PURE__ */ t(
-              R,
+              b,
               {
                 className: "swatchItem",
                 icon: "f00c",
                 iconType: "solid",
                 size: "mini",
                 style: {
-                  "--themeColor": se,
+                  "--themeColor": re,
                   color: l ? "white" : "transparent"
                 },
-                onClick: () => oe(n)
+                onClick: () => te(n)
               },
               `ThemeColor-${n.h}${n.s}${n.l}-${o}`
             );
           }) }),
-          !S && /* @__PURE__ */ t(
-            ge,
+          !I && /* @__PURE__ */ t(
+            xe,
             {
               className: "colorPicker",
               alpha: W,
               shade: _,
               color: N,
-              setColor: ee
+              setColor: oe
             }
           ),
-          I && /* @__PURE__ */ i("div", { className: "themeScheme", children: [
+          S && /* @__PURE__ */ i("div", { className: "themeScheme", children: [
             /* @__PURE__ */ t("div", { className: "header", children: /* @__PURE__ */ i("div", { className: "heading", children: [
               /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t("h1", { children: v }) }),
-              /* @__PURE__ */ t("h1", { children: I })
+              /* @__PURE__ */ t("h1", { children: S })
             ] }) }),
-            /* @__PURE__ */ t("div", { className: "schemeSelector", children: ye.map(({ name: e, icon: o }, l) => /* @__PURE__ */ t(
-              R,
+            /* @__PURE__ */ t("div", { className: "schemeSelector", children: $e.map(({ name: e, icon: o }, l) => /* @__PURE__ */ t(
+              b,
               {
                 icon: o,
                 iconType: "solid",
                 disabled: v === e,
                 type: v === e ? "primary" : "secondary",
-                onClick: () => H == null ? void 0 : H(e)
+                onClick: () => y == null ? void 0 : y(e)
               },
               `ThemeScheme-${e}-${l}`
             )) })
@@ -198,8 +199,8 @@ function O(j, z) {
     )
   ] });
 }
-const Ve = le(O);
+const je = ne(O);
 O.displayName = "ColorPopper";
 export {
-  Ve as ColorPopper
+  je as ColorPopper
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xtreme-ui",
-  "version": "0.0.110",
+  "version": "0.0.111",
   "type": "module",
   "description": "Collection of reusable components that can be used in web projects",
   "main": "dist/index.js",