@fle-ui/next 3.0.0-alpha.0 → 3.0.0-alpha.2

package/es/image/style/index.js

@@ -0,0 +1,229 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { TinyColor } from '@ctrl/tinycolor';
+import { genModalMaskStyle } from "../../modal/style";
+import { initZoomMotion, initFadeMotion } from "../../style/motion";
+import { genComponentStyleHook, mergeToken } from "../../theme/internal";
+import { resetComponent, textEllipsis } from "../../style";
+export var genBoxStyle = function genBoxStyle(position) {
+  return {
+    position: position || 'absolute',
+    inset: 0
+  };
+};
+export var genImageMaskStyle = function genImageMaskStyle(token) {
+  var iconCls = token.iconCls,
+      motionDurationSlow = token.motionDurationSlow,
+      paddingXXS = token.paddingXXS,
+      marginXXS = token.marginXXS,
+      prefixCls = token.prefixCls;
+  return _defineProperty({
+    position: 'absolute',
+    inset: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: '#fff',
+    background: new TinyColor('#000').setAlpha(0.5).toRgbString(),
+    cursor: 'pointer',
+    opacity: 0,
+    transition: "opacity " + motionDurationSlow
+  }, "." + prefixCls + "-mask-info", _extends(_extends({}, textEllipsis), _defineProperty({
+    padding: "0 " + paddingXXS + "px"
+  }, iconCls, {
+    marginInlineEnd: marginXXS
+  })));
+};
+export var genPreviewOperationsStyle = function genPreviewOperationsStyle(token) {
+  var previewCls = token.previewCls,
+      modalMaskBg = token.modalMaskBg,
+      paddingSM = token.paddingSM,
+      imagePreviewOperationDisabledColor = token.imagePreviewOperationDisabledColor,
+      zIndexPopup = token.zIndexPopup,
+      motionDurationSlow = token.motionDurationSlow;
+  var operationBg = new TinyColor(modalMaskBg).setAlpha(0.1);
+  var operationBgHover = operationBg.clone().setAlpha(0.2);
+  return _defineProperty({}, previewCls + "-operations", _extends(_extends({}, resetComponent(token)), {
+    position: 'fixed',
+    insetBlockStart: 0,
+    insetInlineEnd: 0,
+    zIndex: zIndexPopup + 1,
+    display: 'flex',
+    flexDirection: 'row-reverse',
+    alignItems: 'center',
+    width: '100%',
+    color: token.imagePreviewOperationColor,
+    listStyle: 'none',
+    background: operationBg.toRgbString(),
+    pointerEvents: 'auto',
+    '&-operation': {
+      marginInlineStart: paddingSM,
+      padding: paddingSM,
+      cursor: 'pointer',
+      transition: "all " + motionDurationSlow,
+      '&:hover': {
+        background: operationBgHover.toRgbString()
+      },
+      '&-disabled': {
+        color: imagePreviewOperationDisabledColor,
+        pointerEvents: 'none'
+      },
+      '&:last-of-type': {
+        marginInlineStart: 0
+      }
+    },
+    '&-progress': {
+      position: 'absolute',
+      left: {
+        _skip_check_: true,
+        value: '50%'
+      },
+      transform: 'translateX(-50%)'
+    },
+    '&-icon': {
+      fontSize: token.imagePreviewOperationSize
+    }
+  }));
+};
+export var genPreviewSwitchStyle = function genPreviewSwitchStyle(token) {
+  var _ref3, _ref4;
+
+  var modalMaskBg = token.modalMaskBg,
+      iconCls = token.iconCls,
+      imagePreviewOperationDisabledColor = token.imagePreviewOperationDisabledColor,
+      previewCls = token.previewCls,
+      zIndexPopup = token.zIndexPopup,
+      motionDurationSlow = token.motionDurationSlow;
+  var operationBg = new TinyColor(modalMaskBg).setAlpha(0.1);
+  var operationBgHover = operationBg.clone().setAlpha(0.2);
+  return _ref4 = {}, _defineProperty(_ref4, previewCls + "-switch-left, " + previewCls + "-switch-right", (_ref3 = {
+    position: 'fixed',
+    insetBlockStart: '50%',
+    zIndex: zIndexPopup + 1,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: token.imagePreviewSwitchSize,
+    height: token.imagePreviewSwitchSize,
+    marginTop: -token.imagePreviewSwitchSize / 2,
+    color: token.imagePreviewOperationColor,
+    background: operationBg.toRgbString(),
+    borderRadius: '50%',
+    transform: "translateY(-50%)",
+    cursor: 'pointer',
+    transition: "all " + motionDurationSlow,
+    pointerEvents: 'auto',
+    '&:hover': {
+      background: operationBgHover.toRgbString()
+    }
+  }, _defineProperty(_ref3, "&-disabled", {
+    '&, &:hover': _defineProperty({
+      color: imagePreviewOperationDisabledColor,
+      background: 'transparent',
+      cursor: 'not-allowed'
+    }, "> " + iconCls, {
+      cursor: 'not-allowed'
+    })
+  }), _defineProperty(_ref3, "> " + iconCls, {
+    fontSize: token.imagePreviewOperationSize
+  }), _ref3)), _defineProperty(_ref4, previewCls + "-switch-left", {
+    insetInlineStart: token.marginSM
+  }), _defineProperty(_ref4, previewCls + "-switch-right", {
+    insetInlineEnd: token.marginSM
+  }), _ref4;
+};
+export var genImagePreviewStyle = function genImagePreviewStyle(token) {
+  var _ref6;
+
+  var motionEaseOut = token.motionEaseOut,
+      previewCls = token.previewCls,
+      motionDurationSlow = token.motionDurationSlow,
+      componentCls = token.componentCls;
+  return [_defineProperty({}, componentCls + "-preview-root", (_ref6 = {}, _defineProperty(_ref6, previewCls, {
+    height: '100%',
+    textAlign: 'center',
+    pointerEvents: 'none'
+  }), _defineProperty(_ref6, previewCls + "-body", _extends(_extends({}, genBoxStyle()), {
+    overflow: 'hidden'
+  })), _defineProperty(_ref6, previewCls + "-img", {
+    maxWidth: '100%',
+    maxHeight: '100%',
+    verticalAlign: 'middle',
+    transform: 'scale3d(1, 1, 1)',
+    cursor: 'grab',
+    transition: "transform " + motionDurationSlow + " " + motionEaseOut + " 0s",
+    userSelect: 'none',
+    pointerEvents: 'auto',
+    '&-wrapper': _extends(_extends({}, genBoxStyle()), {
+      transition: "transform " + motionDurationSlow + " " + motionEaseOut + " 0s",
+      '&::before': {
+        display: 'inline-block',
+        width: 1,
+        height: '50%',
+        marginInlineEnd: -1,
+        content: '""'
+      }
+    })
+  }), _defineProperty(_ref6, previewCls + "-moving", _defineProperty({}, previewCls + "-preview-img", {
+    cursor: 'grabbing',
+    '&-wrapper': {
+      transitionDuration: '0s'
+    }
+  })), _ref6)), // Override
+  _defineProperty({}, componentCls + "-preview-root", _defineProperty({}, previewCls + "-wrap", {
+    zIndex: token.zIndexPopup
+  })), // Preview operations & switch
+  {
+    '&': [genPreviewOperationsStyle(token), genPreviewSwitchStyle(token)]
+  }];
+};
+
+var genImageStyle = function genImageStyle(token) {
+  var _componentCls;
+
+  var componentCls = token.componentCls;
+  return _defineProperty({}, componentCls, (_componentCls = {
+    position: 'relative',
+    display: 'inline-block'
+  }, _defineProperty(_componentCls, componentCls + "-img", {
+    width: '100%',
+    height: 'auto',
+    verticalAlign: 'middle'
+  }), _defineProperty(_componentCls, componentCls + "-img-placeholder", {
+    backgroundColor: token.colorBgContainerDisabled,
+    backgroundImage: "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=')",
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'center center',
+    backgroundSize: '30%'
+  }), _defineProperty(_componentCls, componentCls + "-mask", _extends({}, genImageMaskStyle(token))), _defineProperty(_componentCls, componentCls + "-mask:hover", {
+    opacity: 1
+  }), _defineProperty(_componentCls, componentCls + "-placeholder", _extends({}, genBoxStyle())), _componentCls));
+};
+
+var genPreviewMotion = function genPreviewMotion(token) {
+  var _ref11;
+
+  var previewCls = token.previewCls;
+  return _ref11 = {}, _defineProperty(_ref11, previewCls + "-root", initZoomMotion(token, 'zoom')), _defineProperty(_ref11, "&", initFadeMotion(token, true)), _ref11;
+}; // ============================== Export ==============================
+
+
+export default genComponentStyleHook('Image', function (token) {
+  var imagePreviewOperationColor = new TinyColor(token.colorTextLightSolid);
+  var previewCls = token.componentCls + "-preview";
+  var imageToken = mergeToken(token, {
+    previewCls: previewCls,
+    imagePreviewOperationColor: imagePreviewOperationColor.toRgbString(),
+    imagePreviewOperationDisabledColor: new TinyColor(imagePreviewOperationColor).setAlpha(0.25).toRgbString(),
+    modalMaskBg: new TinyColor('#000').setAlpha(0.45).toRgbString(),
+    imagePreviewOperationSize: token.fontSizeIcon * 1.5,
+    imagePreviewSwitchSize: token.controlHeightLG
+  });
+  return [genImageStyle(imageToken), genImagePreviewStyle(imageToken), genModalMaskStyle(mergeToken(imageToken, {
+    componentCls: previewCls
+  })), genPreviewMotion(imageToken)];
+}, function (token) {
+  return {
+    zIndexPopup: token.zIndexPopupBase + 80
+  };
+});

package/es/index.d.ts

@@ -1 +1,129 @@
-export * from 'antd';
+export { default as Affix } from './affix';
+export type { AffixProps } from './affix';
+export { default as Alert } from './alert';
+export type { AlertProps } from './alert';
+export { default as Anchor } from './anchor';
+export type { AnchorLinkProps, AnchorProps } from './anchor';
+export { default as AutoComplete } from './auto-complete';
+export type { AutoCompleteProps } from './auto-complete';
+export { default as Avatar } from './avatar';
+export type { AvatarProps } from './avatar';
+export { default as FloatButton } from './float-button';
+export type { FloatButtonProps } from './float-button/interface';
+export { default as BackTop } from './back-top';
+export type { BackTopProps } from './back-top';
+export { default as Badge } from './badge';
+export type { BadgeProps } from './badge';
+export { default as Breadcrumb } from './breadcrumb';
+export type { BreadcrumbItemProps, BreadcrumbProps } from './breadcrumb';
+export { default as Button } from './button';
+export type { ButtonProps } from './button';
+export { default as Calendar } from './calendar';
+export type { CalendarProps } from './calendar';
+export { default as Card } from './card';
+export type { CardProps } from './card';
+export { default as Carousel } from './carousel';
+export type { CarouselProps } from './carousel';
+export { default as Cascader } from './cascader';
+export type { CascaderProps } from './cascader';
+export { default as Checkbox } from './checkbox';
+export type { CheckboxOptionType, CheckboxProps } from './checkbox';
+export { default as Col } from './col';
+export type { ColProps } from './col';
+export { default as Collapse } from './collapse';
+export type { CollapsePanelProps, CollapseProps } from './collapse';
+export { default as ConfigProvider } from './config-provider';
+export { default as DatePicker } from './date-picker';
+export type { DatePickerProps } from './date-picker';
+export { default as Descriptions } from './descriptions';
+export type { DescriptionsProps } from './descriptions';
+export { default as Divider } from './divider';
+export type { DividerProps } from './divider';
+export { default as Drawer } from './drawer';
+export type { DrawerProps } from './drawer';
+export { default as Dropdown } from './dropdown';
+export type { DropdownProps, DropdownProps as DropDownProps, } from './dropdown';
+export { default as Empty } from './empty';
+export type { EmptyProps } from './empty';
+export { default as Form } from './form';
+export type { FormInstance, FormItemProps, FormListFieldData, FormListOperation, FormProps, Rule as FormRule, } from './form';
+export { default as Grid } from './grid';
+export { default as Image } from './image';
+export type { ImageProps } from './image';
+export { default as Input } from './input';
+export type { InputProps, InputRef } from './input';
+export { default as InputNumber } from './input-number';
+export type { InputNumberProps } from './input-number';
+export { default as Layout } from './layout';
+export type { LayoutProps, SiderProps } from './layout';
+export { default as List } from './list';
+export type { ListProps } from './list';
+export { default as Mentions } from './mentions';
+export type { MentionProps } from './mentions';
+export { default as Menu } from './menu';
+export type { MenuItemProps, MenuProps, MenuTheme, SubMenuProps, MenuRef } from './menu';
+export { default as message } from './message';
+export type { ArgsProps as MessageArgsProps } from './message';
+export { default as Modal } from './modal';
+export type { ModalFuncProps, ModalProps } from './modal';
+export { default as notification } from './notification';
+export { default as Pagination } from './pagination';
+export type { PaginationProps } from './pagination';
+export { default as Popconfirm } from './popconfirm';
+export type { PopconfirmProps } from './popconfirm';
+export { default as Popover } from './popover';
+export type { PopoverProps } from './popover';
+export { default as Progress } from './progress';
+export type { ProgressProps } from './progress';
+export { default as Radio } from './radio';
+export type { RadioChangeEvent, RadioGroupProps, RadioProps } from './radio';
+export { default as Rate } from './rate';
+export type { RateProps } from './rate';
+export { default as Result } from './result';
+export type { ResultProps } from './result';
+export { default as Row } from './row';
+export type { RowProps } from './row';
+export { default as Segmented } from './segmented';
+export type { SegmentedProps } from './segmented';
+export { default as Select } from './select';
+export type { RefSelectProps, SelectProps } from './select';
+export { default as Skeleton } from './skeleton';
+export type { SkeletonProps } from './skeleton';
+export { default as Slider } from './slider';
+export type { SliderSingleProps } from './slider';
+export { default as Space } from './space';
+export type { SpaceProps } from './space';
+export { default as Spin } from './spin';
+export type { SpinProps } from './spin';
+export { default as Statistic } from './statistic';
+export type { StatisticProps } from './statistic';
+export { default as Steps } from './steps';
+export type { StepProps, StepsProps } from './steps';
+export { default as Switch } from './switch';
+export type { SwitchProps } from './switch';
+export { default as Table } from './table';
+export type { ColumnGroupType as TableColumnGroupType, ColumnProps as TableColumnProps, ColumnsType as TableColumnsType, ColumnType as TableColumnType, TablePaginationConfig, TableProps, } from './table';
+export { default as Tabs } from './tabs';
+export type { TabPaneProps, TabsProps } from './tabs';
+export { default as Tag } from './tag';
+export type { TagProps, TagType } from './tag';
+export { default as theme } from './theme';
+export { default as TimePicker } from './time-picker';
+export type { TimePickerProps, TimeRangePickerProps } from './time-picker';
+export { default as Timeline } from './timeline';
+export type { TimelineItemProps, TimelineProps } from './timeline';
+export { default as Tooltip } from './tooltip';
+export type { TooltipProps } from './tooltip';
+export { default as Tour } from './tour';
+export type { TourProps, TourStepProps } from './tour/interface';
+export { default as Transfer } from './transfer';
+export type { TransferProps } from './transfer';
+export { default as Tree } from './tree';
+export type { AntTreeNodeProps as TreeNodeProps, DataNode as TreeDataNode, TreeProps, } from './tree';
+export { default as TreeSelect } from './tree-select';
+export type { TreeSelectProps } from './tree-select';
+export { default as Typography } from './typography';
+export type { TypographyProps } from './typography';
+export { default as Upload } from './upload';
+export type { UploadFile, UploadProps } from './upload';
+export { default as version } from './version';

package/es/index.js

@@ -1 +1,67 @@
-export * from 'antd';
+export { default as Affix } from "./affix";
+export { default as Alert } from "./alert";
+export { default as Anchor } from "./anchor";
+export { default as AutoComplete } from "./auto-complete";
+export { default as Avatar } from "./avatar";
+export { default as FloatButton } from "./float-button";
+export { default as BackTop } from "./back-top";
+export { default as Badge } from "./badge";
+export { default as Breadcrumb } from "./breadcrumb";
+export { default as Button } from "./button";
+export { default as Calendar } from "./calendar";
+export { default as Card } from "./card";
+export { default as Carousel } from "./carousel";
+export { default as Cascader } from "./cascader";
+export { default as Checkbox } from "./checkbox";
+export { default as Col } from "./col";
+export { default as Collapse } from "./collapse";
+export { default as ConfigProvider } from "./config-provider";
+export { default as DatePicker } from "./date-picker";
+export { default as Descriptions } from "./descriptions";
+export { default as Divider } from "./divider";
+export { default as Drawer } from "./drawer";
+export { default as Dropdown } from "./dropdown";
+export { default as Empty } from "./empty";
+export { default as Form } from "./form";
+export { default as Grid } from "./grid";
+export { default as Image } from "./image";
+export { default as Input } from "./input";
+export { default as InputNumber } from "./input-number";
+export { default as Layout } from "./layout";
+export { default as List } from "./list";
+export { default as Mentions } from "./mentions";
+export { default as Menu } from "./menu";
+export { default as message } from "./message";
+export { default as Modal } from "./modal";
+export { default as notification } from "./notification";
+export { default as Pagination } from "./pagination";
+export { default as Popconfirm } from "./popconfirm";
+export { default as Popover } from "./popover";
+export { default as Progress } from "./progress";
+export { default as Radio } from "./radio";
+export { default as Rate } from "./rate";
+export { default as Result } from "./result";
+export { default as Row } from "./row";
+export { default as Segmented } from "./segmented";
+export { default as Select } from "./select";
+export { default as Skeleton } from "./skeleton";
+export { default as Slider } from "./slider";
+export { default as Space } from "./space";
+export { default as Spin } from "./spin";
+export { default as Statistic } from "./statistic";
+export { default as Steps } from "./steps";
+export { default as Switch } from "./switch";
+export { default as Table } from "./table";
+export { default as Tabs } from "./tabs";
+export { default as Tag } from "./tag";
+export { default as theme } from "./theme";
+export { default as TimePicker } from "./time-picker";
+export { default as Timeline } from "./timeline";
+export { default as Tooltip } from "./tooltip";
+export { default as Tour } from "./tour";
+export { default as Transfer } from "./transfer";
+export { default as Tree } from "./tree";
+export { default as TreeSelect } from "./tree-select";
+export { default as Typography } from "./typography";
+export { default as Upload } from "./upload";
+export { default as version } from "./version";

package/es/input/ClearableLabeledInput.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import type { DirectionType } from '../config-provider';
+import type { SizeType } from '../config-provider/SizeContext';
+import type { FormItemStatusContextProps } from '../form/context';
+import type { InputStatus } from '../_util/statusUtils';
+declare const ClearableInputType: ["text", "input"];
+/** This basic props required for input and textarea. */
+interface BasicProps {
+    prefixCls: string;
+    inputType: typeof ClearableInputType[number];
+    value?: any;
+    allowClear?: boolean;
+    element: React.ReactElement;
+    handleReset: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    className?: string;
+    style?: React.CSSProperties;
+    disabled?: boolean;
+    direction?: DirectionType;
+    focused?: boolean;
+    readOnly?: boolean;
+    bordered: boolean;
+    hidden?: boolean;
+}
+/** This props only for input. */
+export interface ClearableInputProps extends BasicProps {
+    size?: SizeType;
+    suffix?: React.ReactNode;
+    prefix?: React.ReactNode;
+    addonBefore?: React.ReactNode;
+    addonAfter?: React.ReactNode;
+    triggerFocus?: () => void;
+    status?: InputStatus;
+    hashId?: string;
+}
+declare class ClearableLabeledInput extends React.Component<ClearableInputProps> {
+    renderClearIcon(prefixCls: string): JSX.Element;
+    renderTextAreaWithClearIcon(prefixCls: string, element: React.ReactElement, statusContext: FormItemStatusContextProps): JSX.Element;
+    render(): JSX.Element;
+}
+export default ClearableLabeledInput;

package/es/input/ClearableLabeledInput.js

@@ -0,0 +1,109 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import CloseCircleFilled from "@ant-design/icons/es/icons/CloseCircleFilled";
+import classNames from 'classnames';
+import * as React from 'react';
+import { FormItemInputContext } from "../form/context";
+import { cloneElement } from "../_util/reactNode";
+import { getMergedStatus, getStatusClassNames } from "../_util/statusUtils";
+import { tuple } from "../_util/type";
+var ClearableInputType = tuple('text', 'input');
+
+function hasAddon(props) {
+  return !!(props.addonBefore || props.addonAfter);
+}
+
+var ClearableLabeledInput = /*#__PURE__*/function (_React$Component) {
+  _inherits(ClearableLabeledInput, _React$Component);
+
+  var _super = _createSuper(ClearableLabeledInput);
+
+  function ClearableLabeledInput() {
+    _classCallCheck(this, ClearableLabeledInput);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(ClearableLabeledInput, [{
+    key: "renderClearIcon",
+    value: function renderClearIcon(prefixCls) {
+      var _classNames;
+
+      var _this$props = this.props,
+          value = _this$props.value,
+          disabled = _this$props.disabled,
+          readOnly = _this$props.readOnly,
+          handleReset = _this$props.handleReset,
+          suffix = _this$props.suffix;
+      var needClear = !disabled && !readOnly && value;
+      var className = prefixCls + "-clear-icon";
+      return /*#__PURE__*/React.createElement(CloseCircleFilled, {
+        onClick: handleReset,
+        // Do not trigger onBlur when clear input
+        // https://github.com/ant-design/ant-design/issues/31200
+        onMouseDown: function onMouseDown(e) {
+          return e.preventDefault();
+        },
+        className: classNames((_classNames = {}, _defineProperty(_classNames, className + "-hidden", !needClear), _defineProperty(_classNames, className + "-has-suffix", !!suffix), _classNames), className),
+        role: "button"
+      });
+    }
+  }, {
+    key: "renderTextAreaWithClearIcon",
+    value: function renderTextAreaWithClearIcon(prefixCls, element, statusContext) {
+      var _classNames2;
+
+      var _this$props2 = this.props,
+          value = _this$props2.value,
+          allowClear = _this$props2.allowClear,
+          className = _this$props2.className,
+          style = _this$props2.style,
+          direction = _this$props2.direction,
+          bordered = _this$props2.bordered,
+          hidden = _this$props2.hidden,
+          customStatus = _this$props2.status,
+          hashId = _this$props2.hashId;
+      var contextStatus = statusContext.status,
+          hasFeedback = statusContext.hasFeedback;
+
+      if (!allowClear) {
+        return cloneElement(element, {
+          value: value
+        });
+      }
+
+      var affixWrapperCls = classNames(prefixCls + "-affix-wrapper", prefixCls + "-affix-wrapper-textarea-with-clear-btn", getStatusClassNames(prefixCls + "-affix-wrapper", getMergedStatus(contextStatus, customStatus), hasFeedback), (_classNames2 = {}, _defineProperty(_classNames2, prefixCls + "-affix-wrapper-rtl", direction === 'rtl'), _defineProperty(_classNames2, prefixCls + "-affix-wrapper-borderless", !bordered), _defineProperty(_classNames2, "" + className, !hasAddon(this.props) && className), _classNames2), hashId);
+      return /*#__PURE__*/React.createElement("span", {
+        className: affixWrapperCls,
+        style: style,
+        hidden: hidden
+      }, cloneElement(element, {
+        style: null,
+        value: value
+      }), this.renderClearIcon(prefixCls));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this = this;
+
+      return /*#__PURE__*/React.createElement(FormItemInputContext.Consumer, null, function (statusContext) {
+        var _this$props3 = _this.props,
+            prefixCls = _this$props3.prefixCls,
+            inputType = _this$props3.inputType,
+            element = _this$props3.element;
+
+        if (inputType === ClearableInputType[0]) {
+          return _this.renderTextAreaWithClearIcon(prefixCls, element, statusContext);
+        }
+      });
+    }
+  }]);
+
+  return ClearableLabeledInput;
+}(React.Component);
+
+export default ClearableLabeledInput;

package/es/input/Group.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+export interface GroupProps {
+    className?: string;
+    size?: 'large' | 'small' | 'default';
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+    onMouseEnter?: React.MouseEventHandler<HTMLSpanElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLSpanElement>;
+    onFocus?: React.FocusEventHandler<HTMLSpanElement>;
+    onBlur?: React.FocusEventHandler<HTMLSpanElement>;
+    prefixCls?: string;
+    compact?: boolean;
+}
+declare const Group: React.FC<GroupProps>;
+export default Group;

package/es/input/Group.js

@@ -0,0 +1,48 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import classNames from 'classnames';
+import * as React from 'react';
+import { useContext, useMemo } from 'react';
+import { ConfigContext } from "../config-provider";
+import { FormItemInputContext } from "../form/context";
+import useStyle from "./style";
+
+var Group = function Group(props) {
+  var _classNames;
+
+  var _useContext = useContext(ConfigContext),
+      getPrefixCls = _useContext.getPrefixCls,
+      direction = _useContext.direction;
+
+  var customizePrefixCls = props.prefixCls,
+      _props$className = props.className,
+      className = _props$className === void 0 ? '' : _props$className;
+  var prefixCls = getPrefixCls('input-group', customizePrefixCls);
+  var inputPrefixCls = getPrefixCls('input');
+
+  var _useStyle = useStyle(inputPrefixCls),
+      _useStyle2 = _slicedToArray(_useStyle, 2),
+      wrapSSR = _useStyle2[0],
+      hashId = _useStyle2[1];
+
+  var cls = classNames(prefixCls, (_classNames = {}, _defineProperty(_classNames, prefixCls + "-lg", props.size === 'large'), _defineProperty(_classNames, prefixCls + "-sm", props.size === 'small'), _defineProperty(_classNames, prefixCls + "-compact", props.compact), _defineProperty(_classNames, prefixCls + "-rtl", direction === 'rtl'), _classNames), hashId, className);
+  var formItemContext = useContext(FormItemInputContext);
+  var groupFormItemContext = useMemo(function () {
+    return _extends(_extends({}, formItemContext), {
+      isFormItemInput: false
+    });
+  }, [formItemContext]);
+  return wrapSSR( /*#__PURE__*/React.createElement("span", {
+    className: cls,
+    style: props.style,
+    onMouseEnter: props.onMouseEnter,
+    onMouseLeave: props.onMouseLeave,
+    onFocus: props.onFocus,
+    onBlur: props.onBlur
+  }, /*#__PURE__*/React.createElement(FormItemInputContext.Provider, {
+    value: groupFormItemContext
+  }, props.children)));
+};
+
+export default Group;

package/es/input/Input.d.ts

@@ -0,0 +1,20 @@
+import type { InputProps as RcInputProps, InputRef } from 'rc-input';
+import React from 'react';
+import type { SizeType } from '../config-provider/SizeContext';
+import type { InputStatus } from '../_util/statusUtils';
+export interface InputFocusOptions extends FocusOptions {
+    cursor?: 'start' | 'end' | 'all';
+}
+export type { InputRef };
+export declare function fixControlledValue<T>(value: T): string;
+export declare function resolveOnChange<E extends HTMLInputElement | HTMLTextAreaElement>(target: E, e: React.ChangeEvent<E> | React.MouseEvent<HTMLElement, MouseEvent> | React.CompositionEvent<HTMLElement>, onChange: undefined | ((event: React.ChangeEvent<E>) => void), targetValue?: string): void;
+export declare function triggerFocus(element?: HTMLInputElement | HTMLTextAreaElement, option?: InputFocusOptions): void;
+export interface InputProps extends Omit<RcInputProps, 'wrapperClassName' | 'groupClassName' | 'inputClassName' | 'affixWrapperClassName'> {
+    size?: SizeType;
+    disabled?: boolean;
+    status?: InputStatus;
+    bordered?: boolean;
+    [key: `data-${string}`]: string | undefined;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>>;
+export default Input;