@astral/ui 4.76.1 → 4.76.3

package/components/Badge/Badge.d.ts

@@ -1,18 +1,2 @@
-import { type BadgeProps as MuiBadgeProps } from '@mui/material/Badge/Badge';
-import { type WithoutEmotionSpecific } from '../types/WithoutEmotionSpecific';
-import { type BadgeColor, type BadgeVariantsColor } from './types';
-export type BadgeProps = Omit<WithoutEmotionSpecific<MuiBadgeProps>, 'color'> & {
-    /**
-     * Цвет фона
-     */
-    color: BadgeColor;
-    /**
-     * Наличие белой рамки
-     */
-    withBorder?: boolean;
-    /**
-     * Группа цвета
-     */
-    variantColor?: BadgeVariantsColor;
-};
-export declare const Badge: ({ children, color, max, withBorder, variantColor, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+import { type BadgeProps } from './types';
+export declare const Badge: ({ children, color, max, withBorder, variantColor, classes, className, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;

package/components/Badge/Badge.js

@@ -1,3 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from '../utils/classNames';
+import { badgeClassnames } from './constants';
 import { StyledBadge } from './styles';
-export const Badge = ({ children, color, max = 99, withBorder = true, variantColor = 'contained', ...props }) => (_jsx(StyledBadge, { "$customColor": color, max: max, "$withBorder": withBorder, "$variantColor": variantColor, ...props, children: children }));
+import { useLogic } from './useLogic';
+export const Badge = ({ children, color, max = 99, withBorder = true, variantColor = 'contained', classes, className, ...props }) => {
+    const { badgeClasses } = useLogic({ classes });
+    return (_jsx(StyledBadge, { "$customColor": color, max: max, "$withBorder": withBorder, "$variantColor": variantColor, classes: badgeClasses, className: classNames(badgeClassnames.root, className), ...props, children: children }));
+};

package/components/Badge/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const badgeClassnames: {
+    root: string;
+    content: string;
+    dot: string;
+    disableAutoWidth: string;
+};

package/components/Badge/constants.js

@@ -0,0 +1,7 @@
+import { createUIKitClassname } from '../utils/createUIKitClassname';
+export const badgeClassnames = {
+    root: createUIKitClassname('badge'),
+    content: createUIKitClassname('badge__content'),
+    dot: createUIKitClassname('badge__dot'),
+    disableAutoWidth: createUIKitClassname('badge__disable-auto-width'),
+};

package/components/Badge/styles.js

@@ -1,5 +1,6 @@
 import Badge from '@mui/material/Badge';
 import { styled } from '../styled';
+import { badgeClassnames } from './constants';
 const getBgColor = ({ $customColor, theme, $variantColor, }) => {
     const colors = {
         contained: {
@@ -46,7 +47,13 @@ const getTextColor = ({ $customColor, theme, $variantColor, }) => {
 export const StyledBadge = styled(Badge, {
     shouldForwardProp: (prop) => !['$customColor', '$withBorder', '$variantColor'].includes(prop),
 }) `
-  .MuiBadge-badge {
+ 
+  /* Элемент внутри Badge будет растягиваться на всю ширину Badge */
+  & > * {
+    flex-grow: 1;
+  }
+
+  .${badgeClassnames.content} {
     cursor: default;
     user-select: none;
 
@@ -75,7 +82,7 @@ export const StyledBadge = styled(Badge, {
     }
   }
 
-  .MuiBadge-dot {
+  .${badgeClassnames.dot} {
     width: 8px;
     min-width: unset;
     height: 8px;

package/components/Badge/types.d.ts

@@ -1,2 +1,18 @@
+import { type BadgeProps as MuiBadgeProps } from '@mui/material/Badge/Badge';
+import { type WithoutEmotionSpecific } from '../types/WithoutEmotionSpecific';
 export type BadgeColor = 'primary' | 'grey' | 'white' | 'warning' | 'error' | 'success' | 'transparent';
 export type BadgeVariantsColor = 'contained' | 'light';
+export type BadgeProps = Omit<WithoutEmotionSpecific<MuiBadgeProps>, 'color'> & {
+    /**
+     * Цвет фона
+     */
+    color: BadgeColor;
+    /**
+     * Наличие белой рамки
+     */
+    withBorder?: boolean;
+    /**
+     * Группа цвета
+     */
+    variantColor?: BadgeVariantsColor;
+};

package/components/Badge/useLogic/index.d.ts

@@ -0,0 +1 @@
+export * from './useLogic';

package/components/Badge/useLogic/index.js

@@ -0,0 +1 @@
+export * from './useLogic';

package/components/Badge/useLogic/useLogic.d.ts

@@ -0,0 +1,32 @@
+import { type BadgeProps } from '../types';
+type UseLogicParams = Pick<BadgeProps, 'classes'>;
+export declare const useLogic: ({ classes }: UseLogicParams) => {
+    badgeClasses: {
+        badge: string;
+        dot: string;
+        root?: string | undefined;
+        standard?: string | undefined;
+        anchorOriginTopRight?: string | undefined;
+        anchorOriginBottomRight?: string | undefined;
+        anchorOriginTopLeft?: string | undefined;
+        anchorOriginBottomLeft?: string | undefined;
+        invisible?: string | undefined;
+        colorPrimary?: string | undefined;
+        colorSecondary?: string | undefined;
+        colorError?: string | undefined;
+        colorInfo?: string | undefined;
+        colorSuccess?: string | undefined;
+        colorWarning?: string | undefined;
+        anchorOriginTopRightRectangular?: string | undefined;
+        anchorOriginBottomRightRectangular?: string | undefined;
+        anchorOriginTopLeftRectangular?: string | undefined;
+        anchorOriginBottomLeftRectangular?: string | undefined;
+        anchorOriginTopRightCircular?: string | undefined;
+        anchorOriginBottomRightCircular?: string | undefined;
+        anchorOriginTopLeftCircular?: string | undefined;
+        anchorOriginBottomLeftCircular?: string | undefined;
+        overlapRectangular?: string | undefined;
+        overlapCircular?: string | undefined;
+    };
+};
+export {};

package/components/Badge/useLogic/useLogic.js

@@ -0,0 +1,15 @@
+import { useMemo } from 'react';
+import { badgeClassnames } from '../constants';
+export const useLogic = ({ classes }) => {
+    const { badge = '', dot = '', ...restClasses } = classes || {};
+    const badgeClasses = useMemo(() => {
+        return {
+            ...restClasses,
+            badge: `${badgeClassnames.content} ${badge}`,
+            dot: `${badgeClassnames.dot} ${dot}`,
+        };
+    }, [classes]);
+    return {
+        badgeClasses,
+    };
+};

package/node/components/Badge/Badge.d.ts

@@ -1,18 +1,2 @@
-import { type BadgeProps as MuiBadgeProps } from '@mui/material/Badge/Badge';
-import { type WithoutEmotionSpecific } from '../types/WithoutEmotionSpecific';
-import { type BadgeColor, type BadgeVariantsColor } from './types';
-export type BadgeProps = Omit<WithoutEmotionSpecific<MuiBadgeProps>, 'color'> & {
-    /**
-     * Цвет фона
-     */
-    color: BadgeColor;
-    /**
-     * Наличие белой рамки
-     */
-    withBorder?: boolean;
-    /**
-     * Группа цвета
-     */
-    variantColor?: BadgeVariantsColor;
-};
-export declare const Badge: ({ children, color, max, withBorder, variantColor, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+import { type BadgeProps } from './types';
+export declare const Badge: ({ children, color, max, withBorder, variantColor, classes, className, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;

package/node/components/Badge/Badge.js

@@ -2,6 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Badge = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const classNames_1 = require("../utils/classNames");
+const constants_1 = require("./constants");
 const styles_1 = require("./styles");
-const Badge = ({ children, color, max = 99, withBorder = true, variantColor = 'contained', ...props }) => ((0, jsx_runtime_1.jsx)(styles_1.StyledBadge, { "$customColor": color, max: max, "$withBorder": withBorder, "$variantColor": variantColor, ...props, children: children }));
+const useLogic_1 = require("./useLogic");
+const Badge = ({ children, color, max = 99, withBorder = true, variantColor = 'contained', classes, className, ...props }) => {
+    const { badgeClasses } = (0, useLogic_1.useLogic)({ classes });
+    return ((0, jsx_runtime_1.jsx)(styles_1.StyledBadge, { "$customColor": color, max: max, "$withBorder": withBorder, "$variantColor": variantColor, classes: badgeClasses, className: (0, classNames_1.classNames)(constants_1.badgeClassnames.root, className), ...props, children: children }));
+};
 exports.Badge = Badge;

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

@@ -0,0 +1,6 @@
+export declare const badgeClassnames: {
+    root: string;
+    content: string;
+    dot: string;
+    disableAutoWidth: string;
+};

package/node/components/Badge/constants.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.badgeClassnames = void 0;
+const createUIKitClassname_1 = require("../utils/createUIKitClassname");
+exports.badgeClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('badge'),
+    content: (0, createUIKitClassname_1.createUIKitClassname)('badge__content'),
+    dot: (0, createUIKitClassname_1.createUIKitClassname)('badge__dot'),
+    disableAutoWidth: (0, createUIKitClassname_1.createUIKitClassname)('badge__disable-auto-width'),
+};

package/node/components/Badge/styles.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledBadge = void 0;
 const Badge_1 = __importDefault(require("@mui/material/Badge"));
 const styled_1 = require("../styled");
+const constants_1 = require("./constants");
 const getBgColor = ({ $customColor, theme, $variantColor, }) => {
     const colors = {
         contained: {
@@ -52,7 +53,13 @@ const getTextColor = ({ $customColor, theme, $variantColor, }) => {
 exports.StyledBadge = (0, styled_1.styled)(Badge_1.default, {
     shouldForwardProp: (prop) => !['$customColor', '$withBorder', '$variantColor'].includes(prop),
 }) `
-  .MuiBadge-badge {
+ 
+  /* Элемент внутри Badge будет растягиваться на всю ширину Badge */
+  & > * {
+    flex-grow: 1;
+  }
+
+  .${constants_1.badgeClassnames.content} {
     cursor: default;
     user-select: none;
 
@@ -81,7 +88,7 @@ exports.StyledBadge = (0, styled_1.styled)(Badge_1.default, {
     }
   }
 
-  .MuiBadge-dot {
+  .${constants_1.badgeClassnames.dot} {
     width: 8px;
     min-width: unset;
     height: 8px;

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

@@ -1,2 +1,18 @@
+import { type BadgeProps as MuiBadgeProps } from '@mui/material/Badge/Badge';
+import { type WithoutEmotionSpecific } from '../types/WithoutEmotionSpecific';
 export type BadgeColor = 'primary' | 'grey' | 'white' | 'warning' | 'error' | 'success' | 'transparent';
 export type BadgeVariantsColor = 'contained' | 'light';
+export type BadgeProps = Omit<WithoutEmotionSpecific<MuiBadgeProps>, 'color'> & {
+    /**
+     * Цвет фона
+     */
+    color: BadgeColor;
+    /**
+     * Наличие белой рамки
+     */
+    withBorder?: boolean;
+    /**
+     * Группа цвета
+     */
+    variantColor?: BadgeVariantsColor;
+};

package/node/components/Badge/useLogic/index.d.ts

@@ -0,0 +1 @@
+export * from './useLogic';

package/node/components/Badge/useLogic/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useLogic"), exports);

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

@@ -0,0 +1,32 @@
+import { type BadgeProps } from '../types';
+type UseLogicParams = Pick<BadgeProps, 'classes'>;
+export declare const useLogic: ({ classes }: UseLogicParams) => {
+    badgeClasses: {
+        badge: string;
+        dot: string;
+        root?: string | undefined;
+        standard?: string | undefined;
+        anchorOriginTopRight?: string | undefined;
+        anchorOriginBottomRight?: string | undefined;
+        anchorOriginTopLeft?: string | undefined;
+        anchorOriginBottomLeft?: string | undefined;
+        invisible?: string | undefined;
+        colorPrimary?: string | undefined;
+        colorSecondary?: string | undefined;
+        colorError?: string | undefined;
+        colorInfo?: string | undefined;
+        colorSuccess?: string | undefined;
+        colorWarning?: string | undefined;
+        anchorOriginTopRightRectangular?: string | undefined;
+        anchorOriginBottomRightRectangular?: string | undefined;
+        anchorOriginTopLeftRectangular?: string | undefined;
+        anchorOriginBottomLeftRectangular?: string | undefined;
+        anchorOriginTopRightCircular?: string | undefined;
+        anchorOriginBottomRightCircular?: string | undefined;
+        anchorOriginTopLeftCircular?: string | undefined;
+        anchorOriginBottomLeftCircular?: string | undefined;
+        overlapRectangular?: string | undefined;
+        overlapCircular?: string | undefined;
+    };
+};
+export {};

package/node/components/Badge/useLogic/useLogic.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogic = void 0;
+const react_1 = require("react");
+const constants_1 = require("../constants");
+const useLogic = ({ classes }) => {
+    const { badge = '', dot = '', ...restClasses } = classes || {};
+    const badgeClasses = (0, react_1.useMemo)(() => {
+        return {
+            ...restClasses,
+            badge: `${constants_1.badgeClassnames.content} ${badge}`,
+            dot: `${constants_1.badgeClassnames.dot} ${dot}`,
+        };
+    }, [classes]);
+    return {
+        badgeClasses,
+    };
+};
+exports.useLogic = useLogic;

package/package.json

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