@astral/ui 4.69.0 → 4.71.0

package/components/DashboardSidebarSkeleton/DashboardSidebarSkeleton.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { dashboardSidebarClassnames } from '../DashboardSidebar/constants';
+import { dashboardSidebarClassnames } from '../DashboardLayout/DashboardSidebar/constants';
 import { Skeleton } from '../Skeleton';
 import { classNames } from '../utils/classNames';
 import { ItemWrapper, ListWrapper, SkeletonDescription, Wrapper, } from './styles';

package/components/DataGrid/Cell/Cell.js

@@ -30,6 +30,9 @@ const cellContentCva = cva(dataGridCellClassnames.cellContent, {
         isActionColumn: {
             true: dataGridCellClassnames.actionColumn,
         },
+        isTabularNums: {
+            true: dataGridCellClassnames.tabularNums,
+        },
     },
 });
 const columnLabelCva = cva(dataGridCellClassnames.columnLabel, {
@@ -40,7 +43,7 @@ const columnLabelCva = cva(dataGridCellClassnames.columnLabel, {
     },
 });
 export const Cell = (props) => {
-    const { formattedValue, hasStartAdornment, isActionColumn, label, hideTitleOnMobile, } = useLogic(props);
+    const { formattedValue, hasStartAdornment, isActionColumn, label, hideTitleOnMobile, isTabularNums, } = useLogic(props);
     const { className, startAdornment, row, cell, isDisabled, isHidePersonalData, isHideOnMobile, } = props;
     const { renderCell, align = 'left' } = cell;
     const hidePersonalDataClassname = useHidePersonalData({
@@ -51,7 +54,7 @@ export const Cell = (props) => {
             isDisabled,
             withStartAdornment: hasStartAdornment,
             align,
-        })), ...getInertProps(isDisabled), children: [startAdornment && startAdornment, _jsxs(CellContent, { className: cellContentCva({ isActionColumn }), children: [_jsx(ColumnLabel, { variant: "caption", color: "textSecondary", className: columnLabelCva({
+        })), ...getInertProps(isDisabled), children: [startAdornment && startAdornment, _jsxs(CellContent, { className: cellContentCva({ isActionColumn, isTabularNums }), children: [_jsx(ColumnLabel, { variant: "caption", color: "textSecondary", className: columnLabelCva({
                             hidden: hideTitleOnMobile || isActionColumn,
                         }), children: label }), renderCell?.(row), !renderCell && (_jsx(OverflowTypography, { rowsCount: 2, tooltipProps: { className: hidePersonalDataClassname }, children: _jsx(_Fragment, { children: formattedValue }) }))] })] }));
 };

package/components/DataGrid/Cell/constants.d.ts

@@ -11,4 +11,5 @@ export declare const dataGridCellClassnames: {
     alignCenter: string;
     alignRight: string;
     grouped: string;
+    tabularNums: string;
 };

package/components/DataGrid/Cell/constants.js

@@ -12,4 +12,5 @@ export const dataGridCellClassnames = {
     alignCenter: createUIKitClassname('data-grid__cell_align-center'),
     alignRight: createUIKitClassname('data-grid__cell_align-right'),
     grouped: createUIKitClassname('data-grid__cell_grouped'),
+    tabularNums: createUIKitClassname('data-grid__cell_tabular-nums'),
 };

package/components/DataGrid/Cell/styles.d.ts

@@ -10,6 +10,7 @@ export declare const ColumnLabel: import("../../styled").StyledComponent<import(
     component?: import("../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
     withoutCalt?: boolean | undefined;
+    isTabularNums?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/DataGrid/Cell/styles.js

@@ -83,6 +83,10 @@ export const ColumnLabel = styled(Typography) `
 export const CellContent = styled.div `
   min-width: 0;
 
+  &.${dataGridCellClassnames.tabularNums} {
+    font-feature-settings: "tnum" 1;
+  }
+
   ${({ theme }) => theme.breakpoints.down('sm')} {
     display: flex;
     flex-direction: column;

package/components/DataGrid/Cell/useLogic/useLogic.d.ts

@@ -7,5 +7,6 @@ export declare const useLogic: <TData extends Record<string, unknown>>({ row, ce
     isActionColumn: boolean;
     label: string | undefined;
     hideTitleOnMobile: boolean | undefined;
+    isTabularNums: boolean | undefined;
 };
 export {};

package/components/DataGrid/Cell/useLogic/useLogic.js

@@ -1,6 +1,9 @@
-import { useMemo } from 'react';
+import { useContext, useMemo } from 'react';
+import { DataGridContext } from '../../DataGridContext';
 export const useLogic = ({ row, cell, emptyCellValue, startAdornment, }) => {
-    const { format, field, label, hideTitleOnMobile } = cell;
+    const { isTabularNums: contextIsTabularNums } = useContext(DataGridContext);
+    const { format, field, label, hideTitleOnMobile, isTabularNums: cellIsTabularNums, } = cell;
+    const isTabularNums = cellIsTabularNums ?? contextIsTabularNums;
     const isValidValue = (value) => {
         return Boolean(value) || value === 0;
     };
@@ -21,5 +24,6 @@ export const useLogic = ({ row, cell, emptyCellValue, startAdornment, }) => {
         isActionColumn,
         label,
         hideTitleOnMobile,
+        isTabularNums,
     };
 };

package/components/DataGrid/DataGrid.js

@@ -50,7 +50,7 @@ const bodyCva = cva(dataGridClassnames.body, {
 export const DataGrid = (props) => {
     const { dataGridClassName, isDataGridDisabled, treeRenderConfig, headColumns, headProps, bodyProps, gridColumns, loaderProps, renderRows, isAllowHorizontalScroll, isHideHead, hasPinnedColumns, contentStateProps, rowHoverProps, containerRef, sections, isNoData, isMobile, mobileSkeletonProps, isLoading, containerCssVars, hasGroupedColumns, gridViewMode, } = useLogic(props);
     const { emptySymbol } = useContext(ConfigContext);
-    const { columns, selectedRows = [], minDisplayRows = MIN_DISPLAY_ROWS_BY_DEFAULT, variant = Variant.Tree, footer, noDataPlaceholder, subrows, keyId, activeRowId, emptyCellValue = emptySymbol, onRowClick, noDataOptions, headPreAddon, } = props;
+    const { columns, selectedRows = [], minDisplayRows = MIN_DISPLAY_ROWS_BY_DEFAULT, variant = Variant.Tree, footer, noDataPlaceholder, subrows, keyId, activeRowId, emptyCellValue = emptySymbol, onRowClick, noDataOptions, headPreAddon, isTabularNums, } = props;
     const { moreButtonColumnPosition = 1, isVisibleCollapseButton = true } = subrows || {};
     const { isInitialExpanded = false, expandedLevel = EXPANDED_LEVEL_BY_DEFAULT, initialVisibleChildrenCount = INITIAL_OPENED_NESTED_CHILDREN_COUNT_BY_DEFAULT, } = treeRenderConfig || {};
     const Wrapper = isDataGridDisabled
@@ -89,7 +89,7 @@ export const DataGrid = (props) => {
                     isDisabled: isDataGridDisabled,
                 }), isDisabled: isDataGridDisabled, headProps: headProps, gridColumns: gridColumns, bodyProps: commonBodyProps, isNoData: isNoData }) }));
     };
-    return (_jsx(DataGridContextProvider, { isLoading: isLoading, children: _jsxs(Container, { ref: containerRef, style: containerCssVars, className: classNames(dataGridClassName, dataGridCva({
+    return (_jsx(DataGridContextProvider, { isLoading: isLoading, isTabularNums: isTabularNums, children: _jsxs(Container, { ref: containerRef, style: containerCssVars, className: classNames(dataGridClassName, dataGridCva({
                 isAllowHorizontalScroll,
                 hasPinnedColumns,
                 gridViewMode,

package/components/DataGrid/DataGridContext/DataGridContext.d.ts

@@ -5,5 +5,6 @@ export type DataGridContextProps = {
     toggleOpenItems: (key: string) => void;
     toggleOpenMoreItems: (key: string) => void;
     isLoading?: boolean;
+    isTabularNums?: boolean;
 };
 export declare const DataGridContext: import("react").Context<DataGridContextProps>;

package/components/DataGrid/DataGridContext/DataGridContext.js

@@ -5,4 +5,5 @@ export const DataGridContext = createContext({
     toggleOpenItems: () => undefined,
     toggleOpenMoreItems: () => undefined,
     isLoading: false,
+    isTabularNums: false,
 });

package/components/DataGrid/DataGridContext/DataGridProvider/DataGridProvider.d.ts

@@ -1,7 +1,8 @@
 import { type ReactNode } from 'react';
 type DataGridContextProviderProps = {
     isLoading?: boolean;
+    isTabularNums?: boolean;
     children: ReactNode;
 };
-export declare const DataGridContextProvider: ({ isLoading, children, }: DataGridContextProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DataGridContextProvider: ({ isLoading, isTabularNums, children, }: DataGridContextProviderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/components/DataGrid/DataGridContext/DataGridProvider/DataGridProvider.js

@@ -5,7 +5,7 @@ const ROW_FLAGS_BY_DEFAULT = {
     isOpenedItems: true,
     iOpenedMoreItems: false,
 };
-export const DataGridContextProvider = ({ isLoading, children, }) => {
+export const DataGridContextProvider = ({ isLoading, isTabularNums, children, }) => {
     const [openedItems, setOpenedItems] = useState({});
     const checkIsOpened = useCallback((key) => {
         if (openedItems[key]) {
@@ -44,6 +44,7 @@ export const DataGridContextProvider = ({ isLoading, children, }) => {
         toggleOpenItems,
         toggleOpenMoreItems,
         isLoading,
+        isTabularNums,
     }), [
         checkIsOpened,
         checkIsMoreOpened,
@@ -51,6 +52,7 @@ export const DataGridContextProvider = ({ isLoading, children, }) => {
         toggleOpenMoreItems,
         isLoading,
         openedItems,
+        isTabularNums,
     ]);
     return (_jsx(DataGridContext.Provider, { value: contextValue, children: children }));
 };

package/components/DataGrid/Row/NestedChildren/styles.d.ts

@@ -14,12 +14,13 @@ export declare const MoreButtonRow: import("../../../styled").StyledComponent<{
     $isShowConnector: boolean;
     $gridColumns: string;
 }, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
-export declare const MoreButton: import("../../../styled").StyledComponent<Omit<import("../../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
+export declare const MoreButton: import("../../../styled").StyledComponent<Omit<import("../../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "size" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
     variant?: "light" | "link" | "text" | "contained" | "outlined" | undefined;
     loading?: boolean | undefined;
     color?: "primary" | "success" | "warning" | "error" | "grey" | undefined;
     component?: import("react").ElementType | undefined;
     selected?: boolean | undefined;
+    size?: "large" | "medium" | undefined;
 } & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & import("react").RefAttributes<HTMLButtonElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & {

package/components/DataGrid/Row/styles.d.ts

@@ -20,12 +20,13 @@ export declare const CollapseCell: import("../../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const CollapseButton: import("../../styled").StyledComponent<Omit<import("../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
+export declare const CollapseButton: import("../../styled").StyledComponent<Omit<import("../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "size" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
     variant?: "light" | "link" | "text" | "contained" | "outlined" | undefined;
     loading?: boolean | undefined;
     color?: "primary" | "success" | "warning" | "error" | "grey" | undefined;
     component?: import("react").ElementType | undefined;
     selected?: boolean | undefined;
+    size?: "large" | "medium" | undefined;
 } & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & import("react").RefAttributes<HTMLButtonElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
@@ -50,6 +51,7 @@ export declare const GroupedColumnLabel: import("../../styled").StyledComponent<
     component?: import("../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
     withoutCalt?: boolean | undefined;
+    isTabularNums?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/DataGrid/types.d.ts

@@ -177,6 +177,10 @@ export type DataGridProps<TData extends Record<string, CellValue> = DataGridRow,
      * @default standard
      */
     gridViewMode?: 'full' | 'standard';
+    /**
+     * Включает моноширинный шрифт для чисел в таблице
+     */
+    isTabularNums?: boolean;
 };
 export type DataGridSort<TSortField> = {
     /**
@@ -279,6 +283,10 @@ export type DataGridSingleColumn<TData extends Record<string, CellValue>> = {
      * Скрывает заголовок колонки на мобильных устройствах
      */
     hideTitleOnMobile?: boolean;
+    /**
+     * Включает моноширинный шрифт для чисел в колонке
+     */
+    isTabularNums?: boolean;
     children?: never;
 };
 export type DataGridColumns<TData extends Record<string, CellValue>> = DataGridSingleColumn<TData> | DataGridGroupColumn<TData>;

package/components/DataGridActionCell/DataGridMainActions/Action/MainIconButton/styles.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
-export declare const StyledIconButton: import("../../../../styled").StyledComponent<Omit<import("../../../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
+export declare const StyledIconButton: import("../../../../styled").StyledComponent<Omit<import("../../../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "size" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
     variant?: "light" | "link" | "text" | "contained" | "outlined" | undefined;
     loading?: boolean | undefined;
     color?: "primary" | "success" | "warning" | "error" | "grey" | undefined;
     component?: import("react").ElementType | undefined;
     selected?: boolean | undefined;
+    size?: "large" | "medium" | undefined;
 } & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & import("react").RefAttributes<HTMLButtonElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/DataGridActionCell/DataGridMainActions/Action/MobileMainButton/styles.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
-export declare const StyledButton: import("../../../../styled").StyledComponent<Omit<import("../../../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
+export declare const StyledButton: import("../../../../styled").StyledComponent<Omit<import("../../../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "size" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
     variant?: "light" | "link" | "text" | "contained" | "outlined" | undefined;
     loading?: boolean | undefined;
     color?: "primary" | "success" | "warning" | "error" | "grey" | undefined;
     component?: import("react").ElementType | undefined;
     selected?: boolean | undefined;
+    size?: "large" | "medium" | undefined;
 } & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & import("react").RefAttributes<HTMLButtonElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/DataGridActionCell/SecondaryActionsButton/styles.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
-export declare const StyledIconButton: import("../../styled").StyledComponent<Omit<import("../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
+export declare const StyledIconButton: import("../../styled").StyledComponent<Omit<import("../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "size" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
     variant?: "light" | "link" | "text" | "contained" | "outlined" | undefined;
     loading?: boolean | undefined;
     color?: "primary" | "success" | "warning" | "error" | "grey" | undefined;
     component?: import("react").ElementType | undefined;
     selected?: boolean | undefined;
+    size?: "large" | "medium" | undefined;
 } & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & import("react").RefAttributes<HTMLButtonElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/DataGridPagination/styles.d.ts

@@ -10,6 +10,7 @@ export declare const Range: import("../styled").StyledComponent<import("../Typog
     component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
     withoutCalt?: boolean | undefined;
+    isTabularNums?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/DataGridPaginationContainer/styles.d.ts

@@ -6,6 +6,7 @@ export declare const Range: import("../styled").StyledComponent<import("../Typog
     component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
     withoutCalt?: boolean | undefined;
+    isTabularNums?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/DatePicker/DateCalendar/DateCalendarHead/styles.d.ts

@@ -9,6 +9,7 @@ export declare const HeadText: import("../../../styled").StyledComponent<import(
     component?: import("../../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
     withoutCalt?: boolean | undefined;
+    isTabularNums?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/DatePicker/styles.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
-export declare const ConfirmButton: import("../styled").StyledComponent<Omit<import("..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
+export declare const ConfirmButton: import("../styled").StyledComponent<Omit<import("..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "size" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
     variant?: "light" | "link" | "text" | "contained" | "outlined" | undefined;
     loading?: boolean | undefined;
     color?: "primary" | "success" | "warning" | "error" | "grey" | undefined;
     component?: import("react").ElementType | undefined;
     selected?: boolean | undefined;
+    size?: "large" | "medium" | undefined;
 } & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & import("react").RefAttributes<HTMLButtonElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/Description/Description.d.ts

@@ -26,6 +26,10 @@ export type DescriptionProps = {
      * @default 'default'
      */
     direction?: 'default' | 'column' | 'row';
+    /**
+     * Включает моноширинные числа
+     */
+    isTabularNums?: boolean;
 };
 export declare const Description: {
     (props: DescriptionProps): import("react/jsx-runtime").JSX.Element;

package/components/Description/Description.js

@@ -17,12 +17,15 @@ const rootCva = cva(descriptionClassnames.root, {
             'space-between': descriptionClassnames.justifyContentSpaceBetween,
             start: descriptionClassnames.justifyContentStart,
         },
+        isTabularNums: {
+            true: descriptionClassnames.tabularNums,
+        },
     },
 });
 export const Description = (props) => {
     const { descriptionContextProviderProps, direction } = useLogic(props);
-    const { justifyContent = 'start', component = 'dl', children, leader = false, } = props;
-    return (_jsx(DescriptionContextProvider, { leader: leader, direction: direction, ...descriptionContextProviderProps, children: _jsx(Wrapper, { className: rootCva({ direction, justifyContent }), as: component, children: children }) }));
+    const { justifyContent = 'start', component = 'dl', children, leader = false, isTabularNums, } = props;
+    return (_jsx(DescriptionContextProvider, { leader: leader, direction: direction, ...descriptionContextProviderProps, children: _jsx(Wrapper, { className: rootCva({ direction, justifyContent, isTabularNums }), as: component, children: children }) }));
 };
 Description.Name = Name;
 Description.Value = Value;

package/components/Description/Value/Value.d.ts

@@ -1,6 +1,6 @@
 import { type ReactNode } from 'react';
 import { type TypographyProps } from '../../Typography';
-export type ValueProps = Pick<TypographyProps, 'color' | 'variant' | 'children'> & {
+export type ValueProps = Pick<TypographyProps, 'color' | 'variant' | 'children' | 'isTabularNums'> & {
     /**
      * @example <Description.Item stub="нет значения">value</Description.Item>
      * Заглушка, отображающаяся, если нет значения

package/components/Description/Value/styles.d.ts

@@ -16,6 +16,7 @@ export declare const StyledTypography: import("../../styled").StyledComponent<im
     component?: import("../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
     withoutCalt?: boolean | undefined;
+    isTabularNums?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & StyledTypographyProps, {}, {}>;
@@ -26,6 +27,7 @@ export declare const StyledCopyTypography: import("../../styled").StyledComponen
     component?: import("../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
     withoutCalt?: boolean | undefined;
+    isTabularNums?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & {
     copyText?: string | undefined;
     copyPosition?: "left" | "right" | undefined;

package/components/Description/constants.d.ts

@@ -8,4 +8,5 @@ export declare const descriptionClassnames: {
     justifyContentSpaceBetween: string;
     justifyContentStart: string;
     leader: string;
+    tabularNums: string;
 };

package/components/Description/constants.js

@@ -9,4 +9,5 @@ export const descriptionClassnames = {
     justifyContentSpaceBetween: createUIKitClassname('description_justify-content-space-between'),
     justifyContentStart: createUIKitClassname('description_justify-content-start'),
     leader: createUIKitClassname('description__leader'),
+    tabularNums: createUIKitClassname('description_tabular-nums'),
 };

package/components/Description/styles.js

@@ -8,6 +8,10 @@ export const Wrapper = styled.div `
 
   margin: 0;
 
+  &.${descriptionClassnames.tabularNums} {
+    font-feature-settings: "tnum" 1;
+  }
+
   &.${descriptionClassnames.directionColumn} {
     flex-direction: column;
   }

package/components/DescriptionList/DescriptionList.d.ts

@@ -1,2 +1,2 @@
 import type { DescriptionListProps } from './types';
-export declare const DescriptionList: ({ items, variant: listVariant, title, direction, alignNameWidth, leader, ...props }: DescriptionListProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DescriptionList: ({ items, variant: listVariant, title, direction, alignNameWidth, leader, isTabularNums: listIsTabularNums, ...props }: DescriptionListProps) => import("react/jsx-runtime").JSX.Element;

package/components/DescriptionList/DescriptionList.js

@@ -24,7 +24,7 @@ const descriptionItem = cva(descriptionListClassnames.item, {
         },
     },
 });
-export const DescriptionList = ({ items, variant: listVariant = 'default', title, direction, alignNameWidth, leader, ...props }) => {
+export const DescriptionList = ({ items, variant: listVariant = 'default', title, direction, alignNameWidth, leader, isTabularNums: listIsTabularNums, ...props }) => {
     const { descriptionItems, descriptionListStyles } = useLogic({
         items,
         alignNameWidth,
@@ -57,10 +57,11 @@ export const DescriptionList = ({ items, variant: listVariant = 'default', title
         return note;
     };
     const renderItem = (value, name, options) => {
-        const { nameMaxWidth, note, ...restOptions } = options || {};
+        const { nameMaxWidth, note, isTabularNums: itemIsTabularNums, ...restOptions } = options || {};
+        const isTabularNums = itemIsTabularNums ?? listIsTabularNums;
         return (_jsxs(DescriptionWrapper, { className: descriptionItem({
                 alignNameWidth: Boolean(alignNameWidth),
-            }), children: [_jsxs(Description, { direction: direction, leader: leader, ...props, component: "div", children: [_jsx(StyledDescriptionName, { "$nameMaxWidth": nameMaxWidth, "$direction": direction, children: name }), render(value, restOptions)] }), note && renderNote(note)] }, `${name}:${value}`));
+            }), children: [_jsxs(Description, { direction: direction, leader: leader, isTabularNums: isTabularNums, ...props, component: "div", children: [_jsx(StyledDescriptionName, { "$nameMaxWidth": nameMaxWidth, "$direction": direction, children: name }), render(value, restOptions)] }), note && renderNote(note)] }, `${name}:${value}`));
     };
     return (_jsxs(Wrapper, { className: descriptionList({ variant: listVariant }), style: descriptionListStyles, children: [title && renderTitle(), descriptionItems.map((group, groupIndex) => (_jsx(ListWrapper, { "$direction": direction, "$hasDivider": groupIndex !== 0, "$variant": listVariant, children: group.map(({ name, value, options }) => renderItem(value, name, options)) }, groupIndex)))] }));
 };

package/components/DescriptionList/styles.d.ts

@@ -20,7 +20,7 @@ export declare const ListWrapper: import("../styled").StyledComponent<{
     $variant?: DescriptionListVariant | undefined;
     $hasDivider: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDListElement>, HTMLDListElement>, {}>;
-export declare const StyledDescriptionValue: import("../styled").StyledComponent<Pick<import("../Typography").TypographyProps, "color" | "children" | "variant"> & {
+export declare const StyledDescriptionValue: import("../styled").StyledComponent<Pick<import("../Typography").TypographyProps, "color" | "children" | "variant" | "isTabularNums"> & {
     stub?: import("react").ReactNode;
     canCopy?: boolean | undefined;
     copyPosition?: "left" | "right" | undefined;
@@ -42,6 +42,7 @@ export declare const Title: import("../styled").StyledComponent<import("../Typog
     component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
     withoutCalt?: boolean | undefined;
+    isTabularNums?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/DescriptionList/types.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 import type { DescriptionProps } from '../Description';
 import type { ValueProps } from '../Description/Value';
-export type DescriptionOptions = Pick<ValueProps, 'canCopy' | 'copyPosition' | 'color' | 'copyText'> & {
+export type DescriptionOptions = Pick<ValueProps, 'canCopy' | 'copyPosition' | 'color' | 'copyText' | 'isTabularNums'> & {
     nameMaxWidth?: string;
     /**
      *  Вариант отображения Value в списке
@@ -23,7 +23,7 @@ export type DescriptionListItem = {
     options?: DescriptionOptions;
 };
 export type DescriptionListVariant = 'contained' | 'default';
-export type DescriptionListProps = Pick<DescriptionProps, 'justifyContent' | 'leader' | 'separator' | 'direction'> & {
+export type DescriptionListProps = Pick<DescriptionProps, 'justifyContent' | 'leader' | 'separator' | 'direction' | 'isTabularNums'> & {
     /**
      * Список отображаемых "name: value"
      */

package/components/Fieldset/styles.d.ts

@@ -12,6 +12,7 @@ export declare const Title: import("../styled").StyledComponent<import("../Typog
     component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
     withoutCalt?: boolean | undefined;
+    isTabularNums?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
@@ -22,6 +23,7 @@ export declare const Description: import("../styled").StyledComponent<import("..
     component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
     withoutCalt?: boolean | undefined;
+    isTabularNums?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/Filename/styles.d.ts

@@ -14,6 +14,7 @@ export declare const StyledTypography: import("../styled").StyledComponent<impor
     component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
     withoutCalt?: boolean | undefined;
+    isTabularNums?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 } & {

package/components/FlowButton/styles.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
-export declare const StyledButton: import("../styled").StyledComponent<Omit<import("..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
+export declare const StyledButton: import("../styled").StyledComponent<Omit<import("..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "size" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
     variant?: "light" | "link" | "text" | "contained" | "outlined" | undefined;
     loading?: boolean | undefined;
     color?: "primary" | "success" | "warning" | "error" | "grey" | undefined;
     component?: import("react").ElementType | undefined;
     selected?: boolean | undefined;
+    size?: "large" | "medium" | undefined;
 } & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & import("react").RefAttributes<HTMLButtonElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
@@ -15,6 +16,7 @@ export declare const TargetTextWrapper: import("../styled").StyledComponent<impo
     component?: import("../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
     withoutCalt?: boolean | undefined;
+    isTabularNums?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/IconButton/IconButton.d.ts

@@ -1,10 +1,11 @@
 import { type ElementType } from 'react';
 import { type ButtonProps } from '../Button';
 export type IconButtonProps<TComponent extends ElementType = ElementType> = ButtonProps<TComponent>;
-export declare const IconButton: <TComponent extends ElementType>(props: Omit<import("..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
+export declare const IconButton: <TComponent extends ElementType>(props: Omit<import("..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "size" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
     variant?: "light" | "link" | "text" | "contained" | "outlined" | undefined;
     loading?: boolean | undefined;
     color?: "primary" | "success" | "warning" | "error" | "grey" | undefined;
     component?: TComponent | undefined;
     selected?: boolean | undefined;
+    size?: "large" | "medium" | undefined;
 } & Omit<import("react").ComponentPropsWithRef<ElementType extends TComponent ? "button" : TComponent>, ""> & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;

package/components/IconButton/styles.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
-export declare const StyledButton: import("../styled").StyledComponent<Omit<import("..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
+export declare const StyledButton: import("../styled").StyledComponent<Omit<import("..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "size" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
     variant?: "light" | "link" | "text" | "contained" | "outlined" | undefined;
     loading?: boolean | undefined;
     color?: "primary" | "success" | "warning" | "error" | "grey" | undefined;
     component?: import("react").ElementType | undefined;
     selected?: boolean | undefined;
+    size?: "large" | "medium" | undefined;
 } & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & import("react").RefAttributes<HTMLButtonElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/JsonViewer/NodeValue/styles.d.ts

@@ -343,6 +343,7 @@ export declare const Value: import("../../styled").StyledComponent<import("../..
     component?: import("../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
     withoutCalt?: boolean | undefined;
+    isTabularNums?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement> & {
@@ -357,6 +358,7 @@ export declare const CopyWrapper: import("../../styled").StyledComponent<import(
     component?: import("../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
     withoutCalt?: boolean | undefined;
+    isTabularNums?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & {
     copyText?: string | undefined;
     copyPosition?: "left" | "right" | undefined;
@@ -1043,6 +1045,7 @@ export declare const GuidValue: import("../../styled").StyledComponent<import(".
     component?: import("../../Typography/types").ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
     withoutCalt?: boolean | undefined;
+    isTabularNums?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & {
     children?: import("react").ReactNode;
 } & {