@particle-network/ui-native 0.1.4-beta.0 → 0.1.4-beta.2

package/dist/components/UXButton/button.types.d.ts

@@ -8,7 +8,7 @@ export interface UXButtonProps extends Omit<UXPressableProps, 'style' | 'disable
     /**
      * 按钮尺寸
      * @default 'md'
-     * | size   | ux-pro | ux     |
+     * | size   | ux | street     |
      * | :----- | :----- | :----- |
      * | xs     | 20     | 36     |
      * | sm     | 24     | 40     |
@@ -16,7 +16,7 @@ export interface UXButtonProps extends Omit<UXPressableProps, 'style' | 'disable
      * | lg     | 44     | 48     |
      *
      * fontSize
-     * | size   | ux-pro | ux     |
+     * | size   | ux | street     |
      * | :----- | :----- | :----- |
      * | xs     | 11      | 12     |
      * | sm     | 10     | 14     |

package/dist/components/UXCheckbox/checkbox.js

@@ -1,14 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
 import { useMs } from "../../hooks/index.js";
-import CheckboxOffIcon from "../../icons/CheckboxOffIcon.js";
-import CheckboxOnIcon from "../../icons/CheckboxOnIcon.js";
 import { disabledOpacity } from "../../theme/index.js";
 import { Flex } from "../layout/Flex/index.js";
 import { Text } from "../Text/index.js";
 import { UXPressable } from "../UXPressable/index.js";
 import { useCheckboxGroup } from "./context.js";
-const UXCheckbox = ({ size, color, defaultSelected = false, isSelected, children, value, onValueChange, isDisabled, ...props })=>{
+import { CheckboxOffIcon, CheckboxOnIcon } from "./icons.js";
+const UXCheckbox = ({ size, color, defaultSelected = false, isSelected, children, value, onValueChange, isDisabled, labelPlacement = 'right', ...props })=>{
     const { ms } = useMs();
     const [internalSelected, setInternalSelected] = useState(defaultSelected ?? isSelected);
     const groupContext = useCheckboxGroup();
@@ -22,6 +21,19 @@ const UXCheckbox = ({ size, color, defaultSelected = false, isSelected, children
         defaultSelected
     ]);
     const checkboxColor = color || groupContext?.color || 'primary';
+    const displayLabelPlacement = labelPlacement || groupContext?.labelPlacement || 'right';
+    const bgColor = useMemo(()=>{
+        if ('secondary' === checkboxColor) return 'tertiary';
+        return checkboxColor;
+    }, [
+        checkboxColor
+    ]);
+    const foregroundColor = useMemo(()=>{
+        if ('secondary' === checkboxColor) return 'foreground';
+        return 'white';
+    }, [
+        checkboxColor
+    ]);
     const checkboxIsDisabled = isDisabled || groupContext?.isDisabled;
     const checkboxSize = size || groupContext?.size || 'md';
     const handleSelectChange = ()=>{
@@ -33,23 +45,24 @@ const UXCheckbox = ({ size, color, defaultSelected = false, isSelected, children
     };
     const iconSize = useMemo(()=>{
         if ('sm' === checkboxSize) return ms(14);
-        if ('lg' === checkboxSize) return ms(20);
+        if ('lg' === checkboxSize) return ms(18);
         return ms(16);
     }, [
-        checkboxSize
+        checkboxSize,
+        ms
     ]);
     const labelVariant = useMemo(()=>{
-        if ('sm' === checkboxSize) return 'body3Bold';
-        if ('lg' === checkboxSize) return 'body1Bold';
-        return 'body2Bold';
+        if ('sm' === checkboxSize) return 'body3';
+        if ('lg' === checkboxSize) return 'body1';
+        return 'body2';
     }, [
         checkboxSize
     ]);
-    const gap = useMemo(()=>{
-        if ('sm' === checkboxSize) return 6;
-        return 8;
+    const flexDirection = useMemo(()=>{
+        if ('left' === displayLabelPlacement) return 'row-reverse';
+        return 'row';
     }, [
-        checkboxSize
+        displayLabelPlacement
     ]);
     return /*#__PURE__*/ jsx(UXPressable, {
         disabled: checkboxIsDisabled,
@@ -58,12 +71,14 @@ const UXCheckbox = ({ size, color, defaultSelected = false, isSelected, children
         },
         onPress: handleSelectChange,
         children: /*#__PURE__*/ jsxs(Flex, {
-            gap: gap,
+            direction: flexDirection,
+            gap: 8,
             items: "center",
             ...props,
             children: [
                 internalSelected ? /*#__PURE__*/ jsx(CheckboxOnIcon, {
-                    color: checkboxColor,
+                    color1: bgColor,
+                    color2: foregroundColor,
                     size: iconSize
                 }) : /*#__PURE__*/ jsx(CheckboxOffIcon, {
                     color: "secondary",

package/dist/components/UXCheckbox/icons.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { UXColor } from '@particle-network/ui-shared';
+interface CheckboxOnIconProps {
+    size?: number;
+    color1?: UXColor;
+    color2?: UXColor;
+}
+interface CheckboxOffIconProps {
+    size?: number;
+    color?: UXColor;
+}
+export declare const CheckboxOnIcon: ({ size, color1, color2 }: CheckboxOnIconProps) => React.JSX.Element;
+export declare const CheckboxOffIcon: ({ size, color }: CheckboxOffIconProps) => React.JSX.Element;
+export {};

package/dist/{icons/CheckboxOnIcon.js → components/UXCheckbox/icons.js}

@@ -1,26 +1,41 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
 import react_native_svg, { Path } from "react-native-svg";
-import { useColors } from "../hooks/index.js";
-const CheckboxOnIcon_CheckboxOnIcon = ({ size = 16, color = 'default', ...props })=>{
+import { useColors } from "../../hooks/index.js";
+const CheckboxOnIcon = ({ size = 16, color1 = 'default', color2 = 'white' })=>{
     const { getColor } = useColors();
+    const color1Value = getColor(color1);
+    const color2Value = getColor(color2);
     return /*#__PURE__*/ jsxs(react_native_svg, {
         fill: "none",
-        height: size,
         viewBox: "0 0 16 16",
         width: size,
-        ...props,
+        height: size,
         children: [
             /*#__PURE__*/ jsx(Path, {
                 d: "M2.46154 16H13.5385C14.8979 16 16 14.8979 16 13.5385V2.46154C16 1.10207 14.8979 0 13.5385 0H2.46154C1.10207 0 0 1.10207 0 2.46154V13.5385C0 14.8979 1.10207 16 2.46154 16Z",
-                fill: getColor(color)
+                fill: color1Value
             }),
             /*#__PURE__*/ jsx(Path, {
                 d: "M6.75547 9.24601L4.84436 7.3349C4.68139 7.17193 4.47399 7.09045 4.22214 7.09045C3.97028 7.09045 3.76288 7.17193 3.59991 7.3349C3.43695 7.49786 3.35547 7.70527 3.35547 7.95712C3.35547 8.20897 3.43695 8.41638 3.59991 8.57934L6.13325 11.1127C6.31102 11.2905 6.51843 11.3793 6.75547 11.3793C6.99251 11.3793 7.19991 11.2905 7.37769 11.1127L12.3999 6.09045C12.5629 5.92749 12.6444 5.72008 12.6444 5.46823C12.6444 5.21638 12.5629 5.00897 12.3999 4.84601C12.237 4.68304 12.0295 4.60156 11.7777 4.60156C11.5258 4.60156 11.3184 4.68304 11.1555 4.84601L6.75547 9.24601Z",
-                fill: "#ffffff"
+                fill: color2Value
             })
         ]
     });
 };
-const CheckboxOnIcon = CheckboxOnIcon_CheckboxOnIcon;
-export { CheckboxOnIcon as default };
+const CheckboxOffIcon = ({ size = 16, color = 'default' })=>{
+    const { getColor } = useColors();
+    const colorValue = getColor(color);
+    return /*#__PURE__*/ jsx(react_native_svg, {
+        fill: "none",
+        viewBox: "0 0 16 16",
+        width: size,
+        height: size,
+        children: /*#__PURE__*/ jsx(Path, {
+            d: "M2.46191 0.615234H13.5381C14.5577 0.615234 15.3848 1.44231 15.3848 2.46191V13.5381C15.3848 14.5577 14.5577 15.3848 13.5381 15.3848H2.46191C1.44231 15.3848 0.615234 14.5577 0.615234 13.5381V2.46191C0.615234 1.44231 1.44231 0.615234 2.46191 0.615234Z",
+            stroke: colorValue,
+            strokeWidth: 1.23077
+        })
+    });
+};
+export { CheckboxOffIcon, CheckboxOnIcon };

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

@@ -1,6 +1,6 @@
-import type { UXForegroundColor } from '@particle-network/ui-shared';
 export interface UXCheckboxCommonProps {
-    color?: UXForegroundColor;
+    color?: 'secondary' | 'primary' | 'success' | 'danger' | 'alert' | 'warning' | 'gold' | 'bullish' | 'bearish';
     size?: 'sm' | 'md' | 'lg';
     isDisabled?: boolean;
+    labelPlacement?: 'left' | 'right';
 }

package/dist/components/UXHint/index.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
 import { useMs } from "../../hooks/index.js";
-import QuestionIcon from "../../icons/QuestionIcon.js";
+import { Icon } from "../../icons/index.js";
 import { Square } from "../layout/Square.js";
 import { UXTooltip } from "../UXTooltip/index.js";
 const UXHint = (props)=>{
@@ -14,7 +14,8 @@ const UXHint = (props)=>{
             center: true,
             size: 20,
             style: style,
-            children: /*#__PURE__*/ jsx(QuestionIcon, {
+            children: /*#__PURE__*/ jsx(Icon, {
+                name: "question",
                 color: "secondary",
                 size: ms(14),
                 style: iconStyle

package/dist/components/UXListBox/UXListBoxItem.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
 import { useMs } from "../../hooks/index.js";
-import CheckIcon from "../../icons/CheckIcon.js";
+import { Icon } from "../../icons/index.js";
 import { HStack } from "../layout/HStack.js";
 import { Text } from "../Text/index.js";
 import { UXTouchableOpacity } from "../UXTouchableOpacity/index.js";
@@ -47,7 +47,8 @@ const UXListBoxItem = ({ value = '', startContent, isDisabled = false, onPress,
                     })
                 ]
             }),
-            selectionMode && isSelected ? /*#__PURE__*/ jsx(CheckIcon, {
+            selectionMode && isSelected ? /*#__PURE__*/ jsx(Icon, {
+                name: "check",
                 size: ms(16),
                 color: "foreground"
             }) : null

package/dist/components/UXRadio/radio.js

@@ -2,8 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { Pressable } from "react-native";
 import { useMs } from "../../hooks/index.js";
-import RadioOffIcon from "../../icons/RadioOffIcon.js";
-import RadioOnIcon from "../../icons/RadioOnIcon.js";
+import { Icon } from "../../icons/index.js";
 import { disabledOpacity } from "../../theme/index.js";
 import { Flex } from "../layout/Flex/index.js";
 import { Text } from "../Text/index.js";
@@ -50,10 +49,12 @@ const UXRadio = ({ size, color, children, value, isDisabled, ...props })=>{
             items: "center",
             ...props,
             children: [
-                isSelected ? /*#__PURE__*/ jsx(RadioOnIcon, {
+                isSelected ? /*#__PURE__*/ jsx(Icon, {
+                    name: "radioOn",
                     color: radioColor,
                     size: iconSize
-                }) : /*#__PURE__*/ jsx(RadioOffIcon, {
+                }) : /*#__PURE__*/ jsx(Icon, {
+                    name: "radioOff",
                     color: "secondary",
                     size: iconSize
                 }),

package/dist/components/UXTabs/tab.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
-import DotIcon from "../../icons/DotIcon.js";
+import { Icon } from "../../icons/index.js";
 import { Box } from "../layout/Box/index.js";
 import { HStack } from "../layout/HStack.js";
 import { Text } from "../Text/index.js";
@@ -42,7 +42,8 @@ const UXTab = ({ tabKey = '', title, icon, style, notification })=>{
                         style: styles.tabText,
                         children: title
                     }),
-                    notification ? /*#__PURE__*/ jsx(DotIcon, {
+                    notification ? /*#__PURE__*/ jsx(Icon, {
+                        name: "dot",
                         color: "danger",
                         size: 5,
                         style: {

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

@@ -13,7 +13,7 @@ export interface UXTabsProps extends HStackProps {
      * | light   | 24  | 30  | 34  |
      *
      * variant-text 字号对比
-     * | text    | ux-pro | ux    |
+     * | text    | ux | street    |
      * | ------- | ------ | ----- |
      * | sm      | 12     | 14    |
      * | md      | 14     | 16    |

package/dist/components/UXToast/ToastView.js

@@ -6,7 +6,7 @@ import { HStack } from "../layout/HStack.js";
 import { Text } from "../Text/index.js";
 import { UXButton } from "../UXButton/index.js";
 import { useComponentConfig, useTheme } from "../../hooks/index.js";
-import CloseIcon from "../../icons/CloseIcon.js";
+import { Icon } from "../../icons/index.js";
 import { ToastIcon } from "./ToastIcon.js";
 const ToastView = ({ type, text, props: toastProps })=>{
     const { btnText, numberOfLines = 4, colorBg, onPress = ()=>null } = toastProps ?? {};
@@ -63,7 +63,8 @@ const ToastView = ({ type, text, props: toastProps })=>{
                 /*#__PURE__*/ jsx(UXButton, {
                     variant: "text",
                     onPress: ()=>react_native_toast_message.hide(),
-                    children: /*#__PURE__*/ jsx(CloseIcon, {
+                    children: /*#__PURE__*/ jsx(Icon, {
+                        name: "close",
                         color: colorBg ? 'white' : 'foreground',
                         size: 18
                     })

package/dist/components/date-picker/date-button.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type UXPressableProps } from '../UXPressable';
+interface DateButtonProps extends UXPressableProps {
+    isSelected?: boolean;
+    text: string;
+}
+declare const DateButton: React.FC<DateButtonProps>;
+export default DateButton;

package/dist/components/date-picker/date-button.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Text } from "../Text/index.js";
+import { UXPressable } from "../UXPressable/index.js";
+const DateButton = ({ isSelected, text, ...props })=>/*#__PURE__*/ jsx(UXPressable, {
+        fill: true,
+        center: true,
+        border: 1,
+        h: 30,
+        radius: "xs",
+        borderColor: isSelected ? 'primary' : 'bg-200',
+        bg: "bg-200",
+        ...props,
+        children: /*#__PURE__*/ jsx(Text, {
+            body3Bold: true,
+            color: isSelected ? 'foreground' : 'secondary',
+            children: text
+        })
+    });
+const date_button = DateButton;
+export { date_button as default };

package/dist/components/date-picker/date-picker.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { UXDatePickerProps } from './types';
+export declare const UXDatePicker: React.FC<UXDatePickerProps>;

package/dist/components/date-picker/date-picker.js

@@ -0,0 +1,117 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import dayjs from "dayjs";
+import { useI18n } from "../../hooks/index.js";
+import { UXInput } from "../input/index.js";
+import { HStack } from "../layout/HStack.js";
+import { VStack } from "../layout/VStack.js";
+import { UXButton } from "../UXButton/index.js";
+import { UXModal } from "../UXModal/index.js";
+import { UXPressable } from "../UXPressable/index.js";
+import date_button from "./date-button.js";
+import { DateWheelPicker } from "./date-wheel-picker.js";
+import { TimeWheelPicker } from "./time-wheel-picker.js";
+import { hasTimeInFormat } from "./utils.js";
+const UXDatePicker = ({ value, defaultValue, onConfirm = ()=>null, format = 'YYYY/MM/DD', minDate, maxDate, placeholder, isDisabled = false, isReadOnly = false, ...uxPressableProps })=>{
+    const [isOpen, setIsOpen] = useState(false);
+    const [pickerType, setPickerType] = useState('date');
+    const [internalValue, setInternalValue] = useState(value || defaultValue || new Date());
+    const i18n = useI18n();
+    const [dateFormat, timeFormat] = format.split(' ');
+    const showTimePicker = hasTimeInFormat(format);
+    const displayPlaceholder = placeholder ?? format;
+    useEffect(()=>{
+        if (void 0 !== value) setInternalValue(value);
+    }, [
+        value
+    ]);
+    const handleOpenModal = useCallback((picker)=>{
+        if (isDisabled || isReadOnly) return;
+        setPickerType(picker);
+        setIsOpen(true);
+    }, [
+        isDisabled,
+        isReadOnly
+    ]);
+    const handleConfirm = useCallback(()=>{
+        onConfirm(internalValue);
+        setIsOpen(false);
+    }, [
+        internalValue,
+        onConfirm
+    ]);
+    const handleClose = useCallback(()=>{
+        setIsOpen(false);
+    }, []);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(UXPressable, {
+                onPress: ()=>handleOpenModal('date'),
+                ...uxPressableProps,
+                children: /*#__PURE__*/ jsx(UXInput, {
+                    containerStyle: {
+                        flex: 1
+                    },
+                    editable: false,
+                    isDisabled: isDisabled,
+                    isReadOnly: isReadOnly,
+                    placeholder: displayPlaceholder,
+                    pointerEvents: "none",
+                    value: value ? dayjs(value).format(format) : format
+                })
+            }),
+            /*#__PURE__*/ jsx(UXModal, {
+                disableCloseBySwipe: true,
+                wrapPortal: true,
+                footer: /*#__PURE__*/ jsx(UXButton, {
+                    fullWidth: true,
+                    color: "primary",
+                    size: "lg",
+                    onPress: handleConfirm,
+                    children: i18n.datePicker.confirm
+                }),
+                isOpen: isOpen,
+                scrollViewProps: {
+                    scrollEnabled: false
+                },
+                title: i18n.datePicker.confirm,
+                onClose: handleClose,
+                children: /*#__PURE__*/ jsxs(VStack, {
+                    fullWidth: true,
+                    gap: "lg",
+                    children: [
+                        /*#__PURE__*/ jsxs(HStack, {
+                            fullWidth: true,
+                            items: "center",
+                            gap: 8,
+                            children: [
+                                /*#__PURE__*/ jsx(date_button, {
+                                    isSelected: 'date' === pickerType,
+                                    text: dayjs(internalValue).format(dateFormat),
+                                    onPress: ()=>setPickerType('date')
+                                }),
+                                showTimePicker && /*#__PURE__*/ jsx(date_button, {
+                                    isSelected: 'time' === pickerType,
+                                    text: dayjs(internalValue).format(timeFormat),
+                                    onPress: ()=>setPickerType('time')
+                                })
+                            ]
+                        }),
+                        'date' === pickerType && /*#__PURE__*/ jsx(DateWheelPicker, {
+                            maxDate: maxDate,
+                            minDate: minDate,
+                            selectedDate: internalValue,
+                            onDateChange: setInternalValue
+                        }),
+                        'time' === pickerType && /*#__PURE__*/ jsx(TimeWheelPicker, {
+                            selectedDate: internalValue,
+                            onDateChange: setInternalValue
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+UXDatePicker.displayName = 'UXDatePicker';
+export { UXDatePicker };

package/dist/components/date-picker/date-range-picker.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { UXDateRangePickerProps } from './types';
+export declare const UXDateRangePicker: React.FC<UXDateRangePickerProps>;

package/dist/components/date-picker/date-range-picker.js

@@ -0,0 +1,195 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import dayjs from "dayjs";
+import { useI18n } from "../../hooks/index.js";
+import { Icon } from "../../icons/index.js";
+import { UXInput } from "../input/index.js";
+import { HStack } from "../layout/HStack.js";
+import { VStack } from "../layout/VStack.js";
+import { Text } from "../Text/index.js";
+import { UXButton } from "../UXButton/index.js";
+import { UXModal } from "../UXModal/index.js";
+import { UXPressable } from "../UXPressable/index.js";
+import date_button from "./date-button.js";
+import { DateWheelPicker } from "./date-wheel-picker.js";
+import { TimeWheelPicker } from "./time-wheel-picker.js";
+import { hasTimeInFormat } from "./utils.js";
+const UXDateRangePicker = ({ value, defaultValue, onConfirm = ()=>null, format = 'YYYY/MM/DD', minDate, maxDate, startPlaceholder, endPlaceholder, isDisabled = false, isReadOnly = false, ...hStackProps })=>{
+    const [isOpen, setIsOpen] = useState(false);
+    const [currentEditType, setCurrentEditType] = useState('start');
+    const [pickerType, setPickerType] = useState('date');
+    const [internalStart, setInternalStart] = useState(value?.start || defaultValue?.start || new Date());
+    const [internalEnd, setInternalEnd] = useState(value?.end || defaultValue?.end || new Date());
+    const [error, setError] = useState('');
+    const i18n = useI18n();
+    const [dateFormat, timeFormat] = format.split(' ');
+    const showTimePicker = hasTimeInFormat(format);
+    const displayStartPlaceholder = startPlaceholder ?? format;
+    const displayEndPlaceholder = endPlaceholder ?? format;
+    useEffect(()=>{
+        if (value?.start !== void 0) setInternalStart(value?.start);
+        if (value?.end !== void 0) setInternalEnd(value?.end);
+    }, [
+        value
+    ]);
+    const handleOpenModal = useCallback((type, picker)=>{
+        if (isDisabled || isReadOnly) return;
+        setCurrentEditType(type);
+        setPickerType(picker);
+        setError('');
+        setIsOpen(true);
+    }, [
+        isDisabled,
+        isReadOnly
+    ]);
+    const handleConfirm = useCallback(()=>{
+        if (!internalStart || !internalEnd) return void setError(i18n.datePicker.errorBothRequired);
+        if (internalStart > internalEnd) return void setError(i18n.datePicker.errorStartBeforeEnd);
+        setError('');
+        onConfirm({
+            start: internalStart,
+            end: internalEnd
+        });
+        setIsOpen(false);
+    }, [
+        internalStart,
+        internalEnd,
+        onConfirm,
+        i18n
+    ]);
+    const handleClose = useCallback(()=>{
+        setIsOpen(false);
+    }, []);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs(HStack, {
+                gap: 8,
+                ...hStackProps,
+                children: [
+                    /*#__PURE__*/ jsx(UXPressable, {
+                        fill: true,
+                        onPress: ()=>handleOpenModal('start', 'date'),
+                        children: /*#__PURE__*/ jsx(UXInput, {
+                            containerStyle: {
+                                flex: 1
+                            },
+                            editable: false,
+                            isDisabled: isDisabled,
+                            isReadOnly: isReadOnly,
+                            placeholder: displayStartPlaceholder,
+                            pointerEvents: "none",
+                            value: value?.start ? dayjs(value?.start).format(format) : format
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Icon, {
+                        name: "arrow-right",
+                        color: "tertiary",
+                        size: 16
+                    }),
+                    /*#__PURE__*/ jsx(UXPressable, {
+                        fill: true,
+                        onPress: ()=>handleOpenModal('end', 'date'),
+                        children: /*#__PURE__*/ jsx(UXInput, {
+                            containerStyle: {
+                                flex: 1
+                            },
+                            editable: false,
+                            isDisabled: isDisabled,
+                            isReadOnly: isReadOnly,
+                            placeholder: displayEndPlaceholder,
+                            pointerEvents: "none",
+                            value: value?.end ? dayjs(value?.end).format(format) : format
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(UXModal, {
+                disableCloseBySwipe: true,
+                wrapPortal: true,
+                footer: /*#__PURE__*/ jsxs(VStack, {
+                    fullWidth: true,
+                    gap: 8,
+                    children: [
+                        error && /*#__PURE__*/ jsx(Text, {
+                            color: "danger",
+                            children: error
+                        }),
+                        /*#__PURE__*/ jsx(UXButton, {
+                            fullWidth: true,
+                            color: "primary",
+                            size: "lg",
+                            onPress: handleConfirm,
+                            children: i18n.datePicker.confirm
+                        })
+                    ]
+                }),
+                isOpen: isOpen,
+                scrollViewProps: {
+                    scrollEnabled: false
+                },
+                title: "Time Range",
+                onClose: handleClose,
+                children: /*#__PURE__*/ jsxs(VStack, {
+                    fullWidth: true,
+                    gap: "lg",
+                    children: [
+                        /*#__PURE__*/ jsxs(HStack, {
+                            fullWidth: true,
+                            items: "center",
+                            gap: 8,
+                            children: [
+                                /*#__PURE__*/ jsx(date_button, {
+                                    isSelected: 'start' === currentEditType && 'date' === pickerType,
+                                    text: dayjs(internalStart).format(dateFormat),
+                                    onPress: ()=>handleOpenModal('start', 'date')
+                                }),
+                                showTimePicker && /*#__PURE__*/ jsx(date_button, {
+                                    isSelected: 'start' === currentEditType && 'time' === pickerType,
+                                    text: dayjs(internalStart).format(timeFormat),
+                                    onPress: ()=>handleOpenModal('start', 'time')
+                                }),
+                                /*#__PURE__*/ jsx(Icon, {
+                                    name: "arrow-right",
+                                    color: "tertiary",
+                                    size: 16
+                                }),
+                                /*#__PURE__*/ jsx(date_button, {
+                                    isSelected: 'end' === currentEditType && 'date' === pickerType,
+                                    text: dayjs(internalEnd).format(dateFormat),
+                                    onPress: ()=>handleOpenModal('end', 'date')
+                                }),
+                                showTimePicker && /*#__PURE__*/ jsx(date_button, {
+                                    isSelected: 'end' === currentEditType && 'time' === pickerType,
+                                    text: dayjs(internalEnd).format(timeFormat),
+                                    onPress: ()=>handleOpenModal('end', 'time')
+                                })
+                            ]
+                        }),
+                        'start' === currentEditType && 'date' === pickerType && /*#__PURE__*/ jsx(DateWheelPicker, {
+                            maxDate: maxDate,
+                            minDate: minDate,
+                            selectedDate: internalStart,
+                            onDateChange: setInternalStart
+                        }),
+                        'start' === currentEditType && 'time' === pickerType && /*#__PURE__*/ jsx(TimeWheelPicker, {
+                            selectedDate: internalStart,
+                            onDateChange: setInternalStart
+                        }),
+                        'end' === currentEditType && 'date' === pickerType && /*#__PURE__*/ jsx(DateWheelPicker, {
+                            maxDate: maxDate,
+                            minDate: minDate,
+                            selectedDate: internalEnd,
+                            onDateChange: setInternalEnd
+                        }),
+                        'end' === currentEditType && 'time' === pickerType && /*#__PURE__*/ jsx(TimeWheelPicker, {
+                            selectedDate: internalEnd,
+                            onDateChange: setInternalEnd
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+UXDateRangePicker.displayName = 'UXDateRangePicker';
+export { UXDateRangePicker };

package/dist/components/date-picker/date-wheel-picker.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { WheelPickerProps } from './types';
+export declare const DateWheelPicker: React.FC<WheelPickerProps>;