@vkontakte/vkui 5.0.0 → 5.0.1

package/dist/cjs/components/FocusTrap/FocusTrap.js

@@ -1,111 +1,90 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FocusTrap = void 0;
-
-var _jsxRuntime = require("../../lib/jsxRuntime");
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _useExternRef = require("../../hooks/useExternRef");
-
 var _useGlobalEventListener = require("../../hooks/useGlobalEventListener");
-
 var _useTimeout = require("../../hooks/useTimeout");
-
 var _accessibility = require("../../lib/accessibility");
-
 var _dom = require("../../lib/dom");
-
 var _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
-
 var _AppRootContext = require("../AppRoot/AppRootContext");
-
 var _excluded = ["Component", "onClose", "restoreFocus", "timeout", "getRootRef", "children"];
-
 var FOCUSABLE_ELEMENTS = _accessibility.FOCUSABLE_ELEMENTS_LIST.join();
-
 /**
  * @see https://vkcom.github.io/VKUI/#/FocusTrap
  */
 var FocusTrap = function FocusTrap(_ref) {
   var _ref$Component = _ref.Component,
-      Component = _ref$Component === void 0 ? "div" : _ref$Component,
-      onClose = _ref.onClose,
-      _ref$restoreFocus = _ref.restoreFocus,
-      restoreFocus = _ref$restoreFocus === void 0 ? true : _ref$restoreFocus,
-      _ref$timeout = _ref.timeout,
-      timeout = _ref$timeout === void 0 ? 0 : _ref$timeout,
-      getRootRef = _ref.getRootRef,
-      children = _ref.children,
-      restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    Component = _ref$Component === void 0 ? "div" : _ref$Component,
+    onClose = _ref.onClose,
+    _ref$restoreFocus = _ref.restoreFocus,
+    restoreFocus = _ref$restoreFocus === void 0 ? true : _ref$restoreFocus,
+    _ref$timeout = _ref.timeout,
+    timeout = _ref$timeout === void 0 ? 0 : _ref$timeout,
+    getRootRef = _ref.getRootRef,
+    children = _ref.children,
+    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var ref = (0, _useExternRef.useExternRef)(getRootRef);
-
   var _useDOM = (0, _dom.useDOM)(),
-      document = _useDOM.document,
-      window = _useDOM.window;
-
+    document = _useDOM.document,
+    window = _useDOM.window;
   var _React$useState = React.useState(null),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      focusableNodes = _React$useState2[0],
-      setFocusableNodes = _React$useState2[1];
-
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    focusableNodes = _React$useState2[0],
+    setFocusableNodes = _React$useState2[1];
   var _React$useState3 = React.useState(null),
-      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
-      restoreFocusTo = _React$useState4[0],
-      setRestoreFocusTo = _React$useState4[1]; // HANDLE TRAP MOUNT
+    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+    restoreFocusTo = _React$useState4[0],
+    setRestoreFocusTo = _React$useState4[1];
 
+  // HANDLE TRAP MOUNT
 
   var _React$useContext = React.useContext(_AppRootContext.AppRootContext),
-      keyboardInput = _React$useContext.keyboardInput;
-
+    keyboardInput = _React$useContext.keyboardInput;
   var focusOnTrapMount = (0, _useTimeout.useTimeout)(function () {
     var _ref$current;
-
     if (keyboardInput && !((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.contains(document.activeElement)) && focusableNodes !== null && focusableNodes !== void 0 && focusableNodes.length) {
       focusableNodes[0].focus();
     }
   }, timeout);
   (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
     focusOnTrapMount.set();
-  }, []); // HANDLE FOCUSABLE NODES
+  }, []);
+
+  // HANDLE FOCUSABLE NODES
 
   (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
     if (!ref.current) {
       return;
     }
-
     var nodes = [];
-    Array.prototype.forEach.call( // eslint-disable-next-line no-restricted-properties
+    Array.prototype.forEach.call(
+    // eslint-disable-next-line no-restricted-properties
     ref.current.querySelectorAll(FOCUSABLE_ELEMENTS), function (focusableEl) {
       var _getComputedStyle = window.getComputedStyle(focusableEl),
-          display = _getComputedStyle.display,
-          visibility = _getComputedStyle.visibility;
-
+        display = _getComputedStyle.display,
+        visibility = _getComputedStyle.visibility;
       if (display !== "none" && visibility !== "hidden") {
         nodes.push(focusableEl);
       }
     });
-
     if (nodes.length === 0) {
       // Чтобы фокус был хотя бы на родителе
       nodes.push(ref.current);
     }
-
     setFocusableNodes(nodes);
-  }, [children]); // HANDLE TRAP UNMOUNT
+  }, [children]);
+
+  // HANDLE TRAP UNMOUNT
 
   var focusOnTrapUnmount = (0, _useTimeout.useTimeout)(function () {
     if (restoreFocusTo) {
@@ -119,10 +98,8 @@ var FocusTrap = function FocusTrap(_ref) {
         focusOnTrapUnmount.set();
       };
     }
-
     return;
   }, [restoreFocus]);
-
   var onDocumentKeydown = function onDocumentKeydown(e) {
     if ((0, _accessibility.pressedKey)(e) === _accessibility.Keys.TAB && focusableNodes !== null && focusableNodes !== void 0 && focusableNodes.length) {
       var lastIdx = focusableNodes.length - 1;
@@ -130,34 +107,27 @@ var FocusTrap = function FocusTrap(_ref) {
         return node === e.target;
       });
       var shouldFocusFirstNode = targetIdx === -1 || targetIdx === lastIdx && !e.shiftKey;
-
       if (shouldFocusFirstNode || targetIdx === 0 && e.shiftKey) {
         e.preventDefault();
         var node = focusableNodes[shouldFocusFirstNode ? 0 : lastIdx];
-
         if (node !== document.activeElement) {
           node.focus();
         }
-
         return false;
       }
     }
-
     if (onClose && (0, _accessibility.pressedKey)(e) === _accessibility.Keys.ESCAPE) {
       onClose();
     }
-
     return true;
   };
-
   (0, _useGlobalEventListener.useGlobalEventListener)(document, "keydown", onDocumentKeydown, {
     capture: true
   });
-  return (0, _jsxRuntime.createScopedElement)(Component, (0, _extends2.default)({
+  return /*#__PURE__*/React.createElement(Component, (0, _extends2.default)({
     tabIndex: -1,
     ref: ref
   }, restProps), children);
 };
-
 exports.FocusTrap = FocusTrap;
 //# sourceMappingURL=FocusTrap.js.map

package/dist/cjs/components/FocusTrap/FocusTrap.js.map

@@ -1 +1 @@
-{"version":3,"file":"FocusTrap.js","names":["FOCUSABLE_ELEMENTS","FOCUSABLE_ELEMENTS_LIST","join","FocusTrap","Component","onClose","restoreFocus","timeout","getRootRef","children","restProps","ref","useExternRef","useDOM","document","window","React","useState","focusableNodes","setFocusableNodes","restoreFocusTo","setRestoreFocusTo","useContext","AppRootContext","keyboardInput","focusOnTrapMount","useTimeout","current","contains","activeElement","length","focus","useIsomorphicLayoutEffect","set","nodes","Array","prototype","forEach","call","querySelectorAll","focusableEl","getComputedStyle","display","visibility","push","focusOnTrapUnmount","onDocumentKeydown","e","pressedKey","Keys","TAB","lastIdx","targetIdx","findIndex","node","target","shouldFocusFirstNode","shiftKey","preventDefault","ESCAPE","useGlobalEventListener","capture"],"sources":["../../../../src/components/FocusTrap/FocusTrap.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useGlobalEventListener } from \"../../hooks/useGlobalEventListener\";\nimport { useTimeout } from \"../../hooks/useTimeout\";\nimport {\n  FOCUSABLE_ELEMENTS_LIST,\n  Keys,\n  pressedKey,\n} from \"../../lib/accessibility\";\nimport { useDOM } from \"../../lib/dom\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { HasComponent, HasRootRef } from \"../../types\";\nimport { AppRootContext } from \"../AppRoot/AppRootContext\";\n\nconst FOCUSABLE_ELEMENTS: string = FOCUSABLE_ELEMENTS_LIST.join();\n\nexport interface FocusTrapProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  restoreFocus?: boolean;\n  timeout?: number;\n  onClose?(): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FocusTrap\n */\nexport const FocusTrap = ({\n  Component = \"div\",\n  onClose,\n  restoreFocus = true,\n  timeout = 0,\n  getRootRef,\n  children,\n  ...restProps\n}: FocusTrapProps) => {\n  const ref = useExternRef<HTMLElement>(getRootRef);\n\n  const { document, window } = useDOM();\n\n  const [focusableNodes, setFocusableNodes] = React.useState<\n    HTMLElement[] | null\n  >(null);\n  const [restoreFocusTo, setRestoreFocusTo] =\n    React.useState<HTMLElement | null>(null);\n\n  // HANDLE TRAP MOUNT\n\n  const { keyboardInput } = React.useContext(AppRootContext);\n  const focusOnTrapMount = useTimeout(() => {\n    if (\n      keyboardInput &&\n      !ref.current?.contains(document!.activeElement) &&\n      focusableNodes?.length\n    ) {\n      focusableNodes[0].focus();\n    }\n  }, timeout);\n  useIsomorphicLayoutEffect(() => {\n    focusOnTrapMount.set();\n  }, []);\n\n  // HANDLE FOCUSABLE NODES\n\n  useIsomorphicLayoutEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n\n    const nodes: HTMLElement[] = [];\n    Array.prototype.forEach.call(\n      // eslint-disable-next-line no-restricted-properties\n      ref.current.querySelectorAll(FOCUSABLE_ELEMENTS),\n      (focusableEl: Element) => {\n        const { display, visibility } = window!.getComputedStyle(focusableEl);\n\n        if (display !== \"none\" && visibility !== \"hidden\") {\n          nodes.push(focusableEl as HTMLElement);\n        }\n      }\n    );\n\n    if (nodes.length === 0) {\n      // Чтобы фокус был хотя бы на родителе\n      nodes.push(ref.current);\n    }\n\n    setFocusableNodes(nodes);\n  }, [children]);\n\n  // HANDLE TRAP UNMOUNT\n\n  const focusOnTrapUnmount = useTimeout(() => {\n    if (restoreFocusTo) {\n      restoreFocusTo.focus();\n    }\n  }, timeout);\n  useIsomorphicLayoutEffect(() => {\n    if (restoreFocus && document!.activeElement) {\n      setRestoreFocusTo(document!.activeElement as HTMLElement);\n\n      return () => {\n        focusOnTrapUnmount.set();\n      };\n    }\n\n    return;\n  }, [restoreFocus]);\n\n  const onDocumentKeydown = (e: KeyboardEvent) => {\n    if (pressedKey(e) === Keys.TAB && focusableNodes?.length) {\n      const lastIdx = focusableNodes.length - 1;\n      const targetIdx = focusableNodes.findIndex((node) => node === e.target);\n\n      const shouldFocusFirstNode =\n        targetIdx === -1 || (targetIdx === lastIdx && !e.shiftKey);\n\n      if (shouldFocusFirstNode || (targetIdx === 0 && e.shiftKey)) {\n        e.preventDefault();\n\n        const node = focusableNodes[shouldFocusFirstNode ? 0 : lastIdx];\n\n        if (node !== document!.activeElement) {\n          node.focus();\n        }\n\n        return false;\n      }\n    }\n\n    if (onClose && pressedKey(e) === Keys.ESCAPE) {\n      onClose();\n    }\n\n    return true;\n  };\n  useGlobalEventListener(document, \"keydown\", onDocumentKeydown, {\n    capture: true,\n  });\n\n  return (\n    <Component tabIndex={-1} ref={ref} {...restProps}>\n      {children}\n    </Component>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"FocusTrap.js","names":["FOCUSABLE_ELEMENTS","FOCUSABLE_ELEMENTS_LIST","join","FocusTrap","Component","onClose","restoreFocus","timeout","getRootRef","children","restProps","ref","useExternRef","useDOM","document","window","React","useState","focusableNodes","setFocusableNodes","restoreFocusTo","setRestoreFocusTo","useContext","AppRootContext","keyboardInput","focusOnTrapMount","useTimeout","current","contains","activeElement","length","focus","useIsomorphicLayoutEffect","set","nodes","Array","prototype","forEach","call","querySelectorAll","focusableEl","getComputedStyle","display","visibility","push","focusOnTrapUnmount","onDocumentKeydown","e","pressedKey","Keys","TAB","lastIdx","targetIdx","findIndex","node","target","shouldFocusFirstNode","shiftKey","preventDefault","ESCAPE","useGlobalEventListener","capture"],"sources":["../../../../src/components/FocusTrap/FocusTrap.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useGlobalEventListener } from \"../../hooks/useGlobalEventListener\";\nimport { useTimeout } from \"../../hooks/useTimeout\";\nimport {\n  FOCUSABLE_ELEMENTS_LIST,\n  Keys,\n  pressedKey,\n} from \"../../lib/accessibility\";\nimport { useDOM } from \"../../lib/dom\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { HasComponent, HasRootRef } from \"../../types\";\nimport { AppRootContext } from \"../AppRoot/AppRootContext\";\n\nconst FOCUSABLE_ELEMENTS: string = FOCUSABLE_ELEMENTS_LIST.join();\nexport interface FocusTrapProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  restoreFocus?: boolean;\n  timeout?: number;\n  onClose?(): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FocusTrap\n */\nexport const FocusTrap = ({\n  Component = \"div\",\n  onClose,\n  restoreFocus = true,\n  timeout = 0,\n  getRootRef,\n  children,\n  ...restProps\n}: FocusTrapProps) => {\n  const ref = useExternRef<HTMLElement>(getRootRef);\n\n  const { document, window } = useDOM();\n\n  const [focusableNodes, setFocusableNodes] = React.useState<\n    HTMLElement[] | null\n  >(null);\n  const [restoreFocusTo, setRestoreFocusTo] =\n    React.useState<HTMLElement | null>(null);\n\n  // HANDLE TRAP MOUNT\n\n  const { keyboardInput } = React.useContext(AppRootContext);\n  const focusOnTrapMount = useTimeout(() => {\n    if (\n      keyboardInput &&\n      !ref.current?.contains(document!.activeElement) &&\n      focusableNodes?.length\n    ) {\n      focusableNodes[0].focus();\n    }\n  }, timeout);\n  useIsomorphicLayoutEffect(() => {\n    focusOnTrapMount.set();\n  }, []);\n\n  // HANDLE FOCUSABLE NODES\n\n  useIsomorphicLayoutEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n\n    const nodes: HTMLElement[] = [];\n    Array.prototype.forEach.call(\n      // eslint-disable-next-line no-restricted-properties\n      ref.current.querySelectorAll(FOCUSABLE_ELEMENTS),\n      (focusableEl: Element) => {\n        const { display, visibility } = window!.getComputedStyle(focusableEl);\n\n        if (display !== \"none\" && visibility !== \"hidden\") {\n          nodes.push(focusableEl as HTMLElement);\n        }\n      }\n    );\n\n    if (nodes.length === 0) {\n      // Чтобы фокус был хотя бы на родителе\n      nodes.push(ref.current);\n    }\n\n    setFocusableNodes(nodes);\n  }, [children]);\n\n  // HANDLE TRAP UNMOUNT\n\n  const focusOnTrapUnmount = useTimeout(() => {\n    if (restoreFocusTo) {\n      restoreFocusTo.focus();\n    }\n  }, timeout);\n  useIsomorphicLayoutEffect(() => {\n    if (restoreFocus && document!.activeElement) {\n      setRestoreFocusTo(document!.activeElement as HTMLElement);\n\n      return () => {\n        focusOnTrapUnmount.set();\n      };\n    }\n\n    return;\n  }, [restoreFocus]);\n\n  const onDocumentKeydown = (e: KeyboardEvent) => {\n    if (pressedKey(e) === Keys.TAB && focusableNodes?.length) {\n      const lastIdx = focusableNodes.length - 1;\n      const targetIdx = focusableNodes.findIndex((node) => node === e.target);\n\n      const shouldFocusFirstNode =\n        targetIdx === -1 || (targetIdx === lastIdx && !e.shiftKey);\n\n      if (shouldFocusFirstNode || (targetIdx === 0 && e.shiftKey)) {\n        e.preventDefault();\n\n        const node = focusableNodes[shouldFocusFirstNode ? 0 : lastIdx];\n\n        if (node !== document!.activeElement) {\n          node.focus();\n        }\n\n        return false;\n      }\n    }\n\n    if (onClose && pressedKey(e) === Keys.ESCAPE) {\n      onClose();\n    }\n\n    return true;\n  };\n  useGlobalEventListener(document, \"keydown\", onDocumentKeydown, {\n    capture: true,\n  });\n\n  return (\n    <Component tabIndex={-1} ref={ref} {...restProps}>\n      {children}\n    </Component>\n  );\n};\n"],"mappings":"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"}

package/dist/cjs/components/FocusVisible/FocusVisible.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare type FocusVisibleMode = "inside" | "outside";
+export interface FocusVisibleProps {
+    mode: FocusVisibleMode;
+}
+/**
+ * @see https://vkcom.github.io/VKUI/#/FocusVisible
+ */
+export declare const FocusVisible: ({ mode }: FocusVisibleProps) => JSX.Element;

package/dist/cjs/components/FocusVisible/FocusVisible.js

@@ -1,24 +1,25 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FocusVisible = void 0;
-
-var _jsxRuntime = require("../../lib/jsxRuntime");
-
+var React = _interopRequireWildcard(require("react"));
 var _classNames = require("../../lib/classNames");
-
 /**
  * @see https://vkcom.github.io/VKUI/#/FocusVisible
  */
 var FocusVisible = function FocusVisible(_ref) {
   var mode = _ref.mode;
-  return (0, _jsxRuntime.createScopedElement)("span", {
+  return /*#__PURE__*/React.createElement("span", {
     "aria-hidden": "true",
-    vkuiClass: (0, _classNames.classNames)("FocusVisible", "FocusVisible--mode-".concat(mode))
+    className: (0, _classNames.classNamesString)("vkuiFocusVisible", styles["FocusVisible--mode-".concat(mode)])
   });
 };
-
 exports.FocusVisible = FocusVisible;
+var styles = {
+  "FocusVisible--mode-outside": "vkuiFocusVisible--mode-outside",
+  "FocusVisible--mode-inside": "vkuiFocusVisible--mode-inside"
+};
 //# sourceMappingURL=FocusVisible.js.map

package/dist/cjs/components/FocusVisible/FocusVisible.js.map

@@ -1 +1 @@
-{"version":3,"file":"FocusVisible.js","names":["FocusVisible","mode","classNames"],"sources":["../../../../src/components/FocusVisible/FocusVisible.tsx"],"sourcesContent":["import { classNames } from \"../../lib/classNames\";\nimport \"./FocusVisible.css\";\n\nexport type FocusVisibleMode = \"inside\" | \"outside\";\n\nexport interface FocusVisibleProps {\n  mode: FocusVisibleMode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FocusVisible\n */\nexport const FocusVisible = ({ mode }: FocusVisibleProps) => (\n  <span\n    aria-hidden=\"true\"\n    vkuiClass={classNames(\"FocusVisible\", `FocusVisible--mode-${mode}`)}\n  />\n);\n"],"mappings":";;;;;;;;;AAAA;;AASA;AACA;AACA;AACO,IAAMA,YAAY,GAAG,SAAfA,YAAe;EAAA,IAAGC,IAAH,QAAGA,IAAH;EAAA,OAC1B;IACE,eAAY,MADd;IAEE,SAAS,EAAE,IAAAC,sBAAA,EAAW,cAAX,+BAAiDD,IAAjD;EAFb,EAD0B;AAAA,CAArB"}
+{"version":3,"file":"FocusVisible.js","names":["FocusVisible","mode","classNamesString","styles"],"sources":["../../../../src/components/FocusVisible/FocusVisible.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport styles from \"./FocusVisible.module.css\";\n\nexport type FocusVisibleMode = \"inside\" | \"outside\";\n\nexport interface FocusVisibleProps {\n  mode: FocusVisibleMode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FocusVisible\n */\nexport const FocusVisible = ({ mode }: FocusVisibleProps) => (\n  <span\n    aria-hidden=\"true\"\n    className={classNamesString(\n      styles[\"FocusVisible\"],\n      styles[`FocusVisible--mode-${mode}`]\n    )}\n  />\n);\n"],"mappings":";;;;;;;AAAA;AACA;AASA;AACA;AACA;AACO,IAAMA,YAAY,GAAG,SAAfA,YAAY;EAAA,IAAMC,IAAI,QAAJA,IAAI;EAAA,oBACjC;IACE,eAAY,MAAM;IAClB,SAAS,EAAE,IAAAC,4BAAgB,sBAEzBC,MAAM,8BAAuBF,IAAI,EAAG;EACpC,EACF;AAAA,CACH;AAAC;AAAA;EAAA;EAAA;AAAA"}

package/dist/cjs/components/Footer/Footer.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { HasComponent } from "../../types";
+export declare type FooterProps = React.AllHTMLAttributes<HTMLElement> & HasComponent;
+/**
+ * @see https://vkcom.github.io/VKUI/#/Footer
+ */
+export declare const Footer: ({ children, className, ...restProps }: FooterProps) => JSX.Element;

package/dist/cjs/components/Footer/Footer.js

@@ -1,34 +1,29 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Footer = void 0;
-
-var _jsxRuntime = require("../../lib/jsxRuntime");
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
+var React = _interopRequireWildcard(require("react"));
+var _classNames = require("../../lib/classNames");
 var _Footnote = require("../Typography/Footnote/Footnote");
-
-var _excluded = ["children"];
-
+var _excluded = ["children", "className"];
 /**
  * @see https://vkcom.github.io/VKUI/#/Footer
  */
 var Footer = function Footer(_ref) {
   var children = _ref.children,
-      restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return (0, _jsxRuntime.createScopedElement)(_Footnote.Footnote, (0, _extends2.default)({
+    className = _ref.className,
+    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(_Footnote.Footnote, (0, _extends2.default)({
     Component: "footer"
   }, restProps, {
-    vkuiClass: "Footer"
+    className: (0, _classNames.classNamesString)("vkuiFooter", className)
   }), children);
 };
-
 exports.Footer = Footer;
 //# sourceMappingURL=Footer.js.map

package/dist/cjs/components/Footer/Footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Footer.js","names":["Footer","children","restProps"],"sources":["../../../../src/components/Footer/Footer.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { HasComponent } from \"../../types\";\nimport { Footnote } from \"../Typography/Footnote/Footnote\";\nimport \"./Footer.css\";\n\nexport type FooterProps = React.AllHTMLAttributes<HTMLElement> & HasComponent;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Footer\n */\nexport const Footer = ({ children, ...restProps }: FooterProps) => {\n  return (\n    <Footnote Component=\"footer\" {...restProps} vkuiClass=\"Footer\">\n      {children}\n    </Footnote>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAEA;;;;AAKA;AACA;AACA;AACO,IAAMA,MAAM,GAAG,SAATA,MAAS,OAA6C;EAAA,IAA1CC,QAA0C,QAA1CA,QAA0C;EAAA,IAA7BC,SAA6B;EACjE,OACE,qCAAC,kBAAD;IAAU,SAAS,EAAC;EAApB,GAAiCA,SAAjC;IAA4C,SAAS,EAAC;EAAtD,IACGD,QADH,CADF;AAKD,CANM"}
+{"version":3,"file":"Footer.js","names":["Footer","children","className","restProps","classNamesString"],"sources":["../../../../src/components/Footer/Footer.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { HasComponent } from \"../../types\";\nimport { Footnote } from \"../Typography/Footnote/Footnote\";\nimport styles from \"./Footer.module.css\";\n\nexport type FooterProps = React.AllHTMLAttributes<HTMLElement> & HasComponent;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Footer\n */\nexport const Footer = ({ children, className, ...restProps }: FooterProps) => {\n  return (\n    <Footnote\n      Component=\"footer\"\n      {...restProps}\n      className={classNamesString(styles[\"Footer\"], className)}\n    >\n      {children}\n    </Footnote>\n  );\n};\n"],"mappings":";;;;;;;;;;AAAA;AACA;AAEA;AAA2D;AAK3D;AACA;AACA;AACO,IAAMA,MAAM,GAAG,SAATA,MAAM,OAA2D;EAAA,IAArDC,QAAQ,QAARA,QAAQ;IAAEC,SAAS,QAATA,SAAS;IAAKC,SAAS;EACxD,oBACE,oBAAC,kBAAQ;IACP,SAAS,EAAC;EAAQ,GACdA,SAAS;IACb,SAAS,EAAE,IAAAC,4BAAgB,gBAAmBF,SAAS;EAAE,IAExDD,QAAQ,CACA;AAEf,CAAC;AAAC"}

package/dist/cjs/components/FormField/FormField.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { HasComponent, HasRootRef } from "../../types";
+export interface FormFieldProps {
+    status?: "default" | "error" | "valid";
+    /**
+     * Добавляет иконку слева.
+     *
+     * Рекомендации:
+     *
+     * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.
+     * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.
+     */
+    before?: React.ReactNode;
+    /**
+     * Добавляет иконку справа.
+     *
+     * Рекомендации:
+     *
+     * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.
+     * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.
+     */
+    after?: React.ReactNode;
+    mode?: "default" | "plain";
+}
+interface FormFieldOwnProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement>, HasComponent, FormFieldProps {
+    disabled?: boolean;
+}
+/**
+ * @see https://vkcom.github.io/VKUI/#/FormField
+ */
+export declare const FormField: ({ Component, status, children, getRootRef, before, after, disabled, mode, className, ...restProps }: FormFieldOwnProps) => JSX.Element;
+export {};

package/dist/cjs/components/FormField/FormField.js

@@ -1,85 +1,74 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FormField = void 0;
-
-var _jsxRuntime = require("../../lib/jsxRuntime");
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _classNames = require("../../lib/classNames");
-
 var _useAdaptivity2 = require("../../hooks/useAdaptivity");
-
 var _getSizeYClassName = require("../../helpers/getSizeYClassName");
-
-var _excluded = ["Component", "status", "children", "getRootRef", "before", "after", "disabled", "mode"];
-
+var _excluded = ["Component", "status", "children", "getRootRef", "before", "after", "disabled", "mode", "className"];
 /**
  * @see https://vkcom.github.io/VKUI/#/FormField
  */
 var FormField = function FormField(_ref) {
   var _ref$Component = _ref.Component,
-      Component = _ref$Component === void 0 ? "div" : _ref$Component,
-      _ref$status = _ref.status,
-      status = _ref$status === void 0 ? "default" : _ref$status,
-      children = _ref.children,
-      getRootRef = _ref.getRootRef,
-      before = _ref.before,
-      after = _ref.after,
-      disabled = _ref.disabled,
-      _ref$mode = _ref.mode,
-      mode = _ref$mode === void 0 ? "default" : _ref$mode,
-      restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-
+    Component = _ref$Component === void 0 ? "div" : _ref$Component,
+    _ref$status = _ref.status,
+    status = _ref$status === void 0 ? "default" : _ref$status,
+    children = _ref.children,
+    getRootRef = _ref.getRootRef,
+    before = _ref.before,
+    after = _ref.after,
+    disabled = _ref.disabled,
+    _ref$mode = _ref.mode,
+    mode = _ref$mode === void 0 ? "default" : _ref$mode,
+    className = _ref.className,
+    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
-      sizeY = _useAdaptivity.sizeY;
-
+    sizeY = _useAdaptivity.sizeY;
   var _React$useState = React.useState(false),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      hover = _React$useState2[0],
-      setHover = _React$useState2[1];
-
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    hover = _React$useState2[0],
+    setHover = _React$useState2[1];
   var handleMouseEnter = function handleMouseEnter(e) {
     e.stopPropagation();
     setHover(true);
   };
-
   var handleMouseLeave = function handleMouseLeave(e) {
     e.stopPropagation();
     setHover(false);
   };
-
-  return (0, _jsxRuntime.createScopedElement)(Component, (0, _extends2.default)({
+  return /*#__PURE__*/React.createElement(Component, (0, _extends2.default)({
     role: "presentation"
   }, restProps, {
     ref: getRootRef,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
-    vkuiClass: (0, _classNames.classNames)("FormField", "FormField--mode-".concat(mode), "FormField--status-".concat(status), (0, _getSizeYClassName.getSizeYClassName)("FormField", sizeY), disabled && "FormField--disabled", !disabled && hover && "FormField--hover")
-  }), before && (0, _jsxRuntime.createScopedElement)("div", {
+    className: (0, _classNames.classNamesString)("vkuiFormField", styles["FormField--mode-".concat(mode)], styles["FormField--status-".concat(status)], (0, _getSizeYClassName.getSizeYClassName)("vkuiFormField", sizeY), disabled && "vkuiFormField--disabled", !disabled && hover && "vkuiFormField--hover", className)
+  }), before && /*#__PURE__*/React.createElement("div", {
     role: "presentation",
-    vkuiClass: "FormField__before"
-  }, before), children, after && (0, _jsxRuntime.createScopedElement)("div", {
+    className: "vkuiFormField__before"
+  }, before), children, after && /*#__PURE__*/React.createElement("div", {
     role: "presentation",
-    vkuiClass: "FormField__after"
-  }, after), (0, _jsxRuntime.createScopedElement)("div", {
+    className: "vkuiFormField__after"
+  }, after), /*#__PURE__*/React.createElement("div", {
     role: "presentation",
-    vkuiClass: "FormField__border"
+    className: "vkuiFormField__border"
   }));
 };
-
 exports.FormField = FormField;
+var styles = {
+  "FormField--mode-default": "vkuiFormField--mode-default",
+  "FormField--mode-plain": "vkuiFormField--mode-plain",
+  "FormField--status-error": "vkuiFormField--status-error",
+  "FormField--status-valid": "vkuiFormField--status-valid",
+  "FormField--status-default": "vkuiFormField--status-default"
+};
 //# sourceMappingURL=FormField.js.map

package/dist/cjs/components/FormField/FormField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","names":["FormField","Component","status","children","getRootRef","before","after","disabled","mode","restProps","useAdaptivity","sizeY","React","useState","hover","setHover","handleMouseEnter","e","stopPropagation","handleMouseLeave","classNames","getSizeYClassName"],"sources":["../../../../src/components/FormField/FormField.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { HasComponent, HasRootRef } from \"../../types\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport \"./FormField.css\";\n\nexport interface FormFieldProps {\n  status?: \"default\" | \"error\" | \"valid\";\n  /**\n   * Добавляет иконку слева.\n   *\n   * Рекомендации:\n   *\n   * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.\n   * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Рекомендации:\n   *\n   * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.\n   * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n   */\n  after?: React.ReactNode;\n  mode?: \"default\" | \"plain\";\n}\n\ninterface FormFieldOwnProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    FormFieldProps {\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormField\n */\nexport const FormField = ({\n  Component = \"div\",\n  status = \"default\",\n  children,\n  getRootRef,\n  before,\n  after,\n  disabled,\n  mode = \"default\",\n  ...restProps\n}: FormFieldOwnProps) => {\n  const { sizeY } = useAdaptivity();\n  const [hover, setHover] = React.useState(false);\n\n  const handleMouseEnter = (e: MouseEvent) => {\n    e.stopPropagation();\n    setHover(true);\n  };\n\n  const handleMouseLeave = (e: MouseEvent) => {\n    e.stopPropagation();\n    setHover(false);\n  };\n\n  return (\n    <Component\n      role=\"presentation\"\n      {...restProps}\n      ref={getRootRef}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      vkuiClass={classNames(\n        \"FormField\",\n        `FormField--mode-${mode}`,\n        `FormField--status-${status}`,\n        getSizeYClassName(\"FormField\", sizeY),\n        disabled && \"FormField--disabled\",\n        !disabled && hover && \"FormField--hover\"\n      )}\n    >\n      {before && (\n        <div role=\"presentation\" vkuiClass=\"FormField__before\">\n          {before}\n        </div>\n      )}\n      {children}\n      {after && (\n        <div role=\"presentation\" vkuiClass=\"FormField__after\">\n          {after}\n        </div>\n      )}\n      <div role=\"presentation\" vkuiClass=\"FormField__border\" />\n    </Component>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;AAkCA;AACA;AACA;AACO,IAAMA,SAAS,GAAG,SAAZA,SAAY,OAUA;EAAA,0BATvBC,SASuB;EAAA,IATvBA,SASuB,+BATX,KASW;EAAA,uBARvBC,MAQuB;EAAA,IARvBA,MAQuB,4BARd,SAQc;EAAA,IAPvBC,QAOuB,QAPvBA,QAOuB;EAAA,IANvBC,UAMuB,QANvBA,UAMuB;EAAA,IALvBC,MAKuB,QALvBA,MAKuB;EAAA,IAJvBC,KAIuB,QAJvBA,KAIuB;EAAA,IAHvBC,QAGuB,QAHvBA,QAGuB;EAAA,qBAFvBC,IAEuB;EAAA,IAFvBA,IAEuB,0BAFhB,SAEgB;EAAA,IADpBC,SACoB;;EACvB,qBAAkB,IAAAC,6BAAA,GAAlB;EAAA,IAAQC,KAAR,kBAAQA,KAAR;;EACA,sBAA0BC,KAAK,CAACC,QAAN,CAAe,KAAf,CAA1B;EAAA;EAAA,IAAOC,KAAP;EAAA,IAAcC,QAAd;;EAEA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,CAAD,EAAmB;IAC1CA,CAAC,CAACC,eAAF;IACAH,QAAQ,CAAC,IAAD,CAAR;EACD,CAHD;;EAKA,IAAMI,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACF,CAAD,EAAmB;IAC1CA,CAAC,CAACC,eAAF;IACAH,QAAQ,CAAC,KAAD,CAAR;EACD,CAHD;;EAKA,OACE,qCAAC,SAAD;IACE,IAAI,EAAC;EADP,GAEMN,SAFN;IAGE,GAAG,EAAEL,UAHP;IAIE,YAAY,EAAEY,gBAJhB;IAKE,YAAY,EAAEG,gBALhB;IAME,SAAS,EAAE,IAAAC,sBAAA,EACT,WADS,4BAEUZ,IAFV,+BAGYN,MAHZ,GAIT,IAAAmB,oCAAA,EAAkB,WAAlB,EAA+BV,KAA/B,CAJS,EAKTJ,QAAQ,IAAI,qBALH,EAMT,CAACA,QAAD,IAAaO,KAAb,IAAsB,kBANb;EANb,IAeGT,MAAM,IACL;IAAK,IAAI,EAAC,cAAV;IAAyB,SAAS,EAAC;EAAnC,GACGA,MADH,CAhBJ,EAoBGF,QApBH,EAqBGG,KAAK,IACJ;IAAK,IAAI,EAAC,cAAV;IAAyB,SAAS,EAAC;EAAnC,GACGA,KADH,CAtBJ,EA0BE;IAAK,IAAI,EAAC,cAAV;IAAyB,SAAS,EAAC;EAAnC,EA1BF,CADF;AA8BD,CAtDM"}
+{"version":3,"file":"FormField.js","names":["FormField","Component","status","children","getRootRef","before","after","disabled","mode","className","restProps","useAdaptivity","sizeY","React","useState","hover","setHover","handleMouseEnter","e","stopPropagation","handleMouseLeave","classNamesString","styles","getSizeYClassName"],"sources":["../../../../src/components/FormField/FormField.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { HasComponent, HasRootRef } from \"../../types\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport styles from \"./FormField.module.css\";\n\nexport interface FormFieldProps {\n  status?: \"default\" | \"error\" | \"valid\";\n  /**\n   * Добавляет иконку слева.\n   *\n   * Рекомендации:\n   *\n   * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.\n   * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Рекомендации:\n   *\n   * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.\n   * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n   */\n  after?: React.ReactNode;\n  mode?: \"default\" | \"plain\";\n}\n\ninterface FormFieldOwnProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    FormFieldProps {\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormField\n */\nexport const FormField = ({\n  Component = \"div\",\n  status = \"default\",\n  children,\n  getRootRef,\n  before,\n  after,\n  disabled,\n  mode = \"default\",\n  className,\n  ...restProps\n}: FormFieldOwnProps) => {\n  const { sizeY } = useAdaptivity();\n  const [hover, setHover] = React.useState(false);\n\n  const handleMouseEnter = (e: MouseEvent) => {\n    e.stopPropagation();\n    setHover(true);\n  };\n\n  const handleMouseLeave = (e: MouseEvent) => {\n    e.stopPropagation();\n    setHover(false);\n  };\n\n  return (\n    <Component\n      role=\"presentation\"\n      {...restProps}\n      ref={getRootRef}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      className={classNamesString(\n        styles[\"FormField\"],\n        styles[`FormField--mode-${mode}`],\n        styles[`FormField--status-${status}`],\n        getSizeYClassName(styles[\"FormField\"], sizeY),\n        disabled && styles[\"FormField--disabled\"],\n        !disabled && hover && styles[\"FormField--hover\"],\n        className\n      )}\n    >\n      {before && (\n        <div role=\"presentation\" className={styles[\"FormField__before\"]}>\n          {before}\n        </div>\n      )}\n      {children}\n      {after && (\n        <div role=\"presentation\" className={styles[\"FormField__after\"]}>\n          {after}\n        </div>\n      )}\n      <div role=\"presentation\" className={styles[\"FormField__border\"]} />\n    </Component>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AAEA;AACA;AAAoE;AAkCpE;AACA;AACA;AACO,IAAMA,SAAS,GAAG,SAAZA,SAAS,OAWG;EAAA,0BAVvBC,SAAS;IAATA,SAAS,+BAAG,KAAK;IAAA,mBACjBC,MAAM;IAANA,MAAM,4BAAG,SAAS;IAClBC,QAAQ,QAARA,QAAQ;IACRC,UAAU,QAAVA,UAAU;IACVC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IAAA,iBACRC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAChBC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,qBAAkB,IAAAC,6BAAa,GAAE;IAAzBC,KAAK,kBAALA,KAAK;EACb,sBAA0BC,KAAK,CAACC,QAAQ,CAAC,KAAK,CAAC;IAAA;IAAxCC,KAAK;IAAEC,QAAQ;EAEtB,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,CAAIC,CAAa,EAAK;IAC1CA,CAAC,CAACC,eAAe,EAAE;IACnBH,QAAQ,CAAC,IAAI,CAAC;EAChB,CAAC;EAED,IAAMI,gBAAgB,GAAG,SAAnBA,gBAAgB,CAAIF,CAAa,EAAK;IAC1CA,CAAC,CAACC,eAAe,EAAE;IACnBH,QAAQ,CAAC,KAAK,CAAC;EACjB,CAAC;EAED,oBACE,oBAAC,SAAS;IACR,IAAI,EAAC;EAAc,GACfN,SAAS;IACb,GAAG,EAAEN,UAAW;IAChB,YAAY,EAAEa,gBAAiB;IAC/B,YAAY,EAAEG,gBAAiB;IAC/B,SAAS,EAAE,IAAAC,4BAAgB,mBAEzBC,MAAM,2BAAoBd,IAAI,EAAG,EACjCc,MAAM,6BAAsBpB,MAAM,EAAG,EACrC,IAAAqB,oCAAiB,mBAAsBX,KAAK,CAAC,EAC7CL,QAAQ,6BAAiC,EACzC,CAACA,QAAQ,IAAIQ,KAAK,0BAA8B,EAChDN,SAAS;EACT,IAEDJ,MAAM,iBACL;IAAK,IAAI,EAAC,cAAc;IAAC,SAAS;EAA8B,GAC7DA,MAAM,CAEV,EACAF,QAAQ,EACRG,KAAK,iBACJ;IAAK,IAAI,EAAC,cAAc;IAAC,SAAS;EAA6B,GAC5DA,KAAK,CAET,eACD;IAAK,IAAI,EAAC,cAAc;IAAC,SAAS;EAA8B,EAAG,CACzD;AAEhB,CAAC;AAAC;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}

package/dist/cjs/components/FormItem/FormItem.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { HasComponent, HasRootRef } from "../../types";
+import { RemovableProps } from "../Removable/Removable";
+export interface FormItemProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement>, HasComponent, RemovableProps {
+    top?: React.ReactNode;
+    bottom?: React.ReactNode;
+    status?: "default" | "error" | "valid";
+    /**
+     * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.
+     */
+    removable?: boolean;
+}
+/**
+ * @see https://vkcom.github.io/VKUI/#/FormItem
+ */
+export declare const FormItem: ({ children, top, bottom, status, Component, removable, onRemove, removePlaceholder, getRootRef, className, ...restProps }: FormItemProps) => JSX.Element;