@true-engineering/true-react-common-ui-kit 2.6.0 → 3.0.0-alpha.0

package/dist/components/IncrementInput/IncrementInput.styles.d.ts

@@ -1,63 +1,9 @@
-import { ComponentStyles } from '../../types';
+import { ITweakStyles } from '../../theme';
+import { IInputStyles } from '../Input';
 export declare const BUTTONS_WIDTH = 36;
 export declare const BUTTONS_GAP = 2;
-export declare const styles: {
-    root: {
-        display: string;
-        alignItems: string;
-        position: string;
-    };
-    buttons: {
-        display: string;
-        flexDirection: string;
-        width: number;
-        position: string;
-        right: number;
-        top: number;
-        bottom: number;
-        zIndex: number;
-    };
-    button: {
-        width: string;
-        height: number;
-        border: string;
-        outline: string;
-        backgroundColor: "#f6f8fc";
-        transition: string;
-        color: "#505f79";
-        cursor: string;
-        display: string;
-        alignItems: string;
-        justifyContent: string;
-        padding: number[];
-        '&:hover, &:focus': {
-            backgroundColor: "#dde3ed";
-        };
-        '&:active': {
-            backgroundColor: "#95a0b3";
-        };
-        '&:first-child': {
-            marginBottom: number;
-        };
-    };
-    disabledButton: {
-        backgroundColor: "#ffffff";
-        color: "#95a0b3";
-        cursor: string;
-        '&:hover': {
-            backgroundColor: "#ffffff";
-        };
-    };
-    errorButton: {};
-    tweakInput: {
-        input: {
-            '&:not($withControls)': {
-                paddingRight: number;
-            };
-        };
-        controls: {
-            paddingRight: number;
-        };
-    };
-};
-export declare type IncrementInputStyles = ComponentStyles<typeof styles>;
+export declare const useStyles: import("../../theme").IUseStyles<"root" | "button" | "buttons" | "disabledButton" | "errorButton", unknown>;
+export declare const inputStyles: IInputStyles;
+export declare type IIncrementInputStyles = ITweakStyles<typeof useStyles, {
+    tweakInput: IInputStyles;
+}>;

package/dist/components/IncrementInput/index.d.ts

@@ -1,2 +1,2 @@
 export * from './IncrementInput';
-export type { IncrementInputStyles } from './IncrementInput.styles';
+export type { IIncrementInputStyles } from './IncrementInput.styles';

package/dist/components/Input/Input.d.ts

@@ -1,9 +1,8 @@
 import { FormEvent, FocusEvent, KeyboardEvent, ClipboardEvent, ReactNode } from 'react';
 import { ICommonProps, IIcon } from '../../types';
 import { IReactInputMaskProps } from './types';
-import { InputStyles } from './Input.styles';
-export interface IInputProps extends ICommonProps, IReactInputMaskProps {
-    tweakStyles?: InputStyles;
+import { IInputStyles } from './Input.styles';
+export interface IInputProps extends ICommonProps<IInputStyles>, IReactInputMaskProps {
     value?: string;
     label?: ReactNode;
     placeholder?: string;
@@ -46,7 +45,6 @@ export interface IInputProps extends ICommonProps, IReactInputMaskProps {
     hasRequiredLabel?: boolean;
     shouldFocusOnMount?: boolean;
     maxLength?: number;
-    testId?: string;
     tabIndex?: number;
     shouldAlwaysShowPlaceholder?: boolean;
     onChange(value: string, event: FormEvent<HTMLInputElement>): void;

package/dist/components/Input/Input.styles.d.ts

@@ -1,248 +1,7 @@
-import { ComponentStyles } from '../../types';
+import { ITweakStyles } from '../../theme';
+import { IThemedPreloaderStyles } from '../ThemedPreloader';
 export declare const AUTOSIZE_MAX_WIDTH = 480;
-export declare const styles: {
-    root: {
-        width: string;
-        boxSizing: string;
-        position: string;
-    };
-    inputWrapper: {
-        display: string;
-        width: string;
-        height: 48;
-        boxSizing: string;
-        transition: string;
-        transitionProperty: string;
-        backgroundColor: string;
-        position: string;
-    };
-    inputContent: {
-        fontSize: number;
-        fontFamily: string;
-        padding: number[];
-    };
-    input: {
-        extend: string;
-        width: string;
-        height: string;
-        outline: string;
-        boxSizing: string;
-        outlineStyle: string;
-        transition: string;
-        transitionProperty: string;
-        border: string;
-        background: string;
-        '&::placeholder': {
-            opacity: number;
-        };
-        MozAppearance: string;
-        '&::-webkit-inner-spin-button,&::-webkit-outer-spin-button': {
-            WebkitAppearance: string;
-            margin: number;
-        };
-    };
-    autosize: {
-        display: string;
-        verticalAlign: string;
-        alignItems: string;
-        justifyContent: string;
-        '&::after, input': {
-            width: string;
-            minWidth: string;
-            gridArea: string;
-            font: string;
-            justifySelf: string;
-        };
-        '&::after': {
-            maxWidth: number;
-            content: string;
-            visibility: string;
-            whiteSpace: string;
-        };
-    };
-    focused: {
-        position: string;
-        zIndex: number;
-    };
-    unitsWrapper: {
-        extend: string;
-        position: string;
-        left: number;
-        height: string;
-        boxSizing: string;
-        display: string;
-        alignItems: string;
-        pointerEvents: string;
-    };
-    fakeValue: {
-        visibility: string;
-    };
-    units: {
-        paddingLeft: number;
-    };
-    withFloatingLabel: {
-        paddingTop: number;
-    };
-    floatingLabelWithoutPadding: {
-        paddingTop: number;
-        paddingLeft: number;
-    };
-    floating: {};
-    activeLabel: {
-        display: string;
-        '&$floating': {
-            display: string;
-            transform: string;
-        };
-    };
-    required: {
-        '&:before': {
-            content: string;
-            position: string;
-            left: number;
-            top: string;
-            transform: string;
-            width: number;
-            height: number;
-            borderRadius: string;
-        };
-    };
-    label: {
-        position: string;
-        pointerEvents: string;
-        left: number;
-        top: string;
-        transformOrigin: string;
-        transform: string;
-        transition: string;
-        transitionProperty: string;
-        fontSize: number;
-    };
-    floatingWithoutPadding: {
-        left: number;
-    };
-    requiredLabel: {
-        '&:after': {
-            content: string;
-            position: string;
-            right: number;
-            top: number;
-            transform: string;
-            width: number;
-            height: number;
-            borderRadius: string;
-        };
-    };
-    activeIcon: {
-        cursor: string;
-    };
-    'border-top': {
-        borderRadius: number;
-        borderWidth: number[];
-    };
-    'border-bottom': {
-        borderRadius: number;
-        borderWidth: number[];
-    };
-    'border-left': {
-        borderRadius: number;
-        borderWidth: number[];
-    };
-    'border-right': {
-        borderRadius: number;
-        borderWidth: number[];
-    };
-    top: {
-        borderBottomLeftRadius: number;
-        borderBottomRightRadius: number;
-    };
-    bottom: {
-        borderTopLeftRadius: number;
-        borderTopRightRadius: number;
-    };
-    'top-left': {
-        borderTopRightRadius: number;
-        borderBottomLeftRadius: number;
-        borderBottomRightRadius: number;
-    };
-    'top-right': {
-        borderTopLeftRadius: number;
-        borderBottomLeftRadius: number;
-        borderBottomRightRadius: number;
-    };
-    'bottom-left': {
-        borderTopLeftRadius: number;
-        borderTopRightRadius: number;
-        borderBottomRightRadius: number;
-    };
-    'bottom-right': {
-        borderTopLeftRadius: number;
-        borderTopRightRadius: number;
-        borderBottomLeftRadius: number;
-    };
-    left: {
-        borderTopRightRadius: number;
-        borderBottomRightRadius: number;
-    };
-    right: {
-        borderTopLeftRadius: number;
-        borderBottomLeftRadius: number;
-    };
-    middle: {
-        borderRadius: number;
-    };
-    controls: {
-        display: string;
-        gridArea: string;
-    };
-    icon: {
-        display: string;
-        alignItems: string;
-        padding: number[];
-        width: number;
-        transition: string;
-        boxSizing: string;
-        '&:last-child': {
-            paddingRight: number;
-        };
-        '& + $units': {
-            marginLeft: number;
-        };
-    };
-    clearIcon: {
-        extend: string;
-    };
-    inputIcon: {
-        extend: string;
-    };
-    withIcons: {
-        paddingRight: number;
-    };
-    withControls: {};
-    invalid: {};
-    disabled: {};
-    invalidLabel: {};
-    error: {
-        fontSize: number;
-    };
-    info: {
-        fontSize: number;
-        paddingTop: number;
-        paddingLeft: number;
-    };
-    'error-top': {
-        position: string;
-        top: number;
-        left: number;
-        padding: number[];
-        zIndex: number;
-    };
-    'error-bottom': {
-        paddingTop: number;
-        paddingLeft: number;
-    };
-    loading: {};
-    withUnits: {};
-    tweakPreloader: {};
-};
-export declare type InputStyles = ComponentStyles<typeof styles>;
+export declare const useStyles: import("../../theme").IUseStyles<"top" | "bottom" | "right" | "left" | "root" | "middle" | "icon" | "disabled" | "input" | "label" | "error" | "invalid" | "loading" | "inputWrapper" | "autosize" | "focused" | "inputContent" | "unitsWrapper" | "fakeValue" | "units" | "withFloatingLabel" | "floatingLabelWithoutPadding" | "floating" | "activeLabel" | "required" | "floatingWithoutPadding" | "requiredLabel" | "activeIcon" | "border-top" | "border-bottom" | "border-left" | "border-right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "controls" | "clearIcon" | "inputIcon" | "withIcons" | "withControls" | "invalidLabel" | "info" | "error-top" | "error-bottom" | "withUnits", unknown>;
+export declare type IInputStyles = ITweakStyles<typeof useStyles, {
+    tweakPreloader: IThemedPreloaderStyles;
+}>;

package/dist/components/Input/index.d.ts

@@ -1,3 +1,3 @@
 export * from './Input';
 export * from './types';
-export type { InputStyles } from './Input.styles';
+export type { IInputStyles } from './Input.styles';

package/dist/components/List/List.d.ts

@@ -1,11 +1,9 @@
 import { FC } from 'react';
 import { ICommonProps } from '../../types';
 import { IListItem } from './types';
-import { ListStyles } from './List.styles';
-export interface IListProps extends ICommonProps {
-    tweakStyles?: ListStyles;
+import { IListStyles } from './List.styles';
+export interface IListProps extends ICommonProps<IListStyles> {
     items: IListItem[];
-    testId?: string;
     onClick?(): void;
 }
 export declare const List: FC<IListProps>;

package/dist/components/List/List.styles.d.ts

@@ -1,39 +1,3 @@
-import { ComponentStyles } from '../../types';
-export declare const styles: {
-    root: {
-        minWidth: number;
-        backgroundColor: "#ffffff";
-        padding: number[];
-        listStyle: string;
-        margin: number;
-    };
-    item: {
-        display: string;
-        alignItems: string;
-        boxSizing: string;
-        fontSize: number;
-        whiteSpace: string;
-        minHeight: number;
-        padding: number[];
-        transition: string;
-        cursor: string;
-    };
-    disabledItem: {
-        cursor: string;
-    };
-    spacer: {
-        height: number;
-        backgroundColor: "#dde3ed";
-    };
-    withIconGap: {
-        paddingLeft: number;
-    };
-    icon: {
-        width: number;
-        height: number;
-        marginRight: number;
-        flexShrink: number;
-    };
-    content: {};
-};
-export declare type ListStyles = ComponentStyles<typeof styles>;
+import { ITweakStyles } from '../../theme';
+export declare const useStyles: import("../../theme").IUseStyles<"content" | "item" | "root" | "icon" | "disabledItem" | "spacer" | "withIconGap", unknown>;
+export declare type IListStyles = ITweakStyles<typeof useStyles>;

package/dist/components/List/index.d.ts

@@ -1,3 +1,3 @@
 export * from './List';
 export * from './types';
-export type { ListStyles } from './List.styles';
+export type { IListStyles } from './List.styles';

package/dist/components/Modal/Modal.d.ts

@@ -1,9 +1,8 @@
 import { FC, ReactNode } from 'react';
 import { ICommonProps } from '../../types';
 import { IModalPosition, IModalTransitionProps } from './types';
-import { ModalStyles } from './Modal.styles';
-export interface IModalProps extends ICommonProps, IModalTransitionProps {
-    tweakStyles?: ModalStyles;
+import { IModalStyles } from './Modal.styles';
+export interface IModalProps extends ICommonProps<IModalStyles>, IModalTransitionProps {
     title?: ReactNode;
     size?: 'l' | 'm' | 's';
     isFooterSticky?: boolean;
@@ -18,7 +17,6 @@ export interface IModalProps extends ICommonProps, IModalTransitionProps {
     shouldBlockScroll?: boolean;
     isOpen?: boolean;
     zIndex?: number;
-    testId?: string;
     onClose?(): void;
 }
 export declare const Modal: FC<IModalProps>;

package/dist/components/Modal/Modal.styles.d.ts

@@ -1,239 +1,6 @@
-import { ComponentStyles } from '../../types';
-export declare const styles: {
-    root: {};
-    fixedPosition: {
-        position: string;
-        top: number;
-        right: number;
-        bottom: number;
-        left: number;
-        zIndex: number;
-        overflowX: string;
-        '-webkit-overflow-scrolling': string;
-        '& $innerOverlay': {
-            display: string;
-            width: string;
-            minHeight: string;
-            boxSizing: string;
-        };
-    };
-    innerOverlay: {};
-    sideBar: {
-        '& $modal': {
-            borderRadius: number;
-            margin: number;
-            minHeight: string;
-        };
-    };
-    'position-static': {};
-    'position-left': {};
-    'position-right': {
-        justifyContent: string;
-    };
-    'position-center': {
-        padding: number[];
-    };
-    overlay: {
-        backgroundColor: string;
-    };
-    modal: {
-        backgroundColor: "#ffffff";
-        borderRadius: 16;
-        boxShadow: string;
-        margin: string;
-        position: string;
-        maxWidth: string;
-    };
-    title: {
-        fontSize: number;
-        lineHeight: number;
-        marginTop: number;
-    };
-    titleWithCloseButton: {
-        paddingRight: number;
-    };
-    close: {
-        position: string;
-    };
-    content: {};
-    footer: {
-        display: string;
-        gap: number;
-    };
-    stickyFooterWrapper: {
-        position: string;
-        bottom: number;
-        marginTop: string;
-        zIndex: number;
-    };
-    stickyFooter: {
-        borderTop: (string | number)[];
-        padding: number[];
-        borderBottomLeftRadius: 16;
-        borderBottomRightRadius: 16;
-        backgroundColor: "#ffffff";
-    };
-    'buttons-left': {
-        justifyContent: string;
-    };
-    'buttons-center': {
-        justifyContent: string;
-    };
-    'buttons-right': {
-        justifyContent: string;
-    };
-    withoutFooter: {};
-    withStickyFooter: {
-        display: string;
-        flexDirection: string;
-        '& $content': {
-            position: string;
-            zIndex: number;
-        };
-    };
-    footerWrapper: {};
-    l: {
-        '& $modal': {
-            padding: number[];
-            fontSize: number;
-            width: number;
-            '&$withStickyFooter': {
-                paddingBottom: number;
-            };
-        };
-        '& $withoutFooter': {
-            paddingBottom: number;
-        };
-        '& $title': {
-            fontSize: number;
-            marginBottom: number;
-        };
-        '& $close': {
-            right: number;
-            top: number;
-        };
-        '& $footerWrapper': {
-            paddingTop: number;
-        };
-        '& $stickyFooter': {
-            paddingLeft: number;
-            paddingRight: number;
-            marginLeft: number;
-            marginRight: number;
-        };
-    };
-    m: {
-        '& $modal': {
-            padding: number[];
-            width: number;
-            '&$withStickyFooter': {
-                paddingBottom: number;
-            };
-        };
-        '& $withoutFooter': {
-            paddingBottom: number;
-        };
-        '& $title': {
-            fontSize: number;
-            marginBottom: number;
-        };
-        '& $close': {
-            right: number;
-            top: number;
-        };
-        '& $footerWrapper': {
-            paddingTop: number;
-        };
-        '& $stickyFooter': {
-            paddingLeft: number;
-            paddingRight: number;
-            marginLeft: number;
-            marginRight: number;
-        };
-    };
-    s: {
-        '& $modal': {
-            padding: number[];
-            fontSize: number;
-            width: number;
-            '&$withStickyFooter': {
-                paddingBottom: number;
-            };
-        };
-        '& $withoutFooter': {
-            paddingBottom: number;
-        };
-        '& $title': {
-            fontSize: number;
-            marginBottom: number;
-        };
-        '& $close': {
-            right: number;
-            top: number;
-        };
-        '& $footerWrapper': {
-            paddingTop: number;
-        };
-        '& $stickyFooter': {
-            paddingLeft: number;
-            paddingRight: number;
-            marginLeft: number;
-            marginRight: number;
-        };
-    };
-    modalWrapper: {
-        display: string;
-        width: string;
-    };
-    animationEnd: {
-        '& $modal': {
-            opacity: number;
-        };
-        '& $position-center $modal': {
-            transform: string;
-        };
-        '& $position-right $modal': {
-            transform: string;
-        };
-        '& $position-left $modal': {
-            transform: string;
-        };
-        '& $overlay': {
-            opacity: number;
-        };
-    };
-    animationStart: {
-        '& $modal': {
-            opacity: number;
-            transition: string;
-            transitionProperty: string;
-        };
-        '& $position-center $modal': {
-            transform: string;
-        };
-        '& $position-right $modal': {
-            transform: string;
-        };
-        '& $position-left $modal': {
-            transform: string;
-        };
-        '& $overlay': {
-            opacity: number;
-            transition: string;
-        };
-    };
-    'modal-enter': {
-        extend: string;
-    };
-    'modal-enter-active': {
-        extend: string;
-    };
-    'modal-exit': {
-        extend: string;
-    };
-    'modal-exit-active': {
-        extend: string;
-    };
-    tweakCloseButton: {};
-};
-export declare type ModalStyles = ComponentStyles<typeof styles>;
+import { ITweakStyles } from '../../theme';
+import { ICloseButtonStyles } from '../CloseButton';
+export declare const useStyles: import("../../theme").IUseStyles<"close" | "content" | "root" | "overlay" | "footer" | "s" | "title" | "m" | "l" | "animationEnd" | "animationStart" | "fixedPosition" | "innerOverlay" | "sideBar" | "position-static" | "position-left" | "position-right" | "position-center" | "modal" | "titleWithCloseButton" | "stickyFooterWrapper" | "stickyFooter" | "buttons-left" | "buttons-center" | "buttons-right" | "withoutFooter" | "withStickyFooter" | "footerWrapper" | "modalWrapper" | "modal-enter" | "modal-enter-active" | "modal-exit" | "modal-exit-active", unknown>;
+export declare type IModalStyles = ITweakStyles<typeof useStyles, {
+    tweakCloseButton: ICloseButtonStyles;
+}>;

package/dist/components/Modal/index.d.ts

@@ -1,3 +1,3 @@
 export * from './Modal';
 export * from './types';
-export type { ModalStyles } from './Modal.styles';
+export type { IModalStyles } from './Modal.styles';