@astral/ui 4.70.0 → 4.71.0

package/components/MinimalisticPagination/styles.d.ts

@@ -6,6 +6,7 @@ export declare const PageItem: import("../styled").StyledComponent<import("../Ty
     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/NavMenu/Item/ItemButton/styles.d.ts

@@ -632,6 +632,7 @@ export declare const NavMenuItemButtonText: import("../../../styled").StyledComp
     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> & {

package/components/NewStepper/Step/Description/styles.d.ts

@@ -6,6 +6,7 @@ export declare const StyledTypography: 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/NewStepper/Step/Label/styles.d.ts

@@ -10,6 +10,7 @@ export declare const MobileCompactLabel: import("../../../styled").StyledCompone
     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;
 }, {}, {}>;
@@ -20,6 +21,7 @@ export declare const DesktopLabel: import("../../../styled").StyledComponent<imp
     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/NotFoundPage/styles.d.ts

@@ -10,6 +10,7 @@ export declare const Header: import("../styled").StyledComponent<import("../Typo
     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;
 }, {}, {}>;
@@ -20,6 +21,7 @@ export declare const Subheader: import("../styled").StyledComponent<import("../T
     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/Notification/NotificationTemplate/styles.d.ts

@@ -21,6 +21,7 @@ export declare const Content: 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;
 }, {}, {}>;
@@ -49,6 +50,7 @@ export declare const Title: 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/NotificationList/ListItem/styles.d.ts

@@ -11,6 +11,7 @@ export declare const Title: 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/OverflowTypography/OverflowTypography.d.ts

@@ -344,6 +344,7 @@ export declare const OverflowTypography: import("react").ForwardRefExoticCompone
     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>>;

package/components/OverflowTypography/styles.d.ts

@@ -10,6 +10,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;
 } & OverflowTypographyWrapperProps, {}, {}>;
@@ -20,6 +21,7 @@ export declare const Wrapper: import("../styled").StyledComponent<import("../Typ
     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/PageContent/PageContentHeader/Title/styles.d.ts

@@ -6,6 +6,7 @@ export declare const TitleWrapper: import("../../../styled").StyledComponent<imp
     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/PageHeader/HeaderContent/Description/styles.d.ts

@@ -6,6 +6,7 @@ export declare const StyledTypography: 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/PageHeader/Title/styles.d.ts

@@ -6,6 +6,7 @@ export declare const TitleWrapper: 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/Pagination/PaginationItem/styles.d.ts

@@ -6,6 +6,7 @@ export declare const Ellipsis: 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/PinButton/styles.d.ts

@@ -16,6 +16,7 @@ export declare const Content: import("../styled").StyledComponent<import("../Typ
     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/ProductSwitcher/Content/styles.d.ts

@@ -20,6 +20,7 @@ export declare const ProductName: 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/Tree/TreeItem/styles.d.ts

@@ -49,6 +49,7 @@ export declare const Label: 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;
 }, {}, {}>;
@@ -395,6 +396,7 @@ export declare const Note: 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> & {

package/components/Typography/Typography.d.ts

@@ -13,4 +13,5 @@ export declare const Typography: import("react").ForwardRefExoticComponent<impor
     component?: ComponentProp | undefined;
     isUpperCase?: boolean | undefined;
     withoutCalt?: boolean | undefined;
+    isTabularNums?: boolean | undefined;
 } & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement>>;

package/components/Typography/Typography.js

@@ -1,12 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { classNames } from '../utils/classNames';
+import { cva } from '../utils/cva';
 import { typographyClassnames } from './constants';
 import { useTypographyColor } from './hooks';
 import { TypographyWrapper } from './styles';
-export const Typography = forwardRef(({ children, color, colorIntensity = '800', component, withoutCalt, className, ...props }, ref) => {
+const typographyCva = cva(typographyClassnames.root, {
+    variants: {
+        isTabularNums: {
+            true: typographyClassnames.tabularNums,
+        },
+        withoutCalt: {
+            true: typographyClassnames.withoutCalt,
+        },
+    },
+});
+export const Typography = forwardRef(({ children, color, colorIntensity = '800', component, withoutCalt, className, isTabularNums, ...props }, ref) => {
     const typographyColor = useTypographyColor({ color, colorIntensity });
-    return (_jsx(TypographyWrapper, { ref: ref, ...props, component: component, color: typographyColor, className: classNames(typographyClassnames.root, className, {
-            [typographyClassnames.withoutCalt]: withoutCalt,
-        }), children: children }));
+    return (_jsx(TypographyWrapper, { ref: ref, ...props, component: component, color: typographyColor, className: classNames(typographyCva({ isTabularNums, withoutCalt }), className), children: children }));
 });

package/components/Typography/constants.d.ts

@@ -1,4 +1,5 @@
 export declare const typographyClassnames: {
     root: string;
     withoutCalt: string;
+    tabularNums: string;
 };

package/components/Typography/constants.js

@@ -1,5 +1,6 @@
 import { createUIKitClassname } from '../utils/createUIKitClassname';
 export const typographyClassnames = {
     root: createUIKitClassname('typography'),
-    withoutCalt: 'typography_without-calt',
+    withoutCalt: createUIKitClassname('typography_without-calt'),
+    tabularNums: createUIKitClassname('typography_tabular-nums'),
 };

package/components/Typography/styles.js

@@ -9,4 +9,8 @@ export const TypographyWrapper = styled(Typography, {
   .${typographyClassnames.withoutCalt} {
     font-feature-settings: "calt" 0;
   }
+
+  &.${typographyClassnames.tabularNums} {
+    font-feature-settings: "tnum" 1;
+  }
 `;

package/components/Typography/types.d.ts

@@ -35,4 +35,8 @@ export type TypographyProps = TypographyPropsBase & {
      * Отключает контекстные альтернативы шрифта. Подробнее в [документации](https://ui-kit.astral.ru/?path=/docs/getting-started-fonts--docs)
      */
     withoutCalt?: boolean;
+    /**
+     * Включает моноширинные цифры.
+     */
+    isTabularNums?: boolean;
 } & HTMLAttributes<HTMLParagraphElement>;

package/components/WelcomeScreen/styles.d.ts

@@ -22,6 +22,7 @@ export declare const Greeting: import("../styled").StyledComponent<import("../Ty
     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;
 }, {}, {}>;
@@ -32,6 +33,7 @@ export declare const UserName: import("../styled").StyledComponent<import("../Ty
     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/fileUploading/FileInfo/styles.d.ts

@@ -350,6 +350,7 @@ export declare const FileSize: 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/placeholders/Placeholder/styles.d.ts

@@ -18,6 +18,7 @@ export declare const Title: 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;
 } & WithSize, {}, {}>;
@@ -28,6 +29,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;
 } & WithSize, {}, {}>;

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

@@ -10,6 +10,7 @@ export declare const Description: import("../../../components/styled").StyledCom
     component?: import("../../../components/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/hook-form/EditableText/styles.d.ts

@@ -6,6 +6,7 @@ export declare const DisplayValue: import("../../components/styled").StyledCompo
     component?: import("../../components/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/node/components/Accordion/styles.d.ts

@@ -26,6 +26,7 @@ export declare const Summary: import("@emotion/styled/dist/declarations/src/type
     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/node/components/Alert/styles.d.ts

@@ -31,6 +31,7 @@ export declare const StyledTypography: import("@emotion/styled/dist/declarations
     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;
 }, {}, {}>;
@@ -41,6 +42,7 @@ export declare const Title: import("@emotion/styled/dist/declarations/src/types"
     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/node/components/AutoSaveIndicator/styles.d.ts

@@ -14,6 +14,7 @@ export declare const StyledTypography: import("@emotion/styled/dist/declarations
     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;
 }, {}, {}>;
@@ -34,6 +35,7 @@ export declare const IndicatorTypography: import("@emotion/styled/dist/declarati
     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/node/components/BottomDrawer/styles.d.ts

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

package/node/components/Chip/styles.d.ts

@@ -22,6 +22,7 @@ export declare const AdornmentWrapper: import("@emotion/styled/dist/declarations
     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/node/components/CodeField/styles.d.ts

@@ -24,6 +24,7 @@ export declare const FieldLabel: import("@emotion/styled/dist/declarations/src/t
     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/node/components/CollapsibleTypography/CollapsibleTypography.d.ts

@@ -30,6 +30,7 @@ export declare const CollapsibleTypography: import("react").ForwardRefExoticComp
     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>>;

package/node/components/CollapsibleTypography/styles.d.ts

@@ -15,6 +15,7 @@ export declare const Wrapper: import("@emotion/styled/dist/declarations/src/type
     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;
 } & CollapsibleTypographyWrapperProps, {}, {}>;

package/node/components/ConfirmAction/styles.d.ts

@@ -10,6 +10,7 @@ export declare const StyledTypography: import("@emotion/styled/dist/declarations
     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/node/components/CopyTypography/styles.d.ts

@@ -6,6 +6,7 @@ export declare const Wrapper: import("@emotion/styled/dist/declarations/src/type
     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/node/components/CopyTypography/useLogic/useLogic.d.ts

@@ -16,6 +16,7 @@ export declare const useLogic: ({ children, copyPosition, copyText, isShowCopyTe
         component?: import("../../Typography/types").ComponentProp | undefined;
         isUpperCase?: boolean | undefined;
         withoutCalt?: boolean | undefined;
+        isTabularNums?: boolean | undefined;
         defaultChecked?: boolean | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined;

package/node/components/DashboardSidebarPopover/styles.d.ts

@@ -10,6 +10,7 @@ export declare const Title: import("@emotion/styled/dist/declarations/src/types"
     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/node/components/DataGrid/Cell/Cell.js

@@ -33,6 +33,9 @@ const cellContentCva = (0, cva_1.cva)(constants_1.dataGridCellClassnames.cellCon
         isActionColumn: {
             true: constants_1.dataGridCellClassnames.actionColumn,
         },
+        isTabularNums: {
+            true: constants_1.dataGridCellClassnames.tabularNums,
+        },
     },
 });
 const columnLabelCva = (0, cva_1.cva)(constants_1.dataGridCellClassnames.columnLabel, {
@@ -43,7 +46,7 @@ const columnLabelCva = (0, cva_1.cva)(constants_1.dataGridCellClassnames.columnL
     },
 });
 const Cell = (props) => {
-    const { formattedValue, hasStartAdornment, isActionColumn, label, hideTitleOnMobile, } = (0, useLogic_1.useLogic)(props);
+    const { formattedValue, hasStartAdornment, isActionColumn, label, hideTitleOnMobile, isTabularNums, } = (0, useLogic_1.useLogic)(props);
     const { className, startAdornment, row, cell, isDisabled, isHidePersonalData, isHideOnMobile, } = props;
     const { renderCell, align = 'left' } = cell;
     const hidePersonalDataClassname = (0, personalDataSecurity_1.useHidePersonalData)({
@@ -54,7 +57,7 @@ const Cell = (props) => {
             isDisabled,
             withStartAdornment: hasStartAdornment,
             align,
-        })), ...(0, getInertProps_1.getInertProps)(isDisabled), children: [startAdornment && startAdornment, (0, jsx_runtime_1.jsxs)(styles_1.CellContent, { className: cellContentCva({ isActionColumn }), children: [(0, jsx_runtime_1.jsx)(styles_1.ColumnLabel, { variant: "caption", color: "textSecondary", className: columnLabelCva({
+        })), ...(0, getInertProps_1.getInertProps)(isDisabled), children: [startAdornment && startAdornment, (0, jsx_runtime_1.jsxs)(styles_1.CellContent, { className: cellContentCva({ isActionColumn, isTabularNums }), children: [(0, jsx_runtime_1.jsx)(styles_1.ColumnLabel, { variant: "caption", color: "textSecondary", className: columnLabelCva({
                             hidden: hideTitleOnMobile || isActionColumn,
                         }), children: label }), renderCell?.(row), !renderCell && ((0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, { rowsCount: 2, tooltipProps: { className: hidePersonalDataClassname }, children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: formattedValue }) }))] })] }));
 };

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

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

package/node/components/DataGrid/Cell/constants.js

@@ -15,4 +15,5 @@ exports.dataGridCellClassnames = {
     alignCenter: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__cell_align-center'),
     alignRight: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__cell_align-right'),
     grouped: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__cell_grouped'),
+    tabularNums: (0, createUIKitClassname_1.createUIKitClassname)('data-grid__cell_tabular-nums'),
 };

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

@@ -10,6 +10,7 @@ export declare const ColumnLabel: import("@emotion/styled/dist/declarations/src/
     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/node/components/DataGrid/Cell/styles.js

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

package/node/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/node/components/DataGrid/Cell/useLogic/useLogic.js

@@ -2,8 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
+const DataGridContext_1 = require("../../DataGridContext");
 const useLogic = ({ row, cell, emptyCellValue, startAdornment, }) => {
-    const { format, field, label, hideTitleOnMobile } = cell;
+    const { isTabularNums: contextIsTabularNums } = (0, react_1.useContext)(DataGridContext_1.DataGridContext);
+    const { format, field, label, hideTitleOnMobile, isTabularNums: cellIsTabularNums, } = cell;
+    const isTabularNums = cellIsTabularNums ?? contextIsTabularNums;
     const isValidValue = (value) => {
         return Boolean(value) || value === 0;
     };
@@ -24,6 +27,7 @@ const useLogic = ({ row, cell, emptyCellValue, startAdornment, }) => {
         isActionColumn,
         label,
         hideTitleOnMobile,
+        isTabularNums,
     };
 };
 exports.useLogic = useLogic;

package/node/components/DataGrid/DataGrid.js

@@ -53,7 +53,7 @@ const bodyCva = (0, cva_1.cva)(constants_1.dataGridClassnames.body, {
 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, } = (0, useLogic_1.useLogic)(props);
     const { emptySymbol } = (0, react_1.useContext)(ConfigProvider_1.ConfigContext);
-    const { columns, selectedRows = [], minDisplayRows = constants_1.MIN_DISPLAY_ROWS_BY_DEFAULT, variant = enums_1.Variant.Tree, footer, noDataPlaceholder, subrows, keyId, activeRowId, emptyCellValue = emptySymbol, onRowClick, noDataOptions, headPreAddon, } = props;
+    const { columns, selectedRows = [], minDisplayRows = constants_1.MIN_DISPLAY_ROWS_BY_DEFAULT, variant = enums_1.Variant.Tree, footer, noDataPlaceholder, subrows, keyId, activeRowId, emptyCellValue = emptySymbol, onRowClick, noDataOptions, headPreAddon, isTabularNums, } = props;
     const { moreButtonColumnPosition = 1, isVisibleCollapseButton = true } = subrows || {};
     const { isInitialExpanded = false, expandedLevel = constants_1.EXPANDED_LEVEL_BY_DEFAULT, initialVisibleChildrenCount = constants_1.INITIAL_OPENED_NESTED_CHILDREN_COUNT_BY_DEFAULT, } = treeRenderConfig || {};
     const Wrapper = isDataGridDisabled
@@ -92,7 +92,7 @@ const DataGrid = (props) => {
                     isDisabled: isDataGridDisabled,
                 }), isDisabled: isDataGridDisabled, headProps: headProps, gridColumns: gridColumns, bodyProps: commonBodyProps, isNoData: isNoData }) }));
     };
-    return ((0, jsx_runtime_1.jsx)(DataGridContext_1.DataGridContextProvider, { isLoading: isLoading, children: (0, jsx_runtime_1.jsxs)(styles_1.Container, { ref: containerRef, style: containerCssVars, className: (0, classNames_1.classNames)(dataGridClassName, dataGridCva({
+    return ((0, jsx_runtime_1.jsx)(DataGridContext_1.DataGridContextProvider, { isLoading: isLoading, isTabularNums: isTabularNums, children: (0, jsx_runtime_1.jsxs)(styles_1.Container, { ref: containerRef, style: containerCssVars, className: (0, classNames_1.classNames)(dataGridClassName, dataGridCva({
                 isAllowHorizontalScroll,
                 hasPinnedColumns,
                 gridViewMode,

package/node/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/node/components/DataGrid/DataGridContext/DataGridContext.js

@@ -8,4 +8,5 @@ exports.DataGridContext = (0, react_1.createContext)({
     toggleOpenItems: () => undefined,
     toggleOpenMoreItems: () => undefined,
     isLoading: false,
+    isTabularNums: false,
 });

package/node/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/node/components/DataGrid/DataGridContext/DataGridProvider/DataGridProvider.js

@@ -8,7 +8,7 @@ const ROW_FLAGS_BY_DEFAULT = {
     isOpenedItems: true,
     iOpenedMoreItems: false,
 };
-const DataGridContextProvider = ({ isLoading, children, }) => {
+const DataGridContextProvider = ({ isLoading, isTabularNums, children, }) => {
     const [openedItems, setOpenedItems] = (0, react_1.useState)({});
     const checkIsOpened = (0, react_1.useCallback)((key) => {
         if (openedItems[key]) {
@@ -47,6 +47,7 @@ const DataGridContextProvider = ({ isLoading, children, }) => {
         toggleOpenItems,
         toggleOpenMoreItems,
         isLoading,
+        isTabularNums,
     }), [
         checkIsOpened,
         checkIsMoreOpened,
@@ -54,6 +55,7 @@ const DataGridContextProvider = ({ isLoading, children, }) => {
         toggleOpenMoreItems,
         isLoading,
         openedItems,
+        isTabularNums,
     ]);
     return ((0, jsx_runtime_1.jsx)(DataGridContext_1.DataGridContext.Provider, { value: contextValue, children: children }));
 };