@cyber-harbour/ui 1.0.17 → 1.0.18
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/index.d.mts +212 -74
- package/dist/index.d.ts +212 -74
- package/dist/index.js +143 -102
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +142 -101
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -1
- package/src/Core/Button/Button.tsx +110 -19
- package/src/Core/Button/index.ts +1 -1
- package/src/Core/Header/Header.tsx +15 -13
- package/src/Core/ListMenu/ListMenuItem.tsx +10 -14
- package/src/Core/Pagination/Pagination.tsx +1 -1
- package/src/Core/Sidebar/Sidebar.tsx +47 -47
- package/src/Core/Sidebar/SidebarItem.tsx +3 -3
- package/src/Core/Typography/Typography.tsx +2 -2
- package/src/Layouts/PageLayout/PageLayout.tsx +2 -1
- package/src/Theme/ThemeProvider.tsx +0 -1
- package/src/Theme/index.ts +2 -1
- package/src/Theme/styled.d.ts +7 -0
- package/src/Theme/theme.ts +451 -101
- package/src/Theme/types.ts +148 -0
- package/src/Theme/utils.ts +109 -0
package/dist/index.d.mts
CHANGED
|
@@ -1,15 +1,221 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as react from 'react';
|
|
3
|
-
import { SVGProps, ElementType, CSSProperties as CSSProperties$1, ReactNode, FC } from 'react';
|
|
3
|
+
import react__default, { SVGProps, ElementType, CSSProperties as CSSProperties$1, ReactNode, FC } from 'react';
|
|
4
4
|
import * as styled_components from 'styled-components';
|
|
5
|
-
import {
|
|
5
|
+
import { DefaultTheme, CSSProperties } from 'styled-components';
|
|
6
6
|
import * as styled_components_dist_types from 'styled-components/dist/types';
|
|
7
|
+
import { DefaultTheme as DefaultTheme$1 } from 'styled-components/dist/types';
|
|
7
8
|
|
|
8
|
-
|
|
9
|
+
declare const GlobalStyle: react.NamedExoticComponent<styled_components.ExecutionProps & object>;
|
|
10
|
+
|
|
11
|
+
declare const ThemeProvider: ({ children }: {
|
|
9
12
|
children: any;
|
|
10
|
-
|
|
13
|
+
}) => react_jsx_runtime.JSX.Element;
|
|
14
|
+
|
|
15
|
+
type ButtonVariant = 'fill' | 'outlined' | 'empty';
|
|
16
|
+
type ButtonColor = 'default' | 'primary' | 'secondary' | 'error';
|
|
17
|
+
type ButtonState = 'default' | 'hover' | 'active' | 'disabled';
|
|
18
|
+
type ButtonSize = 'small' | 'medium';
|
|
19
|
+
type InputVariant = 'default' | 'outlined' | 'filled';
|
|
20
|
+
type InputState = 'default' | 'focus' | 'error' | 'disabled';
|
|
21
|
+
type InputSize = 'small' | 'medium' | 'large';
|
|
22
|
+
type Breakpoint = 'xs' | 's' | 'm' | 'l' | 'xl';
|
|
23
|
+
type ButtonElementStyle = {
|
|
24
|
+
background: string;
|
|
25
|
+
text: string;
|
|
26
|
+
border: string;
|
|
27
|
+
boxShadow: string;
|
|
28
|
+
};
|
|
29
|
+
type ButtonSizeStyle = {
|
|
30
|
+
fontSize: number | string;
|
|
31
|
+
paddingInline: number | string;
|
|
32
|
+
paddingBlock: number | string;
|
|
33
|
+
borderRadius: number | string;
|
|
34
|
+
borderWidth: number | string;
|
|
35
|
+
gap: number | string;
|
|
36
|
+
iconSize: number | string;
|
|
37
|
+
};
|
|
38
|
+
type Theme = {
|
|
39
|
+
mode: 'light' | 'dark';
|
|
40
|
+
colors: {
|
|
41
|
+
background: string;
|
|
42
|
+
primary: {
|
|
43
|
+
main: string;
|
|
44
|
+
light: string;
|
|
45
|
+
lighter: string;
|
|
46
|
+
lightest: string;
|
|
47
|
+
lightest2: string;
|
|
48
|
+
};
|
|
49
|
+
text: {
|
|
50
|
+
main: string;
|
|
51
|
+
light: string;
|
|
52
|
+
lighter: string;
|
|
53
|
+
invert: string;
|
|
54
|
+
};
|
|
55
|
+
stroke: {
|
|
56
|
+
main: string;
|
|
57
|
+
light: string;
|
|
58
|
+
lighter: string;
|
|
59
|
+
};
|
|
60
|
+
disable: string;
|
|
61
|
+
success: string;
|
|
62
|
+
error: string;
|
|
63
|
+
warning: string;
|
|
64
|
+
info: string;
|
|
65
|
+
};
|
|
66
|
+
typography: {
|
|
67
|
+
fontFamily: string;
|
|
68
|
+
lineHeight: number;
|
|
69
|
+
variants: {
|
|
70
|
+
h1: {
|
|
71
|
+
fontSize: number | string;
|
|
72
|
+
};
|
|
73
|
+
h2: {
|
|
74
|
+
fontSize: number | string;
|
|
75
|
+
};
|
|
76
|
+
h3: {
|
|
77
|
+
fontSize: number | string;
|
|
78
|
+
};
|
|
79
|
+
body: {
|
|
80
|
+
fontSize: number | string;
|
|
81
|
+
};
|
|
82
|
+
};
|
|
83
|
+
};
|
|
84
|
+
breakpoints: Record<Breakpoint, number>;
|
|
85
|
+
zIndex: {
|
|
86
|
+
dropdown: number;
|
|
87
|
+
sticky: number;
|
|
88
|
+
fixed: number;
|
|
89
|
+
backdrop: number;
|
|
90
|
+
modal: number;
|
|
91
|
+
popover: number;
|
|
92
|
+
tooltip: number;
|
|
93
|
+
};
|
|
94
|
+
button: {
|
|
95
|
+
fill: Record<ButtonColor, Record<ButtonState, ButtonElementStyle>>;
|
|
96
|
+
outlined: Record<ButtonColor, Record<ButtonState, ButtonElementStyle>>;
|
|
97
|
+
empty: Record<ButtonColor, Record<ButtonState, ButtonElementStyle>>;
|
|
98
|
+
sizes: Record<ButtonSize, ButtonSizeStyle>;
|
|
99
|
+
};
|
|
100
|
+
sidebar: {
|
|
101
|
+
background: string;
|
|
102
|
+
width: number;
|
|
103
|
+
collapsedWidth: number;
|
|
104
|
+
text: {
|
|
105
|
+
default: string;
|
|
106
|
+
active: string;
|
|
107
|
+
hover: string;
|
|
108
|
+
};
|
|
109
|
+
item: {
|
|
110
|
+
default: {
|
|
111
|
+
background: string;
|
|
112
|
+
border: string;
|
|
113
|
+
padding: string;
|
|
114
|
+
height: number;
|
|
115
|
+
};
|
|
116
|
+
active: {
|
|
117
|
+
background: string;
|
|
118
|
+
borderLeft: string;
|
|
119
|
+
padding: string;
|
|
120
|
+
height: number;
|
|
121
|
+
};
|
|
122
|
+
hover: {
|
|
123
|
+
background: string;
|
|
124
|
+
border: string;
|
|
125
|
+
padding: string;
|
|
126
|
+
height: number;
|
|
127
|
+
};
|
|
128
|
+
};
|
|
129
|
+
section: {
|
|
130
|
+
background: string;
|
|
131
|
+
padding: string;
|
|
132
|
+
title: {
|
|
133
|
+
color: string;
|
|
134
|
+
fontSize: string;
|
|
135
|
+
fontWeight: number;
|
|
136
|
+
};
|
|
137
|
+
};
|
|
138
|
+
delimeter: {
|
|
139
|
+
color: string;
|
|
140
|
+
thickness: number;
|
|
141
|
+
margin: string;
|
|
142
|
+
};
|
|
143
|
+
};
|
|
144
|
+
};
|
|
145
|
+
type ThemeColors = Theme['colors'];
|
|
146
|
+
type ColorCategory = keyof ThemeColors;
|
|
147
|
+
type NestedColorPaths = keyof Pick<ThemeColors, 'background' | 'disable'> | `${Extract<ColorCategory, 'primary'>}.${keyof ThemeColors['primary']}` | `${Extract<ColorCategory, 'text'>}.${keyof ThemeColors['text']}` | `${Extract<ColorCategory, 'stroke'>}.${keyof ThemeColors['stroke']}`;
|
|
148
|
+
type ColorVariant = NestedColorPaths;
|
|
149
|
+
type TypographyVariant = 'h1' | 'h2' | 'h3' | 'body';
|
|
150
|
+
|
|
151
|
+
/**
|
|
152
|
+
* Helper function to resolve nested color paths from theme
|
|
153
|
+
* Supports formats like 'primary.main', 'text.lightest', 'background'
|
|
154
|
+
*
|
|
155
|
+
* @param theme - The styled-components theme object
|
|
156
|
+
* @param colorPath - A dot-notation path to the color in the theme, e.g. 'primary.main'
|
|
157
|
+
* @returns The resolved color value or undefined if not found
|
|
158
|
+
*/
|
|
159
|
+
declare const resolveThemeColor: (theme: DefaultTheme, colorPath: string | undefined) => string | undefined;
|
|
160
|
+
/**
|
|
161
|
+
* Converts a pixel value to rem units
|
|
162
|
+
*
|
|
163
|
+
* @param pxValue - The pixel value to convert. Can be a number or a string with 'px' suffix
|
|
164
|
+
* @param baseSize - Base font size in pixels. Default is 16px (browser default)
|
|
165
|
+
* @returns The value in rem units as a string (e.g., "1.25rem")
|
|
166
|
+
*/
|
|
167
|
+
declare const pxToRem: (pxValue: number | string, baseSize?: number) => string;
|
|
168
|
+
/**
|
|
169
|
+
* Recursively converts all pixel values in an object to rem units
|
|
170
|
+
*
|
|
171
|
+
* @param obj - The object containing values to convert
|
|
172
|
+
* @param baseSize - Base font size in pixels. Default is 16px
|
|
173
|
+
* @returns A new object with pixel values converted to rem
|
|
174
|
+
*/
|
|
175
|
+
declare const convertPaletteToRem: (obj: Record<string, any>, baseSize?: number) => Record<string, any>;
|
|
176
|
+
/**
|
|
177
|
+
* Функція для отримання стилів кнопки за варіантом, кольором, станом та розміром
|
|
178
|
+
*/
|
|
179
|
+
declare const getButtonStyles: <V extends ButtonVariant>(theme: DefaultTheme, variant: ButtonVariant, color: ButtonColor, state: ButtonState) => ButtonElementStyle;
|
|
180
|
+
declare const getButtonSizeStyles: (theme: DefaultTheme, size: ButtonSize) => ButtonSizeStyle;
|
|
181
|
+
/**
|
|
182
|
+
* Функція для отримання типографічних стилів
|
|
183
|
+
*/
|
|
184
|
+
declare const getTypographyStyles: (theme: DefaultTheme, variant?: string) => {
|
|
185
|
+
fontSize: number | string;
|
|
186
|
+
} | {
|
|
187
|
+
fontSize: number | string;
|
|
188
|
+
} | {
|
|
189
|
+
fontSize: number | string;
|
|
190
|
+
} | {
|
|
191
|
+
fontSize: number | string;
|
|
192
|
+
};
|
|
193
|
+
/**
|
|
194
|
+
* Функція для отримання медіа-запитів для breakpoints
|
|
195
|
+
*/
|
|
196
|
+
declare const getBreakpoint: (theme: DefaultTheme, size?: Breakpoint) => string;
|
|
197
|
+
|
|
198
|
+
/**
|
|
199
|
+
* Палітра, що містить як кольори, так і розміри в px
|
|
200
|
+
* Кольори взято з теми, розміри будуть автоматично конвертовані в rem
|
|
201
|
+
*/
|
|
202
|
+
declare const lightThemePx: Theme;
|
|
203
|
+
declare const lightTheme: DefaultTheme$1;
|
|
204
|
+
declare const darkTheme: DefaultTheme$1;
|
|
205
|
+
|
|
206
|
+
interface BaseButtonProps {
|
|
207
|
+
children?: any;
|
|
208
|
+
variant?: ButtonVariant;
|
|
209
|
+
color?: ButtonColor;
|
|
210
|
+
size?: ButtonSize;
|
|
211
|
+
disabled?: boolean;
|
|
212
|
+
fullWidth?: boolean;
|
|
213
|
+
className?: string;
|
|
214
|
+
icon?: any;
|
|
215
|
+
iconPosition?: 'left' | 'right';
|
|
11
216
|
}
|
|
12
|
-
|
|
217
|
+
type ButtonProps = BaseButtonProps & (react__default.AnchorHTMLAttributes<HTMLAnchorElement> | react__default.ButtonHTMLAttributes<HTMLButtonElement>);
|
|
218
|
+
declare const Button: ({ children, variant, color, size, disabled, fullWidth, className, icon, iconPosition, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
|
|
13
219
|
|
|
14
220
|
interface AlertIconProps extends SVGProps<SVGSVGElement> {
|
|
15
221
|
fill?: string;
|
|
@@ -221,58 +427,6 @@ interface SidebarSectionProps {
|
|
|
221
427
|
}
|
|
222
428
|
declare const SidebarSection: ({ grow, shrink, basis, items }: SidebarSectionProps) => react_jsx_runtime.JSX.Element;
|
|
223
429
|
|
|
224
|
-
type ThemeColors = DefaultTheme['colors'];
|
|
225
|
-
type ColorCategory = keyof ThemeColors;
|
|
226
|
-
type NestedColorPaths = keyof Pick<ThemeColors, 'background' | 'disable'> | `${Extract<ColorCategory, 'primary'>}.${keyof ThemeColors['primary']}` | `${Extract<ColorCategory, 'text'>}.${keyof ThemeColors['text']}` | `${Extract<ColorCategory, 'stroke'>}.${keyof ThemeColors['stroke']}`;
|
|
227
|
-
type ColorVariant = NestedColorPaths;
|
|
228
|
-
type TypographyVariant = 'h1' | 'h2' | 'h3' | 'body';
|
|
229
|
-
declare module 'styled-components' {
|
|
230
|
-
interface DefaultTheme {
|
|
231
|
-
colors: {
|
|
232
|
-
background: CSSProperties['color'];
|
|
233
|
-
primary: {
|
|
234
|
-
main: CSSProperties['color'];
|
|
235
|
-
light: CSSProperties['color'];
|
|
236
|
-
lighter: CSSProperties['color'];
|
|
237
|
-
lightest: CSSProperties['color'];
|
|
238
|
-
lightest2: CSSProperties['color'];
|
|
239
|
-
};
|
|
240
|
-
text: {
|
|
241
|
-
main: CSSProperties['color'];
|
|
242
|
-
light: CSSProperties['color'];
|
|
243
|
-
lighter: CSSProperties['color'];
|
|
244
|
-
invert: CSSProperties['color'];
|
|
245
|
-
};
|
|
246
|
-
stroke: {
|
|
247
|
-
main: CSSProperties['color'];
|
|
248
|
-
light: CSSProperties['color'];
|
|
249
|
-
lighter: CSSProperties['color'];
|
|
250
|
-
};
|
|
251
|
-
disable: string;
|
|
252
|
-
chart: {
|
|
253
|
-
changelog: [
|
|
254
|
-
CSSProperties['color'],
|
|
255
|
-
CSSProperties['color'],
|
|
256
|
-
CSSProperties['color'],
|
|
257
|
-
CSSProperties['color'],
|
|
258
|
-
CSSProperties['color']
|
|
259
|
-
];
|
|
260
|
-
};
|
|
261
|
-
};
|
|
262
|
-
type: 'light' | 'dark';
|
|
263
|
-
typography: {
|
|
264
|
-
fontFamily: CSSProperties['fontFamily'];
|
|
265
|
-
lineHeight: CSSProperties['lineHeight'];
|
|
266
|
-
h1: CSSProperties['fontSize'];
|
|
267
|
-
h2: CSSProperties['fontSize'];
|
|
268
|
-
h3: CSSProperties['fontSize'];
|
|
269
|
-
body: CSSProperties['fontSize'];
|
|
270
|
-
};
|
|
271
|
-
}
|
|
272
|
-
}
|
|
273
|
-
declare const lightTheme: DefaultTheme;
|
|
274
|
-
declare const darkTheme: DefaultTheme;
|
|
275
|
-
|
|
276
430
|
interface TypographyProps {
|
|
277
431
|
variant?: TypographyVariant;
|
|
278
432
|
element?: ElementType;
|
|
@@ -373,20 +527,4 @@ interface StyledContainerProps {
|
|
|
373
527
|
}
|
|
374
528
|
declare const StyledContainer: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledContainerProps>> & string;
|
|
375
529
|
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
declare const ThemeProvider: ({ children }: {
|
|
379
|
-
children: any;
|
|
380
|
-
}) => react_jsx_runtime.JSX.Element;
|
|
381
|
-
|
|
382
|
-
/**
|
|
383
|
-
* Helper function to resolve nested color paths from theme
|
|
384
|
-
* Supports formats like 'primary.main', 'text.lightest', 'background'
|
|
385
|
-
*
|
|
386
|
-
* @param theme - The styled-components theme object
|
|
387
|
-
* @param colorPath - A dot-notation path to the color in the theme, e.g. 'primary.main'
|
|
388
|
-
* @returns The resolved color value or undefined if not found
|
|
389
|
-
*/
|
|
390
|
-
declare const resolveThemeColor: (theme: DefaultTheme, colorPath: string | undefined) => string | undefined;
|
|
391
|
-
|
|
392
|
-
export { AlertIcon, ApiIcon, ArrowCircleTopRightIcon, ArrowRightIcon, BugReportIcon, Button, CalendarIcon, ChevronLeftIcon, ChevronRightIcon, ClosedLockIcon, type ColorVariant, type ColumnTable, DataSetsIcon, DeepSearchIcon, DisabledVisibleIcon, DocsIcon, DownloadIcon, EditUserIcon, EnableVisibleIcon, EnterArrowLeftIcon, FiltersIcon, GlobalStyle, Header, HeaderDelimeter, HeaderSection, HomepageIcon, InfoCircleIcon, ListMenu, ListMenuItem, type ListMenuItemAnchorProps, type ListMenuItemBase, type ListMenuItemButtonProps, type ListMenuItemProps, type ListMenuProps, ListMenuSection, type ListMenuSectionProps, MapRadarIcon, MoonIcon, type NestedColorPaths, OpenLockIcon, OrganizationIcon, PageLayout, Pagination, type PaginationProps, PasswordFinderIcon, PhonebookIcon, PrintIcon, Profiler2Icon, ProfilerIcon, type RenderCellProps, type RenderHeaderCellProps, SandBoxIcon, Sidebar, SidebarContext, SidebarDelimeter, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, StatisticIcon, StyledContainer, SunIcon, Table, ThemeProvider, Typography, type TypographyProps, type TypographyVariant, UpRightArrowCircleIcon, VectorIcon, darkTheme, lightTheme, resolveThemeColor };
|
|
530
|
+
export { AlertIcon, ApiIcon, ArrowCircleTopRightIcon, ArrowRightIcon, type Breakpoint, BugReportIcon, Button, type ButtonColor, type ButtonElementStyle, type ButtonProps, type ButtonSize, type ButtonSizeStyle, type ButtonState, type ButtonVariant, CalendarIcon, ChevronLeftIcon, ChevronRightIcon, ClosedLockIcon, type ColorVariant, type ColumnTable, DataSetsIcon, DeepSearchIcon, DisabledVisibleIcon, DocsIcon, DownloadIcon, EditUserIcon, EnableVisibleIcon, EnterArrowLeftIcon, FiltersIcon, GlobalStyle, Header, HeaderDelimeter, HeaderSection, HomepageIcon, InfoCircleIcon, type InputSize, type InputState, type InputVariant, ListMenu, ListMenuItem, type ListMenuItemAnchorProps, type ListMenuItemBase, type ListMenuItemButtonProps, type ListMenuItemProps, type ListMenuProps, ListMenuSection, type ListMenuSectionProps, MapRadarIcon, MoonIcon, type NestedColorPaths, OpenLockIcon, OrganizationIcon, PageLayout, Pagination, type PaginationProps, PasswordFinderIcon, PhonebookIcon, PrintIcon, Profiler2Icon, ProfilerIcon, type RenderCellProps, type RenderHeaderCellProps, SandBoxIcon, Sidebar, SidebarContext, SidebarDelimeter, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, StatisticIcon, StyledContainer, SunIcon, Table, type Theme, ThemeProvider, Typography, type TypographyProps, type TypographyVariant, UpRightArrowCircleIcon, VectorIcon, convertPaletteToRem, darkTheme, getBreakpoint, getButtonSizeStyles, getButtonStyles, getTypographyStyles, lightTheme, lightThemePx, pxToRem, resolveThemeColor };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,15 +1,221 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as react from 'react';
|
|
3
|
-
import { SVGProps, ElementType, CSSProperties as CSSProperties$1, ReactNode, FC } from 'react';
|
|
3
|
+
import react__default, { SVGProps, ElementType, CSSProperties as CSSProperties$1, ReactNode, FC } from 'react';
|
|
4
4
|
import * as styled_components from 'styled-components';
|
|
5
|
-
import {
|
|
5
|
+
import { DefaultTheme, CSSProperties } from 'styled-components';
|
|
6
6
|
import * as styled_components_dist_types from 'styled-components/dist/types';
|
|
7
|
+
import { DefaultTheme as DefaultTheme$1 } from 'styled-components/dist/types';
|
|
7
8
|
|
|
8
|
-
|
|
9
|
+
declare const GlobalStyle: react.NamedExoticComponent<styled_components.ExecutionProps & object>;
|
|
10
|
+
|
|
11
|
+
declare const ThemeProvider: ({ children }: {
|
|
9
12
|
children: any;
|
|
10
|
-
|
|
13
|
+
}) => react_jsx_runtime.JSX.Element;
|
|
14
|
+
|
|
15
|
+
type ButtonVariant = 'fill' | 'outlined' | 'empty';
|
|
16
|
+
type ButtonColor = 'default' | 'primary' | 'secondary' | 'error';
|
|
17
|
+
type ButtonState = 'default' | 'hover' | 'active' | 'disabled';
|
|
18
|
+
type ButtonSize = 'small' | 'medium';
|
|
19
|
+
type InputVariant = 'default' | 'outlined' | 'filled';
|
|
20
|
+
type InputState = 'default' | 'focus' | 'error' | 'disabled';
|
|
21
|
+
type InputSize = 'small' | 'medium' | 'large';
|
|
22
|
+
type Breakpoint = 'xs' | 's' | 'm' | 'l' | 'xl';
|
|
23
|
+
type ButtonElementStyle = {
|
|
24
|
+
background: string;
|
|
25
|
+
text: string;
|
|
26
|
+
border: string;
|
|
27
|
+
boxShadow: string;
|
|
28
|
+
};
|
|
29
|
+
type ButtonSizeStyle = {
|
|
30
|
+
fontSize: number | string;
|
|
31
|
+
paddingInline: number | string;
|
|
32
|
+
paddingBlock: number | string;
|
|
33
|
+
borderRadius: number | string;
|
|
34
|
+
borderWidth: number | string;
|
|
35
|
+
gap: number | string;
|
|
36
|
+
iconSize: number | string;
|
|
37
|
+
};
|
|
38
|
+
type Theme = {
|
|
39
|
+
mode: 'light' | 'dark';
|
|
40
|
+
colors: {
|
|
41
|
+
background: string;
|
|
42
|
+
primary: {
|
|
43
|
+
main: string;
|
|
44
|
+
light: string;
|
|
45
|
+
lighter: string;
|
|
46
|
+
lightest: string;
|
|
47
|
+
lightest2: string;
|
|
48
|
+
};
|
|
49
|
+
text: {
|
|
50
|
+
main: string;
|
|
51
|
+
light: string;
|
|
52
|
+
lighter: string;
|
|
53
|
+
invert: string;
|
|
54
|
+
};
|
|
55
|
+
stroke: {
|
|
56
|
+
main: string;
|
|
57
|
+
light: string;
|
|
58
|
+
lighter: string;
|
|
59
|
+
};
|
|
60
|
+
disable: string;
|
|
61
|
+
success: string;
|
|
62
|
+
error: string;
|
|
63
|
+
warning: string;
|
|
64
|
+
info: string;
|
|
65
|
+
};
|
|
66
|
+
typography: {
|
|
67
|
+
fontFamily: string;
|
|
68
|
+
lineHeight: number;
|
|
69
|
+
variants: {
|
|
70
|
+
h1: {
|
|
71
|
+
fontSize: number | string;
|
|
72
|
+
};
|
|
73
|
+
h2: {
|
|
74
|
+
fontSize: number | string;
|
|
75
|
+
};
|
|
76
|
+
h3: {
|
|
77
|
+
fontSize: number | string;
|
|
78
|
+
};
|
|
79
|
+
body: {
|
|
80
|
+
fontSize: number | string;
|
|
81
|
+
};
|
|
82
|
+
};
|
|
83
|
+
};
|
|
84
|
+
breakpoints: Record<Breakpoint, number>;
|
|
85
|
+
zIndex: {
|
|
86
|
+
dropdown: number;
|
|
87
|
+
sticky: number;
|
|
88
|
+
fixed: number;
|
|
89
|
+
backdrop: number;
|
|
90
|
+
modal: number;
|
|
91
|
+
popover: number;
|
|
92
|
+
tooltip: number;
|
|
93
|
+
};
|
|
94
|
+
button: {
|
|
95
|
+
fill: Record<ButtonColor, Record<ButtonState, ButtonElementStyle>>;
|
|
96
|
+
outlined: Record<ButtonColor, Record<ButtonState, ButtonElementStyle>>;
|
|
97
|
+
empty: Record<ButtonColor, Record<ButtonState, ButtonElementStyle>>;
|
|
98
|
+
sizes: Record<ButtonSize, ButtonSizeStyle>;
|
|
99
|
+
};
|
|
100
|
+
sidebar: {
|
|
101
|
+
background: string;
|
|
102
|
+
width: number;
|
|
103
|
+
collapsedWidth: number;
|
|
104
|
+
text: {
|
|
105
|
+
default: string;
|
|
106
|
+
active: string;
|
|
107
|
+
hover: string;
|
|
108
|
+
};
|
|
109
|
+
item: {
|
|
110
|
+
default: {
|
|
111
|
+
background: string;
|
|
112
|
+
border: string;
|
|
113
|
+
padding: string;
|
|
114
|
+
height: number;
|
|
115
|
+
};
|
|
116
|
+
active: {
|
|
117
|
+
background: string;
|
|
118
|
+
borderLeft: string;
|
|
119
|
+
padding: string;
|
|
120
|
+
height: number;
|
|
121
|
+
};
|
|
122
|
+
hover: {
|
|
123
|
+
background: string;
|
|
124
|
+
border: string;
|
|
125
|
+
padding: string;
|
|
126
|
+
height: number;
|
|
127
|
+
};
|
|
128
|
+
};
|
|
129
|
+
section: {
|
|
130
|
+
background: string;
|
|
131
|
+
padding: string;
|
|
132
|
+
title: {
|
|
133
|
+
color: string;
|
|
134
|
+
fontSize: string;
|
|
135
|
+
fontWeight: number;
|
|
136
|
+
};
|
|
137
|
+
};
|
|
138
|
+
delimeter: {
|
|
139
|
+
color: string;
|
|
140
|
+
thickness: number;
|
|
141
|
+
margin: string;
|
|
142
|
+
};
|
|
143
|
+
};
|
|
144
|
+
};
|
|
145
|
+
type ThemeColors = Theme['colors'];
|
|
146
|
+
type ColorCategory = keyof ThemeColors;
|
|
147
|
+
type NestedColorPaths = keyof Pick<ThemeColors, 'background' | 'disable'> | `${Extract<ColorCategory, 'primary'>}.${keyof ThemeColors['primary']}` | `${Extract<ColorCategory, 'text'>}.${keyof ThemeColors['text']}` | `${Extract<ColorCategory, 'stroke'>}.${keyof ThemeColors['stroke']}`;
|
|
148
|
+
type ColorVariant = NestedColorPaths;
|
|
149
|
+
type TypographyVariant = 'h1' | 'h2' | 'h3' | 'body';
|
|
150
|
+
|
|
151
|
+
/**
|
|
152
|
+
* Helper function to resolve nested color paths from theme
|
|
153
|
+
* Supports formats like 'primary.main', 'text.lightest', 'background'
|
|
154
|
+
*
|
|
155
|
+
* @param theme - The styled-components theme object
|
|
156
|
+
* @param colorPath - A dot-notation path to the color in the theme, e.g. 'primary.main'
|
|
157
|
+
* @returns The resolved color value or undefined if not found
|
|
158
|
+
*/
|
|
159
|
+
declare const resolveThemeColor: (theme: DefaultTheme, colorPath: string | undefined) => string | undefined;
|
|
160
|
+
/**
|
|
161
|
+
* Converts a pixel value to rem units
|
|
162
|
+
*
|
|
163
|
+
* @param pxValue - The pixel value to convert. Can be a number or a string with 'px' suffix
|
|
164
|
+
* @param baseSize - Base font size in pixels. Default is 16px (browser default)
|
|
165
|
+
* @returns The value in rem units as a string (e.g., "1.25rem")
|
|
166
|
+
*/
|
|
167
|
+
declare const pxToRem: (pxValue: number | string, baseSize?: number) => string;
|
|
168
|
+
/**
|
|
169
|
+
* Recursively converts all pixel values in an object to rem units
|
|
170
|
+
*
|
|
171
|
+
* @param obj - The object containing values to convert
|
|
172
|
+
* @param baseSize - Base font size in pixels. Default is 16px
|
|
173
|
+
* @returns A new object with pixel values converted to rem
|
|
174
|
+
*/
|
|
175
|
+
declare const convertPaletteToRem: (obj: Record<string, any>, baseSize?: number) => Record<string, any>;
|
|
176
|
+
/**
|
|
177
|
+
* Функція для отримання стилів кнопки за варіантом, кольором, станом та розміром
|
|
178
|
+
*/
|
|
179
|
+
declare const getButtonStyles: <V extends ButtonVariant>(theme: DefaultTheme, variant: ButtonVariant, color: ButtonColor, state: ButtonState) => ButtonElementStyle;
|
|
180
|
+
declare const getButtonSizeStyles: (theme: DefaultTheme, size: ButtonSize) => ButtonSizeStyle;
|
|
181
|
+
/**
|
|
182
|
+
* Функція для отримання типографічних стилів
|
|
183
|
+
*/
|
|
184
|
+
declare const getTypographyStyles: (theme: DefaultTheme, variant?: string) => {
|
|
185
|
+
fontSize: number | string;
|
|
186
|
+
} | {
|
|
187
|
+
fontSize: number | string;
|
|
188
|
+
} | {
|
|
189
|
+
fontSize: number | string;
|
|
190
|
+
} | {
|
|
191
|
+
fontSize: number | string;
|
|
192
|
+
};
|
|
193
|
+
/**
|
|
194
|
+
* Функція для отримання медіа-запитів для breakpoints
|
|
195
|
+
*/
|
|
196
|
+
declare const getBreakpoint: (theme: DefaultTheme, size?: Breakpoint) => string;
|
|
197
|
+
|
|
198
|
+
/**
|
|
199
|
+
* Палітра, що містить як кольори, так і розміри в px
|
|
200
|
+
* Кольори взято з теми, розміри будуть автоматично конвертовані в rem
|
|
201
|
+
*/
|
|
202
|
+
declare const lightThemePx: Theme;
|
|
203
|
+
declare const lightTheme: DefaultTheme$1;
|
|
204
|
+
declare const darkTheme: DefaultTheme$1;
|
|
205
|
+
|
|
206
|
+
interface BaseButtonProps {
|
|
207
|
+
children?: any;
|
|
208
|
+
variant?: ButtonVariant;
|
|
209
|
+
color?: ButtonColor;
|
|
210
|
+
size?: ButtonSize;
|
|
211
|
+
disabled?: boolean;
|
|
212
|
+
fullWidth?: boolean;
|
|
213
|
+
className?: string;
|
|
214
|
+
icon?: any;
|
|
215
|
+
iconPosition?: 'left' | 'right';
|
|
11
216
|
}
|
|
12
|
-
|
|
217
|
+
type ButtonProps = BaseButtonProps & (react__default.AnchorHTMLAttributes<HTMLAnchorElement> | react__default.ButtonHTMLAttributes<HTMLButtonElement>);
|
|
218
|
+
declare const Button: ({ children, variant, color, size, disabled, fullWidth, className, icon, iconPosition, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
|
|
13
219
|
|
|
14
220
|
interface AlertIconProps extends SVGProps<SVGSVGElement> {
|
|
15
221
|
fill?: string;
|
|
@@ -221,58 +427,6 @@ interface SidebarSectionProps {
|
|
|
221
427
|
}
|
|
222
428
|
declare const SidebarSection: ({ grow, shrink, basis, items }: SidebarSectionProps) => react_jsx_runtime.JSX.Element;
|
|
223
429
|
|
|
224
|
-
type ThemeColors = DefaultTheme['colors'];
|
|
225
|
-
type ColorCategory = keyof ThemeColors;
|
|
226
|
-
type NestedColorPaths = keyof Pick<ThemeColors, 'background' | 'disable'> | `${Extract<ColorCategory, 'primary'>}.${keyof ThemeColors['primary']}` | `${Extract<ColorCategory, 'text'>}.${keyof ThemeColors['text']}` | `${Extract<ColorCategory, 'stroke'>}.${keyof ThemeColors['stroke']}`;
|
|
227
|
-
type ColorVariant = NestedColorPaths;
|
|
228
|
-
type TypographyVariant = 'h1' | 'h2' | 'h3' | 'body';
|
|
229
|
-
declare module 'styled-components' {
|
|
230
|
-
interface DefaultTheme {
|
|
231
|
-
colors: {
|
|
232
|
-
background: CSSProperties['color'];
|
|
233
|
-
primary: {
|
|
234
|
-
main: CSSProperties['color'];
|
|
235
|
-
light: CSSProperties['color'];
|
|
236
|
-
lighter: CSSProperties['color'];
|
|
237
|
-
lightest: CSSProperties['color'];
|
|
238
|
-
lightest2: CSSProperties['color'];
|
|
239
|
-
};
|
|
240
|
-
text: {
|
|
241
|
-
main: CSSProperties['color'];
|
|
242
|
-
light: CSSProperties['color'];
|
|
243
|
-
lighter: CSSProperties['color'];
|
|
244
|
-
invert: CSSProperties['color'];
|
|
245
|
-
};
|
|
246
|
-
stroke: {
|
|
247
|
-
main: CSSProperties['color'];
|
|
248
|
-
light: CSSProperties['color'];
|
|
249
|
-
lighter: CSSProperties['color'];
|
|
250
|
-
};
|
|
251
|
-
disable: string;
|
|
252
|
-
chart: {
|
|
253
|
-
changelog: [
|
|
254
|
-
CSSProperties['color'],
|
|
255
|
-
CSSProperties['color'],
|
|
256
|
-
CSSProperties['color'],
|
|
257
|
-
CSSProperties['color'],
|
|
258
|
-
CSSProperties['color']
|
|
259
|
-
];
|
|
260
|
-
};
|
|
261
|
-
};
|
|
262
|
-
type: 'light' | 'dark';
|
|
263
|
-
typography: {
|
|
264
|
-
fontFamily: CSSProperties['fontFamily'];
|
|
265
|
-
lineHeight: CSSProperties['lineHeight'];
|
|
266
|
-
h1: CSSProperties['fontSize'];
|
|
267
|
-
h2: CSSProperties['fontSize'];
|
|
268
|
-
h3: CSSProperties['fontSize'];
|
|
269
|
-
body: CSSProperties['fontSize'];
|
|
270
|
-
};
|
|
271
|
-
}
|
|
272
|
-
}
|
|
273
|
-
declare const lightTheme: DefaultTheme;
|
|
274
|
-
declare const darkTheme: DefaultTheme;
|
|
275
|
-
|
|
276
430
|
interface TypographyProps {
|
|
277
431
|
variant?: TypographyVariant;
|
|
278
432
|
element?: ElementType;
|
|
@@ -373,20 +527,4 @@ interface StyledContainerProps {
|
|
|
373
527
|
}
|
|
374
528
|
declare const StyledContainer: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledContainerProps>> & string;
|
|
375
529
|
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
declare const ThemeProvider: ({ children }: {
|
|
379
|
-
children: any;
|
|
380
|
-
}) => react_jsx_runtime.JSX.Element;
|
|
381
|
-
|
|
382
|
-
/**
|
|
383
|
-
* Helper function to resolve nested color paths from theme
|
|
384
|
-
* Supports formats like 'primary.main', 'text.lightest', 'background'
|
|
385
|
-
*
|
|
386
|
-
* @param theme - The styled-components theme object
|
|
387
|
-
* @param colorPath - A dot-notation path to the color in the theme, e.g. 'primary.main'
|
|
388
|
-
* @returns The resolved color value or undefined if not found
|
|
389
|
-
*/
|
|
390
|
-
declare const resolveThemeColor: (theme: DefaultTheme, colorPath: string | undefined) => string | undefined;
|
|
391
|
-
|
|
392
|
-
export { AlertIcon, ApiIcon, ArrowCircleTopRightIcon, ArrowRightIcon, BugReportIcon, Button, CalendarIcon, ChevronLeftIcon, ChevronRightIcon, ClosedLockIcon, type ColorVariant, type ColumnTable, DataSetsIcon, DeepSearchIcon, DisabledVisibleIcon, DocsIcon, DownloadIcon, EditUserIcon, EnableVisibleIcon, EnterArrowLeftIcon, FiltersIcon, GlobalStyle, Header, HeaderDelimeter, HeaderSection, HomepageIcon, InfoCircleIcon, ListMenu, ListMenuItem, type ListMenuItemAnchorProps, type ListMenuItemBase, type ListMenuItemButtonProps, type ListMenuItemProps, type ListMenuProps, ListMenuSection, type ListMenuSectionProps, MapRadarIcon, MoonIcon, type NestedColorPaths, OpenLockIcon, OrganizationIcon, PageLayout, Pagination, type PaginationProps, PasswordFinderIcon, PhonebookIcon, PrintIcon, Profiler2Icon, ProfilerIcon, type RenderCellProps, type RenderHeaderCellProps, SandBoxIcon, Sidebar, SidebarContext, SidebarDelimeter, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, StatisticIcon, StyledContainer, SunIcon, Table, ThemeProvider, Typography, type TypographyProps, type TypographyVariant, UpRightArrowCircleIcon, VectorIcon, darkTheme, lightTheme, resolveThemeColor };
|
|
530
|
+
export { AlertIcon, ApiIcon, ArrowCircleTopRightIcon, ArrowRightIcon, type Breakpoint, BugReportIcon, Button, type ButtonColor, type ButtonElementStyle, type ButtonProps, type ButtonSize, type ButtonSizeStyle, type ButtonState, type ButtonVariant, CalendarIcon, ChevronLeftIcon, ChevronRightIcon, ClosedLockIcon, type ColorVariant, type ColumnTable, DataSetsIcon, DeepSearchIcon, DisabledVisibleIcon, DocsIcon, DownloadIcon, EditUserIcon, EnableVisibleIcon, EnterArrowLeftIcon, FiltersIcon, GlobalStyle, Header, HeaderDelimeter, HeaderSection, HomepageIcon, InfoCircleIcon, type InputSize, type InputState, type InputVariant, ListMenu, ListMenuItem, type ListMenuItemAnchorProps, type ListMenuItemBase, type ListMenuItemButtonProps, type ListMenuItemProps, type ListMenuProps, ListMenuSection, type ListMenuSectionProps, MapRadarIcon, MoonIcon, type NestedColorPaths, OpenLockIcon, OrganizationIcon, PageLayout, Pagination, type PaginationProps, PasswordFinderIcon, PhonebookIcon, PrintIcon, Profiler2Icon, ProfilerIcon, type RenderCellProps, type RenderHeaderCellProps, SandBoxIcon, Sidebar, SidebarContext, SidebarDelimeter, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, StatisticIcon, StyledContainer, SunIcon, Table, type Theme, ThemeProvider, Typography, type TypographyProps, type TypographyVariant, UpRightArrowCircleIcon, VectorIcon, convertPaletteToRem, darkTheme, getBreakpoint, getButtonSizeStyles, getButtonStyles, getTypographyStyles, lightTheme, lightThemePx, pxToRem, resolveThemeColor };
|