@lanaco/lnc-react-ui 4.0.199 → 4.0.200

package/dist/DoubleRangeSlider.js

@@ -1,20 +1,19 @@
-import { jsxs as f, jsx as r, Fragment as V } from "react/jsx-runtime";
-import { forwardRef as F, useState as w, useEffect as x, useRef as T, useCallback as j } from "react";
-import { s as $ } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { P as i } from "./index-CblbdqjE.js";
-import { b as u, a as R, c as E, d as O } from "./utils-DtEfC-TX.js";
+import { jsxs as v, jsx as t, Fragment as N } from "react/jsx-runtime";
+import { forwardRef as P, useState as p, useEffect as f, useRef as F, useCallback as j } from "react";
+import { s as w } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { b as d, a as R, c as E, d as T } from "./utils-DtEfC-TX.js";
 import { u as D } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
-const L = ({ theme: e, size: k }) => {
-  var s = O(e, k);
+const L = ({ theme: e, size: $ }) => {
+  var o = T(e, $);
   return `
-    min-height: ${s};
-    max-height: ${s};
+    min-height: ${o};
+    max-height: ${o};
   `;
 }, h = {
   small: "0.875rem",
   medium: "1.125rem",
   large: "1.375rem"
-}, U = $.div`
+}, U = w.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -50,7 +49,7 @@ const L = ({ theme: e, size: k }) => {
     width: ${(e) => h[e.size]}; /* Set a specific slider handle width */
     height: ${(e) => h[e.size]}; /* Slider handle height */
     border-radius: 50%;
-    background-color: ${(e) => u(
+    background-color: ${(e) => d(
   e.theme,
   "Range",
   e.color,
@@ -67,7 +66,7 @@ const L = ({ theme: e, size: k }) => {
     width: ${(e) => h[e.size]}; /* Set a specific slider handle width */
     height: ${(e) => h[e.size]}; /* Slider handle height */
     border-radius: 50%;
-    background-color: ${(e) => u(
+    background-color: ${(e) => d(
   e.theme,
   "Range",
   e.color,
@@ -78,7 +77,7 @@ const L = ({ theme: e, size: k }) => {
     border: none;
     pointer-events: all;
   }
-`, W = $.div`
+`, W = w.div`
   position: relative;
   width: 100%;
   height: 0.25rem;
@@ -92,7 +91,7 @@ const L = ({ theme: e, size: k }) => {
   }
 
   & > .slider__track {
-    background-color: ${(e) => u(
+    background-color: ${(e) => d(
   e.theme,
   "Range",
   e.color,
@@ -106,7 +105,7 @@ const L = ({ theme: e, size: k }) => {
 
   & > .slider__range {
     border-radius: ${(e) => R(e.theme, "regular")};
-    background-color: ${(e) => u(
+    background-color: ${(e) => d(
   e.theme,
   "Range",
   e.color,
@@ -115,7 +114,7 @@ const L = ({ theme: e, size: k }) => {
 )};
     z-index: 2;
   }
-`, C = $.div`
+`, V = w.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -126,7 +125,7 @@ const L = ({ theme: e, size: k }) => {
   ${(e) => E(e.theme, "Range", e.size, "enabled")};
   & > .text-content {
     color: white;
-    background-color: ${(e) => u(
+    background-color: ${(e) => d(
   e.theme,
   "Range",
   e.color,
@@ -144,7 +143,7 @@ const L = ({ theme: e, size: k }) => {
       & > .inner {
         width: 8px;
         height: 8px;
-        background-color: ${(e) => u(
+        background-color: ${(e) => d(
   e.theme,
   "Range",
   e.color,
@@ -160,130 +159,106 @@ const L = ({ theme: e, size: k }) => {
       }
     }
   }
-`, B = F((e, k) => {
+`, G = P((e, $) => {
   const {
-    minValue: s = null,
-    maxValue: v = null,
+    minValue: o = null,
+    maxValue: x = null,
     min: c = 0,
-    max: m = 100,
-    disabled: b = !1,
-    onChange: y = () => {
+    max: u = 100,
+    disabled: m = !1,
+    onChange: k = () => {
     },
     color: S = "primary",
-    size: P = "small",
+    size: C = "small",
     ...M
-  } = e, g = { theme: D(), size: P, color: S }, [_, p] = w(), [t, z] = w(s), [a, N] = w(v);
-  x(() => {
-    z(s), N(v);
-  }, [s, v]);
-  const d = T(null), o = j(
-    (n) => Math.round((n - c) / (m - c) * 100),
-    [c, m]
+  } = e, b = { theme: D(), size: C, color: S }, [_, g] = p(), [r, z] = p(o), [a, y] = p(x);
+  f(() => {
+    z(o), y(x);
+  }, [o, x]);
+  const s = F(null), i = j(
+    (n) => Math.round((n - c) / (u - c) * 100),
+    [c, u]
   );
-  return x(() => {
-    const n = o(t), l = o(a);
-    d.current && (d.current.style.left = `${n}%`, d.current.style.width = `${l - n}%`);
-  }, [t, o]), x(() => {
-    const n = o(t), l = o(a);
-    d.current && (d.current.style.width = `${l - n}%`);
-  }, [a, o]), x(() => {
-    y({ min: t, max: a });
-  }, [t, a, y]), /* @__PURE__ */ f(U, { disabled: b, ...g, ...M, children: [
-    _ && t && /* @__PURE__ */ r(V, { children: /* @__PURE__ */ f(
-      C,
+  return f(() => {
+    const n = i(r), l = i(a);
+    s.current && (s.current.style.left = `${n}%`, s.current.style.width = `${l - n}%`);
+  }, [r, i]), f(() => {
+    const n = i(r), l = i(a);
+    s.current && (s.current.style.width = `${l - n}%`);
+  }, [a, i]), f(() => {
+    k({ min: r, max: a });
+  }, [r, a, k]), /* @__PURE__ */ v(U, { disabled: m, ...b, ...M, children: [
+    _ && r && /* @__PURE__ */ t(N, { children: /* @__PURE__ */ v(
+      V,
       {
-        ...g,
-        inputValue: o(t),
-        disabled: b,
+        ...b,
+        inputValue: i(r),
+        disabled: m,
         children: [
-          /* @__PURE__ */ r("div", { className: "text-content", children: t }),
-          /* @__PURE__ */ r("div", { className: "arrow", children: /* @__PURE__ */ r("div", { className: "outer", children: /* @__PURE__ */ r("div", { className: "inner" }) }) })
+          /* @__PURE__ */ t("div", { className: "text-content", children: r }),
+          /* @__PURE__ */ t("div", { className: "arrow", children: /* @__PURE__ */ t("div", { className: "outer", children: /* @__PURE__ */ t("div", { className: "inner" }) }) })
         ]
       }
     ) }),
-    _ && a && /* @__PURE__ */ r(V, { children: /* @__PURE__ */ f(
-      C,
+    _ && a && /* @__PURE__ */ t(N, { children: /* @__PURE__ */ v(
+      V,
       {
-        ...g,
-        inputValue: o(a),
-        disabled: b,
+        ...b,
+        inputValue: i(a),
+        disabled: m,
         children: [
-          /* @__PURE__ */ r("div", { className: "text-content", children: a }),
-          /* @__PURE__ */ r("div", { className: "arrow", children: /* @__PURE__ */ r("div", { className: "outer", children: /* @__PURE__ */ r("div", { className: "inner" }) }) })
+          /* @__PURE__ */ t("div", { className: "text-content", children: a }),
+          /* @__PURE__ */ t("div", { className: "arrow", children: /* @__PURE__ */ t("div", { className: "outer", children: /* @__PURE__ */ t("div", { className: "inner" }) }) })
         ]
       }
     ) }),
-    /* @__PURE__ */ r(
+    /* @__PURE__ */ t(
       "input",
       {
         type: "range",
         min: c,
-        max: m,
-        value: t | "",
+        max: u,
+        value: r | "",
         onChange: (n) => {
           const l = Math.min(Number(n.target.value), a - 1);
           z(l);
         },
         className: "thumb thumb--left",
-        style: { zIndex: t > m - 100 && "5" },
+        style: { zIndex: r > u - 100 && "5" },
         onMouseEnter: () => {
-          p(!0);
+          g(!0);
         },
         onMouseLeave: () => {
-          p(!1);
+          g(!1);
         }
       }
     ),
-    /* @__PURE__ */ r(
+    /* @__PURE__ */ t(
       "input",
       {
         type: "range",
         min: c,
-        max: m,
+        max: u,
         value: a | "",
         onChange: (n) => {
-          const l = Math.max(Number(n.target.value), t + 1);
-          N(l);
+          const l = Math.max(Number(n.target.value), r + 1);
+          y(l);
         },
         className: "thumb thumb--right",
         onMouseEnter: () => {
-          p(!0);
+          g(!0);
         },
         onMouseLeave: () => {
-          p(!1);
+          g(!1);
         }
       }
     ),
-    /* @__PURE__ */ f(W, { ...g, disabled: b, children: [
-      /* @__PURE__ */ r("div", { className: "slider__track" }),
-      /* @__PURE__ */ r("div", { ref: d, className: "slider__range" })
+    /* @__PURE__ */ v(W, { ...b, disabled: m, children: [
+      /* @__PURE__ */ t("div", { className: "slider__track" }),
+      /* @__PURE__ */ t("div", { ref: s, className: "slider__range" })
     ] })
   ] });
 });
-B.propTypes = {
-  minValue: i.number,
-  maxValue: i.number,
-  min: i.number,
-  max: i.number,
-  disabled: i.bool,
-  //-----------------------------
-  onChange: i.func,
-  //-------------------------
-  className: i.string,
-  style: i.object,
-  size: i.oneOf(["small", "medium", "large"]),
-  color: i.oneOf([
-    "primary",
-    "secondary",
-    "success",
-    "danger",
-    "warning",
-    "disabled",
-    "information",
-    "neutral",
-    "gray"
-  ])
-};
 export {
-  B as default
+  G as default
 };