@particle-network/ui-react 0.4.0-beta.3 → 0.4.0-beta.31

package/dist/components/ProgressWrapper/index.d.ts

@@ -24,7 +24,7 @@ export interface ProgressWrapperProps extends React.HTMLAttributes<HTMLDivElemen
     /**
      * 进度条颜色
      */
-    color?: UXForegroundColor | 'transparent';
+    color?: UXForegroundColor | 'transparent' | `#${string}`;
     /**
      * 进度条 SVG 样式
      */

package/dist/components/ProgressWrapper/index.js

@@ -2,10 +2,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useRef } from "react";
 import { cn } from "@heroui/theme";
-import { getHexColorFromCSSVariable, radiusMap } from "@particle-network/ui-shared";
+import { radiusMap } from "@particle-network/ui-shared";
 import { useSize } from "ahooks";
 import { Center } from "../layout/index.js";
+import { useThemeColor } from "../UXThemeSwitch/use-theme-color.js";
 const ProgressWrapper = ({ className, value = 0, width, height, radius = 'sm', strokeWidth = 1, color = 'primary', children, svgClassName, ...restProps })=>{
+    const uxColors = useThemeColor();
     const autoLayout = !width && !height;
     const containerRef = useRef(null);
     const { width: childWidth, height: childHeight } = useSize(containerRef) ?? {
@@ -34,8 +36,21 @@ const ProgressWrapper = ({ className, value = 0, width, height, radius = 'sm', s
     const rectXY = strokeWidth / 2;
     const perimeter = 2 * (rectWidth + rectHeight);
     const strokeDashoffset = perimeter * (1 - clampedProgress / 100);
-    const colorValue = 'transparent' === color ? 'transparent' : getHexColorFromCSSVariable(color);
-    const trackColor = 'transparent' === color ? 'transparent' : `${colorValue}40`;
+    const colorValue = useMemo(()=>{
+        if ('transparent' === color) return 'transparent';
+        if (color.startsWith('#')) return color;
+        return uxColors[color];
+    }, [
+        color,
+        uxColors
+    ]);
+    const trackColor = useMemo(()=>{
+        if ('transparent' === color) return 'transparent';
+        return `${colorValue}40`;
+    }, [
+        color,
+        colorValue
+    ]);
     const radiusValue = 'number' == typeof radius ? radius : radiusMap[radius];
     const createPathData = (x, y, w, h, r)=>{
         if (0 === r) return `

package/dist/components/UXAutocomplete/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { type AutocompleteProps } from '@heroui/autocomplete';
+export type UXAutocompleteProps = AutocompleteProps;
+export declare const UXAutocomplete: React.FC<UXAutocompleteProps>;
+export { AutocompleteItem as UXAutocompleteItem, AutocompleteSection as UXAutocompleteSection, } from '@heroui/autocomplete';

package/dist/components/UXAutocomplete/index.js

@@ -0,0 +1,72 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Autocomplete, AutocompleteItem, AutocompleteSection } from "@heroui/autocomplete";
+import ChevronDownIcon from "@particle-network/icons/web/ChevronDownIcon";
+const UXAutocomplete = (props)=>{
+    const { fullWidth = false, classNames = {}, radius = 'sm', labelPlacement = 'outside-top', ...restProps } = props;
+    const { base, popoverContent, selectorButton, endContentWrapper, clearButton, listboxWrapper } = classNames;
+    return /*#__PURE__*/ jsx(Autocomplete, {
+        fullWidth: fullWidth,
+        classNames: {
+            base: [
+                'ux-base',
+                base
+            ],
+            popoverContent: [
+                'ux-popover-content',
+                popoverContent
+            ],
+            selectorButton: [
+                'ux-selector-button w-[30px] h-[30px] min-w-[30px] min-h-[30px] rounded-small text-secondary',
+                selectorButton
+            ],
+            endContentWrapper: [
+                'ux-end-content-wrapper',
+                endContentWrapper
+            ],
+            clearButton: [
+                'ux-clear-button',
+                clearButton
+            ],
+            listboxWrapper: [
+                'ux-listbox-wrapper p-0',
+                listboxWrapper
+            ]
+        },
+        labelPlacement: labelPlacement,
+        selectorIcon: /*#__PURE__*/ jsx(ChevronDownIcon, {}),
+        inputProps: {
+            classNames: {
+                label: 'text-tiny text-foreground-300',
+                inputWrapper: 'text-tiny h-[30px] min-h-[30px] rounded-small px-2.5',
+                input: 'text-tiny !outline-none',
+                clearButton: 'text-large'
+            }
+        },
+        popoverProps: {
+            isOpen: true,
+            classNames: {
+                base: 'before:bg-content1 before:shadow-box',
+                content: 'bg-content1 text-foreground-300 shadow-box text-tiny antialiased p-0'
+            }
+        },
+        listboxProps: {
+            classNames: {
+                base: 'p-md',
+                list: 'gap-0 [&_[data-slot="heading"]]:text-small [&_[data-slot="heading"]]:font-medium'
+            },
+            itemClasses: {
+                base: '!outline-none min-h-8 px-md rounded-small text-foreground-300 !outline-none data-[hover=true]:bg-background-200 data-[focus-visible=true]:bg-background-200 data-[focus-visible=true]:dark:bg-background-200 data-[hover=true]:text-default-foreground data-[selectable=true]:focus:!bg-background-200 data-[selectable=true]:focus:dark:!bg-background-200 gap-1',
+                title: 'text-tiny font-medium antialiased',
+                selectedIcon: '[&>svg>polyline]:stroke-[2.5]'
+            }
+        },
+        scrollShadowProps: {
+            isEnabled: false
+        },
+        radius: radius,
+        ...restProps
+    });
+};
+UXAutocomplete.displayName = 'UX.Autocomplete';
+export { UXAutocomplete, AutocompleteItem as UXAutocompleteItem, AutocompleteSection as UXAutocompleteSection };

package/dist/components/UXButton/button-theme.js

@@ -33,10 +33,10 @@ const button_theme_button = tv({
             text: 'bg-transparent min-w-0 w-auto h-auto px-0'
         },
         size: {
-            xs: 'gap-2 rounded-[6px] !text-body3 min-w-min font-medium [&_[aria-label="Loading"]>div]:size-3',
-            sm: 'gap-2 rounded-[6px] !text-body3 min-w-min font-medium [&_[aria-label="Loading"]>div]:size-3',
-            md: 'gap-2 rounded-[6px] text-tiny min-w-min font-medium [&_[aria-label="Loading"]>div]:size-4',
-            lg: 'gap-2 rounded-[10px] text-medium min-w-min font-medium [&_[aria-label="Loading"]>div]:size-6',
+            xs: 'gap-1 rounded-[4px] !text-caption1 min-w-min font-medium [&>svg]:size-[14px]',
+            sm: 'gap-1 rounded-[6px] !text-body3 min-w-min font-medium [&>svg]:size-4',
+            md: 'gap-1 rounded-[6px] text-tiny min-w-min font-medium [&>svg]:size-[18px]',
+            lg: 'gap-1 rounded-[10px] text-medium min-w-min font-medium [&>svg]:size-6',
             auto: 'min-w-min rounded-[10px]'
         },
         color: {
@@ -97,7 +97,7 @@ const button_theme_button = tv({
                 'light',
                 'bordered'
             ],
-            class: 'px-sm h-5'
+            class: 'px-md h-5'
         },
         {
             size: 'sm',
@@ -107,7 +107,7 @@ const button_theme_button = tv({
                 'light',
                 'bordered'
             ],
-            class: 'px-sm h-6'
+            class: 'px-lg h-6'
         },
         {
             size: 'md',
@@ -117,7 +117,7 @@ const button_theme_button = tv({
                 'light',
                 'bordered'
             ],
-            class: 'px-md h-[30px]'
+            class: 'px-lg h-[30px]'
         },
         {
             size: 'lg',
@@ -178,64 +178,56 @@ const button_theme_button = tv({
             variant: 'light',
             color: 'default',
             class: [
-                colorVariants.light["default"],
-                'data-[hover=true]:bg-default/40'
+                colorVariants.light["default"]
             ]
         },
         {
             variant: 'light',
             color: 'primary',
             class: [
-                colorVariants.light.primary,
-                'data-[hover=true]:bg-primary/20'
+                colorVariants.light.primary
             ]
         },
         {
             variant: 'light',
             color: 'secondary',
             class: [
-                colorVariants.light.secondary,
-                'data-[hover=true]:bg-default/40'
+                colorVariants.light.secondary
             ]
         },
         {
             variant: 'light',
             color: 'success',
             class: [
-                colorVariants.light.success,
-                'data-[hover=true]:bg-success/20'
+                colorVariants.light.success
             ]
         },
         {
             variant: 'light',
             color: 'warning',
             class: [
-                colorVariants.light.warning,
-                'data-[hover=true]:bg-warning/20'
+                colorVariants.light.warning
             ]
         },
         {
             variant: 'light',
             color: 'danger',
             class: [
-                colorVariants.light.danger,
-                'data-[hover=true]:bg-danger/20'
+                colorVariants.light.danger
             ]
         },
         {
             variant: 'light',
             color: 'bullish',
             class: [
-                colorVariants.light.bullish,
-                'data-[hover=true]:bg-bullish/20'
+                colorVariants.light.bullish
             ]
         },
         {
             variant: 'light',
             color: 'bearish',
             class: [
-                colorVariants.light.bearish,
-                'data-[hover=true]:bg-bearish/20'
+                colorVariants.light.bearish
             ]
         },
         {

package/dist/components/UXButton/use-button.js

@@ -101,7 +101,8 @@ function useButton(props) {
     const endContent = getIconClone(endContentProp);
     const spinnerSize = useMemo(()=>{
         const buttonSpinnerSizeMap = {
-            sm: 14,
+            xs: 14,
+            sm: 16,
             md: 18,
             lg: 24
         };

package/dist/components/UXCheckbox/checkbox.extend.js

@@ -30,7 +30,7 @@ const ExtendedCheckbox = extendVariants(Checkbox, {
                 wrapper: [
                     'w-3.5 h-3.5 me-0',
                     'rounded-[calc(theme(borderRadius.medium)*0.2)]',
-                    'before:rounded-[calc(theme(borderRadius.medium)*0.2)] before:border-secondary before:border-1.5',
+                    'before:rounded-[calc(theme(borderRadius.medium)*0.2)] before:border-secondary before:border-1',
                     'after:rounded-[calc(theme(borderRadius.medium)*0.2)]'
                 ],
                 label: '!text-body3 font-medium',
@@ -40,7 +40,7 @@ const ExtendedCheckbox = extendVariants(Checkbox, {
                 wrapper: [
                     'w-4 h-4 me-0',
                     'rounded-[calc(theme(borderRadius.medium)*0.2)]',
-                    'before:rounded-[calc(theme(borderRadius.medium)*0.2)] before:border-secondary before:border-2',
+                    'before:rounded-[calc(theme(borderRadius.medium)*0.2)] before:border-secondary before:border-1.5',
                     'after:rounded-[calc(theme(borderRadius.medium)*0.2)]'
                 ],
                 label: '!text-body2 font-medium',
@@ -50,7 +50,7 @@ const ExtendedCheckbox = extendVariants(Checkbox, {
                 wrapper: [
                     'w-[18px] h-[18px] me-0',
                     'rounded-[calc(theme(borderRadius.medium)*0.3)]',
-                    'before:rounded-[calc(theme(borderRadius.medium)*0.3)] before:border-secondary before:border-2',
+                    'before:rounded-[calc(theme(borderRadius.medium)*0.3)] before:border-secondary before:border-1.5',
                     'after:rounded-[calc(theme(borderRadius.medium)*0.3)]'
                 ],
                 label: '!text-body1 font-medium',

package/dist/components/UXDatePicker/index.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
 import { DatePicker } from "@heroui/date-picker";
-import { CalendarIcon } from "../../icons/index.js";
+import CalendarIcon from "@particle-network/icons/web/CalendarIcon";
 import { calendarClassNames } from "../UXCalendar/index.js";
 const classes = {
     inputWrapper: 'bg-background-200 h-[30px] min-h-[30px] rounded-small',

package/dist/components/UXDateRangePicker/index.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
 import { DateRangePicker } from "@heroui/date-picker";
-import { CalendarIcon } from "../../icons/index.js";
+import CalendarIcon from "@particle-network/icons/web/CalendarIcon";
 import { calendarClassNames } from "../UXCalendar/index.js";
 const classes = {
     inputWrapper: 'bg-background-200 h-[30px] min-h-[30px] rounded-small',

package/dist/components/UXDivider/divider.extend.d.ts

@@ -279,8 +279,8 @@ declare const ExtendedDivider: import("react").ForwardRefExoticComponent<Omit<{
     onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLHRElement> | undefined;
     onTransitionStart?: import("react").TransitionEventHandler<HTMLHRElement> | undefined;
     onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLHRElement> | undefined;
-    orientation?: "vertical" | "horizontal" | undefined;
-    key?: import("react").Key | null | undefined;
     as?: import("@heroui/system-rsc").As<any> | undefined;
+    key?: import("react").Key | null | undefined;
+    orientation?: "vertical" | "horizontal" | undefined;
 }, "ref"> & import("react").RefAttributes<import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>>>;
 export default ExtendedDivider;

package/dist/components/UXDrawer/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { type DrawerProps } from '@heroui/drawer';
+export type UXDrawerProps = Omit<DrawerProps, 'closeButton'> & {
+    title?: React.ReactNode;
+    footer?: React.ReactNode;
+    tip?: React.ReactNode;
+    titleAlign?: 'left' | 'center';
+};
+export declare const UXDrawer: React.FC<UXDrawerProps>;

package/dist/components/UXDrawer/index.js

@@ -0,0 +1,89 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Drawer, DrawerBody, DrawerContent, DrawerFooter, DrawerHeader } from "@heroui/drawer";
+import CloseIcon from "@particle-network/icons/web/CloseIcon";
+import { Center, Circle, Flex } from "../layout/index.js";
+import { Text } from "../typography/Text.js";
+import { UXButton } from "../UXButton/index.js";
+const UXDrawer = (props)=>{
+    const { title, footer, backdrop, scrollBehavior = 'inside', children, titleAlign = 'left', classNames, tip, ...restProps } = props;
+    return /*#__PURE__*/ jsx(Drawer, {
+        backdrop: backdrop,
+        scrollBehavior: scrollBehavior,
+        classNames: {
+            wrapper: [
+                classNames?.wrapper
+            ],
+            base: [
+                'py-6 gap-5 shadow-box',
+                'max-md:rounded-none',
+                classNames?.base
+            ],
+            backdrop: [
+                'backdrop-blur-[1px] bg-black/50 dark:bg-black/70',
+                classNames?.backdrop
+            ],
+            header: [
+                'px-lg py-0 max-md:text-h3',
+                'md:px-6 md:text-h2',
+                'center' === titleAlign && 'justify-center',
+                classNames?.header
+            ],
+            body: [
+                'px-lg md:px-6 py-0 no-scrollbar',
+                classNames?.body
+            ],
+            footer: [
+                'gap-lg px-lg md:px-6 py-0 flex-col items-stretch',
+                classNames?.footer
+            ],
+            closeButton: [
+                'top-5 end-4 text-foreground',
+                classNames?.closeButton
+            ]
+        },
+        closeButton: /*#__PURE__*/ jsx(UXButton, {
+            isIconOnly: true,
+            variant: "light",
+            children: /*#__PURE__*/ jsx(CloseIcon, {
+                size: 24
+            })
+        }),
+        ...restProps,
+        children: /*#__PURE__*/ jsxs(DrawerContent, {
+            children: [
+                title ? /*#__PURE__*/ jsx(DrawerHeader, {
+                    className: "capitalize",
+                    children: title
+                }) : null,
+                /*#__PURE__*/ jsx(DrawerBody, {
+                    children: children
+                }),
+                footer ? /*#__PURE__*/ jsx(DrawerFooter, {
+                    children: footer
+                }) : null,
+                tip ? /*#__PURE__*/ jsx(DrawerFooter, {
+                    className: "-mt-md",
+                    children: /*#__PURE__*/ jsxs(Flex, {
+                        gap: 2,
+                        children: [
+                            /*#__PURE__*/ jsx(Center, {
+                                className: "h-4",
+                                children: /*#__PURE__*/ jsx(Circle, {
+                                    className: "bg-foreground-300 h-[5px] w-[5px]"
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(Text, {
+                                body2: true,
+                                color: "secondary",
+                                children: tip
+                            })
+                        ]
+                    })
+                }) : null
+            ]
+        })
+    });
+};
+UXDrawer.displayName = 'UX.Drawer';
+export { UXDrawer };

package/dist/components/UXDropdown/dropdown-item.js

@@ -177,7 +177,7 @@ const classes = {
             variant: 'flat',
             color: 'default',
             class: {
-                base: 'data-[hover=true]:bg-background-200 data-[hover=true]:text-default-foreground'
+                base: 'data-[hover=true]:bg-background-200 data-[focus-visible=true]:bg-background-200 data-[focus-visible=true]:dark:bg-background-200 data-[hover=true]:text-default-foreground data-[selectable=true]:focus:!bg-background-200 data-[selectable=true]:focus:dark:!bg-background-200'
             }
         },
         {

package/dist/components/UXEmpty/index.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
-import { type IconProps } from '../../icons';
+import type { IconProps } from '@particle-network/icons/web/types';
 import { type VStackProps } from '../layout';
 export interface UXEmptyProps extends VStackProps {
     iconProps?: IconProps;
     text?: React.ReactNode;
+    action?: React.ReactNode;
 }
 export declare const UXEmpty: import("@heroui/system-rsc").InternalForwardRefRenderFunction<"div", UXEmptyProps, never>;

package/dist/components/UXEmpty/index.js

@@ -1,17 +1,19 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
 import { forwardRef } from "@heroui/system";
+import { cn } from "@heroui/theme";
+import EmptyIcon from "@particle-network/icons/web/EmptyIcon";
 import { useI18n } from "../../hooks/useI18n.js";
-import { EmptyIcon } from "../../icons/index.js";
 import { VStack } from "../layout/index.js";
 import { Text } from "../typography/Text.js";
 const UXEmpty = forwardRef((props, ref)=>{
     const i18n = useI18n();
-    const { text = i18n.table.emptyContent, iconProps, ...restProps } = props;
+    const { text = i18n.table.emptyContent, iconProps, className, action, ...restProps } = props;
     return /*#__PURE__*/ jsxs(VStack, {
         ref: ref,
         center: true,
         gap: 1,
+        className: cn('w-full h-full', className),
         ...restProps,
         children: [
             /*#__PURE__*/ jsx(EmptyIcon, {
@@ -24,6 +26,10 @@ const UXEmpty = forwardRef((props, ref)=>{
                 color: "secondary",
                 fontWeight: "normal",
                 children: text
+            }),
+            action && /*#__PURE__*/ jsx("div", {
+                className: "mt-lg",
+                children: action
             })
         ]
     });

package/dist/components/UXHint/index.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
 import { cn } from "@heroui/theme";
+import CircleQuestionIcon from "@particle-network/icons/web/CircleQuestionIcon";
 import { Center, UXPopover, UXPopoverContent, UXPopoverTrigger, UXTooltip } from "../index.js";
-import { CircleQuestionIcon } from "../../icons/index.js";
 const UXHint = (props)=>{
     const { content, children, buttonClassName, iconClassName, triggerType = 'hover', ...restProps } = props;
     const renderTriggerContent = ()=>/*#__PURE__*/ jsx(Center, {

package/dist/components/UXInput/index.d.ts

@@ -43,7 +43,7 @@ export declare const UXInput: React.ForwardRefExoticComponent<Omit<Omit<{
     vocab?: string | undefined;
     autoCorrect?: string | undefined;
     autoSave?: string | undefined;
-    color?: "default" | "secondary" | "primary" | "success" | "danger" | "warning" | "bullish" | "bearish" | undefined;
+    color?: "default" | "success" | "secondary" | "primary" | "danger" | "warning" | "bullish" | "bearish" | undefined;
     itemProp?: string | undefined;
     itemScope?: boolean | undefined;
     itemType?: string | undefined;
@@ -288,6 +288,7 @@ export declare const UXInput: React.ForwardRefExoticComponent<Omit<Omit<{
     list?: string | undefined;
     step?: string | number | undefined;
     size?: "sm" | "md" | "lg" | undefined;
+    label?: React.ReactNode;
     value?: string | (readonly string[] & string) | undefined;
     width?: string | number | undefined;
     height?: string | number | undefined;
@@ -295,51 +296,50 @@ export declare const UXInput: React.ForwardRefExoticComponent<Omit<Omit<{
     multiple?: boolean | undefined;
     disabled?: boolean | undefined;
     variant?: "flat" | "bordered" | "faded" | "underlined" | undefined;
-    max?: string | number | undefined;
-    min?: string | number | undefined;
-    name?: string | undefined;
-    type?: string | undefined;
-    key?: React.Key | null | undefined;
-    labelPlacement?: "inside" | "outside" | "outside-left" | "outside-top" | undefined;
-    label?: React.ReactNode;
-    disableAnimation?: boolean | undefined;
+    isClearable?: boolean | undefined;
+    classNames?: import("@heroui/theme").SlotsToClasses<"base" | "input" | "label" | "description" | "errorMessage" | "clearButton" | "mainWrapper" | "inputWrapper" | "innerWrapper" | "helperWrapper"> | undefined;
     isDisabled?: boolean | undefined;
-    pattern?: string | undefined;
-    as?: import("@heroui/system-rsc").As<any> | undefined;
+    isReadOnly?: boolean | undefined;
+    isRequired?: boolean | undefined;
+    isInvalid?: boolean | undefined;
+    validationState?: import("@react-types/shared").ValidationState | undefined;
+    validationBehavior?: "aria" | "native" | undefined;
+    validate?: ((value: string) => import("@react-types/shared").ValidationError | true | null | undefined) | undefined;
+    description?: React.ReactNode;
+    errorMessage?: React.ReactNode | ((v: import("@react-types/shared").ValidationResult) => React.ReactNode);
     onFocusChange?: ((isFocused: boolean) => void) | undefined;
-    formAction?: string | ((formData: FormData) => void | Promise<void>) | undefined;
-    formEncType?: string | undefined;
-    formMethod?: string | undefined;
-    formNoValidate?: boolean | undefined;
-    formTarget?: string | undefined;
+    placeholder?: string | undefined;
     excludeFromTabOrder?: boolean | undefined;
-    startContent?: React.ReactNode;
-    endContent?: React.ReactNode;
-    onClear?: (() => void) | undefined;
     autoComplete?: string | undefined;
-    alt?: string | undefined;
     maxLength?: number | undefined;
     minLength?: number | undefined;
+    pattern?: string | undefined;
+    type?: string | undefined;
+    name?: string | undefined;
+    labelPlacement?: "inside" | "outside" | "outside-left" | "outside-top" | undefined;
+    disableAnimation?: boolean | undefined;
+    as?: import("@heroui/system-rsc").As<any> | undefined;
+    key?: React.Key | null | undefined;
     accept?: string | undefined;
+    alt?: string | undefined;
     capture?: boolean | "user" | "environment" | undefined;
     checked?: boolean | undefined;
-    src?: string | undefined;
-    classNames?: import("@heroui/theme").SlotsToClasses<"label" | "inputWrapper" | "base" | "input" | "errorMessage" | "helperWrapper" | "description" | "innerWrapper" | "mainWrapper" | "clearButton"> | undefined;
-    isReadOnly?: boolean | undefined;
-    validationState?: import("@react-types/shared").ValidationState | undefined;
-    isInvalid?: boolean | undefined;
-    errorMessage?: React.ReactNode | ((v: import("@react-types/shared").ValidationResult) => React.ReactNode);
-    placeholder?: string | undefined;
+    formAction?: string | ((formData: FormData) => void | Promise<void>) | undefined;
+    formEncType?: string | undefined;
+    formMethod?: string | undefined;
+    formNoValidate?: boolean | undefined;
+    formTarget?: string | undefined;
+    max?: string | number | undefined;
+    min?: string | number | undefined;
     readOnly?: boolean | undefined;
     required?: boolean | undefined;
-    onValueChange?: ((value: string) => void) | undefined;
-    isRequired?: boolean | undefined;
-    validationBehavior?: "aria" | "native" | undefined;
-    validate?: ((value: string) => import("@react-types/shared").ValidationError | true | null | undefined) | undefined;
-    description?: React.ReactNode;
-    isClearable?: boolean | undefined;
+    src?: string | undefined;
     baseRef?: React.Ref<HTMLDivElement> | undefined;
     wrapperRef?: React.Ref<HTMLDivElement> | undefined;
     innerWrapperRef?: React.Ref<HTMLDivElement> | undefined;
+    startContent?: React.ReactNode;
+    endContent?: React.ReactNode;
+    onClear?: (() => void) | undefined;
+    onValueChange?: ((value: string) => void) | undefined;
     textAlign?: "center" | "left" | "right" | undefined;
 }, "ref"> & React.RefAttributes<React.ReactElement<unknown, string | React.JSXElementConstructor<any>>>, "ref"> & React.RefAttributes<HTMLInputElement>>;