@addev-be/ui 0.20.4 → 0.20.8

package/package.json

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

package/src/components/data/DataGrid/DataGridHeader.tsx

@@ -1,26 +1,11 @@
- 
- 
-
 import * as styles from './styles';
 
-import {
-  ArrowsRotateIcon,
-  CopyIcon,
-  FilterSlashIcon,
-  FloppyDiskIcon,
-  PlusIcon,
-  TableColumnsIcon,
-} from '../../../Icons';
 import { useCallback, useState } from 'react';
 
-import { Button } from '../../forms';
 import { DataGridContext } from './types';
 import { DataGridHeaderCell } from './DataGridHeaderCell';
 import { IndeterminateCheckbox } from '../../forms/IndeterminateCheckbox';
-import { Loading } from '../../layout';
-import { useDataGridColumnsModal } from './DataGridColumnsModal/hooks';
 import { useDataGridContext } from './hooks';
-import { useRefreshModal } from './hooks/useRefreshModal';
 
 export const DataGridHeader = <R,>({
   context,
@@ -28,31 +13,18 @@ export const DataGridHeader = <R,>({
   context: DataGridContext<R>;
 }) => {
   const {
-    name,
     visibleColumns,
     selectable,
     rows,
     selectedKeys,
     setSelectedKeys,
-    copyTable,
-    setFilters,
-    refresh,
     headerColor,
     rowKeyGetter,
     gridTemplateColumns,
     getAllIds,
-    editable,
-    onSaveClicked,
-    onAddClicked,
-    addedRows,
-    updatedRows,
-    addRow,
-    clearChangedRows,
   } = useDataGridContext(context);
   const [visibleFilter, setVisibleFilter] = useState<string | undefined>();
 
-  const { openModal, modal } = useDataGridColumnsModal<R>(context);
-
   const checkboxStatus =
     selectedKeys.length === 0
       ? false
@@ -71,91 +43,8 @@ export const DataGridHeader = <R,>({
     setVisibleFilter((prev) => (prev === columnKey ? undefined : columnKey));
   }, []);
 
-  const [isLoadingVisible, setIsLoadingVisible] = useState(false);
-  const runCopyTable = useCallback(() => {
-    setIsLoadingVisible(true);
-    copyTable().then(() => setIsLoadingVisible(false));
-  }, [copyTable]);
-
-  const save = useCallback(async () => {
-    if (
-      Object.keys(addedRows).length + Object.keys(updatedRows).length > 0 &&
-      onSaveClicked
-    ) {
-      const savedIds = await onSaveClicked(addedRows, updatedRows);
-      clearChangedRows(savedIds);
-    }
-  }, [addedRows, clearChangedRows, onSaveClicked, updatedRows]);
-
-  const add = useCallback(async () => {
-    if (onAddClicked) {
-      const row = await onAddClicked();
-      addRow(row);
-    }
-  }, [addRow, onAddClicked]);
-
-  const doRefresh = useCallback(() => {
-    refresh?.();
-    clearChangedRows();
-    setSelectedKeys([]);
-  }, [clearChangedRows, refresh, setSelectedKeys]);
-
-  const { openModal: openRefreshModal, modal: refreshModal } =
-    useRefreshModal(doRefresh);
-
-  const onRefreshClicked = useCallback(async () => {
-    if (addedRows.length + updatedRows.length > 0) {
-      openRefreshModal();
-    } else {
-      doRefresh();
-    }
-  }, [addedRows.length, doRefresh, openRefreshModal, updatedRows.length]);
-
-  const toolsRow = (
-    <styles.DataGridToolsRow>
-      <styles.DataGridToolsRowButtonsContainer>
-        <Loading visible={isLoadingVisible} />
-        {editable && onSaveClicked && (
-          <Button size="small" $color="primary" onClick={save} bordered>
-            <FloppyDiskIcon />
-            Enregistrer
-          </Button>
-        )}
-        {editable && onAddClicked && (
-          <Button size="small" $color="success" onClick={add} bordered>
-            <PlusIcon />
-            Ajouter
-          </Button>
-        )}
-        {
-          <Button size="small" onClick={onRefreshClicked} bordered>
-            <ArrowsRotateIcon />
-            Rafraîchir
-          </Button>
-        }
-        <Button $color="emerald" size="small" onClick={runCopyTable} bordered>
-          <CopyIcon />
-          Copier la table
-        </Button>
-        <Button size="small" $color="danger" onClick={() => setFilters({})} bordered>
-          <FilterSlashIcon />
-          Supprimer les filtres
-        </Button>
-        {name && (
-          <Button $color="info" size="small" onClick={openModal} bordered>
-            <TableColumnsIcon />
-            Paramètres des colonnes
-          </Button>
-        )}
-      </styles.DataGridToolsRowButtonsContainer>
-    </styles.DataGridToolsRow>
-  );
-
   return (
     <>
-      {modal}
-      {refreshModal}
-      {toolsRow}
       <styles.DataGridHeaderRow
         $gridTemplateColumns={gridTemplateColumns}
         $headerColor={headerColor}

package/src/components/data/DataGrid/DataGridToolbar.tsx

@@ -0,0 +1,134 @@
+import * as styles from './styles';
+
+import {
+  ArrowsRotateIcon,
+  CopyIcon,
+  FilterSlashIcon,
+  FloppyDiskIcon,
+  PlusIcon,
+  TableColumnsIcon,
+} from '../../../Icons';
+import { useCallback, useState } from 'react';
+
+import { Button } from '../../forms';
+import { DataGridContext } from './types';
+import { Loading } from '../../layout';
+import { useDataGridColumnsModal } from './DataGridColumnsModal/hooks';
+import { useDataGridContext } from './hooks';
+import { useRefreshModal } from './hooks/useRefreshModal';
+
+export const DataGridToolbar = <R,>({
+  context,
+}: {
+  context: DataGridContext<R>;
+}) => {
+  const {
+    name,
+    setSelectedKeys,
+    copyTable,
+    setFilters,
+    refresh,
+    editable,
+    onSaveClicked,
+    onAddClicked,
+    addedRows,
+    updatedRows,
+    addRow,
+    clearChangedRows,
+    headerContent,
+  } = useDataGridContext(context);
+
+  const { openModal, modal } = useDataGridColumnsModal<R>(context);
+
+  const [isLoadingVisible, setIsLoadingVisible] = useState(false);
+  const runCopyTable = useCallback(() => {
+    setIsLoadingVisible(true);
+    copyTable().then(() => setIsLoadingVisible(false));
+  }, [copyTable]);
+
+  const save = useCallback(async () => {
+    if (
+      Object.keys(addedRows).length + Object.keys(updatedRows).length > 0 &&
+      onSaveClicked
+    ) {
+      const savedIds = await onSaveClicked(addedRows, updatedRows);
+      clearChangedRows(savedIds);
+    }
+  }, [addedRows, clearChangedRows, onSaveClicked, updatedRows]);
+
+  const add = useCallback(async () => {
+    if (onAddClicked) {
+      const row = await onAddClicked();
+      addRow(row);
+    }
+  }, [addRow, onAddClicked]);
+
+  const doRefresh = useCallback(() => {
+    refresh?.();
+    clearChangedRows();
+    setSelectedKeys([]);
+  }, [clearChangedRows, refresh, setSelectedKeys]);
+
+  const { openModal: openRefreshModal, modal: refreshModal } =
+    useRefreshModal(doRefresh);
+
+  const onRefreshClicked = useCallback(async () => {
+    if (addedRows.length + updatedRows.length > 0) {
+      openRefreshModal();
+    } else {
+      doRefresh();
+    }
+  }, [addedRows.length, doRefresh, openRefreshModal, updatedRows.length]);
+
+  return (
+    <>
+      {modal}
+      {refreshModal}
+      <styles.DataGridToolsRow>
+        <styles.DataGridToolsRowHeaderContent>
+          {headerContent}
+        </styles.DataGridToolsRowHeaderContent>
+        <styles.DataGridToolsRowButtonsContainer>
+          <Loading visible={isLoadingVisible} />
+          {editable && onSaveClicked && (
+            <Button size="small" $color="primary" onClick={save} bordered>
+              <FloppyDiskIcon />
+              Enregistrer
+            </Button>
+          )}
+          {editable && onAddClicked && (
+            <Button size="small" $color="success" onClick={add} bordered>
+              <PlusIcon />
+              Ajouter
+            </Button>
+          )}
+          {
+            <Button size="small" onClick={onRefreshClicked} bordered>
+              <ArrowsRotateIcon />
+              Rafraîchir
+            </Button>
+          }
+          <Button $color="emerald" size="small" onClick={runCopyTable} bordered>
+            <CopyIcon />
+            Copier la table
+          </Button>
+          <Button
+            size="small"
+            $color="danger"
+            onClick={() => setFilters({})}
+            bordered
+          >
+            <FilterSlashIcon />
+            Supprimer les filtres
+          </Button>
+          {name && (
+            <Button $color="info" size="small" onClick={openModal} bordered>
+              <TableColumnsIcon />
+              Paramètres des colonnes
+            </Button>
+          )}
+        </styles.DataGridToolsRowButtonsContainer>
+      </styles.DataGridToolsRow>
+    </>
+  );
+};

package/src/components/data/DataGrid/index.tsx

@@ -18,12 +18,11 @@ import { DataGridContextProps, DataGridProps, DataGridRefProps } from './types';
 import { DataGridFooter } from './DataGridFooter';
 import { DataGridHeader } from './DataGridHeader';
 import { DataGridRowTemplate } from './DataGridRowTemplate';
+import { DataGridToolbar } from './DataGridToolbar';
 import { VirtualScroller } from '../VirtualScroller';
+import { extractSpaceProps } from '../../../helpers/styled';
 import { useDataGrid } from './hooks';
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
-
 export const DataGridInner = <R,>(
   {
     contextOverride,
@@ -35,6 +34,7 @@ export const DataGridInner = <R,>(
 ) => {
   const scrollableRef = useRef<HTMLDivElement>(null);
   const { className } = props;
+  const spaceProps = extractSpaceProps(props);
   const [contextProps, DataGridContext] = useDataGrid(props, contextOverride);
   const {
     columns,
@@ -74,37 +74,45 @@ export const DataGridInner = <R,>(
     [columns, fixedColumnsCount, selectable]
   );
 
+  const itemProps = useMemo(
+    () => ({ context: DataGridContext }),
+    [DataGridContext]
+  );
+
   const rowTemplate = DataGridRowTemplate;
 
   return (
     <DataGridContext.Provider value={contextProps}>
-      <styles.DataGridContainer
-        ref={scrollableRef}
-        $headerRowHeight={headerRowHeight}
-        $rowHeight={rowHeight}
-        $rowsCount={contextProps.sortedRows.length}
-        $withFooter={hasFooter}
-        className={className}
-        $fixedColumnWidths={fixedColumnWidths}
-      >
-        {resizingColumnKey && (
-          <styles.ResizeBackdrop
-            onMouseMove={moveResizing}
-            onMouseUp={endResizing}
+      <styles.DataGridWrapper {...spaceProps}>
+        <DataGridToolbar context={DataGridContext} />
+        <styles.DataGridContainer
+          ref={scrollableRef}
+          $headerRowHeight={headerRowHeight}
+          $rowHeight={rowHeight}
+          $rowsCount={contextProps.sortedRows.length}
+          $withFooter={hasFooter}
+          className={className}
+          $fixedColumnWidths={fixedColumnWidths}
+        >
+          {resizingColumnKey && (
+            <styles.ResizeBackdrop
+              onMouseMove={moveResizing}
+              onMouseUp={endResizing}
+            />
+          )}
+          <DataGridHeader context={DataGridContext} />
+          <VirtualScroller<R, { context: Context<DataGridContextProps<R>> }>
+            integrated
+            gridTemplateColumns={gridTemplateColumns}
+            items={sortedRows}
+            itemTemplate={rowTemplate}
+            itemProps={itemProps}
+            rowHeightInPx={rowHeight}
+            onRangeChanged={onVisibleRowsChange}
           />
-        )}
-        <DataGridHeader context={DataGridContext} />
-        <VirtualScroller<R, { context: Context<DataGridContextProps<R>> }>
-          integrated
-          gridTemplateColumns={gridTemplateColumns}
-          items={sortedRows}
-          itemTemplate={rowTemplate}
-          itemProps={{ context: DataGridContext }}
-          rowHeightInPx={rowHeight}
-          onRangeChanged={onVisibleRowsChange}
-        />
-        {hasFooter && <DataGridFooter context={DataGridContext} />}
-      </styles.DataGridContainer>
+          {hasFooter && <DataGridFooter context={DataGridContext} />}
+        </styles.DataGridContainer>
+      </styles.DataGridWrapper>
     </DataGridContext.Provider>
   );
 };

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

@@ -5,12 +5,23 @@ import {
   SELECTION_CELL_WIDTH,
   TOOLBAR_HEIGHT,
 } from './constants';
+import { SpaceProps, space } from '../../../helpers/styled';
 import styled, { css } from 'styled-components';
 
 import { DataGridCellFCProps } from './types';
 import { ThemeColor } from '../../../providers/ThemeProvider/types';
 import { VirtualScrollerFiller } from '../VirtualScroller/styles';
 
+export const DataGridWrapper = styled.div<SpaceProps>`
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+
+  ${space}
+`;
+
 export const DataGridResizeGrip = styled.div<{ $headerColor?: ThemeColor }>`
   position: absolute;
   top: 0;
@@ -150,14 +161,21 @@ export const DataGridToolsRow = styled.div`
   grid-column-end: -1;
   grid-row: 1;
   display: flex;
-  background-color: var(--color-neutral-200);
+  gap: var(--space-2);
+  padding: var(--space-2);
   position: sticky;
   top: 0;
   z-index: 10;
+  align-items: flex-end;
+`;
+
+export const DataGridToolsRowHeaderContent = styled.div`
+  flex: 1;
 `;
 
 export const DataGridToolsRowButtonsContainer = styled.div`
-  display: inline-flex;
+  flex-shrink: 0;
+  display: flex;
   gap: var(--space-1);
   align-items: center;
   padding: 0 var(--space-1);
@@ -183,7 +201,7 @@ export const DataGridContainer = styled.div<{
     $headerRowHeight = DEFAULT_HEADER_ROW_HEIGHT,
     $withFooter = false,
   }) =>
-    `${TOOLBAR_HEIGHT}px ${$headerRowHeight}px auto ${
+    `${$headerRowHeight}px auto ${
       $withFooter ? DEFAULT_FOOTER_ROW_HEIGHT + 'px' : ''
     }`};
 
@@ -242,7 +260,7 @@ export const DataGridContainer = styled.div<{
   ${VirtualScrollerFiller} {
     grid-column-start: 1;
     grid-column-end: -1;
-    grid-row: 3;
+    grid-row: 2;
   }
 `;
 DataGridContainer.displayName = 'DataGridContainer';
@@ -271,6 +289,13 @@ const dataGridHeaderOrFooterRowCss = css<DataGridHeaderOrFooterRowProps>`
           background-color: var(--color-neutral-200);
           color: var(--color-neutral-900);
         `}
+
+  ${DataGridHeaderCellContainer}:first-child {
+    border-left: 1px solid var(--color-neutral-300);
+  }
+  ${DataGridHeaderCellContainer}:last-child {
+    border-left: 1px solid var(--color-neutral-300);
+  }
 `;
 
 export const DataGridHeaderRow = styled.div.attrs<DataGridHeaderOrFooterRowProps>(
@@ -281,7 +306,8 @@ export const DataGridHeaderRow = styled.div.attrs<DataGridHeaderOrFooterRowProps
   })
 )`
   ${dataGridHeaderOrFooterRowCss}
-  top: ${TOOLBAR_HEIGHT}px;
+  border-top: 1px solid var(--color-neutral-300);
+  top: 0;
 `;
 DataGridHeaderRow.displayName = 'DataGridHeaderRow';
 
@@ -293,6 +319,7 @@ export const DataGridFooterRow = styled.div.attrs<DataGridHeaderOrFooterRowProps
   })
 )`
   ${dataGridHeaderOrFooterRowCss}
+  border-bottom: 1px solid var(--color-neutral-300);
   bottom: 0;
 `;
 DataGridFooterRow.displayName = 'DataGridFooterRow';
@@ -304,6 +331,13 @@ type DataGridRowProps = {
 export const DataGridRow = styled.div<DataGridRowProps>`
   display: contents;
 
+  ${DataGridCell}:first-child {
+    border-left: 1px solid var(--color-neutral-300);
+  }
+  ${DataGridCell}:last-child {
+    border-left: 1px solid var(--color-neutral-300);
+  }
+
   &:hover > ${DataGridCell} {
     background-color: var(--color-blue-100);
   }

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

@@ -14,6 +14,7 @@ import {
 } from 'react';
 
 import { DataGridEditableCellFC } from './DataGridEditableCell/types';
+import { SpaceProps } from '../../../helpers/styled';
 import { ThemeColor } from '../../../providers/ThemeProvider/types';
 
 export type DataGridCellFCProps = {
@@ -177,7 +178,8 @@ export type DataGridProps<R> = {
     editedRows: DataGridEditedRows<R>
   ) => Promise<string[]>;
   onAddClicked?: () => Promise<R>;
-};
+  headerContent?: ReactNode;
+} & SpaceProps;
 
 export type DataGridContextProps<R> = DataGridProps<R> & {
   setRows: Dispatch<SetStateAction<R[]>>;

package/src/components/data/VirtualScroller/index.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-empty-object-type */
-
 import * as styles from './styles';
 
 import { useEffect, useState } from 'react';

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

@@ -15,7 +15,6 @@ export const VirtualScrollerContainer = styled.div<{
 export const VirtualScrollerFiller = styled.div.attrs<{
   $height: number;
 }>(({ $height }) => ({
-  className: 'VirtualScrollerFiller',
   style: {
     height: `${$height}px`,
   },

package/src/components/forms/styles.ts

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

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

@@ -0,0 +1,44 @@
+import { FC, useEffect, useState } from 'react';
+import { TabContainer, TabsListContainer } from './styles';
+
+import { SpaceProps } from '../../../helpers';
+import { Tab } from './types';
+
+type TabsListProps = {
+  tabs: Tab[];
+  selectedIndex?: number;
+  onSelectedIndexChanged?: (index: number) => void;
+} & SpaceProps;
+
+export const TabsList: FC<TabsListProps> = ({
+  tabs,
+  selectedIndex,
+  onSelectedIndexChanged,
+  ...spaceProps
+}) => {
+  const [activeIndex, setActiveIndex] = useState(selectedIndex ?? 0);
+
+  useEffect(() => {
+    setActiveIndex(selectedIndex ?? 0);
+  }, [selectedIndex]);
+
+  useEffect(() => {
+    onSelectedIndexChanged?.(activeIndex);
+  }, [activeIndex, onSelectedIndexChanged]);
+
+  return (
+    <TabsListContainer {...spaceProps}>
+      {tabs.map((tab, index) => (
+        <TabContainer
+          key={index}
+          $color={tab.color}
+          $isActive={activeIndex === index}
+          onClick={() => setActiveIndex(index)}
+        >
+          {tab.icon ? <tab.icon /> : null}
+          {tab.tabName}
+        </TabContainer>
+      ))}
+    </TabsListContainer>
+  );
+};

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

@@ -0,0 +1,38 @@
+import { FC, useEffect, useState } from 'react';
+import { TabContentContainer, TabsViewContainer } from './styles';
+
+import { Tab } from './types';
+import { TabsList } from './TabsList';
+
+type TabsViewProps = {
+  tabs: Tab[];
+  overflow?: boolean;
+  onSelectedTabChanged?: (tab: Tab, index: number) => void;
+};
+
+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
+        tabs={tabs}
+        selectedIndex={activeIndex}
+        onSelectedIndexChanged={setActiveIndex}
+        p="2"
+      />
+      <TabContentContainer $isOverflow={overflow}>
+        {activeTab.content}
+      </TabContentContainer>
+    </TabsViewContainer>
+  );
+};

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

@@ -0,0 +1,3 @@
+export * from './types';
+export * from './TabsView';
+export * from './TabsList';

package/src/components/ui/{Tab → TabsView}/styles.ts

@@ -1,64 +1,66 @@
-import { ThemeColor, ThemeColorWithIntensity } from '../../../providers';
-import styled, { css } from 'styled-components';
-
-import { getColorWithIntensity } from '../../../providers/ThemeProvider/helpers';
-
-export const TabViewContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-`;
-
-export const TabListContainer = styled.div<{}>`
-  display: flex;
-  gap: var(--space-4);
-  flex-shrink: 0;
-  overflow-x: scroll;
-  scrollbar-width: none;
-  padding: var(--space-2) var(--space-2);
-  font-size: var(--text-base);
-  white-space: nowrap;
-`;
-
-export const TabContainer = styled.div<{
-  $color?: ThemeColorWithIntensity | ThemeColor;
-  $isActive?: boolean;
-}>`
-  display: flex;
-  align-items: center;
-  height: var(--space-8);
-  gap: var(--space-2);
-  cursor: pointer;
-  padding: 0 var(--space-2);
-
-  ${({ $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);
-    }
-  `};
-
-  ${({ $isActive, $color = 'primary' }) =>
-    $isActive &&
-    css`
-      border-bottom: var(--space-0_5) solid;
-      color: var(--color-${getColorWithIntensity($color, 500)});
-      fill: var(--color-${getColorWithIntensity($color, 500)});
-    `}
-`;
-
-export const TabContentContainer = styled.div<{
-  $isOverflow?: boolean;
-}>`
-  display: flex;
-  height: 100%;
-
-  ${({ $isOverflow }) => css`
-    overflow: ${$isOverflow ? 'auto' : 'hidden'};
-    scroll-behavior: smooth;
-  `}
-`;
+import { SpaceProps, space } from '../../../helpers/styled';
+import { ThemeColor, ThemeColorWithIntensity } from '../../../providers';
+import styled, { css } from 'styled-components';
+
+import { getColorWithIntensity } from '../../../providers/ThemeProvider/helpers';
+
+export const TabsViewContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`;
+
+export const TabsListContainer = styled.div<SpaceProps>`
+  display: flex;
+  gap: var(--space-4);
+  flex-shrink: 0;
+  overflow-x: scroll;
+  scrollbar-width: none;
+  font-size: var(--text-lg);
+  white-space: nowrap;
+
+  ${space}
+`;
+
+export const TabContainer = styled.div<{
+  $color?: ThemeColorWithIntensity | ThemeColor;
+  $isActive?: boolean;
+}>`
+  display: flex;
+  align-items: center;
+  height: var(--space-8);
+  gap: var(--space-2);
+  cursor: pointer;
+  padding: 0 var(--space-2);
+
+  ${({ $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);
+    }
+  `};
+
+  ${({ $isActive, $color = 'primary' }) =>
+    $isActive &&
+    css`
+      border-bottom: var(--space-0_5) solid;
+      color: var(--color-${getColorWithIntensity($color, 500)});
+      fill: var(--color-${getColorWithIntensity($color, 500)});
+    `}
+`;
+
+export const TabContentContainer = styled.div<{
+  $isOverflow?: boolean;
+}>`
+  display: flex;
+  height: 100%;
+
+  ${({ $isOverflow }) => css`
+    overflow: ${$isOverflow ? 'auto' : 'hidden'};
+    scroll-behavior: smooth;
+  `}
+`;

package/src/components/ui/{Tab → TabsView}/types.ts

@@ -10,8 +10,3 @@ export type Tab = {
   key?: string;
   tabName: string;
 };
-
-export type TabProps = {
-  tabs: Tab[];
-  overflow?: boolean;
-};

package/src/components/ui/index.ts

@@ -4,4 +4,4 @@ export * from './ContextMenu';
 export * from './Ellipsis';
 export * from './Label';
 export * from './Message';
-export * from './Tab';
+export * from './TabsView';

package/src/helpers/styled/space.ts

@@ -1,26 +1,50 @@
-import { ThemeSpace } from '../../providers';
+import { ThemeSpace, ThemeSpaceWithNegative } from '../../providers';
+
 import { css } from 'styled-components';
 
 export type MarginProps = {
-  m?: ThemeSpace;
-  mx?: ThemeSpace;
-  my?: ThemeSpace;
-  mt?: ThemeSpace;
-  mr?: ThemeSpace;
-  mb?: ThemeSpace;
-  ml?: ThemeSpace;
+  m?: ThemeSpace | ThemeSpaceWithNegative;
+  mx?: ThemeSpace | ThemeSpaceWithNegative;
+  my?: ThemeSpace | ThemeSpaceWithNegative;
+  mt?: ThemeSpace | ThemeSpaceWithNegative;
+  mr?: ThemeSpace | ThemeSpaceWithNegative;
+  mb?: ThemeSpace | ThemeSpaceWithNegative;
+  ml?: ThemeSpace | ThemeSpaceWithNegative;
 };
 
 export const margins = css<MarginProps>`
-  ${({ m }) => m && `margin: var(--space-${m});`}
+  ${({ m }) =>
+    m && m.startsWith('-')
+      ? `margin: calc(0 - var(--space-${m.substring(1)}));`
+      : `margin: var(--space-${m});`}
   ${({ mx }) =>
-    mx && `margin-left: var(--space-${mx}); margin-right: var(--space-${mx});`}
+    mx && mx.startsWith('-')
+      ? `margin-left: calc(0 - var(--space-${mx.substring(
+          1
+        )})); margin-right: calc(0 - var(--space-${mx.substring(1)}));`
+      : `margin-left: var(--space-${mx}); margin-right: var(--space-${mx});`}
   ${({ my }) =>
-    my && `margin-top: var(--space-${my}); margin-bottom: var(--space-${my});`}
-  ${({ mt }) => mt && `margin-top: var(--space-${mt});`}
-  ${({ mr }) => mr && `margin-right: var(--space-${mr});`}
-  ${({ mb }) => mb && `margin-bottom: var(--space-${mb});`}
-  ${({ ml }) => ml && `margin-left: var(--space-${ml});`}
+    my && my.startsWith('-')
+      ? `margin-top: calc(0 - var(--space-${my.substring(
+          1
+        )})); margin-bottom: calc(0 - var(--space-${my.substring(1)}));`
+      : `margin-top: var(--space-${my}); margin-bottom: var(--space-${my});`}
+  ${({ mt }) =>
+    mt && mt.startsWith('-')
+      ? `margin-top: calc(0 - var(--space-${mt.substring(1)}));`
+      : `margin-top: var(--space-${mt});`}
+  ${({ mr }) =>
+    mr && mr.startsWith('-')
+      ? `margin-right: calc(0 - var(--space-${mr.substring(1)}));`
+      : `margin-right: var(--space-${mr});`}
+  ${({ mb }) =>
+    mb && mb.startsWith('-')
+      ? `margin-bottom: calc(0 - var(--space-${mb.substring(1)}));`
+      : `margin-bottom: var(--space-${mb});`}
+  ${({ ml }) =>
+    ml && ml.startsWith('-')
+      ? `margin-left: calc(0 - var(--space-${ml.substring(1)}));`
+      : `margin-left: var(--space-${ml});`}
 `;
 
 export type PaddingProps = {
@@ -49,6 +73,38 @@ export const paddings = css<PaddingProps>`
 
 export type SpaceProps = MarginProps & PaddingProps;
 
+export const extractSpaceProps = ({
+  m,
+  mx,
+  my,
+  mt,
+  mr,
+  mb,
+  ml,
+  p,
+  px,
+  py,
+  pt,
+  pr,
+  pb,
+  pl,
+}: SpaceProps) => ({
+  m,
+  mx,
+  my,
+  mt,
+  mr,
+  mb,
+  ml,
+  p,
+  px,
+  py,
+  pt,
+  pr,
+  pb,
+  pl,
+});
+
 export const space = css<SpaceProps>`
   ${margins}
   ${paddings}

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/types.ts

@@ -89,6 +89,8 @@ export type ThemeSpace =
   | '80'
   | '96'
   | '128';
+export type ThemeSpaceWithNegative = ThemeSpace | `-${ThemeSpace}`;
+
 export type ThemeSize =
   | '0'
   | '0_5'

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

@@ -1,35 +0,0 @@
-import { FC, useState } from 'react';
-import {
-  TabContainer,
-  TabContentContainer,
-  TabListContainer,
-  TabViewContainer,
-} from './styles';
-
-import { TabProps } from './types';
-
-export const TabView: FC<TabProps> = ({ tabs, overflow = false }) => {
-  const [activeIndex, setActiveIndex] = useState(0);
-  const activeTab = tabs[activeIndex];
-
-  return (
-    <TabViewContainer>
-      <TabListContainer>
-        {tabs.map((tab, index) => (
-          <TabContainer
-            key={index}
-            $color={tab.color}
-            $isActive={activeIndex === index}
-            onClick={() => setActiveIndex(index)}
-          >
-            {tab.icon ? <tab.icon /> : null}
-            {tab.tabName}
-          </TabContainer>
-        ))}
-      </TabListContainer>
-      <TabContentContainer $isOverflow={overflow}>
-        {activeTab.content}
-      </TabContentContainer>
-    </TabViewContainer>
-  );
-};