@broxus/react-uikit 0.16.0 → 0.17.0

package/dist/esm/components/Button/Button.js

@@ -6,7 +6,7 @@ import { Link } from '../../components/Link';
 const defaultElement = 'button';
 export const Button = React.forwardRef((props, ref) => {
     const config = useConfig();
-    const { component = defaultElement, children, ghost, htmlType = 'button', prefixCls = config.button?.prefixCls || config.prefixCls, shape = config.button?.shape || config.buttonShape, size = config.button?.size || config.buttonSize, type, ...restProps } = props;
+    const { component = defaultElement, ghost, htmlType = 'button', prefixCls = config.button?.prefixCls ?? config.prefixCls, shape = config.button?.shape ?? config.buttonShape, size = config.button?.size ?? config.buttonSize, type, ...restProps } = props;
     const buttonRef = React.useRef(null);
     const onClick = React.useCallback(event => {
         if (restProps.disabled) {
@@ -15,7 +15,7 @@ export const Button = React.forwardRef((props, ref) => {
         }
         restProps.onClick?.(event);
     }, [restProps]);
-    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.button?.prefixCls || config.prefixCls, 'button'), [config, prefixCls]);
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls, 'button'), [config, prefixCls]);
     const className = React.useMemo(() => classNames(rootCls, {
         [`${rootCls}-${type}`]: type !== undefined,
         [`${rootCls}-ghost`]: ghost === true,
@@ -23,9 +23,9 @@ export const Button = React.forwardRef((props, ref) => {
         [`${rootCls}-${shape}`]: shape !== undefined && ['circle', 'round'].includes(shape),
     }, restProps.className), [rootCls, type, ghost, size, shape, restProps.className]);
     if (restProps.href !== undefined) {
-        return (React.createElement(Component, { ref: ref || buttonRef, component: Link, href: restProps.href, ...restProps, className: className, onClick: onClick }, children));
+        return (React.createElement(Component, { ref: ref || buttonRef, component: Link, href: restProps.href, ...restProps, className: className, onClick: onClick }));
     }
-    return (React.createElement(Component, { ref: ref || buttonRef, component: component, type: htmlType, ...restProps, className: className, onClick: onClick }, children));
+    return (React.createElement(Component, { ref: ref || buttonRef, component: component, type: htmlType, ...restProps, className: className, onClick: onClick }));
 });
 if (process.env.NODE_ENV !== 'production') {
     Button.displayName = 'Button';

package/dist/esm/components/ConfigProvider/index.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { type ButtonProps } from '../../components/Button';
+import { type PickerLocale } from '../../components/DatePicker';
 import { type ColorMode } from '../../components/Inverse';
+import { type TimePickerLocale } from '../../components/TimePicker';
 import { type BreakpointsConfig, type Direction, type TooltipOptions } from '../../types';
 type PropsWithMouseHandler = {
     onClick: React.HTMLAttributes<HTMLElement>['onClick'];
@@ -21,16 +23,17 @@ export type ConfigContextConsumedProps = {
         tertiaryColorMode?: ColorMode;
     };
     checkbox?: {
-        direction?: Direction | string;
+        direction?: Direction;
         prefixCls?: string;
     };
     control?: {
-        direction?: Direction | string;
+        direction?: Direction;
         prefixCls?: string;
         clearIcon?: React.ReactNode | ((props: PropsWithMouseHandler) => React.ReactElement);
     };
     datePicker?: {
-        direction?: Direction | string;
+        direction?: Direction;
+        locale?: PickerLocale;
         prefixCls?: string;
         clearIcon?: React.ReactNode | (() => React.ReactElement);
         nextIcon?: React.ReactNode;
@@ -39,7 +42,7 @@ export type ConfigContextConsumedProps = {
         superPrevIcon?: React.ReactNode;
         superNextIcon?: React.ReactNode;
     };
-    direction?: Direction | string;
+    direction?: Direction;
     getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement;
     getRootPrefixCls: (prefix?: string, component?: string) => string;
     getTooltipConfig: (props: string | TooltipOptions | undefined) => {
@@ -48,7 +51,7 @@ export type ConfigContextConsumedProps = {
     inverseGlobalColorMode?: ColorMode;
     prefixCls: string;
     radio?: {
-        direction?: Direction | string;
+        direction?: Direction;
         prefixCls?: string;
     };
     section?: {
@@ -58,7 +61,7 @@ export type ConfigContextConsumedProps = {
         tertiaryColorMode?: ColorMode;
     };
     select?: {
-        direction?: Direction | string;
+        direction?: Direction;
         prefixCls?: string;
         addIcon?: React.ReactNode | ((props: PropsWithMouseHandler) => React.ReactElement);
         arrowIcon?: React.ReactNode | ((props: {
@@ -70,7 +73,8 @@ export type ConfigContextConsumedProps = {
         searchIcon?: React.ReactNode | (() => React.ReactElement);
     };
     timePicker?: {
-        direction?: Direction | string;
+        direction?: Direction;
+        locale?: TimePickerLocale;
         prefixCls?: string;
         clearIcon?: React.ReactNode | (() => React.ReactElement);
         suffixIcon?: React.ReactNode;

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

@@ -7,11 +7,11 @@ import './index.scss';
 import '../../index.scss';
 export const Password = React.forwardRef((props, ref) => {
     const config = useConfig();
-    const { prefixCls = config.control?.prefixCls || config.prefixCls, onBlur: onBlurCallback, onChange: onChangeCallback, ...restProps } = props;
+    const { prefixCls = config.control?.prefixCls ?? config.prefixCls, onBlur: onBlurCallback, onChange: onChangeCallback, ...restProps } = props;
     const inputRef = React.useRef(null);
     const removePasswordTimeout = React.useRef(null);
     const [visible, setVisible] = React.useState(false);
-    const controlCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.control?.prefixCls || config.prefixCls, 'control'), [config, prefixCls]);
+    const controlCls = React.useMemo(() => config.getRootPrefixCls(prefixCls, 'control'), [config, prefixCls]);
     const removePasswordValueAttribute = React.useCallback(() => {
         removePasswordTimeout.current = setTimeout(() => {
             const input = inputRef?.current?.getInputRef()?.current;

package/dist/esm/components/Control/Input/useInput.js

@@ -10,7 +10,7 @@ export function fixControlledValue(value) {
 export function useInput(props) {
     const config = useConfig();
     const inputRef = React.useRef(null);
-    const { className, direction = config.control?.direction || config.direction, prefixCls = config.control?.prefixCls || config.prefixCls, size, state, useInternalValueState = true, onChange: onChangeCallback, onClear: onClearCallback, onPressEnter, ...restProps } = props;
+    const { className, direction = config.control?.direction || config.direction, prefixCls = config.control?.prefixCls ?? config.prefixCls, size, state, useInternalValueState = true, onChange: onChangeCallback, onClear: onClearCallback, onPressEnter, ...restProps } = props;
     const [focused, setFocused] = React.useState(false);
     const [internalValue, setInternalValue] = React.useState(useInternalValueState ? restProps.value || restProps.defaultValue : undefined);
     const onChange = React.useCallback((event) => {
@@ -47,6 +47,7 @@ export function useInput(props) {
     }, [onPressEnter, restProps]);
     const inputProps = React.useMemo(() => ({
         ...restProps,
+        prefixCls,
         value: fixControlledValue(internalValue || restProps.value),
         // eslint-disable-next-line sort-keys
         onBlur,
@@ -54,16 +55,16 @@ export function useInput(props) {
         onClear,
         onFocus,
         onKeyDown,
-    }), [restProps, internalValue, onBlur, onChange, onClear, onFocus, onKeyDown]);
-    const controlCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.control?.prefixCls || config.prefixCls, 'control'), [config, prefixCls]);
+    }), [restProps, prefixCls, internalValue, onBlur, onChange, onClear, onFocus, onKeyDown]);
+    const controlCls = React.useMemo(() => config.getRootPrefixCls(prefixCls, 'control'), [config, prefixCls]);
     const wrapperClasses = React.useMemo(() => classNames(controlCls, {
         [`${controlCls}-${restProps.type}`]: restProps.type,
         [`${controlCls}-${size}`]: size,
         [`${controlCls}-${state}`]: state,
         [`${controlCls}-rtl`]: direction === 'rtl',
-        [`${prefixCls || config.control?.prefixCls || config.prefixCls}-disabled`]: restProps.disabled,
-        [`${prefixCls || config.control?.prefixCls || config.prefixCls}-focused`]: focused,
-        [`${prefixCls || config.control?.prefixCls || config.prefixCls}-readonly`]: restProps.readOnly,
+        [`${prefixCls}-disabled`]: restProps.disabled,
+        [`${prefixCls}-focused`]: focused,
+        [`${prefixCls}-readonly`]: restProps.readOnly,
     }, className), [
         controlCls,
         restProps.type,
@@ -73,8 +74,6 @@ export function useInput(props) {
         state,
         direction,
         prefixCls,
-        config.control?.prefixCls,
-        config.prefixCls,
         focused,
         className,
     ]);

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

@@ -2,17 +2,18 @@ import { type BaseSelectRef, OptGroup, Option, type SelectProps as RcSelectProps
 import { type OptionProps } from 'rc-select/lib/Option';
 import { type BaseOptionType, type DefaultOptionType } from 'rc-select/lib/Select';
 import * as React from 'react';
-import { type ControlProps } from '../../../components/Control/types';
+import { type ControlProps, type SelectPlacement } from '../../../components/Control/types';
 import { type SizeType } from '../../../types';
 import './index.scss';
 import '../index.scss';
 export type { BaseSelectRef, OptionProps };
-export interface InternalSelectProps<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType> extends Omit<RcSelectProps<ValueType, OptionType>, 'allowClear' | 'mode'> {
+export interface InternalSelectProps<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType> extends Omit<RcSelectProps<ValueType, OptionType>, 'allowClear' | 'mode' | 'placement'> {
     mode?: 'multiple' | 'tags' | 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
     size?: SizeType;
 }
 export interface SelectProps<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType> extends Omit<ControlProps<ValueType>, 'value' | 'defaultValue'>, Omit<InternalSelectProps<ValueType, OptionType>, 'inputIcon' | 'mode' | 'getInputElement' | 'backfill'> {
     mode?: 'multiple' | 'tags';
+    placement?: SelectPlacement;
     showArrow?: boolean;
 }
 export declare const Select: (<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: SelectProps<ValueType, OptionType> & {

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

@@ -31,7 +31,7 @@
     box-sizing: border-box;
     color: var(--control-color);
     cursor: text;
-    display: inline-flex;
+    display: flex;
     font-size: inherit;
     min-height: var(--control-height);
     padding-left: var(--control-padding-horizontal);

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

@@ -15,3 +15,4 @@ export interface ControlProps<T> {
     value?: T;
     onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>;
 }
+export type SelectPlacement = 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';

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

@@ -0,0 +1,24 @@
+import { type GenerateConfig } from 'rc-picker/lib/generate';
+import * as React from 'react';
+import { type GenericTimePickerProps, type PickerPanelProps, type PickerPanelPropsWithMultiple } from '../../components/DatePicker/types';
+import { type AnyObject } from '../../types';
+export declare const generatePurePicker: <DateType extends AnyObject = AnyObject>(generateConfig: GenerateConfig<DateType>) => {
+    DatePicker: (<ValueType = DateType>(props: PickerPanelPropsWithMultiple<DateType, PickerPanelProps<DateType>, ValueType>) => React.ReactElement) & {
+        displayName?: string;
+    };
+    MonthPicker: (<ValueType = DateType>(props: PickerPanelPropsWithMultiple<DateType, Omit<PickerPanelProps<DateType>, "picker">, ValueType>) => React.ReactElement) & {
+        displayName?: string;
+    };
+    QuarterPicker: (<ValueType = DateType>(props: PickerPanelPropsWithMultiple<DateType, Omit<PickerPanelProps<DateType>, "picker">, ValueType>) => React.ReactElement) & {
+        displayName?: string;
+    };
+    TimePicker: (<ValueType = DateType>(props: PickerPanelPropsWithMultiple<DateType, Omit<GenericTimePickerProps<DateType>, "picker">, ValueType>) => React.ReactElement) & {
+        displayName?: string;
+    };
+    WeekPicker: (<ValueType = DateType>(props: PickerPanelPropsWithMultiple<DateType, Omit<PickerPanelProps<DateType>, "picker">, ValueType>) => React.ReactElement) & {
+        displayName?: string;
+    };
+    YearPicker: (<ValueType = DateType>(props: PickerPanelPropsWithMultiple<DateType, Omit<PickerPanelProps<DateType>, "picker">, ValueType>) => React.ReactElement) & {
+        displayName?: string;
+    };
+};

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

@@ -0,0 +1,38 @@
+import { PickerPanel } 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';
+// eslint-disable-next-line camelcase
+import en_US from '../../components/DatePicker/locale/en_US';
+import { useComponents } from '../../components/DatePicker/useComponents';
+import { getMotionName } from '../../utils';
+export const generatePurePicker = (generateConfig) => {
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type,@typescript-eslint/explicit-module-boundary-types
+    const getPanel = (picker, displayName) => {
+        const consumerName = displayName === TIMEPICKER ? 'timePicker' : 'datePicker';
+        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 pickerRef = React.useRef(null);
+            const mergedPicker = picker || restProps.picker;
+            const mergedComponents = useComponents(components);
+            React.useImperativeHandle(ref, () => pickerRef.current, []);
+            return (
+            // @ts-ignore
+            React.createElement(PickerPanel, { ref: pickerRef, components: mergedComponents, direction: direction, generateConfig: generateConfig, locale: locale.lang, picker: mergedPicker, prefixCls: prefixCls, 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` }), transitionName: getMotionName(config.prefixCls, 'slide-bottom-small'), ...restProps }));
+        });
+        if (process.env.NODE_ENV !== 'production' && displayName) {
+            Picker.displayName = displayName;
+        }
+        return Picker;
+    };
+    const DatePicker = getPanel();
+    const MonthPicker = getPanel(MONTH, MONTHPICKER);
+    const QuarterPicker = getPanel(QUARTER, QUARTERPICKER);
+    // @ts-ignore
+    const TimePicker = getPanel(TIME, TIMEPICKER);
+    const WeekPicker = getPanel(WEEK, WEEKPICKER);
+    const YearPicker = getPanel(YEAR, YEARPICKER);
+    return { DatePicker, MonthPicker, QuarterPicker, TimePicker, WeekPicker, YearPicker };
+};

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

@@ -17,8 +17,8 @@ export const generateSinglePicker = (generateConfig) => {
         const consumerName = displayName === TIMEPICKER ? 'timePicker' : 'datePicker';
         const Picker = React.forwardRef((props, ref) => {
             const config = useConfig();
-            const ctxPickerConfig = config[consumerName] || {};
-            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 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 pickerRef = React.useRef(null);
             const mergedPicker = picker || restProps.picker;
             const mergedComponents = useComponents(components);
@@ -50,7 +50,7 @@ export const generateSinglePicker = (generateConfig) => {
                         [`${prefixCls}-rtl`]: direction === 'rtl',
                     }, className), classNames: {
                         popup: classNames(popupClassName),
-                    }, components: mergedComponents, directio: 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: {
+                    }, 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 },
                     } })));
         });

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

@@ -1,9 +1,12 @@
 import { type DateTime } from 'luxon';
 import { generatePicker } from '../../components/DatePicker/generatePicker';
+import { generatePurePicker } from '../../components/DatePicker/generatePurePicker';
 import './index.scss';
 export * from '../../components/DatePicker/locale';
 export * from '../../components/DatePicker/types';
 export interface DatePicker extends ReturnType<typeof generatePicker<DateTime>> {
     generatePicker: typeof generatePicker;
+    generatePurePicker: typeof generatePurePicker;
+    Panel: ReturnType<typeof generatePurePicker<DateTime>>;
 }
 export declare const DatePicker: DatePicker;

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

@@ -1,8 +1,11 @@
 import dayjsGenerateConfig from 'rc-picker/lib/generate/luxon';
 import { generatePicker } from '../../components/DatePicker/generatePicker';
+import { generatePurePicker } from '../../components/DatePicker/generatePurePicker';
 import './index.scss';
 export * from '../../components/DatePicker/locale';
 export * from '../../components/DatePicker/types';
 const InternalDatePicker = generatePicker(dayjsGenerateConfig);
 export const DatePicker = InternalDatePicker;
 DatePicker.generatePicker = generatePicker;
+DatePicker.generatePurePicker = generatePurePicker;
+DatePicker.Panel = generatePurePicker(dayjsGenerateConfig);

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

@@ -16,7 +16,8 @@
 
 @import '../../styles/variables.scss';
 
-/* Layout
+
+/* Picker
  ========================================================================== */
 
 [class^='uk-datepicker'],
@@ -35,7 +36,7 @@
     border-radius: var(--control-border-radius);
     color: var(--control-color);
     cursor: text;
-    display: inline-flex;
+    display: flex;
     font-size: inherit;
     min-height: var(--control-height);
     padding-left: var(--control-padding-horizontal);
@@ -88,6 +89,9 @@
     display: inline-flex;
     position: relative;
     width: 100%;
+    @if mixin-exists(hook-datepicker-input) {
+        @include hook-datepicker-input;
+    }
 }
 
 .uk-datepicker .uk-datepicker-input .uk-control {
@@ -95,7 +99,9 @@
     padding: 0;
 }
 
-/* Panel */
+
+/* Panel
+ ========================================================================== */
 
 .uk-datepicker-panel-layout {
     align-items: stretch;
@@ -147,6 +153,43 @@
     }
 }
 
+.uk-datepicker-date-panel {
+    @if mixin-exists(hook-datepicker-date-panel) {
+        @include hook-datepicker-date-panel;
+    }
+}
+
+.uk-datepicker-month-panel {
+    @if mixin-exists(hook-datepicker-month-panel) {
+        @include hook-datepicker-month-panel;
+    }
+}
+
+.uk-datepicker-quarter-panel {
+    @if mixin-exists(hook-datepicker-quarter-panel) {
+        @include hook-datepicker-quarter-panel;
+    }
+}
+
+.uk-datepicker-decade-panel {
+    @if mixin-exists(hook-datepicker-decade-panel) {
+        @include hook-datepicker-decade-panel;
+    }
+}
+
+.uk-datepicker-week-panel {
+    @if mixin-exists(hook-datepicker-week-panel) {
+        @include hook-datepicker-week-panel;
+    }
+}
+
+.uk-datepicker-year-panel {
+    @if mixin-exists(hook-datepicker-year-panel) {
+        @include hook-datepicker-year-panel;
+    }
+}
+
+/* Header */
 .uk-datepicker-header {
     align-items: center;
     border-bottom: var(--datepicker-border-width) var(--datepicker-border-style) var(--datepicker-border);
@@ -171,6 +214,7 @@
     }
 }
 
+/* Body and content */
 .uk-datepicker-body {
     padding: var(--datepicker-body-padding-vertical) var(--datepicker-body-padding-horizontal);
     @if mixin-exists(hook-datepicker-body) {
@@ -188,14 +232,7 @@
     }
 }
 
-/* Elements */
-
-.uk-datepicker-content th {
-    box-sizing: border-box;
-    height: var(--datepicker-cell-height);
-    padding: 0;
-}
-
+// Elements
 .uk-datepicker-header button {
     align-items: center;
     appearance: none;
@@ -215,30 +252,18 @@
     padding: 0 var(--datepicker-header-button-padding-horizontal);
     text-align: center;
     transition: color var(--transition-medium-fast-duration);
-    @if mixin-exists(hook-datepicker-header-button) {
-        @include hook-datepicker-header-button;
-    }
 }
 
 .uk-datepicker-header-view button {
     color: inherit;
-    @if mixin-exists(hook-datepicker-header-view-button) {
-        @include hook-datepicker-header-view-button;
-    }
 }
 
 .uk-datepicker-header-view button:hover {
     color: var(--datepicker-header-view-button-hover-color);
-    @if mixin-exists(hook-datepicker-header-view-button-hover) {
-        @include hook-datepicker-header-view-button-hover;
-    }
 }
 
 .uk-datepicker-header > button:hover {
     color: var(--datepicker-header-button-hover-color);
-    @if mixin-exists(hook-datepicker-header-button-hover) {
-        @include hook-datepicker-header-button-hover;
-    }
 }
 
 .uk-datepicker-prev-icon,
@@ -291,48 +316,13 @@
     width: 7px;
 }
 
-/*
- * Time panel
- */
-
-.uk-datepicker-time-panel .uk-datepicker-content {
-    display: flex;
-    flex: auto;
-    height: var(--datepicker-time-column-height);
-    @if mixin-exists(hook-datepicker-time-panel-content) {
-        @include hook-datepicker-time-panel-content;
-    }
-}
-
-.uk-datepicker-time-panel-column {
-    flex: 1 0 auto;
-    margin: var(--global-xsmall-margin) 0;
-    overflow: hidden;
-    padding: 0;
-    scrollbar-color: var(--global-scroll-background, var(--global-muted-backgrounf, rgba(#000, 0.15))) transparent;
-    scrollbar-width: thin;
-    text-align: start;
-    transition: background var(--transition-medium-fast-duration);
-    width: var(--datepicker-time-column-width);
-    @if mixin-exists(hook-datepicker-time-panel-column) {
-        @include hook-datepicker-time-panel-column;
-    }
-}
-
-.uk-datepicker-time-panel-column:hover {
-    overflow-y: auto;
-}
-
-.uk-datepicker-time-panel-column ul {
-    list-style: none;
-    margin: 0;
+.uk-datepicker-content th {
+    box-sizing: border-box;
+    height: var(--datepicker-cell-height);
     padding: 0;
 }
 
-/*
- * Footer
- */
-
+/* Footer */
 .uk-datepicker-footer {
     border-top: var(--datepicker-border-width) var(--datepicker-border-style) var(--datepicker-border);
     padding: var(--datepicker-footer-padding-vertical) var(--datepicker-footer-padding-horizontal);
@@ -386,6 +376,10 @@
     z-index: 1;
 }
 
+.uk-datepicker-cell-in-view {
+    color: var(--datepicker-cell-color);
+}
+
 .uk-datepicker-cell-inner {
     border-radius: var(--datepicker-cell-border-radius);
     display: inline-block;
@@ -394,13 +388,12 @@
     min-width: var(--datepicker-cell-height);
     position: relative;
     z-index: 2;
+    @if mixin-exists(hook-datepicker-cell-inner) {
+        @include hook-datepicker-cell-inner;
+    }
 }
 
-.uk-datepicker-cell-in-view {
-    color: var(--datepicker-cell-color);
-}
-
-/* Hover Cell */
+/* Hover cell state */
 .uk-datepicker-cell:hover:not(.uk-datepicker-cell-in-view, .uk-datepicker-cell-disabled) .uk-datepicker-cell-inner,
 .uk-datepicker-cell:hover:not(
     .uk-datepicker-cell-selected,
@@ -418,18 +411,8 @@
     color: var(--datepicker-cell-active-color);
 }
 
-.uk-datepicker-cell-in-view.uk-datepicker-cell-today .uk-datepicker-cell-inner::before {
-    border: var(--datepicker-border-width) var(--datepicker-border-style) var(--datepicker-border);
-    border-radius: var(--datepicker-cell-border-radius);
-    bottom: 0;
-    content: '';
-    inset-inline: 0;
-    position: absolute;
-    top: 0;
-    z-index: 1;
-}
-
-.uk-datepicker-cell-disabled {
+/* Disabled cell state */
+.uk-datepicker-cell-disabled:not(.uk-datepicker-cell-selected) {
     color: var(--datepicker-cell-disabled-color);
     cursor: not-allowed;
 }
@@ -442,6 +425,18 @@
     background: none;
 }
 
+/* Today */
+.uk-datepicker-cell-in-view.uk-datepicker-cell-today .uk-datepicker-cell-inner::before {
+    border: var(--datepicker-border-width) var(--datepicker-border-style) var(--datepicker-border);
+    border-radius: var(--datepicker-cell-border-radius);
+    bottom: 0;
+    content: '';
+    inset-inline: 0;
+    position: absolute;
+    top: 0;
+    z-index: 1;
+}
+
 .uk-datepicker-cell-disabled.uk-datepicker-cell-today .uk-datepicker-cell-inner::before {
     border-color: var(--datepicker-cell-disabled-border);
 }
@@ -490,6 +485,39 @@
 }
 
 
+/* Time panel */
+.uk-datepicker-time-panel .uk-datepicker-content {
+    display: flex;
+    flex: auto;
+    height: var(--datepicker-time-column-height);
+}
+
+.uk-datepicker-time-panel-column {
+    flex: 1 0 auto;
+    margin: var(--global-xsmall-margin) 0;
+    overflow: hidden;
+    padding: 0;
+    scrollbar-color: var(--global-scroll-background, var(--global-muted-backgrounf, rgba(#000, 0.15))) transparent;
+    scrollbar-width: thin;
+    text-align: start;
+    transition: background var(--transition-medium-fast-duration);
+    width: var(--datepicker-time-column-width);
+    @if mixin-exists(hook-datepicker-time-panel-column) {
+        @include hook-datepicker-time-panel-column;
+    }
+}
+
+.uk-datepicker-time-panel-column:hover {
+    overflow-y: auto;
+}
+
+.uk-datepicker-time-panel-column ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+
 /* Time
  ========================================================================== */
 
@@ -520,7 +548,7 @@
     color: var(--datepicker-cell-active-color);
 }
 
-.uk-datepicker-time-panel-cell-disabled .uk-datepicker-time-panel-cell-inner {
+.uk-datepicker-time-panel-cell-disabled:not(.uk-datepicker-time-panel-cell-selected) .uk-datepicker-time-panel-cell-inner {
     color: var(--datepicker-cell-disabled-color);
     cursor: not-allowed;
 }
@@ -570,8 +598,7 @@
 
 .uk-datepicker-dropdown {
     background-color: var(--datepicker-dropdown-background);
-    border: var(--datepicker-dropdown-border-width) var(--datepicker-dropdown-border-style)
-    var(--datepicker-dropdown-border);
+    border: var(--datepicker-dropdown-border-width) var(--datepicker-dropdown-border-style) var(--datepicker-dropdown-border);
     border-radius: var(--datepicker-dropdown-border-radius);
     font-variant: initial;
     left: -9999px;
@@ -618,13 +645,13 @@
     --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);
-    --datepicker-header-height: var(--global-control-height);
+    --datepicker-header-height: var(--global-control-large-height);
     --datepicker-body-padding-horizontal: var(--global-gutter);
     --datepicker-body-padding-vertical: var(--global-small-gutter);
     --datepicker-header-button-color: var(--global-muted-color);
     --datepicker-header-button-font-size: var(--global-font-size);
     --datepicker-header-button-font-weight: var(--global-bold-font-weight);
-    --datepicker-header-button-line-height: #{$datepicker-button-line-height};
+    --datepicker-header-button-line-height: var(--global-control-large-height);
     --datepicker-header-button-padding-horizontal: var(--global-small-gutter);
     --datepicker-header-button-hover-color: var(--global-color);
     --datepicker-header-view-button-hover-color: var(--global-primary-color);
@@ -633,7 +660,7 @@
     --datepicker-footer-ranges-padding-horizontal: var(--global-small-gutter);
     --datepicker-footer-ranges-padding-vertical: var(--global-small-gutter);
     --datepicker-cell-border-radius: var(--global-small-border-radius);
-    --datepicker-cell-height: #{$datepicker-cell-height};
+    --datepicker-cell-height: var(--global-control-height);
     --datepicker-cell-width: #{$datepicker-cell-width};
     --datepicker-cell-padding: var(--global-xsmall-gutter);
     --datepicker-cell-color: var(--global-color);