jcicl 1.2.1 → 1.2.2

package/Nav/Nav.js

@@ -1,79 +1,79 @@
 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) => {
+import j, { useRef as I, useEffect as K, useCallback as S, useState as F, isValidElement as ee, cloneElement as re } from "react";
+import { _ as h, n as _, i as te } from "../.chunks/emotion-styled.browser.esm.js";
+import oe from "../theme.js";
+import ae from "../ScrollContainer/ScrollContainer.js";
+import { _ as M } from "../.chunks/TransitionGroupContext.js";
+import { B as ne } from "../.chunks/ButtonBase.js";
+var B = 100, ie = (e) => {
   var {
-    h: o,
-    s: e,
-    l: t,
+    h: t,
+    s: r,
+    l: o,
     a
-  } = ae(r);
-  return "hsla(" + o + ", " + e + "%, " + t + "%, " + a + ")";
-}, ae = (r) => {
+  } = le(e);
+  return "hsla(" + t + ", " + r + "%, " + o + "%, " + a + ")";
+}, le = (e) => {
   var {
-    h: o,
-    s: e,
-    v: t,
+    h: t,
+    s: r,
+    v: o,
     a
-  } = r, l = (200 - e) * t / B;
+  } = e, l = (200 - r) * o / B;
   return {
-    h: o,
-    s: l > 0 && l < 200 ? e * t / B / (l <= B ? l : 200 - l) * B : 0,
+    h: t,
+    s: l > 0 && l < 200 ? r * o / B / (l <= B ? l : 200 - l) * B : 0,
     l: l / 2,
     a
   };
 };
-function I(r) {
-  var o = j(r);
+function L(e) {
+  var t = I(e);
   return K(() => {
-    o.current = r;
-  }), D((e, t) => o.current && o.current(e, t), []);
+    t.current = e;
+  }), S((r, o) => t.current && t.current(r, o), []);
 }
-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;
+var R = (e) => "touches" in e, H = (e) => {
+  !R(e) && e.preventDefault && e.preventDefault();
+}, W = function(t, r, o) {
+  return r === void 0 && (r = 0), o === void 0 && (o = 1), t > o ? o : t < r ? r : t;
+}, Y = (e, t) => {
+  var r = e.getBoundingClientRect(), o = R(t) ? t.touches[0] : t;
   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)
+    left: W((o.pageX - (r.left + window.pageXOffset)) / r.width),
+    top: W((o.pageY - (r.top + window.pageYOffset)) / r.height),
+    width: r.width,
+    height: r.height,
+    x: o.pageX - (r.left + window.pageXOffset),
+    y: o.pageY - (r.top + window.pageYOffset)
   };
-}, ne = ["prefixCls", "className", "onMove", "onDown"], Q = /* @__PURE__ */ H.forwardRef((r, o) => {
+}, se = ["prefixCls", "className", "onMove", "onDown"], Q = /* @__PURE__ */ j.forwardRef((e, t) => {
   var {
-    prefixCls: e = "w-color-interactive",
-    className: t,
+    prefixCls: r = "w-color-interactive",
+    className: o,
     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;
+  } = e, c = M(e, se), u = I(null), f = I(!1), [v, b] = F(!1), A = L(a), s = L(l), E = (i) => f.current && !R(i) ? !1 : (f.current = R(i), !0), g = S((i) => {
+    if (H(i), !!u.current) {
+      var m = R(i) ? i.touches.length > 0 : i.buttons > 0;
       if (!m) {
         b(!1);
         return;
       }
-      C == null || C(Y(u.current, i), i);
+      A == null || A(Y(u.current, i), i);
     }
-  }, [C]), p = D(() => b(!1), []), n = D((i) => {
+  }, [A]), p = S(() => b(!1), []), n = S((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 y = S((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));
+    m == null || m.blur(), H(i.nativeEvent), E(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(" "),
+    className: [r, o || ""].filter(Boolean).join(" "),
     style: h({}, c.style, {
       touchAction: "none"
     }),
@@ -84,17 +84,17 @@ var P = (r) => "touches" in r, L = (r) => {
   }));
 });
 Q.displayName = "Interactive";
-var ie = ["className", "prefixCls", "left", "top", "style", "fillProps"], le = (r) => {
+var de = ["className", "prefixCls", "left", "top", "style", "fillProps"], ce = (e) => {
   var {
-    className: o,
-    prefixCls: e,
-    left: t,
+    className: t,
+    prefixCls: r,
+    left: o,
     top: a,
     style: l,
     fillProps: c
-  } = r, u = _(r, ie), f = h({}, l, {
+  } = e, u = M(e, de), f = h({}, l, {
     position: "absolute",
-    left: t,
+    left: o,
     top: a
   }), v = h({
     width: 18,
@@ -103,22 +103,22 @@ var ie = ["className", "prefixCls", "left", "top", "style", "fillProps"], le = (
     borderRadius: "50%",
     backgroundColor: "var(--alpha-pointer-background-color)"
   }, c == null ? void 0 : c.style, {
-    transform: t ? "translate(-9px, -1px)" : "translate(-1px, -9px)"
+    transform: o ? "translate(-9px, -1px)" : "translate(-1px, -9px)"
   });
   return /* @__PURE__ */ d("div", h({
-    className: e + "-pointer " + (o || ""),
+    className: r + "-pointer " + (t || ""),
     style: f
   }, u, {
     children: /* @__PURE__ */ d("div", h({
-      className: e + "-fill"
+      className: r + "-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) => {
+}, he = ["prefixCls", "className", "hsva", "background", "bgProps", "innerProps", "pointerProps", "radius", "width", "height", "direction", "style", "onChange", "pointer"], pe = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==", $ = /* @__PURE__ */ j.forwardRef((e, t) => {
   var {
-    prefixCls: e = "w-color-alpha",
-    className: t,
+    prefixCls: r = "w-color-alpha",
+    className: o,
     hsva: a,
     background: l,
     bgProps: c = {},
@@ -126,16 +126,16 @@ var ie = ["className", "prefixCls", "left", "top", "style", "fillProps"], le = (
     pointerProps: f = {},
     radius: v = 0,
     width: b,
-    height: C = 16,
+    height: A = 16,
     direction: s = "horizontal",
-    style: N,
+    style: E,
     onChange: g,
     pointer: p
-  } = r, n = _(r, se), y = (x) => {
+  } = e, n = M(e, he), y = (x) => {
     g && g(h({}, a, {
       a: s === "horizontal" ? x.left : x.top
     }), x);
-  }, i = te(Object.assign({}, a, {
+  }, i = ie(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 + "%";
@@ -144,55 +144,55 @@ var ie = ["className", "prefixCls", "left", "top", "style", "fillProps"], le = (
     "--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",
+    background: "url(" + pe + ") left center",
     backgroundColor: "var(--alpha-background-color)"
   }, {
     width: b,
-    height: C
-  }, N, {
+    height: A
+  }, E, {
     position: "relative"
-  }), E = D((x) => {
-    var R = 0.01, S = a.a, A = S;
+  }), N = S((x) => {
+    var P = 0.01, D = a.a, C = D;
     switch (x.key) {
       case "ArrowLeft":
-        s === "horizontal" && (A = Math.max(0, S - R), x.preventDefault());
+        s === "horizontal" && (C = Math.max(0, D - P), x.preventDefault());
         break;
       case "ArrowRight":
-        s === "horizontal" && (A = Math.min(1, S + R), x.preventDefault());
+        s === "horizontal" && (C = Math.min(1, D + P), x.preventDefault());
         break;
       case "ArrowUp":
-        s === "vertical" && (A = Math.max(0, S - R), x.preventDefault());
+        s === "vertical" && (C = Math.max(0, D - P), x.preventDefault());
         break;
       case "ArrowDown":
-        s === "vertical" && (A = Math.min(1, S + R), x.preventDefault());
+        s === "vertical" && (C = Math.min(1, D + P), x.preventDefault());
         break;
       default:
         return;
     }
-    if (A !== S) {
-      var Z = {
-        left: s === "horizontal" ? A : a.a,
-        top: s === "vertical" ? A : a.a,
+    if (C !== D) {
+      var q = {
+        left: s === "horizontal" ? C : a.a,
+        top: s === "vertical" ? C : a.a,
         width: 0,
         height: 0,
         x: 0,
         y: 0
       };
       g && g(h({}, a, {
-        a: A
-      }), Z);
+        a: C
+      }), q);
     }
-  }, [a, s, g]), J = D((x) => {
+  }, [a, s, g]), Z = S((x) => {
     x.target.focus();
   }, []), T = p && typeof p == "function" ? p(h({
-    prefixCls: e
-  }, f, w)) : /* @__PURE__ */ d(le, h({}, f, {
-    prefixCls: e
+    prefixCls: r
+  }, f, w)) : /* @__PURE__ */ d(ce, h({}, f, {
+    prefixCls: r
   }, w));
   return /* @__PURE__ */ z("div", h({}, n, {
-    className: [e, e + "-" + s, t || ""].filter(Boolean).join(" "),
+    className: [r, r + "-" + s, o || ""].filter(Boolean).join(" "),
     style: k,
-    ref: o,
+    ref: t,
     children: [/* @__PURE__ */ d("div", h({}, c, {
       style: h({
         inset: 0,
@@ -209,24 +209,24 @@ var ie = ["className", "prefixCls", "left", "top", "style", "fillProps"], le = (
       }),
       onMove: y,
       onDown: y,
-      onClick: J,
-      onKeyDown: E,
+      onClick: Z,
+      onKeyDown: N,
       children: T
     }))]
   }));
 });
 $.displayName = "Alpha";
-var ce = ["prefixCls", "className", "hue", "onChange", "direction"], F = /* @__PURE__ */ H.forwardRef((r, o) => {
+var ue = ["prefixCls", "className", "hue", "onChange", "direction"], J = /* @__PURE__ */ j.forwardRef((e, t) => {
   var {
-    prefixCls: e = "w-color-hue",
-    className: t,
+    prefixCls: r = "w-color-hue",
+    className: o,
     hue: a = 0,
     onChange: l,
     direction: c = "horizontal"
-  } = r, u = _(r, ce);
+  } = e, u = M(e, ue);
   return /* @__PURE__ */ d($, h({
-    ref: o,
-    className: e + " " + (t || "")
+    ref: t,
+    className: r + " " + (o || "")
   }, 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%)",
@@ -243,20 +243,24 @@ var ce = ["prefixCls", "className", "hue", "onChange", "direction"], F = /* @__P
     }
   }));
 });
-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 }) => ({
+J.displayName = "Hue";
+const fe = 36, G = (e) => {
+  if (!ee(e)) return e;
+  const t = e;
+  return re(t, { size: t.props.size ?? fe });
+}, O = _(ne, {
+  shouldForwardProp: (e) => te(e)
+})(({ active: e, isTablet: t, highlight1: r, highlight3: o, iconColor: a, isMobile: l, shadowSecondary: c }) => ({
   display: "flex",
-  flexDirection: o ? "row" : "column",
+  flexDirection: t ? "row" : "column",
   alignItems: "center",
-  justifyContent: o ? "flex-start" : "center",
+  justifyContent: t ? "flex-start" : "center",
   width: "100%",
-  padding: o ? "16px" : "0 8px 8px 8px",
+  padding: t ? "16px" : "0 8px 8px 8px",
   transition: "313ms all ease-in-out",
-  backgroundColor: r && !l ? e : "transparent",
-  boxShadow: r ? a : "none",
-  ...o && {
+  backgroundColor: e && !l ? r : "transparent",
+  boxShadow: e ? a : "none",
+  ...t && {
     gap: "0.5rem"
   },
   ...l && {
@@ -264,13 +268,21 @@ const G = M(oe, {
   },
   "&:hover, :focus-visible": {
     svg: {
-      ...!o && {
-        backgroundColor: e
+      ...!t && {
+        backgroundColor: r
       }
     },
-    ...o && {
+    // Round the hover highlight back into a circle for lucide icons. Scoped to
+    // hover so the resting box stays square (no clipping); `overflow: visible`
+    // below keeps the icon itself from being cut by the rounded background.
+    "svg.lucide": {
+      ...!t && {
+        borderRadius: "50%"
+      }
+    },
+    ...t && {
       boxShadow: c,
-      backgroundColor: t
+      backgroundColor: o
     }
   },
   svg: {
@@ -283,29 +295,40 @@ const G = M(oe, {
     alignItems: "center",
     justifyContent: "center",
     transition: "313ms all ease-in-out",
-    ...l && r && {
-      backgroundColor: e
+    ...l && e && {
+      backgroundColor: r
     }
   },
+  // Lucide icons are stroke-drawn (fill="none"); filling them paints a solid
+  // blob. Drive their color via stroke and leave fill unset. Keep the resting
+  // box square; `overflow: visible` stops the (rounded, on hover) background box
+  // from clipping the stroke near the corners. Higher specificity than the `svg`
+  // rule above, so it wins.
+  "svg.lucide": {
+    fill: "none",
+    stroke: a,
+    borderRadius: "unset",
+    overflow: "visible"
+  },
   span: {
     fontFamily: "Roboto, sans-serif",
     fontSize: "12px",
     fontWeight: "bold",
     color: a,
     textAlign: "center",
-    ...o && {
+    ...t && {
       fontSize: "1.5rem",
       fontWeight: "500"
     }
   }
-})), O = M(F)`
+})), U = _(J)`
   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 }) => ({
+`, V = _("div")(({ isTablet: e }) => ({
   display: "block",
   padding: "16px",
   span: {
@@ -314,49 +337,49 @@ const G = M(oe, {
     fontSize: "12px",
     fontWeight: "bold",
     cursor: "default",
-    ...r && {
+    ...e && {
       fontSize: "1.5rem",
       fontWeight: "500"
     }
   }
-})), X = M("div")(({ navWidth: r, isTablet: o, isMobile: e, shadowSecondary: t }) => ({
+})), X = _("div")(({ navWidth: e, isTablet: t, isMobile: r, shadowSecondary: o }) => ({
   display: "flex",
-  flexDirection: e ? "row" : "column",
+  flexDirection: r ? "row" : "column",
   backgroundColor: "transparent",
   alignItems: "stretch",
-  justifyContent: e ? "space-between" : "flex-start",
+  justifyContent: r ? "space-between" : "flex-start",
   maxHeight: "100%",
   flexShrink: 0,
-  gap: o ? 0 : "1rem",
-  width: r,
+  gap: t ? 0 : "1rem",
+  width: e,
   boxSizing: "border-box",
-  ...e && {
-    boxShadow: t,
+  ...r && {
+    boxShadow: o,
     zIndex: 1313,
     padding: "4px 8px"
   }
-})), xe = ({
-  navItems: r,
-  activeRoute: o,
-  navWidth: e = `${ee.constants.navDefaultWidth}px`,
-  isTablet: t,
+})), Ae = ({
+  navItems: e,
+  activeRoute: t,
+  navWidth: r = `${oe.constants.navDefaultWidth}px`,
+  isTablet: o,
   isMobile: a,
   themeColors: l
 }) => {
-  const [c, u] = V(""), f = (p, n) => {
+  const [c, u] = F(""), 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 = () => {
+  }, { highlightPrimary: v, highlightTertiary: b, iconPrimary: A, shadowSecondary: s, scrollColor: E } = l, g = { navWidth: r, isTablet: o, shadowSecondary: s };
+  return a ? /* @__PURE__ */ d(X, { isTablet: !1, navWidth: "100%", isMobile: !0, shadowSecondary: s, children: e.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: [
+    const k = t ? t === n : c === n;
+    return n == "Hue" ? /* @__PURE__ */ z(V, { ...w, active: k, isTablet: o, 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,
+        U,
         {
           hue: i,
-          onChange: (E) => {
-            m && m(E);
+          onChange: (N) => {
+            m && m(N);
           },
           style: {
             width: "96%",
@@ -367,42 +390,42 @@ const G = M(oe, {
         }
       ) })
     ] }, n) : /* @__PURE__ */ z(
-      G,
+      O,
       {
         ...w,
         active: k,
         onClick: () => f(n, y),
-        isTablet: t,
+        isTablet: o,
         highlight1: v,
         highlight3: b,
-        iconColor: C,
+        iconColor: A,
         shadowSecondary: s,
         isMobile: !0,
         children: [
-          p,
+          G(p),
           /* @__PURE__ */ d("span", { children: n })
         ]
       },
       n
     );
   }) }) : /* @__PURE__ */ d(
-    re,
+    ae,
     {
-      scrollColor: N,
+      scrollColor: E,
       direction: "vertical",
-      width: e,
-      styles: { minWidth: e },
-      children: /* @__PURE__ */ d(X, { ...g, children: r.map(({ icon: p, label: n = "", onClick: y = () => {
+      width: r,
+      styles: { minWidth: r },
+      children: /* @__PURE__ */ d(X, { ...g, children: e.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: [
+        const k = t ? t === n : c === n;
+        return n == "Hue" ? /* @__PURE__ */ z(V, { ...w, active: k, isTablet: o, 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,
+            U,
             {
               hue: i,
-              onChange: (E) => {
-                m && m(E);
+              onChange: (N) => {
+                m && m(N);
               },
               style: {
                 width: "96%",
@@ -413,18 +436,18 @@ const G = M(oe, {
             }
           ) })
         ] }, n) : /* @__PURE__ */ z(
-          G,
+          O,
           {
             ...w,
             active: k,
             onClick: () => f(n, y),
-            isTablet: t,
+            isTablet: o,
             highlight1: v,
             highlight3: b,
-            iconColor: C,
+            iconColor: A,
             shadowSecondary: s,
             children: [
-              p,
+              G(p),
               /* @__PURE__ */ d("span", { children: n })
             ]
           },
@@ -435,6 +458,6 @@ const G = M(oe, {
   );
 };
 export {
-  xe as Nav,
-  xe as default
+  Ae as Nav,
+  Ae as default
 };