ant-float-label 2.0.0 → 2.1.0

package/dist/README.md

@@ -1,162 +1,162 @@
-# Ant Float Label
-
-A comprehensive wrapper library for Ant Design components that implements the elegant "Floating Label" pattern (similar to Material UI). This library provides a seamless way to modernize your forms while maintaining the full power and theming capabilities of Ant Design.
-
-[![NPM Version](https://img.shields.io/npm/v/ant-float-label.svg)](https://www.npmjs.com/package/ant-float-label)
-[![License](https://img.shields.io/npm/l/ant-float-label.svg)](https://github.com/razr001/ant-float-label/blob/master/LICENSE)
-
-## Features
-
-- **✨ Modern Aesthetics**: Brings the popular floating label design pattern to Ant Design.
-- **🎨 Theme Compatible**: Fully integrates with Ant Design 5+ Token System (Design Tokens), supporting light and dark modes automatically.
-- **🛠 TypeScript Ready**: Written in TypeScript with full type definitions.
-- **🧩 Complete Suite**: Supports a wide range of input components including Input, Select, DatePicker, Cascader, TreeSelect, and more.
-- **🚀 Easy Integration**: Works as a drop-in replacement for standard Ant Design components.
-- **📱 Responsive**: Adapts perfectly to different screen sizes and form layouts.
-
-## Installation
-
-Install via npm, yarn, or pnpm:
-
-```bash
-npm install ant-float-label
-# or
-yarn add ant-float-label
-# or
-pnpm add ant-float-label
-```
-
-Ensure you have the peer dependencies installed:
-
-```bash
-npm install antd react react-dom
-```
-
-## Usage
-
-### Basic Usage
-
-You can use the components directly. Passing the `placeholder` prop will automatically act as the floating label content.
-
-```tsx
-import React, { useState } from 'react';
-import { FloatInput, FloatSelect } from 'ant-float-label';
-
-const App = () => {
-  const [value, setValue] = useState('');
-
-  return (
-    <div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 16 }}>
-      {/* The placeholder acts as the floating label */}
-      <FloatInput
-        placeholder="Username"
-        value={value}
-        onChange={(e) => setValue(e.target.value)}
-      />
-      
-      <FloatSelect
-        placeholder="Gender"
-        options={[
-          { label: 'Male', value: 'male' },
-          { label: 'Female', value: 'female' },
-        ]}
-      />
-    </div>
-  );
-};
-```
-
-### Using with Ant Design Form
-
-The recommended way to use this library in forms is with `FloatFormItem`. It automatically handles the label state and passes it to the underlying component.
-
-```tsx
-import React from 'react';
-import { Form, Button } from 'antd';
-import { FloatFormItem, FloatInput, FloatPassword } from 'ant-float-label';
-
-const LoginForm = () => {
-  const [form] = Form.useForm();
-
-  const onFinish = (values) => {
-    console.log('Success:', values);
-  };
-
-  return (
-    <Form 
-      form={form} 
-      name="login" 
-      onFinish={onFinish}
-      style={{ maxWidth: 400 }}
-    >
-      <FloatFormItem
-        name="username"
-        label="Username"
-        rules={[{ required: true, message: 'Please input your username!' }]}
-      >
-        <FloatInput />
-      </FloatFormItem>
-
-      <FloatFormItem
-        name="password"
-        label="Password"
-        rules={[{ required: true, message: 'Please input your password!' }]}
-      >
-        <FloatPassword />
-      </FloatFormItem>
-
-      <Form.Item>
-        <Button type="primary" htmlType="submit" block>
-          Log in
-        </Button>
-      </Form.Item>
-    </Form>
-  );
-};
-```
-
-## Available Components
-
-All components inherit props from their Ant Design counterparts.
-
-| Component | Description |
-|-----------|-------------|
-| `FloatInput` | Wraps `Input` |
-| `FloatPassword` | Wraps `Input.Password` |
-| `FloatInputNumber` | Wraps `InputNumber` |
-| `FloatSelect` | Wraps `Select` |
-| `FloatDatePicker` | Wraps `DatePicker` |
-| `FloatRangePicker` | Wraps `DatePicker.RangePicker` |
-| `FloatTimePicker` | Wraps `TimePicker` |
-| `FloatCascader` | Wraps `Cascader` |
-| `FloatTreeSelect` | Wraps `TreeSelect` |
-| `FloatAutoComplete` | Wraps `AutoComplete` |
-| `FloatFormItem` | Specialized `Form.Item` for automatic label handling |
-
-## Props
-
-### Common Props
-Most components accept all standard Ant Design props for their respective base component (e.g., `FloatInput` accepts all `InputProps`).
-
-### Specific Props
-
-- **label** (string | ReactNode): When used with `FloatFormItem`, the `label` prop of the FormItem is automatically used as the floating label.
-- **placeholder** (string): When used standalone, the `placeholder` acts as the floating label text.
-- **labelBoxProps** (object): Props passed to the internal wrapper for advanced styling (e.g. `style`, `className` for the box container).
-
-## Customization
-
-You can customize the appearance by overriding CSS variables or providing `labelBoxProps`. The library follows Ant Design's design token system, so changing your global theme config will automatically update these components.
-
-```tsx
-<FloatInput 
-  placeholder="Custom Style" 
-  labelBoxProps={{ 
-    style: { borderColor: 'red' } 
-  }} 
-/>
-```
-
-## License
-
-MIT © [razr001](https://github.com/razr001)
+# Ant Float Label
+
+A comprehensive wrapper library for Ant Design components that implements the elegant "Floating Label" pattern (similar to Material UI). This library provides a seamless way to modernize your forms while maintaining the full power and theming capabilities of Ant Design.
+
+[![NPM Version](https://img.shields.io/npm/v/ant-float-label.svg)](https://www.npmjs.com/package/ant-float-label)
+[![License](https://img.shields.io/npm/l/ant-float-label.svg)](https://github.com/razr001/ant-float-label/blob/master/LICENSE)
+
+## Features
+
+- **✨ Modern Aesthetics**: Brings the popular floating label design pattern to Ant Design.
+- **🎨 Theme Compatible**: Fully integrates with Ant Design 5+ Token System (Design Tokens), supporting light and dark modes automatically.
+- **🛠 TypeScript Ready**: Written in TypeScript with full type definitions.
+- **🧩 Complete Suite**: Supports a wide range of input components including Input, Select, DatePicker, Cascader, TreeSelect, and more.
+- **🚀 Easy Integration**: Works as a drop-in replacement for standard Ant Design components.
+- **📱 Responsive**: Adapts perfectly to different screen sizes and form layouts.
+
+## Installation
+
+Install via npm, yarn, or pnpm:
+
+```bash
+npm install ant-float-label
+# or
+yarn add ant-float-label
+# or
+pnpm add ant-float-label
+```
+
+Ensure you have the peer dependencies installed:
+
+```bash
+npm install antd react react-dom
+```
+
+## Usage
+
+### Basic Usage
+
+You can use the components directly. Passing the `placeholder` prop will automatically act as the floating label content.
+
+```tsx
+import React, { useState } from 'react';
+import { FloatInput, FloatSelect } from 'ant-float-label';
+
+const App = () => {
+  const [value, setValue] = useState('');
+
+  return (
+    <div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 16 }}>
+      {/* The placeholder acts as the floating label */}
+      <FloatInput
+        placeholder="Username"
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+      />
+      
+      <FloatSelect
+        placeholder="Gender"
+        options={[
+          { label: 'Male', value: 'male' },
+          { label: 'Female', value: 'female' },
+        ]}
+      />
+    </div>
+  );
+};
+```
+
+### Using with Ant Design Form
+
+The recommended way to use this library in forms is with `FloatFormItem`. It automatically handles the label state and passes it to the underlying component.
+
+```tsx
+import React from 'react';
+import { Form, Button } from 'antd';
+import { FloatFormItem, FloatInput, FloatPassword } from 'ant-float-label';
+
+const LoginForm = () => {
+  const [form] = Form.useForm();
+
+  const onFinish = (values) => {
+    console.log('Success:', values);
+  };
+
+  return (
+    <Form 
+      form={form} 
+      name="login" 
+      onFinish={onFinish}
+      style={{ maxWidth: 400 }}
+    >
+      <FloatFormItem
+        name="username"
+        label="Username"
+        rules={[{ required: true, message: 'Please input your username!' }]}
+      >
+        <FloatInput />
+      </FloatFormItem>
+
+      <FloatFormItem
+        name="password"
+        label="Password"
+        rules={[{ required: true, message: 'Please input your password!' }]}
+      >
+        <FloatPassword />
+      </FloatFormItem>
+
+      <Form.Item>
+        <Button type="primary" htmlType="submit" block>
+          Log in
+        </Button>
+      </Form.Item>
+    </Form>
+  );
+};
+```
+
+## Available Components
+
+All components inherit props from their Ant Design counterparts.
+
+| Component | Description |
+|-----------|-------------|
+| `FloatInput` | Wraps `Input` |
+| `FloatPassword` | Wraps `Input.Password` |
+| `FloatInputNumber` | Wraps `InputNumber` |
+| `FloatSelect` | Wraps `Select` |
+| `FloatDatePicker` | Wraps `DatePicker` |
+| `FloatRangePicker` | Wraps `DatePicker.RangePicker` |
+| `FloatTimePicker` | Wraps `TimePicker` |
+| `FloatCascader` | Wraps `Cascader` |
+| `FloatTreeSelect` | Wraps `TreeSelect` |
+| `FloatAutoComplete` | Wraps `AutoComplete` |
+| `FloatFormItem` | Specialized `Form.Item` for automatic label handling |
+
+## Props
+
+### Common Props
+Most components accept all standard Ant Design props for their respective base component (e.g., `FloatInput` accepts all `InputProps`).
+
+### Specific Props
+
+- **label** (string | ReactNode): When used with `FloatFormItem`, the `label` prop of the FormItem is automatically used as the floating label.
+- **placeholder** (string): When used standalone, the `placeholder` acts as the floating label text.
+- **labelBoxProps** (object): Props passed to the internal wrapper for advanced styling (e.g. `style`, `className` for the box container).
+
+## Customization
+
+You can customize the appearance by overriding CSS variables or providing `labelBoxProps`. The library follows Ant Design's design token system, so changing your global theme config will automatically update these components.
+
+```tsx
+<FloatInput 
+  placeholder="Custom Style" 
+  labelBoxProps={{ 
+    style: { borderColor: 'red' } 
+  }} 
+/>
+```
+
+## License
+
+MIT © [razr001](https://github.com/razr001)

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

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { FloatAutoComplete } from "./index";
+declare const meta: Meta<typeof FloatAutoComplete>;
+export default meta;
+type Story = StoryObj<typeof FloatAutoComplete>;
+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/FloatAutoComplete/index.d.ts

@@ -5,4 +5,4 @@ export interface FloatAutoCompleteProps extends AutoCompleteProps {
     required?: boolean;
     labelBoxProps?: FloatingLabelBoxProps;
 }
-export declare function FloatAutoComplete({ placeholder, onFocus, onBlur, value, defaultValue, style, onChange, required, labelBoxProps, variant, ...restProps }: FloatAutoCompleteProps): import("react/jsx-runtime").JSX.Element;
+export declare function FloatAutoComplete({ placeholder, onFocus, onBlur, value, defaultValue, style, onChange, required, labelBoxProps, variant, status, ...restProps }: FloatAutoCompleteProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { FloatCascader } from "./index";
+declare const meta: Meta<typeof FloatCascader>;
+export default meta;
+type Story = StoryObj<typeof FloatCascader>;
+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/FloatCascader/index.d.ts

@@ -7,4 +7,4 @@ export interface FloatCascadertProps extends CascaderProps {
     defaultValue?: any;
     labelBoxProps?: FloatingLabelBoxProps;
 }
-export declare function FloatCascader({ placeholder, onFocus, onBlur, value, defaultValue, style, required, onChange, labelBoxProps, variant, ...restProps }: FloatCascadertProps): import("react/jsx-runtime").JSX.Element;
+export declare function FloatCascader({ placeholder, onFocus, onBlur, value, defaultValue, style, required, onChange, labelBoxProps, variant, status, ...restProps }: FloatCascadertProps): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -5,4 +5,4 @@ export interface FloatDatePickerProps extends DatePickerProps {
     required?: boolean;
     labelBoxProps?: FloatingLabelBoxProps;
 }
-export declare function FloatDatePicker({ placeholder, onFocus, onBlur, value, defaultValue, style, required, onChange, labelBoxProps, variant, ...restProps }: FloatDatePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function FloatDatePicker({ placeholder, onFocus, onBlur, value, defaultValue, style, required, onChange, labelBoxProps, variant, status, ...restProps }: FloatDatePickerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { FloatFormItem } from "./index";
+declare const meta: Meta<typeof FloatFormItem>;
+export default meta;
+type Story = StoryObj<typeof FloatFormItem>;
+export declare const WithInput: Story;
+export declare const WithValidation: Story;
+export declare const WithSelect: Story;
+export declare const ComplexForm: Story;

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

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { FloatInput } from "./index";
+declare const meta: Meta<typeof FloatInput>;
+export default meta;
+type Story = StoryObj<typeof FloatInput>;
+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 WarningStatus: Story;
+export declare const Underlined: Story;
+export declare const Filled: Story;
+export declare const SmallSize: Story;
+export declare const LargeSize: Story;

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

@@ -4,4 +4,4 @@ export interface FloatInputProps extends InputProps {
     required?: boolean;
     labelBoxProps?: FloatingLabelBoxProps;
 }
-export declare function FloatInput({ placeholder, onFocus, onBlur, onChange, value, defaultValue, style, size, required, labelBoxProps, variant, ...restProps }: FloatInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function FloatInput({ placeholder, onFocus, onBlur, onChange, value, defaultValue, style, size, required, labelBoxProps, variant, status, ...restProps }: FloatInputProps): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -5,4 +5,4 @@ export interface FloatInputNumberProps extends InputNumberProps {
     required?: boolean;
     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/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

@@ -5,4 +5,4 @@ export interface FloatPasswordProps extends PasswordProps {
     required?: boolean;
     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

@@ -5,4 +5,4 @@ export interface FloatRangePickerProps extends RangePickerProps {
     required?: boolean;
     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

@@ -5,4 +5,4 @@ export interface FloatSelectProps extends SelectProps {
     required?: boolean;
     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

@@ -4,4 +4,4 @@ export interface FloatTimePickerProps extends TimePickerProps {
     required?: boolean;
     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

@@ -4,4 +4,4 @@ export interface FloatTreeSelectProps extends TreeSelectProps {
     required?: boolean;
     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/hook/useValueHandle.d.ts

@@ -1,14 +1,16 @@
 /// <reference types="react" />
-export declare function useValueHandle({ defaultValue, value, 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;
 };