ant-float-label 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Tim Ou
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,2 @@
+# Antd 5 form style similar to MUI
+一个简单的react状态管理库

package/dist/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Tim Ou
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/README.md

@@ -0,0 +1,2 @@
+# Antd 5 form style similar to MUI
+一个简单的react状态管理库

package/dist/index.cjs.js

@@ -0,0 +1,402 @@
+import "./index.css"
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var antd = require('antd');
+var react = require('react');
+
+const { useToken } = antd.theme;
+function FloattingLabelBox({ focused, haveValue, label, children, width, height, status, }) {
+    const { token } = useToken();
+    const statusColor = react.useMemo(() => {
+        const colors = {
+            borderColorActive: token.colorPrimaryActive,
+            textColorActive: token.colorPrimary,
+            textColor: token.colorTextTertiary,
+            borderColor: token.colorBorder,
+        };
+        if (status === "warning") {
+            colors.borderColorActive = token.colorWarningActive;
+            colors.textColorActive = token.colorWarningTextActive;
+            colors.textColor = token.colorWarningText;
+            colors.borderColor = token.colorWarningBorder;
+        }
+        else if (status === "error") {
+            colors.borderColorActive = token.colorErrorActive;
+            colors.textColorActive = token.colorErrorTextActive;
+            colors.textColor = token.colorErrorText;
+            colors.borderColor = token.colorErrorBorder;
+        }
+        return colors;
+    }, [status, token]);
+    return (jsxRuntime.jsxs("div", { className: "ant-float-label-box", style: {
+            width: width ?? "100%",
+            height,
+        }, children: [jsxRuntime.jsx("div", { style: {
+                    width: "100%",
+                    height: "100%",
+                    overflow: "hidden",
+                    borderRadius: token.borderRadius,
+                }, children: children }), jsxRuntime.jsx("label", { className: "ant-float-label-box-label", style: {
+                    color: focused ? statusColor.textColorActive : statusColor.textColor,
+                    height: focused || haveValue ? "auto" : "100%",
+                    transform: focused || haveValue
+                        ? "translate(14px, -9px) scale(0.75)"
+                        : `translate(1em, 0px) scale(1)`,
+                }, children: label }), jsxRuntime.jsx("fieldset", { style: {
+                    border: focused
+                        ? `2px solid ${statusColor.borderColorActive}`
+                        : `1px solid ${statusColor.borderColor}`,
+                    borderRadius: token.borderRadius,
+                }, className: "ant-float-label-box-fieldset", children: jsxRuntime.jsx("legend", { className: "ant-float-label-box-legend", style: {
+                        maxWidth: focused || haveValue ? "100%" : "0.01px",
+                    }, children: label }) })] }));
+}
+
+function FloatAutoComplete({ placeholder, onFocus, onBlur, value, defaultValue, style, size, onChange, ...restProps }) {
+    const initFlag = react.useRef(false);
+    const [isFocus, setIsFocus] = react.useState(false);
+    const [inputValue, setInputValue] = react.useState(defaultValue ?? value);
+    const handleFocus = react.useCallback((e) => {
+        setIsFocus(true);
+        if (onFocus) {
+            onFocus(e);
+        }
+    }, [onFocus]);
+    const handleBlur = react.useCallback((e) => {
+        setIsFocus(false);
+        setInputValue(e.target.value);
+        if (onBlur) {
+            onBlur(e);
+        }
+    }, [onBlur]);
+    const handleChange = react.useCallback((value, option) => {
+        setInputValue(value);
+        if (onChange) {
+            onChange(value, option);
+        }
+    }, [onChange]);
+    react.useEffect(() => {
+        if (initFlag.current) {
+            setInputValue(value);
+        }
+        initFlag.current = true;
+        return () => {
+            initFlag.current = false;
+        };
+    }, [value]);
+    return (jsxRuntime.jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, haveValue: !!inputValue, width: style?.width, height: style?.height, status: restProps.status, children: jsxRuntime.jsx(antd.AutoComplete, { style: {
+                width: "100%",
+                ...style,
+                border: "none",
+            }, ...restProps, onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, size: size, onChange: handleChange, rootClassName: "ant-float-label-form-auto-complete" }) }));
+}
+
+function FloatCascader({ placeholder, onFocus, onBlur, value, defaultValue, style, size, onChange, ...restProps }) {
+    const initFlag = react.useRef(false);
+    const [isFocus, setIsFocus] = react.useState(false);
+    const [inputValue, setInputValue] = react.useState(defaultValue ?? value);
+    const handleFocus = react.useCallback((e) => {
+        setIsFocus(true);
+        if (onFocus) {
+            onFocus(e);
+        }
+    }, [onFocus]);
+    const handleBlur = react.useCallback((e) => {
+        setIsFocus(false);
+        if (onBlur) {
+            onBlur(e);
+        }
+    }, [onBlur]);
+    const handleChange = react.useCallback((value, selectedOptions) => {
+        setInputValue(value);
+        if (onChange) {
+            onChange(value, selectedOptions);
+        }
+    }, [onChange]);
+    react.useEffect(() => {
+        if (initFlag.current) {
+            setInputValue(value);
+        }
+        initFlag.current = true;
+        return () => {
+            initFlag.current = false;
+        };
+    }, [value]);
+    const haveValue = react.useMemo(() => {
+        const currValue = Array.isArray(inputValue) && inputValue.length === 0
+            ? undefined
+            : inputValue;
+        return !!currValue;
+    }, [inputValue]);
+    return (jsxRuntime.jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, haveValue: haveValue, width: style?.width, height: style?.height, status: restProps.status, children: jsxRuntime.jsx(antd.Cascader, { style: { ...style, width: "100%", border: "none" }, ...restProps, onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, size: size, onChange: handleChange, rootClassName: "ant-float-label-form-select" }) }));
+}
+
+function FloatDatePicker({ placeholder, onFocus, onBlur, value, defaultValue, style, size, onChange, ...restProps }) {
+    const initFlag = react.useRef(false);
+    const [isFocus, setIsFocus] = react.useState(false);
+    const [inputValue, setInputValue] = react.useState(defaultValue ?? value);
+    const handleFocus = react.useCallback((event, info) => {
+        setIsFocus(true);
+        if (onFocus) {
+            onFocus(event, info);
+        }
+    }, [onFocus]);
+    const handleBlur = react.useCallback((event, info) => {
+        setIsFocus(false);
+        if (onBlur) {
+            onBlur(event, info);
+        }
+    }, [onBlur]);
+    const handleChange = react.useCallback((value, dateString) => {
+        setInputValue(value);
+        if (onChange) {
+            onChange(value, dateString);
+        }
+    }, [onChange]);
+    react.useEffect(() => {
+        if (initFlag.current) {
+            setInputValue(value);
+        }
+        initFlag.current = true;
+        return () => {
+            initFlag.current = false;
+        };
+    }, [value]);
+    return (jsxRuntime.jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, haveValue: !!inputValue, width: style?.width, height: style?.height, status: restProps.status, children: jsxRuntime.jsx(antd.DatePicker, { style: { ...style, width: "100%", border: "none" }, ...restProps, onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, size: size, onChange: handleChange, rootClassName: "ant-float-label-form-picker", placeholder: "" }) }));
+}
+
+function FloatInput({ placeholder, onFocus, onBlur, value, defaultValue, style, size, ...restProps }) {
+    const initFlag = react.useRef(false);
+    const [isFocus, setIsFocus] = react.useState(false);
+    const [inputValue, setInputValue] = react.useState(defaultValue ?? value);
+    const handleFocus = react.useCallback((e) => {
+        setIsFocus(true);
+        if (onFocus) {
+            onFocus(e);
+        }
+    }, [onFocus]);
+    const handleBlur = react.useCallback((e) => {
+        setIsFocus(false);
+        setInputValue(e.target.value);
+        if (onBlur) {
+            onBlur(e);
+        }
+    }, [onBlur]);
+    react.useEffect(() => {
+        if (initFlag.current) {
+            setInputValue(value);
+        }
+        initFlag.current = true;
+        return () => {
+            initFlag.current = false;
+        };
+    }, [value]);
+    return (jsxRuntime.jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, haveValue: !!inputValue, width: style?.width, height: style?.height, status: restProps.status, children: jsxRuntime.jsx(antd.Input, { style: { ...style, width: "100%", border: "none" }, ...restProps, onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, size: size }) }));
+}
+
+function FloatInputNumber({ placeholder, onFocus, onBlur, value, defaultValue, style, size, ...restProps }) {
+    const initFlag = react.useRef(false);
+    const [isFocus, setIsFocus] = react.useState(false);
+    const [inputValue, setInputValue] = react.useState(defaultValue ?? value);
+    const handleFocus = react.useCallback((e) => {
+        setIsFocus(true);
+        if (onFocus) {
+            onFocus(e);
+        }
+    }, [onFocus]);
+    const handleBlur = react.useCallback((e) => {
+        setIsFocus(false);
+        setInputValue(e.target.value);
+        if (onBlur) {
+            onBlur(e);
+        }
+    }, [onBlur]);
+    react.useEffect(() => {
+        if (initFlag.current) {
+            setInputValue(value);
+        }
+        initFlag.current = true;
+        return () => {
+            initFlag.current = false;
+        };
+    }, [value]);
+    return (jsxRuntime.jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, haveValue: !!inputValue, width: style?.width, height: style?.height, status: restProps.status, children: jsxRuntime.jsx(antd.InputNumber, { style: { ...style, width: "100%", border: "none" }, ...restProps, onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, size: size, rootClassName: "ant-float-label-form-input-number" }) }));
+}
+
+const { RangePicker } = antd.DatePicker;
+function FloatRangePicker({ placeholder, onFocus, onBlur, value, defaultValue, style, size, onChange, ...restProps }) {
+    const initFlag = react.useRef(false);
+    const [isFocus, setIsFocus] = react.useState(false);
+    const [inputValue, setInputValue] = react.useState(defaultValue ?? value);
+    const handleFocus = react.useCallback((event, info) => {
+        setIsFocus(true);
+        if (onFocus) {
+            onFocus(event, info);
+        }
+    }, [onFocus]);
+    const handleBlur = react.useCallback((event, info) => {
+        setIsFocus(false);
+        if (onBlur) {
+            onBlur(event, info);
+        }
+    }, [onBlur]);
+    const handleChange = react.useCallback((value, dateString) => {
+        setInputValue(value);
+        if (onChange) {
+            onChange(value, dateString);
+        }
+    }, [onChange]);
+    react.useEffect(() => {
+        if (initFlag.current) {
+            setInputValue(value);
+        }
+        initFlag.current = true;
+        return () => {
+            initFlag.current = false;
+        };
+    }, [value]);
+    const haveValue = react.useMemo(() => {
+        return !!(isFocus || inputValue);
+    }, [inputValue, isFocus]);
+    return (jsxRuntime.jsx(FloattingLabelBox, { label: haveValue && placeholder ? placeholder.join(" - ") : "", focused: isFocus, haveValue: haveValue, width: style?.width, height: style?.height, status: restProps.status, children: jsxRuntime.jsx(RangePicker, { style: { ...style, width: "100%", border: "none" }, ...restProps, onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, size: size, onChange: handleChange, rootClassName: "ant-float-label-form-picker", placeholder: haveValue ? ["", ""] : placeholder }) }));
+}
+
+function FloatSelect({ placeholder, onFocus, onBlur, value, defaultValue, style, size, mode, onChange, ...restProps }) {
+    const initFlag = react.useRef(false);
+    const [isFocus, setIsFocus] = react.useState(false);
+    const [inputValue, setInputValue] = react.useState(defaultValue ?? value);
+    const handleFocus = react.useCallback((e) => {
+        setIsFocus(true);
+        if (onFocus) {
+            onFocus(e);
+        }
+    }, [onFocus]);
+    const handleBlur = react.useCallback((e) => {
+        setIsFocus(false);
+        if (onBlur) {
+            onBlur(e);
+        }
+    }, [onBlur]);
+    const handleChange = react.useCallback((value, option) => {
+        setInputValue(value);
+        if (onChange) {
+            onChange(value, option);
+        }
+    }, [onChange]);
+    react.useEffect(() => {
+        if (initFlag.current) {
+            setInputValue(value);
+        }
+        initFlag.current = true;
+        return () => {
+            initFlag.current = false;
+        };
+    }, [value]);
+    const haveValue = react.useMemo(() => {
+        const currValue = Array.isArray(inputValue) && inputValue.length === 0
+            ? undefined
+            : inputValue;
+        return !!currValue;
+    }, [inputValue]);
+    return (jsxRuntime.jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, haveValue: haveValue, width: style?.width, height: style?.height, status: restProps.status, children: jsxRuntime.jsx(antd.Select, { style: { ...style, width: "100%", border: "none" }, ...restProps, onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, size: size, onChange: handleChange, mode: mode, rootClassName: "ant-float-label-form-select" }) }));
+}
+
+function FloatTimePicker({ placeholder, onFocus, onBlur, value, defaultValue, style, size, mode, onChange, ...restProps }) {
+    const initFlag = react.useRef(false);
+    const [isFocus, setIsFocus] = react.useState(false);
+    const [inputValue, setInputValue] = react.useState(defaultValue ?? value);
+    const handleFocus = react.useCallback((e, info) => {
+        setIsFocus(true);
+        if (onFocus) {
+            onFocus(e, info);
+        }
+    }, [onFocus]);
+    const handleBlur = react.useCallback((e, info) => {
+        setIsFocus(false);
+        if (onBlur) {
+            onBlur(e, info);
+        }
+    }, [onBlur]);
+    const handleChange = react.useCallback((value, option) => {
+        setInputValue(value);
+        if (onChange) {
+            onChange(value, option);
+        }
+    }, [onChange]);
+    react.useEffect(() => {
+        if (initFlag.current) {
+            setInputValue(value);
+        }
+        initFlag.current = true;
+        return () => {
+            initFlag.current = false;
+        };
+    }, [value]);
+    const haveValue = react.useMemo(() => {
+        const currValue = Array.isArray(inputValue) && inputValue.length === 0
+            ? undefined
+            : inputValue;
+        return !!currValue;
+    }, [inputValue]);
+    return (jsxRuntime.jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, haveValue: haveValue, width: style?.width, height: style?.height, status: restProps.status, children: jsxRuntime.jsx(antd.TimePicker, { style: {
+                ...style,
+                width: "100%",
+                border: "none",
+            }, ...restProps, onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, size: size, onChange: handleChange, mode: mode, rootClassName: "ant-float-label-form-select", placeholder: "" }) }));
+}
+
+function FloatTreeSelect({ placeholder, onFocus, onBlur, value, defaultValue, style, size, onChange, ...restProps }) {
+    const initFlag = react.useRef(false);
+    const [isFocus, setIsFocus] = react.useState(false);
+    const [inputValue, setInputValue] = react.useState(defaultValue ?? value);
+    const handleFocus = react.useCallback((e) => {
+        setIsFocus(true);
+        if (onFocus) {
+            onFocus(e);
+        }
+    }, [onFocus]);
+    const handleBlur = react.useCallback((e) => {
+        setIsFocus(false);
+        if (onBlur) {
+            onBlur(e);
+        }
+    }, [onBlur]);
+    const handleChange = react.useCallback((value, labelList, extra) => {
+        setInputValue(value);
+        if (onChange) {
+            onChange(value, labelList, extra);
+        }
+    }, [onChange]);
+    react.useEffect(() => {
+        if (initFlag.current) {
+            setInputValue(value);
+        }
+        initFlag.current = true;
+        return () => {
+            initFlag.current = false;
+        };
+    }, [value]);
+    const haveValue = react.useMemo(() => {
+        const currValue = Array.isArray(inputValue) && inputValue.length === 0
+            ? undefined
+            : inputValue;
+        return !!currValue;
+    }, [inputValue]);
+    return (jsxRuntime.jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, haveValue: haveValue, width: style?.width, height: style?.height, status: restProps.status, children: jsxRuntime.jsx(antd.TreeSelect, { style: {
+                ...style,
+                width: "100%",
+                border: "none",
+            }, ...restProps, onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, size: size, onChange: handleChange, rootClassName: "ant-float-label-form-select" }) }));
+}
+
+exports.FloatAutoComplete = FloatAutoComplete;
+exports.FloatCascader = FloatCascader;
+exports.FloatDatePicker = FloatDatePicker;
+exports.FloatInput = FloatInput;
+exports.FloatInputNumber = FloatInputNumber;
+exports.FloatRangePicker = FloatRangePicker;
+exports.FloatSelect = FloatSelect;
+exports.FloatTimePicker = FloatTimePicker;
+exports.FloatTreeSelect = FloatTreeSelect;
+exports.FloattingLabelBox = FloattingLabelBox;

package/dist/index.css

@@ -0,0 +1,6 @@
+.ant-float-label-box{position:relative;line-height:normal;}.ant-float-label-box-label{position:absolute;max-width:99%;overflow:hidden;text-overflow:ellipsis;left:0;top:0;font-size:0.85rem;white-space:nowrap;font-weight:400;transform-origin:top left;pointer-events:none;height:100%;display:flex;align-items:center;transition:color 200ms cubic-bezier(0,0,0.2,1) 0ms,transform 200ms cubic-bezier(0,0,0.2,1) 0ms,max-width 200ms cubic-bezier(0,0,0.2,1) 0ms;}.ant-float-label-box-fieldset{padding:0 8px;position:absolute;top:-5px;left:0;right:0;bottom:0;margin:0;pointer-events:none;text-align:left;box-sizing:border-box;min-width:0%;}.ant-float-label-box-legend{width:auto;overflow:hidden;display:block;padding:0;height:11px;font-size:0.85rem;visibility:hidden;transition:max-width 100ms cubic-bezier(0.0,0,0.2,1) 50ms;white-space:nowrap;padding-inline:0;}
+.ant-float-label-form-auto-complete .ant-select-selector {border:none!important;box-shadow:none!important;}
+.ant-float-label-form-picker {border:none!important;box-shadow:none!important;}
+.ant-float-label-form-input-number {border:none!important;box-shadow:none!important;}
+.ant-float-label-form-picker {border:none!important;box-shadow:none!important;}
+.ant-float-label-form-select .ant-select-selector {border:none!important;box-shadow:none!important;}.ant-float-label-form-select{height:auto!important;}

package/dist/index.js

@@ -0,0 +1,391 @@
+import "./index.css"
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { theme, AutoComplete, Cascader, DatePicker, Input, InputNumber, Select, TimePicker, TreeSelect } from 'antd';
+import { useMemo, useRef, useState, useCallback, useEffect } from 'react';
+
+const { useToken } = theme;
+function FloattingLabelBox({ focused, haveValue, label, children, width, height, status, }) {
+    const { token } = useToken();
+    const statusColor = useMemo(() => {
+        const colors = {
+            borderColorActive: token.colorPrimaryActive,
+            textColorActive: token.colorPrimary,
+            textColor: token.colorTextTertiary,
+            borderColor: token.colorBorder,
+        };
+        if (status === "warning") {
+            colors.borderColorActive = token.colorWarningActive;
+            colors.textColorActive = token.colorWarningTextActive;
+            colors.textColor = token.colorWarningText;
+            colors.borderColor = token.colorWarningBorder;
+        }
+        else if (status === "error") {
+            colors.borderColorActive = token.colorErrorActive;
+            colors.textColorActive = token.colorErrorTextActive;
+            colors.textColor = token.colorErrorText;
+            colors.borderColor = token.colorErrorBorder;
+        }
+        return colors;
+    }, [status, token]);
+    return (jsxs("div", { className: "ant-float-label-box", style: {
+            width: width ?? "100%",
+            height,
+        }, children: [jsx("div", { style: {
+                    width: "100%",
+                    height: "100%",
+                    overflow: "hidden",
+                    borderRadius: token.borderRadius,
+                }, children: children }), jsx("label", { className: "ant-float-label-box-label", style: {
+                    color: focused ? statusColor.textColorActive : statusColor.textColor,
+                    height: focused || haveValue ? "auto" : "100%",
+                    transform: focused || haveValue
+                        ? "translate(14px, -9px) scale(0.75)"
+                        : `translate(1em, 0px) scale(1)`,
+                }, children: label }), jsx("fieldset", { style: {
+                    border: focused
+                        ? `2px solid ${statusColor.borderColorActive}`
+                        : `1px solid ${statusColor.borderColor}`,
+                    borderRadius: token.borderRadius,
+                }, className: "ant-float-label-box-fieldset", children: jsx("legend", { className: "ant-float-label-box-legend", style: {
+                        maxWidth: focused || haveValue ? "100%" : "0.01px",
+                    }, children: label }) })] }));
+}
+
+function FloatAutoComplete({ placeholder, onFocus, onBlur, value, defaultValue, style, size, onChange, ...restProps }) {
+    const initFlag = useRef(false);
+    const [isFocus, setIsFocus] = useState(false);
+    const [inputValue, setInputValue] = useState(defaultValue ?? value);
+    const handleFocus = useCallback((e) => {
+        setIsFocus(true);
+        if (onFocus) {
+            onFocus(e);
+        }
+    }, [onFocus]);
+    const handleBlur = useCallback((e) => {
+        setIsFocus(false);
+        setInputValue(e.target.value);
+        if (onBlur) {
+            onBlur(e);
+        }
+    }, [onBlur]);
+    const handleChange = useCallback((value, option) => {
+        setInputValue(value);
+        if (onChange) {
+            onChange(value, option);
+        }
+    }, [onChange]);
+    useEffect(() => {
+        if (initFlag.current) {
+            setInputValue(value);
+        }
+        initFlag.current = true;
+        return () => {
+            initFlag.current = false;
+        };
+    }, [value]);
+    return (jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, haveValue: !!inputValue, width: style?.width, height: style?.height, status: restProps.status, children: jsx(AutoComplete, { style: {
+                width: "100%",
+                ...style,
+                border: "none",
+            }, ...restProps, onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, size: size, onChange: handleChange, rootClassName: "ant-float-label-form-auto-complete" }) }));
+}
+
+function FloatCascader({ placeholder, onFocus, onBlur, value, defaultValue, style, size, onChange, ...restProps }) {
+    const initFlag = useRef(false);
+    const [isFocus, setIsFocus] = useState(false);
+    const [inputValue, setInputValue] = useState(defaultValue ?? value);
+    const handleFocus = useCallback((e) => {
+        setIsFocus(true);
+        if (onFocus) {
+            onFocus(e);
+        }
+    }, [onFocus]);
+    const handleBlur = useCallback((e) => {
+        setIsFocus(false);
+        if (onBlur) {
+            onBlur(e);
+        }
+    }, [onBlur]);
+    const handleChange = useCallback((value, selectedOptions) => {
+        setInputValue(value);
+        if (onChange) {
+            onChange(value, selectedOptions);
+        }
+    }, [onChange]);
+    useEffect(() => {
+        if (initFlag.current) {
+            setInputValue(value);
+        }
+        initFlag.current = true;
+        return () => {
+            initFlag.current = false;
+        };
+    }, [value]);
+    const haveValue = useMemo(() => {
+        const currValue = Array.isArray(inputValue) && inputValue.length === 0
+            ? undefined
+            : inputValue;
+        return !!currValue;
+    }, [inputValue]);
+    return (jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, haveValue: haveValue, width: style?.width, height: style?.height, status: restProps.status, children: jsx(Cascader, { style: { ...style, width: "100%", border: "none" }, ...restProps, onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, size: size, onChange: handleChange, rootClassName: "ant-float-label-form-select" }) }));
+}
+
+function FloatDatePicker({ placeholder, onFocus, onBlur, value, defaultValue, style, size, onChange, ...restProps }) {
+    const initFlag = useRef(false);
+    const [isFocus, setIsFocus] = useState(false);
+    const [inputValue, setInputValue] = useState(defaultValue ?? value);
+    const handleFocus = useCallback((event, info) => {
+        setIsFocus(true);
+        if (onFocus) {
+            onFocus(event, info);
+        }
+    }, [onFocus]);
+    const handleBlur = useCallback((event, info) => {
+        setIsFocus(false);
+        if (onBlur) {
+            onBlur(event, info);
+        }
+    }, [onBlur]);
+    const handleChange = useCallback((value, dateString) => {
+        setInputValue(value);
+        if (onChange) {
+            onChange(value, dateString);
+        }
+    }, [onChange]);
+    useEffect(() => {
+        if (initFlag.current) {
+            setInputValue(value);
+        }
+        initFlag.current = true;
+        return () => {
+            initFlag.current = false;
+        };
+    }, [value]);
+    return (jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, haveValue: !!inputValue, width: style?.width, height: style?.height, status: restProps.status, children: jsx(DatePicker, { style: { ...style, width: "100%", border: "none" }, ...restProps, onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, size: size, onChange: handleChange, rootClassName: "ant-float-label-form-picker", placeholder: "" }) }));
+}
+
+function FloatInput({ placeholder, onFocus, onBlur, value, defaultValue, style, size, ...restProps }) {
+    const initFlag = useRef(false);
+    const [isFocus, setIsFocus] = useState(false);
+    const [inputValue, setInputValue] = useState(defaultValue ?? value);
+    const handleFocus = useCallback((e) => {
+        setIsFocus(true);
+        if (onFocus) {
+            onFocus(e);
+        }
+    }, [onFocus]);
+    const handleBlur = useCallback((e) => {
+        setIsFocus(false);
+        setInputValue(e.target.value);
+        if (onBlur) {
+            onBlur(e);
+        }
+    }, [onBlur]);
+    useEffect(() => {
+        if (initFlag.current) {
+            setInputValue(value);
+        }
+        initFlag.current = true;
+        return () => {
+            initFlag.current = false;
+        };
+    }, [value]);
+    return (jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, haveValue: !!inputValue, width: style?.width, height: style?.height, status: restProps.status, children: jsx(Input, { style: { ...style, width: "100%", border: "none" }, ...restProps, onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, size: size }) }));
+}
+
+function FloatInputNumber({ placeholder, onFocus, onBlur, value, defaultValue, style, size, ...restProps }) {
+    const initFlag = useRef(false);
+    const [isFocus, setIsFocus] = useState(false);
+    const [inputValue, setInputValue] = useState(defaultValue ?? value);
+    const handleFocus = useCallback((e) => {
+        setIsFocus(true);
+        if (onFocus) {
+            onFocus(e);
+        }
+    }, [onFocus]);
+    const handleBlur = useCallback((e) => {
+        setIsFocus(false);
+        setInputValue(e.target.value);
+        if (onBlur) {
+            onBlur(e);
+        }
+    }, [onBlur]);
+    useEffect(() => {
+        if (initFlag.current) {
+            setInputValue(value);
+        }
+        initFlag.current = true;
+        return () => {
+            initFlag.current = false;
+        };
+    }, [value]);
+    return (jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, haveValue: !!inputValue, width: style?.width, height: style?.height, status: restProps.status, children: jsx(InputNumber, { style: { ...style, width: "100%", border: "none" }, ...restProps, onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, size: size, rootClassName: "ant-float-label-form-input-number" }) }));
+}
+
+const { RangePicker } = DatePicker;
+function FloatRangePicker({ placeholder, onFocus, onBlur, value, defaultValue, style, size, onChange, ...restProps }) {
+    const initFlag = useRef(false);
+    const [isFocus, setIsFocus] = useState(false);
+    const [inputValue, setInputValue] = useState(defaultValue ?? value);
+    const handleFocus = useCallback((event, info) => {
+        setIsFocus(true);
+        if (onFocus) {
+            onFocus(event, info);
+        }
+    }, [onFocus]);
+    const handleBlur = useCallback((event, info) => {
+        setIsFocus(false);
+        if (onBlur) {
+            onBlur(event, info);
+        }
+    }, [onBlur]);
+    const handleChange = useCallback((value, dateString) => {
+        setInputValue(value);
+        if (onChange) {
+            onChange(value, dateString);
+        }
+    }, [onChange]);
+    useEffect(() => {
+        if (initFlag.current) {
+            setInputValue(value);
+        }
+        initFlag.current = true;
+        return () => {
+            initFlag.current = false;
+        };
+    }, [value]);
+    const haveValue = useMemo(() => {
+        return !!(isFocus || inputValue);
+    }, [inputValue, isFocus]);
+    return (jsx(FloattingLabelBox, { label: haveValue && placeholder ? placeholder.join(" - ") : "", focused: isFocus, haveValue: haveValue, width: style?.width, height: style?.height, status: restProps.status, children: jsx(RangePicker, { style: { ...style, width: "100%", border: "none" }, ...restProps, onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, size: size, onChange: handleChange, rootClassName: "ant-float-label-form-picker", placeholder: haveValue ? ["", ""] : placeholder }) }));
+}
+
+function FloatSelect({ placeholder, onFocus, onBlur, value, defaultValue, style, size, mode, onChange, ...restProps }) {
+    const initFlag = useRef(false);
+    const [isFocus, setIsFocus] = useState(false);
+    const [inputValue, setInputValue] = useState(defaultValue ?? value);
+    const handleFocus = useCallback((e) => {
+        setIsFocus(true);
+        if (onFocus) {
+            onFocus(e);
+        }
+    }, [onFocus]);
+    const handleBlur = useCallback((e) => {
+        setIsFocus(false);
+        if (onBlur) {
+            onBlur(e);
+        }
+    }, [onBlur]);
+    const handleChange = useCallback((value, option) => {
+        setInputValue(value);
+        if (onChange) {
+            onChange(value, option);
+        }
+    }, [onChange]);
+    useEffect(() => {
+        if (initFlag.current) {
+            setInputValue(value);
+        }
+        initFlag.current = true;
+        return () => {
+            initFlag.current = false;
+        };
+    }, [value]);
+    const haveValue = useMemo(() => {
+        const currValue = Array.isArray(inputValue) && inputValue.length === 0
+            ? undefined
+            : inputValue;
+        return !!currValue;
+    }, [inputValue]);
+    return (jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, haveValue: haveValue, width: style?.width, height: style?.height, status: restProps.status, children: jsx(Select, { style: { ...style, width: "100%", border: "none" }, ...restProps, onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, size: size, onChange: handleChange, mode: mode, rootClassName: "ant-float-label-form-select" }) }));
+}
+
+function FloatTimePicker({ placeholder, onFocus, onBlur, value, defaultValue, style, size, mode, onChange, ...restProps }) {
+    const initFlag = useRef(false);
+    const [isFocus, setIsFocus] = useState(false);
+    const [inputValue, setInputValue] = useState(defaultValue ?? value);
+    const handleFocus = useCallback((e, info) => {
+        setIsFocus(true);
+        if (onFocus) {
+            onFocus(e, info);
+        }
+    }, [onFocus]);
+    const handleBlur = useCallback((e, info) => {
+        setIsFocus(false);
+        if (onBlur) {
+            onBlur(e, info);
+        }
+    }, [onBlur]);
+    const handleChange = useCallback((value, option) => {
+        setInputValue(value);
+        if (onChange) {
+            onChange(value, option);
+        }
+    }, [onChange]);
+    useEffect(() => {
+        if (initFlag.current) {
+            setInputValue(value);
+        }
+        initFlag.current = true;
+        return () => {
+            initFlag.current = false;
+        };
+    }, [value]);
+    const haveValue = useMemo(() => {
+        const currValue = Array.isArray(inputValue) && inputValue.length === 0
+            ? undefined
+            : inputValue;
+        return !!currValue;
+    }, [inputValue]);
+    return (jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, haveValue: haveValue, width: style?.width, height: style?.height, status: restProps.status, children: jsx(TimePicker, { style: {
+                ...style,
+                width: "100%",
+                border: "none",
+            }, ...restProps, onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, size: size, onChange: handleChange, mode: mode, rootClassName: "ant-float-label-form-select", placeholder: "" }) }));
+}
+
+function FloatTreeSelect({ placeholder, onFocus, onBlur, value, defaultValue, style, size, onChange, ...restProps }) {
+    const initFlag = useRef(false);
+    const [isFocus, setIsFocus] = useState(false);
+    const [inputValue, setInputValue] = useState(defaultValue ?? value);
+    const handleFocus = useCallback((e) => {
+        setIsFocus(true);
+        if (onFocus) {
+            onFocus(e);
+        }
+    }, [onFocus]);
+    const handleBlur = useCallback((e) => {
+        setIsFocus(false);
+        if (onBlur) {
+            onBlur(e);
+        }
+    }, [onBlur]);
+    const handleChange = useCallback((value, labelList, extra) => {
+        setInputValue(value);
+        if (onChange) {
+            onChange(value, labelList, extra);
+        }
+    }, [onChange]);
+    useEffect(() => {
+        if (initFlag.current) {
+            setInputValue(value);
+        }
+        initFlag.current = true;
+        return () => {
+            initFlag.current = false;
+        };
+    }, [value]);
+    const haveValue = useMemo(() => {
+        const currValue = Array.isArray(inputValue) && inputValue.length === 0
+            ? undefined
+            : inputValue;
+        return !!currValue;
+    }, [inputValue]);
+    return (jsx(FloattingLabelBox, { label: placeholder, focused: isFocus, haveValue: haveValue, width: style?.width, height: style?.height, status: restProps.status, children: jsx(TreeSelect, { style: {
+                ...style,
+                width: "100%",
+                border: "none",
+            }, ...restProps, onFocus: handleFocus, onBlur: handleBlur, value: value, defaultValue: defaultValue, size: size, onChange: handleChange, rootClassName: "ant-float-label-form-select" }) }));
+}
+
+export { FloatAutoComplete, FloatCascader, FloatDatePicker, FloatInput, FloatInputNumber, FloatRangePicker, FloatSelect, FloatTimePicker, FloatTreeSelect, FloattingLabelBox };

package/dist/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "ant-float-label",
+  "version": "1.0.0",
+  "description": "Antd 5 form style similar to MUI",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "build": "rollup -c --bundleConfigAsCjs"
+  },
+  "files": [
+    "/dist",
+    "LICENSE"
+  ],
+  "devDependencies": {
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@types/react": "^18.2.69",
+    "@types/react-dom": "^18.2.22",
+    "rollup": "^4.13.0",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-import-css": "^3.5.0",
+    "tslib": "^2.6.2",
+    "typescript": "^5.4.3"
+  },
+  "dependencies": {
+    "antd": "^5.15.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "ant-float-label",
+  "version": "1.0.0",
+  "description": "Antd 5 form style similar to MUI",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "build": "rollup -c --bundleConfigAsCjs"
+  },
+  "files": [
+    "/dist",
+    "LICENSE"
+  ],
+  "devDependencies": {
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@types/react": "^18.2.69",
+    "@types/react-dom": "^18.2.22",
+    "rollup": "^4.13.0",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-import-css": "^3.5.0",
+    "tslib": "^2.6.2",
+    "typescript": "^5.4.3"
+  },
+  "dependencies": {
+    "antd": "^5.15.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}