@astral/ui 4.20.0 → 4.21.0

package/components/ToggleButton/ToggleButton.js

@@ -3,6 +3,6 @@ import { forwardRef } from 'react';
 import { StyledToggleButton } from './styles';
 import { useLogic } from './useLogic';
 export const ToggleButton = forwardRef((props, ref) => {
-    const { isVisibleCounter, children, disabled, counterLabel, color, selected, restProps, } = useLogic(props);
-    return (_jsxs(StyledToggleButton, { ref: ref, disabled: disabled, selected: selected, ...restProps, "$color": color, children: [children, isVisibleCounter && _jsxs(_Fragment, { children: [" \u00B7 ", counterLabel] })] }));
+    const { isVisibleCounter, children, disabled, counterLabel, color, selected, restProps, variant, } = useLogic(props);
+    return (_jsxs(StyledToggleButton, { ref: ref, disabled: disabled, selected: selected, ...restProps, "$color": color, "$variant": variant, children: [children, isVisibleCounter && _jsxs(_Fragment, { children: [" \u00B7 ", counterLabel] })] }));
 });

package/components/ToggleButton/styles.d.ts

@@ -4,5 +4,6 @@ export declare const StyledToggleButton: import("../styled").StyledComponent<imp
     theme?: import("@emotion/react").Theme | undefined;
 } & {
     $color: ToggleButtonColor;
+    $variant: 'transparent' | 'plain';
 }, {}, {}>;
 export {};

package/components/ToggleButton/styles.js

@@ -19,7 +19,7 @@ const getColor = ({ color = 'primary', isSelected, state = 'default', theme, isD
     }
     return theme.palette.grey[800];
 };
-const getBgColor = ({ color = 'primary', isSelected, state = 'default', theme, isDisabled, }) => {
+const getBgColor = ({ color = 'primary', isSelected, state = 'default', theme, isDisabled, variant, }) => {
     if (isDisabled) {
         return theme.palette.background.default;
     }
@@ -32,7 +32,7 @@ const getBgColor = ({ color = 'primary', isSelected, state = 'default', theme, i
     if (state === 'active' || isSelected) {
         return theme.palette[color][100];
     }
-    return theme.palette.background.default;
+    return variant === 'plain' ? theme.palette.background.default : 'transparent';
 };
 const getBorderColor = ({ state = 'default', color = 'primary', theme, isSelected, }) => {
     if (state === 'hover' && isSelected) {
@@ -43,14 +43,14 @@ const getBorderColor = ({ state = 'default', color = 'primary', theme, isSelecte
     }
     return theme.palette.grey[100];
 };
-const toggleButtonColorStyle = ({ theme, color, selected, disabled, state = 'default', }) => css `
+const toggleButtonColorStyle = ({ theme, color, selected, disabled, state = 'default', variant = 'transparent', }) => css `
   color: ${getColor({ theme, color, isSelected: selected, isDisabled: disabled, state })};
 
-  background-color: ${getBgColor({ theme, color, isSelected: selected, isDisabled: disabled, state })};
+  background-color: ${getBgColor({ theme, color, isSelected: selected, isDisabled: disabled, state, variant })};
   border-color: ${getBorderColor({ theme, color, isSelected: selected, state })};
 `;
 export const StyledToggleButton = styled(MuiToggleButton, {
-    shouldForwardProp: (prop) => !['$color'].includes(prop),
+    shouldForwardProp: (prop) => !['$color', '$variant'].includes(prop),
 }) `
   gap: ${({ theme }) => theme.spacing(1)};
 
@@ -62,7 +62,7 @@ export const StyledToggleButton = styled(MuiToggleButton, {
 
   border-radius: ${({ theme }) => theme.shape.medium};
   
-  ${({ theme, $color, disabled }) => toggleButtonColorStyle({ theme, color: $color, disabled })}
+  ${({ theme, $color, disabled, $variant }) => toggleButtonColorStyle({ theme, color: $color, disabled, variant: $variant })}
 
   &:hover {
     ${({ theme, $color, disabled }) => toggleButtonColorStyle({ theme, color: $color, disabled, state: 'hover' })};

package/components/ToggleButton/useLogic/useLogic.d.ts

@@ -315,5 +315,6 @@ export declare const useLogic: ({ selected, color, counter, children, disabled,
         formTarget?: string | undefined;
         value: {};
     };
+    variant: "transparent" | "plain";
 };
 export {};

package/components/ToggleButton/useLogic/useLogic.js

@@ -1,6 +1,8 @@
-import { useMemo } from 'react';
+import { useContext, useMemo } from 'react';
+import { ToggleButtonGroupContext } from '../../ToggleButtonGroup';
 export const useLogic = ({ selected, color = 'primary', counter, children, disabled, counterMax = 99, ...restProps }) => {
     const isVisibleCounter = Boolean(counter);
+    const { variant } = useContext(ToggleButtonGroupContext);
     const counterLabel = useMemo(() => {
         if (!isVisibleCounter) {
             return undefined;
@@ -20,5 +22,6 @@ export const useLogic = ({ selected, color = 'primary', counter, children, disab
         selected,
         counterLabel,
         restProps,
+        variant,
     };
 };

package/components/ToggleButtonGroup/ToggleButtonGroup.d.ts

@@ -10,5 +10,15 @@ export type ToggleButtonGroupProps = WithoutEmotionSpecific<Omit<MuiToggleButton
      * Текстовая информация об ошибке, будет отображен в тултипе при isError: true
      */
     errorText?: ReactNode;
+    /**
+     * Определяет стиль отображения группы кнопок
+     *
+     * - `transparent` — прозрачный фон кнопок ToggleButton
+     *
+     * - `plain` — белый фон кнопок ToggleButton
+     *
+     * @default transparent
+     */
+    variant?: 'transparent' | 'plain';
 };
 export declare const ToggleButtonGroup: import("react").ForwardRefExoticComponent<Omit<ToggleButtonGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/components/ToggleButtonGroup/ToggleButtonGroup.js

@@ -4,6 +4,6 @@ import { Tooltip } from '../Tooltip';
 import { StyledToggleButtonGroup } from './styles';
 import { ToggleButtonGroupContextProvider } from './ToggleButtonGroupContext';
 export const ToggleButtonGroup = forwardRef((props, ref) => {
-    const { size = 'medium', isError, errorText, ...restProps } = props;
-    return (_jsx(ToggleButtonGroupContextProvider, { isError: isError, children: _jsx(Tooltip, { title: isError && errorText, followCursor: true, arrow: false, children: _jsx(StyledToggleButtonGroup, { ref: ref, size: size, ...restProps, "$isError": isError }) }) }));
+    const { size = 'medium', isError, errorText, variant = 'transparent', ...restProps } = props;
+    return (_jsx(ToggleButtonGroupContextProvider, { isError: isError, variant: variant, children: _jsx(Tooltip, { title: isError && errorText, followCursor: true, arrow: false, children: _jsx(StyledToggleButtonGroup, { ref: ref, size: size, ...restProps, "$isError": isError }) }) }));
 });

package/components/ToggleButtonGroup/ToggleButtonGroupContext/ToggleButtonGroupContext.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 export type ToggleButtonGroupContextProps = {
     isError?: boolean;
+    variant: 'transparent' | 'plain';
 };
 export declare const ToggleButtonGroupContext: import("react").Context<ToggleButtonGroupContextProps>;

package/components/ToggleButtonGroup/ToggleButtonGroupContext/ToggleButtonGroupContext.js

@@ -1,4 +1,5 @@
 import { createContext } from 'react';
 export const ToggleButtonGroupContext = createContext({
     isError: false,
+    variant: 'transparent',
 });

package/components/ToggleButtonGroup/ToggleButtonGroupContext/ToggleButtonGroupContextProvider/ToggleButtonGroupContextProvider.d.ts

@@ -3,4 +3,4 @@ import { type ToggleButtonGroupContextProps } from '../ToggleButtonGroupContext'
 export type Props = ToggleButtonGroupContextProps & {
     children: ReactNode;
 };
-export declare const ToggleButtonGroupContextProvider: ({ children, isError, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const ToggleButtonGroupContextProvider: ({ children, isError, variant, }: Props) => import("react/jsx-runtime").JSX.Element;

package/components/ToggleButtonGroup/ToggleButtonGroupContext/ToggleButtonGroupContextProvider/ToggleButtonGroupContextProvider.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ToggleButtonGroupContext, } from '../ToggleButtonGroupContext';
-export const ToggleButtonGroupContextProvider = ({ children, isError, }) => {
-    return (_jsx(ToggleButtonGroupContext.Provider, { value: { isError }, children: children }));
+export const ToggleButtonGroupContextProvider = ({ children, isError, variant, }) => {
+    return (_jsx(ToggleButtonGroupContext.Provider, { value: { isError, variant }, children: children }));
 };

package/node/components/ToggleButton/ToggleButton.js

@@ -6,6 +6,6 @@ const react_1 = require("react");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 exports.ToggleButton = (0, react_1.forwardRef)((props, ref) => {
-    const { isVisibleCounter, children, disabled, counterLabel, color, selected, restProps, } = (0, useLogic_1.useLogic)(props);
-    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledToggleButton, { ref: ref, disabled: disabled, selected: selected, ...restProps, "$color": color, children: [children, isVisibleCounter && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [" \u00B7 ", counterLabel] })] }));
+    const { isVisibleCounter, children, disabled, counterLabel, color, selected, restProps, variant, } = (0, useLogic_1.useLogic)(props);
+    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledToggleButton, { ref: ref, disabled: disabled, selected: selected, ...restProps, "$color": color, "$variant": variant, children: [children, isVisibleCounter && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [" \u00B7 ", counterLabel] })] }));
 });

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

@@ -4,5 +4,6 @@ export declare const StyledToggleButton: import("@emotion/styled/dist/declaratio
     theme?: import("@emotion/react").Theme | undefined;
 } & {
     $color: ToggleButtonColor;
+    $variant: 'transparent' | 'plain';
 }, {}, {}>;
 export {};

package/node/components/ToggleButton/styles.js

@@ -45,7 +45,7 @@ const getColor = ({ color = 'primary', isSelected, state = 'default', theme, isD
     }
     return theme.palette.grey[800];
 };
-const getBgColor = ({ color = 'primary', isSelected, state = 'default', theme, isDisabled, }) => {
+const getBgColor = ({ color = 'primary', isSelected, state = 'default', theme, isDisabled, variant, }) => {
     if (isDisabled) {
         return theme.palette.background.default;
     }
@@ -58,7 +58,7 @@ const getBgColor = ({ color = 'primary', isSelected, state = 'default', theme, i
     if (state === 'active' || isSelected) {
         return theme.palette[color][100];
     }
-    return theme.palette.background.default;
+    return variant === 'plain' ? theme.palette.background.default : 'transparent';
 };
 const getBorderColor = ({ state = 'default', color = 'primary', theme, isSelected, }) => {
     if (state === 'hover' && isSelected) {
@@ -69,14 +69,14 @@ const getBorderColor = ({ state = 'default', color = 'primary', theme, isSelecte
     }
     return theme.palette.grey[100];
 };
-const toggleButtonColorStyle = ({ theme, color, selected, disabled, state = 'default', }) => (0, styled_1.css) `
+const toggleButtonColorStyle = ({ theme, color, selected, disabled, state = 'default', variant = 'transparent', }) => (0, styled_1.css) `
   color: ${getColor({ theme, color, isSelected: selected, isDisabled: disabled, state })};
 
-  background-color: ${getBgColor({ theme, color, isSelected: selected, isDisabled: disabled, state })};
+  background-color: ${getBgColor({ theme, color, isSelected: selected, isDisabled: disabled, state, variant })};
   border-color: ${getBorderColor({ theme, color, isSelected: selected, state })};
 `;
 exports.StyledToggleButton = (0, styled_1.styled)(ToggleButton_1.default, {
-    shouldForwardProp: (prop) => !['$color'].includes(prop),
+    shouldForwardProp: (prop) => !['$color', '$variant'].includes(prop),
 }) `
   gap: ${({ theme }) => theme.spacing(1)};
 
@@ -88,7 +88,7 @@ exports.StyledToggleButton = (0, styled_1.styled)(ToggleButton_1.default, {
 
   border-radius: ${({ theme }) => theme.shape.medium};
   
-  ${({ theme, $color, disabled }) => toggleButtonColorStyle({ theme, color: $color, disabled })}
+  ${({ theme, $color, disabled, $variant }) => toggleButtonColorStyle({ theme, color: $color, disabled, variant: $variant })}
 
   &:hover {
     ${({ theme, $color, disabled }) => toggleButtonColorStyle({ theme, color: $color, disabled, state: 'hover' })};

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

@@ -315,5 +315,6 @@ export declare const useLogic: ({ selected, color, counter, children, disabled,
         formTarget?: string | undefined;
         value: {};
     };
+    variant: "transparent" | "plain";
 };
 export {};

package/node/components/ToggleButton/useLogic/useLogic.js

@@ -2,8 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
+const ToggleButtonGroup_1 = require("../../ToggleButtonGroup");
 const useLogic = ({ selected, color = 'primary', counter, children, disabled, counterMax = 99, ...restProps }) => {
     const isVisibleCounter = Boolean(counter);
+    const { variant } = (0, react_1.useContext)(ToggleButtonGroup_1.ToggleButtonGroupContext);
     const counterLabel = (0, react_1.useMemo)(() => {
         if (!isVisibleCounter) {
             return undefined;
@@ -23,6 +25,7 @@ const useLogic = ({ selected, color = 'primary', counter, children, disabled, co
         selected,
         counterLabel,
         restProps,
+        variant,
     };
 };
 exports.useLogic = useLogic;

package/node/components/ToggleButtonGroup/ToggleButtonGroup.d.ts

@@ -10,5 +10,15 @@ export type ToggleButtonGroupProps = WithoutEmotionSpecific<Omit<MuiToggleButton
      * Текстовая информация об ошибке, будет отображен в тултипе при isError: true
      */
     errorText?: ReactNode;
+    /**
+     * Определяет стиль отображения группы кнопок
+     *
+     * - `transparent` — прозрачный фон кнопок ToggleButton
+     *
+     * - `plain` — белый фон кнопок ToggleButton
+     *
+     * @default transparent
+     */
+    variant?: 'transparent' | 'plain';
 };
 export declare const ToggleButtonGroup: import("react").ForwardRefExoticComponent<Omit<ToggleButtonGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/node/components/ToggleButtonGroup/ToggleButtonGroup.js

@@ -7,6 +7,6 @@ const Tooltip_1 = require("../Tooltip");
 const styles_1 = require("./styles");
 const ToggleButtonGroupContext_1 = require("./ToggleButtonGroupContext");
 exports.ToggleButtonGroup = (0, react_1.forwardRef)((props, ref) => {
-    const { size = 'medium', isError, errorText, ...restProps } = props;
-    return ((0, jsx_runtime_1.jsx)(ToggleButtonGroupContext_1.ToggleButtonGroupContextProvider, { isError: isError, children: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: isError && errorText, followCursor: true, arrow: false, children: (0, jsx_runtime_1.jsx)(styles_1.StyledToggleButtonGroup, { ref: ref, size: size, ...restProps, "$isError": isError }) }) }));
+    const { size = 'medium', isError, errorText, variant = 'transparent', ...restProps } = props;
+    return ((0, jsx_runtime_1.jsx)(ToggleButtonGroupContext_1.ToggleButtonGroupContextProvider, { isError: isError, variant: variant, children: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: isError && errorText, followCursor: true, arrow: false, children: (0, jsx_runtime_1.jsx)(styles_1.StyledToggleButtonGroup, { ref: ref, size: size, ...restProps, "$isError": isError }) }) }));
 });

package/node/components/ToggleButtonGroup/ToggleButtonGroupContext/ToggleButtonGroupContext.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 export type ToggleButtonGroupContextProps = {
     isError?: boolean;
+    variant: 'transparent' | 'plain';
 };
 export declare const ToggleButtonGroupContext: import("react").Context<ToggleButtonGroupContextProps>;

package/node/components/ToggleButtonGroup/ToggleButtonGroupContext/ToggleButtonGroupContext.js

@@ -4,4 +4,5 @@ exports.ToggleButtonGroupContext = void 0;
 const react_1 = require("react");
 exports.ToggleButtonGroupContext = (0, react_1.createContext)({
     isError: false,
+    variant: 'transparent',
 });

package/node/components/ToggleButtonGroup/ToggleButtonGroupContext/ToggleButtonGroupContextProvider/ToggleButtonGroupContextProvider.d.ts

@@ -3,4 +3,4 @@ import { type ToggleButtonGroupContextProps } from '../ToggleButtonGroupContext'
 export type Props = ToggleButtonGroupContextProps & {
     children: ReactNode;
 };
-export declare const ToggleButtonGroupContextProvider: ({ children, isError, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const ToggleButtonGroupContextProvider: ({ children, isError, variant, }: Props) => import("react/jsx-runtime").JSX.Element;

package/node/components/ToggleButtonGroup/ToggleButtonGroupContext/ToggleButtonGroupContextProvider/ToggleButtonGroupContextProvider.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToggleButtonGroupContextProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ToggleButtonGroupContext_1 = require("../ToggleButtonGroupContext");
-const ToggleButtonGroupContextProvider = ({ children, isError, }) => {
-    return ((0, jsx_runtime_1.jsx)(ToggleButtonGroupContext_1.ToggleButtonGroupContext.Provider, { value: { isError }, children: children }));
+const ToggleButtonGroupContextProvider = ({ children, isError, variant, }) => {
+    return ((0, jsx_runtime_1.jsx)(ToggleButtonGroupContext_1.ToggleButtonGroupContext.Provider, { value: { isError, variant }, children: children }));
 };
 exports.ToggleButtonGroupContextProvider = ToggleButtonGroupContextProvider;

package/package.json

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