@particle-network/ui-native 0.1.4-beta.1 → 0.1.4-beta.3

package/dist/components/UXCheckbox/checkbox.js

@@ -1,13 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
 import { useMs } from "../../hooks/index.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";
 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();
@@ -21,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 = ()=>{
@@ -32,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,
@@ -57,16 +71,16 @@ 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(Icon, {
-                    name: "checkboxOn",
-                    color: checkboxColor,
+                internalSelected ? /*#__PURE__*/ jsx(CheckboxOnIcon, {
+                    color1: bgColor,
+                    color2: foregroundColor,
                     size: iconSize
-                }) : /*#__PURE__*/ jsx(Icon, {
-                    name: "checkboxOff",
+                }) : /*#__PURE__*/ jsx(CheckboxOffIcon, {
                     color: "secondary",
                     size: iconSize
                 }),

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/components/UXCheckbox/icons.js

@@ -0,0 +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 = ({ 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",
+        viewBox: "0 0 16 16",
+        width: size,
+        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: 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: color2Value
+            })
+        ]
+    });
+};
+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/date-picker/date-picker.js

@@ -11,27 +11,31 @@ 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 })=>{
+import useFormat from "./useFormat.js";
+import { hasTimeOnly } from "./utils.js";
+const UXDatePicker = ({ title, 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;
+    const { dateFormat, timeFormat, displayTitle } = useFormat({
+        format,
+        title
+    });
     useEffect(()=>{
         if (void 0 !== value) setInternalValue(value);
     }, [
         value
     ]);
-    const handleOpenModal = useCallback((picker)=>{
+    const handleOpenModal = useCallback(()=>{
         if (isDisabled || isReadOnly) return;
-        setPickerType(picker);
+        setPickerType(hasTimeOnly(format) ? 'time' : 'date');
         setIsOpen(true);
     }, [
         isDisabled,
-        isReadOnly
+        isReadOnly,
+        format
     ]);
     const handleConfirm = useCallback(()=>{
         onConfirm(internalValue);
@@ -46,7 +50,7 @@ const UXDatePicker = ({ value, defaultValue, onConfirm = ()=>null, format = 'YYY
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx(UXPressable, {
-                onPress: ()=>handleOpenModal('date'),
+                onPress: ()=>handleOpenModal(),
                 ...uxPressableProps,
                 children: /*#__PURE__*/ jsx(UXInput, {
                     containerStyle: {
@@ -57,7 +61,7 @@ const UXDatePicker = ({ value, defaultValue, onConfirm = ()=>null, format = 'YYY
                     isReadOnly: isReadOnly,
                     placeholder: displayPlaceholder,
                     pointerEvents: "none",
-                    value: value ? dayjs(value).format(format) : format
+                    value: value ? dayjs(value).format(format) : void 0
                 })
             }),
             /*#__PURE__*/ jsx(UXModal, {
@@ -74,7 +78,7 @@ const UXDatePicker = ({ value, defaultValue, onConfirm = ()=>null, format = 'YYY
                 scrollViewProps: {
                     scrollEnabled: false
                 },
-                title: i18n.datePicker.confirm,
+                title: displayTitle,
                 onClose: handleClose,
                 children: /*#__PURE__*/ jsxs(VStack, {
                     fullWidth: true,
@@ -85,12 +89,12 @@ const UXDatePicker = ({ value, defaultValue, onConfirm = ()=>null, format = 'YYY
                             items: "center",
                             gap: 8,
                             children: [
-                                /*#__PURE__*/ jsx(date_button, {
+                                dateFormat && /*#__PURE__*/ jsx(date_button, {
                                     isSelected: 'date' === pickerType,
                                     text: dayjs(internalValue).format(dateFormat),
                                     onPress: ()=>setPickerType('date')
                                 }),
-                                showTimePicker && /*#__PURE__*/ jsx(date_button, {
+                                timeFormat && /*#__PURE__*/ jsx(date_button, {
                                     isSelected: 'time' === pickerType,
                                     text: dayjs(internalValue).format(timeFormat),
                                     onPress: ()=>setPickerType('time')

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

@@ -13,8 +13,9 @@ 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 })=>{
+import useFormat from "./useFormat.js";
+import { hasTimeOnly } from "./utils.js";
+const UXDateRangePicker = ({ title, 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');
@@ -22,10 +23,13 @@ const UXDateRangePicker = ({ value, defaultValue, onConfirm = ()=>null, format =
     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;
+    const { dateFormat, timeFormat, displayTitle } = useFormat({
+        format,
+        title,
+        rangeMode: true
+    });
     useEffect(()=>{
         if (value?.start !== void 0) setInternalStart(value?.start);
         if (value?.end !== void 0) setInternalEnd(value?.end);
@@ -35,12 +39,13 @@ const UXDateRangePicker = ({ value, defaultValue, onConfirm = ()=>null, format =
     const handleOpenModal = useCallback((type, picker)=>{
         if (isDisabled || isReadOnly) return;
         setCurrentEditType(type);
-        setPickerType(picker);
+        setPickerType(picker || (hasTimeOnly(format) ? 'time' : 'date'));
         setError('');
         setIsOpen(true);
     }, [
         isDisabled,
-        isReadOnly
+        isReadOnly,
+        format
     ]);
     const handleConfirm = useCallback(()=>{
         if (!internalStart || !internalEnd) return void setError(i18n.datePicker.errorBothRequired);
@@ -68,7 +73,7 @@ const UXDateRangePicker = ({ value, defaultValue, onConfirm = ()=>null, format =
                 children: [
                     /*#__PURE__*/ jsx(UXPressable, {
                         fill: true,
-                        onPress: ()=>handleOpenModal('start', 'date'),
+                        onPress: ()=>handleOpenModal('start'),
                         children: /*#__PURE__*/ jsx(UXInput, {
                             containerStyle: {
                                 flex: 1
@@ -78,7 +83,7 @@ const UXDateRangePicker = ({ value, defaultValue, onConfirm = ()=>null, format =
                             isReadOnly: isReadOnly,
                             placeholder: displayStartPlaceholder,
                             pointerEvents: "none",
-                            value: value?.start ? dayjs(value?.start).format(format) : format
+                            value: value?.start ? dayjs(value?.start).format(format) : void 0
                         })
                     }),
                     /*#__PURE__*/ jsx(Icon, {
@@ -88,7 +93,7 @@ const UXDateRangePicker = ({ value, defaultValue, onConfirm = ()=>null, format =
                     }),
                     /*#__PURE__*/ jsx(UXPressable, {
                         fill: true,
-                        onPress: ()=>handleOpenModal('end', 'date'),
+                        onPress: ()=>handleOpenModal('end'),
                         children: /*#__PURE__*/ jsx(UXInput, {
                             containerStyle: {
                                 flex: 1
@@ -98,7 +103,7 @@ const UXDateRangePicker = ({ value, defaultValue, onConfirm = ()=>null, format =
                             isReadOnly: isReadOnly,
                             placeholder: displayEndPlaceholder,
                             pointerEvents: "none",
-                            value: value?.end ? dayjs(value?.end).format(format) : format
+                            value: value?.end ? dayjs(value?.end).format(format) : void 0
                         })
                     })
                 ]
@@ -127,7 +132,7 @@ const UXDateRangePicker = ({ value, defaultValue, onConfirm = ()=>null, format =
                 scrollViewProps: {
                     scrollEnabled: false
                 },
-                title: "Time Range",
+                title: displayTitle,
                 onClose: handleClose,
                 children: /*#__PURE__*/ jsxs(VStack, {
                     fullWidth: true,
@@ -138,12 +143,12 @@ const UXDateRangePicker = ({ value, defaultValue, onConfirm = ()=>null, format =
                             items: "center",
                             gap: 8,
                             children: [
-                                /*#__PURE__*/ jsx(date_button, {
+                                dateFormat && /*#__PURE__*/ jsx(date_button, {
                                     isSelected: 'start' === currentEditType && 'date' === pickerType,
                                     text: dayjs(internalStart).format(dateFormat),
                                     onPress: ()=>handleOpenModal('start', 'date')
                                 }),
-                                showTimePicker && /*#__PURE__*/ jsx(date_button, {
+                                timeFormat && /*#__PURE__*/ jsx(date_button, {
                                     isSelected: 'start' === currentEditType && 'time' === pickerType,
                                     text: dayjs(internalStart).format(timeFormat),
                                     onPress: ()=>handleOpenModal('start', 'time')
@@ -153,12 +158,12 @@ const UXDateRangePicker = ({ value, defaultValue, onConfirm = ()=>null, format =
                                     color: "tertiary",
                                     size: 16
                                 }),
-                                /*#__PURE__*/ jsx(date_button, {
+                                dateFormat && /*#__PURE__*/ jsx(date_button, {
                                     isSelected: 'end' === currentEditType && 'date' === pickerType,
                                     text: dayjs(internalEnd).format(dateFormat),
                                     onPress: ()=>handleOpenModal('end', 'date')
                                 }),
-                                showTimePicker && /*#__PURE__*/ jsx(date_button, {
+                                timeFormat && /*#__PURE__*/ jsx(date_button, {
                                     isSelected: 'end' === currentEditType && 'time' === pickerType,
                                     text: dayjs(internalEnd).format(timeFormat),
                                     onPress: ()=>handleOpenModal('end', 'time')

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

@@ -37,6 +37,10 @@ export interface UXDatePickerProps extends Omit<UXPressableProps, 'children'> {
      * 是否只读
      */
     isReadOnly?: boolean;
+    /**
+     * 弹窗标题
+     */
+    title?: string;
 }
 export interface UXDateRangePickerProps extends Omit<HStackProps, 'children'> {
     /**
@@ -79,6 +83,10 @@ export interface UXDateRangePickerProps extends Omit<HStackProps, 'children'> {
      * 是否只读
      */
     isReadOnly?: boolean;
+    /**
+     * 弹窗标题
+     */
+    title?: string;
 }
 export interface DateRangeValue {
     start?: Date;

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

@@ -0,0 +1,10 @@
+declare const useFormat: ({ format, title, rangeMode }: {
+    format: string;
+    title?: string;
+    rangeMode?: boolean;
+}) => {
+    dateFormat: string | null;
+    timeFormat: string | null;
+    displayTitle: string;
+};
+export default useFormat;

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

@@ -0,0 +1,26 @@
+import { useMemo } from "react";
+import { useI18n } from "../../hooks/index.js";
+import { getDateFormat, getTimeFormat, hasDateOnly, hasTimeOnly } from "./utils.js";
+const useFormat = ({ format, title, rangeMode = false })=>{
+    const i18n = useI18n();
+    const dateFormat = getDateFormat(format);
+    const timeFormat = getTimeFormat(format);
+    const displayTitle = useMemo(()=>{
+        if (title) return title;
+        if (hasDateOnly(format)) return rangeMode ? i18n.datePicker.selectDateRange : i18n.datePicker.selectDate;
+        if (hasTimeOnly(format)) return rangeMode ? i18n.datePicker.selectTimeRange : i18n.datePicker.selectTime;
+        return rangeMode ? i18n.datePicker.selectDateAndTimeRange : i18n.datePicker.selectDateAndTime;
+    }, [
+        format,
+        title,
+        i18n,
+        rangeMode
+    ]);
+    return {
+        dateFormat,
+        timeFormat,
+        displayTitle
+    };
+};
+const date_picker_useFormat = useFormat;
+export { date_picker_useFormat as default };

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

@@ -1,6 +1,36 @@
+/**
+ * 判断格式字符串是否包含日期部分
+ * @param {string} format - 时间格式字符串
+ * @returns {boolean} - 是否包含日期
+ */
+export declare function hasDateInFormat(format: string): boolean;
 /**
  * 判断格式字符串是否包含时间部分
- * @param format 格式字符串
- * @returns 是否包含时间
+ * @param {string} format - 时间格式字符串
+ * @returns {boolean} - 是否包含时间
+ */
+export declare function hasTimeInFormat(format: string): boolean;
+/**
+ * 判断格式字符串是否只包含日期（不含时间）
+ * @param {string} format - 时间格式字符串
+ * @returns {boolean} - 是否只有日期
+ */
+export declare function hasDateOnly(format: string): boolean;
+/**
+ * 判断格式字符串是否只包含时间（不含日期）
+ * @param {string} format - 时间格式字符串
+ * @returns {boolean} - 是否只有时间
+ */
+export declare function hasTimeOnly(format: string): boolean;
+/**
+ * 提取格式字符串中的日期部分
+ * @param {string} format - 时间格式字符串
+ * @returns {string|null} - 日期格式字符串，如果不包含日期则返回 null
+ */
+export declare function getDateFormat(format: string): string | null;
+/**
+ * 提取格式字符串中的时间部分
+ * @param {string} format - 时间格式字符串
+ * @returns {string|null} - 时间格式字符串，如果不包含时间则返回 null
  */
-export declare const hasTimeInFormat: (format: string) => boolean;
+export declare function getTimeFormat(format: string): string | null;

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

@@ -1,2 +1,77 @@
-const hasTimeInFormat = (format)=>/[HhmsAa]/.test(format);
-export { hasTimeInFormat };
+function hasDateInFormat(format) {
+    const datePatterns = [
+        /Y{2,4}/,
+        /M{1,2}/,
+        /D{1,2}/
+    ];
+    return datePatterns.some((pattern)=>pattern.test(format));
+}
+function hasTimeInFormat(format) {
+    const timePatterns = [
+        /H{1,2}/,
+        /h{1,2}/,
+        /m{1,2}/,
+        /s{1,2}/,
+        /A/i
+    ];
+    return timePatterns.some((pattern)=>pattern.test(format));
+}
+function hasDateOnly(format) {
+    return hasDateInFormat(format) && !hasTimeInFormat(format);
+}
+function hasTimeOnly(format) {
+    return hasTimeInFormat(format) && !hasDateInFormat(format);
+}
+function getDateFormat(format) {
+    if (!hasDateInFormat(format)) return null;
+    if (hasDateOnly(format)) return format.trim();
+    const separators = [
+        ' ',
+        'T',
+        ',',
+        '\t'
+    ];
+    for (const sep of separators)if (format.includes(sep)) {
+        const parts = format.split(sep);
+        for (const part of parts)if (hasDateInFormat(part) && !hasTimeInFormat(part)) return part.trim();
+    }
+    const datePatterns = [
+        /Y{2,4}[/-]M{1,2}[/-]D{1,2}/,
+        /Y{2,4}M{1,2}D{1,2}/,
+        /D{1,2}[/-]M{1,2}[/-]Y{2,4}/,
+        /M{1,2}[/-]D{1,2}[/-]Y{2,4}/
+    ];
+    for (const pattern of datePatterns){
+        const match = format.match(pattern);
+        if (match) return match[0];
+    }
+    return format.trim();
+}
+function getTimeFormat(format) {
+    if (!hasTimeInFormat(format)) return null;
+    if (hasTimeOnly(format)) return format.trim();
+    const separators = [
+        ' ',
+        'T',
+        ',',
+        '\t'
+    ];
+    for (const sep of separators)if (format.includes(sep)) {
+        const parts = format.split(sep);
+        const timeParts = [];
+        for (const part of parts)if (hasTimeInFormat(part) || /AM|PM|am|pm/i.test(part)) timeParts.push(part.trim());
+        if (timeParts.length > 0) return timeParts.join(' ');
+    }
+    const timePatterns = [
+        /[Hh]{1,2}:[m]{1,2}:[s]{1,2}\s*(?:AM|PM|am|pm)?/,
+        /[Hh]{1,2}:[m]{1,2}\s*(?:AM|PM|am|pm)?/,
+        /[Hh]{1,2}[m]{1,2}[s]{1,2}\s*(?:AM|PM|am|pm)?/,
+        /[Hh]{1,2}[m]{1,2}\s*(?:AM|PM|am|pm)?/
+    ];
+    for (const pattern of timePatterns){
+        const match = format.match(pattern);
+        if (match) return match[0].trim();
+    }
+    return format.trim();
+}
+export { getDateFormat, getTimeFormat, hasDateInFormat, hasDateOnly, hasTimeInFormat, hasTimeOnly };

package/dist/icons/index.js

@@ -6,37 +6,6 @@ const Icon = ({ name, size = 16, color = 'default', ...props })=>{
     const { getColor } = useColors();
     const colorValue = getColor(color);
     switch(name){
-        case 'checkboxOff':
-            return /*#__PURE__*/ jsx(react_native_svg, {
-                fill: "none",
-                height: size,
-                viewBox: "0 0 16 16",
-                width: size,
-                ...props,
-                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
-                })
-            });
-        case 'checkboxOn':
-            return /*#__PURE__*/ jsxs(react_native_svg, {
-                fill: "none",
-                height: size,
-                viewBox: "0 0 16 16",
-                width: size,
-                ...props,
-                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: colorValue
-                    }),
-                    /*#__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"
-                    })
-                ]
-            });
         case 'check':
             return /*#__PURE__*/ jsx(react_native_svg, {
                 width: size,

package/dist/icons/types.d.ts

@@ -1,7 +1,7 @@
 import type { SvgProps } from 'react-native-svg';
 import type { UXForegroundColor } from '@particle-network/ui-shared';
 export type IconProps = SvgProps & {
-    name: 'checkboxOff' | 'checkboxOn' | 'check' | 'close' | 'dot' | 'radioOff' | 'radioOn' | 'question' | 'arrow-right';
+    name: 'check' | 'close' | 'dot' | 'radioOff' | 'radioOn' | 'question' | 'arrow-right';
     size?: number;
     color?: UXForegroundColor;
 };

package/dist/locales/en.d.ts

@@ -10,6 +10,12 @@ export declare const en: {
         cancel: string;
         errorBothRequired: string;
         errorStartBeforeEnd: string;
+        selectDate: string;
+        selectTime: string;
+        selectDateAndTime: string;
+        selectDateRange: string;
+        selectTimeRange: string;
+        selectDateAndTimeRange: string;
     };
     modal: {
         confirm: string;

package/dist/locales/en.js

@@ -9,7 +9,13 @@ const en = {
         confirm: 'Confirm',
         cancel: 'Cancel',
         errorBothRequired: 'Both start and end dates are required',
-        errorStartBeforeEnd: 'Start date can not be after end date'
+        errorStartBeforeEnd: 'Start date can not be after end date',
+        selectDate: 'Select Date',
+        selectTime: 'Select Time',
+        selectDateAndTime: 'Select Date and Time',
+        selectDateRange: 'Select Date Range',
+        selectTimeRange: 'Select Time Range',
+        selectDateAndTimeRange: 'Select Date and Time Range'
     },
     modal: {
         confirm: 'Confirm',

package/dist/locales/index.d.ts

@@ -14,6 +14,12 @@ export declare const locales: {
             cancel: string;
             errorBothRequired: string;
             errorStartBeforeEnd: string;
+            selectDate: string;
+            selectTime: string;
+            selectDateAndTime: string;
+            selectDateRange: string;
+            selectTimeRange: string;
+            selectDateAndTimeRange: string;
         };
         modal: {
             confirm: string;
@@ -48,6 +54,12 @@ export declare const locales: {
             cancel: string;
             errorBothRequired: string;
             errorStartBeforeEnd: string;
+            selectDate: string;
+            selectTime: string;
+            selectDateAndTime: string;
+            selectDateRange: string;
+            selectTimeRange: string;
+            selectDateAndTimeRange: string;
         };
         modal: {
             confirm: string;
@@ -83,6 +95,12 @@ export declare function getLocaleText(locale: Locale): {
         cancel: string;
         errorBothRequired: string;
         errorStartBeforeEnd: string;
+        selectDate: string;
+        selectTime: string;
+        selectDateAndTime: string;
+        selectDateRange: string;
+        selectTimeRange: string;
+        selectDateAndTimeRange: string;
     };
     modal: {
         confirm: string;

package/dist/locales/zh.js

@@ -9,7 +9,13 @@ const zh = {
         confirm: '确认',
         cancel: '取消',
         errorBothRequired: '请输入开始和结束日期',
-        errorStartBeforeEnd: '开始日期不能晚于结束日期'
+        errorStartBeforeEnd: '开始日期不能晚于结束日期',
+        selectDate: '选择日期',
+        selectTime: '选择时间',
+        selectDateAndTime: '选择日期和时间',
+        selectDateRange: '选择起止日期',
+        selectTimeRange: '选择起止时间',
+        selectDateAndTimeRange: '选择起止日期和时间'
     },
     modal: {
         confirm: '确认',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-native",
-  "version": "0.1.4-beta.1",
+  "version": "0.1.4-beta.3",
   "main": "./entry.js",
   "react-native": "./dist/index.js",
   "module": "./dist/index.js",
@@ -90,9 +90,9 @@
     "unfetch": "^4.2.0",
     "vite": "^6.3.5",
     "zustand": "^5.0.8",
-    "@particle-network/icons": "0.1.3-beta.3",
+    "@particle-network/lintstaged-config": "0.1.0",
     "@particle-network/eslint-config": "0.3.0",
-    "@particle-network/lintstaged-config": "0.1.0"
+    "@particle-network/icons": "0.1.3-beta.3"
   },
   "overrides": {
     "react-docgen-typescript": "2.2.2",