x-ui-design 0.2.32 → 0.2.37

package/lib/components/Button/Button.client.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import Button from './Button';
 import { ButtonProps } from '../../types/button';
 import { prefixClsButton } from '../../utils';

package/lib/components/Button/Button.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, ReactNode } from 'react';
+import { ReactElement, ReactNode } from 'react';
 import { clsx } from '../../helpers';
 import { ButtonProps } from '../../types/button';
 import { prefixClsButton } from '../../utils';

package/lib/components/Checkbox/Checkbox.client.tsx

@@ -1,14 +1,24 @@
 'use client';
 
-import React, { ForwardedRef, forwardRef, useState, useEffect } from 'react';
-import CheckboxServer from './Checkbox';
+import {
+  ForwardedRef,
+  forwardRef,
+  MouseEvent,
+  ReactElement,
+  useEffect,
+  useState
+} from 'react';
+import { SyntheticBaseEvent } from '../../types';
 import { CheckboxProps } from '../../types/checkbox';
+import { clsx } from '../../../lib/helpers';
+import { prefixClsCheckbox } from '../../utils';
+import './style.css';
 
 const CheckboxClient = forwardRef<HTMLDivElement, CheckboxProps>(
   (
     {
-      prefixCls,
-      className,
+      prefixCls = prefixClsCheckbox,
+      className = '',
       defaultChecked = false,
       checked,
       style,
@@ -30,70 +40,83 @@ const CheckboxClient = forwardRef<HTMLDivElement, CheckboxProps>(
       noStyle
     },
     ref: ForwardedRef<HTMLDivElement>
-  ) => {
+  ): ReactElement => {
+    const isControlled = checked !== undefined;
     const [internalChecked, setInternalChecked] = useState(
-      checked !== undefined ? checked : defaultChecked || value
+      isControlled ? checked : defaultChecked || value
     );
 
-    const handleClick = (e: React.MouseEvent<HTMLInputElement>) => {
+    const currentChecked = isControlled ? checked : internalChecked;
+
+    const handleClick = (
+      e: MouseEvent<HTMLInputElement> & SyntheticBaseEvent
+    ) => {
       e.stopPropagation();
 
       if (disabled) {
         return;
       }
 
-      const newChecked = !internalChecked;
-      setInternalChecked(newChecked);
-
-      if (onClick) {
-        onClick(e);
+      if (!isControlled) {
+        setInternalChecked(!currentChecked);
       }
 
-      if (onChange) {
-        // Create a synthetic event with the new value
-        const syntheticEvent = {
-          ...e,
-          target: {
-            ...e.target,
-            value: newChecked,
-            checked: newChecked
-          }
-        };
-        onChange(syntheticEvent);
-      }
+      e.target.value = !currentChecked;
+
+      onClick?.(e);
+      onChange?.(e);
     };
 
     useEffect(() => {
-      if (checked !== undefined) {
+      if (isControlled) {
         setInternalChecked(checked);
       }
-    }, [checked]);
+    }, [checked, isControlled]);
 
     return (
-      <CheckboxServer
-        ref={ref}
-        prefixCls={prefixCls}
-        className={className}
-        checked={internalChecked}
-        style={style}
-        disabled={disabled}
-        onChange={handleClick}
-        onClick={handleClick}
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-        onKeyPress={onKeyPress}
-        onKeyDown={onKeyDown}
-        tabIndex={tabIndex}
-        name={name}
-        id={id}
-        autoFocus={autoFocus}
-        type={type}
-        value={value}
-        required={required}
-        noStyle={noStyle}
-      >
-        {children}
-      </CheckboxServer>
+      <div className={`${prefixCls}-wrapper`}>
+        <div
+          ref={ref}
+          style={style}
+          onClick={(e) => {
+            handleClick(e);
+          }}
+          className={clsx([
+            prefixCls,
+            className,
+            {
+              noStyle: noStyle,
+              [`${prefixCls}-disabled`]: disabled,
+              [`${prefixCls}-checked`]: currentChecked
+            }
+          ])}
+        >
+          <input
+            id={id}
+            type={type}
+            name={name}
+            disabled={disabled}
+            checked={currentChecked}
+            tabIndex={tabIndex}
+            required={required}
+            autoFocus={autoFocus}
+            onKeyDown={onKeyDown}
+            onKeyPress={onKeyPress}
+            onMouseEnter={onMouseEnter}
+            onMouseLeave={onMouseLeave}
+            readOnly
+          />
+
+          <span className={`${prefixCls}-box`}>
+            <span
+              className={`${prefixCls}-check`}
+              style={{ opacity: Number(currentChecked) }}
+            />
+          </span>
+        </div>
+
+        {children && <span className={`${prefixCls}-label`}>{children}</span>}
+      </div>
     );
   }
 );

package/lib/components/Checkbox/Checkbox.tsx

@@ -1,77 +1,7 @@
-import React, { ReactElement } from 'react';
 import { CheckboxProps } from '../../types/checkbox';
-import { prefixClsCheckbox } from '../../utils';
-import { clsx } from '../../helpers';
+import CheckboxClient from './Checkbox.client';
+import './style.css';
 
-const Checkbox = ({
-  prefixCls = prefixClsCheckbox,
-  className = '',
-  defaultChecked = false,
-  checked,
-  style,
-  disabled = false,
-  onChange,
-  onClick,
-  onMouseEnter,
-  onMouseLeave,
-  onKeyPress,
-  onKeyDown,
-  tabIndex,
-  name,
-  children,
-  id,
-  autoFocus,
-  type = 'checkbox',
-  value = false,
-  required = false,
-  noStyle
-}: CheckboxProps): ReactElement => {
-  const isChecked = checked !== undefined ? checked : defaultChecked || value;
-
-  return (
-    <div className={`${prefixCls}-wrapper`}>
-      <div
-        style={style}
-        className={clsx([
-          prefixCls,
-          className,
-          {
-            noStyle: noStyle,
-            [`${prefixCls}-disabled`]: disabled,
-            [`${prefixCls}-checked`]: isChecked
-          }
-        ])}
-      >
-        <input
-          id={id}
-          type={type}
-          name={name}
-          checked={isChecked}
-          disabled={disabled}
-          tabIndex={tabIndex}
-          required={required}
-          autoFocus={autoFocus}
-          onClick={onClick}
-          onKeyDown={onKeyDown}
-          onKeyPress={onKeyPress}
-          onMouseEnter={onMouseEnter}
-          onMouseLeave={onMouseLeave}
-          onChange={(e) => onChange?.(e)}
-        />
-
-        <span className={`${prefixCls}-box`}>
-          <span
-            className={`${prefixCls}-check`}
-            style={{ opacity: Number(isChecked) }}
-          />
-        </span>
-      </div>
-
-      {children && <span className={`${prefixCls}-label`}>{children}</span>}
-    </div>
-  );
-};
-
-Checkbox.displayName = 'Checkbox';
-
-export default Checkbox;
+export default function CheckboxServer(props: CheckboxProps) {
+  return <CheckboxClient {...props} />;
+}

package/lib/components/Checkbox/index.ts

@@ -1 +1 @@
-export { default as Checkbox } from './Checkbox'
+export { default as Checkbox } from '@/components/Checkbox/Checkbox'

package/lib/index.ts

@@ -2,13 +2,4 @@
 import './styles/global.css';
 
 // Components
-// export { default as Form } from "./components/Form/Form";
-// export { default as FormItem } from "./components/Form/Item/FormItem";
-
-export { default as Empty } from "./components/Empty/Empty";
 export { default as Button } from "./components/Button/Button";
-export { default as Checkbox } from "./components/Checkbox/Checkbox";
-
-// Hooks
-// export { useForm } from './hooks/useForm';
-// export { useWatch } from './hooks/useWatch';

package/lib/types/checkbox.ts

@@ -4,7 +4,7 @@ import {
   MouseEventHandler,
   ReactNode
 } from 'react';
-import { DefaultProps, TargetProps } from '.';
+import { DefaultProps, TargetProps } from '../../lib/types';
 
 export type CheckboxProps = DefaultProps & {
   disabled?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x-ui-design",
-  "version": "0.2.32",
+  "version": "0.2.37",
   "license": "ISC",
   "author": "Gabriel Boyajyan",
   "main": "dist/index.js",

package/src/app/page.tsx

@@ -1,16 +1,11 @@
 'use client'
 
-import { Button } from "../../lib/components/Button"
 import { Checkbox } from "../../lib/components/Checkbox"
 
 export default function Home() {
     return (
         <>
-            <Button>Button</Button>
-            <Checkbox
-                onChange={e => console.log(e)}>
-                Checkbox
-            </Checkbox>
+            <Checkbox>Checkbox</Checkbox>
         </>
     )
 }

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,115 @@
+'use client';
+
+import {
+  ForwardedRef,
+  forwardRef,
+  MouseEvent,
+  ReactElement,
+  useEffect,
+  useState
+} from 'react';
+import { clsx } from '../../../lib/helpers';
+import { SyntheticBaseEvent } from '../../types';
+import { CheckboxProps } from '../../types/checkbox';
+import { prefixClsCheckbox } from '../../../lib/utils';
+import './style.css';
+
+const Checkbox = forwardRef<HTMLDivElement, CheckboxProps>(
+  (
+    {
+      prefixCls = prefixClsCheckbox,
+      className = '',
+      defaultChecked = false,
+      checked,
+      style,
+      disabled = false,
+      onChange,
+      onClick,
+      onMouseEnter,
+      onMouseLeave,
+      onKeyPress,
+      onKeyDown,
+      tabIndex,
+      name,
+      children,
+      id,
+      autoFocus,
+      type = 'checkbox',
+      value = false,
+      required = false,
+      noStyle
+    },
+    ref: ForwardedRef<HTMLDivElement>
+  ): ReactElement => {
+    const isChecked = checked !== undefined ? checked : defaultChecked || value;
+    const [internalChecked, setInternalChecked] = useState(isChecked);
+
+    const handleClick = (
+      e: MouseEvent<HTMLInputElement> & SyntheticBaseEvent
+    ) => {
+      e.stopPropagation();
+
+      if (disabled) {
+        return;
+      }
+
+      setInternalChecked(!internalChecked);
+      e.target.value = !internalChecked;
+
+      onClick?.(e);
+      onChange?.(e);
+    };
+
+    useEffect(() => {
+      if (checked !== undefined) {
+        setInternalChecked(checked);
+      }
+    }, [checked]);
+
+    return (
+      <div className={`${prefixCls}-wrapper`}>
+        <div
+          ref={ref}
+          style={style}
+          onClick={handleClick}
+          className={clsx([
+            prefixCls,
+            className,
+            {
+              noStyle: noStyle,
+              [`${prefixCls}-disabled`]: disabled,
+              [`${prefixCls}-checked`]: internalChecked
+            }
+          ])}
+        >
+          <input
+            id={id}
+            type={type}
+            name={name}
+            disabled={disabled}
+            tabIndex={tabIndex}
+            required={required}
+            autoFocus={autoFocus}
+            onKeyDown={onKeyDown}
+            onKeyPress={onKeyPress}
+            onMouseEnter={onMouseEnter}
+            onMouseLeave={onMouseLeave}
+          />
+
+          <span className={`${prefixCls}-box`}>
+            <span
+              className={`${prefixCls}-check`}
+              style={{ opacity: Number(internalChecked) }}
+            />
+          </span>
+        </div>
+
+        {children && <span className={`${prefixCls}-label`}>{children}</span>}
+      </div>
+    );
+  }
+);
+
+Checkbox.displayName = 'Checkbox';
+
+export default Checkbox;

package/src/components/Checkbox/index.ts

@@ -0,0 +1 @@
+export { default as Checkbox } from '@/components/Checkbox/Checkbox'

package/src/components/Checkbox/style.css

@@ -0,0 +1,91 @@
+.xUi-checkbox-wrapper {
+    cursor: pointer;
+    font-size: var(--xui-font-size-md);
+    align-items: center;
+    display: inline-flex;
+    color: var(--xui-main-color);
+    margin: 16px 0;
+}
+
+.xUi-checkbox {
+    width: 14px;
+    height: 14px;
+    position: relative;
+    border-radius: var(--xui-border-radius-sm);
+    transition: all 0.3s;
+    display: inline-block;
+    background-color: transparent;
+    border: 1px solid var(--xui-border-color);
+}
+
+.xUi-checkbox.xUi-checkbox-checked {
+    border-color: var(--xui-primary-color);
+    background-color: #f0f5ff;
+}
+
+.xUi-checkbox input {
+    inset: 0;
+    opacity: 0;
+    cursor: pointer;
+    position: absolute;
+}
+
+.xUi-checkbox-inner {
+    top: 50%;
+    left: 50%;
+    width: 10px;
+    height: 6px;
+    border-top: 0;
+    border-left: 0;
+    position: absolute;
+    border: 2px solid var(--xui-background-color);
+    transform: rotate(45deg) scale(0);
+    transition: transform 0.2s ease-in-out;
+}
+
+.xUi-checkbox-check {
+    width: 100%;
+    height: 100%;
+    display: block;
+    position: relative;
+    transition: 0.1s ease;
+    border-color: var(--xui-primary-color);
+    background-color: var(--xui-primary-color);
+}
+
+.xUi-checkbox-check::after {
+    top: 1px;
+    left: 3px;
+    width: 5px;
+    height: 8px;
+    content: "";
+    position: absolute;
+    border: solid white;
+    transform: rotate(45deg);
+    border-width: 0 2px 2px 0;
+}
+
+.xUi-checkbox-disabled,
+.xUi-checkbox-disabled .xUi-checkbox-check {
+    opacity: 0.5;
+    cursor: not-allowed;
+    background-color: var(--xui-color-disabled);
+    border-color: var(--xui-border-color) !important;
+}
+
+.xUi-checkbox-label {
+    margin-left: 8px;
+    user-select: none;
+    font-size: 14px;
+}
+
+.xUi-checkbox:hover:not(.disabled),
+.xUi-checkbox:focus:not(.disabled) {
+    border-color: var(--xui-primary-color);
+    cursor: pointer;
+}
+
+.xUi-checkbox.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}

package/{lib → src}/components/Empty/Empty.tsx

@@ -1,16 +1,15 @@
-import React from 'react';
-import { EmptyProps } from '../../types/empty';
+import { EmptyContentProps } from '../../types/empty';
 import { prefixClsEmpty } from '../../utils';
 import './style.css';
 
-const Empty = ({
+const EmptyContent = ({
   icon,
   style = {},
   className = '',
   title = 'No Data',
   description = 'No data',
   prefixCls = prefixClsEmpty
-}: EmptyProps) => (
+}: EmptyContentProps) => (
   <div
     style={style}
     className={`${prefixCls} ${prefixCls}-normal ${prefixCls}-small ${className}`}
@@ -41,4 +40,4 @@ const Empty = ({
   </div>
 );
 
-export default Empty;
+export default EmptyContent;

package/src/components/Empty/index.ts

@@ -0,0 +1 @@
+export { default as Empty } from '@/components/Empty/Empty'

package/{lib/components/Form/Form.client.tsx → src/components/Form/Form.tsx}

@@ -1,7 +1,8 @@
 'use client';
 
-import React, {
+import {
   Children,
+  createContext,
   FC,
   Fragment,
   isValidElement,
@@ -10,15 +11,18 @@ import React, {
   useMemo,
   useRef
 } from 'react';
-import { useForm } from '../../hooks/useForm';
-import { FormProps } from '../../types/form';
-import { FormContext } from './Form';
+import { useForm } from '@/hooks/useForm';
+import { FormInstance, FormItemProps, FormProps } from '../../types/form';
+import { prefixClsForm } from '../../../lib/utils';
+import FormItem from './Item/Item';
 
-const FormClient: FC<FormProps> = ({
+export const FormContext = createContext<FormInstance | null>(null);
+
+const Form: FC<FormProps> & { Item: FC<FormItemProps> } = ({
   children,
   form,
   style = {},
-  prefixCls,
+  prefixCls = prefixClsForm,
   className = '',
   onFinish,
   onFinishFailed,
@@ -26,7 +30,6 @@ const FormClient: FC<FormProps> = ({
   onValuesChange,
   onFieldsChange,
   layout = 'horizontal',
-  onSubmitCapture,
   ...rest
 }) => {
   const internalForm = useForm(initialValues, onFieldsChange, onValuesChange);
@@ -65,11 +68,7 @@ const FormClient: FC<FormProps> = ({
         style={style}
         ref={formRef}
         onSubmit={handleSubmit}
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-expect-error
-        onSubmitCapture={onSubmitCapture}
         className={`${prefixCls} ${className}`}
-        {...rest}
       >
         {Children.map(childrenList, child => {
           if (isValidElement(child) && child.type !== Fragment) {
@@ -94,4 +93,6 @@ const FormClient: FC<FormProps> = ({
   );
 };
 
-export default FormClient;
+Form.Item = FormItem;
+
+export default Form;

package/{lib/components/Form/Item/FormItem.client.tsx → src/components/Form/Item/Item.tsx}

@@ -1,6 +1,6 @@
 'use client';
 
-import React, {
+import {
   Children,
   Fragment,
   isValidElement,
@@ -10,20 +10,20 @@ import React, {
   useRef,
   useState
 } from 'react';
-import { clsx } from '../../../helpers';
+import { clsx } from '../../../../lib/helpers';
 import { RuleType, SyntheticBaseEvent } from '../../../types';
 import {
   FormItemChildComponentProps,
   FormItemProps
 } from '../../../types/form';
 import { OptionProps } from '../../../types/select';
-import { prefixClsFormItem } from '../../../utils';
+import { prefixClsFormItem } from '../../../../lib/utils';
 import './style.css';
 import { FormContext } from '../Form';
 
 const REF_CLIENT_HEIGHT = 24;
 
-const FormItemClient = ({
+const FormItem = ({
   prefixCls = prefixClsFormItem,
   name,
   label,
@@ -39,6 +39,7 @@ const FormItemClient = ({
   ...props
 }: FormItemProps) => {
   const formContext = useContext(FormContext);
+
   const errorRef = useRef<HTMLSpanElement>(null);
 
   if (!formContext) {
@@ -86,7 +87,10 @@ const FormItemClient = ({
   }, [dependencies, name]);
 
   useEffect(() => {
-    if (errorRef.current && errorRef.current?.clientHeight >= REF_CLIENT_HEIGHT) {
+    if (
+      errorRef.current &&
+      errorRef.current?.clientHeight >= REF_CLIENT_HEIGHT
+    ) {
       errorRef.current.style.position = 'relative';
       errorRef.current.style.marginTop = '-16px';
     }
@@ -115,13 +119,15 @@ const FormItemClient = ({
         <label className={`${prefixCls}-label`} htmlFor={name}>
           {label || name}:
           {isRequired && <span className={`${prefixCls}-required`}>*</span>}
+          {/* @Todo need to add Tooltip like Ant design */}
         </label>
       )}
 
       {Children.map(childrenList, (child, key) => {
         if (isValidElement(child) && child.type !== Fragment) {
           const { value, ...childProps } = child.props;
-          const fieldValue = getFieldValue(valuePropName || name) ?? initialValue;
+          const fieldValue =
+            getFieldValue(valuePropName || name) ?? initialValue;
 
           return (
             <FormItemChildComponent
@@ -168,11 +174,15 @@ const FormItemChildComponent = ({
   ...props
 }: FormItemChildComponentProps) => {
   const formContext = useContext(FormContext);
+
   const [wasNormalize, setWasNormalize] = useState(false);
+
   const { getFieldsValue } = formContext || {};
 
   const handleChange = (e: SyntheticBaseEvent, option?: OptionProps) => {
-    let rawValue: RuleType | SyntheticBaseEvent = e?.target ? e.target.value : e;
+    let rawValue: RuleType | SyntheticBaseEvent = e?.target
+      ? e.target.value
+      : e;
 
     if (normalize) {
       const prevValue = fieldValue ?? props.value;
@@ -182,10 +192,14 @@ const FormItemChildComponent = ({
 
       if (rawValue === prevValue) {
         e.target.value = rawValue;
+
         setWasNormalize(prev => !prev);
 
         const timeout = setTimeout(() => {
-          (document.querySelector(`[name='${name}']`) as HTMLInputElement)?.focus();
+          (
+            document.querySelector(`[name='${name}']`) as HTMLInputElement
+          )?.focus();
+
           clearTimeout(timeout);
         }, 0);
 
@@ -209,6 +223,6 @@ const FormItemChildComponent = ({
   );
 };
 
-FormItemClient.displayName = 'FormItemClient';
+FormItem.displayName = 'FormItem';
 
-export default FormItemClient;
+export default FormItem;

package/src/components/Form/Item/index.ts

@@ -0,0 +1 @@
+export { default as Item } from './Item'

package/{lib → src}/hooks/useForm.ts

@@ -1,7 +1,7 @@
 'use client';
 
 import { useRef, useState } from 'react';
-import { RuleTypes } from '../types';
+import { RuleTypes } from '../../src/types';
 import type {
   FieldData,
   FieldError,
@@ -9,7 +9,7 @@ import type {
   FormInstance,
   RuleObject,
   RuleRender
-} from '../types/form';
+} from '../../src/types/form';
 
 const useForm = (
   initialValues: Record<string, RuleTypes> = {},

package/{lib → src}/hooks/useWatch.ts

@@ -1,7 +1,7 @@
 import { useContext, useEffect, useState } from 'react';
-import { FormContext } from '../components/Form/Form';
-import { RuleType } from '../types';
-import { FormInstance } from '../types/form';
+import { FormContext } from '@/components/Form/Form';
+import { RuleType } from '../../src/types';
+import { FormInstance } from '../../src/types/form';
 
 type UseWatchProps = {
   name?: string;

package/src/types/checkbox.ts

@@ -0,0 +1,28 @@
+import {
+  KeyboardEventHandler,
+  MouseEvent,
+  MouseEventHandler,
+  ReactNode
+} from 'react';
+import { DefaultProps, TargetProps } from '../../lib/types';
+
+export type CheckboxProps = DefaultProps & {
+  disabled?: boolean;
+  onChange?: (e: MouseEvent<HTMLInputElement> & TargetProps) => void;
+  onClick?: MouseEventHandler<HTMLElement>;
+  onMouseEnter?: MouseEventHandler<HTMLElement>;
+  onMouseLeave?: MouseEventHandler<HTMLElement>;
+  onKeyPress?: KeyboardEventHandler<HTMLElement>;
+  onKeyDown?: KeyboardEventHandler<HTMLElement>;
+  value?: boolean;
+  tabIndex?: number;
+  name?: string;
+  children?: ReactNode;
+  id?: string;
+  autoFocus?: boolean;
+  type?: string;
+  skipGroup?: boolean;
+  required?: boolean;
+  defaultChecked?: boolean;
+  checked?: boolean;
+};

package/{lib → src}/types/empty.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { DefaultProps } from '.';
 
-export type EmptyProps = DefaultProps & {
+export type EmptyContentProps = DefaultProps & {
   title?: string;
   description?: string;
   icon?: ReactNode;

package/{lib → src}/types/form.ts

@@ -46,6 +46,7 @@ export interface FieldError {
 type FormLayoutTypes = 'horizontal' | 'vertical' | 'inline';
 
 export type FormProps = DefaultProps & {
+  colon?: boolean;
   name?: string;
   layout?: FormLayoutTypes;
   form?: FormInstance;
@@ -88,7 +89,7 @@ export type FormItemProps = DefaultProps & {
 };
 
 export interface FormItemChildComponentProps {
-  child: ReactElement;
+  child: React.ReactElement;
   name: string;
   error: boolean;
   fieldValue: RuleTypes;

package/src/types/index.ts

@@ -0,0 +1,27 @@
+import { CSSProperties, MouseEvent } from 'react';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type RuleType = any;
+export type RuleTypes = RuleType | RuleType[];
+export type SizeType = 'small' | 'middle' | 'large';
+export type MouseEventHandlerSelect = MouseEvent<HTMLDivElement> & TargetProps;
+export interface DefaultProps {
+  prefixCls?: string;
+  className?: string;
+  style?: CSSProperties;
+  noStyle?: boolean;
+}
+
+export type TargetProps = {
+  target: {
+    value: RuleType;
+  };
+};
+
+export type SyntheticBaseEvent = {
+  target: EventTarget & {
+    value: RuleType;
+  };
+  nativeEvent?: Event & { data?: string | null };
+  currentTarget: EventTarget;
+};

package/{lib → src}/types/upload.ts

@@ -1,4 +1,3 @@
-import { CSSProperties, DragEvent, ReactNode } from 'react';
 import { DefaultProps, RuleType } from '.';
 
 export interface RcFile extends File {
@@ -44,7 +43,7 @@ export type UploadProps = DefaultProps & {
   accept?: string;
   beforeUpload?: (file: RcFile, fileList: File[]) => boolean | Promise<boolean>;
   onChange?: (info: UploadChangeParam) => void;
-  onDrop?: (event: DragEvent<HTMLDivElement>) => void;
+  onDrop?: (event: React.DragEvent<HTMLDivElement>) => void;
   listType?: string;
   className?: string;
   rootClassName?: string;
@@ -54,7 +53,7 @@ export type UploadProps = DefaultProps & {
     file: UploadFile<RuleType>
   ) => void | boolean | Promise<void | boolean>;
   disabled?: boolean;
-  style?: CSSProperties;
+  style?: React.CSSProperties;
   customRequest?: (options: {
     file: RcFile;
     onSuccess: (response: RuleType) => void;
@@ -64,5 +63,5 @@ export type UploadProps = DefaultProps & {
   withCredentials?: boolean;
   openFileDialogOnClick?: boolean;
   maxCount?: number;
-  children?: ReactNode;
+  children?: React.ReactNode;
 };

package/lib/components/Empty/Empty.client.tsx

@@ -1,12 +0,0 @@
-'use client';
-
-import React from 'react';
-import { EmptyProps } from '../../types/empty';
-import Empty from './Empty';
-import './style.css';
-
-const EmptyClient = (props: EmptyProps) => (
-  <Empty {...props} />
-);
-
-export default EmptyClient;

package/lib/components/Empty/index.ts

@@ -1 +0,0 @@
-export { default as Empty } from './Empty'

package/lib/components/Form/Form.tsx

@@ -1,32 +0,0 @@
-import React, { createContext, FC } from 'react';
-import { FormInstance, FormItemProps, FormProps } from '../../types/form';
-import { prefixClsForm } from '../../utils';
-import FormItem from './Item/FormItem';
-import FormClient from './Form.client';
-
-export const FormContext = createContext<FormInstance | null>(null);
-
-const Form: FC<FormProps> & { Item: FC<FormItemProps> } = ({
-  children,
-  style = {},
-  prefixCls = prefixClsForm,
-  className = '',
-  layout = 'horizontal',
-  ...rest
-}) => {
-  return (
-    <FormClient
-      style={style}
-      prefixCls={prefixCls}
-      className={className}
-      layout={layout}
-      {...rest}
-    >
-      {children}
-    </FormClient>
-  );
-};
-
-Form.Item = FormItem;
-
-export default Form;

package/lib/components/Form/Item/FormItem.tsx

@@ -1,42 +0,0 @@
-import { FormItemProps } from '../../../types/form';
-import { prefixClsFormItem } from '../../../utils';
-import FormItemClient from './FormItem.client';
-
-const FormItem = ({
-  prefixCls = prefixClsFormItem,
-  name,
-  label,
-  rules = [],
-  children,
-  className = '',
-  layout = 'vertical',
-  style = {},
-  valuePropName,
-  dependencies = [],
-  initialValue,
-  feedbackIcons,
-  ...props
-}: FormItemProps) => {
-  return (
-    <FormItemClient
-      prefixCls={prefixCls}
-      name={name}
-      label={label}
-      rules={rules}
-      className={className}
-      layout={layout}
-      style={style}
-      valuePropName={valuePropName}
-      dependencies={dependencies}
-      initialValue={initialValue}
-      feedbackIcons={feedbackIcons}
-      {...props}
-    >
-      {children}
-    </FormItemClient>
-  );
-};
-
-FormItem.displayName = 'FormItem';
-
-export default FormItem;

package/lib/components/Form/Item/index.ts

@@ -1 +0,0 @@
-export { default as Item } from './FormItem'