addon-stack · addon-stack · Nov 21, 2025 · Nov 14, 2025 · Nov 14, 2025 · Nov 14, 2025
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -83,18 +83,20 @@
     "odometer": "^0.4.8",
     "radix-ui": "^1.1.3",
     "react-highlight-words": "^0.21.0",
+    "react-responsive-overflow-list": "^0.2.1",
     "sass": "^1.85.1",
     "ts-deepmerge": "^7.0.3"
   },
   "devDependencies": {
     "@commitlint/cli": "^20.0.0",
     "@commitlint/config-conventional": "^20.0.0",
-    "@release-it/conventional-changelog": "^10.0.1",
-    "@types/chrome": "^0.1.12",
-    "@types/jest": "^30.0.0",
     "@eslint/js": "^9.21.0",
+    "@release-it/conventional-changelog": "^10.0.1",
     "@rsbuild/plugin-sass": "^1.4.0",
     "@storybook/react": "^9.1.3",
+    "@types/chrome": "^0.1.12",
+    "@types/jest": "^30.0.0",
+    "@types/lodash": "^4.17.20",
     "@types/node": "^22.13.10",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
@@ -104,12 +106,12 @@
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^15.15.0",
-    "prettier": "^3.5.3",
     "husky": "^9.1.7",
     "jest": "^30.1.3",
-    "release-it": "^19.0.5",
+    "prettier": "^3.5.3",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "release-it": "^19.0.5",
     "rspack-plugin-virtual-module": "^1.0.0",
     "storybook": "^9.1.3",
     "storybook-react-rsbuild": "^2.1.0",

diff --git a/src/components/Avatar/Avatar.stories.tsx b/src/components/Avatar/Avatar.stories.tsx
@@ -7,7 +7,7 @@ import AvatarComponent from "./Avatar";
 import {AvatarRadius, AvatarSize} from "./types";
 
 const sizes: (AvatarSize | "default")[] = [AvatarSize.Small, "default", AvatarSize.Medium, AvatarSize.Large];
-const radius: (AvatarRadius | "default")[] = [AvatarRadius.Small, AvatarRadius.Medium, AvatarRadius.Large, "default"];
+const radius: (AvatarRadius | "default")[] = [AvatarRadius.None, AvatarRadius.Small, AvatarRadius.Medium, AvatarRadius.Large, "default"];
 
 const meta: Meta<typeof AvatarComponent> = {
     title: "Components/Avatar",
@@ -39,7 +39,7 @@ export const Avatar: StoryObj<typeof AvatarComponent> = {
 
 export const AvatarRadiusGrid = () => {
     return (
-        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(4, auto)"}}>
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(5, auto)"}}>
             {radius.map(radius => (
                 <div key={radius} className="item-card">
                     <span className="item-card__title">{capitalizeFirstLetter(radius)}</span>
@@ -103,7 +103,7 @@ export const SizeWithFallback = () => {
 
 export const SizeRadius = () => {
     return (
-        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(4, auto)"}}>
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(5, auto)"}}>
             {sizes.map(size =>
                 radius.map(radius => (
                     <div key={`${radius}-${size}`} className="item-card">

diff --git a/src/components/Avatar/avatar.module.scss b/src/components/Avatar/avatar.module.scss
@@ -42,6 +42,10 @@ $root: avatar;
   }
 
   // Radius
+  &--none-radius {
+    border-radius: 0;
+  }
+
   &--small-radius {
     border-radius: var(--avatar-border-radius-sm, 20%);
   }

diff --git a/src/components/Avatar/types.ts b/src/components/Avatar/types.ts
@@ -5,6 +5,7 @@ export enum AvatarSize {
 }
 
 export enum AvatarRadius {
+    None = "none",
     Small = "small",
     Medium = "medium",
     Large = "large",

diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
@@ -7,7 +7,7 @@ import ButtonComponent from "./Button";
 import {ButtonColor, ButtonRadius, ButtonSize, ButtonVariant} from "./types";
 
 const variants: ButtonVariant[] = [ButtonVariant.Contained, ButtonVariant.Outlined, ButtonVariant.Text];
-const colors: (ButtonColor | "default")[] = ["default", ButtonColor.Primary, ButtonColor.Secondary, ButtonColor.Accent];
+const colors: (ButtonColor | "default")[] = ["default", ButtonColor.Primary, ButtonColor.Secondary, ButtonColor.Accent, ButtonColor.Error, ButtonColor.Success];
 const sizes: (ButtonSize | "default")[] = [ButtonSize.Small, "default", ButtonSize.Medium, ButtonSize.Large];
 const radius: (ButtonRadius | "default")[] = [
     ButtonRadius.Small,
@@ -57,7 +57,7 @@ export const Button: StoryObj<typeof ButtonComponent> = {
 
 export const VariantColor = () => {
     return (
-        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(4, auto)"}}>
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(6, auto)"}}>
             {variants.map(variant =>
                 colors.map(color => (
                     <div key={`${variant}-${color}`}>
@@ -73,7 +73,7 @@ export const VariantColor = () => {
 
 export const VariantColorDisabled = () => {
     return (
-        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(4, auto)"}}>
+        <div className="grid-wrapper" style={{gridTemplateColumns: "repeat(6, auto)"}}>
             {variants.map(variant =>
                 colors.map(color => (
                     <div key={`${variant}-${color}`}>

diff --git a/src/components/Button/button.module.scss b/src/components/Button/button.module.scss
@@ -5,7 +5,7 @@ $root: button;
   font-weight: var(--button-font-weight, 500);
   font-size: var(--button-font-size, var(--font-size, 14px));
   letter-spacing: var(--button-letter-spacing, 0.5px);
-  line-height: var(--button-line-height, var(--line-height, 1 rem));
+  line-height: var(--button-line-height, var(--line-height, 1rem));
   height: var(--button-height, 34px);
   border-radius: var(--button-border-radius, 10px);
   padding: var(--button-padding, 0 16px);
@@ -38,6 +38,16 @@ $root: button;
       color: #fff;
       background: var(--accent-color);
     }
+
+    &.#{$root}--error-color {
+      color: #fff;
+      background: var(--error-color);
+    }
+
+    &.#{$root}--success-color {
+      color: #fff;
+      background: var(--success-color);
+    }
   }
 
   &--outlined {
@@ -55,17 +65,27 @@ $root: button;
 
     &.#{$root}--primary-color {
       color: var(--primary-color);
-      border-color: var(--button-outlined-border-primary-color);
+      border-color: var(--button-outlined-border-primary-color, var(--primary-color));
     }
 
     &.#{$root}--secondary-color {
       color: var(--secondary-color);
-      border-color: var(--button-outlined-border-secondary-color);
+      border-color: var(--button-outlined-border-secondary-color, var(--secondary-color));
     }
 
     &.#{$root}--accent-color {
       color: var(--accent-color);
-      border-color: var(--button-outlined-border-accent-color);
+      border-color: var(--button-outlined-border-accent-color, var(--accent-color-color));
+    }
+
+    &.#{$root}--error-color {
+      color: var(--error-color);
+      border-color: var(--button-outlined-border-error-color, var(--error-color));
+    }
+
+    &.#{$root}--success-color {
+      color: var(--success-color);
+      border-color: var(--button-outlined-border-success-color, var(--success-color));
     }
   }
 
@@ -92,6 +112,14 @@ $root: button;
     &.#{$root}--accent-color {
       color: var(--accent-color);
     }
+
+    &.#{$root}--error-color {
+      color: var(--error-color);
+    }
+
+    &.#{$root}--success-color {
+      color: var(--success-color);
+    }
   }
 
   // Sizes

diff --git a/src/components/Button/types.ts b/src/components/Button/types.ts
@@ -8,6 +8,8 @@ export enum ButtonColor {
     Primary = "primary",
     Secondary = "secondary",
     Accent = "accent",
+    Error = "error",
+    Success = "success",
 }
 
 export enum ButtonSize {

diff --git a/src/components/List/list.module.scss b/src/components/List/list.module.scss
@@ -1,7 +1,8 @@
 .list {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: var(--list-gap, 10px);
+  width: 100%;
   padding: 0;
   margin: 0;
   list-style: none;

diff --git a/src/components/ListItem/list-item.module.scss b/src/components/ListItem/list-item.module.scss
@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: 10px;
+  gap: var(--list-item-gap, 10px);
   flex-wrap: nowrap;
   box-sizing: border-box;
   line-height: var(--list-item-line-height, var(--line-height, 1 rem));

diff --git a/src/components/ScrollArea/ScrollArea.tsx b/src/components/ScrollArea/ScrollArea.tsx
@@ -40,21 +40,8 @@ const ScrollArea: ForwardRefRenderFunction<HTMLDivElement, ScrollAreaProps> = (p
     const rootRef = React.useRef<HTMLDivElement | null>(null);
     const viewportRef = React.useRef<HTMLDivElement | null>(null);
 
-    useImperativeHandle(
-        ref,
-        () => ({
-            ...rootRef.current!,
-            scrollTo: ((optionsOrX?: ScrollToOptions | number, y?: number) => {
-                if (typeof optionsOrX === 'number') {
-                    viewportRef.current?.scrollTo(optionsOrX, y!);
-                } else {
-                    viewportRef.current?.scrollTo(optionsOrX);
-                }
-            }) as HTMLElement['scrollTo'],
+    useImperativeHandle(ref, () => viewportRef.current!, []);
 
-        }),
-        []
-    );
     return (
         <Root ref={rootRef} className={classnames(styles["scroll-area"], className)} {...other}>
             <Viewport

diff --git a/src/components/ScrollArea/scroll-area.module.scss b/src/components/ScrollArea/scroll-area.module.scss
@@ -3,13 +3,21 @@ $root: scroll-area;
 .#{$root} {
   box-sizing: border-box;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
 
   &__viewport {
     width: 100%;
     height: 100%;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
 
-    &--horizontal > div {
-      display: inherit !important;
+    & > div {
+      flex: 1;
+      display: flex !important;
+      flex-direction: column;
     }
   }