From 7d2b4f0af00de5024e91727ab454a2988b745946 Mon Sep 17 00:00:00 2001
From: amars29 <amars@geekyants.com>
Date: Wed, 6 Dec 2023 13:32:39 +0530
Subject: [PATCH] feat: updated tabs

---
 packages/unstyled/tabs/src/Tabs.tsx | 34 +++++++++++++++++++++--------
 packages/unstyled/tabs/src/types.ts |  2 ++
 2 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/packages/unstyled/tabs/src/Tabs.tsx b/packages/unstyled/tabs/src/Tabs.tsx
index a8f9f213d9..e0f9093b71 100644
--- a/packages/unstyled/tabs/src/Tabs.tsx
+++ b/packages/unstyled/tabs/src/Tabs.tsx
@@ -1,23 +1,39 @@
 import React, { memo } from 'react';
 import { forwardRef } from 'react';
 import { TabProvider } from './TabProvider';
+import { useControllableState } from '@gluestack-ui/hooks';
 
 export const Tabs = <StyledTabs,>(
   StyledTabs: React.ComponentType<StyledTabs>
 ) =>
   memo(
     forwardRef(
-      ({ value, ...props }: StyledTabs & { value?: string }, ref?: any) => {
-        const DEFAULT_TAB = 'tab-0';
-        const [currentActiveTab, setCurrentActiveTab] = React.useState(
-          value ?? DEFAULT_TAB
-        );
-
-        const onChange = (currentValue: string) =>
-          setCurrentActiveTab(currentValue);
+      (
+        {
+          value,
+          onChange,
+          defaultValue,
+          ...props
+        }: StyledTabs & {
+          value?: string;
+          defaultValue: string;
+          onChange: (value: string) => void;
+        },
+        ref?: any
+      ) => {
+        const [currentActiveTab, setCurrentActiveTab] = useControllableState({
+          value,
+          defaultValue,
+          onChange: (val) => {
+            onChange && onChange(val);
+          },
+        });
 
         return (
-          <TabProvider currentActiveTab={currentActiveTab} onChange={onChange}>
+          <TabProvider
+            currentActiveTab={currentActiveTab}
+            onChange={setCurrentActiveTab}
+          >
             <StyledTabs {...(props as StyledTabs)} ref={ref} />
           </TabProvider>
         );
diff --git a/packages/unstyled/tabs/src/types.ts b/packages/unstyled/tabs/src/types.ts
index 9c4fe6b044..6b0ac13a56 100644
--- a/packages/unstyled/tabs/src/types.ts
+++ b/packages/unstyled/tabs/src/types.ts
@@ -7,6 +7,8 @@ export interface ITabListProps {
 }
 export interface ITabsProps {
   value?: string;
+  defaultValue: string;
+  onChange?: (value: string) => void;
 }
 export interface ITabPanelProps {
   value?: string;