@astral/ui 4.17.4 → 4.17.6

package/node/hook-form/EditableText/EditingForm/styles.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
-export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+export declare const Wrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Description: import("@emotion/styled").StyledComponent<{
+export declare const Description: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     children?: import("react").ReactNode;
-    align?: "left" | "right" | "inherit" | "center" | "justify" | undefined;
+    align?: "inherit" | "left" | "right" | "center" | "justify" | undefined;
     gutterBottom?: boolean | undefined;
     noWrap?: boolean | undefined;
     paragraph?: boolean | undefined;
@@ -13,12 +13,12 @@ export declare const Description: import("@emotion/styled").StyledComponent<{
     color?: import("../../../components/Typography").TypographyColor | undefined;
     variant?: import("../../../components/Typography").TypographyVariant | undefined;
     colorIntensity?: import("../../../components/Typography").Intensity | undefined;
-    component?: ("symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "clipPath" | "filter" | "marker" | "mask" | "center" | "text" | "big" | "keygen" | "menuitem" | "noindex" | "param" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentType<any>) | undefined;
+    component?: ("symbol" | "object" | "main" | "body" | "small" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "caption" | "button" | "link" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "br" | "canvas" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "map" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "clipPath" | "filter" | "marker" | "mask" | "center" | "text" | "big" | "keygen" | "menuitem" | "noindex" | "param" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentType<any>) | undefined;
     isUpperCase?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
-export declare const FormFooter: import("@emotion/styled").StyledComponent<{
+export declare const FormFooter: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;

package/node/hook-form/EditableText/EditingForm/styles.js

@@ -1,16 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormFooter = exports.Description = exports.Wrapper = void 0;
-const styles_1 = require("../../../components/styles");
+const styled_1 = require("../../../components/styled");
 const Typography_1 = require("../../../components/Typography");
-exports.Wrapper = styles_1.styled.div `
+exports.Wrapper = styled_1.styled.div `
   width: 400px;
   padding: ${({ theme }) => theme.spacing(4)};
 `;
-exports.Description = (0, styles_1.styled)(Typography_1.Typography) `
+exports.Description = (0, styled_1.styled)(Typography_1.Typography) `
   margin-bottom: ${({ theme }) => theme.spacing(3)};
 `;
-exports.FormFooter = styles_1.styled.footer `
+exports.FormFooter = styled_1.styled.footer `
   display: flex;
   gap: ${({ theme }) => theme.spacing(3)};
   justify-content: end;

package/node/hook-form/EditableText/styles.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-export declare const DisplayValue: import("@emotion/styled").StyledComponent<{
+export declare const DisplayValue: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     children?: import("react").ReactNode;
-    align?: "left" | "right" | "inherit" | "center" | "justify" | undefined;
+    align?: "inherit" | "left" | "right" | "center" | "justify" | undefined;
     gutterBottom?: boolean | undefined;
     noWrap?: boolean | undefined;
     paragraph?: boolean | undefined;
@@ -9,7 +9,7 @@ export declare const DisplayValue: import("@emotion/styled").StyledComponent<{
     color?: import("../../components/Typography").TypographyColor | undefined;
     variant?: import("../../components/Typography").TypographyVariant | undefined;
     colorIntensity?: import("../../components/Typography").Intensity | undefined;
-    component?: ("symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "clipPath" | "filter" | "marker" | "mask" | "center" | "text" | "big" | "keygen" | "menuitem" | "noindex" | "param" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentType<any>) | undefined;
+    component?: ("symbol" | "object" | "main" | "body" | "small" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "caption" | "button" | "link" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "br" | "canvas" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "map" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "clipPath" | "filter" | "marker" | "mask" | "center" | "text" | "big" | "keygen" | "menuitem" | "noindex" | "param" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentType<any>) | undefined;
     isUpperCase?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
@@ -17,7 +17,7 @@ export declare const DisplayValue: import("@emotion/styled").StyledComponent<{
     $isEdited?: boolean | undefined;
     $isLoading?: boolean | undefined;
 }, {}, {}>;
-export declare const StyledEditIcon: import("@emotion/styled").StyledComponent<{
+export declare const StyledEditIcon: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     children?: import("react").ReactNode;
     color?: string | undefined;
     titleAccess?: string | undefined;
@@ -27,12 +27,12 @@ export declare const StyledEditIcon: import("@emotion/styled").StyledComponent<{
 } & {
     $iconPosition: 'left' | 'right';
 }, {}, {}>;
-export declare const StyledLoader: import("@emotion/styled").StyledComponent<import("../../components/Loader").LoaderProps & {
+export declare const StyledLoader: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../../components/Loader").LoaderProps & {
     theme?: import("@emotion/react").Theme | undefined;
 } & {
     $iconPosition: 'left' | 'right';
 }, {}, {}>;
-export declare const StyledPopover: import("@emotion/styled").StyledComponent<import("../..").WithoutEmotionSpecific<import("@mui/material").PopoverProps> & {
+export declare const StyledPopover: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../..").WithoutEmotionSpecific<import("@mui/material").PopoverProps> & {
     title?: string | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;

package/node/hook-form/EditableText/styles.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledPopover = exports.StyledLoader = exports.StyledEditIcon = exports.DisplayValue = void 0;
 const Loader_1 = require("../../components/Loader");
 const Popover_1 = require("../../components/Popover");
-const styles_1 = require("../../components/styles");
+const styled_1 = require("../../components/styled");
 const Typography_1 = require("../../components/Typography");
 const icons_1 = require("../../icons");
 const getBackgroundColor = (theme, $isEdited, $isLoading) => {
@@ -15,7 +15,7 @@ const getBackgroundColor = (theme, $isEdited, $isLoading) => {
     }
     return 'transparent';
 };
-exports.DisplayValue = (0, styles_1.styled)(Typography_1.Typography, {
+exports.DisplayValue = (0, styled_1.styled)(Typography_1.Typography, {
     shouldForwardProp: (prop) => !['$isEdited', '$isLoading'].includes(prop),
 }) `
   cursor: pointer;
@@ -38,7 +38,7 @@ exports.DisplayValue = (0, styles_1.styled)(Typography_1.Typography, {
     text-decoration: ${({ $isLoading }) => $isLoading ? 'inherit' : 'underline'};
   }
 `;
-exports.StyledEditIcon = (0, styles_1.styled)(icons_1.EditOutlineMd, {
+exports.StyledEditIcon = (0, styled_1.styled)(icons_1.EditOutlineMd, {
     shouldForwardProp: (prop) => !['$iconPosition'].includes(prop),
 }) `
   width: auto;
@@ -53,7 +53,7 @@ exports.StyledEditIcon = (0, styles_1.styled)(icons_1.EditOutlineMd, {
 
   font-size: inherit;
 `;
-exports.StyledLoader = (0, styles_1.styled)(Loader_1.Loader, {
+exports.StyledLoader = (0, styled_1.styled)(Loader_1.Loader, {
     shouldForwardProp: (prop) => !['$iconPosition'].includes(prop),
 }) `
   width: 1em;
@@ -68,6 +68,6 @@ exports.StyledLoader = (0, styles_1.styled)(Loader_1.Loader, {
 
   font-size: inherit;
 `;
-exports.StyledPopover = (0, styles_1.styled)(Popover_1.Popover) `
+exports.StyledPopover = (0, styled_1.styled)(Popover_1.Popover) `
   margin-top: ${({ theme }) => theme.spacing(2)};
 `;

package/node/hook-form/Form/styles.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-export declare const Backdrop: import("@emotion/styled").StyledComponent<{
+export declare const Backdrop: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledForm: import("@emotion/styled").StyledComponent<{
+export declare const StyledForm: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, {}>;

package/node/hook-form/Form/styles.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledForm = exports.Backdrop = void 0;
-const styles_1 = require("../../components/styles");
-exports.Backdrop = styles_1.styled.div `
+const styled_1 = require("../../components/styled");
+exports.Backdrop = styled_1.styled.div `
   position: absolute;
   z-index: ${({ theme }) => theme.zIndex.mobileStepper};
   inset: 0;
@@ -10,6 +10,6 @@ exports.Backdrop = styles_1.styled.div `
   opacity: 0.5;
   background-color: ${({ theme }) => theme.palette.background.element};
 `;
-exports.StyledForm = styles_1.styled.form `
+exports.StyledForm = styled_1.styled.form `
   position: relative;
 `;

package/node/hook-form/FormController/index.d.ts

@@ -0,0 +1 @@
+export { Controller as FormController, type ControllerProps as FormControllerProps, type UseControllerProps as UseFormControllerProps, } from 'react-hook-form';

package/node/hook-form/FormController/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormController = void 0;
+var react_hook_form_1 = require("react-hook-form");
+Object.defineProperty(exports, "FormController", { enumerable: true, get: function () { return react_hook_form_1.Controller; } });

package/node/hook-form/FormController/public.d.ts

@@ -0,0 +1 @@
+export { Controller as FormController, type ControllerProps as FormControllerProps, type UseControllerProps as UseFormControllerProps, } from 'react-hook-form';

package/node/hook-form/FormController/public.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormController = void 0;
+var react_hook_form_1 = require("react-hook-form");
+Object.defineProperty(exports, "FormController", { enumerable: true, get: function () { return react_hook_form_1.Controller; } });

package/node/hook-form/FormPageFooterContainer/styles.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const StyledPageLayoutFooter: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../../components/PageLayoutFooter").PageLayoutFooterProps & import("react").RefAttributes<HTMLElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/node/hook-form/FormPageFooterContainer/styles.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledPageLayoutFooter = void 0;
+const PageLayoutFooter_1 = require("../../components/PageLayoutFooter");
+const styled_1 = require("../../components/styled");
+const FormPageLayoutBase_1 = require("../FormPageLayoutBase");
+const constants_1 = require("./constants");
+exports.StyledPageLayoutFooter = (0, styled_1.styled)(PageLayoutFooter_1.PageLayoutFooter) `
+  position: sticky;
+  z-index: ${({ theme }) => theme.zIndex.speedDial};
+
+  border-top: unset;
+
+  &.${FormPageLayoutBase_1.formPageLayoutClassnames.footerShadow} {
+    bottom: 0;
+
+    box-shadow: ${({ theme }) => theme.elevation.up[100]};
+  }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    align-items: unset;
+
+    width: 100%;
+    height: unset;
+    max-height: calc(100% - ${constants_1.HEADER_HEIGHT});
+    padding: 0;
+
+    border-top-left-radius: ${({ theme }) => theme.shape.large};
+    border-top-right-radius: ${({ theme }) => theme.shape.large};
+    box-shadow: ${({ theme }) => theme.elevation.up[100]};
+  }
+`;

package/node/hook-form/FormPageFooterContainer/useLogic/useLogic.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogic = void 0;
+const react_1 = require("react");
+const PageContent_1 = require("../../../components/PageContent");
+const FormPageLayoutBase_1 = require("../../FormPageLayoutBase");
+const useLogic = () => {
+    const footerRef = (0, react_1.useRef)(null);
+    const updateStickyState = (0, react_1.useCallback)((container) => {
+        if (!footerRef?.current) {
+            return;
+        }
+        if (!container || !container.parentElement) {
+            return;
+        }
+        if (container.scrollHeight > container.parentElement.clientHeight) {
+            return footerRef.current.classList.add(FormPageLayoutBase_1.formPageLayoutClassnames.footerShadow);
+        }
+        footerRef.current.classList.remove(FormPageLayoutBase_1.formPageLayoutClassnames.footerShadow);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const container = document.querySelector(`.${PageContent_1.pageContentClassnames.content}`);
+        const rootContainer = document.querySelector(`.${PageContent_1.pageContentClassnames.pageContent}`);
+        updateStickyState(container);
+        if (!container) {
+            return;
+        }
+        // ResizeObserver следит за изменением размеров контейнера
+        const resizeObserver = new ResizeObserver(() => updateStickyState(container));
+        resizeObserver.observe(container);
+        if (rootContainer) {
+            resizeObserver.observe(rootContainer);
+        }
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [updateStickyState]);
+    return { footerRef };
+};
+exports.useLogic = useLogic;

package/node/hook-form/FormPageLayout/FormPageFooter/FormPageFooter.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import type { SecondaryAction } from '../../FormPageLayoutBase';
+export type FormFooterProps = {
+    /**
+     * Если true, кнопки будут недоступны для взаимодействия
+     */
+    isDisabled?: boolean;
+    /**
+     * Дополнительные кнопки формы
+     */
+    secondaryActions?: SecondaryAction[];
+    /**
+     * Текст для кнопки отправки формы
+     * @default 'Отправить'
+     */
+    submitButtonText?: string;
+};
+export declare const FormPageFooter: (props: FormFooterProps) => JSX.Element;

package/node/hook-form/FormPageLayout/FormPageFooter/SecondaryActions/SecondaryActions.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import type { SecondaryAction } from '../../../FormPageLayoutBase';
+export type SecondaryActionsProps = {
+    /**
+     * Если true, кнопки будут недоступны для взаимодействия
+     */
+    isDisabled?: boolean;
+    /**
+     * Массив вторичных действий для отображения
+     */
+    actions: SecondaryAction[];
+    /**
+     * Состояние для Collapse
+     */
+    isActive: boolean;
+    /**
+     * Отключает отступ у действий скрытых
+     */
+    isDisablePadding?: boolean;
+};
+export declare const SecondaryActions: (props: SecondaryActionsProps) => JSX.Element;

package/node/hook-form/FormPageLayout/FormPageFooter/SecondaryActions/SecondaryActions.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SecondaryActions = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Collapse_1 = require("../../../../components/Collapse");
+const Tooltip_1 = require("../../../../components/Tooltip");
+const styles_1 = require("./styles");
+const useLogic_1 = require("./useLogic");
+const SecondaryActions = (props) => {
+    const { isDisabled, actions, isActive, isDisablePadding = false } = props;
+    const { isShowCollapseActions } = (0, useLogic_1.useLogic)(props);
+    const renderMobileButton = ({ text, disabled, isBlockingOperation, ...restButtonProps }) => ((0, jsx_runtime_1.jsx)(styles_1.StyledMobileButton, { disabled: isDisabled || disabled, variant: "outlined", color: "grey", ...restButtonProps, children: text }, text));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(styles_1.MobileActionWrapper, { children: isShowCollapseActions ? ((0, jsx_runtime_1.jsx)(Collapse_1.Collapse, { in: isActive, children: (0, jsx_runtime_1.jsx)(styles_1.ActionWrapper, { "$isDisablePadding": isDisablePadding, children: actions.map(renderMobileButton) }) })) : ((0, jsx_runtime_1.jsx)(styles_1.ActionWrapper, { "$isDisablePadding": isDisablePadding, children: renderMobileButton(actions[0]) })) }), (0, jsx_runtime_1.jsx)(styles_1.DesktopActionWrapper, { children: actions?.map((action) => {
+                    const { text, disabled, disabledReason, loading, isBlockingOperation, ...restActionProps } = action;
+                    return ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: disabled && disabledReason, withoutContainer: !(isDisabled || disabled), children: (0, jsx_runtime_1.jsx)(styles_1.StyledButton, { disabled: isDisabled || disabled, loading: loading, size: "large", color: "grey", variant: "outlined", ...restActionProps, children: text }) }, text));
+                }) })] }));
+};
+exports.SecondaryActions = SecondaryActions;

package/node/hook-form/FormPageLayout/FormPageFooter/SecondaryActions/styles.d.ts

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+export declare const StyledButton: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../../../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "variant"> & {
+    variant?: "light" | "link" | "outlined" | "contained" | "text" | undefined;
+    loading?: boolean | undefined;
+    color?: "grey" | "error" | "success" | "warning" | "primary" | undefined;
+    component?: import("react").ElementType | undefined;
+    selected?: boolean | undefined;
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, ""> & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const StyledMobileButton: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../../../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "variant"> & {
+    variant?: "light" | "link" | "outlined" | "contained" | "text" | undefined;
+    loading?: boolean | undefined;
+    color?: "grey" | "error" | "success" | "warning" | "primary" | undefined;
+    component?: import("react").ElementType | undefined;
+    selected?: boolean | undefined;
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, ""> & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const ActionWrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    $isDisablePadding?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DesktopActionWrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const MobileActionWrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/node/hook-form/FormPageLayout/FormPageFooter/SecondaryActions/styles.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileActionWrapper = exports.DesktopActionWrapper = exports.ActionWrapper = exports.StyledMobileButton = exports.StyledButton = void 0;
+const Button_1 = require("../../../../components/Button");
+const styled_1 = require("../../../../components/styled");
+exports.StyledButton = (0, styled_1.styled)(Button_1.Button) `
+  flex-grow: 1;
+`;
+exports.StyledMobileButton = (0, styled_1.styled)(Button_1.Button) `
+  display: none;
+
+  width: 100%;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: flex;
+
+    height: 50px;
+  }
+`;
+exports.ActionWrapper = (0, styled_1.styled)('div', {
+    shouldForwardProp: (prop) => !['$isDisablePadding'].includes(prop),
+}) `
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${({ theme }) => theme.spacing(2)};
+
+  padding-top: ${({ theme, $isDisablePadding }) => $isDisablePadding ? 0 : theme.spacing(2)};
+`;
+exports.DesktopActionWrapper = styled_1.styled.div `
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(4)}; 
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;
+exports.MobileActionWrapper = styled_1.styled.div `
+  display: none;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: block;
+    order: 2;
+  }
+`;

package/node/hook-form/FormPageLayout/FormPageFooter/styles.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+export declare const ActionsWrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    $isShowMoreButton?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ShowMoreButton: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "variant"> & {
+    variant?: "light" | "link" | "outlined" | "contained" | "text" | undefined;
+    loading?: boolean | undefined;
+    color?: "grey" | "error" | "success" | "warning" | "primary" | undefined;
+    component?: import("react").ElementType | undefined;
+    selected?: boolean | undefined;
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, ""> & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    $isActive: boolean;
+}, {}, {}>;
+export declare const StyledFormSubmitButton: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../../FormSubmitButton").FormSubmitButtonProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    $isShowSecondaryActions?: boolean | undefined;
+}, {}, {}>;

package/node/hook-form/FormPageLayout/FormPageFooter/styles.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledFormSubmitButton = exports.ShowMoreButton = exports.ActionsWrapper = void 0;
+const Button_1 = require("../../../components/Button");
+const styled_1 = require("../../../components/styled");
+const FormSubmitButton_1 = require("../../FormSubmitButton");
+exports.ActionsWrapper = (0, styled_1.styled)('div', {
+    shouldForwardProp: (prop) => !['$isShowMoreButton'].includes(prop),
+}) `
+  display: flex;
+  flex-direction: row-reverse;
+  gap: ${({ theme }) => theme.spacing(4)};  
+
+  width: 100%;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    overflow: auto;
+    flex-direction: column;
+    gap: 0;
+
+    padding: ${({ theme, $isShowMoreButton }) => $isShowMoreButton ? theme.spacing(4, 4, 0) : theme.spacing(4)};
+  }
+`;
+exports.ShowMoreButton = (0, styled_1.styled)(Button_1.Button, {
+    shouldForwardProp: (prop) => !['$isActive'].includes(prop),
+}) `
+  display: none;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: flex;
+
+    width: 100%;
+    height: 36px;
+    min-height: 36px;
+    margin-top: ${({ theme }) => theme.spacing(2)};
+    margin-bottom: ${({ theme }) => theme.spacing(4)};
+    padding: 0;
+
+    &:hover {
+      background-color: unset;
+    }
+  }
+`;
+exports.StyledFormSubmitButton = (0, styled_1.styled)(FormSubmitButton_1.FormSubmitButton, {
+    shouldForwardProp: (prop) => !['$isShowSecondaryActions'].includes(prop),
+}) `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    height: 50px;
+    margin-bottom: ${({ theme, $isShowSecondaryActions }) => $isShowSecondaryActions ? theme.spacing(2) : 0};
+  }
+`;

package/node/hook-form/FormPageLayout/FormPageLayout.d.ts

@@ -0,0 +1,29 @@
+import { type ReactNode } from 'react';
+import { type PageLayoutProps } from '../../components/PageLayout';
+import { type FormProps } from '../Form';
+import type { SecondaryAction } from '../FormPageLayoutBase';
+type FormPageProps<TFormValues extends Record<string, unknown>> = Omit<FormProps<TFormValues>, 'children'> & {
+    /**
+     * Текст для кнопки отправки формы
+     */
+    submitButtonText?: string;
+    /**
+     * Дополнительные кнопки формы
+     */
+    secondaryActions?: SecondaryAction[];
+};
+export type FormPageLayoutProps<TFormValues extends Record<string, unknown>> = Omit<PageLayoutProps, 'content'> & {
+    /**
+     * Содержимое формы
+     */
+    children: ReactNode;
+    /**
+     * Параметры страницы формы
+     */
+    form: FormPageProps<TFormValues>;
+};
+/**
+ * FormPageLayout предназначен для построения страниц с формами.
+ */
+export declare const FormPageLayout: <TFormValues extends Record<string, unknown>>(props: FormPageLayoutProps<TFormValues>) => JSX.Element;
+export {};

package/node/hook-form/FormPageLayout/FormPageLayout.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormPageLayout = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../../components/utils");
+const Form_1 = require("../Form");
+const FormPageLayoutBase_1 = require("../FormPageLayoutBase");
+const FormPageFooter_1 = require("./FormPageFooter");
+const styles_1 = require("./styles");
+/**
+ * FormPageLayout предназначен для построения страниц с формами.
+ */
+const FormPageLayout = (props) => {
+    const { form, children, ...restProps } = props;
+    const { secondaryActions, submitButtonText, ...restFormProps } = form;
+    return ((0, jsx_runtime_1.jsx)(FormPageLayoutBase_1.FormPageLayoutBase, { ...restProps, formProps: { ...form, secondaryActions }, contentClassname: (0, utils_1.classNames)({
+            [FormPageLayoutBase_1.formPageContentClassnames.formPageContentSecondaryActions]: Boolean(secondaryActions),
+        }), children: ({ isDisabled }) => ((0, jsx_runtime_1.jsxs)(Form_1.Form, { ...restFormProps, isDisabled: isDisabled, children: [(0, jsx_runtime_1.jsx)(styles_1.FormContent, { children: children }), (0, jsx_runtime_1.jsx)(FormPageFooter_1.FormPageFooter, { isDisabled: isDisabled, submitButtonText: submitButtonText, secondaryActions: secondaryActions })] })) }));
+};
+exports.FormPageLayout = FormPageLayout;

package/node/hook-form/FormPageLayout/public.d.ts

@@ -0,0 +1,2 @@
+export { formPageContentClassnames, formPageLayoutClassnames, } from '../FormPageLayoutBase';
+export * from './FormPageLayout';

package/node/hook-form/FormPageLayout/public.js

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formPageLayoutClassnames = exports.formPageContentClassnames = void 0;
+var FormPageLayoutBase_1 = require("../FormPageLayoutBase");
+Object.defineProperty(exports, "formPageContentClassnames", { enumerable: true, get: function () { return FormPageLayoutBase_1.formPageContentClassnames; } });
+Object.defineProperty(exports, "formPageLayoutClassnames", { enumerable: true, get: function () { return FormPageLayoutBase_1.formPageLayoutClassnames; } });
+__exportStar(require("./FormPageLayout"), exports);

package/node/hook-form/FormPageLayout/styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const FormContent: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;