@broxus/react-uikit 0.15.6 → 0.16.1

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

@@ -2,6 +2,7 @@ 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';
 import { Icon } from '../../../components/Icon';
 import { Spinner } from '../../../components/Spinner';
 import './index.scss';
@@ -10,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, className, listHeight = 256, listItemHeight = 24, prefixCls = config.prefixCls, showArrow = true, showSearch = false, onPressEnter, ...restProps } = props;
+    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 inputRef = React.useRef(null);
     const labelRef = React.useRef(null);
     const [focused, setFocused] = React.useState(false);
@@ -49,14 +50,14 @@ function InternalSelect(props, ref) {
         const select = labelRef.current?.firstElementChild;
         if (select) {
             let offset = parseInt(getComputedStyle?.(select).getPropertyValue('border-left-width'), 10);
-            if (restProps.direction !== 'rtl') {
+            if (direction !== 'rtl') {
                 offset *= -1;
             }
             setOffsetY(offset);
         }
-    }, [restProps.direction]);
-    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'select'), [config, prefixCls]);
-    const controlCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'control'), [config, prefixCls]);
+    }, [direction]);
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.select?.prefixCls || config.prefixCls, 'select'), [config, prefixCls]);
+    const controlCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.select?.prefixCls || config.prefixCls, 'control'), [config, prefixCls]);
     const mode = React.useMemo(() => {
         const { mode: m } = restProps;
         if (m === 'combobox') {
@@ -69,16 +70,17 @@ function InternalSelect(props, ref) {
     }, [restProps]);
     const wrapperClasses = React.useMemo(() => classNames([controlCls, `${controlCls}-select`], {
         [`${controlCls}-${restProps.size}`]: restProps.size,
-        [`${controlCls}-rtl`]: restProps.direction === 'rtl',
-        [`${prefixCls || config.prefixCls}-focused`]: focused,
-        [`${prefixCls || config.prefixCls}-disabled`]: restProps.disabled,
+        [`${controlCls}-rtl`]: direction === 'rtl',
+        [`${prefixCls || config.select?.prefixCls || config.prefixCls}-focused`]: focused,
+        [`${prefixCls || config.select?.prefixCls || config.prefixCls}-disabled`]: restProps.disabled,
     }, className), [
         className,
+        config.select?.prefixCls,
         config.prefixCls,
         controlCls,
         focused,
         prefixCls,
-        restProps.direction,
+        direction,
         restProps.disabled,
         restProps.size,
     ]);
@@ -86,7 +88,13 @@ function InternalSelect(props, ref) {
         // Arrow or loading icon
         let suffixIcon;
         if (restProps.loading) {
-            if (typeof config.selectLoadingIcon === 'function') {
+            if (typeof config.select?.loadingIcon === 'function') {
+                suffixIcon = config.select.loadingIcon();
+            }
+            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)) {
@@ -99,7 +107,13 @@ function InternalSelect(props, ref) {
         else if (showArrow) {
             const isMultiple = mode === 'multiple' || mode === 'tags';
             if (isMultiple) {
-                if (typeof config.selectAddIcon === 'function') {
+                if (typeof config.select?.addIcon === 'function') {
+                    suffixIcon = config.select.addIcon({ onClick: onClickIcon });
+                }
+                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)) {
@@ -110,7 +124,13 @@ function InternalSelect(props, ref) {
                 }
             }
             else if (showSearch && internalOpen) {
-                if (typeof config.selectSearchIcon === 'function') {
+                if (typeof config.select?.searchIcon === 'function') {
+                    suffixIcon = config.select.searchIcon();
+                }
+                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)) {
@@ -120,6 +140,12 @@ function InternalSelect(props, ref) {
                     suffixIcon = React.createElement(Icon, { key: "manage_search", icon: "manage_search" });
                 }
             }
+            else if (typeof config.select?.arrowIcon === 'function') {
+                suffixIcon = config.select.arrowIcon({ isOpen: internalOpen, onClick: onClickIcon });
+            }
+            else if (React.isValidElement(config.select?.arrowIcon)) {
+                suffixIcon = config.select.arrowIcon;
+            }
             else if (typeof config.selectArrowIcon === 'function') {
                 suffixIcon = config.selectArrowIcon({ isOpen: internalOpen, onClick: onClickIcon });
             }
@@ -138,14 +164,26 @@ function InternalSelect(props, ref) {
         else if (mode === 'combobox') {
             mergedNotFound = null;
         }
-        if (typeof config.selectNotFoundContent === 'function') {
+        if (typeof config.select?.notFoundContent === 'function') {
+            mergedNotFound = config.select.notFoundContent();
+        }
+        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.selectClearIcon === 'function') {
+        if (typeof config.select?.clearIcon === 'function') {
+            clearIcon = config.select.clearIcon();
+        }
+        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)) {
@@ -164,10 +202,10 @@ function InternalSelect(props, ref) {
             removeIcon: React.createElement(Icon, { icon: "clear" }),
             showSearch,
             suffixIcon,
-            transitionName: `${prefixCls || config.prefixCls}-motion-slide-bottom-small`,
+            transitionName: `${prefixCls || config.select?.prefixCls || config.prefixCls}-motion-slide-bottom-small`,
             ...restProps,
             dropdownClassName: classNames(restProps.dropdownClassName, {
-                [`${prefixCls || config.prefixCls}-dropdown-rtl`]: restProps.direction === 'rtl',
+                [`${prefixCls || config.select?.prefixCls || config.prefixCls}-dropdown-rtl`]: direction === 'rtl',
             }),
             notFoundContent: mergedNotFound,
             onBlur,
@@ -187,6 +225,7 @@ function InternalSelect(props, ref) {
         rootCls,
         showSearch,
         prefixCls,
+        direction,
         onBlur,
         onDropdownVisibleChange,
         onFocus,
@@ -205,9 +244,11 @@ function InternalSelect(props, ref) {
         },
     }));
     return (React.createElement("label", { ref: labelRef, className: wrapperClasses, htmlFor: restProps.id },
-        React.createElement(RcSelect, { ref: inputRef, dropdownAlign: {
+        React.createElement(RcSelect, { ref: inputRef, builtinPlacements: builtinPlacements, dropdownAlign: {
                 offset: [offsetY, 5],
-            }, ...inputProps, mode: mode })));
+            }, 
+            // @ts-ignore
+            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/Select/index.scss

@@ -410,21 +410,21 @@
     }
 }
 
-.uk-select-dropdown-placement-bottomLeft.uk-slide-up-enter.uk-slide-up-enter-active,
-.uk-select-dropdown-placement-bottomLeft.uk-slide-up-appear.uk-slide-up-appear-active {
+.uk-select-dropdown-placement-bottom-left.uk-slide-up-enter.uk-slide-up-enter-active,
+.uk-select-dropdown-placement-bottom-left.uk-slide-up-appear.uk-slide-up-appear-active {
     animation-name: uk-slide-up-in;
 }
 
-.uk-select-dropdown-placement-topLeft.uk-slide-up-enter.uk-slide-up-enter-active,
-.uk-select-dropdown-placement-topLeft.uk-slide-up-appear.uk-slide-up-appear-active {
+.uk-select-dropdown-placement-top-left.uk-slide-up-enter.uk-slide-up-enter-active,
+.uk-select-dropdown-placement-top-left.uk-slide-up-appear.uk-slide-up-appear-active {
     animation-name: uk-slide-down-in;
 }
 
-.uk-select-dropdown-placement-bottomLeft .uk-slide-up-leave.uk-slide-up-leave-active {
+.uk-select-dropdown-placement-bottom-left .uk-slide-up-leave.uk-slide-up-leave-active {
     animation-name: uk-slide-up-out;
 }
 
-.uk-select-dropdown-placement-topLeft.uk-slide-up-leave.uk-slide-up-leave-active {
+.uk-select-dropdown-placement-top-left.uk-slide-up-leave.uk-slide-up-leave-active {
     animation-name: uk-slide-down-out;
 }
 

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

@@ -0,0 +1,2 @@
+import { type AlignType } from '@rc-component/trigger/lib/interface';
+export declare function getBuiltInPlacements(dropdownMatchSelectWidth?: number | boolean): Record<string, AlignType>;

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

@@ -0,0 +1,42 @@
+export function getBuiltInPlacements(dropdownMatchSelectWidth) {
+    // Enable horizontal overflow auto-adjustment when a custom dropdown width is provided
+    const adjustX = dropdownMatchSelectWidth === true ? 0 : 1;
+    return {
+        'bottom-left': {
+            htmlRegion: 'scroll',
+            offset: [0, 4],
+            overflow: {
+                adjustX,
+                adjustY: 1,
+            },
+            points: ['tl', 'bl'],
+        },
+        'bottom-right': {
+            htmlRegion: 'scroll',
+            offset: [0, 4],
+            overflow: {
+                adjustX,
+                adjustY: 1,
+            },
+            points: ['tr', 'br'],
+        },
+        'top-left': {
+            htmlRegion: 'scroll',
+            offset: [0, -4],
+            overflow: {
+                adjustX,
+                adjustY: 1,
+            },
+            points: ['bl', 'tl'],
+        },
+        'top-right': {
+            htmlRegion: 'scroll',
+            offset: [0, -4],
+            overflow: {
+                adjustX,
+                adjustY: 1,
+            },
+            points: ['br', 'tr'],
+        },
+    };
+}

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

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

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

@@ -1,8 +1,5 @@
 import type * as React from 'react';
-import { type Direction } from '../../types';
-export type LiteralUnion<T extends U, U> = T | (U & {});
-export type SizeType = 'small' | 'medium' | 'large';
-export type StateType = 'success' | 'warning' | 'danger' | 'blank';
+import { type Direction, type LiteralUnion, type SizeType, type StateType } from '../../types';
 export type ValueType = string | number;
 export type ControlType = LiteralUnion<'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week', string>;
 export interface ControlProps<T> {

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

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { type InputProps } from '../../components/Control';
+export declare const DatePickerInputPropsContext: React.Context<Pick<InputProps<import("../../components/Control").ValueType>, "className" | "size" | "state">>;

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

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export const DatePickerInputPropsContext = React.createContext({});

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

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { type ButtonProps } from '../../components/Button';
+export declare const PickerButton: React.MemoExoticComponent<(props: ButtonProps) => React.JSX.Element>;

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

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { Button } from '../../components/Button';
+export const PickerButton = React.memo((props) => React.createElement(Button, { size: "small", type: "primary", ...props }));

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

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { type InputProps, type InputRef } from '../../components/Control';
+export declare const PickerInput: React.ForwardRefExoticComponent<InputProps<import("../../components/Control").ValueType> & React.RefAttributes<InputRef>>;

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { Input } from '../../components/Control/Input/Input';
+import { DatePickerInputPropsContext } from '../../components/DatePicker/DatePickerInputPropsContext';
+export const PickerInput = React.forwardRef((props, ref) => {
+    const ctx = React.useContext(DatePickerInputPropsContext);
+    return React.createElement(Input, { ref: ref, ...props, size: ctx.size, state: ctx.state });
+});

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

@@ -0,0 +1,5 @@
+export declare const WEEK: "week", WEEKPICKER: "WeekPicker";
+export declare const MONTH: "month", MONTHPICKER: "MonthPicker";
+export declare const YEAR: "year", YEARPICKER: "YearPicker";
+export declare const QUARTER: "quarter", QUARTERPICKER: "QuarterPicker";
+export declare const TIME: "time", TIMEPICKER: "TimePicker";

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

@@ -0,0 +1,5 @@
+export const [WEEK, WEEKPICKER] = ['week', 'WeekPicker'];
+export const [MONTH, MONTHPICKER] = ['month', 'MonthPicker'];
+export const [YEAR, YEARPICKER] = ['year', 'YearPicker'];
+export const [QUARTER, QUARTERPICKER] = ['quarter', 'QuarterPicker'];
+export const [TIME, TIMEPICKER] = ['time', 'TimePicker'];

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

@@ -0,0 +1,22 @@
+import { type GenerateConfig } from 'rc-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;
+} & {
+    displayName?: string;
+    WeekPicker: (<ValueType = DateType>(props: import("./types").PickerPropsWithMultiple<DateType, Omit<import("./types").PickerProps<DateType>, "picker">, ValueType>) => React.ReactElement) & {
+        displayName?: string;
+    };
+    MonthPicker: (<ValueType = DateType>(props: import("./types").PickerPropsWithMultiple<DateType, Omit<import("./types").PickerProps<DateType>, "picker">, ValueType>) => React.ReactElement) & {
+        displayName?: string;
+    };
+    YearPicker: (<ValueType = DateType>(props: import("./types").PickerPropsWithMultiple<DateType, Omit<import("./types").PickerProps<DateType>, "picker">, ValueType>) => React.ReactElement) & {
+        displayName?: string;
+    };
+    TimePicker: (<ValueType = DateType>(props: import("./types").PickerPropsWithMultiple<DateType, Omit<import("./types").GenericTimePickerProps<DateType>, "picker">, ValueType>) => React.ReactElement) & {
+        displayName?: string;
+    };
+    QuarterPicker: (<ValueType = DateType>(props: import("./types").PickerPropsWithMultiple<DateType, Omit<import("./types").PickerProps<DateType>, "picker">, ValueType>) => React.ReactElement) & {
+        displayName?: string;
+    };
+};

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

@@ -0,0 +1,10 @@
+import { generateSinglePicker } from '../../components/DatePicker/generateSinglePicker';
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type,@typescript-eslint/explicit-module-boundary-types
+export const generatePicker = (generateConfig) => {
+    const { DatePicker, MonthPicker, QuarterPicker, TimePicker, WeekPicker, YearPicker, } = generateSinglePicker(generateConfig);
+    const MergedDatePicker = DatePicker;
+    if (process.env.NODE_ENV !== 'production') {
+        MergedDatePicker.displayName = 'DatePicker';
+    }
+    return MergedDatePicker;
+};

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.d.ts

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

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

@@ -0,0 +1,69 @@
+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 placements from '../../components/DatePicker/placements';
+import { useComponents } from '../../components/DatePicker/useComponents';
+import { getPlaceholder } from '../../components/DatePicker/utils';
+import { Icon } from '../../components/Icon';
+import { getMotionName } from '../../utils';
+export const generateSinglePicker = (generateConfig) => {
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type,@typescript-eslint/explicit-module-boundary-types
+    const getPicker = (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 { 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);
+            const clearIcon = React.useMemo(() => {
+                if (React.isValidElement(ctxPickerConfig?.clearIcon)) {
+                    return ctxPickerConfig.clearIcon;
+                }
+                return (React.createElement(Icon, { key: "clearfix-icon", icon: "close" }));
+            }, [ctxPickerConfig]);
+            const suffixIcon = React.useMemo(() => {
+                if (React.isValidElement(ctxPickerConfig?.suffixIcon)) {
+                    return ctxPickerConfig.suffixIcon;
+                }
+                if (mergedPicker === TIME) {
+                    return React.createElement(Icon, { icon: "schedule" });
+                }
+                // @ts-ignore
+                if (mergedPicker && ![WEEK, MONTH, QUARTER, YEAR].includes(mergedPicker)) {
+                    return React.createElement(Icon, { icon: "calendar_clock" });
+                }
+                return React.createElement(Icon, { icon: "calendar_today" });
+            }, [ctxPickerConfig, mergedPicker]);
+            const inputProps = React.useMemo(() => ({ size, state }), [size, state]);
+            const mergedAllowClear = allowClear === true ? { clearIcon } : allowClear;
+            React.useImperativeHandle(ref, () => pickerRef.current, []);
+            return (React.createElement(DatePickerInputPropsContext.Provider, { value: inputProps },
+                React.createElement(RCPicker, { ref: pickerRef, builtinPlacements: builtinPlacements, className: classNames(rootClassName, {
+                        [`${prefixCls}-${size}`]: size,
+                        [`${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 },
+                    } })));
+        });
+        if (process.env.NODE_ENV !== 'production' && displayName) {
+            Picker.displayName = displayName;
+        }
+        return Picker;
+    };
+    const DatePicker = getPicker();
+    const MonthPicker = getPicker(MONTH, MONTHPICKER);
+    const QuarterPicker = getPicker(QUARTER, QUARTERPICKER);
+    const TimePicker = getPicker(TIME, TIMEPICKER);
+    const WeekPicker = getPicker(WEEK, WEEKPICKER);
+    const YearPicker = getPicker(YEAR, YEARPICKER);
+    return { DatePicker, MonthPicker, QuarterPicker, TimePicker, WeekPicker, YearPicker };
+};

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

@@ -0,0 +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

@@ -0,0 +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);