mayak-common-library 0.0.1
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/.eslintrc.json +3 -0
- package/.idea/inspectionProfiles/Project_Default.xml +6 -0
- package/.idea/modules.xml +8 -0
- package/.idea/next-common-library-2.0.iml +12 -0
- package/.idea/vcs.xml +6 -0
- package/README.md +36 -0
- package/dist/close-4XJDSDVO.svg +4 -0
- package/dist/dropdown-arrow-CDZAF5GJ.svg +3 -0
- package/dist/index.css +35 -0
- package/dist/index.d.mts +112 -0
- package/dist/index.d.ts +112 -0
- package/dist/index.js +661 -0
- package/dist/index.mjs +616 -0
- package/dist/search-HJGCO2DZ.svg +3 -0
- package/package.json +53 -0
- package/tailwind.config.js +34 -0
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,616 @@
|
|
|
1
|
+
// src/components/Greet.tsx
|
|
2
|
+
function Greet(props) {
|
|
3
|
+
const { name } = props;
|
|
4
|
+
return /* @__PURE__ */ React.createElement("div", null, "Hello ", name);
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
// src/components/Button/Button.tsx
|
|
8
|
+
import ButtonMUI from "@mui/material/Button";
|
|
9
|
+
import { styled } from "@mui/material";
|
|
10
|
+
import Typography from "@mui/material/Typography";
|
|
11
|
+
var StyledButton = styled(ButtonMUI)(() => ({
|
|
12
|
+
textTransform: "none",
|
|
13
|
+
width: "fit-content",
|
|
14
|
+
color: "#343434",
|
|
15
|
+
"&:hover": {
|
|
16
|
+
backgroundColor: "unset",
|
|
17
|
+
svg: {
|
|
18
|
+
filter: "brightness(0) saturate(100%) invert(95%) sepia(10%) saturate(806%) hue-rotate(339deg) brightness(83%) contrast(85%)"
|
|
19
|
+
}
|
|
20
|
+
},
|
|
21
|
+
transition: "transform 0.1s ease-in-out",
|
|
22
|
+
"&:active": {
|
|
23
|
+
// p: {
|
|
24
|
+
// transform: "scale(0.99)",
|
|
25
|
+
// },
|
|
26
|
+
}
|
|
27
|
+
}));
|
|
28
|
+
var Button = (props) => {
|
|
29
|
+
const { children, base, bolt, border, small, large, ...rest } = props;
|
|
30
|
+
return /* @__PURE__ */ React.createElement(
|
|
31
|
+
StyledButton,
|
|
32
|
+
{
|
|
33
|
+
...rest,
|
|
34
|
+
disableRipple: true,
|
|
35
|
+
className: `${base ? "bg-accent-dark rounded-none text-white hover:bg-accent-beige text-base" : ""}
|
|
36
|
+
${small ? "py-1.5 px-4" : ""}
|
|
37
|
+
${large ? "py-5 px-10" : ""}
|
|
38
|
+
${border ? "border-b border-solid rounded-none" : ""}`
|
|
39
|
+
},
|
|
40
|
+
/* @__PURE__ */ React.createElement(
|
|
41
|
+
Typography,
|
|
42
|
+
{
|
|
43
|
+
className: `${bolt ? "font-extrabold leading-4" : "font-normal leading-3"}`
|
|
44
|
+
},
|
|
45
|
+
children
|
|
46
|
+
)
|
|
47
|
+
);
|
|
48
|
+
};
|
|
49
|
+
var Button_default = Button;
|
|
50
|
+
|
|
51
|
+
// src/components/Button/IconButton.tsx
|
|
52
|
+
import { IconButton as IconButtonMUI, styled as styled2 } from "@mui/material";
|
|
53
|
+
var StyledButton2 = styled2(IconButtonMUI)(() => ({
|
|
54
|
+
width: "fit-content",
|
|
55
|
+
borderRadius: 0,
|
|
56
|
+
svg: {
|
|
57
|
+
margin: "1px 0 0 0px"
|
|
58
|
+
},
|
|
59
|
+
"&:hover": {
|
|
60
|
+
svg: {
|
|
61
|
+
filter: "brightness(0) saturate(100%) invert(95%) sepia(10%) saturate(806%) hue-rotate(339deg) brightness(83%) contrast(85%)"
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
}));
|
|
65
|
+
var IconButton = (props) => {
|
|
66
|
+
const { children, ...rest } = props;
|
|
67
|
+
return /* @__PURE__ */ React.createElement(StyledButton2, { ...rest, disableRipple: true }, children);
|
|
68
|
+
};
|
|
69
|
+
var IconButton_default = IconButton;
|
|
70
|
+
|
|
71
|
+
// src/components/Select/Select.tsx
|
|
72
|
+
import { useRef, useState, useEffect } from "react";
|
|
73
|
+
import { Select, styled as styled3 } from "@mui/material";
|
|
74
|
+
|
|
75
|
+
// src/assets/dropdown-arrow.svg
|
|
76
|
+
var dropdown_arrow_default = "./dropdown-arrow-CDZAF5GJ.svg";
|
|
77
|
+
|
|
78
|
+
// src/components/Select/Select.tsx
|
|
79
|
+
var StyledSelect = styled3(Select)(({ open }) => ({
|
|
80
|
+
minWidth: 250,
|
|
81
|
+
"&.MuiInputBase-root": {
|
|
82
|
+
borderRadius: "0",
|
|
83
|
+
transition: "0.3s ease-in-out",
|
|
84
|
+
"&.Mui-focused": {
|
|
85
|
+
backgroundColor: open ? "white" : "transparent"
|
|
86
|
+
}
|
|
87
|
+
},
|
|
88
|
+
svg: {
|
|
89
|
+
// Added '&' to the beginning of the selector
|
|
90
|
+
position: "absolute",
|
|
91
|
+
right: "18px",
|
|
92
|
+
transform: `${open ? "rotate(180deg)" : "rotate(0deg)"}`
|
|
93
|
+
// Moved the transform style here and added a condition based on the 'open' prop
|
|
94
|
+
},
|
|
95
|
+
".MuiOutlinedInput-notchedOutline": {
|
|
96
|
+
// transition: '0.3s ease-in-out',
|
|
97
|
+
borderColor: "#343434 "
|
|
98
|
+
},
|
|
99
|
+
// '.MuiSvgIcon-root':{
|
|
100
|
+
// transition: '0.3s ease-in-out',
|
|
101
|
+
// },
|
|
102
|
+
":hover": {
|
|
103
|
+
".MuiOutlinedInput-notchedOutline": {
|
|
104
|
+
borderColor: "#343434"
|
|
105
|
+
}
|
|
106
|
+
},
|
|
107
|
+
"&.Mui-focused fieldset": {
|
|
108
|
+
"&.MuiOutlinedInput-notchedOutline": {
|
|
109
|
+
// borderColor: 'accent-dark',
|
|
110
|
+
border: "none"
|
|
111
|
+
// all: 'unset'
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
}));
|
|
115
|
+
var CustomSelect = (props) => {
|
|
116
|
+
const { children, placeholder, ...rest } = props;
|
|
117
|
+
const myRef = useRef(null);
|
|
118
|
+
const [open, setOpen] = useState(false);
|
|
119
|
+
const uniqueId = "select_" + Math.random().toFixed(5).slice(2);
|
|
120
|
+
const handleOpen = () => {
|
|
121
|
+
setOpen(true);
|
|
122
|
+
};
|
|
123
|
+
const handleClose = () => {
|
|
124
|
+
setOpen(false);
|
|
125
|
+
};
|
|
126
|
+
useEffect(() => {
|
|
127
|
+
if (!open) myRef.current?.classList.remove("Mui-focused");
|
|
128
|
+
}, [open]);
|
|
129
|
+
return /* @__PURE__ */ React.createElement(
|
|
130
|
+
StyledSelect,
|
|
131
|
+
{
|
|
132
|
+
...rest,
|
|
133
|
+
ref: myRef,
|
|
134
|
+
open,
|
|
135
|
+
onOpen: handleOpen,
|
|
136
|
+
onClose: handleClose,
|
|
137
|
+
sx: {
|
|
138
|
+
"& .MuiSelect-select .notranslate::after": placeholder ? {
|
|
139
|
+
content: `"${placeholder}"`
|
|
140
|
+
// opacity: 0.42,
|
|
141
|
+
} : {}
|
|
142
|
+
},
|
|
143
|
+
inputProps: { "aria-labelledby": uniqueId },
|
|
144
|
+
className: `h-12 `,
|
|
145
|
+
MenuProps: {
|
|
146
|
+
disableScrollLock: true,
|
|
147
|
+
// ref: menuRef,
|
|
148
|
+
id: uniqueId,
|
|
149
|
+
PaperProps: {
|
|
150
|
+
classes: {
|
|
151
|
+
root: `menu ${open ? "menu--open" : "menu--close"}`
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
},
|
|
155
|
+
IconComponent: () => /* @__PURE__ */ React.createElement(dropdown_arrow_default, null)
|
|
156
|
+
},
|
|
157
|
+
children
|
|
158
|
+
);
|
|
159
|
+
};
|
|
160
|
+
var Select_default = CustomSelect;
|
|
161
|
+
|
|
162
|
+
// src/assets/search.svg
|
|
163
|
+
var search_default = "./search-HJGCO2DZ.svg";
|
|
164
|
+
|
|
165
|
+
// src/components/Select/SelectPro.tsx
|
|
166
|
+
import {
|
|
167
|
+
useState as useState2,
|
|
168
|
+
isValidElement,
|
|
169
|
+
cloneElement
|
|
170
|
+
} from "react";
|
|
171
|
+
import {
|
|
172
|
+
Box,
|
|
173
|
+
ClickAwayListener,
|
|
174
|
+
Paper,
|
|
175
|
+
Typography as Typography2,
|
|
176
|
+
Button as Button2
|
|
177
|
+
} from "@mui/material";
|
|
178
|
+
|
|
179
|
+
// src/assets/close.svg
|
|
180
|
+
var close_default = "./close-4XJDSDVO.svg";
|
|
181
|
+
|
|
182
|
+
// src/components/Select/SelectPro.tsx
|
|
183
|
+
var SelectPro = ({
|
|
184
|
+
children,
|
|
185
|
+
placeholder,
|
|
186
|
+
childTitle,
|
|
187
|
+
colorBorder = false,
|
|
188
|
+
clickComponent,
|
|
189
|
+
fullContainerWidth = false,
|
|
190
|
+
overButton = false,
|
|
191
|
+
small = false
|
|
192
|
+
}) => {
|
|
193
|
+
const [btn, setAnchorEl] = useState2(null);
|
|
194
|
+
const [open, setOpen] = useState2(false);
|
|
195
|
+
const handleClick = (event) => {
|
|
196
|
+
if (open)
|
|
197
|
+
setTimeout(() => {
|
|
198
|
+
setAnchorEl(null);
|
|
199
|
+
}, 200);
|
|
200
|
+
else setAnchorEl(event.currentTarget);
|
|
201
|
+
setOpen(!open);
|
|
202
|
+
};
|
|
203
|
+
const handleClose = () => {
|
|
204
|
+
setOpen(false);
|
|
205
|
+
setTimeout(() => {
|
|
206
|
+
setAnchorEl(null);
|
|
207
|
+
}, 200);
|
|
208
|
+
};
|
|
209
|
+
const childrenWithHandleChange = isValidElement(children) ? cloneElement(children, {
|
|
210
|
+
collapseParent: handleClose
|
|
211
|
+
}) : children;
|
|
212
|
+
return /* @__PURE__ */ React.createElement(ClickAwayListener, { onClickAway: handleClose }, /* @__PURE__ */ React.createElement(Box, null, clickComponent ? cloneElement(clickComponent, {
|
|
213
|
+
ref: btn,
|
|
214
|
+
onClick: handleClick
|
|
215
|
+
}) : /* @__PURE__ */ React.createElement(
|
|
216
|
+
Button2,
|
|
217
|
+
{
|
|
218
|
+
ref: btn,
|
|
219
|
+
"aria-controls": open ? "basic-menu" : void 0,
|
|
220
|
+
"aria-haspopup": "true",
|
|
221
|
+
"aria-expanded": open ? "true" : void 0,
|
|
222
|
+
onClick: handleClick,
|
|
223
|
+
disableRipple: true,
|
|
224
|
+
fullWidth: true,
|
|
225
|
+
sx: {
|
|
226
|
+
height: small ? "34px" : "49px",
|
|
227
|
+
padding: small ? "0 10px 0 6px" : "0 20px 0 19px"
|
|
228
|
+
},
|
|
229
|
+
className: `border rounded-none border-solid normal-case text-accent-dark hover:bg-white ${open ? "!border-transparent bg-white" : ""} ${colorBorder ? "border-accent-beige flex-row-reverse justify-end gap-x-2" : "justify-between border-accent-dark"}`
|
|
230
|
+
},
|
|
231
|
+
/* @__PURE__ */ React.createElement(
|
|
232
|
+
Typography2,
|
|
233
|
+
{
|
|
234
|
+
className: "text-sm leading-4"
|
|
235
|
+
},
|
|
236
|
+
`${placeholder}`
|
|
237
|
+
),
|
|
238
|
+
colorBorder ? /* @__PURE__ */ React.createElement(search_default, null) : /* @__PURE__ */ React.createElement(
|
|
239
|
+
dropdown_arrow_default,
|
|
240
|
+
{
|
|
241
|
+
style: {
|
|
242
|
+
transform: open ? "scaleY(-1)" : "scaleY(1)",
|
|
243
|
+
transition: "0.3s ease-in-out"
|
|
244
|
+
}
|
|
245
|
+
}
|
|
246
|
+
)
|
|
247
|
+
), btn ? /* @__PURE__ */ React.createElement(
|
|
248
|
+
Paper,
|
|
249
|
+
{
|
|
250
|
+
sx: {
|
|
251
|
+
position: "absolute",
|
|
252
|
+
width: !fullContainerWidth && btn ? btn.offsetWidth : "100%",
|
|
253
|
+
left: fullContainerWidth ? 0 : "initial",
|
|
254
|
+
right: fullContainerWidth ? 0 : "initial",
|
|
255
|
+
top: overButton ? 0 : "initial"
|
|
256
|
+
},
|
|
257
|
+
className: `menu ${open ? "menu--open" : "menu--close"} z-50 rounded-none shadow-sm`
|
|
258
|
+
},
|
|
259
|
+
/* @__PURE__ */ React.createElement(Box, { className: `flex flex-col p-3 gap-3` }, overButton ? /* @__PURE__ */ React.createElement(
|
|
260
|
+
IconButton_default,
|
|
261
|
+
{
|
|
262
|
+
className: "bg-accent-silver p-1 self-end absolute",
|
|
263
|
+
onClick: handleClose
|
|
264
|
+
},
|
|
265
|
+
/* @__PURE__ */ React.createElement(close_default, null)
|
|
266
|
+
) : null, childTitle ? /* @__PURE__ */ React.createElement(
|
|
267
|
+
Typography2,
|
|
268
|
+
{
|
|
269
|
+
className: "text-sm font-normal text-accent-silver-2"
|
|
270
|
+
},
|
|
271
|
+
childTitle
|
|
272
|
+
) : null, childrenWithHandleChange)
|
|
273
|
+
) : null));
|
|
274
|
+
};
|
|
275
|
+
var SelectPro_default = SelectPro;
|
|
276
|
+
|
|
277
|
+
// src/components/Chip/Chip.tsx
|
|
278
|
+
import { Chip, styled as styled4 } from "@mui/material";
|
|
279
|
+
var StyledChip = styled4(Chip)(({ theme: theme2 }) => ({
|
|
280
|
+
borderRadius: theme2.shape.borderRadius
|
|
281
|
+
}));
|
|
282
|
+
var ChipViews = {
|
|
283
|
+
black: "bg-accent-dark text-accent-white py-1.5 px-4",
|
|
284
|
+
line: "border border-solid border-accent-dark bg-accent-white",
|
|
285
|
+
white: "bg-accent-white text-accent-dark",
|
|
286
|
+
silver: "bg-accent-silver"
|
|
287
|
+
};
|
|
288
|
+
var CustomChip = (props) => {
|
|
289
|
+
const { view, ...rest } = props;
|
|
290
|
+
return /* @__PURE__ */ React.createElement(
|
|
291
|
+
StyledChip,
|
|
292
|
+
{
|
|
293
|
+
className: `rounded-none w-fit h-fit px-2.5 py-0 ${ChipViews[view]}`,
|
|
294
|
+
...rest
|
|
295
|
+
}
|
|
296
|
+
);
|
|
297
|
+
};
|
|
298
|
+
var Chip_default = CustomChip;
|
|
299
|
+
|
|
300
|
+
// src/components/Badge/Badge.tsx
|
|
301
|
+
import { Badge } from "@mui/material";
|
|
302
|
+
var CustomBadge = (props) => {
|
|
303
|
+
return /* @__PURE__ */ React.createElement(Badge, { ...props });
|
|
304
|
+
};
|
|
305
|
+
var Badge_default = CustomBadge;
|
|
306
|
+
|
|
307
|
+
// src/components/Avatar/Avatar.tsx
|
|
308
|
+
import Avatar from "@mui/material/Avatar";
|
|
309
|
+
var CustomAvatar = (props) => {
|
|
310
|
+
return /* @__PURE__ */ React.createElement(Avatar, { ...props });
|
|
311
|
+
};
|
|
312
|
+
var Avatar_default = CustomAvatar;
|
|
313
|
+
|
|
314
|
+
// src/components/Text/Text.tsx
|
|
315
|
+
import Typography3 from "@mui/material/Typography";
|
|
316
|
+
var Text = (props) => {
|
|
317
|
+
const { children, ...rest } = props;
|
|
318
|
+
return /* @__PURE__ */ React.createElement(Typography3, { ...rest }, children);
|
|
319
|
+
};
|
|
320
|
+
var Text_default = Text;
|
|
321
|
+
|
|
322
|
+
// src/components/Radio/Radio.tsx
|
|
323
|
+
import React2 from "react";
|
|
324
|
+
import Radio from "@mui/material/Radio";
|
|
325
|
+
import FormControlLabel from "@mui/material/FormControlLabel";
|
|
326
|
+
var CustomRadio = (props) => {
|
|
327
|
+
const { value, label, radioProps, labelProps } = props;
|
|
328
|
+
if (label && value)
|
|
329
|
+
return /* @__PURE__ */ React2.createElement(
|
|
330
|
+
FormControlLabel,
|
|
331
|
+
{
|
|
332
|
+
value,
|
|
333
|
+
control: /* @__PURE__ */ React2.createElement(Radio, { ...radioProps }),
|
|
334
|
+
label,
|
|
335
|
+
...labelProps
|
|
336
|
+
}
|
|
337
|
+
);
|
|
338
|
+
return /* @__PURE__ */ React2.createElement(Radio, { ...radioProps });
|
|
339
|
+
};
|
|
340
|
+
var Radio_default = CustomRadio;
|
|
341
|
+
|
|
342
|
+
// src/components/RadioGroup/RadioGroup.tsx
|
|
343
|
+
import React3 from "react";
|
|
344
|
+
import RadioGroup from "@mui/material/RadioGroup";
|
|
345
|
+
var CustomRadioGroup = (props) => {
|
|
346
|
+
const { children, ...rest } = props;
|
|
347
|
+
return /* @__PURE__ */ React3.createElement(RadioGroup, { ...rest }, children);
|
|
348
|
+
};
|
|
349
|
+
var RadioGroup_default = CustomRadioGroup;
|
|
350
|
+
|
|
351
|
+
// src/components/Switch/Switch.tsx
|
|
352
|
+
import { Stack, styled as styled5, Switch as SwitchMUI } from "@mui/material";
|
|
353
|
+
import Typography4 from "@mui/material/Typography";
|
|
354
|
+
var Switch = styled5(SwitchMUI)(({ theme: theme2 }) => ({
|
|
355
|
+
width: 60,
|
|
356
|
+
height: 30,
|
|
357
|
+
padding: 0,
|
|
358
|
+
display: "flex",
|
|
359
|
+
"&:active": {
|
|
360
|
+
"& .MuiSwitch-thumb": {
|
|
361
|
+
width: 20
|
|
362
|
+
},
|
|
363
|
+
"& .MuiSwitch-switchBase.Mui-checked": {
|
|
364
|
+
transform: "translateX(12px)"
|
|
365
|
+
}
|
|
366
|
+
},
|
|
367
|
+
"& .MuiSwitch-switchBase": {
|
|
368
|
+
padding: 5.1,
|
|
369
|
+
color: "#C8BCA1",
|
|
370
|
+
transform: "translateX(2px)",
|
|
371
|
+
"&.Mui-checked": {
|
|
372
|
+
transform: "translateX(30px)",
|
|
373
|
+
color: "#C8BCA1",
|
|
374
|
+
"& + .MuiSwitch-track": {
|
|
375
|
+
opacity: 1,
|
|
376
|
+
backgroundColor: "#343434"
|
|
377
|
+
}
|
|
378
|
+
}
|
|
379
|
+
},
|
|
380
|
+
"& .MuiSwitch-thumb": {
|
|
381
|
+
width: 20,
|
|
382
|
+
height: 20,
|
|
383
|
+
borderRadius: "100%",
|
|
384
|
+
transition: theme2.transitions.create(["width"], {
|
|
385
|
+
duration: 200
|
|
386
|
+
})
|
|
387
|
+
},
|
|
388
|
+
"& .MuiSwitch-track": {
|
|
389
|
+
borderRadius: "22px",
|
|
390
|
+
opacity: 1,
|
|
391
|
+
backgroundColor: "#343434",
|
|
392
|
+
boxSizing: "border-box"
|
|
393
|
+
}
|
|
394
|
+
}));
|
|
395
|
+
var CustomSwitch = (props) => {
|
|
396
|
+
const { beforeText, afterText, ...rest } = props;
|
|
397
|
+
return /* @__PURE__ */ React.createElement(Stack, { direction: "row", spacing: 1, alignItems: "center" }, beforeText ? /* @__PURE__ */ React.createElement(Typography4, { className: "text-base" }, beforeText) : null, /* @__PURE__ */ React.createElement(Switch, { defaultChecked: true, ...rest, disableRipple: true }), afterText ? /* @__PURE__ */ React.createElement(Typography4, { className: "text-base" }, afterText) : null);
|
|
398
|
+
};
|
|
399
|
+
var Switch_default = CustomSwitch;
|
|
400
|
+
|
|
401
|
+
// src/components/Slider/Slider.tsx
|
|
402
|
+
import { Slider, styled as styled6 } from "@mui/material";
|
|
403
|
+
var StyledSlider = styled6(Slider)(() => ({}));
|
|
404
|
+
var CustomSlider = (props) => {
|
|
405
|
+
return /* @__PURE__ */ React.createElement(StyledSlider, { ...props });
|
|
406
|
+
};
|
|
407
|
+
var Slider_default = CustomSlider;
|
|
408
|
+
|
|
409
|
+
// src/components/MenuItem/MenuItem.tsx
|
|
410
|
+
import { MenuItem, styled as styled7 } from "@mui/material";
|
|
411
|
+
var StyledMenuItem = styled7(MenuItem)(() => ({
|
|
412
|
+
borderRadius: "5px",
|
|
413
|
+
"&.Mui-selected": {
|
|
414
|
+
backgroundColor: "unset",
|
|
415
|
+
color: "purple"
|
|
416
|
+
}
|
|
417
|
+
}));
|
|
418
|
+
var CustomMenuItem = (props) => {
|
|
419
|
+
const { children, ...rest } = props;
|
|
420
|
+
return /* @__PURE__ */ React.createElement(StyledMenuItem, { ...rest }, children);
|
|
421
|
+
};
|
|
422
|
+
var MenuItem_default = CustomMenuItem;
|
|
423
|
+
|
|
424
|
+
// src/components/Input/Input.tsx
|
|
425
|
+
import { InputAdornment, styled as styled8 } from "@mui/material";
|
|
426
|
+
import Input from "@mui/material/Input";
|
|
427
|
+
var StyledInput = styled8(Input)(() => ({
|
|
428
|
+
"& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button": {
|
|
429
|
+
display: "none"
|
|
430
|
+
},
|
|
431
|
+
"& input[type=number]": {
|
|
432
|
+
MozAppearance: "textfield"
|
|
433
|
+
}
|
|
434
|
+
}));
|
|
435
|
+
var CustomInput = (props) => {
|
|
436
|
+
const { type, adornmentText, value, ...rest } = props;
|
|
437
|
+
const handleKeyDown = (event) => {
|
|
438
|
+
if (!/[0-9]/.test(event.key) && event.key !== "Backspace") {
|
|
439
|
+
event.preventDefault();
|
|
440
|
+
event.stopPropagation();
|
|
441
|
+
}
|
|
442
|
+
};
|
|
443
|
+
return /* @__PURE__ */ React.createElement(
|
|
444
|
+
StyledInput,
|
|
445
|
+
{
|
|
446
|
+
disableUnderline: true,
|
|
447
|
+
onKeyDown: handleKeyDown,
|
|
448
|
+
startAdornment: adornmentText ? /* @__PURE__ */ React.createElement(InputAdornment, { position: "start", className: "text-sm" }, adornmentText) : void 0,
|
|
449
|
+
value,
|
|
450
|
+
componentsProps: {
|
|
451
|
+
root: {
|
|
452
|
+
className: "border border-black rounded-none border-solid py-1.5 px-2.5 h-8"
|
|
453
|
+
}
|
|
454
|
+
},
|
|
455
|
+
type: type || "string",
|
|
456
|
+
...rest
|
|
457
|
+
}
|
|
458
|
+
);
|
|
459
|
+
};
|
|
460
|
+
var Input_default = CustomInput;
|
|
461
|
+
|
|
462
|
+
// src/components/Input/PhoneInput.tsx
|
|
463
|
+
import { PatternFormat } from "react-number-format";
|
|
464
|
+
import { forwardRef } from "react";
|
|
465
|
+
var PhoneInput = forwardRef(
|
|
466
|
+
function NumericFormatCustom(props, ref) {
|
|
467
|
+
const { onChange, ...other } = props;
|
|
468
|
+
return /* @__PURE__ */ React.createElement(
|
|
469
|
+
PatternFormat,
|
|
470
|
+
{
|
|
471
|
+
...other,
|
|
472
|
+
getInputRef: ref,
|
|
473
|
+
customInput: Input_default,
|
|
474
|
+
onValueChange: (values) => {
|
|
475
|
+
onChange({
|
|
476
|
+
target: {
|
|
477
|
+
name: props.name,
|
|
478
|
+
value: values.value
|
|
479
|
+
}
|
|
480
|
+
});
|
|
481
|
+
},
|
|
482
|
+
placeholder: "000 000 00 00",
|
|
483
|
+
format: "### ### ## ##"
|
|
484
|
+
}
|
|
485
|
+
);
|
|
486
|
+
}
|
|
487
|
+
);
|
|
488
|
+
var PhoneInput_default = PhoneInput;
|
|
489
|
+
|
|
490
|
+
// src/components/Input/FromToInput.tsx
|
|
491
|
+
import { Stack as Stack2 } from "@mui/material";
|
|
492
|
+
import Typography5 from "@mui/material/Typography";
|
|
493
|
+
var FromToInput = ({ label }) => {
|
|
494
|
+
return /* @__PURE__ */ React.createElement(Stack2, null, label ? /* @__PURE__ */ React.createElement(Typography5, { className: "text-accent-dark text-xs" }, label) : null, /* @__PURE__ */ React.createElement(Stack2, { direction: "row", spacing: 1 }, /* @__PURE__ */ React.createElement(Input_default, { adornmentText: "\u0432\u0456\u0434", fullWidth: true, type: "number" }), /* @__PURE__ */ React.createElement(Input_default, { adornmentText: "\u0434\u043E", fullWidth: true, type: "number" })));
|
|
495
|
+
};
|
|
496
|
+
var FromToInput_default = FromToInput;
|
|
497
|
+
|
|
498
|
+
// src/theme/index.tsx
|
|
499
|
+
import { useState as useState3 } from "react";
|
|
500
|
+
import createCache from "@emotion/cache";
|
|
501
|
+
import { useServerInsertedHTML } from "next/navigation";
|
|
502
|
+
import { CacheProvider } from "@emotion/react";
|
|
503
|
+
import { ThemeProvider, createTheme } from "@mui/material/styles";
|
|
504
|
+
import CssBaseline from "@mui/material/CssBaseline";
|
|
505
|
+
import { prefixer } from "stylis";
|
|
506
|
+
var theme = createTheme({});
|
|
507
|
+
function ThemeRegistry(props) {
|
|
508
|
+
const { children } = props;
|
|
509
|
+
const [{ cache, flush }] = useState3(() => {
|
|
510
|
+
const cache2 = createCache({
|
|
511
|
+
key: "mui",
|
|
512
|
+
stylisPlugins: [prefixer]
|
|
513
|
+
});
|
|
514
|
+
cache2.compat = true;
|
|
515
|
+
const prevInsert = cache2.insert;
|
|
516
|
+
let inserted = [];
|
|
517
|
+
cache2.insert = (...args) => {
|
|
518
|
+
const serialized = args[1];
|
|
519
|
+
if (cache2.inserted[serialized.name] === void 0) {
|
|
520
|
+
inserted.push(serialized.name);
|
|
521
|
+
}
|
|
522
|
+
return prevInsert(...args);
|
|
523
|
+
};
|
|
524
|
+
const flush2 = () => {
|
|
525
|
+
const prevInserted = inserted;
|
|
526
|
+
inserted = [];
|
|
527
|
+
return prevInserted;
|
|
528
|
+
};
|
|
529
|
+
return { cache: cache2, flush: flush2 };
|
|
530
|
+
});
|
|
531
|
+
useServerInsertedHTML(() => {
|
|
532
|
+
const names = flush();
|
|
533
|
+
if (names.length === 0) {
|
|
534
|
+
return null;
|
|
535
|
+
}
|
|
536
|
+
let styles = "";
|
|
537
|
+
for (const name of names) {
|
|
538
|
+
styles += cache.inserted[name];
|
|
539
|
+
}
|
|
540
|
+
return /* @__PURE__ */ React.createElement(
|
|
541
|
+
"style",
|
|
542
|
+
{
|
|
543
|
+
key: cache.key,
|
|
544
|
+
"data-emotion": `${cache.key} ${names.join(" ")}`,
|
|
545
|
+
dangerouslySetInnerHTML: {
|
|
546
|
+
__html: styles
|
|
547
|
+
}
|
|
548
|
+
}
|
|
549
|
+
);
|
|
550
|
+
});
|
|
551
|
+
return /* @__PURE__ */ React.createElement(CacheProvider, { value: cache }, /* @__PURE__ */ React.createElement(ThemeProvider, { theme }, /* @__PURE__ */ React.createElement(CssBaseline, null), children));
|
|
552
|
+
}
|
|
553
|
+
|
|
554
|
+
// src/providers/Providers.tsx
|
|
555
|
+
var Providers = ({ children }) => {
|
|
556
|
+
return /* @__PURE__ */ React.createElement(ThemeRegistry, null, children);
|
|
557
|
+
};
|
|
558
|
+
var Providers_default = Providers;
|
|
559
|
+
|
|
560
|
+
// src/components/AppBar/AppBar.tsx
|
|
561
|
+
import { useEffect as useEffect2, useRef as useRef2, useState as useState4 } from "react";
|
|
562
|
+
import { Box as Box2, Stack as Stack3 } from "@mui/material";
|
|
563
|
+
import Link from "next/link";
|
|
564
|
+
var AppBar = ({ links }) => {
|
|
565
|
+
const [activeIndex, setActiveIndex] = useState4(0);
|
|
566
|
+
const navItemsRef = useRef2([]);
|
|
567
|
+
useEffect2(() => {
|
|
568
|
+
const indicator = document.querySelector(".nav-indicator");
|
|
569
|
+
const navItem = navItemsRef.current[activeIndex];
|
|
570
|
+
const navItemWidth = navItem.offsetWidth;
|
|
571
|
+
const navItemLeft = navItem.offsetLeft + navItemWidth / 2 - indicator.offsetWidth / 2;
|
|
572
|
+
const navItemTop = navItem.offsetTop - 5;
|
|
573
|
+
indicator?.setAttribute(
|
|
574
|
+
"style",
|
|
575
|
+
`transform: translate(${navItemLeft}px, ${navItemTop}px);`
|
|
576
|
+
);
|
|
577
|
+
}, [activeIndex]);
|
|
578
|
+
const handleClick = (index) => {
|
|
579
|
+
setActiveIndex(index);
|
|
580
|
+
};
|
|
581
|
+
return /* @__PURE__ */ React.createElement(Stack3, { direction: "row", spacing: 1, position: "relative" }, /* @__PURE__ */ React.createElement(Box2, { className: "nav-indicator" }), links.map((link, index) => /* @__PURE__ */ React.createElement(
|
|
582
|
+
Link,
|
|
583
|
+
{
|
|
584
|
+
ref: (el) => {
|
|
585
|
+
navItemsRef.current[index] = el;
|
|
586
|
+
},
|
|
587
|
+
key: index,
|
|
588
|
+
href: link.href,
|
|
589
|
+
className: `nav-item ${index === activeIndex ? "active" : ""}`,
|
|
590
|
+
onClick: () => handleClick(index)
|
|
591
|
+
},
|
|
592
|
+
link.title
|
|
593
|
+
)));
|
|
594
|
+
};
|
|
595
|
+
var AppBar_default = AppBar;
|
|
596
|
+
export {
|
|
597
|
+
AppBar_default as AppBar,
|
|
598
|
+
Avatar_default as Avatar,
|
|
599
|
+
Badge_default as Badge,
|
|
600
|
+
Button_default as Button,
|
|
601
|
+
Chip_default as Chip,
|
|
602
|
+
FromToInput_default as FromToInput,
|
|
603
|
+
Greet,
|
|
604
|
+
IconButton_default as IconButton,
|
|
605
|
+
Input_default as Input,
|
|
606
|
+
MenuItem_default as MenuItem,
|
|
607
|
+
PhoneInput_default as PhoneInput,
|
|
608
|
+
Providers_default as Providers,
|
|
609
|
+
Radio_default as Radio,
|
|
610
|
+
RadioGroup_default as RadioGroup,
|
|
611
|
+
Select_default as Select,
|
|
612
|
+
SelectPro_default as SelectPro,
|
|
613
|
+
Slider_default as Slider,
|
|
614
|
+
Switch_default as Switch,
|
|
615
|
+
Text_default as Text
|
|
616
|
+
};
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M21 12.5L12 3.5L3 12.5H5V19.5C5 20.0304 5.21071 20.5391 5.58579 20.9142C5.96086 21.2893 6.46957 21.5 7 21.5H11.7M9 21.5V15.5C9 14.9696 9.21071 14.4609 9.58579 14.0858C9.96086 13.7107 10.4696 13.5 11 13.5H13M20.1992 20.6992L21.9992 22.4992M15 18.5C15 19.2956 15.3161 20.0587 15.8787 20.6213C16.4413 21.1839 17.2044 21.5 18 21.5C18.7956 21.5 19.5587 21.1839 20.1213 20.6213C20.6839 20.0587 21 19.2956 21 18.5C21 17.7044 20.6839 16.9413 20.1213 16.3787C19.5587 15.8161 18.7956 15.5 18 15.5C17.2044 15.5 16.4413 15.8161 15.8787 16.3787C15.3161 16.9413 15 17.7044 15 18.5Z" stroke="#C8BCA1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
+
</svg>
|
package/package.json
ADDED
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "mayak-common-library",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"private": false,
|
|
5
|
+
"main": "./dist/index.js",
|
|
6
|
+
"types": "./dist/index.d.ts",
|
|
7
|
+
"scripts": {
|
|
8
|
+
"dev": "next dev",
|
|
9
|
+
"build": "next build",
|
|
10
|
+
"start": "next start",
|
|
11
|
+
"bundle": "tsup src/index.ts",
|
|
12
|
+
"lint": "next lint"
|
|
13
|
+
},
|
|
14
|
+
"dependencies": {
|
|
15
|
+
"@emotion/cache": "^11.11.0",
|
|
16
|
+
"@emotion/react": "^11.11.4",
|
|
17
|
+
"@emotion/styled": "^11.11.5",
|
|
18
|
+
"@mui/material": "^5.15.20",
|
|
19
|
+
"@mui/material-nextjs": "^5.15.11",
|
|
20
|
+
"next": "14.2.4",
|
|
21
|
+
"react": "^18",
|
|
22
|
+
"react-dom": "^18",
|
|
23
|
+
"react-hook-form": "^7.52.0",
|
|
24
|
+
"react-number-format": "^5.4.0",
|
|
25
|
+
"stylis": "^4.3.2",
|
|
26
|
+
"tailwindcss": "^3.4.4"
|
|
27
|
+
},
|
|
28
|
+
"devDependencies": {
|
|
29
|
+
"@svgr/webpack": "^8.1.0",
|
|
30
|
+
"@types/node": "^20",
|
|
31
|
+
"@types/react": "^18",
|
|
32
|
+
"@types/react-dom": "^18",
|
|
33
|
+
"@types/stylis": "^4.2.6",
|
|
34
|
+
"autoprefixer": "^10.4.19",
|
|
35
|
+
"eslint": "^8",
|
|
36
|
+
"eslint-config-next": "14.2.4",
|
|
37
|
+
"install": "^0.13.0",
|
|
38
|
+
"postcss": "^8.4.39",
|
|
39
|
+
"prettier": "^3.3.2",
|
|
40
|
+
"tsup": "^8.1.0",
|
|
41
|
+
"typescript": "^5"
|
|
42
|
+
},
|
|
43
|
+
"browserslist": [
|
|
44
|
+
">0.3%",
|
|
45
|
+
"not dead",
|
|
46
|
+
"not op_mini all"
|
|
47
|
+
],
|
|
48
|
+
"author": "anthony_k",
|
|
49
|
+
"license": "MIT",
|
|
50
|
+
"keywords": [
|
|
51
|
+
"test", "next common library"
|
|
52
|
+
]
|
|
53
|
+
}
|