mimir-ui-kit 1.21.0 → 1.21.2
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/DatePickerModal-BM0BgzTb.js +204 -0
- package/dist/assets/Button.css +1 -1
- package/dist/assets/DatePickerModal.css +1 -0
- package/dist/assets/Drawer.css +1 -1
- package/dist/assets/TextArea.css +1 -1
- package/dist/components/Button/Button.d.ts +52 -0
- package/dist/components/Button/Button.js +33 -28
- package/dist/components/Button/constants.d.ts +8 -1
- package/dist/components/Button/constants.js +9 -0
- package/dist/components/Button/index.d.ts +1 -1
- package/dist/components/Button/index.js +2 -1
- package/dist/components/Button/types.d.ts +7 -2
- package/dist/components/DatePicker/DatePicker.d.ts +0 -12
- package/dist/components/DatePicker/DatePicker.js +18 -87
- package/dist/components/DatePicker/DatePickerModal.d.ts +1 -2
- package/dist/components/DatePicker/DatePickerModal.js +7 -182
- package/dist/components/DatePicker/constants.d.ts +0 -1
- package/dist/components/DatePicker/constants.js +0 -15
- package/dist/components/Drawer/Drawer.d.ts +13 -5
- package/dist/components/Drawer/Drawer.js +75 -51
- package/dist/components/TextArea/TextArea.js +9 -9
- package/dist/components/Uploader/Uploader.js +1 -1
- package/dist/components/index.d.ts +1 -1
- package/dist/components/index.js +2 -1
- package/dist/hooks/index.d.ts +1 -0
- package/dist/hooks/index.js +2 -0
- package/dist/hooks/useResizeObserver/getElement.d.ts +4 -0
- package/dist/hooks/useResizeObserver/getElement.js +18 -0
- package/dist/hooks/useResizeObserver/index.d.ts +1 -0
- package/dist/hooks/useResizeObserver/index.js +4 -0
- package/dist/hooks/useResizeObserver/useResizeObserver.d.ts +17 -0
- package/dist/hooks/useResizeObserver/useResizeObserver.js +49 -0
- package/dist/index.js +4 -1
- package/package.json +1 -1
- package/dist/assets/styles.css +0 -1
- package/dist/components/DatePicker/MonthPickerModal.d.ts +0 -9
- package/dist/components/DatePicker/MonthPickerModal.js +0 -123
- package/dist/components/DatePicker/YearPickerModal.d.ts +0 -9
- package/dist/components/DatePicker/YearPickerModal.js +0 -120
- package/dist/styles.module-BZXDqssF.js +0 -36
@@ -0,0 +1,204 @@
|
|
1
|
+
import { jsx, Fragment, jsxs } from "react/jsx-runtime";
|
2
|
+
import { useRef, useState, useEffect } from "react";
|
3
|
+
import { week } from "./components/DatePicker/constants.js";
|
4
|
+
import { formating } from "./utils/index.js";
|
5
|
+
import { Button } from "./components/Button/Button.js";
|
6
|
+
import './assets/DatePickerModal.css';const input = "_input_1ndkx_2";
|
7
|
+
const wrapper = "_wrapper_1ndkx_21";
|
8
|
+
const active = "_active_1ndkx_27";
|
9
|
+
const button = "_button_1ndkx_35";
|
10
|
+
const h = "_h_1ndkx_81";
|
11
|
+
const b = "_b_1ndkx_35";
|
12
|
+
const d = "_d_1ndkx_6";
|
13
|
+
const m = "_m_1ndkx_100";
|
14
|
+
const a = "_a_1ndkx_27";
|
15
|
+
const prev = "_prev_1ndkx_102";
|
16
|
+
const orange = "_orange_1ndkx_118";
|
17
|
+
const current = "_current_1ndkx_143";
|
18
|
+
const cls = {
|
19
|
+
input,
|
20
|
+
"date-wrapper": "_date-wrapper_1ndkx_6",
|
21
|
+
wrapper,
|
22
|
+
active,
|
23
|
+
"input-wrapper": "_input-wrapper_1ndkx_31",
|
24
|
+
"button-wrapper": "_button-wrapper_1ndkx_35",
|
25
|
+
button,
|
26
|
+
"field-overlow": "_field-overlow_1ndkx_52",
|
27
|
+
"calendar-block": "_calendar-block_1ndkx_58",
|
28
|
+
h,
|
29
|
+
b,
|
30
|
+
d,
|
31
|
+
m,
|
32
|
+
a,
|
33
|
+
prev,
|
34
|
+
orange,
|
35
|
+
current
|
36
|
+
};
|
37
|
+
function DatePickerModal({
|
38
|
+
date,
|
39
|
+
onChangeValue,
|
40
|
+
setActive,
|
41
|
+
before
|
42
|
+
}) {
|
43
|
+
const field = useRef(null);
|
44
|
+
const _current = new Date(date);
|
45
|
+
const _selecte = new Date(date);
|
46
|
+
const current2 = {
|
47
|
+
y: _current.getFullYear(),
|
48
|
+
d: _current.getDate(),
|
49
|
+
m: _current.getMonth() + 1
|
50
|
+
};
|
51
|
+
const selecte = {
|
52
|
+
y: _selecte.getFullYear(),
|
53
|
+
d: _selecte.getDate(),
|
54
|
+
m: _selecte.getMonth() + 1
|
55
|
+
};
|
56
|
+
const countWorkDays = 4;
|
57
|
+
const [month, setMonth] = useState({ y: selecte.y, m: selecte.m });
|
58
|
+
useEffect(() => {
|
59
|
+
const windowHeight = window.innerHeight;
|
60
|
+
if (field.current !== null) {
|
61
|
+
const inputPosition = field.current.getBoundingClientRect();
|
62
|
+
const calendarSize = field.current.offsetHeight;
|
63
|
+
if (windowHeight < inputPosition.y + calendarSize) {
|
64
|
+
field.current.style.top = -calendarSize + "px";
|
65
|
+
} else {
|
66
|
+
field.current.style.top = "65px";
|
67
|
+
}
|
68
|
+
field.current.style.opacity = "1";
|
69
|
+
}
|
70
|
+
}, [month]);
|
71
|
+
const countPrevDays = (e) => {
|
72
|
+
let dayOfWeek = e.getDay();
|
73
|
+
if (dayOfWeek === 0) dayOfWeek = 7;
|
74
|
+
return dayOfWeek - 1;
|
75
|
+
};
|
76
|
+
const currentMonthIndex = month.m - 1;
|
77
|
+
const currentMonthFull = new Date(month.y, currentMonthIndex);
|
78
|
+
const days = [];
|
79
|
+
const prevDays = () => {
|
80
|
+
const prevMonth = new Date(currentMonthFull);
|
81
|
+
prevMonth.setDate(prevMonth.getDate() - 1);
|
82
|
+
const lastDayPrevMohth = prevMonth.getDate();
|
83
|
+
const prevList = [];
|
84
|
+
for (let i = 0; i < countPrevDays(currentMonthFull); i++) {
|
85
|
+
prevList.push(lastDayPrevMohth - i);
|
86
|
+
}
|
87
|
+
prevList.reverse();
|
88
|
+
return prevList;
|
89
|
+
};
|
90
|
+
const prevDaysArray = prevDays();
|
91
|
+
while (currentMonthFull.getMonth() === currentMonthIndex) {
|
92
|
+
days.push(currentMonthFull.getDate());
|
93
|
+
currentMonthFull.setDate(currentMonthFull.getDate() + 1);
|
94
|
+
}
|
95
|
+
const nextDays = () => {
|
96
|
+
const totalViewDays = 42;
|
97
|
+
const daysCount = totalViewDays - (prevDaysArray.length + days.length);
|
98
|
+
const nextList = [];
|
99
|
+
for (let i = 1; i <= daysCount; i++) {
|
100
|
+
nextList.push(i);
|
101
|
+
}
|
102
|
+
return nextList;
|
103
|
+
};
|
104
|
+
const nextDaysArray = nextDays();
|
105
|
+
const update = (m2, y) => {
|
106
|
+
y = m2 > 12 ? y + 1 : m2 < 1 ? y - 1 : y;
|
107
|
+
m2 = m2 > 12 ? 1 : m2 < 1 ? 12 : m2;
|
108
|
+
return { y, m: m2 };
|
109
|
+
};
|
110
|
+
const onExit = () => {
|
111
|
+
setActive(false);
|
112
|
+
};
|
113
|
+
const next = () => {
|
114
|
+
setMonth(update(month.m + 1, month.y));
|
115
|
+
};
|
116
|
+
const prev2 = () => {
|
117
|
+
setMonth(update(month.m - 1, month.y));
|
118
|
+
};
|
119
|
+
const isBefore = (activeDate) => {
|
120
|
+
if (before) {
|
121
|
+
const beforeDate = before.getTime();
|
122
|
+
if (beforeDate > activeDate) return true;
|
123
|
+
}
|
124
|
+
return false;
|
125
|
+
};
|
126
|
+
const send = (searchDate) => {
|
127
|
+
if (isBefore(
|
128
|
+
(/* @__PURE__ */ new Date(
|
129
|
+
`${month.y}-${formating.Number(2, month.m)}-${formating.Number(2, searchDate)}`
|
130
|
+
)).getTime()
|
131
|
+
))
|
132
|
+
return;
|
133
|
+
onChangeValue(
|
134
|
+
/* @__PURE__ */ new Date(
|
135
|
+
`${month.y}-${formating.Number(2, month.m)}-${formating.Number(2, searchDate)}`
|
136
|
+
)
|
137
|
+
);
|
138
|
+
onExit();
|
139
|
+
};
|
140
|
+
return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: [cls["calendar-block"]].join(" "), ref: field, children: [
|
141
|
+
/* @__PURE__ */ jsxs("div", { className: cls["h"], children: [
|
142
|
+
/* @__PURE__ */ jsx(
|
143
|
+
Button,
|
144
|
+
{
|
145
|
+
isIconButton: true,
|
146
|
+
iconName: "DropdownArrowLeft16px",
|
147
|
+
onClick: prev2,
|
148
|
+
variant: "secondary-gray",
|
149
|
+
size: "l"
|
150
|
+
}
|
151
|
+
),
|
152
|
+
/* @__PURE__ */ jsxs("div", { className: cls["d"], children: [
|
153
|
+
formating.Month(month.m).name,
|
154
|
+
"’",
|
155
|
+
month.y.toString().slice(-2)
|
156
|
+
] }),
|
157
|
+
/* @__PURE__ */ jsx(
|
158
|
+
Button,
|
159
|
+
{
|
160
|
+
isIconButton: true,
|
161
|
+
iconName: "DropdownArrowRight16px",
|
162
|
+
onClick: next,
|
163
|
+
variant: "secondary-gray",
|
164
|
+
size: "l"
|
165
|
+
}
|
166
|
+
)
|
167
|
+
] }),
|
168
|
+
/* @__PURE__ */ jsxs("div", { className: cls["b"], children: [
|
169
|
+
week.map((i, s) => /* @__PURE__ */ jsx(
|
170
|
+
"div",
|
171
|
+
{
|
172
|
+
className: `${s > countWorkDays ? [cls["m"], cls["orange"]].join(" ") : cls["m"]}`,
|
173
|
+
children: i
|
174
|
+
},
|
175
|
+
`v${s}`
|
176
|
+
)),
|
177
|
+
prevDaysArray.map((el, key) => /* @__PURE__ */ jsx("div", { className: cls["m"], children: el }, key)),
|
178
|
+
days.map((i, s) => /* @__PURE__ */ jsx(
|
179
|
+
"div",
|
180
|
+
{
|
181
|
+
className: isBefore(
|
182
|
+
(/* @__PURE__ */ new Date(
|
183
|
+
`${month.y}-${formating.Number(2, month.m)}-${formating.Number(2, i)}`
|
184
|
+
)).getTime()
|
185
|
+
) ? cls["m"] : cls["a"],
|
186
|
+
children: i !== 0 ? /* @__PURE__ */ jsx(
|
187
|
+
"b",
|
188
|
+
{
|
189
|
+
className: current2.y === month.y && current2.m === month.m && current2.d === i ? cls["current"] : "",
|
190
|
+
onClick: () => send(i),
|
191
|
+
children: i
|
192
|
+
}
|
193
|
+
) : /* @__PURE__ */ jsx("p", {})
|
194
|
+
},
|
195
|
+
s
|
196
|
+
)),
|
197
|
+
nextDaysArray.map((el, key) => /* @__PURE__ */ jsx("div", { className: cls["m"], children: el }, key))
|
198
|
+
] })
|
199
|
+
] }) });
|
200
|
+
}
|
201
|
+
export {
|
202
|
+
DatePickerModal as D,
|
203
|
+
cls as c
|
204
|
+
};
|
package/dist/assets/Button.css
CHANGED
@@ -1 +1 @@
|
|
1
|
-
.
|
1
|
+
._button_1qrs0_2{--button-cursor: pointer;display:inline-flex;flex-shrink:0;align-items:center;box-sizing:border-box;max-width:100%;height:var(--button-height);padding:0 var(--button-space);overflow:hidden;color:var(--button-color);font-weight:var(--font-weight-text-semibold);font-size:var(--button-font-size);font-family:var(--font-inter);line-height:var(--line-height-text-s1);white-space:nowrap;text-transform:uppercase;-webkit-text-decoration:none;text-decoration:none;text-overflow:ellipsis;-moz-column-gap:var(--button-gap);column-gap:var(--button-gap);background:var(--button-bg-color);border:none;border-color:var(--border-color);cursor:pointer;cursor:var(--button-cursor);transition:background-color .3s ease,border-color .15s ease,box-shadow .15s ease,color .15s ease,fill .15s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none}._button_1qrs0_2:hover{color:var(--button-color-hover);background:var(--button-bg-color-hover);border-color:var(--border-color-hover)}._button_1qrs0_2:active{color:var(--button-color-active);background:var(--button-bg-color-active);border-color:var(--border-color-active)}._button_1qrs0_2:focus-visible{box-shadow:0 0 2px var(--sapphire-normal)}._button_1qrs0_2._clear_1qrs0_42:focus{box-shadow:none}._button_1qrs0_2 svg{color:currentcolor;fill:currentcolor}._button_1qrs0_2 svg path{color:currentcolor;fill:currentcolor}._default-button_1qrs0_54._primary-sapphire_1qrs0_54{--button-bg-color: var(--sapphire-normal);--button-color-hover: var(--light-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--sapphire-active);--button-bg-color-hover: var(--sapphire-hover);--button-color: var(--light-text);--button-border: transparent}._default-button_1qrs0_54._primary-citrine_1qrs0_63{--button-bg-color: var(--citrine-normal);--button-color-hover: var(--light-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--citrine-active);--button-bg-color-hover: var(--citrine-hover);--button-color: var(--light-text);--button-border: transparent}._default-button_1qrs0_54._secondary-asphalt_1qrs0_72{--button-bg-color: var(--asphalt-normal);--button-color-hover: var(--light-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--asphalt-active);--button-bg-color-hover: var(--asphalt-hover);--button-color: var(--light-text);--button-border: transparent}._default-button_1qrs0_54._secondary-gray_1qrs0_81{--button-bg-color: var(--gray-normal);--button-color-hover: var(--counter-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--gray-active);--button-bg-color-hover: var(--gray-hover);--button-color: var(--dark-text);--button-border: transparent}._default-button_1qrs0_54._secondary-white_1qrs0_90{--button-bg-color: var(--white-normal);--button-color-hover: var(--counter-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--white-active);--button-bg-color-hover: var(--white);--button-color: var(--dark-text);--button-border: transparent}._default-button_1qrs0_54._secondary-red_1qrs0_99{--button-bg-color: var(--red-normal);--button-color-hover: var(--light-text);--button-color-active: var(--light-text);--button-bg-color-active: var(--red-active);--button-bg-color-hover: var(--red-hover);--button-color: var(--light-text);--button-border: transparent}._round-button_1qrs0_109{--button-border-radius-l: 24px;--button-border-radius-m: 20px;--button-border-radius-s: 16px;--button-border-radius-xs: 12px;--button-space-l: var(--space-s);--button-space-m: var(--space-xs);--button-space-s: var(--space-xs);--button-space-xs: var(--space-2xs);border-radius:var(--button-border-radius)}._round-button_1qrs0_109._black_1qrs0_120{--button-bg-color: var(--asphalt-normal);--button-bg-color-hover: var(--asphalt-hover);--button-bg-color-active: var(--sapphire-normal);--button-bg-color-focus: var(--sapphire-normal);--button-color: var(--light-text);--button-color-hover: var(--light-text);--button-color-active: var(--light-text)}._round-button_1qrs0_109._gray_1qrs0_129{--button-bg-color: var(--gray-normal);--button-bg-color-hover: var(--gray-hover);--button-bg-color-active: var(--sapphire-normal);--button-bg-color-focus: var(--sapphire-normal);--button-color: var(--asphalt-normal);--button-color-hover: var(--asphalt-hover);--button-color-active: var(--light-text)}._round-button_1qrs0_109._white_1qrs0_138{--button-bg-color: var(--white-normal);--button-bg-color-hover: var(--white-hover);--button-bg-color-active: var(--sapphire-normal);--button-bg-color-focus: var(--sapphire-normal);--button-color: var(--asphalt-normal);--button-color-hover: var(--asphalt-hover);--button-color-active: var(--light-text)}._outline-button_1qrs0_148{--button-bg-color: transparent;--button-bg-color-hover: transparent;--button-bg-color-active: transparent;--button-bg-color-focus: transparent;border:1px solid var(--border-color)}._outline-button_1qrs0_148._outline-asphalt_1qrs0_155{--border-color: var(--disabled-color);--button-color: var(--black-80);--border-color-hover: var(--black-80);--button-color-hover: var(--black-80);--border-color-active: var(--black-100);--button-color-active: var(--black-100)}._outline-button_1qrs0_148._outline-gray_1qrs0_163{--border-color: var(--black-5);--button-color: var(--black-5);--border-color-hover: var(--black-5);--button-color-hover: var(--counter-text);--border-color-active: var(--black-80);--button-color-active: var(--white);--button-bg-color-active: var(--black-80)}._outline-button_1qrs0_148._outline-white_1qrs0_172{--border-color: var(--white);--button-color: var(--white);--border-color-hover: var(--white);--button-color-hover: var(--counter-text);--border-color-active: var(--black-80);--button-color-active: var(--white);--button-bg-color-active: var(--black-80)}._outline-button_1qrs0_148._outline-red_1qrs0_181{--border-color: var(--error-normal);--button-color: var(--error-normal);--border-color-hover: var(--red-hover);--button-color-hover: var(--red-hover);--border-color-active: var(--red-active);--button-color-active: var(--white);--button-bg-color-active: var(--red-active)}._borderless-button_1qrs0_191{--button-bg-color: transparent;--button-bg-color-hover: transparent;--button-bg-color-active: transparent;--button-bg-color-focus: transparent}._borderless-button_1qrs0_191._borderless-asphalt_1qrs0_197{--button-color: var(--black-80);--button-color-hover: var(--counter-text);--button-color-active: var(--black-100)}._borderless-button_1qrs0_191._borderless-gray_1qrs0_202{--button-color: var(--black-5);--button-color-hover: var(--counter-text);--button-color-active: var(--black-80)}._borderless-button_1qrs0_191._borderless-white_1qrs0_207{--button-color: var(--white);--button-color-hover: var(--counter-text);--button-color-active: var(--black-80)}._borderless-button_1qrs0_191._borderless-red_1qrs0_212{--button-color: var(--error-normal);--button-color-hover: var(--red-hover);--button-color-active: var(--red-active)}._default-button_1qrs0_54,._outline-button_1qrs0_148,._borderless-button_1qrs0_191{--button-space-xxl: var(--control-space-xxl);--button-space-xl: var(--control-space-l);--button-space-l: var(--space-m);--button-space-m: var(--space-m);--button-space-s: var(--space-xs);--button-space-xs: var(--space-2xs);--button-border-radius-xxl: var(--control-radius-s);--button-border-radius-xl: var(--control-radius-s);--button-border-radius-l: var(--control-radius);--button-border-radius-m: var(--control-radius);--button-border-radius-s: var(--control-radius-xs);--button-border-radius-xs: var(--control-radius-xs);border-radius:var(--button-border-radius)}._xs_1qrs0_236{--button-height: var(--button-height-xs);--button-font-size: var(--control-text-size-xs);--button-space: var(--button-space-xs);--button-gap: 4px;--button-border-radius: var(--button-border-radius-s)}._m-s_1qrs0_244{--button-height: var(--button-height-ms);--button-border-radius: var(--button-border-radius-s);font-weight:var(--font-weight-text-regular);--button-gap: var(--space-2xs);--button-font-size: var(--size-text-s)}._s_1qrs0_72{--button-height: var(--button-height-s);--button-font-size: var(--control-text-size-s);--button-space: var(--button-space-s);--button-gap: 4px;--button-border-radius: var(--button-border-radius-s)}._m_1qrs0_244{--button-height: var(--button-height-m);--button-font-size: var(--size-text-m);--button-space: var(--button-space-m);--button-gap: 8px;--button-border-radius: var(--button-border-radius-m)}._l_1qrs0_268{--button-height: var(--button-height-l);--button-font-size: var(--size-text-m);--button-space: var(--button-space-l);--button-gap: 8px;--button-border-radius: var(--button-border-radius-l)}._xl_1qrs0_276{--button-height: var(--button-height-xl);--button-space: var(--button-space-xl);--button-gap: 8px;--button-border-radius: var(--button-border-radius-xl);--button-font-size: var(--size-text-m);font-weight:var(--font-weight-text-medium)}._xxl_1qrs0_285{--button-height: var(--button-height-xxl);--button-space: var(--button-space-xxl);--button-border-radius: var(--button-border-radius-xxl);--button-gap: 8px;font-weight:var(--font-weight-text-medium);--button-font-size: var(--size-text-m)}._full_1qrs0_294{display:flex;justify-content:center;width:100%}._disabled_1qrs0_300{--button-cursor: not-allowed;color:var(--light-text);background-color:var(--disabled)}._disabled_1qrs0_300:hover,._disabled_1qrs0_300:active,._disabled_1qrs0_300:focus{color:var(--light-text);background-color:var(--disabled);box-shadow:none}._disabled_1qrs0_300._outline-button_1qrs0_148{color:var(--disabled);background-color:transparent;border:1px solid var(--disabled)}._disabled_1qrs0_300._borderless-button_1qrs0_191{color:var(--disabled-color);background-color:transparent}._icon-button_1qrs0_320{justify-content:center;min-width:var(--button-height);padding:0}
|
@@ -0,0 +1 @@
|
|
1
|
+
._input_1ndkx_2{padding-right:var(--space-3xl)}._date-wrapper_1ndkx_6{position:relative;width:100%}._date-wrapper_1ndkx_6:hover input{background:var(--input-bg-color-hover)}._date-wrapper_1ndkx_6:before{position:absolute;top:0;right:60px;bottom:0;left:0;z-index:3;cursor:pointer;content:""}._wrapper_1ndkx_21{position:relative;display:flex;align-items:center;border-radius:var(--control-radius-s)}._wrapper_1ndkx_21._active_1ndkx_27{border-bottom:1px solid var(--citrine-100)}._input-wrapper_1ndkx_31{flex:1}._button-wrapper_1ndkx_35{position:absolute;top:0;right:0;z-index:2;display:flex;width:44px;height:100%;max-height:var(--button-height-xxl)}._button_1ndkx_35{align-self:center;background-color:transparent;border-radius:var(--control-radius-s)}._field-overlow_1ndkx_52{position:fixed;top:0;right:0;bottom:0;left:0;z-index:3}._calendar-block_1ndkx_58{position:absolute;z-index:3;display:flex;flex-direction:column;width:368px;max-height:none;padding:16px;font-weight:var(--font-weight-text-regular);font-size:var(--size-text-l);font-family:var(--font-inter);font-style:normal;line-height:var(--line-height-text-2xs);text-align:center;text-overflow:ellipsis;background:#fff;border-radius:var(--control-radius-s);box-shadow:0 0 #16172705,0 2px 4px #16172705,0 6px 6px #16172705,0 15px 9px #16172703;opacity:0;transition:height .5s ease-in;font-feature-settings:"zero";font-variant-numeric:slashed-zero}._calendar-block_1ndkx_58 ._h_1ndkx_81{display:flex;width:100%;color:var(--black-100)}._calendar-block_1ndkx_58 ._b_1ndkx_35{display:grid;grid-template-columns:repeat(7,1fr)}._calendar-block_1ndkx_58 ._d_1ndkx_6{display:flex;flex:1;align-items:center;justify-content:center;color:var(--black-100)}._calendar-block_1ndkx_58 ._m_1ndkx_100,._calendar-block_1ndkx_58 ._a_1ndkx_27,._calendar-block_1ndkx_58 ._prev_1ndkx_102{width:48px;height:48px;overflow:hidden}._calendar-block_1ndkx_58 ._m_1ndkx_100{display:flex;align-items:center;justify-content:center;color:var(--disabled)}._calendar-block_1ndkx_58 ._m_1ndkx_100 b{font-weight:var(--font-weight-text-regular)}._calendar-block_1ndkx_58 ._orange_1ndkx_118{color:var(--citrine-100)}._calendar-block_1ndkx_58 ._a_1ndkx_27{color:var(--black-100);border-radius:var(--control-radius-s)}._calendar-block_1ndkx_58 ._a_1ndkx_27 b{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-weight:var(--font-weight-text-regular);cursor:pointer}._calendar-block_1ndkx_58 ._a_1ndkx_27 b:hover{background:var(--black-10)}._calendar-block_1ndkx_58 ._a_1ndkx_27 b:active{color:var(--white);background:var(--sapphire-100)}._calendar-block_1ndkx_58 ._current_1ndkx_143{background:var(--sapphire-10);border-radius:var(--control-radius-s)}
|
package/dist/assets/Drawer.css
CHANGED
@@ -1 +1 @@
|
|
1
|
-
.
|
1
|
+
._drawer_1y1lk_3{--drawer-width: 808px;--drawer-z-index: 10000;position:fixed;z-index:10000;z-index:var(--drawer-z-index);display:flex;flex-direction:column;width:808px;width:var(--drawer-width);height:100%;overflow:auto;background-color:var(--black-5);transition:all .3s ease;pointer-events:none}._drawer_1y1lk_3::-webkit-scrollbar{width:3px}._drawer_1y1lk_3::-webkit-scrollbar-thumb{background-color:var(--black-80);border-radius:2px}._drawer_1y1lk_3::-webkit-scrollbar-track{background-color:var(--white)}._drawer_1y1lk_3 ._content_1y1lk_27{position:relative;display:flex;flex:1;flex-direction:column;padding:var(--space-m) var(--space-4xl) var(--space-4xl);transition:all .3s ease}@media (max-width: 600px){._drawer_1y1lk_3 ._content_1y1lk_27{--drawer-width: 100%;padding:var(--space-m)}}._drawer_1y1lk_3 ._content_1y1lk_27._is-loading_1y1lk_41{align-items:center;justify-content:center}._drawer_1y1lk_3 ._header_1y1lk_45{display:flex;gap:var(--space-xs);min-height:68px}._drawer_1y1lk_3 ._header_1y1lk_45:not(:last-child){margin-bottom:var(--space-2xl)}._drawer_1y1lk_3 ._header_1y1lk_45._sticky-header_1y1lk_53{position:-webkit-sticky;position:sticky;top:0;left:0;background-color:var(--black-5)}._drawer_1y1lk_3 ._header_1y1lk_45 ._title_1y1lk_59{flex:1;align-self:flex-end;font-weight:var(--font-weight-text-medium);font-size:var(--size-text-xl3);line-height:var(--line-height-text-s1);letter-spacing:.7px}@media (max-width: 600px){._drawer_1y1lk_3 ._header_1y1lk_45 ._title_1y1lk_59{font-size:var(--size-text-xl2);line-height:var(--line-height-text-xs)}}._drawer_1y1lk_3 ._header_1y1lk_45 ._space_1y1lk_73{flex:0 0 var(--button-height-m)}@media (max-width: 600px){._drawer_1y1lk_3 ._header_1y1lk_45{min-height:55px}._drawer_1y1lk_3 ._header_1y1lk_45:not(:last-child){margin-bottom:var(--space-m)}}._drawer_1y1lk_3 ._inner_1y1lk_84{flex:1}._drawer_1y1lk_3 ._button_1y1lk_87{position:absolute;top:var(--space-m);right:var(--space-m)}._drawer_1y1lk_3 ._footer_1y1lk_92{display:block;padding-top:var(--space-4xl)}@media (max-width: 600px){._drawer_1y1lk_3 ._footer_1y1lk_92{padding-top:var(--space-m)}}._drawer_1y1lk_3 ._footer-button_1y1lk_101{display:block;margin-left:auto}._drawer_1y1lk_3._left_1y1lk_105{top:0;left:-100%}._drawer_1y1lk_3._right_1y1lk_109{top:0;right:-100%}._drawer_1y1lk_3._full_1y1lk_113{top:0;right:0;bottom:0;left:0;width:100%;height:100%;max-height:100vh;border-radius:0;transform:scale(.95);opacity:0;transition:transform .3s ease-in-out,opacity .3s ease-in-out}._drawer_1y1lk_3._bottom_1y1lk_123{right:50%;bottom:-100%;left:50%;height:-webkit-max-content;height:-moz-max-content;height:max-content;max-height:calc(100% - var(--space-xs));border-top-left-radius:var(--control-radius);border-top-right-radius:var(--control-radius);transform:translate(-50%)}._drawer_1y1lk_3._bottom_1y1lk_123._full-bottom-height_1y1lk_133{height:calc(100% - var(--space-xs))}._drawer_1y1lk_3._bottom_1y1lk_123._is-loading_1y1lk_41{height:50vh}._drawer_1y1lk_3._opened_1y1lk_139{transition:all .3s ease;pointer-events:auto}._drawer_1y1lk_3._opened_1y1lk_139._left_1y1lk_105{left:0%;transition:left .3s ease}._drawer_1y1lk_3._opened_1y1lk_139._right_1y1lk_109{right:0%;transition:right .3s ease}._drawer_1y1lk_3._opened_1y1lk_139._bottom_1y1lk_123{bottom:0%}._drawer_1y1lk_3._opened_1y1lk_139._full_1y1lk_113{transform:scale(1);opacity:1}._drawer_1y1lk_3._is-closing_1y1lk_158._left_1y1lk_105{left:-100%}._drawer_1y1lk_3._is-closing_1y1lk_158._right_1y1lk_109{right:-100%}._drawer_1y1lk_3._is-closing_1y1lk_158._bottom_1y1lk_123{bottom:-100%}._drawer_1y1lk_3._is-closing_1y1lk_158._full_1y1lk_113{transform:scale(.95);opacity:0}@media (max-width: 1440px){._drawer_1y1lk_3{--drawer-width: 608px}}@media (max-width: 1280px){._drawer_1y1lk_3{--drawer-width: 648px}}@media (max-width: 768px){._drawer_1y1lk_3{--drawer-width: 584px}}@media (max-width: 600px){._drawer_1y1lk_3{--drawer-width: 100%}._drawer_1y1lk_3._bottom_1y1lk_123{--drawer-width: calc(100% - var(--space-xs))}}._overlay_1y1lk_195{--overlay-z-index: 9990;position:fixed;top:0;left:0;z-index:9990;z-index:var(--overlay-z-index);width:100%;height:100%;background-color:#0009;opacity:0;transition:all .3s ease}._overlay_1y1lk_195._opened_1y1lk_139{opacity:1;transition:all .3s ease}._overlay_1y1lk_195._is-closing_1y1lk_158{opacity:0;transition:all .3s ease}
|
package/dist/assets/TextArea.css
CHANGED
@@ -1 +1 @@
|
|
1
|
-
._textarea-
|
1
|
+
._textarea-wrapper_191db_2 ._textarea_191db_2{min-height:var(--textarea-height);padding-top:var(--textarea-space)!important;padding-bottom:var(--textarea-space);resize:none}._textarea-wrapper_191db_2 ._textarea_191db_2._has-label_191db_8{padding-top:var(--textarea-top-space)!important}._textarea-wrapper_191db_2 ._label_191db_11{position:absolute;top:calc(var(--input-height) / 2 - var(--input-font-size) / 2);left:var(--space-m);z-index:1;display:block;color:var(--label-color);font-size:var(--input-font-size);white-space:nowrap;transform-origin:left center;transition:transform .15s ease-out,left .15s ease-out,color .15s ease-out;-webkit-appearance:none;-moz-appearance:none;appearance:none;pointer-events:none}._textarea-wrapper_191db_2 ._label_191db_11._has-left-slot_191db_25{left:calc(var(--space-m) + var(--icon-size) + var(--clear-button-mg))}._textarea-wrapper_191db_2 ._label_191db_11._active-label_191db_28{transform:scale(var(--label-scaled)) translateY(calc(var(--textarea-transform-label) * -1))}._textarea-wrapper_191db_2 ._label_191db_11._active-label_191db_28._has-left-slot_191db_25{left:calc(var(--space-m) + var(--icon-size) + var(--space-s));transform:scale(var(--label-scaled)) translate(calc((var(--space-m) + var(--left-addon-position)) * 2 * -1),calc(var(--textarea-transform-label) * -1))}._s_191db_36{--textarea-space: var(--space-2s);--textarea-top-space: var(--space-l);--textarea-transform-label: var(--space-xss);--textarea-height: 76px;--textarea-padding: var(--space-xs) var(--space-s)}._m_191db_44{--textarea-space: var(--space-2s);--textarea-top-space: var(--space-l);--textarea-transform-label: var(--space-s);--textarea-height: 88px;--textarea-padding: var(--space-xs) var(--space-s)}._l_191db_11{--textarea-space: var(--space-2m);--textarea-top-space: 25px;--textarea-transform-label: var(--space-m);--textarea-height: 120px;--textarea-padding: var(--space-2m)}
|
@@ -183,4 +183,56 @@ export declare const Button: import('react').ForwardRefExoticComponent<(Omit<imp
|
|
183
183
|
* Идентификатор формы, к которой привязана кнопка.
|
184
184
|
*/
|
185
185
|
formId?: string;
|
186
|
+
}, "ref"> | Omit<import('./types').TButtonBorderlessFormProps & {
|
187
|
+
isIconButton: true;
|
188
|
+
iconName: TIcon;
|
189
|
+
leftIcon?: never;
|
190
|
+
rightIcon?: never;
|
191
|
+
} & import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & {
|
192
|
+
/**
|
193
|
+
* Класс, применяемый к корневому элементу кнопки.
|
194
|
+
*/
|
195
|
+
className?: string;
|
196
|
+
/**
|
197
|
+
* Флаг, указывающий, отключена ли кнопка.
|
198
|
+
*/
|
199
|
+
disabled?: boolean;
|
200
|
+
/**
|
201
|
+
* Флаг, указывающий, что кнопка занимает все доступное пространство.
|
202
|
+
*/
|
203
|
+
full?: boolean;
|
204
|
+
/**
|
205
|
+
* Флаг, отключащий абсолютно все модификации кнопки (variant, size).
|
206
|
+
*/
|
207
|
+
clear?: boolean;
|
208
|
+
/**
|
209
|
+
* Идентификатор формы, к которой привязана кнопка.
|
210
|
+
*/
|
211
|
+
formId?: string;
|
212
|
+
}, "ref"> | Omit<import('./types').TButtonBorderlessFormProps & {
|
213
|
+
isIconButton?: false;
|
214
|
+
iconName?: never;
|
215
|
+
leftIcon?: import('react').ReactNode;
|
216
|
+
rightIcon?: import('react').ReactNode;
|
217
|
+
} & import('react').ClassAttributes<HTMLButtonElement> & import('react').ButtonHTMLAttributes<HTMLButtonElement> & {
|
218
|
+
/**
|
219
|
+
* Класс, применяемый к корневому элементу кнопки.
|
220
|
+
*/
|
221
|
+
className?: string;
|
222
|
+
/**
|
223
|
+
* Флаг, указывающий, отключена ли кнопка.
|
224
|
+
*/
|
225
|
+
disabled?: boolean;
|
226
|
+
/**
|
227
|
+
* Флаг, указывающий, что кнопка занимает все доступное пространство.
|
228
|
+
*/
|
229
|
+
full?: boolean;
|
230
|
+
/**
|
231
|
+
* Флаг, отключащий абсолютно все модификации кнопки (variant, size).
|
232
|
+
*/
|
233
|
+
clear?: boolean;
|
234
|
+
/**
|
235
|
+
* Идентификатор формы, к которой привязана кнопка.
|
236
|
+
*/
|
237
|
+
formId?: string;
|
186
238
|
}, "ref">) & import('react').RefAttributes<HTMLButtonElement>>;
|
@@ -3,40 +3,45 @@ import { c as classNames } from "../../index-CweZ_OcN.js";
|
|
3
3
|
import { forwardRef } from "react";
|
4
4
|
import { EButtonVariantDefault, EButtonForm } from "./constants.js";
|
5
5
|
import { Icon } from "../../icons/Icon.js";
|
6
|
-
import '../../assets/Button.css';const button = "
|
7
|
-
const clear = "
|
8
|
-
const black = "
|
9
|
-
const gray = "
|
10
|
-
const white = "
|
11
|
-
const xs = "
|
12
|
-
const s = "
|
13
|
-
const m = "
|
14
|
-
const l = "
|
15
|
-
const xl = "
|
16
|
-
const xxl = "
|
17
|
-
const full = "
|
18
|
-
const disabled = "
|
6
|
+
import '../../assets/Button.css';const button = "_button_1qrs0_2";
|
7
|
+
const clear = "_clear_1qrs0_42";
|
8
|
+
const black = "_black_1qrs0_120";
|
9
|
+
const gray = "_gray_1qrs0_129";
|
10
|
+
const white = "_white_1qrs0_138";
|
11
|
+
const xs = "_xs_1qrs0_236";
|
12
|
+
const s = "_s_1qrs0_72";
|
13
|
+
const m = "_m_1qrs0_244";
|
14
|
+
const l = "_l_1qrs0_268";
|
15
|
+
const xl = "_xl_1qrs0_276";
|
16
|
+
const xxl = "_xxl_1qrs0_285";
|
17
|
+
const full = "_full_1qrs0_294";
|
18
|
+
const disabled = "_disabled_1qrs0_300";
|
19
19
|
const cls = {
|
20
20
|
button,
|
21
21
|
clear,
|
22
|
-
"default-button": "_default-
|
23
|
-
"primary-sapphire": "_primary-
|
24
|
-
"primary-citrine": "_primary-
|
25
|
-
"secondary-asphalt": "_secondary-
|
26
|
-
"secondary-gray": "_secondary-
|
27
|
-
"secondary-white": "_secondary-
|
28
|
-
"secondary-red": "_secondary-
|
29
|
-
"round-button": "_round-
|
22
|
+
"default-button": "_default-button_1qrs0_54",
|
23
|
+
"primary-sapphire": "_primary-sapphire_1qrs0_54",
|
24
|
+
"primary-citrine": "_primary-citrine_1qrs0_63",
|
25
|
+
"secondary-asphalt": "_secondary-asphalt_1qrs0_72",
|
26
|
+
"secondary-gray": "_secondary-gray_1qrs0_81",
|
27
|
+
"secondary-white": "_secondary-white_1qrs0_90",
|
28
|
+
"secondary-red": "_secondary-red_1qrs0_99",
|
29
|
+
"round-button": "_round-button_1qrs0_109",
|
30
30
|
black,
|
31
31
|
gray,
|
32
32
|
white,
|
33
|
-
"outline-button": "_outline-
|
34
|
-
"outline-asphalt": "_outline-
|
35
|
-
"outline-gray": "_outline-
|
36
|
-
"outline-white": "_outline-
|
37
|
-
"outline-red": "_outline-
|
33
|
+
"outline-button": "_outline-button_1qrs0_148",
|
34
|
+
"outline-asphalt": "_outline-asphalt_1qrs0_155",
|
35
|
+
"outline-gray": "_outline-gray_1qrs0_163",
|
36
|
+
"outline-white": "_outline-white_1qrs0_172",
|
37
|
+
"outline-red": "_outline-red_1qrs0_181",
|
38
|
+
"borderless-button": "_borderless-button_1qrs0_191",
|
39
|
+
"borderless-asphalt": "_borderless-asphalt_1qrs0_197",
|
40
|
+
"borderless-gray": "_borderless-gray_1qrs0_202",
|
41
|
+
"borderless-white": "_borderless-white_1qrs0_207",
|
42
|
+
"borderless-red": "_borderless-red_1qrs0_212",
|
38
43
|
xs,
|
39
|
-
"m-s": "_m-
|
44
|
+
"m-s": "_m-s_1qrs0_244",
|
40
45
|
s,
|
41
46
|
m,
|
42
47
|
l,
|
@@ -44,7 +49,7 @@ const cls = {
|
|
44
49
|
xxl,
|
45
50
|
full,
|
46
51
|
disabled,
|
47
|
-
"icon-button": "_icon-
|
52
|
+
"icon-button": "_icon-button_1qrs0_320"
|
48
53
|
};
|
49
54
|
const Button = forwardRef(
|
50
55
|
(props, ref) => {
|
@@ -17,6 +17,12 @@ export declare enum EButtonVariantOutline {
|
|
17
17
|
White = "outline-white",
|
18
18
|
Red = "outline-red"
|
19
19
|
}
|
20
|
+
export declare enum EButtonVariantBorderless {
|
21
|
+
Asphalt = "borderless-asphalt",
|
22
|
+
Gray = "borderless-gray",
|
23
|
+
White = "borderless-white",
|
24
|
+
Red = "borderless-red"
|
25
|
+
}
|
20
26
|
export declare enum EButtonSize {
|
21
27
|
XS = "xs",
|
22
28
|
S = "s",
|
@@ -29,5 +35,6 @@ export declare enum EButtonSize {
|
|
29
35
|
export declare enum EButtonForm {
|
30
36
|
DefaultButton = "default-button",
|
31
37
|
RoundButton = "round-button",
|
32
|
-
OutlineButton = "outline-button"
|
38
|
+
OutlineButton = "outline-button",
|
39
|
+
BorderlessButton = "borderless-button"
|
33
40
|
}
|
@@ -20,6 +20,13 @@ var EButtonVariantOutline = /* @__PURE__ */ ((EButtonVariantOutline2) => {
|
|
20
20
|
EButtonVariantOutline2["Red"] = "outline-red";
|
21
21
|
return EButtonVariantOutline2;
|
22
22
|
})(EButtonVariantOutline || {});
|
23
|
+
var EButtonVariantBorderless = /* @__PURE__ */ ((EButtonVariantBorderless2) => {
|
24
|
+
EButtonVariantBorderless2["Asphalt"] = "borderless-asphalt";
|
25
|
+
EButtonVariantBorderless2["Gray"] = "borderless-gray";
|
26
|
+
EButtonVariantBorderless2["White"] = "borderless-white";
|
27
|
+
EButtonVariantBorderless2["Red"] = "borderless-red";
|
28
|
+
return EButtonVariantBorderless2;
|
29
|
+
})(EButtonVariantBorderless || {});
|
23
30
|
var EButtonSize = /* @__PURE__ */ ((EButtonSize2) => {
|
24
31
|
EButtonSize2["XS"] = "xs";
|
25
32
|
EButtonSize2["S"] = "s";
|
@@ -34,11 +41,13 @@ var EButtonForm = /* @__PURE__ */ ((EButtonForm2) => {
|
|
34
41
|
EButtonForm2["DefaultButton"] = "default-button";
|
35
42
|
EButtonForm2["RoundButton"] = "round-button";
|
36
43
|
EButtonForm2["OutlineButton"] = "outline-button";
|
44
|
+
EButtonForm2["BorderlessButton"] = "borderless-button";
|
37
45
|
return EButtonForm2;
|
38
46
|
})(EButtonForm || {});
|
39
47
|
export {
|
40
48
|
EButtonForm,
|
41
49
|
EButtonSize,
|
50
|
+
EButtonVariantBorderless,
|
42
51
|
EButtonVariantDefault,
|
43
52
|
EButtonVariantOutline,
|
44
53
|
EButtonVariantRound
|
@@ -1,2 +1,2 @@
|
|
1
1
|
export { Button, type TProps as TButtonProps } from './Button';
|
2
|
-
export { EButtonForm, EButtonSize, EButtonVariantDefault, EButtonVariantRound, EButtonVariantOutline } from './constants';
|
2
|
+
export { EButtonForm, EButtonSize, EButtonVariantDefault, EButtonVariantRound, EButtonVariantOutline, EButtonVariantBorderless } from './constants';
|
@@ -1,9 +1,10 @@
|
|
1
1
|
import { Button } from "./Button.js";
|
2
|
-
import { EButtonForm, EButtonSize, EButtonVariantDefault, EButtonVariantOutline, EButtonVariantRound } from "./constants.js";
|
2
|
+
import { EButtonForm, EButtonSize, EButtonVariantBorderless, EButtonVariantDefault, EButtonVariantOutline, EButtonVariantRound } from "./constants.js";
|
3
3
|
export {
|
4
4
|
Button,
|
5
5
|
EButtonForm,
|
6
6
|
EButtonSize,
|
7
|
+
EButtonVariantBorderless,
|
7
8
|
EButtonVariantDefault,
|
8
9
|
EButtonVariantOutline,
|
9
10
|
EButtonVariantRound
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import { ReactNode } from 'react';
|
2
|
-
import { EButtonSize, EButtonVariantDefault, EButtonVariantRound, EButtonForm, EButtonVariantOutline } from './constants';
|
2
|
+
import { EButtonSize, EButtonVariantDefault, EButtonVariantRound, EButtonForm, EButtonVariantOutline, EButtonVariantBorderless } from './constants';
|
3
3
|
import { TIcon } from '../../icons';
|
4
4
|
|
5
5
|
type TButtonRoundFormSize = Exclude<EButtonSize, 'xxl'> & Exclude<EButtonSize, 'xl'>;
|
@@ -18,6 +18,11 @@ export type TButtonOutlineFormProps = {
|
|
18
18
|
variant?: EButtonVariantOutline | `${EButtonVariantOutline}`;
|
19
19
|
size?: EButtonSize | `${EButtonSize}`;
|
20
20
|
};
|
21
|
+
export type TButtonBorderlessFormProps = {
|
22
|
+
form?: EButtonForm.BorderlessButton;
|
23
|
+
variant?: EButtonVariantBorderless | `${EButtonVariantBorderless}`;
|
24
|
+
size?: EButtonSize | `${EButtonSize}`;
|
25
|
+
};
|
21
26
|
export type TButtonIsIconProps = {
|
22
27
|
isIconButton: true;
|
23
28
|
iconName: TIcon;
|
@@ -29,5 +34,5 @@ export type TButtonIsIconProps = {
|
|
29
34
|
leftIcon?: ReactNode;
|
30
35
|
rightIcon?: ReactNode;
|
31
36
|
};
|
32
|
-
export type TCommonButtonProps = (TButtonDefaultFormProps | TButtonRoundFormProps | TButtonOutlineFormProps) & TButtonIsIconProps;
|
37
|
+
export type TCommonButtonProps = (TButtonDefaultFormProps | TButtonRoundFormProps | TButtonOutlineFormProps | TButtonBorderlessFormProps) & TButtonIsIconProps;
|
33
38
|
export {};
|
@@ -14,12 +14,6 @@ export type DatePicker = {
|
|
14
14
|
* значение из стейта (data)
|
15
15
|
*/
|
16
16
|
value?: string;
|
17
|
-
/**
|
18
|
-
* значение типа модально окна календаря
|
19
|
-
*/
|
20
|
-
type?: 'days' | 'months' | 'years';
|
21
|
-
disabled?: boolean;
|
22
|
-
error?: boolean;
|
23
17
|
} & TInputProps;
|
24
18
|
export type TDatePickerValue = {
|
25
19
|
value?: Date;
|
@@ -39,10 +33,4 @@ export declare const DatePicker: import('react').MemoExoticComponent<import('rea
|
|
39
33
|
* значение из стейта (data)
|
40
34
|
*/
|
41
35
|
value?: string;
|
42
|
-
/**
|
43
|
-
* значение типа модально окна календаря
|
44
|
-
*/
|
45
|
-
type?: "days" | "months" | "years";
|
46
|
-
disabled?: boolean;
|
47
|
-
error?: boolean;
|
48
36
|
} & import('../Input/types').TInputProps & import('../Input').TAdditionalProps & import('react').RefAttributes<HTMLInputElement>>>;
|