@monolith-forensics/monolith-ui 1.0.12 → 1.1.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/Button/Button.tsx +382 -0
- package/Button/index.ts +2 -0
- package/{src/components/Calendar/Calendar.js → Calendar/Calendar.tsx} +104 -93
- package/{src/components/Calendar/CalendarStyles.js → Calendar/CalendarStyles.tsx} +26 -36
- package/{src/components/Calendar/calendarHelpers.js → Calendar/calendarHelpers.ts} +10 -8
- package/Calendar/index.ts +1 -0
- package/CheckBox/CheckBox.tsx +61 -0
- package/CheckBox/index.ts +1 -0
- package/{src/components/DateInput/DateInput.js → DateInput/DateInput.tsx} +227 -93
- package/DateInput/index.ts +1 -0
- package/DropDownMenu/DropDownMenu.tsx +402 -0
- package/DropDownMenu/index.ts +1 -0
- package/Error/Error.tsx +51 -0
- package/Error/index.ts +1 -0
- package/{src/components/FieldLabel → FieldLabel}/FieldLabel.tsx +25 -22
- package/{src/components/FileInputField/FileInputField.js → FileInputField/FileInputField.tsx} +23 -15
- package/FileInputField/index.ts +1 -0
- package/Flyout/Flyout.tsx +172 -0
- package/Flyout/FlyoutHeader.tsx +14 -0
- package/Flyout/FlyoutTitle.tsx +10 -0
- package/Flyout/index.ts +3 -0
- package/FormSection/FormSection.tsx +71 -0
- package/FormSection/index.ts +1 -0
- package/Grid/Grid.tsx +18 -0
- package/Grid/index.ts +1 -0
- package/IconButton/IconButton.tsx +27 -0
- package/IconButton/index.ts +1 -0
- package/{src/components/Input → Input}/Input.tsx +57 -34
- package/Modal/Modal.tsx +172 -0
- package/Modal/index.ts +1 -0
- package/{src/components/Pill → Pill}/Pill.tsx +41 -11
- package/SelectBox/SelectBox.tsx +745 -0
- package/SelectBox/index.ts +1 -0
- package/Switch/Switch.tsx +204 -0
- package/Switch/index.ts +1 -0
- package/TagBox/TagBox.tsx +694 -0
- package/TagBox/TagBoxStyles.tsx +116 -0
- package/TagBox/index.ts +1 -0
- package/{src/components/TextArea → TextArea}/TextArea.tsx +35 -13
- package/{src/components/TextAreaInput → TextAreaInput}/TextAreaInput.tsx +11 -13
- package/{src/components/TextInput → TextInput}/TextInput.tsx +11 -13
- package/Tooltip/Tooltip.tsx +68 -0
- package/Tooltip/index.ts +1 -0
- package/{src/components/ArrowButton → core}/ArrowButton.tsx +17 -20
- package/core/ClearButton.tsx +51 -0
- package/core/StyledContent.tsx +50 -0
- package/core/StyledFloatContainer.tsx +7 -0
- package/core/Types/Size.ts +3 -0
- package/core/Types/Variant.ts +10 -0
- package/core/index.ts +6 -0
- package/dist/Button/Button.d.ts +19 -0
- package/dist/Button/Button.js +332 -0
- package/dist/Button/index.d.ts +2 -0
- package/dist/Button/index.js +8 -0
- package/dist/Calendar/Calendar.d.ts +15 -0
- package/dist/Calendar/Calendar.js +232 -0
- package/dist/Calendar/CalendarStyles.d.ts +36 -0
- package/dist/Calendar/CalendarStyles.js +170 -0
- package/dist/Calendar/calendarHelpers.d.ts +53 -0
- package/dist/Calendar/calendarHelpers.js +181 -0
- package/dist/Calendar/index.d.ts +1 -0
- package/dist/Calendar/index.js +8 -0
- package/dist/CheckBox/CheckBox.d.ts +11 -0
- package/dist/CheckBox/CheckBox.js +34 -0
- package/dist/CheckBox/index.d.ts +1 -0
- package/dist/CheckBox/index.js +8 -0
- package/dist/DateInput/DateInput.d.ts +24 -0
- package/dist/DateInput/DateInput.js +511 -0
- package/dist/DateInput/index.d.ts +1 -0
- package/dist/DateInput/index.js +8 -0
- package/dist/DropDownMenu/DropDownMenu.d.ts +36 -0
- package/dist/DropDownMenu/DropDownMenu.js +212 -0
- package/dist/DropDownMenu/index.d.ts +1 -0
- package/dist/DropDownMenu/index.js +8 -0
- package/dist/Error/Error.d.ts +4 -0
- package/dist/Error/Error.js +38 -0
- package/dist/Error/index.d.ts +1 -0
- package/dist/Error/index.js +8 -0
- package/dist/FieldLabel/FieldLabel.d.ts +19 -0
- package/dist/FieldLabel/FieldLabel.js +119 -0
- package/dist/FieldLabel/index.d.ts +1 -0
- package/dist/FieldLabel/index.js +8 -0
- package/dist/FileInputField/FileInputField.d.ts +18 -0
- package/dist/FileInputField/FileInputField.js +116 -0
- package/dist/FileInputField/index.d.ts +1 -0
- package/dist/FileInputField/index.js +8 -0
- package/dist/Flyout/Flyout.d.ts +10 -0
- package/dist/Flyout/Flyout.js +111 -0
- package/dist/Flyout/FlyoutHeader.d.ts +5 -0
- package/dist/Flyout/FlyoutHeader.js +12 -0
- package/dist/Flyout/FlyoutTitle.d.ts +2 -0
- package/dist/Flyout/FlyoutTitle.js +13 -0
- package/dist/Flyout/index.d.ts +3 -0
- package/dist/Flyout/index.js +12 -0
- package/dist/FormSection/FormSection.d.ts +9 -0
- package/dist/FormSection/FormSection.js +51 -0
- package/dist/FormSection/index.d.ts +1 -0
- package/dist/FormSection/index.js +8 -0
- package/dist/Grid/Grid.d.ts +6 -0
- package/dist/Grid/Grid.js +15 -0
- package/dist/Grid/index.d.ts +1 -0
- package/dist/Grid/index.js +8 -0
- package/dist/IconButton/IconButton.d.ts +5 -0
- package/dist/IconButton/IconButton.js +30 -0
- package/dist/IconButton/index.d.ts +1 -0
- package/dist/IconButton/index.js +8 -0
- package/dist/Input/Input.d.ts +21 -0
- package/dist/Input/Input.js +148 -0
- package/dist/Input/index.d.ts +1 -0
- package/dist/Input/index.js +8 -0
- package/dist/Modal/Modal.d.ts +14 -0
- package/dist/Modal/Modal.js +134 -0
- package/dist/Modal/index.d.ts +1 -0
- package/dist/Modal/index.js +8 -0
- package/dist/Pill/Pill.d.ts +11 -0
- package/dist/Pill/Pill.js +146 -0
- package/dist/Pill/index.d.ts +1 -0
- package/dist/Pill/index.js +8 -0
- package/dist/SelectBox/SelectBox.d.ts +45 -0
- package/dist/SelectBox/SelectBox.js +469 -0
- package/dist/SelectBox/index.d.ts +1 -0
- package/dist/SelectBox/index.js +8 -0
- package/dist/Switch/Switch.d.ts +18 -0
- package/dist/Switch/Switch.js +157 -0
- package/dist/Switch/index.d.ts +1 -0
- package/dist/Switch/index.js +8 -0
- package/dist/TagBox/TagBox.d.ts +38 -0
- package/dist/TagBox/TagBox.js +440 -0
- package/dist/TagBox/TagBoxStyles.d.ts +11 -0
- package/dist/TagBox/TagBoxStyles.js +113 -0
- package/dist/TagBox/index.d.ts +1 -0
- package/dist/TagBox/index.js +8 -0
- package/dist/TextArea/TextArea.d.ts +16 -0
- package/dist/TextArea/TextArea.js +80 -0
- package/dist/TextArea/index.d.ts +1 -0
- package/dist/TextArea/index.js +8 -0
- package/dist/TextAreaInput/TextAreaInput.d.ts +12 -0
- package/dist/TextAreaInput/TextAreaInput.js +23 -0
- package/dist/TextAreaInput/index.d.ts +1 -0
- package/dist/TextAreaInput/index.js +8 -0
- package/dist/TextInput/TextInput.d.ts +12 -0
- package/dist/TextInput/TextInput.js +30 -0
- package/dist/TextInput/index.d.ts +1 -0
- package/dist/TextInput/index.js +8 -0
- package/dist/Tooltip/Tooltip.d.ts +12 -0
- package/dist/Tooltip/Tooltip.js +53 -0
- package/dist/Tooltip/index.d.ts +1 -0
- package/dist/Tooltip/index.js +8 -0
- package/dist/core/ArrowButton.d.ts +6 -0
- package/dist/core/ArrowButton.js +48 -0
- package/dist/core/ClearButton.d.ts +6 -0
- package/dist/core/ClearButton.js +48 -0
- package/dist/core/StyledContent.d.ts +7 -0
- package/dist/core/StyledContent.js +46 -0
- package/dist/core/StyledFloatContainer.d.ts +2 -0
- package/dist/core/StyledFloatContainer.js +10 -0
- package/dist/core/Types/Size.d.ts +2 -0
- package/dist/core/Types/Size.js +2 -0
- package/dist/core/Types/Variant.d.ts +2 -0
- package/dist/core/Types/Variant.js +2 -0
- package/dist/core/index.d.ts +6 -0
- package/dist/core/index.js +14 -0
- package/dist/index.d.ts +22 -0
- package/dist/index.js +51 -0
- package/index.ts +22 -0
- package/package.json +12 -20
- package/{src/components/theme → theme}/components.js +0 -2
- package/{src/components/theme → theme}/index.js +0 -1
- package/{src/components/theme → theme}/variants.js +0 -1
- package/tsconfig.json +11 -11
- package/.gitattributes +0 -2
- package/rollup.config.js +0 -10
- package/src/components/ArrowButton/index.tsx +0 -1
- package/src/components/Button/Button.tsx +0 -278
- package/src/components/Button/index.ts +0 -1
- package/src/components/SelectBox/SelectBox.js +0 -543
- package/src/components/TagBox/TagBox.js +0 -563
- package/src/components/index.ts +0 -7
- package/src/index.ts +0 -1
- /package/{src/components/FieldLabel → FieldLabel}/index.ts +0 -0
- /package/{src/components/Input/index.tsx → Input/index.ts} +0 -0
- /package/{src/components/Pill → Pill}/index.ts +0 -0
- /package/{src/components/TextArea → TextArea}/index.ts +0 -0
- /package/{src/components/TextAreaInput → TextAreaInput}/index.ts +0 -0
- /package/{src/components/TextInput/index.tsx → TextInput/index.ts} +0 -0
- /package/{src/components/core/index.js → core/MonolithThemeProvider.js} +0 -0
- /package/{src/components/theme → theme}/breakpoints.js +0 -0
- /package/{src/components/theme → theme}/shadows.js +0 -0
- /package/{src/components/theme → theme}/typography.js +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "./Modal";
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var Modal_1 = require("./Modal");
|
|
8
|
+
Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Modal_1).default; } });
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
import { Size } from "../core";
|
|
3
|
+
interface PillProps {
|
|
4
|
+
className?: string;
|
|
5
|
+
children?: ReactNode;
|
|
6
|
+
size?: Size;
|
|
7
|
+
showRemoveIcon?: boolean;
|
|
8
|
+
onRemove?: () => void;
|
|
9
|
+
}
|
|
10
|
+
declare const Pill: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<PillProps, never>> & string & Omit<({ className, children, size, showRemoveIcon, onRemove, }: PillProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
|
|
11
|
+
export default Pill;
|
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
7
|
+
const styled_components_1 = __importDefault(require("styled-components"));
|
|
8
|
+
const lucide_react_1 = require("lucide-react");
|
|
9
|
+
const StyledButton = styled_components_1.default.button `
|
|
10
|
+
background-color: transparent;
|
|
11
|
+
border: none;
|
|
12
|
+
cursor: pointer;
|
|
13
|
+
display: flex;
|
|
14
|
+
align-items: center;
|
|
15
|
+
justify-content: center;
|
|
16
|
+
padding: 0;
|
|
17
|
+
margin: 0;
|
|
18
|
+
outline: none;
|
|
19
|
+
transition: color 0.2s;
|
|
20
|
+
padding-inline-end: 5px;
|
|
21
|
+
`;
|
|
22
|
+
const Pill = (0, styled_components_1.default)(({ className, children, size = "md", showRemoveIcon = true, onRemove, }) => {
|
|
23
|
+
const handleRemove = (e) => {
|
|
24
|
+
e.preventDefault();
|
|
25
|
+
e.stopPropagation();
|
|
26
|
+
onRemove === null || onRemove === void 0 ? void 0 : onRemove();
|
|
27
|
+
};
|
|
28
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: className, children: [(0, jsx_runtime_1.jsx)("span", { className: "pill-content", children: children }), showRemoveIcon && ((0, jsx_runtime_1.jsx)(StyledButton, { onClick: handleRemove, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, {}) }))] }));
|
|
29
|
+
}) `
|
|
30
|
+
user-select: none;
|
|
31
|
+
display: flex;
|
|
32
|
+
align-items: center;
|
|
33
|
+
justify-content: space-between;
|
|
34
|
+
flex-direction: row;
|
|
35
|
+
width: fit-content;
|
|
36
|
+
max-width: 250px;
|
|
37
|
+
gap: 5px;
|
|
38
|
+
flex: 0;
|
|
39
|
+
|
|
40
|
+
font-weight: 500;
|
|
41
|
+
color: ${({ theme }) => theme.palette.text.primary};
|
|
42
|
+
|
|
43
|
+
padding-inline-end: ${({ size, showRemoveIcon }) => {
|
|
44
|
+
if (showRemoveIcon) {
|
|
45
|
+
return "0px";
|
|
46
|
+
}
|
|
47
|
+
switch (size) {
|
|
48
|
+
case "xs":
|
|
49
|
+
return "8px";
|
|
50
|
+
case "sm":
|
|
51
|
+
return "10px";
|
|
52
|
+
case "md":
|
|
53
|
+
return "12px";
|
|
54
|
+
case "lg":
|
|
55
|
+
return "14px";
|
|
56
|
+
case "xl":
|
|
57
|
+
return "16px";
|
|
58
|
+
default:
|
|
59
|
+
return "10px";
|
|
60
|
+
}
|
|
61
|
+
}};
|
|
62
|
+
|
|
63
|
+
padding-inline-start: ${({ size }) => {
|
|
64
|
+
switch (size) {
|
|
65
|
+
case "xs":
|
|
66
|
+
return "8px";
|
|
67
|
+
case "sm":
|
|
68
|
+
return "10px";
|
|
69
|
+
case "md":
|
|
70
|
+
return "12px";
|
|
71
|
+
case "lg":
|
|
72
|
+
return "14px";
|
|
73
|
+
case "xl":
|
|
74
|
+
return "16px";
|
|
75
|
+
default:
|
|
76
|
+
return "10px";
|
|
77
|
+
}
|
|
78
|
+
}};
|
|
79
|
+
|
|
80
|
+
height: ${({ size }) => {
|
|
81
|
+
switch (size) {
|
|
82
|
+
case "xs":
|
|
83
|
+
return "20px";
|
|
84
|
+
case "sm":
|
|
85
|
+
return "22px";
|
|
86
|
+
case "md":
|
|
87
|
+
return "24px";
|
|
88
|
+
case "lg":
|
|
89
|
+
return "26px";
|
|
90
|
+
case "xl":
|
|
91
|
+
return "28px";
|
|
92
|
+
default:
|
|
93
|
+
return "22px";
|
|
94
|
+
}
|
|
95
|
+
}};
|
|
96
|
+
|
|
97
|
+
border: 1px solid ${({ theme }) => theme.palette.divider};
|
|
98
|
+
border-radius: 1000px;
|
|
99
|
+
|
|
100
|
+
background-color: ${({ theme }) => theme.palette.background.secondary};
|
|
101
|
+
|
|
102
|
+
.pill-content {
|
|
103
|
+
white-space: nowrap;
|
|
104
|
+
overflow: hidden;
|
|
105
|
+
text-overflow: ellipsis;
|
|
106
|
+
|
|
107
|
+
font-size: ${({ size }) => {
|
|
108
|
+
switch (size) {
|
|
109
|
+
case "xs":
|
|
110
|
+
return "10px";
|
|
111
|
+
case "sm":
|
|
112
|
+
return "12px";
|
|
113
|
+
case "md":
|
|
114
|
+
return "14px";
|
|
115
|
+
case "lg":
|
|
116
|
+
return "16px";
|
|
117
|
+
case "xl":
|
|
118
|
+
return "18px";
|
|
119
|
+
default:
|
|
120
|
+
return "12px";
|
|
121
|
+
}
|
|
122
|
+
}};
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
svg {
|
|
126
|
+
color: ${({ theme }) => theme.palette.text.primary};
|
|
127
|
+
|
|
128
|
+
width: ${({ size }) => {
|
|
129
|
+
switch (size) {
|
|
130
|
+
case "xs":
|
|
131
|
+
return "12px";
|
|
132
|
+
case "sm":
|
|
133
|
+
return "14px";
|
|
134
|
+
case "md":
|
|
135
|
+
return "16px";
|
|
136
|
+
case "lg":
|
|
137
|
+
return "18px";
|
|
138
|
+
case "xl":
|
|
139
|
+
return "20px";
|
|
140
|
+
default:
|
|
141
|
+
return "14px";
|
|
142
|
+
}
|
|
143
|
+
}};
|
|
144
|
+
}
|
|
145
|
+
`;
|
|
146
|
+
exports.default = Pill;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "./Pill";
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var Pill_1 = require("./Pill");
|
|
8
|
+
Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Pill_1).default; } });
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
import { Size, Variant } from "../core";
|
|
3
|
+
export declare const StyledInputContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
4
|
+
width?: string | number | null;
|
|
5
|
+
}>> & string;
|
|
6
|
+
type Option = {
|
|
7
|
+
label: string;
|
|
8
|
+
value: any;
|
|
9
|
+
group?: string;
|
|
10
|
+
data: any;
|
|
11
|
+
};
|
|
12
|
+
interface SelectBoxProps {
|
|
13
|
+
className?: string;
|
|
14
|
+
defaultValue?: Option | string;
|
|
15
|
+
data?: Option[] | string[];
|
|
16
|
+
placeholder?: string;
|
|
17
|
+
arrow?: boolean;
|
|
18
|
+
onChange?: (value: any, item: any) => void;
|
|
19
|
+
onSearch?: (value: string) => void;
|
|
20
|
+
searchFn?: (value: string) => void;
|
|
21
|
+
onScroll?: (e: any) => void;
|
|
22
|
+
loading?: boolean;
|
|
23
|
+
onItemAdded?: (item: any) => void;
|
|
24
|
+
size?: Size;
|
|
25
|
+
variant?: Variant;
|
|
26
|
+
width?: string | number | null;
|
|
27
|
+
allowCustomValue?: boolean;
|
|
28
|
+
searchable?: boolean;
|
|
29
|
+
clearable?: boolean;
|
|
30
|
+
label?: string;
|
|
31
|
+
description?: string;
|
|
32
|
+
required?: boolean;
|
|
33
|
+
error?: string;
|
|
34
|
+
openOnFocus?: boolean;
|
|
35
|
+
renderOption?: (item: Option | string) => ReactNode;
|
|
36
|
+
actionComponent?: JSX.Element;
|
|
37
|
+
focused?: boolean;
|
|
38
|
+
grouped?: boolean;
|
|
39
|
+
TooltipContent?: React.FC<{
|
|
40
|
+
data: any;
|
|
41
|
+
}>;
|
|
42
|
+
DropDownProps?: any;
|
|
43
|
+
}
|
|
44
|
+
declare const SelectBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<SelectBoxProps, never>> & string & Omit<({ className, data, placeholder, arrow, onChange, onSearch, searchFn, onScroll, loading, defaultValue, onItemAdded, size, variant, width, allowCustomValue, searchable, clearable, label, description, required, error, openOnFocus, renderOption, actionComponent, focused, grouped, TooltipContent, DropDownProps, }: SelectBoxProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
|
|
45
|
+
export default SelectBox;
|