@true-engineering/true-react-common-ui-kit 4.0.0-alpha3 → 4.0.0-alpha30

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

@@ -3,15 +3,15 @@ import { type IInputStyles } from '../Input';
 import { type ISearchInputStyles } from '../SearchInput';
 import { IWithMessagesStyles } from '../WithMessages';
 import { type ISelectListStyles } from './components';
-export declare const useStyles: import("../../theme").IUseStyles<"root" | "icon" | "disabled" | "inputWrapper" | "arrow" | "listWrapper" | "withoutPopper" | "listWrapperInBody" | "activeArrow" | "counter" | "iconWrapper", unknown>;
+export declare const useStyles: import("../../theme").IUseStyles<"root" | "disabled" | "inputWrapper" | "arrow" | "listWrapper" | "withoutPopper" | "listWrapperInBody" | "activeArrow" | "counter", unknown>;
 export declare const readonlyInputStyles: Partial<import("jss").Styles<"input" | "withValue" | "inputContent" | "autoSizeWrapper" | "autoSized" | "withUnits" | "withLabel" | "fakeValue" | "units" | "focusedInput" | "disabledInput" | "invalidInput", unknown, undefined>> & Partial<{
     tweakControlWrapper: Partial<import("jss").Styles<"invalid" | "icon" | "disabled" | "loader" | "loading" | "label" | "requiredLabel" | "withValue" | "clearIcon" | "focused" | "wrapper" | "controlWrapper" | "minContent" | "activeLabel" | "disabledLabel" | "controls" | "iconInner" | "customIcon" | "endIcon" | "activeIcon" | "placement-top" | "placement-bottom" | "placement-top-left" | "placement-top-right" | "placement-bottom-left" | "placement-bottom-right" | "placement-left" | "placement-right" | "placement-middle", unknown, undefined>> & Partial<{
         tweakPreloader: Partial<import("jss").Styles<"root" | "default" | "currentColor" | "dots" | "logo", unknown, undefined>> & Partial<{
             tweakDotsPreloader: Partial<import("jss").Styles<"root" | "dot" | "fadedDot" | "@keyframes FadedDots", unknown, undefined>> & Partial<unknown>;
             tweakSvgPreloader: Partial<import("jss").Styles<"root", unknown, undefined>> & Partial<unknown>;
         }>;
-    }>;
-    tweakWithMessages: Partial<import("jss").Styles<"error" | "horizontal" | "vertical" | "children" | "info" | "withMessages" | "message", unknown, undefined>> & Partial<unknown>;
+    } & import("..").IControlWrapperSizes>;
+    tweakWithMessages: Partial<import("jss").Styles<"error" | "children" | "horizontal" | "vertical" | "info" | "withMessages" | "message", unknown, undefined>> & Partial<unknown>;
 }>;
 export declare const readonlyMultiSelectStyles: Partial<import("jss").Styles<"input" | "withValue" | "inputContent" | "autoSizeWrapper" | "autoSized" | "withUnits" | "withLabel" | "fakeValue" | "units" | "focusedInput" | "disabledInput" | "invalidInput", unknown, undefined>> & Partial<{
     tweakControlWrapper: Partial<import("jss").Styles<"invalid" | "icon" | "disabled" | "loader" | "loading" | "label" | "requiredLabel" | "withValue" | "clearIcon" | "focused" | "wrapper" | "controlWrapper" | "minContent" | "activeLabel" | "disabledLabel" | "controls" | "iconInner" | "customIcon" | "endIcon" | "activeIcon" | "placement-top" | "placement-bottom" | "placement-top-left" | "placement-top-right" | "placement-bottom-left" | "placement-bottom-right" | "placement-left" | "placement-right" | "placement-middle", unknown, undefined>> & Partial<{
@@ -19,8 +19,8 @@ export declare const readonlyMultiSelectStyles: Partial<import("jss").Styles<"in
             tweakDotsPreloader: Partial<import("jss").Styles<"root" | "dot" | "fadedDot" | "@keyframes FadedDots", unknown, undefined>> & Partial<unknown>;
             tweakSvgPreloader: Partial<import("jss").Styles<"root", unknown, undefined>> & Partial<unknown>;
         }>;
-    }>;
-    tweakWithMessages: Partial<import("jss").Styles<"error" | "horizontal" | "vertical" | "children" | "info" | "withMessages" | "message", unknown, undefined>> & Partial<unknown>;
+    } & import("..").IControlWrapperSizes>;
+    tweakWithMessages: Partial<import("jss").Styles<"error" | "children" | "horizontal" | "vertical" | "info" | "withMessages" | "message", unknown, undefined>> & Partial<unknown>;
 }>;
 export declare const getInputStyles: ({ hasReadonlyInput, isMultiSelect, }: {
     hasReadonlyInput: boolean;

package/dist/components/Select/components/SelectListItem/SelectListItem.d.ts

@@ -1,6 +1,7 @@
 import { type ChangeEvent, type FC, type KeyboardEvent, type MouseEvent, type ReactNode } from 'react';
 import { type Classes } from 'jss';
-export interface ISelectListItemProps {
+import { IDataAttributesProps } from '../../../../types';
+export interface ISelectListItemProps extends IDataAttributesProps {
     index: number;
     isSemiChecked?: boolean;
     isDisabled?: boolean;

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

@@ -1,4 +1,4 @@
 export * from './Select';
 export * from './types';
 export type { ISelectStyles } from './Select.styles';
-export type { ISelectListStyles } from './components';
+export { type ISelectListStyles, SelectList } from './components';

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

@@ -1,3 +1,4 @@
 import { ITweakStyles } from '../../theme';
-export declare const useStyles: import("../../theme").IUseStyles<"root" | "text" | "blue" | "green" | "grey" | "orange" | "red" | "teal" | "violet" | "icon" | "custom" | "s" | "m" | "iconLeft" | "badge" | "xs", unknown>;
-export type IStatusStyles = ITweakStyles<typeof useStyles>;
+import { IStatusColors } from './types';
+export declare const useStyles: import("../../theme").IUseStyles<"custom" | "root" | "text" | "icon" | "s" | "m" | "iconLeft" | "badge" | "xs", unknown>;
+export type IStatusStyles = ITweakStyles<typeof useStyles, IStatusColors>;

package/dist/components/Status/constants.d.ts

@@ -1,2 +1 @@
-export declare const STATUS_COLORS: readonly ["green", "teal", "blue", "grey", "orange", "red", "violet", "custom"];
 export declare const STATUS_SIZES: readonly ["xs", "s", "m"];

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

@@ -1,2 +1,3 @@
 export * from './Status';
+export * from './types';
 export type { IStatusStyles } from './Status.styles';

package/dist/components/Status/types.d.ts

@@ -1,3 +1,6 @@
-import { STATUS_COLORS, STATUS_SIZES } from './constants';
-export type IStatusColor = (typeof STATUS_COLORS)[number];
+import { IDefaultExtendableProps } from '../../types';
+import type { STATUS_SIZES } from './constants';
 export type IStatusSize = (typeof STATUS_SIZES)[number];
+export interface IStatusColors extends IDefaultExtendableProps {
+}
+export type IStatusColor = keyof IStatusColors;

package/dist/components/TextArea/TextArea.d.ts

@@ -1,14 +1,13 @@
-import { FormEvent } from 'react';
+import { FormEvent, TextareaHTMLAttributes } from 'react';
 import { ICommonProps } from '../../types';
 import { IControlWrapperProps } from '../ControlWrapper';
 import { IWithMessagesProps } from '../WithMessages';
-import { ITextAreaHTMLBaseProps } from './types';
+import { ITextAreaCounterPosition } from './types';
 import { ITextAreaStyles } from './TextArea.styles';
-export interface ITextAreaProps extends ICommonProps<ITextAreaStyles>, Pick<IControlWrapperProps, 'label' | 'isInvalid' | 'isRequired' | 'isDisabled'>, Pick<IWithMessagesProps, 'infoMessage' | 'errorMessage'>, Pick<ITextAreaHTMLBaseProps, 'name' | 'maxLength' | 'rows' | 'onPaste' | 'onFocus' | 'onBlur'> {
+export interface ITextAreaProps extends ICommonProps<ITextAreaStyles>, Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'>, Pick<IControlWrapperProps, 'label' | 'isInvalid' | 'isRequired' | 'isDisabled' | 'size' | 'groupPlacement'>, Pick<IWithMessagesProps, 'infoMessage' | 'errorMessage'> {
     value?: string;
     placeholder?: string;
-    /** @default false */
-    isDisabled?: boolean;
+    counterPosition?: ITextAreaCounterPosition;
     /** @default false */
     isActive?: boolean;
     /**

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

@@ -1,9 +1,10 @@
 import { ITweakStyles } from '../../theme';
-import { IControlWrapperStyles } from '../ControlWrapper';
+import { IWithPrefix } from '../../types';
+import { IControlWrapperSizes, IControlWrapperStyles } from '../ControlWrapper';
 import { IWithMessagesStyles } from '../WithMessages';
-export declare const useStyles: import("../../theme").IUseStyles<"textarea" | "autoSized" | "wrapper" | "symbolsCount" | "symbolsCountError", unknown>;
-export declare const controlWrapperStyles: IControlWrapperStyles;
+import { ITextAreaCounterPositions } from './types';
+export declare const useStyles: import("../../theme").IUseStyles<"root" | "textarea" | "autoSized" | "withLabel" | "wrapper" | "symbolsCount" | "symbolsCountError" | "symbolsCountActive" | "counter-default", unknown>;
 export type ITextAreaStyles = ITweakStyles<typeof useStyles, {
     tweakWithMessages: IWithMessagesStyles;
     tweakControlWrapper: IControlWrapperStyles;
-}>;
+} & IWithPrefix<ITextAreaCounterPositions, 'counter-'> & IControlWrapperSizes>;

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

@@ -1,3 +1,3 @@
 export * from './TextArea';
-export * from './types';
 export type { ITextAreaStyles } from './TextArea.styles';
+export * from './types';

package/dist/components/TextArea/types.d.ts

@@ -1,2 +1,4 @@
-import { TextareaHTMLAttributes } from 'react';
-export type ITextAreaHTMLBaseProps = Pick<TextareaHTMLAttributes<HTMLTextAreaElement>, 'placeholder' | 'name' | 'maxLength' | 'rows' | 'onPaste' | 'onFocus' | 'onBlur'>;
+import { IExtendableProps } from '../../types';
+export interface ITextAreaCounterPositions extends IExtendableProps<'default'> {
+}
+export type ITextAreaCounterPosition = keyof ITextAreaCounterPositions;

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

@@ -1,6 +1,6 @@
 import { ITweakStyles } from '../../theme';
 import { IThemedPreloaderStyles } from '../ThemedPreloader';
-export declare const useStyles: import("../../theme").IUseStyles<"content" | "bold" | "root" | "circle" | "icon" | "active" | "disabled" | "primary" | "secondary" | "custom" | "l" | "xl" | "loader" | "loading" | "iconContainer" | "reverseContent", unknown>;
+export declare const useStyles: import("../../theme").IUseStyles<"content" | "custom" | "bold" | "root" | "circle" | "icon" | "active" | "disabled" | "primary" | "secondary" | "l" | "xl" | "loader" | "loading" | "iconContainer" | "reverseContent", unknown>;
 export declare const preloaderStyles: IThemedPreloaderStyles;
 export type ITextButtonStyles = ITweakStyles<typeof useStyles, {
     tweakPreloader: IThemedPreloaderStyles;

package/dist/components/Tooltip/Tooltip.d.ts

@@ -4,7 +4,7 @@ import { ITooltipStyles } from './Tooltip.styles';
 export interface ITooltipProps extends ICommonProps<ITooltipStyles> {
     text: ReactNode;
     /** @default 'tooltip' */
-    view?: 'tooltip' | 'hint';
+    view?: 'tooltip' | 'hint' | 'custom';
     /** @default 'info' */
     type?: 'info' | 'error';
 }

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

@@ -1,3 +1,3 @@
 import { ITweakStyles } from '../../theme';
-export declare const useStyles: import("../../theme").IUseStyles<"error" | "root" | "tooltip" | "info" | "hint", unknown>;
+export declare const useStyles: import("../../theme").IUseStyles<"custom" | "error" | "root" | "tooltip" | "info" | "hint", unknown>;
 export type ITooltipStyles = ITweakStyles<typeof useStyles>;

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

@@ -1,3 +1,3 @@
 import { ITweakStyles } from '../../theme';
-export declare const useStyles: import("../../theme").IUseStyles<"error" | "horizontal" | "vertical" | "children" | "info" | "withMessages" | "message", unknown>;
+export declare const useStyles: import("../../theme").IUseStyles<"error" | "children" | "horizontal" | "vertical" | "info" | "withMessages" | "message", unknown>;
 export type IWithMessagesStyles = ITweakStyles<typeof useStyles>;

package/dist/components/WithPopup/WithPopup.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { Placement, Middleware, OffsetOptions, UseHoverProps } from '@floating-ui/react';
+import { Placement, Middleware, OffsetOptions, UseHoverProps, UseClickProps, UseFocusProps, UseDismissProps, UseTransitionStatusProps } from '@floating-ui/react';
 import { ICommonProps, IDataAttributes, IRenderNode } from '../../types';
 import { IPopupArrowProps, IPopupEventType, IWithPopupChildrenProps, IWithPopupToggleEvent, IWithPopupTriggerProps } from './types';
 import { IWithPopupStyles } from './WithPopup.styles';
@@ -11,8 +11,11 @@ export interface IWithPopupProps extends ICommonProps<IWithPopupStyles> {
     placement?: Placement;
     /** @default 'click' */
     eventType?: IPopupEventType;
-    /** @default 0 */
-    hoverDelay?: UseHoverProps['delay'];
+    /**
+     * @deprecated Используйте hoverOptions
+     * @default 0
+     */
+    hoverDelay?: number;
     /** @default 6 */
     popupOffset?: OffsetOptions;
     arrowProps?: IPopupArrowProps;
@@ -35,6 +38,11 @@ export interface IWithPopupProps extends ICommonProps<IWithPopupStyles> {
     /** Должна ли минимальная ширина попапа быть равна ширине триггера
      * @default false */
     isMinWidthSameAsTrigger?: boolean;
+    hoverOptions?: UseHoverProps;
+    clickOptions?: UseClickProps;
+    focusOptions?: UseFocusProps;
+    dismissOptions?: UseDismissProps;
+    transitionOptions?: UseTransitionStatusProps;
     onToggle?: (isActive: boolean, event?: IWithPopupToggleEvent) => void;
 }
 export declare const WithPopup: FC<IWithPopupProps>;

package/dist/hooks/index.d.ts

@@ -5,3 +5,5 @@ export * from './use-tweak-styles';
 export * from './use-did-mount-effect';
 export * from './use-mixed-styles';
 export * from './use-merged-refs';
+export * from './use-merge';
+export * from './use-intersection-ref';

package/dist/hooks/use-intersection-ref.d.ts

@@ -0,0 +1,8 @@
+import { RefCallback } from 'react';
+export interface IInsertionRefOptions {
+    /** @default false */
+    isDisabled?: boolean;
+    onIntersection?: VoidFunction;
+    onIntersectionEnd?: VoidFunction;
+}
+export declare const useIntersectionRef: (options?: IInsertionRefOptions) => RefCallback<Element>;

package/dist/hooks/use-merge.d.ts

@@ -0,0 +1 @@
+export declare const useMerge: <T>(one?: T | undefined, two?: T | undefined) => T | undefined;

package/dist/hooks/use-mixed-styles.d.ts

@@ -1 +1,3 @@
-export declare const useMixedStyles: <StyleSheet_1>(baseStyles?: StyleSheet_1 | undefined, tweakStyles?: StyleSheet_1 | undefined) => StyleSheet_1 | undefined;
+import type { IMixedStyles } from '../theme';
+export declare const mixStyles: <T>(...tweakStyles: IMixedStyles<T>[]) => NonNullable<T>[];
+export declare const useMixedStyles: <StyleSheet_1>(baseStyles?: IMixedStyles<StyleSheet_1>, tweakStyles?: IMixedStyles<StyleSheet_1>) => NonNullable<StyleSheet_1>[];

package/dist/hooks/use-tweak-styles.d.ts

@@ -1,15 +1,15 @@
-import { IComponentName } from '../theme';
-export declare const useTweakStyles: <StyleSheet_1, ClassName extends keyof StyleSheet_1 & `tweak${string}`>({ innerStyles, tweakStyles: currentComponentTweakStyles, className, currentComponentName, }: {
+import { IComponentName, IMaybeArray, IMixedStyles } from '../theme';
+export declare const useTweakStyles: <StyleSheet_1, ClassName extends keyof StyleSheet_1 & `tweak${string}`>({ innerStyles, tweakStyles, className, currentComponentName, }: {
     /**
      * Это tweakStyles, определенные в родительском компоненте
      * (например, стили для Input, определенные в стилях компонента Select)
      */
-    innerStyles?: StyleSheet_1[ClassName] | undefined;
+    innerStyles?: IMixedStyles<StyleSheet_1[ClassName]>;
     /**
      * Пропса tweakStyles из родительского компонента
      * (это уже непосредственно ISelectProps.tweakStyles)
      */
-    tweakStyles?: StyleSheet_1 | undefined;
+    tweakStyles?: IMaybeArray<StyleSheet_1> | undefined;
     /**
      * Класс для переопределения tweakStyles из-вне. (Например, 'tweakInput')
      */
@@ -18,4 +18,4 @@ export declare const useTweakStyles: <StyleSheet_1, ClassName extends keyof Styl
      * Название компонента который вызывает useTweakStyles. (В данном примере 'Select')
      */
     currentComponentName?: keyof import("../theme").IComponentStyles | undefined;
-}) => StyleSheet_1[ClassName];
+}) => NonNullable<StyleSheet_1[ClassName]>[];

package/dist/style.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
-.react-datepicker__year-read-view--down-arrow,
+.react-datepicker__navigation-icon::before, .react-datepicker__year-read-view--down-arrow,
 .react-datepicker__month-read-view--down-arrow,
-.react-datepicker__month-year-read-view--down-arrow, .react-datepicker__navigation-icon::before {
+.react-datepicker__month-year-read-view--down-arrow {
   border-color: #ccc;
   border-style: solid;
   border-width: 3px 3px 0 0;
@@ -12,58 +12,6 @@
   top: 6px;
   width: 9px;
 }
-.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
-  margin-left: -4px;
-  position: absolute;
-  width: 0;
-}
-.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
-  box-sizing: content-box;
-  position: absolute;
-  border: 8px solid transparent;
-  height: 0;
-  width: 1px;
-  content: "";
-  z-index: -1;
-  border-width: 8px;
-  left: -8px;
-}
-.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
-  border-bottom-color: #aeaeae;
-}
-
-.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
-  top: 0;
-  margin-top: -8px;
-}
-.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
-  border-top: none;
-  border-bottom-color: #f0f0f0;
-}
-.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
-  top: 0;
-}
-.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
-  top: -1px;
-  border-bottom-color: #aeaeae;
-}
-
-.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
-  bottom: 0;
-  margin-bottom: -8px;
-}
-.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {
-  border-bottom: none;
-  border-top-color: #fff;
-}
-.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {
-  bottom: 0;
-}
-.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before {
-  bottom: -1px;
-  border-top-color: #aeaeae;
-}
-
 .react-datepicker-wrapper {
   display: inline-block;
   padding: 0;
@@ -79,11 +27,9 @@
   border-radius: 0.3rem;
   display: inline-block;
   position: relative;
+  line-height: initial;
 }
 
-.react-datepicker--time-only .react-datepicker__triangle {
-  left: 35px;
-}
 .react-datepicker--time-only .react-datepicker__time-container {
   border-left: 0;
 }
@@ -93,37 +39,20 @@
   border-bottom-right-radius: 0.3rem;
 }
 
-.react-datepicker__triangle {
-  position: absolute;
-  left: 50px;
-}
-
 .react-datepicker-popper {
   z-index: 1;
+  line-height: 0;
 }
-.react-datepicker-popper[data-placement^=bottom] {
-  padding-top: 10px;
-}
-.react-datepicker-popper[data-placement=bottom-end] .react-datepicker__triangle, .react-datepicker-popper[data-placement=top-end] .react-datepicker__triangle {
-  left: auto;
-  right: 50px;
-}
-.react-datepicker-popper[data-placement^=top] {
-  padding-bottom: 10px;
+.react-datepicker-popper .react-datepicker__triangle {
+  stroke: #aeaeae;
 }
-.react-datepicker-popper[data-placement^=right] {
-  padding-left: 8px;
-}
-.react-datepicker-popper[data-placement^=right] .react-datepicker__triangle {
-  left: auto;
-  right: 42px;
-}
-.react-datepicker-popper[data-placement^=left] {
-  padding-right: 8px;
+.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
+  fill: #f0f0f0;
+  color: #f0f0f0;
 }
-.react-datepicker-popper[data-placement^=left] .react-datepicker__triangle {
-  left: 42px;
-  right: auto;
+.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
+  fill: #fff;
+  color: #fff;
 }
 
 .react-datepicker__header {
@@ -165,6 +94,11 @@
   font-size: 0.944rem;
 }
 
+h2.react-datepicker__current-month {
+  padding: 0;
+  margin: 0;
+}
+
 .react-datepicker-time__header {
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -211,7 +145,7 @@
   top: -4px;
 }
 .react-datepicker__navigation:hover *::before {
-  border-color: #a6a6a6;
+  border-color: rgb(165.75, 165.75, 165.75);
 }
 
 .react-datepicker__navigation-icon {
@@ -369,8 +303,7 @@
 .react-datepicker__week-number.react-datepicker__week-number--clickable {
   cursor: pointer;
 }
-.react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected,
-.react-datepicker__week-number--keyboard-selected):hover {
+.react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected):hover {
   border-radius: 0.3rem;
   background-color: #f0f0f0;
 }
@@ -380,15 +313,7 @@
   color: #fff;
 }
 .react-datepicker__week-number--selected:hover {
-  background-color: #1d5d90;
-}
-.react-datepicker__week-number--keyboard-selected {
-  border-radius: 0.3rem;
-  background-color: #2a87d0;
-  color: #fff;
-}
-.react-datepicker__week-number--keyboard-selected:hover {
-  background-color: #1d5d90;
+  background-color: rgb(28.75, 93.2196969697, 143.75);
 }
 
 .react-datepicker__day-names {
@@ -417,10 +342,10 @@
 .react-datepicker__year-text {
   cursor: pointer;
 }
-.react-datepicker__day:hover,
-.react-datepicker__month-text:hover,
-.react-datepicker__quarter-text:hover,
-.react-datepicker__year-text:hover {
+.react-datepicker__day:not([aria-disabled=true]):hover,
+.react-datepicker__month-text:not([aria-disabled=true]):hover,
+.react-datepicker__quarter-text:not([aria-disabled=true]):hover,
+.react-datepicker__year-text:not([aria-disabled=true]):hover {
   border-radius: 0.3rem;
   background-color: #f0f0f0;
 }
@@ -438,11 +363,11 @@
   background-color: #3dcc4a;
   color: #fff;
 }
-.react-datepicker__day--highlighted:hover,
-.react-datepicker__month-text--highlighted:hover,
-.react-datepicker__quarter-text--highlighted:hover,
-.react-datepicker__year-text--highlighted:hover {
-  background-color: #32be3f;
+.react-datepicker__day--highlighted:not([aria-disabled=true]):hover,
+.react-datepicker__month-text--highlighted:not([aria-disabled=true]):hover,
+.react-datepicker__quarter-text--highlighted:not([aria-disabled=true]):hover,
+.react-datepicker__year-text--highlighted:not([aria-disabled=true]):hover {
+  background-color: rgb(49.8551020408, 189.6448979592, 62.5632653061);
 }
 .react-datepicker__day--highlighted-custom-1,
 .react-datepicker__month-text--highlighted-custom-1,
@@ -465,10 +390,10 @@
   background-color: #ff6803;
   color: #fff;
 }
-.react-datepicker__day--holidays .holiday-overlay,
-.react-datepicker__month-text--holidays .holiday-overlay,
-.react-datepicker__quarter-text--holidays .holiday-overlay,
-.react-datepicker__year-text--holidays .holiday-overlay {
+.react-datepicker__day--holidays .overlay,
+.react-datepicker__month-text--holidays .overlay,
+.react-datepicker__quarter-text--holidays .overlay,
+.react-datepicker__year-text--holidays .overlay {
   position: absolute;
   bottom: 100%;
   left: 50%;
@@ -482,16 +407,16 @@
   opacity: 0;
   transition: visibility 0s, opacity 0.3s ease-in-out;
 }
-.react-datepicker__day--holidays:hover,
-.react-datepicker__month-text--holidays:hover,
-.react-datepicker__quarter-text--holidays:hover,
-.react-datepicker__year-text--holidays:hover {
-  background-color: #cf5300;
+.react-datepicker__day--holidays:not([aria-disabled=true]):hover,
+.react-datepicker__month-text--holidays:not([aria-disabled=true]):hover,
+.react-datepicker__quarter-text--holidays:not([aria-disabled=true]):hover,
+.react-datepicker__year-text--holidays:not([aria-disabled=true]):hover {
+  background-color: rgb(207, 82.9642857143, 0);
 }
-.react-datepicker__day--holidays:hover .holiday-overlay,
-.react-datepicker__month-text--holidays:hover .holiday-overlay,
-.react-datepicker__quarter-text--holidays:hover .holiday-overlay,
-.react-datepicker__year-text--holidays:hover .holiday-overlay {
+.react-datepicker__day--holidays:hover .overlay,
+.react-datepicker__month-text--holidays:hover .overlay,
+.react-datepicker__quarter-text--holidays:hover .overlay,
+.react-datepicker__year-text--holidays:hover .overlay {
   visibility: visible;
   opacity: 1;
 }
@@ -509,31 +434,31 @@
   background-color: #216ba5;
   color: #fff;
 }
-.react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover,
-.react-datepicker__month-text--selected:hover,
-.react-datepicker__month-text--in-selecting-range:hover,
-.react-datepicker__month-text--in-range:hover,
-.react-datepicker__quarter-text--selected:hover,
-.react-datepicker__quarter-text--in-selecting-range:hover,
-.react-datepicker__quarter-text--in-range:hover,
-.react-datepicker__year-text--selected:hover,
-.react-datepicker__year-text--in-selecting-range:hover,
-.react-datepicker__year-text--in-range:hover {
-  background-color: #1d5d90;
+.react-datepicker__day--selected:not([aria-disabled=true]):hover, .react-datepicker__day--in-selecting-range:not([aria-disabled=true]):hover, .react-datepicker__day--in-range:not([aria-disabled=true]):hover,
+.react-datepicker__month-text--selected:not([aria-disabled=true]):hover,
+.react-datepicker__month-text--in-selecting-range:not([aria-disabled=true]):hover,
+.react-datepicker__month-text--in-range:not([aria-disabled=true]):hover,
+.react-datepicker__quarter-text--selected:not([aria-disabled=true]):hover,
+.react-datepicker__quarter-text--in-selecting-range:not([aria-disabled=true]):hover,
+.react-datepicker__quarter-text--in-range:not([aria-disabled=true]):hover,
+.react-datepicker__year-text--selected:not([aria-disabled=true]):hover,
+.react-datepicker__year-text--in-selecting-range:not([aria-disabled=true]):hover,
+.react-datepicker__year-text--in-range:not([aria-disabled=true]):hover {
+  background-color: rgb(28.75, 93.2196969697, 143.75);
 }
 .react-datepicker__day--keyboard-selected,
 .react-datepicker__month-text--keyboard-selected,
 .react-datepicker__quarter-text--keyboard-selected,
 .react-datepicker__year-text--keyboard-selected {
   border-radius: 0.3rem;
-  background-color: #bad9f1;
+  background-color: rgb(186.25, 217.0833333333, 241.25);
   color: rgb(0, 0, 0);
 }
-.react-datepicker__day--keyboard-selected:hover,
-.react-datepicker__month-text--keyboard-selected:hover,
-.react-datepicker__quarter-text--keyboard-selected:hover,
-.react-datepicker__year-text--keyboard-selected:hover {
-  background-color: #1d5d90;
+.react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover,
+.react-datepicker__month-text--keyboard-selected:not([aria-disabled=true]):hover,
+.react-datepicker__quarter-text--keyboard-selected:not([aria-disabled=true]):hover,
+.react-datepicker__year-text--keyboard-selected:not([aria-disabled=true]):hover {
+  background-color: rgb(28.75, 93.2196969697, 143.75);
 }
 .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
 .react-datepicker__month-text--in-range,
@@ -594,11 +519,22 @@
   cursor: default;
   color: #ccc;
 }
-.react-datepicker__day--disabled:hover,
-.react-datepicker__month-text--disabled:hover,
-.react-datepicker__quarter-text--disabled:hover,
-.react-datepicker__year-text--disabled:hover {
-  background-color: transparent;
+.react-datepicker__day--disabled .overlay,
+.react-datepicker__month-text--disabled .overlay,
+.react-datepicker__quarter-text--disabled .overlay,
+.react-datepicker__year-text--disabled .overlay {
+  position: absolute;
+  bottom: 70%;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: #333;
+  color: #fff;
+  padding: 4px;
+  border-radius: 4px;
+  white-space: nowrap;
+  visibility: hidden;
+  opacity: 0;
+  transition: visibility 0s, opacity 0.3s ease-in-out;
 }
 
 .react-datepicker__input-container {
@@ -634,7 +570,7 @@
 .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
 .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
 .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
-  border-top-color: #b3b3b3;
+  border-top-color: rgb(178.5, 178.5, 178.5);
 }
 .react-datepicker__year-read-view--down-arrow,
 .react-datepicker__month-read-view--down-arrow,
@@ -702,12 +638,12 @@
 .react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
 .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
 .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
-  border-bottom-color: #b3b3b3;
+  border-bottom-color: rgb(178.5, 178.5, 178.5);
 }
 .react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
 .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
 .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
-  border-top-color: #b3b3b3;
+  border-top-color: rgb(178.5, 178.5, 178.5);
 }
 .react-datepicker__year-option--selected,
 .react-datepicker__month-option--selected,

package/dist/theme/Provider.d.ts

@@ -1,11 +1,14 @@
 import { FC, ReactNode } from 'react';
-import { IUiKitTheme } from './types';
+import type { IUiKitTheme } from './types';
 export interface IThemedProviderProps {
     theme: IUiKitTheme;
     children: ReactNode;
 }
 export declare const getTheme: () => IUiKitTheme;
-export declare const ThemeContext: import("react").Context<{
+interface ThemeContextValue {
     theme: IUiKitTheme;
-}>;
+}
+export declare const ThemeContext: import("react").Context<ThemeContextValue>;
 export declare const ThemeProvider: FC<IThemedProviderProps>;
+export declare const useTheme: () => IUiKitTheme;
+export {};

package/dist/theme/create-themed-styles.d.ts

@@ -0,0 +1,2 @@
+import { IComponentName, IStyles, IUseStyles } from './types';
+export declare function createThemedStyles<C extends string>(...args: [IStyles<C>] | [IComponentName, IStyles<C>]): IUseStyles<C>;