@broxus/react-uikit 0.17.3 → 0.18.0

package/dist/esm/components/Control/Input/Number/index.js

@@ -1,5 +1,5 @@
-import RcInputNumber from 'rc-input-number';
-import omit from 'rc-util/lib/omit';
+import RcInputNumber from '@rc-component/input-number';
+import omit from '@rc-component/util/lib/omit';
 import * as React from 'react';
 import { useConfig } from '../../../../components/ConfigProvider';
 import { useInput } from '../../../../components/Control/Input/useInput';

package/dist/esm/components/Control/Input/types.d.ts

@@ -1,4 +1,4 @@
-import { type InputNumberProps as RcInputNumberProps } from 'rc-input-number';
+import { type InputNumberProps as RcInputNumberProps } from '@rc-component/input-number';
 import type * as React from 'react';
 import { type ControlProps, type ValueType } from '../../../components/Control/types';
 export interface InputFocusOptions extends FocusOptions {
@@ -7,7 +7,7 @@ export interface InputFocusOptions extends FocusOptions {
 export interface InputRef {
     blur: VoidFunction;
     focus: VoidFunction;
-    getInputRef(): React.RefObject<HTMLInputElement> | null;
+    getInputRef(): React.RefObject<HTMLInputElement | null> | null;
 }
 export type OmittedNativeInput = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'defaultChecked' | 'size' | 'prefix' | 'type' | 'max' | 'min'>;
 export interface InputProps<T extends ValueType = ValueType> extends OmittedNativeInput, ControlProps<T> {

package/dist/esm/components/Control/Input/useInput.d.ts

@@ -2,11 +2,11 @@ import * as React from 'react';
 import { type InputNumberProps, type InputProps } from '../../../components/Control/Input/types';
 import { type ValueType } from '../../../components/Control/types';
 interface HookConsumedProps {
-    inputRef: React.RefObject<HTMLInputElement>;
+    inputRef: React.RefObject<HTMLInputElement | null>;
     prefixCls?: string;
     wrapperClasses: string;
 }
 type Props<T, U extends ValueType = ValueType> = T extends InputNumberProps<U> ? T : T extends InputProps<U> ? T : any;
 export declare function fixControlledValue<T>(value: T): T | string;
-export declare function useInput<T, U extends ValueType = ValueType>(props: Props<T, U>): T & HookConsumedProps;
+export declare function useInput<T, U extends ValueType = ValueType>(props: Props<T, U>): Props<T, U> & HookConsumedProps;
 export {};

package/dist/esm/components/Control/Radio/Group.js

@@ -1,5 +1,5 @@
+import useMergedState from '@rc-component/util/lib/hooks/useMergedState';
 import classNames from 'classnames';
-import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import * as React from 'react';
 import { useConfig } from '../../../components/ConfigProvider';
 import { Radio } from '../../../components/Control/Radio/Radio';

package/dist/esm/components/Control/Radio/Radio.js

@@ -11,18 +11,23 @@ export const Radio = React.forwardRef((props, ref) => {
         ?? restProps.defaultChecked
         ?? ('value' in restProps && restProps.value === radioGroup?.value));
     const onChange = React.useCallback(event => {
-        setInternalChecked(true);
+        if (disabled) {
+            return;
+        }
+        if (!('checked' in restProps)) {
+            setInternalChecked(event.target.checked);
+        }
         onChangeCallback?.({
             nativeEvent: event.nativeEvent,
             preventDefault: event.preventDefault,
             stopPropagation: event.stopPropagation,
-            target: { ...props, checked: !internalChecked },
+            target: { ...props, checked: event.target.checked },
         });
         radioGroup?.onChange?.(event);
-    }, [internalChecked, props, radioGroup, onChangeCallback]);
+    }, [disabled, restProps, onChangeCallback, props, radioGroup]);
     const radioProps = React.useMemo(() => ({
         ...restProps,
-        checked: internalChecked,
+        checked: restProps.checked ?? internalChecked,
         disabled,
         id,
         onChange,
@@ -41,7 +46,7 @@ export const Radio = React.forwardRef((props, ref) => {
         [`${controlCls}-${size}`]: block && size,
         [`${rootCls}-wrapper`]: true,
         [`${rootCls}-rtl`]: direction === 'rtl',
-        [`${prefixCls || config.radio?.prefixCls || config.prefixCls}-checked`]: internalChecked,
+        [`${prefixCls || config.radio?.prefixCls || config.prefixCls}-checked`]: radioProps.checked,
         [`${prefixCls || config.radio?.prefixCls || config.prefixCls}-disabled`]: radioProps.disabled,
     }, className), [
         controlCls,
@@ -52,14 +57,13 @@ export const Radio = React.forwardRef((props, ref) => {
         prefixCls,
         config.radio?.prefixCls,
         config.prefixCls,
-        internalChecked,
-        radioProps.disabled,
+        radioProps,
         className,
     ]);
     const radioClasses = React.useMemo(() => classNames(rootCls, {
-        [`${rootCls}-checked`]: internalChecked,
+        [`${rootCls}-checked`]: radioProps.checked,
         [`${rootCls}-disabled`]: disabled,
-    }), [rootCls, internalChecked, disabled]);
+    }), [rootCls, radioProps.checked, disabled]);
     const globalAttributes = React.useMemo(() => retrieveGlobalAttributes(restProps), [restProps]);
     React.useEffect(() => {
         setInternalChecked(restProps.checked

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

@@ -1,6 +1,6 @@
-import { type BaseSelectRef, OptGroup, Option, type SelectProps as RcSelectProps } from 'rc-select';
-import { type OptionProps } from 'rc-select/lib/Option';
-import { type BaseOptionType, type DefaultOptionType } from 'rc-select/lib/Select';
+import { type BaseSelectRef, OptGroup, Option, type SelectProps as RcSelectProps } from '@rc-component/select';
+import { type OptionProps } from '@rc-component/select/lib/Option';
+import { type BaseOptionType, type DefaultOptionType } from '@rc-component/select/lib/Select';
 import * as React from 'react';
 import { type ControlProps, type SelectPlacement } from '../../../components/Control/types';
 import { type SizeType } from '../../../types';

package/dist/esm/components/Control/Select/index.js

@@ -1,5 +1,5 @@
+import RcSelect, { OptGroup, Option } from '@rc-component/select';
 import classNames from 'classnames';
-import RcSelect, { OptGroup, Option } from 'rc-select';
 import * as React from 'react';
 import { useConfig } from '../../../components/ConfigProvider';
 import { getBuiltInPlacements } from '../../../components/Control/Select/placements';
@@ -11,7 +11,7 @@ const SECRET_COMBOBOX_MODE_DO_NOT_USE = 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
 /* eslint-disable jsx-a11y/label-has-associated-control */
 function InternalSelect(props, ref) {
     const config = useConfig();
-    const { allowClear, direction = config.select?.direction || config.direction, dropdownMatchSelectWidth, builtinPlacements = getBuiltInPlacements(dropdownMatchSelectWidth), className, listHeight = 256, listItemHeight = 24, placement = 'bottom-left', prefixCls = config.select?.prefixCls || config.prefixCls, showArrow = true, showSearch = false, onPressEnter, ...restProps } = props;
+    const { allowClear, direction = config.select?.direction || config.direction, popupMatchSelectWidth, builtinPlacements = getBuiltInPlacements(popupMatchSelectWidth), className, listHeight = 256, listItemHeight = 24, placement = 'bottom-left', prefixCls = config.select?.prefixCls || config.prefixCls, showArrow = true, showSearch = false, onPressEnter, ...restProps } = props;
     const inputRef = React.useRef(null);
     const labelRef = React.useRef(null);
     const [focused, setFocused] = React.useState(false);
@@ -36,9 +36,9 @@ function InternalSelect(props, ref) {
         }
         restProps.onKeyDown?.(event);
     }, [onPressEnter, restProps]);
-    const onDropdownVisibleChange = React.useCallback((open) => {
+    const onPopupVisibleChange = React.useCallback((open) => {
         setInternalOpen(open);
-        restProps.onDropdownVisibleChange?.(open);
+        restProps.onPopupVisibleChange?.(open);
     }, [restProps]);
     const onClickIcon = React.useCallback(() => {
         setInternalOpen(!internalOpen);
@@ -94,12 +94,6 @@ function InternalSelect(props, ref) {
             else if (React.isValidElement(config.select?.loadingIcon)) {
                 suffixIcon = config.select.loadingIcon;
             }
-            else if (typeof config.selectLoadingIcon === 'function') {
-                suffixIcon = config.selectLoadingIcon();
-            }
-            else if (React.isValidElement(config.selectLoadingIcon)) {
-                suffixIcon = config.selectLoadingIcon;
-            }
             else {
                 suffixIcon = React.createElement(Spinner, { key: "spinner", ratio: 0.7 });
             }
@@ -113,12 +107,6 @@ function InternalSelect(props, ref) {
                 else if (React.isValidElement(config.select?.addIcon)) {
                     suffixIcon = config.select.addIcon;
                 }
-                else if (typeof config.selectAddIcon === 'function') {
-                    suffixIcon = config.selectAddIcon({ onClick: onClickIcon });
-                }
-                else if (React.isValidElement(config.selectAddIcon)) {
-                    suffixIcon = config.selectAddIcon;
-                }
                 else {
                     suffixIcon = React.createElement(Icon, { key: "add_box", icon: "add_box", onClick: onClickIcon });
                 }
@@ -130,12 +118,6 @@ function InternalSelect(props, ref) {
                 else if (React.isValidElement(config.select?.searchIcon)) {
                     suffixIcon = config.select.searchIcon;
                 }
-                else if (typeof config.selectSearchIcon === 'function') {
-                    suffixIcon = config.selectSearchIcon();
-                }
-                else if (React.isValidElement(config.selectSearchIcon)) {
-                    suffixIcon = config.selectSearchIcon;
-                }
                 else {
                     suffixIcon = React.createElement(Icon, { key: "manage_search", icon: "manage_search" });
                 }
@@ -146,12 +128,6 @@ function InternalSelect(props, ref) {
             else if (React.isValidElement(config.select?.arrowIcon)) {
                 suffixIcon = config.select.arrowIcon;
             }
-            else if (typeof config.selectArrowIcon === 'function') {
-                suffixIcon = config.selectArrowIcon({ isOpen: internalOpen, onClick: onClickIcon });
-            }
-            else if (React.isValidElement(config.selectArrowIcon)) {
-                suffixIcon = config.selectArrowIcon;
-            }
             else {
                 suffixIcon = internalOpen ? (React.createElement(Icon, { key: "expand_less", icon: "expand_less" })) : (React.createElement(Icon, { key: "expand_more", icon: "expand_more", onClick: onClickIcon }));
             }
@@ -170,12 +146,6 @@ function InternalSelect(props, ref) {
         else if (React.isValidElement(config.select?.notFoundContent)) {
             mergedNotFound = config.select.notFoundContent;
         }
-        else if (typeof config.selectNotFoundContent === 'function') {
-            mergedNotFound = config.selectNotFoundContent();
-        }
-        else if (React.isValidElement(config.selectNotFoundContent)) {
-            mergedNotFound = config.selectNotFoundContent;
-        }
         let clearIcon = React.createElement(Icon, { icon: "clear" });
         if (typeof config.select?.clearIcon === 'function') {
             clearIcon = config.select.clearIcon();
@@ -183,17 +153,10 @@ function InternalSelect(props, ref) {
         else if (React.isValidElement(config.select?.clearIcon)) {
             clearIcon = config.select.clearIcon;
         }
-        else if (typeof config.selectClearIcon === 'function') {
-            clearIcon = config.selectClearIcon();
-        }
-        else if (React.isValidElement(config.selectClearIcon)) {
-            clearIcon = config.selectClearIcon;
-        }
         return {
             allowClear: (allowClear || allowClear === undefined) && {
                 clearIcon,
             },
-            dropdownMatchSelectWidth: true,
             listHeight,
             listItemHeight,
             menuItemSelectedIcon: React.createElement(Icon, { icon: "check" }),
@@ -204,14 +167,16 @@ function InternalSelect(props, ref) {
             suffixIcon,
             transitionName: `${prefixCls || config.select?.prefixCls || config.prefixCls}-motion-slide-bottom-small`,
             ...restProps,
-            dropdownClassName: classNames(restProps.dropdownClassName, {
+            notFoundContent: mergedNotFound,
+            popupClassName: classNames(restProps.popupClassName, {
                 [`${prefixCls || config.select?.prefixCls || config.prefixCls}-dropdown-rtl`]: direction === 'rtl',
             }),
-            notFoundContent: mergedNotFound,
+            popupMatchSelectWidth: true,
+            // eslint-disable-next-line sort-keys
             onBlur,
-            onDropdownVisibleChange,
             onFocus,
             onKeyDown,
+            onPopupVisibleChange,
         };
     }, [
         restProps,
@@ -227,10 +192,10 @@ function InternalSelect(props, ref) {
         prefixCls,
         direction,
         onBlur,
-        onDropdownVisibleChange,
         onFocus,
         onKeyDown,
         onClickIcon,
+        onPopupVisibleChange,
     ]);
     React.useImperativeHandle(ref, () => ({
         blur() {
@@ -244,11 +209,9 @@ function InternalSelect(props, ref) {
         },
     }));
     return (React.createElement("label", { ref: labelRef, className: wrapperClasses, htmlFor: restProps.id },
-        React.createElement(RcSelect, { ref: inputRef, builtinPlacements: builtinPlacements, dropdownAlign: {
+        React.createElement(RcSelect, { ref: inputRef, builtinPlacements: builtinPlacements, popupAlign: {
                 offset: [offsetY, 5],
-            }, 
-            // @ts-ignore
-            placement: placement, ...inputProps, mode: mode })));
+            }, placement: placement, ...inputProps, mode: mode })));
 }
 export const Select = React.forwardRef(InternalSelect);
 Select.SECRET_COMBOBOX_MODE_DO_NOT_USE = SECRET_COMBOBOX_MODE_DO_NOT_USE;

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

@@ -1,4 +1,4 @@
-import { type TextAreaProps as RcTextAreaProps, type TextAreaRef } from 'rc-textarea';
+import { type TextAreaProps as RcTextAreaProps, type TextAreaRef } from '@rc-component/textarea';
 import * as React from 'react';
 import { type SizeType, type StateType } from '../../../types';
 import './index.scss';

package/dist/esm/components/Control/TextArea/index.js

@@ -1,6 +1,6 @@
+import RcTextArea from '@rc-component/textarea';
+import omit from '@rc-component/util/lib/omit';
 import classNames from 'classnames';
-import RcTextArea from 'rc-textarea';
-import omit from 'rc-util/lib/omit';
 import * as React from 'react';
 import { useConfig } from '../../../components/ConfigProvider';
 import { fixControlledValue } from '../../../components/Control/Input';

package/dist/esm/components/Control/index.scss

@@ -324,11 +324,11 @@ body:not([dir]) .uk-control:not(.uk-control-rtl),
     --control-large-padding-vertical: #{$control-large-padding-vertical};
     --control-large-line-height: var(--control-large-height);
     --control-large-font-size: var(--global-medium-font-size);
-    --control-success-border: var(--global-success-border);
+    --control-success-border: var(--global-success-background);
     --control-success-color: var(--global-success-background);
-    --control-warning-border: var(--global-warning-border);
+    --control-warning-border: var(--global-warning-background);
     --control-warning-color: var(--global-warning-background);
-    --control-danger-border: var(--global-danger-border);
+    --control-danger-border: var(--global-danger-background);
     --control-danger-color: var(--global-danger-background);
     --control-blank-border-style: #{$control-blank-border-style};
     --control-blank-focus-border: #{$control-blank-focus-border};

package/dist/esm/components/Cover/index.js

@@ -38,7 +38,6 @@ export function Cover(props) {
         if (React.isValidElement(child)) {
             return React.cloneElement(child, {
                 ...child.props,
-                // @ts-ignore
                 ref: idx === 0 ? coveringElement : null,
                 // eslint-disable-next-line sort-keys
                 className: classNames(rootCls, child.props.className),
@@ -49,7 +48,7 @@ export function Cover(props) {
                 onLoad: () => {
                     if (automute) {
                         try {
-                            coveringElement.current?.contentWindow?.postMessage('{"event": "command", "method": "setVolume", "value": 0}', '*');
+                            coveringElement.current?.contentWindow?.postMessage(JSON.stringify({ event: 'command', method: 'setVolume', value: 0 }), '*');
                         }
                         catch (e) { }
                     }

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

@@ -1,4 +1,4 @@
-import { type GenerateConfig } from 'rc-picker/lib/generate';
+import { type GenerateConfig } from '@rc-component/picker/lib/generate';
 import { type AnyObject } from '../../types';
 export declare const generatePicker: <DateType extends AnyObject = AnyObject>(generateConfig: GenerateConfig<DateType>) => (<ValueType = DateType>(props: import("./types").PickerPropsWithMultiple<DateType, import("./types").PickerProps<DateType>, ValueType>) => React.ReactElement) & {
     displayName?: string;

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

@@ -1,4 +1,4 @@
-import { type GenerateConfig } from 'rc-picker/lib/generate';
+import { type GenerateConfig } from '@rc-component/picker/lib/generate';
 import * as React from 'react';
 import { type GenericTimePickerProps, type PickerPanelProps, type PickerPanelPropsWithMultiple } from '../../components/DatePicker/types';
 import { type AnyObject } from '../../types';

package/dist/esm/components/DatePicker/generatePurePicker.js

@@ -1,9 +1,8 @@
-import { PickerPanel } from 'rc-picker';
+import { PickerPanel } from '@rc-component/picker';
 import * as React from 'react';
 import { useConfig } from '../../components/ConfigProvider';
 import { MONTH, MONTHPICKER, QUARTER, QUARTERPICKER, TIME, TIMEPICKER, WEEK, WEEKPICKER, YEAR, YEARPICKER, } from '../../components/DatePicker/constants';
-// eslint-disable-next-line camelcase
-import en_US from '../../components/DatePicker/locale/en_US';
+import defaultPickerLocale from '../../components/DatePicker/locale/en_US';
 import { useComponents } from '../../components/DatePicker/useComponents';
 import { getMotionName } from '../../utils';
 export const generatePurePicker = (generateConfig) => {
@@ -13,7 +12,7 @@ export const generatePurePicker = (generateConfig) => {
         const Picker = React.forwardRef((props, ref) => {
             const config = useConfig();
             const ctxPickerConfig = React.useMemo(() => config[consumerName] || {}, [config]);
-            const { components, direction = ctxPickerConfig.direction || config.direction, locale = en_US, prefixCls = `${config.prefixCls}-datepicker`, ...restProps } = props;
+            const { components, direction = ctxPickerConfig.direction || config.direction, locale = config.datePicker?.locale ?? defaultPickerLocale, prefixCls = `${config.prefixCls}-datepicker`, ...restProps } = props;
             const pickerRef = React.useRef(null);
             const mergedPicker = picker || restProps.picker;
             const mergedComponents = useComponents(components);

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

@@ -1,4 +1,4 @@
-import { type GenerateConfig } from 'rc-picker/lib/generate';
+import { type GenerateConfig } from '@rc-component/picker/lib/generate';
 import * as React from 'react';
 import { type GenericTimePickerProps, type PickerProps, type PickerPropsWithMultiple } from '../../components/DatePicker/types';
 import { type AnyObject } from '../../types';

package/dist/esm/components/DatePicker/generateSinglePicker.js

@@ -1,11 +1,10 @@
+import { Picker as RCPicker } from '@rc-component/picker';
 import classNames from 'classnames';
-import { Picker as RCPicker } from 'rc-picker';
 import * as React from 'react';
 import { useConfig } from '../../components/ConfigProvider';
 import { MONTH, MONTHPICKER, QUARTER, QUARTERPICKER, TIME, TIMEPICKER, WEEK, WEEKPICKER, YEAR, YEARPICKER, } from '../../components/DatePicker/constants';
 import { DatePickerInputPropsContext } from '../../components/DatePicker/DatePickerInputPropsContext';
-// eslint-disable-next-line camelcase
-import en_US from '../../components/DatePicker/locale/en_US';
+import defaultPickerLocale from '../../components/DatePicker/locale/en_US';
 import placements from '../../components/DatePicker/placements';
 import { useComponents } from '../../components/DatePicker/useComponents';
 import { getPlaceholder } from '../../components/DatePicker/utils';
@@ -18,7 +17,7 @@ export const generateSinglePicker = (generateConfig) => {
         const Picker = React.forwardRef((props, ref) => {
             const config = useConfig();
             const ctxPickerConfig = React.useMemo(() => config[consumerName] || {}, [config]);
-            const { allowClear = true, builtinPlacements = placements, className, components, direction = ctxPickerConfig.direction ?? config.direction, getPopupContainer = config.getPopupContainer, locale = en_US, placeholder, placement = 'bottom-left', popupClassName, prefixCls = `${config.prefixCls}-datepicker`, rootClassName, size, state, style, onCalendarChange, ...restProps } = props;
+            const { allowClear = true, builtinPlacements = placements, className, components, direction = ctxPickerConfig.direction ?? config.direction, getPopupContainer = config.getPopupContainer, locale = config.datePicker?.locale ?? defaultPickerLocale, placeholder, placement = 'bottom-left', popupClassName, prefixCls = `${config.prefixCls}-datepicker`, rootClassName, size, state, style, onCalendarChange, ...restProps } = props;
             const pickerRef = React.useRef(null);
             const mergedPicker = picker || restProps.picker;
             const mergedComponents = useComponents(components);
@@ -47,11 +46,12 @@ export const generateSinglePicker = (generateConfig) => {
             return (React.createElement(DatePickerInputPropsContext.Provider, { value: inputProps },
                 React.createElement(RCPicker, { ref: pickerRef, builtinPlacements: builtinPlacements, className: classNames(rootClassName, {
                         [`${prefixCls}-${size}`]: size,
+                        [`${prefixCls}-${state}`]: state,
                         [`${prefixCls}-rtl`]: direction === 'rtl',
                     }, className), classNames: {
                         popup: classNames(popupClassName),
                     }, components: mergedComponents, direction: direction, generateConfig: generateConfig, getPopupContainer: getPopupContainer, locale: locale.lang, picker: mergedPicker, placeholder: getPlaceholder(locale, mergedPicker, placeholder), placement: placement, prefixCls: prefixCls, suffixIcon: suffixIcon, nextIcon: React.createElement("span", { className: `${prefixCls}-next-icon` }), prevIcon: React.createElement("span", { className: `${prefixCls}-prev-icon` }), superPrevIcon: React.createElement("span", { className: `${prefixCls}-super-prev-icon` }), superNextIcon: React.createElement("span", { className: `${prefixCls}-super-next-icon` }), style: style, transitionName: getMotionName(config.prefixCls, 'slide-bottom-small'), onCalendarChange: onCalendarChange, ...restProps, allowClear: mergedAllowClear, styles: {
-                        popup: { ...restProps.styles },
+                        popup: { minWidth: 'fit-content', ...restProps.styles },
                     } })));
         });
         if (process.env.NODE_ENV !== 'production' && displayName) {

package/dist/esm/components/DatePicker/index.js

@@ -1,4 +1,4 @@
-import luxonGenerateConfig from 'rc-picker/lib/generate/luxon';
+import luxonGenerateConfig from '@rc-component/picker/lib/generate/luxon';
 import { generatePicker } from '../../components/DatePicker/generatePicker';
 import { generatePurePicker } from '../../components/DatePicker/generatePurePicker';
 import './index.scss';

package/dist/esm/components/DatePicker/index.scss

@@ -38,7 +38,6 @@
     cursor: text;
     display: flex;
     font-size: inherit;
-    min-height: var(--control-height);
     padding-left: var(--control-padding-horizontal);
     padding-right: var(--control-padding-horizontal);
     position: relative;
@@ -48,6 +47,7 @@
     }
 }
 
+/* Hover state (unused for disabled state) */
 .uk-datepicker:hover {
     background-color: var(--control-hover-background);
     border-color: var(--control-hover-border);
@@ -57,9 +57,10 @@
     }
 }
 
-/* Focus state  (unused for disabled state) */
+/* Focus state (unused for disabled state) */
 .uk-datepicker:focus,
-.uk-datepicker:focus-within {
+.uk-datepicker:focus-within,
+.uk-datepicker-focused {
     background-color: var(--control-focus-background);
     border-color: var(--control-focus-border);
     color: var(--control-focus-color);
@@ -69,20 +70,21 @@
     }
 }
 
-.uk-datepicker-small {
-    font-size: var(--control-small-font-size);
-    padding: 0 var(--control-small-padding-horizontal);
+/* Disabled state */
+.uk-datepicker-disabled {
+    background-color: var(--control-disabled-background);
+    @if mixin-exists(hook-datepicker-disabled) {
+        @include hook-datepicker-disabled;
+    }
 }
 
-.uk-datepicker-medium {
-    font-size: var(--control-medium-font-size);
-    padding: 0 var(--control-medium-padding-horizontal);
+.uk-datepicker-disabled .uk-control.uk-disabled {
+    background: none;
 }
 
-.uk-datepicker-large {
-    font-size: var(--control-large-font-size);
-    padding: 0 var(--control-large-padding-horizontal);
-}
+
+/* Control Input
+ ========================================================================== */
 
 .uk-datepicker .uk-datepicker-input {
     align-items: center;
@@ -97,8 +99,132 @@
 .uk-datepicker .uk-datepicker-input .uk-control {
     border: 0 none;
     flex: 1;
+    min-height: var(--datepicker-height);
     min-width: 1px;
     padding: 0;
+    @if mixin-exists(hook-datepicker-control) {
+        @include hook-datepicker-control;
+    }
+}
+
+
+/* Size modifier
+ ========================================================================== */
+
+/*
+ * Small
+ */
+
+.uk-datepicker-small {
+    font-size: var(--control-small-font-size);
+    padding: 0 var(--control-small-padding-horizontal);
+    @if mixin-exists(hook-datepicker-small) {
+        @include hook-datepicker-small;
+    }
+}
+
+.uk-datepicker-small .uk-datepicker-input .uk-control {
+    min-height: var(--datepicker-small-height);
+}
+
+/*
+ * Medium
+ */
+
+.uk-datepicker-medium {
+    font-size: var(--control-medium-font-size);
+    padding: 0 var(--control-medium-padding-horizontal);
+    @if mixin-exists(hook-datepicker-medium) {
+        @include hook-datepicker-medium;
+    }
+}
+
+.uk-datepicker-medium .uk-datepicker-input .uk-control {
+    min-height: var(--datepicker-medium-height);
+}
+
+/*
+ * Large
+ */
+
+.uk-datepicker-large {
+    font-size: var(--control-large-font-size);
+    padding: 0 var(--control-large-padding-horizontal);
+    @if mixin-exists(hook-datepicker-large) {
+        @include hook-datepicker-large;
+    }
+}
+
+.uk-datepicker-large .uk-datepicker-input .uk-control {
+    min-height: var(--datepicker-large-height);
+}
+
+
+/* Style modifier
+ ========================================================================== */
+
+/*
+ * Success
+ */
+
+.uk-datepicker-success,
+.uk-datepicker-success:hover,
+.uk-datepicker-success:focus-within {
+    border-color: var(--datepicker-success-border);
+    color: var(--datepicker-success-color);
+    @if mixin-exists(hook-datepicker-success) {
+        @include hook-datepicker-success;
+    }
+}
+
+/*
+ * Warning
+ */
+
+.uk-datepicker-warning,
+.uk-datepicker-warning:hover,
+.uk-datepicker-warning:focus-within {
+    border-color: var(--datepicker-warning-border);
+    color: var(--datepicker-warning-color);
+    @if mixin-exists(hook-datepicker-warning) {
+        @include hook-datepicker-warning;
+    }
+}
+
+/*
+ * Danger
+ */
+
+.uk-datepicker-danger,
+.uk-datepicker-danger:hover,
+.uk-datepicker-danger:focus-within {
+    border-color: var(--datepicker-danger-border);
+    color: var(--datepicker-danger-color);
+    @if mixin-exists(hook-datepicker-danger) {
+        @include hook-datepicker-danger;
+    }
+}
+
+/*
+ * Blank
+ */
+
+.uk-datepicker-blank,
+.uk-datepicker-blank:hover,
+.uk-datepicker-blank:focus-within {
+    background-color: transparent;
+    border-color: transparent;
+    border-style: var(--datepicker-blank-border-style);
+    @if mixin-exists(hook-datepicker-blank) {
+        @include hook-datepicker-blank;
+    }
+}
+
+.uk-datepicker-blank:focus-within {
+    border-color: var(--datepicker-blank-focus-border);
+    @if mixin-exists(hook-datepicker-blank-focus) {
+        @include hook-datepicker-blank-focus;
+    }
 }
 
 
@@ -607,6 +733,7 @@
     border-radius: var(--datepicker-dropdown-border-radius);
     font-variant: initial;
     left: -9999px;
+    max-width: fit-content;
     outline: none;
     overflow: hidden;
     padding: calc(var(--datepicker-gutter) / 2);
@@ -644,9 +771,21 @@
 // ========================================================================
 
 :root {
-    --datepicker-border-width: var(--global-border-width);
-    --datepicker-border-style: var(--global-border-style);
-    --datepicker-border: var(--global-border);
+    --datepicker-border: var(--control-border);
+    --datepicker-border-style: var(--control-border-style);
+    --datepicker-border-width: var(--control-border-width);
+    --datepicker-height: #{$datepicker-height};
+    --datepicker-small-height: #{$datepicker-small-height};
+    --datepicker-medium-height: #{$datepicker-medium-height};
+    --datepicker-large-height: #{$datepicker-large-height};
+    --datepicker-success-border: var(--control-success-border);
+    --datepicker-success-color: var(--control-success-color);
+    --datepicker-warning-border: var(--control-warning-border);
+    --datepicker-warning-color: var(--control-warning-color);
+    --datepicker-danger-border: var(--control-danger-border);
+    --datepicker-danger-color: var(--control-danger-color);
+    --datepicker-blank-border-style: var(--control-blank-border-style);
+    --datepicker-blank-focus-border: var(--control-blank-focus-border);
     --datepicker-header-padding-horizontal: var(--global-small-gutter);
     --datepicker-header-font-size: var(--global-font-size);
     --datepicker-header-font-weight: var(--global-bold-font-weight);

package/dist/esm/components/DatePicker/locale/ar_EG.js

@@ -1,4 +1,4 @@
-import CalendarLocale from 'rc-picker/lib/locale/ar_EG';
+import CalendarLocale from '@rc-component/picker/lib/locale/ar_EG';
 import TimePickerLocale from '../../../components/TimePicker/locale/ar_EG';
 /* eslint-disable */
 const locale = {

package/dist/esm/components/DatePicker/locale/az_AZ.js

@@ -1,4 +1,4 @@
-import CalendarLocale from 'rc-picker/lib/locale/az_AZ';
+import CalendarLocale from '@rc-component/picker/lib/locale/az_AZ';
 import TimePickerLocale from '../../../components/TimePicker/locale/az_AZ';
 /* eslint-disable */
 const locale = {