ant-float-label 1.2.1 → 2.1.0

package/dist/component/FloatInputNumber/index.d.ts

@@ -1,8 +1,8 @@
 import { InputNumberProps } from "antd";
 import "./index.css";
-import { FloattingLabelBoxProps } from "../FloattingLabelBox";
+import { FloatingLabelBoxProps } from "../FloatingLabelBox";
 export interface FloatInputNumberProps extends InputNumberProps {
     required?: boolean;
-    labelBoxProps?: FloattingLabelBoxProps;
+    labelBoxProps?: FloatingLabelBoxProps;
 }
-export declare function FloatInputNumber({ placeholder, onFocus, onBlur, value, defaultValue, style, onChange, required, labelBoxProps, variant, ...restProps }: FloatInputNumberProps): import("react/jsx-runtime").JSX.Element;
+export declare function FloatInputNumber({ placeholder, onFocus, onBlur, value, defaultValue, style, onChange, required, labelBoxProps, variant, status, ...restProps }: FloatInputNumberProps): import("react/jsx-runtime").JSX.Element;

package/dist/component/FloatItemList/index.d.ts

@@ -1,2 +1,3 @@
-import { FormListProps } from "antd/es/form";
-export declare function FloatItemList({ children, name, ...reset }: FormListProps): import("react/jsx-runtime").JSX.Element;
+import type { ComponentProps } from "react";
+import { Form } from "antd";
+export declare function FloatItemList({ children, name, ...reset }: ComponentProps<typeof Form.List>): import("react/jsx-runtime").JSX.Element;

package/dist/component/FloatPassword/FloatPassword.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { FloatPassword } from "./index";
+declare const meta: Meta<typeof FloatPassword>;
+export default meta;
+type Story = StoryObj<typeof FloatPassword>;
+export declare const Default: Story;
+export declare const Required: Story;
+export declare const WithDefaultValue: Story;
+export declare const Disabled: Story;
+export declare const ErrorStatus: Story;
+export declare const Underlined: Story;

package/dist/component/FloatPassword/index.d.ts

@@ -1,8 +1,8 @@
-import { FloattingLabelBoxProps } from "../FloattingLabelBox";
+import { FloatingLabelBoxProps } from "../FloatingLabelBox";
 import { PasswordProps } from "antd/es/input";
 import "./index.css";
 export interface FloatPasswordProps extends PasswordProps {
     required?: boolean;
-    labelBoxProps?: FloattingLabelBoxProps;
+    labelBoxProps?: FloatingLabelBoxProps;
 }
-export declare function FloatPassword({ placeholder, onFocus, onBlur, value, defaultValue, style, onChange, required, labelBoxProps, variant, ...restProps }: FloatPasswordProps): import("react/jsx-runtime").JSX.Element;
+export declare function FloatPassword({ placeholder, onFocus, onBlur, value, defaultValue, style, onChange, required, labelBoxProps, variant, status, ...restProps }: FloatPasswordProps): import("react/jsx-runtime").JSX.Element;

package/dist/component/FloatRangePicker/FloatRangePicker.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { FloatRangePicker } from "./index";
+declare const meta: Meta<typeof FloatRangePicker>;
+export default meta;
+type Story = StoryObj<typeof FloatRangePicker>;
+export declare const Default: Story;
+export declare const Required: Story;
+export declare const Disabled: Story;
+export declare const ErrorStatus: Story;
+export declare const Underlined: Story;

package/dist/component/FloatRangePicker/index.d.ts

@@ -1,8 +1,8 @@
 import "./index.css";
 import { RangePickerProps } from "antd/es/date-picker";
-import { FloattingLabelBoxProps } from "../FloattingLabelBox";
+import { FloatingLabelBoxProps } from "../FloatingLabelBox";
 export interface FloatRangePickerProps extends RangePickerProps {
     required?: boolean;
-    labelBoxProps?: FloattingLabelBoxProps;
+    labelBoxProps?: FloatingLabelBoxProps;
 }
-export declare function FloatRangePicker({ placeholder, onFocus, onBlur, value, defaultValue, style, onChange, required, labelBoxProps, variant, ...restProps }: FloatRangePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function FloatRangePicker({ placeholder, onFocus, onBlur, value, defaultValue, style, onChange, required, labelBoxProps, variant, status, ...restProps }: FloatRangePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/component/FloatSelect/FloatSelect.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { FloatSelect } from "./index";
+declare const meta: Meta<typeof FloatSelect>;
+export default meta;
+type Story = StoryObj<typeof FloatSelect>;
+export declare const Default: Story;
+export declare const Required: Story;
+export declare const WithDefaultValue: Story;
+export declare const Multiple: Story;
+export declare const Tags: Story;
+export declare const Disabled: Story;
+export declare const ErrorStatus: Story;
+export declare const Underlined: Story;

package/dist/component/FloatSelect/index.d.ts

@@ -1,8 +1,8 @@
 import { SelectProps } from "antd";
 import "./index.css";
-import { FloattingLabelBoxProps } from "../FloattingLabelBox";
+import { FloatingLabelBoxProps } from "../FloatingLabelBox";
 export interface FloatSelectProps extends SelectProps {
     required?: boolean;
-    labelBoxProps?: FloattingLabelBoxProps;
+    labelBoxProps?: FloatingLabelBoxProps;
 }
-export declare function FloatSelect({ placeholder, onFocus, onBlur, value, defaultValue, style, size, mode, onChange, required, labelBoxProps, variant, ...restProps }: FloatSelectProps): import("react/jsx-runtime").JSX.Element;
+export declare function FloatSelect({ placeholder, onFocus, onBlur, value, defaultValue, style, size, mode, onChange, required, labelBoxProps, variant, status, ...restProps }: FloatSelectProps): import("react/jsx-runtime").JSX.Element;

package/dist/component/FloatTimePicker/FloatTimePicker.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { FloatTimePicker } from "./index";
+declare const meta: Meta<typeof FloatTimePicker>;
+export default meta;
+type Story = StoryObj<typeof FloatTimePicker>;
+export declare const Default: Story;
+export declare const Required: Story;
+export declare const Disabled: Story;
+export declare const ErrorStatus: Story;
+export declare const CustomFormat: Story;
+export declare const Underlined: Story;

package/dist/component/FloatTimePicker/index.d.ts

@@ -1,7 +1,7 @@
 import { TimePickerProps } from "antd";
-import { FloattingLabelBoxProps } from "../FloattingLabelBox";
+import { FloatingLabelBoxProps } from "../FloatingLabelBox";
 export interface FloatTimePickerProps extends TimePickerProps {
     required?: boolean;
-    labelBoxProps?: FloattingLabelBoxProps;
+    labelBoxProps?: FloatingLabelBoxProps;
 }
-export declare function FloatTimePicker({ placeholder, onFocus, onBlur, value, defaultValue, style, size, mode, onChange, required, labelBoxProps, variant, ...restProps }: FloatTimePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function FloatTimePicker({ placeholder, onFocus, onBlur, value, defaultValue, style, size, mode, onChange, required, labelBoxProps, variant, status, ...restProps }: FloatTimePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/component/FloatTreeSelect/FloatTreeSelect.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { FloatTreeSelect } from "./index";
+declare const meta: Meta<typeof FloatTreeSelect>;
+export default meta;
+type Story = StoryObj<typeof FloatTreeSelect>;
+export declare const Default: Story;
+export declare const Required: Story;
+export declare const Multiple: Story;
+export declare const Checkable: Story;
+export declare const Disabled: Story;
+export declare const ErrorStatus: Story;
+export declare const Underlined: Story;

package/dist/component/FloatTreeSelect/index.d.ts

@@ -1,7 +1,7 @@
 import { TreeSelectProps } from "antd";
-import { FloattingLabelBoxProps } from "../FloattingLabelBox";
+import { FloatingLabelBoxProps } from "../FloatingLabelBox";
 export interface FloatTreeSelectProps extends TreeSelectProps {
     required?: boolean;
-    labelBoxProps: FloattingLabelBoxProps;
+    labelBoxProps?: FloatingLabelBoxProps;
 }
-export declare function FloatTreeSelect({ placeholder, onFocus, onBlur, value, defaultValue, style, size, onChange, required, variant, labelBoxProps, ...restProps }: FloatTreeSelectProps): import("react/jsx-runtime").JSX.Element;
+export declare function FloatTreeSelect({ placeholder, onFocus, onBlur, value, defaultValue, style, size, onChange, required, variant, labelBoxProps, status, ...restProps }: FloatTreeSelectProps): import("react/jsx-runtime").JSX.Element;

package/dist/component/FloatingLabelBox/index.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import type { InputProps } from "antd";
+import "./index.css";
+export interface FloatingLabelBoxProps {
+    focused?: boolean;
+    hasValue?: boolean;
+    label?: React.ReactNode;
+    children?: React.ReactNode;
+    width?: string | number;
+    height?: string | number;
+    status?: InputProps['status'];
+    required?: boolean;
+    fieldsetStyle?: React.CSSProperties;
+    labelStyle?: React.CSSProperties;
+    variant?: InputProps['variant'];
+}
+export declare function FloatingLabelBox({ focused, hasValue, label, children, width, height, status, required, fieldsetStyle, labelStyle, variant, }: FloatingLabelBoxProps): import("react/jsx-runtime").JSX.Element;

package/dist/hook/useValueHandle.d.ts

@@ -1,14 +1,16 @@
 /// <reference types="react" />
-export declare function useValueHandle({ defaultValue, value, id, onFocus, onBlur }: {
+export declare function useValueHandle({ defaultValue, value, onFocus, onBlur, status: statusProp, }: {
     defaultValue?: any;
     value?: any;
     id?: string;
     onFocus?: (...args: any) => void;
     onBlur?: (...args: any) => void;
+    status?: string;
 }): {
     hasValue: boolean;
     handleChange: import("react").Dispatch<any>;
     handleFocus: (...args: any) => void;
     handleBlur: (...args: any) => void;
     isFocus: boolean;
+    formItemStatus: string | undefined;
 };

package/dist/index.d.ts

@@ -6,7 +6,7 @@ export * from "./component/FloatInputNumber";
 export * from "./component/FloatRangePicker";
 export * from "./component/FloatSelect";
 export * from "./component/FloatTimePicker";
-export * from "./component/FloattingLabelBox";
+export * from "./component/FloatingLabelBox";
 export * from "./component/FloatTreeSelect";
 export * from "./component/FloatPassword";
 export * from "./component/FloatFormItem";

package/dist/index.js

@@ -1,11 +1,10 @@
 import "./index.css"
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { theme, Form, AutoComplete, Cascader, DatePicker, Input, InputNumber, Select, TimePicker, TreeSelect } from 'antd';
-import React, { useMemo, useRef, useState, useContext, useCallback, useEffect } from 'react';
-import { FormContext, FormItemInputContext } from 'antd/es/form/context';
+import React, { useMemo, useState, useCallback } from 'react';
 
 const { useToken } = theme;
-function FloattingLabelBox({ focused, hasValue, label, children, width, height, status, required, fieldsetStyle, labelStyle, variant = "outlined", }) {
+function FloatingLabelBox({ focused, hasValue, label, children, width, height, status, required, fieldsetStyle, labelStyle, variant = "outlined", }) {
     const { token } = useToken();
     const statusColor = useMemo(() => {
         const colors = {
@@ -76,26 +75,15 @@ function FloattingLabelBox({ focused, hasValue, label, children, width, height,
                     }, children: label }) })] }));
 }
 
-const FloatItemListContext = React.createContext({});
-function FloatItemListProvider({ children, name }) {
-    const nameMemo = useMemo(() => ({ name }), [name]);
-    return (jsx(FloatItemListContext.Provider, { value: nameMemo, children: children }));
-}
-
-function useValueHandle({ defaultValue, value, id, onFocus, onBlur }) {
-    const initFlag = useRef(false);
+function useValueHandle({ defaultValue, value, onFocus, onBlur, status: statusProp, }) {
+    const [inputValue, setInputValue] = useState(defaultValue);
     const [isFocus, setIsFocus] = useState(false);
-    const { form } = useContext(FormContext);
-    const { name } = useContext(FormItemInputContext);
-    const { name: formListName } = useContext(FloatItemListContext);
-    const [inputValue, setInputValue] = useState(defaultValue ?? value);
-    const nameMemo = useMemo(() => {
-        if (Array.isArray(name) && formListName) {
-            return [formListName, ...name];
-        }
-        return name;
-    }, [name, formListName]);
-    const changeValue = Form.useWatch(nameMemo, form);
+    // Get status from Form.Item context (antd 6 standard approach)
+    const { status: formItemStatus } = Form.Item.useStatus();
+    // Derived state: Use 'value' prop if present (controlled), otherwise local state (uncontrolled)
+    const mergedValue = value !== undefined ? value : inputValue;
+    // Merge status: explicit prop > form item context status
+    const mergedStatus = statusProp || formItemStatus;
     const handleFocus = useCallback((...args) => {
         setIsFocus(true);
         if (typeof onFocus === "function") {
@@ -105,36 +93,29 @@ function useValueHandle({ defaultValue, value, id, onFocus, onBlur }) {
     const handleBlur = useCallback((...args) => {
         setIsFocus(false);
         if (typeof onBlur === "function") {
-            onBlur(args);
+            onBlur(...args);
         }
     }, [onBlur]);
-    useEffect(() => {
-        if (initFlag.current) {
-            setInputValue(value);
-        }
-        initFlag.current = true;
-    }, [value]);
-    useEffect(() => {
-        if (form && id) {
-            setInputValue(changeValue);
-        }
-    }, [changeValue, form]);
     return {
-        hasValue: Array.isArray(inputValue) ? inputValue.length > 0 : typeof value === "number" ? true : !!inputValue,
+        hasValue: Array.isArray(mergedValue)
+            ? mergedValue.length > 0
+            : (mergedValue !== undefined && mergedValue !== null && mergedValue !== ''),
         handleChange: setInputValue,
         handleFocus,
         handleBlur,
-        isFocus
+        isFocus,
+        formItemStatus: mergedStatus,
     };
 }
 
-function FloatAutoComplete({ placeholder, onFocus, onBlur, value, defaultValue, style, onChange, required, labelBoxProps, variant, ...restProps }) {
-    const { hasValue, handleChange, handleBlur, handleFocus, isFocus } = useValueHandle({
+function FloatAutoComplete({ placeholder, onFocus, onBlur, value, defaultValue, style, onChange, required, labelBoxProps, variant, status, ...restProps }) {
+    const { hasValue, handleChange, handleBlur, handleFocus, isFocus, formItemStatus } = useValueHandle({
         id: restProps.id,
         defaultValue,
         value,
         onFocus,
         onBlur,
+        status,
     });
     const changeHandler = useCallback((value, option) => {
         handleChange(value);
@@ -142,20 +123,21 @@ function FloatAutoComplete({ placeholder, onFocus, onBlur, value, defaultValue,
             onChange(value, option);
         }
     }, [onChange]);
-    return (jsx(FloattingLabelBox, { label: placeholder, required: required, focused: isFocus, hasValue: hasValue, width: style?.width, height: style?.height, status: restProps.status || (restProps["aria-invalid"] ? "error" : undefined), variant: variant, ...labelBoxProps, children: jsx(AutoComplete, { style: {
+    return (jsx(FloatingLabelBox, { label: placeholder, required: required, focused: isFocus, hasValue: hasValue, width: style?.width, height: style?.height, status: formItemStatus, variant: variant, ...labelBoxProps, children: jsx(AutoComplete, { style: {
                 width: "100%",
                 ...style,
                 border: "none",
             }, ...restProps, variant: "borderless", onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, onChange: changeHandler, rootClassName: "ant-float-label-form-auto-complete" }) }));
 }
 
-function FloatCascader({ placeholder, onFocus, onBlur, value, defaultValue, style, required, onChange, labelBoxProps, variant, ...restProps }) {
-    const { hasValue, handleChange, handleBlur, handleFocus, isFocus } = useValueHandle({
+function FloatCascader({ placeholder, onFocus, onBlur, value, defaultValue, style, required, onChange, labelBoxProps, variant, status, ...restProps }) {
+    const { hasValue, handleChange, handleBlur, handleFocus, isFocus, formItemStatus } = useValueHandle({
         id: restProps.id,
         defaultValue,
         value,
         onFocus,
         onBlur,
+        status,
     });
     const changehandler = useCallback((value, selectedOptions) => {
         handleChange(value);
@@ -163,16 +145,17 @@ function FloatCascader({ placeholder, onFocus, onBlur, value, defaultValue, styl
             onChange(value, selectedOptions);
         }
     }, [onChange]);
-    return (jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, hasValue: hasValue, width: style?.width, height: style?.height, required: required, status: restProps.status || (restProps["aria-invalid"] ? "error" : undefined), variant: variant, ...labelBoxProps, children: jsx(Cascader, { style: { ...style, width: "100%", border: "none" }, variant: "borderless", ...restProps, onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, onChange: changehandler, rootClassName: "ant-float-label-form-select" }) }));
+    return (jsx(FloatingLabelBox, { label: placeholder, focused: isFocus, hasValue: hasValue, width: style?.width, height: style?.height, required: required, status: formItemStatus, variant: variant, ...labelBoxProps, children: jsx(Cascader, { style: { ...style, width: "100%", border: "none" }, variant: "borderless", ...restProps, onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, onChange: changehandler, rootClassName: "ant-float-label-form-select" }) }));
 }
 
-function FloatDatePicker({ placeholder, onFocus, onBlur, value, defaultValue, style, required, onChange, labelBoxProps, variant, ...restProps }) {
-    const { hasValue, handleChange, handleBlur, handleFocus, isFocus } = useValueHandle({
+function FloatDatePicker({ placeholder, onFocus, onBlur, value, defaultValue, style, required, onChange, labelBoxProps, variant, status, ...restProps }) {
+    const { hasValue, handleChange, handleBlur, handleFocus, isFocus, formItemStatus } = useValueHandle({
         id: restProps.id,
         defaultValue,
         value,
         onFocus,
         onBlur,
+        status,
     });
     const changeHandler = useCallback((value, dateString) => {
         handleChange(value);
@@ -180,16 +163,17 @@ function FloatDatePicker({ placeholder, onFocus, onBlur, value, defaultValue, st
             onChange(value, dateString);
         }
     }, [onChange]);
-    return (jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, hasValue: hasValue, width: style?.width, height: style?.height, status: restProps.status || (restProps["aria-invalid"] ? "error" : undefined), required: required, variant: variant, ...labelBoxProps, children: jsx(DatePicker, { style: { ...style, width: "100%", border: "none" }, ...restProps, variant: "borderless", onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, onChange: changeHandler, rootClassName: "ant-float-label-form-picker", placeholder: "" }) }));
+    return (jsx(FloatingLabelBox, { label: placeholder, focused: isFocus, hasValue: hasValue, width: style?.width, height: style?.height, status: formItemStatus, required: required, variant: variant, ...labelBoxProps, children: jsx(DatePicker, { style: { ...style, width: "100%", border: "none" }, ...restProps, variant: "borderless", onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, onChange: changeHandler, rootClassName: "ant-float-label-form-picker", placeholder: "" }) }));
 }
 
-function FloatInput({ placeholder, onFocus, onBlur, onChange, value, defaultValue, style, size, required, labelBoxProps, variant, ...restProps }) {
-    const { hasValue, handleChange, handleBlur, handleFocus, isFocus } = useValueHandle({
+function FloatInput({ placeholder, onFocus, onBlur, onChange, value, defaultValue, style, size, required, labelBoxProps, variant, status, ...restProps }) {
+    const { hasValue, handleChange, handleBlur, handleFocus, isFocus, formItemStatus } = useValueHandle({
         id: restProps.id,
         defaultValue,
         value,
         onFocus,
         onBlur,
+        status,
     });
     const changeHandler = useCallback((e) => {
         handleChange(e.target.value);
@@ -197,16 +181,17 @@ function FloatInput({ placeholder, onFocus, onBlur, onChange, value, defaultValu
             onChange(e);
         }
     }, [onChange]);
-    return (jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, hasValue: hasValue, width: style?.width, height: style?.height, required: required, status: restProps.status || (restProps["aria-invalid"] ? "error" : undefined), variant: variant, ...labelBoxProps, children: jsx(Input, { style: { ...style, width: "100%", border: "none" }, ...restProps, variant: "borderless", onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, onChange: changeHandler, size: size }) }));
+    return (jsx(FloatingLabelBox, { label: placeholder, focused: isFocus, hasValue: hasValue, width: style?.width, height: style?.height, required: required, status: formItemStatus, variant: variant, ...labelBoxProps, children: jsx(Input, { style: { ...style, width: "100%", border: "none" }, ...restProps, variant: "borderless", onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, onChange: changeHandler, size: size }) }));
 }
 
-function FloatInputNumber({ placeholder, onFocus, onBlur, value, defaultValue, style, onChange, required, labelBoxProps, variant, ...restProps }) {
-    const { hasValue, handleChange, handleBlur, handleFocus, isFocus } = useValueHandle({
+function FloatInputNumber({ placeholder, onFocus, onBlur, value, defaultValue, style, onChange, required, labelBoxProps, variant, status, ...restProps }) {
+    const { hasValue, handleChange, handleBlur, handleFocus, isFocus, formItemStatus } = useValueHandle({
         id: restProps.id,
         defaultValue,
         value,
         onFocus,
         onBlur,
+        status,
     });
     const changeHanlder = useCallback((value) => {
         handleChange(value);
@@ -214,17 +199,18 @@ function FloatInputNumber({ placeholder, onFocus, onBlur, value, defaultValue, s
             onChange(value);
         }
     }, [onChange]);
-    return (jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, hasValue: hasValue, width: style?.width, height: style?.height, required: required, status: restProps.status || (restProps["aria-invalid"] ? "error" : undefined), ...labelBoxProps, variant: variant, children: jsx(InputNumber, { style: { ...style, width: "100%", border: "none" }, ...restProps, variant: "borderless", onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, onChange: changeHanlder, rootClassName: "ant-float-label-form-input-number" }) }));
+    return (jsx(FloatingLabelBox, { label: placeholder, focused: isFocus, hasValue: hasValue, width: style?.width, height: style?.height, required: required, status: formItemStatus, variant: variant, ...labelBoxProps, children: jsx(InputNumber, { style: { ...style, width: "100%", border: "none" }, ...restProps, variant: "borderless", onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, onChange: changeHanlder, rootClassName: "ant-float-label-form-input-number" }) }));
 }
 
 const { RangePicker } = DatePicker;
-function FloatRangePicker({ placeholder, onFocus, onBlur, value, defaultValue, style, onChange, required, labelBoxProps, variant, ...restProps }) {
-    const { hasValue, handleChange, handleBlur, handleFocus, isFocus } = useValueHandle({
+function FloatRangePicker({ placeholder, onFocus, onBlur, value, defaultValue, style, onChange, required, labelBoxProps, variant, status, ...restProps }) {
+    const { hasValue, handleChange, handleBlur, handleFocus, isFocus, formItemStatus } = useValueHandle({
         id: restProps.id?.toString(),
         defaultValue,
         value,
         onFocus,
         onBlur,
+        status,
     });
     const changeHandler = useCallback((value, dateString) => {
         handleChange(value);
@@ -235,16 +221,17 @@ function FloatRangePicker({ placeholder, onFocus, onBlur, value, defaultValue, s
     const hasValueFlag = useMemo(() => {
         return isFocus || hasValue;
     }, [hasValue, isFocus]);
-    return (jsx(FloattingLabelBox, { label: hasValueFlag && placeholder ? placeholder.join(" - ") : "", focused: isFocus, hasValue: hasValueFlag, width: style?.width, height: style?.height, required: required, status: restProps.status || (restProps["aria-invalid"] ? "error" : undefined), variant: variant, ...labelBoxProps, children: jsx(RangePicker, { style: { ...style, width: "100%", border: "none" }, ...restProps, variant: "borderless", onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, onChange: changeHandler, rootClassName: "ant-float-label-form-picker", placeholder: hasValue ? ["", ""] : placeholder }) }));
+    return (jsx(FloatingLabelBox, { label: hasValueFlag && placeholder ? placeholder.join(" - ") : "", focused: isFocus, hasValue: hasValueFlag, width: style?.width, height: style?.height, required: required, status: formItemStatus, variant: variant, ...labelBoxProps, children: jsx(RangePicker, { style: { ...style, width: "100%", border: "none" }, ...restProps, variant: "borderless", onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, onChange: changeHandler, rootClassName: "ant-float-label-form-picker", placeholder: hasValue ? ["", ""] : placeholder }) }));
 }
 
-function FloatSelect({ placeholder, onFocus, onBlur, value, defaultValue, style, size, mode, onChange, required, labelBoxProps, variant, ...restProps }) {
-    const { hasValue, handleChange, handleBlur, handleFocus, isFocus } = useValueHandle({
+function FloatSelect({ placeholder, onFocus, onBlur, value, defaultValue, style, size, mode, onChange, required, labelBoxProps, variant, status, ...restProps }) {
+    const { hasValue, handleChange, handleBlur, handleFocus, isFocus, formItemStatus } = useValueHandle({
         id: restProps.id?.toString(),
         defaultValue,
         value,
         onFocus,
         onBlur,
+        status,
     });
     const changeHandler = useCallback((value, option) => {
         handleChange(value);
@@ -252,16 +239,17 @@ function FloatSelect({ placeholder, onFocus, onBlur, value, defaultValue, style,
             onChange(value, option);
         }
     }, [onChange]);
-    return (jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, hasValue: hasValue, width: style?.width, height: style?.height, required: required, status: restProps.status || (restProps["aria-invalid"] ? "error" : undefined), variant: variant, ...labelBoxProps, children: jsx(Select, { style: { ...style, width: "100%", border: "none" }, ...restProps, variant: "borderless", onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, size: size, onChange: changeHandler, mode: mode, rootClassName: "ant-float-label-form-select" }) }));
+    return (jsx(FloatingLabelBox, { label: placeholder, focused: isFocus, hasValue: hasValue, width: style?.width, height: style?.height, required: required, status: formItemStatus, variant: variant, ...labelBoxProps, children: jsx(Select, { style: { ...style, width: "100%", border: "none" }, ...restProps, variant: "borderless", onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, size: size, onChange: changeHandler, mode: mode, rootClassName: "ant-float-label-form-select" }) }));
 }
 
-function FloatTimePicker({ placeholder, onFocus, onBlur, value, defaultValue, style, size, mode, onChange, required, labelBoxProps, variant, ...restProps }) {
-    const { hasValue, handleChange, handleBlur, handleFocus, isFocus } = useValueHandle({
+function FloatTimePicker({ placeholder, onFocus, onBlur, value, defaultValue, style, size, mode, onChange, required, labelBoxProps, variant, status, ...restProps }) {
+    const { hasValue, handleChange, handleBlur, handleFocus, isFocus, formItemStatus } = useValueHandle({
         id: restProps.id?.toString(),
         defaultValue,
         value,
         onFocus,
         onBlur,
+        status,
     });
     const changeHandler = useCallback((value, option) => {
         handleChange(value);
@@ -269,20 +257,21 @@ function FloatTimePicker({ placeholder, onFocus, onBlur, value, defaultValue, st
             onChange(value, option);
         }
     }, [onChange]);
-    return (jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, hasValue: hasValue, width: style?.width, height: style?.height, required: required, status: restProps.status || (restProps["aria-invalid"] ? "error" : undefined), variant: variant, ...labelBoxProps, children: jsx(TimePicker, { style: {
+    return (jsx(FloatingLabelBox, { label: placeholder, focused: isFocus, hasValue: hasValue, width: style?.width, height: style?.height, required: required, status: formItemStatus, variant: variant, ...labelBoxProps, children: jsx(TimePicker, { style: {
                 ...style,
                 width: "100%",
                 border: "none",
             }, ...restProps, variant: "borderless", onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, size: size, onChange: changeHandler, mode: mode, rootClassName: "ant-float-label-form-select", placeholder: "" }) }));
 }
 
-function FloatTreeSelect({ placeholder, onFocus, onBlur, value, defaultValue, style, size, onChange, required, variant, labelBoxProps, ...restProps }) {
-    const { hasValue, handleChange, handleBlur, handleFocus, isFocus } = useValueHandle({
+function FloatTreeSelect({ placeholder, onFocus, onBlur, value, defaultValue, style, size, onChange, required, variant, labelBoxProps, status, ...restProps }) {
+    const { hasValue, handleChange, handleBlur, handleFocus, isFocus, formItemStatus } = useValueHandle({
         id: restProps.id?.toString(),
         defaultValue,
         value,
         onFocus,
         onBlur,
+        status,
     });
     const changeHandler = useCallback((value, labelList, extra) => {
         handleChange(value);
@@ -290,7 +279,7 @@ function FloatTreeSelect({ placeholder, onFocus, onBlur, value, defaultValue, st
             onChange(value, labelList, extra);
         }
     }, [onChange]);
-    return (jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, hasValue: hasValue, width: style?.width, height: style?.height, required: required, status: restProps.status || (restProps["aria-invalid"] ? "error" : undefined), variant: variant, ...labelBoxProps, children: jsx(TreeSelect, { style: {
+    return (jsx(FloatingLabelBox, { label: placeholder, focused: isFocus, hasValue: hasValue, width: style?.width, height: style?.height, required: required, status: formItemStatus, variant: variant, ...labelBoxProps, children: jsx(TreeSelect, { style: {
                 ...style,
                 width: "100%",
                 border: "none",
@@ -298,21 +287,22 @@ function FloatTreeSelect({ placeholder, onFocus, onBlur, value, defaultValue, st
 }
 
 const { Password } = Input;
-function FloatPassword({ placeholder, onFocus, onBlur, value, defaultValue, style, onChange, required, labelBoxProps, variant, ...restProps }) {
-    const { hasValue, handleChange, handleBlur, handleFocus, isFocus } = useValueHandle({
+function FloatPassword({ placeholder, onFocus, onBlur, value, defaultValue, style, onChange, required, labelBoxProps, variant, status, ...restProps }) {
+    const { hasValue, handleChange, handleBlur, handleFocus, isFocus, formItemStatus } = useValueHandle({
         id: restProps.id,
         defaultValue,
         value,
         onFocus,
         onBlur,
+        status,
     });
-    const changeHanlder = useCallback((value) => {
-        handleChange(value);
+    const changeHanlder = useCallback((e) => {
+        handleChange(e.target.value);
         if (onChange) {
-            onChange(value);
+            onChange(e);
         }
     }, [onChange]);
-    return (jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, hasValue: hasValue, width: style?.width, height: style?.height, required: required, status: restProps.status || (restProps["aria-invalid"] ? "error" : undefined), variant: variant, ...labelBoxProps, children: jsx(Password, { style: { ...style, width: "100%", border: "none" }, ...restProps, variant: "borderless", onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, onChange: changeHanlder, rootClassName: "ant-float-label-form-input-password" }) }));
+    return (jsx(FloatingLabelBox, { label: placeholder, focused: isFocus, hasValue: hasValue, width: style?.width, height: style?.height, required: required, status: formItemStatus, variant: variant, ...labelBoxProps, children: jsx(Password, { style: { ...style, width: "100%", border: "none" }, ...restProps, variant: "borderless", onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, onChange: changeHanlder, rootClassName: "ant-float-label-form-input-password" }) }));
 }
 
 function FloatFormItem({ children, label = "", rules, required, ...restProps }) {
@@ -321,7 +311,10 @@ function FloatFormItem({ children, label = "", rules, required, ...restProps })
             return required;
         return rules?.some((value) => value.required !== undefined && value.required !== false);
     }, [required, rules]);
-    return (jsx(Form.Item, { required: required, rules: rules, ...restProps, children: children
+    return (
+    // noStyle + label hidden: Form.Item handles validation state via context (Form.Item.useStatus)
+    // The float components read status from Form.Item.useStatus() hook automatically
+    jsx(Form.Item, { required: required, rules: rules, ...restProps, label: "", children: children
             ? React.cloneElement(children, {
                 placeholder: label,
                 required: isRequired,
@@ -329,9 +322,15 @@ function FloatFormItem({ children, label = "", rules, required, ...restProps })
             : children }));
 }
 
+const FloatItemListContext = React.createContext({});
+function FloatItemListProvider({ children, name }) {
+    const nameMemo = useMemo(() => ({ name }), [name]);
+    return (jsx(FloatItemListContext.Provider, { value: nameMemo, children: children }));
+}
+
 function FloatItemList({ children, name, ...reset }) {
     return jsx(FloatItemListProvider, { name: name, children: jsx(Form.List, { name: name, ...reset, children: children }) });
 }
 
-export { FloatAutoComplete, FloatCascader, FloatDatePicker, FloatFormItem, FloatInput, FloatInputNumber, FloatItemList, FloatPassword, FloatRangePicker, FloatSelect, FloatTimePicker, FloatTreeSelect, FloattingLabelBox };
+export { FloatAutoComplete, FloatCascader, FloatDatePicker, FloatFormItem, FloatInput, FloatInputNumber, FloatItemList, FloatPassword, FloatRangePicker, FloatSelect, FloatTimePicker, FloatTreeSelect, FloatingLabelBox };
 //# sourceMappingURL=index.js.map