jcicl 0.0.345 → 1.0.3

package/Nav/Nav.js

@@ -1,41 +1,281 @@
-import { jsx as c, jsxs as u } from "react/jsx-runtime";
-import { useState as j } from "react";
-import { n as v, i as z } from "../.chunks/emotion-styled.browser.esm.js";
-import P from "../theme.js";
-import B from "../ScrollContainer/ScrollContainer.js";
-import { B as D } from "../.chunks/ButtonBase.js";
-const C = v(D, {
-  shouldForwardProp: (t) => z(t)
-})(({ active: t, isTablet: n, highlight1: r, highlight3: i, iconColor: e, isMobile: s, shadowSecondary: d }) => ({
+import { jsx as d, jsxs as z } from "react/jsx-runtime";
+import H, { useRef as j, useEffect as K, useCallback as D, useState as V } from "react";
+import { _ as h, n as M, i as q } from "../.chunks/emotion-styled.browser.esm.js";
+import ee from "../theme.js";
+import re from "../ScrollContainer/ScrollContainer.js";
+import { _ } from "../.chunks/TransitionGroupContext.js";
+import { B as oe } from "../.chunks/ButtonBase.js";
+var B = 100, te = (r) => {
+  var {
+    h: o,
+    s: e,
+    l: t,
+    a
+  } = ae(r);
+  return "hsla(" + o + ", " + e + "%, " + t + "%, " + a + ")";
+}, ae = (r) => {
+  var {
+    h: o,
+    s: e,
+    v: t,
+    a
+  } = r, l = (200 - e) * t / B;
+  return {
+    h: o,
+    s: l > 0 && l < 200 ? e * t / B / (l <= B ? l : 200 - l) * B : 0,
+    l: l / 2,
+    a
+  };
+};
+function I(r) {
+  var o = j(r);
+  return K(() => {
+    o.current = r;
+  }), D((e, t) => o.current && o.current(e, t), []);
+}
+var P = (r) => "touches" in r, L = (r) => {
+  !P(r) && r.preventDefault && r.preventDefault();
+}, W = function(o, e, t) {
+  return e === void 0 && (e = 0), t === void 0 && (t = 1), o > t ? t : o < e ? e : o;
+}, Y = (r, o) => {
+  var e = r.getBoundingClientRect(), t = P(o) ? o.touches[0] : o;
+  return {
+    left: W((t.pageX - (e.left + window.pageXOffset)) / e.width),
+    top: W((t.pageY - (e.top + window.pageYOffset)) / e.height),
+    width: e.width,
+    height: e.height,
+    x: t.pageX - (e.left + window.pageXOffset),
+    y: t.pageY - (e.top + window.pageYOffset)
+  };
+}, ne = ["prefixCls", "className", "onMove", "onDown"], Q = /* @__PURE__ */ H.forwardRef((r, o) => {
+  var {
+    prefixCls: e = "w-color-interactive",
+    className: t,
+    onMove: a,
+    onDown: l
+  } = r, c = _(r, ne), u = j(null), f = j(!1), [v, b] = V(!1), C = I(a), s = I(l), N = (i) => f.current && !P(i) ? !1 : (f.current = P(i), !0), g = D((i) => {
+    if (L(i), !!u.current) {
+      var m = P(i) ? i.touches.length > 0 : i.buttons > 0;
+      if (!m) {
+        b(!1);
+        return;
+      }
+      C == null || C(Y(u.current, i), i);
+    }
+  }, [C]), p = D(() => b(!1), []), n = D((i) => {
+    i ? (window.addEventListener(f.current ? "touchmove" : "mousemove", g), window.addEventListener(f.current ? "touchend" : "mouseup", p)) : (window.removeEventListener("mousemove", g), window.removeEventListener("mouseup", p), window.removeEventListener("touchmove", g), window.removeEventListener("touchend", p));
+  }, [g, p]);
+  K(() => (n(v), () => {
+    n(!1);
+  }), [v, g, p, n]);
+  var y = D((i) => {
+    var m = document.activeElement;
+    m == null || m.blur(), L(i.nativeEvent), N(i.nativeEvent) && u.current && (s == null || s(Y(u.current, i.nativeEvent), i.nativeEvent), b(!0));
+  }, [s]);
+  return /* @__PURE__ */ d("div", h({}, c, {
+    className: [e, t || ""].filter(Boolean).join(" "),
+    style: h({}, c.style, {
+      touchAction: "none"
+    }),
+    ref: u,
+    tabIndex: 0,
+    onMouseDown: y,
+    onTouchStart: y
+  }));
+});
+Q.displayName = "Interactive";
+var ie = ["className", "prefixCls", "left", "top", "style", "fillProps"], le = (r) => {
+  var {
+    className: o,
+    prefixCls: e,
+    left: t,
+    top: a,
+    style: l,
+    fillProps: c
+  } = r, u = _(r, ie), f = h({}, l, {
+    position: "absolute",
+    left: t,
+    top: a
+  }), v = h({
+    width: 18,
+    height: 18,
+    boxShadow: "var(--alpha-pointer-box-shadow)",
+    borderRadius: "50%",
+    backgroundColor: "var(--alpha-pointer-background-color)"
+  }, c == null ? void 0 : c.style, {
+    transform: t ? "translate(-9px, -1px)" : "translate(-1px, -9px)"
+  });
+  return /* @__PURE__ */ d("div", h({
+    className: e + "-pointer " + (o || ""),
+    style: f
+  }, u, {
+    children: /* @__PURE__ */ d("div", h({
+      className: e + "-fill"
+    }, c, {
+      style: v
+    }))
+  }));
+}, se = ["prefixCls", "className", "hsva", "background", "bgProps", "innerProps", "pointerProps", "radius", "width", "height", "direction", "style", "onChange", "pointer"], de = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==", $ = /* @__PURE__ */ H.forwardRef((r, o) => {
+  var {
+    prefixCls: e = "w-color-alpha",
+    className: t,
+    hsva: a,
+    background: l,
+    bgProps: c = {},
+    innerProps: u = {},
+    pointerProps: f = {},
+    radius: v = 0,
+    width: b,
+    height: C = 16,
+    direction: s = "horizontal",
+    style: N,
+    onChange: g,
+    pointer: p
+  } = r, n = _(r, se), y = (x) => {
+    g && g(h({}, a, {
+      a: s === "horizontal" ? x.left : x.top
+    }), x);
+  }, i = te(Object.assign({}, a, {
+    a: 1
+  })), m = "linear-gradient(to " + (s === "horizontal" ? "right" : "bottom") + ", rgba(244, 67, 54, 0) 0%, " + i + " 100%)", w = {};
+  s === "horizontal" ? w.left = a.a * 100 + "%" : w.top = a.a * 100 + "%";
+  var k = h({
+    "--alpha-background-color": "#fff",
+    "--alpha-pointer-background-color": "rgb(248, 248, 248)",
+    "--alpha-pointer-box-shadow": "rgb(0 0 0 / 37%) 0px 1px 4px 0px",
+    borderRadius: v,
+    background: "url(" + de + ") left center",
+    backgroundColor: "var(--alpha-background-color)"
+  }, {
+    width: b,
+    height: C
+  }, N, {
+    position: "relative"
+  }), E = D((x) => {
+    var R = 0.01, S = a.a, A = S;
+    switch (x.key) {
+      case "ArrowLeft":
+        s === "horizontal" && (A = Math.max(0, S - R), x.preventDefault());
+        break;
+      case "ArrowRight":
+        s === "horizontal" && (A = Math.min(1, S + R), x.preventDefault());
+        break;
+      case "ArrowUp":
+        s === "vertical" && (A = Math.max(0, S - R), x.preventDefault());
+        break;
+      case "ArrowDown":
+        s === "vertical" && (A = Math.min(1, S + R), x.preventDefault());
+        break;
+      default:
+        return;
+    }
+    if (A !== S) {
+      var Z = {
+        left: s === "horizontal" ? A : a.a,
+        top: s === "vertical" ? A : a.a,
+        width: 0,
+        height: 0,
+        x: 0,
+        y: 0
+      };
+      g && g(h({}, a, {
+        a: A
+      }), Z);
+    }
+  }, [a, s, g]), J = D((x) => {
+    x.target.focus();
+  }, []), T = p && typeof p == "function" ? p(h({
+    prefixCls: e
+  }, f, w)) : /* @__PURE__ */ d(le, h({}, f, {
+    prefixCls: e
+  }, w));
+  return /* @__PURE__ */ z("div", h({}, n, {
+    className: [e, e + "-" + s, t || ""].filter(Boolean).join(" "),
+    style: k,
+    ref: o,
+    children: [/* @__PURE__ */ d("div", h({}, c, {
+      style: h({
+        inset: 0,
+        position: "absolute",
+        background: l || m,
+        borderRadius: v
+      }, c.style)
+    })), /* @__PURE__ */ d(Q, h({}, u, {
+      style: h({}, u.style, {
+        inset: 0,
+        zIndex: 1,
+        position: "absolute",
+        outline: "none"
+      }),
+      onMove: y,
+      onDown: y,
+      onClick: J,
+      onKeyDown: E,
+      children: T
+    }))]
+  }));
+});
+$.displayName = "Alpha";
+var ce = ["prefixCls", "className", "hue", "onChange", "direction"], F = /* @__PURE__ */ H.forwardRef((r, o) => {
+  var {
+    prefixCls: e = "w-color-hue",
+    className: t,
+    hue: a = 0,
+    onChange: l,
+    direction: c = "horizontal"
+  } = r, u = _(r, ce);
+  return /* @__PURE__ */ d($, h({
+    ref: o,
+    className: e + " " + (t || "")
+  }, u, {
+    direction: c,
+    background: "linear-gradient(to " + (c === "horizontal" ? "right" : "bottom") + ", rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)",
+    hsva: {
+      h: a,
+      s: 100,
+      v: 100,
+      a: a / 360
+    },
+    onChange: (f, v) => {
+      l && l({
+        h: c === "horizontal" ? 360 * v.left : 360 * v.top
+      });
+    }
+  }));
+});
+F.displayName = "Hue";
+const G = M(oe, {
+  shouldForwardProp: (r) => q(r)
+})(({ active: r, isTablet: o, highlight1: e, highlight3: t, iconColor: a, isMobile: l, shadowSecondary: c }) => ({
   display: "flex",
-  flexDirection: n ? "row" : "column",
+  flexDirection: o ? "row" : "column",
   alignItems: "center",
-  justifyContent: n ? "flex-start" : "center",
+  justifyContent: o ? "flex-start" : "center",
   width: "100%",
-  padding: n ? "16px" : "0 8px 8px 8px",
+  padding: o ? "16px" : "0 8px 8px 8px",
   transition: "313ms all ease-in-out",
-  backgroundColor: t && !s ? r : "transparent",
-  boxShadow: t ? e : "none",
-  ...n && {
+  backgroundColor: r && !l ? e : "transparent",
+  boxShadow: r ? a : "none",
+  ...o && {
     gap: "0.5rem"
   },
-  ...s && {
+  ...l && {
     padding: 0
   },
   "&:hover, :focus-visible": {
     svg: {
-      ...!n && {
-        backgroundColor: r
+      ...!o && {
+        backgroundColor: e
       }
     },
-    ...n && {
-      boxShadow: d,
-      backgroundColor: i
+    ...o && {
+      boxShadow: c,
+      backgroundColor: t
     }
   },
   svg: {
     fontSize: "2.1rem",
-    fill: e,
+    fill: a,
     backgroundColor: "transparent",
     borderRadius: "50%",
     padding: "8px",
@@ -43,97 +283,158 @@ const C = v(D, {
     alignItems: "center",
     justifyContent: "center",
     transition: "313ms all ease-in-out",
-    ...s && t && {
-      backgroundColor: r
+    ...l && r && {
+      backgroundColor: e
     }
   },
   span: {
     fontFamily: "Roboto, sans-serif",
     fontSize: "12px",
     fontWeight: "bold",
-    color: e,
+    color: a,
     textAlign: "center",
-    ...n && {
+    ...o && {
       fontSize: "1.5rem",
       fontWeight: "500"
     }
   }
-})), y = v("div")(({ navWidth: t, isTablet: n, isMobile: r, shadowSecondary: i }) => ({
+})), O = M(F)`
+  div:first-of-type {
+    border-radius: inherit !important;
+  }
+  .w-color-alpha-pointer > .w-color-alpha-fill {
+    border-radius: 50% !important;
+  }
+`, U = M("div")(({ isTablet: r }) => ({
+  display: "block",
+  padding: "16px",
+  span: {
+    paddingBottom: "15px",
+    fontFamily: "Roboto, sans-serif",
+    fontSize: "12px",
+    fontWeight: "bold",
+    cursor: "default",
+    ...r && {
+      fontSize: "1.5rem",
+      fontWeight: "500"
+    }
+  }
+})), X = M("div")(({ navWidth: r, isTablet: o, isMobile: e, shadowSecondary: t }) => ({
   display: "flex",
-  flexDirection: r ? "row" : "column",
+  flexDirection: e ? "row" : "column",
   backgroundColor: "transparent",
-  alignItems: "center",
-  justifyContent: r ? "space-between" : "flex-start",
+  alignItems: "stretch",
+  justifyContent: e ? "space-between" : "flex-start",
   maxHeight: "100%",
   flexShrink: 0,
-  gap: n ? 0 : "1rem",
-  width: t,
+  gap: o ? 0 : "1rem",
+  width: r,
   boxSizing: "border-box",
-  ...r && {
-    boxShadow: i,
+  ...e && {
+    boxShadow: t,
     zIndex: 1313,
     padding: "4px 8px"
   }
-})), $ = ({
-  navItems: t,
-  activeRoute: n,
-  navWidth: r = `${P.constants.navDefaultWidth}px`,
-  isTablet: i,
-  isMobile: e,
-  themeColors: s
+})), xe = ({
+  navItems: r,
+  activeRoute: o,
+  navWidth: e = `${ee.constants.navDefaultWidth}px`,
+  isTablet: t,
+  isMobile: a,
+  themeColors: l
 }) => {
-  const [d, w] = j(""), f = (a, o) => {
-    w(a), o();
-  }, { highlightPrimary: g, highlightTertiary: m, iconPrimary: x, shadowSecondary: p, scrollColor: S } = s, k = { navWidth: r, isTablet: i, shadowSecondary: p };
-  return e ? /* @__PURE__ */ c(y, { isTablet: !1, navWidth: "100%", isMobile: !0, shadowSecondary: p, children: t.map(({ icon: a, label: o = "", onClick: l = () => {
-  }, ...h }) => /* @__PURE__ */ u(
-    C,
-    {
-      ...h,
-      active: n ? n === o : d === o,
-      onClick: () => f(o, l),
-      isTablet: i,
-      highlight1: g,
-      highlight3: m,
-      iconColor: x,
-      shadowSecondary: p,
-      isMobile: !0,
-      children: [
-        a,
-        /* @__PURE__ */ c("span", { children: o })
-      ]
-    },
-    o
-  )) }) : /* @__PURE__ */ c(
-    B,
+  const [c, u] = V(""), f = (p, n) => {
+    u(p), n();
+  }, { highlightPrimary: v, highlightTertiary: b, iconPrimary: C, shadowSecondary: s, scrollColor: N } = l, g = { navWidth: e, isTablet: t, shadowSecondary: s };
+  return a ? /* @__PURE__ */ d(X, { isTablet: !1, navWidth: "100%", isMobile: !0, shadowSecondary: s, children: r.map(({ icon: p, label: n = "", onClick: y = () => {
+  }, hue: i = void 0, onChange: m, ...w }) => {
+    const k = o ? o === n : c === n;
+    return n == "Hue" ? /* @__PURE__ */ z(U, { ...w, active: k, isTablet: t, children: [
+      /* @__PURE__ */ d("div", { style: { display: "flex" }, children: /* @__PURE__ */ d("span", { children: "Select Theme Color" }) }),
+      /* @__PURE__ */ d("div", { style: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ d(
+        O,
+        {
+          hue: i,
+          onChange: (E) => {
+            m && m(E);
+          },
+          style: {
+            width: "96%",
+            cursor: "pointer",
+            borderRadius: "20px",
+            boxShadow: "0px 1px 4px 0px rgba(0, 0, 0, 0.25)"
+          }
+        }
+      ) })
+    ] }, n) : /* @__PURE__ */ z(
+      G,
+      {
+        ...w,
+        active: k,
+        onClick: () => f(n, y),
+        isTablet: t,
+        highlight1: v,
+        highlight3: b,
+        iconColor: C,
+        shadowSecondary: s,
+        isMobile: !0,
+        children: [
+          p,
+          /* @__PURE__ */ d("span", { children: n })
+        ]
+      },
+      n
+    );
+  }) }) : /* @__PURE__ */ d(
+    re,
     {
-      scrollColor: S,
+      scrollColor: N,
       direction: "vertical",
-      width: r,
-      styles: { minWidth: r },
-      children: /* @__PURE__ */ c(y, { ...k, children: t.map(({ icon: a, label: o = "", onClick: l = () => {
-      }, ...h }) => /* @__PURE__ */ u(
-        C,
-        {
-          ...h,
-          active: n ? n === o : d === o,
-          onClick: () => f(o, l),
-          isTablet: i,
-          highlight1: g,
-          highlight3: m,
-          iconColor: x,
-          shadowSecondary: p,
-          children: [
-            a,
-            /* @__PURE__ */ c("span", { children: o })
-          ]
-        },
-        o
-      )) })
+      width: e,
+      styles: { minWidth: e },
+      children: /* @__PURE__ */ d(X, { ...g, children: r.map(({ icon: p, label: n = "", onClick: y = () => {
+      }, hue: i = void 0, onChange: m, ...w }) => {
+        const k = o ? o === n : c === n;
+        return n == "Hue" ? /* @__PURE__ */ z(U, { ...w, active: k, isTablet: t, children: [
+          /* @__PURE__ */ d("div", { style: { display: "flex" }, children: /* @__PURE__ */ d("span", { children: "Custom Theme" }) }),
+          /* @__PURE__ */ d("div", { style: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ d(
+            O,
+            {
+              hue: i,
+              onChange: (E) => {
+                m && m(E);
+              },
+              style: {
+                width: "96%",
+                cursor: "pointer",
+                borderRadius: "20px",
+                boxShadow: "0px 1px 4px 0px rgba(0, 0, 0, 0.25)"
+              }
+            }
+          ) })
+        ] }, n) : /* @__PURE__ */ z(
+          G,
+          {
+            ...w,
+            active: k,
+            onClick: () => f(n, y),
+            isTablet: t,
+            highlight1: v,
+            highlight3: b,
+            iconColor: C,
+            shadowSecondary: s,
+            children: [
+              p,
+              /* @__PURE__ */ d("span", { children: n })
+            ]
+          },
+          n
+        );
+      }) })
     }
   );
 };
 export {
-  $ as Nav,
-  $ as default
+  xe as Nav,
+  xe as default
 };