@evergis/uilib-gl 1.0.137 → 1.0.138
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/molecules/ColorInput/styled.d.ts +1 -1
- package/dist/molecules/CustomToggles/styled.d.ts +1 -1
- package/dist/molecules/Expander/styled.d.ts +1 -1
- package/dist/molecules/IconButton/constants.d.ts +9 -0
- package/dist/molecules/IconButton/index.d.ts +2 -0
- package/dist/molecules/IconButton/styled.d.ts +3 -3
- package/dist/molecules/IconButton/styledParts.d.ts +4 -0
- package/dist/molecules/IconButton/types.d.ts +53 -1
- package/dist/molecules/IconButton/utils/getIconButtonColors.d.ts +7 -0
- package/dist/molecules/IconButton/utils/getVariantStateStyles.d.ts +4 -0
- package/dist/molecules/IconButton/utils/iconButtonProps.d.ts +7 -0
- package/dist/molecules/IconButton/utils/index.d.ts +3 -0
- package/dist/molecules/IconButton/variantStyles.d.ts +7 -0
- package/dist/theme/ITheme.d.ts +14 -0
- package/dist/theme/defaultThemeConstants.d.ts +6 -1
- package/dist/uilib-gl.esm.js +408 -15
- package/dist/uilib-gl.esm.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export declare const Container: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
3
3
|
export declare const Input: import("styled-components").StyledComponent<import("react").ComponentType<any>, import("styled-components").DefaultTheme, {}, never>;
|
|
4
|
-
export declare const TextButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, import("../IconButton").IconButtonProps, never>;
|
|
4
|
+
export declare const TextButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, import("../IconButton").IconButtonProps & import("../IconButton").IconButtonVariantStyleProps, never>;
|
|
@@ -4,4 +4,4 @@ export declare const FadingIcon: import("styled-components").StyledComponent<"sp
|
|
|
4
4
|
export interface ICustomToggleProps extends IconButtonProps {
|
|
5
5
|
isSelected?: boolean;
|
|
6
6
|
}
|
|
7
|
-
export declare const CustomToggle: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, IconButtonProps & ICustomToggleProps, never>;
|
|
7
|
+
export declare const CustomToggle: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, IconButtonProps & import("../IconButton").IconButtonVariantStyleProps & ICustomToggleProps, never>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const RotatingButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, import("../IconButton").IconButtonProps & import("../CustomToggles").ICustomToggleProps, never>;
|
|
1
|
+
export declare const RotatingButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, import("../IconButton").IconButtonProps & import("../IconButton").IconButtonVariantStyleProps & import("../CustomToggles").ICustomToggleProps, never>;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { IconTypesKeys } from "../../atoms/Icon";
|
|
2
|
+
import { IconButtonShape, IconButtonSize, IconButtonVariant } from "./types";
|
|
3
|
+
export declare const ICON_BUTTON_VARIANTS: IconButtonVariant[];
|
|
4
|
+
export declare const ICON_BUTTON_SIZES: IconButtonSize[];
|
|
5
|
+
export declare const ICON_BUTTON_SHAPES: IconButtonShape[];
|
|
6
|
+
export declare const DEFAULT_ICON_BUTTON_VARIANT: IconButtonVariant;
|
|
7
|
+
export declare const DEFAULT_ICON_BUTTON_SIZE: IconButtonSize;
|
|
8
|
+
export declare const DEFAULT_ICON_BUTTON_SHAPE: IconButtonShape;
|
|
9
|
+
export declare const ICON_BUTTON_CHEVRON_KIND: IconTypesKeys;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { IconButtonProps } from "./types";
|
|
2
|
-
export
|
|
1
|
+
import { IconButtonProps, IconButtonVariantStyleProps } from "./types";
|
|
2
|
+
export { IconButtonChevron, IconButtonInnerChild } from "./styledParts";
|
|
3
3
|
export declare const buttonMixin: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<IconButtonProps, import("styled-components").DefaultTheme>>;
|
|
4
|
-
export declare const IconButtonButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, IconButtonProps, never>;
|
|
4
|
+
export declare const IconButtonButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, IconButtonProps & IconButtonVariantStyleProps, never>;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export declare const IconButtonInnerChild: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
|
|
2
|
+
export declare const IconButtonChevron: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("../../atoms/Icon").IIconProps & {
|
|
3
|
+
$open?: boolean | undefined;
|
|
4
|
+
}, never>;
|
|
@@ -1,16 +1,38 @@
|
|
|
1
|
-
import { ButtonHTMLAttributes,
|
|
1
|
+
import { ButtonHTMLAttributes, MouseEvent, ReactNode } from "react";
|
|
2
2
|
import { IconTypesKeys } from "../../atoms/Icon";
|
|
3
|
+
import { IconButtonSizeKey } from "../../theme/ITheme";
|
|
4
|
+
export declare type IconButtonVariant = "solid" | "soft" | "outline" | "ghost";
|
|
5
|
+
export declare type IconButtonAccentColor = "primary" | "secondary" | "error" | "violet";
|
|
6
|
+
export declare type IconButtonColorKey = IconButtonAccentColor | "neutral";
|
|
7
|
+
export declare type IconButtonSize = IconButtonSizeKey;
|
|
8
|
+
export declare type IconButtonShape = "square" | "round";
|
|
3
9
|
export interface IIconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
4
10
|
kind?: IconTypesKeys;
|
|
5
11
|
primary?: boolean;
|
|
6
12
|
secondary?: boolean;
|
|
7
13
|
error?: boolean;
|
|
14
|
+
violet?: boolean;
|
|
8
15
|
tabIndex?: number;
|
|
9
16
|
innerRef?: (node: HTMLButtonElement | null) => void;
|
|
10
17
|
onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
|
|
11
18
|
icon?: ReactNode;
|
|
12
19
|
iconRight?: boolean;
|
|
13
20
|
active?: boolean;
|
|
21
|
+
/** Заливка и обводка. Включает новый режим. */
|
|
22
|
+
variant?: IconButtonVariant;
|
|
23
|
+
/**
|
|
24
|
+
* Произвольный CSS-цвет (оттенки hover/нажатия вычисляются); перекрывает флаги цвета.
|
|
25
|
+
* Сам по себе новый режим не включает. Без него и без флагов — neutral.
|
|
26
|
+
*/
|
|
27
|
+
color?: string;
|
|
28
|
+
/** Высота 24 / 32 / 40 / 48. Включает новый режим. */
|
|
29
|
+
size?: IconButtonSize;
|
|
30
|
+
/** square — скругление по размеру, round — пилюля/круг. Включает новый режим. */
|
|
31
|
+
shape?: IconButtonShape;
|
|
32
|
+
/** Скругление вручную: число — px, строка — CSS. Перекрывает shape. Включает новый режим. */
|
|
33
|
+
radius?: number | string;
|
|
34
|
+
/** Шеврон справа; при active повёрнут вверх. Включает новый режим. */
|
|
35
|
+
dropdown?: boolean;
|
|
14
36
|
}
|
|
15
37
|
export interface IconButtonProps {
|
|
16
38
|
disabled?: boolean;
|
|
@@ -23,3 +45,33 @@ export interface IconButtonProps {
|
|
|
23
45
|
active?: boolean;
|
|
24
46
|
hasBg?: boolean;
|
|
25
47
|
}
|
|
48
|
+
export interface IconButtonVariantStyleProps {
|
|
49
|
+
$variant?: IconButtonVariant;
|
|
50
|
+
$color?: IconButtonColorKey;
|
|
51
|
+
$customColor?: string;
|
|
52
|
+
$size?: IconButtonSize;
|
|
53
|
+
$shape?: IconButtonShape;
|
|
54
|
+
$radius?: string;
|
|
55
|
+
$iconOnly?: boolean;
|
|
56
|
+
}
|
|
57
|
+
export interface IconButtonColorSet {
|
|
58
|
+
base: string;
|
|
59
|
+
dark: string;
|
|
60
|
+
deep: string;
|
|
61
|
+
contrast: string;
|
|
62
|
+
contrastPressed: string;
|
|
63
|
+
text: string;
|
|
64
|
+
textAccent: string;
|
|
65
|
+
border: string;
|
|
66
|
+
tint: string;
|
|
67
|
+
tintDeep: string;
|
|
68
|
+
ghostPressed: string;
|
|
69
|
+
}
|
|
70
|
+
export interface IconButtonStateStyles {
|
|
71
|
+
normal: string;
|
|
72
|
+
hover: string;
|
|
73
|
+
pressed: string;
|
|
74
|
+
disabled: string;
|
|
75
|
+
}
|
|
76
|
+
export declare type IconButtonModeProps = Pick<IIconButtonProps, "variant" | "size" | "shape" | "radius" | "dropdown">;
|
|
77
|
+
export declare type IconButtonColorFlags = Pick<IIconButtonProps, "primary" | "secondary" | "error" | "violet">;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { IPalette } from "../../../theme/ITheme";
|
|
2
|
+
import { IconButtonColorKey, IconButtonColorSet } from "../types";
|
|
3
|
+
/**
|
|
4
|
+
* Набор цветов кнопки. Произвольный CSS-цвет важнее ключа и затемняет сам себя (шаги подобраны
|
|
5
|
+
* по primary макета); нераспознанный CSS-цвет откатывается на ключ. Ключ берёт base/Dark/Deep из палитры.
|
|
6
|
+
*/
|
|
7
|
+
export declare const getIconButtonColors: (palette: IPalette, color: IconButtonColorKey, customColor?: string | undefined) => IconButtonColorSet;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { IPalette } from "../../../theme/ITheme";
|
|
2
|
+
import { IconButtonColorSet, IconButtonStateStyles, IconButtonVariant } from "../types";
|
|
3
|
+
/** CSS-декларации кнопки в каждом состоянии — по таблице состояний из спецификации. */
|
|
4
|
+
export declare const getVariantStateStyles: (variant: IconButtonVariant, colors: IconButtonColorSet, palette: IPalette) => IconButtonStateStyles;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { IconButtonColorFlags, IconButtonColorKey, IconButtonModeProps } from "../types";
|
|
2
|
+
/** Новый режим включают только собственные пропсы; color — нативный атрибут, его уже передают старые обёртки. */
|
|
3
|
+
export declare const isVariantMode: ({ variant, size, shape, radius, dropdown }: IconButtonModeProps) => boolean;
|
|
4
|
+
/** Цвет по флагам в порядке primary → secondary → error → violet, иначе neutral. */
|
|
5
|
+
export declare const getIconButtonColorKey: ({ primary, secondary, error, violet, }: IconButtonColorFlags) => IconButtonColorKey;
|
|
6
|
+
/** Число — px; пустая строка и нечисло (NaN) — «не задано», скругление берётся из shape. */
|
|
7
|
+
export declare const toCssRadius: (radius?: string | number | undefined) => string | undefined;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { DefaultTheme } from "styled-components";
|
|
2
|
+
import { IconButtonProps, IconButtonVariantStyleProps } from "./types";
|
|
3
|
+
declare type VariantProps = IconButtonProps & IconButtonVariantStyleProps & {
|
|
4
|
+
theme: DefaultTheme;
|
|
5
|
+
};
|
|
6
|
+
export declare const iconButtonVariantMixin: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<VariantProps, DefaultTheme>>;
|
|
7
|
+
export {};
|
package/dist/theme/ITheme.d.ts
CHANGED
|
@@ -13,6 +13,9 @@ export interface IPalette {
|
|
|
13
13
|
error: string;
|
|
14
14
|
errorDark: string;
|
|
15
15
|
errorDeep: string;
|
|
16
|
+
violet: string;
|
|
17
|
+
violetDark: string;
|
|
18
|
+
violetDeep: string;
|
|
16
19
|
background: string;
|
|
17
20
|
backgroundAlpha: string;
|
|
18
21
|
element: string;
|
|
@@ -137,11 +140,22 @@ export interface IIcon {
|
|
|
137
140
|
color: IIconColors;
|
|
138
141
|
disabledColor: string;
|
|
139
142
|
}
|
|
143
|
+
export declare type IconButtonSizeKey = "small" | "medium" | "large" | "xlarge";
|
|
144
|
+
export interface IIconButtonSizeTokens {
|
|
145
|
+
height: string;
|
|
146
|
+
paddingX: string;
|
|
147
|
+
gap: string;
|
|
148
|
+
iconSize: string;
|
|
149
|
+
font: string;
|
|
150
|
+
textTransform: "none" | "uppercase";
|
|
151
|
+
radius: string;
|
|
152
|
+
}
|
|
140
153
|
export interface IIconButton {
|
|
141
154
|
color: IIconColors;
|
|
142
155
|
hoverColor: IIconColors;
|
|
143
156
|
activeColor: IIconColors;
|
|
144
157
|
disabledColor: string;
|
|
158
|
+
sizes: Record<IconButtonSizeKey, IIconButtonSizeTokens>;
|
|
145
159
|
}
|
|
146
160
|
export interface IIconColors {
|
|
147
161
|
primary: string;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { IFonts, IPalette, IShadows, ITransition } from "./ITheme";
|
|
1
|
+
import { IconButtonSizeKey, IFonts, IIconButtonSizeTokens, IPalette, IShadows, ITransition } from "./ITheme";
|
|
2
2
|
export declare const palette: IPalette;
|
|
3
3
|
export declare const shadows: IShadows;
|
|
4
4
|
export declare const collapseDuration = 500;
|
|
@@ -23,3 +23,8 @@ export declare const borderRadius: {
|
|
|
23
23
|
* Black 900
|
|
24
24
|
*/
|
|
25
25
|
export declare const fonts: IFonts;
|
|
26
|
+
/**
|
|
27
|
+
* Размеры IconButton по макету: высота, поля, просвет, иконка, шрифт, скругление square.
|
|
28
|
+
* Жирное начертание — отдельное семейство NunitoSans-bold, поэтому вес в шрифте всегда 400.
|
|
29
|
+
*/
|
|
30
|
+
export declare const iconButtonSizes: Record<IconButtonSizeKey, IIconButtonSizeTokens>;
|