@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
|
@@ -16,23 +16,29 @@ const OptionsSlider = (param)=>{
|
|
|
16
16
|
sliderIndex = 0;
|
|
17
17
|
}
|
|
18
18
|
const max = options.length - 1;
|
|
19
|
-
const firstOption = options[0];
|
|
20
|
-
const lastOption = options[max];
|
|
21
19
|
const getLabel = (optionIndex)=>{
|
|
22
20
|
return options[optionIndex].label;
|
|
23
21
|
};
|
|
24
22
|
const handleSliderChange = (e)=>{
|
|
25
23
|
const optionIndex = Number(e.target.value);
|
|
26
|
-
onChange(
|
|
24
|
+
onChange(options[optionIndex].value, optionIndex);
|
|
27
25
|
};
|
|
26
|
+
const labels = options.map((param, index)=>{
|
|
27
|
+
let { label } = param;
|
|
28
|
+
return {
|
|
29
|
+
value: index,
|
|
30
|
+
label
|
|
31
|
+
};
|
|
32
|
+
});
|
|
28
33
|
return /*#__PURE__*/ _react.default.createElement(_sliderInput.default, {
|
|
29
34
|
min: 0,
|
|
30
35
|
max: max,
|
|
31
36
|
value: sliderIndex,
|
|
32
37
|
onChange: handleSliderChange,
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
38
|
+
getLabel: getLabel,
|
|
39
|
+
labels: labels,
|
|
40
|
+
borderNone: true,
|
|
41
|
+
onLabelClick: (optionIndex)=>onChange(options[optionIndex].value, optionIndex)
|
|
36
42
|
});
|
|
37
43
|
};
|
|
38
44
|
const _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":["OptionsSlider","options","value","onChange","sliderIndex","findIndex","option","max","length","getLabel","optionIndex","label","handleSliderChange","e","Number","target","labels","map","index","SliderInput","min","borderNone","onLabelClick"],"mappings":"AAAA;;;;+BA2CA,SAA4B;;aAA5B,QAA4B;;;4DA3CV,OAAO;kEACD,eAAe;AAGvC,MAAMA,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,6BAACQ,YAAW,QAAA;QACVC,GAAG,EAAE,CAAC;QACNb,GAAG,EAAEA,GAAG;QACRL,KAAK,EAAEE,WAAW;QAClBD,QAAQ,EAAES,kBAAkB;QAC5BH,QAAQ,EAAEA,QAAQ;QAClBO,MAAM,EAAEA,MAAM;QACdK,UAAU,EAAE,IAAI;QAChBC,YAAY,EAAE,CAACZ,WAAW,GACxBP,QAAQ,CAACF,OAAO,CAACS,WAAW,CAAC,CAACR,KAAK,EAAEQ,WAAW,CAAC;MAEnD,CACH;AACH,CAAC;MAED,QAA4B,GAAbV,aAAa"}
|
|
@@ -10,17 +10,36 @@ const _interopRequireDefault = require("@swc/helpers/lib/_interop_require_defaul
|
|
|
10
10
|
const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
|
|
11
11
|
const _sliderInputStyles = require("./SliderInputStyles");
|
|
12
12
|
function SliderInput(param) {
|
|
13
|
-
let { value , onChange , min =0 , max =100 , step =1 , minLabel , maxLabel , getLabel =(val)=>String(val) } = param;
|
|
13
|
+
let { value , onChange , onLabelClick , min =0 , max =100 , step =1 , minLabel , maxLabel , getLabel =(val)=>String(val) , borderNone , labels } = param;
|
|
14
14
|
const fillPercentage = (value - min) / (max - min) * 100;
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
const LabelComponent = onLabelClick ? _sliderInputStyles.LabelButton : _sliderInputStyles.Label;
|
|
16
|
+
const createClickHandler = (value)=>{
|
|
17
|
+
return ()=>{
|
|
18
|
+
return onLabelClick === null || onLabelClick === void 0 ? void 0 : onLabelClick(value);
|
|
19
|
+
};
|
|
20
|
+
};
|
|
21
|
+
return /*#__PURE__*/ _react.default.createElement(_sliderInputStyles.SliderWrapper, null, /*#__PURE__*/ _react.default.createElement(_sliderInputStyles.Slider, {
|
|
22
|
+
borderNone: borderNone
|
|
23
|
+
}, getLabel(value), /*#__PURE__*/ _react.default.createElement(_sliderInputStyles.Track, {
|
|
24
|
+
fillPercentage: fillPercentage,
|
|
25
|
+
borderNone: borderNone
|
|
17
26
|
})), /*#__PURE__*/ _react.default.createElement(_sliderInputStyles.RangeInputSlider, {
|
|
18
27
|
value: value,
|
|
19
28
|
step: step,
|
|
20
29
|
onChange: onChange,
|
|
21
30
|
min: min,
|
|
22
31
|
max: max
|
|
23
|
-
}), /*#__PURE__*/ _react.default.createElement(_sliderInputStyles.LabelContainer, null,
|
|
32
|
+
}), /*#__PURE__*/ _react.default.createElement(_sliderInputStyles.LabelContainer, null, minLabel && /*#__PURE__*/ _react.default.createElement(LabelComponent, {
|
|
33
|
+
onClick: createClickHandler(min)
|
|
34
|
+
}, minLabel), labels === null || labels === void 0 ? void 0 : labels.map((param)=>/*#__PURE__*/ {
|
|
35
|
+
let { value , label } = param;
|
|
36
|
+
return _react.default.createElement(LabelComponent, {
|
|
37
|
+
onClick: createClickHandler(value),
|
|
38
|
+
key: value
|
|
39
|
+
}, label);
|
|
40
|
+
}), maxLabel && /*#__PURE__*/ _react.default.createElement(LabelComponent, {
|
|
41
|
+
onClick: createClickHandler(max)
|
|
42
|
+
}, maxLabel)));
|
|
24
43
|
}
|
|
25
44
|
const _default = SliderInput;
|
|
26
45
|
|
|
@@ -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":["SliderInput","value","onChange","onLabelClick","min","max","step","minLabel","maxLabel","getLabel","val","String","borderNone","labels","fillPercentage","LabelComponent","LabelButton","Label","createClickHandler","SliderWrapper","Slider","Track","RangeInputSlider","LabelContainer","onClick","map","label","key"],"mappings":"AAAA;;;;+BA+DA,SAA0B;;aAA1B,QAA0B;;;4DA/DR,OAAO;mCASlB,qBAAqB;AAG5B,SAASA,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,GAAGa,kBAAW,YAAA,GAAGC,kBAAK,MAAA;IACzD,MAAMC,kBAAkB,GAAG,CAACjB,KAAa;QAAK,OAAA;YAAME,OAAAA,YAAY,aAAZA,YAAY,WAAS,GAArBA,KAAAA,CAAqB,GAArBA,YAAY,CAAGF,KAAK,CAAC,CAAA;SAAA,CAAA;KAAA;IAEzE,qBACE,6BAACkB,kBAAa,cAAA,sBACZ,6BAACC,kBAAM,OAAA;QAACR,UAAU,EAAEA,UAAU;OAC3BH,QAAQ,CAACR,KAAK,CAAC,gBAChB,6BAACoB,kBAAK,MAAA;QAACP,cAAc,EAAEA,cAAc;QAAEF,UAAU,EAAEA,UAAU;MAAI,CAC1D,gBACT,6BAACU,kBAAgB,iBAAA;QACfrB,KAAK,EAAEA,KAAK;QACZK,IAAI,EAAEA,IAAI;QACVJ,QAAQ,EAAEA,QAAQ;QAClBE,GAAG,EAAEA,GAAG;QACRC,GAAG,EAAEA,GAAG;MACR,gBACF,6BAACkB,kBAAc,eAAA,QACZhB,QAAQ,kBACP,6BAACQ,cAAc;QAACS,OAAO,EAAEN,kBAAkB,CAACd,GAAG,CAAC;OAC7CG,QAAQ,CACM,AAClB,EACAM,MAAM,aAANA,MAAM,WAAK,GAAXA,KAAAA,CAAW,GAAXA,MAAM,CAAEY,GAAG,CAAC,uBACX;YADY,EAAExB,KAAK,CAAA,EAAEyB,KAAK,CAAA,EAAE;eAC5B,6BAACX,cAAc;YAACS,OAAO,EAAEN,kBAAkB,CAACjB,KAAK,CAAC;YAAE0B,GAAG,EAAE1B,KAAK;WAC3DyB,KAAK,CACS;IAAD,CACjB,CAAC,EACDlB,QAAQ,kBACP,6BAACO,cAAc;QAACS,OAAO,EAAEN,kBAAkB,CAACb,GAAG,CAAC;OAC7CG,QAAQ,CACM,AAClB,CACc,CACH,CACjB;AACH,CAAC;MAED,QAA0B,GAAXR,WAAW"}
|
|
@@ -14,7 +14,8 @@ _export(exports, {
|
|
|
14
14
|
Slider: ()=>Slider,
|
|
15
15
|
SliderWrapper: ()=>SliderWrapper,
|
|
16
16
|
LabelContainer: ()=>LabelContainer,
|
|
17
|
-
Label: ()=>Label
|
|
17
|
+
Label: ()=>Label,
|
|
18
|
+
LabelButton: ()=>LabelButton
|
|
18
19
|
});
|
|
19
20
|
const _interopRequireDefault = require("@swc/helpers/lib/_interop_require_default.js").default;
|
|
20
21
|
const _styledComponents = /*#__PURE__*/ _interopRequireDefault(require("styled-components"));
|
|
@@ -89,6 +90,10 @@ const Track = _styledComponents.default.div`
|
|
|
89
90
|
right: 0;
|
|
90
91
|
background: var(--lido-color-border);
|
|
91
92
|
|
|
93
|
+
${(props)=>props.borderNone && `
|
|
94
|
+
background: none;
|
|
95
|
+
`};
|
|
96
|
+
|
|
92
97
|
&:before {
|
|
93
98
|
content: '';
|
|
94
99
|
position: absolute;
|
|
@@ -111,6 +116,12 @@ const Slider = _styledComponents.default.div`
|
|
|
111
116
|
border-left: 1px solid var(--lido-color-border);
|
|
112
117
|
border-top: 1px solid var(--lido-color-border);
|
|
113
118
|
|
|
119
|
+
${(props)=>props.borderNone && `
|
|
120
|
+
border-right: none;
|
|
121
|
+
border-left: none;
|
|
122
|
+
border-top: none;
|
|
123
|
+
`};
|
|
124
|
+
|
|
114
125
|
border-radius: 10px;
|
|
115
126
|
overflow: hidden;
|
|
116
127
|
`;
|
|
@@ -130,5 +141,16 @@ const Label = _styledComponents.default.span`
|
|
|
130
141
|
color: var(--lido-color-text);
|
|
131
142
|
opacity: 0.5;
|
|
132
143
|
`;
|
|
144
|
+
const LabelButton = _styledComponents.default.button`
|
|
145
|
+
border: none;
|
|
146
|
+
background-color: transparent;
|
|
147
|
+
font-style: normal;
|
|
148
|
+
font-weight: 400;
|
|
149
|
+
font-size: 12px;
|
|
150
|
+
line-height: 20px;
|
|
151
|
+
color: var(--lido-color-text);
|
|
152
|
+
opacity: 0.5;
|
|
153
|
+
cursor: pointer;
|
|
154
|
+
`;
|
|
133
155
|
|
|
134
156
|
//# 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":["RangeInputSlider","Track","Slider","SliderWrapper","LabelContainer","Label","LabelButton","styled","input","attrs","type","div","props","borderNone","fillPercentage","span","button"],"mappings":"AAAA;;;;;;;;;;;IAEaA,gBAAgB,MAAhBA,gBAAgB;IA8DhBC,KAAK,MAALA,KAAK;IA6BLC,MAAM,MAANA,MAAM;IAyBNC,aAAa,MAAbA,aAAa;IAIbC,cAAc,MAAdA,cAAc;IAMdC,KAAK,MAALA,KAAK;IASLC,WAAW,MAAXA,WAAW;;;uEAzIL,mBAAmB;AAE/B,MAAMN,gBAAgB,GAAGO,iBAAM,QAAA,CAACC,KAAK,CAACC,KAAK,CAAC;IAAEC,IAAI,EAAE,OAAO;CAAE,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DtE,CAAC;AAEM,MAAMT,KAAK,GAAGM,iBAAM,QAAA,CAACI,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;AAEM,MAAMZ,MAAM,GAAGK,iBAAM,QAAA,CAACI,GAAG,AAE9B,CAAC;;;;;;;;;;;EAWD,EAAE,CAACC,KAAK,GACNA,KAAK,CAACC,UAAU,IAChB,CAAC;;;;IAID,CAAC,CAAC;;;;AAIN,CAAC;AAEM,MAAMV,aAAa,GAAGI,iBAAM,QAAA,CAACI,GAAG,CAAC;;AAExC,CAAC;AAEM,MAAMP,cAAc,GAAGG,iBAAM,QAAA,CAACI,GAAG,CAAC;;;;AAIzC,CAAC;AAEM,MAAMN,KAAK,GAAGE,iBAAM,QAAA,CAACQ,IAAI,CAAC;;;;;;;AAOjC,CAAC;AAEM,MAAMT,WAAW,GAAGC,iBAAM,QAAA,CAACS,MAAM,CAAC;;;;;;;;;;AAUzC,CAAC"}
|
|
@@ -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":["InputMessageVariant","error","warning","success","InputType","text","password","number","email","search","tel","url","InputVariant","small","default","InputColor","accent"],"mappings":"AAAA;;;;;;;;;;;;;;;;;4DAC0C,OAAO;IAG1C,mBAIN;UAJWA,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;IAOxB,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;IAWd,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;IAMjB,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;;;;+BAuCA,SAAyB;;aAAzB,QAAyB;;AAvCzB,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;MAEV,QAAyB,GAAV;IAAE5B,MAAM;CAAE"}
|