@snack-uikit/card 0.5.1 → 0.6.0

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.6.0 (2023-12-14)
+
+
+### BREAKING CHANGES
+
+
+* **FF-3729:** replace enum with unions ([910db4a](https://github.com/cloud-ru-tech/snack-uikit/commit/910db4aa8231ccbc58e538e5c5c1f461b1dec275))
+
+
+
+
+## 0.5.2 (2023-12-07)
+
+### Only dependencies have been changed
+* [@snack-uikit/droplist@0.11.2](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/droplist/CHANGELOG.md)
+
+
+
+
+
 ## 0.5.1 (2023-12-06)
 
 

package/dist/components/Card/Card.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement, ReactNode } from 'react';
 import { WithSupportProps } from '@snack-uikit/utils';
-import { Size } from '../../constants';
+import { Size } from '../../types';
 import { HeaderProps } from '../Header';
 export type CardProps = WithSupportProps<{
     /** Управление состоянием интерактивности */
@@ -31,6 +31,3 @@ export type CardProps = WithSupportProps<{
     className?: string;
 }>;
 export declare function Card({ onClick, disabled, checked, outline, multipleSelection, size, children, header, footer, functionBadge, promoBadge, image, className, ...rest }: CardProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace Card {
-    var sizes: typeof Size;
-}

package/dist/components/Card/Card.js

@@ -14,13 +14,13 @@ import cn from 'classnames';
 import { useCallback, useRef } from 'react';
 import { Typography } from '@snack-uikit/typography';
 import { extractSupportProps } from '@snack-uikit/utils';
-import { Size } from '../../constants';
+import { SIZE } from '../../constants';
 import { CardContext } from '../../context';
 import { Check, FunctionBadgeWrapper, PromoBadge } from '../../helperComponents';
-import { BODY_TEXT_SIZE_MAP, TRIGGER_CLICK_KEY_CODES } from './constants';
+import { TRIGGER_CLICK_KEY_CODES } from './constants';
 import styles from './styles.module.css';
 export function Card(_a) {
-    var { onClick, disabled = false, checked, outline, multipleSelection = false, size = Size.M, children, header, footer, functionBadge, promoBadge, image, className } = _a, rest = __rest(_a, ["onClick", "disabled", "checked", "outline", "multipleSelection", "size", "children", "header", "footer", "functionBadge", "promoBadge", "image", "className"]);
+    var { onClick, disabled = false, checked, outline, multipleSelection = false, size = SIZE.M, children, header, footer, functionBadge, promoBadge, image, className } = _a, rest = __rest(_a, ["onClick", "disabled", "checked", "outline", "multipleSelection", "size", "children", "header", "footer", "functionBadge", "promoBadge", "image", "className"]);
     const localRef = useRef(null);
     const onKeyDown = useCallback((e) => {
         if (e.target === localRef.current) {
@@ -31,6 +31,5 @@ export function Card(_a) {
     }, [onClick]);
     return (_jsx(CardContext.Provider, Object.assign({ value: { size, disabled } }, { children: _jsxs("div", Object.assign({ ref: localRef, className: cn(styles.card, className) }, extractSupportProps(rest), { onClick: onClick, "data-disabled": disabled || undefined, "data-checked": checked || undefined, "data-outline": outline || undefined, "data-pointer": onClick ? true : undefined, 
             // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-            tabIndex: 0, onKeyDown: onKeyDown }, { children: [image, promoBadge && _jsx(PromoBadge, { text: promoBadge }), _jsxs("div", Object.assign({ className: styles.composition, tabIndex: -1 }, { children: [!disabled && functionBadge && (_jsx(FunctionBadgeWrapper, Object.assign({ className: styles.functionBadgeWrapper }, { children: functionBadge }))), _jsxs("div", Object.assign({ className: styles.contentWrapper }, { children: [_jsxs("div", Object.assign({ className: styles.content, "data-size": size }, { children: [header || null, _jsx(Typography, Object.assign({ family: Typography.families.Sans, size: BODY_TEXT_SIZE_MAP[size], role: Typography.roles.Body, className: styles.body }, { children: children }))] })), footer && _jsx("div", Object.assign({ className: styles.footer }, { children: footer }))] }))] })), !disabled && checked && multipleSelection && _jsx(Check, { className: styles.check })] })) })));
+            tabIndex: 0, onKeyDown: onKeyDown }, { children: [image, promoBadge && _jsx(PromoBadge, { text: promoBadge }), _jsxs("div", Object.assign({ className: styles.composition, tabIndex: -1 }, { children: [!disabled && functionBadge && (_jsx(FunctionBadgeWrapper, Object.assign({ className: styles.functionBadgeWrapper }, { children: functionBadge }))), _jsxs("div", Object.assign({ className: styles.contentWrapper }, { children: [_jsxs("div", Object.assign({ className: styles.content, "data-size": size }, { children: [header || null, _jsx(Typography, Object.assign({ family: 'sans', size: size, purpose: 'body', className: styles.body }, { children: children }))] })), footer && _jsx("div", Object.assign({ className: styles.footer }, { children: footer }))] }))] })), !disabled && checked && multipleSelection && _jsx(Check, { className: styles.check })] })) })));
 }
-Card.sizes = Size;

package/dist/components/Card/constants.d.ts

@@ -1,5 +1 @@
-export declare const BODY_TEXT_SIZE_MAP: {
-    m: import("@snack-uikit/typography/dist/components/contants").Size;
-    l: import("@snack-uikit/typography/dist/components/contants").Size;
-};
 export declare const TRIGGER_CLICK_KEY_CODES: string[];

package/dist/components/Card/constants.js

@@ -1,7 +1 @@
-import { Typography } from '@snack-uikit/typography';
-import { Size } from '../../constants';
-export const BODY_TEXT_SIZE_MAP = {
-    [Size.M]: Typography.sizes.M,
-    [Size.L]: Typography.sizes.L,
-};
 export const TRIGGER_CLICK_KEY_CODES = ['Enter', 'Space'];

package/dist/components/Footer/components/Action/Action.js

@@ -18,5 +18,5 @@ import styles from './styles.module.css';
 export function FooterAction(_a) {
     var { button, secondaryButton, className } = _a, rest = __rest(_a, ["button", "secondaryButton", "className"]);
     const { disabled } = useCardContext();
-    return (_jsxs("div", Object.assign({ className: cn(styles.action, className) }, excludeSupportProps(rest), { children: [_jsx(ButtonFilled, Object.assign({}, button, { appearance: ButtonFilled.appearances.Primary, size: ButtonFilled.sizes.M, disabled: disabled })), secondaryButton && (_jsx(ButtonTonal, Object.assign({}, secondaryButton, { appearance: ButtonTonal.appearances.Neutral, size: ButtonTonal.sizes.M, disabled: disabled })))] })));
+    return (_jsxs("div", Object.assign({ className: cn(styles.action, className) }, excludeSupportProps(rest), { children: [_jsx(ButtonFilled, Object.assign({}, button, { appearance: 'primary', size: 'm', disabled: disabled })), secondaryButton && _jsx(ButtonTonal, Object.assign({}, secondaryButton, { appearance: 'neutral', size: 'm', disabled: disabled }))] })));
 }

package/dist/components/Footer/components/Dimension/Dimension.d.ts

@@ -1,4 +1,4 @@
-import { Size } from '../../../../constants';
+import { Size } from '../../../../types';
 export type DimensionProps = {
     /** Единица измерения */
     dimension?: string;

package/dist/components/Footer/components/Dimension/Dimension.js

@@ -6,5 +6,5 @@ import styles from './styles.module.css';
 export function Dimension({ dimension, currentValue, oldValue, size: sizeProp }) {
     const { size: sizeContext } = useCardContext();
     const size = TYPOGRAPHY_SIZE_MAP[sizeProp || sizeContext];
-    return (_jsxs("div", Object.assign({ className: styles.wrapper }, { children: [dimension && (_jsx(Typography, Object.assign({ role: Typography.roles.Title, family: Typography.families.Sans, size: size, className: styles.dimension }, { children: dimension }))), _jsxs("div", Object.assign({ className: styles.valueContainer }, { children: [_jsx(Typography, Object.assign({ role: Typography.roles.Title, family: Typography.families.Sans, size: size, className: styles.currentValue }, { children: currentValue })), oldValue && _jsx(Typography.CrossedOutBodyS, Object.assign({ className: styles.oldValue }, { children: oldValue }))] }))] })));
+    return (_jsxs("div", Object.assign({ className: styles.wrapper }, { children: [dimension && (_jsx(Typography, Object.assign({ purpose: 'title', family: 'sans', size: size, className: styles.dimension }, { children: dimension }))), _jsxs("div", Object.assign({ className: styles.valueContainer }, { children: [_jsx(Typography, Object.assign({ purpose: 'title', family: 'sans', size: size, className: styles.currentValue }, { children: currentValue })), oldValue && _jsx(Typography.CrossedOutBodyS, Object.assign({ className: styles.oldValue }, { children: oldValue }))] }))] })));
 }

package/dist/components/Footer/components/Dimension/constants.d.ts

@@ -1,4 +1,2 @@
-export declare const TYPOGRAPHY_SIZE_MAP: {
-    m: import("@snack-uikit/typography/dist/components/contants").Size;
-    l: import("@snack-uikit/typography/dist/components/contants").Size;
-};
+import { TypographyProps } from '@snack-uikit/typography';
+export declare const TYPOGRAPHY_SIZE_MAP: Record<string, TypographyProps['size']>;

package/dist/components/Footer/components/Dimension/constants.js

@@ -1,6 +1,5 @@
-import { Typography } from '@snack-uikit/typography';
-import { Size } from '../../../../constants';
+import { SIZE } from '../../../../constants';
 export const TYPOGRAPHY_SIZE_MAP = {
-    [Size.M]: Typography.sizes.M,
-    [Size.L]: Typography.sizes.L,
+    [SIZE.M]: 'm',
+    [SIZE.L]: 'l',
 };

package/dist/components/Footer/components/Promo/Promo.d.ts

@@ -1,6 +1,6 @@
 import { ButtonFilledProps } from '@snack-uikit/button';
 import { WithSupportProps } from '@snack-uikit/utils';
-import { Size } from '../../../../constants';
+import { Size } from '../../../../types';
 import { DimensionProps } from '../Dimension';
 export type FooterPromoProps = WithSupportProps<{
     /** Параметры для блока значений */
@@ -13,6 +13,3 @@ export type FooterPromoProps = WithSupportProps<{
     size?: Size;
 }>;
 export declare function FooterPromo({ volume, button, className, size, ...rest }: FooterPromoProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace FooterPromo {
-    var sizes: typeof Size;
-}

package/dist/components/Footer/components/Promo/Promo.js

@@ -13,13 +13,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'classnames';
 import { ButtonFilled } from '@snack-uikit/button';
 import { excludeSupportProps } from '@snack-uikit/utils';
-import { Size } from '../../../../constants';
 import { useCardContext } from '../../../../context';
 import { Dimension } from '../Dimension';
 import styles from './styles.module.css';
 export function FooterPromo(_a) {
     var { volume, button, className, size } = _a, rest = __rest(_a, ["volume", "button", "className", "size"]);
     const { disabled } = useCardContext();
-    return (_jsxs("div", Object.assign({ className: cn(styles.promo, className) }, excludeSupportProps(rest), { children: [button && (_jsx(ButtonFilled, Object.assign({}, button, { appearance: ButtonFilled.appearances.Primary, size: ButtonFilled.sizes.M, disabled: disabled }))), volume && _jsx(Dimension, Object.assign({}, volume, { size: size }))] })));
+    return (_jsxs("div", Object.assign({ className: cn(styles.promo, className) }, excludeSupportProps(rest), { children: [button && _jsx(ButtonFilled, Object.assign({}, button, { appearance: 'primary', size: 'm', disabled: disabled })), volume && _jsx(Dimension, Object.assign({}, volume, { size: size }))] })));
 }
-FooterPromo.sizes = Size;

package/dist/components/FunctionBadge/FunctionBadge.js

@@ -17,7 +17,7 @@ export function FunctionBadge({ icon, options }) {
         e.stopPropagation();
         setIsOpen(isOpen => !isOpen);
     }, []);
-    return (_jsx("span", Object.assign({ className: styles.wrapper }, { children: _jsx(Droplist, Object.assign({ open: isOpen, onOpenChange: setIsOpen, firstElementRefCallback: firstElementRefCallback, widthStrategy: Droplist.widthStrategies.Gte, useScroll: true, onFocusLeave: handleDroplistFocusLeave, "data-test-id": TEST_IDS.droplist, triggerClassName: styles.triggerClassName, placement: Droplist.placements.BottomEnd, triggerElement: _jsx("button", Object.assign({ "data-test-id": TEST_IDS.functionBadge, className: styles.button, onKeyDown: handleTriggerKeyDown, onClick: onClick, ref: triggerElementRef }, { children: icon || _jsx(KebabSVG, {}) })) }, { children: options.map(item => (_createElement(Droplist.ItemSingle, Object.assign({}, item, { key: item.option, className: styles.item, "data-test-id": TEST_IDS.option, onClick: e => {
+    return (_jsx("span", Object.assign({ className: styles.wrapper }, { children: _jsx(Droplist, Object.assign({ open: isOpen, onOpenChange: setIsOpen, firstElementRefCallback: firstElementRefCallback, widthStrategy: 'gte', useScroll: true, onFocusLeave: handleDroplistFocusLeave, "data-test-id": TEST_IDS.droplist, triggerClassName: styles.triggerClassName, placement: 'bottom-end', triggerElement: _jsx("button", Object.assign({ "data-test-id": TEST_IDS.functionBadge, className: styles.button, onKeyDown: handleTriggerKeyDown, onClick: onClick, ref: triggerElementRef }, { children: icon || _jsx(KebabSVG, {}) })) }, { children: options.map(item => (_createElement(Droplist.ItemSingle, Object.assign({}, item, { key: item.option, className: styles.item, "data-test-id": TEST_IDS.option, onClick: e => {
                     handleDroplistItemClick(e, item.onClick);
                 }, onKeyDown: handleDroplistItemKeyDown })))) })) })));
 }

package/dist/components/Header/Header.d.ts

@@ -1,6 +1,6 @@
 import { WithSupportProps } from '@snack-uikit/utils';
-import { Size } from '../../constants';
 import { EmblemProps } from '../../helperComponents';
+import { Size } from '../../types';
 export type HeaderProps = WithSupportProps<{
     /** Заголовок */
     title: string;
@@ -16,6 +16,3 @@ export type HeaderProps = WithSupportProps<{
     size?: Size;
 }>;
 export declare function Header({ title, description, metadata, emblem, className, size: sizeProp, ...rest }: HeaderProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace Header {
-    var emblemIconAppearances: typeof import("@snack-uikit/icon-predefined/dist/constants").Appearance;
-}

package/dist/components/Header/Header.js

@@ -23,6 +23,5 @@ export function Header(_a) {
     var { title, description, metadata, emblem, className, size: sizeProp } = _a, rest = __rest(_a, ["title", "description", "metadata", "emblem", "className", "size"]);
     const { size: sizeContext } = useCardContext();
     const size = sizeProp || sizeContext;
-    return (_jsxs("div", Object.assign({ className: cn(styles.titleLayout, className) }, excludeSupportProps(rest), { "data-size": size }, { children: [emblem && _jsx(Emblem, Object.assign({}, emblem)), _jsxs("div", Object.assign({ className: styles.contentLayout }, { children: [_jsx(Typography, Object.assign({ family: Typography.families.Sans, size: TITLE_SIZE_MAP[size], role: Typography.roles.Title, className: styles.title, "data-test-id": TEST_IDS.title }, { children: _jsx(TruncateString, { variant: TruncateString.variants.End, maxLines: 1, text: title }) })), metadata && (_jsx(Typography.SansBodyS, Object.assign({ className: styles.metadata }, { children: _jsx(TruncateString, { variant: TruncateString.variants.End, maxLines: 1, text: metadata, "data-test-id": TEST_IDS.metadata }) }))), description && (_jsx(Typography, Object.assign({ family: Typography.families.Sans, size: DESCRIPTION_SIZE_MAP[size], role: Typography.roles.Body, className: styles.description }, { children: _jsx(TruncateString, { variant: TruncateString.variants.End, maxLines: 2, text: description, "data-test-id": TEST_IDS.description }) })))] }))] })));
+    return (_jsxs("div", Object.assign({ className: cn(styles.titleLayout, className) }, excludeSupportProps(rest), { "data-size": size }, { children: [emblem && _jsx(Emblem, Object.assign({}, emblem)), _jsxs("div", Object.assign({ className: styles.contentLayout }, { children: [_jsx(Typography, Object.assign({ family: 'sans', size: TITLE_SIZE_MAP[size], purpose: 'title', className: styles.title, "data-test-id": TEST_IDS.title }, { children: _jsx(TruncateString, { variant: 'end', maxLines: 1, text: title }) })), metadata && (_jsx(Typography.SansBodyS, Object.assign({ className: styles.metadata }, { children: _jsx(TruncateString, { variant: 'end', maxLines: 1, text: metadata, "data-test-id": TEST_IDS.metadata }) }))), description && (_jsx(Typography, Object.assign({ family: 'sans', size: DESCRIPTION_SIZE_MAP[size], purpose: 'body', className: styles.description }, { children: _jsx(TruncateString, { variant: 'end', maxLines: 2, text: description, "data-test-id": TEST_IDS.description }) })))] }))] })));
 }
-Header.emblemIconAppearances = Emblem.appearances;

package/dist/components/Header/constants.d.ts

@@ -1,8 +1,4 @@
-export declare const TITLE_SIZE_MAP: {
-    m: import("@snack-uikit/typography/dist/components/contants").Size;
-    l: import("@snack-uikit/typography/dist/components/contants").Size;
-};
-export declare const DESCRIPTION_SIZE_MAP: {
-    m: import("@snack-uikit/typography/dist/components/contants").Size;
-    l: import("@snack-uikit/typography/dist/components/contants").Size;
-};
+import { TypographyProps } from '@snack-uikit/typography';
+import { Size } from '../../types';
+export declare const TITLE_SIZE_MAP: Record<Size, TypographyProps['size']>;
+export declare const DESCRIPTION_SIZE_MAP: Record<Size, TypographyProps['size']>;

package/dist/components/Header/constants.js

@@ -1,10 +1,9 @@
-import { Typography } from '@snack-uikit/typography';
-import { Size } from '../../constants';
+import { SIZE } from '../../constants';
 export const TITLE_SIZE_MAP = {
-    [Size.M]: Typography.sizes.S,
-    [Size.L]: Typography.sizes.L,
+    [SIZE.M]: 's',
+    [SIZE.L]: 'l',
 };
 export const DESCRIPTION_SIZE_MAP = {
-    [Size.M]: Typography.sizes.M,
-    [Size.L]: Typography.sizes.L,
+    [SIZE.M]: 'm',
+    [SIZE.L]: 'l',
 };

package/dist/components/Image/Image.d.ts

@@ -1,17 +1,14 @@
-import { Mode } from './constants';
+import { MODE } from './constants';
 export type ImageProps = {
     /** Путь до картинки */
     src: string;
     /** Описание картинки */
     alt: string;
 } /**  Image mode */ & ({
-    mode?: Mode.Little | Mode.Middle;
+    mode?: typeof MODE.Little | typeof MODE.Middle;
     hideFading?: never;
 } | {
-    mode: Mode.Background;
+    mode: typeof MODE.Background;
     hideFading?: boolean;
 });
 export declare function Image({ src, alt, mode, hideFading }: ImageProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace Image {
-    var modes: typeof Mode;
-}

package/dist/components/Image/Image.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Mode } from './constants';
+import { MODE } from './constants';
 import styles from './styles.module.css';
-export function Image({ src, alt, mode = Mode.Little, hideFading }) {
+export function Image({ src, alt, mode = MODE.Little, hideFading }) {
     return _jsx("img", { src: src, alt: alt, "data-mode": mode, className: styles.image, "data-fading": !hideFading || undefined });
 }
-Image.modes = Mode;

package/dist/components/Image/constants.d.ts

@@ -1,5 +1,5 @@
-export declare enum Mode {
-    Little = "little",
-    Middle = "middle",
-    Background = "background"
-}
+export declare const MODE: {
+    readonly Little: "little";
+    readonly Middle: "middle";
+    readonly Background: "background";
+};

package/dist/components/Image/constants.js

@@ -1,6 +1,5 @@
-export var Mode;
-(function (Mode) {
-    Mode["Little"] = "little";
-    Mode["Middle"] = "middle";
-    Mode["Background"] = "background";
-})(Mode || (Mode = {}));
+export const MODE = {
+    Little: 'little',
+    Middle: 'middle',
+    Background: 'background',
+};

package/dist/components/Image/types.d.ts

@@ -0,0 +1,3 @@
+import { ValueOf } from '@snack-uikit/utils';
+import { MODE } from './constants';
+export type Mode = ValueOf<typeof MODE>;

package/dist/components/Image/types.js

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

package/dist/constants.d.ts

@@ -1,7 +1,7 @@
-export declare enum Size {
-    M = "m",
-    L = "l"
-}
+export declare const SIZE: {
+    readonly M: "m";
+    readonly L: "l";
+};
 export declare const TEST_IDS: {
     promoBadge: string;
     functionBadge: string;

package/dist/constants.js

@@ -1,8 +1,7 @@
-export var Size;
-(function (Size) {
-    Size["M"] = "m";
-    Size["L"] = "l";
-})(Size || (Size = {}));
+export const SIZE = {
+    M: 'm',
+    L: 'l',
+};
 export const TEST_IDS = {
     promoBadge: 'card__promo-badge',
     functionBadge: 'card__function-badge',

package/dist/context.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Size } from './constants';
+import { Size } from './types';
 type CardContextValue = {
     size: Size;
     disabled: boolean;

package/dist/context.js

@@ -1,7 +1,7 @@
 import { createContext, useContext } from 'react';
-import { Size } from './constants';
+import { SIZE } from './constants';
 export const CardContext = createContext({
-    size: Size.M,
+    size: SIZE.M,
     disabled: false,
 });
 export function useCardContext() {

package/dist/helperComponents/Emblem/Emblem.d.ts

@@ -5,7 +5,4 @@ type PictureProps = {
 };
 export type EmblemProps = PictureProps | Pick<IconPredefinedProps, 'icon' | 'decor' | 'appearance'>;
 export declare function Emblem(props: EmblemProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace Emblem {
-    var appearances: typeof import("@snack-uikit/icon-predefined/dist/constants").Appearance;
-}
 export {};

package/dist/helperComponents/Emblem/Emblem.js

@@ -12,6 +12,5 @@ export function Emblem(props) {
     if (isPictureProps(props)) {
         return (_jsx("img", { src: props.src, alt: props.alt, "data-size": size || undefined, className: styles.img, "data-test-id": TEST_IDS.emblemPicture }));
     }
-    return (_jsx(IconPredefined, { icon: props.icon, appearance: (_a = props.appearance) !== null && _a !== void 0 ? _a : IconPredefined.appearances.Primary, decor: (_b = props.decor) !== null && _b !== void 0 ? _b : true, size: size, "data-test-id": TEST_IDS.emblemIcon }));
+    return (_jsx(IconPredefined, { icon: props.icon, appearance: (_a = props.appearance) !== null && _a !== void 0 ? _a : 'primary', decor: (_b = props.decor) !== null && _b !== void 0 ? _b : true, size: size, "data-test-id": TEST_IDS.emblemIcon }));
 }
-Emblem.appearances = IconPredefined.appearances;

package/dist/helperComponents/PromoBadge/PromoBadge.js

@@ -3,5 +3,5 @@ import { PromoTag } from '@snack-uikit/promo-tag';
 import { TEST_IDS } from '../../constants';
 import styles from './styles.module.css';
 export function PromoBadge({ text }) {
-    return (_jsx("div", Object.assign({ className: styles.promoBadge }, { children: _jsx(PromoTag, { appearance: PromoTag.appearances.Primary, text: text, "data-test-id": TEST_IDS.promoBadge }) })));
+    return (_jsx("div", Object.assign({ className: styles.promoBadge }, { children: _jsx(PromoTag, { appearance: 'primary', text: text, "data-test-id": TEST_IDS.promoBadge }) })));
 }

package/dist/types.d.ts

@@ -0,0 +1,3 @@
+import { ValueOf } from '@snack-uikit/utils';
+import { SIZE } from './constants';
+export type Size = ValueOf<typeof SIZE>;

package/dist/types.js

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

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Card",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -32,15 +32,15 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/button": "0.14.1",
-    "@snack-uikit/droplist": "0.11.1",
-    "@snack-uikit/icon-predefined": "0.3.1",
+    "@snack-uikit/button": "0.15.0",
+    "@snack-uikit/droplist": "0.12.0",
+    "@snack-uikit/icon-predefined": "0.4.0",
     "@snack-uikit/icons": "0.19.0",
-    "@snack-uikit/promo-tag": "0.3.1",
-    "@snack-uikit/truncate-string": "0.3.1",
-    "@snack-uikit/typography": "0.5.1",
-    "@snack-uikit/utils": "3.1.0",
+    "@snack-uikit/promo-tag": "0.4.0",
+    "@snack-uikit/truncate-string": "0.4.0",
+    "@snack-uikit/typography": "0.6.0",
+    "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "76a159dde7baccf49dc7b11e1fd7abc31424b42f"
+  "gitHead": "bd39c5e674f3b91b0e2487782a04b15034cf3d8b"
 }

package/src/components/Card/Card.tsx

@@ -4,11 +4,12 @@ import { KeyboardEvent, ReactElement, ReactNode, useCallback, useRef } from 'rea
 import { Typography } from '@snack-uikit/typography';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
-import { Size } from '../../constants';
+import { SIZE } from '../../constants';
 import { CardContext } from '../../context';
 import { Check, FunctionBadgeWrapper, PromoBadge } from '../../helperComponents';
+import { Size } from '../../types';
 import { HeaderProps } from '../Header';
-import { BODY_TEXT_SIZE_MAP, TRIGGER_CLICK_KEY_CODES } from './constants';
+import { TRIGGER_CLICK_KEY_CODES } from './constants';
 import styles from './styles.module.scss';
 
 export type CardProps = WithSupportProps<{
@@ -46,7 +47,7 @@ export function Card({
   checked,
   outline,
   multipleSelection = false,
-  size = Size.M,
+  size = SIZE.M,
   children,
   header,
   footer,
@@ -98,12 +99,7 @@ export function Card({
             <div className={styles.content} data-size={size}>
               {header || null}
 
-              <Typography
-                family={Typography.families.Sans}
-                size={BODY_TEXT_SIZE_MAP[size]}
-                role={Typography.roles.Body}
-                className={styles.body}
-              >
+              <Typography family='sans' size={size} purpose='body' className={styles.body}>
                 {children}
               </Typography>
             </div>
@@ -117,5 +113,3 @@ export function Card({
     </CardContext.Provider>
   );
 }
-
-Card.sizes = Size;

package/src/components/Card/constants.ts

@@ -1,10 +1 @@
-import { Typography } from '@snack-uikit/typography';
-
-import { Size } from '../../constants';
-
-export const BODY_TEXT_SIZE_MAP = {
-  [Size.M]: Typography.sizes.M,
-  [Size.L]: Typography.sizes.L,
-};
-
 export const TRIGGER_CLICK_KEY_CODES = ['Enter', 'Space'];

package/src/components/Footer/components/Action/Action.tsx

@@ -20,20 +20,8 @@ export function FooterAction({ button, secondaryButton, className, ...rest }: Fo
 
   return (
     <div className={cn(styles.action, className)} {...excludeSupportProps(rest)}>
-      <ButtonFilled
-        {...button}
-        appearance={ButtonFilled.appearances.Primary}
-        size={ButtonFilled.sizes.M}
-        disabled={disabled}
-      />
-      {secondaryButton && (
-        <ButtonTonal
-          {...secondaryButton}
-          appearance={ButtonTonal.appearances.Neutral}
-          size={ButtonTonal.sizes.M}
-          disabled={disabled}
-        />
-      )}
+      <ButtonFilled {...button} appearance='primary' size='m' disabled={disabled} />
+      {secondaryButton && <ButtonTonal {...secondaryButton} appearance='neutral' size='m' disabled={disabled} />}
     </div>
   );
 }

package/src/components/Footer/components/Dimension/Dimension.tsx

@@ -1,7 +1,7 @@
 import { Typography } from '@snack-uikit/typography';
 
-import { Size } from '../../../../constants';
 import { useCardContext } from '../../../../context';
+import { Size } from '../../../../types';
 import { TYPOGRAPHY_SIZE_MAP } from './constants';
 import styles from './styles.module.scss';
 
@@ -24,22 +24,12 @@ export function Dimension({ dimension, currentValue, oldValue, size: sizeProp }:
   return (
     <div className={styles.wrapper}>
       {dimension && (
-        <Typography
-          role={Typography.roles.Title}
-          family={Typography.families.Sans}
-          size={size}
-          className={styles.dimension}
-        >
+        <Typography purpose='title' family='sans' size={size} className={styles.dimension}>
           {dimension}
         </Typography>
       )}
       <div className={styles.valueContainer}>
-        <Typography
-          role={Typography.roles.Title}
-          family={Typography.families.Sans}
-          size={size}
-          className={styles.currentValue}
-        >
+        <Typography purpose='title' family='sans' size={size} className={styles.currentValue}>
           {currentValue}
         </Typography>
 

package/src/components/Footer/components/Dimension/constants.ts

@@ -1,8 +1,8 @@
-import { Typography } from '@snack-uikit/typography';
+import { TypographyProps } from '@snack-uikit/typography';
 
-import { Size } from '../../../../constants';
+import { SIZE } from '../../../../constants';
 
-export const TYPOGRAPHY_SIZE_MAP = {
-  [Size.M]: Typography.sizes.M,
-  [Size.L]: Typography.sizes.L,
+export const TYPOGRAPHY_SIZE_MAP: Record<string, TypographyProps['size']> = {
+  [SIZE.M]: 'm',
+  [SIZE.L]: 'l',
 };

package/src/components/Footer/components/Promo/Promo.tsx

@@ -3,8 +3,8 @@ import cn from 'classnames';
 import { ButtonFilled, ButtonFilledProps } from '@snack-uikit/button';
 import { excludeSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
-import { Size } from '../../../../constants';
 import { useCardContext } from '../../../../context';
+import { Size } from '../../../../types';
 import { Dimension, DimensionProps } from '../Dimension';
 import styles from './styles.module.scss';
 
@@ -24,17 +24,8 @@ export function FooterPromo({ volume, button, className, size, ...rest }: Footer
 
   return (
     <div className={cn(styles.promo, className)} {...excludeSupportProps(rest)}>
-      {button && (
-        <ButtonFilled
-          {...button}
-          appearance={ButtonFilled.appearances.Primary}
-          size={ButtonFilled.sizes.M}
-          disabled={disabled}
-        />
-      )}
+      {button && <ButtonFilled {...button} appearance='primary' size='m' disabled={disabled} />}
       {volume && <Dimension {...volume} size={size} />}
     </div>
   );
 }
-
-FooterPromo.sizes = Size;

package/src/components/FunctionBadge/FunctionBadge.tsx

@@ -43,12 +43,12 @@ export function FunctionBadge({ icon, options }: FunctionBadgeProps) {
         open={isOpen}
         onOpenChange={setIsOpen}
         firstElementRefCallback={firstElementRefCallback}
-        widthStrategy={Droplist.widthStrategies.Gte}
+        widthStrategy='gte'
         useScroll
         onFocusLeave={handleDroplistFocusLeave}
         data-test-id={TEST_IDS.droplist}
         triggerClassName={styles.triggerClassName}
-        placement={Droplist.placements.BottomEnd}
+        placement='bottom-end'
         triggerElement={
           <button
             data-test-id={TEST_IDS.functionBadge}

package/src/components/Header/Header.tsx

@@ -4,9 +4,10 @@ import { TruncateString } from '@snack-uikit/truncate-string';
 import { Typography } from '@snack-uikit/typography';
 import { excludeSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
-import { Size, TEST_IDS } from '../../constants';
+import { TEST_IDS } from '../../constants';
 import { useCardContext } from '../../context';
 import { Emblem, EmblemProps } from '../../helperComponents';
+import { Size } from '../../types';
 import { DESCRIPTION_SIZE_MAP, TITLE_SIZE_MAP } from './constants';
 import styles from './styles.module.scss';
 
@@ -36,44 +37,27 @@ export function Header({ title, description, metadata, emblem, className, size:
 
       <div className={styles.contentLayout}>
         <Typography
-          family={Typography.families.Sans}
+          family='sans'
           size={TITLE_SIZE_MAP[size]}
-          role={Typography.roles.Title}
+          purpose='title'
           className={styles.title}
           data-test-id={TEST_IDS.title}
         >
-          <TruncateString variant={TruncateString.variants.End} maxLines={1} text={title} />
+          <TruncateString variant='end' maxLines={1} text={title} />
         </Typography>
 
         {metadata && (
           <Typography.SansBodyS className={styles.metadata}>
-            <TruncateString
-              variant={TruncateString.variants.End}
-              maxLines={1}
-              text={metadata}
-              data-test-id={TEST_IDS.metadata}
-            />
+            <TruncateString variant='end' maxLines={1} text={metadata} data-test-id={TEST_IDS.metadata} />
           </Typography.SansBodyS>
         )}
 
         {description && (
-          <Typography
-            family={Typography.families.Sans}
-            size={DESCRIPTION_SIZE_MAP[size]}
-            role={Typography.roles.Body}
-            className={styles.description}
-          >
-            <TruncateString
-              variant={TruncateString.variants.End}
-              maxLines={2}
-              text={description}
-              data-test-id={TEST_IDS.description}
-            />
+          <Typography family='sans' size={DESCRIPTION_SIZE_MAP[size]} purpose='body' className={styles.description}>
+            <TruncateString variant='end' maxLines={2} text={description} data-test-id={TEST_IDS.description} />
           </Typography>
         )}
       </div>
     </div>
   );
 }
-
-Header.emblemIconAppearances = Emblem.appearances;

package/src/components/Header/constants.ts

@@ -1,13 +1,14 @@
-import { Typography } from '@snack-uikit/typography';
+import { TypographyProps } from '@snack-uikit/typography';
 
-import { Size } from '../../constants';
+import { SIZE } from '../../constants';
+import { Size } from '../../types';
 
-export const TITLE_SIZE_MAP = {
-  [Size.M]: Typography.sizes.S,
-  [Size.L]: Typography.sizes.L,
+export const TITLE_SIZE_MAP: Record<Size, TypographyProps['size']> = {
+  [SIZE.M]: 's',
+  [SIZE.L]: 'l',
 };
 
-export const DESCRIPTION_SIZE_MAP = {
-  [Size.M]: Typography.sizes.M,
-  [Size.L]: Typography.sizes.L,
+export const DESCRIPTION_SIZE_MAP: Record<Size, TypographyProps['size']> = {
+  [SIZE.M]: 'm',
+  [SIZE.L]: 'l',
 };

package/src/components/Image/Image.tsx

@@ -1,4 +1,4 @@
-import { Mode } from './constants';
+import { MODE } from './constants';
 import styles from './styles.module.scss';
 
 export type ImageProps = {
@@ -7,12 +7,10 @@ export type ImageProps = {
   /** Описание картинки */
   alt: string;
 } /**  Image mode */ & (
-  | { mode?: Mode.Little | Mode.Middle; hideFading?: never }
-  | { mode: Mode.Background; hideFading?: boolean }
+  | { mode?: typeof MODE.Little | typeof MODE.Middle; hideFading?: never }
+  | { mode: typeof MODE.Background; hideFading?: boolean }
 );
 
-export function Image({ src, alt, mode = Mode.Little, hideFading }: ImageProps) {
+export function Image({ src, alt, mode = MODE.Little, hideFading }: ImageProps) {
   return <img src={src} alt={alt} data-mode={mode} className={styles.image} data-fading={!hideFading || undefined} />;
 }
-
-Image.modes = Mode;

package/src/components/Image/constants.ts

@@ -1,5 +1,5 @@
-export enum Mode {
-  Little = 'little',
-  Middle = 'middle',
-  Background = 'background',
-}
+export const MODE = {
+  Little: 'little',
+  Middle: 'middle',
+  Background: 'background',
+} as const;

package/src/components/Image/types.ts

@@ -0,0 +1,5 @@
+import { ValueOf } from '@snack-uikit/utils';
+
+import { MODE } from './constants';
+
+export type Mode = ValueOf<typeof MODE>;

package/src/constants.ts

@@ -1,7 +1,7 @@
-export enum Size {
-  M = 'm',
-  L = 'l',
-}
+export const SIZE = {
+  M: 'm',
+  L: 'l',
+} as const;
 
 export const TEST_IDS = {
   promoBadge: 'card__promo-badge',

package/src/context.ts

@@ -1,6 +1,7 @@
 import { createContext, useContext } from 'react';
 
-import { Size } from './constants';
+import { SIZE } from './constants';
+import { Size } from './types';
 
 type CardContextValue = {
   size: Size;
@@ -8,7 +9,7 @@ type CardContextValue = {
 };
 
 export const CardContext = createContext<CardContextValue>({
-  size: Size.M,
+  size: SIZE.M,
   disabled: false,
 });
 

package/src/helperComponents/Emblem/Emblem.tsx

@@ -33,12 +33,10 @@ export function Emblem(props: EmblemProps) {
   return (
     <IconPredefined
       icon={props.icon}
-      appearance={props.appearance ?? IconPredefined.appearances.Primary}
+      appearance={props.appearance ?? 'primary'}
       decor={props.decor ?? true}
       size={size}
       data-test-id={TEST_IDS.emblemIcon}
     />
   );
 }
-
-Emblem.appearances = IconPredefined.appearances;

package/src/helperComponents/PromoBadge/PromoBadge.tsx

@@ -10,7 +10,7 @@ export type PromoBadgeProps = {
 export function PromoBadge({ text }: PromoBadgeProps) {
   return (
     <div className={styles.promoBadge}>
-      <PromoTag appearance={PromoTag.appearances.Primary} text={text} data-test-id={TEST_IDS.promoBadge} />
+      <PromoTag appearance='primary' text={text} data-test-id={TEST_IDS.promoBadge} />
     </div>
   );
 }

package/src/types.ts

@@ -0,0 +1,5 @@
+import { ValueOf } from '@snack-uikit/utils';
+
+import { SIZE } from './constants';
+
+export type Size = ValueOf<typeof SIZE>;