From 014c2cafc5ee1e9adb4fde52200c60d7280decf8 Mon Sep 17 00:00:00 2001
From: Innei <tukon479@gmail.com>
Date: Tue, 20 May 2025 19:38:51 +0800
Subject: [PATCH] fix: tablist indicator initial position

- Modified the `Tabs` component to initialize the indicator state with `undefined` for width and position.
- Updated rendering logic in `TabsList` to conditionally apply styles based on the presence of indicator values, improving robustness.

Signed-off-by: Innei <tukon479@gmail.com>
---
 .../internal/components/src/ui/tabs/index.tsx | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/packages/internal/components/src/ui/tabs/index.tsx b/packages/internal/components/src/ui/tabs/index.tsx
index c923b1e8b..e54b6dd3a 100644
--- a/packages/internal/components/src/ui/tabs/index.tsx
+++ b/packages/internal/components/src/ui/tabs/index.tsx
@@ -8,8 +8,8 @@ const TabsIdContext = React.createContext<string | null>(null)
 const SetTabIndicatorContext = React.createContext<
   React.Dispatch<
     React.SetStateAction<{
-      w: number
-      x: number
+      w: number | undefined
+      x: number | undefined
     }>
   >
 >(() => {})
@@ -17,8 +17,8 @@ const SetTabIndicatorContext = React.createContext<
 const TabVariantContext = React.createContext<"default" | "rounded" | undefined>(undefined)
 
 const TabIndicatorContext = React.createContext<{
-  w: number
-  x: number
+  w: number | undefined
+  x: number | undefined
 } | null>(null)
 
 const Tabs: ComponentWithRef<
@@ -29,9 +29,12 @@ const Tabs: ComponentWithRef<
   HTMLDivElement
 > = ({ ref, ...props }) => {
   const { children, variant, ...rest } = props
-  const [indicator, setIndicator] = React.useState({
-    w: 0,
-    x: 0,
+  const [indicator, setIndicator] = React.useState<{
+    w: number | undefined
+    x: number | undefined
+  }>({
+    w: undefined,
+    x: undefined,
   })
   const id = React.useId()
 
@@ -68,7 +71,7 @@ const TabsList = ({
       )}
     >
       {props.children}
-      {indicator && (
+      {indicator?.x !== undefined && (
         <span
           className={cn(
             "absolute left-0 duration-200 will-change-[transform,width]",
@@ -78,7 +81,7 @@ const TabsList = ({
           )}
           style={{
             width: indicator.w,
-            transform: `translate3d(${indicator.x}px, 0, 0)`,
+            transform: indicator.x ? `translate3d(${indicator.x}px, 0, 0)` : undefined,
           }}
         />
       )}