@skbkontur/react-ui 1.12.2 → 2.0.0-beta.4

package/components/Button/ButtonArrow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonArrow.js","sourceRoot":"","sources":["../../../components/Button/ButtonArrow.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useContext } from 'react';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\n\nimport { ArrowRightIcon } from './ArrowRightIcon.js';\nimport { ArrowLeftIcon } from './ArrowLeftIcon.js';\nimport type { ButtonInnerProps } from './Button.js';\nimport { globalClasses, getStyles } from './Button.styles.js';\n\ntype ButtonArrowProps = Pick<\n  ButtonInnerProps,\n  'size' | 'arrow' | 'checked' | 'disabled' | 'error' | 'use' | 'warning'\n> & {\n  isFocused: boolean;\n};\n\nconst ButtonArrow: React.FunctionComponent<ButtonArrowProps> = ({ arrow, size }) => {\n  const theme = useContext(ThemeContext);\n  const { cx } = useEmotion();\n  const styles = useStyles(getStyles);\n\n  const getArrowIconRootClassName = () => {\n    return cx(styles.arrowIconRoot(), globalClasses.arrow, {\n      [styles.arrowIconRootSmall(theme)]: size === 'small',\n      [styles.arrowIconRootMedium(theme)]: size === 'medium',\n      [styles.arrowIconRootLarge(theme)]: size === 'large',\n      [styles.arrowIconLeft()]: arrow === 'left',\n    });\n  };\n\n  const arrowIcons = {\n    right: ArrowRightIcon,\n    left: ArrowLeftIcon,\n  };\n  const side = arrow === 'left' ? 'left' : 'right';\n  const ArrowIcon = arrowIcons[side];\n  const arrowNode = (\n    <div className={getArrowIconRootClassName()}>\n      <ArrowIcon size={size} />\n    </div>\n  );\n\n  return arrowNode;\n};\n\nexport function useButtonArrow(\n  props: ButtonArrowProps,\n  theme: Theme,\n  styles: ReturnType<typeof getStyles>,\n  cx: Emotion['cx'],\n): [string, React.ReactNode] {\n  const { arrow, size, use } = props;\n\n  const canRender = use !== 'link' && (arrow === true || arrow === 'left');\n\n  const rootClassName = canRender\n    ? cx(\n        arrow === true && size === 'small' && styles.withArrowIconRightSmall(theme),\n        arrow === true && size === 'medium' && styles.withArrowIconRightMedium(theme),\n        arrow === true && size === 'large' && styles.withArrowIconRightLarge(theme),\n        arrow === 'left' && size === 'small' && styles.withArrowIconLeftSmall(theme),\n        arrow === 'left' && size === 'medium' && styles.withArrowIconLeftMedium(theme),\n        arrow === 'left' && size === 'large' && styles.withArrowIconLeftLarge(theme),\n      )\n    : '';\n\n  const arrowNode = canRender ? <ButtonArrow {...props} /> : null;\n\n  return [rootClassName, arrowNode];\n}\n"]}

package/components/Button/ButtonIcon.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { Theme } from '../../lib/theming/Theme.js';
+import type { SizeProp } from '../../lib/types/props.js';
+import type { ButtonInnerProps } from './Button.js';
+export interface ButtonIconProps extends Pick<ButtonInnerProps, 'size' | 'icon' | 'loading' | 'use'> {
+    position: 'right' | 'left';
+    hasChildren: boolean;
+    hasBothIcons?: boolean;
+}
+export declare const getButtonIconSizes: (theme: Theme) => Record<SizeProp, number>;
+export declare const ButtonIcon: React.FunctionComponent<ButtonIconProps>;

package/components/Button/ButtonIcon.js

@@ -0,0 +1,61 @@
+import React, { useContext } from 'react';
+import { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';
+import { isKonturIcon } from '../../lib/utils.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { getStyles } from './ButtonIcon.styles.js';
+import { LoadingButtonIcon } from './LoadingButtonIcon.js';
+export var getButtonIconSizes = function (theme) {
+    return {
+        small: parseInt(theme.btnIconSizeSmall),
+        medium: parseInt(theme.btnIconSizeMedium),
+        large: parseInt(theme.btnIconSizeLarge),
+    };
+};
+var useIcon = function (icon, size) {
+    var _a;
+    var theme = useContext(ThemeContext);
+    if (icon && isKonturIcon(icon)) {
+        var sizes = getButtonIconSizes(theme);
+        return React.cloneElement(icon, { size: (_a = icon.props.size) !== null && _a !== void 0 ? _a : sizes[size] });
+    }
+    return icon;
+};
+export var ButtonIcon = function (_a) {
+    var _b;
+    var icon = _a.icon, use = _a.use, position = _a.position, hasChildren = _a.hasChildren, _c = _a.loading, loading = _c === void 0 ? false : _c, _d = _a.hasBothIcons, hasBothIcons = _d === void 0 ? false : _d, _e = _a.size, size = _e === void 0 ? 'small' : _e;
+    var theme = useContext(ThemeContext);
+    var cx = useEmotion().cx;
+    var styles = useStyles(getStyles);
+    var isLink = use === 'link';
+    var getSizeIconClassName = function () {
+        switch (size) {
+            case 'large':
+                return [
+                    styles.iconLarge(theme),
+                    position === 'left' ? styles.iconLargeLeft(theme) : styles.iconLargeRight(theme),
+                ];
+            case 'medium':
+                return [
+                    styles.iconMedium(theme),
+                    position === 'left' ? styles.iconMediumLeft(theme) : styles.iconMediumRight(theme),
+                ];
+            case 'small':
+            default:
+                return [
+                    styles.iconSmall(theme),
+                    position === 'left' ? styles.iconSmallLeft(theme) : styles.iconSmallRight(theme),
+                ];
+        }
+    };
+    var style = {
+        display: 'inline-flex',
+        alignItems: 'center',
+    };
+    var _icon = useIcon(icon, size);
+    return (React.createElement("span", { style: style, className: cx(styles.icon(), getSizeIconClassName(), (_b = {},
+            _b[styles.iconNoMargin()] = !hasChildren,
+            _b[styles.iconLeftLink(theme)] = isLink && position === 'left',
+            _b[styles.iconRightLink(theme)] = isLink && position === 'right',
+            _b)) }, loading && !hasBothIcons ? React.createElement(LoadingButtonIcon, { isCentered: false, size: size }) : _icon));
+};
+//# sourceMappingURL=ButtonIcon.js.map

package/components/Button/ButtonIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonIcon.js","sourceRoot":"","sources":["../../../components/Button/ButtonIcon.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useContext } from 'react';\n\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { isKonturIcon } from '../../lib/utils.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { SizeProp } from '../../lib/types/props.js';\n\nimport type { ButtonInnerProps } from './Button.js';\nimport { getStyles } from './ButtonIcon.styles.js';\nimport { LoadingButtonIcon } from './LoadingButtonIcon.js';\n\nexport interface ButtonIconProps extends Pick<ButtonInnerProps, 'size' | 'icon' | 'loading' | 'use'> {\n  position: 'right' | 'left';\n  hasChildren: boolean;\n  hasBothIcons?: boolean;\n}\n\nexport const getButtonIconSizes = (theme: Theme): Record<SizeProp, number> => {\n  return {\n    small: parseInt(theme.btnIconSizeSmall),\n    medium: parseInt(theme.btnIconSizeMedium),\n    large: parseInt(theme.btnIconSizeLarge),\n  };\n};\n\nconst useIcon = (icon: any, size: SizeProp) => {\n  const theme = useContext(ThemeContext);\n  if (icon && isKonturIcon(icon)) {\n    const sizes = getButtonIconSizes(theme);\n    return React.cloneElement(icon, { size: icon.props.size ?? sizes[size] });\n  }\n\n  return icon;\n};\n\nexport const ButtonIcon: React.FunctionComponent<ButtonIconProps> = ({\n  icon,\n  use,\n  position,\n  hasChildren,\n  loading = false,\n  hasBothIcons = false,\n  size = 'small',\n}) => {\n  const theme = useContext(ThemeContext);\n  const { cx } = useEmotion();\n  const styles = useStyles(getStyles);\n  const isLink = use === 'link';\n\n  const getSizeIconClassName = () => {\n    switch (size) {\n      case 'large':\n        return [\n          styles.iconLarge(theme),\n          position === 'left' ? styles.iconLargeLeft(theme) : styles.iconLargeRight(theme),\n        ];\n      case 'medium':\n        return [\n          styles.iconMedium(theme),\n          position === 'left' ? styles.iconMediumLeft(theme) : styles.iconMediumRight(theme),\n        ];\n      case 'small':\n      default:\n        return [\n          styles.iconSmall(theme),\n          position === 'left' ? styles.iconSmallLeft(theme) : styles.iconSmallRight(theme),\n        ];\n    }\n  };\n\n  const style: React.CSSProperties = {\n    display: 'inline-flex',\n    alignItems: 'center',\n  };\n\n  const _icon = useIcon(icon, size);\n\n  return (\n    <span\n      style={style}\n      className={cx(styles.icon(), getSizeIconClassName(), {\n        [styles.iconNoMargin()]: !hasChildren,\n        [styles.iconLeftLink(theme)]: isLink && position === 'left',\n        [styles.iconRightLink(theme)]: isLink && position === 'right',\n      })}\n    >\n      {loading && !hasBothIcons ? <LoadingButtonIcon isCentered={false} size={size} /> : _icon}\n    </span>\n  );\n};\n"]}

package/components/Button/ButtonIcon.styles.d.ts

@@ -0,0 +1,16 @@
+import type { Theme } from '../../lib/theming/Theme.js';
+export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
+    icon(): string;
+    iconSmall(t: Theme): string;
+    iconSmallLeft(t: Theme): string;
+    iconSmallRight(t: Theme): string;
+    iconMedium(t: Theme): string;
+    iconMediumLeft(t: Theme): string;
+    iconMediumRight(t: Theme): string;
+    iconLarge(t: Theme): string;
+    iconLargeLeft(t: Theme): string;
+    iconLargeRight(t: Theme): string;
+    iconLeftLink(t: Theme): string;
+    iconRightLink(t: Theme): string;
+    iconNoMargin(): string;
+}>;

package/components/Button/ButtonIcon.styles.js

@@ -0,0 +1,53 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { ZERO_WIDTH_SPACE_CSS } from '../../lib/chars.js';
+import { memoizeGetStyles } from '../../lib/theming/Emotion.js';
+export var getStyles = memoizeGetStyles(function (_a) {
+    var css = _a.css;
+    return ({
+        icon: function () {
+            var space = "'".concat(ZERO_WIDTH_SPACE_CSS, "'");
+            return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: inline-block;\n\n      &::before {\n        content: ", ";\n      }\n    "], ["\n      display: inline-block;\n\n      &::before {\n        content: ", ";\n      }\n    "])), space);
+        },
+        iconSmall: function (t) {
+            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      width: ", ";\n    "], ["\n      width: ", ";\n    "])), t.btnIconSizeSmall);
+        },
+        iconSmallLeft: function (t) {
+            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      margin-right: ", ";\n    "], ["\n      margin-right: ", ";\n    "])), t.btnIconGapSmallLeft);
+        },
+        iconSmallRight: function (t) {
+            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      margin-left: ", ";\n    "], ["\n      margin-left: ", ";\n    "])), t.btnIconGapSmallRight);
+        },
+        iconMedium: function (t) {
+            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      width: ", ";\n    "], ["\n      width: ", ";\n    "])), t.btnIconSizeMedium);
+        },
+        iconMediumLeft: function (t) {
+            return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      margin-right: ", ";\n    "], ["\n      margin-right: ", ";\n    "])), t.btnIconGapMediumRight);
+        },
+        iconMediumRight: function (t) {
+            return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      margin-left: ", ";\n    "], ["\n      margin-left: ", ";\n    "])), t.btnIconGapMediumRight);
+        },
+        iconLarge: function (t) {
+            return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      width: ", ";\n    "], ["\n      width: ", ";\n    "])), t.btnIconSizeLarge);
+        },
+        iconLargeLeft: function (t) {
+            return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      margin-right: ", ";\n    "], ["\n      margin-right: ", ";\n    "])), t.btnIconGapLargeLeft);
+        },
+        iconLargeRight: function (t) {
+            return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      margin-left: ", ";\n    "], ["\n      margin-left: ", ";\n    "])), t.btnIconGapLargeRight);
+        },
+        iconLeftLink: function (t) {
+            return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      margin-right: ", ";\n    "], ["\n      margin-right: ", ";\n    "])), t.btnLinkIconMarginRight);
+        },
+        iconRightLink: function (t) {
+            return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      margin-left: ", ";\n    "], ["\n      margin-left: ", ";\n    "])), t.btnLinkIconMarginLeft);
+        },
+        iconNoMargin: function () {
+            return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      margin-right: 0;\n      margin-left: 0;\n    "], ["\n      margin-right: 0;\n      margin-left: 0;\n    "])));
+        },
+    });
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
+//# sourceMappingURL=ButtonIcon.styles.js.map

package/components/Button/ButtonIcon.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonIcon.styles.js","sourceRoot":"","sources":["../../../components/Button/ButtonIcon.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAGhE,MAAM,CAAC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAAgB,OAAA,CAAC;QAC/D,IAAI;YACF,IAAM,KAAK,GAAG,WAAI,oBAAoB,MAAG,CAAC;YAC1C,OAAO,GAAG,+JAAA,wEAIK,EAAK,kBAEnB,KAFc,KAAK,EAElB;QACJ,CAAC;QAED,SAAS,YAAC,CAAQ;YAChB,OAAO,GAAG,+FAAA,iBACC,EAAkB,SAC5B,KADU,CAAC,CAAC,gBAAgB,EAC3B;QACJ,CAAC;QAED,aAAa,YAAC,CAAQ;YACpB,OAAO,GAAG,sGAAA,wBACQ,EAAqB,SACtC,KADiB,CAAC,CAAC,mBAAmB,EACrC;QACJ,CAAC;QAED,cAAc,YAAC,CAAQ;YACrB,OAAO,GAAG,qGAAA,uBACO,EAAsB,SACtC,KADgB,CAAC,CAAC,oBAAoB,EACrC;QACJ,CAAC;QAED,UAAU,YAAC,CAAQ;YACjB,OAAO,GAAG,+FAAA,iBACC,EAAmB,SAC7B,KADU,CAAC,CAAC,iBAAiB,EAC5B;QACJ,CAAC;QAED,cAAc,YAAC,CAAQ;YACrB,OAAO,GAAG,sGAAA,wBACQ,EAAuB,SACxC,KADiB,CAAC,CAAC,qBAAqB,EACvC;QACJ,CAAC;QAED,eAAe,YAAC,CAAQ;YACtB,OAAO,GAAG,qGAAA,uBACO,EAAuB,SACvC,KADgB,CAAC,CAAC,qBAAqB,EACtC;QACJ,CAAC;QAED,SAAS,YAAC,CAAQ;YAChB,OAAO,GAAG,+FAAA,iBACC,EAAkB,SAC5B,KADU,CAAC,CAAC,gBAAgB,EAC3B;QACJ,CAAC;QAED,aAAa,YAAC,CAAQ;YACpB,OAAO,GAAG,sGAAA,wBACQ,EAAqB,SACtC,KADiB,CAAC,CAAC,mBAAmB,EACrC;QACJ,CAAC;QAED,cAAc,YAAC,CAAQ;YACrB,OAAO,GAAG,uGAAA,uBACO,EAAsB,SACtC,KADgB,CAAC,CAAC,oBAAoB,EACrC;QACJ,CAAC;QAED,YAAY,YAAC,CAAQ;YACnB,OAAO,GAAG,wGAAA,wBACQ,EAAwB,SACzC,KADiB,CAAC,CAAC,sBAAsB,EACxC;QACJ,CAAC;QAED,aAAa,YAAC,CAAQ;YACpB,OAAO,GAAG,uGAAA,uBACO,EAAuB,SACvC,KADgB,CAAC,CAAC,qBAAqB,EACtC;QACJ,CAAC;QAED,YAAY;YACV,OAAO,GAAG,4HAAA,uDAGT,KAAC;QACJ,CAAC;KACF,CAAC;AApF8D,CAoF9D,CAAC,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { ZERO_WIDTH_SPACE_CSS } from '../../lib/chars.js';\nimport { memoizeGetStyles } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  icon() {\n    const space = `'${ZERO_WIDTH_SPACE_CSS}'`;\n    return css`\n      display: inline-block;\n\n      &::before {\n        content: ${space};\n      }\n    `;\n  },\n\n  iconSmall(t: Theme) {\n    return css`\n      width: ${t.btnIconSizeSmall};\n    `;\n  },\n\n  iconSmallLeft(t: Theme) {\n    return css`\n      margin-right: ${t.btnIconGapSmallLeft};\n    `;\n  },\n\n  iconSmallRight(t: Theme) {\n    return css`\n      margin-left: ${t.btnIconGapSmallRight};\n    `;\n  },\n\n  iconMedium(t: Theme) {\n    return css`\n      width: ${t.btnIconSizeMedium};\n    `;\n  },\n\n  iconMediumLeft(t: Theme) {\n    return css`\n      margin-right: ${t.btnIconGapMediumRight};\n    `;\n  },\n\n  iconMediumRight(t: Theme) {\n    return css`\n      margin-left: ${t.btnIconGapMediumRight};\n    `;\n  },\n\n  iconLarge(t: Theme) {\n    return css`\n      width: ${t.btnIconSizeLarge};\n    `;\n  },\n\n  iconLargeLeft(t: Theme) {\n    return css`\n      margin-right: ${t.btnIconGapLargeLeft};\n    `;\n  },\n\n  iconLargeRight(t: Theme) {\n    return css`\n      margin-left: ${t.btnIconGapLargeRight};\n    `;\n  },\n\n  iconLeftLink(t: Theme) {\n    return css`\n      margin-right: ${t.btnLinkIconMarginRight};\n    `;\n  },\n\n  iconRightLink(t: Theme) {\n    return css`\n      margin-left: ${t.btnLinkIconMarginLeft};\n    `;\n  },\n\n  iconNoMargin() {\n    return css`\n      margin-right: 0;\n      margin-left: 0;\n    `;\n  },\n}));\n"]}

package/components/Button/LoadingButtonIcon.d.ts

@@ -0,0 +1,8 @@
+import { type JSX } from 'react';
+import type { IconSizeAliases } from '../../internal/icons2022/iconConstants.js';
+interface LoadingButtonIconProps {
+    size: IconSizeAliases;
+    isCentered?: boolean;
+}
+export declare const LoadingButtonIcon: ({ size, isCentered }: LoadingButtonIconProps) => JSX.Element;
+export {};

package/components/Button/LoadingButtonIcon.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { useStyles } from '../../lib/renderEnvironment/index.js';
+import { LoadingIcon } from '../../internal/icons2022/LoadingIcon.js';
+import { ButtonDataTids } from './Button.js';
+import { getStyles } from './Button.styles.js';
+export var LoadingButtonIcon = function (_a) {
+    var size = _a.size, _b = _a.isCentered, isCentered = _b === void 0 ? true : _b;
+    var styles = useStyles(getStyles);
+    return (React.createElement("div", { "data-tid": ButtonDataTids.spinner, className: isCentered ? styles.loading() : undefined }, React.createElement(LoadingIcon, { size: size })));
+};
+//# sourceMappingURL=LoadingButtonIcon.js.map

package/components/Button/LoadingButtonIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingButtonIcon.js","sourceRoot":"","sources":["../../../components/Button/LoadingButtonIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAEjE,OAAO,EAAE,WAAW,EAAE,MAAM,yCAAyC,CAAC;AAEtE,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAO/C,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,EAAmD;QAAjD,IAAI,UAAA,EAAE,kBAAiB,EAAjB,UAAU,mBAAG,IAAI,KAAA;IACzD,IAAM,MAAM,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,OAAO,CACL,yCAAe,cAAc,CAAC,OAAO,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,SAAS,IACxF,oBAAC,WAAW,IAAC,IAAI,EAAE,IAAI,GAAI,CACxB,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React, { type JSX } from 'react';\n\nimport { useStyles } from '../../lib/renderEnvironment/index.js';\nimport type { IconSizeAliases } from '../../internal/icons2022/iconConstants.js';\nimport { LoadingIcon } from '../../internal/icons2022/LoadingIcon.js';\n\nimport { ButtonDataTids } from './Button.js';\nimport { getStyles } from './Button.styles.js';\n\ninterface LoadingButtonIconProps {\n  size: IconSizeAliases;\n  isCentered?: boolean;\n}\n\nexport const LoadingButtonIcon = ({ size, isCentered = true }: LoadingButtonIconProps): JSX.Element => {\n  const styles = useStyles(getStyles);\n  return (\n    <div data-tid={ButtonDataTids.spinner} className={isCentered ? styles.loading() : undefined}>\n      {<LoadingIcon size={size} />}\n    </div>\n  );\n};\n"]}

package/components/Button/getInnerLinkTheme.d.ts

@@ -0,0 +1,2 @@
+import type { Theme } from '../../lib/theming/Theme.js';
+export declare const getInnerLinkTheme: (theme: Theme) => Theme;

package/components/Button/getInnerLinkTheme.js

@@ -0,0 +1,18 @@
+import { ThemeFactory } from '../../lib/theming/ThemeFactory.js';
+export var getInnerLinkTheme = function (theme) {
+    return ThemeFactory.create({
+        linkTextDecorationStyle: theme.btnLinkTextDecorationStyle,
+        linkTextUnderlineOffset: theme.btnLinkTextUnderlineOffset,
+        linkHoverTextDecorationStyle: theme.btnLinkHoverTextDecorationStyle,
+        linkTextUnderlineOpacity: theme.btnLinkTextUnderlineOpacity,
+        linkTextDecorationColor: theme.btnLinkTextDecorationColor,
+        linkTextDecorationThickness: theme.btnLinkTextDecorationThickness,
+        linkDisabledColor: theme.btnLinkDisabledColor,
+        linkColor: theme.btnLinkColor,
+        linkHoverColor: theme.btnLinkHoverColor,
+        linkActiveColor: theme.btnLinkActiveColor,
+        linkHoverTextDecoration: theme.btnLinkHoverTextDecoration,
+        linkIconMarginRight: theme.btnLinkIconMarginRight,
+    }, theme);
+};
+//# sourceMappingURL=getInnerLinkTheme.js.map

package/components/Button/getInnerLinkTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getInnerLinkTheme.js","sourceRoot":"","sources":["../../../components/Button/getInnerLinkTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAGjE,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,KAAY;IAC5C,OAAO,YAAY,CAAC,MAAM,CACxB;QACE,uBAAuB,EAAE,KAAK,CAAC,0BAA0B;QACzD,uBAAuB,EAAE,KAAK,CAAC,0BAA0B;QACzD,4BAA4B,EAAE,KAAK,CAAC,+BAA+B;QACnE,wBAAwB,EAAE,KAAK,CAAC,2BAA2B;QAC3D,uBAAuB,EAAE,KAAK,CAAC,0BAA0B;QACzD,2BAA2B,EAAE,KAAK,CAAC,8BAA8B;QACjE,iBAAiB,EAAE,KAAK,CAAC,oBAAoB;QAC7C,SAAS,EAAE,KAAK,CAAC,YAAY;QAC7B,cAAc,EAAE,KAAK,CAAC,iBAAiB;QACvC,eAAe,EAAE,KAAK,CAAC,kBAAkB;QACzC,uBAAuB,EAAE,KAAK,CAAC,0BAA0B;QACzD,mBAAmB,EAAE,KAAK,CAAC,sBAAsB;KAClD,EACD,KAAK,CACN,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { ThemeFactory } from '../../lib/theming/ThemeFactory.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\n\nexport const getInnerLinkTheme = (theme: Theme): Theme => {\n  return ThemeFactory.create(\n    {\n      linkTextDecorationStyle: theme.btnLinkTextDecorationStyle,\n      linkTextUnderlineOffset: theme.btnLinkTextUnderlineOffset,\n      linkHoverTextDecorationStyle: theme.btnLinkHoverTextDecorationStyle,\n      linkTextUnderlineOpacity: theme.btnLinkTextUnderlineOpacity,\n      linkTextDecorationColor: theme.btnLinkTextDecorationColor,\n      linkTextDecorationThickness: theme.btnLinkTextDecorationThickness,\n      linkDisabledColor: theme.btnLinkDisabledColor,\n      linkColor: theme.btnLinkColor,\n      linkHoverColor: theme.btnLinkHoverColor,\n      linkActiveColor: theme.btnLinkActiveColor,\n      linkHoverTextDecoration: theme.btnLinkHoverTextDecoration,\n      linkIconMarginRight: theme.btnLinkIconMarginRight,\n    },\n    theme,\n  );\n};\n"]}

package/components/Button/index.d.ts

@@ -1 +1 @@
-export { default, ButtonProps, ButtonState, ButtonSize, ButtonType, ButtonUse, isButton } from './Button';
+export * from './Button.js';

package/components/Button/index.js

@@ -1,5 +1,2 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var Button_1 = require("./Button");
-exports["default"] = Button_1["default"];
-exports.isButton = Button_1.isButton;
+export * from './Button.js';
+//# sourceMappingURL=index.js.map

package/components/Button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";;AAAA,mCAA0G;AAAjG,2BAAA,OAAO,CAAA;AAA+D,4BAAA,QAAQ,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../components/Button/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC","sourcesContent":["export * from './Button.js';\n"]}

package/components/Calendar/Calendar.d.ts

@@ -1,62 +1,110 @@
-import * as React from 'react';
-import * as CDS from './CalendarDateShape';
-import { MonthViewModel } from './MonthViewModel';
-import { Nullable } from '../../typings/utility-types';
-export declare type CalendarDateShape = CDS.CalendarDateShape;
-export interface CalendarProps {
-    initialMonth?: number;
-    initialYear?: number;
-    onSelect?: (date: CalendarDateShape) => void;
-    value?: Nullable<CalendarDateShape>;
-    maxDate?: CalendarDateShape;
-    minDate?: CalendarDateShape;
-    isHoliday?: (day: CalendarDateShape & {
-        isWeekend: boolean;
-    }) => boolean;
-}
-export interface CalendarState {
-    scrollPosition: number;
-    months: MonthViewModel[];
-    today: CalendarDateShape;
-    scrollDirection: number;
-    scrollTarget: number;
-}
-declare class Calendar extends React.Component<CalendarProps, CalendarState> {
-    static __KONTUR_REACT_UI__: string;
-    static defaultProps: {
-        holidays: never[];
-        minDate: {
-            year: number;
-            month: number;
-            date: number;
-        };
-        maxDate: {
-            year: number;
-            month: number;
-            date: number;
-        };
-    };
-    private theme;
-    private wheelEndTimeout;
-    private root;
-    private animation;
-    constructor(props: CalendarProps);
-    componentWillUnmount(): void;
-    render(): JSX.Element;
-    /**
-     * Scrolls calendar to given date
-     * @public
-     */
-    scrollToMonth: (month: number, year: number) => Promise<void>;
-    private renderMain;
-    private refRoot;
-    private renderMonth;
-    private getMonthPositions;
-    private handleMonthYearChange;
-    private handleWheel;
-    private handleWheelEnd;
-    private scrollToNearestWeek;
-    private scrollTo;
-    private scrollAmount;
-}
-export default Calendar;
+import React from 'react';
+import type { TGetRootNode } from '../../lib/rootNode/index.js';
+import type { CommonProps } from '../../internal/CommonWrapper/index.js';
+import type { Nullable, Range } from '../../typings/utility-types.js';
+import { MonthViewModel } from './MonthViewModel.js';
+import type { CalendarDayProps } from './CalendarDay.js';
+export interface CalendarProps extends CommonProps {
+    /** Задает функцию, которая вызывается при изменении value.
+     * @param {string} date - строка в формате `dd.mm.yyyy`. */
+    onValueChange?: (date: string) => void;
+    /** Задает текущую дату в формате `dd.mm.yyyy`. */
+    value: Nullable<string>;
+    /** Задает максимальную возможную дату в формате `dd.mm.yyyy`. */
+    maxDate?: string;
+    /** Задает минимальную возможную дату в формате `dd.mm.yyyy`. */
+    minDate?: string;
+    /** Задает начальную дату периода в формате `dd.mm.yyyy`. */
+    periodStartDate?: string;
+    /** Задает конечную дату периода в формате `dd.mm.yyyy`. */
+    periodEndDate?: string;
+    /** Задает функцию для определения праздничных дней.
+     * @default (_day, isWeekend) => isWeekend.
+     * @param {string} day - строка в формате `dd.mm.yyyy`.
+     * @param {boolean} isWeekend - флаг выходного (суббота или воскресенье).
+     * @returns {boolean} `true` для выходного или `false` для рабочего дня. */
+    isHoliday?: (day: string, isWeekend: boolean) => boolean;
+    /** Задает начальный месяц. */
+    initialMonth?: Range<1, 13>;
+    /** Задает начальный год. */
+    initialYear?: number;
+    /** Задает метод отрисовки дат в календаре.
+     * @default (props: CalendarDayProps) => <CalendarDay {...props} />
+     * @param {CalendarDayProps} props - параметры дня.
+     * @returns {ReactElement} элемент, который отрисовывает контент числа месяца. */
+    renderDay?: (props: CalendarDayProps) => React.ReactElement<unknown>;
+    /** Задает функцию, которая вызывается при каждом изменении месяца.
+     * @param {CalendarMonthChangeInfo} changeInfo - информация о изменении отображаемого месяца, где
+     * `month: number` - номер текущего отображаемого месяца от 1 до 12,
+     * `year: number` - отображаемый год. */
+    onMonthChange?: (changeInfo: CalendarMonthChangeInfo) => void;
+}
+export interface CalendarState {
+    scrollPosition: number;
+    months: MonthViewModel[];
+    scrollDirection: number;
+    scrollTarget: number;
+}
+export interface CalendarMonthChangeInfo {
+    month: number;
+    year: number;
+}
+export declare const CalendarDataTids: {
+    readonly root: "Calendar__root";
+    readonly month: "MonthView__month";
+    readonly dayCell: "DayCellView__root";
+    readonly headerMonth: "MonthView__headerMonth";
+    readonly headerYear: "MonthView__headerYear";
+};
+type DefaultProps = Required<Pick<CalendarProps, 'minDate' | 'maxDate' | 'isHoliday'>>;
+/**
+ * Компонент календаря `Calendar` из DatePicker'а помогает выбирать дату с помощью мыши.
+ */
+export declare class Calendar extends React.Component<CalendarProps, CalendarState> {
+    static __KONTUR_REACT_UI__: string;
+    static displayName: string;
+    static Day: React.MemoExoticComponent<import("../../lib/forwardRefAndName.js").ReactUIComponentWithRef<HTMLButtonElement, React.PropsWithChildren<CalendarDayProps>> & Record<never, never>>;
+    private static formatDate;
+    static defaultProps: DefaultProps;
+    private getProps;
+    private globalObject;
+    private emotion;
+    private cx;
+    private styles;
+    private theme;
+    private wheelEndTimeout;
+    private root;
+    private animation;
+    private touchStartY;
+    getRootNode: TGetRootNode;
+    private setRootNode;
+    constructor(props: CalendarProps);
+    componentDidUpdate(prevProps: Readonly<CalendarProps>, prevState: Readonly<CalendarState>): void;
+    componentWillUnmount(): void;
+    render(): React.JSX.Element;
+    /**
+     * Прокручивает календарь до переданной даты
+     * @public
+     */
+    scrollToMonth: (month: number, year: number) => Promise<void>;
+    private handleMonthChange;
+    private getViewModel;
+    private renderMain;
+    private refRoot;
+    private renderMonth;
+    private handleDateClick;
+    private getDateInNativeFormat;
+    private getMonthPositions;
+    private getVisibleMonths;
+    private handleMonthYearChange;
+    private executeAnimations;
+    private handleTouchStart;
+    private handleTouchMove;
+    private throttledHandleTouchMove;
+    private handleWheel;
+    private handleWheelEnd;
+    private scrollToNearestWeek;
+    private scrollTo;
+    private scrollAmount;
+}
+export {};