From 0493df2e751963447fd32267c7cf658155d998de Mon Sep 17 00:00:00 2001
From: shayan khaleghparast <iman@regentmarkets.com>
Date: Tue, 16 Jan 2024 12:12:46 +0800
Subject: [PATCH 1/8] feat: added tab component

---
 .../PrimaryTabs/PrimaryTabList.scss           |  33 +++++
 lib/components/PrimaryTabs/PrimaryTabList.tsx |  29 ++++
 .../PrimaryTabs/PrimaryTabPanel.tsx           |   7 +
 .../PrimaryTabs/PrimaryTabPanels.tsx          |  18 +++
 lib/components/PrimaryTabs/PrimaryTabs.tsx    |  34 +++++
 lib/components/PrimaryTabs/index.ts           |   6 +
 lib/components/Tabs/Tab.tsx                   |  11 ++
 lib/components/Tabs/TabTitle.tsx              |  31 ++++
 lib/components/Tabs/Tabs.scss                 |  25 ++++
 lib/components/Tabs/Tabs.tsx                  |  33 +++++
 lib/components/Tabs/index.tsx                 |   2 +
 lib/main.ts                                   |   4 +-
 package-lock.json                             | 132 +++++++++---------
 src/main.tsx                                  |  30 +++-
 14 files changed, 326 insertions(+), 69 deletions(-)
 create mode 100644 lib/components/PrimaryTabs/PrimaryTabList.scss
 create mode 100644 lib/components/PrimaryTabs/PrimaryTabList.tsx
 create mode 100644 lib/components/PrimaryTabs/PrimaryTabPanel.tsx
 create mode 100644 lib/components/PrimaryTabs/PrimaryTabPanels.tsx
 create mode 100644 lib/components/PrimaryTabs/PrimaryTabs.tsx
 create mode 100644 lib/components/PrimaryTabs/index.ts
 create mode 100644 lib/components/Tabs/Tab.tsx
 create mode 100644 lib/components/Tabs/TabTitle.tsx
 create mode 100644 lib/components/Tabs/Tabs.scss
 create mode 100644 lib/components/Tabs/Tabs.tsx
 create mode 100644 lib/components/Tabs/index.tsx

diff --git a/lib/components/PrimaryTabs/PrimaryTabList.scss b/lib/components/PrimaryTabs/PrimaryTabList.scss
new file mode 100644
index 00000000..65a409cf
--- /dev/null
+++ b/lib/components/PrimaryTabs/PrimaryTabList.scss
@@ -0,0 +1,33 @@
+.derivs-tabs {
+    &-list {
+        display: grid;
+        grid-auto-columns: 1fr;
+        position: relative;
+        background-color: #f2f3f4;
+        height: 5rem;
+        border-radius: 0.7rem;
+
+        &-item {
+            background: inherit;
+            border: none;
+            grid-row: 1;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            font-size: 1.6rem;
+
+            &--active {
+                font-weight: bold;
+                background-color: #ffffff;
+                margin: 0.6rem;
+                border-radius: 0.5rem;
+                color: var(--system-light-1-prominent-text, #333);
+            }
+
+            &--disabled {
+                color: #999999;
+            }
+        }
+    }
+}
diff --git a/lib/components/PrimaryTabs/PrimaryTabList.tsx b/lib/components/PrimaryTabs/PrimaryTabList.tsx
new file mode 100644
index 00000000..772961b1
--- /dev/null
+++ b/lib/components/PrimaryTabs/PrimaryTabList.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { useTabs } from './PrimaryTabs';
+import './PrimaryTabList.scss';
+
+type PrimaryTabListProps = {
+    list: string[];
+};
+
+const PrimaryTabList = ({ list }: PrimaryTabListProps) => {
+    const { activeTabIndex, setActiveTabIndex } = useTabs();
+
+    return (
+        <div className='derivs-tabs-list' data-list-count={list.length}>
+            {list.map((tab, i) => (
+                <button
+                    className={`derivs-tabs-list-item derivs-tabs-list-item--${
+                        i === activeTabIndex ? 'active' : 'disabled'
+                    }`}
+                    key={i}
+                    onClick={() => setActiveTabIndex(i)}
+                >
+                    {tab}
+                </button>
+            ))}
+        </div>
+    );
+};
+
+export default PrimaryTabList;
diff --git a/lib/components/PrimaryTabs/PrimaryTabPanel.tsx b/lib/components/PrimaryTabs/PrimaryTabPanel.tsx
new file mode 100644
index 00000000..3b773d4f
--- /dev/null
+++ b/lib/components/PrimaryTabs/PrimaryTabPanel.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const PrimaryTabPanel = ({ children }: React.PropsWithChildren<unknown>) => {
+    return <div>{children}</div>;
+};
+
+export default PrimaryTabPanel;
diff --git a/lib/components/PrimaryTabs/PrimaryTabPanels.tsx b/lib/components/PrimaryTabs/PrimaryTabPanels.tsx
new file mode 100644
index 00000000..30ebaa3b
--- /dev/null
+++ b/lib/components/PrimaryTabs/PrimaryTabPanels.tsx
@@ -0,0 +1,18 @@
+import React, { Children } from 'react';
+import { useTabs } from './PrimaryTabs';
+
+const PrimaryTabPanels = ({ children }: React.PropsWithChildren<unknown>) => {
+    const { activeTabIndex } = useTabs();
+
+    return (
+        <div>
+            {Children.map(children, (child, index) => {
+                if (index !== activeTabIndex) return undefined;
+
+                return child;
+            })}
+        </div>
+    );
+};
+
+export default PrimaryTabPanels;
diff --git a/lib/components/PrimaryTabs/PrimaryTabs.tsx b/lib/components/PrimaryTabs/PrimaryTabs.tsx
new file mode 100644
index 00000000..4e368608
--- /dev/null
+++ b/lib/components/PrimaryTabs/PrimaryTabs.tsx
@@ -0,0 +1,34 @@
+import React, { createContext, useContext, useState } from 'react';
+
+type TTabContext = {
+    activeTabIndex: number;
+    setActiveTabIndex: React.Dispatch<React.SetStateAction<number>>;
+};
+
+const TabsContext = createContext<TTabContext | null>(null);
+
+export const useTabs = () => {
+    const context = useContext(TabsContext);
+
+    if (!context) {
+        throw new Error('Seems you forgot to wrap the components in "<PrimaryTabs />"');
+    }
+
+    return context;
+};
+
+type TTabsProps = {
+    className?: string;
+};
+
+export const PrimaryTabs = ({ children, className }: React.PropsWithChildren<TTabsProps>) => {
+    const [activeTabIndex, setActiveTabIndex] = useState(0);
+
+    return (
+        <TabsContext.Provider value={{ activeTabIndex, setActiveTabIndex }}>
+            <div className={className}>{children}</div>
+        </TabsContext.Provider>
+    );
+};
+
+export default PrimaryTabs;
diff --git a/lib/components/PrimaryTabs/index.ts b/lib/components/PrimaryTabs/index.ts
new file mode 100644
index 00000000..e3a3bfdd
--- /dev/null
+++ b/lib/components/PrimaryTabs/index.ts
@@ -0,0 +1,6 @@
+import PrimaryTabList from './PrimaryTabList';
+import PrimaryTabPanel from './PrimaryTabPanel';
+import PrimaryTabPanels from './PrimaryTabPanels';
+import PrimaryTabs from './PrimaryTabs';
+
+export { PrimaryTabList, PrimaryTabPanel, PrimaryTabPanels, PrimaryTabs };
diff --git a/lib/components/Tabs/Tab.tsx b/lib/components/Tabs/Tab.tsx
new file mode 100644
index 00000000..ab7727f9
--- /dev/null
+++ b/lib/components/Tabs/Tab.tsx
@@ -0,0 +1,11 @@
+import React, { FC, ReactNode } from 'react';
+
+type TabProps = {
+    children: ReactNode;
+    icon?: ReactNode;
+    title: string;
+};
+
+const Tab: FC<TabProps> = ({ children }) => <>{children}</>;
+
+export default Tab;
diff --git a/lib/components/Tabs/TabTitle.tsx b/lib/components/Tabs/TabTitle.tsx
new file mode 100644
index 00000000..ceaeb873
--- /dev/null
+++ b/lib/components/Tabs/TabTitle.tsx
@@ -0,0 +1,31 @@
+import React, { FC, useCallback } from 'react';
+import classNames from 'classnames';
+import { Text } from '../Text';
+
+export type TabTitleProps = {
+    icon?: React.ReactNode;
+    index: number;
+    isActive?: boolean;
+    setSelectedTab: (index: number) => void;
+    title: string;
+};
+
+const TabTitle: FC<TabTitleProps> = ({ icon, index, isActive, setSelectedTab, title }) => {
+    const handleOnClick = useCallback(() => {
+        setSelectedTab(index);
+    }, [setSelectedTab, index]);
+
+    return (
+        <button
+            className={classNames('derivs-tabs__btn', {
+                'derivs-tabs__btn--active': isActive,
+            })}
+            onClick={handleOnClick}
+        >
+            {icon}
+            <Text weight={isActive ? 'bold' : 'normal'}>{title}</Text>
+        </button>
+    );
+};
+
+export default TabTitle;
diff --git a/lib/components/Tabs/Tabs.scss b/lib/components/Tabs/Tabs.scss
new file mode 100644
index 00000000..981999cb
--- /dev/null
+++ b/lib/components/Tabs/Tabs.scss
@@ -0,0 +1,25 @@
+.derivs-tabs {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+
+    &__btn {
+        display: inline-flex;
+        gap: 0.8rem;
+        align-items: center;
+        justify-content: center;
+        width: 50%;
+        border: none;
+        border-bottom: 0.2rem solid var(--light-7-secondary-background, #f2f3f4);
+        background: none;
+        padding: 1rem 0;
+        cursor: pointer;
+        &--active {
+            width: 50%;
+            border: none;
+            border-bottom: 0.2rem solid var(--brand-coral, #ff444f);
+            background: none;
+            padding: 1rem 0;
+        }
+    }
+}
diff --git a/lib/components/Tabs/Tabs.tsx b/lib/components/Tabs/Tabs.tsx
new file mode 100644
index 00000000..e6e88c19
--- /dev/null
+++ b/lib/components/Tabs/Tabs.tsx
@@ -0,0 +1,33 @@
+import React, { FC, ReactElement, useState } from 'react';
+import TabTitle, { TabTitleProps } from './TabTitle';
+import './Tabs.scss';
+
+type TabsProps = {
+    children: ReactElement<TabTitleProps>[];
+    preSelectedTab?: number;
+    wrapperClassName?: string;
+};
+
+const Tabs: FC<TabsProps> = ({ children, preSelectedTab, wrapperClassName }): JSX.Element => {
+    const [selectedTabIndex, setSelectedTabIndex] = useState(preSelectedTab || 0);
+
+    return (
+        <div className={wrapperClassName}>
+            <div className='derivs-tabs'>
+                {children.map((item, index) => (
+                    <TabTitle
+                        icon={item.props.icon}
+                        index={index}
+                        isActive={index === selectedTabIndex}
+                        key={`derivs-tab-${item.props.title}`}
+                        setSelectedTab={setSelectedTabIndex}
+                        title={item.props.title}
+                    />
+                ))}
+            </div>
+            {children[selectedTabIndex]}
+        </div>
+    );
+};
+
+export default Tabs;
diff --git a/lib/components/Tabs/index.tsx b/lib/components/Tabs/index.tsx
new file mode 100644
index 00000000..850dae89
--- /dev/null
+++ b/lib/components/Tabs/index.tsx
@@ -0,0 +1,2 @@
+export { default as Tab } from './Tab';
+export { default as Tabs } from './Tabs';
diff --git a/lib/main.ts b/lib/main.ts
index 05e4661d..18dbcecc 100644
--- a/lib/main.ts
+++ b/lib/main.ts
@@ -1,3 +1,5 @@
 export { Loader } from './components/Loader'
 export { Button } from './components/Button'
-export { Text } from './components/Text'
\ No newline at end of file
+export { Text } from './components/Text'
+export { Tab, Tabs } from './components/Tabs'
+export { PrimaryTabList, PrimaryTabPanel, PrimaryTabPanels, PrimaryTabs } from './components/PrimaryTabs'
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index e874a0f7..689cd39e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1455,9 +1455,9 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "20.11.1",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.1.tgz",
-      "integrity": "sha512-DsXojJUES2M+FE8CpptJTKpg+r54moV9ZEncPstni1WHFmTcCzeFLnMFfyhCVS8XNOy/OQG+8lVxRLRrVHmV5A==",
+      "version": "20.11.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.3.tgz",
+      "integrity": "sha512-nrlmbvGPNGaj84IJZXMPhQuCMEVTT/hXZMJJG/aIqVL9fKxqk814sGGtJA4GI6hpJSLQjpi6cn0Qx9eOf9SDVg==",
       "dev": true,
       "dependencies": {
         "undici-types": "~5.26.4"
@@ -1470,9 +1470,9 @@
       "dev": true
     },
     "node_modules/@types/react": {
-      "version": "18.2.47",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.47.tgz",
-      "integrity": "sha512-xquNkkOirwyCgoClNk85BjP+aqnIS+ckAJ8i37gAbDs14jfW/J23f2GItAf33oiUPQnqNMALiFeoM9Y5mbjpVQ==",
+      "version": "18.2.48",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.48.tgz",
+      "integrity": "sha512-qboRCl6Ie70DQQG9hhNREz81jqC1cs9EVNcjQ1AU+jH6NFfSAhVVbrrY/+nSF+Bsk4AOwm9Qa61InvMCyV+H3w==",
       "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
@@ -1502,16 +1502,16 @@
       "dev": true
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "6.18.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.18.1.tgz",
-      "integrity": "sha512-nISDRYnnIpk7VCFrGcu1rnZfM1Dh9LRHnfgdkjcbi/l7g16VYRri3TjXi9Ir4lOZSw5N/gnV/3H7jIPQ8Q4daA==",
+      "version": "6.19.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.19.0.tgz",
+      "integrity": "sha512-DUCUkQNklCQYnrBSSikjVChdc84/vMPDQSgJTHBZ64G9bA9w0Crc0rd2diujKbTdp6w2J47qkeHQLoi0rpLCdg==",
       "dev": true,
       "dependencies": {
         "@eslint-community/regexpp": "^4.5.1",
-        "@typescript-eslint/scope-manager": "6.18.1",
-        "@typescript-eslint/type-utils": "6.18.1",
-        "@typescript-eslint/utils": "6.18.1",
-        "@typescript-eslint/visitor-keys": "6.18.1",
+        "@typescript-eslint/scope-manager": "6.19.0",
+        "@typescript-eslint/type-utils": "6.19.0",
+        "@typescript-eslint/utils": "6.19.0",
+        "@typescript-eslint/visitor-keys": "6.19.0",
         "debug": "^4.3.4",
         "graphemer": "^1.4.0",
         "ignore": "^5.2.4",
@@ -1537,15 +1537,15 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "6.18.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.18.1.tgz",
-      "integrity": "sha512-zct/MdJnVaRRNy9e84XnVtRv9Vf91/qqe+hZJtKanjojud4wAVy/7lXxJmMyX6X6J+xc6c//YEWvpeif8cAhWA==",
+      "version": "6.19.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.19.0.tgz",
+      "integrity": "sha512-1DyBLG5SH7PYCd00QlroiW60YJ4rWMuUGa/JBV0iZuqi4l4IK3twKPq5ZkEebmGqRjXWVgsUzfd3+nZveewgow==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "6.18.1",
-        "@typescript-eslint/types": "6.18.1",
-        "@typescript-eslint/typescript-estree": "6.18.1",
-        "@typescript-eslint/visitor-keys": "6.18.1",
+        "@typescript-eslint/scope-manager": "6.19.0",
+        "@typescript-eslint/types": "6.19.0",
+        "@typescript-eslint/typescript-estree": "6.19.0",
+        "@typescript-eslint/visitor-keys": "6.19.0",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -1565,13 +1565,13 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "6.18.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.18.1.tgz",
-      "integrity": "sha512-BgdBwXPFmZzaZUuw6wKiHKIovms97a7eTImjkXCZE04TGHysG+0hDQPmygyvgtkoB/aOQwSM/nWv3LzrOIQOBw==",
+      "version": "6.19.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.19.0.tgz",
+      "integrity": "sha512-dO1XMhV2ehBI6QN8Ufi7I10wmUovmLU0Oru3n5LVlM2JuzB4M+dVphCPLkVpKvGij2j/pHBWuJ9piuXx+BhzxQ==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "6.18.1",
-        "@typescript-eslint/visitor-keys": "6.18.1"
+        "@typescript-eslint/types": "6.19.0",
+        "@typescript-eslint/visitor-keys": "6.19.0"
       },
       "engines": {
         "node": "^16.0.0 || >=18.0.0"
@@ -1582,13 +1582,13 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "6.18.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.18.1.tgz",
-      "integrity": "sha512-wyOSKhuzHeU/5pcRDP2G2Ndci+4g653V43gXTpt4nbyoIOAASkGDA9JIAgbQCdCkcr1MvpSYWzxTz0olCn8+/Q==",
+      "version": "6.19.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.19.0.tgz",
+      "integrity": "sha512-mcvS6WSWbjiSxKCwBcXtOM5pRkPQ6kcDds/juxcy/727IQr3xMEcwr/YLHW2A2+Fp5ql6khjbKBzOyjuPqGi/w==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "6.18.1",
-        "@typescript-eslint/utils": "6.18.1",
+        "@typescript-eslint/typescript-estree": "6.19.0",
+        "@typescript-eslint/utils": "6.19.0",
         "debug": "^4.3.4",
         "ts-api-utils": "^1.0.1"
       },
@@ -1609,9 +1609,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "6.18.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.18.1.tgz",
-      "integrity": "sha512-4TuMAe+tc5oA7wwfqMtB0Y5OrREPF1GeJBAjqwgZh1lEMH5PJQgWgHGfYufVB51LtjD+peZylmeyxUXPfENLCw==",
+      "version": "6.19.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.19.0.tgz",
+      "integrity": "sha512-lFviGV/vYhOy3m8BJ/nAKoAyNhInTdXpftonhWle66XHAtT1ouBlkjL496b5H5hb8dWXHwtypTqgtb/DEa+j5A==",
       "dev": true,
       "engines": {
         "node": "^16.0.0 || >=18.0.0"
@@ -1622,13 +1622,13 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "6.18.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.18.1.tgz",
-      "integrity": "sha512-fv9B94UAhywPRhUeeV/v+3SBDvcPiLxRZJw/xZeeGgRLQZ6rLMG+8krrJUyIf6s1ecWTzlsbp0rlw7n9sjufHA==",
+      "version": "6.19.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.19.0.tgz",
+      "integrity": "sha512-o/zefXIbbLBZ8YJ51NlkSAt2BamrK6XOmuxSR3hynMIzzyMY33KuJ9vuMdFSXW+H0tVvdF9qBPTHA91HDb4BIQ==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "6.18.1",
-        "@typescript-eslint/visitor-keys": "6.18.1",
+        "@typescript-eslint/types": "6.19.0",
+        "@typescript-eslint/visitor-keys": "6.19.0",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
@@ -1650,17 +1650,17 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "6.18.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.18.1.tgz",
-      "integrity": "sha512-zZmTuVZvD1wpoceHvoQpOiewmWu3uP9FuTWo8vqpy2ffsmfCE8mklRPi+vmnIYAIk9t/4kOThri2QCDgor+OpQ==",
+      "version": "6.19.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.19.0.tgz",
+      "integrity": "sha512-QR41YXySiuN++/dC9UArYOg4X86OAYP83OWTewpVx5ct1IZhjjgTLocj7QNxGhWoTqknsgpl7L+hGygCO+sdYw==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
         "@types/json-schema": "^7.0.12",
         "@types/semver": "^7.5.0",
-        "@typescript-eslint/scope-manager": "6.18.1",
-        "@typescript-eslint/types": "6.18.1",
-        "@typescript-eslint/typescript-estree": "6.18.1",
+        "@typescript-eslint/scope-manager": "6.19.0",
+        "@typescript-eslint/types": "6.19.0",
+        "@typescript-eslint/typescript-estree": "6.19.0",
         "semver": "^7.5.4"
       },
       "engines": {
@@ -1675,12 +1675,12 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "6.18.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.18.1.tgz",
-      "integrity": "sha512-/kvt0C5lRqGoCfsbmm7/CwMqoSkY3zzHLIjdhHZQW3VFrnz7ATecOHR7nb7V+xn4286MBxfnQfQhAmCI0u+bJA==",
+      "version": "6.19.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.19.0.tgz",
+      "integrity": "sha512-hZaUCORLgubBvtGpp1JEFEazcuEdfxta9j4iUwdSAr7mEsYYAp3EAUyCZk3VEEqGj6W+AV4uWyrDGtrlawAsgQ==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "6.18.1",
+        "@typescript-eslint/types": "6.19.0",
         "eslint-visitor-keys": "^3.4.1"
       },
       "engines": {
@@ -1745,26 +1745,26 @@
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.4.13",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.13.tgz",
-      "integrity": "sha512-zGUdmB3j3Irn9z51GXLJ5s0EAHxmsm5/eXl0y6MBaajMeOAaiT4+zaDoxui4Ets98dwIRr8BBaqXXHtHSfm+KA==",
+      "version": "3.4.14",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.14.tgz",
+      "integrity": "sha512-ro4Zzl/MPdWs7XwxT7omHRxAjMbDFRZEEjD+2m3NBf8YzAe3HuoSEZosXQo+m1GQ1G3LQ1LdmNh1RKTYe+ssEg==",
       "dev": true,
       "dependencies": {
         "@babel/parser": "^7.23.6",
-        "@vue/shared": "3.4.13",
+        "@vue/shared": "3.4.14",
         "entities": "^4.5.0",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.0.2"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.4.13",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.13.tgz",
-      "integrity": "sha512-XSNbpr5Rs3kCfVAmBqMu/HDwOS+RL6y28ZZjDlnDUuf146pRWt2sQkwhsOYc9uu2lxjjJy2NcyOkK7MBLVEc7w==",
+      "version": "3.4.14",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.14.tgz",
+      "integrity": "sha512-nOZTY+veWNa0DKAceNWxorAbWm0INHdQq7cejFaWM1WYnoNSJbSEKYtE7Ir6lR/+mo9fttZpPVI9ZFGJ1juUEQ==",
       "dev": true,
       "dependencies": {
-        "@vue/compiler-core": "3.4.13",
-        "@vue/shared": "3.4.13"
+        "@vue/compiler-core": "3.4.14",
+        "@vue/shared": "3.4.14"
       }
     },
     "node_modules/@vue/language-core": {
@@ -1793,9 +1793,9 @@
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.4.13",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.13.tgz",
-      "integrity": "sha512-56crFKLPpzk85WXX1L1c0QzPOuoapWlPVys8eMG8kkRmqdMjWUqK8KpFdE2d7BQA4CEbXwyyHPq6MpFr8H9rcg==",
+      "version": "3.4.14",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.14.tgz",
+      "integrity": "sha512-nmi3BtLpvqXAWoRZ6HQ+pFJOHBU4UnH3vD3opgmwXac7vhaHKA9nj1VeGjMggdB9eLtW83eHyPCmOU1qzdsC7Q==",
       "dev": true
     },
     "node_modules/@webassemblyjs/ast": {
@@ -2394,9 +2394,9 @@
       "dev": true
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.630",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.630.tgz",
-      "integrity": "sha512-osHqhtjojpCsACVnuD11xO5g9xaCyw7Qqn/C2KParkMv42i8jrJJgx3g7mkHfpxwhy9MnOJr8+pKOdZ7qzgizg==",
+      "version": "1.4.632",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.632.tgz",
+      "integrity": "sha512-JGmudTwg7yxMYvR/gWbalqqQiyu7WTFv2Xu3vw4cJHXPFxNgAk0oy8UHaer8nLF4lZJa+rNoj6GsrKIVJTV6Tw==",
       "dev": true
     },
     "node_modules/emoji-regex": {
@@ -4675,9 +4675,9 @@
       }
     },
     "node_modules/vite-plugin-dts": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/vite-plugin-dts/-/vite-plugin-dts-3.7.0.tgz",
-      "integrity": "sha512-np1uPaYzu98AtPReB8zkMnbjwcNHOABsLhqVOf81b3ol9b5M2wPcAVs8oqPnOpr6Us+7yDXVauwkxsk5+ldmRA==",
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/vite-plugin-dts/-/vite-plugin-dts-3.7.1.tgz",
+      "integrity": "sha512-VZJckNFpVfRAkmOxhGT5OgTUVWVXxkNQqLpBUuiNGAr9HbtvmvsPLo2JB3Xhn+o/Z9+CT6YZfYa4bX9SGR5hNw==",
       "dev": true,
       "dependencies": {
         "@microsoft/api-extractor": "7.39.0",
diff --git a/src/main.tsx b/src/main.tsx
index 74cea1fa..0404512f 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,8 +1,10 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { Loader } from '../dist/components/Loader';
-import {Button} from '../dist/components/Button';
-import {Text} from '../dist/components/Text';
+import { Button } from '../dist/components/Button';
+import { Text } from '../dist/components/Text';
+import { Tabs, Tab } from '../dist/components/Tabs';
+import {PrimaryTabList, PrimaryTabPanel, PrimaryTabPanels, PrimaryTabs} from '../dist/components/PrimaryTabs';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
@@ -10,6 +12,30 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
       <Loader color='red' />
       <Button> button </Button>
       <Text color='blue' size='lg'>this is a Text</Text>
+
+      <Tabs preSelectedTab={0} >
+        <Tab title='tab1'>
+          test data for tab 1
+        </Tab>
+        <Tab title='tab2'>
+          test data for tab 2
+        </Tab>
+      </Tabs>
+
+
+      <PrimaryTabs className='derivs-accounts-list'>
+                <PrimaryTabList list={['primary tab 1', 'primary tab 2']} />
+                <PrimaryTabPanels>
+                    <PrimaryTabPanel>
+                        primary tab 1 content
+                    </PrimaryTabPanel>
+                    <PrimaryTabPanel>
+                        primary tab 2 content
+                    </PrimaryTabPanel>
+                </PrimaryTabPanels>
+            </PrimaryTabs>
     </>
+
+
   </React.StrictMode>,
 )

From f2f78e96d4de96a1b004bac1b6484fb2d01cae73 Mon Sep 17 00:00:00 2001
From: shayan khaleghparast <iman@regentmarkets.com>
Date: Tue, 16 Jan 2024 12:44:56 +0800
Subject: [PATCH 2/8] fix: added missing EOF new line

---
 lib/main.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/main.ts b/lib/main.ts
index 18dbcecc..ed3ed117 100644
--- a/lib/main.ts
+++ b/lib/main.ts
@@ -2,4 +2,4 @@ export { Loader } from './components/Loader'
 export { Button } from './components/Button'
 export { Text } from './components/Text'
 export { Tab, Tabs } from './components/Tabs'
-export { PrimaryTabList, PrimaryTabPanel, PrimaryTabPanels, PrimaryTabs } from './components/PrimaryTabs'
\ No newline at end of file
+export { PrimaryTabList, PrimaryTabPanel, PrimaryTabPanels, PrimaryTabs } from './components/PrimaryTabs'

From 6f5c65878a84ca0483ff2452e6260707626f95fa Mon Sep 17 00:00:00 2001
From: shayan khaleghparast <iman@regentmarkets.com>
Date: Wed, 17 Jan 2024 11:22:23 +0800
Subject: [PATCH 3/8] refactor: refactored Tabs and replace classnames with
 clsx

---
 lib/components/Button/index.tsx               |  4 +-
 lib/components/Loader/index.tsx               |  4 +-
 .../PrimaryTabs/PrimaryTabList.scss           | 33 ----------------
 lib/components/PrimaryTabs/PrimaryTabList.tsx | 29 --------------
 .../PrimaryTabs/PrimaryTabPanel.tsx           |  7 ----
 .../PrimaryTabs/PrimaryTabPanels.tsx          | 18 ---------
 lib/components/PrimaryTabs/PrimaryTabs.tsx    | 34 ----------------
 lib/components/PrimaryTabs/index.ts           |  6 ---
 lib/components/Tabs/TabTitle.tsx              | 17 +++++---
 lib/components/Tabs/Tabs.scss                 | 38 +++++++++++++++++-
 lib/components/Tabs/Tabs.tsx                  | 10 +++--
 lib/components/Text/index.tsx                 |  4 +-
 lib/main.ts                                   |  2 +-
 package-lock.json                             | 39 ++++++++++---------
 package.json                                  |  8 ++--
 src/main.tsx                                  | 31 +++++++--------
 src/style.scss                                | 11 ++++++
 vite.config.ts                                |  2 +-
 18 files changed, 111 insertions(+), 186 deletions(-)
 delete mode 100644 lib/components/PrimaryTabs/PrimaryTabList.scss
 delete mode 100644 lib/components/PrimaryTabs/PrimaryTabList.tsx
 delete mode 100644 lib/components/PrimaryTabs/PrimaryTabPanel.tsx
 delete mode 100644 lib/components/PrimaryTabs/PrimaryTabPanels.tsx
 delete mode 100644 lib/components/PrimaryTabs/PrimaryTabs.tsx
 delete mode 100644 lib/components/PrimaryTabs/index.ts
 create mode 100644 src/style.scss

diff --git a/lib/components/Button/index.tsx b/lib/components/Button/index.tsx
index 49709f0f..ad4ba144 100644
--- a/lib/components/Button/index.tsx
+++ b/lib/components/Button/index.tsx
@@ -1,5 +1,5 @@
 import { ComponentProps, CSSProperties, FC, PropsWithChildren, ReactElement } from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { TGenericSizes } from '../../types';
 import { Loader } from '../Loader';
 import { Text } from '../Text';
@@ -42,7 +42,7 @@ export const Button: FC<PropsWithChildren<ButtonProps>> = ({
 }) => {
     const isContained = variant === 'contained';
 
-    const buttonClassNames = classNames(
+    const buttonClassNames = clsx(
         'derivs-button',
         `derivs-button__size--${size}`,
         `derivs-button__variant--${variant}`,
diff --git a/lib/components/Loader/index.tsx b/lib/components/Loader/index.tsx
index 613b8a9e..d300ad37 100644
--- a/lib/components/Loader/index.tsx
+++ b/lib/components/Loader/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import './Loader.scss';
 
 type TProps = {
@@ -10,7 +10,7 @@ type TProps = {
 
 export const Loader: React.FC<TProps> = ({ color = '#85ACB0', isFullScreen = true, className }) => (
     <div
-        className={classNames('derivs-loader', { 'derivs-loader--fullscreen': isFullScreen }, className)}
+        className={clsx('derivs-loader', { 'derivs-loader--fullscreen': isFullScreen }, className)}
         data-testid='dt_derivs-loader'
     >
         <span className='derivs-loader__element' role='span' style={{ backgroundColor: color }} />
diff --git a/lib/components/PrimaryTabs/PrimaryTabList.scss b/lib/components/PrimaryTabs/PrimaryTabList.scss
deleted file mode 100644
index 65a409cf..00000000
--- a/lib/components/PrimaryTabs/PrimaryTabList.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-.derivs-tabs {
-    &-list {
-        display: grid;
-        grid-auto-columns: 1fr;
-        position: relative;
-        background-color: #f2f3f4;
-        height: 5rem;
-        border-radius: 0.7rem;
-
-        &-item {
-            background: inherit;
-            border: none;
-            grid-row: 1;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            cursor: pointer;
-            font-size: 1.6rem;
-
-            &--active {
-                font-weight: bold;
-                background-color: #ffffff;
-                margin: 0.6rem;
-                border-radius: 0.5rem;
-                color: var(--system-light-1-prominent-text, #333);
-            }
-
-            &--disabled {
-                color: #999999;
-            }
-        }
-    }
-}
diff --git a/lib/components/PrimaryTabs/PrimaryTabList.tsx b/lib/components/PrimaryTabs/PrimaryTabList.tsx
deleted file mode 100644
index 772961b1..00000000
--- a/lib/components/PrimaryTabs/PrimaryTabList.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-import { useTabs } from './PrimaryTabs';
-import './PrimaryTabList.scss';
-
-type PrimaryTabListProps = {
-    list: string[];
-};
-
-const PrimaryTabList = ({ list }: PrimaryTabListProps) => {
-    const { activeTabIndex, setActiveTabIndex } = useTabs();
-
-    return (
-        <div className='derivs-tabs-list' data-list-count={list.length}>
-            {list.map((tab, i) => (
-                <button
-                    className={`derivs-tabs-list-item derivs-tabs-list-item--${
-                        i === activeTabIndex ? 'active' : 'disabled'
-                    }`}
-                    key={i}
-                    onClick={() => setActiveTabIndex(i)}
-                >
-                    {tab}
-                </button>
-            ))}
-        </div>
-    );
-};
-
-export default PrimaryTabList;
diff --git a/lib/components/PrimaryTabs/PrimaryTabPanel.tsx b/lib/components/PrimaryTabs/PrimaryTabPanel.tsx
deleted file mode 100644
index 3b773d4f..00000000
--- a/lib/components/PrimaryTabs/PrimaryTabPanel.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-
-const PrimaryTabPanel = ({ children }: React.PropsWithChildren<unknown>) => {
-    return <div>{children}</div>;
-};
-
-export default PrimaryTabPanel;
diff --git a/lib/components/PrimaryTabs/PrimaryTabPanels.tsx b/lib/components/PrimaryTabs/PrimaryTabPanels.tsx
deleted file mode 100644
index 30ebaa3b..00000000
--- a/lib/components/PrimaryTabs/PrimaryTabPanels.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React, { Children } from 'react';
-import { useTabs } from './PrimaryTabs';
-
-const PrimaryTabPanels = ({ children }: React.PropsWithChildren<unknown>) => {
-    const { activeTabIndex } = useTabs();
-
-    return (
-        <div>
-            {Children.map(children, (child, index) => {
-                if (index !== activeTabIndex) return undefined;
-
-                return child;
-            })}
-        </div>
-    );
-};
-
-export default PrimaryTabPanels;
diff --git a/lib/components/PrimaryTabs/PrimaryTabs.tsx b/lib/components/PrimaryTabs/PrimaryTabs.tsx
deleted file mode 100644
index 4e368608..00000000
--- a/lib/components/PrimaryTabs/PrimaryTabs.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React, { createContext, useContext, useState } from 'react';
-
-type TTabContext = {
-    activeTabIndex: number;
-    setActiveTabIndex: React.Dispatch<React.SetStateAction<number>>;
-};
-
-const TabsContext = createContext<TTabContext | null>(null);
-
-export const useTabs = () => {
-    const context = useContext(TabsContext);
-
-    if (!context) {
-        throw new Error('Seems you forgot to wrap the components in "<PrimaryTabs />"');
-    }
-
-    return context;
-};
-
-type TTabsProps = {
-    className?: string;
-};
-
-export const PrimaryTabs = ({ children, className }: React.PropsWithChildren<TTabsProps>) => {
-    const [activeTabIndex, setActiveTabIndex] = useState(0);
-
-    return (
-        <TabsContext.Provider value={{ activeTabIndex, setActiveTabIndex }}>
-            <div className={className}>{children}</div>
-        </TabsContext.Provider>
-    );
-};
-
-export default PrimaryTabs;
diff --git a/lib/components/PrimaryTabs/index.ts b/lib/components/PrimaryTabs/index.ts
deleted file mode 100644
index e3a3bfdd..00000000
--- a/lib/components/PrimaryTabs/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import PrimaryTabList from './PrimaryTabList';
-import PrimaryTabPanel from './PrimaryTabPanel';
-import PrimaryTabPanels from './PrimaryTabPanels';
-import PrimaryTabs from './PrimaryTabs';
-
-export { PrimaryTabList, PrimaryTabPanel, PrimaryTabPanels, PrimaryTabs };
diff --git a/lib/components/Tabs/TabTitle.tsx b/lib/components/Tabs/TabTitle.tsx
index ceaeb873..3da95335 100644
--- a/lib/components/Tabs/TabTitle.tsx
+++ b/lib/components/Tabs/TabTitle.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useCallback } from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { Text } from '../Text';
 
 export type TabTitleProps = {
@@ -8,18 +8,25 @@ export type TabTitleProps = {
     isActive?: boolean;
     setSelectedTab: (index: number) => void;
     title: string;
+    className?: string;
+    variant: 'primary' | 'secondary';
 };
 
-const TabTitle: FC<TabTitleProps> = ({ icon, index, isActive, setSelectedTab, title }) => {
+const TabTitle: FC<TabTitleProps> = ({ icon, index, isActive, setSelectedTab, title,className,variant }) => {
     const handleOnClick = useCallback(() => {
         setSelectedTab(index);
     }, [setSelectedTab, index]);
 
+    const classNameVariants = {
+        primary : `derivs-primary-tabs__btn--active`,
+        secondary : `derivs-secondary-tabs__btn--active`,
+    }
+
     return (
         <button
-            className={classNames('derivs-tabs__btn', {
-                'derivs-tabs__btn--active': isActive,
-            })}
+            className={clsx(`derivs-${variant + '-'}tabs__btn`,{
+                [classNameVariants[variant]] : isActive,
+            }, className)}
             onClick={handleOnClick}
         >
             {icon}
diff --git a/lib/components/Tabs/Tabs.scss b/lib/components/Tabs/Tabs.scss
index 981999cb..2a1a585a 100644
--- a/lib/components/Tabs/Tabs.scss
+++ b/lib/components/Tabs/Tabs.scss
@@ -1,8 +1,8 @@
-.derivs-tabs {
+
+.derivs-secondary-tabs {
     display: flex;
     justify-content: center;
     width: 100%;
-
     &__btn {
         display: inline-flex;
         gap: 0.8rem;
@@ -23,3 +23,37 @@
         }
     }
 }
+
+.derivs-primary-tabs {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    background-color: #f2f3f4;
+    padding: 10px;
+    box-sizing: border-box;
+
+    &__btn {
+        display: inline-flex;
+        gap: 0.8rem;
+        align-items: center;
+        justify-content: center;
+        width: 50%;
+        border: none;
+        border-bottom: 0.2rem solid var(--light-7-secondary-background, #f2f3f4);
+        background: none;
+        padding: 0.5rem 0;
+        cursor: pointer;
+        span{
+            color: #999;
+        }
+        &--active {
+            width: 50%;
+            border: none;
+            background: white;
+            border-radius: 10px;
+            span{
+                color: #000;
+            }
+        }
+    }
+}
diff --git a/lib/components/Tabs/Tabs.tsx b/lib/components/Tabs/Tabs.tsx
index e6e88c19..e3573b1f 100644
--- a/lib/components/Tabs/Tabs.tsx
+++ b/lib/components/Tabs/Tabs.tsx
@@ -1,27 +1,31 @@
 import React, { FC, ReactElement, useState } from 'react';
 import TabTitle, { TabTitleProps } from './TabTitle';
+import clsx from 'clsx';
 import './Tabs.scss';
 
 type TabsProps = {
     children: ReactElement<TabTitleProps>[];
     preSelectedTab?: number;
     wrapperClassName?: string;
+    className?: string;
+    variant?: 'primary' | 'secondary';
 };
 
-const Tabs: FC<TabsProps> = ({ children, preSelectedTab, wrapperClassName }): JSX.Element => {
+const Tabs: FC<TabsProps> = ({ children, preSelectedTab, wrapperClassName, className, variant='primary' }): JSX.Element => {
     const [selectedTabIndex, setSelectedTabIndex] = useState(preSelectedTab || 0);
 
     return (
         <div className={wrapperClassName}>
-            <div className='derivs-tabs'>
+            <div className={clsx(`derivs-${variant+'-'}tabs`,className)}>
                 {children.map((item, index) => (
                     <TabTitle
                         icon={item.props.icon}
                         index={index}
                         isActive={index === selectedTabIndex}
-                        key={`derivs-tab-${item.props.title}`}
+                        key={`derivs-${variant+'-'}tab-${item.props.title}`}
                         setSelectedTab={setSelectedTabIndex}
                         title={item.props.title}
+                        variant={variant}
                     />
                 ))}
             </div>
diff --git a/lib/components/Text/index.tsx b/lib/components/Text/index.tsx
index 1ce74e42..3bf45bbb 100644
--- a/lib/components/Text/index.tsx
+++ b/lib/components/Text/index.tsx
@@ -1,5 +1,5 @@
 import React, { CSSProperties, ElementType, ReactNode } from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 import './Text.scss';
 
@@ -28,7 +28,7 @@ export const Text: React.FC<TextProps> = ({
     weight = 'normal',
     className
 }) => {
-    const textClassNames = classNames(
+    const textClassNames = clsx(
         'deriv-text',
         `derivs-text__size--${size}`,
         `derivs-text__weight--${weight}`,
diff --git a/lib/main.ts b/lib/main.ts
index ed3ed117..c80c6c54 100644
--- a/lib/main.ts
+++ b/lib/main.ts
@@ -2,4 +2,4 @@ export { Loader } from './components/Loader'
 export { Button } from './components/Button'
 export { Text } from './components/Text'
 export { Tab, Tabs } from './components/Tabs'
-export { PrimaryTabList, PrimaryTabPanel, PrimaryTabPanels, PrimaryTabs } from './components/PrimaryTabs'
+
diff --git a/package-lock.json b/package-lock.json
index 689cd39e..7f28c5c6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@deriv-com/ui",
-  "version": "0.0.1-beta.3",
+  "version": "0.0.1-beta.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@deriv-com/ui",
-      "version": "0.0.1-beta.3",
+      "version": "0.0.1-beta.4",
       "devDependencies": {
         "@types/node": "^20.10.7",
         "@types/react": "^18.2.43",
@@ -14,6 +14,7 @@
         "@typescript-eslint/eslint-plugin": "^6.14.0",
         "@typescript-eslint/parser": "^6.14.0",
         "@vitejs/plugin-react": "^4.2.1",
+        "clsx": "^2.1.0",
         "eslint": "^8.55.0",
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-refresh": "^0.4.5",
@@ -27,9 +28,6 @@
         "vite-plugin-classname": "^0.0.3",
         "vite-plugin-dts": "^3.7.0",
         "vite-plugin-lib-inject-css": "^1.3.0"
-      },
-      "peerDependencies": {
-        "classnames": "^2.5.1"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -1455,9 +1453,9 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "20.11.3",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.3.tgz",
-      "integrity": "sha512-nrlmbvGPNGaj84IJZXMPhQuCMEVTT/hXZMJJG/aIqVL9fKxqk814sGGtJA4GI6hpJSLQjpi6cn0Qx9eOf9SDVg==",
+      "version": "20.11.4",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.4.tgz",
+      "integrity": "sha512-6I0fMH8Aoy2lOejL3s4LhyIYX34DPwY8bl5xlNjBvUEk8OHrcuzsFt+Ied4LvJihbtXPM+8zUqdydfIti86v9g==",
       "dev": true,
       "dependencies": {
         "undici-types": "~5.26.4"
@@ -2164,9 +2162,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001576",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001576.tgz",
-      "integrity": "sha512-ff5BdakGe2P3SQsMsiqmt1Lc8221NR1VzHj5jXN5vBny9A6fpze94HiVV/n7XRosOlsShJcvMv5mdnpjOGCEgg==",
+      "version": "1.0.30001577",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001577.tgz",
+      "integrity": "sha512-rs2ZygrG1PNXMfmncM0B5H1hndY5ZCC9b5TkFaVNfZ+AUlyqcMyVIQtc3fsezi0NUCk5XZfDf9WS6WxMxnfdrg==",
       "dev": true,
       "funding": [
         {
@@ -2246,11 +2244,14 @@
         "node": ">=6.0"
       }
     },
-    "node_modules/classnames": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
-      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
-      "peer": true
+    "node_modules/clsx": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz",
+      "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
     },
     "node_modules/color-convert": {
       "version": "1.9.3",
@@ -2394,9 +2395,9 @@
       "dev": true
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.632",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.632.tgz",
-      "integrity": "sha512-JGmudTwg7yxMYvR/gWbalqqQiyu7WTFv2Xu3vw4cJHXPFxNgAk0oy8UHaer8nLF4lZJa+rNoj6GsrKIVJTV6Tw==",
+      "version": "1.4.633",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.633.tgz",
+      "integrity": "sha512-7BvxzXrHFliyQ1oZc6NRMjyEaKOO1Ma1NY98sFZofogWlm+klLWSgrDw7EhatiMgi4R4NV+iWxDdxuIKXtPbOw==",
       "dev": true
     },
     "node_modules/emoji-regex": {
diff --git a/package.json b/package.json
index c46e09a7..7dc32e15 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@deriv-com/ui",
   "private": false,
-  "version": "0.0.1-beta.3",
+  "version": "0.0.1-beta.4",
   "type": "module",
   "main": "dist/main.js",
   "files": [
@@ -13,13 +13,10 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc --p ./tsconfig-build.json && vite build",
-    "prepublishOnly": "npm run build",
+    "prepublish": "npm run build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
-  "peerDependencies": {
-    "classnames": "^2.5.1"
-  },
   "devDependencies": {
     "@types/node": "^20.10.7",
     "@types/react": "^18.2.43",
@@ -27,6 +24,7 @@
     "@typescript-eslint/eslint-plugin": "^6.14.0",
     "@typescript-eslint/parser": "^6.14.0",
     "@vitejs/plugin-react": "^4.2.1",
+    "clsx": "^2.1.0",
     "eslint": "^8.55.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
diff --git a/src/main.tsx b/src/main.tsx
index 0404512f..e0c482cc 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -3,8 +3,9 @@ import ReactDOM from 'react-dom/client'
 import { Loader } from '../dist/components/Loader';
 import { Button } from '../dist/components/Button';
 import { Text } from '../dist/components/Text';
-import { Tabs, Tab } from '../dist/components/Tabs';
-import {PrimaryTabList, PrimaryTabPanel, PrimaryTabPanels, PrimaryTabs} from '../dist/components/PrimaryTabs';
+import { Tab, Tabs } from '../dist/components/Tabs';
+// import {PrimaryTab, PrimaryTabs} from '../dist/components/PrimaryTabs';
+import './style.scss'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
@@ -13,27 +14,23 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
       <Button> button </Button>
       <Text color='blue' size='lg'>this is a Text</Text>
 
-      <Tabs preSelectedTab={0} >
-        <Tab title='tab1'>
+      <Tabs variant='primary' preSelectedTab={1} >
+        <Tab title='secondary tab 1'>
           test data for tab 1
         </Tab>
-        <Tab title='tab2'>
+        <Tab title='secondary tab 2'>
           test data for tab 2
         </Tab>
       </Tabs>
 
-
-      <PrimaryTabs className='derivs-accounts-list'>
-                <PrimaryTabList list={['primary tab 1', 'primary tab 2']} />
-                <PrimaryTabPanels>
-                    <PrimaryTabPanel>
-                        primary tab 1 content
-                    </PrimaryTabPanel>
-                    <PrimaryTabPanel>
-                        primary tab 2 content
-                    </PrimaryTabPanel>
-                </PrimaryTabPanels>
-            </PrimaryTabs>
+      <Tabs variant='secondary' preSelectedTab={1} >
+        <Tab title='secondary tab 1'>
+          test data for tab 1
+        </Tab>
+        <Tab title='secondary tab 2'>
+          test data for tab 2
+        </Tab>
+      </Tabs>
     </>
 
 
diff --git a/src/style.scss b/src/style.scss
new file mode 100644
index 00000000..f3f30df5
--- /dev/null
+++ b/src/style.scss
@@ -0,0 +1,11 @@
+.test {
+    background-color: purple;
+}
+
+.test2{
+    background-color: red;
+}
+
+.test2 span{
+    color: blue;
+}
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index a9281cc1..82fef373 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -32,7 +32,7 @@ export default defineConfig({
     },
     copyPublicDir: false,
     rollupOptions: {
-      external: ['react', 'react/jsx-runtime', 'classnames'],
+      external: ['react', 'react/jsx-runtime'],
       input: Object.fromEntries(
         glob.sync('lib/**/*.{ts,tsx}').map(file => {
           return [

From fe44da2099f54a949c778aae5bcd261d14fda7bb Mon Sep 17 00:00:00 2001
From: shayan khaleghparast <iman@regentmarkets.com>
Date: Wed, 17 Jan 2024 11:44:42 +0800
Subject: [PATCH 4/8] refactor: replaced tab index number with tab label

---
 lib/components/Tabs/TabTitle.tsx | 15 +++++++-------
 lib/components/Tabs/Tabs.tsx     | 34 +++++++++++++++++---------------
 src/main.tsx                     |  4 ++--
 3 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/lib/components/Tabs/TabTitle.tsx b/lib/components/Tabs/TabTitle.tsx
index 3da95335..dad7f026 100644
--- a/lib/components/Tabs/TabTitle.tsx
+++ b/lib/components/Tabs/TabTitle.tsx
@@ -4,18 +4,19 @@ import { Text } from '../Text';
 
 export type TabTitleProps = {
     icon?: React.ReactNode;
-    index: number;
+    activeTab: string;
     isActive?: boolean;
-    setSelectedTab: (index: number) => void;
+    setSelectedTab: (label: string) => void;
     title: string;
     className?: string;
     variant: 'primary' | 'secondary';
 };
 
-const TabTitle: FC<TabTitleProps> = ({ icon, index, isActive, setSelectedTab, title,className,variant }) => {
-    const handleOnClick = useCallback(() => {
-        setSelectedTab(index);
-    }, [setSelectedTab, index]);
+const TabTitle: FC<TabTitleProps> = ({ icon, activeTab, isActive, setSelectedTab, title,className,variant }) => {
+    const handleOnClick = useCallback((title: string) => {
+        console.log('title',title);
+        setSelectedTab(title);
+    }, [setSelectedTab, activeTab]);
 
     const classNameVariants = {
         primary : `derivs-primary-tabs__btn--active`,
@@ -27,7 +28,7 @@ const TabTitle: FC<TabTitleProps> = ({ icon, index, isActive, setSelectedTab, ti
             className={clsx(`derivs-${variant + '-'}tabs__btn`,{
                 [classNameVariants[variant]] : isActive,
             }, className)}
-            onClick={handleOnClick}
+            onClick={()=>handleOnClick(title)}
         >
             {icon}
             <Text weight={isActive ? 'bold' : 'normal'}>{title}</Text>
diff --git a/lib/components/Tabs/Tabs.tsx b/lib/components/Tabs/Tabs.tsx
index e3573b1f..5123c723 100644
--- a/lib/components/Tabs/Tabs.tsx
+++ b/lib/components/Tabs/Tabs.tsx
@@ -5,31 +5,33 @@ import './Tabs.scss';
 
 type TabsProps = {
     children: ReactElement<TabTitleProps>[];
-    preSelectedTab?: number;
+    activeTab: string;
     wrapperClassName?: string;
     className?: string;
     variant?: 'primary' | 'secondary';
 };
 
-const Tabs: FC<TabsProps> = ({ children, preSelectedTab, wrapperClassName, className, variant='primary' }): JSX.Element => {
-    const [selectedTabIndex, setSelectedTabIndex] = useState(preSelectedTab || 0);
+const Tabs: FC<TabsProps> = ({ children, activeTab, wrapperClassName, className, variant = 'primary' }): JSX.Element => {
+    const [selectedTab, setSelectedTab] = useState(activeTab);
 
     return (
         <div className={wrapperClassName}>
-            <div className={clsx(`derivs-${variant+'-'}tabs`,className)}>
-                {children.map((item, index) => (
-                    <TabTitle
-                        icon={item.props.icon}
-                        index={index}
-                        isActive={index === selectedTabIndex}
-                        key={`derivs-${variant+'-'}tab-${item.props.title}`}
-                        setSelectedTab={setSelectedTabIndex}
-                        title={item.props.title}
-                        variant={variant}
-                    />
-                ))}
+            <div className={clsx(`derivs-${variant + '-'}tabs`, className)}>
+                {children.map((item) => {
+                    return (
+                        <TabTitle
+                            icon={item.props.icon}
+                            activeTab={selectedTab}
+                            isActive={item.props.title === selectedTab}
+                            key={`derivs-${variant + '-'}tab-${item.props.title}`}
+                            setSelectedTab={setSelectedTab}
+                            title={item.props.title}
+                            variant={variant}
+                        />
+                    )
+                })}
             </div>
-            {children[selectedTabIndex]}
+            {children.find((item) => item.props.title === selectedTab)}
         </div>
     );
 };
diff --git a/src/main.tsx b/src/main.tsx
index e0c482cc..2de9292a 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -14,7 +14,7 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
       <Button> button </Button>
       <Text color='blue' size='lg'>this is a Text</Text>
 
-      <Tabs variant='primary' preSelectedTab={1} >
+      <Tabs variant='primary' activeTab='secondary tab 2' >
         <Tab title='secondary tab 1'>
           test data for tab 1
         </Tab>
@@ -23,7 +23,7 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
         </Tab>
       </Tabs>
 
-      <Tabs variant='secondary' preSelectedTab={1} >
+      <Tabs variant='secondary' activeTab='secondary tab 1' >
         <Tab title='secondary tab 1'>
           test data for tab 1
         </Tab>

From 42ea14ff5ce44d788d03cd1aa360569b799a1a61 Mon Sep 17 00:00:00 2001
From: "Ali(Ako) Hosseini" <ali.hosseini@deriv.com>
Date: Wed, 17 Jan 2024 11:54:07 +0800
Subject: [PATCH 5/8] Update lib/components/Tabs/TabTitle.tsx

---
 lib/components/Tabs/TabTitle.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/components/Tabs/TabTitle.tsx b/lib/components/Tabs/TabTitle.tsx
index dad7f026..91781418 100644
--- a/lib/components/Tabs/TabTitle.tsx
+++ b/lib/components/Tabs/TabTitle.tsx
@@ -6,7 +6,7 @@ export type TabTitleProps = {
     icon?: React.ReactNode;
     activeTab: string;
     isActive?: boolean;
-    setSelectedTab: (label: string) => void;
+    setSelectedTab: (title: string) => void;
     title: string;
     className?: string;
     variant: 'primary' | 'secondary';

From 9c4a1d1a18b197cd14086684a8b46a453fa4d45c Mon Sep 17 00:00:00 2001
From: "Ali(Ako) Hosseini" <ali.hosseini@deriv.com>
Date: Wed, 17 Jan 2024 11:54:21 +0800
Subject: [PATCH 6/8] remove unused console log

---
 lib/components/Tabs/TabTitle.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/lib/components/Tabs/TabTitle.tsx b/lib/components/Tabs/TabTitle.tsx
index 91781418..68426008 100644
--- a/lib/components/Tabs/TabTitle.tsx
+++ b/lib/components/Tabs/TabTitle.tsx
@@ -14,7 +14,6 @@ export type TabTitleProps = {
 
 const TabTitle: FC<TabTitleProps> = ({ icon, activeTab, isActive, setSelectedTab, title,className,variant }) => {
     const handleOnClick = useCallback((title: string) => {
-        console.log('title',title);
         setSelectedTab(title);
     }, [setSelectedTab, activeTab]);
 

From 7487bf93dee5cc23da24f7557b13cd433066a6d4 Mon Sep 17 00:00:00 2001
From: "Ali(Ako) Hosseini" <ali.hosseini@deriv.com>
Date: Wed, 17 Jan 2024 11:54:39 +0800
Subject: [PATCH 7/8] feat: add default value to tab

---
 lib/components/Tabs/Tabs.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/components/Tabs/Tabs.tsx b/lib/components/Tabs/Tabs.tsx
index 5123c723..1fd86d23 100644
--- a/lib/components/Tabs/Tabs.tsx
+++ b/lib/components/Tabs/Tabs.tsx
@@ -12,7 +12,7 @@ type TabsProps = {
 };
 
 const Tabs: FC<TabsProps> = ({ children, activeTab, wrapperClassName, className, variant = 'primary' }): JSX.Element => {
-    const [selectedTab, setSelectedTab] = useState(activeTab);
+    const [selectedTab, setSelectedTab] = useState(activeTab || children[0].props.title);
 
     return (
         <div className={wrapperClassName}>

From a5c71827c01db2479c20e9d2dc4e9d743017c785 Mon Sep 17 00:00:00 2001
From: "Ali(Ako) Hosseini" <ali.hosseini@deriv.com>
Date: Wed, 17 Jan 2024 11:54:54 +0800
Subject: [PATCH 8/8] feat: make active tab optional

---
 lib/components/Tabs/Tabs.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/components/Tabs/Tabs.tsx b/lib/components/Tabs/Tabs.tsx
index 1fd86d23..f80399e5 100644
--- a/lib/components/Tabs/Tabs.tsx
+++ b/lib/components/Tabs/Tabs.tsx
@@ -5,7 +5,7 @@ import './Tabs.scss';
 
 type TabsProps = {
     children: ReactElement<TabTitleProps>[];
-    activeTab: string;
+    activeTab?: string;
     wrapperClassName?: string;
     className?: string;
     variant?: 'primary' | 'secondary';