@lanaco/lnc-react-ui 3.11.35 → 4.0.2

package/dist/RadioInput.js

@@ -0,0 +1,362 @@
+import { jsxs as b, jsx as n } from "react/jsx-runtime";
+import P, { useState as j } from "react";
+import { n as g } from "./emotion-styled.browser.esm-BZSYYThs.js";
+import { P as i } from "./index-Ds9PUTwb.js";
+import { f, a as N, h as T, b as t } from "./utils-DEke8iwo.js";
+import { u as F } from "./emotion-element-5486c51c.browser.esm-CSejtOeT.js";
+const I = (e) => e == "left" ? "row-reverse" : "row", D = g.label`
+  min-height: ${(e) => f(e.theme, e.size)};
+  max-height: ${(e) => f(e.theme, e.size)};
+  width: 100%;
+  display: inline-flex;
+  justify-content: start;
+  align-items: center;
+  flex-direction: ${(e) => I(e.labelPosition)};
+  ${(e) => e.spaceBetween === !0 && "justify-content: space-between;"}
+  gap: 0.5rem;
+  ${(e) => e.disabled === !0 && "pointer-events: none;"}
+  ${(e) => N(e.theme, "Radio", e.size, "enabled")};
+  gap: 0.75rem;
+  cursor: pointer;
+  position: relative;
+  & input {
+    cursor: pointer;
+    position: absolute;
+    opacity: 0;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+  }
+  & .checkmark {
+    box-sizing: border-box;
+    cursor: pointer;
+    min-height: ${(e) => e.theme.components.Radio.default.enabled.sizes[e.size]};
+    min-width: ${(e) => e.theme.components.Radio.default.enabled.sizes[e.size]};
+    height: ${(e) => e.theme.components.Radio.default.enabled.sizes[e.size]};
+    width: ${(e) => e.theme.components.Radio.default.enabled.sizes[e.size]};
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: all 0.2s ease;
+    ${(e) => e.focused === !0 && e.disabled !== !0 && e.readOnly !== !0 ? T(e.theme) : ""};
+    & svg {
+      fill: transparent;
+      & .outer-circle {
+        stroke: ${(e) => t(
+  e.theme,
+  "Radio",
+  e.color,
+  "enabled",
+  "border"
+)};
+      }
+      & .inner-circle {
+        stroke: ${(e) => t(
+  e.theme,
+  "Radio",
+  e.color,
+  "enabled",
+  "border"
+)};
+      }
+    }
+  }
+  & input:hover ~ .lnc-radio-input-label {
+    color: ${(e) => t(e.theme, "Radio", e.color, "hover", "text")};
+  }
+
+  
+  & input:checked ~ .lnc-radio-input-label {
+    color: ${(e) => t(e.theme, "Radio", e.color, "active", "text")};
+  }
+  & input:checked ~ .checkmark {
+    & svg {
+      fill: ${(e) => t(
+  e.theme,
+  "Radio",
+  e.color,
+  "active",
+  "background",
+  "backgroundOpacity"
+)};
+      & .outer-circle {
+        fill: ${(e) => t(
+  e.theme,
+  "Radio",
+  e.color,
+  "active",
+  "border"
+)};
+      }
+      & .inner-circle {
+        fill: ${(e) => e.innerColor === "white" || e.innerColor === "transparent" ? e.innerColor : t(
+  e.theme,
+  "Radio",
+  e.color,
+  "active",
+  "border"
+)}};
+      }
+    }
+  }
+
+  & input:disabled ~ .lnc-radio-input-label {
+    color: ${(e) => t(e.theme, "Radio", e.color, "disabled", "text")};
+  }
+  
+  & input[disabled]:checked ~ .checkmark {
+    & svg {
+      fill: ${(e) => t(
+  e.theme,
+  "Radio",
+  e.color,
+  "disabled",
+  "background",
+  "backgroundOpacity"
+)};
+      & .outer-circle {
+        fill: ${(e) => t(
+  e.theme,
+  "Radio",
+  e.color,
+  "disabled",
+  "border"
+)};
+      }
+      & .inner-circle {
+        fill: ${(e) => e.innerColor === "white" || e.innerColor === "transparent" ? e.innerColor : t(
+  e.theme,
+  "Radio",
+  e.color,
+  "disabled",
+  "border"
+)}
+            };
+      }
+    }
+
+
+    & input[disabled] ~ .checkmark {
+      & svg {
+        fill: ${(e) => t(
+  e.theme,
+  "Radio",
+  e.color,
+  "disabled",
+  "background",
+  "backgroundOpacity"
+)};
+        & .outer-circle {
+          fill: ${(e) => t(
+  e.theme,
+  "Radio",
+  e.color,
+  "disabled",
+  "border"
+)};
+        }
+        & .inner-circle {
+          fill: ${(e) => t(
+  e.theme,
+  "Radio",
+  e.color,
+  "disabled",
+  "border"
+)}
+              };
+        }
+      }
+
+    & input:hover ~ .lnc-radio-input-label {
+      color: ${(e) => t(e.theme, "Radio", e.color, "hover", "text")};
+    }
+    & input[hover]:checked ~ .checkmark {
+      & svg {
+        fill: ${(e) => t(
+  e.theme,
+  "Radio",
+  e.color,
+  "hover",
+  "background",
+  "backgroundOpacity"
+)};
+        & .outer-circle {
+          fill: ${(e) => t(
+  e.theme,
+  "Radio",
+  e.color,
+  "disabled",
+  "border"
+)};
+        }
+        & .inner-circle {
+          fill: ${(e) => e.innerColor === "white" || e.innerColor === "transparent" ? e.innerColor : t(
+  e.theme,
+  "Radio",
+  e.color,
+  "disabled",
+  "border"
+)}};
+        }
+      }
+`, S = g.label`
+  ${(e) => e.disabled !== !0 && e.readOnly !== !0 && "cursor: pointer"};
+  min-width: 0;
+  flex-shrink: 1;
+  min-height: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: ${(e) => t(e.theme, "Radio", e.color, "enabled", "text")};
+`, K = P.forwardRef((e, y) => {
+  const {
+    wrapperRef: w,
+    className: R = "",
+    style: k = {},
+    color: $ = "primary",
+    innerColor: v = "white",
+    size: x = "small",
+    onChange: a,
+    onFocus: o,
+    onBlur: l,
+    onClick: c,
+    onKeyDown: L,
+    label: h,
+    labelPosition: C = "right",
+    spaceBetween: O,
+    disabled: d,
+    readOnly: s,
+    ...z
+  } = e, [B, m] = j(!1);
+  var u = {
+    theme: F(),
+    size: x,
+    color: $,
+    disabled: d,
+    labelPosition: C,
+    spaceBetween: O
+  };
+  return /* @__PURE__ */ b(
+    D,
+    {
+      ...u,
+      ref: w,
+      className: R,
+      style: k,
+      tabIndex: -1,
+      readOnly: s,
+      focused: B,
+      onClick: (r) => c == null ? void 0 : c(r),
+      innerColor: v,
+      children: [
+        /* @__PURE__ */ n(
+          "input",
+          {
+            ref: y,
+            disabled: d || s,
+            type: "radio",
+            onBlur: (r) => {
+              m(!1), l && (l == null || l(r));
+            },
+            onFocus: (r) => {
+              m(!0), o && (o == null || o(r));
+            },
+            onChange: (r) => a == null ? void 0 : a(r),
+            ...z
+          }
+        ),
+        /* @__PURE__ */ n("div", { className: "checkmark", children: /* @__PURE__ */ b(
+          "svg",
+          {
+            id: "eqw1eBsfm9l1",
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 20 20",
+            shapeRendering: "geometricPrecision",
+            textRendering: "geometricPrecision",
+            children: [
+              /* @__PURE__ */ n(
+                "ellipse",
+                {
+                  className: "outer-circle",
+                  rx: "9.5",
+                  ry: "9.5",
+                  transform: "translate(10 10)",
+                  fillRule: "evenodd",
+                  stroke: "red"
+                }
+              ),
+              /* @__PURE__ */ n(
+                "ellipse",
+                {
+                  rx: "5",
+                  ry: "5",
+                  transform: "translate(10 10)",
+                  className: "inner-circle",
+                  strokeWidth: "0"
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ n(
+          S,
+          {
+            ...u,
+            className: "lnc-radio-input-label",
+            disalbed: d,
+            readOnly: s,
+            title: h,
+            tabIndex: -1,
+            children: h
+          }
+        )
+      ]
+    }
+  );
+});
+K.propTypes = {
+  id: i.string,
+  name: i.string,
+  checked: i.bool,
+  disabled: i.bool,
+  readOnly: i.bool,
+  label: i.oneOfType([i.string, i.element]),
+  labelPosition: i.oneOf(["right", "left"]),
+  tabIndex: i.number,
+  spaceBetween: i.bool,
+  //-------------------------
+  onChange: i.func,
+  onFocus: i.func,
+  onBlur: i.func,
+  onClick: i.func,
+  onKeyDown: i.func,
+  //-------------------------
+  className: i.string,
+  style: i.object,
+  size: i.oneOf(["small", "medium", "large"]),
+  color: i.oneOf([
+    "primary",
+    "secondary",
+    "success",
+    "danger",
+    "warning",
+    "information",
+    "neutral",
+    "gray"
+  ]),
+  innerColor: i.oneOf([
+    "primary",
+    "secondary",
+    "success",
+    "danger",
+    "warning",
+    "information",
+    "neutral",
+    "gray",
+    "white",
+    "transparent"
+  ])
+};
+export {
+  K as default
+};

package/dist/RangeSlider.cjs

@@ -0,0 +1,72 @@
+"use strict";const t=require("react/jsx-runtime"),y=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),n=require("./index-DXnSjbfJ.cjs"),o=require("react"),a=require("./utils-hdRGTsQ7.cjs"),_=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),F=require("./useUpdateEffect-BtMgpgIV.cjs"),L=({theme:e,size:i})=>{var c=a.getSizeValueWithUnits(e,i);return`
+    min-height: ${c};
+    max-height: ${c};
+  `},b={small:"0.875rem",medium:"1.125rem",large:"1.375rem"},W=y.newStyled.div`
+  position: relative;
+  ${e=>L(e)};
+  display: inline-flex;
+  align-items: center;
+`,I=y.newStyled.input`
+  -webkit-appearance: none; /* Override default CSS styles */
+  appearance: none;
+  width: 100%; /* Full-width */
+  height: 0.25rem; /* Specified height */
+  border-radius: 3px;
+  outline: none; /* Remove outline */
+  -webkit-transition: 0.2s; /* 0.2 seconds transition on hover */
+  background: ${e=>e.rangeBackground};
+  transition: background 450ms ease-in;
+  -webkit-appearance: none;
+  border-radius: ${e=>a.getBorderRadiusValueWithUnits(e.theme,"regular")};
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none; /* Override default look */
+    appearance: none;
+    width: ${e=>b[e.size]}; /* Set a specific slider handle width */
+    height: ${e=>b[e.size]}; /* Slider handle height */
+    border-radius: 50%;
+    background-color: ${e=>a.getColorRgbaValue(e.theme,"Range",e.color,e.disabled===!0?"disabled":"enabled","background")};
+    cursor: pointer; /* Cursor on hover */
+    border: none;
+  }
+  &::-moz-range-thumb {
+    width: ${e=>b[e.size]}; /* Set a specific slider handle width */
+    height: ${e=>b[e.size]}; /* Slider handle height */
+    border-radius: 50%;
+    background-color: ${e=>a.getColorRgbaValue(e.theme,"Range",e.color,e.disabled===!0?"disabled":"enabled","background")};
+    cursor: pointer; /* Cursor on hover */
+    border: none;
+  }
+`,X=y.newStyled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: absolute;
+  ${e=>a.getComponentTypographyCss(e.theme,"Range",e.size,"enabled")};
+  left: ${e=>`calc(${e.inputValue+"%"} + (${8-e.inputValue*.15}px))`};
+  top: ${e=>"calc(-"+b[e.size]+")"};
+  transform: translateX(-50%);
+  & > .text-content {
+    color: white;
+    background-color: ${e=>a.getColorRgbaValue(e.theme,"Range",e.color,e.disabled===!0?"disabled":"enabled","background")};
+    border-radius: 3px;
+    z-index: 2;
+    padding: 2px 6px;
+  }
+  & > .arrow {
+    & > .outer {
+      height: 4px;
+      position: relative;
+      & > .inner {
+        width: 8px;
+        height: 8px;
+        background: ${e=>a.getColorRgbaValue(e.theme,"Range",e.color,e.disabled===!0?"disabled":"enabled","background")};
+        transform: rotate(45deg);
+        position: absolute;
+        top: -6px;
+        left: -4px;
+        z-index: 1;
+        border-radius: 1px;
+      }
+    }
+  }
+`,q=o.forwardRef((e,i)=>{const{defaultValue:c,value:l=null,min:g=0,max:h=100,disabled:d,tabIndex:v=0,onChange:R=()=>{},onInput:w=()=>{},color:u="primary",size:E="small",className:N="",style:O={},...$}=e,C=o.useRef(),p=_.useTheme(),m={theme:p,size:E,color:u,className:N,style:O},S=a.getColorRgbaValue(p,"Range",u,"enabled","unfilled"),[k,M]=o.useState(a.getColorRgbaValue(p,"Range",u,d?"disabled":"enabled","background")),[P,B]=o.useState(),[U,f]=o.useState(),x=o.useCallback(r=>Math.round((r-g)/(h-g)*100),[g,h]),[s,T]=o.useState(l||c);F.useUpdateEffect(()=>{T(l)},[l]),o.useEffect(()=>{z(s||0)},[s,x,d,u]),o.useEffect(()=>{M(a.getColorRgbaValue(p,"Range",u,d?"disabled":"enabled","background"))},[u,d]);const V=r=>{z(r.target.value),w&&w(r)},z=r=>{B(`linear-gradient(to right, ${k} 0%, ${k} ${x(r)}%, ${S} ${x(r)}%, ${S} 100%)`)},j=r=>{T(r.target.value),R&&R(r)};return t.jsxs(W,{...m,children:[U&&s&&t.jsx(t.Fragment,{children:t.jsxs(X,{...m,inputValue:x(s),children:[t.jsx("div",{className:"text-content",children:s}),t.jsx("div",{className:"arrow",children:t.jsx("div",{className:"outer",children:t.jsx("div",{className:"inner"})})})]})}),l==null||l=="undefined"?t.jsx(I,{ref:i||C,id:"fader",type:"range",min:g,max:h,defaultValue:c,disabled:d,tabIndex:v,onMouseEnter:()=>{f(!0)},onMouseLeave:()=>{f(!1)},rangeBackground:P,onInput:V,onChange:j,...m,...$}):t.jsx(I,{ref:i||C,id:"fader",type:"range",min:g,max:h,value:s,disabled:d,tabIndex:v,onMouseEnter:()=>{f(!0)},onMouseLeave:()=>{f(!1)},rangeBackground:P,onInput:V,onChange:j,...m,...$})]})});q.propTypes={value:n.PropTypes.number,defaultValue:n.PropTypes.number,min:n.PropTypes.number,max:n.PropTypes.number,disabled:n.PropTypes.bool,tabIndex:n.PropTypes.number,onChange:n.PropTypes.func,onInput:n.PropTypes.func,className:n.PropTypes.string,style:n.PropTypes.object,size:n.PropTypes.oneOf(["small","medium","large"]),color:n.PropTypes.oneOf(["primary","secondary","success","danger","warning","disabled","information","neutral","gray"])};module.exports=q;

package/dist/RangeSlider.js

@@ -0,0 +1,253 @@
+import { jsxs as O, jsx as t, Fragment as W } from "react/jsx-runtime";
+import { n as x } from "./emotion-styled.browser.esm-BZSYYThs.js";
+import { P as n } from "./index-Ds9PUTwb.js";
+import _, { useRef as X, useState as v, useCallback as q, useEffect as M } from "react";
+import { c as A, b as o, a as D, f as G } from "./utils-DEke8iwo.js";
+import { u as H } from "./emotion-element-5486c51c.browser.esm-CSejtOeT.js";
+import { u as J } from "./useUpdateEffect-CuYWz7EA.js";
+const K = ({ theme: e, size: i }) => {
+  var u = G(e, i);
+  return `
+    min-height: ${u};
+    max-height: ${u};
+  `;
+}, g = {
+  small: "0.875rem",
+  medium: "1.125rem",
+  large: "1.375rem"
+}, Q = x.div`
+  position: relative;
+  ${(e) => K(e)};
+  display: inline-flex;
+  align-items: center;
+`, T = x.input`
+  -webkit-appearance: none; /* Override default CSS styles */
+  appearance: none;
+  width: 100%; /* Full-width */
+  height: 0.25rem; /* Specified height */
+  border-radius: 3px;
+  outline: none; /* Remove outline */
+  -webkit-transition: 0.2s; /* 0.2 seconds transition on hover */
+  background: ${(e) => e.rangeBackground};
+  transition: background 450ms ease-in;
+  -webkit-appearance: none;
+  border-radius: ${(e) => A(e.theme, "regular")};
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none; /* Override default look */
+    appearance: none;
+    width: ${(e) => g[e.size]}; /* Set a specific slider handle width */
+    height: ${(e) => g[e.size]}; /* Slider handle height */
+    border-radius: 50%;
+    background-color: ${(e) => o(
+  e.theme,
+  "Range",
+  e.color,
+  e.disabled === !0 ? "disabled" : "enabled",
+  "background"
+)};
+    cursor: pointer; /* Cursor on hover */
+    border: none;
+  }
+  &::-moz-range-thumb {
+    width: ${(e) => g[e.size]}; /* Set a specific slider handle width */
+    height: ${(e) => g[e.size]}; /* Slider handle height */
+    border-radius: 50%;
+    background-color: ${(e) => o(
+  e.theme,
+  "Range",
+  e.color,
+  e.disabled === !0 ? "disabled" : "enabled",
+  "background"
+)};
+    cursor: pointer; /* Cursor on hover */
+    border: none;
+  }
+`, Y = x.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: absolute;
+  ${(e) => D(e.theme, "Range", e.size, "enabled")};
+  left: ${(e) => `calc(${e.inputValue + "%"} + (${8 - e.inputValue * 0.15}px))`};
+  top: ${(e) => "calc(-" + g[e.size] + ")"};
+  transform: translateX(-50%);
+  & > .text-content {
+    color: white;
+    background-color: ${(e) => o(
+  e.theme,
+  "Range",
+  e.color,
+  e.disabled === !0 ? "disabled" : "enabled",
+  "background"
+)};
+    border-radius: 3px;
+    z-index: 2;
+    padding: 2px 6px;
+  }
+  & > .arrow {
+    & > .outer {
+      height: 4px;
+      position: relative;
+      & > .inner {
+        width: 8px;
+        height: 8px;
+        background: ${(e) => o(
+  e.theme,
+  "Range",
+  e.color,
+  e.disabled === !0 ? "disabled" : "enabled",
+  "background"
+)};
+        transform: rotate(45deg);
+        position: absolute;
+        top: -6px;
+        left: -4px;
+        z-index: 1;
+        border-radius: 1px;
+      }
+    }
+  }
+`, Z = _.forwardRef((e, i) => {
+  const {
+    defaultValue: u,
+    value: d = null,
+    min: c = 0,
+    max: h = 100,
+    disabled: l,
+    tabIndex: $ = 0,
+    onChange: k = () => {
+    },
+    onInput: w = () => {
+    },
+    color: s = "primary",
+    size: B = "small",
+    className: E = "",
+    style: j = {},
+    ...R
+  } = e, y = X(), m = H(), b = { theme: m, size: B, color: s, className: E, style: j }, C = o(
+    m,
+    "Range",
+    s,
+    "enabled",
+    "unfilled"
+  ), [S, F] = v(
+    o(
+      m,
+      "Range",
+      s,
+      l ? "disabled" : "enabled",
+      "background"
+    )
+  ), [z, U] = v(), [L, p] = v(), f = q(
+    (a) => Math.round((a - c) / (h - c) * 100),
+    [c, h]
+  ), [r, I] = v(d || u);
+  J(() => {
+    I(d);
+  }, [d]), M(() => {
+    P(r || 0);
+  }, [r, f, l, s]), M(() => {
+    F(
+      o(
+        m,
+        "Range",
+        s,
+        l ? "disabled" : "enabled",
+        "background"
+      )
+    );
+  }, [s, l]);
+  const V = (a) => {
+    P(a.target.value), w && w(a);
+  }, P = (a) => {
+    U(
+      `linear-gradient(to right, ${S} 0%, ${S} ${f(
+        a
+      )}%, ${C} ${f(a)}%, ${C} 100%)`
+    );
+  }, N = (a) => {
+    I(a.target.value), k && k(a);
+  };
+  return /* @__PURE__ */ O(Q, { ...b, children: [
+    L && r && /* @__PURE__ */ t(W, { children: /* @__PURE__ */ O(Y, { ...b, inputValue: f(r), children: [
+      /* @__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" }) }) })
+    ] }) }),
+    d == null || d == "undefined" ? /* @__PURE__ */ t(
+      T,
+      {
+        ref: i || y,
+        id: "fader",
+        type: "range",
+        min: c,
+        max: h,
+        defaultValue: u,
+        disabled: l,
+        tabIndex: $,
+        onMouseEnter: () => {
+          p(!0);
+        },
+        onMouseLeave: () => {
+          p(!1);
+        },
+        rangeBackground: z,
+        onInput: V,
+        onChange: N,
+        ...b,
+        ...R
+      }
+    ) : /* @__PURE__ */ t(
+      T,
+      {
+        ref: i || y,
+        id: "fader",
+        type: "range",
+        min: c,
+        max: h,
+        value: r,
+        disabled: l,
+        tabIndex: $,
+        onMouseEnter: () => {
+          p(!0);
+        },
+        onMouseLeave: () => {
+          p(!1);
+        },
+        rangeBackground: z,
+        onInput: V,
+        onChange: N,
+        ...b,
+        ...R
+      }
+    )
+  ] });
+});
+Z.propTypes = {
+  value: n.number,
+  defaultValue: n.number,
+  min: n.number,
+  max: n.number,
+  disabled: n.bool,
+  tabIndex: n.number,
+  //-------------------------
+  onChange: n.func,
+  onInput: n.func,
+  //-------------------------
+  className: n.string,
+  style: n.object,
+  size: n.oneOf(["small", "medium", "large"]),
+  color: n.oneOf([
+    "primary",
+    "secondary",
+    "success",
+    "danger",
+    "warning",
+    "disabled",
+    "information",
+    "neutral",
+    "gray"
+  ])
+};
+export {
+  Z as default
+};