HOTFIXES: я забыл

.idea/inspectionProfiles/Project_Default.xml

@@ -2,6 +2,5 @@
   <profile version="1.0">
     <option name="myName" value="Project Default" />
     <inspection_tool class="ES6PreferShortImport" enabled="false" level="WARNING" enabled_by_default="false" />
-    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
   </profile>
 </component>

README.md

@@ -13,7 +13,7 @@ This repository is including and will be including components, enumerates in tab
 - [X] Switches
 - [ ] Chips
 - [x] Icon
-- [x] Ripple Effect
+- [x] Ripples Effect
 - [ ] Dividers (WIP)
 - [x] Badges
 - [ ] Select field

src/primitive-components/components.tsx

@@ -4,7 +4,7 @@ export { Badge } from './badge/badge';
 export { Divider } from './divider/divider';
 export { Container } from './container/container';
 export { RippleArea } from './ripple/ripple-area';
-export { Ripples, Ripple } from './ripple/ripple';
+export { Ripples, Ripples } from './ripple/ripples';
 export { FAB } from './button-components/fab/fab';
 export { Radio } from './input-components/radio/radio';
 export { Switch } from './input-components/switch/switch';

src/primitive-components/ripple/ripple-area.tsx

@@ -8,8 +8,7 @@ import React, {
     useRef,
     useState,
 } from 'react';
-import { Ripple } from './ripple';
+import { Ripples, Ripple } from './ripples';
-import { Ripples } from './ripple';
 import { RippleAreaProps } from './ripple.types';
 import { InteractionEventsType } from './hooks/useRippleEffect';
 
@@ -24,11 +23,10 @@ const RippleArea = forwardRef(
             uniqueKey = useRef<number>(0),
             uniqueId = useId();
 
-        const extraClassStyles = props.className
+        const extraClassStyles =
-            ? `m3 m3-ripple-domain ${props.className}`.trimEnd()
+            `m3 m3-ripple-domain ${props.className ?? ''}`.trimEnd();
-            : 'm3 m3-ripple-domain';
 
-        const start = (
+        const createRipple = (
             event: InteractionEventsType,
             cb: (state: boolean) => void,
         ): void => {
@@ -94,7 +92,7 @@ const RippleArea = forwardRef(
             uniqueKey.current += 1;
         };
 
-        const stop = (
+        const removeRipple = (
             _event: InteractionEventsType,
             cb: (state: boolean) => void,
         ) => {
@@ -114,10 +112,10 @@ const RippleArea = forwardRef(
         useImperativeHandle(
             ref,
             () => ({
-                start,
+                start: createRipple,
-                stop,
+                stop: removeRipple,
             }),
-            [start, stop],
+            [createRipple, removeRipple],
         );
 
         return (

src/primitive-components/ripple/ripples.tsx

@@ -78,4 +78,4 @@ const Ripple = ({
     );
 };
 
-export { Ripple, Ripples };
+export { Ripples, Ripple };

src/styles/button-styles/segmented-button.sass

@@ -10,29 +10,14 @@ div.m3.m3-segmented-buttons
         border-radius: 0
         box-sizing: border-box
         height: 40px
+        min-width: 108px
+        border: 1px solid var(--md-sys-color-outline)
 
-        &
+        &:not(:first-child)
-            border: 1px solid var(--md-sys-color-outline)
+            margin-left: -1px
-            border-right: 0.5px
-            border-left: 0.5px
-            border-left-style: solid
-            border-right-style: solid
-            border-left-color: var(--md-sys-color-outline)
-            border-right-color: var(--md-sys-color-outline)
-            min-width: 107px
 
         &:first-child
-            border: 1px solid var(--md-sys-color-outline)
-            border-right: 0.5px
-            border-right-style: solid
-            border-right-color: var(--md-sys-color-outline)
-            min-width: 108px - 0.5px
             border-radius: 20px 0 0 20px
 
         &:last-child
-            border: 1px solid var(--md-sys-color-outline)
+            border-radius: 0 20px 20px 0
-            border-left: 0.5px
-            border-left-style: solid
-            border-left-color: var(--md-sys-color-outline)
-            min-width: 108px - 0.5px
-            border-radius: 0 20px 20px 0