@true-engineering/true-react-common-ui-kit 2.7.0 → 3.0.0-alpha.1

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

@@ -1,150 +1,8 @@
-import { ComponentStyles } from '../../types';
-import { ThemedPreloaderStyles } from '../ThemedPreloader';
-export declare const styles: {
-    root: {
-        display: string;
-        justifyContent: string;
-        alignItems: string;
-        cursor: string;
-        outline: string;
-        boxSizing: string;
-        transition: string;
-        transitionProperty: string;
-        maxWidth: string;
-        border: (string | number)[];
-        position: string;
-        boxShadow: string;
-        '&[disabled]': {
-            cursor: string;
-            pointerEvents: string;
-        };
-    };
-    primary: {};
-    secondary: {};
-    outline: {};
-    warning: {};
-    destructive: {};
-    text: {};
-    custom: {};
-    children: {};
-    icon: {
-        width: number;
-        height: number;
-        flexShrink: number;
-        transition: string;
-    };
-    iconFromLeft: {
-        flexDirection: string;
-        gap: number;
-        '& $icon': {
-            marginLeft: number;
-        };
-    };
-    iconFromRight: {
-        flexDirection: string;
-        gap: number;
-        '& $icon': {
-            marginRight: number;
-        };
-    };
-    onlyIcon: {};
-    withIcon: {};
-    s: {
-        padding: number[];
-        height: number;
-        fontSize: number;
-        letterSpacing: number;
-        '&$onlyIcon': {
-            padding: number;
-            width: number;
-        };
-        '& $icon': {
-            width: number;
-            height: number;
-        };
-        '& $iconFromLeft': {
-            gap: number;
-        };
-        '& $iconFromRight': {
-            gap: number;
-        };
-    };
-    m: {
-        padding: number[];
-        height: number;
-        fontSize: number;
-        '& $iconFromLeft': {
-            gap: number;
-        };
-        '& $iconFromRight': {
-            gap: number;
-        };
-        '&$onlyIcon': {
-            padding: number;
-            width: number;
-        };
-    };
-    l: {
-        padding: number[];
-        height: number;
-        fontSize: number;
-        '& $iconFromLeft': {
-            gap: number;
-        };
-        '& $iconFromRight': {
-            gap: number;
-        };
-        '&$onlyIcon': {
-            padding: number;
-            width: number;
-        };
-    };
-    xl: {
-        padding: number[];
-        height: number;
-        fontSize: number;
-        '&$onlyIcon': {
-            padding: number;
-            width: number;
-        };
-        '& $iconFromLeft': {
-            gap: number;
-        };
-        '& $iconFromRight': {
-            gap: number;
-        };
-    };
-    fullWidth: {
-        minWidth: string;
-        width: string;
-    };
-    inline: {
-        borderTopLeftRadius: number;
-        borderBottomLeftRadius: number;
-    };
-    active: {};
-    content: {
-        display: string;
-        alignItems: string;
-        height: string;
-    };
-    loader: {
-        display: string;
-        position: string;
-        left: string;
-        top: string;
-        transform: string;
-    };
-    loading: {
-        '& $content': {
-            visibility: string;
-        };
-        '& $loader': {
-            display: string;
-        };
-    };
-    disabled: {};
-    tweakPreloader: {};
-};
-export declare const dotsPreloaderStyles: ThemedPreloaderStyles;
-export declare type ButtonStyles = ComponentStyles<typeof styles>;
+import { ITweakStyles } from '../../theme';
+import { IThemedPreloaderStyles } from '../ThemedPreloader';
+import { IButtonSize } from './types';
+export declare const useStyles: import("../../theme").IUseStyles<"content" | "outline" | "root" | "inline" | "text" | "icon" | "active" | "disabled" | "s" | "fullWidth" | "primary" | "secondary" | "warning" | "destructive" | "custom" | "children" | "iconFromLeft" | "iconFromRight" | "onlyIcon" | "withIcon" | "m" | "l" | "xl" | "loader" | "loading", unknown>;
+export declare const getPreloaderStyles: (size: IButtonSize) => IThemedPreloaderStyles | undefined;
+export declare type IButtonStyles = ITweakStyles<typeof useStyles, {
+    tweakPreloader: IThemedPreloaderStyles;
+}>;

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

@@ -1,3 +1,3 @@
 export * from './Button';
 export * from './types';
-export type { ButtonStyles } from './Button.styles';
+export type { IButtonStyles } from './Button.styles';

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,8 +1,7 @@
 import { ReactNode } from 'react';
 import { ICommonProps } from '../../types';
-import { CheckboxStyles } from './Checkbox.styles';
-export interface ICheckboxProps<V> extends ICommonProps {
-    tweakStyles?: CheckboxStyles;
+import { ICheckboxStyles } from './Checkbox.styles';
+export interface ICheckboxProps<V> extends ICommonProps<ICheckboxStyles> {
     children?: ReactNode;
     isChecked?: boolean;
     isSemiChecked?: boolean;
@@ -10,26 +9,13 @@ export interface ICheckboxProps<V> extends ICommonProps {
     isReadonly?: boolean;
     isInvalid?: boolean;
     value: V;
-    /**
-     * @default 18
-     */
-    size?: number;
-    /**
-     * @default `center`
-     */
-    alignItems?: 'top' | 'center';
-    /**
-     * @default `size - 4px`
-     */
-    textMargin?: number;
     /**
      * @default `right`
      */
     labelPosition?: 'right' | 'left';
-    testId?: string;
     onSelect(value: {
         value: V;
         isSelected: boolean;
     }): void;
 }
-export declare function Checkbox<V>({ children, isDisabled, isReadonly, isChecked, value, size, alignItems, textMargin, data, testId, isSemiChecked, labelPosition, tweakStyles, onSelect, }: ICheckboxProps<V>): JSX.Element;
+export declare function Checkbox<V>({ children, isDisabled, isReadonly, isChecked, value, data, testId, isSemiChecked, labelPosition, tweakStyles, onSelect, }: ICheckboxProps<V>): JSX.Element;

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

@@ -1,50 +1,3 @@
-import { ComponentStyles } from '../../types';
-import type { ICheckboxProps } from './Checkbox';
-interface IStyleProps {
-    size: NonNullable<ICheckboxProps<unknown>['size']>;
-    alignItems: NonNullable<ICheckboxProps<unknown>['alignItems']>;
-    textMargin: ICheckboxProps<unknown>['textMargin'];
-}
-export declare const styles: {
-    root: {
-        cursor: string;
-        display: string;
-        alignItems: ({ alignItems }: IStyleProps) => string;
-    };
-    disabled: {
-        cursor: string;
-        pointerEvents: string;
-    };
-    input: {
-        width: number;
-        height: number;
-        position: string;
-        opacity: number;
-    };
-    children: {
-        maxWidth: string;
-        display: string;
-        alignItems: string;
-    };
-    check: {
-        width: ({ size }: IStyleProps) => number;
-        height: ({ size }: IStyleProps) => number;
-        borderRadius: number;
-        flexShrink: number;
-        marginRight: ({ size, textMargin }: IStyleProps) => number;
-        display: string;
-        alignItems: string;
-        justifyContent: string;
-        boxSizing: string;
-    };
-    checked: {};
-    labelPositionLeft: {
-        flexDirection: string;
-        '& $check': {
-            marginRight: number;
-            marginLeft: ({ size, textMargin }: IStyleProps) => number;
-        };
-    };
-};
-export declare type CheckboxStyles = ComponentStyles<typeof styles, IStyleProps>;
-export {};
+import { ITweakStyles } from '../../theme';
+export declare const useStyles: import("../../theme").IUseStyles<"check" | "root" | "disabled" | "input" | "children" | "checked" | "labelPositionLeft", unknown>;
+export declare type ICheckboxStyles = ITweakStyles<typeof useStyles>;

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

@@ -1,2 +1,2 @@
 export * from './Checkbox';
-export type { CheckboxStyles } from './Checkbox.styles';
+export type { ICheckboxStyles } from './Checkbox.styles';

package/dist/components/CloseButton/CloseButton.d.ts

@@ -1,10 +1,8 @@
 import { FC } from 'react';
 import { ICommonProps } from '../../types';
-import { CloseButtonStyles } from './CloseButton.styles';
-export interface ICloseButtonProps extends ICommonProps {
-    tweakStyles?: CloseButtonStyles;
-    testId?: string;
-    onClose?: () => void;
+import { ICloseButtonStyles } from './CloseButton.styles';
+export interface ICloseButtonProps extends ICommonProps<ICloseButtonStyles> {
     iconType?: 'close' | 'close-large' | 'close-window';
+    onClose?(): void;
 }
 export declare const CloseButton: FC<ICloseButtonProps>;

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

@@ -1,27 +1,3 @@
-import { ComponentStyles } from '../../types';
-export declare const styles: {
-    root: {
-        width: number;
-        height: number;
-        maxWidth: string;
-        maxHeight: string;
-        padding: number;
-        color: "#505f79";
-        border: number;
-        borderRadius: string;
-        appearance: string;
-        backgroundColor: string;
-        cursor: string;
-        transition: string;
-        '&:hover': {
-            backgroundColor: string;
-        };
-        '&:focus': {
-            backgroundColor: "#eceff5";
-        };
-        '&:active': {
-            backgroundColor: string;
-        };
-    };
-};
-export declare type CloseButtonStyles = ComponentStyles<typeof styles>;
+import { ITweakStyles } from '../../theme';
+export declare const useStyles: import("../../theme").IUseStyles<"root", unknown>;
+export declare type ICloseButtonStyles = ITweakStyles<typeof useStyles>;

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

@@ -1,2 +1,2 @@
 export * from './CloseButton';
-export type { CloseButtonStyles } from './CloseButton.styles';
+export type { ICloseButtonStyles } from './CloseButton.styles';

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

@@ -1,32 +1 @@
-import { ComponentStyles } from '../../types';
-export declare const styles: {
-    root: {
-        display: string;
-        flexWrap: string;
-    };
-    colorCard: {
-        width: number;
-        border: string;
-        borderRadius: number;
-        color: string;
-        fontSize: number;
-        margin: number;
-    };
-    color: {
-        height: number;
-        borderTopLeftRadius: number;
-        borderTopRightRadius: number;
-    };
-    colorName: {
-        marginBottom: number;
-        padding: number;
-        overflow: string;
-    };
-    hex: {
-        marginTop: number;
-        textTransform: string;
-        fontWeight: string;
-        padding: number[];
-    };
-};
-export declare type ColorsStyles = ComponentStyles<typeof styles>;
+export declare const useStyles: import("../../theme").IUseStyles<"color" | "root" | "colorCard" | "colorName" | "hex", unknown>;

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

@@ -1,2 +1 @@
 export * from './Colors';
-export type { ColorsStyles } from './Colors.styles';

package/dist/components/CssBaseline/CssBaseline.d.ts

@@ -1,7 +1,5 @@
 import { FC } from 'react';
 import { ICommonProps } from '../../types';
-import { CssBaselineStyles } from './CssBaseline.styles';
-export interface ICssBaselineProps extends ICommonProps {
-    tweakStyles?: CssBaselineStyles;
-}
+import { ICssBaselineStyles } from './CssBaseline.styles';
+export declare type ICssBaselineProps = ICommonProps<ICssBaselineStyles>;
 export declare const CssBaseline: FC<ICssBaselineProps>;

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

@@ -1,11 +1,3 @@
-import { ComponentStyles } from '../../types';
-export declare const styles: {
-    '@global html, body': {
-        fontFamily: string;
-        color: "#222a37";
-        padding: number;
-        margin: number;
-    };
-    root: {};
-};
-export declare type CssBaselineStyles = ComponentStyles<typeof styles>;
+import { ITweakStyles } from '../../theme';
+export declare const useStyles: import("../../theme").IUseStyles<"root" | "@global html, body", unknown>;
+export declare type ICssBaselineStyles = ITweakStyles<typeof useStyles>;

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

@@ -1,2 +1,2 @@
 export * from './CssBaseline';
-export type { CssBaselineStyles } from './CssBaseline.styles';
+export type { ICssBaselineStyles } from './CssBaseline.styles';

package/dist/components/DateInput/DateInput.d.ts

@@ -1,13 +1,13 @@
 import { FormEvent, MouseEvent } from 'react';
+import { ICommonProps } from '../../types';
 import { IInputProps } from '../Input';
-import { DateInputStyles } from './DateInput.styles';
-export interface IDateInputProps extends Omit<IInputProps, 'value' | 'beforeMaskedStateChange' | 'onChange'> {
+import { IDateInputStyles } from './DateInput.styles';
+export interface IDateInputProps extends Omit<IInputProps, 'value' | 'beforeMaskedStateChange' | 'onChange' | 'tweakStyles'>, ICommonProps<IDateInputStyles> {
     date?: string;
     startDate?: string;
     endDate?: string;
     className?: string;
     isRange?: boolean;
-    tweakStyles?: DateInputStyles;
     onClick?(event: MouseEvent<HTMLDivElement>): void;
     onChange?(event: FormEvent<HTMLInputElement>, value: string): void;
 }

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

@@ -1,11 +1,6 @@
-import { ComponentStyles } from '../../types';
-export declare const styles: {
-    root: {
-        width: string;
-        height: string;
-        cursor: string;
-        position: string;
-    };
-    tweakInput: {};
-};
-export declare type DateInputStyles = ComponentStyles<typeof styles>;
+import { ITweakStyles } from '../../theme';
+import { IInputStyles } from '../Input';
+export declare const useStyles: import("../../theme").IUseStyles<"root", unknown>;
+export declare type IDateInputStyles = ITweakStyles<typeof useStyles, {
+    tweakInput: IInputStyles;
+}>;

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

@@ -1,3 +1,3 @@
 export * from './DateInput';
-export type { DateInputStyles } from './DateInput.styles';
+export type { IDateInputStyles } from './DateInput.styles';
 export * from './constants';

package/dist/components/DatePicker/DatePicker.d.ts

@@ -1,14 +1,13 @@
 import { FC, SyntheticEvent } from 'react';
 import ReactDatePicker from 'react-datepicker';
+import { ICommonProps } from '../../types';
 import { IDateInputProps } from '../DateInput';
 import { IDatePickerBaseProps, IRange } from './types';
-import { DatePickerStyles } from './DatePicker.styles';
-export interface IDatePickerProps extends IDatePickerBaseProps {
+import { IDatePickerStyles } from './DatePicker.styles';
+export interface IDatePickerProps extends IDatePickerBaseProps, ICommonProps<IDatePickerStyles> {
     selectedDate?: Date | null;
     locale: Locale;
     months?: string[];
-    topPosition?: number;
-    leftPosition?: number;
     /**
      * @default `dd.MM.yyyy`
      */
@@ -18,8 +17,7 @@ export interface IDatePickerProps extends IDatePickerBaseProps {
     isInline?: boolean;
     shouldRenderPopperInBody?: boolean;
     customInput?: FC<IDateInputProps>;
-    tweakStyles?: DatePickerStyles;
-    onChangeDate?: (date: Date | null, event?: SyntheticEvent) => void;
-    onChangeRange?: (date: IRange, event?: SyntheticEvent) => void;
+    onChangeDate?(date: Date | null, event?: SyntheticEvent): void;
+    onChangeRange?(date: IRange, event?: SyntheticEvent): void;
 }
 export declare const DatePicker: import("react").ForwardRefExoticComponent<IDatePickerProps & import("react").RefAttributes<ReactDatePicker<never, undefined>>>;

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

@@ -1,33 +1,6 @@
-import { ComponentStyles } from '../../types';
-import type { IDatePickerProps } from './DatePicker';
-export interface IDatePickerStyleProps {
-    topPosition: NonNullable<IDatePickerProps['topPosition']>;
-    leftPosition: NonNullable<IDatePickerProps['leftPosition']>;
-}
-export declare const styles: {
-    root: {
-        width: string;
-        height: string;
-    };
-    day: {};
-    datepicker: {};
-    popper: {
-        zIndex: number;
-        marginTop: ({ topPosition }: IDatePickerStyleProps) => number;
-        marginLeft: ({ leftPosition }: IDatePickerStyleProps) => number;
-        '&[data-placement^="bottom"]': {
-            paddingTop: number;
-        };
-        '&[data-placement^="top"]': {
-            paddingBottom: number;
-        };
-        '&[data-placement^="left"]': {
-            paddingRight: number;
-        };
-        '&[data-placement^="right"]': {
-            paddingLeft: number;
-        };
-    };
-    tweakDateInput: {};
-};
-export declare type DatePickerStyles = ComponentStyles<typeof styles, IDatePickerStyleProps>;
+import { ITweakStyles } from '../../theme';
+import { IDateInputStyles } from '../DateInput';
+export declare const useStyles: import("../../theme").IUseStyles<"popper" | "root" | "day" | "datepicker", unknown>;
+export declare type IDatePickerStyles = ITweakStyles<typeof useStyles, {
+    tweakDateInput: IDateInputStyles;
+}>;

package/dist/components/DatePicker/components/DatePickerHeader/DatePickerHeader.d.ts

@@ -1,8 +1,8 @@
 import { FC } from 'react';
 import { ReactDatePickerCustomHeaderProps as BaseProps } from 'react-datepicker';
-import { DatePickerHeaderStyles } from './DatePickerHeader.styles';
-export interface IDatePickerHeaderProps extends BaseProps {
+import { ICommonProps } from '../../../../types';
+import { IDatePickerHeaderStyles } from './DatePickerHeader.styles';
+export interface IDatePickerHeaderProps extends BaseProps, Pick<ICommonProps<IDatePickerHeaderStyles>, 'tweakStyles'> {
     months?: string[];
-    tweakStyles?: DatePickerHeaderStyles;
 }
 export declare const DatePickerHeader: FC<IDatePickerHeaderProps>;

package/dist/components/DatePicker/components/DatePickerHeader/DatePickerHeader.styles.d.ts

@@ -1,69 +1,7 @@
-import { ComponentStyles } from '../../../../types';
-export declare const styles: {
-    btn: {
-        width: number;
-        height: number;
-        padding: number;
-        boxSizing: string;
-        border: string;
-        outline: string;
-        cursor: string;
-        marginLeft: number;
-    };
-    select: {
-        height: number;
-        fontSize: number;
-        position: string;
-    };
-    selectValue: {
-        fontSize: number;
-        fontWeight: string;
-        color: string;
-        pointerEvents: string;
-        paddingLeft: number;
-        paddingRight: number;
-    };
-    selectControl: {
-        position: string;
-        top: number;
-        left: number;
-        width: string;
-        height: string;
-    };
-    header: {
-        margin: number;
-        display: string;
-        alignItems: string;
-    };
-    buttons: {
-        flexShrink: number;
-        marginLeft: string;
-    };
-    tweakSelect: {
-        list: {
-            cell: {
-                fontSize: number;
-                minHeight: number;
-            };
-        };
-        arrow: {
-            right: number;
-            top: number;
-            width: number;
-            height: number;
-        };
-        tweakInput: {
-            inputWrapper: {
-                height: number;
-                border: string;
-            };
-            input: {
-                fontSize: number;
-                fontWeight: string;
-                paddingRight: number;
-                paddingLeft: number;
-            };
-        };
-    };
-};
-export declare type DatePickerHeaderStyles = ComponentStyles<typeof styles>;
+import { ITweakStyles } from '../../../../theme';
+import { ISelectStyles } from '../../../Select';
+export declare const useStyles: import("../../../../theme").IUseStyles<"header" | "select" | "btn" | "selectValue" | "selectControl" | "buttons", unknown>;
+export declare const selectStyles: ISelectStyles;
+export declare type IDatePickerHeaderStyles = ITweakStyles<typeof useStyles, {
+    tweakSelect: ISelectStyles;
+}>;

package/dist/components/DatePicker/components/DatePickerHeader/index.d.ts

@@ -1,2 +1,2 @@
 export * from './DatePickerHeader';
-export type { DatePickerHeaderStyles } from './DatePickerHeader.styles';
+export type { IDatePickerHeaderStyles } from './DatePickerHeader.styles';

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

@@ -1,4 +1,4 @@
 export * from './DatePicker';
 export * from './types';
-export type { DatePickerStyles } from './DatePicker.styles';
-export type { DatePickerHeaderStyles } from './components';
+export type { IDatePickerStyles } from './DatePicker.styles';
+export type { IDatePickerHeaderStyles } from './components';

package/dist/components/Description/Description.d.ts

@@ -1,8 +1,7 @@
 import { FC } from 'react';
 import { ICommonProps } from '../../types';
-import { DescriptionStyles } from './Description.styles';
-export interface IDescriptionProps extends ICommonProps {
-    tweakStyles?: DescriptionStyles;
+import { IDescriptionStyles } from './Description.styles';
+export interface IDescriptionProps extends ICommonProps<IDescriptionStyles> {
     text: string;
     moreTitle?: string;
     lessTitle?: string;

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

@@ -1,24 +1,3 @@
-import { ComponentStyles } from '../../types';
-export declare const styles: {
-    root: {};
-    button: {
-        cursor: string;
-        display: string;
-        color: "#505f79";
-        marginTop: number;
-        textTransform: string;
-        borderBottom: (string | number)[];
-        '&:hover': {
-            color: "#222a37";
-        };
-    };
-    link: {
-        color: "#505f79";
-        textDecoration: string;
-        borderBottom: (string | number)[];
-        '&:hover': {
-            color: "#222a37";
-        };
-    };
-};
-export declare type DescriptionStyles = ComponentStyles<typeof styles>;
+import { ITweakStyles } from '../../theme';
+export declare const useStyles: import("../../theme").IUseStyles<"link" | "root" | "button", unknown>;
+export declare type IDescriptionStyles = ITweakStyles<typeof useStyles>;

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

@@ -1,2 +1,2 @@
 export * from './Description';
-export type { DescriptionStyles } from './Description.styles';
+export type { IDescriptionStyles } from './Description.styles';