fix blinking when toggling variant or isVertical

Author: adbjo

packages/components/tabs/src/tabs.tsx

@@ -77,12 +77,15 @@ const Tabs = forwardRef(function Tabs<T extends object>(
   const withAnimationReset = useCallback(
     (callback: () => void) => {
       if (variant !== previousVariant.current || isVertical !== previousIsVertical.current) {
-        cursorRef.current?.removeAttribute("data-initialized");
+        cursorRef.current?.removeAttribute("data-animated");
       }
       callback();
       previousVariant.current = variant;
       previousIsVertical.current = isVertical;
-      requestAnimationFrame(() => cursorRef.current?.setAttribute("data-initialized", "true"));
+      requestAnimationFrame(() => {
+        cursorRef.current?.setAttribute("data-animated", "true");
+        cursorRef.current?.setAttribute("data-initialized", "true");
+      });
     },
     [isVertical, variant],
   );

packages/core/theme/src/components/tabs.ts

@@ -71,9 +71,9 @@ const tabs = tv({
       "will-change-[transform,width,height]",
       "invisible",
       "data-[initialized=true]:visible",
-      "data-[initialized=true]:transition-[left,top,width,height]",
-      "data-[initialized=true]:duration-250",
-      "data-[initialized=true]:ease-out",
+      "data-[animated=true]:transition-[left,top,width,height]",
+      "data-[animated=true]:duration-250",
+      "data-[animated=true]:ease-out",
     ],
     panel: [
       "py-3",