@lanaco/lnc-react-ui 3.11.35 → 4.0.2

package/dist/TimeInput.cjs

@@ -0,0 +1,31 @@
+"use strict";const d=require("react/jsx-runtime"),l=require("react"),R=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),r=require("./index-DXnSjbfJ.cjs"),q=require("./index-BjdOz5Ok.cjs"),t=require("./utils-hdRGTsQ7.cjs"),v=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),O=({theme:e,size:i})=>{var s=t.getSizeValueWithUnits(e,i);return`
+    min-height: ${s};
+    max-height: ${s};
+  `},w=R.newStyled.input`
+  ${e=>O(e)}
+  ${e=>t.getComponentTypographyCss(e.theme,"Input",e.size,"enabled")}
+  padding: 0.625rem 0.75rem 0.62rem 0.75rem;
+  line-height: inherit;
+  appearance: none;
+  outline: none;
+  display: inline-block;
+  border-radius: 0.25rem;
+  width: 100%;
+  box-sizing: border-box;
+  background-color: ${e=>t.getColorRgbaValue(e.theme,"Input",e.color,"enabled","background")};
+  border: 1px solid
+    ${e=>t.getColorRgbaValue(e.theme,"Input",e.color,e.disabled===!0?"disabled":"enabled","border")};
+  border-radius: ${e=>t.getBorderRadiusValueWithUnits(e.theme,"regular")};
+  color: ${e=>t.getColorRgbaValue(e.theme,"Input",e.color,"enabled","text")};
+  &:disabled {
+    ${e=>t.getDisabledStateCss(e.theme)};
+    cursor: default;
+  }
+  &:focus:enabled {
+    border: none;
+    ${e=>e.readOnly!==!0?t.getOutlineCss(e.theme):""};
+    color: ${e=>t.getColorRgbaValue(e.theme,"Input","primary","enabled","text")};
+    border: 1px solid
+      ${e=>t.getColorRgbaValue(e.theme,"Input","primary",e.disabled===!0?"disabled":"enabled","border")};
+  }
+`,b=l.forwardRef((e,i)=>{const{disabled:s,readOnly:m,defaultValue:g,value:o,debounceTime:p=180,onChange:a,className:y="",style:h={},size:T="small",color:C="primary",...f}=e,x=v.useTheme(),[$,c]=l.useState(o||g||"");l.useEffect(()=>{o!=null&&c(o)},[o]);const P=l.useCallback(q.debounce((n,u)=>V(n,u),p),[a]),V=(n,u)=>{a&&(a==null||a(n,u))},I=n=>{c(n.target.value),P(n,n.target.value)};return d.jsx(d.Fragment,{children:d.jsx(w,{type:"time",ref:i,onChange:I,disabled:s,readOnly:m,theme:x,color:C,size:T,className:y,style:h,value:$,...f})})});b.propTypes={id:r.PropTypes.string,defaultValue:r.PropTypes.string,value:r.PropTypes.string,disabled:r.PropTypes.bool,readOnly:r.PropTypes.bool,debounceTime:r.PropTypes.number,tabIndex:r.PropTypes.number,onChange:r.PropTypes.func,className:r.PropTypes.string,style:r.PropTypes.object,size:r.PropTypes.oneOf(["small","medium","large"]),color:r.PropTypes.oneOf(["primary","secondary","success","danger","warning","information","neutral","gray"])};module.exports=b;

package/dist/TimeInput.js

@@ -0,0 +1,133 @@
+import { jsx as u, Fragment as V } from "react/jsx-runtime";
+import v, { useState as O, useEffect as T, useCallback as z } from "react";
+import { n as S } from "./emotion-styled.browser.esm-BZSYYThs.js";
+import { P as a } from "./index-Ds9PUTwb.js";
+import { d as k } from "./index-D5vEbKUT.js";
+import { a as w, b as o, c as R, g as j, h as F, f as N } from "./utils-DEke8iwo.js";
+import { u as P } from "./emotion-element-5486c51c.browser.esm-CSejtOeT.js";
+const U = ({ theme: e, size: d }) => {
+  var l = N(e, d);
+  return `
+    min-height: ${l};
+    max-height: ${l};
+  `;
+}, W = S.input`
+  ${(e) => U(e)}
+  ${(e) => w(e.theme, "Input", e.size, "enabled")}
+  padding: 0.625rem 0.75rem 0.62rem 0.75rem;
+  line-height: inherit;
+  appearance: none;
+  outline: none;
+  display: inline-block;
+  border-radius: 0.25rem;
+  width: 100%;
+  box-sizing: border-box;
+  background-color: ${(e) => o(
+  e.theme,
+  "Input",
+  e.color,
+  "enabled",
+  "background"
+)};
+  border: 1px solid
+    ${(e) => o(
+  e.theme,
+  "Input",
+  e.color,
+  e.disabled === !0 ? "disabled" : "enabled",
+  "border"
+)};
+  border-radius: ${(e) => R(e.theme, "regular")};
+  color: ${(e) => o(e.theme, "Input", e.color, "enabled", "text")};
+  &:disabled {
+    ${(e) => j(e.theme)};
+    cursor: default;
+  }
+  &:focus:enabled {
+    border: none;
+    ${(e) => e.readOnly !== !0 ? F(e.theme) : ""};
+    color: ${(e) => o(e.theme, "Input", "primary", "enabled", "text")};
+    border: 1px solid
+      ${(e) => o(
+  e.theme,
+  "Input",
+  "primary",
+  e.disabled === !0 ? "disabled" : "enabled",
+  "border"
+)};
+  }
+`, _ = v.forwardRef((e, d) => {
+  const {
+    // id,
+    disabled: l,
+    readOnly: m,
+    defaultValue: b,
+    value: r,
+    debounceTime: c = 180,
+    // tabIndex,
+    //----------------
+    onChange: n,
+    //----------------
+    className: g = "",
+    style: h = {},
+    size: f = "small",
+    color: p = "primary",
+    ...y
+  } = e, C = P(), [$, i] = O(r || b || "");
+  T(() => {
+    r != null && i(r);
+  }, [r]);
+  const x = z(
+    k((t, s) => I(t, s), c),
+    [n]
+  ), I = (t, s) => {
+    n && (n == null || n(t, s));
+  };
+  return /* @__PURE__ */ u(V, { children: /* @__PURE__ */ u(
+    W,
+    {
+      type: "time",
+      ref: d,
+      onChange: (t) => {
+        i(t.target.value), x(t, t.target.value);
+      },
+      disabled: l,
+      readOnly: m,
+      theme: C,
+      color: p,
+      size: f,
+      className: g,
+      style: h,
+      value: $,
+      ...y
+    }
+  ) });
+});
+_.propTypes = {
+  id: a.string,
+  defaultValue: a.string,
+  value: a.string,
+  disabled: a.bool,
+  readOnly: a.bool,
+  debounceTime: a.number,
+  tabIndex: a.number,
+  //----------------
+  onChange: a.func,
+  //----------------
+  className: a.string,
+  style: a.object,
+  size: a.oneOf(["small", "medium", "large"]),
+  color: a.oneOf([
+    "primary",
+    "secondary",
+    "success",
+    "danger",
+    "warning",
+    "information",
+    "neutral",
+    "gray"
+  ])
+};
+export {
+  _ as default
+};

package/dist/Toggle.cjs

@@ -0,0 +1,151 @@
+"use strict";const s=require("react/jsx-runtime"),I=require("react"),o=require("./index-DXnSjbfJ.cjs"),f=require("./emotion-styled.browser.esm-Cbp_XsK4.cjs"),t=require("./utils-hdRGTsQ7.cjs");;/* empty css                       */const v=require("./emotion-element-5486c51c.browser.esm-QRQ5FSjv.cjs"),r={containerWidth:{small:"2.5rem",medium:"3rem",large:"3.5rem"},containerHeight:{small:"1.5rem",medium:"1.75rem",large:"2rem"},sliderSize:{small:"1rem",medium:"1.25rem",large:"1.5rem"},paddingLeft:{small:"0.5rem",medium:"0.5rem",large:"0.5rem"},slider:{small:"1rem",medium:"1.25rem",large:"1.5rem"},icon:{small:"0.75rem",medium:"0.875rem",large:"1rem"},iconOff:{small:"0.625rem",medium:"0.6875rem",large:"0.75rem"}},V={checked:{left:{small:"1.25rem",medium:"1.5rem",large:"1.75rem"}}},l={on:{top:{small:"0.25rem",medium:"0.25rem",large:"0.25rem"},left:{small:"1.375rem",medium:"1.6875rem",large:"2rem"},right:{small:"0.5rem",medium:"0.5rem",large:"0.5rem"}},off:{top:{small:"0.375rem",medium:"0.4375rem",large:"0.5rem"},left:{small:"1.375rem",medium:"1.75rem",large:"2.125rem"},right:{small:"0.5rem",medium:"0.5rem",large:"0.5rem"}}},S=e=>e=="left"?"row-reverse":"row",j=f.newStyled.label`
+  box-sizing: content-box !important;
+  width: 100%;
+  text-align: left;
+  line-height: 1.5;
+  display: flex;
+  gap: 0.75rem;
+  flex-direction: ${e=>S(e.labelPosition)};
+  ${e=>e.spaceBetween==!0&&"justify-content: space-between;"}
+  position: relative;
+  cursor: ${e=>e.disabled||e.readOnly?"default":"pointer"};
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  align-items: center;
+  flex-shrink: 0;
+
+  min-height: ${e=>e.theme.sizes[e.size]};
+  max-height: ${e=>e.theme.sizes[e.size]};
+
+  & input:focus:enabled ~ span.toggle-slider {
+    ${e=>!e.disabled&&t.getOutlineCss(e.theme)};
+  }
+
+  & input:hover:enabled ~ span.toggle-slider {
+    background-color: ${e=>t.getColorRgbaValue(e.theme,"Toggle",null,"hover","background","backgroundOpacity")};
+  }
+
+  & input:checked:hover:enabled ~ span.toggle-slider {
+    background-color: ${e=>t.getColorRgbaValue(e.theme,"Toggle",e.color,"hover","background")};
+  }
+
+  & input {
+    position: absolute;
+    cursor: pointer;
+    opacity: 0;
+    height: 100%;
+    width: 100%;
+    transition: all 0.2s ease;
+  }
+
+  & input:checked ~ span.toggle-slider {
+    background-color: ${e=>e.disabled!==!0?t.getColorRgbaValue(e.theme,"Toggle",e.color,"enabled","background"):t.getColorRgbaValue(e.theme,"Toggle",e.color,"disabled","background","backgroundOpacity")};
+    transition: all 0.2s ease;
+    border-radius: 100px;
+    flex-shrink: 0;
+  }
+
+  & input:checked ~ span.toggle-slider:after {
+    opacity: 1;
+    transition: all 0.2s ease-out;
+    box-sizing: content-box;
+    left: ${e=>V.checked.left[e.size]};
+    position: absolute;
+    border-radius: 100px;
+    box-shadow: 1px 1px 0.25rem rgba(15, 23, 42, 0.16);
+    background-color: ${e=>e.disabled===!0?t.getColorRgbaValue(e.theme,"ToggleSlider",e.color,"disabled","background","backgroundOpacity"):t.getColorRgbaValue(e.theme,"ToggleSlider",e.color,"enabled","background","backgroundOpacity")};
+  }
+
+  & span.toggle-slider {
+    width: ${e=>r.containerWidth[e.size]};
+    height: ${e=>r.containerHeight[e.size]};
+    border-radius: 100px;
+    font-size: ${e=>r.icon[e.size]};
+    flex-shrink: 0;
+  }
+
+  & span.toggle-slider::after {
+    left: 0.25rem;
+    width: ${e=>r.slider[e.size]};
+    height: ${e=>r.slider[e.size]};
+    top: 0.25rem;
+    border-radius: 100px;
+    box-shadow: 1px 1px 0.25rem; rgba(15, 23, 42, 0.16);
+    flex-shrink: 0;
+  }
+
+  & span.toggle-slider::before {
+    content: "${e=>e.unicodeIcon?"\\"+e.unicodeIcon:""}";
+    font-family: FontAwesome;
+    font-weight: 900;
+    width: ${e=>r.icon[e.size]};
+    text-align: center;
+    font-style: normal;
+    font-variant: normal;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+
+    position: absolute;
+    color: ${e=>t.getColorRgbaValue(e.theme,"ToggleIcon",e.color,"enabled","text")};
+      flex-shrink: 0;
+    border-radius: 100px;
+    z-index: 2;
+
+    font-size: ${e=>r.iconOff[e.size]};
+    width: ${e=>r.iconOff[e.size]};
+
+    top: ${e=>l.off.top[e.size]};
+    right: ${e=>l.off.right[e.size]};
+    left: ${e=>l.off.left[e.size]};
+  }
+
+  & input:checked ~ span.toggle-slider::before {
+    content: "${e=>e.unicodeIcon?"\\"+e.unicodeIcon:""}";
+    font-family: FontAwesome;
+    font-weight: 900;
+    width: ${e=>r.icon[e.size]};
+    text-align: center;
+    font-style: normal;
+    font-variant: normal;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    flex-shrink: 0;
+    color: ${e=>t.getColorRgbaValue(e.theme,"ToggleIcon",e.color,"enabled","text")};
+
+    font-size: ${e=>r.icon[e.size]};
+    width: ${e=>r.icon[e.size]};
+
+    top: ${e=>l.on.top[e.size]};
+    right: ${e=>l.on.right[e.size]};
+    left: ${e=>l.on.left[e.size]};
+  }
+
+  & span.toggle-slider {
+    position: relative;
+    width: ${e=>r.containerWidth[e.size]};
+    height: ${e=>r.containerHeight[e.size]};
+    background-color: ${e=>e.disabled!==!0?t.getColorRgbaValue(e.theme,"Toggle",null,"enabled","background","backgroundOpacity"):t.getColorRgbaValue(e.theme,"Toggle",null,"disabled","background","backgroundOpacity")};
+    transition: all 0.2s ease;
+    flex-shrink: 0;
+  }
+
+  & span.toggle-slider:after {
+    content: "";
+    position: absolute;
+    opacity: 1;
+    flex-shrink: 0;
+    background-color: ${e=>e.disabled===!0?t.getColorRgbaValue(e.theme,"ToggleSlider",e.color,"disabled","background","backgroundOpacity"):t.getColorRgbaValue(e.theme,"ToggleSlider",e.color,"enabled","background","backgroundOpacity")};
+
+    box-shadow: 1px 1px 0.25rem rgba(15, 23, 42, 0.16);
+    transition: all 0.2s ease-out;
+  }
+`,q=f.newStyled.span`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex-shrink: 3;
+
+  ${e=>e.disabled?t.getComponentTypographyCss(e.theme,"Toggle",e.size,"disabled"):t.getComponentTypographyCss(e.theme,"Toggle",e.size,"enabled")};
+`,p=e=>{const{disabled:g,readOnly:d,value:c,label:m,labelPosition:y="right",spaceBetween:x,unicodeIcon:k,onChange:u,change:B,onFocus:i,onBlur:a,className:T="",style:z={},size:$="medium",color:w="primary",...C}=e,P=v.useTheme(),[O,b]=I.useState(!1);let h={theme:P,size:$,color:w,disabled:g,readOnly:d,focused:O,labelPosition:y,spaceBetween:x};function R(n){g||d||(c===null?u(n,!1):u(n,!c))}return s.jsxs(j,{...h,className:T,style:z,unicodeIcon:k,tabIndex:-1,children:[s.jsx("input",{type:"checkbox",checked:c?"checked":"",disabled:g,readOnly:d,onChange:R,onFocus:n=>{b(!0),i&&(i==null||i(n))},onBlur:n=>{b(!1),a&&(a==null||a(n))},...C}),s.jsx("span",{tabIndex:-1,className:"toggle-slider"}),m&&s.jsx(q,{tabIndex:-1,title:m,...h,children:m})]})};p.propTypes={id:o.PropTypes.any,disabled:o.PropTypes.bool,readOnly:o.PropTypes.bool,label:o.PropTypes.oneOfType([o.PropTypes.element,o.PropTypes.string]),unicodeIcon:o.PropTypes.string,labelPosition:o.PropTypes.oneOf(["right","left"]),spaceBetween:o.PropTypes.bool,tabIndex:o.PropTypes.number,onChange:o.PropTypes.func,change:o.PropTypes.func,onFocus:o.PropTypes.func,onBlur:o.PropTypes.func,style:o.PropTypes.object,className:o.PropTypes.string,size:o.PropTypes.oneOf(["small","medium","large"]),color:o.PropTypes.oneOf(["primary","secondary","success","warning","danger","information","neutral","gray"])};module.exports=p;