@astral/ui 4.46.0 → 4.47.0

package/components/ComplianceStatus/ComplianceStatus.d.ts

@@ -1,44 +1,2 @@
-import { type ReactNode } from 'react';
-type ItemStatus = 'success' | 'reject' | 'default' | 'loading';
-type BackgroundColor = 'grey' | 'primary';
-type Variant = 'plain' | 'contained';
-export type ComplianceStatusItem = {
-    /**
-     * Текст для отображения в элементе списка
-     */
-    text: ReactNode;
-    /**
-     * Статус элемента
-     */
-    status: ItemStatus;
-};
-export type ComplianceStatusProps = {
-    /**
-     * Основной заголовок элемента
-     */
-    title?: string | null;
-    /**
-     * Пропс для добавления контента между заголовком и списком
-     */
-    subtitle?: ReactNode;
-    /**
-     * Пропс для добавления контента после списка
-     */
-    children?: ReactNode;
-    /**
-     * Элементы списка
-     */
-    itemsList: ComplianceStatusItem[];
-    /**
-     * Фоновый цвет
-     * @default grey
-     */
-    backgroundColor?: BackgroundColor;
-    /**
-     * Вариант отображения блока статусов
-     * @default contained
-     */
-    variant?: Variant;
-};
+import type { ComplianceStatusProps } from './types';
 export declare const ComplianceStatus: ({ title, itemsList, children, subtitle, backgroundColor, variant, }: ComplianceStatusProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/components/ComplianceStatus/ComplianceStatus.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
 import { OverflowTypography } from '../OverflowTypography';
 import { Typography } from '../Typography';
+import { complianceStatusClassnames, complianceStatusColorClassnames, complianceStatusVariantClassnames, } from './constants';
 import { EmptyIcon, Inner, Item, RejectIcon, StyledLoader, SuccessIcon, Wrapper, } from './styles';
 const ICON_BY_STATUS = {
     default: _jsx(EmptyIcon, {}),
@@ -8,8 +10,21 @@ const ICON_BY_STATUS = {
     reject: _jsx(RejectIcon, {}),
     loading: _jsx(StyledLoader, {}),
 };
+const complianceStatus = cva(complianceStatusClassnames.root, {
+    variants: {
+        backgroundColor: {
+            grey: complianceStatusColorClassnames.grey,
+            primary: complianceStatusColorClassnames.primary,
+        },
+        variant: {
+            contained: complianceStatusVariantClassnames.contained,
+            outlined: complianceStatusVariantClassnames.outlined,
+            plain: complianceStatusVariantClassnames.plain,
+        },
+    },
+});
 export const ComplianceStatus = ({ title, itemsList, children, subtitle, backgroundColor = 'grey', variant = 'contained', }) => {
-    return (_jsxs(Wrapper, { "$background": backgroundColor, "$variant": variant, children: [title && (_jsx(OverflowTypography, { variant: "h6", component: "h4", children: title })), subtitle, _jsx(Inner, { children: itemsList.map(({ text, status }, index) => (
+    return (_jsxs(Wrapper, { className: complianceStatus({ backgroundColor, variant }), children: [title && (_jsx(OverflowTypography, { className: complianceStatusClassnames.title, variant: "h6", component: "h4", children: title })), subtitle, _jsx(Inner, { className: complianceStatusClassnames.list, children: itemsList.map(({ text, status }, index) => (
                 // biome-ignore lint/suspicious/noArrayIndexKey: Элементы статичны
-                _jsxs(Item, { children: [ICON_BY_STATUS[status], _jsx(Typography, { children: text })] }, index))) }), children] }));
+                _jsxs(Item, { className: complianceStatusClassnames.item, children: [ICON_BY_STATUS[status], _jsx(Typography, { children: text })] }, index))) }), children] }));
 };

package/components/ComplianceStatus/constants.d.ts

@@ -0,0 +1,14 @@
+import type { BackgroundColor, Variant } from './types';
+export declare const complianceStatusColorClassnames: Record<BackgroundColor, string>;
+export declare const complianceStatusVariantClassnames: Record<Variant, string>;
+export declare const complianceStatusClassnames: {
+    contained: string;
+    outlined: string;
+    plain: string;
+    primary: string;
+    grey: string;
+    root: string;
+    title: string;
+    list: string;
+    item: string;
+};

package/components/ComplianceStatus/constants.js

@@ -0,0 +1,18 @@
+import { createUIKitClassname } from '../utils/createUIKitClassname';
+export const complianceStatusColorClassnames = {
+    grey: createUIKitClassname('compliance-status_color-grey'),
+    primary: createUIKitClassname('compliance-status_color-primary'),
+};
+export const complianceStatusVariantClassnames = {
+    plain: createUIKitClassname('compliance-status_variant-plain'),
+    contained: createUIKitClassname('compliance-status_variant-contained'),
+    outlined: createUIKitClassname('compliance-status_variant-outlined'),
+};
+export const complianceStatusClassnames = {
+    root: createUIKitClassname('compliance-status'),
+    title: createUIKitClassname('compliance-status__title'),
+    list: createUIKitClassname('compliance-status__list'),
+    item: createUIKitClassname('compliance-status__item'),
+    ...complianceStatusColorClassnames,
+    ...complianceStatusVariantClassnames,
+};

package/components/ComplianceStatus/index.d.ts

@@ -1 +1,2 @@
-export { ComplianceStatus, type ComplianceStatusItem, type ComplianceStatusProps, } from './ComplianceStatus';
+export { ComplianceStatus } from './ComplianceStatus';
+export type { ComplianceStatusItem, ComplianceStatusProps } from './types';

package/components/ComplianceStatus/index.js

@@ -1 +1 @@
-export { ComplianceStatus, } from './ComplianceStatus';
+export { ComplianceStatus } from './ComplianceStatus';

package/components/ComplianceStatus/public.d.ts

@@ -1 +1,2 @@
-export { ComplianceStatus, type ComplianceStatusItem, type ComplianceStatusProps, } from './ComplianceStatus';
+export { ComplianceStatus } from './ComplianceStatus';
+export type { ComplianceStatusItem, ComplianceStatusProps } from './types';

package/components/ComplianceStatus/public.js

@@ -1 +1 @@
-export { ComplianceStatus, } from './ComplianceStatus';
+export { ComplianceStatus } from './ComplianceStatus';

package/components/ComplianceStatus/styles.d.ts

@@ -1,11 +1,7 @@
 /// <reference types="react" />
-type Variant = 'plain' | 'contained';
 export declare const Wrapper: import("../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-} & {
-    $background: 'grey' | 'primary';
-    $variant: Variant;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
 export declare const Inner: import("../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
@@ -51,4 +47,3 @@ export declare const SuccessIcon: import("../styled").StyledComponent<{
 export declare const StyledLoader: import("../styled").StyledComponent<import("../Loader").LoaderProps & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
-export {};

package/components/ComplianceStatus/styles.js

@@ -4,6 +4,7 @@ import { SuccessFillSm } from '../../icons/SuccessFillSm';
 import { Loader } from '../Loader';
 import { keyframes, styled } from '../styled';
 import { listContainer } from '../styled/mixins';
+import { complianceStatusClassnames } from './constants';
 const iconAppearAnimation = keyframes `
   from {
     transform: scale(0);
@@ -14,14 +15,31 @@ const iconAppearAnimation = keyframes `
     opacity: 1;
   }
 `;
-export const Wrapper = styled('article') `
+export const Wrapper = styled.article `
   display: grid;
   grid-gap: ${({ theme }) => theme.spacing(2)};
 
-  padding: ${({ theme, $variant }) => $variant === 'contained' ? theme.spacing(3) : 0};
+  background-color: inherit;
 
-  background-color: ${({ theme, $background, $variant }) => $variant === 'contained' ? theme.palette[$background][100] : 'inherit'};
   border-radius: ${({ theme }) => theme.shape.medium};
+
+  &.${complianceStatusClassnames.contained} {
+    padding: ${({ theme }) => theme.spacing(3)};
+
+    &.${complianceStatusClassnames.primary} {
+      background-color: ${({ theme }) => theme.palette.primary[100]};
+    }
+
+    &.${complianceStatusClassnames.grey} {
+      background-color: ${({ theme }) => theme.palette.grey[100]};
+    }
+  }
+
+  &.${complianceStatusClassnames.outlined} {
+    padding: ${({ theme }) => theme.spacing(3)};
+
+    border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  }
 `;
 export const Inner = styled('ul') `
   display: grid;

package/components/ComplianceStatus/types.d.ts

@@ -0,0 +1,42 @@
+import type { ReactNode } from 'react';
+export type ItemStatus = 'success' | 'reject' | 'default' | 'loading';
+export type BackgroundColor = 'grey' | 'primary';
+export type Variant = 'plain' | 'contained' | 'outlined';
+export type ComplianceStatusItem = {
+    /**
+     * Текст для отображения в элементе списка
+     */
+    text: ReactNode;
+    /**
+     * Статус элемента
+     */
+    status: ItemStatus;
+};
+export type ComplianceStatusProps = {
+    /**
+     * Основной заголовок элемента
+     */
+    title?: string | null;
+    /**
+     * Пропс для добавления контента между заголовком и списком
+     */
+    subtitle?: ReactNode;
+    /**
+     * Пропс для добавления контента после списка
+     */
+    children?: ReactNode;
+    /**
+     * Элементы списка
+     */
+    itemsList: ComplianceStatusItem[];
+    /**
+     * Фоновый цвет
+     * @default grey
+     */
+    backgroundColor?: BackgroundColor;
+    /**
+     * Вариант отображения блока статусов
+     * @default contained
+     */
+    variant?: Variant;
+};

package/components/ComplianceStatus/types.js

@@ -0,0 +1 @@
+export {};

package/node/components/ComplianceStatus/ComplianceStatus.d.ts

@@ -1,44 +1,2 @@
-import { type ReactNode } from 'react';
-type ItemStatus = 'success' | 'reject' | 'default' | 'loading';
-type BackgroundColor = 'grey' | 'primary';
-type Variant = 'plain' | 'contained';
-export type ComplianceStatusItem = {
-    /**
-     * Текст для отображения в элементе списка
-     */
-    text: ReactNode;
-    /**
-     * Статус элемента
-     */
-    status: ItemStatus;
-};
-export type ComplianceStatusProps = {
-    /**
-     * Основной заголовок элемента
-     */
-    title?: string | null;
-    /**
-     * Пропс для добавления контента между заголовком и списком
-     */
-    subtitle?: ReactNode;
-    /**
-     * Пропс для добавления контента после списка
-     */
-    children?: ReactNode;
-    /**
-     * Элементы списка
-     */
-    itemsList: ComplianceStatusItem[];
-    /**
-     * Фоновый цвет
-     * @default grey
-     */
-    backgroundColor?: BackgroundColor;
-    /**
-     * Вариант отображения блока статусов
-     * @default contained
-     */
-    variant?: Variant;
-};
+import type { ComplianceStatusProps } from './types';
 export declare const ComplianceStatus: ({ title, itemsList, children, subtitle, backgroundColor, variant, }: ComplianceStatusProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/node/components/ComplianceStatus/ComplianceStatus.js

@@ -2,8 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComplianceStatus = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const class_variance_authority_1 = require("class-variance-authority");
 const OverflowTypography_1 = require("../OverflowTypography");
 const Typography_1 = require("../Typography");
+const constants_1 = require("./constants");
 const styles_1 = require("./styles");
 const ICON_BY_STATUS = {
     default: (0, jsx_runtime_1.jsx)(styles_1.EmptyIcon, {}),
@@ -11,9 +13,22 @@ const ICON_BY_STATUS = {
     reject: (0, jsx_runtime_1.jsx)(styles_1.RejectIcon, {}),
     loading: (0, jsx_runtime_1.jsx)(styles_1.StyledLoader, {}),
 };
+const complianceStatus = (0, class_variance_authority_1.cva)(constants_1.complianceStatusClassnames.root, {
+    variants: {
+        backgroundColor: {
+            grey: constants_1.complianceStatusColorClassnames.grey,
+            primary: constants_1.complianceStatusColorClassnames.primary,
+        },
+        variant: {
+            contained: constants_1.complianceStatusVariantClassnames.contained,
+            outlined: constants_1.complianceStatusVariantClassnames.outlined,
+            plain: constants_1.complianceStatusVariantClassnames.plain,
+        },
+    },
+});
 const ComplianceStatus = ({ title, itemsList, children, subtitle, backgroundColor = 'grey', variant = 'contained', }) => {
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { "$background": backgroundColor, "$variant": variant, children: [title && ((0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, { variant: "h6", component: "h4", children: title })), subtitle, (0, jsx_runtime_1.jsx)(styles_1.Inner, { children: itemsList.map(({ text, status }, index) => (
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: complianceStatus({ backgroundColor, variant }), children: [title && ((0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, { className: constants_1.complianceStatusClassnames.title, variant: "h6", component: "h4", children: title })), subtitle, (0, jsx_runtime_1.jsx)(styles_1.Inner, { className: constants_1.complianceStatusClassnames.list, children: itemsList.map(({ text, status }, index) => (
                 // biome-ignore lint/suspicious/noArrayIndexKey: Элементы статичны
-                (0, jsx_runtime_1.jsxs)(styles_1.Item, { children: [ICON_BY_STATUS[status], (0, jsx_runtime_1.jsx)(Typography_1.Typography, { children: text })] }, index))) }), children] }));
+                (0, jsx_runtime_1.jsxs)(styles_1.Item, { className: constants_1.complianceStatusClassnames.item, children: [ICON_BY_STATUS[status], (0, jsx_runtime_1.jsx)(Typography_1.Typography, { children: text })] }, index))) }), children] }));
 };
 exports.ComplianceStatus = ComplianceStatus;

package/node/components/ComplianceStatus/constants.d.ts

@@ -0,0 +1,14 @@
+import type { BackgroundColor, Variant } from './types';
+export declare const complianceStatusColorClassnames: Record<BackgroundColor, string>;
+export declare const complianceStatusVariantClassnames: Record<Variant, string>;
+export declare const complianceStatusClassnames: {
+    contained: string;
+    outlined: string;
+    plain: string;
+    primary: string;
+    grey: string;
+    root: string;
+    title: string;
+    list: string;
+    item: string;
+};

package/node/components/ComplianceStatus/constants.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.complianceStatusClassnames = exports.complianceStatusVariantClassnames = exports.complianceStatusColorClassnames = void 0;
+const createUIKitClassname_1 = require("../utils/createUIKitClassname");
+exports.complianceStatusColorClassnames = {
+    grey: (0, createUIKitClassname_1.createUIKitClassname)('compliance-status_color-grey'),
+    primary: (0, createUIKitClassname_1.createUIKitClassname)('compliance-status_color-primary'),
+};
+exports.complianceStatusVariantClassnames = {
+    plain: (0, createUIKitClassname_1.createUIKitClassname)('compliance-status_variant-plain'),
+    contained: (0, createUIKitClassname_1.createUIKitClassname)('compliance-status_variant-contained'),
+    outlined: (0, createUIKitClassname_1.createUIKitClassname)('compliance-status_variant-outlined'),
+};
+exports.complianceStatusClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('compliance-status'),
+    title: (0, createUIKitClassname_1.createUIKitClassname)('compliance-status__title'),
+    list: (0, createUIKitClassname_1.createUIKitClassname)('compliance-status__list'),
+    item: (0, createUIKitClassname_1.createUIKitClassname)('compliance-status__item'),
+    ...exports.complianceStatusColorClassnames,
+    ...exports.complianceStatusVariantClassnames,
+};

package/node/components/ComplianceStatus/index.d.ts

@@ -1 +1,2 @@
-export { ComplianceStatus, type ComplianceStatusItem, type ComplianceStatusProps, } from './ComplianceStatus';
+export { ComplianceStatus } from './ComplianceStatus';
+export type { ComplianceStatusItem, ComplianceStatusProps } from './types';

package/node/components/ComplianceStatus/public.d.ts

@@ -1 +1,2 @@
-export { ComplianceStatus, type ComplianceStatusItem, type ComplianceStatusProps, } from './ComplianceStatus';
+export { ComplianceStatus } from './ComplianceStatus';
+export type { ComplianceStatusItem, ComplianceStatusProps } from './types';

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

@@ -1,11 +1,7 @@
 /// <reference types="react" />
-type Variant = 'plain' | 'contained';
 export declare const Wrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-} & {
-    $background: 'grey' | 'primary';
-    $variant: Variant;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
 export declare const Inner: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
@@ -51,4 +47,3 @@ export declare const SuccessIcon: import("@emotion/styled/dist/declarations/src/
 export declare const StyledLoader: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../Loader").LoaderProps & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
-export {};

package/node/components/ComplianceStatus/styles.js

@@ -7,6 +7,7 @@ const SuccessFillSm_1 = require("../../icons/SuccessFillSm");
 const Loader_1 = require("../Loader");
 const styled_1 = require("../styled");
 const mixins_1 = require("../styled/mixins");
+const constants_1 = require("./constants");
 const iconAppearAnimation = (0, styled_1.keyframes) `
   from {
     transform: scale(0);
@@ -17,14 +18,31 @@ const iconAppearAnimation = (0, styled_1.keyframes) `
     opacity: 1;
   }
 `;
-exports.Wrapper = (0, styled_1.styled)('article') `
+exports.Wrapper = styled_1.styled.article `
   display: grid;
   grid-gap: ${({ theme }) => theme.spacing(2)};
 
-  padding: ${({ theme, $variant }) => $variant === 'contained' ? theme.spacing(3) : 0};
+  background-color: inherit;
 
-  background-color: ${({ theme, $background, $variant }) => $variant === 'contained' ? theme.palette[$background][100] : 'inherit'};
   border-radius: ${({ theme }) => theme.shape.medium};
+
+  &.${constants_1.complianceStatusClassnames.contained} {
+    padding: ${({ theme }) => theme.spacing(3)};
+
+    &.${constants_1.complianceStatusClassnames.primary} {
+      background-color: ${({ theme }) => theme.palette.primary[100]};
+    }
+
+    &.${constants_1.complianceStatusClassnames.grey} {
+      background-color: ${({ theme }) => theme.palette.grey[100]};
+    }
+  }
+
+  &.${constants_1.complianceStatusClassnames.outlined} {
+    padding: ${({ theme }) => theme.spacing(3)};
+
+    border: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  }
 `;
 exports.Inner = (0, styled_1.styled)('ul') `
   display: grid;

package/node/components/ComplianceStatus/types.d.ts

@@ -0,0 +1,42 @@
+import type { ReactNode } from 'react';
+export type ItemStatus = 'success' | 'reject' | 'default' | 'loading';
+export type BackgroundColor = 'grey' | 'primary';
+export type Variant = 'plain' | 'contained' | 'outlined';
+export type ComplianceStatusItem = {
+    /**
+     * Текст для отображения в элементе списка
+     */
+    text: ReactNode;
+    /**
+     * Статус элемента
+     */
+    status: ItemStatus;
+};
+export type ComplianceStatusProps = {
+    /**
+     * Основной заголовок элемента
+     */
+    title?: string | null;
+    /**
+     * Пропс для добавления контента между заголовком и списком
+     */
+    subtitle?: ReactNode;
+    /**
+     * Пропс для добавления контента после списка
+     */
+    children?: ReactNode;
+    /**
+     * Элементы списка
+     */
+    itemsList: ComplianceStatusItem[];
+    /**
+     * Фоновый цвет
+     * @default grey
+     */
+    backgroundColor?: BackgroundColor;
+    /**
+     * Вариант отображения блока статусов
+     * @default contained
+     */
+    variant?: Variant;
+};

package/node/components/ComplianceStatus/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.46.0",
+  "version": "4.47.0",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {
@@ -12,6 +12,7 @@
     "@emotion/styled": "^11.13.5",
     "@mui/material": "5.13.0",
     "classnames": "^2.5.1",
+    "class-variance-authority": "^0.7.1",
     "colord": "^2.9.3",
     "dayjs": "^1.11.5",
     "react-imask": "6.4.2",