@astral/ui 4.38.0 → 4.39.0

package/components/Button/Button.js

@@ -1,20 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRefWithGeneric } from '../forwardRefWithGeneric';
-import { classNames } from '../utils/classNames';
-import { buttonClassnames } from './constants';
 import { ButtonColors, ButtonVariants } from './enums';
 import { StyledButton, StyledLoader } from './styles';
 import { useLogic } from './useLogic';
 const UnwrappedButton = (props, ref) => {
-    const { loadingIndicatorColor } = useLogic(props);
+    const { loadingIndicatorColor, classnames } = useLogic(props);
     const { variant = ButtonVariants.Contained, color = variant === ButtonVariants.Text
         ? ButtonColors.Grey
         : ButtonColors.Primary, loading, disabled, children, className, selected, ...restProps } = props;
-    return (_jsxs(StyledButton, { variant: variant, ref: ref, color: color, disabled: disabled || loading, selected: selected, ...restProps, className: classNames(className, buttonClassnames.root, {
-            [buttonClassnames.loading]: loading,
-            [buttonClassnames.selected]: selected,
-            [buttonClassnames.disabled]: disabled,
-        }), "aria-disabled": loading, children: [loading && (_jsx(StyledLoader, { color: loadingIndicatorColor, size: "small", "$color": color, "$variant": variant, "$isDisabled": disabled })), children] }));
+    return (_jsxs(StyledButton, { variant: variant, ref: ref, color: color, disabled: disabled || loading, selected: selected, ...restProps, className: classnames, "aria-disabled": loading, children: [loading && (_jsx(StyledLoader, { color: loadingIndicatorColor, size: "small", "$color": color, "$variant": variant, "$isDisabled": disabled })), children] }));
 };
 export const Button = forwardRefWithGeneric(UnwrappedButton);
 export default Button;

package/components/Button/constants.d.ts

@@ -1,5 +1,17 @@
 export { buttonClasses } from '@mui/material/Button';
+export declare const buttonColorClassnames: {
+    primary: string;
+    error: string;
+    success: string;
+    warning: string;
+    grey: string;
+};
 export declare const buttonClassnames: {
+    primary: string;
+    error: string;
+    success: string;
+    warning: string;
+    grey: string;
     root: string;
     loading: string;
     selected: string;

package/components/Button/constants.js

@@ -1,8 +1,17 @@
 import { createUIKitClassname } from '../utils/createUIKitClassname';
+import { ButtonColors } from './enums';
 export { buttonClasses } from '@mui/material/Button';
+export const buttonColorClassnames = {
+    [ButtonColors.Primary]: createUIKitClassname('button_color-primary'),
+    [ButtonColors.Error]: createUIKitClassname('button_color-error'),
+    [ButtonColors.Success]: createUIKitClassname('button_color-success'),
+    [ButtonColors.Warning]: createUIKitClassname('button_color-warning'),
+    [ButtonColors.Grey]: createUIKitClassname('button_color-grey'),
+};
 export const buttonClassnames = {
     root: createUIKitClassname('button'),
     loading: createUIKitClassname('button_loading'),
     selected: createUIKitClassname('button_selected'),
     disabled: createUIKitClassname('button_disabled'),
+    ...buttonColorClassnames,
 };

package/components/Button/useLogic/useLogic.d.ts

@@ -1,7 +1,8 @@
 import { type ButtonProps } from '../types';
 type UseLogicParam = ButtonProps;
 type Color = 'primary' | 'inverted';
-export declare const useLogic: ({ variant, }: UseLogicParam) => {
+export declare const useLogic: ({ loading, selected, variant, color, disabled, className, }: UseLogicParam) => {
     loadingIndicatorColor: Color;
+    classnames: string;
 };
 export {};

package/components/Button/useLogic/useLogic.js

@@ -1,11 +1,20 @@
 import { useMemo } from 'react';
-import { ButtonVariants } from '../enums';
-export const useLogic = ({ variant = ButtonVariants.Contained, }) => {
+import { classNames } from '../../utils/classNames';
+import { buttonClassnames, buttonColorClassnames } from '../constants';
+import { ButtonColors, ButtonVariants } from '../enums';
+export const useLogic = ({ loading, selected, variant = ButtonVariants.Contained, color = variant === ButtonVariants.Text
+    ? ButtonColors.Grey
+    : ButtonColors.Primary, disabled, className, }) => {
     const loadingIndicatorColor = useMemo(() => {
         if (variant !== ButtonVariants.Contained) {
             return 'primary';
         }
         return 'inverted';
     }, [variant]);
-    return { loadingIndicatorColor };
+    const classnames = useMemo(() => classNames(buttonClassnames.root, buttonColorClassnames[color], className, {
+        [buttonClassnames.loading]: loading,
+        [buttonClassnames.disabled]: disabled,
+        [buttonClassnames.selected]: selected,
+    }), [loading, selected, color, className, disabled]);
+    return { loadingIndicatorColor, classnames };
 };

package/node/components/Button/Button.js

@@ -3,21 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const forwardRefWithGeneric_1 = require("../forwardRefWithGeneric");
-const classNames_1 = require("../utils/classNames");
-const constants_1 = require("./constants");
 const enums_1 = require("./enums");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const UnwrappedButton = (props, ref) => {
-    const { loadingIndicatorColor } = (0, useLogic_1.useLogic)(props);
+    const { loadingIndicatorColor, classnames } = (0, useLogic_1.useLogic)(props);
     const { variant = enums_1.ButtonVariants.Contained, color = variant === enums_1.ButtonVariants.Text
         ? enums_1.ButtonColors.Grey
         : enums_1.ButtonColors.Primary, loading, disabled, children, className, selected, ...restProps } = props;
-    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledButton, { variant: variant, ref: ref, color: color, disabled: disabled || loading, selected: selected, ...restProps, className: (0, classNames_1.classNames)(className, constants_1.buttonClassnames.root, {
-            [constants_1.buttonClassnames.loading]: loading,
-            [constants_1.buttonClassnames.selected]: selected,
-            [constants_1.buttonClassnames.disabled]: disabled,
-        }), "aria-disabled": loading, children: [loading && ((0, jsx_runtime_1.jsx)(styles_1.StyledLoader, { color: loadingIndicatorColor, size: "small", "$color": color, "$variant": variant, "$isDisabled": disabled })), children] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledButton, { variant: variant, ref: ref, color: color, disabled: disabled || loading, selected: selected, ...restProps, className: classnames, "aria-disabled": loading, children: [loading && ((0, jsx_runtime_1.jsx)(styles_1.StyledLoader, { color: loadingIndicatorColor, size: "small", "$color": color, "$variant": variant, "$isDisabled": disabled })), children] }));
 };
 exports.Button = (0, forwardRefWithGeneric_1.forwardRefWithGeneric)(UnwrappedButton);
 exports.default = exports.Button;

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

@@ -1,5 +1,17 @@
 export { buttonClasses } from '@mui/material/Button';
+export declare const buttonColorClassnames: {
+    primary: string;
+    error: string;
+    success: string;
+    warning: string;
+    grey: string;
+};
 export declare const buttonClassnames: {
+    primary: string;
+    error: string;
+    success: string;
+    warning: string;
+    grey: string;
     root: string;
     loading: string;
     selected: string;

package/node/components/Button/constants.js

@@ -1,12 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.buttonClassnames = exports.buttonClasses = void 0;
+exports.buttonClassnames = exports.buttonColorClassnames = exports.buttonClasses = void 0;
 const createUIKitClassname_1 = require("../utils/createUIKitClassname");
+const enums_1 = require("./enums");
 var Button_1 = require("@mui/material/Button");
 Object.defineProperty(exports, "buttonClasses", { enumerable: true, get: function () { return Button_1.buttonClasses; } });
+exports.buttonColorClassnames = {
+    [enums_1.ButtonColors.Primary]: (0, createUIKitClassname_1.createUIKitClassname)('button_color-primary'),
+    [enums_1.ButtonColors.Error]: (0, createUIKitClassname_1.createUIKitClassname)('button_color-error'),
+    [enums_1.ButtonColors.Success]: (0, createUIKitClassname_1.createUIKitClassname)('button_color-success'),
+    [enums_1.ButtonColors.Warning]: (0, createUIKitClassname_1.createUIKitClassname)('button_color-warning'),
+    [enums_1.ButtonColors.Grey]: (0, createUIKitClassname_1.createUIKitClassname)('button_color-grey'),
+};
 exports.buttonClassnames = {
     root: (0, createUIKitClassname_1.createUIKitClassname)('button'),
     loading: (0, createUIKitClassname_1.createUIKitClassname)('button_loading'),
     selected: (0, createUIKitClassname_1.createUIKitClassname)('button_selected'),
     disabled: (0, createUIKitClassname_1.createUIKitClassname)('button_disabled'),
+    ...exports.buttonColorClassnames,
 };

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

@@ -1,7 +1,8 @@
 import { type ButtonProps } from '../types';
 type UseLogicParam = ButtonProps;
 type Color = 'primary' | 'inverted';
-export declare const useLogic: ({ variant, }: UseLogicParam) => {
+export declare const useLogic: ({ loading, selected, variant, color, disabled, className, }: UseLogicParam) => {
     loadingIndicatorColor: Color;
+    classnames: string;
 };
 export {};

package/node/components/Button/useLogic/useLogic.js

@@ -2,14 +2,23 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
+const classNames_1 = require("../../utils/classNames");
+const constants_1 = require("../constants");
 const enums_1 = require("../enums");
-const useLogic = ({ variant = enums_1.ButtonVariants.Contained, }) => {
+const useLogic = ({ loading, selected, variant = enums_1.ButtonVariants.Contained, color = variant === enums_1.ButtonVariants.Text
+    ? enums_1.ButtonColors.Grey
+    : enums_1.ButtonColors.Primary, disabled, className, }) => {
     const loadingIndicatorColor = (0, react_1.useMemo)(() => {
         if (variant !== enums_1.ButtonVariants.Contained) {
             return 'primary';
         }
         return 'inverted';
     }, [variant]);
-    return { loadingIndicatorColor };
+    const classnames = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(constants_1.buttonClassnames.root, constants_1.buttonColorClassnames[color], className, {
+        [constants_1.buttonClassnames.loading]: loading,
+        [constants_1.buttonClassnames.disabled]: disabled,
+        [constants_1.buttonClassnames.selected]: selected,
+    }), [loading, selected, color, className, disabled]);
+    return { loadingIndicatorColor, classnames };
 };
 exports.useLogic = useLogic;

package/package.json

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