@astral/ui 4.0.1 → 4.1.1

package/components/PageLayout/PageHeader/PageHeader.js

@@ -8,6 +8,6 @@ import { Title } from './Title';
 import { useLogic } from './useLogic';
 export const PageHeader = (props) => {
     const { title, description, subheader, breadcrumbs, actions, backButton, className, } = props;
-    const { isLoading, mobileTitleActions, isShowMobileActions } = useLogic(props);
-    return (_jsxs(_Fragment, { children: [_jsxs(MobileTitleWrapper, { "$hasBackButton": Boolean(backButton), className: classNames(pageHeaderClassnames.pageHeaderMobileTitle), children: [_jsx(Title, { backButton: backButton, title: title, isLoading: isLoading }), mobileTitleActions && mobileTitleActions] }), _jsx(Wrapper, { className: className, children: _jsx(HeaderContent, { breadcrumbs: breadcrumbs, backButton: backButton, title: title, description: description, actions: actions, subheader: subheader, isLoading: isLoading }) }), isShowMobileActions && (_jsx(MobilePageActions, Object.assign({ className: classNames(pageHeaderClassnames.pageHeaderActions), isLoading: isLoading }, actions)))] }));
+    const { isLoading, mobileTitleActions, isShowMobileActions, mobileClassnames, } = useLogic(props);
+    return (_jsxs(_Fragment, { children: [_jsxs(MobileTitleWrapper, { className: mobileClassnames, children: [_jsx(Title, { backButton: backButton, title: title, isLoading: isLoading }), mobileTitleActions && mobileTitleActions] }), _jsx(Wrapper, { className: className, children: _jsx(HeaderContent, { breadcrumbs: breadcrumbs, backButton: backButton, title: title, description: description, actions: actions, subheader: subheader, isLoading: isLoading }) }), isShowMobileActions && (_jsx(MobilePageActions, Object.assign({ className: classNames(pageHeaderClassnames.pageHeaderActions), isLoading: isLoading }, actions)))] }));
 };

package/components/PageLayout/PageHeader/constants.d.ts

@@ -1,5 +1,7 @@
 export declare const pageHeaderClassnames: {
     pageHeaderMobileTitle: string;
     pageHeaderActions: string;
+    hasBackButton: string;
+    hasTitle: string;
 };
 export declare const PAGE_HEADER_HEIGHT_MOBILE = "48px";

package/components/PageLayout/PageHeader/constants.js

@@ -2,5 +2,7 @@ import { createUIKitClassname } from '../../utils';
 export const pageHeaderClassnames = {
     pageHeaderMobileTitle: createUIKitClassname('page-header__mobile-title'),
     pageHeaderActions: createUIKitClassname('page-header__actions'),
+    hasBackButton: createUIKitClassname('page-header_has-back-button'),
+    hasTitle: createUIKitClassname('page-header_has-title'),
 };
 export const PAGE_HEADER_HEIGHT_MOBILE = '48px';

package/components/PageLayout/PageHeader/styles.d.ts

@@ -6,6 +6,4 @@ export declare const Wrapper: import("@emotion/styled").StyledComponent<{
 export declare const MobileTitleWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-} & {
-    $hasBackButton: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/PageLayout/PageHeader/styles.js

@@ -1,5 +1,5 @@
 import { styled } from '../../styles';
-import { PAGE_HEADER_HEIGHT_MOBILE } from './constants';
+import { PAGE_HEADER_HEIGHT_MOBILE, pageHeaderClassnames } from './constants';
 export const Wrapper = styled.header `
   display: grid;
   grid-column: 1 / -1;
@@ -19,24 +19,29 @@ export const Wrapper = styled.header `
     background-color: ${({ theme }) => theme.palette.background.default};
   }
 `;
-export const MobileTitleWrapper = styled('div', {
-    shouldForwardProp: (prop) => !['$hasBackButton'].includes(prop),
-}) `
+export const MobileTitleWrapper = styled.div `
   display: none;
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     position: sticky;
     z-index: ${({ theme }) => theme.zIndex.fab};
     top: 0;
-
-    display: flex;
+    
     align-items: center;
     order: 1;
-
-    height: ${PAGE_HEADER_HEIGHT_MOBILE};
-    min-height: ${PAGE_HEADER_HEIGHT_MOBILE};
-    padding: ${({ theme, $hasBackButton }) => $hasBackButton ? theme.spacing(0, 4, 0, 1) : theme.spacing(4)};
-
+    
     background-color: ${({ theme }) => theme.palette.background.default};
+    
+    &.${pageHeaderClassnames.hasTitle} {
+      display: flex;
+
+      height: ${PAGE_HEADER_HEIGHT_MOBILE};
+      min-height: ${PAGE_HEADER_HEIGHT_MOBILE};
+      padding: ${({ theme }) => theme.spacing(4)};
+    }
+
+    &.${pageHeaderClassnames.hasBackButton} {
+      padding: ${({ theme }) => theme.spacing(0, 4, 0, 1)};
+    }
   }
 `;

package/components/PageLayout/PageHeader/useLogic/useLogic.d.ts

@@ -1,9 +1,10 @@
 import { type ElementType } from 'react';
 import type { PageHeaderProps } from '../types';
 type UseLogicParams<TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType, TBackButtonComponent extends ElementType = ElementType> = PageHeaderProps<TMainActionComponent, TSecondaryActionComponent, TBackButtonComponent>;
-export declare const useLogic: <TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType, TBackButtonComponent extends ElementType = ElementType>({ shouldUpdateDocumentTitle, title, actions, htmlTitle, }: UseLogicParams<TMainActionComponent, TSecondaryActionComponent, TBackButtonComponent>) => {
+export declare const useLogic: <TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType, TBackButtonComponent extends ElementType = ElementType>({ shouldUpdateDocumentTitle, title, actions, htmlTitle, backButton, }: UseLogicParams<TMainActionComponent, TSecondaryActionComponent, TBackButtonComponent>) => {
     isShowMobileActions: boolean | undefined;
     isLoading: boolean | undefined;
     mobileTitleActions: import("react").ReactNode;
+    mobileClassnames: string;
 };
 export {};

package/components/PageLayout/PageHeader/useLogic/useLogic.js

@@ -1,10 +1,21 @@
-import { useContext } from 'react';
+import { useContext, useMemo } from 'react';
+import { classNames } from '../../../utils';
 import { PageContext } from '../../PageContext';
+import { pageHeaderClassnames } from '../constants';
 import { usePageTitle } from '../hooks';
-export const useLogic = ({ shouldUpdateDocumentTitle, title, actions, htmlTitle, }) => {
+export const useLogic = ({ shouldUpdateDocumentTitle, title, actions, htmlTitle, backButton, }) => {
     //Переопределение Html title на title из параметров
     usePageTitle({ shouldUpdateDocumentTitle, htmlTitle, title });
     const { mobileTitleActions, isLoading } = useContext(PageContext);
     const isShowMobileActions = actions && !mobileTitleActions;
-    return { isShowMobileActions, isLoading, mobileTitleActions };
+    const mobileClassnames = useMemo(() => classNames(pageHeaderClassnames.pageHeaderMobileTitle, {
+        [pageHeaderClassnames.hasTitle]: Boolean(title) || isLoading,
+        [pageHeaderClassnames.hasBackButton]: Boolean(backButton),
+    }), [title, backButton, isLoading]);
+    return {
+        isShowMobileActions,
+        isLoading,
+        mobileTitleActions,
+        mobileClassnames,
+    };
 };

package/components/Tag/Tag.js

@@ -13,14 +13,19 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { CrossSmOutlineSm } from '../../icons';
 import { Typography } from '../Typography';
-import { classNames } from '../utils';
 import { tagClassnames } from './constants';
 import { getBadgeColor, IconWrapper, Label, LabelContainer, LabelWrapper, StyledIconButton, Wrapper, } from './styles';
 import { TagContextProvider } from './TagContext';
 import { useLogic } from './useLogic';
 export const Tag = forwardRef((_a, ref) => {
     var { onDelete, color = 'grey', variant = 'contained', size = 'small', label, startAddon, endAddon, disabled, icon, className } = _a, restProps = __rest(_a, ["onDelete", "color", "variant", "size", "label", "startAddon", "endAddon", "disabled", "icon", "className"]);
-    const { handleDelete } = useLogic({ onDelete });
+    const { handleDelete, classnames } = useLogic({
+        onDelete,
+        size,
+        variant,
+        disabled,
+        className,
+    });
     const labelContent = (_jsxs(LabelContainer, { container: true, component: "span", spacing: 1, className: tagClassnames.label, "$variant": variant, children: [startAddon === null || startAddon === void 0 ? void 0 : startAddon({
                 color: getBadgeColor({
                     tagColor: color,
@@ -30,5 +35,5 @@ export const Tag = forwardRef((_a, ref) => {
                     tagColor: color,
                 }),
             })] }));
-    return (_jsx(TagContextProvider, { variant: variant, children: _jsxs(Wrapper, Object.assign({ ref: ref, "$size": size, "$color": color, "$variant": variant, "$isDisabled": disabled, "$isRemovable": Boolean(onDelete), className: classNames(className, tagClassnames.root) }, restProps, { children: [icon && (_jsx(IconWrapper, { className: tagClassnames.icon, children: icon })), _jsx(Typography, { variant: "body1", component: Label, children: labelContent }), onDelete && !disabled && (_jsx(StyledIconButton, { onClick: handleDelete, "$color": color, "$variant": variant, "$size": size, "aria-label": "\u0423\u0434\u0430\u043B\u0438\u0442\u044C \u044D\u043B\u0435\u043C\u0435\u043D\u0442", children: _jsx(CrossSmOutlineSm, {}) }))] })) }));
+    return (_jsx(TagContextProvider, { variant: variant, children: _jsxs(Wrapper, Object.assign({ ref: ref, "$size": size, "$color": color, "$variant": variant, "$isDisabled": disabled, "$isRemovable": Boolean(onDelete), className: classnames }, restProps, { children: [icon && (_jsx(IconWrapper, { className: tagClassnames.icon, children: icon })), _jsx(Typography, { variant: "body1", component: Label, children: labelContent }), onDelete && !disabled && (_jsx(StyledIconButton, { onClick: handleDelete, "$color": color, "$variant": variant, "$size": size, "aria-label": "\u0423\u0434\u0430\u043B\u0438\u0442\u044C \u044D\u043B\u0435\u043C\u0435\u043D\u0442", children: _jsx(CrossSmOutlineSm, {}) }))] })) }));
 });

package/components/Tag/constants.d.ts

@@ -3,4 +3,13 @@ export declare const tagClassnames: {
     root: string;
     icon: string;
     badge: string;
+    variantText: string;
+    variantContained: string;
+    variantLight: string;
+    sizeSmall: string;
+    sizeMedium: string;
+    sizeLarge: string;
+    variantTextLarge: string;
+    removable: string;
+    disabled: string;
 };

package/components/Tag/constants.js

@@ -4,4 +4,13 @@ export const tagClassnames = {
     root: createUIKitClassname('tag'),
     icon: createUIKitClassname('tag__icon'),
     badge: createUIKitClassname('tag__badge'),
+    variantText: createUIKitClassname('tag_variant_text'),
+    variantContained: createUIKitClassname('tag_variant_contained'),
+    variantLight: createUIKitClassname('tag_variant_light'),
+    sizeSmall: createUIKitClassname('tag_size_small'),
+    sizeMedium: createUIKitClassname('tag_size_medium'),
+    sizeLarge: createUIKitClassname('tag_size_large'),
+    variantTextLarge: createUIKitClassname('tag_variant_text-large'),
+    removable: createUIKitClassname('tag_removable'),
+    disabled: createUIKitClassname('tag_disabled'),
 };

package/components/Tag/styles.js

@@ -212,9 +212,9 @@ export const Wrapper = styled.div `
 
   max-width: 100%;
   height: ${({ $size }) => HEIGHTS[$size]};
-  padding-right: ${({ theme, $isRemovable, $isDisabled }) => $isRemovable && !$isDisabled ? theme.microSpacing(1) : theme.spacing(2)};
+  padding-right: ${({ theme }) => theme.spacing(2)};
   padding-left: ${({ theme }) => theme.spacing(2)};
-
+  
   color: ${({ theme, $variant, $color, $isDisabled }) => getColor({
     theme,
     variant: $variant,
@@ -232,6 +232,33 @@ export const Wrapper = styled.div `
     ? `1px solid ${theme.palette.grey[400]}`
     : 'none'};
   border-radius: ${({ theme }) => theme.shape.medium};
+  
+  &.${tagClassnames.sizeLarge} {
+    padding-right: ${({ theme }) => theme.spacing(3)};
+    padding-left: ${({ theme }) => theme.spacing(3)};
+  }
+  
+  &.${tagClassnames.sizeLarge}.${tagClassnames.variantTextLarge} {
+    padding-right: 0;
+    padding-left: 0;
+  }
+  
+  &.${tagClassnames.variantText} {
+    padding-right: 0;
+    padding-left: 0;
+  }
+
+  &.${tagClassnames.removable}.${tagClassnames.sizeLarge} {
+    padding-right: ${({ theme }) => theme.spacing(1)};
+  }
+  
+  &.${tagClassnames.removable}:not(.${tagClassnames.sizeLarge}):not(.${tagClassnames.disabled}) {
+    padding-right: ${({ theme }) => theme.microSpacing(1)};
+  }
+  
+  &.${tagClassnames.variantText}.${tagClassnames.removable} {
+    padding-right: 0;
+  }
 `;
 export const LabelWrapper = styled.span `
   overflow: hidden;

package/components/Tag/useLogic/useLogic.d.ts

@@ -1,7 +1,8 @@
 import { type SyntheticEvent } from 'react';
 import { type TagProps } from '../types';
-type UseLogicParams = Pick<TagProps, 'onDelete'>;
-export declare const useLogic: ({ onDelete }: UseLogicParams) => {
+type UseLogicParams = Pick<TagProps, 'onDelete' | 'variant' | 'size' | 'disabled' | 'className'>;
+export declare const useLogic: ({ onDelete, variant, disabled, size, className, }: UseLogicParams) => {
     handleDelete: (event: SyntheticEvent) => void;
+    classnames: string;
 };
 export {};

package/components/Tag/useLogic/useLogic.js

@@ -1,7 +1,20 @@
-export const useLogic = ({ onDelete }) => {
+import { useMemo } from 'react';
+import { classNames } from '../../utils';
+import { tagClassnames } from '../constants';
+export const useLogic = ({ onDelete, variant, disabled, size, className, }) => {
     const handleDelete = (event) => {
         event.stopPropagation();
         onDelete === null || onDelete === void 0 ? void 0 : onDelete(event);
     };
-    return { handleDelete };
+    const classnames = useMemo(() => classNames(tagClassnames.root, {
+        [tagClassnames.variantText]: variant === 'text',
+        [tagClassnames.variantContained]: variant === 'contained',
+        [tagClassnames.variantLight]: variant === 'light',
+        [tagClassnames.sizeSmall]: size === 'small',
+        [tagClassnames.sizeMedium]: size === 'medium',
+        [tagClassnames.sizeLarge]: size === 'large',
+        [tagClassnames.removable]: Boolean(onDelete),
+        [tagClassnames.disabled]: disabled,
+    }, className), [variant, size, onDelete, disabled, className]);
+    return { handleDelete, classnames };
 };

package/node/components/PageLayout/PageHeader/PageHeader.js

@@ -11,7 +11,7 @@ const Title_1 = require("./Title");
 const useLogic_1 = require("./useLogic");
 const PageHeader = (props) => {
     const { title, description, subheader, breadcrumbs, actions, backButton, className, } = props;
-    const { isLoading, mobileTitleActions, isShowMobileActions } = (0, useLogic_1.useLogic)(props);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(styles_1.MobileTitleWrapper, { "$hasBackButton": Boolean(backButton), className: (0, utils_1.classNames)(constants_1.pageHeaderClassnames.pageHeaderMobileTitle), children: [(0, jsx_runtime_1.jsx)(Title_1.Title, { backButton: backButton, title: title, isLoading: isLoading }), mobileTitleActions && mobileTitleActions] }), (0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: className, children: (0, jsx_runtime_1.jsx)(HeaderContent_1.HeaderContent, { breadcrumbs: breadcrumbs, backButton: backButton, title: title, description: description, actions: actions, subheader: subheader, isLoading: isLoading }) }), isShowMobileActions && ((0, jsx_runtime_1.jsx)(MobilePageActions_1.MobilePageActions, Object.assign({ className: (0, utils_1.classNames)(constants_1.pageHeaderClassnames.pageHeaderActions), isLoading: isLoading }, actions)))] }));
+    const { isLoading, mobileTitleActions, isShowMobileActions, mobileClassnames, } = (0, useLogic_1.useLogic)(props);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(styles_1.MobileTitleWrapper, { className: mobileClassnames, children: [(0, jsx_runtime_1.jsx)(Title_1.Title, { backButton: backButton, title: title, isLoading: isLoading }), mobileTitleActions && mobileTitleActions] }), (0, jsx_runtime_1.jsx)(styles_1.Wrapper, { className: className, children: (0, jsx_runtime_1.jsx)(HeaderContent_1.HeaderContent, { breadcrumbs: breadcrumbs, backButton: backButton, title: title, description: description, actions: actions, subheader: subheader, isLoading: isLoading }) }), isShowMobileActions && ((0, jsx_runtime_1.jsx)(MobilePageActions_1.MobilePageActions, Object.assign({ className: (0, utils_1.classNames)(constants_1.pageHeaderClassnames.pageHeaderActions), isLoading: isLoading }, actions)))] }));
 };
 exports.PageHeader = PageHeader;

package/node/components/PageLayout/PageHeader/constants.d.ts

@@ -1,5 +1,7 @@
 export declare const pageHeaderClassnames: {
     pageHeaderMobileTitle: string;
     pageHeaderActions: string;
+    hasBackButton: string;
+    hasTitle: string;
 };
 export declare const PAGE_HEADER_HEIGHT_MOBILE = "48px";

package/node/components/PageLayout/PageHeader/constants.js

@@ -5,5 +5,7 @@ const utils_1 = require("../../utils");
 exports.pageHeaderClassnames = {
     pageHeaderMobileTitle: (0, utils_1.createUIKitClassname)('page-header__mobile-title'),
     pageHeaderActions: (0, utils_1.createUIKitClassname)('page-header__actions'),
+    hasBackButton: (0, utils_1.createUIKitClassname)('page-header_has-back-button'),
+    hasTitle: (0, utils_1.createUIKitClassname)('page-header_has-title'),
 };
 exports.PAGE_HEADER_HEIGHT_MOBILE = '48px';

package/node/components/PageLayout/PageHeader/styles.d.ts

@@ -6,6 +6,4 @@ export declare const Wrapper: import("@emotion/styled").StyledComponent<{
 export declare const MobileTitleWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-} & {
-    $hasBackButton: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/node/components/PageLayout/PageHeader/styles.js

@@ -22,24 +22,29 @@ exports.Wrapper = styles_1.styled.header `
     background-color: ${({ theme }) => theme.palette.background.default};
   }
 `;
-exports.MobileTitleWrapper = (0, styles_1.styled)('div', {
-    shouldForwardProp: (prop) => !['$hasBackButton'].includes(prop),
-}) `
+exports.MobileTitleWrapper = styles_1.styled.div `
   display: none;
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     position: sticky;
     z-index: ${({ theme }) => theme.zIndex.fab};
     top: 0;
-
-    display: flex;
+    
     align-items: center;
     order: 1;
-
-    height: ${constants_1.PAGE_HEADER_HEIGHT_MOBILE};
-    min-height: ${constants_1.PAGE_HEADER_HEIGHT_MOBILE};
-    padding: ${({ theme, $hasBackButton }) => $hasBackButton ? theme.spacing(0, 4, 0, 1) : theme.spacing(4)};
-
+    
     background-color: ${({ theme }) => theme.palette.background.default};
+    
+    &.${constants_1.pageHeaderClassnames.hasTitle} {
+      display: flex;
+
+      height: ${constants_1.PAGE_HEADER_HEIGHT_MOBILE};
+      min-height: ${constants_1.PAGE_HEADER_HEIGHT_MOBILE};
+      padding: ${({ theme }) => theme.spacing(4)};
+    }
+
+    &.${constants_1.pageHeaderClassnames.hasBackButton} {
+      padding: ${({ theme }) => theme.spacing(0, 4, 0, 1)};
+    }
   }
 `;

package/node/components/PageLayout/PageHeader/useLogic/useLogic.d.ts

@@ -1,9 +1,10 @@
 import { type ElementType } from 'react';
 import type { PageHeaderProps } from '../types';
 type UseLogicParams<TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType, TBackButtonComponent extends ElementType = ElementType> = PageHeaderProps<TMainActionComponent, TSecondaryActionComponent, TBackButtonComponent>;
-export declare const useLogic: <TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType, TBackButtonComponent extends ElementType = ElementType>({ shouldUpdateDocumentTitle, title, actions, htmlTitle, }: UseLogicParams<TMainActionComponent, TSecondaryActionComponent, TBackButtonComponent>) => {
+export declare const useLogic: <TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType, TBackButtonComponent extends ElementType = ElementType>({ shouldUpdateDocumentTitle, title, actions, htmlTitle, backButton, }: UseLogicParams<TMainActionComponent, TSecondaryActionComponent, TBackButtonComponent>) => {
     isShowMobileActions: boolean | undefined;
     isLoading: boolean | undefined;
     mobileTitleActions: import("react").ReactNode;
+    mobileClassnames: string;
 };
 export {};

package/node/components/PageLayout/PageHeader/useLogic/useLogic.js

@@ -2,13 +2,24 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
+const utils_1 = require("../../../utils");
 const PageContext_1 = require("../../PageContext");
+const constants_1 = require("../constants");
 const hooks_1 = require("../hooks");
-const useLogic = ({ shouldUpdateDocumentTitle, title, actions, htmlTitle, }) => {
+const useLogic = ({ shouldUpdateDocumentTitle, title, actions, htmlTitle, backButton, }) => {
     //Переопределение Html title на title из параметров
     (0, hooks_1.usePageTitle)({ shouldUpdateDocumentTitle, htmlTitle, title });
     const { mobileTitleActions, isLoading } = (0, react_1.useContext)(PageContext_1.PageContext);
     const isShowMobileActions = actions && !mobileTitleActions;
-    return { isShowMobileActions, isLoading, mobileTitleActions };
+    const mobileClassnames = (0, react_1.useMemo)(() => (0, utils_1.classNames)(constants_1.pageHeaderClassnames.pageHeaderMobileTitle, {
+        [constants_1.pageHeaderClassnames.hasTitle]: Boolean(title) || isLoading,
+        [constants_1.pageHeaderClassnames.hasBackButton]: Boolean(backButton),
+    }), [title, backButton, isLoading]);
+    return {
+        isShowMobileActions,
+        isLoading,
+        mobileTitleActions,
+        mobileClassnames,
+    };
 };
 exports.useLogic = useLogic;

package/node/components/Tag/Tag.js

@@ -16,14 +16,19 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const icons_1 = require("../../icons");
 const Typography_1 = require("../Typography");
-const utils_1 = require("../utils");
 const constants_1 = require("./constants");
 const styles_1 = require("./styles");
 const TagContext_1 = require("./TagContext");
 const useLogic_1 = require("./useLogic");
 exports.Tag = (0, react_1.forwardRef)((_a, ref) => {
     var { onDelete, color = 'grey', variant = 'contained', size = 'small', label, startAddon, endAddon, disabled, icon, className } = _a, restProps = __rest(_a, ["onDelete", "color", "variant", "size", "label", "startAddon", "endAddon", "disabled", "icon", "className"]);
-    const { handleDelete } = (0, useLogic_1.useLogic)({ onDelete });
+    const { handleDelete, classnames } = (0, useLogic_1.useLogic)({
+        onDelete,
+        size,
+        variant,
+        disabled,
+        className,
+    });
     const labelContent = ((0, jsx_runtime_1.jsxs)(styles_1.LabelContainer, { container: true, component: "span", spacing: 1, className: constants_1.tagClassnames.label, "$variant": variant, children: [startAddon === null || startAddon === void 0 ? void 0 : startAddon({
                 color: (0, styles_1.getBadgeColor)({
                     tagColor: color,
@@ -33,5 +38,5 @@ exports.Tag = (0, react_1.forwardRef)((_a, ref) => {
                     tagColor: color,
                 }),
             })] }));
-    return ((0, jsx_runtime_1.jsx)(TagContext_1.TagContextProvider, { variant: variant, children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, Object.assign({ ref: ref, "$size": size, "$color": color, "$variant": variant, "$isDisabled": disabled, "$isRemovable": Boolean(onDelete), className: (0, utils_1.classNames)(className, constants_1.tagClassnames.root) }, restProps, { children: [icon && ((0, jsx_runtime_1.jsx)(styles_1.IconWrapper, { className: constants_1.tagClassnames.icon, children: icon })), (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "body1", component: styles_1.Label, children: labelContent }), onDelete && !disabled && ((0, jsx_runtime_1.jsx)(styles_1.StyledIconButton, { onClick: handleDelete, "$color": color, "$variant": variant, "$size": size, "aria-label": "\u0423\u0434\u0430\u043B\u0438\u0442\u044C \u044D\u043B\u0435\u043C\u0435\u043D\u0442", children: (0, jsx_runtime_1.jsx)(icons_1.CrossSmOutlineSm, {}) }))] })) }));
+    return ((0, jsx_runtime_1.jsx)(TagContext_1.TagContextProvider, { variant: variant, children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, Object.assign({ ref: ref, "$size": size, "$color": color, "$variant": variant, "$isDisabled": disabled, "$isRemovable": Boolean(onDelete), className: classnames }, restProps, { children: [icon && ((0, jsx_runtime_1.jsx)(styles_1.IconWrapper, { className: constants_1.tagClassnames.icon, children: icon })), (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "body1", component: styles_1.Label, children: labelContent }), onDelete && !disabled && ((0, jsx_runtime_1.jsx)(styles_1.StyledIconButton, { onClick: handleDelete, "$color": color, "$variant": variant, "$size": size, "aria-label": "\u0423\u0434\u0430\u043B\u0438\u0442\u044C \u044D\u043B\u0435\u043C\u0435\u043D\u0442", children: (0, jsx_runtime_1.jsx)(icons_1.CrossSmOutlineSm, {}) }))] })) }));
 });

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

@@ -3,4 +3,13 @@ export declare const tagClassnames: {
     root: string;
     icon: string;
     badge: string;
+    variantText: string;
+    variantContained: string;
+    variantLight: string;
+    sizeSmall: string;
+    sizeMedium: string;
+    sizeLarge: string;
+    variantTextLarge: string;
+    removable: string;
+    disabled: string;
 };

package/node/components/Tag/constants.js

@@ -7,4 +7,13 @@ exports.tagClassnames = {
     root: (0, utils_1.createUIKitClassname)('tag'),
     icon: (0, utils_1.createUIKitClassname)('tag__icon'),
     badge: (0, utils_1.createUIKitClassname)('tag__badge'),
+    variantText: (0, utils_1.createUIKitClassname)('tag_variant_text'),
+    variantContained: (0, utils_1.createUIKitClassname)('tag_variant_contained'),
+    variantLight: (0, utils_1.createUIKitClassname)('tag_variant_light'),
+    sizeSmall: (0, utils_1.createUIKitClassname)('tag_size_small'),
+    sizeMedium: (0, utils_1.createUIKitClassname)('tag_size_medium'),
+    sizeLarge: (0, utils_1.createUIKitClassname)('tag_size_large'),
+    variantTextLarge: (0, utils_1.createUIKitClassname)('tag_variant_text-large'),
+    removable: (0, utils_1.createUIKitClassname)('tag_removable'),
+    disabled: (0, utils_1.createUIKitClassname)('tag_disabled'),
 };

package/node/components/Tag/styles.js

@@ -217,9 +217,9 @@ exports.Wrapper = styles_1.styled.div `
 
   max-width: 100%;
   height: ${({ $size }) => HEIGHTS[$size]};
-  padding-right: ${({ theme, $isRemovable, $isDisabled }) => $isRemovable && !$isDisabled ? theme.microSpacing(1) : theme.spacing(2)};
+  padding-right: ${({ theme }) => theme.spacing(2)};
   padding-left: ${({ theme }) => theme.spacing(2)};
-
+  
   color: ${({ theme, $variant, $color, $isDisabled }) => getColor({
     theme,
     variant: $variant,
@@ -237,6 +237,33 @@ exports.Wrapper = styles_1.styled.div `
     ? `1px solid ${theme.palette.grey[400]}`
     : 'none'};
   border-radius: ${({ theme }) => theme.shape.medium};
+  
+  &.${constants_1.tagClassnames.sizeLarge} {
+    padding-right: ${({ theme }) => theme.spacing(3)};
+    padding-left: ${({ theme }) => theme.spacing(3)};
+  }
+  
+  &.${constants_1.tagClassnames.sizeLarge}.${constants_1.tagClassnames.variantTextLarge} {
+    padding-right: 0;
+    padding-left: 0;
+  }
+  
+  &.${constants_1.tagClassnames.variantText} {
+    padding-right: 0;
+    padding-left: 0;
+  }
+
+  &.${constants_1.tagClassnames.removable}.${constants_1.tagClassnames.sizeLarge} {
+    padding-right: ${({ theme }) => theme.spacing(1)};
+  }
+  
+  &.${constants_1.tagClassnames.removable}:not(.${constants_1.tagClassnames.sizeLarge}):not(.${constants_1.tagClassnames.disabled}) {
+    padding-right: ${({ theme }) => theme.microSpacing(1)};
+  }
+  
+  &.${constants_1.tagClassnames.variantText}.${constants_1.tagClassnames.removable} {
+    padding-right: 0;
+  }
 `;
 exports.LabelWrapper = styles_1.styled.span `
   overflow: hidden;

package/node/components/Tag/useLogic/useLogic.d.ts

@@ -1,7 +1,8 @@
 import { type SyntheticEvent } from 'react';
 import { type TagProps } from '../types';
-type UseLogicParams = Pick<TagProps, 'onDelete'>;
-export declare const useLogic: ({ onDelete }: UseLogicParams) => {
+type UseLogicParams = Pick<TagProps, 'onDelete' | 'variant' | 'size' | 'disabled' | 'className'>;
+export declare const useLogic: ({ onDelete, variant, disabled, size, className, }: UseLogicParams) => {
     handleDelete: (event: SyntheticEvent) => void;
+    classnames: string;
 };
 export {};

package/node/components/Tag/useLogic/useLogic.js

@@ -1,11 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
-const useLogic = ({ onDelete }) => {
+const react_1 = require("react");
+const utils_1 = require("../../utils");
+const constants_1 = require("../constants");
+const useLogic = ({ onDelete, variant, disabled, size, className, }) => {
     const handleDelete = (event) => {
         event.stopPropagation();
         onDelete === null || onDelete === void 0 ? void 0 : onDelete(event);
     };
-    return { handleDelete };
+    const classnames = (0, react_1.useMemo)(() => (0, utils_1.classNames)(constants_1.tagClassnames.root, {
+        [constants_1.tagClassnames.variantText]: variant === 'text',
+        [constants_1.tagClassnames.variantContained]: variant === 'contained',
+        [constants_1.tagClassnames.variantLight]: variant === 'light',
+        [constants_1.tagClassnames.sizeSmall]: size === 'small',
+        [constants_1.tagClassnames.sizeMedium]: size === 'medium',
+        [constants_1.tagClassnames.sizeLarge]: size === 'large',
+        [constants_1.tagClassnames.removable]: Boolean(onDelete),
+        [constants_1.tagClassnames.disabled]: disabled,
+    }, className), [variant, size, onDelete, disabled, className]);
+    return { handleDelete, classnames };
 };
 exports.useLogic = useLogic;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.0.1",
+  "version": "4.1.1",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {