@addev-be/ui 0.20.5 → 0.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@addev-be/ui",
-  "version": "0.20.5",
+  "version": "0.21.0",
   "type": "module",
   "scripts": {
     "watch": "tsc -b --watch",
@@ -20,7 +20,7 @@
     "update-version": "../../node/update-version.mjs"
   },
   "devDependencies": {
-    "@addev-be/framework-utils": "^0.20.5",
+    "@addev-be/framework-utils": "^0.21.0",
     "@types/lodash": "^4",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",

package/src/components/data/DataGrid/DataGridColumnsModal/styles.ts

@@ -34,12 +34,12 @@ export const ColumnsList = styled.ul.attrs({
   flex-direction: column;
   flex: 1;
   overflow: auto;
-  border: 1px solid var(--color-neutral-200);
+  border: 1px solid var(--color-base-200);
   margin: 0;
-  background-color: var(--color-neutral-50);
+  background-color: var(--color-base-50);
 
   & > li:not(:last-child) {
-    border-bottom: 1px solid var(--color-neutral-100);
+    border-bottom: 1px solid var(--color-base-100);
   }
 `;
 
@@ -66,17 +66,17 @@ export const ColumnItem = styled.li.attrs({
     width: var(--space-6);
     height: var(--space-6);
     border-radius: var(--rounded-full);
-    background-color: var(--color-neutral-200);
+    background-color: var(--color-base-200);
     border: none;
     align-items: center;
     justify-content: center;
   }
 
   &:hover {
-    background-color: var(--color-neutral-100);
+    background-color: var(--color-base-100);
     button {
       display: flex;
-      background-color: var(--color-neutral-300);
+      background-color: var(--color-base-300);
     }
   }
 `;

package/src/components/data/DataGrid/DataGridEditableCell/styles.ts

@@ -8,7 +8,7 @@ export const EditableCellContainer = styled.div<{
   ${dataGridCellCss}
   padding: 1px 4px 0px 4px;
   overflow: visible;
-  background-color: var(--color-neutral-0);
+  background-color: var(--color-base-0);
 
   & input,
   & select {
@@ -21,12 +21,12 @@ export const EditableCellContainer = styled.div<{
     font-weight: inherit;
     text-align: ${({ $textAlign = 'left' }) => $textAlign};
 
-    border: 1px solid var(--color-neutral-300);
+    border: 1px solid var(--color-base-300);
     padding: var(--space-1) var(--space-2);
 
-    color: var(--color-neutral-900);
+    color: var(--color-base-900);
     &::placeholder {
-      color: var(--color-neutral-400);
+      color: var(--color-base-400);
     }
 
     border: none;

package/src/components/data/DataGrid/DataGridFilterMenu/styles.ts

@@ -16,7 +16,7 @@ export const InputContainer = styled.div.attrs({
     left: var(--space-4);
     display: flex;
     align-items: center;
-    fill: var(--color-neutral-400);
+    fill: var(--color-base-400);
     width: var(--space-4);
     height: var(--space-4);
   }
@@ -34,10 +34,10 @@ export const CheckboxesContainer = styled.div.attrs({
   padding: var(--space-2);
   margin: var(--space-1);
   margin-bottom: 0;
-  border: 1px solid var(--color-neutral-300);
+  border: 1px solid var(--color-base-300);
   border-radius: var(--rounded-md);
   box-shadow: var(--shadow-inner);
-  background-color: var(--color-neutral-0);
+  background-color: var(--color-base-0);
   height: 20em;
   overflow-y: hidden;
   white-space: nowrap;
@@ -46,7 +46,7 @@ export const CheckboxesContainer = styled.div.attrs({
 export const Separator = styled.div.attrs({
   className: 'Separator',
 })`
-  border-top: 1px solid var(--color-neutral-200);
+  border-top: 1px solid var(--color-base-200);
   margin: var(--space-1) 0;
 `;
 
@@ -61,7 +61,7 @@ export const FilterValueContainer = styled.div.attrs({
   align-items: center;
   cursor: pointer;
   &:hover {
-    background-color: var(--color-neutral-50);
+    background-color: var(--color-base-50);
   }
 `;
 
@@ -72,7 +72,7 @@ export const FilterValuesScrollerContainer = styled.div.attrs({
 }>`
   display: block;
   font-size: var(--text-base);
-  background-color: var(--color-neutral-0);
+  background-color: var(--color-base-0);
   overflow-y: scroll;
   overflow-x: hidden;
   height: 100%;

package/src/components/data/DataGrid/styles.ts

@@ -17,6 +17,7 @@ export const DataGridWrapper = styled.div<SpaceProps>`
   flex-direction: column;
   overflow: hidden;
   width: 100%;
+  height: 100%;
 
   ${space}
 `;
@@ -38,10 +39,10 @@ export const DataGridResizeGrip = styled.div<{ $headerColor?: ThemeColor }>`
           }
         `
       : css`
-          background-color: var(--color-neutral-400);
+          background-color: var(--color-base-400);
           &:hover,
           &.active {
-            background-color: var(--color-neutral-500);
+            background-color: var(--color-base-500);
           }
         `}
 
@@ -95,10 +96,10 @@ export const DataGridHeaderCellContainer = styled.div<DataGridHeaderCellContaine
           }
         `
       : css`
-          background-color: var(--color-neutral-200);
-          color: var(--color-neutral-950);
+          background-color: var(--color-base-200);
+          color: var(--color-base-950);
           &:hover {
-            background-color: var(--color-neutral-300);
+            background-color: var(--color-base-300);
           }
         `}
 
@@ -137,9 +138,9 @@ export const dataGridCellCss = css<DataGridCellFCProps>`
   text-overflow: ellipsis;
   user-select: ${({ $userSelect }) => ($userSelect ? 'text' : 'none')};
   white-space: nowrap;
-  border-right: 1px solid var(--color-neutral-200);
-  border-bottom: 1px solid var(--color-neutral-200);
-  background-color: ${({ $color = 'neutral' }) => `var(--color-${$color}-50)`};
+  border-right: 1px solid var(--color-base-200);
+  border-bottom: 1px solid var(--color-base-200);
+  background-color: ${({ $color = 'base' }) => `var(--color-${$color}-50)`};
   text-align: ${({ $textAlign = 'left' }) => $textAlign};
 `;
 
@@ -151,7 +152,7 @@ DataGridCell.displayName = 'DataGridCell';
 export const DataGridHeaderTitle = styled.div`
   white-space: normal;
   font-weight: var(--font-bold);
-  color: var(--color-neutral-900);
+  color: var(--color-base-900);
   height: auto;
 `;
 
@@ -193,7 +194,7 @@ export const DataGridContainer = styled.div<{
   display: grid;
   width: 100%;
   height: 100%;
-  background-color: var(--color-neutral-50);
+  background-color: var(--color-base-50);
   font-size: var(--text-base);
   overflow: scroll;
   grid-template-rows: ${({
@@ -233,7 +234,7 @@ export const DataGridContainer = styled.div<{
               .map((w) => (typeof w === 'number' ? `${w}px` : w))
               .join(' + ')})`
       };
-      background-color: var(--color-neutral-200);
+      background-color: var(--color-base-200);
       z-index: 1;
     }`
     )}
@@ -251,7 +252,7 @@ export const DataGridContainer = styled.div<{
               .map((w) => (typeof w === 'number' ? `${w}px` : w))
               .join(' + ')})`
       };
-      background-color: var(--color-neutral-50);
+      background-color: var(--color-base-50);
       z-index: 1;
     }`
     )}
@@ -285,15 +286,15 @@ const dataGridHeaderOrFooterRowCss = css<DataGridHeaderOrFooterRowProps>`
           color: var(--color-${$headerColor}-900);
         `
       : css`
-          background-color: var(--color-neutral-200);
-          color: var(--color-neutral-900);
+          background-color: var(--color-base-200);
+          color: var(--color-base-900);
         `}
 
   ${DataGridHeaderCellContainer}:first-child {
-    border-left: 1px solid var(--color-neutral-300);
+    border-left: 1px solid var(--color-base-300);
   }
   ${DataGridHeaderCellContainer}:last-child {
-    border-left: 1px solid var(--color-neutral-300);
+    border-left: 1px solid var(--color-base-300);
   }
 `;
 
@@ -305,7 +306,7 @@ export const DataGridHeaderRow = styled.div.attrs<DataGridHeaderOrFooterRowProps
   })
 )`
   ${dataGridHeaderOrFooterRowCss}
-  border-top: 1px solid var(--color-neutral-300);
+  border-top: 1px solid var(--color-base-300);
   top: 0;
 `;
 DataGridHeaderRow.displayName = 'DataGridHeaderRow';
@@ -318,7 +319,7 @@ export const DataGridFooterRow = styled.div.attrs<DataGridHeaderOrFooterRowProps
   })
 )`
   ${dataGridHeaderOrFooterRowCss}
-  border-bottom: 1px solid var(--color-neutral-300);
+  border-bottom: 1px solid var(--color-base-300);
   bottom: 0;
 `;
 DataGridFooterRow.displayName = 'DataGridFooterRow';
@@ -331,10 +332,10 @@ export const DataGridRow = styled.div<DataGridRowProps>`
   display: contents;
 
   ${DataGridCell}:first-child {
-    border-left: 1px solid var(--color-neutral-300);
+    border-left: 1px solid var(--color-base-300);
   }
   ${DataGridCell}:last-child {
-    border-left: 1px solid var(--color-neutral-300);
+    border-left: 1px solid var(--color-base-300);
   }
 
   &:hover > ${DataGridCell} {
@@ -360,7 +361,7 @@ export const LoadingCell = styled(DataGridCell)`
   box-sizing: border-box;
 
   &.animate-pulse > div {
-    background-color: var(--color-neutral-200);
+    background-color: var(--color-base-200);
     border-radius: var(--rounded-full);
     width: 100%;
     height: 100%;
@@ -381,7 +382,7 @@ const selectionCellStyle = css`
     height: var(--space-4);
     width: var(--space-4);
     border-radius: var(--rounded-sm);
-    border: 1px solid var(--color-neutral-300);
+    border: 1px solid var(--color-base-300);
     color: var(--color-primary-600);
   }
 `;

package/src/components/data/SqlRequestForeignList/styles.ts

@@ -7,7 +7,7 @@ export const SqlRequestForeignListInput = styled.div<{ $readOnly?: boolean }>`
   padding: 0;
   position: relative;
   cursor: pointer;
-  background-color: var(--color-neutral-0);
+  background-color: var(--color-base-0);
 
   & > svg {
     position: absolute;
@@ -17,7 +17,7 @@ export const SqlRequestForeignListInput = styled.div<{ $readOnly?: boolean }>`
     pointer-events: none;
     width: var(--space-4);
     height: var(--space-4);
-    fill: var(--color-neutral-900);
+    fill: var(--color-base-900);
   }
 `;
 

package/src/components/data/SqlRequestGrid/filters/styles.ts

@@ -18,8 +18,8 @@ export const FiltersSidebarContainer = styled.div`
   z-index: 1;
   overflow-y: auto;
   box-sizing: border-box;
-  background-color: var(--color-neutral-50);
-  border-right: 1px solid var(--color-neutral-300);
+  background-color: var(--color-base-50);
+  border-right: 1px solid var(--color-base-300);
   box-shadow: var(--shadow-sm);
 
   & > ${MenuContainer} {
@@ -43,7 +43,7 @@ export const FiltersSidebarHeader = styled.div`
   position: sticky;
   top: 0;
   z-index: 1;
-  background-color: var(--color-neutral-50);
+  background-color: var(--color-base-50);
 
   display: flex;
   justify-content: space-between;
@@ -52,7 +52,7 @@ export const FiltersSidebarHeader = styled.div`
   padding: var(--space-2);
 
   padding-bottom: var(--space-2);
-  border-bottom: 1px solid var(--color-neutral-300);
+  border-bottom: 1px solid var(--color-base-300);
 
   h3 {
     margin: 0;
@@ -64,11 +64,11 @@ export const FiltersSidebarFilter = styled.div`
   display: flex;
   align-items: center;
   padding: var(--space-4) var(--space-2);
-  border-bottom: 1px solid var(--color-neutral-300);
+  border-bottom: 1px solid var(--color-base-300);
   cursor: pointer;
 
   &:hover {
-    background-color: var(--color-neutral-100);
+    background-color: var(--color-base-100);
   }
   svg {
     margin-left: auto;

package/src/components/forms/Button.tsx

@@ -33,7 +33,7 @@ export const StyledButton = styled.button.withConfig({
   font-family: var(--font-sans);
   cursor: pointer;
 
-  ${({ $color = 'neutral', $bordered = false }) => {
+  ${({ $color = 'base', $bordered = false }) => {
     const colorWithIntensity = getColorWithIntensity($color);
     const colorName = getColor(colorWithIntensity);
     const intensity = getIntensity(colorWithIntensity);
@@ -111,8 +111,8 @@ export const Button = forwardRef<
       icon: Icon,
       className,
       rounded = false,
-      color = 'neutral',
-      bordered = false,
+      color = 'base',
+      bordered = true,
       ...props
     },
     ref

package/src/components/forms/Form/styles.ts

@@ -8,7 +8,7 @@ export const FormGroupContainer = styled.fieldset<{
 }>`
   display: flex;
   flex-direction: column;
-  background: var(--color-neutral-100);
+  background: var(--color-base-100);
   border-radius: var(--rounded-md);
   box-shadow: var(--shadow-md);
 
@@ -24,8 +24,8 @@ export const FormGroupContainer = styled.fieldset<{
   }
 
   margin: 0;
-  border: 1px solid var(--color-neutral-300);
-  border-left: 8px solid ${({ color = 'neutral' }) => `var(--color-${color})`};
+  border: 1px solid var(--color-base-300);
+  border-left: 8px solid ${({ color = 'base' }) => `var(--color-${color})`};
 `;
 
 export const FormGroupHeader = styled.div`
@@ -43,7 +43,7 @@ export const FormGroupHeader = styled.div`
     margin: 0;
     font-size: var(--text-sm);
     font-weight: var(--font-normal);
-    color: var(--color-neutral-500);
+    color: var(--color-base-500);
   }
 
   & > svg {
@@ -57,8 +57,8 @@ export const inputCss = css`
   font-size: var(--text-lg);
 
   border: none;
-  color: var(--color-neutral-900);
-  background: var(--color-neutral-0);
+  color: var(--color-base-900);
+  background: var(--color-base-0);
 
   box-sizing: border-box;
   width: 100%;
@@ -73,7 +73,7 @@ export const inputCss = css`
 `;
 
 export const FormRowLabel = styled.span`
-  color: var(--color-neutral-500);
+  color: var(--color-base-500);
   font-size: var(--text-base);
   padding: var(--space-1) 0;
   display: flex;
@@ -86,7 +86,7 @@ export const FormRowLabel = styled.span`
   & > svg {
     width: var(--space-4);
     height: var(--space-4);
-    fill: var(--color-neutral-500);
+    fill: var(--color-base-500);
     flex-shrink: 0;
   }
 `;
@@ -126,8 +126,8 @@ export const FormRowContainer = styled.label<{
     padding: var(--space-1) var(--space-2);
   }
 
-  border: 1px solid var(--color-neutral-200);
-  background: var(--color-neutral-0);
+  border: 1px solid var(--color-base-200);
+  background: var(--color-base-0);
   &:focus-within {
     outline: 2px solid var(--color-primary-500);
     z-index: 1;
@@ -141,7 +141,7 @@ export const FormRowContainer = styled.label<{
     }
 
     & + & {
-      border-top: 1px solid var(--color-neutral-300);
+      border-top: 1px solid var(--color-base-300);
     }
 
     & > div > select,
@@ -149,7 +149,7 @@ export const FormRowContainer = styled.label<{
     & > div > input,
     & > div > textarea {
       background: none;
-      color: var(--color-neutral-900);
+      color: var(--color-base-900);
     }
   }
 `;

package/src/components/forms/styles.ts

@@ -5,9 +5,9 @@ import { NumericFormat } from 'react-number-format';
 export const inputStyle = css`
   font-family: var(--font-sans);
   font-size: inherit;
-  color: var(--color-neutral-900);
-  background-color: var(--color-neutral-50);
-  border: 1px solid var(--color-neutral-300);
+  color: var(--color-base-900);
+  background-color: var(--color-base-50);
+  border: 1px solid var(--color-base-300);
   border-radius: var(--rounded-md);
   padding: var(--space-1);
   width: 100%;

package/src/components/layout/Dropdown/styles.ts

@@ -25,10 +25,10 @@ export type DropdownContainerProps = {
 export const DropdownContainer = styled.div.attrs({
   className: 'DropdownContainer',
 })<DropdownContainerProps>`
-  background: var(--color-neutral-0);
+  background: var(--color-base-0);
   border-radius: var(--rounded-md);
   box-shadow: var(--shadow-lg);
-  outline: 1px solid var(--color-neutral-200);
+  outline: 1px solid var(--color-base-200);
 
   position: absolute;
   z-index: 1001;

package/src/components/layout/Modal/styles.ts

@@ -28,7 +28,7 @@ export type ModalContainerProps = {
 export const ModalContainer = styled.div.attrs({
   className: 'ModalContainer',
 })<ModalContainerProps>`
-  background: var(--color-neutral-100);
+  background: var(--color-base-100);
   border-radius: var(--rounded-lg);
   box-shadow: var(--shadow-lg);
   display: flex;
@@ -68,7 +68,7 @@ export const ModalHeader = styled.div.attrs({ className: 'ModalHeader' })`
   font-weight: bold;
   font-size: var(--text-lg);
   padding: var(--space-2);
-  background-color: var(--color-neutral-200);
+  background-color: var(--color-base-200);
   padding: var(--space-4);
 `;
 
@@ -108,7 +108,7 @@ export const ModalFooter = styled.div.attrs({ className: 'ModalFooter' })`
   flex-direction: row;
   justify-content: space-between;
   padding: var(--space-2);
-  background-color: var(--color-neutral-200);
+  background-color: var(--color-base-200);
   padding: var(--space-4);
 `;
 

package/src/components/search/styles.ts

@@ -25,7 +25,7 @@ export const QuickSearchResultsListContainer = styled.div.attrs({
   display: flex;
   flex-direction: column;
   padding: var(--space-2);
-  border-right: 1px solid var(--color-neutral-200);
+  border-right: 1px solid var(--color-base-200);
   flex: 1;
   overflow: auto;
 `;
@@ -42,7 +42,7 @@ export const QuickSearchResultsTitle = styled.div.attrs({
   font-size: var(--text-sm);
   text-transform: uppercase;
   letter-spacing: 0.1em;
-  color: var(--color-neutral-500);
+  color: var(--color-base-500);
 `;
 
 export const QuickSearchResultsItem = styled.div.attrs({
@@ -52,7 +52,7 @@ export const QuickSearchResultsItem = styled.div.attrs({
   cursor: pointer;
   border-radius: 4px;
   &:hover {
-    background-color: var(--color-neutral-100);
+    background-color: var(--color-base-100);
   }
 `;
 
@@ -69,7 +69,7 @@ export const QuickSearchResultsDetailsDivider = styled.hr`
   margin: var(--space-2) 0;
   height: 1px;
   border: none;
-  background-color: var(--color-neutral-200);
+  background-color: var(--color-base-200);
 `;
 
 export const QuickSearchResultDetailsTitle = styled.div.attrs({
@@ -92,5 +92,5 @@ export const QuickSearchResultsDetailsTerm = styled.dt.attrs({
   text-transform: uppercase;
   font-size: var(--text-sm);
   font-weight: bold;
-  color: var(--color-neutral-500);
+  color: var(--color-base-500);
 `;

package/src/components/ui/Card/styles.ts

@@ -5,11 +5,11 @@ export const CardContainer = styled.div.attrs({
 })`
   display: flex;
   flex-direction: column;
-  background-color: var(--color-neutral-0);
+  background-color: var(--color-base-0);
   border-radius: var(--rounded-md);
   box-shadow: var(--shadow-md);
   padding: var(--space-4);
-  border: 1px solid var(--color-neutral-100);
+  border: 1px solid var(--color-base-100);
 `;
 
 export const CardHeader = styled.div.attrs({
@@ -19,7 +19,7 @@ export const CardHeader = styled.div.attrs({
   flex-direction: row;
   align-items: center;
   padding-bottom: var(--space-2);
-  border-bottom: 1px solid var(--color-neutral-200);
+  border-bottom: 1px solid var(--color-base-200);
   margin-bottom: var(--space-2);
   gap: var(--space-2);
 `;
@@ -31,7 +31,7 @@ export const CardFooter = styled.div.attrs({
   flex-direction: row;
   align-items: center;
   padding-top: var(--space-2);
-  border-top: 1px solid var(--color-neutral-200);
+  border-top: 1px solid var(--color-base-200);
   margin-top: var(--space-2);
   gap: var(--space-2);
 `;

package/src/components/ui/ContextMenu/styles.ts

@@ -4,13 +4,13 @@ import { ThemeColor } from '../../../providers/ThemeProvider/types';
 
 const menuContainerCss = css`
   position: absolute;
-  color: var(--color-neutral-900);
+  color: var(--color-base-900);
   border-radius: var(--rounded-md);
   padding: var(--space-1) 0;
   box-shadow: var(--shadow-lg);
-  background-color: var(--color-neutral-100);
+  background-color: var(--color-base-100);
   min-width: 20em;
-  outline: 1px solid var(--color-neutral-200);
+  outline: 1px solid var(--color-base-200);
   display: flex;
   flex-direction: column;
 `;
@@ -63,30 +63,30 @@ export const MenuItemContainer = styled.div.attrs({
         top: 50%;
         transform: translateY(-50%);
         border: 4px solid transparent;
-        border-left-color: var(--color-neutral-600);
+        border-left-color: var(--color-base-600);
       }
     `}
 
   ${({ $color, disabled }) =>
     disabled
       ? css`
-          color: var(--color-neutral-300);
-          background-color: var(--color-neutral-100);
+          color: var(--color-base-300);
+          background-color: var(--color-base-100);
           cursor: default;
         `
       : $color
       ? css`
           color: var(--color-${$color}-600);
-          background-color: var(--color-neutral-100);
+          background-color: var(--color-base-100);
           &:hover {
             background-color: var(--color-${$color}-200);
           }
         `
       : css`
-          color: var(--color-neutral-900);
-          background-color: var(--color-neutral-100);
+          color: var(--color-base-900);
+          background-color: var(--color-base-100);
           &:hover {
-            background-color: var(--color-neutral-200);
+            background-color: var(--color-base-200);
           }
         `}
 
@@ -114,6 +114,6 @@ MenuItemContainer.displayName = 'MenuItemContainer';
 export const Divider = styled.div.attrs({
   className: 'Divider',
 })`
-  border-top: 1px solid var(--color-neutral-200);
+  border-top: 1px solid var(--color-base-200);
   margin: var(--space-1) 0;
 `;

package/src/components/ui/Label.tsx

@@ -22,10 +22,10 @@ export const StyledLabel = styled.span.withConfig({
           }
         `
       : css`
-          background-color: var(--color-neutral-100);
-          color: var(--color-neutral-700);
+          background-color: var(--color-base-100);
+          color: var(--color-base-700);
           svg {
-            fill: var(--color-neutral-700);
+            fill: var(--color-base-700);
           }
         `}
 
@@ -33,7 +33,7 @@ export const StyledLabel = styled.span.withConfig({
     bordered
       ? css`
           border: 1px solid
-            ${color ? `var(--color-${color}-200)` : 'var(--color-neutral-200)'};
+            ${color ? `var(--color-${color}-200)` : 'var(--color-base-200)'};
         `
       : 'border: none;'}
 

package/src/components/ui/Message/index.tsx

@@ -44,7 +44,7 @@ const colorsMap: Record<
 };
 
 export const Message: FC<MessageProps> = ({ children, title, type }) => {
-  const { iconComponent: Icon, baseColor = 'neutral' } = colorsMap[type];
+  const { iconComponent: Icon, baseColor = 'base' } = colorsMap[type];
   return (
     <styles.MessageContainer $baseColor={baseColor}>
       <Icon className="MessageIcon" />

package/src/components/ui/TabsView/TabsView.tsx

@@ -1,4 +1,4 @@
-import { FC, useState } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { TabContentContainer, TabsViewContainer } from './styles';
 
 import { Tab } from './types';
@@ -7,12 +7,21 @@ import { TabsList } from './TabsList';
 type TabsViewProps = {
   tabs: Tab[];
   overflow?: boolean;
+  onSelectedTabChanged?: (tab: Tab, index: number) => void;
 };
 
-export const TabsView: FC<TabsViewProps> = ({ tabs, overflow = false }) => {
+export const TabsView: FC<TabsViewProps> = ({
+  tabs,
+  overflow = false,
+  onSelectedTabChanged,
+}) => {
   const [activeIndex, setActiveIndex] = useState(0);
   const activeTab = tabs[activeIndex];
 
+  useEffect(() => {
+    onSelectedTabChanged?.(tabs[activeIndex], activeIndex);
+  }, [activeIndex, tabs, onSelectedTabChanged]);
+
   return (
     <TabsViewContainer>
       <TabsList

package/src/components/ui/TabsView/styles.ts

@@ -32,15 +32,20 @@ export const TabContainer = styled.div<{
   gap: var(--space-2);
   cursor: pointer;
   padding: 0 var(--space-2);
+  color: var(--color-base-800);
+
+  svg {
+    height: var(--space-4);
+    width: var(--space-4);
+    fill: var(--color-base-800);
+  }
 
   ${({ $color = 'primary' }) => css`
     &:hover {
       color: var(--color-${getColorWithIntensity($color, 500)});
-      fill: var(--color-${getColorWithIntensity($color, 500)});
-    }
-    svg {
-      height: var(--space-4);
-      width: var(--space-4);
+      svg {
+        fill: var(--color-${getColorWithIntensity($color, 500)});
+      }
     }
   `};
 
@@ -49,7 +54,9 @@ export const TabContainer = styled.div<{
     css`
       border-bottom: var(--space-0_5) solid;
       color: var(--color-${getColorWithIntensity($color, 500)});
-      fill: var(--color-${getColorWithIntensity($color, 500)});
+      svg {
+        fill: var(--color-${getColorWithIntensity($color, 500)});
+      }
     `}
 `;
 

package/src/hooks/useMutableState.ts

@@ -1,19 +1,17 @@
-import { cloneDeep, merge } from 'lodash';
-import { useCallback, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 
 import { DeepPartial } from '../typings';
+import { defaultsDeep } from 'lodash';
 
 export const useMutableState = <T>(initialValue: T | (() => T) = {} as T) => {
   const [value, setValue] = useState<T>(initialValue);
 
-  const setPartialValue = useCallback(
-    (partialValue: DeepPartial<T>) => {
-      const oldValue = cloneDeep(value);
-      const newValue = merge(oldValue, partialValue);
-      setValue(() => newValue);
-    },
-    [value]
-  );
+  const setPartialValue = useCallback((partialValue: DeepPartial<T>) => {
+    setValue((value) => defaultsDeep({}, partialValue, value));
+  }, []);
 
-  return [value, setValue, setPartialValue] as const;
+  return useMemo(
+    () => [value, setValue, setPartialValue] as const,
+    [setPartialValue, value]
+  );
 };

package/src/providers/ThemeProvider/ThemeProvider.ts

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 
 type ThemeProviderProps = {
   $theme?: Theme;
+  $darkTheme?: Theme;
   $darkMode?: boolean;
 };
 
@@ -40,16 +41,18 @@ const getThemeColorsCss = (colors: Theme['colors'], darkMode = false) => {
 
 export const ThemeProvider = styled.div<ThemeProviderProps>`
   display: contents;
-  ${({ $theme = {}, $darkMode }) => {
+  ${({ $theme = {}, $darkTheme, $darkMode }) => {
+    const theme = $darkMode ? $darkTheme ?? $theme : $theme;
+    const darkMode = !$darkTheme && $darkMode;
     return [
-      getThemeColorsCss($theme.colors, $darkMode),
-      getThemeValuesCss('font', $theme.fonts),
-      getThemeValuesCss('text', $theme.texts),
-      getThemeValuesCss('weight', $theme.weights),
-      getThemeValuesCss('space', $theme.spaces),
-      getThemeValuesCss('size', $theme.sizes),
-      getThemeValuesCss('rounded', $theme.rounded),
-      getThemeValuesCss('shadow', $theme.shadows),
+      getThemeColorsCss(theme.colors, darkMode),
+      getThemeValuesCss('font', theme.fonts),
+      getThemeValuesCss('text', theme.texts),
+      getThemeValuesCss('weight', theme.weights),
+      getThemeValuesCss('space', theme.spaces),
+      getThemeValuesCss('size', theme.sizes),
+      getThemeValuesCss('rounded', theme.rounded),
+      getThemeValuesCss('shadow', theme.shadows),
     ].join('');
   }}
 

package/src/providers/ThemeProvider/defaultTheme.ts

@@ -348,6 +348,7 @@ export const defaultTheme: Theme = {
       1000: '#000000',
     },
 
+    base: 'slate',
     primary: 'sky',
     secondary: 'gray',
     success: 'emerald',

package/src/providers/ThemeProvider/helpers.ts

@@ -1,9 +1,22 @@
 import {
+  Theme,
   ThemeColor,
   ThemeColorIntensity,
   ThemeColorWithIntensity,
 } from './types';
 
+import { DeepPartial } from '../../typings';
+import { defaultTheme } from './defaultTheme';
+import { defaultsDeep } from 'lodash';
+
+export const extendTheme = (
+  base: Theme,
+  override?: DeepPartial<Theme>
+): Theme => defaultsDeep({}, override, base);
+
+export const extendDefaultTheme = (override?: DeepPartial<Theme>): Theme =>
+  extendTheme(defaultTheme, override);
+
 export const getColor = (
   colorWithIntensity: ThemeColorWithIntensity
 ): ThemeColor => {

package/src/providers/ThemeProvider/types.ts

@@ -39,9 +39,9 @@ export type ThemeRawColor =
   | 'pink'
   | 'rose';
 export type ThemePredefinedColor =
+  | 'base'
   | 'primary'
   | 'secondary'
-  | 'neutral'
   | 'success'
   | 'warning'
   | 'danger'

package/src/providers/UiProviders/index.tsx

@@ -14,12 +14,15 @@ import {
 
 import { PortalsProvider } from '../PortalsProvider';
 import { SettingsProvider } from '../SettingsProvider';
+import { Theme } from '../ThemeProvider/types';
 import { ThemeProvider } from '../ThemeProvider/ThemeProvider';
 import { TrackingProvider } from '../TrackingProvider';
 import { defaultTheme } from '../ThemeProvider/defaultTheme';
 
 export type UiProvidersProps = PropsWithChildren<{
-  $darkMode?: boolean;
+  theme?: Theme;
+  darkTheme?: Theme;
+  darkMode?: boolean;
 }>;
 
 export type UiContextType = {
@@ -32,7 +35,12 @@ export const UiContext = createContext<UiContextType>({
   getElementScreenRect: () => new DOMRect(),
 });
 
-export const UiProviders: FC<UiProvidersProps> = ({ $darkMode, children }) => {
+export const UiProviders: FC<UiProvidersProps> = ({
+  theme = defaultTheme,
+  darkTheme,
+  darkMode,
+  children,
+}) => {
   const rootRef = useRef<HTMLDivElement | null>(null);
 
   const getElementScreenRect = useCallback((element: HTMLElement) => {
@@ -53,7 +61,7 @@ export const UiProviders: FC<UiProvidersProps> = ({ $darkMode, children }) => {
   );
 
   return (
-    <ThemeProvider $theme={defaultTheme} $darkMode={$darkMode}>
+    <ThemeProvider $theme={theme} $darkTheme={darkTheme} $darkMode={darkMode}>
       <UiContext.Provider value={value}>
         <styles.Root ref={rootRef}>
           <SettingsProvider>

package/src/providers/UiProviders/styles.ts

@@ -4,7 +4,7 @@ export const Root = styled.div.attrs({ className: 'Root' })`
   position: relative;
   font-family: var(--font-sans);
   font-size: var(--text-base);
-  color: var(--color-neutral-900);
+  color: var(--color-base-900);
   width: 100%;
   height: 100%;
 `;