@lidofinance/lido-ui 3.1.0 → 3.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/icons/index.js +4760 -97
- package/dist/cjs/icons/index.js.map +1 -1
- package/dist/cjs/input/OptionsSlider.js +12 -6
- package/dist/cjs/input/OptionsSlider.js.map +1 -1
- package/dist/cjs/input/SliderInput.js +23 -4
- package/dist/cjs/input/SliderInput.js.map +1 -1
- package/dist/cjs/input/SliderInputStyles.js +23 -1
- package/dist/cjs/input/SliderInputStyles.js.map +1 -1
- package/dist/cjs/input/types.js.map +1 -1
- package/dist/cjs/theme/base/colors.js +1 -1
- package/dist/cjs/theme/base/colors.js.map +1 -1
- package/dist/esm/icons/index.js +4754 -97
- package/dist/esm/icons/index.js.map +1 -1
- package/dist/esm/input/OptionsSlider.js +12 -6
- package/dist/esm/input/OptionsSlider.js.map +1 -1
- package/dist/esm/input/SliderInput.js +24 -5
- package/dist/esm/input/SliderInput.js.map +1 -1
- package/dist/esm/input/SliderInputStyles.js +21 -0
- package/dist/esm/input/SliderInputStyles.js.map +1 -1
- package/dist/esm/input/types.js.map +1 -1
- package/dist/esm/theme/base/colors.js +1 -1
- package/dist/esm/theme/base/colors.js.map +1 -1
- package/dist/types/icons/index.d.ts +6 -0
- package/dist/types/icons/index.d.ts.map +1 -1
- package/dist/types/input/OptionsSlider.d.ts.map +1 -1
- package/dist/types/input/SliderInput.d.ts +1 -1
- package/dist/types/input/SliderInput.d.ts.map +1 -1
- package/dist/types/input/SliderInputStyles.d.ts +5 -1
- package/dist/types/input/SliderInputStyles.d.ts.map +1 -1
- package/dist/types/input/types.d.ts +8 -1
- package/dist/types/input/types.d.ts.map +1 -1
- package/dist/types/theme/base/colors.d.ts +1 -1
- package/dist/types/theme/base/index.d.ts +1 -1
- package/dist/types/theme/themes.d.ts +6 -6
- package/package.json +1 -1
|
@@ -7,23 +7,29 @@ const OptionsSlider = (param)=>{
|
|
|
7
7
|
sliderIndex = 0;
|
|
8
8
|
}
|
|
9
9
|
const max = options.length - 1;
|
|
10
|
-
const firstOption = options[0];
|
|
11
|
-
const lastOption = options[max];
|
|
12
10
|
const getLabel = (optionIndex)=>{
|
|
13
11
|
return options[optionIndex].label;
|
|
14
12
|
};
|
|
15
13
|
const handleSliderChange = (e)=>{
|
|
16
14
|
const optionIndex = Number(e.target.value);
|
|
17
|
-
onChange(
|
|
15
|
+
onChange(options[optionIndex].value, optionIndex);
|
|
18
16
|
};
|
|
17
|
+
const labels = options.map((param, index)=>{
|
|
18
|
+
let { label } = param;
|
|
19
|
+
return {
|
|
20
|
+
value: index,
|
|
21
|
+
label
|
|
22
|
+
};
|
|
23
|
+
});
|
|
19
24
|
return /*#__PURE__*/ React.createElement(SliderInput, {
|
|
20
25
|
min: 0,
|
|
21
26
|
max: max,
|
|
22
27
|
value: sliderIndex,
|
|
23
28
|
onChange: handleSliderChange,
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
29
|
+
getLabel: getLabel,
|
|
30
|
+
labels: labels,
|
|
31
|
+
borderNone: true,
|
|
32
|
+
onLabelClick: (optionIndex)=>onChange(options[optionIndex].value, optionIndex)
|
|
27
33
|
});
|
|
28
34
|
};
|
|
29
35
|
export default OptionsSlider;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../packages/input/OptionsSlider.tsx"],"sourcesContent":["import React from 'react'\nimport SliderInput from './SliderInput'\nimport { OptionsSliderInputProps } from './types'\n\nconst OptionsSlider = ({\n options,\n value,\n onChange,\n}: OptionsSliderInputProps): React.ReactElement => {\n let sliderIndex = options.findIndex((option) => option.value === value)\n\n if (sliderIndex === -1) {\n sliderIndex = 0\n }\n\n const max = options.length - 1\n\n const
|
|
1
|
+
{"version":3,"sources":["../../../packages/input/OptionsSlider.tsx"],"sourcesContent":["import React from 'react'\nimport SliderInput from './SliderInput'\nimport { OptionsSliderInputProps } from './types'\n\nconst OptionsSlider = ({\n options,\n value,\n onChange,\n}: OptionsSliderInputProps): React.ReactElement => {\n let sliderIndex = options.findIndex((option) => option.value === value)\n\n if (sliderIndex === -1) {\n sliderIndex = 0\n }\n\n const max = options.length - 1\n\n const getLabel = (optionIndex: number) => {\n return options[optionIndex].label\n }\n\n const handleSliderChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const optionIndex = Number(e.target.value)\n onChange(options[optionIndex].value, optionIndex)\n }\n\n const labels = options.map(({ label }, index) => ({ value: index, label }))\n return (\n <SliderInput\n min={0}\n max={max}\n value={sliderIndex}\n onChange={handleSliderChange}\n getLabel={getLabel}\n labels={labels}\n borderNone={true}\n onLabelClick={(optionIndex) =>\n onChange(options[optionIndex].value, optionIndex)\n }\n />\n )\n}\n\nexport default OptionsSlider\n"],"names":["React","SliderInput","OptionsSlider","options","value","onChange","sliderIndex","findIndex","option","max","length","getLabel","optionIndex","label","handleSliderChange","e","Number","target","labels","map","index","min","borderNone","onLabelClick"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO,CAAA;AACzB,OAAOC,WAAW,MAAM,eAAe,CAAA;AAGvC,MAAMC,aAAa,GAAG,SAI6B;QAJ5B,EACrBC,OAAO,CAAA,EACPC,KAAK,CAAA,EACLC,QAAQ,CAAA,EACgB;IACxB,IAAIC,WAAW,GAAGH,OAAO,CAACI,SAAS,CAAC,CAACC,MAAM,GAAKA,MAAM,CAACJ,KAAK,KAAKA,KAAK,CAAC;IAEvE,IAAIE,WAAW,KAAK,CAAC,CAAC,EAAE;QACtBA,WAAW,GAAG,CAAC;IACjB,CAAC;IAED,MAAMG,GAAG,GAAGN,OAAO,CAACO,MAAM,GAAG,CAAC;IAE9B,MAAMC,QAAQ,GAAG,CAACC,WAAmB,GAAK;QACxC,OAAOT,OAAO,CAACS,WAAW,CAAC,CAACC,KAAK,CAAA;IACnC,CAAC;IAED,MAAMC,kBAAkB,GAAG,CAACC,CAAsC,GAAK;QACrE,MAAMH,WAAW,GAAGI,MAAM,CAACD,CAAC,CAACE,MAAM,CAACb,KAAK,CAAC;QAC1CC,QAAQ,CAACF,OAAO,CAACS,WAAW,CAAC,CAACR,KAAK,EAAEQ,WAAW,CAAC;IACnD,CAAC;IAED,MAAMM,MAAM,GAAGf,OAAO,CAACgB,GAAG,CAAC,QAAYC,KAAK,GAAK;YAArB,EAAEP,KAAK,CAAA,EAAE;eAAa;YAAET,KAAK,EAAEgB,KAAK;YAAEP,KAAK;SAAE;IAAA,CAAC,CAAC;IAC3E,qBACE,oBAACZ,WAAW;QACVoB,GAAG,EAAE,CAAC;QACNZ,GAAG,EAAEA,GAAG;QACRL,KAAK,EAAEE,WAAW;QAClBD,QAAQ,EAAES,kBAAkB;QAC5BH,QAAQ,EAAEA,QAAQ;QAClBO,MAAM,EAAEA,MAAM;QACdI,UAAU,EAAE,IAAI;QAChBC,YAAY,EAAE,CAACX,WAAW,GACxBP,QAAQ,CAACF,OAAO,CAACS,WAAW,CAAC,CAACR,KAAK,EAAEQ,WAAW,CAAC;MAEnD,CACH;AACH,CAAC;AAED,eAAeV,aAAa,CAAA"}
|
|
@@ -1,17 +1,36 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { Label, LabelContainer, RangeInputSlider, Slider, SliderWrapper, Track } from "./SliderInputStyles";
|
|
2
|
+
import { Label, LabelButton, LabelContainer, RangeInputSlider, Slider, SliderWrapper, Track } from "./SliderInputStyles";
|
|
3
3
|
function SliderInput(param) {
|
|
4
|
-
let { value , onChange , min =0 , max =100 , step =1 , minLabel , maxLabel , getLabel =(val)=>String(val) } = param;
|
|
4
|
+
let { value , onChange , onLabelClick , min =0 , max =100 , step =1 , minLabel , maxLabel , getLabel =(val)=>String(val) , borderNone , labels } = param;
|
|
5
5
|
const fillPercentage = (value - min) / (max - min) * 100;
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
const LabelComponent = onLabelClick ? LabelButton : Label;
|
|
7
|
+
const createClickHandler = (value)=>{
|
|
8
|
+
return ()=>{
|
|
9
|
+
return onLabelClick === null || onLabelClick === void 0 ? void 0 : onLabelClick(value);
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
return /*#__PURE__*/ React.createElement(SliderWrapper, null, /*#__PURE__*/ React.createElement(Slider, {
|
|
13
|
+
borderNone: borderNone
|
|
14
|
+
}, getLabel(value), /*#__PURE__*/ React.createElement(Track, {
|
|
15
|
+
fillPercentage: fillPercentage,
|
|
16
|
+
borderNone: borderNone
|
|
8
17
|
})), /*#__PURE__*/ React.createElement(RangeInputSlider, {
|
|
9
18
|
value: value,
|
|
10
19
|
step: step,
|
|
11
20
|
onChange: onChange,
|
|
12
21
|
min: min,
|
|
13
22
|
max: max
|
|
14
|
-
}), /*#__PURE__*/ React.createElement(LabelContainer, null,
|
|
23
|
+
}), /*#__PURE__*/ React.createElement(LabelContainer, null, minLabel && /*#__PURE__*/ React.createElement(LabelComponent, {
|
|
24
|
+
onClick: createClickHandler(min)
|
|
25
|
+
}, minLabel), labels === null || labels === void 0 ? void 0 : labels.map((param)=>/*#__PURE__*/ {
|
|
26
|
+
let { value , label } = param;
|
|
27
|
+
return React.createElement(LabelComponent, {
|
|
28
|
+
onClick: createClickHandler(value),
|
|
29
|
+
key: value
|
|
30
|
+
}, label);
|
|
31
|
+
}), maxLabel && /*#__PURE__*/ React.createElement(LabelComponent, {
|
|
32
|
+
onClick: createClickHandler(max)
|
|
33
|
+
}, maxLabel)));
|
|
15
34
|
}
|
|
16
35
|
export default SliderInput;
|
|
17
36
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../packages/input/SliderInput.tsx"],"sourcesContent":["import React from 'react'\nimport {\n Label,\n LabelContainer,\n RangeInputSlider,\n Slider,\n SliderWrapper,\n Track,\n} from './SliderInputStyles'\nimport { SliderInputProps } from './types'\n\nfunction SliderInput({\n value,\n onChange,\n min = 0,\n max = 100,\n step = 1,\n minLabel,\n maxLabel,\n getLabel = (val) => String(val),\n}: SliderInputProps): React.ReactElement {\n const fillPercentage = ((value - min) / (max - min)) * 100\n return (\n <SliderWrapper>\n <Slider>\n {getLabel(value)}\n <Track fillPercentage={fillPercentage} />\n </Slider>\n <RangeInputSlider\n value={value}\n step={step}\n onChange={onChange}\n min={min}\n max={max}\n />\n <LabelContainer>\n <
|
|
1
|
+
{"version":3,"sources":["../../../packages/input/SliderInput.tsx"],"sourcesContent":["import React from 'react'\nimport {\n Label,\n LabelButton,\n LabelContainer,\n RangeInputSlider,\n Slider,\n SliderWrapper,\n Track,\n} from './SliderInputStyles'\nimport { SliderInputProps } from './types'\n\nfunction SliderInput({\n value,\n onChange,\n onLabelClick,\n min = 0,\n max = 100,\n step = 1,\n minLabel,\n maxLabel,\n getLabel = (val) => String(val),\n borderNone,\n labels,\n}: SliderInputProps): React.ReactElement {\n const fillPercentage = ((value - min) / (max - min)) * 100\n const LabelComponent = onLabelClick ? LabelButton : Label\n const createClickHandler = (value: number) => () => onLabelClick?.(value)\n\n return (\n <SliderWrapper>\n <Slider borderNone={borderNone}>\n {getLabel(value)}\n <Track fillPercentage={fillPercentage} borderNone={borderNone} />\n </Slider>\n <RangeInputSlider\n value={value}\n step={step}\n onChange={onChange}\n min={min}\n max={max}\n />\n <LabelContainer>\n {minLabel && (\n <LabelComponent onClick={createClickHandler(min)}>\n {minLabel}\n </LabelComponent>\n )}\n {labels?.map(({ value, label }) => (\n <LabelComponent onClick={createClickHandler(value)} key={value}>\n {label}\n </LabelComponent>\n ))}\n {maxLabel && (\n <LabelComponent onClick={createClickHandler(max)}>\n {maxLabel}\n </LabelComponent>\n )}\n </LabelContainer>\n </SliderWrapper>\n )\n}\n\nexport default SliderInput\n"],"names":["React","Label","LabelButton","LabelContainer","RangeInputSlider","Slider","SliderWrapper","Track","SliderInput","value","onChange","onLabelClick","min","max","step","minLabel","maxLabel","getLabel","val","String","borderNone","labels","fillPercentage","LabelComponent","createClickHandler","onClick","map","label","key"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO,CAAA;AACzB,SACEC,KAAK,EACLC,WAAW,EACXC,cAAc,EACdC,gBAAgB,EAChBC,MAAM,EACNC,aAAa,EACbC,KAAK,QACA,qBAAqB,CAAA;AAG5B,SAASC,WAAW,CAAC,KAYF,EAAsB;QAZpB,EACnBC,KAAK,CAAA,EACLC,QAAQ,CAAA,EACRC,YAAY,CAAA,EACZC,GAAG,EAAG,CAAC,CAAA,EACPC,GAAG,EAAG,GAAG,CAAA,EACTC,IAAI,EAAG,CAAC,CAAA,EACRC,QAAQ,CAAA,EACRC,QAAQ,CAAA,EACRC,QAAQ,EAAG,CAACC,GAAG,GAAKC,MAAM,CAACD,GAAG,CAAC,CAAA,EAC/BE,UAAU,CAAA,EACVC,MAAM,CAAA,EACW,GAZE,KAYF;IACjB,MAAMC,cAAc,GAAG,AAAC,CAACb,KAAK,GAAGG,GAAG,CAAC,GAAG,CAACC,GAAG,GAAGD,GAAG,CAAC,GAAI,GAAG;IAC1D,MAAMW,cAAc,GAAGZ,YAAY,GAAGT,WAAW,GAAGD,KAAK;IACzD,MAAMuB,kBAAkB,GAAG,CAACf,KAAa;QAAK,OAAA;YAAME,OAAAA,YAAY,aAAZA,YAAY,WAAS,GAArBA,KAAAA,CAAqB,GAArBA,YAAY,CAAGF,KAAK,CAAC,CAAA;SAAA,CAAA;KAAA;IAEzE,qBACE,oBAACH,aAAa,sBACZ,oBAACD,MAAM;QAACe,UAAU,EAAEA,UAAU;OAC3BH,QAAQ,CAACR,KAAK,CAAC,gBAChB,oBAACF,KAAK;QAACe,cAAc,EAAEA,cAAc;QAAEF,UAAU,EAAEA,UAAU;MAAI,CAC1D,gBACT,oBAAChB,gBAAgB;QACfK,KAAK,EAAEA,KAAK;QACZK,IAAI,EAAEA,IAAI;QACVJ,QAAQ,EAAEA,QAAQ;QAClBE,GAAG,EAAEA,GAAG;QACRC,GAAG,EAAEA,GAAG;MACR,gBACF,oBAACV,cAAc,QACZY,QAAQ,kBACP,oBAACQ,cAAc;QAACE,OAAO,EAAED,kBAAkB,CAACZ,GAAG,CAAC;OAC7CG,QAAQ,CACM,AAClB,EACAM,MAAM,aAANA,MAAM,WAAK,GAAXA,KAAAA,CAAW,GAAXA,MAAM,CAAEK,GAAG,CAAC,uBACX;YADY,EAAEjB,KAAK,CAAA,EAAEkB,KAAK,CAAA,EAAE;eAC5B,oBAACJ,cAAc;YAACE,OAAO,EAAED,kBAAkB,CAACf,KAAK,CAAC;YAAEmB,GAAG,EAAEnB,KAAK;WAC3DkB,KAAK,CACS;IAAD,CACjB,CAAC,EACDX,QAAQ,kBACP,oBAACO,cAAc;QAACE,OAAO,EAAED,kBAAkB,CAACX,GAAG,CAAC;OAC7CG,QAAQ,CACM,AAClB,CACc,CACH,CACjB;AACH,CAAC;AAED,eAAeR,WAAW,CAAA"}
|
|
@@ -70,6 +70,10 @@ export const Track = styled.div`
|
|
|
70
70
|
right: 0;
|
|
71
71
|
background: var(--lido-color-border);
|
|
72
72
|
|
|
73
|
+
${(props)=>props.borderNone && `
|
|
74
|
+
background: none;
|
|
75
|
+
`};
|
|
76
|
+
|
|
73
77
|
&:before {
|
|
74
78
|
content: '';
|
|
75
79
|
position: absolute;
|
|
@@ -92,6 +96,12 @@ export const Slider = styled.div`
|
|
|
92
96
|
border-left: 1px solid var(--lido-color-border);
|
|
93
97
|
border-top: 1px solid var(--lido-color-border);
|
|
94
98
|
|
|
99
|
+
${(props)=>props.borderNone && `
|
|
100
|
+
border-right: none;
|
|
101
|
+
border-left: none;
|
|
102
|
+
border-top: none;
|
|
103
|
+
`};
|
|
104
|
+
|
|
95
105
|
border-radius: 10px;
|
|
96
106
|
overflow: hidden;
|
|
97
107
|
`;
|
|
@@ -111,5 +121,16 @@ export const Label = styled.span`
|
|
|
111
121
|
color: var(--lido-color-text);
|
|
112
122
|
opacity: 0.5;
|
|
113
123
|
`;
|
|
124
|
+
export const LabelButton = styled.button`
|
|
125
|
+
border: none;
|
|
126
|
+
background-color: transparent;
|
|
127
|
+
font-style: normal;
|
|
128
|
+
font-weight: 400;
|
|
129
|
+
font-size: 12px;
|
|
130
|
+
line-height: 20px;
|
|
131
|
+
color: var(--lido-color-text);
|
|
132
|
+
opacity: 0.5;
|
|
133
|
+
cursor: pointer;
|
|
134
|
+
`;
|
|
114
135
|
|
|
115
136
|
//# sourceMappingURL=SliderInputStyles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../packages/input/SliderInputStyles.ts"],"sourcesContent":["import styled from 'styled-components'\n\nexport const RangeInputSlider = styled.input.attrs({ type: 'range' })`\n width: 100%;\n background-color: transparent;\n -webkit-appearance: none;\n position: absolute;\n margin: 0;\n top: 56px;\n left: 0;\n right: 0;\n\n &:focus {\n outline: none;\n }\n\n &::-webkit-slider-runnable-track {\n background: transparent;\n border: 0;\n border-radius: 10px;\n width: 100%;\n height: 2px;\n cursor: pointer;\n }\n\n &::-webkit-slider-thumb {\n margin-top: -8px;\n width: 18px;\n height: 18px;\n background: #ffffff;\n box-shadow: 0 0.5px 4px rgba(0, 0, 0, 0.12), 0 6px 13px rgba(0, 0, 0, 0.12);\n border: 0;\n border-radius: 50px;\n cursor: pointer;\n -webkit-appearance: none;\n }\n\n &::-moz-range-track {\n background: #00a3ff;\n border: 0;\n border-radius: 10px;\n width: 100%;\n height: 2px;\n cursor: pointer;\n }\n\n &::-moz-range-thumb {\n width: 18px;\n height: 18px;\n background: #ffffff;\n border: 0;\n border-radius: 50px;\n cursor: pointer;\n }\n\n &::-ms-track {\n background: transparent;\n color: transparent;\n width: 100%;\n height: 2px;\n cursor: pointer;\n }\n`\n\nexport const Track = styled.div<{
|
|
1
|
+
{"version":3,"sources":["../../../packages/input/SliderInputStyles.ts"],"sourcesContent":["import styled from 'styled-components'\n\nexport const RangeInputSlider = styled.input.attrs({ type: 'range' })`\n width: 100%;\n background-color: transparent;\n -webkit-appearance: none;\n position: absolute;\n margin: 0;\n top: 56px;\n left: 0;\n right: 0;\n\n &:focus {\n outline: none;\n }\n\n &::-webkit-slider-runnable-track {\n background: transparent;\n border: 0;\n border-radius: 10px;\n width: 100%;\n height: 2px;\n cursor: pointer;\n }\n\n &::-webkit-slider-thumb {\n margin-top: -8px;\n width: 18px;\n height: 18px;\n background: #ffffff;\n box-shadow: 0 0.5px 4px rgba(0, 0, 0, 0.12), 0 6px 13px rgba(0, 0, 0, 0.12);\n border: 0;\n border-radius: 50px;\n cursor: pointer;\n -webkit-appearance: none;\n }\n\n &::-moz-range-track {\n background: #00a3ff;\n border: 0;\n border-radius: 10px;\n width: 100%;\n height: 2px;\n cursor: pointer;\n }\n\n &::-moz-range-thumb {\n width: 18px;\n height: 18px;\n background: #ffffff;\n border: 0;\n border-radius: 50px;\n cursor: pointer;\n }\n\n &::-ms-track {\n background: transparent;\n color: transparent;\n width: 100%;\n height: 2px;\n cursor: pointer;\n }\n`\n\nexport const Track = styled.div<{\n fillPercentage: number\n borderNone?: boolean\n}>`\n height: 1px;\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n background: var(--lido-color-border);\n\n ${(props) =>\n props.borderNone &&\n `\n background: none;\n `};\n\n &:before {\n content: '';\n position: absolute;\n display: block;\n height: 2px;\n bottom: 0;\n left: 0;\n background: var(--lido-color-primary);\n width: ${(props) => props.fillPercentage || 0}%;\n }\n`\n\nexport const Slider = styled.div<{\n borderNone?: boolean\n}>`\n position: relative;\n height: 56px;\n padding: 16px 20px;\n box-sizing: border-box;\n\n background: var(--lido-color-accentControlBg);\n border-right: 1px solid var(--lido-color-border);\n border-left: 1px solid var(--lido-color-border);\n border-top: 1px solid var(--lido-color-border);\n\n ${(props) =>\n props.borderNone &&\n `\n border-right: none;\n border-left: none;\n border-top: none;\n `};\n\n border-radius: 10px;\n overflow: hidden;\n`\n\nexport const SliderWrapper = styled.div`\n position: relative;\n`\n\nexport const LabelContainer = styled.div`\n display: flex;\n justify-content: space-between;\n margin-top: 8px;\n`\n\nexport const Label = styled.span`\n font-style: normal;\n font-weight: 400;\n font-size: 12px;\n line-height: 20px;\n color: var(--lido-color-text);\n opacity: 0.5;\n`\n\nexport const LabelButton = styled.button`\n border: none;\n background-color: transparent;\n font-style: normal;\n font-weight: 400;\n font-size: 12px;\n line-height: 20px;\n color: var(--lido-color-text);\n opacity: 0.5;\n cursor: pointer;\n`\n"],"names":["styled","RangeInputSlider","input","attrs","type","Track","div","props","borderNone","fillPercentage","Slider","SliderWrapper","LabelContainer","Label","span","LabelButton","button"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,MAAMC,gBAAgB,GAAGD,MAAM,CAACE,KAAK,CAACC,KAAK,CAAC;IAAEC,IAAI,EAAE,OAAO;CAAE,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DtE,CAAC,CAAA;AAED,OAAO,MAAMC,KAAK,GAAGL,MAAM,CAACM,GAAG,AAG7B,CAAC;;;;;;;;EAQD,EAAE,CAACC,KAAK,GACNA,KAAK,CAACC,UAAU,IAChB,CAAC;;IAED,CAAC,CAAC;;;;;;;;;;WAUK,EAAE,CAACD,KAAK,GAAKA,KAAK,CAACE,cAAc,IAAI,CAAC,CAAC;;AAElD,CAAC,CAAA;AAED,OAAO,MAAMC,MAAM,GAAGV,MAAM,CAACM,GAAG,AAE9B,CAAC;;;;;;;;;;;EAWD,EAAE,CAACC,KAAK,GACNA,KAAK,CAACC,UAAU,IAChB,CAAC;;;;IAID,CAAC,CAAC;;;;AAIN,CAAC,CAAA;AAED,OAAO,MAAMG,aAAa,GAAGX,MAAM,CAACM,GAAG,CAAC;;AAExC,CAAC,CAAA;AAED,OAAO,MAAMM,cAAc,GAAGZ,MAAM,CAACM,GAAG,CAAC;;;;AAIzC,CAAC,CAAA;AAED,OAAO,MAAMO,KAAK,GAAGb,MAAM,CAACc,IAAI,CAAC;;;;;;;AAOjC,CAAC,CAAA;AAED,OAAO,MAAMC,WAAW,GAAGf,MAAM,CAACgB,MAAM,CAAC;;;;;;;;;;AAUzC,CAAC,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../packages/input/types.ts"],"sourcesContent":["import { LidoComponentProps } from '@lidofinance/utils'\nimport React, { ChangeEventHandler } from 'react'\nexport type { Theme } from '@lidofinance/theme'\n\nexport enum InputMessageVariant {\n error,\n warning,\n success,\n}\nexport type InputMessageVariants = keyof typeof InputMessageVariant\n\nexport enum InputType {\n text,\n password,\n number,\n email,\n search,\n tel,\n url,\n}\nexport type InputTypes = keyof typeof InputType\n\nexport enum InputVariant {\n small,\n default,\n}\nexport type InputVariants = keyof typeof InputVariant\n\nexport enum InputColor {\n default,\n accent,\n}\nexport type InputColors = keyof typeof InputColor\n\ntype CommonProps = {\n label?: React.ReactNode\n error?: React.ReactNode | boolean\n warning?: React.ReactNode | boolean\n success?: React.ReactNode | boolean\n variant?: InputVariants\n color?: InputColors\n active?: boolean\n fullwidth?: boolean\n wrapperRef?: React.RefObject<HTMLLabelElement>\n as?: never\n}\n\nexport type InputProps = LidoComponentProps<\n 'input',\n CommonProps & {\n type?: InputTypes\n leftDecorator?: React.ReactNode\n rightDecorator?: React.ReactNode\n }\n>\n\nexport type TextareaProps = LidoComponentProps<'textarea', CommonProps>\n\nexport type InputGroupProps = LidoComponentProps<\n 'span',\n {\n fullwidth?: boolean\n error?: React.ReactNode\n success?: React.ReactNode\n }\n>\n\ntype SliderProps = {\n value: number\n onChange?: ChangeEventHandler<HTMLInputElement>\n min?: number\n max?: number\n minLabel?: React.ReactNode\n maxLabel?: React.ReactNode\n step?: number\n getLabel?: (value: number) => React.ReactNode\n}\n\nexport type SliderInputProps = LidoComponentProps<'input', SliderProps>\n\ntype SliderOptionValue = string | number\n\ninterface SliderOption {\n value: SliderOptionValue\n label: React.ReactNode\n}\n\ninterface OptionsSliderProps {\n options: [SliderOption, SliderOption, ...SliderOption[]] // this is declaration like T[] but with \"at least 2 elements\" constraint\n value?: SliderOptionValue // if value is not provided, component should act isolated; initial value should be first option\n onChange: (
|
|
1
|
+
{"version":3,"sources":["../../../packages/input/types.ts"],"sourcesContent":["import { LidoComponentProps } from '@lidofinance/utils'\nimport React, { ChangeEventHandler } from 'react'\nexport type { Theme } from '@lidofinance/theme'\n\nexport enum InputMessageVariant {\n error,\n warning,\n success,\n}\nexport type InputMessageVariants = keyof typeof InputMessageVariant\n\nexport enum InputType {\n text,\n password,\n number,\n email,\n search,\n tel,\n url,\n}\nexport type InputTypes = keyof typeof InputType\n\nexport enum InputVariant {\n small,\n default,\n}\nexport type InputVariants = keyof typeof InputVariant\n\nexport enum InputColor {\n default,\n accent,\n}\nexport type InputColors = keyof typeof InputColor\n\ntype CommonProps = {\n label?: React.ReactNode\n error?: React.ReactNode | boolean\n warning?: React.ReactNode | boolean\n success?: React.ReactNode | boolean\n variant?: InputVariants\n color?: InputColors\n active?: boolean\n fullwidth?: boolean\n wrapperRef?: React.RefObject<HTMLLabelElement>\n as?: never\n}\n\nexport type InputProps = LidoComponentProps<\n 'input',\n CommonProps & {\n type?: InputTypes\n leftDecorator?: React.ReactNode\n rightDecorator?: React.ReactNode\n }\n>\n\nexport type TextareaProps = LidoComponentProps<'textarea', CommonProps>\n\nexport type InputGroupProps = LidoComponentProps<\n 'span',\n {\n fullwidth?: boolean\n error?: React.ReactNode\n success?: React.ReactNode\n }\n>\n\ninterface ValueLabel {\n value: number\n label: React.ReactNode\n}\n\ntype SliderProps = {\n value: number\n onChange?: ChangeEventHandler<HTMLInputElement>\n min?: number\n max?: number\n minLabel?: React.ReactNode\n maxLabel?: React.ReactNode\n step?: number\n getLabel?: (value: number) => React.ReactNode\n borderNone?: boolean\n labels?: ValueLabel[]\n onLabelClick?: (value: number) => unknown\n}\n\nexport type SliderInputProps = LidoComponentProps<'input', SliderProps>\n\ntype SliderOptionValue = string | number\n\ninterface SliderOption {\n value: SliderOptionValue\n label: React.ReactNode\n}\n\ninterface OptionsSliderProps {\n options: [SliderOption, SliderOption, ...SliderOption[]] // this is declaration like T[] but with \"at least 2 elements\" constraint\n value?: SliderOptionValue // if value is not provided, component should act isolated; initial value should be first option\n onChange: (value: SliderOptionValue, valueIndex: number) => unknown\n}\n\nexport type OptionsSliderInputProps = LidoComponentProps<\n 'input',\n OptionsSliderProps\n>\n"],"names":["React","InputMessageVariant","error","warning","success","InputType","text","password","number","email","search","tel","url","InputVariant","small","default","InputColor","accent"],"mappings":"AACA,OAAOA,KAAK,MAA8B,OAAO,CAAA;WAG1C,mBAIN;UAJWC,mBAAmB;IAAnBA,mBAAmB,CAAnBA,mBAAmB,CAC7BC,OAAK,IAALA,CAAK,IAALA,OAAK;IADKD,mBAAmB,CAAnBA,mBAAmB,CAE7BE,SAAO,IAAPA,CAAO,IAAPA,SAAO;IAFGF,mBAAmB,CAAnBA,mBAAmB,CAG7BG,SAAO,IAAPA,CAAO,IAAPA,SAAO;GAHGH,mBAAmB,KAAnBA,mBAAmB;WAOxB,SAQN;UARWI,SAAS;IAATA,SAAS,CAATA,SAAS,CACnBC,MAAI,IAAJA,CAAI,IAAJA,MAAI;IADMD,SAAS,CAATA,SAAS,CAEnBE,UAAQ,IAARA,CAAQ,IAARA,UAAQ;IAFEF,SAAS,CAATA,SAAS,CAGnBG,QAAM,IAANA,CAAM,IAANA,QAAM;IAHIH,SAAS,CAATA,SAAS,CAInBI,OAAK,IAALA,CAAK,IAALA,OAAK;IAJKJ,SAAS,CAATA,SAAS,CAKnBK,QAAM,IAANA,CAAM,IAANA,QAAM;IALIL,SAAS,CAATA,SAAS,CAMnBM,KAAG,IAAHA,CAAG,IAAHA,KAAG;IANON,SAAS,CAATA,SAAS,CAOnBO,KAAG,IAAHA,CAAG,IAAHA,KAAG;GAPOP,SAAS,KAATA,SAAS;WAWd,YAGN;UAHWQ,YAAY;IAAZA,YAAY,CAAZA,YAAY,CACtBC,OAAK,IAALA,CAAK,IAALA,OAAK;IADKD,YAAY,CAAZA,YAAY,CAEtBE,SAAO,IAAPA,CAAO,IAAPA,SAAO;GAFGF,YAAY,KAAZA,YAAY;WAMjB,UAGN;UAHWG,UAAU;IAAVA,UAAU,CAAVA,UAAU,CACpBD,SAAO,IAAPA,CAAO,IAAPA,SAAO;IADGC,UAAU,CAAVA,UAAU,CAEpBC,QAAM,IAANA,CAAM,IAANA,QAAM;GAFID,UAAU,KAAVA,UAAU"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../packages/theme/base/colors.ts"],"sourcesContent":["const colors = {\n darkThemeOpacity: '0',\n lightThemeOpacity: '1',\n\n lightModeVisibility: 'visible',\n darkModeVisibility: 'hidden',\n\n lightDisplay: 'initial',\n darkDisplay: 'none',\n\n primary: '#00a3ff',\n primaryHover: '#009bf2',\n primaryContrast: '#fff',\n primaryVisited: '#4bbeff',\n\n accent: '#27272e',\n accentContrast: '#fff',\n accentContrastSecondary: 'rgba(255, 255, 255, 0.6)',\n accentDarken: 'rgba(0, 0, 0, .2)',\n accentControlBg: 'rgba(0, 0, 0, .1)',\n accentBorder: 'rgba(255, 255, 255, 0.2)',\n accentBorderHover: 'rgba(255, 255, 255, 0.3)',\n\n error: '#e14d4d',\n errorHover: '#d44c4d',\n errorContrast: '#fff',\n\n warning: '#EC8600',\n warningHover: '#f0a431',\n warningContrast: '#fff',\n warningBackground: '#FFFAE0',\n\n textDark: '#273852',\n\n success: '#53BA95',\n successHover: '#
|
|
1
|
+
{"version":3,"sources":["../../../../packages/theme/base/colors.ts"],"sourcesContent":["const colors = {\n darkThemeOpacity: '0',\n lightThemeOpacity: '1',\n\n lightModeVisibility: 'visible',\n darkModeVisibility: 'hidden',\n\n lightDisplay: 'initial',\n darkDisplay: 'none',\n\n primary: '#00a3ff',\n primaryHover: '#009bf2',\n primaryContrast: '#fff',\n primaryVisited: '#4bbeff',\n\n accent: '#27272e',\n accentContrast: '#fff',\n accentContrastSecondary: 'rgba(255, 255, 255, 0.6)',\n accentDarken: 'rgba(0, 0, 0, .2)',\n accentControlBg: 'rgba(0, 0, 0, .1)',\n accentBorder: 'rgba(255, 255, 255, 0.2)',\n accentBorderHover: 'rgba(255, 255, 255, 0.3)',\n\n error: '#e14d4d',\n errorHover: '#d44c4d',\n errorContrast: '#fff',\n\n warning: '#EC8600',\n warningHover: '#f0a431',\n warningContrast: '#fff',\n warningBackground: '#FFFAE0',\n\n textDark: '#273852',\n\n success: '#53BA95',\n successHover: '#4ba886',\n successContrast: '#fff',\n} as const\n\nexport default { colors }\n"],"names":["colors","darkThemeOpacity","lightThemeOpacity","lightModeVisibility","darkModeVisibility","lightDisplay","darkDisplay","primary","primaryHover","primaryContrast","primaryVisited","accent","accentContrast","accentContrastSecondary","accentDarken","accentControlBg","accentBorder","accentBorderHover","error","errorHover","errorContrast","warning","warningHover","warningContrast","warningBackground","textDark","success","successHover","successContrast"],"mappings":"AAAA,MAAMA,MAAM,GAAG;IACbC,gBAAgB,EAAE,GAAG;IACrBC,iBAAiB,EAAE,GAAG;IAEtBC,mBAAmB,EAAE,SAAS;IAC9BC,kBAAkB,EAAE,QAAQ;IAE5BC,YAAY,EAAE,SAAS;IACvBC,WAAW,EAAE,MAAM;IAEnBC,OAAO,EAAE,SAAS;IAClBC,YAAY,EAAE,SAAS;IACvBC,eAAe,EAAE,MAAM;IACvBC,cAAc,EAAE,SAAS;IAEzBC,MAAM,EAAE,SAAS;IACjBC,cAAc,EAAE,MAAM;IACtBC,uBAAuB,EAAE,0BAA0B;IACnDC,YAAY,EAAE,mBAAmB;IACjCC,eAAe,EAAE,mBAAmB;IACpCC,YAAY,EAAE,0BAA0B;IACxCC,iBAAiB,EAAE,0BAA0B;IAE7CC,KAAK,EAAE,SAAS;IAChBC,UAAU,EAAE,SAAS;IACrBC,aAAa,EAAE,MAAM;IAErBC,OAAO,EAAE,SAAS;IAClBC,YAAY,EAAE,SAAS;IACvBC,eAAe,EAAE,MAAM;IACvBC,iBAAiB,EAAE,SAAS;IAE5BC,QAAQ,EAAE,SAAS;IAEnBC,OAAO,EAAE,SAAS;IAClBC,YAAY,EAAE,SAAS;IACvBC,eAAe,EAAE,MAAM;CACxB,AAAS;AAEV,eAAe;IAAE5B,MAAM;CAAE,CAAA"}
|